/* ============================================================
   Brenner & Kollegen · Kanzlei-Cockpit
   Thema über indie.css: kühles Weiß und Graphit, eine helle
   Seitenleiste, ein einziger Akzent in Stahlblau (kommt aus
   branding.json), Hauptaktionen in Tinte. Titel, Zahlen und
   Antworten der Agenten in Newsreader (Antiqua mit optischen
   Größen), Bedienung in Inter, in normaler Schreibweise statt
   gesperrter Versalien.
   Schriften: SIL Open Font License 1.1, siehe /icons/fonts.
   ============================================================ */
@font-face { font-family: "Newsreader"; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url(/icons/fonts/newsreader-latin-roman.woff2) format("woff2"); }
@font-face { font-family: "Newsreader"; font-style: italic; font-weight: 400; font-display: swap;
  src: url(/icons/fonts/newsreader-latin-italic.woff2) format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(/icons/fonts/inter-latin.woff2) format("woff2"); }

:root {
  --canvas:    #f6f7f9;
  --surface:   #ffffff;
  --surface-2: #f1f3f5;
  --surface-3: #e8ebef;

  --ink:   #141922;
  --ink-2: #3c4350;
  --ink-3: #697180;
  --ink-4: #9aa1ac;

  --line:   #e3e6ea;
  --line-2: #d0d5dc;
  --line-strong: #141922;

  /* Fallback, falls das Branding keinen Akzent setzt */
  --terra:      #2c4a6e;
  --terra-ink:  #233c5a;
  --terra-wash: #edf1f6;
  --terra-line: #c3cfdd;

  --green:      #2e6b4f;
  --green-wash: #e8f1ec;
  --green-line: #c3d9cc;
  --maroon:     #a3271f;
  --gold:       #697180;

  --serif: "Newsreader", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --sans:  "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  /* indie.css setzt Etiketten in --mono; hier dieselbe Grotesk wie die Bedienung */
  --mono:  "Inter", "Segoe UI", system-ui, sans-serif;
  --code:  "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --rad: 5px;
  --rad-lg: 8px;
}

body { font-size: 14.5px; font-feature-settings: "cv05" 1, "cv08" 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
::selection { background: #d6e0ec; }
.md code, .md pre, .md pre code, code, pre, kbd { font-family: var(--code); }

/* Etiketten: keine gesperrten Versalien. Die Liste folgt den Regeln von indie.css 0.1.8. */
.mono, .brand-tag, .new-chat, .conv-meta, .foot-txt, .install-link, .foot-link, .topbar-title .tt-kind,
.model-btn, .box-busy, .app-scope-btn, .model-warm, .menu-cap, .msg-role, .msg-provider, .act-btn,
.md pre .code-bar, .md pre .code-copy, .reason-toggle, .file-art .fa-kind, .eyebrow, .prompt .p-k,
.drop-veil-box, .voice-status, .tool-toggle, .search-pill, .tool-step .ts-lbl, .app-agent-menu .aam-head,
.pwa-banner .pwa-install, .composer-foot .hint, .routine-item .ri-meta, .ri-mode, .routine-item .ri-confirm,
.rf-tab, .modal-head .eb, .preset, .field label, .btn, .mcp-menu-head, .admin-brand .tag, .admin-top .back,
.admin-eyebrow, .beta, .agent-files-head span, .side-tab, .loop-chip, .app-lock, .appws-note.mono, .acv-kind,
.set-nav-group, .set-scope, .set-sub-label, .set-you, .set-agent-chip, .tab, .section-head .sub, .trow.head,
.tag-chip, .mini, .tool-card .tc-key label, .auth-tab {
  text-transform: none; letter-spacing: 0;
}
.mono { font-size: 12px; font-weight: 500; }
.eyebrow, .menu-cap, .modal-head .eb, .mcp-menu-head, .app-agent-menu .aam-head, .set-nav-group, .set-sub-label,
.admin-eyebrow, .field label, .trow.head, .section-head .sub { font-size: 12px; font-weight: 500; color: var(--ink-3); }
.act-btn, .btn, .preset, .rf-tab, .tab, .auth-tab, .app-lock, .app-scope-btn { font-size: 12.5px; font-weight: 500; }
.tool-toggle, .search-pill { font-size: 12px; font-weight: 500; }
.tool-toggle .tt-sub { letter-spacing: 0; }
.composer-foot .hint { font-size: 11.5px; color: var(--ink-4); }
.msg-role { font-size: 12px; font-weight: 600; }
.msg-provider, .conv-meta, .routine-item .ri-meta { font-size: 11.5px; }
.entry-badge, .agent-tag, .loop-chip, .beta, .tag-chip, .mini, .set-scope, .set-you, .set-agent-chip, .acv-kind, .ri-mode { font-size: 11px; font-weight: 500; }
.md pre .code-bar, .md pre .code-copy { font-family: var(--code); font-size: 11px; }

/* ---------------------------------------------------------------- Seitenleiste */
.sidebar { background: var(--surface-2); border-right: 1px solid var(--line); color: var(--ink); }
.brand { padding: 20px 18px 18px; gap: 11px; }
.logo { width: 32px; height: 32px; }
.brand-name { font-family: var(--serif); font-weight: 500; font-size: 19px; letter-spacing: -0.005em; color: var(--ink); }
.brand-name b, .bd { color: var(--ink); font-weight: 500; }
.brand-tag { color: var(--ink-3); font-size: 12px; font-weight: 400; margin-top: 2px; opacity: 1; }

.new-chat {
  background: var(--ink); color: #fff;
  font-size: 13.5px; font-weight: 500; padding: 10px 14px;
}
.new-chat:hover { background: #2a313c; }
.new-caret { background: var(--ink); color: #fff; border-color: var(--ink); border-left-color: rgba(255, 255, 255, 0.18); }
.new-caret:hover { background: #2a313c; filter: none; }

.conv-head { border-top-color: var(--line); color: var(--ink-3); }
.side-tabs { border-top-color: var(--line); }
.side-tab { color: var(--ink-3); font-size: 12.5px; font-weight: 500; }
.side-tab.on { color: var(--ink); border-bottom-color: var(--ink); }

.conv:hover { background: var(--surface-3); }
.conv.active { background: var(--surface); border-color: var(--line); box-shadow: 0 1px 2px rgba(20, 25, 34, 0.04); }
.conv.active::before { background: var(--terra); }
.conv-title { color: var(--ink-2); font-size: 13.5px; }
.conv.active .conv-title { color: var(--ink); font-weight: 500; }
.conv-meta { color: var(--ink-4); }
.app-tab .app-ic { color: var(--ink-3); }
.conv.active .app-ic { color: var(--terra); }

.apps-add { background: transparent; border-color: var(--line-2); color: var(--ink-3); }
.apps-add:hover { border-color: var(--ink-3); color: var(--ink); }
/* "G" (global) sagt Anwältinnen und Anwälten nichts; hier ist ohnehin alles kanzleiweit */
.sidebar .app-scope { display: none; }
/* Der Typ steht als Versalwort im Plattformtext; das Symbol allein genügt */
.sidebar .entry-badge { font-size: 0; gap: 0; padding: 2px 3px; color: var(--ink-3); background: transparent; border-color: var(--line-2); }
.sidebar .entry-badge svg { width: 11px; height: 11px; }

.sidebar-foot { border-top-color: var(--line); gap: 2px; padding: 10px 12px; }
.foot-link, .install-link { color: var(--ink-2); border-color: transparent; background: transparent; font-size: 13px; font-weight: 500; padding: 7px 8px; }
.foot-link:hover, .install-link:hover { color: var(--ink); border-color: transparent; background: var(--surface-3); }
.foot-txt { color: var(--ink-3); }

.user-foot { border-top-color: var(--line); background: var(--surface-2); }
.user-link:hover { background: var(--surface-3); }
.user-avatar { background: var(--ink); color: #fff; font-weight: 600; font-size: 11.5px; }
.user-name { color: var(--ink); font-weight: 500; }
.user-email { color: var(--ink-3); }
.logout-btn { color: var(--ink-3); border-color: var(--line-2); background: transparent; }
.logout-btn:hover { color: var(--ink); border-color: var(--ink-3); background: var(--surface); }
.splitter.side-edge:hover, .splitter.side-edge.drag { background: var(--terra-line); }

/* ---------------------------------------------------------------- Hauptbereich */
.main { background: var(--canvas); }
.topbar { background: rgba(255, 255, 255, 0.88); border-bottom-color: var(--line); }
.topbar-title .tt-name { font-family: var(--serif); font-weight: 500; font-size: 18px; letter-spacing: -0.005em; color: var(--ink); }
.topbar-title .tt-kind { color: var(--ink-4); font-size: 12px; font-weight: 500; }
.model-btn { background: var(--surface); border-color: var(--line); color: var(--ink-2); font-size: 12.5px; font-weight: 500; }
.model-btn:hover { border-color: var(--line-2); color: var(--ink); }
.model-btn .sq { background: var(--terra); border-radius: 50%; width: 7px; height: 7px; }

/* Gesprächsverlauf: Antworten wie ein Schriftsatz */
.msg + .msg { border-top-color: var(--line); }
.msg.user .msg-sq { background: var(--ink-2); }
.msg.bot .msg-sq { background: var(--terra); }
.msg.bot .msg-role { color: var(--ink-2); }
.msg.bot .msg-body { font-family: var(--serif); font-size: 17px; line-height: 1.6; color: #1a1f29; }
.msg.user .msg-body { font-size: 15px; line-height: 1.55; }
.md h1, .md h2, .md h3, .md h4 { font-family: var(--serif); font-weight: 500; letter-spacing: -0.005em; color: var(--ink); }
.md h1 { font-size: 25px; } .md h2 { font-size: 21px; } .md h3 { font-size: 18px; }
.md a { color: var(--terra); text-underline-offset: 2px; }
.md blockquote { border-left-color: var(--terra-line); color: var(--ink-2); font-style: italic; }
.md table { font-family: var(--sans); font-size: 13.5px; display: block; overflow-x: auto; }
/* indie.css bricht Antworten überall um; in Tabellen zerreißt das Daten wie 19.11.2026 */
.md th, .md td { overflow-wrap: normal; }
.md th { background: var(--surface-2); font-weight: 600; }
.md th, .md td { border-color: var(--line); }
.md code { background: #f0f2f5; border-color: var(--line); }
.md strong { font-weight: 600; }

/* Startseite ohne allgemeine Beispiel-Prompts: der Einstieg sind Apps und Agenten */
.empty-mark { width: 48px; height: 48px; margin-bottom: 28px; }
.empty h1 { font-family: var(--serif); font-weight: 400; font-size: 46px; line-height: 1.06; letter-spacing: -0.018em; color: var(--ink); margin-bottom: 14px; }
.empty .sub { font-size: 0; margin-bottom: 34px; max-width: 34rem; }
.empty .sub::before {
  content: "Mandate, Akten, Fristen und beA an einem Ort. Die Berufspflichten sind im System verankert: Die KI bereitet vor, Anwältinnen und Anwälte entscheiden.";
  font-family: var(--serif); font-size: 19px; line-height: 1.5; color: var(--ink-2);
}
.empty .prompts { display: none; }
.empty .eyebrow { font-size: 0; border-top: 1px solid var(--line); padding-top: 20px; margin-bottom: 12px; }
.empty .eyebrow::before { content: "Einstieg"; font-size: 12px; font-weight: 500; color: var(--ink-3); }
.empty::after {
  content: "CRM  ·  Mandanten, Mandatsanfragen und Kollisionsprüfung \A Mandantenakten  ·  Akten, Fristenbuch und Dokumente \A beA-Postfach  ·  Eingang, eEB, Fristvorschläge und Versand \A \A Agenten: Kanzlei-Assistenz, Fristenwächter und Recherche (EU-Recht live über headlesslaw).";
  white-space: pre-line; display: block; max-width: 36rem;
  font-size: 14.5px; line-height: 1.85; color: var(--ink-2);
}

@media (max-width: 760px) {
  .empty h1 { font-size: 34px; }
  .empty .sub::before { font-size: 17px; }
  .empty-mark { margin-bottom: 20px; }
}

/* Eingabe */
.composer { border-color: var(--line-2); border-radius: 10px; box-shadow: 0 1px 2px rgba(20, 25, 34, 0.04), 0 12px 32px -20px rgba(20, 25, 34, 0.28); }
.composer.focus { border-color: var(--ink-4); }
.send { background: var(--ink); border-radius: 7px; }
.send:hover:not(:disabled) { background: #2a313c; }
.send:disabled { background: var(--surface-3); color: var(--ink-4); }
.tool-toggle { border-color: var(--line); color: var(--ink-3); }
.tool-toggle.on { border-color: var(--terra-line); background: var(--terra-wash); color: var(--terra-ink); }
/* Hauptaktionen in Tinte; der Akzent bleibt Markierungen und Verweisen vorbehalten */
.act-btn.primary, .btn.primary { background: var(--ink); border-color: var(--ink); color: #fff; }
.act-btn.primary:hover, .btn.primary:hover { background: #2a313c; border-color: #2a313c; }

/* App-Arbeitsfläche */
.appws-frame { background: var(--canvas); }
.appws-chat { border-left-color: var(--line); background: var(--surface); }
/* Neben einer App ist der Chat schmal: Antworten etwas kleiner, Tabellen kompakt */
.appws-chat .msg.bot .msg-body { font-size: 15.5px; line-height: 1.58; }
.appws-chat .md table { font-size: 12.5px; }
.appws-chat .md h3 { font-size: 17px; }

/* ---------------------------------------------------------------- Anmeldung */
.auth-screen { background: linear-gradient(180deg, #ffffff 0%, var(--canvas) 55%, #eceff3 100%); }
.auth-card { border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 1px 2px rgba(20, 25, 34, 0.04), 0 24px 60px -32px rgba(20, 25, 34, 0.35); }
.auth-brand .brand-name, .auth-card .brand-name { color: var(--ink); }
.auth-card .brand-tag { color: var(--ink-3); }
.auth-tab.on { background: var(--ink); color: #fff; }
.auth-submit { font-size: 13.5px; font-weight: 500; border-radius: 7px; }
.auth-screen::after {
  content: "Demo-Kanzlei mit erfundenen Mandaten · Fristen, eEB und Versand bleiben in Menschenhand";
  position: fixed; left: 0; right: 0; bottom: 24px; text-align: center;
  font-family: var(--sans); font-size: 12.5px; color: var(--ink-3);
}