/* Amperical Light Theme for Chainlit */
/* Fonts loaded via custom_font in config.toml */

:root {
    --primary: #E8834A;
    --primary-dark: #d06a30;
    --radius: 1rem;
    --text: #1f2937;
    --text-light: #6b7280;
    --border: #e5e7eb;
    --paper: #FFF8F2;

    /* Override Chainlit HSL theme variables to paper tone */
    --background: 27 100% 97% !important;
    --card: 27 100% 97% !important;
    --accent: 27 50% 94% !important;
    --sidebar-background: 27 100% 97% !important;
    --sidebar-accent: 27 50% 94% !important;
}

/* --- Glass header (frosted navbar with video background) --- */

#header,
.flex.flex-col.h-full.w-full > div:first-child {
    background: rgba(255, 248, 242, 0.75) !important;
    backdrop-filter: blur(16px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
    border-bottom: 1px solid rgba(232, 131, 74, 0.08) !important;
}

/* --- Glass sidebar (video background shows through) --- */

.bg-sidebar {
    background: rgba(255, 248, 242, 0.45) !important;
    backdrop-filter: blur(8px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(8px) saturate(180%) !important;
}

/* --- Hide unwanted Chainlit UI elements --- */

[class*="watermark"],
[class*="logo-watermark"] {
    display: none !important;
}

#readme-button,
button[data-testid="readme-button"],
button[aria-label="Readme"],
button[aria-label="Show Readme"] {
    display: none !important;
}


/* Hide theme toggle - light only */
#theme-toggle {
    display: none !important;
}

/* --- Typography --- */

body {
    font-family: 'Nunito Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    background: var(--paper) !important;
}

h1, h2 {
    font-family: 'Nunito Sans', sans-serif !important;
    font-weight: 500 !important;
}

h3, h4, h5, h6 {
    font-family: 'Nunito Sans', sans-serif !important;
    font-weight: 600 !important;
}

/* --- Avatar --- */

.cl-avatar,
[class*="avatar"] {
    object-fit: contain !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 50% !important;
}

/* Hide avatar on suggestion-only messages (author=" ") */
img[alt="Avatar for  "] {
    display: none !important;
}

/* --- Send button --- */

/* Send button — override Chainlit's Tailwind --primary (pink) */
button.bg-primary {
    background-color: #E8834A !important;
}

button.bg-primary:hover {
    background-color: #d06a30 !important;
}

/* --- User message bubbles - subtle coral tint --- */
/* Scoped to message context only; .bg-accent alone hits the composer too */

[data-testid="user-message"].bg-accent,
.step[data-type="user_message"] .bg-accent {
    background: rgba(232, 131, 74, 0.06) !important;
    border: 1px solid rgba(232, 131, 74, 0.15) !important;
}

/* --- Starter buttons (landing page domain chips) --- */

/* Ensure welcome content sits above the hero video background */
.welcome-screen > *:not(#amperical-hero-bg) {
    position: relative;
    z-index: 1;
}

.welcome-screen button,
button.rounded-3xl {
    background: var(--paper) !important;
    color: var(--text) !important;
    border: 1px solid rgba(232, 131, 74, 0.18) !important;
    border-radius: 2rem !important;
    font-family: 'Nunito Sans', sans-serif !important;
    font-weight: 500 !important;
    padding: 0.75rem 1.5rem !important;
    transition: all 0.3s ease !important;
}

.welcome-screen button:hover,
button.rounded-3xl:hover {
    transform: translateY(-2px) !important;
    border-color: var(--primary) !important;
    box-shadow: 0 8px 24px rgba(232, 131, 74, 0.15) !important;
}

/* --- Input field --- */

textarea {
    font-family: 'Nunito Sans', sans-serif !important;
    border-radius: var(--radius) !important;
    scrollbar-width: none !important;
}

textarea::-webkit-scrollbar {
    display: none !important;
}

textarea:focus {
    border-color: var(--border) !important;
    box-shadow: none !important;
}

/* --- Composer container --- */

div.bg-accent.rounded-3xl {
    background: var(--paper) !important;
    border: 1px solid var(--border) !important;
}

/* Hide composer on initial starter screen only.
   .welcome-screen can stay mounted after chat starts, so also require no .step. */
body:has(.welcome-screen):not(:has(.step)) div.bg-accent.rounded-3xl:has(textarea) {
    display: none !important;
}

/* Hide new-chat button unless sidebar is open.
   Demo mode has no sidebar. OAuth mode shows it only when expanded. */
#new-chat-button {
    display: none !important;
}
:root:has([data-side="left"][data-state="expanded"]) #new-chat-button {
    display: inline-flex !important;
}

/* --- Code blocks --- */

pre, code {
    border-radius: 0.5rem !important;
}

/* --- Tables --- */

table {
    border-collapse: collapse !important;
    width: 100% !important;
    border: 1px solid rgba(232, 131, 74, 0.12) !important;
    border-radius: var(--radius) !important;
    overflow: hidden !important;
}

table thead {
    display: none !important;
}

table td {
    padding: 0.6rem 1rem !important;
    border-bottom: 1px solid rgba(232, 131, 74, 0.08) !important;
}

table tr:nth-child(even) td {
    background: rgba(232, 131, 74, 0.03) !important;
}

table td:first-child {
    font-weight: 400 !important;
    color: #d4956a !important;
    border-left: 3px solid rgba(232, 131, 74, 0.25) !important;
}

table tr:last-child td {
    border-bottom: none !important;
}

/* --- Plotly charts --- */

.js-plotly-plot {
    border-radius: var(--radius) !important;
    overflow: hidden !important;
}

/* Override Chainlit's hardcoded 400px on Plotly wrapper divs.
   Chainlit sets both h-[400px] class and inline style on the parent.
   Plotly figures set their own height via layout, so auto works for all. */
div:has(> .inline-plotly) {
    height: auto !important;
}


/* Plotly element spacing */
.message-elements .js-plotly-plot {
    margin: 1.25rem 0 !important;
    padding: 1.5rem !important;
    border: 1px solid rgba(232, 131, 74, 0.12) !important;
    border-radius: var(--radius) !important;
}

.message-elements {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.5rem !important;
    margin: 1rem 0 !important;
}

/* --- AskActionMessage buttons (domain selection in chat) --- */

button.bg-background.border-input,
button.border.bg-background {
    border: 1px solid rgba(232, 131, 74, 0.20) !important;
    border-radius: 1.5rem !important;
    font-family: 'Nunito Sans', sans-serif !important;
    font-weight: 500 !important;
    padding: 0.625rem 1.25rem !important;
    transition: all 0.3s ease !important;
}

button.bg-background.border-input:hover,
button.border.bg-background:hover {
    transform: translateY(-2px) !important;
    border-color: var(--primary) !important;
    box-shadow: 0 8px 24px rgba(232, 131, 74, 0.18) !important;
}

/* --- Inline suggestion chips --- */

/* Hide the icon-only button Chainlit renders alongside actions */
div[class*="-ml-1.5"][class*="flex-wrap"] > button[class*="w-9"] {
    display: none !important;
}

div[class*="-ml-1.5"][class*="flex-wrap"] > button {
    border: 1px solid rgba(232, 131, 74, 0.20) !important;
    border-radius: 1.5rem !important;
    padding: 0.5rem 1.25rem 0.5rem 0.75rem !important;
    font-family: 'Nunito Sans', sans-serif !important;
    font-weight: 500 !important;
    color: var(--primary-dark) !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
}

/* Sparkle icon before suggestion text */
div[class*="-ml-1.5"][class*="flex-wrap"] > button:not([class*="w-9"])::before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 0.4rem;
    flex-shrink: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E8834A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l1.912 5.813a2 2 0 0 0 1.275 1.275L21 12l-5.813 1.912a2 2 0 0 0-1.275 1.275L12 21l-1.912-5.813a2 2 0 0 0-1.275-1.275L3 12l5.813-1.912a2 2 0 0 0 1.275-1.275L12 3z'/%3E%3C/svg%3E") no-repeat center / contain;
}

div[class*="-ml-1.5"][class*="flex-wrap"] > button:hover {
    transform: translateY(-2px) !important;
    border-color: var(--primary) !important;
    box-shadow: 0 6px 20px rgba(232, 131, 74, 0.2) !important;
}

/* --- Step label shimmer (reuses Chainlit's loading-shimmer animation) --- */

p.font-medium.text-muted-foreground {
    -webkit-text-fill-color: transparent !important;
    background-image: linear-gradient(to left, hsl(var(--muted)), hsl(var(--foreground)) 50%, hsl(var(--muted))) !important;
    background-color: hsl(var(--muted)) !important;
    background-clip: text !important;
    -webkit-background-clip: text !important;
    background-repeat: no-repeat !important;
    background-size: 50% 200% !important;
    animation: loading-shimmer 4s infinite !important;
}

/* --- Misc --- */

::selection {
    background: rgba(232, 131, 74, 0.2);
}

*:focus-visible {
    outline: none !important;
}

body, html, #root {
    overflow-x: hidden !important;
}

/* --- Feedback thumbs --- */
.positive-feedback-off,
.negative-feedback-off {
    color: #9ca3af !important;
}

.positive-feedback-on {
    color: #E8834A !important;
}

.negative-feedback-on {
    color: #6b7280 !important;
}

/* Feedback wrapper: push to right end of actions row */
div:has(> .positive-feedback-off),
div:has(> .positive-feedback-on) {
    margin-left: auto;
    order: 99;
}