/* =============================================================
   deenja — Design-Grundlage
   -------------------------------------------------------------
   Farben, Typografie, Abstaende, Schatten und die Bausteine, die
   Chat, Admin und Setup gemeinsam benutzen. Alles liegt in einer
   eigenen Datei, damit die drei Seiten dieselbe Sprache sprechen
   und keine Seite eigene <style>-Bloecke mitschleppt: die CSP
   kommt so ohne 'unsafe-inline' fuer style-src aus.
   ============================================================= */

/* ---- 1. Farben ----------------------------------------------
   Dunkel ist der Standard. Die helle Fassung steht bewusst
   ZWEIMAL: einmal fuer "System steht auf hell", einmal fuer
   "Nutzer hat hell gewaehlt". CSS kann eine Media-Query und
   einen Attribut-Selektor nicht in einer Regel verodern, und
   erst per JS umzuschalten hiesse, die falschen Farben einmal
   aufblitzen zu lassen.
   Alle Text-auf-Flaeche-Paare liegen ueber 4.5:1 (WCAG AA),
   die gedaempften eingeschlossen — vorher lag #6b7280 auf
   #0f1117 bei 3.6:1 und fiel damit durch.
   ------------------------------------------------------------ */
:root {
  color-scheme: dark;

  --bg:            #0a0c12;
  --bg-sunken:     #070910;
  --surface:       #11141e;
  --surface-2:     #171c29;
  --surface-3:     #1e2432;
  --border:        #262c3d;
  --border-strong: #363d52;

  --text:          #e9ecf5;
  --text-2:        #b6bfd4;
  --muted:         #8b95ad;

  --accent:        #4f8ef7;
  --accent-hover:  #6ba0ff;
  --accent-text:   #8fb6ff;
  --accent-ink:    #ffffff;
  --accent-soft:   rgba(79, 142, 247, 0.14);
  --accent-line:   rgba(79, 142, 247, 0.45);

  --success:       #34d399;
  --success-soft:  rgba(52, 211, 153, 0.14);
  --warn:          #fbbf24;
  --warn-soft:     rgba(251, 191, 36, 0.14);
  --danger:        #f87171;
  --danger-soft:   rgba(248, 113, 113, 0.14);

  --own-bg:       linear-gradient(160deg, #24457a 0%, #1b3462 100%);
  --own-border:   rgba(124, 166, 255, 0.30);
  --own-text:     #eaf1ff;
  --other-bg:     #171c29;
  --other-border: #272e40;
  --hairline:     rgba(255, 255, 255, 0.07);
  --hover-wash:   rgba(255, 255, 255, 0.05);
  --scrim:        rgba(4, 6, 12, 0.62);

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.40);
  --shadow-2: 0 6px 20px rgba(0, 0, 0, 0.45);
  --shadow-3: 0 20px 52px rgba(0, 0, 0, 0.55);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;

    --bg:            #f4f6fb;
    --bg-sunken:     #e9edf6;
    --surface:       #ffffff;
    --surface-2:     #f3f5fb;
    --surface-3:     #e9edf7;
    --border:        #dde2ee;
    --border-strong: #c3cadb;

    --text:          #0f1524;
    --text-2:        #3d4761;
    --muted:         #5b6478;

    --accent:        #2f6fe4;
    --accent-hover:  #2560cc;
    --accent-text:   #1d55c4;
    --accent-ink:    #ffffff;
    --accent-soft:   rgba(47, 111, 228, 0.10);
    --accent-line:   rgba(47, 111, 228, 0.35);

    --success:       #0f8a5f;
    --success-soft:  rgba(15, 138, 95, 0.12);
    --warn:          #a86a00;
    --warn-soft:     rgba(168, 106, 0, 0.12);
    --danger:        #c8342f;
    --danger-soft:   rgba(200, 52, 47, 0.10);

    --own-bg:       linear-gradient(160deg, #3d7bf0 0%, #2f6fe4 100%);
    --own-border:   rgba(47, 111, 228, 0.35);
    --own-text:     #ffffff;
    --other-bg:     #ffffff;
    --other-border: #dde2ee;
    --hairline:     rgba(15, 21, 36, 0.08);
    --hover-wash:   rgba(15, 21, 36, 0.045);
    --scrim:        rgba(20, 28, 46, 0.35);

    --shadow-1: 0 1px 2px rgba(20, 28, 46, 0.08);
    --shadow-2: 0 6px 20px rgba(20, 28, 46, 0.10);
    --shadow-3: 0 20px 52px rgba(20, 28, 46, 0.16);
  }
}

:root[data-theme="light"] {
  color-scheme: light;

  --bg:            #f4f6fb;
  --bg-sunken:     #e9edf6;
  --surface:       #ffffff;
  --surface-2:     #f3f5fb;
  --surface-3:     #e9edf7;
  --border:        #dde2ee;
  --border-strong: #c3cadb;

  --text:          #0f1524;
  --text-2:        #3d4761;
  --muted:         #5b6478;

  --accent:        #2f6fe4;
  --accent-hover:  #2560cc;
  --accent-text:   #1d55c4;
  --accent-ink:    #ffffff;
  --accent-soft:   rgba(47, 111, 228, 0.10);
  --accent-line:   rgba(47, 111, 228, 0.35);

  --success:       #0f8a5f;
  --success-soft:  rgba(15, 138, 95, 0.12);
  --warn:          #a86a00;
  --warn-soft:     rgba(168, 106, 0, 0.12);
  --danger:        #c8342f;
  --danger-soft:   rgba(200, 52, 47, 0.10);

  --own-bg:       linear-gradient(160deg, #3d7bf0 0%, #2f6fe4 100%);
  --own-border:   rgba(47, 111, 228, 0.35);
  --own-text:     #ffffff;
  --other-bg:     #ffffff;
  --other-border: #dde2ee;
  --hairline:     rgba(15, 21, 36, 0.08);
  --hover-wash:   rgba(15, 21, 36, 0.045);
  --scrim:        rgba(20, 28, 46, 0.35);

  --shadow-1: 0 1px 2px rgba(20, 28, 46, 0.08);
  --shadow-2: 0 6px 20px rgba(20, 28, 46, 0.10);
  --shadow-3: 0 20px 52px rgba(20, 28, 46, 0.16);
}

/* ---- 2. Typografie, Raster, Bewegung ------------------------
   Die Schriftliste beginnt mit der Systemschrift und nennt
   danach ausdruecklich japanische Familien: ohne sie greift
   Windows fuer 日本語 zu einer Notschrift, die neben der
   lateinischen Schrift schief wirkt.
   ------------------------------------------------------------ */
:root {
  --font: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue',
          'Noto Sans', 'Noto Sans JP', 'Hiragino Kaku Gothic ProN',
          'Yu Gothic UI', Meiryo, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  --fs-2xs:  0.6875rem;
  --fs-xs:   0.75rem;
  --fs-sm:   0.8125rem;
  --fs-base: 0.9375rem;
  --fs-md:   1rem;
  --fs-lg:   1.125rem;
  --fs-xl:   1.375rem;
  --fs-2xl:  clamp(1.75rem, 1.2rem + 2.4vw, 2.5rem);

  --lh-tight: 1.25;
  --lh-body:  1.55;

  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;

  --r-xs:   6px;
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   16px;
  --r-xl:   22px;
  --r-full: 999px;

  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 320ms;
  --ease:  cubic-bezier(0.22, 1, 0.36, 1);   /* schnell los, weich aus */

  --sidebar-w: 264px;
  --content-max: 54rem;   /* Lesebreite: darueber reissen Zeilen auseinander */
}

/* ---- 3. Grundlagen ------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 { line-height: var(--lh-tight); font-weight: 650; }

button, input, select, textarea { font: inherit; color: inherit; }

/* Ein einziger, ueberall gleicher Fokusring — sichtbar auf jeder
   Flaeche, weil er einen Ring in Hintergrundfarbe unterlegt. */
/* Kein border-radius hier: der Umriss folgt in heutigen Browsern der Form des
   Elements von selbst -- eine Rundung an dieser Stelle machte aus dem runden
   Sende-Knopf beim Fokussieren ein Rechteck. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

::selection { background: var(--accent-soft); color: var(--text); }

/* Schlanke Rollbalken, damit Listen nicht von einem grauen Block
   gerahmt werden. Firefox versteht die Kurzform, WebKit braucht
   die Pseudo-Elemente. */
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border: 3px solid transparent;
  background-clip: content-box;
  border-radius: var(--r-full);
}
*::-webkit-scrollbar-thumb:hover { background: var(--muted); background-clip: content-box; }

.hidden { display: none !important; }

/* Das hidden-Attribut ist nur eine Voreinstellung (display:none) und verliert
   gegen JEDE Klasse mit eigenem display -- .auth-error, .pill, .net-banner,
   .form-row und .badge setzen genau das. Ohne diese Zeile stuenden Fehlerkasten,
   Passwortzeile und Verbindungsstreifen dauerhaft offen. */
[hidden] { display: none !important; }

/* Nur fuer Screenreader — sichtbar, sobald es den Fokus bekommt
   (Sprungmarke "zum Chat"). */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.skip-link {
  position: fixed; top: var(--sp-2); left: var(--sp-2); z-index: 300;
  transform: translateY(-200%);
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border-strong); border-radius: var(--r-sm);
  padding: var(--sp-2) var(--sp-3); box-shadow: var(--shadow-2);
  transition: transform var(--dur-2) var(--ease);
}
.skip-link:focus-visible { transform: translateY(0); }

/* ---- 4. Gemeinsame Bausteine -------------------------------- */

/* Eingabefelder */
.field {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 0.7rem 0.9rem;
  color: var(--text);
  font-size: var(--fs-md);
  transition: border-color var(--dur-1), box-shadow var(--dur-1), background var(--dur-1);
}
.field::placeholder { color: var(--muted); }
.field:hover { border-color: var(--border-strong); }
.field:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* Knoepfe */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--sp-2);
  min-height: 2.75rem;                 /* Daumenbreite, nicht Zeigerbreite */
  padding: 0.6rem 1.1rem;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  font-size: var(--fs-base);
  font-weight: 550;
  cursor: pointer;
  text-decoration: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--dur-1), border-color var(--dur-1),
              color var(--dur-1), box-shadow var(--dur-1), transform var(--dur-1);
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }

.btn-primary {
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: var(--shadow-1);
}
@media (hover: hover) {
  .btn-primary:not(:disabled):hover { background: var(--accent-hover); box-shadow: var(--shadow-2); }
}

.btn-ghost {
  background: transparent;
  border-color: var(--border);
  color: var(--text-2);
}
@media (hover: hover) {
  .btn-ghost:not(:disabled):hover { border-color: var(--accent); color: var(--text); background: var(--accent-soft); }
}

.btn-sm { min-height: 2.25rem; padding: 0.35rem 0.8rem; font-size: var(--fs-sm); }

/* Karten */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  box-shadow: var(--shadow-1);
}

/* Abzeichen */
.badge {
  display: inline-flex; align-items: center; gap: 0.3rem;
  border-radius: var(--r-full);
  padding: 0.1rem 0.55rem;
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: 0.01em;
}
.badge-green  { background: var(--success-soft); color: var(--success); }
.badge-yellow { background: var(--warn-soft);    color: var(--warn); }
.badge-red    { background: var(--danger-soft);  color: var(--danger); }
.badge-blue   { background: var(--accent-soft);  color: var(--accent-text); }

/* Flaggen (gezeichnet in flags.js — Windows hat keine Glyphen fuer
   die Emoji-Flaggen und zeigte dort nur "DE" statt 🇩🇪). */
.flag {
  display: inline-block;
  width: 1.5em; height: 1em;
  border-radius: 2px;
  vertical-align: -0.15em;
  flex-shrink: 0;
  box-shadow: 0 0 0 1px var(--hairline) inset;
}

/* Wer Bewegung abgestellt hat, bekommt keine — bis auf die
   Zustandswechsel, die ohne Uebergang hart springen wuerden. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}