@memori.ai/memori-react 9.0.0-alpha.2 → 9.0.0-alpha.21

package/dist/components/layouts/website-assistant.css

@@ -1,676 +0,0 @@
-/* ============================================
-   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-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;
-        height: 96px;
-    }
-
-
-
-
-    .memori-website_assistant--trigger-button .memori-blob .mainDiv {
-        width: 96px !important;
-        height: 96px !important;
-    }
-}
-
-/* ============================================
-   CLOSE BUTTON
-   ============================================ */
-
-.memori-website_assistant--close-button-wrapper {
-    position: absolute;
-    z-index: 1001;
-    top: 0.75rem;
-    left: 0.75rem;
-    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: 2px solid rgba(130, 70, 175, 0.1);
-    border-radius: 50%;
-    -webkit-backdrop-filter: blur(10px);
-    backdrop-filter: blur(10px);
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.1);
-    font-size: 18px;
-    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-/* ============================================
-   MAIN CONTAINER (Mobile First)
-   ============================================ */
-
-.memori-widget.memori-layout-website_assistant {
-    position: relative;
-    z-index: 2147483647;
-    font-size: 14px;
-}
-
-/*
- * 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: 2147483648;
-}
-
-.memori-widget.memori-layout-website_assistant .memori-website_assistant--collapsed,
-.memori-widget.memori-layout-website_assistant .memori-website_assistant--expanded {
-    position: fixed;
-    z-index: 2147483647;
-    right: 0;
-    bottom: 0;
-    overflow: hidden;
-    width: 100vw;
-    max-width: 100vw;
-    border-radius: 24px 24px 0 0;
-    -webkit-backdrop-filter: blur(20px);
-    backdrop-filter: blur(20px);
-    background: rgba(255, 255, 255, 0.98);
-    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 {
-    overflow: visible;
-    height: min(85vh, calc(100vh - 80px));
-    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: 24px 0 0 0;
-    }
-
-    .memori-widget.memori-layout-website_assistant .memori-website_assistant--expanded {
-        height: min(75vh, calc(100vh - 80px));
-    }
-}
-
-/* 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: 30vw;
-        min-width: 400px;
-        max-width: 480px;
-        border-radius: 24px 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: 0.75rem;
-    background-color: transparent !important;
-    font-size: 0.75rem;
-    opacity: 0.7;
-}
-
-/* ============================================
-   HEADER
-   ============================================ */
-
-.memori-website_assistant-layout--header {
-    position: absolute;
-    z-index: 1000;
-    top: 0.75rem;
-    right: 0.75rem;
-    padding: 0.5rem;
-    border-radius: 12px;
-    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 {
-    position: relative;
-    z-index: 1000;
-    display: inline-flex;
-    width: auto;
-    height: auto;
-    flex-direction: column;
-    padding: 0.5rem;
-    gap: 0.5rem;
-}
-
-/* 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: auto;
-}
-
-/* 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: auto;
-}
-
-/* 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;
-    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;
-    -webkit-backdrop-filter: blur(10px);
-    backdrop-filter: blur(10px);
-    background: linear-gradient(to top, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.85) 50%, transparent 100%);
-}
-
-.memori-website_assistant-layout--controls .memori-chat--history,
-.memori-website_assistant-layout--controls .memori-chat--content {
-    background: transparent;
-}
-
-.memori-website_assistant-layout--controls .memori-chat--history {
-    padding: 0;
-    margin-top: 0;
-    -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: 0 auto;
-}
-
-.memori-wesite_assistant-layout--controls .memori--start-panel {
-    flex: 1;
-    align-content: center;
-    align-self: center;
-    border: 0px;
-    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;
-}
-
-.memori-website_assistant-layout--controls .memori--start-panel {
-    padding: 1rem;
-    border-radius: 16px;
-    margin: 0.75rem;
-}
-
-/* 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: 1rem;
-    }
-}
-
-/* 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;
-    }
-}
-
-@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%;
-    }
-}
-
-@media (max-width: 870px) {
-    .memori-website_assistant-layout .memori-header {
-        max-width: 64px;
-        margin-right: 1rem;
-        margin-left: auto;
-    }
-}
-
-/* ============================================
-   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;
-    }
-}