/*
 * Veslo — grafická vrstva pro nanoclaw-webchat.
 *
 * Záměrně JEN přemapování proměnných, které upstream klient sám vystavuje
 * (28 kusů v `packages/client/src/styles.css`). Žádné přestylování komponent
 * podle tříd — každá taková třída je vazba na vnitřek cizího klienta, která
 * se rozbije při jeho příští verzi.
 *
 * Upstream definuje barvy ve třech blocích a všechny musí být pokryté,
 * jinak přestane fungovat volba „System":
 *   1) :root, [data-theme='dark']   ← výchozí je TMAVÝ
 *   2) [data-theme='light']
 *   3) @media (prefers-color-scheme: light) pro nezvolený stav
 *
 * Barvy: tyrkysová #00a8c8 (tmavý režim #1dd7ee), hluboká modř #001932.
 */

/* ---------- paleta ---------- */
:root {
  --veslo-accent: #00a8c8;
  --veslo-accent-strong: #006f86;
  --veslo-accent-dark: #1dd7ee;
  --veslo-navy: #001932;
  --veslo-navy-soft: #0a2440;
  --veslo-danger: #c73945;
}

/* ---------- 1) výchozí = TMAVÝ (kryje :root i [data-theme='dark']) ---------- */
:root,
[data-theme='dark'] {
  --bg: var(--veslo-navy);
  --panel: var(--veslo-navy);
  --border: rgba(255, 255, 255, 0.1);
  --text: rgba(255, 255, 255, 0.92);
  --muted: rgba(255, 255, 255, 0.62);
  --accent: var(--veslo-accent-dark);
  --link: var(--veslo-accent-dark);
  --sender-you: var(--veslo-accent-dark);
  --nav-active-bg: rgba(29, 215, 238, 0.16);
  --nav-hover-bg: var(--veslo-navy-soft);
  --inbound: var(--veslo-navy-soft);
  --outbound: rgba(29, 215, 238, 0.14);
  --msg-hover: rgba(29, 215, 238, 0.08);
  --code-bg: var(--veslo-navy-soft);
  --code-border: rgba(255, 255, 255, 0.1);
  --inline-code-fg: var(--veslo-accent-dark);
  --mention-user-fg: var(--veslo-accent-dark);
  --mention-user-bg: rgba(29, 215, 238, 0.18);
  --mention-here-fg: #ffffff;
  --mention-here-bg: rgba(29, 215, 238, 0.14);
  --danger: #ff6b78;
}

/* ---------- 2) explicitně zvolený světlý ---------- */
[data-theme='light'] {
  --bg: #ffffff;
  --panel: #ffffff;
  --border: rgba(10, 14, 20, 0.08);
  --text: #0a0e14;
  --muted: rgba(10, 14, 20, 0.68);
  --accent: var(--veslo-accent);
  --link: var(--veslo-accent-strong);
  --sender-you: var(--veslo-accent-strong);
  --nav-active-bg: rgba(0, 168, 200, 0.1);
  --nav-hover-bg: #f6f8fb;
  --inbound: #ffffff;
  --outbound: rgba(0, 168, 200, 0.1);
  --msg-hover: rgba(0, 168, 200, 0.06);
  --code-bg: #f6f8fb;
  --code-border: rgba(10, 14, 20, 0.08);
  --inline-code-fg: var(--veslo-accent-strong);
  --mention-user-fg: var(--veslo-accent-strong);
  --mention-user-bg: rgba(0, 168, 200, 0.12);
  --mention-here-fg: var(--veslo-navy);
  --mention-here-bg: rgba(0, 168, 200, 0.1);
  --danger: var(--veslo-danger);
}

/* ---------- 3) systémové téma bez volby, když OS hlásí světlo ---------- */
@media (prefers-color-scheme: light) {
  :root:not([data-theme='dark']):not([data-theme='light']) {
    --bg: #ffffff;
    --panel: #ffffff;
    --border: rgba(10, 14, 20, 0.08);
    --text: #0a0e14;
    --muted: rgba(10, 14, 20, 0.68);
    --accent: var(--veslo-accent);
    --link: var(--veslo-accent-strong);
    --sender-you: var(--veslo-accent-strong);
    --nav-active-bg: rgba(0, 168, 200, 0.1);
    --nav-hover-bg: #f6f8fb;
    --inbound: #ffffff;
    --outbound: rgba(0, 168, 200, 0.1);
    --msg-hover: rgba(0, 168, 200, 0.06);
    --code-bg: #f6f8fb;
    --code-border: rgba(10, 14, 20, 0.08);
    --inline-code-fg: var(--veslo-accent-strong);
    --mention-user-fg: var(--veslo-accent-strong);
    --mention-user-bg: rgba(0, 168, 200, 0.12);
    --mention-here-fg: var(--veslo-navy);
    --mention-here-bg: rgba(0, 168, 200, 0.1);
    --danger: var(--veslo-danger);
  }
}

/* ---------- písmo ---------- */
/* Systémový font, ne CDN — žádná externí závislost, funguje offline. */
body {
  font-family:
    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',
    Arial, sans-serif;
}

/* ---------- logo v hlavičce ---------- */
/* Jediná výjimka z pravidla „žádné třídy": logo se jinam pověsit nedá.
   Text nadpisu přepisuje veslo-brand.js, tohle přidá jen značku před něj. */
.sidebar-header h1 {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sidebar-header h1::before {
  content: '';
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border-radius: 4px;
  background-image: url('veslo-logo.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* ---------- zjednodušení pro zákazníka ---------- */
/*
 * Skryto tlačítko „+" pro založení nového vlákna. Záměr: zákazník má
 * s asistentem jednu průběžnou konverzaci, ve které mu drží kontext,
 * místo aby řešil, do kterého vlákna co patří.
 *
 * Vlákna jako taková nejsou vypnutá — jen se nedají zakládat z UI.
 * Vrátit zpět = smazat toto pravidlo. Třída je z `SidebarRoom.tsx`.
 */
.nav-room-add {
  display: none;
}