/* Think Tank – Standard-Design „Lavalampe“: Farbblasen treiben hinter der Oberfläche, darüber liegt Milchglas.
   Die Farben stehen in style.css (:root), die Blasen malt lava.js in die Ebene .lava hinter allem.
   Alle Regeln hier gelten nur ohne gewähltes Thema (:root:not([data-design])) – das Thema „Riff“ (tank.css) bleibt unberührt.
   Grundsatz wie beim Riff: Auf der Startseite dürfen die Blasen wirken, im Chat liegt der Text auf einer ruhigen Glasbahn. */

.lava { display: none; }
:root:not([data-design]) .lava { display: block; position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }

/* ---------- Glas und Schrift ---------- */
:root:not([data-design]) {
  --font-serif: var(--font-display); /* Überschriften in der runden Lampen-Schrift statt der Serifen */
  --glass: color-mix(in srgb, var(--surface) 58%, transparent);
  --spot: rgba(255, 110, 70, .75); /* Lichtfleck, der im Glasrand dem Zeiger folgt */
  --lava-warm: #ffa23a;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-design]):not([data-theme="light"]) { --glass: color-mix(in srgb, var(--surface) 54%, transparent); --spot: rgba(255, 176, 96, .7); }
}
:root[data-theme="dark"]:not([data-design]) { --glass: color-mix(in srgb, var(--surface) 54%, transparent); --spot: rgba(255, 176, 96, .7); }

/* Lage des Zeigers für den Lichtfleck im Glasrand. Bewusst nicht vererbt: Sonst rechnet der Browser bei jeder Mausbewegung
   die Gestaltung aller Elemente in der Seitenleiste neu, obwohl nur ihr Rand die Werte braucht. */
@property --mx { syntax: "<length>"; inherits: false; initial-value: -500px; }
@property --my { syntax: "<length>"; inherits: false; initial-value: -500px; }

/* Seitenleiste und Eingabefeld: Milchglas. Der Rand leuchtet dort auf, wo der Zeiger ist (--mx/--my setzt lava.js). */
:root:not([data-design]) :is(.sidebar, .composer) {
  border: 1px solid transparent;
  background: linear-gradient(var(--glass), var(--glass)) padding-box,
    radial-gradient(340px circle at var(--mx, -500px) var(--my, -500px), var(--spot), var(--border) 62%) border-box;
  -webkit-backdrop-filter: blur(28px) saturate(1.5); backdrop-filter: blur(28px) saturate(1.5);
}
:root:not([data-design]) .composer:focus-within { border-color: transparent; box-shadow: 0 0 60px -12px var(--accent), var(--shadow-composer); }
@media (min-width: 761px) {
  /* Die Seitenleiste schwebt als eigene Glasscheibe. Eingeklappt muss sie trotzdem ganz verschwinden. */
  :root:not([data-design]) .sidebar { margin: 10px 0 10px 10px; border-radius: 24px; }
  :root:not([data-design]) .app.collapsed .sidebar { margin-left: calc(-1 * var(--sidebar-w)); }
  /* Der Griff zum Ziehen der Breite bleibt innerhalb der runden Ecken. */
  :root:not([data-design]) .sidebar .resizer::after { top: 24px; bottom: 24px; }
}
:root:not([data-design]) .sidebar-bottom { border-top-color: transparent; }

:root:not([data-design]) .brand { font: 700 14.5px/1.2 var(--font-display); letter-spacing: -.01em; }
:root:not([data-design]) .logo-mark { border-radius: 50% 50% 50% 22%; background: linear-gradient(135deg, var(--accent), var(--lava-warm)); }
:root:not([data-design]) :is(.dialog-head h2, .dialog-body > h2, .title-input) { font-size: 20px; font-weight: 600; letter-spacing: -.025em; }
:root:not([data-design]) .ask-dialog h2 { font-size: 17px; font-weight: 600; letter-spacing: -.02em; }

/* ---------- Login ---------- */
:root:not([data-design]) .auth { background: transparent; }
:root:not([data-design]) .auth-card { background: color-mix(in srgb, var(--surface) 80%, transparent); -webkit-backdrop-filter: blur(28px) saturate(1.5); backdrop-filter: blur(28px) saturate(1.5); }
:root:not([data-design]) .auth-card h1 { font: 700 27px/1.1 var(--font-display); letter-spacing: -.03em; }

/* ---------- Startseite: Die Blasen sind die Bühne ---------- */
:root:not([data-design]) .empty h2 { font: 700 clamp(27px, 4.2vw, 50px)/1.1 var(--font-display); letter-spacing: -.035em; }
:root:not([data-design]) .empty p { color: var(--text); }
:root:not([data-design]) .starter { background: var(--glass); color: var(--text); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
:root:not([data-design]) .main.is-empty .footnote { color: var(--muted); }
:root:not([data-design]) .main.is-empty .chat-header .icon-btn { color: var(--text); }

/* ---------- Im Chat: Der Text liegt auf einer Glasbahn, links und rechts davon treiben die Blasen ---------- */
:root:not([data-design]) .main { isolation: isolate; }
:root:not([data-design]) .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: color-mix(in srgb, var(--bg) 66%, transparent);
  -webkit-backdrop-filter: blur(30px) saturate(1.4); backdrop-filter: blur(30px) saturate(1.4);
}
/* Vergleich und Zweite Meinung sind breiter als die Bahn: dann liegt das Glas über der ganzen Fläche. */
:root:not([data-design]) .main:has(.msg.compare, .duel)::before { width: 100%; border-width: 0; }
:root:not([data-design]) .main:not(.is-empty) .chat-header {
  background: color-mix(in srgb, var(--bg) 52%, transparent); border-bottom: 1px solid var(--border);
  -webkit-backdrop-filter: blur(24px) saturate(1.4); backdrop-filter: blur(24px) saturate(1.4);
}
:root:not([data-design]) .round-btn.send { background: linear-gradient(135deg, var(--accent), var(--lava-warm)); }
:root:not([data-design]) .round-btn.send:not(:disabled) { box-shadow: 0 6px 22px -6px var(--accent); }

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