/* Think Tank – Thema „Riff“: Man steht in einer Felshöhle vor einem runden Fenster und schaut auf ein Korallenriff.
   Gewählt im Konto-Menü (data-design="aqua" am <html>). Hell ist es das Riff bei Tag, dunkel ein Nachttauchgang:
   tank.js setzt dafür data-water="riff" bzw. "tiefsee" – daran hängen hier alle Regeln.
   Die Szene selbst malt tank.js in die Ebene .tank hinter allem; hier stehen nur Farben, Glas und Schrift der Oberfläche.
   Grundsatz: Auf der Startseite darf das Riff wirken, im Chat liegt der Text auf einer ruhigen Glasbahn – der Text geht vor. */

.tank { display: none; }
:root[data-water] .tank { display: block; position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }

/* ---------- Farben ---------- */
:root[data-water="riff"] {
  --bg: #dfe8ee; --sidebar: #eef3f6; --surface: #ffffff;
  --text: #0d2430; --muted: #41606f; --faint: #617e8c;
  --border: rgba(13, 36, 48, .12); --border-strong: rgba(13, 36, 48, .24);
  --hover: rgba(13, 36, 48, .07); --active: rgba(13, 36, 48, .12);
  --accent: #c2412a; --accent-strong: #9c2f1c; --accent-soft: rgba(194, 65, 42, .12); --on-accent: #ffffff;
  --bubble: rgba(194, 65, 42, .13); --code-bg: #e9eff2; --code-head: #dde6ea;
  --notice: #7d5b0d; --danger: #b3261e;
  --shadow-sm: 0 1px 2px rgba(13, 36, 48, .09);
  --shadow-composer: 0 1px 2px rgba(13, 36, 48, .05), 0 18px 50px -14px rgba(10, 50, 80, .5);
  --shadow-lg: 0 2px 8px rgba(13, 36, 48, .07), 0 16px 48px -10px rgba(10, 50, 80, .4);
  --tank-glass: rgba(255, 255, 255, .72); --tank-sheet: rgba(255, 255, 255, .78);
  color-scheme: light;
}
:root[data-water="tiefsee"] {
  --bg: #090d12; --sidebar: #0c141c; --surface: #111e2a;
  --text: #e8f3f7; --muted: #a9c1cc; --faint: #7f99a6;
  --border: rgba(170, 225, 245, .14); --border-strong: rgba(170, 225, 245, .3);
  --hover: rgba(170, 225, 245, .09); --active: rgba(170, 225, 245, .16);
  --accent: #ff8f70; --accent-strong: #ffb7a0; --accent-soft: rgba(255, 143, 112, .16); --on-accent: #3a0e04;
  --bubble: rgba(255, 143, 112, .2); --code-bg: #060b10; --code-head: #0f1a24;
  --notice: #e0c66a; --danger: #ff8f88;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .5);
  --shadow-composer: 0 18px 50px -12px rgba(0, 0, 0, .7);
  --shadow-lg: 0 16px 48px -8px rgba(0, 0, 0, .75);
  --tank-glass: rgba(8, 24, 36, .64); --tank-sheet: rgba(5, 18, 28, .64);
  color-scheme: dark;
}
:root[data-water] {
  --font-serif: "Bricolage Grotesque", var(--font-sans); /* Überschriften in einer kräftigen Grotesk statt der Serifen */
  --tank-ink: #ffffff; /* Schrift direkt auf dem Wasser, mit dunklem Hof, damit sie auch vor hellem Fels lesbar bleibt */
  --tank-halo: 0 1px 3px rgba(0, 20, 40, .7), 0 2px 26px rgba(0, 20, 40, .7);
}

/* ---------- Oberfläche: Seitenleiste und Eingabefeld sind Glas vor der Felswand ---------- */
:root[data-water] .sidebar { background: var(--tank-glass); -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2); }
:root[data-water] .composer { background: var(--tank-glass); border-color: var(--border-strong); -webkit-backdrop-filter: blur(24px) saturate(1.4); backdrop-filter: blur(24px) saturate(1.4); }
:root[data-water] .composer:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 24%, transparent), 0 0 46px -6px color-mix(in srgb, var(--accent) 60%, transparent), var(--shadow-composer);
}
:root[data-water] .round-btn.send:not(:disabled) { box-shadow: 0 0 22px -4px var(--accent); }
/* Das Logo wird zum kleinen Bullauge. */
:root[data-water] .logo-mark { border-radius: 50%; background: var(--accent); box-shadow: inset 0 0 0 3px var(--bg), 0 0 0 2px var(--accent); }
:root[data-water] .brand { font: 700 18px/1.2 var(--font-serif); letter-spacing: -.01em; }
:root[data-water] :is(.dialog-head h2, .dialog-body > h2, .title-input) { font-weight: 650; letter-spacing: -.02em; }
:root[data-water] .ask-dialog h2 { font-weight: 650; }

/* ---------- Login ---------- */
:root[data-water] .auth { background: transparent; }
:root[data-water] .auth-card { background: color-mix(in srgb, var(--surface) 82%, transparent); -webkit-backdrop-filter: blur(28px) saturate(1.4); backdrop-filter: blur(28px) saturate(1.4); }
:root[data-water] .auth-card h1 { font-weight: 700; letter-spacing: -.02em; }

/* ---------- Startseite: Begrüßung und Eingabefeld stehen vor dem Rundfenster ---------- */
:root[data-water] .empty h2 { font: 700 clamp(34px, 5.6vw, 66px)/1.02 var(--font-serif); letter-spacing: -.025em; color: var(--tank-ink); text-shadow: var(--tank-halo); }
:root[data-water] .empty p { color: var(--tank-ink); text-shadow: var(--tank-halo); font-weight: 500; }
:root[data-water] .main.is-empty .footnote { color: var(--muted); } /* steht unten vor der Felswand, nicht vor dem Wasser */
:root[data-water] .starter { background: var(--tank-glass); color: var(--text); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
:root[data-water] .main.is-empty .chat-header .icon-btn { color: var(--text); }

/* ---------- Im Chat: Der Text liegt auf einer Glasbahn, links und rechts davon sieht man das Riff ---------- */
:root[data-water] .main { isolation: isolate; }
:root[data-water] .main:not(.is-empty)::before {
  content: ""; position: absolute; z-index: -1; top: 52px; bottom: 0; left: 50%; width: min(100%, calc(var(--column) + 72px)); transform: translateX(-50%);
  border: solid var(--border); border-width: 0 1px;
  background: var(--tank-sheet);
  -webkit-backdrop-filter: blur(22px) saturate(1.3); backdrop-filter: blur(22px) saturate(1.3);
}
/* Vergleich und Zweite Meinung sind breiter als die Bahn: dann liegt das Glas über der ganzen Fläche. */
:root[data-water] .main:has(.msg.compare, .duel)::before { width: 100%; border-width: 0; }
:root[data-water] .main:not(.is-empty) .chat-header {
  background: var(--tank-glass); border-bottom: 1px solid var(--border);
  -webkit-backdrop-filter: blur(20px) saturate(1.3); backdrop-filter: blur(20px) saturate(1.3);
}

/* ---------- Handy, Druck ---------- */
@media (max-width: 760px) {
  /* Am Handy liegen Seitenleiste und Eingabefeld über dem Text, also deckend – und ohne teure Unschärfe. */
  :root[data-water] .sidebar { background: var(--sidebar); -webkit-backdrop-filter: none; backdrop-filter: none; }
  :root[data-water] .composer { background: var(--surface); -webkit-backdrop-filter: none; backdrop-filter: none; }
  :root[data-water] .main:not(.is-empty)::before { width: 100%; border-width: 0; background: color-mix(in srgb, var(--bg) 86%, transparent); -webkit-backdrop-filter: none; backdrop-filter: none; }
  :root[data-water] .main:not(.is-empty) .chat-header { background: color-mix(in srgb, var(--bg) 90%, transparent); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media print { .tank { display: none !important; } }