/* =================================================================
   O.B.S.I.D.I.A.N. — style.css
   Persönlicher digitaler Operator. JARVIS-Anmutung: tiefes Blau-Schwarz, Cyan-Glühen.
   Reines CSS, keine Frameworks.
   ================================================================= */

/* ---------- 1. Design-Tokens ---------- */
:root {
  --bg-0:        #04070e;
  --bg-1:        #070d18;
  --bg-2:        #0a1422;

  --cyan:        #2fd4ee;
  --cyan-soft:   #8aeaf8;
  --teal:        #2bd4b4;
  --gold:        #f4b740;
  --gold-soft:   #ffd27a;

  --text:        #e7f1fb;
  --text-dim:    #a6bbd0;
  --text-faint:  #5f7693;

  --line:        rgba(120, 180, 220, 0.16);
  --line-soft:   rgba(120, 180, 220, 0.08);

  --sidebar-w:   268px;
  --panel-w:     350px;
  --radius:      18px;

  --font-display: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --font-body:    "Inter", "Segoe UI", system-ui, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }

body {
  font-family: var(--font-body);
  color: var(--text);
  background: var(--bg-0);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Glas-Effekt (Glassmorphism) – Apple Vision Pro Stil */
.glass {
  background: linear-gradient(180deg, rgba(18,30,52,.55), rgba(9,16,30,.62));
  border: 1px solid rgba(130,190,225,.16);
  box-shadow: 0 14px 50px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter: blur(18px) saturate(135%);
  -webkit-backdrop-filter: blur(18px) saturate(135%);
}
.glass-soft {
  background: rgba(16,28,48,.5);
  border: 1px solid var(--line);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; display: block; flex: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }

/* ---------- 2. Lebendiger Hintergrund (Nebel) ---------- */
.bg-nebula {
  position: fixed; inset: -10%;
  z-index: -2;
  background:
    radial-gradient(45% 40% at 22% 28%, rgba(28,90,130,.42), transparent 60%),
    radial-gradient(40% 45% at 80% 22%, rgba(20,60,110,.38), transparent 60%),
    radial-gradient(55% 50% at 70% 88%, rgba(18,70,80,.34), transparent 62%),
    radial-gradient(45% 45% at 30% 85%, rgba(30,40,90,.30), transparent 60%);
  filter: blur(20px);
  animation: nebulaDrift 34s ease-in-out infinite alternate;
}
@keyframes nebulaDrift {
  0%   { transform: translate3d(0,0,0) scale(1); }
  50%  { transform: translate3d(-2%, 1.5%, 0) scale(1.06); }
  100% { transform: translate3d(2%, -1.5%, 0) scale(1.04); }
}

/* ---------- 3. App-Grid ---------- */
.app {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr var(--panel-w);
  height: 100vh; width: 100vw;
  position: relative;
  gap: 0;
  transition: grid-template-columns .5s cubic-bezier(.4,0,.2,1);
}
.app.panel-collapsed { grid-template-columns: var(--sidebar-w) 1fr 0px; }

/* =================================================================
   4. SIDEBAR
   ================================================================= */
.sidebar {
  margin: 14px 0 14px 14px;
  border-radius: var(--radius);
  padding: 24px 16px 18px;
  display: flex; flex-direction: column; gap: 20px;
  position: relative; z-index: 5;
}
.brand { display: flex; align-items: center; gap: 13px; padding: 0 6px; }
.brand-logo {
  width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, rgba(47,212,238,.3), rgba(10,20,35,.6));
  border: 1px solid rgba(47,212,238,.4);
  box-shadow: 0 0 20px rgba(47,212,238,.3), inset 0 0 12px rgba(47,212,238,.25);
}
.brand-orb {
  width: 20px; height: 20px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--cyan-soft), var(--cyan) 55%, #0c5a72);
  box-shadow: 0 0 16px var(--cyan);
  animation: orbBreath 4s ease-in-out infinite;
}
@keyframes orbBreath { 0%,100%{ box-shadow:0 0 12px var(--cyan);} 50%{ box-shadow:0 0 22px var(--cyan);} }
.brand-text h1 { font-family: var(--font-display); font-size: 15.5px; letter-spacing: 1.5px; font-weight: 700; }
.brand-text span { font-size: 9.5px; letter-spacing: 3px; color: var(--text-faint); }

.nav { display: flex; flex-direction: column; gap: 4px; }
.nav-item {
  display: flex; align-items: center; gap: 13px; padding: 12px 14px; border-radius: 12px;
  color: var(--text-dim); font-size: 14.5px; font-weight: 500; position: relative; text-align: left; width: 100%;
  transition: background .25s, color .25s;
}
.nav-item span { flex: 1; }
.nav-item:hover { color: var(--text); background: rgba(47,212,238,.07); }
.nav-item.is-active {
  color: #eaf7ff;
  background: linear-gradient(90deg, rgba(47,212,238,.2), rgba(47,212,238,.04));
  box-shadow: inset 0 0 0 1px rgba(47,212,238,.32), 0 0 18px rgba(47,212,238,.12);
}
.nav-item.is-active::before { content:""; position:absolute; left:0; top:18%; bottom:18%; width:3px; border-radius:3px; background:var(--cyan); box-shadow:0 0 10px var(--cyan); }
.nav-arrow { width: 16px; height: 16px; opacity: .8; }
.nav-item:not(.is-active) .nav-arrow { display: none; }
.badge { font-style: normal; font-size: 11px; font-weight: 600; background: rgba(47,212,238,.16); color: var(--cyan-soft); padding: 2px 8px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(47,212,238,.3); }

.sidebar-bottom { margin-top: auto; display: flex; flex-direction: column; gap: 14px; }
.user-card { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 14px; }
.avatar { width: 38px; height: 38px; border-radius: 11px; flex: none; display: grid; place-items: center; font-weight: 700; color: #04141a; background: linear-gradient(135deg, var(--cyan-soft), var(--cyan)); box-shadow: 0 0 14px rgba(47,212,238,.4); }
.user-meta { flex: 1; display: flex; flex-direction: column; line-height: 1.25; }
.user-meta strong { font-size: 14px; } .user-meta span { font-size: 11.5px; color: var(--text-faint); }
.user-caret { width: 15px; height: 15px; transform: rotate(90deg); opacity: .6; }
.theme-toggles { display: flex; justify-content: center; gap: 10px; }
.t-btn { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; color: var(--text-faint); border: 1px solid var(--line); transition: all .25s; }
.t-btn:hover { color: var(--text); border-color: rgba(47,212,238,.3); }
.t-btn.is-on { color: var(--cyan); border-color: rgba(47,212,238,.4); box-shadow: 0 0 12px rgba(47,212,238,.2); }
.t-btn .icon { width: 17px; height: 17px; }

/* =================================================================
   5. STAGE
   ================================================================= */
.stage { position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden; padding: 14px 16px; }

/* Topbar / Begrüssung */
.topbar {
  display: flex; align-items: center; gap: 20px;
  padding: 16px 22px; border-radius: var(--radius); z-index: 4;
}
.greeting { min-width: 0; }
.greeting h2 { font-family: var(--font-display); font-size: 22px; font-weight: 600; letter-spacing: .3px; }
.greeting-sub { font-size: 12.5px; color: var(--text-faint); margin-top: 3px; display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.wx-ic { width: 15px; height: 15px; color: var(--gold-soft); display: inline-block; }

.stats { display: flex; gap: 10px; margin-left: auto; }
.stat {
  min-width: 84px; padding: 8px 14px; border-radius: 13px; text-align: center;
  background: rgba(16,28,48,.45); border: 1px solid var(--line);
  transition: border-color .25s, transform .25s;
}
.stat:hover { border-color: rgba(47,212,238,.35); transform: translateY(-2px); }
.stat strong { font-family: var(--font-display); font-size: 20px; color: var(--cyan-soft); display: block; line-height: 1.1; }
.stat span { font-size: 10.5px; color: var(--text-faint); letter-spacing: .2px; }

.top-actions { display: flex; gap: 10px; }
.round-btn { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; color: var(--text-dim); border: 1px solid var(--line); background: rgba(16,28,48,.4); transition: all .25s; position: relative; }
.round-btn:hover { color: var(--text); border-color: rgba(47,212,238,.35); box-shadow: 0 0 16px rgba(47,212,238,.15); }
.round-btn.has-dot::after { content:""; position:absolute; top:9px; right:10px; width:7px; height:7px; border-radius:50%; background:var(--gold); box-shadow:0 0 8px var(--gold); }

/* Kern-Bereich */
.core-area { position: relative; flex: 1; min-height: 0; margin-top: 14px; }
#fieldCanvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* =================================================================
   6. AI-KERN  (dominant, lebendig)
   ================================================================= */
.core {
  position: absolute; top: 50%; left: 50%;
  width: 380px; height: 380px;
  transform: translate(-50%, -50%);
  display: grid; place-items: center; z-index: 3;
}
.core > * { grid-area: 1 / 1; } /* alle Layer übereinander */
.core > .core-label { z-index: 5; }

/* Emanierende Energie-Impulse */
.core-pulse-ring {
  width: 230px; height: 230px; border-radius: 50%; justify-self: center; align-self: center;
  border: 1px solid rgba(47,212,238,.5);
  animation: pulseOut 4.6s ease-out infinite;
}
.core-pulse-ring.d2 { animation-delay: 2.3s; }
@keyframes pulseOut {
  0%   { transform: scale(.7); opacity: .0; }
  18%  { opacity: .55; }
  100% { transform: scale(1.55); opacity: 0; }
}

/* Ringe */
.core-ring { border-radius: 50%; place-self: center; }
.core-ring.outer {
  width: 360px; height: 360px;
  border: 1px solid rgba(47,212,238,.18);
  box-shadow: inset 0 0 60px rgba(47,212,238,.10), 0 0 70px rgba(47,212,238,.08);
  animation: spin 60s linear infinite;
}
.core-ring.dashed {
  width: 250px; height: 250px;
  border: 1px dashed rgba(47,212,238,.3);
  animation: spin-rev 40s linear infinite;
}
/* Radar-Sweep (leuchtende, drehende Lichtspur) */
.core-sweep {
  width: 320px; height: 320px; border-radius: 50%; place-self: center;
  background: conic-gradient(from 0deg, rgba(47,212,238,0) 0deg, rgba(47,212,238,0) 210deg, rgba(47,212,238,.14) 300deg, rgba(138,234,248,.5) 352deg, rgba(47,212,238,0) 360deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 31px), #000 calc(100% - 30px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 31px), #000 calc(100% - 30px));
  animation: spin 7s linear infinite;
}
/* Gold-Akzent-Bogen */
.core-arc {
  width: 300px; height: 300px; border-radius: 50%; place-self: center;
  border: 2px solid transparent; border-top-color: var(--gold); border-right-color: rgba(244,183,64,.25);
  filter: drop-shadow(0 0 6px rgba(244,183,64,.6));
  animation: spin 14s linear infinite;
}

/* Orbitierende Datenpunkte */
.orbit { border-radius: 50%; place-self: center; position: relative; }
.orbit-a { width: 196px; height: 196px; animation: spin 13s linear infinite; }
.orbit-b { width: 270px; height: 270px; animation: spin-rev 19s linear infinite; }
.orbit-c { width: 340px; height: 340px; animation: spin 28s linear infinite; }
.od { position: absolute; top: -4px; left: 50%; width: 8px; height: 8px; border-radius: 50%; transform: translateX(-50%); background: var(--cyan-soft); box-shadow: 0 0 12px var(--cyan), 0 0 22px var(--cyan); }
.orbit-b .od { background: var(--gold-soft); box-shadow: 0 0 12px var(--gold), 0 0 22px var(--gold); }

/* Innere Kugel + Glow */
.core-glow {
  width: 220px; height: 220px; border-radius: 50%; place-self: center;
  background: radial-gradient(circle, rgba(47,212,238,.55), rgba(47,212,238,.08) 60%, transparent 72%);
  filter: blur(8px); animation: glowPulse 4.6s ease-in-out infinite;
}
.core-orb {
  width: 186px; height: 186px; border-radius: 50%; place-self: center;
  background:
    radial-gradient(circle at 42% 36%, rgba(150,235,250,.45), rgba(20,60,90,.5) 42%, rgba(7,14,26,.7) 72%),
    radial-gradient(circle at 50% 50%, rgba(12,30,50,.6), rgba(5,10,20,.4));
  border: 1px solid rgba(47,212,238,.32);
  box-shadow: inset 0 0 50px rgba(47,212,238,.3), 0 0 50px rgba(47,212,238,.2);
  animation: corePulse 4.6s ease-in-out infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes spin-rev { to { transform: rotate(-360deg); } }
@keyframes corePulse { 0%,100%{ box-shadow: inset 0 0 50px rgba(47,212,238,.3), 0 0 50px rgba(47,212,238,.2);} 50%{ box-shadow: inset 0 0 72px rgba(47,212,238,.5), 0 0 80px rgba(47,212,238,.34);} }
@keyframes glowPulse { 0%,100%{ transform: scale(1); opacity:.8;} 50%{ transform: scale(1.16); opacity:1;} }

.core-label { text-align: center; pointer-events: none; }
.core-title { font-family: var(--font-display); font-size: 20px; font-weight: 700; letter-spacing: 3.5px; display: block; color: #eafaff; text-shadow: 0 0 22px rgba(47,212,238,.7); }
.core-sub { font-family: var(--font-display); font-size: 10.5px; letter-spacing: 6px; color: var(--cyan-soft); display: block; margin-top: 5px; }

/* Scan- + Hologramm-Effekt im Kern */
.core-fx { width: 186px; height: 186px; border-radius: 50%; place-self: center; overflow: hidden; position: relative; z-index: 4; pointer-events: none; }
.core-fx .scan { position: absolute; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, rgba(138,234,248,.85), transparent); box-shadow: 0 0 14px rgba(138,234,248,.8); animation: scanMove 4.8s ease-in-out infinite; }
@keyframes scanMove { 0%{ top: 10%; } 50%{ top: 86%; } 100%{ top: 10%; } }
.core-fx .holo { position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(47,212,238,.08) 0 1px, transparent 1px 7px); opacity: .5; animation: holoShift 7s linear infinite; }
@keyframes holoShift { to { background-position: 0 14px; } }

/* Kurzer Energie-Puls (per JS bei Eingabe) */
.core.is-pulsing .core-vortex { animation: vortexBreath 7s ease-in-out infinite, pulseHit .7s ease-out; }
@keyframes pulseHit { 0%{ filter: brightness(1);} 40%{ filter: brightness(1.7);} 100%{ filter: brightness(1);} }

/* =================================================================
   7. ORBIT-MODULE
   ================================================================= */
.nodes { position: absolute; inset: 0; z-index: 2; }
.node { position: absolute; transform: translate(-50%, -50%); }
.node-inner { display: flex; align-items: center; gap: 11px; cursor: pointer; will-change: transform; }
.node-dot {
  width: 50px; height: 50px; border-radius: 50%; flex: none; display: grid; place-items: center; position: relative;
  color: var(--cyan-soft);
  background: radial-gradient(circle at 38% 32%, rgba(22,44,66,.92), rgba(8,16,28,.88));
  border: 1px solid rgba(47,212,238,.45);
  box-shadow: 0 0 0 4px rgba(47,212,238,.05), 0 0 18px rgba(47,212,238,.22);
  backdrop-filter: blur(4px);
  transition: transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .35s, border-color .35s;
}
.node-dot .icon { width: 23px; height: 23px; }
/* Energiering um jedes Modul */
.node-ring { position: absolute; inset: -7px; border-radius: 50%; border: 1px dashed rgba(47,212,238,.3); animation: spin 9s linear infinite; pointer-events: none; }
.node.accent-gold .node-ring { border-color: rgba(244,183,64,.3); }
/* Aktivitätsstatus */
.node-status { position: absolute; top: 1px; right: 1px; width: 8px; height: 8px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 8px var(--teal); animation: actBlink 1.9s ease-in-out infinite; }
/* Kommunikations-Flash (Modul sendet an Kern) */
.node.signal .node-dot { border-color: var(--cyan); box-shadow: 0 0 0 6px rgba(47,212,238,.16), 0 0 42px rgba(47,212,238,.85); }
.node.accent-gold.signal .node-dot { border-color: var(--gold); box-shadow: 0 0 0 6px rgba(244,183,64,.18), 0 0 42px rgba(244,183,64,.85); }
.node-label { line-height: 1.12; pointer-events: none; white-space: nowrap; text-shadow: 0 1px 9px rgba(2,8,16,.95); }
.node-label strong { font-size: 13.5px; font-weight: 600; color: var(--text); display: block; }
.node-label span { font-size: 10.5px; color: var(--text-faint); }
.node.flip .node-inner { flex-direction: row-reverse; }
.node.flip .node-label { text-align: right; }

.node.accent-gold .node-dot { color: var(--gold-soft); border-color: rgba(244,183,64,.5); box-shadow: 0 0 0 4px rgba(244,183,64,.05), 0 0 18px rgba(244,183,64,.25); }

.node-inner:hover .node-dot { transform: scale(1.13); border-color: var(--cyan); box-shadow: 0 0 0 5px rgba(47,212,238,.1), 0 0 30px rgba(47,212,238,.55); }
.node.accent-gold .node-inner:hover .node-dot { border-color: var(--gold); box-shadow: 0 0 0 5px rgba(244,183,64,.12), 0 0 30px rgba(244,183,64,.6); }
.node-inner:hover .node-label strong { color: #fff; }

.node.is-selected .node-dot { border-color: var(--cyan); box-shadow: 0 0 0 6px rgba(47,212,238,.13), 0 0 38px rgba(47,212,238,.65); animation: nodeSel 2.6s ease-in-out infinite; }
.node.accent-gold.is-selected .node-dot { box-shadow: 0 0 0 6px rgba(244,183,64,.16), 0 0 38px rgba(244,183,64,.65); }
@keyframes nodeSel { 0%,100%{ box-shadow:0 0 0 6px rgba(47,212,238,.13), 0 0 32px rgba(47,212,238,.55);} 50%{ box-shadow:0 0 0 9px rgba(47,212,238,.05), 0 0 50px rgba(47,212,238,.8);} }

/* =================================================================
   8. KI-AKTIVITÄTSANZEIGE
   ================================================================= */
.ai-activity {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, 152px);
  display: flex; align-items: center; gap: 11px;
  padding: 9px 18px; border-radius: 999px; z-index: 4;
  font-size: 12.5px; color: var(--cyan-soft); letter-spacing: .2px; max-width: 86%;
}
.act-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 10px var(--teal); animation: actBlink 1.6s ease-in-out infinite; }
@keyframes actBlink { 0%,100%{ opacity:1; transform:scale(1);} 50%{ opacity:.35; transform:scale(.8);} }
#activityText { transition: opacity .4s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#activityText.fade { opacity: 0; }

/* =================================================================
   9. CHAT
   ================================================================= */
.chatbar { padding: 16px 0 4px; z-index: 4; }
.chat-form {
  display: flex; align-items: center; gap: 12px;
  max-width: 560px; margin: 0 0 0 28px;
  padding: 8px 8px 8px 18px; border-radius: 999px;
  transition: border-color .3s, box-shadow .3s;
}
.chat-form:focus-within { border-color: rgba(47,212,238,.45); box-shadow: 0 14px 50px rgba(0,0,0,.45), 0 0 26px rgba(47,212,238,.2); }
.chat-spark { color: var(--cyan); display: grid; place-items: center; }
.chat-spark .icon { width: 19px; height: 19px; animation: orbBreath 4s ease-in-out infinite; }
.chat-form input, .chat-form textarea { flex: 1; background: none; border: none; outline: none; color: var(--text); font-size: 15px; }
.chat-form input::placeholder, .chat-form textarea::placeholder { color: var(--text-faint); }
.chat-send { width: 44px; height: 44px; border-radius: 50%; flex: none; display: grid; place-items: center; color: #04141a; background: linear-gradient(135deg, var(--cyan-soft), var(--cyan)); box-shadow: 0 0 18px rgba(47,212,238,.45); transition: transform .2s, box-shadow .2s; }
.chat-send:hover { transform: scale(1.06); box-shadow: 0 0 24px rgba(47,212,238,.7); }
.chat-send .icon { width: 21px; height: 21px; }

/* =================================================================
   10. INFO-PANEL
   ================================================================= */
.panel {
  margin: 14px 14px 14px 0; border-radius: var(--radius);
  padding: 20px; display: flex; flex-direction: column; gap: 18px;
  overflow-y: auto; z-index: 5;
  transition: opacity .4s, transform .5s cubic-bezier(.4,0,.2,1);
}
.app.panel-collapsed .panel { opacity: 0; transform: translateX(30px); pointer-events: none; }
.panel-head { display: flex; justify-content: space-between; align-items: center; }
.panel-eyebrow { font-size: 11px; letter-spacing: 3px; color: var(--text-faint); font-weight: 600; }
.panel-close { width: 34px; height: 34px; } .panel-close .icon { width: 17px; height: 17px; }
.panel-id { display: flex; align-items: center; gap: 15px; }
.panel-icon { width: 58px; height: 58px; border-radius: 16px; flex: none; display: grid; place-items: center; color: var(--cyan-soft); background: radial-gradient(circle at 38% 32%, rgba(20,40,60,.9), rgba(8,16,28,.85)); border: 1px solid rgba(47,212,238,.4); box-shadow: 0 0 22px rgba(47,212,238,.25), inset 0 0 14px rgba(47,212,238,.12); }
.panel-icon .icon { width: 28px; height: 28px; }
.panel-icon.accent-gold { color: var(--gold-soft); border-color: rgba(244,183,64,.45); box-shadow: 0 0 22px rgba(244,183,64,.25), inset 0 0 14px rgba(244,183,64,.12); }
.panel-id h2 { font-family: var(--font-display); font-size: 23px; font-weight: 600; }
.panel-id p { font-size: 13px; color: var(--text-dim); margin-top: 2px; }
.panel-status { display: flex; align-items: center; gap: 16px; padding-bottom: 4px; border-bottom: 1px solid var(--line-soft); }
.status-chip { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--text-dim); }
.status-chip .icon { width: 15px; height: 15px; }
.status-active { font-size: 13px; color: var(--teal); font-weight: 500; }
.panel-block h3 { font-size: 11px; letter-spacing: 2.5px; color: var(--text-faint); font-weight: 600; margin-bottom: 11px; }
.panel-block p { font-size: 13.5px; line-height: 1.65; color: var(--text-dim); }
.task-list { list-style: none; display: flex; flex-direction: column; gap: 11px; }
.task-list li { display: flex; align-items: center; gap: 11px; font-size: 13.5px; color: var(--text-dim); }
.task-list li::before { content:""; width:8px; height:8px; border-radius:50%; flex:none; background:var(--cyan); box-shadow:0 0 8px var(--cyan); }
.task-list li.warn::before { background: var(--gold); box-shadow: 0 0 8px var(--gold); }
.perf { display: flex; align-items: center; gap: 16px; }
.ring-meter { width: 66px; height: 66px; border-radius: 50%; flex: none; display: grid; place-items: center; position: relative; background: radial-gradient(closest-side, var(--bg-2) 76%, transparent 77%), conic-gradient(var(--cyan) calc(var(--p,78) * 1%), rgba(47,212,238,.12) 0); box-shadow: 0 0 18px rgba(47,212,238,.15); transition: background .6s ease; }
.ring-meter span { font-size: 14px; font-weight: 600; color: var(--cyan-soft); }
.perf-text strong { display: block; font-size: 15px; color: var(--teal); }
.perf-text span { font-size: 12.5px; color: var(--text-faint); line-height: 1.5; }
.panel-cta { margin-top: auto; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 14px; border-radius: 14px; font-size: 14.5px; font-weight: 600; color: #eafaff; background: linear-gradient(90deg, rgba(47,212,238,.18), rgba(47,212,238,.06)); border: 1px solid rgba(47,212,238,.4); box-shadow: 0 0 20px rgba(47,212,238,.12); transition: all .25s; }
.panel-cta:hover { background: linear-gradient(90deg, rgba(47,212,238,.3), rgba(47,212,238,.12)); box-shadow: 0 0 28px rgba(47,212,238,.28); }
.panel-cta .icon { width: 18px; height: 18px; }

.panel-reopen { position: fixed; right: 20px; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 12px; z-index: 6; display: grid; place-items: center; color: var(--cyan); }
.panel-reopen .icon { transform: rotate(180deg); }
.panel-reopen[hidden] { display: none; }

/* =================================================================
   11. RESPONSIVE
   ================================================================= */
@media (max-width: 1240px), (pointer: coarse) {
  .stats .stat:nth-child(4) { display: none; }
}
@media (max-width: 1180px), (pointer: coarse) {
  .app { grid-template-columns: var(--sidebar-w) 1fr; }
  .app.panel-collapsed { grid-template-columns: var(--sidebar-w) 1fr; }
  .panel { position: fixed; top: 0; right: 0; bottom: 0; margin: 14px; width: 340px; }
  .app:not(.panel-collapsed) .panel { transform: translateX(0); }
  .app.panel-collapsed .panel { transform: translateX(110%); opacity: 1; }
  .stats { display: none; }
}
@media (max-width: 880px), (pointer: coarse) {
  :root { --sidebar-w: 76px; }
  .brand-text, .nav-item span, .nav-item .badge, .nav-arrow, .user-meta, .user-caret { display: none; }
  .nav-item { justify-content: center; padding: 13px; }
  .brand, .user-card { justify-content: center; }
  .core { width: 290px; height: 290px; }
  .core-ring.outer { width: 280px; height: 280px; }
  .core-sweep { width: 250px; height: 250px; }
  .core-orb { width: 150px; height: 150px; }
  .core-glow { width: 170px; height: 170px; }
  .core-title { font-size: 15px; letter-spacing: 2px; }
  .node-label { display: none; }
  .greeting h2 { font-size: 18px; }
  .ai-activity { transform: translate(-50%, 120px); }
}

/* ---------- 12. Reduzierte Bewegung ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}


/* =================================================================
   13. O.B.S.I.D.I.A.N. — Persönlichkeits-Ebene
   ================================================================= */

/* Berechtigungsstufen-Chip in der Topbar */
.level-chip {
  margin-top: 7px; display: inline-flex; align-items: center; gap: 7px;
  font-size: 11px; letter-spacing: .3px; color: var(--cyan-soft);
  padding: 4px 11px; border-radius: 999px;
  background: rgba(47,212,238,.08); border: 1px solid rgba(47,212,238,.28);
  box-shadow: 0 0 12px rgba(47,212,238,.08);
}
.level-chip .icon { width: 13px; height: 13px; }

/* ---------- Chat-Verlauf über der Eingabeleiste ---------- */
.chat-stream {
  position: absolute; left: 28px; bottom: 96px;
  width: min(560px, 46%); max-height: 60%;
  display: flex; flex-direction: column; gap: 10px;
  overflow-y: auto; z-index: 6; padding: 4px 2px;
  scrollbar-width: thin; scrollbar-color: rgba(47,212,238,.35) transparent;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 26px);
          mask-image: linear-gradient(180deg, transparent 0, #000 26px);
}
.msg {
  max-width: 78%; padding: 11px 15px; border-radius: 16px;
  font-size: 13.5px; line-height: 1.55; white-space: pre-line;
  animation: msgIn .35s cubic-bezier(.2,.9,.3,1.2);
}
@keyframes msgIn { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
.msg.user {
  align-self: flex-end; color: #04141a; font-weight: 500;
  background: linear-gradient(135deg, var(--cyan-soft), var(--cyan));
  border-bottom-right-radius: 5px;
  box-shadow: 0 6px 22px rgba(47,212,238,.28);
}
.msg.ai {
  align-self: flex-start; color: var(--text);
  background: linear-gradient(180deg, rgba(18,30,52,.82), rgba(9,16,30,.85));
  border: 1px solid rgba(130,190,225,.2);
  border-bottom-left-radius: 5px;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 10px 34px rgba(0,0,0,.4);
}
.msg.ai .who {
  display: block; font-size: 9.5px; letter-spacing: 2.5px; font-weight: 700;
  color: var(--cyan-soft); margin-bottom: 5px;
}
/* Denk-Anzeige (drei Punkte) */
.msg.typing { display: inline-flex; gap: 6px; align-items: center; padding: 14px 18px; }
.msg.typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--cyan-soft); opacity: .4; animation: think 1.2s ease-in-out infinite; }
.msg.typing i:nth-child(2) { animation-delay: .18s; }
.msg.typing i:nth-child(3) { animation-delay: .36s; }
@keyframes think { 0%,100% { opacity: .25; transform: translateY(0); } 45% { opacity: 1; transform: translateY(-3px); } }
/* Schnellantworten (Initiative) */
.quick-replies { display: flex; gap: 9px; align-self: flex-start; flex-wrap: wrap; animation: msgIn .3s ease; }
.qr-btn {
  padding: 8px 16px; border-radius: 999px; font-size: 12.5px; font-weight: 600;
  color: var(--cyan-soft); border: 1px solid rgba(47,212,238,.4);
  background: rgba(47,212,238,.09); transition: all .2s;
}
.qr-btn:hover { background: rgba(47,212,238,.22); color: #fff; box-shadow: 0 0 16px rgba(47,212,238,.3); }

/* ---------- Briefing-Overlay (Start-Bericht) ---------- */
.briefing {
  position: fixed; inset: 0; z-index: 40;
  display: grid; place-items: center;
  background: rgba(2,5,10,.55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  animation: briefFade .5s ease;
}
.briefing[hidden] { display: none; }
@keyframes briefFade { from { opacity: 0; } }
.briefing-card {
  width: min(520px, 92%); border-radius: 22px; padding: 28px 28px 22px;
  animation: briefCard .6s cubic-bezier(.2,.9,.3,1.1);
}
@keyframes briefCard { from { opacity: 0; transform: translateY(26px) scale(.97); } }
.brief-head { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 20px; }
.brief-orb {
  width: 46px; height: 46px; border-radius: 50%; flex: none; margin-top: 2px;
  background: radial-gradient(circle at 36% 30%, var(--cyan-soft), var(--cyan) 55%, #0c5a72);
  box-shadow: 0 0 26px rgba(47,212,238,.65);
  animation: orbBreath 3.4s ease-in-out infinite;
}
.brief-head h2 { font-family: var(--font-display); font-size: 21px; font-weight: 600; }
.brief-head p { font-size: 13.5px; color: var(--text-dim); margin-top: 5px; line-height: 1.55; }
.brief-head strong { color: var(--cyan-soft); }
.brief-list { list-style: none; display: flex; flex-direction: column; gap: 10px; margin: 0 0 22px; }
.brief-list li {
  display: flex; align-items: center; gap: 11px; font-size: 13.5px; color: var(--text-dim);
  opacity: 0; transform: translateX(-8px); transition: opacity .4s ease, transform .4s ease;
}
.brief-list li.show { opacity: 1; transform: none; }
.brief-list li::before {
  content: "✓"; width: 20px; height: 20px; border-radius: 6px; flex: none;
  display: grid; place-items: center; font-size: 12px; font-weight: 700;
  color: #04141a; background: linear-gradient(135deg, var(--cyan-soft), var(--cyan));
  box-shadow: 0 0 10px rgba(47,212,238,.4);
}
.brief-list li.warn::before { content: "!"; background: linear-gradient(135deg, var(--gold-soft), var(--gold)); box-shadow: 0 0 10px rgba(244,183,64,.45); }
.brief-actions { display: flex; gap: 11px; }
.brief-btn {
  flex: 1; padding: 12px; border-radius: 13px; font-size: 13.5px; font-weight: 600;
  color: var(--text-dim); border: 1px solid var(--line); transition: all .22s;
}
.brief-btn:hover { color: var(--text); border-color: rgba(47,212,238,.4); }
.brief-btn.primary {
  color: #04141a; border: none;
  background: linear-gradient(135deg, var(--cyan-soft), var(--cyan));
  box-shadow: 0 0 22px rgba(47,212,238,.35);
}
.brief-btn.primary:hover { box-shadow: 0 0 30px rgba(47,212,238,.6); color: #02141a; }

@media (max-width: 880px), (pointer: coarse) {
  .level-chip { display: none; }
  .chat-stream { bottom: 88px; left: 4%; width: 92%; max-height: 46%; }
  .chat-form { margin: 0 auto; }
}




/* ---------- Kern-Wirbel (eingebettetes Bild, animiert) ---------- */
.core-vortex {
  width: 100%; height: 100%; place-self: center;
  display: grid; place-items: center;
  animation: vortexBreath 7s ease-in-out infinite;
  filter: drop-shadow(0 0 34px rgba(50,150,255,.38)) drop-shadow(0 0 90px rgba(30,110,230,.22));
}
.core-vortex img {
  width: 100%; height: 100%; object-fit: contain; user-select: none; -webkit-user-drag: none;
  animation: spin 140s linear infinite;
}
.core-ringlayer {
  width: 100%; height: 100%; place-self: center;
  display: grid; place-items: center; pointer-events: none;
}
.core-ringlayer img {
  width: 100%; height: 100%; object-fit: contain;
  animation: spin-rev 70s linear infinite;
  filter: drop-shadow(0 0 14px rgba(140,200,255,.3));
}
@keyframes vortexBreath {
  0%,100% { transform: scale(1);    filter: brightness(1); }
  50%     { transform: scale(1.045); filter: brightness(1.12); }
}

/* =================================================================
   14. LEBENSZUSTÄNDE DES KERNS  (Blau/Türkis/Gold/Orange/Rot)
   ================================================================= */
.core-vortex img, .core-ringlayer img { transition: filter 1.4s ease; }
.core { transition: opacity 2.8s ease, transform 2.8s cubic-bezier(.2,.8,.25,1); }
.bg-nebula { transition: opacity 1.6s ease; }

/* Denkt nach: schnellere Drehung, Türkis */
.core.is-thinking .core-vortex img { animation-duration: 42s; filter: hue-rotate(-26deg) saturate(1.25); }
.core.is-thinking .core-ringlayer img { filter: hue-rotate(-26deg) saturate(1.25) drop-shadow(0 0 14px rgba(70,220,205,.35)); }

/* Spricht: äusserer Ring pulsiert */
.core.is-speaking .core-ringlayer { animation: ringPulse 1.1s ease-in-out infinite; }
@keyframes ringPulse { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.035); opacity: .88; } }

/* Empfehlung: Gold */
.core.state-advice .core-vortex img,
.core.state-advice .core-ringlayer img { filter: hue-rotate(-158deg) saturate(1.3) brightness(1.08); }

/* Aufmerksamkeit: Orange */
.core.state-attention .core-vortex img,
.core.state-attention .core-ringlayer img { filter: hue-rotate(-172deg) saturate(1.45) brightness(1.05); }

/* Kritisch: Rot, schnellere Atmung, Umgebung dunkler */
.core.state-critical .core-vortex img,
.core.state-critical .core-ringlayer img { filter: hue-rotate(150deg) saturate(1.6) brightness(1.05); }
.core.state-critical .core-vortex { animation: vortexBreath 1.8s ease-in-out infinite; }
body.crit-dim .bg-nebula { opacity: .4; }

/* =================================================================
   15. BOOT-SEQUENZ
   ================================================================= */
.boot {
  position: fixed; inset: 0; z-index: 80; background: #000;
  display: grid; place-items: center;
  transition: background 2.8s ease, opacity .9s ease;
}
.boot.reveal { background: rgba(0,0,0,0); }
.boot.gone { opacity: 0; pointer-events: none; }
.boot-start {
  width: 122px; height: 122px; border-radius: 50%; position: relative;
  display: grid; place-items: center; color: var(--cyan);
  border: 1px solid rgba(47,212,238,.4); background: rgba(47,212,238,.05);
  box-shadow: 0 0 40px rgba(47,212,238,.16), inset 0 0 30px rgba(47,212,238,.08);
  transition: opacity .6s, transform .6s, box-shadow .4s;
}
.boot-start .icon { width: 36px; height: 36px; }
.boot-start:hover { transform: scale(1.06); box-shadow: 0 0 70px rgba(47,212,238,.4), inset 0 0 34px rgba(47,212,238,.16); }
.boot-ring { position: absolute; inset: -12px; border-radius: 50%; border: 1px dashed rgba(47,212,238,.35); animation: spin 14s linear infinite; }
.boot-hint {
  position: absolute; top: calc(50% + 88px); left: 0; right: 0; text-align: center;
  font-size: 11px; letter-spacing: 4px; color: var(--text-faint); transition: opacity .6s;
}
.boot-start.hide, .boot-hint.hide { opacity: 0; pointer-events: none; }
.boot-lines { position: absolute; bottom: 15%; left: 0; right: 0; text-align: center; display: flex; flex-direction: column; gap: 12px; pointer-events: none; }
.boot-lines p { opacity: 0; transform: translateY(10px); transition: opacity 1s ease, transform 1s ease; font-family: var(--font-display); }
#bootLine1 { font-size: 25px; font-weight: 600; color: var(--text); text-shadow: 0 0 24px rgba(47,212,238,.45); }
#bootLine2 { font-size: 12.5px; letter-spacing: 5px; color: var(--cyan-soft); }
.boot-lines p.show { opacity: 1; transform: none; }

/* Vor dem Boot: alles abgedunkelt, Kern noch klein & unsichtbar */
.app { transition: opacity 2.4s ease; }
.pre-boot .app { opacity: .12; }
.pre-boot .core { opacity: 0; transform: translate(-50%, -50%) scale(.55); }


/* ---------- Mikrofon-Knopf (Spracheingabe) ---------- */
.chat-mic {
  width: 40px; height: 40px; border-radius: 12px; flex: none;
  display: grid; place-items: center; color: var(--text-dim);
  border: 1px solid var(--line); background: rgba(16,28,48,.5);
  transition: all .22s;
}
.chat-mic:hover { color: var(--cyan-soft); border-color: rgba(47,212,238,.45); }
.chat-mic.rec-on { color: #ff5a5a; border-color: rgba(255,90,90,.6); animation: recPulse 1.1s ease-in-out infinite; }
@keyframes recPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(255,90,90,.35); } 50% { box-shadow: 0 0 0 8px rgba(255,90,90,0); } }


/* Gehirn-Umschalter in der Kopfleiste */
.brain-btn {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  color: #8fdcff;
  width: auto;
  min-width: 44px;
  padding: 0 12px;
}
.brain-btn.gpt { color: #7fe8b0; }


/* ==== HANDY-MODUS: nur der Kern, Chat auf Abruf ==== */
.chat-fab { display: none; }

@media (max-width: 880px), (pointer: coarse) {
  /* Alles weg ausser dem Kern in der Mitte */
  .sidebar, .topbar, .panel, .nodes { display: none !important; }

  /* Statuszeile klein und dezent oben — zeigt "hört zu", Diagnosen usw. */
  .ai-activity {
    position: fixed; top: 10px; left: 50%; transform: translateX(-50%);
    z-index: 35; max-width: 92%;
  }

  /* PC-Raster auflösen: der Kern bekommt den GANZEN Bildschirm */
  html, body { overflow-x: hidden; }
  .app { display: block !important; width: 100vw; height: 100vh; }
  .stage { width: 100vw; height: 100vh; min-width: 0; display: block; }
  .core-area {
    position: fixed; inset: 0; margin: 0; padding: 0;
    display: grid; place-items: center;
  }
  .core { position: relative; left: auto; top: auto; transform: none; }

  /* Chat standardmässig versteckt */
  body:not(.chat-open) .chat-stream,
  body:not(.chat-open) .chatbar { display: none; }

  /* Schwebender Chat-Knopf unten rechts */
  .chat-fab {
    display: grid; place-items: center;
    position: fixed; right: 18px; bottom: 18px;
    width: 52px; height: 52px; border-radius: 50%;
    background: rgba(10, 26, 36, .85);
    border: 1px solid rgba(47, 212, 238, .4);
    color: #dff6ff; font-size: 22px; z-index: 40;
    box-shadow: 0 8px 30px rgba(0, 0, 0, .5), 0 0 18px rgba(47, 212, 238, .25);
  }
  /* Bei offenem Chat wandert der Knopf nach OBEN rechts (Schliessen),
     damit er nicht auf dem Senden-Pfeil liegt */
  body.chat-open .chat-fab {
    background: rgba(47, 212, 238, .25);
    bottom: auto; top: 14px; right: 14px;
    width: 44px; height: 44px; font-size: 18px;
  }

  /* Geöffneter Chat: klein unten, Eingabe am Boden */
  body.chat-open .chat-stream {
    display: flex;
    left: 4%; width: 92%;
    bottom: 84px; max-height: 38%;
  }
  body.chat-open .chatbar {
    display: block;
    position: fixed; left: 0; right: 0; bottom: 0;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
    z-index: 30;
  }
  body.chat-open .chat-form { margin: 0 auto; max-width: 96%; }
}


/* ==== DIE BÜHNE: Anzeige-Panels ==== */
.stage-panel {
  position: fixed; z-index: 60;
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(440px, 94vw); max-height: 82vh; overflow-y: auto;
  border-radius: 20px; padding: 14px 16px 16px;
  /* NEON-GLAS: durchscheinend, Hintergrund schimmert weichgezeichnet durch */
  background: linear-gradient(160deg, rgba(20,48,66,.42), rgba(6,16,26,.55));
  -webkit-backdrop-filter: blur(18px) saturate(150%);
          backdrop-filter: blur(18px) saturate(150%);
  border: 1px solid rgba(80, 225, 255, .75);
  box-shadow:
    0 0 10px rgba(47, 212, 238, .55),
    0 0 32px rgba(47, 212, 238, .35),
    0 0 80px rgba(47, 212, 238, .18),
    inset 0 0 22px rgba(47, 212, 238, .10),
    0 30px 90px rgba(0, 0, 0, .55);
  animation: spIn .35s cubic-bezier(.2,.9,.3,1.2), spGlow 3.2s ease-in-out infinite;
}
/* Glanzlicht oben wie auf echtem Glas */
.stage-panel::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 46%;
  border-radius: 20px 20px 60% 60%;
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,0));
  pointer-events: none;
}
@keyframes spGlow {
  0%, 100% { box-shadow: 0 0 10px rgba(47,212,238,.55), 0 0 32px rgba(47,212,238,.35),
             0 0 80px rgba(47,212,238,.18), inset 0 0 22px rgba(47,212,238,.10),
             0 30px 90px rgba(0,0,0,.55); }
  50%      { box-shadow: 0 0 16px rgba(47,212,238,.85), 0 0 48px rgba(47,212,238,.50),
             0 0 110px rgba(47,212,238,.28), inset 0 0 30px rgba(47,212,238,.16),
             0 30px 90px rgba(0,0,0,.55); }
}
@keyframes spIn { from { opacity: 0; transform: translate(-50%,-46%) scale(.94); }
                  to   { opacity: 1; transform: translate(-50%,-50%) scale(1); } }
.sp-head { display: flex; justify-content: space-between; align-items: center;
  color: var(--cyan); font-size: 13px; letter-spacing: 1.4px; text-transform: uppercase;
  margin-bottom: 10px; }
.sp-close { background: none; border: 1px solid rgba(47,212,238,.35); color: #cfeefb;
  border-radius: 50%; width: 30px; height: 30px; cursor: pointer; font-size: 13px; }
.wx-now { display: flex; align-items: center; gap: 14px; padding: 6px 2px 12px; }
.wx-icon { font-size: 44px; }
.wx-temp { font-size: 42px; font-weight: 700; color: #eaf9ff; }
.wx-desc { color: #9fd8ea; font-size: 14px; line-height: 1.35; }
.wx-hours { display: flex; gap: 6px; overflow-x: auto; padding: 4px 0 10px; }
.wx-h { min-width: 62px; text-align: center; padding: 8px 4px; border-radius: 12px;
  background: rgba(120,220,255,.06);
  border: 1px solid rgba(80,225,255,.35);
  box-shadow: 0 0 8px rgba(47,212,238,.20), inset 0 0 10px rgba(47,212,238,.06);
  color: #d7f2fc; font-size: 12.5px; }
.wx-hi { font-size: 20px; margin: 3px 0; }
.wx-rain { color: #7fc9e8; font-size: 11.5px; }
.wx-days { display: flex; flex-direction: column; gap: 6px; }
.wx-d { display: grid; grid-template-columns: 58px 30px 1fr auto 46px;
  align-items: center; gap: 8px; padding: 8px 10px; border-radius: 12px;
  background: rgba(120,220,255,.045);
  border: 1px solid rgba(80,225,255,.30);
  box-shadow: 0 0 7px rgba(47,212,238,.16), inset 0 0 8px rgba(47,212,238,.05);
  color: #d7f2fc; font-size: 13.5px; }
.wx-dn { color: #9fd8ea; }
.wx-dd { color: #bfe6f4; font-size: 12.5px; }
.wx-mm { font-weight: 600; }


/* ==== Karten-Panel ==== */
.obs-map { height: 340px; border-radius: 14px; overflow: hidden;
  border: 1px solid rgba(80,225,255,.35);
  box-shadow: inset 0 0 20px rgba(0,0,0,.5); }
.obs-dot-wrap { background: none; border: none; }
.obs-dot { width: 16px; height: 16px; border-radius: 50%;
  background: #2fd4ee; border: 2px solid #eaf9ff;
  box-shadow: 0 0 12px rgba(47,212,238,.9);
  animation: dotPulse 1.8s ease-out infinite; }
@keyframes dotPulse {
  0%   { box-shadow: 0 0 0 0 rgba(47,212,238,.55), 0 0 12px rgba(47,212,238,.9); }
  70%  { box-shadow: 0 0 0 22px rgba(47,212,238,0), 0 0 12px rgba(47,212,238,.9); }
  100% { box-shadow: 0 0 0 0 rgba(47,212,238,0), 0 0 12px rgba(47,212,238,.9); }
}

/* Karte: dunkler Grund statt Weiss, falls Kacheln laden */
.obs-map .leaflet-container { background: #0a141d; }

/* Karten-Kacheln: dunkel-edel + NEON-BLAU-Tönung (O.B.S.I.D.I.A.N.-Stil).
   hue-rotate dreht Gelb/Grau ins Cyan-Blaue, sepia+saturate gibt den Neon-Schimmer. */
.obs-map .leaflet-tile {
  /* Untergrund dunkler, Strassen bleiben leuchtend. Weniger Gesamt-Blau,
     dafuer tieferer dunkler Grund. */
  filter: brightness(0.82) contrast(1.25) saturate(0.9)
          sepia(0.35) hue-rotate(158deg) saturate(1.8);
}
/* Nur ein dezenter dunkler Vignetten-Schleier — kein starkes Blau mehr */
.obs-map { position: relative; }
.obs-map::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 45%,
      rgba(4,12,28,0) 55%, rgba(3,8,20,.45) 100%);
  z-index: 400;
}

/* Ziel-Marker der Route */
.obs-ziel { width: 14px; height: 14px; border-radius: 50%;
  background: #ffd166; border: 2px solid #fff3d6;
  box-shadow: 0 0 12px rgba(255,209,102,.9); }

/* Navigations-Banner: nächstes Manöver */
.nav-banner { padding: 10px 12px; margin-bottom: 10px; border-radius: 12px;
  background: rgba(47,212,238,.10); border: 1px solid rgba(80,225,255,.45);
  box-shadow: 0 0 12px rgba(47,212,238,.25), inset 0 0 10px rgba(47,212,238,.06);
  color: #eaf9ff; font-size: 15px; font-weight: 600; letter-spacing: .2px; }

/* Navigations-Pfeil: dreht sich mit der Fahrtrichtung */
.obs-arrow { width: 26px; height: 26px;
  clip-path: polygon(50% 0%, 88% 100%, 50% 76%, 12% 100%);
  background: linear-gradient(180deg, #9df0ff, #2fd4ee);
  filter: drop-shadow(0 0 8px rgba(47,212,238,.95));
  transition: transform .4s ease; }

/* ==== Hausplan ==== */
.haus-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.haus-raum { display: flex; flex-direction: column; gap: 4px; padding: 14px 12px;
  border-radius: 14px; background: rgba(120,220,255,.05);
  border: 1px solid rgba(80,225,255,.30);
  box-shadow: 0 0 8px rgba(47,212,238,.15), inset 0 0 10px rgba(47,212,238,.05); }
.haus-raum.off { opacity: .55; }
.haus-dot { width: 10px; height: 10px; border-radius: 50%; background: #56607a; }
.haus-raum.on .haus-dot { background: #35e08d;
  box-shadow: 0 0 10px rgba(53,224,141,.9); animation: dotPulse 2s ease-out infinite; }
.haus-name { color: #eaf9ff; font-weight: 600; font-size: 14.5px; }
.haus-name small { color: #7fc9e8; font-weight: 400; }
.haus-status { color: #9fd8ea; font-size: 12px; }
.haus-leer { color: #9fd8ea; padding: 8px; }
.haus-hint { margin-top: 12px; color: #7fa8bd; font-size: 11.5px; text-align: center; }

/* Kamera-Panel */
.obs-cam { width: 100%; max-height: 60vh; border-radius: 14px;
  border: 1px solid rgba(80,225,255,.35);
  box-shadow: 0 0 14px rgba(47,212,238,.25); background: #05090f; }

/* Nachrichten-Panel */
.msg-panel { text-align: center; padding: 18px 8px 10px; }
.msg-panel-icon { font-size: 42px; margin-bottom: 12px;
  animation: dotPulse 2s ease-out infinite; border-radius: 50%;
  width: 72px; height: 72px; line-height: 72px; margin: 0 auto 14px; }
.msg-panel-text { color: #eaf9ff; font-size: 20px; font-weight: 600;
  line-height: 1.45; text-shadow: 0 0 18px rgba(47,212,238,.45); }
.msg-panel-hint { margin-top: 16px; color: #7fa8bd; font-size: 11.5px; }

.msg-reply { margin-top: 16px; padding: 10px 26px; border-radius: 12px;
  background: rgba(47,212,238,.15); border: 1px solid rgba(80,225,255,.55);
  color: #dff6ff; font-size: 14px; font-weight: 600; cursor: pointer;
  box-shadow: 0 0 12px rgba(47,212,238,.3); }
.msg-reply:active { background: rgba(47,212,238,.3); }

/* ==== Videoanruf ==== */
.call-status { text-align: center; color: #9fd8ea; font-size: 13px; margin-bottom: 8px; }
.call-videos { position: relative; }
.call-remote { width: 100%; max-height: 56vh; border-radius: 14px; background: #05090f;
  border: 1px solid rgba(80,225,255,.35); box-shadow: 0 0 14px rgba(47,212,238,.25); }
.call-local { position: absolute; right: 10px; bottom: 10px; width: 28%;
  border-radius: 10px; border: 1px solid rgba(80,225,255,.55);
  box-shadow: 0 0 10px rgba(0,0,0,.6); background: #05090f; }
.call-hang { display: block; margin: 14px auto 2px; padding: 10px 30px;
  border-radius: 12px; background: rgba(255,80,80,.18);
  border: 1px solid rgba(255,120,120,.6); color: #ffd9d9;
  font-size: 14px; font-weight: 600; cursor: pointer;
  box-shadow: 0 0 12px rgba(255,80,80,.3); }
.call-btns { display: flex; gap: 12px; justify-content: center; margin-top: 16px; }
.call-yes, .call-no { padding: 12px 28px; border-radius: 12px; font-size: 15px;
  font-weight: 700; cursor: pointer; }
.call-yes { background: rgba(53,224,141,.18); border: 1px solid rgba(53,224,141,.7);
  color: #d9ffe9; box-shadow: 0 0 14px rgba(53,224,141,.35); }
.call-no { background: rgba(255,80,80,.15); border: 1px solid rgba(255,120,120,.6);
  color: #ffd9d9; box-shadow: 0 0 12px rgba(255,80,80,.25); }

/* ==== Multi-Panel: ziehen & Vollbild ==== */
.sp-head { cursor: move; user-select: none; touch-action: none; }
.sp-head-btns { display: flex; gap: 8px; align-items: center; }
.sp-full-btn { background: none; border: 1px solid rgba(47,212,238,.35);
  color: #cfeefb; border-radius: 50%; width: 30px; height: 30px;
  cursor: pointer; font-size: 14px; }
.stage-panel.sp-full { left: 0 !important; top: 0 !important;
  transform: none !important; width: 100vw !important;
  height: 100vh !important; max-height: 100vh !important;
  border-radius: 0 !important; }
.stage-panel.sp-full .obs-cam { max-height: none;
  height: calc(100vh - 76px); width: 100%; object-fit: contain; background: #05090f; }
.stage-panel.sp-full .call-remote { max-height: none;
  height: calc(100vh - 150px); object-fit: contain; background: #05090f; }
.stage-panel.sp-full .call-local { width: 18%; }

/* ==== Einrichtungs-Panel ==== */
.setup-panel { text-align: center; padding: 6px 4px 10px; }
.setup-qr { background: #fff; border-radius: 14px; padding: 10px;
  width: min(260px, 70vw); margin: 0 auto 14px; }
.setup-qr svg { width: 100%; height: auto; display: block; }
.setup-steps { color: #cfeefb; font-size: 14px; line-height: 1.5; }
.setup-steps small { color: #8fb3c6; }
.setup-url { color: #9fd8ea; font-size: 12px; word-break: break-all; margin-bottom: 10px; }
.setup-input { display: block; width: 90%; margin: 14px auto 4px; padding: 12px;
  border-radius: 12px; border: 1px solid rgba(80,225,255,.45);
  background: rgba(10,25,38,.6); color: #eaf9ff; font-size: 16px; text-align: center; }

/* Terminal-Namensschild */
.raum-tag { position: fixed; top: 10px; left: 12px; z-index: 55;
  padding: 5px 14px; border-radius: 999px; font-size: 12px;
  letter-spacing: 1.2px; text-transform: uppercase; color: #9fe6f7;
  background: rgba(10, 25, 38, .55);
  border: 1px solid rgba(80, 225, 255, .35);
  box-shadow: 0 0 10px rgba(47, 212, 238, .25);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  pointer-events: auto; cursor: pointer; }

/* Rollen-Schalter im Hausplan */
.haus-rolle { margin-top: 8px; padding: 6px 10px; border-radius: 10px;
  background: rgba(47,212,238,.10); border: 1px solid rgba(80,225,255,.4);
  color: #dff6ff; font-size: 12px; cursor: pointer; align-self: flex-start; }

/* Rollen-Farben: Voll = grün, Gast = gold */
.haus-rolle.rolle-voll { background: rgba(53,224,141,.14);
  border-color: rgba(53,224,141,.65); color: #d9ffe9;
  box-shadow: 0 0 10px rgba(53,224,141,.35); }
.haus-rolle.rolle-gast { background: rgba(255,196,90,.10);
  border-color: rgba(255,196,90,.5); color: #ffe9c4;
  box-shadow: 0 0 8px rgba(255,196,90,.22); }

.haus-rolle.fest { cursor: default; }

/* Navi-Info-Leiste */
.nav-info { text-align: center; color: #9fe6f7; font-size: 13px;
  padding: 4px 8px 8px; letter-spacing: .3px; }

/* ==== AMBIENTE-MODUS ==== */
.ambient { position: fixed; inset: 0; z-index: 58;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at 50% 38%, #0a1a26 0%, #05090f 70%);
  animation: ambIn 1.2s ease; cursor: pointer; }
@keyframes ambIn { from { opacity: 0; } to { opacity: 1; } }
.amb-row { display: flex; align-items: flex-start; gap: 10px; }
.amb-clock { font-size: clamp(96px, 22vw, 220px); font-weight: 200;
  letter-spacing: 6px; color: #ffeccf;
  text-shadow: 0 0 40px rgba(255, 196, 90, .55), 0 0 100px rgba(255, 170, 60, .3); }
.amb-sec { margin-top: clamp(18px, 4vw, 40px); font-size: clamp(22px, 5vw, 48px);
  font-weight: 300; color: #ffd27d; text-shadow: 0 0 18px rgba(255, 196, 90, .5); }
.amb-date { margin-top: 2px; font-size: clamp(16px, 3vw, 26px);
  color: #9fd8ea; letter-spacing: 2px; }
.amb-wx { margin-top: 34px; display: flex; align-items: center; gap: 18px;
  color: #cfeefb; }
.amb-ic { font-size: clamp(40px, 7vw, 64px); }
.amb-temp { font-size: clamp(44px, 8vw, 72px); font-weight: 300;
  text-shadow: 0 0 24px rgba(47,212,238,.4); }
.amb-desc { font-size: clamp(15px, 2.6vw, 22px); line-height: 1.4; }
.amb-desc small { color: #8fb3c6; }
.amb-place { margin-top: 4px; font-size: 13px; color: #6f95a8; }
.amb-raum { position: absolute; bottom: 26px; font-size: 12px;
  letter-spacing: 2.5px; text-transform: uppercase; color: #5f8496; }

/* Ambiente v2: Sekunden, goldenes Datum, rotierender Ring */
.amb-sek { font-size: .32em; vertical-align: super; margin-left: 10px;
  color: #7fd7ea; opacity: .8; }
.ambient .amb-date { color: #ffd591; text-shadow: 0 0 14px rgba(255,196,90,.35); }
.amb-ring { position: absolute; top: 50%; left: 50%;
  width: min(72vw, 66vh); height: min(72vw, 66vh);
  margin: calc(min(72vw, 66vh) / -2) 0 0 calc(min(72vw, 66vh) / -2);
  border-radius: 50%; border: 1px dashed rgba(47,212,238,.25);
  box-shadow: 0 0 30px rgba(47,212,238,.12) inset;
  animation: ambSpin 90s linear infinite; pointer-events: none; }
@keyframes ambSpin { to { transform: rotate(360deg); } }


/* =================================================================
   15. v141 — LEBENDIGER SVG-KERN (ersetzt die Bild-Ebenen)
   Palette pixelgenau aus dem Wirbel-Bild: Linien #0d559e/#09467d,
   Energie #2f8ad0, Flares #e7feff (winzig), Auge #cdeeff in #0181dc→#003079
   ================================================================= */
.core-svg{ width:100%; height:100%; place-self:center; display:grid; place-items:center;
  transition: filter 1.4s ease;
  --kvK:1;              /* Tempo-Faktor der Bahnen (kleiner = schneller) */
  --kvEflow:7s;         /* Energie-Fluss in den Linien */
  --kvEpulse:2.6s;      /* Energie-Puls in den Linien */
  --kvFlow:9s;          /* Energie auf Aussenring vorwaerts */
  --kvFlow2:13s;        /* Energie auf Aussenring rueckwaerts */
  --kvEye:4.2s;         /* Herzschlag des Auges */
}
.core-svg svg{ width:100%; height:100%; overflow:visible; display:block; }

/* Bahnen: jede dreht eigenstaendig */
.kv-orbit{ transform-origin:50px 50px; }
/* v158 (Aleks Anweisung): Die Bahnen STEHEN — symmetrisch wie ein
   Atomkern (0/45/90/135 Grad). Nur die Energie darin fliesst. */
.kv-o1, .kv-o2, .kv-o3, .kv-o4 { animation: none; }

/* Linien: 3 Glueh-Schichten (guenstig, fluessig auf dem Handy) */
.kv-halo{ fill:none; stroke:rgba(6,40,90,.45);  stroke-width:1.9; }
.kv-soft{ fill:none; stroke:rgba(9,70,125,.42); stroke-width:.85; }
.kv-core{ fill:none; stroke:#1a67b5; stroke-width:.32; }
.kv-web { fill:none; stroke:rgba(16,60,140,.28); stroke-width:.24; }

/* Energie-Stroeme: fliessen + pulsieren in den Linien */
.kv-energy{ fill:none; stroke:#4aa3e0; stroke-width:.42; stroke-linecap:round;
  stroke-dasharray:4.5 28.83;
  animation: kvFlow var(--kvEflow) linear infinite,
             kvEPulse var(--kvEpulse) ease-in-out infinite; }
.kv-energy--slow{ animation: kvFlow calc(var(--kvEflow) * 1.5) linear infinite,
                             kvEPulse var(--kvEpulse) ease-in-out -.9s infinite;
  stroke-dasharray:3 30.33; }
.kv-energy--back{ animation: kvFlowBack calc(var(--kvEflow) * 1.3) linear infinite,
                             kvEPulse var(--kvEpulse) ease-in-out -1.6s infinite;
  stroke-dasharray:3.5 29.83; }
@keyframes kvFlow     { to { stroke-dashoffset:-100; } }
@keyframes kvFlowBack { to { stroke-dashoffset: 100; } }
@keyframes kvEPulse   { 0%,100%{ opacity:.3; } 50%{ opacity:.95; } }

/* Heisse Knoten + Fusions-Teilchen (weiss-kalt, winzig, wie im Bild) */
.kv-hot{ fill:#e7feff;
  filter:drop-shadow(0 0 3px rgba(1,129,220,.95));
  animation: kvHot 2.8s ease-in-out infinite; }
.kv-hot--soft{ fill:#9fd8f0; opacity:.9;
  filter:drop-shadow(0 0 3px rgba(1,110,200,.85));
  animation: kvHot 3.6s ease-in-out 1.1s infinite; }
@keyframes kvHot{ 0%,100%{ opacity:.8; } 50%{ opacity:1; } }
/* Fusions-Teilchen als Strichfluss (WebView-sicher, kein SMIL) */
.kv-pt{ fill:none; stroke:#cdeaff; stroke-linecap:round; stroke-width:.85;
  stroke-dasharray:1.3 98.7; }
.kv-pt1a{ animation: kvFlow 4.2s linear infinite; }
.kv-pt1b{ animation: kvFlow 4.2s linear -2.1s infinite; stroke-width:.55; opacity:.7; }
.kv-pt2a{ animation: kvFlowBack 5s linear -1s infinite; }
.kv-pt2g{ animation: kvFlowBack 5s linear -3.4s infinite; stroke:#f0d290; stroke-width:.65; opacity:.85; }
.kv-pt3a{ animation: kvFlow 6s linear -2s infinite; }
.kv-pt3b{ animation: kvFlow 6s linear -4.8s infinite; stroke-width:.55; opacity:.65; }
.kv-pt4a{ animation: kvFlowBack 7.5s linear -3s infinite; stroke-width:.6; opacity:.8; }

/* Das blaue AUGE: schlaegt + Halo-Wellen */
.kv-eyeGlow{ animation: kvBreathe var(--kvEye) ease-in-out infinite; transform-origin:50px 50px; }
.kv-eye{ fill:#e6fcff; transform-origin:50px 50px;
  animation: kvEye var(--kvEye) ease-in-out infinite; }
.kv-eyeAura{ transform-origin:50px 50px;
  animation: kvEye var(--kvEye) ease-in-out infinite; }
@keyframes kvEye    { 0%,100%{ opacity:.8; transform:scale(1); } 50%{ opacity:1; transform:scale(1.45); } }
@keyframes kvBreathe{ 0%,100%{ opacity:.75; transform:scale(1); } 50%{ opacity:1; transform:scale(1.25); } }
.kv-eyeHalo{ fill:none; stroke:#0181dc; stroke-width:.35; opacity:0; transform-origin:50px 50px;
  animation: kvHalo calc(var(--kvEye)) ease-out infinite; }
.kv-eyeHalo--2{ animation-delay: calc(var(--kvEye) / 2); }
@keyframes kvHalo{ 0%{ opacity:.8; transform:scale(.4); } 70%{ opacity:0; transform:scale(2.6); } 100%{ opacity:0; transform:scale(2.6); } }

/* Funkeln */
.kv-tw{ fill:#8fc8ef; filter:drop-shadow(0 0 3px rgba(1,110,200,.85)); }
.kv-tw1{ animation: kvTw 3.4s ease-in-out infinite; }
.kv-tw2{ animation: kvTw 4.6s ease-in-out 1.2s infinite; }
.kv-tw3{ animation: kvTw 2.8s ease-in-out .6s infinite; }
.kv-tw4{ animation: kvTw 5.2s ease-in-out 2s infinite; }
@keyframes kvTw{ 0%,100%{ opacity:.1; } 50%{ opacity:1; } }

/* Festes Aussenwerk (dreht NICHT) — nur die Energie wandert */
.kv-frame{ fill:none; stroke:#1a72b8; opacity:.55; }
.kv-frame--faint{ opacity:.28; }
.kv-band{ stroke:#2f8ad0; stroke-width:1.5; opacity:.7; }
.kv-spoke{ stroke:#1a72b8; stroke-width:.28; opacity:.6; }
.kv-dotarc{ fill:none; stroke:#2f8ad0; stroke-width:.55; opacity:.75;
  stroke-linecap:round; stroke-dasharray:.01 2.1; }
.kv-node{ fill:#7fc0ea; }
.kv-nodesq{ fill:#4a9fd8; opacity:.85; }
.kv-marker{ fill:var(--gold); filter:drop-shadow(0 0 3px rgba(232,179,75,.9)); }
.kv-arc{ fill:none; stroke:#3a95d8; stroke-linecap:round; opacity:.8; }
.kv-flowA{ animation: spin var(--kvFlow) linear infinite; transform-origin:50px 50px; }
.kv-flowB{ animation: spin-rev var(--kvFlow2) linear infinite; transform-origin:50px 50px; }

/* ---------- Lebenszustaende (gleiche Klassen wie bisher, script.js bleibt unberuehrt) ---------- */
/* Denkt nach: Reaktor beschleunigt, Ton Richtung Tuerkis */
.core.is-thinking .core-svg{ --kvK:.42; --kvEflow:2.6s; --kvEpulse:1.1s; --kvFlow:3.5s; --kvFlow2:5s;
  filter: hue-rotate(-26deg) saturate(1.25); }

/* Spricht: das Auge schlaegt im Sprechrhythmus (Feinregel von Alek folgt) */
.core.is-speaking .core-svg{ --kvEye:1.2s; }

/* Empfehlung: Gold */
.core.state-advice .core-svg{ filter: hue-rotate(-158deg) saturate(1.3) brightness(1.08); }

/* Aufmerksamkeit: Orange */
.core.state-attention .core-svg{ filter: hue-rotate(-172deg) saturate(1.45) brightness(1.05); }

/* Kritisch: Rot, Herz schlaegt schnell */
.core.state-critical .core-svg{ filter: hue-rotate(150deg) saturate(1.6) brightness(1.05); --kvEye:1.6s; --kvEpulse:1s; }


/* =================================================================
   16. v145 — KERN ETAPPE 1: Gruss, Schnellwege, Bereichs-Navigation
   (Blaupause: Mobile-App-Konzept V1 / ChatGPT-Design 15.07.2026)
   ================================================================= */

/* --- Gruss unter dem Herzen --- */
.kern-gruss{ position:absolute; left:50%; bottom:7%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:2px;
  pointer-events:none; z-index:3; text-align:center; width:max-content; }
.kern-gruss .kg-sir { font-size:.95rem; letter-spacing:.06em; color:var(--muted, #8fb3c7); }
.kern-gruss .kg-main{ font-size:1.7rem; font-weight:600; color:#eaf4fc;
  text-shadow:0 0 18px rgba(20,120,220,.45); }
.kern-gruss .kg-sub { font-size:1.05rem; color:var(--muted, #8fb3c7); }

/* --- Die 5 Schnellwege unter der Eingabezeile --- */
.quickways{ display:flex; justify-content:center; gap:18px; margin-top:10px;
  padding:2px 6px 4px; }
.qw{ display:flex; flex-direction:column; align-items:center; gap:5px;
  background:none; border:none; cursor:pointer; color:var(--muted, #8fb3c7);
  -webkit-tap-highlight-color:transparent; }
.qw .qw-ic{ width:52px; height:52px; border-radius:50%; display:grid; place-items:center;
  background:rgba(14,32,52,.55); border:1px solid rgba(64,140,210,.35);
  box-shadow:0 0 14px rgba(0,60,140,.25) inset; transition:border-color .2s, box-shadow .2s; }
.qw .qw-ic .icon{ width:22px; height:22px; stroke:#7fc0ea; }
.qw:active .qw-ic, .qw:hover .qw-ic{ border-color:rgba(47,212,238,.8);
  box-shadow:0 0 16px rgba(25,198,255,.35); }
.qw .qw-lbl{ font-size:.72rem; letter-spacing:.03em; }

/* --- Bereichs-Navigation (Home / Kommunikation / Mikro / Unterwegs / Mehr) --- */
.kernnav{ display:flex; align-items:center; justify-content:space-around;
  gap:2px; padding:8px 10px calc(8px + env(safe-area-inset-bottom, 0px));
  border-top:1px solid rgba(64,140,210,.25); position:relative; z-index:5; }
.kn{ display:flex; flex-direction:column; align-items:center; gap:3px; flex:1;
  background:none; border:none; cursor:pointer; color:var(--muted, #8fb3c7);
  font-size:.66rem; letter-spacing:.04em; padding:4px 2px;
  -webkit-tap-highlight-color:transparent; }
.kn .icon{ width:21px; height:21px; stroke:currentColor; }
.kn.active{ color:#2fd4ee; }
.kn.active .icon{ filter:drop-shadow(0 0 6px rgba(47,212,238,.6)); }
.kn.kn-mic{ flex:0 0 auto; margin-top:-26px; }
.kn.kn-mic .icon{ width:26px; height:26px; stroke:#bfe6ff; }
.kn.kn-mic{ width:62px; height:62px; border-radius:50%;
  background:radial-gradient(circle at 50% 35%, rgba(30,90,160,.85), rgba(8,24,44,.95));
  border:2px solid rgba(47,180,255,.75);
  box-shadow:0 0 18px rgba(20,140,255,.45), 0 4px 14px rgba(0,0,0,.5); }
.kn.kn-mic:active{ box-shadow:0 0 26px rgba(25,198,255,.7); }
/* v206 — Das Auge: Mini-Punktekugel im Mittel-Knopf (führt zum KERN).
   Dreht langsam und atmet dezent — ein kleines lebendiges Gesicht. */
.kn.kn-auge{ display:grid; place-items:center; padding:0; gap:0; }
.kn.kn-auge .auge-svg{ width:38px; height:38px; display:block;
  animation: augeAtmen 5.2s ease-in-out infinite; }
.kn.kn-auge .auge-rot{ transform-origin:19px 19px;
  animation: augeDreh 26s linear infinite; }
@keyframes augeDreh{ to{ transform:rotate(360deg); } }
@keyframes augeAtmen{ 0%,100%{ transform:scale(1); filter:brightness(1); }
  50%{ transform:scale(1.06); filter:brightness(1.18); } }

/* ROLLEN-WEICHE: Der KERN-Schirm gehoert NUR dem Handy (Rolle haupt).
   Tablets (raum) und PC (voll) behalten ihr bisheriges Gesicht. */
.kern-gruss, .quickways, .kernnav { display:none; }
body.rolle-haupt .kern-gruss { display:flex; }
body.rolle-haupt .quickways  { display:flex; }
body.rolle-haupt .kernnav    { display:flex; }


/* =================================================================
   16b. v147 — DIE BUEHNE NEU GEORDNET (nur Handy / Rolle haupt)
   Blaupause von oben nach unten: Kern-Block -> Gruss -> Eingabe-Pille
   + Schnellwege -> (Karten folgen in Etappe 2) -> feste Navigation.
   Seite ist scrollbar, Sternenhimmel liegt fest dahinter.
   ================================================================= */
@media (max-width: 880px), (pointer: coarse) {

  /* --- Grundordnung: senkrechter, scrollbarer Fluss --- */
  body.rolle-haupt .stage {
    display: flex; flex-direction: column;
    height: 100vh; height: 100dvh;
    overflow-y: auto; overflow-x: hidden;
    padding: 0 0 calc(76px + env(safe-area-inset-bottom, 0px));
    -webkit-overflow-scrolling: touch;
  }

  /* --- Sternenhimmel: fest HINTER allem --- */
  body.rolle-haupt #fieldCanvas {
    position: fixed; inset: 0; z-index: 0;
  }

  /* --- Kern-Block: oben im Fluss (nicht mehr Vollbild-fixed) --- */
  body.rolle-haupt .core-area {
    position: relative; inset: auto;
    flex: 0 0 auto; height: 430px;
    margin: 42px 0 0; padding: 0;
    display: grid; place-items: center;
    z-index: 1;
  }
  body.rolle-haupt .core { position: relative; }

  /* --- Gruss: eigenes Fluss-Element zwischen Herz und Pille --- */
  body.rolle-haupt .kern-gruss {
    position: static; transform: none;
    margin: 6px auto 0; flex: 0 0 auto;
  }
  body.rolle-haupt .kern-gruss .kg-main { font-size: 1.55rem; }
  body.rolle-haupt.chat-open .kern-gruss { display: none; }

  /* --- Eingabe-Pille + Schnellwege: im Fluss unter dem Gruss --- */
  body.rolle-haupt .chatbar {
    display: block !important;
    position: static;
    padding: 4px 14px 4px;
    z-index: 2;
  }
  body.rolle-haupt .chat-form { max-width: none; margin: 0 auto; }

  /* --- Navigation: fest am unteren Rand --- */
  body.rolle-haupt .kernnav {
    position: fixed; left: 0; right: 0; bottom: 0;
    z-index: 44; border-radius: 0;
  }

  /* --- Chat-Strom: endet oberhalb der Navigation --- */
  body.rolle-haupt .chat-stream { bottom: 96px; }

  /* --- Alter Schwebe-Knopf tritt ab (Schnellweg "Chat" uebernimmt) --- */
  body.rolle-haupt .chat-fab { display: none; }
  body.rolle-haupt.chat-open .chat-fab {
    display: grid; bottom: auto; top: 14px; right: 14px;
  }
}


/* =================================================================
   16c. v149 — KERN nach Aleks Anweisungen (nur Handy / Rolle haupt)
   Titel ganz oben · Herz 160px · "hoert zu" unter dem Herzen ·
   Pille + Schnellwege bis Display-Mitte · Gruss entfaellt
   ================================================================= */
.kern-titel { display: none; }

@media (max-width: 880px), (pointer: coarse) {

  /* --- Titel ganz oben --- */
  body.rolle-haupt .kern-titel {
    display: flex; flex-direction: column; align-items: center; gap: 5px;
    padding: 34px 0 0; position: relative; z-index: 2; flex: 0 0 auto;
  }
  body.rolle-haupt .kern-titel .kt1 {
    font-family: var(--font-display, inherit);
    font-size: 19px; font-weight: 700; letter-spacing: .42em;
    color: #eaf4fc; text-shadow: 0 0 16px rgba(30,140,255,.5);
    padding-left: .42em; /* Ausgleich fuer letter-spacing */
  }
  body.rolle-haupt .kern-titel .kt2 {
    font-size: 10.5px; letter-spacing: .5em; color: var(--cyan, #2fd4ee);
    padding-left: .5em;
  }

  /* --- Kern-Block (v153): fuellt den Raum zwischen Titel und Tippfeld,
     Herz GROSS und mittig darin, Statuszeile unten angeheftet --- */
  body.rolle-haupt .core-area {
    position: relative; inset: auto; height: 216px;
    flex: 0 0 auto; margin: 0; padding: 0;
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 0; z-index: 1;
  }

  /* --- Herz: 128px (v150: nochmal 1/5 kleiner), ZWINGEND mittig --- */
  body.rolle-haupt .core {
    position: relative; width: 216px; height: 216px;
    left: auto; right: auto; top: auto; transform: none;
    margin: 0 auto; align-self: center;
  }

  /* v151 WURZEL-FIX: Die Puls-Ringe haben fest 230px — groesser als das
     128px-Herz. Die Raster-Zelle richtet sich nach dem GROESSTEN Kind
     und lief dadurch nach rechts unten ueber (Versatz = (230-128)/2).
     Ab jetzt skalieren die Ringe MIT dem Herzen. */
  body.rolle-haupt .core .core-pulse-ring { width: 100%; height: 100%; }

  /* Titel steckt jetzt oben — die Schrift im Herzen weicht */
  body.rolle-haupt .core .core-label { display: none; }

  /* --- Statuszeile (v153): OHNE Hintergrund, kleiner, ganz unten im
     Kern-Block = direkt oberhalb des Tippfelds --- */
  body.rolle-haupt .ai-activity {
    position: absolute; top: auto; bottom: 0; left: 50%;
    transform: translateX(-50%);
    max-width: 94%; white-space: nowrap;
    background: none; border: none; box-shadow: none;
    backdrop-filter: none; -webkit-backdrop-filter: none;
    padding: 2px 6px; font-size: 12px; color: #9dc3da;
  }

  /* --- Pille (v152, Aleks Korrektur): VOLLE Breite wie zuvor,
     aber FLACHER (halbe Hoehe) — und nur 15mm tiefer als urspruenglich --- */
  body.rolle-haupt .chatbar {
    padding-top: 10px;
  }
  body.rolle-haupt .chat-form {
    width: auto; min-width: 0; max-width: none; margin: 0 auto;
    padding: 3px 5px 3px 14px;             /* flach statt 8px-Polster */
  }
  body.rolle-haupt .chat-form input, .chat-form textarea {
    font-size: 14.5px;
    min-width: 0;                 /* v157: Feld darf schrumpfen -> Sende-Pfeil bleibt im Bild */
  }
  body.rolle-haupt .chat-form .chat-mic,
  body.rolle-haupt .chat-form .chat-send {
    width: 32px; height: 32px;             /* Knoepfe halb so hoch */
  }
  body.rolle-haupt .quickways { margin-top: 10px; }
}


/* ===== 16d. v156 — Werkzeuge in der Pille (Chat-Oeffner, Datei, Kamera) ===== */
.chat-spark { background: none; border: none; padding: 0; cursor: pointer; }
.pill-tool { display: none; }
@media (max-width: 880px), (pointer: coarse) {
  body.rolle-haupt .pill-tool {
    display: grid; place-items: center;
    width: 30px; height: 30px; border-radius: 50%;
    background: rgba(14,32,52,.55); border: 1px solid rgba(64,140,210,.35);
    color: #7fc0ea; cursor: pointer; flex: 0 0 auto;
  }
  body.rolle-haupt .pill-tool .icon { width: 15px; height: 15px; stroke: currentColor; }
  body.rolle-haupt .chat-form { gap: 8px; }
}


/* ===== 16e. v163 — PUNKTWOLKEN-KUGEL (Fibonacci, kein Muster) =====
   240 Punkte mathematisch gleichmaessig auf der Kugeloberflaeche:
   vorne hell+gross, hinten fein+dunkel (Tiefe). Die Kugel DREHT als
   ganzer Koerper (reine Transform-Rotation, GPU, flackerfrei). */
.kv-dots { transform-origin: 50px 50px;
  animation: spin 26s linear infinite; }
.kv-dots circle { fill: #9fd5f7; }

/* v162: Der leuchtende Mittelpunkt der Punktekugel (Verlaufs-Glut,
   kein Filter — flackerfrei). Pulsiert sanft ueber die Deckkraft. */
.kv-glowdot { fill: #eafdff; animation: kvGlowDot 2.6s ease-in-out infinite; }
.kv-glowdot-halo { animation: kvGlowDot 2.6s ease-in-out infinite; }
@keyframes kvGlowDot { 0%,100% { opacity: .7; } 50% { opacity: 1; } }


/* ===== 16f. v164 — LETZTER SCHLIFF: Wellen aus der Kugel durchs ganze Herz
   Drei runde Wellen, geboren im Zentrum, laufen bis zum aeussersten
   Rand und verklingen. Reine Skalierung (GPU, flackerfrei),
   konstante Strichstaerke via vector-effect. ===== */
.kv-welle { fill: none; stroke: #2f9fe0; stroke-width: 1.1;
  opacity: 0; transform-origin: 50px 50px;
  animation: kvWelle 4.5s ease-out infinite; }
.kv-w2 { animation-delay: -1.5s; }
.kv-w3 { animation-delay: -3s; }
@keyframes kvWelle {
  0%   { transform: scale(.12); opacity: .7;  }
  70%  { opacity: .14; }
  100% { transform: scale(1);   opacity: 0;   }
}


/* ===== 16g. v165 — DER SCHLUSSSTEIN: das sprechende Herz =====
   Waehrend O.B.S.I.D.I.A.N. spricht (Klasse is-speaking, wie gehabt
   von script.js gesetzt): Kugel UND Leucht-Kern pulsieren kraeftig
   im Sprech-Takt. In Ruhe: sanftes Atmen wie bisher. */
/* v166 ANKER-FIX: Skalier-Ursprung fest auf die eigene Mitte —
   der WebView legte den 50px-Anker daneben (Wachsen wurde Wegdriften) */
.kv-kugel, .kv-glowdot, .kv-glowdot-halo, .kv-dots {
  transform-box: fill-box; transform-origin: 50% 50%;
}
/* Metronom-Puls nur noch als NOTNAGEL, wenn die Stimm-Kopplung fehlt */
body:not(.voice-sync) .core.is-speaking .kv-kugel {
  animation: kvKugelSpricht .85s ease-in-out infinite;
}
@keyframes kvKugelSpricht {
  0%, 100% { transform: scale(1);    }
  50%      { transform: scale(1.45); }
}
body:not(.voice-sync) .core.is-speaking .kv-glowdot,
body:not(.voice-sync) .core.is-speaking .kv-glowdot-halo {
  animation: kvKernSpricht .85s ease-in-out infinite;
}
/* Bei aktiver Stimm-Kopplung steuert JS die Groesse direkt */
body.voice-sync .core.is-speaking .kv-kugel,
body.voice-sync .core.is-speaking .kv-glowdot,
body.voice-sync .core.is-speaking .kv-glowdot-halo { animation: none; }
@keyframes kvKernSpricht {
  0%, 100% { transform: scale(1);   opacity: .75; }
  50%      { transform: scale(1.7); opacity: 1;   }
}


/* ===== v185 — Charakter-STATUS am Herzen (nur Anzeige, nicht antippbar) ===== */
.kern-charstatus { display: none; }
body.rolle-haupt .kern-charstatus {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 7px; padding: 3px 11px; border-radius: 20px;
  background: rgba(12,26,42,.5); border: 1px solid rgba(47,180,255,.3);
  color: #9fd5f7; font-size: 10px; letter-spacing: .14em; font-weight: 600;
}
body.rolle-haupt .kern-charstatus .kc-dot {
  width: 6px; height: 6px; border-radius: 50%; background: #2fd4ee;
  box-shadow: 0 0 8px #2fd4ee; transition: background .4s, box-shadow .4s;
}
body.rolle-haupt.char-pro .kern-charstatus { color: #e8c37a; border-color: rgba(232,179,75,.4); }
body.rolle-haupt.char-pro .kern-charstatus .kc-dot { background: #e8b34b; box-shadow: 0 0 8px #e8b34b; }

/* ===== v192 — Gesundheits-Kacheln unter der Eingabe-Pille (nur Handy/haupt) ===== */
.vitals-row { display: none; }
body.rolle-haupt .vitals-row {
  display: flex; gap: 8px; padding: 10px 14px 4px; overflow-x: auto;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
body.rolle-haupt .vitals-row::-webkit-scrollbar { display: none; }
.vital-tile {
  flex: 1 1 0; min-width: 0; position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  padding: 11px 6px 10px; border-radius: 16px;
  background: linear-gradient(160deg, rgba(14,28,46,.9), rgba(8,16,28,.85));
  border: 1px solid rgba(120,180,220,.14);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: border-color .25s, transform .12s;
  overflow: hidden; text-align: center;
}
.vital-tile:active { transform: scale(.97); }
.vital-tile .vt-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 24px; margin-bottom: 3px;
}
.vital-tile .vt-svg { width: 22px; height: 22px; }
/* Outline-Icons: nur Kontur in Akzentfarbe, KEIN Hintergrund, KEINE Füllung */
.vt-herz .vt-svg   { stroke: #ff5b78; }
.vt-blut .vt-svg   { stroke: #63a4ff; }
.vt-schlaf .vt-svg { stroke: #a98bff; }
.vt-stress .vt-svg { stroke: #f7b73f; }
.vt-gesund .vt-svg { stroke: #33d8b4; }
.vital-tile .vt-label {
  font-size: 7.5px; letter-spacing: .08em; color: #7fa0bd; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
  text-align: center; font-family: var(--font-display, 'Space Grotesk', sans-serif);
}
.vital-tile .vt-value {
  font-size: 13px; font-weight: 500; line-height: 1.15;
  white-space: nowrap; text-align: center;
  font-family: var(--font-display, 'Space Grotesk', sans-serif);
  letter-spacing: .01em;
}
.vital-tile .vt-value small { font-size: 8px; font-weight: 400; margin-left: 2px; opacity: .7; }
.vital-tile .vt-value-sm { font-size: 9.5px; font-weight: 500; white-space: normal; line-height: 1.2; letter-spacing: .01em; }
/* Werte in der jeweiligen Icon-Farbe */
#vitHerz   .vt-value { color: #ff5b78; }
#vitBlut   .vt-value { color: #63a4ff; }
#vitSchlaf .vt-value { color: #a98bff; }
#vitStress .vt-value { color: #f7b73f; }
#vitGesund .vt-value { color: #33d8b4; }
.vital-tile .vt-spark {
  position: absolute; right: 8px; bottom: 8px; width: 44px; height: 14px;
  opacity: .7;
}
.vital-tile .vt-spark polyline { fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.vital-tile.vital-gesund { justify-content: center; }
#vitHerz:active   { border-color: rgba(255,91,120,.5); }
#vitBlut:active   { border-color: rgba(99,164,255,.5); }
#vitSchlaf:active { border-color: rgba(169,139,255,.5); }
#vitStress:active { border-color: rgba(247,183,63,.5); }
#vitGesund:active { border-color: rgba(51,216,180,.5); }


/* ===== v208 — SYSTEM STATUS (Aleks Panel, echte Pruefungen) ===== */
body.rolle-haupt .sysstatus{ margin:10px 14px 0; padding:12px 14px 10px;
  border-radius:16px; background:rgba(10,20,34,.55);
  border:1px solid rgba(100,160,210,.14); }
body.rolle-haupt .ss-head{ font-family:var(--font-display); font-size:11px;
  letter-spacing:2.5px; color:#2fd4ee; margin-bottom:9px; }
body.rolle-haupt .ss-grid{ display:grid; grid-template-columns:1fr 1fr; gap:8px 10px; }
body.rolle-haupt .ss-item{ display:flex; align-items:center; gap:9px;
  padding:8px 9px; border-radius:11px; background:rgba(14,26,44,.55);
  border:1px solid rgba(100,160,210,.10); }
body.rolle-haupt .ss-svg{ width:19px; height:19px; stroke:currentColor; display:block; }
body.rolle-haupt .ss-ico{ flex:0 0 auto; color:#39d98a; }
body.rolle-haupt .ss-item.warn .ss-ico{ color:#e7b73c; }
body.rolle-haupt .ss-item.rot  .ss-ico{ color:#ff5f6b; }
body.rolle-haupt .ss-txt{ display:flex; flex-direction:column; min-width:0; flex:1; }
body.rolle-haupt .ss-txt b{ font-size:12px; color:#dfeaf5; font-weight:600; }
body.rolle-haupt .ss-txt i{ font-style:normal; font-size:10.5px; color:#7d95ab;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
body.rolle-haupt .ss-dot{ flex:0 0 auto; width:16px; height:16px; border-radius:50%;
  border:1.5px solid #39d98a; display:grid; place-items:center; position:relative; }
body.rolle-haupt .ss-dot::after{ content:""; width:7px; height:4px;
  border-left:1.6px solid #39d98a; border-bottom:1.6px solid #39d98a;
  transform:rotate(-45deg) translate(0.5px,-0.5px); }
body.rolle-haupt .ss-item.warn .ss-dot{ border-color:#e7b73c; }
body.rolle-haupt .ss-item.warn .ss-dot::after{ border-color:#e7b73c; width:2px; height:7px;
  border-left:none; border-bottom:none; background:#e7b73c; transform:none; border-radius:2px; }
body.rolle-haupt .ss-item.rot .ss-dot{ border-color:#ff5f6b; }
body.rolle-haupt .ss-item.rot .ss-dot::after{ border-color:#ff5f6b; width:7px; height:7px;
  border-left:none; border-bottom:none; background:none; transform:none;
  content:"!"; color:#ff5f6b; font-size:10px; font-weight:700; line-height:7px;
  display:grid; place-items:center; }
.sysstatus{ display:none; }
body.rolle-haupt .sysstatus{ display:block; }


/* ===== v208 — HEUTE- & NACHRICHTEN-Karten ===== */
.heutekarte,.nachrkarte{ display:none; }
body.rolle-haupt .heutekarte, body.rolle-haupt .nachrkarte{ display:block;
  margin:10px 14px 0; padding:12px 14px 11px; border-radius:16px;
  background:rgba(10,20,34,.55); border:1px solid rgba(100,160,210,.14); }
body.rolle-haupt .hk-head{ display:flex; justify-content:space-between; align-items:center;
  font-family:var(--font-display); font-size:11px; letter-spacing:2.5px;
  color:#2fd4ee; margin-bottom:8px; }
body.rolle-haupt .hk-count{ color:#7d95ab; letter-spacing:1px; font-size:10.5px; }
body.rolle-haupt .hk-list{ display:flex; flex-direction:column; gap:7px; }
body.rolle-haupt .hk-item{ display:flex; align-items:baseline; gap:10px;
  padding:7px 9px; border-radius:10px; background:rgba(14,26,44,.55);
  border:1px solid rgba(100,160,210,.10); }
body.rolle-haupt .hk-zeit{ flex:0 0 auto; font-family:var(--font-display);
  font-size:12.5px; color:#5fb2ff; font-weight:600; }
body.rolle-haupt .hk-zeit.morgen{ color:#b78ef7; }
body.rolle-haupt .hk-text{ font-size:12px; color:#dfeaf5; min-width:0; }
body.rolle-haupt .hk-leer{ font-size:11.5px; color:#66809a; padding:2px 1px; }
body.rolle-haupt .nachrkarte.aus{ opacity:.55; }


/* ===== v208 — HOME-Dashboard (Aleks Lagebild) ===== */
.home-screen{ display:none; }
body.rolle-haupt.home-an .home-screen{ display:block; padding:0 0 8px; }
body.rolle-haupt.home-an #coreArea,
body.rolle-haupt.home-an .chatbar,
body.rolle-haupt.home-an .chat-fab,
body.rolle-haupt.home-an .vitals-row{ display:none !important; }
/* Die drei Info-Panels leben im HOME (Selektoren bleiben gueltig) */

body.rolle-haupt .hm-kopf{ display:flex; justify-content:space-between;
  align-items:flex-start; padding:6px 16px 8px; }
body.rolle-haupt .hm-gruss b{ font-size:15.5px; font-weight:600; color:#eef6ff; display:block; }
body.rolle-haupt .hm-gruss i{ font-style:normal; font-size:10.5px; color:#2fd4ee; }
body.rolle-haupt .hm-wetter{ display:flex; align-items:center; gap:7px; text-align:right; }
body.rolle-haupt .hm-wico{ font-size:17px; }
body.rolle-haupt .hm-wtemp{ font-family:var(--font-display); font-size:19px; font-weight:600; color:#eef6ff; }
body.rolle-haupt .hm-wort{ font-size:9.5px; color:#8fa8bf; letter-spacing:.4px; text-align:right; max-width:110px; }

body.rolle-haupt .hm-mitte{ display:grid; grid-template-columns:1fr 156px 1fr;
  gap:8px; align-items:center; padding:0 12px; }
body.rolle-haupt .hm-spalte{ display:flex; flex-direction:column; gap:8px; }
body.rolle-haupt .hmk{ border-radius:13px; background:rgba(12,22,38,.6);
  border:1px solid rgba(100,160,210,.13); padding:7px 9px 5px; }
body.rolle-haupt .hmk-ico svg{ width:16px; height:16px; stroke:currentColor; fill:none;
  display:block; margin-bottom:3px; }
body.rolle-haupt .hmk-lab{ font-size:8px; letter-spacing:1.4px; color:#8fa8bf;
  font-family:var(--font-display); }
body.rolle-haupt .hmk-val{ font-family:var(--font-display); font-size:15px;
  font-weight:600; margin:1px 0 2px; }
body.rolle-haupt .hmk-val small{ font-size:9px; font-weight:500; opacity:.75; margin-left:2px; }
body.rolle-haupt .hmk-spark{ width:100%; height:14px; display:block; }

body.rolle-haupt .hm-auge{ position:relative; width:156px; height:156px; cursor:pointer; }
body.rolle-haupt .hm-auge .core-svg{ position:absolute; inset:0; }
body.rolle-haupt .hm-auge .core-svg svg{ width:100%; height:100%; }

body.rolle-haupt .hm-quick{ display:grid; grid-template-columns:repeat(4,1fr);
  gap:8px; margin:11px 12px 0; }
body.rolle-haupt .hm-qk{ border-radius:14px; background:rgba(12,22,38,.6);
  border:1px solid rgba(100,160,210,.13); padding:10px 4px 8px; text-align:center;
  color:inherit; }
body.rolle-haupt .hm-qk svg{ width:21px; height:21px; stroke-width:1.6; fill:none;
  margin:0 auto 4px; display:block; }
body.rolle-haupt .hm-qk b{ display:block; font-size:9px; letter-spacing:1.1px;
  color:#c9d9e8; font-family:var(--font-display); }
body.rolle-haupt .hm-qk i{ font-style:normal; font-size:9px; color:#7d95ab; }
body.rolle-haupt .hm-qk.dim{ opacity:.5; }


/* v209 — HOME: Kopf kompakter (Aleks Feinschliff) */
body.rolle-haupt.home-an .kern-titel{ padding-top:4px; margin-bottom:0; }
body.rolle-haupt.home-an .kern-titel .kt1{ font-size:14px; letter-spacing:5px; }
body.rolle-haupt.home-an .kern-titel .kt2{ font-size:8.5px; letter-spacing:3.5px; margin-top:1px; }
body.rolle-haupt.home-an .kern-charstatus{ transform:scale(.85); margin-top:2px; }
body.rolle-haupt.home-an .hm-kopf{ padding:2px 16px 6px; }
body.rolle-haupt.home-an .hm-gruss b{ font-size:13px; }
body.rolle-haupt.home-an .hm-gruss i{ font-size:9.5px; }
body.rolle-haupt.home-an .hm-wico{ font-size:14px; }
body.rolle-haupt.home-an .hm-wtemp{ font-size:15px; }
body.rolle-haupt.home-an .hm-wort{ font-size:8.5px; max-width:100px; }


/* v210 — Status-Grid: Zellen duerfen schrumpfen (Overflow-Fix) */
body.rolle-haupt .ss-grid{ width:100%; }
body.rolle-haupt .ss-item{ min-width:0; }
body.rolle-haupt .ss-txt{ min-width:0; }


/* v211 — HOME-Statuszeile (hoert zu / Live-Text / Mikro) */
body.rolle-haupt .hm-status{ display:flex; align-items:center; justify-content:center;
  gap:8px; margin:6px 16px 0; min-height:22px; }
body.rolle-haupt .hm-mic{ flex:0 0 auto; width:24px; height:24px; border-radius:50%;
  background:none; border:1px solid rgba(120,180,220,.35); display:grid;
  place-items:center; color:#7d95ab; padding:0; }
body.rolle-haupt .hm-mic svg{ width:13px; height:13px; stroke:currentColor;
  fill:none; stroke-width:1.7; }
body.rolle-haupt .hm-mic.an{ color:#2fd4ee; border-color:rgba(47,212,238,.6);
  box-shadow:0 0 8px rgba(47,212,238,.35); }
body.rolle-haupt .hm-status-text{ font-size:11px; color:#8fb2cc; min-width:0;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:78%; }
body.rolle-haupt .hm-status-text.diktat{ color:#dfeaf5; }


/* v214 — HEUTE-Karte zweispaltig: links Termine, rechts Erinnerungen */
body.rolle-haupt .heutekarte.hk-zwei{ display:grid; grid-template-columns:1.35fr 1fr;
  gap:12px; align-items:start; }
body.rolle-haupt .hk-links, body.rolle-haupt .hk-rechts{ min-width:0; }
body.rolle-haupt .hk-head-er{ display:flex; align-items:center; gap:5px;
  color:#b78ef7; }
body.rolle-haupt .er-ico{ width:13px; height:13px; stroke:#b78ef7; fill:none;
  stroke-width:1.7; stroke-linecap:round; }
body.rolle-haupt .er-item{ padding:7px 9px; border-radius:10px;
  background:rgba(14,26,44,.55); border:1px solid rgba(100,160,210,.10); }
body.rolle-haupt .er-text{ font-size:11.5px; color:#dfeaf5; display:block; }
body.rolle-haupt .er-datum{ font-size:9.5px; color:#8f7db7; font-family:var(--font-display);
  margin-top:2px; display:block; }


/* v219 — Erinnerungs-Popup: drei Knoepfe */
.er-btn-row{ display:flex; gap:10px; justify-content:center; margin-top:14px; }
.er-btn{ margin-top:0 !important; }
.er-btn-mitte{ margin-top:10px !important; display:block; margin-left:auto; margin-right:auto; }


/* v219 — Erinnerungs-Uhr in Hausfarbe (kein Emoji-Rot) */
.er-uhr svg{ width:44px; height:44px; stroke:#2fd4ee; fill:none;
  stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;
  filter:drop-shadow(0 0 8px rgba(47,212,238,.5)); }


/* v221 — Gesundheitskacheln verlassen den KERN (Aleks Anweisung):
   Die Werte leben im HOME (Kacheln mit Verlauf). Der KERN wird frei
   fuer das Gespuer-Kapitel. Sicher ausgeblendet statt entfernt —
   die Werte-Verdrahtung (obsSetVitals -> HOME) laeuft unveraendert. */
body.rolle-haupt .vitals-row{ display:none !important; }


/* ===== v223 — KERN-Neuordnung (Gespür-Kapitel, Schritt 1) =====
   Schnellaktionen oben (Ex-Kachel-Platz), Pille rutscht ans untere
   Ende (margin-top:auto), darunter die Kontext-Leiste (Projekte). */
.schnell-row, .kontext-row{ display:none; }
body.rolle-haupt .schnell-row{ display:block; margin:6px 14px 0; }
body.rolle-haupt.home-an .schnell-row,
body.rolle-haupt.home-an .kontext-row{ display:none; }
body.rolle-haupt .sa-head{ font-family:var(--font-display); font-size:10.5px;
  letter-spacing:2.5px; color:#2fd4ee; margin:0 2px 8px; }
body.rolle-haupt .sa-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:8px; }
body.rolle-haupt .sa-item{ border-radius:14px; background:rgba(12,22,38,.6);
  border:1px solid rgba(100,160,210,.13); padding:10px 4px 8px; text-align:center;
  color:inherit; min-width:0; }
body.rolle-haupt .sa-item svg{ width:20px; height:20px; stroke-width:1.6; fill:none;
  margin:0 auto 5px; display:block; }
body.rolle-haupt .sa-item span{ display:block; font-size:8.5px; letter-spacing:.6px;
  color:#c9d9e8; font-family:var(--font-display); line-height:1.3; }
body.rolle-haupt .sa-item:active{ background:rgba(47,212,238,.12); }

body.rolle-haupt .chatbar{ margin-top:auto; }

body.rolle-haupt .kontext-row{ display:flex; align-items:center; gap:10px;
  margin:8px 16px 2px; min-height:24px; overflow-x:auto; }
body.rolle-haupt .kx-head{ font-family:var(--font-display); font-size:9.5px;
  letter-spacing:2px; color:#7d95ab; flex:0 0 auto; }
body.rolle-haupt .kx-leer{ font-size:10.5px; color:#5a7288; white-space:nowrap; }
body.rolle-haupt .kx-chip{ flex:0 0 auto; display:inline-flex; align-items:center;
  gap:6px; padding:4px 12px; border-radius:13px; background:rgba(12,22,38,.6);
  border:1px solid rgba(100,160,210,.2); font-size:11px; color:#c9d9e8; }


/* ===== v224 — AKTIVER GESPRÄCHSVERLAUF inline im KERN =====
   Der echte Chat-Strom wird in der KERN-Mitte sichtbar (zwischen
   Schnellaktionen und Pille). Das Vollbild-Overlay (chat-open)
   bleibt unangetastet als "Alle anzeigen"-Ansicht. */
.verlauf-head{ display:none; }
body.rolle-haupt:not(.chat-open):not(.home-an) .verlauf-head{
  display:flex; justify-content:space-between; align-items:center;
  margin:10px 16px 6px; order:2; }
body.rolle-haupt .verlauf-head span{ font-family:var(--font-display);
  font-size:10.5px; letter-spacing:2.5px; color:#2fd4ee; }
body.rolle-haupt .verlauf-head button{ font-size:10px; color:#7d95ab;
  letter-spacing:.5px; background:none; border:none; padding:2px 4px; }

body.rolle-haupt:not(.chat-open):not(.home-an) .schnell-row{ order:1; }
body.rolle-haupt:not(.chat-open):not(.home-an) .chat-stream{
  display:flex; flex-direction:column; position:static;
  order:3; flex:1 1 auto; min-height:70px; max-height:none;
  width:auto; left:auto; right:auto; bottom:auto; top:auto;
  overflow-y:auto; margin:0 14px; padding:2px 2px 8px;
  -webkit-overflow-scrolling:touch; }
body.rolle-haupt:not(.chat-open):not(.home-an) .chatbar{ order:4; }
body.rolle-haupt:not(.chat-open):not(.home-an) .kontext-row{ order:5; }


/* v226 — Zeitstempel an den Nachrichten */
.msg{ position:relative; }
.msg .msg-zeit{ display:block; font-size:9px; color:#6d8399; opacity:.8;
  margin-top:4px; text-align:right; font-family:var(--font-display);
  letter-spacing:.5px; }


/* v228 — Tages-Trenner im geladenen Verlauf */
.verlauf-tag{ text-align:center; font-family:var(--font-display);
  font-size:9.5px; letter-spacing:2px; color:#5a7288; margin:10px 0 6px; }


/* v233 — "Alle anzeigen" gross genug zum Tippen, sicher oben */
body.rolle-haupt:not(.chat-open):not(.home-an) .verlauf-head{
  position:relative; z-index:6; cursor:pointer; }
body.rolle-haupt .verlauf-head button{
  font-size:10.5px; color:#2fd4ee; letter-spacing:.5px;
  padding:6px 12px; border:1px solid rgba(47,212,238,.35);
  border-radius:12px; background:rgba(12,22,38,.5);
  pointer-events:none; /* der Kopf faengt den Tap — Fläche = ganze Zeile */ }


/* ===== v234 — "Alle anzeigen" = ECHTES VOLLBILD (Aleks Punkt:
   der Chat oeffnete nur einen Streifen unten) ===== */
body.rolle-haupt.chat-open .chat-stream{
  position:fixed; top:0; left:0; right:0;
  bottom:calc(146px + env(safe-area-inset-bottom, 0px));
  width:auto; max-height:none; margin:0;
  padding:16px 14px 10px;
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  background:rgba(4,7,14,.96); z-index:40;
  display:flex; flex-direction:column; }
body.rolle-haupt.chat-open .chatbar{
  position:fixed; left:0; right:0;
  bottom:calc(76px + env(safe-area-inset-bottom, 0px));
  margin:0 10px; z-index:41; }
body.rolle-haupt.chat-open .chat-fab{ z-index:42; }
body.rolle-haupt.chat-open .verlauf-head,
body.rolle-haupt.chat-open .schnell-row,
body.rolle-haupt.chat-open .kontext-row{ display:none; }


/* ==== v237 DIE AUGEN: Anhang-Chip ueber der Chat-Leiste ==== */
.anhang-chip {
  display: flex; align-items: center; gap: 8px;
  margin: 0 auto 8px; padding: 6px 10px;
  max-width: min(520px, 92vw);
  border-radius: 12px;
  border: 1px solid rgba(56, 210, 255, .35);
  background: rgba(10, 22, 32, .82);
}
.anhang-chip[hidden] { display: none; }
.anhang-chip img { width: 40px; height: 40px; object-fit: cover; border-radius: 8px; }
.anhang-ico { font-size: 22px; }
.anhang-name { flex: 1; min-width: 0; font-size: 12px; color: #bfe9f7;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.anhang-weg { border: none; background: rgba(255,255,255,.08); color: #dff4ff;
  width: 26px; height: 26px; border-radius: 50%; cursor: pointer; font-size: 12px; }
.anhang-weg:active { background: rgba(255,120,120,.25); }
.msg .msg-bild { display: block; max-width: 180px; max-height: 180px;
  border-radius: 10px; margin-bottom: 6px; }


/* ==== v240/v241 DAS EIGENE AUGE — O.B.S.I.D.I.A.N.-Neon (leicht) ==== */
.auge-overlay {
  position: fixed; inset: 0; z-index: 60;
  background: #02070c; display: flex; flex-direction: column;
}
.auge-overlay[hidden] { display: none; }
.auge-overlay video { flex: 1; width: 100%; object-fit: cover;
  filter: contrast(1.08) saturate(1.3) brightness(1.03); }

/* v246: Ecken als ECHTE Elemente — robust auf jedem WebView */
.auge-ecke {
  position: absolute; width: 46px; height: 46px;
  pointer-events: none; z-index: 3;
  /* v248: Gluehen als drop-shadow — folgt NUR den Linien,
     kein viereckiger Schleier mehr (Aleks Foto-Befund) */
  filter: drop-shadow(0 0 5px rgba(56,224,255,.9));
}
.auge-ecke.e-ol { top: 16px; left: 16px;
  border-top: 5px solid #38e0ff; border-left: 5px solid #38e0ff;
  border-top-left-radius: 12px; }
.auge-ecke.e-or { top: 16px; right: 16px;
  border-top: 5px solid #38e0ff; border-right: 5px solid #38e0ff;
  border-top-right-radius: 12px; }
.auge-ecke.e-ul { bottom: calc(16px + env(safe-area-inset-bottom, 0px)); left: 16px;
  border-bottom: 5px solid #38e0ff; border-left: 5px solid #38e0ff;
  border-bottom-left-radius: 12px; }
.auge-ecke.e-ur { bottom: calc(16px + env(safe-area-inset-bottom, 0px)); right: 16px;
  border-bottom: 5px solid #38e0ff; border-right: 5px solid #38e0ff;
  border-bottom-right-radius: 12px; }

.auge-overlay::after {
  content: "DAS AUGE"; position: absolute; top: 26px; left: 0; right: 0;
  text-align: center; pointer-events: none;
  font-family: "Space Grotesk", sans-serif;
  font-size: 17px; font-weight: 800; letter-spacing: .45em;
  color: #ffffff; opacity: 1;
  -webkit-text-stroke: .6px #38e0ff;
  text-shadow: 0 0 2px #38e0ff, 0 0 8px rgba(56,224,255,.9);
}
.auge-leiste {
  position: absolute; left: 0; right: 0;
  bottom: calc(26px + env(safe-area-inset-bottom, 0px));
  display: flex; align-items: center; justify-content: center; gap: 44px;
}
/* Ausloeser: Neon-Ring in Cyan mit goldenem Kern — wie der Core */
.auge-schuss {
  width: 74px; height: 74px; border-radius: 50%;
  border: 3px solid rgba(56,210,255,.95);
  background: radial-gradient(circle at 50% 50%,
    rgba(184,145,47,.65) 0%, rgba(184,145,47,.25) 34%,
    rgba(10,22,32,.55) 62%, rgba(10,22,32,.15) 100%);
  box-shadow: 0 0 14px rgba(56,210,255,.55), inset 0 0 10px rgba(56,210,255,.25);
  cursor: pointer;
}
.auge-schuss:active {
  box-shadow: 0 0 22px rgba(56,210,255,.9), inset 0 0 14px rgba(184,145,47,.6);
}
.auge-zu, .auge-wechsel {
  width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid rgba(56,210,255,.4);
  background: rgba(10,22,32,.72); color: #bfe9f7;
  font-size: 18px; cursor: pointer;
  box-shadow: 0 0 8px rgba(56,210,255,.2);
}
.auge-zu:active, .auge-wechsel:active { background: rgba(56,210,255,.25); }

/* ============ v263 KERN-LAGEBILD (Begruessung + Status neben dem Herz) ============ */
#coreArea.hat-lage .core{ transform: scale(.56); }         /* Herz kleiner, damit die Kaestel danebenpassen */
.kern-lage{ position:absolute; inset:0; z-index:6; pointer-events:none; }
.kern-lage > *{ pointer-events:auto; }
.kl-greet{ position:absolute; top:2px; left:4px; right:4px; }
.kl-greet b{ display:block; font-size:19px; font-weight:700; color:#eaf6fb; letter-spacing:.3px; }
.kl-greet i{ display:block; font-style:normal; font-size:12.5px; color:#d9b45a; margin-top:3px; }
.kl-stat{ position:absolute; right:3px; top:50%; transform:translateY(-50%);
  display:flex; flex-direction:column; gap:7px; width:136px; }
.kl-tile{ display:flex; align-items:center; gap:7px; background:rgba(13,20,32,.86);
  border:1px solid rgba(47,212,238,.18); border-radius:11px; padding:7px 8px; }
.kl-ico{ width:17px; height:17px; flex:0 0 17px; }
.kl-tx b{ display:block; font-size:13px; font-weight:700; line-height:1.1; color:#eaf6fb; }
.kl-tx i{ display:block; font-style:normal; font-size:9.5px; color:#7f96a8; line-height:1.15; }
.kl-zeile{ position:absolute; left:3px; right:3px; bottom:2px; display:flex; gap:8px; }
.kl-chip{ flex:1; display:flex; align-items:center; justify-content:center; gap:6px;
  background:rgba(17,27,43,.86); border:1px solid rgba(47,212,238,.18); border-radius:11px;
  padding:8px; font-size:12.5px; font-weight:600; color:#eaf6fb; }
.kl-cico{ width:16px; height:16px; flex:0 0 16px; }
.kl-chip#klHome{ --ic:#39c6e6; } .kl-chip#klSchutz{ --ic:#39d98a; }
.kl-chip.warn{ --ic:#e7b73c; }
.kl-cico{ color:var(--ic,#39c6e6); }
.kl-chip b{ color:#eaf6fb; } .kl-chip i{ font-style:normal; color:#7f96a8; font-weight:500; font-size:11px; }
/* v263 Kern-Lagebild: Aufraeumen — Modul-Schildchen weichen, Begruessung frei */
#coreArea.hat-lage .nodes{ display:none; }
#coreArea.hat-lage .ai-activity{ transform: translate(-50%, 96px); }
.kl-greet{ top:6px; text-shadow:0 2px 10px rgba(0,0,0,.7); z-index:7; }
.kl-greet b{ font-size:20px; }
#coreArea.hat-lage #nodes, #coreArea.hat-lage .node{ display:none !important; }
/* v263: Lagebild-Overlay NUR wenn Handy-Ansicht aktiv (hat-lage) — PC bleibt unberuehrt */
.kern-lage{ display:none; }
#coreArea.hat-lage .kern-lage{ display:block; }
/* v263.1 Feinschliff (Alek): Begruessung kleiner, Untertitel blau + schmal, alles hoch, Herz frei */
#coreArea.hat-lage{ flex:0 0 auto; min-height:0; height:264px; margin-top:0; }
.kl-greet{ top:0; }
.kl-greet b{ font-size:15px; font-weight:700; }
.kl-greet i{ font-size:11.5px; color:#6fb0ee; margin-top:2px; max-width:150px; line-height:1.35; }
#coreArea.hat-lage .ai-activity{ top:auto; bottom:30px; transform:translateX(-50%); }
/* v263.2: Uhr rechts neben LOCKER, alles bis zum LOCKER hochgezogen */
.kern-uhr{ display:none; }
body.rolle-haupt .kern-titel{ position:relative; }
body.rolle-haupt .kern-uhr{
  display:flex; flex-direction:column; align-items:flex-end;
  position:absolute; right:10px; bottom:0; line-height:1.15;
}
.kern-uhr b{ font-size:17px; font-weight:700; color:#eaf6fb; }
.kern-uhr i{ font-style:normal; font-size:9.5px; color:#7f96a8; }
#coreArea.hat-lage{ height:238px; }
.kl-stat{ width:132px; }
.kl-tile[hidden]{ display:none !important; }
/* v263.3: Standort-Kachel rechts oben auf Begruessungs-Hoehe */
.kl-ort{ position:absolute; top:0; right:3px; width:132px; }
/* v263.4: Standort links neben LOCKER (Gegenstueck zur Uhr) */
.kern-ort{ display:none; }
body.rolle-haupt .kern-ort{
  display:flex; align-items:center; gap:6px;
  position:absolute; left:10px; bottom:0;
}
.kern-ort svg{ width:17px; height:17px; flex:0 0 17px; }
.kern-ort .ko-tx{ display:flex; flex-direction:column; line-height:1.15; }
.kern-ort b{ font-size:14px; font-weight:700; color:#eaf6fb; }
.kern-ort i{ font-style:normal; font-size:9.5px; color:#7f96a8; }
/* v263.5: Puls-Kachel unterhalb der Uhr (rechts oben), Herz ganz frei */
.kl-stat{ top:0; right:3px; transform:none; width:132px; }
/* v263.6: Begruessung exakt wie Dashboard (hm-gruss) — Farbe + Groesse */
.kl-greet b{ font-size:15.5px; font-weight:600; color:#eef6ff; }
.kl-greet i{ font-size:10.5px; color:#2fd4ee; max-width:150px; }
/* v263.7: Mittelteil verdichten — Chat unten bekommt mehr Platz */
#coreArea.hat-lage{ height:206px; }
#coreArea.hat-lage .ai-activity{ bottom:22px; padding:5px 14px; }
#coreArea.hat-lage .core{ transform:scale(.5); }
.kl-zeile{ bottom:0; }
.kl-chip{ padding:7px; }
body.rolle-haupt .schnell-row{ margin-top:4px; }
body.rolle-haupt .schnell-row .sa-head{ margin:4px 0 6px; }
/* v263.8: Herz + Statuszeile leicht hoch — keine Ueberschneidung mit Zuhause/Schutz */
#coreArea.hat-lage .core{ transform:scale(.5) translateY(-26px); }
#coreArea.hat-lage .ai-activity{ bottom:34px; }
/* v264: Herz bis zum LOCKER hochgezogen — noch mehr Platz; Chat-Blasen etwas kleiner */
#coreArea.hat-lage{ height:168px; margin-top:0; }
#coreArea.hat-lage .core{ transform:scale(.44) translateY(-30px); }
#coreArea.hat-lage .ai-activity{ bottom:26px; }
body.rolle-haupt .msg{ font-size:12px; line-height:1.45; padding:8px 12px; border-radius:13px; }
body.rolle-haupt .msg.ai .who{ font-size:9.5px; }
/* v264.1: Standort unten links, oberhalb von Zuhause/Ausser Haus; Frisch-Zeile rechts */
body.rolle-haupt .kern-ort{ display:none !important; }
.kl-ort{ top:auto; bottom:34px; left:3px; right:auto; width:132px; }
#coreArea.hat-lage .ai-activity{ left:auto; right:8px; transform:none; bottom:40px; max-width:56%; }
/* v264.2: Begruessung noch etwas hoeher; Schutz-Chip "aus" (Zuhause) grau statt gruen */
.kl-greet{ top:-8px; }
.kl-chip.aus{ --ic:#7f96a8; }
.kl-chip.aus i{ color:#7f96a8; }
/* v265: Standort wieder frei (ohne Kachel), Begruessung im Kern-Lagebild entfernt */
.kl-greet{ display:none !important; }
.kl-ort{ background:none; border:none; padding:0 0 0 4px; }
/* v265.1: Standort oben links (wo die Begruessung war) */
.kl-ort{ top:-8px; bottom:auto; left:3px; }
/* v265.2: Titel wie im Dashboard-Konzept — Cyan-Schriftzug mit Cyan-Glut, Untertitel fein */
body.rolle-haupt .kern-titel .kt1{
  color:#2fd4ee; font-size:17px; letter-spacing:.46em; padding-left:.46em;
  text-shadow:0 0 18px rgba(47,212,238,.55), 0 0 4px rgba(47,212,238,.35);
}
body.rolle-haupt .kern-titel .kt2{
  font-size:9px; letter-spacing:.55em; padding-left:.55em; opacity:.85;
}
/* v265.3: Statuszeile (hoert zu / Standort frisch) wieder mittig unter dem Herz */
#coreArea.hat-lage .ai-activity{ left:50%; right:auto; transform:translateX(-50%); bottom:30px; max-width:86%; }
/* v269 PDF-Betrachter */
.pdf-overlay{ position:fixed; inset:0; z-index:220; background:rgba(4,9,16,.97);
  display:flex; flex-direction:column; }
.pdf-overlay[hidden]{ display:none; }
.pdf-kopf{ flex:0 0 auto; display:flex; align-items:center; justify-content:space-between;
  padding:12px 14px; border-bottom:1px solid rgba(47,212,238,.25); }
.pdf-titel{ color:#eaf6fb; font-weight:700; font-size:14px; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; }
.pdf-zu{ background:none; border:1px solid rgba(47,212,238,.4); color:#2fd4ee;
  border-radius:10px; width:34px; height:34px; font-size:15px; }
.pdf-seiten{ flex:1; overflow-y:auto; padding:10px; text-align:center; }
.pdf-seite{ display:block; margin:0 auto 10px; border-radius:6px;
  box-shadow:0 4px 22px rgba(0,0,0,.55); background:#fff; }
.pdf-warte{ color:#7f96a8; font-size:13px; padding:26px 14px; }
.pdf-link{ background:none; border:1px solid rgba(47,212,238,.4); color:#2fd4ee;
  border-radius:10px; height:34px; padding:0 12px; font-size:12.5px; margin-right:8px; }
.pdf-kopf .pdf-titel{ flex:1; }
/* v271 Stopp-Griff */
.obs-stopp{ position:fixed; left:50%; transform:translateX(-50%); bottom:118px; z-index:210;
  background:rgba(13,20,32,.92); border:1px solid rgba(255,95,122,.55); color:#ff5f7a;
  border-radius:999px; padding:9px 20px; font-size:13.5px; font-weight:700;
  box-shadow:0 4px 18px rgba(0,0,0,.5); }
.obs-stopp[hidden]{ display:none; }
/* v273 Frueher-Knopf */
.verlauf-frueher{ display:block; margin:6px auto 10px; background:rgba(13,20,32,.9);
  border:1px solid rgba(47,212,238,.35); color:#2fd4ee; border-radius:999px;
  padding:7px 16px; font-size:12px; font-weight:600; }
/* v274 mehrzeilige Eingabe */
.chat-form textarea{ resize:none; overflow-y:auto; line-height:1.4; padding-top:10px; }