@import '/public/katex/katex.min.css';

/*
 * Dotex Brand Theme for Chainlit — dark mode only
 * Loaded via .chainlit/config.toml: custom_css = "/public/dotex-theme.css"
 *
 * NOTE ON SPECIFICITY: Chainlit loads this file BEFORE its own CSS bundle,
 * so plain :root/.dark would be overridden. Token blocks use html/:root with
 * html.dark (specificity 0,1,1) to beat Chainlit's .dark {} (0,1,0).
 *
 * Dotex palette:
 *   Narwhal Grey  #05050A   HSL 240 33%  3%   — deepest background
 *   Phantom       #1E1E24   HSL 240  9% 13%   — card / surface
 *   Arsenic       #40424D   HSL 231  9% 28%   — borders, dividers
 *   Graphite      #6E7180   HSL 230  8% 47%   — muted / disabled
 *   Space         #9DA2B3   HSL 226 13% 66%   — secondary text
 *   Silver        #E8E8E8   HSL   0  0% 91%   — primary text
 *   Teal          #4DC3C7   HSL 182 52% 54%   — signature accent
 *   Red           #E92E4A   HSL 351 81% 55%   — destructive
 */

/* ── Local fonts ─────────────────────────────────────────────────────── */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/public/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/public/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url('/public/fonts/jetbrains-mono-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url('/public/fonts/jetbrains-mono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── Persian font ────────────────────────────────────────────────────── */
@font-face {
  font-family: 'Peyda';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/public/fonts/PeydaWebVF.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF,
                 U+200C, U+200D, U+200E, U+200F;
}

/* ── Dark theme tokens ───────────────────────────────────────────────── */
/*
 * Applied to both :root (immediate, before JS runs) and html.dark
 * (after Chainlit's JS adds the class). html.dark has higher specificity
 * (0,1,1) than Chainlit's .dark (0,1,0) so our values always win.
 */

:root,
html.dark {
  color-scheme: dark;

  --font-sans: 'Peyda', 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  --background:              240 33% 3%;    /* Narwhal Grey  #05050A  */
  --foreground:              0 0% 91%;      /* Silver        #E8E8E8  */

  --card:                    240 9% 13%;    /* Phantom       #1E1E24  */
  --card-foreground:         0 0% 91%;

  --popover:                 240 9% 13%;
  --popover-foreground:      0 0% 91%;

  --primary:                 182 52% 54%;   /* Sea Serpent   #4DC3C7  */
  --primary-foreground:      240 33% 3%;

  --secondary:               240 9% 13%;
  --secondary-foreground:    0 0% 91%;

  --muted:                   231 9% 28%;    /* Arsenic       #40424D  */
  --muted-foreground:        226 13% 66%;   /* Space         #9DA2B3  */

  --accent:                  240 9% 13%;
  --accent-foreground:       0 0% 91%;

  --destructive:             351 81% 55%;   /* Red           #E92E4A  */
  --destructive-foreground:  0 0% 91%;

  --border:                  231 9% 28%;
  --input:                   231 9% 28%;
  --ring:                    231 9% 28%;    /* Arsenic — subtle ring  */

  --sidebar-background:      240 33% 3%;
  --sidebar-foreground:      0 0% 91%;      /* Silver — thread titles */
  --sidebar-primary:         182 52% 54%;
  --sidebar-primary-foreground: 240 33% 3%;
  --sidebar-accent:          240 9% 13%;
  --sidebar-accent-foreground: 0 0% 91%;
  --sidebar-border:          231 9% 28%;
  --sidebar-ring:            231 9% 28%;
}

/* ── Hide theme switcher ─────────────────────────────────────────────── */
/*
 * Dark-only prototype — remove the light/dark/system toggle from the UI.
 * The button sits in the header and has no stable testid, so we target
 * the Sun/Moon SVG icons that only appear inside it.
 */
button:has(> svg[class*="lucide-sun"]),
button:has(> svg[class*="lucide-moon"]),
button:has(> svg[class*="lucide-monitor"]) {
  display: none !important;
}

/* ── Font application ─────────────────────────────────────────────────── */
body,
.cl-body {
  font-family: 'Peyda', 'Inter', sans-serif !important;
}

code, pre, kbd, samp,
.message-content code,
.message-content pre {
  font-family: 'JetBrains Mono', monospace !important;
}

/* ── Suppress focus ring on chat input ───────────────────────────────── */
html.dark *:focus-visible {
  outline: 1px solid #40424D !important;
  outline-offset: 0 !important;
  box-shadow: none !important;
}

html.dark [class*="focus-within"]:focus-within,
html.dark [class*="ring"]:focus-within,
html.dark [class*="border"]:focus-within {
  box-shadow: none !important;
  border-color: #40424D !important;
}

html.dark [data-testid="input"],
html.dark [class*="composer"],
html.dark textarea:focus,
html.dark input[type="text"]:focus {
  outline: none !important;
  box-shadow: none !important;
}

/* ── Bidirectional text ──────────────────────────────────────────────── */
/* Each paragraph/block determines its own direction from its first strong
   character (Unicode Bidi Algorithm). Persian paragraphs → RTL,
   English paragraphs → LTR, mixed content handled correctly per block. */
.message-content,
[class*="prose"],
[class*="markdown"] {
  unicode-bidi: plaintext;
}

/* Chat input: flip direction as soon as the user types the first character */
/* textarea,
[contenteditable] {
  direction: rtl !important;
  unicode-bidi: plaintext;
} */
textarea {
  direction: rtl;
  unicode-bidi: plaintext;
}

/* Firefox bug: unicode-bidi: plaintext on textarea pushes cursor/placeholder
   offscreen. Fall back to plain RTL — loses auto-detect but keeps it usable. */
@-moz-document url-prefix() {
  textarea {
    unicode-bidi: normal !important;
  }
}

/* ── Links (scoped to message content only) ──────────────────────────── */
html.dark .message-content a,
html.dark [class*="step"] .message-content a {
  color: #4DC3C7;
}
html.dark .message-content a:hover,
html.dark [class*="step"] .message-content a:hover {
  color: #6DCFD3;
}

/* ── Login page ──────────────────────────────────────────────────────── */
html.dark div[class*="max-w-xs"] {
  border: 1px solid #40424D;
  border-radius: 12px;
  padding: 2rem;
  max-width: 21rem;
  width: 100%;
}

/* Right-side panel background (shown on large screens) */                                          
html.dark div[class*="bg-muted"][class*="lg:block"] {
  background: #1E1E24 !important;
}

/* ── Scrollbar (webkit) ──────────────────────────────────────────────── */
::-webkit-scrollbar              { width: 6px; height: 6px; }
::-webkit-scrollbar-track        { background: transparent; }
::-webkit-scrollbar-thumb        { background: #40424D; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover  { background: #6E7180; }

/* ── Command dialog search icon ─────────────────────────────────────── */
/* RTL flex puts the magnifier on the right, colliding with the close
   button. Move it to the left side and pad the input away from X. */
[cmdk-input-wrapper] > svg { order: 1; }
[cmdk-input-wrapper] > input { padding-inline-start: 2rem !important; }

/* Keep the actual inputs LTR so typed text flows correctly */
#email,
#password {
    direction: ltr !important;
    text-align: left !important;
}