/* custom.css - Velina Chat Application Styles */

/* ============================================================================
   1. HIDDEN ELEMENTS
   ============================================================================ */

#new-chat-button,
#sidebar-trigger-button,
#readme-button,
.watermark,
.footer,
.disclaimer,
a[href*='https://github.com/Chainlit/chainlit'] {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

div.-ml-1\.5.flex.items-center.flex-wrap > div:has(button.positive-feedback-off),
div.-ml-1\.5.flex.items-center.flex-wrap > div:has(button.negative-feedback-off),
div.-ml-1\.5.flex.items-center.flex-wrap > button.text-muted-foreground:not([id]) {
    display: none !important;
}


/* ============================================================================
   2. AVATAR SIZING
   ============================================================================ */

span[data-state="closed"].rounded-full {
    height: 3rem !important;
    width: 3rem !important;
    object-fit: cover !important;
}

/* ============================================================================
   3. TYPING INDICATOR
   ============================================================================*/

/* Hide the typing indicator dots */
.flex.flex-col.mx-auto.w-full.flex-grow.p-4 > span {
    visibility: hidden !important;  /* Hide the dots */
    position: relative !important;
}

/* Show "Typing" text in place of dots */
.flex.flex-col.mx-auto.w-full.flex-grow.p-4 > span::after {
    content: "Typing" !important;
    visibility: visible !important;  /* Make text visible */
    position: absolute !important;
    bottom: 0 !important;
    left: 10px !important;
    transform: none !important;
    white-space: nowrap !important;
    color: inherit !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    animation: fade-pulse 1.5s ease-in-out infinite !important;
}

@keyframes fade-pulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}


/* ============================================================================
   4. MOBILE RESPONSIVE
   ============================================================================ */

@media (max-width: 768px) {
    .flex.flex-col.mx-auto.w-full.flex-grow.p-4 > span::after {
        transform: translateX(-50%) !important;
        padding-left: 13px !important;
    }

    .ai-message.flex.gap-4 { gap: 0.5rem !important; }
    .ai-message > span.inline-block { width: 28px !important; min-width: 28px !important; }
    .ai-message > span.inline-block > span.rounded-full { width: 28px !important; height: 28px !important; }
    .ai-message > span.inline-block > span.rounded-full > img { width: 26px !important; height: 26px !important; }
    .ai-message > div.flex.flex-col { max-width: calc(100% - 36px) !important; }

    #cookie-banner { bottom: 123px !important; }
}


/* ============================================================================
   5. FIGMA THEME OVERRIDES
   ============================================================================ */

/* User nav button - Light Mode */
:not(.dark) #user-nav-button > span,
:not(.dark) #user-nav-button > span > span {
    background: #5E3C16 !important;
    border-radius: 32px !important;
}

/* User nav button - Dark Mode */
.dark #user-nav-button > span,
.dark #user-nav-button > span > span,
.dark #user-nav-button .rounded-full {
    background: #EDEDED !important;
}
.dark #user-nav-button .rounded-full span {
    color: #262623 !important;
}

/* Theme toggle - Light Mode */
:not(.dark) #theme-toggle {
    background: #FFFCF9 !important;
    border-radius: 32px !important;
}

/* Theme toggle - Dark Mode */
.dark #theme-toggle {
    background: #463E34 !important;
    border-radius: 32px !important;
}

/* Message input container - Light Mode Only */
html:not(.dark) #message-composer {
    background: #FFFCF9 !important;
    border: 1px solid #FBE8D5 !important;
    box-shadow: 0px 0px 12px rgba(199, 199, 199, 0.25) !important;
    border-radius: 24px !important;
}