@font-face{font-family:"Outfit";src:url("fonts/Outfit-Regular.ttf") format("truetype");font-weight:300 600;font-style:normal;font-display:swap}
@font-face{font-family:"Outfit";src:url("fonts/Outfit-Bold.ttf") format("truetype");font-weight:700;font-style:normal;font-display:swap}

:root{
  --header:#09111f;
  --primary:#4f46e5;
  --primary-2:#6366f1;
  --bg:#0f172a;
  --panel:#1e293b;
  --panel-2:#172033;
  --text:#e2e8f0;
  --muted:#94a3b8;
  --line:#334155;
}
/* --- Light-Mode --- */
:root[data-theme="light"]{
  --header:#ffffff;
  --primary:#4f46e5;
  --primary-2:#6366f1;
  --bg:#f8fafc;
  --panel:#ffffff;
  --panel-2:#f1f5f9;
  --text:#1e293b;
  --muted:#64748b;
  --line:#e2e8f0;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;display:flex;flex-direction:column;min-height:100vh;
  font-family:"Outfit",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  background:var(--bg);color:var(--text);
  transition:background .2s ease,color .2s ease;
}
/* Theme-Umschalter + Zahnrad: gleicher Button-Look in der Topbar */
.theme-toggle,.gear{
  font-family:inherit;cursor:pointer;text-decoration:none;background:var(--panel);color:var(--muted);
  border:1px solid var(--line);border-radius:8px;width:34px;height:34px;font-size:1.05rem;line-height:1;
  display:flex;align-items:center;justify-content:center;transition:.15s;flex:0 0 auto;
}
.gear{font-size:1.512rem}
.theme-toggle:hover,.gear:hover{border-color:var(--primary);color:var(--primary)}
/* Im Light-Mode: weisser Text auf hellen Flaechen waere unsichtbar -> Primaerfarbe */
:root[data-theme="light"] .chip:hover,
:root[data-theme="light"] .newchat:hover,
:root[data-theme="light"] a.src:hover,
:root[data-theme="light"] .chattab-add:hover,
:root[data-theme="light"] .tab.active,
:root[data-theme="light"] .chattab.active,
:root[data-theme="light"] .model-chips .chip.active,
:root[data-theme="light"] button.secondary,
:root[data-theme="light"] .dropzone.drag{color:var(--primary)}
:root[data-theme="light"] button.secondary:hover{color:#fff}
:root[data-theme="light"] .msg.bot .bubble a{color:#2563eb}
.topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:.7rem 1.25rem;background:var(--header);border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:center;gap:.7rem}
.logo{height:34px;width:auto;display:block}
.brand-text{font-weight:600;font-size:1.05rem;letter-spacing:.2px}
.engine-box{display:flex;align-items:center;gap:.5rem;font-size:.85rem;color:var(--muted)}
.engine-box select{
  font-family:inherit;background:var(--panel);color:var(--text);
  border:1px solid var(--line);border-radius:8px;padding:.4rem .6rem;font-size:.85rem;
}
.chat{flex:1;overflow-y:auto;padding:1.5rem;display:flex;flex-direction:column;gap:1rem;max-width:860px;width:100%;margin:0 auto}
.welcome{margin:auto;text-align:center;max-width:560px;color:var(--muted)}
.welcome h1{color:var(--text);font-weight:600;font-size:1.7rem;margin:.2rem 0 .6rem}
.examples{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin-top:1.2rem}
.chip{
  font-family:inherit;cursor:pointer;background:var(--panel);color:var(--text);
  border:1px solid var(--line);border-radius:999px;padding:.5rem .9rem;font-size:.85rem;transition:.15s;
}
.chip:hover{border-color:var(--primary);color:#fff}
.msg{display:flex;flex-direction:column;gap:.35rem;max-width:85%}
.msg.user{align-self:flex-end;align-items:flex-end}
.msg.bot{align-self:flex-start;align-items:flex-start}
.bubble{padding:.8rem 1rem;border-radius:14px;line-height:1.5;font-size:.97rem}
.msg.user .bubble{background:var(--primary);color:#fff;border-bottom-right-radius:4px;white-space:pre-wrap}
.msg.bot .bubble{background:var(--panel);border:1px solid var(--line);border-bottom-left-radius:4px}
/* Markdown im Bot-Text */
.msg.bot .bubble p{margin:.1rem 0 .6rem}
.msg.bot .bubble p:last-child{margin-bottom:0}
.msg.bot .bubble h2{font-size:1.05rem;font-weight:600;margin:.6rem 0 .4rem}
.msg.bot .bubble h3{font-size:.98rem;font-weight:600;margin:.5rem 0 .3rem}
.msg.bot .bubble ul,.msg.bot .bubble ol{margin:.2rem 0 .6rem;padding-left:1.3rem}
.msg.bot .bubble li{margin:.15rem 0}
.msg.bot .bubble code{background:var(--panel-2);border:1px solid var(--line);border-radius:5px;padding:.05rem .35rem;font-size:.88em;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.msg.bot .bubble pre{background:var(--panel-2);border:1px solid var(--line);border-radius:8px;padding:.7rem .8rem;overflow-x:auto;margin:.4rem 0}
.msg.bot .bubble pre code{background:none;border:none;padding:0;font-size:.85rem}
.msg.bot .bubble a{color:#93c5fd}
.newchat{font-family:inherit;cursor:pointer;background:var(--panel);color:var(--text);border:1px solid var(--line);
  border-radius:8px;padding:.4rem .7rem;font-size:.82rem;transition:.15s}
.newchat:hover{border-color:var(--primary);color:#fff}
.meta{font-size:.72rem;color:var(--muted)}
.sources{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.1rem}
.document-preview{position:fixed;z-index:30;right:0;top:0;width:min(48vw,760px);height:100vh;background:var(--panel);border-left:1px solid var(--line);box-shadow:-6px 0 18px rgba(0,0,0,.16);display:flex;flex-direction:column}
.document-preview.hidden{display:none}
.preview-head{min-height:64px;padding:.75rem 1rem;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:1rem}
.preview-head>div:first-child{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.preview-actions{display:flex;align-items:center;gap:.5rem;flex:0 0 auto}
.preview-actions a{text-decoration:none;display:inline-flex;align-items:center}
.document-preview iframe{width:100%;flex:1;border:0;background:#e5e7eb}
body.preview-open>.topbar,body.preview-open>.chattabs,body.preview-open>.chat,body.preview-open>.composer,body.preview-open>.footer{width:calc(100% - min(48vw,760px));max-width:none;margin-left:0;margin-right:auto}
.topbar,.chattabs,.chat,.composer,.footer{transition:width .2s ease}
.src{font-size:.72rem;background:var(--panel-2);border:1px solid var(--line);color:var(--muted);border-radius:6px;padding:.2rem .5rem;text-decoration:none;cursor:pointer;transition:.15s}
a.src:hover{border-color:var(--primary);color:#fff}
.typing .bubble{color:var(--muted)}
.dot{display:inline-block;animation:blink 1.2s infinite}
.dot:nth-child(2){animation-delay:.2s}.dot:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,60%,100%{opacity:.2}30%{opacity:1}}
.composer{display:flex;gap:.6rem;padding:1rem 1.25rem;background:var(--panel-2);border-top:1px solid var(--line);max-width:860px;width:100%;margin:0 auto}
.composer input{
  flex:1;font-family:inherit;font-size:1rem;background:var(--bg);color:var(--text);
  border:1px solid var(--line);border-radius:10px;padding:.75rem .9rem;
}
.composer input:focus{outline:none;border-color:var(--primary)}
.composer button{
  font-family:inherit;font-weight:600;cursor:pointer;border:none;border-radius:10px;
  padding:0 1.3rem;background:var(--primary);color:#fff;font-size:.95rem;transition:.15s;
}
.composer button:hover{background:var(--primary-2)}
.composer button:disabled{opacity:.5;cursor:not-allowed}
/* Spracheingabe-Button */
.composer .mic{
  background:var(--panel);color:var(--muted);border:1px solid var(--line);
  padding:0;width:46px;font-size:1.15rem;line-height:1;
}
.composer .mic:hover{background:var(--panel);border-color:var(--primary);color:var(--primary)}
.composer .mic.recording{
  background:#dc2626;border-color:#dc2626;color:#fff;
  animation:micpulse 1.2s ease-in-out infinite;
}
.composer .mic.busy{opacity:.6;cursor:wait}
@keyframes micpulse{0%,100%{box-shadow:0 0 0 0 rgba(220,38,38,.5)}50%{box-shadow:0 0 0 6px rgba(220,38,38,0)}}
.footer{text-align:center;font-size:.75rem;color:var(--muted);padding:.7rem;background:var(--header);border-top:1px solid var(--line)}

/* --- Topbar rechts / Zahnrad / Einstellungen --- */
.topbar-right{display:flex;align-items:center;gap:1rem}
.back-link{color:var(--muted);text-decoration:none;font-size:.9rem}
.back-link:hover{color:var(--text)}
.settings{flex:1;overflow-y:auto;width:100%;max-width:720px;margin:0 auto;padding:1.5rem;display:flex;flex-direction:column;gap:1rem}
.settings-group-head{padding:.25rem .15rem 0}
.settings-group-head h2{margin:0 0 .2rem;font-size:1.15rem}
.settings-group-head .note{margin:0}
.settings-group-separator{margin-top:1rem;padding-top:1.25rem;border-top:1px solid var(--line)}
.card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:1.1rem 1.25rem}
.card h2{margin:0 0 .8rem;font-size:1.05rem;font-weight:600}
.card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:.6rem}
.card-head h2{margin:0}
.row{display:flex;flex-direction:column;gap:.3rem;margin-bottom:.7rem}
.row:last-child{margin-bottom:0}
.row label{font-size:.82rem;color:var(--muted)}
.row input,.row select{
  font-family:inherit;font-size:.95rem;background:var(--bg);color:var(--text);
  border:1px solid var(--line);border-radius:8px;padding:.55rem .7rem;
}
.row input:focus,.row select:focus{outline:none;border-color:var(--primary)}
.switch{display:flex;align-items:center;gap:.45rem;font-size:.82rem;color:var(--muted);cursor:pointer}
.ok{color:#34d399}.warn{color:#fbbf24}
.actions{display:flex;align-items:center;gap:1rem;padding:.2rem .2rem 1rem}
.actions button{
  font-family:inherit;font-weight:600;cursor:pointer;border:none;border-radius:10px;
  padding:.65rem 1.4rem;background:var(--primary);color:#fff;font-size:.95rem;transition:.15s;
}
.actions button:hover{background:var(--primary-2)}
.status{font-size:.85rem;color:var(--muted)}
.schedule-status{margin:.35rem 0 .7rem;padding:.7rem .8rem;border:1px solid var(--line);border-radius:8px;background:var(--panel-2)}
#schedule_interval_value,#schedule_interval_unit{height:40px;min-height:40px}

/* --- Ollama-Modelle abrufen --- */
.inline{display:flex;gap:.5rem;align-items:stretch}
.inline input{flex:1}
.inline button.secondary{white-space:nowrap;padding:.55rem .9rem}
.model-chips{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;margin:-.3rem 0 .7rem;font-size:.85rem;color:var(--muted)}
.model-chips .chip{padding:.35rem .7rem;font-size:.82rem}
.model-chips .chip.active{border-color:var(--primary);color:#fff;background:rgba(79,70,229,.18)}

/* --- Datenquelle / Einlesen --- */
.note{font-size:.78rem;color:var(--muted);margin:.2rem 0 .8rem}
.hint-list{font-size:.78rem;color:var(--muted);margin:.2rem 0 .6rem;padding-left:1.1rem;display:flex;flex-direction:column;gap:.25rem}
.hint-list b{color:var(--text);font-weight:600}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:.2rem .9rem}
@media(max-width:560px){.grid2{grid-template-columns:1fr}}
.source-actions{display:flex;align-items:center;gap:1rem;margin-top:.8rem}
button.secondary{
  font-family:inherit;font-weight:600;cursor:pointer;border:1px solid var(--primary);
  border-radius:10px;padding:.6rem 1.1rem;background:transparent;color:#c7d2fe;font-size:.9rem;transition:.15s;
}
button.secondary:hover{background:var(--primary);color:#fff}
button.secondary:disabled{opacity:.5;cursor:not-allowed}

/* --- Modellprioritaet --- */
.routing-priority-wrap{margin:.9rem 0 1rem;padding:.85rem;background:var(--bg);border:1px solid var(--line);border-radius:12px}
.routing-priority-head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:.65rem}
.routing-priority-head h3{font-size:.9rem;margin:0 0 .15rem}
.routing-priority-head .note{margin:0}
.priority-badge{flex:0 0 auto;border:1px solid var(--line);border-radius:999px;padding:.22rem .55rem;color:var(--muted);font-size:.7rem}
.routing-priority{display:flex;flex-direction:column;gap:.4rem;margin:0;padding:0;list-style:none;counter-reset:none}
.routing-priority-item{display:grid;grid-template-columns:2rem minmax(0,1fr) auto;align-items:center;gap:.65rem;padding:.55rem .6rem;background:var(--panel-2);border:1px solid var(--line);border-radius:9px}
.priority-number{display:grid;place-items:center;width:1.75rem;height:1.75rem;border-radius:7px;background:var(--primary);color:#fff;font-size:.78rem;font-weight:700}
.priority-model{display:flex;flex-direction:column;min-width:0;font-size:.84rem}
.priority-model strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.priority-model small{font-size:.7rem;margin-top:.08rem}
.priority-model small.ready{color:#34d399}
.priority-actions{display:flex;gap:.3rem}
.priority-move{display:grid;place-items:center;width:2rem;height:2rem;border:1px solid var(--line);border-radius:7px;background:transparent;color:var(--text);font-family:inherit;font-size:1rem;cursor:pointer;transition:.15s}
.priority-move:hover:not(:disabled){border-color:var(--primary);background:rgba(79,70,229,.14)}
.priority-move:disabled{opacity:.28;cursor:not-allowed}
@media(max-width:560px){.routing-priority-head{align-items:center}.routing-priority-item{gap:.45rem;padding:.5rem}.priority-badge{display:none}}

/* --- Tabs --- */
.tabs{display:flex;gap:.3rem;padding:.6rem 1.25rem 0;background:var(--header);border-bottom:1px solid var(--line)}
.tab{font-family:inherit;cursor:pointer;background:transparent;color:var(--muted);border:none;border-bottom:2px solid transparent;
  padding:.6rem .9rem;font-size:.92rem;font-weight:500;transition:.15s}
.tab:hover{color:var(--text)}
.tab.active{color:#fff;border-bottom-color:var(--primary)}
.tabpane.hidden{display:none}
.sub{font-size:.95rem;font-weight:600;margin:1.1rem 0 .5rem}
.muted{color:var(--muted);font-weight:400;font-size:.82rem}

/* --- Dropzone / Upload --- */
.dropzone{border:2px dashed var(--line);border-radius:12px;padding:1.6rem;text-align:center;color:var(--muted);
  cursor:pointer;transition:.15s;font-size:.92rem}
.dropzone:hover{border-color:var(--primary);color:var(--text)}
.dropzone.drag{border-color:var(--primary);background:rgba(79,70,229,.08);color:#fff}
.doclist{display:flex;flex-direction:column;gap:.35rem;margin-top:.4rem}
.docrow{display:flex;align-items:center;justify-content:space-between;gap:1rem;background:var(--panel-2);
  border:1px solid var(--line);border-radius:8px;padding:.5rem .7rem;font-size:.85rem}
.docname{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* --- generisch --- */
.hidden{display:none}

/* --- Topbar: Nutzer-Box / Logout --- */
.userbox{display:flex;align-items:center;gap:.7rem}
.user-chip{font-size:.82rem;color:var(--muted)}

/* --- Login-Seite --- */
.login-wrap{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;padding:1.5rem}
.login-card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:1.6rem 1.5rem;width:100%;max-width:360px;display:flex;flex-direction:column;gap:.2rem}
.login-brand{display:flex;align-items:center;gap:.7rem;justify-content:center;margin-bottom:1rem}
.login-brand .logo{height:40px}
.login-card button{font-family:inherit;font-weight:600;cursor:pointer;border:none;border-radius:10px;padding:.7rem 1.2rem;background:var(--primary);color:#fff;font-size:.95rem;margin-top:.6rem;transition:.15s}
.login-card button:hover{background:var(--primary-2)}
.login-card button:disabled{opacity:.5;cursor:not-allowed}
.login-err{color:#f87171;font-size:.85rem;min-height:1.1rem;margin-top:.3rem}

/* --- Checkbox-Gitter (Gruppen/Ordner im Admin) --- */
.checkbox-grid{display:flex;flex-wrap:wrap;gap:.4rem .9rem;background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:.6rem .7rem}
.checkbox-grid .switch{cursor:pointer}
.admin-row{background:var(--panel-2)}
/* Administrator-Checkbox: so gross wie das Eingabefeld daneben, vertikal zentriert */
#nu_admin_row,.admincheck-row{justify-content:center}
#nu_admin_row .switch,.admincheck-row .switch{gap:.7rem;font-size:.95rem;color:var(--text)}
#nu_admin,.u_admin{
  width:27px;height:27px;flex:0 0 auto;margin:0;padding:0;
  accent-color:var(--primary);cursor:pointer;
}
.lexicon-detail{display:block;margin-top:.25rem;overflow-wrap:anywhere}
.lexicon-review-actions{display:flex;align-items:center;gap:.45rem;flex:0 0 auto}
.lexicon-review-actions button{min-height:34px;padding:.4rem .7rem}
.lexicon-actions{flex-wrap:wrap}
@media(max-width:620px){.lexicon-proposal{align-items:flex-start;flex-direction:column}.lexicon-review-actions{width:100%}.lexicon-review-actions button{flex:1}}
#upload-folder-row input{width:100%}

/* --- Logo-Vorschau (Einstellungen) --- */
.logo-preview{background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:.9rem;display:flex;align-items:center;justify-content:center;margin-bottom:.8rem}
.logo-preview img{width:auto;max-width:100%}
#logo_height{padding:0}

/* --- Chat-Tabs --- */
.chattabs{display:flex;align-items:center;gap:.25rem;padding:.4rem .75rem 0;background:var(--header);border-bottom:1px solid var(--line);overflow-x:auto}
.chattab{display:flex;align-items:center;gap:.45rem;background:var(--panel);border:1px solid var(--line);border-bottom:none;
  border-radius:8px 8px 0 0;padding:.45rem .65rem;font-size:.82rem;color:var(--muted);cursor:pointer;white-space:nowrap;max-width:220px;transition:.12s}
.chattab:hover{color:var(--text)}
.chattab.active{color:#fff;border-color:var(--primary);background:var(--bg)}
.chattab-label{overflow:hidden;text-overflow:ellipsis}
.chattab.running{border-color:#38bdf8}
.chattab-activity{width:.48rem;height:.48rem;flex:0 0 auto;border-radius:50%;background:#38bdf8;box-shadow:0 0 0 rgba(56,189,248,.45);animation:chat-running 1.35s ease-out infinite}
@keyframes chat-running{0%{box-shadow:0 0 0 0 rgba(56,189,248,.5)}70%{box-shadow:0 0 0 .38rem rgba(56,189,248,0)}100%{box-shadow:0 0 0 0 rgba(56,189,248,0)}}
.chattab-close{background:none;border:none;color:inherit;cursor:pointer;font-size:1.05rem;line-height:1;padding:0 .15rem;opacity:.55}
.chattab-close:hover{opacity:1;color:#f87171}
.chattab-add{background:var(--panel);border:1px solid var(--line);color:var(--muted);border-radius:8px;cursor:pointer;
  font-size:.85rem;padding:.4rem .65rem;line-height:1;transition:.12s}
.chattab-add:hover{border-color:var(--primary);color:#fff}

/* --- Indexierung-laeuft-Banner --- */
.idx-banner{background:#3a2d0b;color:#fbbf24;border-bottom:1px solid #6b5410;
  text-align:center;font-size:.85rem;font-weight:500;padding:.5rem;letter-spacing:.2px;
  animation:idxpulse 1.6s ease-in-out infinite}
@keyframes idxpulse{0%,100%{opacity:.75}50%{opacity:1}}
/* Lizenz-Banner: Sperre rot, Trial/Hinweis bleibt amber (idx-banner-Stil) */
.lic-banner.locked{background:#3a0b0b;color:#fca5a5;border-bottom-color:#6b1010}

/* ===== Responsive: Tablet & Handy ===== */
/* Tablet / schmaler Desktop */
@media(max-width:820px){
  .topbar{padding:.6rem .9rem;flex-wrap:wrap;gap:.4rem .8rem}
  .topbar-right{gap:.7rem;flex-wrap:wrap;justify-content:flex-end}
  .chat{padding:1.1rem}
  .composer{padding:.8rem .9rem}
  .settings{padding:1.1rem}
  .tabs{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .tab{white-space:nowrap}
}
/* Handy */
@media(max-width:560px){
  .document-preview{width:100vw}
  .preview-head{align-items:flex-start;flex-direction:column}
  body.preview-open>.topbar,body.preview-open>.chattabs,body.preview-open>.chat,body.preview-open>.composer,body.preview-open>.footer{width:100%}
  .topbar{padding:.55rem .75rem}
  .brand{gap:.5rem}
  .brand-text{font-size:.95rem}
  .topbar-right{width:100%;justify-content:space-between;gap:.5rem}
  .engine-box{font-size:.8rem;gap:.35rem}
  .engine-box select{padding:.35rem .5rem}
  .newchat{padding:.4rem .6rem;font-size:.78rem}
  .chat{padding:.9rem;gap:.8rem}
  .welcome h1{font-size:1.4rem}
  .msg{max-width:100%}
  .bubble{font-size:.95rem}
  .composer{padding:.7rem .75rem;gap:.45rem}
  /* 16px verhindert das automatische Hineinzoomen von iOS beim Fokussieren */
  .composer input{font-size:16px}
  .composer button{padding:0 1rem;font-size:.9rem}
  .footer{font-size:.7rem;padding:.6rem .75rem}
  /* Einstellungen / Admin */
  .settings{padding:.9rem;gap:.8rem}
  .card{padding:.9rem 1rem}
  .row input,.row select{font-size:16px}
  .actions{flex-wrap:wrap;gap:.6rem}
  .actions button{flex:1 1 auto}
  .source-actions{flex-wrap:wrap;gap:.6rem}
  .source-actions .secondary{flex:1 1 auto}
  .inline{flex-direction:column}
  .inline button.secondary{width:100%}
  .chattab{max-width:160px}
}