/* Theme variables — dark is default, light via html[data-theme=light].
   The theme is persisted in a long-lived cookie (see app.js). */
:root{
  --bg:#0f1115; --panel:#171a21; --panel-2:#1f242f; --border:#2a2f3a;
  --text:#e6e8ee; --muted:#8b93a7; --link:#7aa7ff;
  --accent:#3b82f6; --accent-contrast:#fff;
  --chat-bg:#0f1115; --msg-bg:#171a21; --msg-border:#222732;
  --admin-bg:#1a1400; --active-bg:#1e3a5f;
}
html[data-theme=light]{
  --bg:#f3f4f8; --panel:#ffffff; --panel-2:#eef1f6; --border:#d4d9e3;
  --text:#1a1d26; --muted:#5b6474; --link:#1d4ed8;
  --accent:#2563eb; --accent-contrast:#fff;
  --chat-bg:#f8f9fc; --msg-bg:#ffffff; --msg-border:#e2e6ef;
  --admin-bg:#fdf6e3; --active-bg:#dbe7ff;
}
*{box-sizing:border-box}body{margin:0;font:15px/1.5 system-ui,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--text)}
/* hidden-Attribut gewinnt IMMER — sonst schlägt jede display-Author-Regel
   (flex/block/inline-flex) die UA-Regel und "versteckte" Elemente sind sichtbar */
[hidden]{display:none!important}
a{color:var(--link);text-decoration:none}a:hover{text-decoration:underline}
.topbar{display:flex;justify-content:space-between;align-items:center;padding:10px 16px;background:var(--panel);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:10}
.topbar nav{display:flex;align-items:center;gap:8px}
.brand{font-weight:800;letter-spacing:.3px;color:var(--text)}.brand small{opacity:.6}.muted{color:var(--muted)}.small{font-size:.85em}
.container{max-width:1240px;margin:18px auto;padding:0 16px}
.card{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:16px;margin-bottom:14px}
.card.narrow{max-width:440px;margin:40px auto}
.card-pre{white-space:pre-wrap;overflow-wrap:anywhere;background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:10px;font-size:.85em}
input,select,textarea{width:100%;background:var(--bg);color:var(--text);border:1px solid var(--border);border-radius:8px;padding:8px 10px}
label{display:block;margin:8px 0 0;font-size:.9em}label input, label select, label textarea{margin-top:4px}
.btn{background:var(--panel-2);color:var(--text);border:1px solid var(--border);border-radius:8px;padding:8px 12px;cursor:pointer;display:inline-block}
a.btn:hover{text-decoration:none;filter:brightness(1.1)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-contrast)}.btn.danger{border-color:#ef4444;color:#ef4444}
.btn.xs{padding:4px 8px;font-size:.8em}.btn:disabled{opacity:.4}
/* navbar buttons: Admin sichtbar als Button */
.nav-btn{padding:6px 12px;font-size:.9em}
.nav-btn.admin{background:var(--accent);border-color:var(--accent);color:var(--accent-contrast);font-weight:600}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;background:var(--panel-2);border:1px solid var(--border);border-radius:999px;cursor:pointer;color:var(--muted);padding:0;flex:none}
.icon-btn:hover{color:var(--text);border-color:var(--accent)}
html[data-theme=dark] #theme-toggle .icon-moon{display:none}
html[data-theme=light] #theme-toggle .icon-sun{display:none}
.topbar-left{display:flex;align-items:center;gap:10px}
/* Ausklappbare Sidebar mit Projekt/Task-Tree */
.sidebar{position:fixed;top:0;left:0;bottom:0;width:300px;max-width:86vw;background:var(--panel);border-right:1px solid var(--border);z-index:40;transform:translateX(-102%);transition:transform .18s ease;display:flex;flex-direction:column;padding:12px;overflow-y:auto;gap:8px}
body.sidebar-open .sidebar{transform:none;box-shadow:0 0 40px rgba(0,0,0,.35)}
.sidebar-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:30}
.sidebar-overlay[hidden]{display:none}
.sidebar-head{display:flex;justify-content:space-between;align-items:center;padding:2px 4px 8px;border-bottom:1px solid var(--border)}
.sidebar-nav a{display:block;padding:8px 10px;border-radius:8px;color:var(--text)}
.sidebar-nav a:hover{background:var(--panel-2);text-decoration:none}
.tree details{margin:2px 0}
.tree summary{cursor:pointer;padding:6px 8px;border-radius:8px;font-weight:600;list-style-position:inside}
.tree summary:hover{background:var(--panel-2)}
.tree .task-link{display:flex;gap:7px;align-items:center;padding:4px 8px 4px 24px;border-radius:6px;color:var(--text);font-size:.85em;min-width:0}
.tree .task-link:hover{background:var(--panel-2);text-decoration:none}
.tree .task-link .task-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tree .all-link{color:var(--link)}
.status-dot{flex:none;width:9px;height:9px;border-radius:50%;background:var(--muted)}
.status-dot.running{background:#f59e0b;box-shadow:0 0 6px #f59e0b}
.status-dot.pending{background:var(--accent)}
.status-dot.completed{background:#22c55e}
.status-dot.failed{background:#ef4444}
.status-dot.cancelled{background:var(--muted)}
.status-dot.waiting_for_input{background:#a855f7;box-shadow:0 0 6px #a855f7}
/* Mobile: kein Auto-Zoom beim Fokussieren (iOS/Android zoomen bei <16px rein),
   und fokussierte Felder nicht unter der sticky Navbar verstecken */
html{scroll-padding-top:70px}
input,select,textarea{scroll-margin-top:70px}
@media (max-width:700px){
  input,select,textarea{font-size:16px}
  .container{margin-top:10px}
}
.row{display:flex;gap:10px;align-items:end}.row.wrap{flex-wrap:wrap}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}@media(max-width:900px){.grid2{grid-template-columns:1fr}}
.columns{display:grid;grid-template-columns:1.4fr 1fr;gap:14px}@media(max-width:980px){.columns{grid-template-columns:1fr}}
/* Grid-/Flex-Kinder dürfen schmaler werden als ihr längstes "Wort" — sonst
   sprengt eine lange URL/Token-Zeile im Chat die Spalte und das mobile Layout */
.columns>.col,.grid>*,.grid2>*,.admin-main{min-width:0}
.project-card{display:block}
.badge{background:var(--panel-2);border:1px solid var(--border);border-radius:999px;padding:2px 8px;font-size:.75em}
.badge.completed{background:#14532d;border-color:#1a7a3a;color:#d1fae5}.badge.failed{background:#5a1a1a;border-color:#7a2a2a;color:#fecaca}.badge.running{background:#4a3a0a;color:#fde68a}.badge.admin{background:#3b2e0a;border-color:#b45309;color:#fde68a}
.task-list{list-style:none;margin:0;padding:0}.queue-item{display:flex;justify-content:space-between;align-items:center;padding:8px;border:1px solid var(--border);border-radius:8px;margin-bottom:6px;background:var(--bg);overflow-wrap:anywhere;min-width:0}
.queue-item.pending{border-left:3px solid var(--accent)}.queue-item.running{border-left:3px solid #f59e0b}.queue-item.waiting{border-left:3px solid #a855f7;align-items:flex-start}.queue-item.done{opacity:.9}
.queue-item .drag-handle{cursor:grab;color:var(--muted);padding:4px 10px 4px 2px;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;font-size:1.05em;touch-action:none}
.queue-item.dragging{opacity:.45;border-style:dashed}
.queue-item{scroll-margin-top:70px}
.queue-item:target{outline:2px solid var(--accent);outline-offset:1px}
.tbl{width:100%;border-collapse:collapse;margin-top:10px}.tbl th,.tbl td{border-bottom:1px solid var(--border);padding:6px 8px;text-align:left;font-size:.9em}
.alert{padding:8px 10px;border-radius:8px;margin-bottom:10px}.alert.error{background:#3a1a1a;border:1px solid #7a2a2a;color:#fecaca}
.project-header{display:flex;justify-content:space-between;align-items:start;gap:12px;margin-bottom:10px}
/* Chat: Verlauf oben (älteste zuerst), neuste unten, Composer darunter */
.chat-card{display:flex;flex-direction:column;min-height:420px}
.chat-head{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.dot{width:10px;height:10px;border-radius:50%;display:inline-block}.dot.offline{background:#555}.dot.online{background:#22c55e;box-shadow:0 0 8px #22c55e}
.chat{flex:1;overflow-y:auto;overflow-x:hidden;max-height:58vh;min-height:280px;border:1px solid var(--border);border-radius:8px;background:var(--chat-bg);padding:10px}
.msg{margin-bottom:8px;padding:8px 10px;border-radius:8px;background:var(--msg-bg);border:1px solid var(--msg-border)}
.msg.agent{border-left:3px solid #22c55e}.msg.user{border-left:3px solid var(--accent)}.msg.system{opacity:.85;border-style:dashed}
.msg.admin{border-left:3px solid #b45309;background:var(--admin-bg)}.msg.admin-only{opacity:.95}
.msg .meta{display:flex;justify-content:space-between;gap:8px;align-items:baseline}
.msg .role{font-size:.7em;text-transform:uppercase;letter-spacing:.6px;color:var(--muted)}
.msg .time{font-size:.7em;color:var(--muted);white-space:nowrap}
.msg .body{white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word;font-size:.92em}
.msg .chat-img{display:block;max-width:100%;max-height:340px;border-radius:8px;margin-top:6px;border:1px solid var(--border)}
/* Rückfrage-Schleife: Antwort-Buttons + Freitext + Abbrechen direkt im Chat */
.answer-box{margin-top:10px;padding-top:8px;border-top:1px dashed var(--border);display:flex;flex-direction:column;gap:8px}
.answer-box.disabled{opacity:.55;pointer-events:none}
.answer-options{display:flex;flex-wrap:wrap;gap:6px}
.answer-opt .rec-badge{margin-left:6px;font-size:.7em;background:rgba(255,255,255,.25);border-radius:999px;padding:1px 6px}
.answer-form{gap:6px}
.answer-form input{flex:1;min-width:140px}
/* Composer unter dem Chat — eine Zeile wie in einer Chat-App:
   📎 Anhang | Textfeld | 🎤 Mikro | Senden-Pfeil */
.composer{margin-top:10px;border-top:1px solid var(--border);padding-top:10px}
.composer-row{display:flex;gap:8px;align-items:flex-end}
.composer textarea{flex:1;resize:none;min-height:40px;max-height:160px;border-radius:19px;padding:9px 14px;line-height:1.4}
.comp-btn{flex:none;width:38px;height:38px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:var(--panel-2);border:1px solid var(--border);color:var(--muted);cursor:pointer;padding:0}
.comp-btn:hover{color:var(--text);border-color:var(--accent)}
.comp-btn.has-file{color:var(--accent);border-color:var(--accent)}
.send-btn,.send-btn:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.send-btn:hover{filter:brightness(1.12)}
.attach-chip{display:inline-flex;align-items:center;gap:6px;background:var(--panel-2);border:1px solid var(--border);border-radius:999px;padding:3px 10px;font-size:.8em;margin-bottom:8px;max-width:100%}
.attach-chip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.attach-chip button{background:none;border:none;color:var(--muted);cursor:pointer;font-size:1em;padding:0 2px}
.attach-chip button:hover{color:#ef4444}
/* Aktivitätsanzeige: was der Agent gerade tut + Token-Zähler */
.activity{display:flex;align-items:center;gap:8px;margin-top:8px;padding:6px 10px;border:1px dashed var(--border);border-radius:8px;background:var(--chat-bg);font-size:.85em;color:var(--muted);min-width:0}
.activity[hidden]{display:none}
.activity .term-icon{flex:none;color:var(--accent)}
.activity .spin{flex:none;width:10px;height:10px;border-radius:50%;border:2px solid var(--border);border-top-color:var(--accent);animation:spin 0.9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.activity .act-text{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.activity .tokens{flex:none;background:var(--panel-2);border:1px solid var(--border);border-radius:999px;padding:1px 8px;color:var(--text)}
/* admin layout */
.admin-layout{display:grid;grid-template-columns:220px 1fr;gap:14px}
.admin-sidebar{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:12px;align-self:start;position:sticky;top:58px}
/* Mobil: einspaltig und Tab-Leiste NICHT sticky — sonst rutscht der Inhalt
   drunter und verdeckt z. B. das Codefeld beim Claude-Login */
@media(max-width:800px){
  .admin-layout{grid-template-columns:1fr}
  .admin-sidebar{position:static}
  .side-nav{flex-direction:row;flex-wrap:wrap;gap:6px}
  .side-nav a{padding:6px 10px;border:1px solid var(--border)}
  .tbl{display:block;overflow-x:auto}
}
.side-nav{display:flex;flex-direction:column;gap:4px;margin-top:8px}
.side-nav a{display:block;padding:8px 10px;border-radius:8px;color:var(--text);border:1px solid transparent}
.side-nav a:hover{background:var(--panel-2);border-color:var(--border);text-decoration:none}
.side-nav a.active{background:var(--active-bg);border-color:var(--accent);color:var(--text)}
.admin-main{min-width:0}
/* voice — kompakter runder Icon-Button (voice.js setzt die Status-Klassen).
   -webkit-Präfixe + touch-callout: sonst selektiert iOS beim Gedrückthalten
   Text bzw. zeigt das Kontextmenü statt aufzunehmen */
.mic-btn{flex:none;width:38px;height:38px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;padding:0;border:1px solid var(--border);cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:none;font-size:1.05em}
.mic-btn *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;pointer-events:none}
.mic-btn.idle{background:var(--panel-2);color:var(--text);border-color:var(--border)}
.mic-btn.idle:hover{border-color:var(--accent)}
.mic-btn.recording{background:#dc2626;color:#fff;border-color:#dc2626;animation:pulse 1s infinite}
.mic-btn.locked{background:#ea580c;color:#fff;border-color:#ea580c}
.mic-btn.processing{background:#374151;color:#cbd5e1}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(220,38,38,.6)}70%{box-shadow:0 0 0 10px rgba(220,38,38,0)}100%{box-shadow:0 0 0 0 rgba(220,38,38,0)}}
.mic-status{margin-top:6px}
.mic-status:empty{display:none}
/* Sidebar: persönliche Einstellungen */
.sidebar-settings{border-top:1px solid var(--border);padding-top:8px}
.sidebar-settings h4{margin:0 0 4px}
.sidebar-settings label{font-size:.85em}