/* Postfach – Stil 1:1 aus der freigegebenen Demo (Main/Einrichten/Push). Keine Inline-Styles (CSP: style-src 'self'). */

@font-face { font-family: "Inter"; font-weight: 400; font-style: normal; font-display: swap; src: url("/fonts/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 500; font-style: normal; font-display: swap; src: url("/fonts/inter-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 600; font-style: normal; font-display: swap; src: url("/fonts/inter-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 700; font-style: normal; font-display: swap; src: url("/fonts/inter-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Questrial"; font-weight: 400; font-style: normal; font-display: swap; src: url("/fonts/questrial-latin-400-normal.woff2") format("woff2"); }

:root {
  --bg: #F7F7F7;
  --card: #FFFFFF;
  --line: #EAEAEA;
  --line-strong: #E2E3E7;
  --text: #1C2024;
  --muted: #60646C;
  --brand: #283A97;
  --accent: #2781F6;
  --link: #1F6FD8;
  --link-dark: #1F5FBF;
  --danger: #B4232C;
  --wartet-bg: #FEEBEC; --wartet-fg: #B4232C;
  --arbeitet-bg: #E6F0FE; --arbeitet-fg: #1F5FBF;
  --fertig-bg: #E0F8F3; --fertig-fg: #0B7A6C;
  --ask-line: #F5D090; --ask-bg: #FFF7E8; --ask-fg: #4F3422;
  --bubble-in: #E8E8EC;
  --bubble-out: #DAECFF;
  --neutral-bg: #F0F0F3;
  --font: Inter, -apple-system, system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 14px;
  -webkit-text-size-adjust: 100%;
  overscroll-behavior-y: contain;
}
button, input { font-family: inherit; }
button { cursor: pointer; }
a { color: var(--link-dark); }
a:hover { color: var(--text); }
h1, h2, p { margin: 0; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ico { display: inline-flex; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

#app { width: 100%; max-width: 560px; height: 100vh; height: 100dvh; margin: 0 auto; display: flex; flex-direction: column; overflow: hidden; background: var(--bg); }
.screen { display: flex; flex-direction: column; flex: 1; min-height: 0; }

/* Markenzeile + Titel */
.brand { font-family: Questrial, Inter, sans-serif; font-size: 15px; letter-spacing: -0.01em; color: var(--brand); }
.title-xl { font-size: 28px; line-height: 36px; font-weight: 600; letter-spacing: -0.03em; }
.title-l { font-size: 24px; line-height: 32px; font-weight: 600; letter-spacing: -0.03em; }
.muted { color: var(--muted); }

/* Liste */
.list-head { padding: 24px 20px 14px 20px; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.list-head .titles { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.list-head .summary { font-size: 14px; color: var(--muted); }
.pill-push { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 999px; background: var(--fertig-bg); color: var(--fertig-fg); font-size: 13px; font-weight: 500; text-decoration: none; flex-shrink: 0; }
.pill-push::after { content: ""; position: absolute; inset: -6px -4px; }
.pill-push:hover { color: var(--fertig-fg); }
.pill-push.off { background: var(--neutral-bg); color: var(--muted); }
.pill-push.off:hover { color: var(--muted); }

.tabs { display: flex; gap: 8px; padding: 0 20px 12px 20px; }
.tab { min-height: 44px; padding: 0 16px; border-radius: 999px; font-size: 14px; font-weight: 500; border: 1px solid var(--line-strong); background: var(--card); color: var(--muted); }
.tab[aria-selected="true"] { border-color: var(--text); background: var(--text); color: #FFFFFF; }

.cards { flex: 1; overflow-y: auto; padding: 0 16px 24px 16px; display: flex; flex-direction: column; gap: 8px; }
.cards > * { flex-shrink: 0; }
.session { text-align: left; width: 100%; border: 1px solid var(--line); background: var(--card); border-radius: 12px; padding: 12px 14px; display: flex; gap: 12px; align-items: flex-start; color: var(--text); text-decoration: none; }
.session:hover { color: var(--text); }
.status-dot { width: 36px; height: 36px; border-radius: 18px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.status-wartet { background: var(--wartet-bg); color: var(--wartet-fg); }
.status-arbeitet { background: var(--arbeitet-bg); color: var(--arbeitet-fg); }
.status-fertig { background: var(--fertig-bg); color: var(--fertig-fg); }
.session .body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.session .row1 { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.session .name { font-size: 15px; line-height: 20px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.session .time { font-size: 12px; color: var(--muted); flex-shrink: 0; }
.session .sub { font-size: 13px; color: var(--muted); }
.session .preview { font-size: 14px; line-height: 20px; color: var(--text); display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.count { min-width: 22px; height: 22px; border-radius: 11px; background: var(--danger); color: #FFFFFF; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; padding: 0 6px; margin-top: 1px; }
.empty { padding: 48px 16px; text-align: center; color: var(--muted); font-size: 15px; }

/* Thread */
.thread-head { padding: 12px 12px 10px 6px; display: flex; align-items: center; gap: 4px; background: var(--card); border-bottom: 1px solid var(--line); }
.icon-btn { width: 44px; height: 44px; border: 0; background: transparent; border-radius: 22px; display: flex; align-items: center; justify-content: center; color: var(--text); text-decoration: none; flex-shrink: 0; }
.icon-btn:hover { color: var(--text); }
.thread-head .titles { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.thread-head .head-action { color: var(--muted); }
.thread-head .name { font-size: 17px; line-height: 22px; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.thread-head .sub { font-size: 13px; color: var(--muted); }

.chat { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.chat > * { flex-shrink: 0; }
.msg-in { align-self: flex-start; max-width: 86%; display: flex; flex-direction: column; gap: 4px; }
.bubble { border-radius: 12px; padding: 10px 12px; font-size: 14px; line-height: 20px; color: var(--text); overflow-wrap: anywhere; white-space: pre-wrap; }
.msg-in .bubble { background: var(--bubble-in); }
.msg-in .time { font-size: 12px; color: var(--muted); padding-left: 4px; }
.msg-out { align-self: flex-end; max-width: 80%; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.msg-out .bubble { background: var(--bubble-out); }
.msg-out.pending { opacity: .6; }
.msg-out .time { font-size: 12px; color: var(--muted); padding-right: 4px; }

.ask { align-self: stretch; background: var(--card); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; border: 1px solid var(--line); }
.ask.open { border-color: var(--ask-line); }
.ask .top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.chip { height: 24px; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 600; display: flex; align-items: center; }
.chip-ask { background: var(--ask-bg); color: var(--ask-fg); }
.chip-done { background: var(--fertig-bg); color: var(--fertig-fg); }
.chip-closed { background: var(--neutral-bg); color: var(--muted); }
.ask .time { font-size: 12px; color: var(--muted); }
.ask .q { font-size: 15px; line-height: 22px; font-weight: 600; overflow-wrap: anywhere; white-space: pre-wrap; }
.ask .detail { font-size: 14px; line-height: 20px; color: var(--muted); overflow-wrap: anywhere; white-space: pre-wrap; }
.ask.closed .q { color: var(--muted); }
.options { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.option { min-height: 44px; border: 1px solid var(--line-strong); background: var(--card); color: var(--text); border-radius: 999px; font-size: 14px; font-weight: 500; padding: 0 16px; }
.option:disabled { opacity: .5; cursor: default; }
.older { align-self: center; min-height: 44px; border: 0; background: transparent; color: var(--link); font-size: 14px; font-weight: 600; padding: 0 12px; }

.composer { background: var(--card); border-top: 1px solid var(--line); padding: 10px 12px calc(14px + env(safe-area-inset-bottom)) 12px; display: flex; flex-direction: column; gap: 6px; }
.hint { min-height: 28px; display: flex; align-items: center; gap: 4px; padding-left: 4px; font-size: 12px; color: var(--muted); min-width: 0; }
.hint .label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.hint .chip-reply { display: flex; align-items: center; gap: 2px; max-width: 100%; min-width: 0; height: 28px; padding: 0 2px 0 10px; border-radius: 999px; background: var(--bubble-out); color: var(--text); }
.hint .chip-reply .label { color: var(--text); }
.hint .chip-x { position: relative; width: 28px; height: 28px; border: 0; background: transparent; border-radius: 14px; color: var(--muted); display: flex; align-items: center; justify-content: center; flex-shrink: 0; padding: 0; }
.hint .chip-x::after { content: ""; position: absolute; inset: -8px; }
.text-btn { min-height: 28px; border: 0; background: transparent; color: var(--link); font-size: 12px; font-weight: 600; padding: 0 6px; position: relative; flex-shrink: 0; }
.text-btn::after { content: ""; position: absolute; inset: -8px 0; }
.compose-row { display: flex; gap: 8px; align-items: center; }
.compose-row input { flex: 1; min-width: 0; min-height: 44px; border: 1px solid var(--line-strong); border-radius: 12px; padding: 0 14px; font-size: 16px; background: var(--bg); color: var(--text); }
.send { width: 44px; height: 44px; flex-shrink: 0; border: 0; border-radius: 12px; background: var(--accent); color: #FFFFFF; display: flex; align-items: center; justify-content: center; }
.send:disabled { opacity: .5; cursor: default; }

/* Einrichten */
.setup { flex: 1; overflow-y: auto; padding: 48px 16px calc(32px + env(safe-area-inset-bottom)) 16px; display: flex; flex-direction: column; gap: 24px; position: relative; }
.setup > * { flex-shrink: 0; }
.setup .back { position: absolute; top: 4px; left: 4px; }
.hero { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.app-icon { width: 72px; height: 72px; border-radius: 17px; background: var(--brand); color: #FFFFFF; display: flex; align-items: center; justify-content: center; }
.hero .sub { font-size: 14px; color: var(--muted); }
.steps { display: flex; flex-direction: column; gap: 8px; }
.step { background: var(--card); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 12px; border: 1px solid var(--line); }
.step.active { border: 1.5px solid var(--accent); padding: 13.5px; }
.step .head { display: flex; align-items: center; gap: 12px; }
.step .num { width: 36px; height: 36px; border-radius: 18px; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; flex-shrink: 0; background: var(--neutral-bg); color: var(--muted); }
.step.active .num { background: var(--arbeitet-bg); color: var(--arbeitet-fg); }
.step.done .num { background: var(--fertig-bg); color: var(--fertig-fg); }
.step .step-title { font-size: 15px; font-weight: 600; }
.step .note { font-size: 14px; line-height: 20px; color: var(--muted); }
.step .note.warn { color: var(--wartet-fg); }
.btn-primary { min-height: 44px; border: 0; background: var(--link); color: #FFFFFF; border-radius: 12px; font-size: 15px; font-weight: 600; padding: 0 16px; }
.btn-primary:disabled { opacity: .5; cursor: default; }
.btn-secondary { min-height: 44px; border: 1px solid var(--line-strong); background: var(--card); color: var(--text); border-radius: 12px; font-size: 15px; font-weight: 500; padding: 0 16px; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.btn-secondary:hover { color: var(--text); }
.btn-secondary:disabled { opacity: .5; cursor: default; }
.ios-hint { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 14px; line-height: 20px; color: var(--muted); }
.tag { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 10px; border-radius: 999px; background: var(--bg); border: 1px solid var(--line); color: var(--text); font-size: 13px; font-weight: 500; }
.ready { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.status-pill { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 6px 12px; border-radius: 999px; background: var(--fertig-bg); color: var(--fertig-fg); font-size: 14px; font-weight: 600; }
.status-pill.pending { background: var(--arbeitet-bg); color: var(--arbeitet-fg); }
.status-pill.error { background: var(--wartet-bg); color: var(--wartet-fg); }
.link-strong { min-height: 44px; display: inline-flex; align-items: center; font-size: 15px; font-weight: 600; }

.panel { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 14px; }
.panel h2 { font-size: 15px; font-weight: 600; }
.panel .lead { font-size: 14px; line-height: 20px; color: var(--muted); margin-top: -8px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field .label { font-size: 13px; font-weight: 500; color: var(--muted); }
.seg { display: flex; flex-wrap: wrap; gap: 8px; }
.seg button { min-height: 44px; padding: 0 16px; border-radius: 999px; font-size: 14px; font-weight: 500; border: 1px solid var(--line-strong); background: var(--card); color: var(--muted); }
.seg button[aria-checked="true"] { border-color: var(--text); background: var(--text); color: #FFFFFF; }
.field .help { font-size: 13px; line-height: 18px; color: var(--muted); }
.switch-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; }
.switch-row .t { font-size: 14px; font-weight: 500; }
.switch { position: relative; width: 48px; height: 28px; border-radius: 14px; border: 0; background: var(--line-strong); flex-shrink: 0; padding: 0; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 11px; background: #FFFFFF; transition: transform .15s; }
.switch[aria-checked="true"] { background: var(--accent); }
.switch[aria-checked="true"]::after { transform: translateX(20px); }
.switch::before { content: ""; position: absolute; inset: -8px -2px; }
.machine { display: flex; flex-direction: column; gap: 8px; padding-top: 12px; border-top: 1px solid var(--line); }
.machine:first-of-type { border-top: 0; padding-top: 0; }
.machine .m-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.machine .m-name { font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.machine .m-sub { font-size: 13px; color: var(--muted); }
.code-row { display: flex; gap: 8px; }
.code-row input { flex: 1; min-width: 0; min-height: 44px; border: 1px solid var(--line-strong); border-radius: 12px; padding: 0 14px; font-size: 16px; letter-spacing: .2em; background: var(--bg); color: var(--text); }
.danger-btn { min-height: 44px; border: 0; background: transparent; color: var(--danger); font-size: 14px; font-weight: 600; padding: 0 8px; }
.footer-line { text-align: center; font-size: 13px; color: var(--muted); }
.footer-line button { min-height: 44px; border: 0; background: transparent; color: var(--link); font-size: 13px; font-weight: 600; padding: 0 8px; }
.machine .m-warn { font-size: 13px; line-height: 18px; color: var(--ask-fg); background: var(--ask-bg); border: 1px solid var(--ask-line); border-radius: 10px; padding: 8px 10px; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .92em; }
.abo.mine .m-sub { color: var(--arbeitet-fg); }
.legal { display: flex; justify-content: center; gap: 4px; font-size: 13px; }
.legal a { min-height: 44px; display: inline-flex; align-items: center; padding: 0 8px; color: var(--muted); text-decoration: none; }
.legal a:hover { color: var(--text); text-decoration: underline; }

/* Bestätigung */
.dialog { border: 0; border-radius: 16px; padding: 0; width: min(92vw, 400px); background: var(--card); color: var(--text); box-shadow: 0 12px 40px rgba(28, 32, 36, .18); }
.dialog::backdrop { background: rgba(28, 32, 36, .4); }
.dlg-body { padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.dlg-title { margin: 0; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.dlg-text { margin: 0; font-size: 14px; line-height: 20px; color: var(--muted); overflow-wrap: anywhere; }
.dlg-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
.btn-danger { min-height: 44px; border: 0; background: var(--danger); color: #FFFFFF; border-radius: 12px; font-size: 15px; font-weight: 600; padding: 0 16px; }

/* Offline / Fehler */
.center-note { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 24px; text-align: center; }
.center-note .big { font-size: 17px; font-weight: 600; }

/* Hinweis */
.toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); transform: translateX(-50%); max-width: min(92vw, 520px); background: var(--text); color: #FFFFFF; font-size: 14px; line-height: 20px; padding: 10px 16px; border-radius: 12px; z-index: 10; text-align: center; }

@media (prefers-reduced-motion: reduce) { .switch::after { transition: none; } }