/* ── SUSI Design System ── */
/* Fonts SELF-HOSTED (Paket Rechtliches, 06.07.2026): vorher lud das
   @import Inter/JetBrains Mono von fonts.googleapis.com — bei jedem
   Seitenaufruf ging die User-IP an Google (Google-Fonts-Urteil LG
   München). Jetzt lokale Variable-WOFF2 aus /static/fonts/ (Quelle:
   github.com/google/fonts, OFL-Lizenzen liegen daneben) — analog zur
   Google-Fonts-Mirror-Entscheidung aus KONZEPT-PAKET-10-PLAKATE §11,
   nur eben für die drei SUSI-Familien direkt im susi-Baum, damit alle
   Tenant-Domains sie ohne CORS-Konfiguration laden. */
@font-face {
  font-family: 'Inter';
  src: url('/static/fonts/inter-var.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('/static/fonts/jetbrainsmono-var.woff2') format('woff2');
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Caveat Brush';
  src: url('/static/fonts/caveatbrush-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg:    #FFFFFF;
  --bg2:   #F0F7FF;
  --bg3:   #DBEAFE;
  --bdr:   #BFDBFE;
  --bdr2:  #93C5FD;
  --txt:   #0F1C33;
  --txt2:  #1E4A7A;
  --txt3:  #6B9AC4;
  --acc:   #2563EB;
  --acc2:  #1D4ED8;
  --acc3:  rgba(37,99,235,.08);
  --cyan:  #06B6D4;
  --cyan2: #0891B2;
  --grn:   #10B981;
  --red:   #EF4444;
  --amber: #F59E0B;
  --sw:    288px;
  --rad:   14px;
  --shadow-sm: 0 1px 4px rgba(37,99,235,.07);
  --shadow-md: 0 4px 16px rgba(37,99,235,.10);
  --shadow-lg: 0 8px 32px rgba(37,99,235,.13);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  height: 100%;
  background: var(--bg);
  color: var(--txt);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* ── SCROLLBARS ── */
::-webkit-scrollbar { width: 4px }
::-webkit-scrollbar-thumb { background: var(--bdr2); border-radius: 4px }
::-webkit-scrollbar-track { background: transparent }

/* ── LAYOUT ── */
/* dvh statt vh AUF ALLEN GROESSEN (iPad-Fix 07.07.): Safari rechnet
   100vh inkl. der Flaeche hinter seinen Leisten — das Eingabefeld ragt
   sonst unter den Rand. Galt bisher nur <=900px; iPads (quer 1024px+)
   bekommen aber das Desktop-Layout. vh bleibt als Fallback. */
#app { display: flex; height: 100vh; height: 100dvh; overflow: hidden }

/* ── SIDEBAR ── */
#sidebar {
  width: var(--sw); min-width: var(--sw);
  background: var(--bg2);
  border-right: 1px solid var(--bdr);
  display: flex; flex-direction: column; overflow: hidden;
}

.sb-top {
  padding: 24px 20px 18px;
  border-bottom: 1px solid var(--bdr);
  background: linear-gradient(160deg, #fff 0%, var(--bg2) 100%);
}
.susi-logo {
  font-size: 24px; font-weight: 700; letter-spacing: -.5px; color: var(--txt);
  display: flex; align-items: center; gap: 8px;
}
.susi-logo .logo-icon {
  width: 34px; height: 34px; border-radius: 10px;
  background: linear-gradient(135deg, var(--acc), var(--cyan));
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(37,99,235,.3);
}
.susi-tagline { font-size: 11px; color: var(--txt3); margin-top: 4px; letter-spacing: .02em }

.sb-user {
  margin-top: 14px; padding: 10px 12px;
  background: #fff; border-radius: 12px;
  border: 1px solid var(--bdr);
  display: flex; align-items: center; gap: 10px;
  box-shadow: var(--shadow-sm);
}
.sb-user .avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: linear-gradient(135deg, var(--acc), var(--cyan));
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: #fff; flex-shrink: 0;
}
.sb-user-name { font-size: 12px; font-weight: 500; color: var(--txt); }

.sb-scroll { flex: 1; overflow-y: auto; padding: 12px 12px 0 }

.sb-section { margin-bottom: 6px }
.sb-lbl {
  font-size: 10px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .09em; color: var(--txt3); padding: 8px 8px 5px;
}

.sb-item {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; border-radius: 10px; cursor: pointer;
  color: var(--txt2); font-size: 13px; font-weight: 400;
  border: none; background: none; width: 100%; text-align: left;
  transition: background .12s, color .12s; position: relative;
}
.sb-item:hover { background: var(--bg3); color: var(--txt) }
.sb-item.active {
  background: #fff; color: var(--acc);
  box-shadow: var(--shadow-sm);
  font-weight: 500;
}
.sb-item .ico { width: 16px; text-align: center; flex-shrink: 0; font-size: 13px }
.sb-item .lbl { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.sb-item .x {
  opacity: 0; color: var(--txt3); font-size: 11px;
  padding: 2px 5px; border-radius: 6px; line-height: 1;
  border: none; background: none; cursor: pointer; flex-shrink: 0;
}
.sb-item:hover .x { opacity: 1 }
.sb-item .x:hover { background: #fee2e2; color: var(--red) }

.new-conv {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 10px 14px; border-radius: 24px; cursor: pointer;
  color: var(--acc); font-size: 13px; font-weight: 600;
  border: 1.5px dashed var(--bdr2); background: none;
  width: 100%; margin: 2px 0 10px;
  transition: all .15s;
}
.new-conv:hover { background: var(--acc3); border-color: var(--acc); transform: translateY(-1px) }

.sb-nav-item {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 10px; border-radius: 10px; cursor: pointer;
  color: var(--txt2); font-size: 13px; font-weight: 500;
  border: none; background: none; width: 100%;
  transition: all .12s;
}
.sb-nav-item:hover { background: var(--bg3); color: var(--txt) }

.sb-foot { padding: 14px; border-top: 1px solid var(--bdr) }
.logout-btn {
  width: 100%; padding: 10px; border-radius: 24px;
  border: 1.5px solid var(--bdr2); background: #fff;
  color: var(--txt2); cursor: pointer; font-size: 13px; font-weight: 500;
  transition: all .15s;
}
.logout-btn:hover { border-color: var(--red); color: var(--red); background: #fff5f5 }

/* ── PWA-INSTALL (Paket PWA 2026-07-06) ── */
.pwa-install-btn {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  width: 100%; padding: 9px 14px; margin-bottom: 8px;
  border-radius: 24px; cursor: pointer;
  font-size: 13px; font-weight: 600; font-family: inherit;
  color: #fff; background: var(--acc); border: 1.5px solid var(--acc);
  transition: all .15s;
}
.pwa-install-btn:hover { background: var(--acc2); border-color: var(--acc2); transform: translateY(-1px) }
.pwa-ios-steps { margin: 4px 0 16px 20px; padding: 0; font-size: 13.5px; color: var(--txt2) }
.pwa-ios-steps li { margin-bottom: 9px; line-height: 1.55 }
.pwa-ios-share {
  display: inline-block; padding: 0 6px; border: 1px solid var(--bdr2);
  border-radius: 6px; color: var(--acc); font-weight: 600;
}

/* ── MAIN ── */
#main { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-width: 0 }

/* ── MESSAGES ── */
#chat-view { display: flex; flex-direction: column; flex: 1; overflow: hidden }
#msgs { flex: 1; overflow-y: auto; padding: 28px 0 8px }

.m-row {
  display: flex; padding: 5px 32px; gap: 12px; max-width: 100%;
  transition: background .1s;
}
.m-row:hover { background: rgba(37,99,235,.025) }
.m-row.user { flex-direction: row-reverse }

.m-av {
  width: 32px; height: 32px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; margin-top: 2px;
}
.m-row.assistant .m-av {
  background: linear-gradient(135deg, var(--acc), var(--cyan));
  color: #fff; box-shadow: 0 2px 8px rgba(37,99,235,.25);
}
.m-row.user .m-av {
  background: var(--bg3); color: var(--acc);
  border: 1.5px solid var(--bdr2);
}

.m-bubble { max-width: 68% }
.m-row.user .m-bubble { align-items: flex-end }

.m-txt {
  padding: 11px 16px; border-radius: 18px;
  font-size: 14px; line-height: 1.7; word-break: break-word;
}
.m-row.assistant .m-txt {
  background: #fff; border: 1px solid var(--bdr);
  border-top-left-radius: 4px; color: var(--txt);
  box-shadow: var(--shadow-sm);
}
.m-row.user .m-txt {
  background: linear-gradient(135deg, var(--acc), var(--cyan));
  color: #fff; border-top-right-radius: 4px;
  box-shadow: 0 2px 12px rgba(37,99,235,.25);
}

.m-txt code {
  font-family: 'JetBrains Mono', monospace; font-size: 12px;
  background: rgba(37,99,235,.08); padding: 2px 6px;
  border-radius: 5px; color: var(--acc2);
}
.m-row.user .m-txt code { background: rgba(255,255,255,.2); color: #fff }

.m-txt pre {
  background: #F8F5FF; border: 1px solid var(--bdr);
  border-radius: 10px; padding: 14px; margin: 8px 0; overflow-x: auto;
}
.m-txt pre code { background: none; padding: 0; color: var(--txt) }

.m-txt p { margin-bottom: 8px } .m-txt p:last-child { margin-bottom: 0 }
.m-txt ul, .m-txt ol { padding-left: 20px; margin-bottom: 8px }
.m-txt li { margin-bottom: 4px }
.m-txt h1, .m-txt h2, .m-txt h3 { margin: 12px 0 6px; font-weight: 600 }
.m-txt strong { font-weight: 600 }

.m-time { font-size: 10px; color: var(--txt3); margin-top: 4px; padding: 0 4px }
.m-row.user .m-time { text-align: right }

/* typing */
.t-dot {
  display: inline-block; width: 6px; height: 6px;
  border-radius: 50%; background: var(--acc3);
  margin: 0 2px; animation: td .9s infinite;
}
.t-dot:nth-child(2) { animation-delay: .18s; background: rgba(6,182,212,.4) }
.t-dot:nth-child(3) { animation-delay: .36s }
@keyframes td {
  0%,60%,100% { opacity: .3; transform: translateY(0) }
  30% { opacity: 1; transform: translateY(-5px) }
}
/* Hinweis in der Tipp-Blase (2026-07-29, Agent-Anlage):
   erscheint nur, wenn ein Mistral-Agent erst angelegt werden muss. */
.t-hint {
  margin-top: 7px; font-size: 12.5px; line-height: 1.45;
  color: var(--txt3); opacity: .95;
}

/* ── EMPTY STATE ── */
#empty {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 12px; padding: 40px; position: relative; overflow: hidden;
}
#empty::before {
  content: ''; position: absolute;
  width: 600px; height: 600px; border-radius: 50%;
  background: radial-gradient(circle, rgba(37,99,235,.06) 0%, rgba(6,182,212,.04) 50%, transparent 70%);
  top: 50%; left: 50%; transform: translate(-50%, -60%);
  pointer-events: none;
}
.e-bloom {
  font-size: 52px; margin-bottom: 4px;
  filter: drop-shadow(0 4px 12px rgba(6,182,212,.3));
}
#empty h2 { font-size: 22px; font-weight: 700; color: var(--txt) }
#empty p {
  font-size: 14px; text-align: center; max-width: 320px;
  line-height: 1.7; color: var(--txt2);
}
.quick-grid { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 12px }
.quick-pill {
  padding: 9px 18px; border-radius: 24px;
  border: 1.5px solid var(--bdr2); background: #fff;
  color: var(--txt2); cursor: pointer; font-size: 13px; font-weight: 500;
  transition: all .15s; box-shadow: var(--shadow-sm);
}
.quick-pill:hover {
  border-color: var(--acc); color: var(--acc);
  background: var(--acc3); transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* ── INPUT AREA ── */
#input-wrap {
  padding: 12px 32px 32px;
  background: var(--bg);
}
.input-card {
  background: #fff;
  border: 1.5px solid var(--bdr2);
  border-radius: 20px;
  padding: 6px 6px 6px 16px;
  box-shadow: 0 4px 20px rgba(37,99,235,.10);
  transition: border-color .15s, box-shadow .15s;
  max-width: 860px; margin: 0 auto;
}
.input-card:focus-within {
  border-color: var(--acc);
  box-shadow: 0 4px 24px rgba(37,99,235,.18);
}
.ctx-row { display: flex; gap: 6px; margin-bottom: 6px; flex-wrap: wrap; padding: 2px 0 0 2px }
.ctx-chip {
  display: flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: 10px; font-size: 11px; font-weight: 500;
  background: var(--bg2); border: 1px solid var(--bdr2); color: var(--txt2);
}
.ctx-chip .dot { width: 6px; height: 6px; border-radius: 50% }
.ctx-chip.agent .dot { background: var(--acc) }
.ctx-chip.lib .dot { background: var(--grn) }

.inp-row { display: flex; gap: 8px; align-items: flex-end }
#msg-in {
  flex: 1; background: transparent; border: none; outline: none;
  padding: 8px 4px; color: var(--txt);
  font-family: 'Inter', sans-serif; font-size: 14px; resize: none;
  min-height: 60px; max-height: 160px; line-height: 1.55;
}
#msg-in::placeholder { color: var(--txt3) }
.inp-btns { display: flex; gap: 6px; align-items: center; padding-bottom: 2px }

.ico-btn {
  width: 38px; height: 38px; border-radius: 10px;
  border: 1.5px solid var(--bdr2); background: var(--bg2);
  color: var(--txt3); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; transition: all .15s;
}
.ico-btn:hover { border-color: var(--acc); color: var(--acc); background: var(--acc3) }
.ico-btn.on { border-color: var(--grn); color: var(--grn); background: rgba(16,185,129,.08) }

#send {
  width: 42px; height: 42px; border-radius: 12px; border: none;
  background: linear-gradient(135deg, var(--acc), var(--cyan));
  color: #fff; cursor: pointer; font-size: 18px;
  display: flex; align-items: center; justify-content: center;
  transition: all .15s; flex-shrink: 0;
  box-shadow: 0 2px 10px rgba(37,99,235,.3);
}
#send:hover { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(37,99,235,.4) }
#send:disabled { opacity: .4; cursor: not-allowed; transform: none; box-shadow: none }

/* ── AGENTS / LIBRARY VIEWS ── */
.view { flex: 1; overflow-y: auto; padding: 32px 36px }
.view-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 28px;
}
.view-head h1 { font-size: 20px; font-weight: 700 }

.prim-btn {
  padding: 10px 22px; border-radius: 24px; border: none;
  background: linear-gradient(135deg, var(--acc), var(--cyan));
  color: #fff; cursor: pointer; font-size: 13px; font-weight: 600;
  transition: all .15s; box-shadow: 0 2px 10px rgba(37,99,235,.25);
}
.prim-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(37,99,235,.35) }

.agents-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px,1fr)); gap: 14px }

.ag-card {
  background: #fff; border: 1.5px solid var(--bdr);
  border-radius: 18px; padding: 18px; cursor: default;
  transition: all .15s; box-shadow: var(--shadow-sm);
}
.ag-card:hover { border-color: var(--bdr2); box-shadow: var(--shadow-md); transform: translateY(-2px) }
.ag-head { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 12px }
.ag-ico {
  width: 38px; height: 38px; border-radius: 11px;
  background: linear-gradient(135deg, var(--acc), var(--cyan));
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(37,99,235,.2);
}
.ag-name { font-weight: 600; font-size: 14px; color: var(--txt) }
.ag-desc { font-size: 11px; color: var(--txt2); margin-top: 2px }
.ag-preview {
  font-size: 12px; color: var(--txt3); line-height: 1.55;
  border-top: 1px solid var(--bdr); padding-top: 10px;
  overflow: hidden; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.ag-actions { display: flex; gap: 7px; margin-top: 14px }

.sm-btn {
  padding: 7px 14px; border-radius: 20px;
  border: 1.5px solid var(--bdr2); background: #fff;
  color: var(--txt2); cursor: pointer; font-size: 12px; font-weight: 500;
  transition: all .15s;
}
.sm-btn:hover { border-color: var(--acc); color: var(--acc); background: var(--acc3) }
.sm-btn.red:hover { border-color: var(--red); color: var(--red); background: #fff5f5 }

/* ── CARD GRID (Libraries + Projects) ── */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}

/* ── LIBRARY CARDS ── */
.lib-card {
  background: #fff; border: 1.5px solid var(--bdr);
  border-radius: 18px; padding: 18px;
  display: flex; align-items: center; gap: 14px;
  cursor: pointer; transition: all .15s;
  box-shadow: var(--shadow-sm);
}
.lib-card:hover { border-color: var(--acc); box-shadow: var(--shadow-md); transform: translateY(-2px) }
.lib-card-shared { border-color: var(--bdr2); background: var(--bg2) }
.lib-card-icon { font-size: 28px; flex-shrink: 0 }
.lib-card-body { flex: 1; min-width: 0 }
.lib-card-name { font-size: 14px; font-weight: 600; color: var(--txt); margin-bottom: 3px }
.lib-card-desc { font-size: 12px; color: var(--txt2); margin-bottom: 6px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.lib-card-meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 11px; color: var(--txt3) }
.lib-card-arrow { font-size: 20px; color: var(--txt3); flex-shrink: 0 }

/* ── PROJECT CARDS ── */
.proj-card {
  background: #fff; border: 1.5px solid var(--bdr);
  border-radius: 18px; padding: 0; overflow: hidden;
  display: flex; align-items: stretch; cursor: pointer;
  transition: all .15s; box-shadow: var(--shadow-sm);
}
.proj-card:hover { border-color: var(--acc); box-shadow: var(--shadow-md); transform: translateY(-2px) }
.proj-card-color-bar { width: 6px; background: var(--proj-color); flex-shrink: 0 }
.proj-card-body { flex: 1; padding: 16px; min-width: 0 }
.proj-card-name { font-size: 14px; font-weight: 600; color: var(--txt); margin-bottom: 3px }
.proj-card-desc { font-size: 12px; color: var(--txt2); margin-bottom: 8px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.proj-card-meta { display: flex; gap: 10px; flex-wrap: wrap; font-size: 11px; color: var(--txt3) }
.proj-card-arrow { font-size: 20px; color: var(--txt3); display:flex;align-items:center;padding-right:14px }

/* ── BADGES ── */
.badge-shared { background: rgba(37,99,235,.1); color: var(--acc); padding: 2px 7px;
  border-radius: 10px; font-size: 10px; font-weight: 600 }
.badge-ext { background: rgba(6,182,212,.1); color: var(--cyan2); padding: 2px 7px;
  border-radius: 10px; font-size: 10px; font-weight: 600 }

/* ── BACK BUTTON + DETAIL HEADER ── */
.back-btn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 6px 14px; border-radius: 20px; border: 1.5px solid var(--bdr2);
  background: #fff; color: var(--txt2); cursor: pointer; font-size: 13px; font-weight: 500;
  margin-bottom: 16px; transition: all .12s; box-shadow: var(--shadow-sm);
}
.back-btn:hover { border-color: var(--acc); color: var(--acc) }
.detail-header { margin-bottom: 24px }
.detail-title-row {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 10px;
}
.detail-title-row h1 { font-size: 20px; font-weight: 700 }

/* ── PROJ DETAIL SECTIONS ── */
.proj-section { margin-bottom: 28px }
.proj-section-title {
  font-size: 13px; font-weight: 600; color: var(--txt2);
  margin-bottom: 12px; padding-bottom: 8px;
  border-bottom: 1px solid var(--bdr);
}
.lib-assign-list {
  display: flex; flex-direction: column; gap: 2px;
  background: #fff; border: 1.5px solid var(--bdr);
  border-radius: 14px; padding: 8px; box-shadow: var(--shadow-sm);
}

/* ── LIBRARY PICKER POPOVER ── */
.lib-picker {
  position: fixed; z-index: 300;
  background: #fff; border: 1.5px solid var(--bdr2);
  border-radius: 16px; padding: 8px;
  box-shadow: var(--shadow-lg);
  min-width: 240px; max-width: 300px;
  max-height: 300px; overflow-y: auto;
}
.lib-picker-item {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; border-radius: 10px; cursor: pointer;
  font-size: 13px; transition: background .1s;
}
.lib-picker-item:hover { background: var(--bg2) }
.lib-picker-item input[type="checkbox"] { accent-color: var(--acc); width: 15px; height: 15px; cursor: pointer }
.lib-picker-name { flex: 1; font-weight: 500; color: var(--txt) }
.lib-picker-shared { font-size: 10px; color: var(--acc); background: var(--acc3);
  padding: 2px 6px; border-radius: 8px }
.lib-picker-count { font-size: 11px; color: var(--txt3) }
.lib-picker-empty { padding: 12px; font-size: 13px; color: var(--txt3); text-align: center }

/* ── EMPTY STATE (Libraries / Projects) ── */
.empty-state {
  grid-column: 1 / -1; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 12px;
  padding: 60px 20px; color: var(--txt3); text-align: center;
}
.empty-icon { font-size: 48px; opacity: .4 }
.empty-state p { font-size: 14px; line-height: 1.7; color: var(--txt2) }

/* ── LIBRARY ── */
.lib-subtitle { font-size: 13px; color: var(--txt3); margin-bottom: 24px }

.drop-zone {
  border: 2px dashed var(--bdr2); border-radius: 18px;
  padding: 36px; text-align: center; cursor: pointer;
  transition: all .15s; margin-bottom: 24px; background: #fff;
}
.drop-zone:hover, .drop-zone.drag {
  border-color: var(--acc); background: var(--acc3);
  transform: translateY(-2px); box-shadow: var(--shadow-md);
}
.drop-zone .dico { font-size: 32px; opacity: .5; margin-bottom: 10px }
.drop-zone p { font-size: 14px; color: var(--txt2); font-weight: 500 }
.drop-zone small { font-size: 12px; color: var(--txt3) }

.doc-list { display: flex; flex-direction: column; gap: 10px }
.doc-row {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px; background: #fff;
  border: 1.5px solid var(--bdr); border-radius: 14px;
  box-shadow: var(--shadow-sm); transition: all .12s;
}
.doc-row:hover { border-color: var(--bdr2); box-shadow: var(--shadow-md) }
.doc-ico { font-size: 22px }
.doc-inf { flex: 1; min-width: 0 }
.doc-name { font-size: 13px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.doc-meta { font-size: 11px; color: var(--txt3); margin-top: 2px }
.doc-del {
  padding: 6px 12px; border-radius: 20px; border: 1.5px solid transparent;
  background: none; color: var(--txt3); cursor: pointer; font-size: 12px;
  transition: all .12s;
}
.doc-del:hover { border-color: var(--red); color: var(--red); background: #fff5f5 }

/* ── MODAL ── */
.overlay {
  position: fixed; inset: 0; background: rgba(15,28,51,.4);
  z-index: 200; display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity .2s;
  backdrop-filter: blur(4px);
}
.overlay.open { opacity: 1; pointer-events: all }
.modal {
  background: #fff; border: 1.5px solid var(--bdr);
  border-radius: 22px; padding: 30px; width: 520px;
  max-width: 95vw; max-height: 88vh; overflow-y: auto;
  transform: translateY(10px) scale(.98); transition: transform .2s;
  box-shadow: var(--shadow-lg);
}
.overlay.open .modal { transform: translateY(0) scale(1) }
.modal h2 { font-size: 17px; font-weight: 700; margin-bottom: 20px; color: var(--txt) }
.fg { margin-bottom: 16px }
.fg label {
  display: block; font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .07em;
  color: var(--txt2); margin-bottom: 6px;
}
.fg input, .fg textarea {
  width: 100%; background: var(--bg2); border: 1.5px solid var(--bdr2);
  border-radius: 12px; padding: 11px 14px; color: var(--txt);
  font-family: 'Inter', sans-serif; font-size: 13px; resize: vertical;
  transition: border-color .12s, box-shadow .12s;
}
.fg textarea { min-height: 120px; line-height: 1.6 }
.fg input:focus, .fg textarea:focus {
  outline: none; border-color: var(--acc);
  box-shadow: 0 0 0 3px rgba(37,99,235,.1);
}
.fg input::placeholder, .fg textarea::placeholder { color: var(--txt3) }
.modal-foot { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px }
.sec-btn {
  padding: 10px 20px; border-radius: 24px;
  border: 1.5px solid var(--bdr2); background: #fff;
  color: var(--txt2); cursor: pointer; font-size: 13px; font-weight: 500;
  transition: all .12s;
}
.sec-btn:hover { border-color: var(--bdr); color: var(--txt) }

/* ── TOAST ── */
#toast {
  position: fixed; bottom: 28px; right: 28px; z-index: 999;
  background: #fff; border: 1.5px solid var(--bdr);
  border-radius: 14px; padding: 13px 18px;
  font-size: 13px; font-weight: 500; color: var(--txt);
  opacity: 0; transform: translateY(8px) scale(.96);
  transition: all .22s; pointer-events: none; max-width: 300px;
  box-shadow: var(--shadow-lg);
}
#toast.show { opacity: 1; transform: translateY(0) scale(1) }
#toast.ok { border-color: var(--grn); color: var(--grn) }
#toast.err { border-color: var(--red); color: var(--red) }

/* ── LOGIN ── */
#login {
  position: fixed; inset: 0; background: var(--bg);
  z-index: 500; display: flex; align-items: center; justify-content: center;
  background-image: radial-gradient(ellipse at 60% 30%, rgba(37,99,235,.07) 0%, transparent 60%),
                    radial-gradient(ellipse at 20% 80%, rgba(6,182,212,.06) 0%, transparent 50%);
}
.login-box { width: 360px }
.l-logo {
  font-size: 38px; font-weight: 800; color: var(--txt);
  letter-spacing: -1.5px; margin-bottom: 4px;
  background: linear-gradient(135deg, var(--acc), var(--cyan));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.l-sub { font-size: 14px; color: var(--txt3); margin-bottom: 34px; letter-spacing: .02em }
.l-turnstile-wrap { margin: 8px 0 4px; display: flex; justify-content: center; min-height: 65px }
.l-err { color: var(--red); font-size: 12px; margin-top: 8px; min-height: 18px }
#l-btn { width: 100%; padding: 14px; margin-top: 16px; font-size: 15px }

/* ── RIGHT SIDEBAR ── */
#right-sidebar {
  width: 220px; min-width: 220px;
  background: var(--bg2); border-left: 1px solid var(--bdr);
  display: flex; flex-direction: column;
  overflow-y: auto; padding: 0 0 18px;
}
.rsb-avatar {
  width: 100%; padding: 0;
  border-bottom: 1px solid var(--bdr);
  background: linear-gradient(180deg, var(--bg3) 0%, var(--bg2) 100%);
}
.rsb-susi-img {
  width: 100%; display: block;
  object-fit: cover; object-position: top center;
  border-radius: 0;
  max-height: 220px;
}
.rsb-label {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .09em; color: var(--txt3); margin-bottom: 10px;
}
.rsb-section { margin-bottom: 18px; padding: 14px 14px 0 }
.rsb-ref {
  display: block; font-size: 11px; color: var(--acc);
  padding: 7px 10px; background: #fff; border-radius: 10px;
  margin-bottom: 6px; text-decoration: none;
  border: 1.5px solid var(--bdr); line-height: 1.45;
  transition: all .12s; word-break: break-word;
  box-shadow: var(--shadow-sm);
}
.rsb-ref:hover { border-color: var(--acc); box-shadow: var(--shadow-md) }
.rsb-ref .ref-num { color: var(--txt3); font-size: 10px; margin-right: 4px }
.rsb-empty {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; flex: 1; gap: 10px;
  color: var(--txt3); text-align: center; padding: 24px 14px;
}
.rsb-empty .rsb-flower { font-size: 28px; opacity: .4 }
.rsb-empty p { font-size: 11px; line-height: 1.55 }

/* ── UPLOAD CHIP ── */
.upload-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px 4px 10px; border-radius: 10px;
  background: var(--bg3); border: 1.5px solid var(--bdr2);
  font-size: 12px; font-weight: 500; color: var(--acc);
  max-width: 240px;
}
.upload-chip-name {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.upload-chip-x {
  border: none; background: none; cursor: pointer;
  color: var(--txt3); font-size: 11px; padding: 0; line-height: 1;
  flex-shrink: 0;
}
.upload-chip-x:hover { color: var(--red) }

/* File chip inside message */
.msg-file-chip {
  display: inline-flex; align-items: center; gap: 5px;
  margin-top: 8px; padding: 4px 10px; border-radius: 8px;
  background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.3);
  font-size: 11px; font-weight: 500; color: rgba(255,255,255,.9);
  clear: both; width: fit-content;
}
.m-row.user .m-txt .msg-file-chip {
  display: flex;
}
.m-row.assistant .msg-file-chip {
  background: var(--bg2); border-color: var(--bdr);
  color: var(--txt2);
}

/* ── CITATIONS ── */
.msg-refs {
  margin-top: 10px; padding-top: 10px;
  border-top: 1px solid var(--bdr); font-size: 11px;
}
.msg-refs a {
  display: inline-block; color: var(--acc); margin: 2px 4px 2px 0;
  text-decoration: none; background: var(--bg2);
  padding: 3px 8px; border-radius: 6px; border: 1px solid var(--bdr);
}
.msg-refs a:hover { border-color: var(--acc) }

/* ── RECHTE SIDEBAR: BEISPIELPROMPTS LINK ── */
.rsb-prompts-link-wrap {
  padding: 12px 12px 10px;
  border-bottom: 1px solid var(--bdr);
}
.rsb-prompts-link {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 13px; border-radius: 12px;
  background: linear-gradient(135deg, rgba(37,99,235,.07) 0%, rgba(37,99,235,.03) 100%);
  border: 1.5px solid var(--bdr2);
  text-decoration: none; color: var(--txt);
  transition: all .15s; box-shadow: var(--shadow-sm);
}
.rsb-prompts-link:hover {
  background: linear-gradient(135deg, rgba(37,99,235,.14) 0%, rgba(37,99,235,.07) 100%);
  border-color: var(--acc); box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}
.rsb-pl-icon {
  width: 36px; height: 36px; flex-shrink: 0; border-radius: 10px;
  background: linear-gradient(135deg, var(--acc), var(--acc2));
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(37,99,235,.22);
}
.rsb-pl-text { flex: 1; min-width: 0; }
.rsb-pl-title { font-size: 13px; font-weight: 700; color: var(--txt); letter-spacing: -.01em; line-height: 1.3; }
.rsb-pl-sub   { font-size: 10px; color: var(--txt3); margin-top: 2px; }
.rsb-pl-arrow { font-size: 18px; color: var(--acc); font-weight: 700; flex-shrink: 0; opacity: .6; }

/* ── SHARING (Paket 5+6) ──────────────────────────────────────────────── */

/* Chat-Header über der Message-Liste */
#chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 24px;
  background: var(--card, #fff);
  border-bottom: 1px solid var(--bdr, #e5e7eb);
  flex-shrink: 0;
}
.ch-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--txt, #111);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  gap: 8px;
}
.ch-title .ch-title-icon {
  font-size: 16px;
  flex-shrink: 0;
}
.ch-title .ch-proj-chip {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 12px;
  background: rgba(37, 99, 235, .08);
  color: #2563EB;
  font-weight: 500;
  margin-left: 4px;
}
.ch-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.ch-share-btn {
  padding: 6px 12px;
  border: 1px solid var(--bdr2, #d1d5db);
  border-radius: 6px;
  background: none;
  color: var(--txt, #111);
  font-size: 12px;
  cursor: pointer;
}
.ch-share-btn.active {
  background: rgba(34, 197, 94, .08);
  border-color: rgba(34, 197, 94, .3);
  color: #16a34a;
}
.ch-share-btn:hover {
  background: rgba(0, 0, 0, .04);
}

/* Badge in Sidebar / Listen */
.share-icon {
  font-size: 10px;
  color: #16a34a;
  margin-left: 4px;
  flex-shrink: 0;
}

/* Grid-Cards: "Geteilt"-Badge */
.share-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 10px;
  background: rgba(34, 197, 94, .1);
  color: #16a34a;
  font-weight: 500;
}
.share-badge.ext {
  background: rgba(99, 102, 241, .1);
  color: #6366f1;
}

/* Secretary-Card Extra-Aktionen */
.ag-actions .sm-btn.share-active {
  background: rgba(34, 197, 94, .08);
  border-color: rgba(34, 197, 94, .3);
  color: #16a34a;
}

/* ── User-Kontext in der Sidebar unter dem Namen ─────────────────────── */
.sb-user { align-items: flex-start; }
.sb-user-context {
  font-size: 11px;
  color: var(--txt3, #888);
  margin-top: 2px;
  line-height: 1.35;
  word-break: break-word;
}
.sb-user-context .ctx-org  { font-weight: 500; color: var(--txt2, #555); }
.sb-user-context .ctx-sep  { color: var(--txt3, #aaa); margin: 0 4px; }
.sb-user-context .ctx-team { color: #6366f1; }

/* ── "Mit mir geteilt"-Abschnitt ─────────────────────────────────────── */
.sb-lbl-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-right: 6px;
}
.sb-lbl-link {
  font-size: 11px;
  color: #6366f1;
  text-decoration: none;
  padding: 2px 6px;
  border-radius: 4px;
}
.sb-lbl-link:hover { background: rgba(99,102,241,.1); }

/* Chats, die aus Projekten stammen → sanfte Hervorhebung */
.sb-item.from-project {
  border-left: 2px solid rgba(37,99,235,.4);
  padding-left: 8px;
}
.sb-item .proj-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px; height: 18px;
  margin-left: 2px;
  border-radius: 4px;
  color: #2563EB;
  font-size: 11px;
  flex-shrink: 0;
  cursor: pointer;
  opacity: .6;
  transition: opacity .15s, background .15s;
}
.sb-item .proj-link:hover { opacity: 1; background: rgba(37,99,235,.1); }

/* Chat-Header zeigt auch den Projekt-Chip als clickable */
.ch-proj-chip.clickable {
  cursor: pointer;
  transition: background .15s;
}
.ch-proj-chip.clickable:hover {
  background: rgba(37,99,235,.16);
}


/* ── Bild-Upload (User-Vision-Input) ───────────────────────────────────── */

/* Thumbnail in der ctx-row vor dem Send (Preview während/nach Upload) */
.img-upload-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 10px 6px 6px;
  background: var(--bg, #fff); border: 1.5px solid var(--bdr2, #e5e7eb);
  border-radius: 14px; font-size: 13px; color: var(--txt, #111);
  max-width: 100%;
}
.img-upload-chip img {
  width: 56px; height: 56px; border-radius: 8px;
  object-fit: cover; display: block; cursor: pointer;
}
.img-upload-chip-name {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 220px;
}
.img-upload-chip-x {
  background: transparent; border: 0; color: var(--txt3, #9ca3af);
  cursor: pointer; font-size: 16px; padding: 2px 6px; line-height: 1;
}
.img-upload-chip-x:hover { color: var(--txt, #111); }

/* Inline-Thumbnail in der User-Bubble (96×96, Klick öffnet Vollbild) */
.msg-img-thumb { margin-top: 8px; display: inline-block; }
.msg-img-thumb img {
  width: 96px; height: 96px; border-radius: 10px;
  object-fit: cover; cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,.10);
  transition: transform .12s ease;
}
.msg-img-thumb img:hover { transform: scale(1.03); }

/* Drag-and-Drop-Highlight am Chat-View */
#chat-view { position: relative; }
#chat-view.drag-active::after {
  content: "Bild oder Datei hier ablegen";
  position: absolute; inset: 0; pointer-events: none;
  background: rgba(37,99,235,.06);
  border: 2px dashed #2563EB; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; color: #2563EB; font-weight: 600; z-index: 10;
}

/* Vollbild-Bild-Modal (Inline-Thumbs + Assistant-Bilder klickbar) */
#img-modal {
  position: fixed; inset: 0; background: rgba(0,0,0,.85);
  display: none; align-items: center; justify-content: center;
  z-index: 9999; cursor: zoom-out;
}
#img-modal.open { display: flex; }
#img-modal img {
  max-width: 92vw; max-height: 92vh;
  border-radius: 8px; box-shadow: 0 8px 40px rgba(0,0,0,.5);
  cursor: default;
}
#img-modal-close {
  position: absolute; top: 18px; right: 22px;
  background: rgba(255,255,255,.15); border: 0; color: #fff;
  width: 40px; height: 40px; border-radius: 50%;
  font-size: 20px; cursor: pointer; line-height: 1;
}
#img-modal-close:hover { background: rgba(255,255,255,.25); }


/* ── Export-Button unter Assistant-Bubbles ────────────────────────────── */

.msg-export-wrap {
  margin-top: 10px;
  display: inline-flex;
  position: relative;
}
.msg-export-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 10px;
  background: var(--bg2, #f5f6f8);
  border: 1px solid var(--bdr2, #e5e7eb);
  border-radius: 8px;
  font-size: 12px;
  color: var(--txt2, #4b5563);
  cursor: pointer;
  transition: background .15s, color .15s;
}
.msg-export-btn:hover {
  background: var(--bdr2, #e5e7eb);
  color: var(--txt, #111);
}
.msg-export-menu {
  position: absolute;
  bottom: calc(100% + 4px);
  left: 0;
  min-width: 140px;
  background: #fff;
  border: 1px solid var(--bdr2, #e5e7eb);
  border-radius: 10px;
  box-shadow: 0 6px 24px rgba(0,0,0,.12);
  padding: 4px;
  z-index: 100;
  display: none;
}
.msg-export-menu.open { display: block; }
.msg-export-menu button {
  display: flex; align-items: center; gap: 8px;
  width: 100%;
  padding: 7px 10px;
  background: transparent;
  border: 0;
  border-radius: 6px;
  font-size: 13px;
  color: var(--txt, #111);
  cursor: pointer;
  text-align: left;
}
.msg-export-menu button:hover { background: var(--bg2, #f5f6f8); }
.msg-export-menu .ico {
  width: 18px; text-align: center; font-size: 13px;
}

/* ── Auto-Export-Box (wird nach Trigger-Erkennung unter der Bubble eingefügt) */

.auto-export-box {
  margin-top: 10px;
  padding: 10px 14px;
  background: linear-gradient(135deg, rgba(37,99,235,.06), rgba(37,99,235,.02));
  border: 1px solid rgba(37,99,235,.25);
  border-radius: 12px;
  display: flex; align-items: center; gap: 12px;
  font-size: 13px;
  color: var(--txt, #111);
}
.auto-export-box .icon {
  width: 32px; height: 32px;
  background: rgba(37,99,235,.12);
  color: #2563EB;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; flex-shrink: 0;
}
.auto-export-box .text { flex: 1; }
.auto-export-box .text strong { display: block; margin-bottom: 1px; }
.auto-export-box .text span { color: var(--txt2, #4b5563); font-size: 12px; }
.auto-export-box button {
  padding: 7px 14px;
  background: #2563EB;
  border: 0; border-radius: 8px;
  color: #fff;
  font-size: 13px; font-weight: 500;
  cursor: pointer;
  transition: background .15s;
}
.auto-export-box button:hover { background: #1d4ed8; }
.auto-export-box button:disabled {
  background: #93b3f0; cursor: wait;
}

/* ── Chat-Header Export-Button ────────────────────────────────────────── */

.ch-export-wrap { position: relative; display: inline-block; }
.ch-export-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 12px;
  background: var(--bg2, #f5f6f8);
  border: 1px solid var(--bdr2, #e5e7eb);
  border-radius: 8px;
  font-size: 13px;
  color: var(--txt2, #4b5563);
  cursor: pointer;
  transition: background .15s;
}
.ch-export-btn:hover { background: var(--bdr2, #e5e7eb); }
.ch-export-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 200px;
  background: #fff;
  border: 1px solid var(--bdr2, #e5e7eb);
  border-radius: 10px;
  box-shadow: 0 6px 24px rgba(0,0,0,.12);
  padding: 4px;
  z-index: 100;
  display: none;
}
.ch-export-menu.open { display: block; }
.ch-export-menu button {
  display: flex; align-items: center; gap: 8px;
  width: 100%;
  padding: 8px 12px;
  background: transparent;
  border: 0;
  border-radius: 6px;
  font-size: 13px;
  color: var(--txt, #111);
  cursor: pointer;
  text-align: left;
}
.ch-export-menu button:hover { background: var(--bg2, #f5f6f8); }
.ch-export-menu .ico {
  width: 18px; text-align: center; font-size: 13px;
}

/* ── Long-Chat-Banner (ab 100 Messages) ───────────────────────────────── */

.long-chat-banner {
  margin: 14px auto 8px;
  max-width: 720px;
  padding: 12px 16px;
  background: linear-gradient(135deg, rgba(245,158,11,.08), rgba(245,158,11,.02));
  border: 1px solid rgba(245,158,11,.30);
  border-radius: 12px;
  display: flex; align-items: flex-start; gap: 12px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--txt2, #4b5563);
}
.long-chat-banner .icon {
  width: 32px; height: 32px;
  background: rgba(245,158,11,.16);
  color: #b45309;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; flex-shrink: 0;
}
.long-chat-banner .text { flex: 1; }
.long-chat-banner .text strong {
  display: block;
  color: var(--txt, #111);
  margin-bottom: 2px;
}


/* ── Per-Message-Quellen ─────────────────────────────────────────────── */

/* Aktiv-State auf der ausgewählten Assistant-Bubble */
.m-row.assistant.msg-active .m-bubble {
  box-shadow: 0 0 0 2px rgba(37,99,235,.35), 0 4px 12px rgba(0,0,0,.06);
  background: linear-gradient(135deg, rgba(37,99,235,.04), rgba(37,99,235,.01));
}

/* Quellen-Indikator unter der Bubble (Klick aktiviert Sidebar) */
.msg-refs-indicator {
  display: inline-flex; align-items: center; gap: 5px;
  margin-top: 8px; margin-right: 8px;
  padding: 5px 10px;
  background: rgba(37,99,235,.08);
  border: 1px solid rgba(37,99,235,.20);
  border-radius: 8px;
  font-size: 12px;
  color: #1e40af;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.msg-refs-indicator:hover {
  background: rgba(37,99,235,.14);
  border-color: rgba(37,99,235,.35);
}
.m-row.assistant.msg-active .msg-refs-indicator {
  background: #2563eb;
  color: #fff;
  border-color: #2563eb;
}

/* Download-Link für Quellen-Liste in der rechten Sidebar */
.rsb-refs-download {
  display: inline-flex; align-items: center; gap: 5px;
  margin-top: 12px;
  padding: 7px 12px;
  background: var(--bg2, #f5f6f8);
  border: 1px solid var(--bdr2, #e5e7eb);
  border-radius: 8px;
  font-size: 12px;
  color: var(--txt2, #4b5563);
  cursor: pointer;
  text-decoration: none;
  transition: background .15s, color .15s;
}
.rsb-refs-download:hover {
  background: var(--bdr2, #e5e7eb);
  color: var(--txt, #111);
}

/* ──────────────────────────────────────────────────────────────────── */
/* ── Tabellen im Chat (md()-gerendert)                              ── */
/* ──────────────────────────────────────────────────────────────────── */

.m-txt .md-table-wrap {
  position: relative;
  margin: 10px 0;
  border: 1px solid var(--bdr);
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}
.m-txt .md-table-wrap > .md-table-scroll {
  overflow-x: auto;
  scrollbar-width: thin;
}
.m-txt .md-table-wrap > .md-table-scroll::-webkit-scrollbar { height: 6px; }
.m-txt .md-table-wrap > .md-table-scroll::-webkit-scrollbar-thumb {
  background: var(--bdr2); border-radius: 4px;
}
.m-txt .md-table {
  min-width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--txt);
}
.m-txt .md-table th,
.m-txt .md-table td {
  padding: 9px 12px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--bdr);
  white-space: normal;
  word-break: normal;
  overflow-wrap: normal;
}
.m-txt .md-table thead th {
  background: var(--bg2);
  font-weight: 600;
  color: var(--txt2);
  font-size: 12.5px;
  letter-spacing: .01em;
  border-bottom: 1.5px solid var(--bdr2);
}
.m-txt .md-table tbody tr:nth-child(even) td {
  background: rgba(191,219,254,0.12);
}
.m-txt .md-table tbody tr:hover td {
  background: var(--acc3);
}
.m-txt .md-table tbody tr:last-child td {
  border-bottom: none;
}
.m-txt .md-table code {
  font-size: 11.5px; padding: 1px 5px;
}

/* Copy-Button — schwebend oben rechts in jeder Tabelle */
.m-txt .md-table-copy {
  position: absolute;
  top: 6px; right: 6px;
  background: rgba(255,255,255,.92);
  border: 1px solid var(--bdr);
  border-radius: 7px;
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity .15s ease, background .15s ease, transform .1s ease;
  z-index: 5;
  color: var(--acc);
  font-size: 13px;
  box-shadow: 0 1px 3px rgba(37,99,235,.12);
}
.m-txt .md-table-wrap:hover .md-table-copy { opacity: 1; }
.m-txt .md-table-copy:hover {
  background: var(--acc); color: #fff; border-color: var(--acc);
}
.m-txt .md-table-copy:active { transform: scale(.94); }
.m-txt .md-table-copy.copied {
  opacity: 1;
  background: var(--grn); color: #fff; border-color: var(--grn);
}
.m-txt .md-table-copy svg { width: 14px; height: 14px; }

/* User-Bubble (rechts, blauer Hintergrund) — Tabelle muss auf blau lesbar sein */
.m-row.user .m-txt .md-table-wrap {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.3);
}
.m-row.user .m-txt .md-table { color: #fff; }
.m-row.user .m-txt .md-table th,
.m-row.user .m-txt .md-table td {
  border-bottom-color: rgba(255,255,255,.18);
}
.m-row.user .m-txt .md-table thead th {
  background: rgba(255,255,255,.12);
  color: #fff;
  border-bottom-color: rgba(255,255,255,.35);
}
.m-row.user .m-txt .md-table tbody tr:nth-child(even) td {
  background: rgba(255,255,255,.05);
}
.m-row.user .m-txt .md-table tbody tr:hover td {
  background: rgba(255,255,255,.12);
}
.m-row.user .m-txt .md-table-copy {
  background: rgba(255,255,255,.18); color: #fff;
  border-color: rgba(255,255,255,.3);
}
.m-row.user .m-txt .md-table-copy:hover {
  background: #fff; color: var(--acc);
}
.m-row.user .m-txt .md-table-copy.copied {
  background: var(--grn); color: #fff;
}

/* ── MAGDA-Hint-Karte (Paket 3) ──────────────────────────────────────────
   Erscheint nach SUSI-Bildgenerierung als zusätzliche Karte unter dem Bild.
   Optisch differenziert vom normalen Assistant-Bubble durch Cyan-Blau-
   Gradient im Hintergrund und Gradient-Avatar. */
.m-row.assistant.magda-hint .m-av.magda-av {
  background: linear-gradient(135deg, var(--cyan), var(--acc));
  color: #fff; font-weight: 700;
  box-shadow: 0 2px 8px rgba(6,182,212,.30);
}
.m-row.assistant.magda-hint .m-txt.magda-hint-txt {
  background: linear-gradient(135deg, rgba(6,182,212,.07), rgba(37,99,235,.10));
  border: 1.5px solid var(--bdr2);
  box-shadow: var(--shadow-md);
}
.magda-hint-cta { margin-top: 10px }
.magda-cta-btn {
  display: inline-block;
  background: linear-gradient(135deg, var(--cyan), var(--acc));
  border: none; color: #fff !important;
  padding: 8px 18px; font-weight: 600; font-size: 13px;
  text-decoration: none; border-radius: 20px;
  transition: all .15s; cursor: pointer;
}
.magda-cta-btn:hover {
  filter: brightness(1.08); transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(37,99,235,.25);
}

/* ════════════════════════════════════════════════════════════════════
   RESPONSIVE (Paket RESPONSIVE 2026-07-06)
   Desktop (≥901px): alles unverändert — Topbar/Backdrop/Close existieren
   im DOM, sind hier aber display:none; die drawer-open/panel-open-
   Klassen haben ohne Media-Query keine Wirkung.
   Mobile (≤900px): linke Sidebar = Drawer von links, rechte Sidebar =
   Panel von rechts (Quellen/Links bleiben so voll erreichbar),
   Eingabe klebt unten mit iOS-Safe-Area.
   ════════════════════════════════════════════════════════════════════ */

#mobile-topbar { display: none }
#mob-backdrop  { display: none }
#rsb-close     { display: none }

@media (max-width: 900px) {

  /* dvh statt vh: mobile Browserleisten (iOS/Chrome) schieben sonst die
     Eingabe unter den Rand. Fallback 100vh bleibt für alte Browser. */
  #app { height: 100vh; height: 100dvh }

  /* ── Topbar ── */
  #mobile-topbar {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px;
    padding-top: calc(8px + env(safe-area-inset-top));
    background: var(--bg2); border-bottom: 1px solid var(--bdr);
    flex-shrink: 0;
  }
  .mtb-btn {
    width: 42px; height: 42px; flex: none;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; background: #fff; color: var(--txt2);
    border: 1.5px solid var(--bdr2); border-radius: 12px; cursor: pointer;
  }
  .mtb-btn:active { background: var(--acc3) }
  .mtb-title {
    flex: 1; text-align: center;
    font-size: 17px; font-weight: 800; letter-spacing: -.3px; color: var(--txt);
  }

  /* ── Linke Sidebar → Drawer ── */
  #sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 420;
    width: min(84vw, 320px); min-width: 0;
    transform: translateX(-105%);
    transition: transform .22s ease;
    box-shadow: 8px 0 32px rgba(15,28,51,.18);
    padding-bottom: env(safe-area-inset-bottom);
  }
  #sidebar.drawer-open { transform: translateX(0) }
  .sb-top { padding-top: calc(18px + env(safe-area-inset-top)) }

  /* ── Rechte Sidebar → Panel ── */
  #right-sidebar {
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 420;
    width: min(84vw, 320px); min-width: 0;
    transform: translateX(105%);
    transition: transform .22s ease;
    border-left: 1px solid var(--bdr);
    box-shadow: -8px 0 32px rgba(15,28,51,.18);
    padding-bottom: calc(18px + env(safe-area-inset-bottom));
  }
  #right-sidebar.panel-open { transform: translateX(0) }
  #rsb-close {
    display: flex; position: absolute; top: calc(10px + env(safe-area-inset-top)); right: 10px;
    width: 36px; height: 36px; align-items: center; justify-content: center;
    z-index: 2; font-size: 15px; background: rgba(255,255,255,.92);
    color: var(--txt2); border: 1.5px solid var(--bdr2); border-radius: 50%;
    cursor: pointer;
  }

  /* ── Backdrop ── */
  #mob-backdrop {
    display: block; position: fixed; inset: 0; z-index: 410;
    background: rgba(15,28,51,.38);
    opacity: 0; pointer-events: none; transition: opacity .2s;
  }
  #mob-backdrop.show { opacity: 1; pointer-events: all }

  /* ── Chat ── */
  #msgs { padding: 14px 0 6px }
  .m-row { padding: 5px 10px; gap: 8px }
  #chat-header { padding: 8px 12px }
  #input-wrap { padding: 8px 8px calc(10px + env(safe-area-inset-bottom)) }
  .input-card { border-radius: 16px }
  #empty { padding: 24px 16px }

  /* Picker (Modell/Secretary/Bibliothek) nicht breiter als der Screen */
  .lib-picker { max-width: calc(100vw - 16px); left: 8px !important }

  /* ── Views (Secretaries / Bibliotheken / Projekte / Nutzung) ── */
  .view { padding: 16px 14px }
  .view-head { flex-wrap: wrap; gap: 10px }
  .view-head h1 { font-size: 18px }
  .agents-grid, .card-grid { grid-template-columns: 1fr }

  /* ── Modals: Fullscreen ── */
  .overlay { padding: 0 }
  .modal {
    width: 100vw; max-width: 100vw;
    height: 100dvh; max-height: 100dvh;
    border-radius: 0; border: none;
    padding: 22px 18px calc(22px + env(safe-area-inset-bottom));
    padding-top: calc(22px + env(safe-area-inset-top));
  }

  /* ── Login ── */
  .login-box { width: min(360px, 88vw) }
  .l-logo { font-size: 32px }

  /* Touch-Ziele */
  .sb-nav-item, .new-conv { min-height: 44px }
  .ico-btn { min-width: 40px; min-height: 40px }
}

/* Install-Button in der Mobile-Topbar (Nachtrag 06.07. spät):
   dezent akzentuiert, damit er als Aktion erkennbar ist. */
@media (max-width: 900px) {
  .mtb-install { border-color: var(--acc); color: var(--acc); background: var(--acc3) }
}


/* ── COOKIE-HINWEIS (Paket Rechtliches 2026-07-06) ── */
#cookie-note {
  position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%);
  z-index: 620;   /* über #login (500) und Mobile-Panels (420) — der
                     Hinweis gilt ab dem ersten Pixel, auch auf der
                     Login-Seite */
  display: flex; align-items: center; gap: 14px;
  max-width: min(640px, calc(100vw - 24px));
  background: #fff; border: 1.5px solid var(--bdr2); border-radius: 16px;
  padding: 12px 16px; box-shadow: var(--shadow-lg);
  font-size: 13px; color: var(--txt2); line-height: 1.5;
}
#cookie-note .cn-text a { color: var(--acc); text-decoration: underline; margin-left: 4px }
.cn-btn {
  flex: none; padding: 8px 16px; border-radius: 20px; cursor: pointer;
  font-size: 13px; font-weight: 600; font-family: inherit;
  color: #fff; background: var(--acc); border: 1.5px solid var(--acc);
}
.cn-btn:hover { background: var(--acc2) }
@media (max-width: 900px) {
  #cookie-note {
    flex-direction: column; align-items: stretch; gap: 10px;
    bottom: calc(10px + env(safe-area-inset-bottom));
  }
  .cn-btn { width: 100% }
}

.sb-legal { text-align: center; margin-top: 8px }
.sb-legal a { font-size: 11px; color: var(--txt3); text-decoration: none }
.sb-legal a:hover { color: var(--txt2); text-decoration: underline }

.sb-legal { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap }
/* FIX (Gerald 07.07.): das Cookie-Modal muss auch AUF der Login-Seite
   funktionieren — .overlay liegt auf z-index 200, #login auf 500, das
   Modal öffnete sich dahinter ("führt ins Leere"). Nur dieses eine
   Modal über Login (500) und Banner (620) heben: */
#cookie-info-modal { z-index: 640 }
.login-legal {
  position: absolute; bottom: calc(16px + env(safe-area-inset-bottom));
  left: 0; right: 0;
  display: flex; justify-content: center; gap: 16px;
}
.login-legal a { font-size: 12px; color: var(--txt3); text-decoration: none }
.login-legal a:hover { color: var(--txt2); text-decoration: underline }

/* ── V-Serie V1: Diktat (Mikrofon-Knopf) ─────────────────────────────────
   Drei sichtbare Zustaende, damit nie unklar ist, ob gerade aufgenommen
   wird: Ruhe (normaler .ico-btn), Aufnahme (rot + Pulsieren + Zaehler),
   Verarbeitung (gedimmt, nicht klickbar). */

#mic-btn.recording {
  border-color: var(--red, #ef4444);
  color: #fff;
  background: var(--red, #ef4444);
  animation: micPulse 1.4s ease-in-out infinite;
}
#mic-btn.busy {
  opacity: .55;
  cursor: progress;
  animation: none;
}
#mic-btn:disabled { opacity: .4; cursor: not-allowed; animation: none }

@keyframes micPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, .45) }
  50%      { box-shadow: 0 0 0 7px rgba(239, 68, 68, 0) }
}

/* Laufzeit neben dem Knopf. Leer = unsichtbar (kein Platzhalter-Sprung). */
#mic-timer {
  display: none;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--red, #ef4444);
  font-weight: 600;
  min-width: 38px;
  text-align: center;
  align-self: center;
}
#mic-timer.on { display: inline-block }

/* Letzte 30 Sekunden vor dem automatischen Stopp: Zaehler blinkt dezent. */
#mic-timer.warn { animation: micBlink 1s step-start infinite }
@keyframes micBlink { 50% { opacity: .35 } }

@media (prefers-reduced-motion: reduce) {
  #mic-btn.recording, #mic-timer.warn { animation: none }
}

/* ── V-Serie V2: Vorlesen ────────────────────────────────────────────────
   Der Knopf sitzt neben dem Export-Knopf unter jeder Antwort und teilt
   dessen Optik, damit die Leiste ruhig bleibt. Drei Zustaende: Ruhe,
   Laden, Wiedergabe. */

.msg-speak-btn {
  display: inline-flex; align-items: center; gap: 5px;
  margin-right: 6px;
  padding: 5px 10px;
  background: var(--bg2, #f5f6f8);
  border: 1px solid var(--bdr2, #e5e7eb);
  border-radius: 8px;
  font-size: 12px;
  color: var(--txt2, #4b5563);
  cursor: pointer;
  transition: all .15s;
}
.msg-speak-btn:hover { background: var(--bdr2, #e5e7eb); color: var(--txt, #111) }
.msg-speak-btn.loading { opacity: .65; cursor: progress }
.msg-speak-btn.playing {
  border-color: var(--acc);
  color: var(--acc);
  background: var(--acc3);
}

/* Schalter für das automatische Vorlesen — aus wirkt gedämpft, an wie ein
   aktiver Werkzeug-Knopf (gleiche Sprache wie .ico-btn.on). */
#autoread-btn { font-size: 15px }
#autoread-btn:not(.on) { opacity: .5 }
#autoread-btn.on { border-color: var(--acc); color: var(--acc); background: var(--acc3) }

/* ── Mobile: Knopfzeile umbrechen (Fix 28.07.2026) ───────────────────────
   Die Eingabezeile war fuer vier Symbolknoepfe ausgelegt. Mit Mikrofon,
   Aufnahme-Zaehler und Vorlese-Schalter sind es sieben Elemente plus
   Senden — auf einem 360-px-Display sind das ueber 300 px allein fuer die
   Knoepfe, wodurch das Eingabefeld zusammenbricht und Knoepfe aus dem
   sichtbaren Bereich rutschen.

   Loesung: unter 900 px stehen die Knoepfe in einer eigenen Zeile UNTER
   dem Eingabefeld, rechtsbuendig. Das ist auf schmalen Geraeten ohnehin
   das gelaeufige Muster und schafft Platz fuer alle Elemente. */

@media (max-width: 900px) {
  .inp-row { flex-direction: column; align-items: stretch; gap: 6px }
  #msg-in { min-height: 48px; width: 100% }
  .inp-btns {
    width: 100%;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
    padding-bottom: 0;
  }
  /* Senden bleibt der groesste Knopf und sitzt aussen rechts */
  #send { margin-left: 2px }
}

/* Sehr schmale Geraete (iPhone SE und aehnlich): Symbole etwas kompakter,
   damit alles in eine Zeile passt statt auf zwei umzubrechen. */
@media (max-width: 400px) {
  .inp-btns { gap: 6px }
  .ico-btn { min-width: 36px; min-height: 36px; width: 36px; height: 36px; font-size: 15px }
  #send { width: 38px; height: 38px }
}