@memori.ai/memori-react/dist/components/layouts/WebsiteAssistant/website-assistant.css

[](https://www.npmjs.com/package/@memori.ai/memori-react)  ![TypeScript Support](https

/* ============================================
   MOBILE-FIRST WEBSITE ASSISTANT LAYOUT
   Enhanced UI/UX with modern design patterns
   ============================================ */

/* ============================================
   TRIGGER BUTTON (Mobile First)
   ============================================ */

.memori-website_assistant--trigger {
    position: fixed;
    z-index: 2147483647;
    right: 0px;
    bottom: 0px;
    display: flex;
    opacity: 1;
    pointer-events: all;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    visibility: visible;
}

.memori-website_assistant--trigger-button .memori-blob .mainDiv {
    width: 64px !important;
    height: 64px !important;
    box-shadow: 0 0 0.5em 0.2em rgba(0, 0, 0, 0.15) inset, 0 0 0.15em 0 rgba(255, 255, 255, 0.9),
        0 2px 8px rgba(130, 70, 175, 0.2);
    transition: all 0.3s ease;
}

.memori-widget.memori-layout-website_assistant .memori-chat-inputs-wrapper {
    margin-bottom: var(--memori-spacing-xl);
}

.memori-website_assistant--trigger-button .memori-blob,
.memori-website_assistant--trigger-button .memori-blob .mainDiv,
.memori-website_assistant--trigger-button .memori-blob figure {
    pointer-events: none;
    touch-action: none;
}

.memori-website_assistant--trigger-button:hover .memori-blob .mainDiv {
    box-shadow: 0 0 0.6em 0.25em rgba(0, 0, 0, 0.1) inset, 0 0 0.2em 0 rgba(255, 255, 255, 0.95),
        0 4px 16px rgba(130, 70, 175, 0.3);
}

.memori-website_assistant--trigger:hover {
    transform: scale(1.05);
}

.memori-website_assistant--trigger:active {
    transform: scale(0.95);
}

.memori-website_assistant--trigger-button {
    position: relative;
    width: 64px;
    height: 64px;
    padding: 0;
    border: none !important;
    border-radius: 50%;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: none !important;
    cursor: pointer;
    transform: translate(-12px, -12px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.memori-website_assistant--trigger-button:active {
    transform: translateY(0) scale(0.95);
}

.memori-website_assistant--trigger-button .memori-blob {
    position: relative !important;
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
}

.memori-website_assistant--trigger-button .memori-blob figure {
    width: 85%;
    border-radius: 0;
    opacity: 1;
    transition: transform 0.3s ease;
}

/* Tablet and up */
@media (min-width: 601px) {
    .memori-website_assistant--trigger-button {
        width: 80px;
        height: 80px;
    }

    .memori-website_assistant--trigger-button .memori-blob .mainDiv {
        width: 80px !important;
        height: 80px !important;
    }
}

/* Desktop */
@media (min-width: 1024px) {
    .memori-website_assistant--trigger-button {
        width: 96px !important;
        height: 96px !important;
    }

    .memori-website_assistant--trigger-button .memori-blob .mainDiv {
        width: 96px !important;
        height: 96px !important;
    }
}

/* ============================================
   CLOSE BUTTON
   ============================================ */

.memori-website_assistant--close-button-wrapper {
    position: relative;
    z-index: 1001;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.memori-website_assistant--close-button-wrapper:hover {
    transform: scale(1.1);
}

.memori-website_assistant--close-button-wrapper button.memori-website_assistant--close-button {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0.75rem;
    border: none;
    background-color: var(--memori-main-background);
    box-shadow: none;
    color: var(--memori-text-color);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================
   MAIN CONTAINER (Mobile First)
   ============================================ */

.memori-widget.memori-layout-website_assistant {
    position: relative;
    font-size: var(--memori-text-size-small);
}

/*
 * Login and Position drawers are portaled to body by Headless UI.
 * When layout is WEBSITE_ASSISTANT we pass drawerClassName so they sit above the fixed panel.
 */
.memori-drawer.memori-drawer--above-website-assistant,
.memori-drawer.memori-drawer--above-website-assistant .memori-drawer--backdrop,
.memori-drawer.memori-drawer--above-website-assistant .memori-drawer--container {
    z-index: 2147483000;
}

.memori-widget.memori-layout-website_assistant .memori-website_assistant--collapsed,
.memori-widget.memori-layout-website_assistant .memori-website_assistant--expanded {
    position: fixed;
    right: 0;
    bottom: 0;
    overflow: hidden;
    width: 100vw;
    max-width: 100vw;
    border-radius: var(--memori-radius-box) var(--memori-radius-box) 0 0;
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.12), 0 -2px 8px rgba(0, 0, 0, 0.08);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.memori-widget.memori-layout-website_assistant .memori-website_assistant--collapsed {
    overflow: visible;
    height: 0;
    opacity: 0;
    pointer-events: none;
}

/* Ensure trigger button is always visible even when container is collapsed */
.memori-widget.memori-layout-website_assistant .memori-website_assistant--collapsed .memori-website_assistant--trigger {
    opacity: 1;
    pointer-events: all;
    visibility: visible;
}

.memori-widget.memori-layout-website_assistant .memori-website_assistant--expanded {
    height: min(85vh, calc(100vh - var(--memori-spacing-5xl)));
    padding: 0.5rem 0rem;
    margin-bottom: 0;
    opacity: 1;
    pointer-events: all;
}

/* Tablet */
@media (min-width: 601px) {
    .memori-widget.memori-layout-website_assistant .memori-website_assistant--collapsed,
    .memori-widget.memori-layout-website_assistant .memori-website_assistant--expanded {
        right: 0;
        width: 90vw;
        max-width: 480px;
        border-radius: var(--memori-radius-box) 0 0 0;
    }

    .memori-widget.memori-layout-website_assistant .memori-website_assistant--expanded {
        height: min(75vh, calc(100vh - var(--memori-spacing-5xl)));
    }
}

/* Desktop */
@media (min-width: 1024px) {
    .memori-widget.memori-layout-website_assistant .memori-website_assistant--collapsed,
    .memori-widget.memori-layout-website_assistant .memori-website_assistant--expanded {
        width: 480px;
        border-radius: var(--memori-radius-box) 0 0 0;
    }

    .memori-widget.memori-layout-website_assistant .memori-website_assistant--expanded {
        height: 100vh;
        border-radius: 0;
        margin-bottom: 0;
    }
}

/* ============================================
   ANIMATIONS
   ============================================ */

@keyframes showup {
    0% {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(100%);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.memori-widget.memori-layout-website_assistant .memori-website_assistant--expanded .memori-website_assistant-layout {
    animation: showup 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================
   LAYOUT STRUCTURE
   ============================================ */

.memori-widget .memori-spin.memori-website_assistant-layout {
    position: relative;
    display: flex;
    height: 100%;
    flex-direction: column;
}

.memori-widget.memori-layout-website_assistant .memori--global-background {
    background: none;
}

.memori-website_assistant-layout .memori--powered-by {
    right: auto;
    left: 50%;
    justify-content: center;
    text-align: center;
    transform: translateX(-50%);
}

.memori-widget.memori-layout-website_assistant.memori--avatar-readyplayerme
    .memori-website_assistant-layout
    .memori--powered-by,
.memori-widget.memori-layout-website_assistant.memori--avatar-readyplayerme-full
    .memori-website_assistant-layout
    .memori--powered-by,
.memori-widget.memori-layout-website_assistant.memori--avatar-customglb
    .memori-website_assistant-layout
    .memori--powered-by,
.memori-widget.memori-layout-website_assistant.memori--avatar-customrpm
    .memori-website_assistant-layout
    .memori--powered-by {
    right: auto;
    left: 1rem;
    justify-content: flex-start;
    text-align: left;
    transform: none;
}

/* ============================================
   HEADER
   ============================================ */

.memori-website_assistant-layout--header {
    position: absolute;
    z-index: 1000;
    top: 0.75rem;
    right: 0.75rem;
    padding: 0.5rem;
    border-radius: var(--memori-radius-box);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    text-align: right;
}

.memori-website_assistant-layout--header-hidden {
    display: none;
}

.memori-website_assistant-layout .memori-header {
    z-index: 1000;
    display: inline-flex;
    width: auto;
    height: auto;
    flex-direction: row;
    padding: 0;
    gap: 0.35rem;
}

/* Less specific first (no-descending-specificity): single .memori-header--button */
.memori-website_assistant-layout .memori-header .memori-header--button,
.memori-website_assistant-layout .memori-header .memori-share-button {
    margin-top: 0;
    margin-right: 0;
    margin-left: 0;
}

/* More specific: adjacent sibling (must come after general .memori-header--button rules) */
.memori-website_assistant-layout .memori-header .memori-header--button + .memori-header--button {
    margin-top: 0;
    margin-right: 0;
    margin-left: 0;
}

.memori-website_assistant-layout--header-row {
    position: absolute;
    z-index: 1001;
    top: 0.75rem;
    right: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
}

/* Position dropdown below the trigger so it does not cover the share button */
.memori-widget.memori-layout-website_assistant .memori-share-button .memori-share-button--overlay {
    z-index: 1002;
    top: 100%;
    margin-top: 0.5rem;
}

.memori-widget.memori-layout-website_assistant .memori-header--button--fullscreen {
    display: none;
}

/* ============================================
   AVATAR SECTION
   ============================================ */

.memori-website_assistant-layout--avatar {
    position: relative;
    overflow: hidden;
    min-height: 0;
    max-height: 35vh;
    flex: 1;
    /* Prevent avatar/blob from growing unbounded and overlapping header/controls */
    contain: layout style;
}

.memori-website_assistant-layout--avatar .memori--avatar-wrapper {
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
    overflow: hidden;
    width: 100%;
    height: 100%;
}

.memori-website_assistant-layout--avatar .memori--blob-container {
    display: block;
}

.memori-website_assistant-layout--avatar .memori-blob {
    z-index: 2;
}

.memori-website_assistant-layout--avatar .memori--avatar-wrapper .avatar-loader {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    transform: none !important;
}

.memori-layout-website_assistant .memori--avatar-wrapper > div {
    overflow: visible !important;
    width: auto !important;
    height: 100%;
    border-radius: 0;
}

.memori-layout-website_assistant .memori--avatar-wrapper > div canvas + div {
    position: absolute !important;
    width: 100%;
    height: 100%;
    transform: none !important;
}

.memori-layout-website_assistant.memori--avatar-readyplayerme-full .memori--avatar-wrapper > div {
    transform: scale(1.7) translate(0px, 10vh);
}

.memori-website_assistant-layout--avatar .memori--avatar-wrapper canvas {
    width: auto !important;
    max-width: 100%;
    height: 100%;
    object-fit: contain;
}

.memori-website_assistant-layout--avatar .memori--avatar-wrapper .avatar-loader figure {
    text-align: center;
}

.memori-layout-website_assistant.memori--avatar-readyplayerme
    .memori-website_assistant--trigger-button
    .memori-blob
    figure {
    width: 100%;
}

.memori-website_assistant-layout--avatar .memori--avatar-wrapper .avatar-loader .memori-spin--spinner {
    background: none;
}

/* ============================================
   CONTROLS SECTION
   ============================================ */

.memori-website_assistant-layout--controls {
    position: relative;
    z-index: 5;
    display: flex;
    min-height: 0;
    flex: 1;
    flex-direction: column;
    padding: 1rem;
    background-color: var(--memori-secondary-background);
}

.memori-website_assistant-layout--controls .memori-chat--history,
.memori-website_assistant-layout--controls .memori-chat--content {
    background: var(--memori-secondary-background);
}

.memori-website_assistant-layout--controls .memori-chat--history {
    padding: 0;
    margin-top: var(--memori-spacing-3xl);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.memori-website_assistant-layout--controls .memori-chat--content {
    padding: 0;
}

.memori-website_assistant-layout--controls .memori-chat--bubble-initial + .memori-chat--bubble-container {
    margin-top: auto;
}

.memori-website_assistant-layout--controls .memori-chat--content .memori-chat--bubble-container:first-of-type {
    margin-top: auto;
}

.memori-website_assistant-layout--controls .memori--start-panel,
.memori-website_assistant-layout--controls .memori-chat--wrapper {
    width: 100%;
    max-width: 100%;
    padding: 0;
    margin: auto;
}

.memori-website_assistant-layout--controls .memori--start-panel {
    flex: 1;
    align-content: center;
    align-self: center;
    padding: 1rem;
    border: 0px;
    border-radius: var(--memori-radius-box);
    margin: 0.75rem;
    margin-bottom: var(--memori-spacing-2xl) !important;
    box-shadow: none !important;
}

.memori-website_assistant-layout--controls .memori-chat--wrapper {
    display: flex;
    min-height: 0;
    flex: 1;
    flex-direction: column;
    padding: 0.75rem;
    border: 0px !important;
    box-shadow: none !important;
}

/* Tablet and up */
@media (min-width: 601px) {
    .memori-website_assistant-layout--controls .memori--start-panel,
    .memori-website_assistant-layout--controls .memori-chat--wrapper {
        max-width: 100%;
    }

    .memori-website_assistant-layout--controls .memori-chat--wrapper {
        padding: 1rem;
    }

    .memori-website_assistant-layout--controls .memori--start-panel {
        padding: 1.5rem;
        margin: 0 auto;
    }
}

/* Desktop */
@media (min-width: 1024px) {
    .memori-website_assistant-layout--controls .memori--start-panel,
    .memori-website_assistant-layout--controls .memori-chat--wrapper {
        max-width: 800px;
    }
}

/* ============================================
   CHAT STYLING
   ============================================ */

.memori-website_assistant-layout .memori-chat--cover {
    display: none;
}

.memori-website_assistant-layout .memori--cover {
    padding: 0;
    background: none;
}

.memori-website_assistant-layout .memori-chat--bubble,
.memori-website_assistant-layout .memori-chat--bubble.memori-chat--user-bubble {
    animation: showup 0.3s ease-out;
    opacity: 1;
    transition: all 0.2s ease-in-out;
}

.memori-website_assistant-layout .memori-chat--bubble:hover,
.memori-website_assistant-layout .memori-chat--bubble.memori-chat--user-bubble:hover {
    opacity: 1;
    transform: translateY(-1px);
}

.memori-website_assistant-layout .memori-chat--bubble p,
.memori-website_assistant-layout .memori-chat--bubble.memori-chat--user-bubble p {
    opacity: 1;
}

/* ============================================
   OTHER ELEMENTS
   ============================================ */

.memori-website_assistant-layout .memori--avatar-toggle {
    display: none;
    width: 100%;
    justify-content: center;
}

.memori-website_assistant-layout .memori--title,
.memori-website_assistant-layout .memori--description,
.memori-website_assistant-layout .memori--needsPosition {
    color: var(--memori-text-color);
}

.memori-website_assistant-layout .memori--global-background-image {
    background: none;
}

.memori-website_assistant-layout .memori--description-text,
.memori-website_assistant-layout .memori--translation-toggle {
    display: none;
}

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */

@media (max-width: 480px) {
    .memori-website_assistant-layout .memori-send-on-enter-menu {
        display: none;
    }

    .memori-website_assistant-layout .memori-header--button-settings {
        display: none;
    }

    .memori-website_assistant-layout--controls {
        padding: 0.75rem;
    }

    .memori-website_assistant-layout--controls .memori-chat--wrapper {
        padding: 0.5rem;
    }

    .memori-website_assistant-layout--controls .memori--start-panel {
        padding: 1rem;
        margin: 0.5rem;
    }
}

/* After controls .memori--start-panel rules (no-descending-specificity: 3-class selector wins over 2-class) */
.memori-widget.memori-layout-website_assistant .memori--start-panel {
    border: none;
}

@media (max-width: 768px) {
    .memori-website_assistant--trigger-button {
        width: 80px !important;
        height: 80px !important;
        -webkit-backdrop-filter: blur(12px);
        backdrop-filter: blur(12px);
        background: rgba(255, 255, 255, 0.25);
    }

    /* Keep blob container as positioning context and centered in button */
    .memori-website_assistant--trigger-button .memori-blob {
        position: relative !important;
        top: 0 !important;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Center .mainDiv in button: use percentage translate so blob aligns with button (override Blob.css mobile pixel offsets) */
    .memori-website_assistant--trigger-button .memori-blob .mainDiv {
        top: 50% !important;
        left: 50% !important;
        --memori-blob-x: -50%;
        --memori-blob-y: -50%;
    }
}

/* ============================================
   ACCESSIBILITY & PERFORMANCE
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    .memori-website_assistant--trigger,
    .memori-website_assistant--trigger-button,
    .memori-website_assistant--close-button-wrapper,
    .memori-widget.memori-layout-website_assistant .memori-website_assistant--collapsed,
    .memori-widget.memori-layout-website_assistant .memori-website_assistant--expanded,
    .memori-widget.memori-layout-website_assistant .memori-website_assistant--expanded .memori-website_assistant-layout,
    .memori-website_assistant-layout .memori-chat--bubble {
        animation: none !important;
        transition: none !important;
    }
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
    .memori-website_assistant--trigger-button {
        width: 80px;
        height: 80px;
    }

    .memori-website_assistant--trigger-button .memori-blob .mainDiv {
        width: 72px !important;
        height: 72px !important;
    }

    .memori-website_assistant--close-button-wrapper button.memori-website_assistant--close-button {
        width: 48px;
        height: 48px;
        padding: 0.875rem;
    }
}