/* VisionVier-Bot — V4 CI (Tinte/Schwarz · Bronze · Off-White · Cormorant/Inter) */

@font-face { font-family:'Cormorant'; src:url('/static/assets/fonts/cormorant-400.woff'); font-weight:400; }
@font-face { font-family:'Cormorant'; src:url('/static/assets/fonts/cormorant-600.woff'); font-weight:600; }
@font-face { font-family:'Cormorant'; src:url('/static/assets/fonts/cormorant-400-italic.woff'); font-weight:400; font-style:italic; }
@font-face { font-family:'Inter'; src:url('/static/assets/fonts/inter-400.woff'); font-weight:400; }
@font-face { font-family:'Inter'; src:url('/static/assets/fonts/inter-500.woff'); font-weight:500; }
@font-face { font-family:'Inter'; src:url('/static/assets/fonts/inter-600.woff'); font-weight:600; }
@font-face { font-family:'Inter'; src:url('/static/assets/fonts/inter-700.woff'); font-weight:700; }

:root {
  --schwarz:#0E0E0E; --tinte:#1A1A1A; --weiss:#FFFFFF; --offwhite:#F4F1EA;
  --bronze:#8B6F47; --bronze-hell:#A98B5F; --grau:#5A5A5A; --linie:#DDD8CE;
}

* { margin:0; padding:0; box-sizing:border-box; }
html, body { height:100%; }
body { font-family:'Inter',system-ui,sans-serif; color:var(--tinte); background:var(--offwhite); font-size:15px; }

button { font-family:inherit; cursor:pointer; }
textarea, input { font-family:inherit; }

/* ---------- Login ---------- */
.login-wrap { min-height:100%; display:flex; align-items:center; justify-content:center;
  background:var(--schwarz); padding:24px; }
.login-card { background:var(--offwhite); width:100%; max-width:420px; padding:48px 40px 36px;
  border-top:4px solid var(--bronze); }
.login-card .marke { display:flex; align-items:center; gap:14px; margin-bottom:28px; }
.login-card .marke img { height:44px; }
.login-card .wm { font-weight:700; letter-spacing:.22em; font-size:15px; }
.login-card .ws { font-size:9px; letter-spacing:.14em; color:var(--grau); text-transform:uppercase; margin-top:3px; }
.login-card h1 { font-family:'Cormorant',serif; font-weight:600; font-size:30px; margin-bottom:6px; }
.login-card .sub { color:var(--grau); font-size:13px; margin-bottom:24px; line-height:1.5; }
.login-card label { display:block; font-size:11px; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:var(--grau); margin:14px 0 5px; }
.login-card input { width:100%; padding:11px 12px; border:1px solid var(--linie); background:var(--weiss);
  font-size:15px; outline:none; }
.login-card input:focus { border-color:var(--bronze); }
.login-card button { width:100%; margin-top:22px; background:var(--bronze); color:var(--weiss);
  border:none; padding:13px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; font-size:13px; }
.login-card button:hover { background:var(--bronze-hell); }
.login-error { color:#a33; font-size:13px; margin-top:12px; min-height:18px; }
.login-card .ki-hinweis { margin-top:22px; padding-top:16px; border-top:1px solid var(--linie);
  font-size:11.5px; color:var(--grau); line-height:1.5; }

/* ---------- App-Layout ---------- */
.app { display:flex; height:100vh; height:100dvh; overflow:hidden; }

/* Sidebar */
.sidebar { width:264px; min-width:264px; background:var(--schwarz); color:var(--offwhite);
  display:flex; flex-direction:column; transition:margin-left .2s ease; }
.sidebar .marke { display:flex; align-items:center; gap:11px; padding:18px 18px 14px;
  border-bottom:1px solid #2a2a2a; }
.sidebar .marke img { height:34px; }
.sidebar .wm { font-weight:700; letter-spacing:.2em; font-size:12.5px; }
.sidebar .ws { font-size:7.5px; letter-spacing:.13em; color:#BBB3A4; text-transform:uppercase; margin-top:2px; }
.btn-new { margin:14px 16px 8px; background:var(--bronze); color:var(--weiss); border:none;
  padding:10px; font-weight:600; font-size:12.5px; letter-spacing:.08em; text-transform:uppercase; }
.btn-new:hover { background:var(--bronze-hell); }
.chatlist { flex:1; overflow-y:auto; padding:6px 8px; }
.chatlist .chat-item { display:flex; align-items:center; gap:6px; padding:9px 10px; font-size:13px;
  color:#D8D2C6; cursor:pointer; border-left:2px solid transparent; }
.chatlist .chat-item:hover { background:#1c1c1c; }
.chatlist .chat-item.active { background:#1c1c1c; border-left-color:var(--bronze); color:var(--weiss); }
.chatlist .chat-item span { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chatlist .chat-del { background:none; border:none; color:#6a6a6a; font-size:15px; padding:0 2px; }
.chatlist .chat-del:hover { color:#c66; }
.side-foot { padding:12px 16px 14px; border-top:1px solid #2a2a2a; font-size:12px; color:#BBB3A4; }
.side-foot .row { display:flex; justify-content:space-between; align-items:center; }
.side-foot button { background:none; border:1px solid #3a3a3a; color:#BBB3A4; font-size:11px;
  padding:5px 10px; letter-spacing:.06em; }
.side-foot button:hover { border-color:var(--bronze); color:var(--offwhite); }

/* Hauptbereich */
.main { flex:1; display:flex; flex-direction:column; min-width:0; }
.topbar { background:var(--offwhite); border-bottom:1px solid var(--linie); padding:10px 22px;
  display:flex; align-items:center; gap:14px; }
.topbar .menu-btn { display:none; background:none; border:1px solid var(--linie); padding:6px 10px; font-size:15px; }
.topbar h1 { font-family:'Cormorant',serif; font-weight:600; font-size:21px; flex:1;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ki-badge { font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--bronze); border:1px solid var(--bronze); padding:4px 9px; white-space:nowrap; }

/* Nachrichten */
.messages { flex:1; overflow-y:auto; padding:26px 0 12px; }
.msg { max-width:820px; margin:0 auto 18px; padding:0 22px; }
.msg .msg-head { display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.msg .who { font-size:10.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--grau); }
.msg .badge { font-size:9.5px; font-weight:600; letter-spacing:.06em; padding:2px 7px; border:1px solid var(--linie);
  color:var(--grau); text-transform:uppercase; }
.msg .badge.lokal { border-color:#5e7d5e; color:#4a6b4a; }
.msg .badge.cloud { border-color:var(--bronze); color:var(--bronze); }
.msg .badge.guard { border-color:#a33; color:#a33; }
.msg-user .bubble { background:var(--tinte); color:var(--offwhite); padding:13px 16px; line-height:1.55;
  white-space:pre-wrap; }
.msg-bot .bubble { background:var(--weiss); border:1px solid var(--linie); border-left:3px solid var(--bronze);
  padding:15px 18px; line-height:1.6; }
.bubble h3 { font-family:'Cormorant',serif; font-weight:600; font-size:19px; margin:14px 0 6px; }
.bubble h3:first-child { margin-top:0; }
.bubble p { margin:8px 0; }
.bubble ul, .bubble ol { margin:8px 0 8px 22px; }
.bubble li { margin:4px 0; }
.bubble strong { font-weight:600; }
.bubble em { font-style:italic; }
.bubble code { background:var(--offwhite); border:1px solid var(--linie); padding:1px 5px; font-size:13px; }
.sources { margin-top:9px; display:flex; flex-wrap:wrap; gap:6px; }
.sources .chip { font-size:10.5px; color:var(--grau); border:1px solid var(--linie); background:var(--weiss);
  padding:3px 8px; }
.sources .chip b { color:var(--bronze); font-weight:600; }
.notice { max-width:820px; margin:-8px auto 18px; padding:0 22px; font-size:12px; color:#4a6b4a; }
.msg-error .bubble { border-left-color:#a33; color:#a33; }

/* Leer-Zustand */
.empty { max-width:640px; margin:8vh auto 0; padding:0 22px; text-align:center; }
.empty img { height:60px; opacity:.9; margin-bottom:18px; }
.empty h2 { font-family:'Cormorant',serif; font-weight:600; font-size:32px; margin-bottom:8px; }
.empty p { color:var(--grau); line-height:1.6; font-size:14px; }
.empty .beispiele { margin-top:26px; display:grid; gap:10px; text-align:left; }
.empty .bsp { background:var(--weiss); border:1px solid var(--linie); padding:12px 14px; font-size:13.5px;
  color:var(--tinte); cursor:pointer; }
.empty .bsp:hover { border-color:var(--bronze); }
.empty .bsp b { color:var(--bronze); font-weight:600; }

/* Composer */
.composer-wrap { border-top:1px solid var(--linie); background:var(--offwhite); padding:12px 22px 8px; }
.composer { max-width:820px; margin:0 auto; background:var(--weiss); border:1px solid var(--linie);
  display:flex; align-items:flex-end; }
.composer:focus-within { border-color:var(--bronze); }
.composer textarea { flex:1; border:none; outline:none; resize:none; padding:13px 14px; font-size:15px;
  line-height:1.5; max-height:180px; background:transparent; }
.composer .send { background:var(--bronze); color:var(--weiss); border:none; padding:0 20px;
  align-self:stretch; font-size:17px; }
.composer .send:disabled { background:var(--linie); cursor:default; }
.composer-foot { max-width:820px; margin:7px auto 0; display:flex; align-items:center;
  justify-content:space-between; gap:12px; }
.mode { display:flex; align-items:center; gap:7px; font-size:11.5px; color:var(--grau); }
.mode select { border:1px solid var(--linie); background:var(--weiss); font-size:11.5px; padding:3px 6px;
  color:var(--tinte); outline:none; }
.disclaimer { font-size:10.5px; color:var(--grau); text-align:right; line-height:1.4; }

/* Mobile */
@media (max-width: 760px) {
  .sidebar { position:fixed; z-index:30; height:100dvh; margin-left:-264px; }
  .sidebar.open { margin-left:0; box-shadow:0 0 40px rgba(0,0,0,.4); }
  .topbar .menu-btn { display:block; }
  .disclaimer { display:none; }
  .msg, .notice { padding:0 14px; }
  .composer-wrap { padding:10px 14px 6px; }
}