:root{
  --bg:#0b1020; --panel:#121a2e; --panel2:#0f1626; --line:#1f2b45;
  --text:#e6ecf7; --muted:#8a97b3; --accent:#2563eb; --accent2:#06b6d4;
  --user:#1e3a8a; --ok:#22c55e; --warn:#f59e0b; --err:#ef4444;
  --radius:16px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:radial-gradient(1200px 600px at 80% -10%, #16224080, transparent), var(--bg);
  color:var(--text); font:15px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  display:flex; flex-direction:column; height:100dvh;
}
.hidden{display:none !important}

/* Topbar */
.topbar{display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 16px; border-bottom:1px solid var(--line); background:#0c1326cc; backdrop-filter:blur(8px);
  padding-top:max(12px,env(safe-area-inset-top)); position:sticky; top:0; z-index:5}
.brand{display:flex; align-items:center; gap:10px}
.logo{font-size:22px; filter:drop-shadow(0 0 8px #2563eb88)}
.brand-name{font-weight:700; letter-spacing:.3px}
.brand-sub{font-size:12px; color:var(--muted)}
.status{display:flex; align-items:center; gap:8px; font-size:13px; color:var(--muted)}
.dot{width:9px; height:9px; border-radius:50%; background:var(--muted); box-shadow:0 0 0 0 #0000}
.dot.ok{background:var(--ok); box-shadow:0 0 10px #22c55eaa}
.dot.busy{background:var(--warn); animation:pulse 1s infinite}
.dot.err{background:var(--err)}
@keyframes pulse{50%{opacity:.35}}
.icon-btn{background:#1a2340; color:var(--text); border:1px solid var(--line); border-radius:10px;
  width:34px; height:34px; cursor:pointer; font-size:16px; display:grid; place-items:center}
.icon-btn:hover{background:#22305a}

/* Chat */
.chat{flex:1; overflow-y:auto; padding:18px 14px 8px; display:flex; flex-direction:column; gap:14px}
.welcome{max-width:760px; margin:6vh auto 0; text-align:center; color:var(--muted)}
.welcome h1{color:var(--text); font-size:26px; margin:0 0 8px}
.welcome code{background:#0e1830; padding:2px 6px; border-radius:6px; color:var(--accent2)}
.suggestions{display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:18px}
.chip{background:var(--panel); border:1px solid var(--line); color:var(--text); border-radius:999px;
  padding:8px 14px; cursor:pointer; font-size:13px}
.chip:hover{border-color:var(--accent); color:#fff}

.msg{max-width:820px; width:100%; margin:0 auto; display:flex; gap:10px}
.msg .avatar{width:30px; height:30px; border-radius:9px; flex:0 0 30px; display:grid; place-items:center; font-size:15px}
.msg.user .avatar{background:var(--user)}
.msg.bot .avatar{background:linear-gradient(135deg,var(--accent),var(--accent2))}
.bubble{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:11px 14px; max-width:100%; overflow-wrap:anywhere}
.msg.user .bubble{background:#162a52; border-color:#1f3a6e}
.bubble p{margin:0 0 8px} .bubble p:last-child{margin:0}
.bubble pre{background:#0a1124; border:1px solid var(--line); border-radius:10px; padding:10px 12px;
  overflow-x:auto; font:13px/1.5 ui-monospace,Menlo,Consolas,monospace}
.bubble code{background:#0a1124; padding:1px 5px; border-radius:5px; font-family:ui-monospace,monospace; font-size:.92em}
.bubble pre code{background:none; padding:0}
.bubble a{color:var(--accent2)}

/* Tool-Badges während des Laufs */
.tools{display:flex; flex-wrap:wrap; gap:6px; margin:8px 0 0}
.tool-chip{font-size:11px; color:var(--muted); background:#0e1830; border:1px solid var(--line);
  padding:3px 8px; border-radius:999px; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.tool-chip b{color:var(--accent2); font-weight:600}
.meta{font-size:11px; color:var(--muted); margin-top:8px}
.cursor::after{content:"▋"; color:var(--accent2); animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}

/* Composer */
.composer{display:flex; align-items:flex-end; gap:8px; padding:10px 12px;
  padding-bottom:max(10px,env(safe-area-inset-bottom)); border-top:1px solid var(--line); background:#0c1326}
.composer textarea{flex:1; resize:none; max-height:160px; background:var(--panel2); color:var(--text);
  border:1px solid var(--line); border-radius:14px; padding:11px 14px; font:inherit; outline:none}
.composer textarea:focus{border-color:var(--accent)}
.send{background:var(--accent); color:#fff; border:none; border-radius:12px; width:44px; height:44px;
  font-size:18px; cursor:pointer; flex:0 0 44px}
.send:hover{background:#1d4fd0}
.mic.rec{background:var(--err); color:#fff; border-color:var(--err); animation:pulse 1s infinite}

/* Login */
.overlay{position:fixed; inset:0; background:#070b16ee; display:grid; place-items:center; z-index:20}
.login-card{background:var(--panel); border:1px solid var(--line); border-radius:18px; padding:28px; width:min(92vw,360px); text-align:center}
.logo-big{font-size:30px; font-weight:800; margin-bottom:6px}
.login-card input{width:100%; margin:0; padding:11px 14px; border-radius:10px; border:1px solid var(--line); background:var(--panel2); color:var(--text)}
.pw-row{display:flex; gap:8px; margin:14px 0}
.pw-row input{flex:1}
.pw-toggle{flex:0 0 46px; border:1px solid var(--line); background:var(--panel2); color:var(--text); border-radius:10px; cursor:pointer; font-size:18px}
.pw-toggle:hover{background:#22305a}
.login-card button{width:100%; padding:11px; border:none; border-radius:10px; background:var(--accent); color:#fff; font-weight:600; cursor:pointer}
.err{color:var(--err); font-size:13px; margin-top:8px; min-height:18px}

/* ---- Mobil-Optimierung: lesbarer, luftiger, größere Touch-Ziele ---- */
@media (max-width: 640px){
  body{font-size:16px; line-height:1.6}
  .topbar{padding:10px 12px}
  .brand-sub{display:none}            /* spart Platz oben */
  .brand-name{font-size:16px}
  .logo{font-size:20px}
  .status{font-size:12px; gap:6px}

  .chat{padding:14px 12px 10px; gap:18px}   /* mehr Abstand zwischen Nachrichten */
  .msg{gap:8px}
  .msg .avatar{width:28px; height:28px; flex-basis:28px; font-size:14px; border-radius:8px}
  .bubble{padding:13px 15px; font-size:16px; line-height:1.62; border-radius:15px}
  .bubble p{margin:0 0 10px}
  .bubble pre{font-size:13px; padding:12px}
  .meta{font-size:12px}
  .tool-chip{font-size:12px; padding:4px 9px}

  .welcome{margin-top:4vh}
  .welcome h1{font-size:22px}
  .welcome p{font-size:15px}
  .chip{font-size:14px; padding:9px 15px}

  .composer{padding:9px 11px; gap:9px}
  .composer textarea{font-size:16px; padding:12px 15px; border-radius:16px}  /* 16px = kein iOS-Auto-Zoom */
  .send{width:48px; height:48px; flex-basis:48px; font-size:19px}
  .composer .icon-btn{width:48px; height:48px}

  .login-card input{font-size:16px}
  .pw-toggle{flex-basis:48px}
}