/* ==============================
   BLOOM MIRIAM CUSTOM STYLES
   ============================== */

/* ==============================
   GENERAL ELEMENT HIDING
   ============================== */
.MuiAvatar-root,
#open-sidebar-button,
#upload-button {
    display: none !important;
}

/* ==============================
   HEADER STYLING
   ============================== */
/* Main header container (barra superior con logo) */
#header {
    background: #3A0E65 !important;
    padding: 20px 0 !important;
    position: relative !important;
    z-index: 10 !important;
    box-shadow: 0 2px 8px rgba(58, 14, 101, 0.35) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
    transition: background-color 0.3s ease, border-color 0.3s ease !important;
}

/* Dark mode header (malva #83799E) */
.dark #header {
    background: #83799e !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.18) !important;
    box-shadow: 0 2px 10px rgba(58, 14, 101, 0.35) !important;
}

/* ==============================
   LOGO STYLING
   ============================== */
/* Hide Chainlit's default logos only (excluding our injected one) */
#header img[alt="logo"]:not(#bloom-miriam-logo-link img),
#header img[src*="logo_light"]:not(#bloom-miriam-logo-link img),
#header img[src*="logo_dark"]:not(#bloom-miriam-logo-link img) {
    display: none !important;
}

/* Ensure our injected logo is ALWAYS visible and swaps correctly */
.bloom-miriam-logo-light {
    display: block !important;
}

.bloom-miriam-logo-dark {
    display: none !important;
}

/* Dark mode logo swap */
.dark .bloom-miriam-logo-light {
    display: none !important;
}

.dark .bloom-miriam-logo-dark {
    display: block !important;
}

/* Ensure #header has relative positioning for the injected logo */
#header {
    position: relative !important;
}

/* Text and icons on deep purple header (light theme) */
#header * {
    color: rgba(255, 255, 255, 0.95) !important;
}

#header button,
#header button svg {
    color: rgba(255, 255, 255, 0.95) !important;
    fill: rgba(255, 255, 255, 0.95) !important;
}

/* Dark mode header: light text on malva bar */
.dark #header * {
    color: rgba(255, 255, 255, 0.96) !important;
}

.dark #header button,
.dark #header button svg {
    color: rgba(255, 255, 255, 0.96) !important;
    fill: rgba(255, 255, 255, 0.96) !important;
}

/* Make sure hamburger menu doesn't overlap with logo */
#header button:first-child {
    margin-left: 180px !important;
}

/*
 * Chainlit 2.x (shadcn): send FAB uses --primary / --ring.
 * Custom CSS is injected *before* /assets/index-*.css, so the bundle resets
 * :root to pink unless these declarations use !important.
 */
:root {
    --primary: 257 16% 55% !important;
    --primary-foreground: 0 0% 100% !important;
    --ring: 257 16% 55% !important;
}

/* Dark theme: send / primary = #83799E (malva) */
.dark {
    --primary: 257 16% 55% !important;
    --primary-foreground: 0 0% 100% !important;
    --ring: 257 16% 55% !important;
}

/* ==============================
   CHAT AVATARS (Chainlit 2.9.x)
   Radix Avatar: .h-5.w-5 + img[alt^="Avatar for …"]. Target size 28px.
   Assistant art: LangGraph name "Miriam" → alt "Avatar for Miriam"; --bloom-assistant-avatar-* from public/custom.js.
   Do not touch #message-composer or button.h-8.w-8 (send/stop).
   ============================== */
#root .h-5.w-5:has(> img[alt^="Avatar for"]),
#root .h-5.w-5:has(img[alt^="Avatar for"]) {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
}

/* Match the assistant avatar name case-insensitively to keep selector maintenance small. */
#root .h-5.w-5:has(img[alt^="Avatar for Miriam" i]),
#root .h-5.w-5:has(img[alt="Avatar for default"]) {
    position: relative !important;
    flex-shrink: 0 !important;
    border-radius: 9999px !important;
    overflow: hidden !important;
    background-position: center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-image: var(--bloom-assistant-avatar-light, none) !important;
}

.dark #root .h-5.w-5:has(img[alt^="Avatar for Miriam" i]),
.dark #root .h-5.w-5:has(img[alt="Avatar for default"]) {
    background-image: var(--bloom-assistant-avatar-dark, none) !important;
}

#root .h-5.w-5:has(img[alt^="Avatar for Miriam" i]) img[alt^="Avatar for Miriam" i],
#root .h-5.w-5:has(img[alt="Avatar for default"]) img[alt="Avatar for default"] {
    opacity: 0 !important;
    pointer-events: none !important;
}

#root .h-5.w-5:has(> img[alt^="Avatar for"]) > img[alt^="Avatar for"] {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* Legacy / alternate rows (if present) */
#root img.h-6.w-6:not(.rounded-md)[alt^="Avatar for"],
#root img.w-6.h-6:not(.rounded-md)[alt^="Avatar for"] {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    border-radius: 9999px !important;
    object-fit: cover !important;
}

#message-composer img.h-6.w-6,
#message-composer img.w-6.h-6 {
    width: 1.5rem !important;
    height: 1.5rem !important;
    min-width: 1.5rem !important;
    min-height: 1.5rem !important;
    max-width: 1.5rem !important;
    max-height: 1.5rem !important;
    border-radius: 0.375rem !important;
    object-fit: contain !important;
}

/* ==============================
   FORM ELEMENTS
   ============================== */
html,
body,
#root {
    max-width: 100%;
    overflow-x: hidden;
}

/* Message input styling */
.MuiFormControl-root {
    border-radius: 1.5em !important;
}

#chat-input,
#chat-input textarea,
#message-composer textarea,
#message-composer input,
#message-composer [contenteditable="true"] {
    font-size: 16px !important;
    line-height: 1.4;
}

#message-composer {
    border-radius: 1.5rem !important;
    box-sizing: border-box !important;
}

@media (max-width: 768px), (hover: none) and (pointer: coarse) {
    #header {
        padding: 12px 0 !important;
    }

    #message-composer {
        min-height: unset !important;
    }

    .bloom-whatsapp-composer-host #message-composer {
        margin-left: var(--bloom-whatsapp-gutter, 54px) !important;
        width: calc(100% - var(--bloom-whatsapp-gutter, 54px)) !important;
        max-width: calc(100% - var(--bloom-whatsapp-gutter, 54px)) !important;
        box-sizing: border-box !important;
    }

    .miriam-whatsapp-btn.miriam-whatsapp-btn--anchored {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18) !important;
    }

    .watermark {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        padding-bottom: 2px !important;
    }
}

/* ==============================
   WATERMARK FOOTER
   ============================== */
/* Watermark container */
.watermark {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    position: relative;
    margin-top: -5px !important;
    margin-bottom: -10px !important;
}

/* Style the clickable link area */
.watermark a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    cursor: pointer;
    margin: 0 auto !important;
    z-index: 10;
}

/* Hide original watermark content */
.watermark a p,
.watermark a svg {
    display: none !important;
}

/* Add "Regresar a" text to the link */
.watermark a::before {
    content: "Regresar a";
    font-family: sans-serif;
    font-size: 14px;
    color: #3A0E65;
    display: inline-block;
}

/* Add logo to the watermark link */
.watermark a::after {
    content: "";
    background-image: url('logo_bloom.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 55px;
    height: 27px;
    margin-top: 3px;
    margin-left: 5px;
    display: inline-block;
}

/* MirIAm WhatsApp floating button and panel */
.miriam-whatsapp-btn {
    position: fixed;
    left: max(12px, env(safe-area-inset-left, 0px));
    bottom: max(12px, env(safe-area-inset-bottom, 0px));
    width: clamp(44px, 11vw, 52px);
    height: clamp(44px, 11vw, 52px);
    padding: 0;
    border: none;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 18px rgba(0,0,0,0.2);
    border-radius: 50%;
    z-index: 99999;
    cursor: pointer;
}
.miriam-whatsapp-btn img {
    display: block;
    width: 100%;
    height: 100%;
}

.miriam-whatsapp-panel {
    position: fixed;
    left: max(12px, env(safe-area-inset-left, 0px));
    bottom: calc(clamp(64px, 16vw, 86px) + env(safe-area-inset-bottom, 0px));
    width: min(360px, calc(100vw - 24px));
    transform: scale(0.8);
    transform-origin: bottom left;
    max-height: min(75vh, calc(100dvh - 120px));
    overflow-y: auto;
    isolation: isolate;
    /* Opaque surface so Chainlit light/dark tokens do not bleed through */
    background-color: #ffffff !important;
    border: 1px solid #d8d8d8;
    border-radius: clamp(8px, 2vw, 10px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
    z-index: 99998;
    padding: clamp(10px, 2.5vw, 16px);
    display: none;
    color: #141414 !important;
    box-sizing: border-box;
}
.miriam-whatsapp-panel.open { display: block; }
.miriam-whatsapp-panel .mwp {
    position: relative;
    color: #141414 !important;
    text-align: center;
}
.miriam-whatsapp-panel .mwp h4 {
    margin: clamp(6px, 1.5vw, 8px) 0;
    padding: 0 clamp(28px, 8vw, 36px);
    font-size: clamp(14px, 3.6vw, 16px);
    line-height: 1.35;
    font-weight: 600;
    color: #141414 !important;
}
.miriam-whatsapp-panel .mwp-qr {
    display: flex;
    justify-content: center;
    margin-top: clamp(8px, 2vw, 10px);
    text-align: center;
}
.miriam-whatsapp-panel .mwp-qr-img {
    width: 100%;
    max-width: min(220px, 58vw);
    height: auto;
}
.miriam-whatsapp-panel .mwp-qr-note {
    display: none;
    margin: clamp(6px, 1.5vw, 8px) 0 0;
    font-size: clamp(12px, 3.2vw, 14px);
    line-height: 1.4;
    color: #2a2a2a !important;
    opacity: 1 !important;
}
.miriam-whatsapp-panel .mwp-qr:not([aria-hidden="true"]) + .mwp-qr-note {
    display: block;
}
.miriam-whatsapp-panel .mwp-actions {
    display: flex;
    gap: clamp(6px, 1.5vw, 8px);
    margin: clamp(6px, 1.5vw, 8px) 0;
}
.miriam-whatsapp-panel .mwp-actions button {
    flex: 1;
    padding: clamp(7px, 2vw, 10px);
    border-radius: 6px;
    border: 1px solid #c4e0c9 !important;
    background: #e8f5eb !important;
    color: #0d3d1f !important;
    cursor: pointer;
    font-size: clamp(13px, 3.4vw, 15px);
    font-weight: 500;
}
.miriam-whatsapp-panel .mwp-actions button:hover {
    background: #d4eeda !important;
}

@media (max-width: 768px) {
    .miriam-whatsapp-panel,
    .miriam-whatsapp-panel.open {
        display: none !important;
    }
}
.miriam-whatsapp-panel .mwp-close {
    position: absolute;
    right: 8px;
    top: 8px;
    background: #f2f2f2 !important;
    border: 1px solid #ddd !important;
    border-radius: 6px;
    width: 28px;
    height: 28px;
    line-height: 26px;
    font-size: 14px;
    color: #333333 !important;
    cursor: pointer;
    opacity: 1 !important;
}
.miriam-whatsapp-panel .mwp-close:hover {
    background: #e8e8e8 !important;
    color: #141414 !important;
}