/* Dot — App-Styles auf Basis des SODEFA Design Systems (tokens.css + base.css).
   Regeln: nur var(--…)-Farben, keine eigenen Schriften, Radien und Höhen aus den Tokens. Siehe docs/design-system.md. */
html,body{height:100%}
body{font-size:var(--text-sm);line-height:var(--text-sm-lh)}
[hidden]{display:none!important}
button,a,input,textarea,summary{-webkit-tap-highlight-color:transparent}
button:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Icons: Lucide-Sprite /icons.svg, Outline mit runden Enden */
.icon{width:16px;height:16px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.icon-nav{width:18px;height:18px;stroke-width:1.8}
.icon-thin{stroke-width:1.8}
.icon-tile{display:grid;place-items:center;flex-shrink:0;width:32px;height:32px;border-radius:var(--radius-10);background:var(--brand-tint);color:var(--brand)}
.icon-tile.warn{background:var(--warn-tint);color:var(--warn)}
.icon-btn{display:grid;place-items:center;flex-shrink:0;width:32px;height:32px;border-radius:var(--radius-icon-btn);color:var(--ink-3);transition:background var(--duration-fast) var(--ease-standard),color var(--duration-fast) var(--ease-standard)}
.icon-btn:hover{background:var(--surface-2);color:var(--ink)}
.icon-btn.soft{width:38px;height:38px;border-radius:var(--radius-control);border:1px solid var(--border);background:var(--surface-2);color:var(--ink-2);transition:border-color var(--duration-fast) var(--ease-standard),color var(--duration-fast) var(--ease-standard)}
.icon-btn.soft:hover{border-color:var(--brand);color:var(--brand)}

/* Buttons: Varianten aus base.css, Größen wie Button.jsx */
.btn-sm{min-height:var(--button-height-sm);padding:0 var(--space-3)}
.btn-xs{min-height:28px;padding:0 var(--space-2);gap:var(--space-1-5);border-radius:var(--radius-8);font-size:var(--text-xs)}
.btn-xs .icon{width:14px;height:14px}
.full{width:100%}
button:disabled{cursor:wait}

/* Typografie */
.page-title{font:var(--type-page-title);color:var(--ink)}
.kicker{margin-bottom:var(--space-1);font-size:var(--text-sm);line-height:var(--text-sm-lh);font-weight:var(--weight-bold);color:var(--brand)}
.lead{margin-top:var(--space-3);font-size:var(--text-sm);line-height:var(--text-2xl-lh);color:var(--ink-2)}
.page-header{margin-bottom:var(--space-6)}

/* Rückmeldungen: immer Tint + Ink */
.feedback{display:flex;align-items:center;gap:var(--space-2);margin-top:var(--space-4);border-radius:var(--radius-10);padding:var(--space-3);font-size:var(--text-sm);line-height:var(--text-sm-lh);font-weight:var(--weight-semibold)}
.feedback:empty{display:none}
.feedback-danger{background:var(--danger-tint);color:var(--danger-ink)}
.banner{display:flex;align-items:flex-start;gap:var(--space-2);margin:var(--space-4) var(--main-pad-x) 0;border-radius:var(--radius-10);padding:var(--space-3);background:var(--warn-tint);color:var(--warn-ink);font-weight:var(--weight-semibold);flex-shrink:0}
.banner .icon{margin-top:2px}
.empty-state{border-radius:var(--radius-inner);border:1px dashed var(--border-strong);background:var(--surface-2);padding:var(--space-6);color:var(--ink-2)}

/* Marke: SodefaMark (drei Balken, mittlerer 60 %) */
.mark{display:grid;place-items:center;align-content:center;gap:3px;flex-shrink:0;width:34px;height:34px;border-radius:var(--radius-10);background:var(--brand);box-shadow:0 4px 12px -4px var(--brand)}
.mark i{display:block;width:15px;height:3px;border-radius:var(--radius-4);background:var(--on-brand)}
.mark i:nth-child(2){width:10px;background:color-mix(in srgb,var(--on-brand) 60%,transparent)}
.mark-lg{width:56px;height:56px;gap:5px;border-radius:var(--radius-16)}
.mark-lg i{width:25px;height:5px}
.mark-lg i:nth-child(2){width:16px}
.lockup{display:flex;align-items:center;gap:var(--space-3);padding:0 var(--space-2) var(--space-4)}
.lockup-text{line-height:1}
.lockup-text b{display:block;font-size:var(--text-base);font-weight:var(--weight-extrabold)}
.lockup-text small{display:block;margin-top:2px;font-size:var(--text-3xs);font-weight:var(--weight-bold);text-transform:uppercase;letter-spacing:var(--tracking-wide);color:var(--brand)}

/* Anmeldung: geteilter Rahmen wie SignInScreen */
.login{min-height:100dvh;background:var(--bg);padding:var(--space-6)}
.login-frame{margin:0 auto;display:grid;grid-template-columns:1.08fr .92fr;min-height:calc(100dvh - 2 * var(--space-6));max-width:1152px;overflow:hidden;border-radius:var(--radius-18);border:1px solid var(--border);background:var(--surface);box-shadow:var(--shadow)}
.login-hero{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:var(--space-8);overflow:hidden;background:var(--brand);padding:var(--space-10);color:var(--on-brand)}
.login-hero::before{content:"";position:absolute;inset:0 0 auto;height:176px;background:linear-gradient(135deg,color-mix(in srgb,var(--on-brand) 22%,transparent),transparent)}
.login-hero>*{position:relative}
.lockup-hero{padding:0}
.lockup-hero .lockup-text b{font-size:var(--text-xl);line-height:var(--text-xl-lh)}
.lockup-hero .lockup-text small{font-size:var(--text-xs);color:color-mix(in srgb,var(--on-brand) 70%,transparent)}
.hero-copy{max-width:512px}
.hero-kicker{font-size:var(--text-sm);font-weight:var(--weight-bold);text-transform:uppercase;color:color-mix(in srgb,var(--on-brand) 70%,transparent)}
.hero-copy h1{margin-top:var(--space-3);font-size:var(--text-5xl);line-height:1.25;font-weight:var(--weight-extrabold)}
.hero-lead{margin-top:var(--space-5);max-width:448px;font-size:var(--text-base);line-height:1.75rem;color:color-mix(in srgb,var(--on-brand) 78%,transparent)}
.hero-chips{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-3);font-size:var(--text-sm);color:color-mix(in srgb,var(--on-brand) 82%,transparent)}
.hero-chips span{border-radius:var(--radius-12);border:1px solid color-mix(in srgb,var(--on-brand) 18%,transparent);background:color-mix(in srgb,var(--on-brand) 10%,transparent);padding:var(--space-2) var(--space-3);font-weight:var(--weight-bold)}
.login-panel{display:flex;align-items:center;justify-content:center;padding:var(--space-10)}
.login-form{width:100%;max-width:384px}
.login-form .kicker{margin-bottom:var(--space-2)}
.login-form .sdf-label{margin-top:var(--space-7)}
.login-form .sdf-button-primary{margin-top:var(--space-5)}

/* App-Shell: 248px Sidebar + 64px Header */
.app{display:grid;grid-template-columns:var(--sidebar-width) minmax(0,1fr);height:100dvh;background:var(--bg)}
.sidebar{display:flex;flex-direction:column;min-height:0;overflow-y:auto;overflow-x:hidden;border-right:1px solid var(--border);background:var(--sidebar);padding:var(--space-4)}
.nav{display:flex;flex-direction:column;gap:var(--space-1)}
.nav-link{display:flex;width:100%;height:var(--button-height);flex-shrink:0;align-items:center;gap:var(--space-3);border-radius:var(--radius-control);padding:0 var(--space-3);font-size:var(--text-sm);line-height:var(--text-sm-lh);font-weight:var(--weight-semibold);color:var(--ink-2);text-align:left;transition:background var(--duration-fast) var(--ease-standard),color var(--duration-fast) var(--ease-standard)}
.nav-link:not([aria-current]):hover{background:var(--surface-2);color:var(--ink)}
.nav-link[aria-current]{background:var(--brand-tint);color:var(--brand-ink)}
.nav-label{min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav-badge{display:grid;place-items:center;min-width:20px;border-radius:var(--radius-full);background:var(--badge-count);padding:0 var(--space-1-5);font-size:var(--text-xs);line-height:var(--text-xs-lh);font-weight:var(--weight-bold);color:var(--surface)}
.sidebar-bottom{margin-top:auto;padding-top:var(--space-4);display:grid;gap:var(--space-3)}
.memory{display:flex;align-items:center;gap:var(--space-3);padding:0 var(--space-2)}
.memory-text{min-width:0;line-height:1.25}
.memory-text b{display:block;font-size:var(--text-13);font-weight:var(--weight-bold)}
.memory-text span{display:block;font-size:var(--text-xs);color:var(--ink-3)}
.sidebar-action{width:100%}
.user-box{display:flex;align-items:center;gap:var(--space-3);border-radius:var(--radius-12);border:1px solid var(--border);padding:var(--space-2-5)}
.avatar{display:grid;place-items:center;flex-shrink:0;width:32px;height:32px;border-radius:var(--radius-full);background:var(--brand);color:var(--on-brand);font-size:var(--text-xs);font-weight:var(--weight-bold)}
.user-text{min-width:0;flex:1;line-height:1.25}
.user-text b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--text-sm);font-weight:var(--weight-bold)}
.user-text small{display:block;font-size:var(--text-xs);color:var(--ink-3)}
.main{display:flex;flex-direction:column;min-width:0;min-height:0}
.topbar{display:flex;align-items:center;gap:var(--space-4);flex-shrink:0;height:var(--header-height);border-bottom:1px solid var(--border);background:var(--surface);padding:0 var(--main-pad-x)}
.topbar-title{min-width:0;flex:1}
.topbar-title p:first-child{font-size:var(--text-sm);line-height:var(--text-sm-lh);font-weight:var(--weight-extrabold)}
.topbar-sub{font-size:var(--text-xs);line-height:var(--text-xs-lh);color:var(--ink-3)}
.topbar-actions{display:flex;align-items:center;gap:var(--space-3)}
.status-chip{display:inline-flex;align-items:center;gap:var(--space-2);border-radius:var(--radius-control);border:1px solid var(--border);background:var(--surface-2);padding:var(--space-2) var(--space-3);font-size:var(--text-xs);line-height:var(--text-xs-lh);font-weight:var(--weight-bold);color:var(--ink-2)}
.status-dot{flex-shrink:0;width:8px;height:8px;border-radius:var(--radius-full);background:var(--ok)}
.status-dot.busy{background:var(--warn);animation:breathe 1.8s ease-in-out infinite}
.status-dot.offline{background:var(--danger)}
@keyframes breathe{50%{opacity:.4}}

/* Gespräch */
.chat{flex:1;min-height:0;display:flex;flex-direction:column}
.messages{flex:1;overflow:auto;padding:var(--main-pad-y) max(var(--main-pad-x),calc((100% - 780px) / 2))}
.welcome{padding:64px 0;display:flex;flex-direction:column;align-items:center;text-align:center}
.welcome .page-title{margin-top:var(--space-6)}
.message{margin:0 0 var(--space-6);max-width:100%}
.message .byline{margin-bottom:var(--space-2);font-size:var(--text-xs);line-height:var(--text-xs-lh);font-weight:var(--weight-bold);color:var(--ink-3)}
.message .message-body{white-space:pre-wrap;overflow-wrap:anywhere;font-size:var(--text-15);line-height:1.7}
.message.user{margin-left:12%;border-radius:var(--radius-14);background:var(--brand-tint);padding:var(--space-4) var(--space-5)}
.message.user .byline{color:var(--brand-ink)}
.message.assistant{padding:0 var(--space-1)}
.message.system{border-radius:var(--radius-10);border:1px solid var(--border);background:var(--surface-2);padding:var(--space-3);color:var(--ink-2)}
.message.system .message-body{font-size:var(--text-13);line-height:var(--text-sm-lh)}
.older{display:flex;margin:0 auto var(--space-6)}
.approvals{flex-shrink:0;max-height:260px;overflow:auto;padding:0 max(var(--main-pad-x),calc((100% - 780px) / 2))}
.approval{margin-top:var(--space-3);padding:var(--space-4)}
.approval-head{display:flex;align-items:center;gap:var(--space-3);font:var(--type-section-title)}
.approval pre{margin:var(--space-3) 0;border-radius:var(--radius-10);border:1px solid var(--border);background:var(--surface-2);padding:var(--space-3);font-family:var(--font-mono);font-size:var(--text-xs);line-height:var(--text-xs-lh);white-space:pre-wrap;overflow-wrap:anywhere}
.approval-actions{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.composer-wrap{flex-shrink:0;padding:var(--space-3) max(var(--main-pad-x),calc((100% - 780px) / 2)) max(var(--space-3),env(safe-area-inset-bottom))}
.composer{border-radius:var(--radius-card);border:1px solid var(--border-strong);background:var(--surface);box-shadow:var(--shadow);padding:var(--space-3) var(--space-3) var(--space-3) var(--space-4);transition:border-color var(--duration-fast) var(--ease-standard),box-shadow var(--duration-fast) var(--ease-standard)}
.composer:focus-within{border-color:var(--brand);box-shadow:var(--focus-ring),var(--shadow)}
.composer textarea{display:block;width:100%;min-height:46px;max-height:180px;resize:none;outline:0;padding:var(--space-1) 0;font-size:var(--text-15);line-height:1.6}
.composer textarea::placeholder{color:var(--ink-3)}
.composer-bottom{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2-5);font-size:var(--text-xs);color:var(--ink-3)}
.composer-actions{display:flex;align-items:center;gap:var(--space-2)}
.send{width:var(--button-height-sm);min-height:var(--button-height-sm);padding:0}
.composer-hint{margin-top:var(--space-2);text-align:center;font-size:var(--text-xs);color:var(--ink-3)}

/* Aufträge */
.tasks{flex:1;overflow:auto;padding:var(--main-pad-y) max(var(--main-pad-x),calc((100% - 780px) / 2))}
.schedule-card summary{display:flex;align-items:center;gap:var(--space-3);cursor:pointer;padding:var(--space-4) var(--card-pad);font:var(--type-section-title)}
.summary-label{flex:1}
.schedule-card .sdf-chevron{color:var(--ink-3)}
.schedule-form{border-top:1px solid var(--border);padding:var(--space-1) var(--card-pad) var(--card-pad)}
.schedule-form .sdf-label{margin-top:var(--space-4)}
.schedule-form .sdf-button-primary{margin-top:var(--space-5)}
.job-card{margin-top:var(--space-6);overflow:hidden}
.card-head{border-bottom:1px solid var(--border);padding:var(--space-4) var(--card-pad);font:var(--type-section-title)}
.job-list>.empty-state{margin:var(--card-pad)}
.job{padding:var(--space-4) var(--card-pad)}
.job+.job{border-top:1px solid var(--border)}
.job-meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3);font-size:var(--text-xs);line-height:var(--text-xs-lh);color:var(--ink-3)}
.job-prompt{margin-top:var(--space-2);white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.6}
.job .feedback{margin-top:var(--space-3)}
.job .sdf-button-danger{margin-top:var(--space-3)}
.pill-neutral{background:var(--surface-2);color:var(--ink-2)}
.pill-brand{background:var(--brand-tint);color:var(--brand-ink)}
.pill-warn{background:var(--warn-tint);color:var(--warn-ink)}
.pill-ok{background:var(--ok-tint);color:var(--ok-ink)}
.pill-danger{background:var(--danger-tint);color:var(--danger-ink)}
.pill-info{background:var(--info-tint);color:var(--info-ink)}

@media(max-width:960px){
  .login-frame{grid-template-columns:1fr}
  .login-hero{gap:var(--space-6);padding:var(--space-8)}
  .hero-copy h1{font-size:var(--text-4xl);line-height:var(--text-4xl-lh)}
}
@media(max-width:760px){
  .login{padding:var(--space-4)}
  .login-frame{min-height:calc(100dvh - 2 * var(--space-4))}
  .login-hero{padding:var(--space-6)}
  .hero-copy h1{font-size:var(--text-3xl);line-height:var(--text-3xl-lh)}
  .hero-lead{margin-top:var(--space-3)}
  .hero-chips{display:none}
  .login-panel{align-items:flex-start;padding:var(--space-6)}
  .app{grid-template-columns:72px minmax(0,1fr)}
  .sidebar{align-items:center;padding:var(--space-4) var(--space-3) max(var(--space-4),env(safe-area-inset-bottom))}
  .lockup{padding:0 0 var(--space-4)}
  .sidebar .lockup-text,.nav-label,.memory,.user-text,.sidebar-action span,.avatar{display:none}
  .nav-link{justify-content:center;width:48px;padding:0;position:relative}
  .nav-badge{position:absolute;top:2px;right:0;min-width:18px;font-size:var(--text-3xs)}
  .sidebar-action{width:48px;padding:0}
  .user-box{border:0;padding:0;justify-content:center}
  .topbar{padding:0 var(--space-4)}
  .topbar-sub{display:none}
  .status-chip{max-width:150px}
  .status-chip span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .banner{margin:var(--space-3) var(--space-4) 0}
  .messages,.tasks{padding:var(--space-5) var(--space-4)}
  .approvals{padding:0 var(--space-4)}
  .welcome{padding:var(--space-10) 0}
  .welcome .page-title{font-size:var(--text-2xl);line-height:var(--text-2xl-lh)}
  .message.user{margin-left:5%;padding:var(--space-3) var(--space-4)}
  .composer-wrap{padding:var(--space-2) var(--space-4) max(var(--space-2-5),env(safe-area-inset-bottom))}
  .composer-bottom>span,.composer-hint{display:none}
  .composer-bottom{justify-content:flex-end}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}