/* TKC Brand Colors for Chainlit UI
   #FF8200 - Orange (primary)    → HSL: 31 100% 50%
   #9EA2A2 - Light gray          → HSL: 180 2% 63%
   #333F48 - Dark grey (body)    → HSL: 206 17% 24%
   #2D2926 - Black (headings)    → HSL: 26 8% 16%

   Chainlit uses shadcn/ui CSS variables in HSL format WITHOUT the hsl() wrapper.
   Use :root:root for specificity to beat Chainlit's own :root definitions.
*/

:root:root {
    /* Brand color — send button, links, accents */
    --primary: 31 100% 50%;
    --primary-foreground: 0 0% 100%;

    /* Focus rings */
    --ring: 31 100% 50%;

    /* Page background */
    --background: 0 0% 100%;

    /* Text */
    --foreground: 206 17% 24%;

    /* Message cards */
    --card: 0 0% 100%;
    --card-foreground: 206 17% 24%;

    /* Secondary / muted */
    --muted: 60 9% 96%;
    --muted-foreground: 180 2% 63%;

    /* Borders and inputs */
    --border: 0 0% 85%;
    --input: 0 0% 85%;
}

/* Force same colors when browser has dark theme cached.
   --card must be a visible grey (not white) because the input bar
   uses dark:bg-card which would be invisible on a white background. */
.dark, .dark:root, :root:root.dark {
    --primary: 31 100% 50%;
    --primary-foreground: 0 0% 100%;
    --ring: 31 100% 50%;
    --background: 0 0% 100%;
    --foreground: 206 17% 24%;
    --card: 0 0% 96%;
    --card-foreground: 206 17% 24%;
    --muted: 60 9% 96%;
    --muted-foreground: 180 2% 63%;
    --border: 0 0% 85%;
    --input: 0 0% 85%;
    --secondary: 0 0% 96%;
    --secondary-foreground: 206 17% 24%;
    --accent: 0 0% 96%;
    --accent-foreground: 206 17% 24%;
    --popover: 0 0% 100%;
    --popover-foreground: 206 17% 24%;
}

/* Direct overrides for reliability */
body {
    background-color: #FFFFFF !important;
    color: #333F48 !important;
}

/* Text colors */
p, li, td, th, label {
    color: #333F48 !important;
}

h1, h2, h3 {
    color: #2D2926 !important;
}

/* Header separator */
#header {
    border-bottom: 1px solid #eee;
}

/* Pulsing animation for "Thinking..." indicator.
   Chainlit renders *Thinking...* with class "italic", not <em>.
   Target .italic when it's the only child (standalone italic messages only). */
@keyframes thinking-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

.italic:only-child {
    animation: thinking-pulse 1.5s ease-in-out infinite;
    color: hsl(180, 2%, 63%) !important;
}

/* About page logo — remove grey background, center, constrain size */
[role="dialog"] img[src*="logo"] {
    display: block !important;
    margin: 0 auto !important;
    max-width: 240px !important;
    max-height: 60px !important;
    height: auto !important;
    background: transparent !important;
    border-radius: 0 !important;
}
[role="dialog"] p img,
[role="dialog"] .inline-image,
[role="dialog"] [class*="image"] {
    background: transparent !important;
}
[role="dialog"] p:has(img),
[role="dialog"] div:has(> img),
[role="dialog"] figure:has(img),
[role="dialog"] *:has(> img[src*="logo"]) {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
    text-align: center !important;
}
/* Center the logo image container in about dialog (Tailwind class) */
[role="dialog"] [role="article"]:last-of-type .sm\:max-w-sm {
    max-width: none !important;
    margin: 24px auto 0 !important;
    display: flex !important;
    justify-content: center !important;
}