/* ============================
   KATIA Mobile — Design Tokens
   ============================ */

/* ─── Light Mode (default) ─── */
:root {
  --km-bg:        #06090f;
  --km-surface:   #0e141d;
  --km-surface2:  #151e2a;
  --km-border:    rgba(245,241,232,0.13);
  --km-text:      #f5f1e8;
  --km-muted:     #aaa49a;
  --km-placeholder: #716c66;

  --km-red:    #FF4634;
  --km-petrol: #0E4D5E;
  --km-magenta:#D4006C;
  --km-navy:   #1E3A5F;
  --km-green:  #30D158;
  --km-amber:  #FF9F0A;
  --km-blue:   #007AFF;
  --km-cyan:   #5BB8D4;

  --km-accent:     #f05f45;
  --km-accent-dim: rgba(240,95,69,0.15);

  --km-shadow:    0 1px 4px rgba(0,0,0,.10);
  --km-shadow-lg: 0 4px 20px rgba(0,0,0,.14);

  --km-font:      'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --km-font-mono: 'DM Mono', ui-monospace, monospace;

  --km-tab-h:     74px;
  /* Header-Hoehe = tatsaechlicher Inhalt: 8px pad-top + 44px Icon-Button
     + 10px pad-bottom + 1px Border (box-sizing: border-box) + Safe-Area.
     Frueher fest 120px — das reservierte die Hoehe der inzwischen
     ausgeblendeten zweiten Zeile (.km-agency-sw, s. :2000) und hinterliess
     ein leeres Band unter der Kopfzeile auf allen Tabs. */
  --km-header-h:  calc(63px + env(safe-area-inset-top));
  --km-radius:    18px;
  --km-radius-sm: 12px;
}

/* Agency accent overrides */
#katia-mobile[data-agency="kombi"] {
  --km-bg: #06090f;
  --km-surface: #0e141d;
  --km-surface2: #151e2a;
  --km-context-bg: rgba(245,241,232,0.08);
  --km-context-border: rgba(245,241,232,0.14);
  --km-accent: #f05f45;
  --km-accent-dim: rgba(240,95,69,0.15);
}
#katia-mobile[data-agency="calltoni"] {
  --km-bg: #F2F0EC;
  --km-surface: #FFFFFF;
  --km-surface2: #E8E5DF;
  --km-context-bg: #111111;
  --km-context-border: rgba(0,0,0,0.32);
  --km-accent: #111111;
  --km-accent-dim: rgba(0,0,0,0.12);
}
#katia-mobile[data-agency="tylers"] {
  --km-bg: #E6F8F7;
  --km-surface: #FFFFFF;
  --km-surface2: #D4EFED;
  --km-context-bg: #C9F1EF;
  --km-context-border: rgba(47,175,173,0.32);
  --km-accent:     #2FAFAD;
  --km-accent-dim: rgba(47,175,173,0.16);
}
#katia-mobile[data-agency="gruppe"] {
  --km-bg: #FFF0EA;
  --km-surface: #FFFFFF;
  --km-surface2: #FFE0D4;
  --km-context-bg: #FF4B2E;
  --km-context-border: rgba(255,75,46,0.34);
  --km-accent: #FF4B2E;
  --km-accent-dim: rgba(255,75,46,0.15);
}

/* Dark Mode */
#katia-mobile[data-theme="dark"] {
  --km-bg:       #1C1C1E;
  --km-surface:  #2C2C2E;
  --km-surface2: #3A3A3C;
  --km-border:   rgba(255,255,255,0.10);
  --km-text:     #FFFFFF;
  --km-muted:    #8E8E93;
  --km-placeholder: #636366;
}

#katia-mobile[data-theme="dark"][data-agency="kombi"] {
  --km-accent: #D6B25E;
  --km-accent-dim: rgba(214,178,94,0.16);
  --km-context-bg: #25221A;
  --km-context-border: rgba(214,178,94,0.34);
}

/* ─── Reset ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body, #mobile-root {
  width: 100%;
  height: 100%;
  max-width: 100vw;
  overflow: hidden;
}
img { display: block; }
button { font-family: var(--km-font); cursor: pointer; border: none; background: none; }
textarea, input { font-family: var(--km-font); font-size: 16px; }

/* ─── App Shell ─── */
#katia-mobile {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  width: min(100vw, 520px);
  max-width: 100vw;
  margin: 0 auto;
  background:
    radial-gradient(circle at 20% 0%, rgba(48,209,88,0.08), transparent 30%),
    radial-gradient(circle at 82% 4%, rgba(240,95,69,0.10), transparent 34%),
    var(--km-bg);
  color: var(--km-text);
  font-family: var(--km-font);
  font-size: 16px;
  overflow: hidden;
  position: relative;
}

/* ─── Header ─── */
.km-header {
  width: 100%;
  max-width: 100%;
  min-height: var(--km-header-h);
  height: auto;
  flex-shrink: 0;
  background: rgba(14, 20, 29, 0.92);
  border-bottom: 1px solid var(--km-border);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: calc(8px + env(safe-area-inset-top)) 12px 10px;
  gap: 8px;
  z-index: 100;
}
.km-header-top {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
}
.km-header-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* ─── Agency Switcher ─── */
.km-agency-sw {
  display: flex;
  gap: 4px;
  background: var(--km-bg);
  border: 1px solid var(--km-border);
  border-radius: 14px;
  padding: 3px;
  flex: none;
  width: 100%;
  min-width: 0;
}
.km-agency-btn {
  flex: 1;
  min-height: 44px;
  height: 44px;
  padding: 0;
  font-size: 11px;
  font-weight: 700;
  border-radius: 6px;
  background: transparent;
  color: var(--km-muted);
  transition: all 0.15s;
  white-space: nowrap;
  text-align: center;
  display: flex;
  flex-direction: row;
  justify-content: center;
  overflow: hidden;
}
.km-agency-btn.active { background: var(--km-accent); color: #fff; box-shadow: 0 0 0 2px var(--km-accent-dim); }
.km-agency-short {
  width: 100%;
  height: 100%;
  min-height: 0;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0;
}
.km-agency-logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  padding: 4px 7px;
  border-radius: 0;
  background: rgba(255,255,255,0.92);
}
.km-agency-logo.calltoni {
  object-fit: contain;
  padding: 5px 8px;
  background: #fff;
}
.km-agency-logo.gruppe {
  width: 100%;
  height: 100%;
  padding: 5px 8px;
  border-radius: 0;
}
.km-agency-logo.tylers {
  object-fit: contain;
  padding: 5px 8px;
  background: #fff;
}
.km-agency-logo-fallback {
  width: 100%;
  height: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: var(--km-surface);
  color: var(--km-accent);
  font-size: 12px;
  font-weight: 950;
  line-height: 1;
}
.km-agency-logo-fallback.tylers {
  font-size: 10px;
}
#katia-mobile[data-agency="tylers"] .km-agency-btn.active .km-agency-short {
  color: #fff;
}
/* ─── Icon Buttons ─── */
.km-icon-btn {
  width: 44px; height: 44px;
  border-radius: 13px;
  border: 1px solid var(--km-border);
  background: var(--km-bg);
  color: var(--km-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.12s;
  flex-shrink: 0;
}
.km-icon-btn:hover, .km-icon-btn:active { border-color: var(--km-accent); color: var(--km-accent); }
.km-voice-header-btn.active {
  border-color: rgba(48, 209, 88, 0.62);
  background: rgba(48, 209, 88, 0.14);
  color: #24c05a;
  animation: km-voice-header-pulse 1.6s ease-in-out infinite;
}
.km-voice-header-btn[data-phase="speech"],
.km-voice-header-btn[data-phase="thinking"],
.km-voice-header-btn[data-phase="speaking"] {
  background: rgba(48, 209, 88, 0.22);
}
.km-voice-header-btn[data-phase="error"] {
  border-color: rgba(255, 179, 0, 0.72);
  background: rgba(255, 179, 0, 0.14);
  color: #ffb300;
  animation: none;
}
.km-icon-btn svg {
  width: 23px;
  height: 23px;
  display: block;
}

.km-line-glyph {
  width: 28px;
  height: 28px;
  border-radius: 10px;
  background: var(--km-accent-dim);
  color: var(--km-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.km-line-glyph svg {
  width: 18px;
  height: 18px;
  display: block;
}
.km-line-glyph path,
.km-line-glyph circle,
.km-refresh-btn path {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ─── Content ─── */
.km-content {
  width: 100%;
  max-width: 100%;
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: calc(var(--km-tab-h) + env(safe-area-inset-bottom) + 92px);
}
/* A focused agent chat hides the header + bottom nav (see agentChatOpen in
   KatiaMobileApp) — it manages its own safe-area padding, so no reserved
   space is needed here, and it must not scroll independently of its own
   internal message list. */
.km-content-full {
  padding-bottom: 0;
  overflow: hidden;
}

/* ─── Bottom Tab Bar ─── */
.km-tabs {
  width: 100%;
  max-width: 100%;
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 520px;
  height: calc(var(--km-tab-h) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: rgba(14, 20, 29, 0.92);
  border-top: 1px solid var(--km-border);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: stretch;
  z-index: 200;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.km-tab-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 0;
  min-height: 58px;
  padding: 8px 0 7px;
  background: none;
  border: none;
  color: var(--km-muted);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0;
  transition: color 0.12s;
}
.km-tab-btn.active { color: var(--km-accent); }
.km-tab-btn .tab-icon {
  width: 26px;
  height: 26px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.km-tab-btn .tab-icon svg {
  width: 25px;
  height: 25px;
  display: block;
}

/* Fullscreen artifact viewer (finished deck/one-pager) — an on-demand modal
   with a clear single open/close lifecycle, not persistent app chrome, so
   position:fixed here doesn't carry the stacking risk that broke the agent
   chat overlay earlier. */
.km-artifact-full {
  position: fixed;
  inset: 0;
  z-index: 450;
  display: flex;
  flex-direction: column;
  background: #fff;
}
.km-artifact-full-bar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: calc(10px + env(safe-area-inset-top)) 12px 10px 16px;
  background: var(--km-surface);
  border-bottom: 1px solid var(--km-border);
}
.km-artifact-full-title {
  order: 1;
  flex: 1 1 calc(100% - 56px);
  min-width: 0;
  font-size: 13px;
  font-weight: 800;
  color: var(--km-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.km-artifact-full-drive {
  order: 3;
  flex-shrink: 0;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 22px;
  border: 1px solid var(--km-accent);
  background: var(--km-accent-dim);
  color: var(--km-accent);
  font-size: 12px;
  font-weight: 850;
}
/* OS-UX review (2026-07-06): Speichern/Abbrechen were visually identical
   pills — no primary/secondary hierarchy, confusable under time pressure.
   Filled accent = the affirmative/primary action, matching desktop's
   .k-btn.primary. */
.km-artifact-full-drive.primary {
  background: var(--km-accent);
  color: #fff;
}
.km-artifact-full-close {
  order: 2;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 22px;
  border: 1px solid var(--km-border);
  background: var(--km-bg);
  color: var(--km-text);
  display: flex;
  align-items: center;
  justify-content: center;
}
.km-artifact-full-frame {
  flex: 1;
  min-height: 0;
  width: 100%;
  border: none;
  background: #fff;
  overflow: auto;
  touch-action: pan-x pan-y pinch-zoom;
}

.km-more-backdrop {
  position: fixed;
  inset: 0;
  z-index: 210;
  background: rgba(0,0,0,0.18);
}
.km-more-sheet {
  position: fixed;
  left: 50%;
  bottom: calc(var(--km-tab-h) + env(safe-area-inset-bottom) + 8px);
  transform: translateX(-50%);
  width: min(calc(100vw - 24px), 496px);
  z-index: 230;
  border: 1px solid var(--km-border);
  border-radius: 18px;
  background: var(--km-surface);
  box-shadow: 0 18px 46px rgba(0,0,0,0.26);
  padding: 8px;
  display: grid;
  gap: 6px;
}
.km-more-grabber {
  width: 36px;
  height: 4px;
  border-radius: 999px;
  background: var(--km-border);
  justify-self: center;
  margin: 2px 0 4px;
}
.km-more-title {
  padding: 2px 6px 4px;
  color: var(--km-muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.km-more-item {
  min-height: 64px;
  border-radius: 13px;
  border: 1px solid transparent;
  background: var(--km-bg);
  color: var(--km-text);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  text-align: left;
}
.km-more-item.active {
  border-color: var(--km-accent);
  background: var(--km-accent-dim);
}
.km-more-icon {
  width: 44px;
  height: 44px;
  border-radius: 13px;
  background: var(--km-surface);
  border: 1px solid var(--km-border);
  color: var(--km-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.km-more-icon svg {
  width: 24px;
  height: 24px;
}
.km-more-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.km-more-label {
  font-size: 15px;
  font-weight: 900;
}
.km-more-hint {
  color: var(--km-muted);
  font-size: 12px;
  line-height: 1.35;
}

@media (max-width: 520px) {
  .km-tabs {
    left: 0;
    right: 0;
    transform: none;
    max-width: none;
  }
}
@keyframes km-voice-header-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(48, 209, 88, 0.26); }
  50% { box-shadow: 0 0 0 6px rgba(48, 209, 88, 0); }
}
@keyframes km-diktat-pulse {
  0%, 100% { box-shadow: 0 4px 16px rgba(255,70,52,0.35); transform: scale(1); }
  50% { box-shadow: 0 4px 24px rgba(255,70,52,0.6); transform: scale(1.06); }
}

/* ─── Card ─── */
.km-card {
  background: var(--km-surface);
  border: 1px solid var(--km-border);
  border-radius: var(--km-radius);
  padding: 16px 18px;
  margin: 14px 16px 0;
  box-shadow: var(--km-shadow);
}

/* ─── Home screen (2026-07-06 rebuild) ───
   Martin: "auf einen Blick ohne Scrollen" — one screen, one dominant
   hands-free voice action, three glanceable status chips. No stacked
   headed cards, no prose briefing block. */
.km-home {
  padding: 14px 16px calc(14px + env(safe-area-inset-bottom));
  display: grid;
  gap: 12px;
}
.km-home-greeting {
  font-size: 13px;
  font-weight: 700;
  color: var(--km-muted);
}
.km-katja-composer {
  display: grid;
  gap: 10px;
  padding: 13px;
  border-radius: var(--km-radius);
  border: 1px solid rgba(255,70,52,0.24);
  background:
    linear-gradient(135deg, rgba(240,95,69,0.17), rgba(255,255,255,0.052) 48%, rgba(48,209,88,0.08)),
    rgba(8,13,21,0.84);
  box-shadow: var(--km-shadow);
}
.km-katja-composer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.km-katja-companion {
  min-width: 0;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 11px;
  align-items: center;
}
.km-katja-avatar-wrap {
  position: relative;
  width: 54px;
  height: 54px;
  border-radius: 17px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.14);
  background: #05080c;
}
.km-katja-avatar-wrap img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center top;
}
.km-katja-avatar-wrap i {
  position: absolute;
  right: 6px;
  bottom: 6px;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: 2px solid #05080c;
  background: var(--km-green);
}
.km-katja-composer-kicker {
  font-size: 9.5px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--km-accent);
}
.km-katja-composer-title {
  margin-top: 2px;
  font-size: 15px;
  font-weight: 900;
  line-height: 1.2;
  color: var(--km-text);
}
.km-katja-composer-voice {
  min-height: 34px;
  padding: 0 11px;
  border-radius: 12px;
  border: 1px solid rgba(255,70,52,0.32);
  background: rgba(255,70,52,0.12);
  color: var(--km-text);
  font-size: 12px;
  font-weight: 850;
}
.km-katja-composer-plus {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  border: 1px solid var(--km-border);
  background: rgba(255,255,255,0.06);
  color: var(--km-text);
  font-size: 20px;
  font-weight: 850;
  line-height: 1;
  flex-shrink: 0;
}
.km-katja-composer-input {
  width: 100%;
  min-height: 86px;
  max-height: 210px;
  resize: none;
  border: 1px solid var(--km-border);
  border-radius: 13px;
  background: var(--km-bg);
  color: var(--km-text);
  padding: 11px 56px 11px 12px;
  font-family: var(--km-font) !important;
  font-size: 16px;
  line-height: 1.44;
  box-sizing: border-box;
  outline: none;
  overflow-y: hidden;
}
.km-katja-composer-input.is-long {
  font-size: 14px;
  line-height: 1.5;
}
.km-katja-composer-input:focus {
  border-color: rgba(255,70,52,0.48);
}
.km-katja-composer-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.km-katja-composer-actions span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--km-muted);
  font-size: 11px;
  font-weight: 750;
}
.km-katja-composer-actions button {
  min-height: 38px;
  padding: 0 16px;
  border-radius: 12px;
  border: 1px solid var(--km-border);
  background: var(--km-surface);
  color: var(--km-text);
  font-size: 12px;
  font-weight: 850;
}
.km-katja-composer-actions button.primary {
  border-color: transparent;
  background: var(--km-accent);
  color: #fff;
}
.km-katja-composer-actions button:disabled {
  opacity: 0.42;
}
.km-voice-hero {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 92px;
  padding: 16px 18px;
  border-radius: var(--km-radius);
  border: none;
  background:
    radial-gradient(circle at 22% 20%, rgba(255,255,255,0.20), transparent 24%),
    linear-gradient(135deg, #141b25 0%, #29313d 56%, var(--km-red) 130%);
  color: #fff;
  text-align: left;
  cursor: pointer;
}
.km-live-window {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px;
  border-radius: var(--km-radius);
  border: 1px solid rgba(48,209,88,0.23);
  background:
    linear-gradient(135deg, rgba(48,209,88,0.12), rgba(255,255,255,0.04)),
    rgba(8,13,21,0.84);
}
.km-live-window span {
  display: block;
  color: var(--km-green);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.km-live-window strong {
  display: block;
  color: var(--km-text);
  font-size: 14px;
  line-height: 1.25;
}
.km-live-window button {
  min-height: 38px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1px solid rgba(48,209,88,0.34);
  background: rgba(48,209,88,0.12);
  color: var(--km-text);
  font-size: 12px;
  font-weight: 850;
  white-space: nowrap;
}
.km-agent-aurora-strip {
  margin: 12px 16px 10px;
  padding: 16px;
  border-color: rgba(48, 209, 88, 0.34);
  background:
    radial-gradient(circle at 18% 18%, rgba(48, 209, 88, 0.12), transparent 34%),
    linear-gradient(135deg, rgba(16, 28, 24, 0.96), rgba(19, 29, 42, 0.96));
}
.km-agent-aurora-strip strong {
  font-size: 18px;
  line-height: 1.16;
}
.km-agent-aurora-strip p {
  margin: 6px 0 0;
  color: var(--km-muted);
  font-size: 13px;
  line-height: 1.35;
}
.km-agent-aurora-strip button {
  min-width: 70px;
  height: 52px;
  font-size: 14px;
}
.km-voice-hero:active { opacity: 0.9; }
.km-voice-hero-orb {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(255,255,255,0.16);
  border: 1px solid rgba(255,255,255,0.28);
  display: flex;
  align-items: center;
  justify-content: center;
}
.km-voice-hero-text { display: grid; gap: 3px; min-width: 0; }
.km-voice-hero-title { font-size: 17px; font-weight: 850; line-height: 1.2; }
.km-voice-hero-sub { font-size: 12px; opacity: 0.82; line-height: 1.3; }
.km-home-alert {
  padding: 9px 12px;
  border-radius: 12px;
  background: rgba(255,70,52,0.09);
  border: 1px solid rgba(255,70,52,0.22);
  color: var(--km-red);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
}
.km-home-glance {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.km-glance-chip {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 10px 10px;
  border-radius: 14px;
  border: 1px solid var(--km-border);
  background: var(--km-surface);
  color: var(--km-text);
  text-align: left;
}
button.km-glance-chip:active { border-color: var(--km-accent); }
.km-glance-chip-label {
  font-size: 9.5px;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--km-muted);
}
.km-glance-chip-value {
  font-size: 15px;
  font-weight: 850;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.km-glance-chip-sub {
  font-size: 10.5px;
  color: var(--km-muted);
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.km-home-secondary {
  display: flex;
  justify-content: center;
}

.km-oks {
  padding: 16px 16px calc(18px + env(safe-area-inset-bottom));
  display: grid;
  gap: 12px;
}
.km-oks-hero {
  padding: 16px;
  border-radius: var(--km-radius);
  border: 1px solid rgba(48,209,88,0.22);
  background: linear-gradient(135deg, rgba(48,209,88,0.10), rgba(255,255,255,0.045));
}
.km-oks-kicker {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #30D158;
}
.km-oks-hero h1 {
  margin: 5px 0 6px;
  font-size: 22px;
  line-height: 1.12;
  color: var(--km-text);
}
.km-oks-hero p,
.km-oks-empty p {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--km-muted);
}
.km-oks-list {
  display: grid;
  gap: 10px;
}
.km-oks-empty {
  display: grid;
  gap: 7px;
  padding: 15px;
  border-radius: var(--km-radius);
  border: 1px solid var(--km-border);
  background: var(--km-surface);
}
.km-oks-empty span {
  font-size: 11px;
  font-weight: 850;
  color: var(--km-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.km-oks-empty strong {
  font-size: 15px;
  line-height: 1.25;
  color: var(--km-text);
}
.km-oks-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.km-oks-actions button {
  min-height: 42px;
  border-radius: 13px;
  border: 1px solid var(--km-border);
  background: var(--km-surface);
  color: var(--km-text);
  font-size: 12px;
  font-weight: 850;
}

/* ─── Live Badge ─── */
.km-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(255,70,52,0.12);
  border: 1px solid rgba(255,70,52,0.3);
  color: var(--km-red);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 2px 7px;
  border-radius: 20px;
  text-transform: uppercase;
}
.km-live-badge::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--km-red);
  animation: km-diktat-pulse 1s ease-in-out infinite;
}

.km-floating-close {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.16);
  color: rgba(255,255,255,0.66);
  font-size: 18px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.km-mini-primary {
  min-height: 44px;
  padding: 0 16px;
  border-radius: 13px;
  background: var(--km-blue);
  color: #fff;
  border: none;
  font-size: 14px;
  font-weight: 800;
  flex-shrink: 0;
}
.km-quick-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 12px 16px 4px;
}
.km-quick-action-btn {
  min-height: 46px;
  border-radius: 15px;
  border: 1px solid var(--km-border);
  background: var(--km-surface);
  color: var(--km-text);
  font-size: 15px;
  font-weight: 800;
  box-shadow: var(--km-shadow);
}
.km-quick-action-btn:disabled {
  opacity: 0.5;
}
.km-quick-action-btn:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}
.km-refresh-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--km-border);
  background: var(--km-surface);
  color: var(--km-muted);
  font-size: 17px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.km-refresh-btn.done {
  color: var(--km-green);
}
.km-link-action {
  min-height: 44px;
  padding: 10px 12px;
  border-radius: 13px;
  background: var(--km-accent-dim);
  border: 1px solid transparent;
  color: var(--km-accent);
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
  flex-shrink: 0;
}

.km-location-glyph {
  width: 28px;
  height: 28px;
  border-radius: 10px;
  background: rgba(10,132,255,0.12);
  color: var(--km-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.km-location-glyph svg {
  width: 18px;
  height: 18px;
  display: block;
}
.km-location-glyph path,
.km-location-glyph circle {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ─── Agent Row ─── */
.km-agent-row {
  width: 100%;
  min-height: 86px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 0;
  border-bottom: 1px solid var(--km-border);
  background: var(--km-surface);
  color: var(--km-text);
  text-align: left;
  cursor: pointer;
  transition: background 0.12s;
  position: relative;
  box-sizing: border-box;
  overflow: hidden;
}
.km-agent-row:active { background: var(--km-bg); }
.km-agent-row > div:last-child {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.km-agent-row > div:last-child > div:first-child {
  min-width: 0;
}
.km-agent-photo {
  width: 54px; height: 54px;
  border-radius: 18px;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--km-accent-dim);
}
.km-agent-photo.katia-self {
  width: 60px; height: 60px;
  border: 2px solid var(--km-red);
}
.km-agent-name {
  font-weight: 750;
  font-size: 16px;
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.km-agent-name.katia-self { color: var(--km-red); font-size: 17px; }
.km-agent-role {
  font-size: 13px;
  line-height: 1.25;
  color: var(--km-muted);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.km-agent-status-dot {
  position: absolute;
  right: 16px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--km-border);
}
.km-agent-status-dot.online { background: var(--km-green); box-shadow: 0 0 4px var(--km-green); }
.km-agent-status-dot.busy   { background: var(--km-amber); }

/* ─── Todo ─── */
.km-todo-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 0;
  border-bottom: 1px solid var(--km-border);
  font-size: 15px;
}
.km-todo-item:last-child { border-bottom: none; }
.km-todo-check {
  width: 24px; height: 24px;
  border-radius: 50%;
  border: 2px solid var(--km-border);
  flex-shrink: 0;
  cursor: pointer;
  transition: all 0.12s;
}
.km-todo-check.done { background: var(--km-green); border-color: var(--km-green); }
.km-todo-text { flex: 1; line-height: 1.4; }
.km-todo-text.done { text-decoration: line-through; color: var(--km-muted); }

/* ─── Mail ─── */
.km-mail-row {
  display: flex;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--km-border);
  cursor: pointer;
}
.km-mail-row:last-child { border-bottom: none; }
.km-mail-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--km-accent-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--km-accent);
  flex-shrink: 0;
}
.km-mail-sender { font-size: 13px; font-weight: 600; }
.km-mail-subject { font-size: 12px; color: var(--km-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.km-mail-time { font-size: 10px; color: var(--km-placeholder); }

/* ─── Calendar ─── */
.km-cal-header {
  display: flex;
  gap: 4px;
  padding: 8px 16px;
  background: var(--km-surface);
  border-bottom: 1px solid var(--km-border);
}
.km-cal-view-btn {
  flex: 1;
  min-height: 44px;
  padding: 8px 0;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  border-radius: var(--km-radius-sm);
  border: 1px solid var(--km-border);
  background: var(--km-bg);
  color: var(--km-muted);
  transition: all 0.12s;
}
.km-cal-view-btn.active { background: var(--km-accent); color: #fff; border-color: var(--km-accent); }

.km-cal-event {
  margin: 8px 16px;
  padding: 14px 16px;
  border-radius: 16px;
  background: var(--km-surface);
  border-left: 3px solid var(--km-accent);
  box-shadow: var(--km-shadow);
}
.km-cal-event-time { font-size: 12px; font-weight: 800; color: var(--km-muted); margin-bottom: 3px; }
.km-cal-event-title { font-size: 15px; font-weight: 700; }
.km-cal-event-source { font-size: 12px; color: var(--km-placeholder); margin-top: 3px; }

/* ─── Finance KPI ─── */
.km-kpi-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 12px 16px;
}
.km-kpi-card {
  background: var(--km-surface);
  border: 1px solid var(--km-border);
  border-radius: var(--km-radius);
  padding: 12px;
  box-shadow: var(--km-shadow);
}
.km-kpi-label { font-size: 10px; font-weight: 700; color: var(--km-muted); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 4px; }
.km-kpi-value { font-size: 20px; font-weight: 700; font-family: var(--km-font-mono); }
.km-kpi-delta { font-size: 11px; margin-top: 2px; }
.km-kpi-delta.pos { color: var(--km-green); }
.km-kpi-delta.neg { color: var(--km-red); }
.km-kpi-delta.warn { color: var(--km-amber); }

/* ─── Person Row ─── */
.km-person-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--km-border);
  background: var(--km-surface);
}
.km-person-row:last-child { border-bottom: none; }
.km-person-name { font-size: 13px; font-weight: 600; flex: 1; }
.km-person-role { font-size: 11px; color: var(--km-muted); }
.km-person-btn {
  min-height: 44px;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 700;
  border: 1px solid var(--km-accent);
  border-radius: var(--km-radius-sm);
  color: var(--km-accent);
  background: var(--km-accent-dim);
  cursor: pointer;
}

/* ─── Chat Overlay ─── */
.km-chat-overlay {
  position: fixed;
  inset: 0;
  background: var(--km-bg);
  z-index: 400;
  display: flex;
  flex-direction: column;
}
.km-chat-header {
  padding: 12px 16px;
  padding-top: calc(12px + env(safe-area-inset-top));
  background: var(--km-surface);
  border-bottom: 1px solid var(--km-border);
  display: flex;
  align-items: center;
  gap: 10px;
}
.km-chat-back { font-size: 22px; color: var(--km-accent); cursor: pointer; background: none; border: none; }
.km-chat-messages {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.km-bubble {
  padding: 9px 12px;
  border-radius: 14px;
  font-size: 13px;
  max-width: 82%;
  line-height: 1.5;
}
.km-bubble.user { background: var(--km-accent); color: #fff; align-self: flex-end; border-bottom-right-radius: 4px; }
.km-bubble.agent { background: var(--km-surface); border: 1px solid var(--km-border); align-self: flex-start; border-bottom-left-radius: 4px; }
.km-chat-composer {
  border-top: 1px solid var(--km-border);
  background: var(--km-surface);
  padding: 8px 12px;
  padding-bottom: calc(8px + env(safe-area-inset-bottom));
  display: flex;
  align-items: flex-end;
  gap: 8px;
}
.km-chat-textarea {
  flex: 1;
  resize: none;
  border: 1px solid var(--km-border);
  border-radius: 20px;
  padding: 8px 14px;
  background: var(--km-bg);
  color: var(--km-text);
  font-size: 16px;
  outline: none;
  min-height: 38px;
  max-height: 120px;
  line-height: 1.4;
}
.km-chat-textarea:focus { border-color: var(--km-accent); }
.km-chat-send {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--km-accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
  cursor: pointer;
  border: none;
  transition: opacity 0.12s;
}
.km-chat-send:disabled { opacity: 0.4; }

/* ─── Section Title ─── */
.km-section-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--km-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 18px 16px 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ─── Buttons ─── */
.km-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  padding: 11px 18px;
  border-radius: var(--km-radius-sm);
  border: 1px solid var(--km-border);
  background: var(--km-bg);
  color: var(--km-text);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.12s;
}
.km-btn:active { opacity: 0.75; }
.km-btn.primary { background: var(--km-accent); color: #fff; border-color: var(--km-accent); }

/* ─── Session Card ─── */
.km-session-card {
  margin: 10px 16px 0;
  padding: 16px 18px;
  border-radius: 18px;
  background: var(--km-surface);
  border: 1px solid var(--km-border);
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  box-shadow: var(--km-shadow);
}

/* ─── Diktat Overlay ─── */
.km-diktat-overlay {
  position: fixed;
  bottom: calc(var(--km-tab-h) + env(safe-area-inset-bottom) + 72px);
  right: 10px;
  left: 10px;
  background: var(--km-surface);
  border: 1px solid var(--km-border);
  border-radius: var(--km-radius);
  padding: 12px;
  box-shadow: var(--km-shadow-lg);
  font-size: 13px;
  color: var(--km-text);
  z-index: 299;
  max-height: 120px;
  overflow-y: auto;
}

/* ─── Settings ─── */
.km-setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--km-border);
  background: var(--km-surface);
  font-size: 14px;
}
.km-setting-row:last-child { border-bottom: none; }
.km-setting-label { font-weight: 500; }
.km-setting-value { color: var(--km-muted); font-size: 13px; }
.km-setting-input {
  width: 100%;
  min-height: 46px;
  margin: 0;
  padding: 10px 14px;
  border: 1px solid var(--km-border);
  border-radius: var(--km-radius-sm);
  background: var(--km-bg);
  color: var(--km-text);
  font-size: 14px;
  outline: none;
  display: block;
}
.km-setting-input:focus { border-color: var(--km-accent); }

.km-push-glyph {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: var(--km-accent-dim);
  color: var(--km-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.km-push-glyph.active {
  background: rgba(48,209,88,0.14);
  color: var(--km-green);
}
.km-push-glyph.denied,
.km-push-glyph.unsupported,
.km-push-glyph.error {
  background: rgba(255,70,52,0.10);
  color: var(--km-red);
}
.km-push-glyph svg {
  width: 23px;
  height: 23px;
  display: block;
}
.km-push-glyph path {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.km-icon-touch {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--km-border);
  background: var(--km-surface);
  color: var(--km-muted);
  font-size: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.km-receipt-action {
  min-height: 112px;
  padding: 18px 12px;
  border-radius: 16px;
  background: var(--km-surface);
  border: 1px solid var(--km-border);
  color: var(--km-text);
  font-size: 14px;
  font-weight: 800;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-shadow: var(--km-shadow);
}
.km-receipt-action.primary {
  background: var(--km-red);
  border-color: var(--km-red);
  color: #fff;
}
.km-receipt-action svg,
.km-scan-glyph svg,
.km-travel-glyph svg,
.km-travel-loading svg {
  width: 30px;
  height: 30px;
  display: block;
}
.km-scan-glyph,
.km-travel-loading {
  width: 48px;
  height: 48px;
  margin: 0 auto 10px;
  border-radius: 16px;
  background: var(--km-accent-dim);
  color: var(--km-accent);
  display: flex;
  align-items: center;
  justify-content: center;
}
.km-travel-glyph {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: var(--km-accent-dim);
  color: var(--km-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* ─── Connector dot ─── */
.km-voice-ready {
  margin: 10px 12px 0;
  padding: 12px;
  border: 1px solid var(--km-border);
  border-radius: 16px;
  background: var(--km-surface);
  color: var(--km-text);
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.km-voice-ready > div {
  min-width: 0;
  flex: 1;
}
.km-voice-ready-title {
  font-size: 13px;
  font-weight: 850;
}
.km-voice-ready-copy {
  margin-top: 2px;
  color: var(--km-muted);
  font-size: 11px;
  line-height: 1.35;
}
.km-voice-action {
  min-width: 92px;
  min-height: 44px;
  border: none;
  border-radius: 12px;
  background: var(--km-red);
  color: #fff;
  font-size: 12px;
  font-weight: 850;
  flex-shrink: 0;
}
.km-voice-action:disabled,
.km-agent-voice-chip:disabled {
  opacity: 0.55;
}
.km-voice-action.recording,
.km-agent-voice-chip.recording {
  animation: km-diktat-pulse 1s ease-in-out infinite;
}
.km-agent-voice-strip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px 10px;
  background: var(--km-surface);
  flex-shrink: 0;
}
.km-agent-voice-chip {
  min-height: 38px;
  border: 1px solid var(--km-border);
  border-radius: 12px;
  padding: 0 12px;
  background: var(--km-accent-dim);
  color: var(--km-accent);
  font-size: 12px;
  font-weight: 850;
  white-space: nowrap;
}
.km-agent-voice-play {
  min-height: 38px;
  border: 1px solid rgba(255, 70, 52, 0.45);
  border-radius: 12px;
  padding: 0 10px;
  background: rgba(255, 70, 52, 0.12);
  color: var(--km-red);
  font-size: 12px;
  font-weight: 850;
  white-space: nowrap;
}
.km-agent-voice-chip.recording {
  background: var(--km-red);
  color: #fff;
  border-color: var(--km-red);
}
.km-agent-voice-status {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--km-muted);
  font-size: 11px;
}
.km-agent-chat-back {
  min-width: 94px;
  height: 44px;
  padding: 0 12px 0 8px;
  border-radius: 999px;
  border: 1px solid var(--km-border);
  background: var(--km-bg);
  color: var(--km-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 850;
}
.km-agent-chat-back svg {
  width: 20px;
  height: 20px;
  display: block;
}
.km-agent-chat-back path {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Katja hands-free voice mode — full-screen, ChatGPT-iOS-style takeover.
   Avatar + close up top, a scrolling transcript of the WHOLE exchange (both
   sides) filling the screen, and a small pulsing status dot lower down —
   not a big centered orb dominating the view. */
.km-voice-full {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  flex-direction: column;
  background: var(--km-bg);
  color: var(--km-text);
}
.km-voice-full-header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: max(14px, env(safe-area-inset-top)) 16px 10px;
}
.km-voice-auto-label {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--km-muted);
}
.km-voice-full-close {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--km-border);
  background: var(--km-surface);
  color: var(--km-text);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.km-voice-full-transcript {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 8px 16px 16px;
}
.km-voice-full-hint {
  margin: auto;
  color: var(--km-muted);
  font-size: 13px;
  text-align: center;
  max-width: 240px;
}
.km-voice-full-line {
  max-width: 88%;
  border-radius: 16px;
  padding: 10px 14px;
  font-size: 15px;
  line-height: 1.45;
}
.km-voice-full-line span {
  display: block;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 3px;
  color: var(--km-muted);
}
.km-voice-full-line-user {
  align-self: flex-end;
  background: var(--km-red, #FF4634);
  color: #fff;
  border-bottom-right-radius: 4px;
}
.km-voice-full-line-user span { color: rgba(255,255,255,0.75); }
.km-voice-full-line-katja {
  align-self: flex-start;
  background: var(--km-surface);
  border: 1px solid var(--km-border);
  border-bottom-left-radius: 4px;
}
.km-voice-full-line-katja span { color: var(--km-accent); }
.km-voice-replay {
  display: block;
  margin-top: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--km-border);
  background: var(--km-bg);
  color: var(--km-text);
  font-size: 11px;
  font-weight: 850;
}
.km-voice-full-dockzone {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 10px 16px max(22px, env(safe-area-inset-bottom));
}
.km-voice-full-status {
  font-size: 12px;
  font-weight: 700;
  color: var(--km-muted);
  text-align: center;
  min-height: 15px;
}
/* Katja's face is the indicator itself — a pulsing coloured ring around her
   photo, colour + speed communicating the phase (green=listening,
   amber=thinking, blue=speaking, red=error), same semantics as before but
   on her actual avatar instead of an abstract dot. */
.km-voice-full-face {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  padding: 3px;
  background: #30d158;
  box-shadow: 0 0 0 8px rgba(48,209,88,0.14);
  transition: background 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
}
.km-voice-full-face img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  background: var(--km-surface);
}
.km-voice-full-face[data-phase="listening"] { animation: km-voice-pulse 1.6s ease-in-out infinite; }
.km-voice-full-face[data-phase="speech"] { animation: km-voice-pulse 0.8s ease-in-out infinite; }
.km-voice-full-face[data-phase="thinking"] {
  background: #ffb300;
  box-shadow: 0 0 0 8px rgba(255,179,0,0.14);
  animation: km-voice-pulse 0.7s ease-in-out infinite;
}
.km-voice-full-face[data-phase="speaking"] {
  background: #0a84ff;
  box-shadow: 0 0 0 8px rgba(10,132,255,0.14);
  animation: km-voice-pulse 0.55s ease-in-out infinite;
}
.km-voice-full-face[data-phase="muted"] {
  background: #8e8e93;
  box-shadow: 0 0 0 8px rgba(142,142,147,0.12);
}
.km-voice-full-face[data-phase="error"] {
  background: var(--km-red, #FF4634);
  box-shadow: 0 0 0 8px rgba(255,70,52,0.14);
}
.km-voice-full-face[data-phase="loading"],
.km-voice-full-face[data-phase="off"] {
  background: var(--km-muted);
  box-shadow: 0 0 0 8px rgba(142,142,147,0.1);
}
/* Push-to-talk resting state: ready, paused, waiting for a tap — a soft
   static glow (not muted-gray like loading/off, not pulsing like an active
   phase) signals "tap me" without implying anything is happening yet. */
.km-voice-full-face[data-phase="idle"] {
  background: var(--km-petrol, #0E4D5E);
  box-shadow: 0 0 0 8px rgba(14,77,94,0.14);
}
.km-voice-full-hardreload {
  margin-top: 4px;
  padding: 8px 16px;
  border-radius: 20px;
  border: 1px solid var(--km-border);
  background: var(--km-surface);
  color: var(--km-text);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.km-voice-full-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 2px;
}
.km-voice-full-control {
  min-width: 82px;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--km-border);
  background: var(--km-surface);
  color: var(--km-text);
  font-size: 12px;
  font-weight: 850;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}
.km-voice-full-control svg { flex-shrink: 0; }
.km-voice-full-control[data-active="true"] {
  border-color: rgba(10,132,255,0.42);
  background: rgba(10,132,255,0.12);
  color: #0A84FF;
}
.km-voice-full-control.danger {
  border-color: rgba(255,70,52,0.32);
  background: rgba(255,70,52,0.10);
  color: var(--km-red);
}
.km-voice-volume {
  width: min(320px, calc(100vw - 48px));
  min-height: 44px;
  display: grid;
  grid-template-columns: auto 1fr 42px;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  padding: 8px 12px;
  border: 1px solid var(--km-border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--km-surface) 88%, transparent);
  color: var(--km-text);
  font-size: 12px;
  font-weight: 850;
}
.km-voice-volume input {
  width: 100%;
  min-height: 44px;
  accent-color: var(--km-red, #FF4634);
}
.km-voice-volume strong {
  text-align: right;
  font-size: 11px;
  color: var(--km-muted);
}
.km-voice-full[data-mode="auto"] .km-voice-full-transcript {
  display: none;
}
.km-voice-full[data-mode="auto"] .km-voice-full-dockzone {
  flex: 1;
  justify-content: center;
  gap: 24px;
  padding: 24px 22px max(34px, env(safe-area-inset-bottom));
}
.km-voice-full[data-mode="auto"] .km-voice-full-status {
  font-size: clamp(18px, 5vw, 28px);
  line-height: 1.25;
  min-height: 70px;
  max-width: 460px;
  color: var(--km-text);
}
.km-voice-full[data-mode="auto"] .km-voice-full-face {
  width: min(44vw, 176px);
  height: min(44vw, 176px);
}
.km-voice-full[data-mode="auto"] .km-voice-full-controls {
  width: 100%;
  max-width: 460px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.km-voice-full[data-mode="auto"] .km-voice-full-control {
  min-height: 78px;
  border-radius: 24px;
  font-size: 15px;
}
.km-voice-full[data-mode="auto"] .km-voice-volume {
  width: min(460px, calc(100vw - 44px));
  min-height: 56px;
  border-radius: 20px;
}

/* ChatGPT-artiger Hero-Sprachmodus (Martin 17.07.): Katjas Gesicht gross und
   zentriert, die aktuelle Wortmeldung als grosse Caption darunter, der volle
   Verlauf ausgeblendet (per Kopf-Button einblendbar). Nutzt den Platz statt
   halber Bildschirm Transkript + kleines Gesicht unten. */
.km-voice-full[data-view="hero"] .km-voice-full-transcript {
  display: none;
}
.km-voice-full[data-view="hero"] .km-voice-full-dockzone {
  flex: 1;
  justify-content: center;
  gap: 22px;
  padding: 20px 22px max(30px, env(safe-area-inset-bottom));
}
.km-voice-full[data-view="hero"] .km-voice-full-face {
  width: 168px;
  height: 168px;
}
.km-voice-full[data-view="hero"] .km-voice-full-status {
  font-size: clamp(17px, 4.6vw, 24px);
  line-height: 1.3;
  max-width: 460px;
  text-align: center;
}
@keyframes km-voice-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

.km-conn-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.km-conn-dot.connected { background: var(--km-green); box-shadow: 0 0 4px var(--km-green); }
.km-conn-dot.disconnected { background: var(--km-border); }
.km-conn-dot.error { background: var(--km-red); }

/* ─── Scrollbar ─── */
::-webkit-scrollbar { width: 3px; }
::-webkit-scrollbar-thumb { background: var(--km-border); border-radius: 4px; }

/* ─── Transitions ─── */
.km-fade { animation: kmFadeIn 0.18s ease; }

/* ─── App Lock ─── */
.km-applock {
  position: absolute;
  inset: 0;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 100%;
  padding: max(18px, env(safe-area-inset-top)) 16px max(18px, env(safe-area-inset-bottom));
  background: var(--km-bg);
  box-sizing: border-box;
  overflow: hidden;
}
.km-applock-card {
  width: min(100%, 340px);
  max-width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 28px 24px;
  border-radius: var(--km-radius);
  background: var(--km-surface);
  border: 1px solid var(--km-border);
  box-shadow: var(--km-shadow-lg);
  text-align: center;
}
.km-applock-title { font-size: 18px; font-weight: 800; color: var(--km-text); }
.km-applock-copy { font-size: 13px; line-height: 1.5; color: var(--km-text); }
.km-applock-error { font-size: 12px; font-weight: 700; color: var(--km-text); }
.km-applock-pin-input {
  width: 100%;
  padding: 12px 14px;
  border-radius: var(--km-radius-sm);
  border: 1px solid var(--km-border);
  background: var(--km-surface2);
  color: var(--km-text);
  font-size: 16px;
  letter-spacing: 0.18em;
  text-align: center;
  box-sizing: border-box;
}
.km-applock-btn {
  min-height: 44px;
  padding: 13px 16px;
  border-radius: 999px;
  border: none;
  background: var(--km-red);
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}
.km-applock-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.km-applock-link {
  min-height: 44px;
  background: none;
  border: none;
  color: var(--km-text);
  font-size: 12px;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
  padding: 10px 12px;
}
@keyframes kmFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Executive OS mobile final pass: no brand tabs as primary nav, no old card wall. */
.km-agency-sw {
  display: none !important;
}

.km-home-os {
  min-height: calc(100dvh - var(--km-header-h) - var(--km-tab-h));
  grid-template-rows: auto auto auto minmax(148px, 1fr) auto;
  gap: 12px;
}

.km-home-modebar {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.km-home-modebar button,
.km-home-status-row button {
  min-width: 0;
  min-height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.045);
  color: var(--km-text);
  font-size: 12px;
  font-weight: 850;
}

.km-katja-composer {
  border-color: rgba(255, 255, 255, 0.11);
  border-radius: 22px;
  background:
    radial-gradient(circle at 14% 12%, rgba(255, 70, 52, 0.13), transparent 30%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.018)),
    rgba(7, 11, 17, 0.9);
}

/* Team-Status auf der Startflaeche: was laeuft, was wartet auf Martin.
   Ersetzt die alte km-live-output-surface, deren Inhalt drei dekorative Balken
   (km-live-output-preview i) waren: eine Vorschau, die nie etwas zeigte. */
.km-team-status {
  display: grid;
  gap: 10px;
  padding: 13px;
  border-radius: 22px;
  border: 1px solid rgba(48, 209, 88, 0.23);
  background:
    radial-gradient(circle at 78% 22%, rgba(48, 209, 88, 0.16), transparent 34%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)),
    rgba(7, 12, 19, 0.92);
}

.km-team-status-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.km-team-status-head span {
  color: var(--km-green);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.km-team-status-head button {
  min-height: 38px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1px solid rgba(48, 209, 88, 0.34);
  background: rgba(48, 209, 88, 0.12);
  color: var(--km-text);
  font-size: 12px;
  font-weight: 850;
  white-space: nowrap;
}

.km-team-status-leer {
  margin: 0;
  color: var(--km-muted);
  font-size: 13px;
  line-height: 1.4;
}

.km-team-status-liste {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.km-team-status-liste button {
  width: 100%;
  min-height: 44px; /* Daumen-Trefferflaeche */
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
  color: var(--km-text);
  text-align: left;
}

.km-team-status-liste .braucht-dich button {
  border-color: rgba(255, 70, 52, 0.42);
  background: rgba(255, 70, 52, 0.1);
}

.km-team-status-agent {
  font-size: 12px;
  font-weight: 900;
  text-transform: capitalize;
}

/* Lange Titel duerfen die Zeile nicht sprengen. */
.km-team-status-titel {
  min-width: 0;
  overflow: hidden;
  color: var(--km-muted);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.km-team-status-marke {
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--km-muted);
}

.km-team-status-liste .braucht-dich .km-team-status-marke {
  color: var(--km-red, #ff4634);
}

.km-home-status-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.km-home-status-row button {
  display: grid;
  align-content: center;
  gap: 3px;
  min-height: 58px;
  padding: 8px;
  text-align: left;
}

.km-home-status-row span {
  color: var(--km-muted);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.km-home-status-row strong {
  overflow: hidden;
  color: var(--km-text);
  font-size: 12px;
  font-weight: 900;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.km-home-greeting,
.km-home-glance,
.km-home-secondary {
  display: none !important;
}

.km-artifact-zoom-controls {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px;
  border: 1px solid var(--km-border);
  border-radius: 20px;
  background: var(--km-bg);
}
.km-artifact-zoom-controls .km-artifact-full-drive {
  min-height: 30px;
  padding: 0 9px;
  border-radius: 15px;
  font-size: 11px;
}
.km-artifact-slide-page iframe {
  display: block;
}
@media (max-width: 420px) {
  .km-artifact-full-bar {
    gap: 6px;
    padding-left: 10px;
    padding-right: 8px;
  }
  .km-artifact-full-title {
    flex-basis: calc(100% - 52px);
  }
  .km-artifact-zoom-controls .km-artifact-full-drive {
    padding: 0 7px;
  }
}
.km-artifact-single-page {
  flex: 1;
  min-height: 0;
  overflow: auto;
  background: #0b0b0c;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y pinch-zoom;
}
.km-artifact-single-page .km-artifact-full-frame {
  display: block;
  border: none;
  background: #0b0b0c;
}

/* Universal full-screen work chat shared by Katja, agents and private mode. */
.km-chat-workspace{height:100%;min-height:0;display:flex;flex-direction:column;overflow:hidden;background:radial-gradient(circle at 92% -8%,rgba(255,70,52,.09),transparent 32%),var(--km-bg);color:var(--km-text)}
.km-chat-workspace-private{background:radial-gradient(circle at 92% -8%,rgba(255,70,52,.16),transparent 34%),var(--km-bg)}
.km-chat-topbar{flex-shrink:0;min-height:56px;display:flex!important;align-items:center!important;gap:10px!important;padding:calc(env(safe-area-inset-top) + 6px) 12px 8px!important;border-bottom:1px solid var(--km-border)!important;background:rgba(10,14,20,.92)!important;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.km-chat-icon-button,.km-chat-topbar .km-agent-chat-back{width:44px!important;min-width:44px!important;height:44px!important;padding:0!important;display:inline-flex;align-items:center;justify-content:center;border:0!important;border-radius:50%!important;background:transparent!important;color:var(--km-text)!important;font-size:24px;font-weight:500}
.km-chat-icon-button svg,.km-chat-topbar .km-agent-chat-back svg{width:24px;height:24px}.km-chat-icon-button path{fill:none;stroke:currentColor;stroke-width:2.25;stroke-linecap:round;stroke-linejoin:round}.km-chat-topbar>img{width:34px!important;height:34px!important}
.km-chat-identity{flex:1;min-width:0;display:grid;gap:2px}.km-chat-identity strong{overflow:hidden;font-size:15px;font-weight:850;line-height:1.2;text-overflow:ellipsis;white-space:nowrap}.km-chat-identity span{overflow:hidden;color:var(--km-muted);font-size:10.5px;line-height:1.2;text-overflow:ellipsis;white-space:nowrap}.km-chat-private-status{color:#ff7658!important}
/* WhatsApp-artige Sprechblasen (Martin 17.07.): Antworten des Agenten/Katjas
   sind LINKS in einer grauen Blase (nicht mehr nackter Volltext ueber die ganze
   Breite), deine Nachrichten RECHTS in Rot. Dichtes Spacing, kleine Tails,
   dezenter Schatten. Gilt fuer Agenten- UND Privat-Chat (gleiche Klassen). */
.km-chat-thread{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-y:contain;display:flex;flex-direction:column;gap:7px;padding:14px 10px 22px;scroll-padding-bottom:110px}
.km-chat-message.is-pending .km-chat-assistant-body{opacity:.72}
.km-chat-message.is-pending .km-chat-assistant-body::after{content:"";display:inline-block;width:6px;height:6px;margin-left:7px;border-radius:50%;background:#ff7658;animation:km-voice-pulse 1.1s ease-in-out infinite}
.km-chat-message.is-error .km-chat-assistant-body{color:#ff7658}
.km-chat-message{width:100%;max-width:100%;display:flex;flex-direction:column;align-items:flex-start}
.km-chat-message-user{align-self:flex-end;align-items:flex-end}
.km-chat-user-bubble{max-width:80%;padding:8px 12px;border-radius:18px 18px 4px 18px;background:var(--km-red,#ff4634);color:#fff;font-size:15.5px;line-height:1.4;white-space:pre-wrap;word-break:break-word;box-shadow:0 1px 1.5px rgba(0,0,0,.22)}
.km-chat-assistant-body{max-width:80%;padding:8px 12px;border:0;border-radius:18px 18px 18px 4px;background:var(--km-surface,#26262b);color:var(--km-text);font-size:15.5px;line-height:1.42;white-space:pre-wrap;word-break:break-word;box-shadow:0 1px 1.5px rgba(0,0,0,.22)}.km-chat-assistant-body p:first-child{margin-top:0}.km-chat-assistant-body p:last-child{margin-bottom:0}
.km-chat-message-actions{display:flex;align-items:center;gap:2px;margin-top:3px;padding:0 2px;opacity:.7}.km-chat-message-actions-user{justify-content:flex-end}.km-chat-message-actions button{min-width:40px;min-height:28px;padding:0 8px;border:0;border-radius:14px;background:transparent;color:var(--km-muted);font-size:10.5px;font-weight:700}.km-chat-message-actions button:active{background:rgba(255,255,255,.1);color:var(--km-text)}
.km-chat-quick-actions{flex-shrink:0;display:flex;gap:8px;overflow-x:auto;padding:6px 16px 8px;border:0;background:var(--km-bg);scrollbar-width:none}
.km-chat-composer{flex-shrink:0;display:flex!important;align-items:flex-end!important;gap:7px!important;padding:10px 12px calc(10px + env(safe-area-inset-bottom))!important;border:0!important;background:linear-gradient(to top,var(--km-bg) 72%,rgba(0,0,0,0))!important}.km-chat-composer textarea{display:block!important;min-height:52px!important;max-height:320px!important;padding:14px 54px 14px 16px!important;border:1px solid var(--km-border)!important;border-radius:26px!important;background:var(--km-surface)!important;color:var(--km-text)!important;font-size:16px!important;line-height:1.4!important}.km-chat-composer>button{width:44px!important;min-width:44px!important;height:44px!important;border-radius:50%!important}
.km-chat-workspace .km-voice-ready{margin:8px 16px 0;border-radius:16px}.km-chat-workspace [style*="borderLeft"]{width:100%!important;box-sizing:border-box;border:1px solid var(--km-border)!important;border-radius:18px!important;background:var(--km-surface)!important;padding:14px!important}.km-chat-workspace [style*="gridTemplateColumns: 'repeat(4"]{display:none!important}.km-chat-workspace [style*="borderLeft"] button{min-height:44px}
@media(max-width:390px){.km-chat-thread{padding-left:14px;padding-right:14px}.km-chat-topbar{padding-left:8px!important;padding-right:8px!important}.km-chat-topbar>img{display:none}.km-chat-composer{padding-left:8px!important;padding-right:8px!important}.km-chat-composer>button[aria-label*="Kamera"]{display:none}}

/* KATIA Privat Filmstudio. The production machinery stays invisible; this is
   deliberately closer to a quiet cinema call sheet than an AI dashboard. */
.km-private-studio{
  position:relative;
  flex:0 0 auto;
  overflow:hidden;
  border:1px solid rgba(255,118,88,.34);
  border-radius:20px;
  padding:16px;
  background:
    linear-gradient(135deg,rgba(255,70,52,.14),transparent 48%),
    radial-gradient(circle at 92% 12%,rgba(255,181,110,.14),transparent 38%),
    rgba(12,17,21,.72);
  box-shadow:0 18px 46px rgba(0,0,0,.2),inset 0 1px rgba(255,255,255,.04);
}
.km-private-studio::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.22;
  background:repeating-linear-gradient(90deg,transparent 0 31px,rgba(255,255,255,.03) 32px);
}
.km-private-studio-head{position:relative;display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.km-private-studio-head div{display:grid;gap:3px}
.km-private-studio-head span{color:#ff9b82;font-size:10px;font-weight:900;letter-spacing:.14em;text-transform:uppercase}
.km-private-studio-head strong{color:var(--km-text,#fff);font-family:Georgia,"Times New Roman",serif;font-size:22px;font-weight:600;letter-spacing:-.02em}
.km-private-studio-head b{border:1px solid rgba(255,118,88,.42);border-radius:999px;padding:5px 8px;color:#ffb09d;background:rgba(255,70,52,.09);font-size:10px;letter-spacing:.08em;text-transform:uppercase}
.km-private-studio>p{position:relative;margin:11px 0 14px;color:var(--km-muted,#b7aea7);font-size:12px;line-height:1.55}
.km-private-studio>button{position:relative;width:100%;min-height:46px;border:0;border-radius:13px;background:#ff5d45;color:#fff;font-weight:900;box-shadow:0 10px 28px rgba(255,70,52,.2)}
.km-private-studio-jobs{position:relative;display:grid;gap:9px}
.km-video-job{display:grid;gap:8px;border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:12px;background:rgba(4,8,11,.56)}
.km-video-job.is-compact{margin-top:9px;background:rgba(20,10,11,.7)}
.km-video-job.is-complete{border-color:rgba(67,201,133,.38)}
.km-video-job.is-error{border-color:rgba(255,118,88,.55)}
.km-video-job-top,.km-video-job-foot,.km-video-job-meta{display:flex;align-items:center;justify-content:space-between;gap:8px}
.km-video-job-top strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--km-text,#fff);font-size:13px}
.km-video-job-top span{flex-shrink:0;color:#ff9b82;font-size:10px;font-weight:800}
.km-video-job-meta{justify-content:flex-start;color:var(--km-muted,#aaa);font-size:10px}
.km-video-job-meta span+span::before{content:"/";margin-right:8px;color:rgba(255,255,255,.2)}
.km-video-job-progress{height:4px;overflow:hidden;border-radius:99px;background:rgba(255,255,255,.09)}
.km-video-job-progress i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#ff4634,#ffbd7b);box-shadow:0 0 12px rgba(255,118,88,.55);transition:width .5s ease}
.km-video-job-foot small{color:var(--km-muted,#aaa);font-size:10px}
.km-video-job>button{min-height:38px;border:1px solid rgba(255,118,88,.35);border-radius:10px;background:rgba(255,118,88,.08);color:#ffad98;font-size:11px;font-weight:850}
.km-video-job>button.km-video-job-stop{border-color:rgba(255,255,255,.1);background:transparent;color:var(--km-muted,#aaa)}
.km-video-job-drive{display:grid;place-items:center;min-height:42px;border-radius:10px;background:#fff1eb;color:#32120c;text-decoration:none;font-size:11px;font-weight:900}
.km-video-job>p{margin:0;color:#ff9b82;font-size:11px;line-height:1.45}
.km-video-job-characters{display:flex;flex-wrap:wrap;gap:6px}
.km-video-job-characters span{padding:4px 7px;border-radius:99px;background:rgba(255,255,255,.06);color:var(--km-muted,#aaa);font-size:10px}
.km-video-job-previews{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
.km-video-job-previews img{display:block;width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:11px;border:1px solid rgba(255,255,255,.12);background:#08090a}
.km-video-job-previews img:only-child{grid-column:1/-1;aspect-ratio:16/10}
.km-video-job-review{display:grid;gap:8px;padding-top:3px}
.km-video-job-review>strong{font:600 15px/1.2 Georgia,serif;color:#fff3ed}
.km-video-job-review>small{color:var(--km-muted,#aaa);font-size:10px;line-height:1.45}
.km-video-job-review textarea{box-sizing:border-box;width:100%;resize:vertical;border:1px solid rgba(255,255,255,.13);border-radius:10px;background:rgba(0,0,0,.28);padding:10px;color:var(--km-text,#fff);font:500 12px/1.45 inherit}
.km-video-job-review>div{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.km-video-job-review button{min-height:42px;border:1px solid rgba(255,118,88,.35);border-radius:10px;background:transparent;color:#ffad98;font-size:11px;font-weight:850}
.km-video-job-review button.is-approve{border-color:#ff7658;background:#ff7658;color:#180907}
.km-video-job-review button:disabled{opacity:.42}

/* Bildstudio — same card language as the film studio, but the variant grid is
   a picker: the chosen frame carries the approval, so it has to read as
   selected at a glance and stay tappable at 44 px on the iPhone. */
.km-image-compose{display:grid;gap:9px}
.km-image-compose textarea{box-sizing:border-box;width:100%;resize:vertical;min-height:74px;border:1px solid rgba(255,255,255,.13);border-radius:12px;background:rgba(0,0,0,.28);padding:11px;color:var(--km-text,#fff);font:500 13px/1.5 inherit}
.km-image-compose-options{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.km-image-compose-options label{display:grid;gap:4px}
.km-image-compose-options span{color:#ff9b82;font-size:10px;font-weight:900;letter-spacing:.12em;text-transform:uppercase}
.km-image-compose-options select{min-height:44px;border:1px solid rgba(255,255,255,.13);border-radius:10px;background:rgba(0,0,0,.28);padding:0 10px;color:var(--km-text,#fff);font:700 13px/1 inherit}
.km-image-compose-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.km-image-compose-actions button{min-height:44px;border:1px solid rgba(255,118,88,.38);border-radius:11px;background:transparent;color:#ffad98;font-size:12px;font-weight:850}
.km-image-compose-actions button.is-primary{border-color:#ff7658;background:#ff7658;color:#180907}
.km-image-compose-actions button:disabled{opacity:.42}
.km-image-job-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
/* The tile is a container now: the picture opens the full-screen viewer, the
   caption below picks the variant. One gesture each, no ambiguity. */
.km-image-variant{display:grid;gap:5px;padding:5px;border:1px solid rgba(255,255,255,.12);border-radius:12px;background:rgba(0,0,0,.24);color:var(--km-muted,#aaa);font-size:10px;font-weight:800;text-align:center}
.km-image-variant-open{display:block;width:100%;padding:0;border:0;border-radius:9px;background:transparent;cursor:zoom-in;overflow:hidden}
.km-image-variant img{display:block;width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:9px;background:#08090a}
.km-image-variant-pick{min-height:44px;border:1px solid rgba(255,255,255,.16);border-radius:9px;background:transparent;color:inherit;font:inherit;cursor:pointer}
.km-image-variant.is-selected .km-image-variant-pick{border-color:#ff7658;color:#ffd5c8}
.km-image-variant.is-selected{border-color:#ff7658;background:rgba(255,118,88,.15);color:#ffd5c8}
.km-image-job-grid .km-image-variant:only-child img{aspect-ratio:4/5}
/* Live render status. The remaining time is the loudest element, because that
   is the one thing Martin is actually looking for while it runs. */
.km-image-eta{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
.km-image-eta span{color:var(--km-muted,#aaa);font-size:11px;font-weight:800}
.km-image-eta b{color:#ffad98;font-size:12px;font-weight:900}
.km-image-eta small{color:var(--km-muted,#888);font-size:10px;margin-left:auto}
/* Full-screen image viewer. Black, edge to edge, above everything.
   Each page is its own scroll box with `touch-action: pinch-zoom` so iOS handles
   the two-finger zoom and pan itself; the track pages with CSS scroll-snap so a
   swipe is native too. */
.km-lightbox{position:fixed;inset:0;z-index:9000;display:flex;flex-direction:column;background:#000}
.km-lightbox-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:8px 10px;padding-top:max(8px,env(safe-area-inset-top));background:rgba(0,0,0,.72);color:#fff}
/* The caption gets its own row: at 390 px the three controls plus a title on one
   line pushed the save button off the right edge. */
.km-lightbox-bar>span{order:9;flex:1 1 100%;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#cfc6c0;font-size:11px;font-weight:800}
.km-lightbox-bar button{min-height:44px;min-width:44px;border:1px solid rgba(255,255,255,.24);border-radius:11px;background:transparent;color:#fff;padding:0 10px;font-size:12px;font-weight:850}
.km-lightbox-bar button.is-close{padding:0;font-size:16px}
.km-lightbox-bar button.is-save{margin-left:auto}
.km-lightbox-bar button.is-save{border-color:#ff7658;background:#ff7658;color:#180907}
.km-lightbox-bar button:disabled{opacity:.4}
.km-lightbox-zoom{display:flex;align-items:center;gap:4px;flex-shrink:0}
.km-lightbox-zoom b{min-width:46px;text-align:center;color:#cfc6c0;font-size:11px;font-weight:900}
.km-lightbox-track{flex:1 1 auto;display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.km-lightbox-track::-webkit-scrollbar{display:none}
/* Zoomed in, the horizontal scroll belongs to the picture, not to paging. */
.km-lightbox-track[data-zoomed]{scroll-snap-type:none;overflow-x:hidden}
.km-lightbox-page{flex:0 0 100%;width:100%;height:100%;overflow:auto;scroll-snap-align:start;display:flex;align-items:center;justify-content:center;touch-action:pan-x pan-y pinch-zoom;-webkit-overflow-scrolling:touch}
/* Zoom grows the image box, so this container actually has something to scroll:
   trackpad two-finger pan, drag-pan and one-finger pan on the phone all work. */
.km-lightbox-page[data-zoomed]{display:block;cursor:grab;touch-action:pan-x pan-y pinch-zoom}
.km-lightbox-page[data-zoomed]:active{cursor:grabbing}
.km-lightbox-page[data-zoomed] img{margin:0}
.km-lightbox-page img{display:block;max-width:100%;max-height:100%;margin:auto;object-fit:contain;user-select:none;-webkit-user-drag:none}
.km-lightbox-nav{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:64px;border:1px solid rgba(255,255,255,.2);border-radius:12px;background:rgba(0,0,0,.5);color:#fff;font-size:26px;line-height:1}
.km-lightbox-nav.is-prev{left:8px}
.km-lightbox-nav.is-next{right:8px}
.km-lightbox-nav:disabled{opacity:.22}
.km-lightbox-foot{display:grid;gap:8px;padding:10px 12px;padding-bottom:max(10px,env(safe-area-inset-bottom));background:rgba(0,0,0,.72)}
.km-lightbox-foot button{min-height:44px;border:1px solid rgba(255,118,88,.5);border-radius:11px;background:transparent;color:#ffad98;font-size:12px;font-weight:850}
.km-lightbox-foot button.is-approve{border-color:#ff7658;background:#ff7658;color:#180907}

/* New pictures during a voice conversation: a thin strip above the face dock,
   so it never covers the controls Martin needs while talking. */
.km-voice-images{display:flex;gap:6px;overflow-x:auto;padding:8px 12px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.km-voice-images::-webkit-scrollbar{display:none}
.km-voice-images button{flex:0 0 auto;width:74px;height:98px;padding:0;border:1px solid rgba(255,255,255,.18);border-radius:10px;background:#08090a;overflow:hidden;cursor:zoom-in}
.km-voice-images img{display:block;width:100%;height:100%;object-fit:cover}
.km-voice-gallery-button{min-height:36px;padding:0 11px;border:1px solid var(--km-border);border-radius:18px;background:var(--km-surface);color:var(--km-text);font-size:11px;font-weight:850;white-space:nowrap}
.km-voice-gallery-button b{display:inline-grid;place-items:center;min-width:20px;height:20px;margin-left:4px;padding:0 5px;border-radius:10px;background:rgba(255,70,52,.16);color:#ff8b72;font-size:10px}
.km-voice-gallery-panel{position:absolute;z-index:30;inset:max(66px,calc(env(safe-area-inset-top) + 54px)) 0 0;display:flex;flex-direction:column;gap:10px;padding:12px 12px max(18px,env(safe-area-inset-bottom));overflow-y:auto;background:color-mix(in srgb,var(--km-bg) 96%,transparent);backdrop-filter:blur(18px);-webkit-overflow-scrolling:touch}
.km-voice-gallery-head{position:sticky;z-index:2;top:-12px;display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:10px;padding:10px 2px;background:var(--km-bg)}
.km-voice-gallery-head strong{font-size:16px}.km-voice-gallery-head span{color:var(--km-muted);font-size:10px}.km-voice-gallery-head button,.km-voice-gallery-more{min-height:44px;padding:0 13px;border:1px solid var(--km-border);border-radius:12px;background:var(--km-surface);color:var(--km-text);font-size:12px;font-weight:850}
.km-voice-gallery-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
.km-voice-gallery-grid>button{padding:0;border:1px solid rgba(255,255,255,.14);border-radius:10px;background:#08090a;overflow:hidden;aspect-ratio:3/4;cursor:zoom-in}
.km-voice-gallery-grid img{display:block;width:100%;height:100%;object-fit:cover}
.km-voice-gallery-empty{margin:auto;color:var(--km-muted);font-size:13px}
.km-voice-gallery-more{width:100%;flex-shrink:0}
.km-voice-image-status{margin:0 12px 4px;padding:10px 12px;border:1px solid rgba(255,118,88,.28);border-radius:10px;background:rgba(255,118,88,.08);color:#ffad98;font-size:11px;text-align:left;display:grid;gap:4px}
.km-voice-image-status strong{font-size:10px;letter-spacing:.08em;text-transform:uppercase}
.km-voice-image-status span{color:var(--km-text);font-size:12px;line-height:1.4;font-weight:650}
.km-voice-image-status small{color:#ffad98;font-size:11px;font-weight:800}

/* Pictures inside a chat bubble. Small enough not to swallow the conversation,
   big enough to recognise; tapping opens the full-screen viewer. */
.km-chat-images{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:6px;margin-top:8px}
.km-chat-images button{padding:0;border:1px solid rgba(255,255,255,.14);border-radius:10px;background:#08090a;overflow:hidden;aspect-ratio:3/4;cursor:zoom-in}
.km-chat-images img{display:block;width:100%;height:100%;object-fit:cover}

/* Gallery: everything the private area ever rendered, newest first. */
.km-gallery-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.km-gallery-grid button{padding:0;border:1px solid rgba(255,255,255,.12);border-radius:10px;background:#08090a;overflow:hidden;aspect-ratio:3/4}
.km-gallery-grid img{display:block;width:100%;height:100%;object-fit:cover}
.km-gallery-empty{color:var(--km-muted,#aaa);font-size:12px;line-height:1.5}

/* The status text on an image card is a full sentence, not a two-word label.
   `flex-shrink:0` on the shared status span pushed it straight off the right
   edge inside the narrow chat card, and the title collapsed to nothing. */
.km-image-job .km-video-job-top{flex-wrap:wrap;align-items:baseline}
.km-image-job .km-video-job-top strong{flex:1 1 auto;white-space:normal}
.km-image-job .km-video-job-top span{flex:1 1 100%;flex-shrink:1;min-width:0;line-height:1.4}
.km-image-variant em{display:block;color:#ffd5c8;font-size:9px;font-style:normal;font-weight:900;letter-spacing:.08em;text-transform:uppercase}
/* Katja's own read of the variants. Reads as her speaking, not as a status
   line, so it sits in a quoted block rather than in the meta row. */
.km-image-verdict{display:grid;gap:6px;border-left:2px solid rgba(255,118,88,.55);border-radius:0 10px 10px 0;background:rgba(255,118,88,.08);padding:9px 11px}
.km-image-verdict.is-off-brief{border-left-color:#ffb400;background:rgba(255,180,0,.08)}
.km-image-verdict strong{color:#ff9b82;font-size:10px;font-weight:900;letter-spacing:.12em;text-transform:uppercase}
.km-image-verdict p{margin:0;color:var(--km-text,#fff);font-size:13px;line-height:1.5}
.km-image-verdict small{color:var(--km-muted,#aaa);font-size:11px;line-height:1.45}
.km-image-verdict button{min-height:44px;border:1px solid rgba(255,118,88,.42);border-radius:10px;background:transparent;color:#ffad98;font-size:12px;font-weight:850}
/* Generator faults versus taste. Different colour, different verb: the first is
   reported as done, the second is offered as a choice. */
.km-verdict-issues{display:grid;gap:5px;border-radius:9px;padding:8px 10px}
.km-verdict-issues>span{font-size:9px;font-weight:900;letter-spacing:.1em;text-transform:uppercase}
.km-verdict-issues ul{margin:0;padding-left:16px;display:grid;gap:3px}
.km-verdict-issues li,.km-verdict-issues p{margin:0;color:var(--km-text,#fff);font-size:12px;line-height:1.45}
.km-verdict-issues.is-technical{background:rgba(255,255,255,.05)}
.km-verdict-issues.is-technical>span{color:#8fb7ff}
.km-verdict-issues.is-content{background:rgba(255,180,0,.08)}
.km-verdict-issues.is-content>span{color:#ffc84d}
.km-verdict-issues.is-content>div{display:grid;gap:6px;padding-top:4px}
.km-verdict-issues.is-content button{min-height:44px;border:1px solid rgba(255,200,77,.45);border-radius:10px;background:transparent;color:#ffc84d;font-size:12px;font-weight:850}
/* The film-studio card ships 42 px and 38 px controls. In the image card every
   tap target stays at Martin's 44 px iPhone floor. */
.km-image-job .km-video-job-review button,
.km-image-job .km-video-job-stop,
.km-image-job .km-video-job-drive,
.km-image-job>button{min-height:44px}

/* Katja Private Pictures, dedicated desktop surface. Editorial film-studio
   direction: dark walnut, warm projector light, restrained red accents. */
#katia-mobile[data-surface="private-desktop"]{
  --km-bg:#0d0b0b;
  --km-surface:#171313;
  --km-surface2:#211b1a;
  --km-border:rgba(248,229,211,.13);
  --km-text:#f4eadf;
  --km-muted:#a99b90;
  --km-red:#e64c35;
  width:100vw;
  max-width:none;
  height:100vh;
  overflow:hidden;
  background:#0d0b0b;
  color:var(--km-text);
}

.kp-desktop-lock{
  position:fixed;
  display:grid;
  grid-template-columns:minmax(440px,1.15fr) minmax(420px,.85fr);
  gap:clamp(48px,7vw,120px);
  padding:clamp(52px,7vw,112px)!important;
  background:
    linear-gradient(90deg,rgba(9,7,7,.18),rgba(9,7,7,.78)),
    radial-gradient(circle at 18% 18%,rgba(225,92,55,.28),transparent 30%),
    linear-gradient(135deg,#281917 0%,#100d0d 58%,#080707 100%);
}
.kp-lock-atmosphere{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.kp-lock-atmosphere::before{content:"";position:absolute;inset:0;opacity:.055;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.75'/%3E%3C/svg%3E")}
.kp-lock-atmosphere i{position:absolute;border:1px solid rgba(255,217,184,.1);border-radius:50%}
.kp-lock-atmosphere i:nth-child(1){width:520px;height:520px;left:-180px;bottom:-260px}
.kp-lock-atmosphere i:nth-child(2){width:350px;height:350px;left:-95px;bottom:-175px}
.kp-lock-atmosphere i:nth-child(3){width:1px;height:120%;left:57%;top:-10%;border:0;background:linear-gradient(transparent,rgba(255,255,255,.12),transparent);transform:rotate(12deg)}
.kp-lock-brand{position:relative;z-index:1;align-self:center;display:grid;gap:22px;max-width:680px;text-align:left}
.kp-lock-brand>span,.kp-lock-kicker{color:#ed7256;font:700 11px/1.2 Bahnschrift,"Arial Narrow",sans-serif;letter-spacing:.24em;text-transform:uppercase}
.kp-lock-brand>strong{font:400 clamp(56px,6.3vw,96px)/.9 Georgia,"Times New Roman",serif;letter-spacing:-.055em;color:#fff5eb}
.kp-lock-brand>p{max-width:600px;margin:4px 0 10px;color:#cbbab0;font:400 17px/1.65 Georgia,serif}
.kp-lock-brand>div{display:grid;grid-template-columns:42px 1fr;align-items:center;gap:10px;color:#b4a49a;font:600 13px/1.3 Bahnschrift,"Arial Narrow",sans-serif;letter-spacing:.04em}
.kp-lock-brand>div b{color:#ee775a;font:400 12px/1 Georgia,serif}
.kp-desktop-lock-card{position:relative;z-index:1;width:min(100%,480px);padding:48px!important;border-radius:2px!important;border:1px solid rgba(248,229,211,.16)!important;background:rgba(20,16,16,.82)!important;box-shadow:0 40px 100px rgba(0,0,0,.5)!important;backdrop-filter:blur(22px);text-align:left!important}
.kp-desktop-lock-card .km-applock-title{margin-top:5px;font:400 32px/1.1 Georgia,serif;color:#fff4e8}
.kp-desktop-lock-card .km-applock-copy{color:#aa9c92;font-size:14px}
.kp-password-field{display:grid;gap:8px;margin-top:12px}
.kp-password-field span{color:#b9aaa0;font:700 10px/1 Bahnschrift,sans-serif;letter-spacing:.18em;text-transform:uppercase}
.kp-password-field input{box-sizing:border-box;width:100%;height:56px;padding:0 16px;border:1px solid rgba(248,229,211,.18);border-radius:2px;outline:0;background:#0d0b0b;color:#fff4e8;font-size:18px;letter-spacing:.08em;transition:border-color .2s,box-shadow .2s}
.kp-password-field input:focus{border-color:#e66a50;box-shadow:0 0 0 3px rgba(230,76,53,.14)}
.kp-desktop-lock-card .km-applock-btn{height:54px;border-radius:2px;background:#e64c35;letter-spacing:.04em;transition:transform .18s,background .18s}
.kp-desktop-lock-card .km-applock-btn:not(:disabled):hover{background:#f05a40;transform:translateY(-1px)}
.kp-desktop-lock-card>small{color:#756b65;font-size:11px;text-align:center}

.kp-desktop-shell{display:grid!important;grid-template-columns:270px minmax(0,1fr);height:100%!important;background:#0d0b0b!important}
.kp-desktop-sidebar{position:relative;display:flex;flex-direction:column;padding:38px 28px 30px;border-right:1px solid rgba(248,229,211,.1);background:linear-gradient(180deg,#181212,#100d0d 65%,#0a0909);overflow:hidden}
.kp-desktop-sidebar::after{content:"";position:absolute;width:220px;height:220px;left:-100px;bottom:-100px;border:1px solid rgba(230,76,53,.2);border-radius:50%;box-shadow:0 0 0 52px rgba(230,76,53,.03),0 0 0 104px rgba(230,76,53,.025)}
.kp-desktop-wordmark{display:flex;align-items:center;gap:13px;margin-bottom:58px}
.kp-desktop-wordmark>i{display:grid;place-items:center;width:40px;height:40px;border:1px solid #e64c35;color:#fff2e8;font:italic 26px/1 Georgia,serif}
.kp-desktop-wordmark>div{display:grid;gap:1px}.kp-desktop-wordmark strong{font:400 24px/1 Georgia,serif}.kp-desktop-wordmark span{color:#a18f84;font:700 8px/1 Bahnschrift,sans-serif;letter-spacing:.18em;text-transform:uppercase}
.kp-desktop-sidebar nav{display:grid;gap:5px}
.kp-desktop-sidebar nav button{position:relative;display:grid;grid-template-columns:30px 1fr;align-items:center;min-height:48px;padding:0 12px;border:0;border-radius:2px;background:transparent;color:#8e8179;text-align:left;font:600 12px/1 Bahnschrift,sans-serif;letter-spacing:.04em;cursor:pointer}
.kp-desktop-sidebar nav button span{font:400 9px/1 Georgia,serif;color:#655b56}.kp-desktop-sidebar nav button:hover,.kp-desktop-sidebar nav button.is-active{background:rgba(255,255,255,.045);color:#f5e9de}.kp-desktop-sidebar nav button.is-active::before{content:"";position:absolute;left:0;width:2px;height:24px;background:#e64c35}
.kp-desktop-sidebar-status{display:grid;grid-template-columns:10px 1fr;gap:3px 9px;margin-top:auto;padding:16px;border:1px solid rgba(248,229,211,.1);background:rgba(255,255,255,.025)}
.kp-desktop-sidebar-status i{grid-row:1/3;align-self:center;width:7px;height:7px;border-radius:50%;background:#72c68e;box-shadow:0 0 12px #72c68e}
.kp-desktop-sidebar-status span{color:#8e8179;font-size:9px;text-transform:uppercase;letter-spacing:.09em}.kp-desktop-sidebar-status strong{font:600 12px/1.2 Bahnschrift,sans-serif;color:#d9cbbf}
.kp-desktop-sidebar>small{position:relative;z-index:1;margin-top:18px;color:#685f5a;font-size:9px;line-height:1.5;letter-spacing:.08em;text-transform:uppercase}
.kp-desktop-main{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));align-content:start;gap:18px!important;padding:44px clamp(34px,4vw,72px) 72px!important;overflow-y:auto!important;background:radial-gradient(circle at 92% 0,rgba(205,74,49,.12),transparent 33%),#0d0b0b!important}
.kp-desktop-main>.kp-desktop-hero,.kp-desktop-main>.kp-desktop-actions,.kp-desktop-main>.kp-desktop-note,.kp-desktop-main>.km-private-studio{grid-column:1/-1}
.kp-desktop-hero{padding:8px 0 12px;border-bottom:1px solid rgba(248,229,211,.1)}
.kp-desktop-hero [style*="font-size: 22px"]{font:400 clamp(40px,4.2vw,66px)/1 Georgia,"Times New Roman",serif!important;letter-spacing:-.045em!important;color:#fff4e8!important}
.kp-desktop-hero p{max-width:720px;margin:14px 0 4px;color:#9f9188;font-size:14px;line-height:1.6}
.kp-desktop-actions{grid-template-columns:repeat(6,minmax(0,1fr))!important;gap:10px!important}
.kp-desktop-actions button{grid-column:auto!important;min-height:84px!important;border-radius:2px!important;padding:14px!important;text-align:left;font:700 12px/1.3 Bahnschrift,sans-serif!important;transition:transform .18s,border-color .18s,background .18s}
.kp-desktop-actions button:nth-child(1),.kp-desktop-actions button:nth-child(2){grid-column:span 3!important;font-size:14px!important}
.kp-desktop-actions button:nth-child(n+3){grid-column:span 2!important}
.kp-desktop-actions button:hover{transform:translateY(-2px);border-color:rgba(255,118,88,.7)!important;background-color:rgba(255,118,88,.16)!important}
.kp-desktop-note{padding:0 2px;color:#706761!important;font-size:10px!important;letter-spacing:.035em}
.kp-desktop-main>.km-private-studio{height:max-content!important;min-height:270px;overflow:hidden;padding:26px 28px;border-radius:2px;background:linear-gradient(120deg,rgba(230,76,53,.12),transparent 48%),#171313}
.kp-reference-style{position:relative;display:grid;grid-template-columns:auto 1fr;align-items:center;gap:3px 12px;margin:0 0 18px;padding:13px 15px;border-left:2px solid #e64c35;background:rgba(255,255,255,.035)}
.kp-reference-style span{grid-row:1/3;color:#e97559;font:700 9px/1.2 Bahnschrift,sans-serif;letter-spacing:.12em;text-transform:uppercase}.kp-reference-style strong{font:400 15px/1.2 Georgia,serif}.kp-reference-style small{color:#8f8178;font-size:10px}
.kp-desktop-main .km-private-studio-head strong{font-size:31px}.kp-desktop-main .km-private-studio-jobs{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.kp-desktop-main .km-video-job{border-radius:2px;padding:18px;background:#0f0c0c}
.kp-desktop-main>details{min-width:0;border-radius:2px!important;padding:20px!important;background:#151212!important;transition:border-color .18s}.kp-desktop-main>details:hover{border-color:rgba(255,118,88,.35)!important}.kp-desktop-main>details>summary{font-family:Georgia,serif!important;font-size:17px!important;font-weight:400!important}
.kp-desktop-main textarea,.kp-desktop-main input,.kp-desktop-main select{border-radius:2px!important}.kp-desktop-main button{cursor:pointer}
.kp-desktop-chat{width:min(1120px,calc(100vw - 80px));height:calc(100vh - 56px);margin:28px auto;border:1px solid rgba(248,229,211,.12);box-shadow:0 30px 90px rgba(0,0,0,.45)}
.kp-desktop-chat .km-chat-topbar{padding:8px 18px!important}.kp-desktop-chat .km-chat-thread{padding:28px 9%}.kp-desktop-chat .km-chat-user-bubble,.kp-desktop-chat .km-chat-assistant-body{max-width:68%}.kp-desktop-chat .km-chat-composer{padding:14px 7% 20px!important}.kp-desktop-chat .km-chat-composer textarea{max-height:260px!important}
.kp-desktop-chat .km-chat-pending-strip,.kp-desktop-chat .km-chat-attach-menu{margin-left:7%;margin-right:7%}

@media(max-width:1000px){.kp-desktop-lock{grid-template-columns:1fr;padding:48px!important}.kp-lock-brand{display:none}.kp-desktop-lock-card{justify-self:center}.kp-desktop-shell{grid-template-columns:210px minmax(0,1fr)}.kp-desktop-sidebar{padding:28px 18px}.kp-desktop-main{grid-template-columns:1fr}.kp-desktop-main>details{grid-column:1/-1}.kp-desktop-main .km-private-studio-jobs{grid-template-columns:1fr}}

/* Hinweis, wenn die Systemstimme statt Katja spricht. Ruhig, nicht alarmierend:
   es funktioniert ja, es klingt nur falsch. Aber es steht da, statt dass Martin
   raetselt, warum Katja ploetzlich fremd klingt. */
.km-voice-fallback-note {
  margin-top: 6px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(255, 179, 0, 0.4);
  background: rgba(255, 179, 0, 0.1);
  color: var(--km-text);
  font-size: 12px;
  line-height: 1.45;
  text-align: center;
}

/* WhatsApp-artige Medien-Bubbles (Martin 17.07.) */
.km-chat-bubble-image {
  display: block;
  max-width: 220px;
  width: 100%;
  border-radius: 14px;
  margin-bottom: 6px;
  object-fit: cover;
}
.km-chat-bubble-audio {
  display: block;
  width: min(240px, 62vw);
  height: 40px;
  margin: 2px 0;
}
/* Anhaenge, die noch nicht abgeschickt sind. Der Streifen sitzt zwischen
   Verlauf und Composer und darf nicht gestaucht werden, sonst verschwindet die
   Vorschau bei langer Nachricht. */
.km-chat-pending-strip {
  flex-shrink: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding: 0 12px 8px;
}
.km-chat-pending-file {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  padding: 8px 30px 8px 10px;
  border: 1px solid var(--km-border);
  border-radius: 12px;
  background: var(--km-surface);
  color: var(--km-text);
  font-size: 12px;
}
.km-chat-pending-file > span { display: flex; flex-direction: column; min-width: 0; }
.km-chat-pending-file strong { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.km-chat-pending-file em { font-style: normal; color: var(--km-muted, #8e8e93); font-size: 11px; }
.km-chat-pending-file button {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  font-size: 14px;
  line-height: 1;
}
/* Das Anhang-Menue am "+"-Knopf. */
.km-chat-attach-menu {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0 12px 8px;
  padding: 6px;
  border: 1px solid var(--km-border);
  border-radius: 16px;
  background: var(--km-surface);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.38);
}
.km-chat-attach-menu button {
  /* Ohne flex sitzt die Beschriftung oben in ihrer 44px-Zeile statt mittig. */
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 14px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--km-text);
  font-size: 15px;
  text-align: left;
}
.km-chat-attach-menu button:active { background: rgba(255, 70, 52, 0.16); }
.km-chat-bubble-files { display: flex; flex-direction: column; gap: 4px; margin: 2px 0 4px; }
.km-chat-bubble-file {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 9px;
  border-radius: 10px;
  background: rgba(127, 127, 127, 0.16);
  font-size: 12px;
  word-break: break-word;
}
.km-chat-pending-image {
  position: relative;
  flex-shrink: 0;
  width: 76px;
  height: 76px;
  margin: 0;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--km-border);
}
.km-chat-pending-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.km-chat-pending-image button {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 15px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.km-read-aloud-bar {
  position: relative;
  z-index: 12;
  flex: 0 0 auto;
  padding: 10px 14px max(10px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--km-border, rgba(255,255,255,.12));
  background: color-mix(in srgb, var(--km-surface, #181513) 94%, transparent);
  backdrop-filter: blur(18px);
  color: var(--km-text, #f7f2ed);
}
.km-read-aloud-head, .km-read-aloud-controls { display: flex; align-items: center; gap: 8px; }
.km-read-aloud-head { justify-content: space-between; min-height: 28px; font-size: 12px; color: var(--km-muted, #a99f98); }
.km-read-aloud-head button, .km-read-aloud-controls button {
  min-width: 44px; min-height: 44px; border: 1px solid var(--km-border, #39332f); border-radius: 50%;
  background: var(--km-bg, #100e0d); color: var(--km-text, #fff); font: inherit;
}
.km-read-aloud-controls { justify-content: flex-end; }
.km-read-aloud-controls span { margin-right: auto; font-size: 11px; color: var(--km-muted, #a99f98); font-variant-numeric: tabular-nums; }
.km-read-aloud-controls button:nth-of-type(2) { background: var(--km-red, #ff7658); border-color: transparent; color: #fff; }
.km-read-aloud-bar input[type="range"] { width: 100%; accent-color: var(--km-red, #ff7658); }
/* JARVIS Mobile — Chat-App shell. Dark/gold, iOS-first. */
:root {
  color-scheme: dark;
  --bg: #070a10;
  --bg-raised: #0d1220;
  --bg-card: rgba(255, 255, 255, 0.045);
  --bg-card-hover: rgba(255, 255, 255, 0.07);
  --gold: #c9a227;
  --gold-bright: #f0c45c;
  --green: #5bba88;
  --red: #e35c52;
  --text: #f3efe2;
  --text-dim: rgba(246, 237, 210, 0.55);
  --text-faint: rgba(246, 237, 210, 0.38);
  --line: rgba(201, 162, 39, 0.16);
  --line-soft: rgba(255, 255, 255, 0.08);
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  -webkit-tap-highlight-color: transparent;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body, #mobile-root {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
}

button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: none; background: none; }
a { color: var(--gold-bright); text-decoration: none; }

/* ── App shell ─────────────────────────────────────────────── */
.jm-app {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  max-width: 520px;
  margin: 0 auto;
  background: var(--bg);
}
.jm-main {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Generic scroll views */
.jm-chatlist,
.jm-tab-content {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: max(10px, env(safe-area-inset-top)) 12px 14px;
}

.jm-appbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: max(8px, env(safe-area-inset-top)) 2px 12px;
}
.jm-appbar-brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.jm-arc {
  width: 30px; height: 30px; border-radius: 50%; flex: 0 0 auto;
  background: radial-gradient(circle at 50% 38%, var(--gold-bright), #2a2008 72%);
  box-shadow: 0 0 0 1px rgba(201,162,39,.16), 0 0 14px rgba(201,162,39,.4);
  position: relative;
}
.jm-arc::after {
  content: ''; position: absolute; inset: 6px; border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.45); border-top-color: transparent; border-left-color: transparent;
}
.jm-appbar-copy { min-width: 0; }
.jm-appbar-title { font-size: 18px; font-weight: 800; letter-spacing: .02em; line-height: 1.05; }
.jm-appbar-title span { color: var(--gold); }
.jm-appbar-sub {
  margin-top: 2px;
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.jm-icon-btn {
  width: 44px; height: 44px; border-radius: 13px;
  display: grid; place-items: center; flex: 0 0 auto;
  background: var(--bg-card); border: 1px solid rgba(255,255,255,.08);
  color: var(--gold-bright); font-size: 0;
  position: relative;
}
.jm-icon-btn::before { content: ''; position: absolute; width: 12px; height: 12px; border: 2px solid currentColor; border-radius: 50%; transform: translate(-2px, -2px); }
.jm-icon-btn::after { content: ''; position: absolute; width: 7px; height: 2px; background: currentColor; transform: translate(6px, 7px) rotate(45deg); border-radius: 2px; }

/* ── Bottom nav (5 tabs + central FAB) ─────────────────────── */
.jm-bottom-nav {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: start;
  border-top: 1px solid rgba(201,162,39,.12);
  background: linear-gradient(to top, rgba(10,14,23,.96), rgba(10,14,23,.7));
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding: 9px 14px calc(18px + env(safe-area-inset-bottom));
  min-height: 84px;
}
.jm-nav-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 10px 0 8px;
  color: var(--text-faint);
  font-size: 10px;
  font-weight: 600;
  background: transparent;
  border: none;
  -webkit-tap-highlight-color: transparent;
  transition: color .15s;
  cursor: pointer;
}
.jm-nav-btn.is-active { color: var(--gold-bright); }
.jm-nav-icon { position: relative; font-size: 20px; line-height: 1; }
.jm-bottom-nav .jm-nav-btn:nth-of-type(4) .jm-nav-icon { font-size: 0; }
.jm-bottom-nav .jm-nav-btn:nth-of-type(4) .jm-nav-icon::before { content: '\25B3'; font-size: 20px; }
.jm-nav-label {
  font-size: 9px;
  font-family: 'DM Mono', monospace;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.jm-nav-badge {
  position: absolute;
  top: -5px; right: -10px;
  min-width: 16px; height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--red);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  display: grid;
  place-items: center;
}
.jm-nav-fab {
  justify-self: center;
  flex-shrink: 0;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold), #a87e1a);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 0 0 5px rgba(7,10,16,1), 0 0 0 6px rgba(201,162,39,.16), 0 8px 24px rgba(201,162,39,.4);
  margin-top: -14px;
  -webkit-tap-highlight-color: transparent;
  transition: transform .15s, box-shadow .15s;
}
.jm-nav-fab:active { transform: scale(.93); box-shadow: 0 2px 8px rgba(201,162,39,.3); }
.jm-fab-icon { font-size: 22px; }

/* ── Avatar ────────────────────────────────────────────────── */
.jm-avatar {
  position: relative;
  display: grid;
  place-items: center;
  border-radius: 50%;
  flex-shrink: 0;
  overflow: hidden;
  font-weight: 800;
  color: var(--gold);
  border: 1px solid rgba(201, 162, 39, 0.35);
  background: radial-gradient(circle at 50% 35%, rgba(201, 162, 39, 0.3), #111721 70%);
}
.jm-avatar.av-friday {
  background: radial-gradient(circle at 50% 35%, rgba(240, 196, 92, 0.4), #2a2008 72%);
}
.jm-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.jm-avatar > span { position: relative; }
.jm-avatar.is-active {
  border-color: var(--gold);
  box-shadow: 0 0 0 2px rgba(201, 162, 39, 0.18), 0 0 16px rgba(201, 162, 39, 0.3);
}

/* ── Chat list ─────────────────────────────────────────────── */
.jm-list-section {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: 14px 4px 6px;
  color: var(--gold);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
}
.jm-list-section:first-child { margin-top: 4px; }
.jm-list-err { color: var(--red); font-weight: 600; text-transform: none; letter-spacing: 0; }

.jm-chat-row {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  text-align: left;
  padding: 9px 10px;
  border-radius: 14px;
  background: var(--bg-card);
  margin-bottom: 6px;
  transition: background .12s;
}
.jm-chat-row:active { background: var(--bg-card-hover); }
.jm-chat-row-info { flex: 1; min-width: 0; }
.jm-chat-row-name {
  display: flex; align-items: center; gap: 6px;
  font-size: 14px; font-weight: 700; color: var(--text);
}
.jm-chat-row-role {
  font-size: 11px; font-weight: 500; color: var(--text-faint);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.jm-chat-row-preview {
  font-size: 12px; color: var(--text-dim);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  margin-top: 2px;
}
.jm-unread {
  min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: 10px; background: var(--gold);
  color: var(--bg); font-size: 11px; font-weight: 800;
  display: grid; place-items: center; flex-shrink: 0;
}
.jm-live-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--green); flex-shrink: 0;
  box-shadow: 0 0 0 3px rgba(91, 186, 136, 0.18);
  animation: jm-pulse 1.4s ease-in-out infinite;
}

/* Setup prompt (not paired yet) */
.jm-setup-prompt {
  display: grid; justify-items: center; gap: 8px; text-align: center;
  margin-top: 40px; padding: 28px 20px;
  border: 1px dashed var(--line); border-radius: 16px;
}
.jm-setup-icon { font-size: 32px; opacity: .7; }
.jm-setup-prompt strong { font-size: 16px; }
.jm-setup-prompt span { font-size: 13px; color: var(--text-dim); }
.jm-setup-prompt button {
  margin-top: 8px; padding: 10px 22px; border-radius: 10px;
  background: var(--gold); color: var(--bg); font-weight: 700;
}

/* ── Chat thread ───────────────────────────────────────────── */
.jm-chat-thread { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.jm-thread-header {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 10px;
  padding: max(8px, env(safe-area-inset-top)) 12px 8px;
  background: var(--bg-raised);
  border-bottom: 1px solid var(--line);
}
.jm-back-btn {
  font-size: 28px; line-height: 1; color: var(--gold);
  width: 44px; height: 44px; flex-shrink: 0;
  display: grid; place-items: center; margin-left: -4px;
}
.jm-thread-meta { display: grid; gap: 1px; min-width: 0; }
.jm-thread-name { font-size: 15px; font-weight: 700; }
.jm-thread-role {
  display: flex; align-items: center; gap: 5px;
  font-size: 11px; color: var(--text-dim);
}
.jm-thread-body {
  flex: 1; min-height: 0; overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: flex; flex-direction: column; gap: 8px;
  padding: 14px 12px;
}
.jm-thread-empty {
  margin: auto; max-width: 86%; text-align: center;
  display: grid; justify-items: center; gap: 8px;
  color: var(--text-dim);
}
.jm-thread-empty strong { font-size: 17px; color: var(--text); margin-top: 4px; }
.jm-thread-empty span { font-size: 13px; line-height: 1.45; }
.jm-thread-empty em { font-size: 12px; color: var(--text-faint); font-style: normal; margin-top: 4px; }

/* ── Bubbles ───────────────────────────────────────────────── */
.jm-bubble {
  max-width: 82%;
  padding: 8px 12px;
  border-radius: 16px;
  font-size: 14.5px;
  line-height: 1.42;
  word-break: break-word;
  white-space: pre-wrap;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.jm-bubble.user {
  align-self: flex-end;
  background: rgba(201, 162, 39, 0.22);
  border: 1px solid rgba(201, 162, 39, 0.3);
  border-bottom-right-radius: 5px;
}
.jm-bubble.assistant {
  align-self: flex-start;
  background: var(--bg-card);
  border: 1px solid var(--line-soft);
  border-bottom-left-radius: 5px;
}
.jm-bubble.assistant.is-error { border-color: rgba(227, 92, 82, 0.5); color: #f1b3ae; }
.jm-bubble.is-pending { opacity: .8; }
.jm-bubble-text { white-space: pre-wrap; }
.jm-bubble.system {
  align-self: center;
  background: rgba(91, 186, 136, 0.1);
  border: 1px solid rgba(91, 186, 136, 0.22);
  border-radius: 10px;
  padding: 4px 12px;
  max-width: 90%;
}
.jm-bubble-system { font-size: 11.5px; color: var(--green); }
.jm-bubble-link {
  color: var(--gold-bright);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}
.jm-bubble-link:active { color: #fff; }
.jm-bubble-time {
  display: flex; align-items: center; gap: 5px;
  font-size: 10px; color: var(--text-faint);
}
.jm-bubble-foot { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 1px; }
.jm-bubble-copy {
  font-size: 10px; color: var(--text-dim);
  padding: 2px 7px; border-radius: 7px;
  background: rgba(255,255,255,0.06); border: 1px solid var(--line-soft);
}
.jm-bubble-copy:active { color: var(--text); background: rgba(255,255,255,0.12); }

/* ── Composer ──────────────────────────────────────────────── */
.jm-composer {
  flex: 0 0 auto;
  display: flex; align-items: flex-end; gap: 8px;
  padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
  background: var(--bg-raised);
  border-top: 1px solid var(--line);
}
.jm-composer-input {
  flex: 1; min-width: 0;
  max-height: 120px; min-height: 40px;
  padding: 9px 14px;
  border-radius: 20px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.06);
  font-size: 16px; /* >=16 prevents iOS zoom */
  line-height: 1.35;
  resize: none;
}
.jm-composer-input:focus { outline: none; border-color: rgba(201, 162, 39, 0.45); }
.jm-ptt-btn, .jm-send-btn {
  flex: 0 0 auto;
  width: 40px; height: 40px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 18px;
}
.jm-ptt-btn {
  background: rgba(201, 162, 39, 0.14);
  border: 1px solid rgba(201, 162, 39, 0.4);
}
.jm-ptt-btn.recording {
  background: var(--red); border-color: var(--red);
  animation: jm-rec 1s ease-in-out infinite;
}
.jm-send-btn {
  background: var(--gold); color: var(--bg); font-weight: 800; font-size: 20px;
}
.jm-send-btn:disabled, .jm-ptt-btn:disabled, .jm-voice-toggle:disabled { opacity: .4; }
.jm-ptt-btn.recording { background: var(--red); border-color: var(--red); color: #fff; animation: jm-rec 1s ease-in-out infinite; }

/* mode toggle (enter voice mode) */
.jm-voice-toggle {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; font-size: 17px;
  background: rgba(255,255,255,0.06); border: 1px solid var(--line);
}
.jm-composer-wrap { flex: 0 0 auto; }
.jm-dict-err {
  padding: 6px 14px 0; font-size: 12px; color: var(--red);
}

/* voice mode */
.jm-voice-mode {
  flex: 0 0 auto;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 16px 16px calc(18px + env(safe-area-inset-bottom));
  background: var(--bg-raised); border-top: 1px solid var(--line);
}
.jm-voice-exit {
  align-self: flex-end; font-size: 12px; color: var(--text-dim);
  padding: 4px 8px; border-radius: 8px;
}
.jm-voice-btn {
  width: 150px; height: 150px; border-radius: 50%;
  display: grid; place-items: center; text-align: center;
  font-size: 15px; font-weight: 700; color: var(--gold-bright);
  background: radial-gradient(circle at 50% 40%, rgba(201,162,39,0.25), rgba(7,10,16,0.9) 70%);
  border: 2px solid rgba(201,162,39,0.5);
  touch-action: none; user-select: none;
}
.jm-voice-btn.recording {
  color: #fff; border-color: var(--red);
  background: radial-gradient(circle at 50% 40%, rgba(227,92,82,0.35), rgba(7,10,16,0.9) 70%);
  animation: jm-rec 1.1s ease-in-out infinite;
}
.jm-voice-btn:disabled { opacity: .55; }
.jm-voice-hint { font-size: 12px; color: var(--text-dim); text-align: center; line-height: 1.4; max-width: 80%; }

/* ── Tab headers / sections ────────────────────────────────── */
.jm-tab-header {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 19px; font-weight: 800;
  margin-bottom: 12px;
}
.jm-tab-section {
  margin: 16px 2px 8px;
  color: var(--gold);
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em;
}
.jm-stream-dot { font-size: 11px; font-weight: 600; color: var(--text-faint); text-transform: lowercase; }
.jm-stream-dot.ok { color: var(--green); }
.jm-refresh-btn { font-size: 20px; color: var(--gold); width: 44px; height: 44px; }
.jm-empty-state {
  margin-top: 30px; text-align: center;
  font-size: 13px; color: var(--text-dim); line-height: 1.5;
}

/* ── Jobs ──────────────────────────────────────────────────── */
.jm-mode-banner {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; margin-bottom: 12px;
  border: 1px solid var(--line-soft); border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  font-size: 12px; color: var(--text-dim);
}
.jm-mode-chip {
  font-size: 10px; font-weight: 700; letter-spacing: .04em;
  padding: 3px 8px; border-radius: 5px; text-transform: uppercase;
}
.jm-mode-chip.vps { background: rgba(91, 186, 136, 0.18); color: var(--green); }
.jm-mode-chip.electron { background: rgba(201, 162, 39, 0.18); color: var(--gold); }

.jm-jobs-list { display: grid; gap: 8px; }
.jm-job-card {
  padding: 11px 13px; border-radius: 12px;
  background: var(--bg-card); border: 1px solid var(--line);
  border-left: 3px solid var(--gold-bright);
}
.jm-job-top { display: flex; justify-content: space-between; align-items: center; }
.jm-job-id { font-size: 11px; font-family: ui-monospace, monospace; color: var(--text-faint); }
.jm-job-elapsed { font-size: 13px; font-weight: 700; color: var(--gold-bright); }
.jm-job-task { font-size: 13px; color: var(--text); margin-top: 4px; line-height: 1.35; }
.jm-job-progress {
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.35;
  color: var(--gold-bright);
}
.jm-job-indicator {
  display: flex; align-items: center; gap: 6px;
  margin-top: 6px; font-size: 11px; color: var(--green);
}
.jm-job-pulse {
  width: 6px; height: 6px; border-radius: 50%; background: var(--green);
  animation: jm-pulse 1s ease-in-out infinite;
}

.jm-status-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.jm-status-tile {
  display: grid; grid-template-columns: 12px 1fr;
  grid-template-areas: "led name" "led state";
  align-items: center; gap: 2px 8px;
  padding: 10px 12px; border-radius: 10px;
  background: var(--bg-card); border: 1px solid var(--line);
}
.jm-status-led {
  grid-area: led; width: 10px; height: 10px; border-radius: 50%;
  background: var(--green); box-shadow: 0 0 0 3px rgba(91, 186, 136, 0.15);
}
.jm-status-tile.working { border-color: rgba(240, 196, 92, 0.5); }
.jm-status-tile.working .jm-status-led { background: var(--gold-bright); animation: jm-pulse 1.25s ease-in-out infinite; }
.jm-status-name { grid-area: name; font-size: 13px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jm-status-state { grid-area: state; font-size: 10px; color: var(--text-dim); }
.jm-status-tile.working .jm-status-state { color: var(--gold-bright); }

/* ── Result + deliverable cards ────────────────────────────── */
.jm-deliverable-card, .jm-result-card {
  padding: 12px 14px; border-radius: 14px; margin-bottom: 8px;
  background: var(--bg-card); border: 1px solid var(--line);
}
.jm-deliverable-card.approved { border-color: rgba(91, 186, 136, 0.5); }
.jm-deliverable-card.correction, .jm-result-card.is-error { border-color: rgba(227, 92, 82, 0.5); }
.jm-card-agent { font-size: 11px; font-weight: 700; color: var(--gold); }
.jm-card-title { font-size: 15px; font-weight: 700; margin-top: 3px; line-height: 1.25; }
.jm-card-body { font-size: 13px; color: var(--text-dim); margin-top: 6px; line-height: 1.4; }
.jm-card-assumption {
  font-size: 12px; color: var(--text-faint); margin-top: 6px;
  padding-left: 10px; border-left: 2px solid var(--line);
}
.jm-card-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.jm-card-actions button { padding: 9px; border-radius: 9px; font-weight: 700; font-size: 13px; }
.jm-card-actions .is-approve { background: rgba(91, 186, 136, 0.15); color: var(--green); border: 1px solid rgba(91, 186, 136, 0.35); }
.jm-card-actions .is-correct { background: rgba(227, 92, 82, 0.1); color: var(--red); border: 1px solid rgba(227, 92, 82, 0.3); }

.jm-result-card-top { display: flex; justify-content: space-between; align-items: baseline; }
.jm-result-card-time { font-size: 11px; color: var(--text-faint); }
.jm-view-btn {
  margin-top: 10px; width: 100%; padding: 9px;
  border-radius: 9px; font-weight: 700; font-size: 13px;
  background: rgba(201, 162, 39, 0.14); color: var(--gold-bright);
  border: 1px solid rgba(201, 162, 39, 0.3);
}
.jm-status-chip {
  display: inline-block; margin-top: 6px;
  font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 6px;
}
.jm-status-chip.approved { background: rgba(91, 186, 136, 0.15); color: var(--green); }
.jm-status-chip.correction { background: rgba(227, 92, 82, 0.1); color: var(--red); }

/* Chips */
.jm-chip-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.jm-chip {
  font-size: 11px; padding: 4px 9px; border-radius: 7px;
  background: rgba(255, 255, 255, 0.06); color: var(--text-dim);
  border: 1px solid var(--line-soft);
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.jm-chip-btn {
  background: rgba(201, 162, 39, 0.12); color: var(--gold-bright);
  border-color: rgba(201, 162, 39, 0.3); font-weight: 600;
}
.jm-chip-btn:active { background: rgba(201, 162, 39, 0.24); }

/* ── Result detail panel ───────────────────────────────────── */
.jm-result-detail-panel {
  margin-bottom: 12px; padding: 14px;
  border-radius: 14px; background: var(--bg-raised);
  border: 1px solid var(--line);
}
.jm-rdp-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.jm-rdp-header strong { order: 1; flex: 1; min-width: 0; font-size: 14px; line-height: 1.3; }
.jm-rdp-share {
  order: 2;
  padding: 6px 10px; border-radius: 8px; font-size: 12px; font-weight: 700;
  color: var(--gold-bright); background: rgba(201,162,39,.14);
  border: 1px solid rgba(201,162,39,.28);
  flex: 0 0 auto;
}
.jm-rdp-share:disabled { opacity: .55; }
.jm-rdp-close { order: 3; font-size: 18px; color: var(--text-dim); width: 44px; height: 44px; flex-shrink: 0; }
.jm-rdp-text {
  margin-top: 10px; padding: 10px;
  border-radius: 8px; background: rgba(0, 0, 0, 0.3);
  font-size: 13px; line-height: 1.5; white-space: pre-wrap;
  overflow-wrap: anywhere; max-height: 45vh; overflow-y: auto;
  color: rgba(246, 237, 210, 0.85);
}
.jm-rdp-expand {
  margin-top: 8px; padding: 5px 12px; border-radius: 6px;
  font-size: 12px; color: var(--gold-bright);
  border: 1px solid rgba(201, 162, 39, 0.3);
}
.jm-rdp-artifacts { margin-top: 12px; }
.jm-rdp-artifacts-label { font-size: 11px; color: var(--text-faint); }
.jm-rdp-evidence {
  margin: 10px 0;
  padding: 10px 12px;
  border: 1px solid rgba(91, 186, 136, 0.28);
  border-radius: 10px;
  background: rgba(91, 186, 136, 0.08);
}
.jm-rdp-evidence-top {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 11px;
  font-weight: 800;
  color: var(--green);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.jm-rdp-evidence-top b {
  font-size: 10px;
  color: var(--text-dim);
}
.jm-rdp-evidence ul { margin: 8px 0 0; padding-left: 16px; }
.jm-rdp-evidence li {
  margin-top: 5px;
  font-size: 11px;
  line-height: 1.35;
  color: var(--text);
  overflow-wrap: anywhere;
}
.jm-rdp-evidence p {
  margin: 8px 0 0;
  font-size: 11px;
  color: var(--text-dim);
}
.jm-rdp-feedback { margin-top: 14px; display: grid; gap: 8px; }
.jm-rdp-feedback textarea {
  width: 100%; padding: 10px; border-radius: 9px; resize: none;
  border: 1px solid var(--line); background: rgba(255, 255, 255, 0.05);
  font-size: 16px; line-height: 1.4;
}
.jm-rdp-feedback textarea:focus { outline: none; border-color: rgba(201, 162, 39, 0.45); }
.jm-rdp-feedback-btn {
  padding: 10px; border-radius: 9px; font-weight: 700; font-size: 13px;
  background: rgba(201, 162, 39, 0.16); color: var(--gold-bright);
  border: 1px solid rgba(201, 162, 39, 0.32);
}
.jm-rdp-feedback-btn:disabled { opacity: .4; }
.jm-rdp-feedback-msg { font-size: 12px; }
.jm-rdp-feedback-msg.sent { color: var(--green); }
.jm-rdp-feedback-msg.error { color: var(--red); }

/* ── Setup ─────────────────────────────────────────────────── */
.jm-setup-card {
  padding: 14px; border-radius: 14px; margin-bottom: 12px;
  background: var(--bg-card); border: 1px solid var(--line);
  display: grid; gap: 12px;
}
.jm-setup-field { display: grid; gap: 6px; }
.jm-setup-field span { font-size: 12px; font-weight: 700; color: var(--text-dim); }
.jm-setup-field input {
  padding: 11px 12px; border-radius: 9px;
  border: 1px solid var(--line); background: rgba(255, 255, 255, 0.05);
  font-size: 16px;
}
.jm-setup-field input:focus { outline: none; border-color: rgba(201, 162, 39, 0.45); }
.jm-conn-status { font-size: 13px; font-weight: 700; }
.jm-conn-status.ok { color: var(--green); }
.jm-conn-status.err { color: var(--red); }
.jm-setup-row { display: flex; justify-content: space-between; align-items: center; font-size: 13px; }
.jm-badge {
  font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 6px;
  background: rgba(255, 255, 255, 0.06); color: var(--text-dim);
}
.jm-badge.ok { background: rgba(91, 186, 136, 0.15); color: var(--green); }
.jm-action-btn {
  padding: 11px; border-radius: 10px; font-weight: 700; font-size: 14px;
  background: var(--gold); color: var(--bg);
}
.jm-install-hint {
  margin-top: 4px; padding: 10px 12px; border-radius: 10px;
  border: 1px dashed var(--line); font-size: 12px; color: var(--text-dim);
  text-align: center; line-height: 1.4;
}

/* ── Artifact viewer overlay ───────────────────────────────── */
.jm-artifact-overlay {
  position: fixed; inset: 0; z-index: 100;
  display: flex; flex-direction: column;
  background: #05070c;
}
.jm-artifact-bar {
  position: absolute; top: 0; left: 0; right: 0; z-index: 10;
  display: flex; flex-direction: column; gap: 8px;
  padding: max(8px, env(safe-area-inset-top)) 12px 8px;
  background: rgba(15, 19, 27, 0.92); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
  transition: transform .22s ease, opacity .22s ease;
}
.jm-artifact-bar.is-hidden { transform: translateY(-110%); opacity: 0; pointer-events: none; }
.jm-artifact-barrow { display: flex; align-items: center; gap: 10px; }
.jm-artifact-ic {
  width: 44px; height: 44px; border-radius: 10px; font-size: 16px;
  display: grid; place-items: center; background: rgba(255,255,255,0.07); color: var(--text);
}
.jm-artifact-ic.is-on { background: rgba(201,162,39,0.22); }
.jm-artifact-search { display: flex; align-items: center; gap: 8px; }
.jm-artifact-search input {
  flex: 1; min-width: 0; background: var(--bg-card); border: 1px solid var(--line-soft);
  border-radius: 9px; padding: 8px 11px; color: var(--text); font-size: 14px; outline: none;
}
.jm-artifact-search-n { font-size: 11px; color: var(--text-dim); white-space: nowrap; }
.jm-artifact-search-x { color: var(--text-dim); font-size: 14px; padding: 2px 6px; }
/* Keynote-style slide strip */
.jm-deck-strip {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 9;
  display: flex; gap: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch;
  padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
  background: rgba(15, 19, 27, 0.92); backdrop-filter: blur(8px); border-top: 1px solid var(--line);
}
.jm-deck-chip {
  flex: 0 0 auto; width: 96px; height: 58px; border-radius: 8px;
  background: var(--bg-card); border: 1px solid var(--line-soft); color: var(--text-dim);
  display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between;
  padding: 5px 7px; text-align: left; overflow: hidden;
}
.jm-deck-chip.is-cur { border-color: var(--gold-bright); color: var(--text); background: rgba(201,162,39,0.14); }
.jm-deck-chip.is-hit { box-shadow: inset 0 0 0 2px rgba(255,213,74,0.6); }
.jm-deck-chip-n { font-size: 11px; font-weight: 700; color: var(--gold-bright); }
.jm-deck-chip-l { font-size: 9.5px; line-height: 1.25; max-height: 24px; overflow: hidden; opacity: .85; }
.jm-artifact-hint {
  position: absolute; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom)); transform: translateX(-50%);
  z-index: 9; padding: 7px 14px; border-radius: 16px; font-size: 12px; white-space: nowrap;
  background: rgba(15, 19, 27, 0.86); color: var(--text-dim); border: 1px solid var(--line-soft);
  transition: opacity .4s ease; pointer-events: none;
}
.jm-artifact-hint.is-gone { opacity: 0; }
.jm-artifact-close { font-size: 20px; color: var(--text); width: 44px; height: 44px; flex-shrink: 0; }
.jm-artifact-name {
  flex: 1; min-width: 0; font-size: 14px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.jm-artifact-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.jm-artifact-share {
  padding: 6px 14px; border-radius: 8px; font-size: 13px; font-weight: 700;
  background: rgba(201, 162, 39, 0.16); color: var(--gold-bright);
  border: 1px solid rgba(201, 162, 39, 0.32);
}
.jm-artifact-share:disabled { opacity: .4; }
.jm-artifact-dl {
  width: 44px; height: 44px; border-radius: 10px;
  display: grid; place-items: center; font-size: 18px;
  background: rgba(255, 255, 255, 0.07); color: var(--text);
}
.jm-artifact-stage {
  flex: 1; min-height: 0; overflow: auto;
  -webkit-overflow-scrolling: touch;
  display: flex; align-items: center; justify-content: center;
  padding-bottom: env(safe-area-inset-bottom);
}
.jm-artifact-msg {
  display: grid; gap: 12px; justify-items: center; text-align: center;
  padding: 30px; font-size: 14px; color: var(--text-dim);
}
.jm-artifact-msg.is-error { color: var(--red); }
.jm-artifact-dllink {
  padding: 10px 18px; border-radius: 10px; font-weight: 700;
  background: rgba(201, 162, 39, 0.16); color: var(--gold-bright);
  border: 1px solid rgba(201, 162, 39, 0.32);
}
.jm-artifact-img { max-width: 100%; max-height: 100%; object-fit: contain; }
.jm-artifact-frame { width: 100%; height: 100%; border: none; background: #fff; }
/* Pinch/pan/double-tap zoom viewer (one-pagers, decks, images) */
.jm-zoom-wrap { position: relative; align-self: stretch; width: 100%; flex: 1; min-height: 0; overflow: hidden; touch-action: none; background: #0b0e14; }
.jm-zoom-content { position: absolute; top: 0; left: 0; transform-origin: 0 0; will-change: transform; }
.jm-zoom-frame { width: 100%; height: 100%; border: 0; display: block; background: #fff; }
.jm-zoom-img { width: 100%; height: 100%; display: block; background: #fff; }
.jm-zoom-catch { position: absolute; inset: 0; z-index: 5; background: transparent; touch-action: none; }
.jm-zoom-fit {
  position: absolute; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 6;
  width: 44px; height: 44px; border-radius: 22px; font-size: 18px;
  background: rgba(20,24,33,0.85); border: 1px solid var(--line-soft); color: var(--text);
  display: flex; align-items: center; justify-content: center;
}
.jm-artifact-text {
  align-self: stretch; width: 100%; height: 100%; margin: 0; padding: 14px;
  font: 13px/1.5 ui-monospace, monospace; white-space: pre-wrap;
  overflow-wrap: anywhere; color: rgba(246, 237, 210, 0.85); overflow-y: auto;
}

/* ── Spinners / animations ─────────────────────────────────── */
.jm-spin-sm {
  display: inline-block; width: 12px; height: 12px;
  border: 2px solid rgba(201, 162, 39, 0.25);
  border-top-color: var(--gold); border-radius: 50%;
  animation: jm-spin .7s linear infinite;
  vertical-align: middle;
}
@keyframes jm-spin { to { transform: rotate(360deg); } }
@keyframes jm-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(91, 186, 136, 0.45); opacity: 1; }
  50% { box-shadow: 0 0 0 6px rgba(91, 186, 136, 0); opacity: .6; }
}
@keyframes jm-rec {
  0%, 100% { box-shadow: 0 0 0 0 rgba(227, 92, 82, 0.5); }
  50% { box-shadow: 0 0 0 8px rgba(227, 92, 82, 0); }
}

/* ── Claude-style input bar (+ / text / mic / voice / send) ────────── */
.jm-composer { align-items: flex-end; }
.jm-plus-btn {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; font-size: 22px; line-height: 1;
  background: rgba(255,255,255,0.06); border: 1px solid var(--line); color: var(--text);
}
.jm-ic-btn {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; font-size: 17px;
  background: rgba(255,255,255,0.06); border: 1px solid var(--line);
}
.jm-ic-btn.recording { background: var(--red); border-color: var(--red); color: #fff; animation: jm-rec 1s ease-in-out infinite; }
.jm-plus-btn:disabled, .jm-ic-btn:disabled { opacity: .4; }

/* attachment pills above the input */
.jm-att-row { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 12px 0; }
.jm-att-pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; padding: 4px 8px; border-radius: 8px;
  background: rgba(201,162,39,0.12); border: 1px solid rgba(201,162,39,0.28); color: var(--text);
}
.jm-att-pill button { color: var(--text-dim); font-size: 13px; line-height: 1; padding: 0 2px; }
.jm-bubble-att { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.jm-att-chip { font-size: 11px; padding: 2px 6px; border-radius: 6px; background: rgba(255,255,255,0.1); color: var(--text-dim); }

/* ── Voice overlay (full-screen, orb) ──────────────────────────────── */
.jm-voice-overlay {
  position: fixed; inset: 0; z-index: 90;
  display: flex; flex-direction: column; align-items: center;
  padding: max(20px, env(safe-area-inset-top)) 20px calc(28px + env(safe-area-inset-bottom));
  background: radial-gradient(circle at 50% 38%, #14213a 0%, #070a10 70%);
}
.jm-voice-close {
  align-self: flex-end; width: 44px; height: 44px; border-radius: 50%;
  font-size: 18px; color: var(--text); background: rgba(255,255,255,0.08);
}
.jm-voice-head { display: grid; justify-items: center; gap: 8px; margin-top: 8px; }
.jm-voice-name { font-size: 18px; font-weight: 700; }
.jm-voice-transcript {
  flex: 1; min-height: 0; overflow-y: auto; width: 100%;
  display: flex; flex-direction: column; justify-content: center; gap: 12px;
  padding: 20px 6px; text-align: center;
}
.jm-voice-said { font-size: 17px; color: var(--text); line-height: 1.4; }
.jm-voice-reply { font-size: 15px; color: rgba(246,237,210,0.78); line-height: 1.5; max-height: 32vh; overflow-y: auto; }
.jm-voice-empty { font-size: 14px; color: var(--text-dim); }
.jm-orb {
  width: 132px; height: 132px; border-radius: 50%; flex: 0 0 auto;
  display: grid; place-items: center; border: none;
  background: radial-gradient(circle at 50% 40%, rgba(201,162,39,0.35), rgba(7,10,16,0.6) 72%);
  box-shadow: 0 0 0 1px rgba(201,162,39,0.4), 0 0 40px rgba(201,162,39,0.25);
}
.jm-orb-core {
  width: 64%; height: 64%; border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, var(--gold-bright), var(--gold) 70%);
}
.jm-orb.phase-idle .jm-orb-core { animation: jm-breathe 3.5s ease-in-out infinite; }
.jm-orb.phase-recording { box-shadow: 0 0 0 2px var(--red), 0 0 60px rgba(227,92,82,0.5); }
.jm-orb.phase-recording .jm-orb-core { background: radial-gradient(circle at 50% 40%, #ff8a80, var(--red) 70%); animation: jm-pulseOrb 1s ease-in-out infinite; }
.jm-orb.phase-thinking .jm-orb-core { animation: jm-spin 1.2s linear infinite; background: conic-gradient(var(--gold-bright), rgba(201,162,39,0.2), var(--gold-bright)); }
.jm-orb:disabled { opacity: .8; }
.jm-voice-status { margin-top: 16px; font-size: 15px; font-weight: 600; color: var(--text); }
.jm-voice-hint { margin-top: 4px; font-size: 12px; color: var(--text-faint); }
@keyframes jm-breathe { 0%,100% { transform: scale(1); opacity: .9 } 50% { transform: scale(1.06); opacity: 1 } }
@keyframes jm-pulseOrb { 0%,100% { transform: scale(1) } 50% { transform: scale(1.12) } }

/* ── Attach sheet ──────────────────────────────────────────────────── */
.jm-sheet-backdrop {
  position: fixed; inset: 0; z-index: 95;
  background: rgba(0,0,0,0.5);
  display: flex; align-items: flex-end;
}
.jm-sheet {
  width: 100%; background: var(--bg-raised);
  border-radius: 18px 18px 0 0; padding: 8px 12px calc(12px + env(safe-area-inset-bottom));
  display: grid; gap: 6px;
  border-top: 1px solid var(--line);
}
.jm-sheet-grip { width: 40px; height: 4px; border-radius: 2px; background: rgba(255,255,255,0.2); margin: 4px auto 8px; }
.jm-sheet-item {
  display: grid; grid-template-columns: 28px 1fr; align-items: center; gap: 10px;
  text-align: left; padding: 13px 12px; border-radius: 12px;
  background: var(--bg-card); font-size: 15px; font-weight: 600; color: var(--text);
}
.jm-sheet-item .jm-sheet-ic { font-size: 20px; grid-row: span 2; }
.jm-sheet-sub { grid-column: 2; font-size: 11px; font-weight: 400; color: var(--text-faint); }
.jm-sheet-item.is-soon { opacity: .55; }
.jm-soon { font-size: 10px; background: rgba(255,255,255,0.1); padding: 1px 6px; border-radius: 6px; color: var(--text-dim); margin-left: 6px; }
.jm-sheet-cancel { margin-top: 4px; padding: 13px; border-radius: 12px; background: var(--bg-card); font-weight: 700; color: var(--gold-bright); }

/* Chat search (ChatList) */
.jm-chat-search { display: flex; align-items: center; gap: 8px; margin: 10px 12px 4px; padding: 9px 12px; border-radius: 12px; background: var(--bg-card); border: 1px solid var(--line-soft); }
.jm-chat-search-ic { font-size: 14px; opacity: .7; }
.jm-chat-search input { flex: 1; background: transparent; border: none; outline: none; color: var(--text); font-size: 15px; }
.jm-chat-search input::placeholder { color: var(--text-faint); }
.jm-chat-search-clear { color: var(--text-dim); font-size: 14px; padding: 2px 6px; }

/* Artefakt-first: highlight the artifact block above the result text */
.jm-rdp-artifacts.is-primary { background: var(--bg-raised); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; margin: 4px 0 10px; }
.jm-rdp-artifacts.is-primary .jm-rdp-artifacts-label { color: var(--gold-bright); font-weight: 600; }

/* Voice-mode artifact card (task result shown inside the voice overlay) */
.jm-voice-artifact-card { width: min(92%, 420px); margin: 4px auto 0; padding: 12px 14px; border-radius: 14px; background: var(--bg-raised); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
.jm-voice-artifact-title { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--gold-bright); }
.jm-voice-artifact-summary { font-size: 14px; color: var(--text-dim); line-height: 1.4; }
.jm-voice-feedback-btn { align-self: flex-start; padding: 8px 14px; border-radius: 10px; background: var(--bg-card); border: 1px solid var(--line-soft); color: var(--text); font-size: 14px; font-weight: 600; }

/* ── Start / Bento Dashboard ─────────────────────────────────── */
.jm-start {
  padding: 0 16px 110px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  height: 100%;
}
.jm-start-header { padding: 2px 2px 12px; }
.jm-start-greeting { font-size: 30px; font-weight: 900; color: var(--text); line-height: 1.1; letter-spacing: -.5px; }
.jm-start-date { font-size: 11px; font-family: 'DM Mono', monospace; color: var(--text-faint); text-transform: uppercase; letter-spacing: .08em; margin-top: 3px; }

/* ── Friday-Konsole (Leitstand-Entwurf): Verlauf + prominenter Mic-Button ── */
.jm-friday-card {
  display: flex; align-items: center; gap: 13px;
  width: 100%;
  background: linear-gradient(135deg, rgba(201,162,39,.16), rgba(95,208,224,.05));
  border: 1px solid rgba(201,162,39,.32); border-radius: 20px;
  padding: 12px 14px; margin-bottom: 14px; cursor: pointer;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  text-align: left; -webkit-tap-highlight-color: transparent;
  transition: background .15s, transform .1s;
}
.jm-friday-card:active { transform: scale(.99); background: linear-gradient(135deg, rgba(201,162,39,.22), rgba(95,208,224,.08)); }
.jm-friday-card-left { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
.jm-friday-card-txt { min-width: 0; flex: 1; }
.jm-friday-card-name { font-size: 15px; font-weight: 800; color: var(--text); }
.jm-friday-card-name b { color: var(--gold-bright); }
.jm-friday-card-sub { font-size: 12px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
/* Gold-Mic-Button statt Pfeil */
.jm-friday-card-mic {
  width: 44px; height: 44px; border-radius: 50%; flex: 0 0 auto;
  display: grid; place-items: center; font-size: 18px;
  background: radial-gradient(circle at 50% 35%, var(--gold-bright), var(--gold) 72%);
  color: #1a1305; border: none; cursor: pointer;
  box-shadow: 0 0 0 4px rgba(201,162,39,.18), 0 0 20px rgba(201,162,39,.35);
  -webkit-tap-highlight-color: transparent; transition: transform .1s;
}
.jm-friday-card-mic:active { transform: scale(.92); }
.jm-friday-card-arrow { display: none; }

/* ── Bento-Stat-Reihe (asymmetrisch, Glas, Live-Dot) ── */
.jm-stat-row { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 9px; margin-bottom: 20px; }
.jm-stat-tile {
  text-align: left;
  background: var(--bg-card); border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px; padding: 12px 13px; position: relative; overflow: hidden;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.jm-stat-val { display: block; font-size: 25px; font-weight: 800; color: var(--gold-bright); line-height: 1; letter-spacing: -.02em; }
.jm-stat-lbl { display: block; font-size: 9px; font-family: 'DM Mono', monospace; color: var(--text-dim); text-transform: uppercase; letter-spacing: .1em; margin-top: 6px; }
.jm-stat-tile.is-live::after {
  content: ''; position: absolute; top: 12px; right: 12px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--green); box-shadow: 0 0 8px var(--green);
}

/* Section label */
.jm-start-section-label { font-size: 11px; font-weight: 700; letter-spacing: .02em; color: var(--text); margin-bottom: 11px; padding-left: 2px; }

/* ── Agenten-Grid: Foto-Kacheln (rund-eckig), Status-Dots oben, Gold-Glow ── */
.jm-agent-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 11px; margin-bottom: 22px; }
.jm-agent-tile {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  background: none; border: none; padding: 0; cursor: pointer; position: relative;
  -webkit-tap-highlight-color: transparent; transition: transform .1s;
}
.jm-agent-tile:active { transform: scale(.96); }
/* Rund-eckige Foto-Kachel statt Kreis */
.jm-agent-tile-av { position: relative; }
.jm-agent-tile-av .jm-avatar {
  border-radius: 20px !important;
  border: 1px solid var(--line);
  background: linear-gradient(150deg, #161b26, #0c1019);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
}
.jm-agent-tile-av .jm-avatar img { border-radius: 20px; }
.jm-agent-tile.is-busy .jm-avatar {
  border-color: var(--gold) !important;
  box-shadow: 0 0 0 2px rgba(201,162,39,.22), 0 0 16px rgba(201,162,39,.3) !important;
}
.jm-agent-dot {
  position: absolute; top: -3px; right: 6px;
  width: 13px; height: 13px; border-radius: 50%; border: 2.5px solid var(--bg); z-index: 3;
}
.jm-agent-dot.is-busy { background: var(--gold-bright); box-shadow: 0 0 8px var(--gold-bright); }
.jm-agent-dot.is-ready { background: var(--green); }
.jm-agent-unread {
  position: absolute; top: -5px; right: -5px;
  background: var(--red); color: #fff; font-size: 9px; font-weight: 700;
  border-radius: 10px; padding: 1px 4px; min-width: 16px; text-align: center;
  border: 2px solid var(--bg); z-index: 4;
}
.jm-agent-tile-name { font-size: 11px; font-weight: 600; color: var(--text); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.jm-agent-tile-role { font-size: 9px; color: var(--text-faint); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

/* Mini project cards */
.jm-start-projects { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.jm-proj-mini {
  width: 100%; background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.07); border-radius: 12px;
  padding: 11px 14px; cursor: pointer; text-align: left;
  -webkit-tap-highlight-color: transparent; transition: background .15s;
}
.jm-proj-mini:active { background: rgba(255,255,255,.07); }
.jm-proj-mini-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 7px; }
.jm-proj-mini-title { font-size: 13px; font-weight: 600; color: var(--text); }
.jm-proj-mini-status { font-size: 9px; font-family: 'DM Mono', monospace; color: var(--text-dim); }
.jm-proj-mini-status.is-active { color: var(--green); }
.jm-proj-mini-bar { height: 4px; border-radius: 99px; background: rgba(255,255,255,.08); overflow: hidden; }
.jm-proj-mini-bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--gold), #f0c45c); border-radius: 99px; }

/* Stat-Tile als Button (klickbar) */
.jm-stat-tile-btn {
  cursor: pointer; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07);
  -webkit-tap-highlight-color: transparent; transition: background .15s;
}
.jm-stat-tile-btn:active { background: rgba(201,162,39,.1); border-color: rgba(201,162,39,.3); }

/* Section-More-Link */
.jm-start-section-more {
  font-size: 9px; font-family: 'DM Mono', monospace; letter-spacing: .06em;
  color: var(--gold); background: none; border: none; cursor: pointer; padding: 0;
  -webkit-tap-highlight-color: transparent;
}

/* Project command screen */
.jm-projects-view {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 0 16px 110px;
}
.jm-projects-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-bottom: 8px;
}
.jm-stat-cyan { color: #5fd0e0; }
.jm-stat-red { color: var(--red); }
.jm-sec-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 0 2px;
}
.jm-sec-head h3 { font-size: 13px; font-weight: 700; letter-spacing: .02em; }
.jm-proj-list { display: flex; flex-direction: column; gap: 10px; }
.jm-proj-card {
  width: 100%;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 9px;
  position: relative;
  overflow: hidden;
  padding: 13px 14px 13px 16px;
  border-radius: 18px;
  background: var(--bg-card);
  border: 1px solid rgba(255,255,255,.08);
}
.jm-proj-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--gold);
}
.jm-proj-card.blocked::before { background: var(--red); }
.jm-proj-card.done::before { background: var(--green); }
.jm-proj-card:active { background: var(--bg-card-hover); }
.jm-proj-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.jm-proj-title {
  min-width: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.jm-proj-badge {
  flex: 0 0 auto;
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: 3px 8px;
  border-radius: 8px;
  background: rgba(201,162,39,.16);
  color: var(--gold-bright);
}
.jm-proj-badge.blocked { background: rgba(227,92,82,.16); color: #ff8d84; }
.jm-proj-badge.done { background: rgba(91,186,136,.16); color: var(--green); }
.jm-proj-meta {
  display: flex;
  gap: 12px;
  min-width: 0;
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--text-dim);
}
.jm-proj-pct { color: var(--gold-bright); }
.jm-proj-bar { height: 6px; border-radius: 4px; background: rgba(255,255,255,.07); overflow: hidden; }
.jm-proj-bar span {
  display: block;
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--gold), var(--gold-bright));
}
.jm-proj-card.blocked .jm-proj-bar span { background: linear-gradient(90deg, #a23, var(--red)); }
.jm-proj-card.done .jm-proj-bar span { background: linear-gradient(90deg, #2e7d52, var(--green)); }
.jm-proj-avatars { display: flex; align-items: center; min-height: 26px; }
.jm-proj-avatars .jm-avatar {
  margin-left: -7px;
  border: 2px solid var(--bg-raised);
  box-shadow: none;
}
.jm-proj-avatars .jm-avatar:first-child { margin-left: 0; }
.jm-proj-more {
  width: 26px; height: 26px; border-radius: 50%;
  margin-left: -7px;
  display: grid; place-items: center;
  border: 2px solid var(--bg-raised);
  background: #1a2030;
  color: var(--gold);
  font-size: 10px;
  font-weight: 700;
}
.jm-task-list { display: flex; flex-direction: column; gap: 9px; }
.jm-task-card {
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold-bright);
  border-radius: 10px;
  background: var(--bg-card);
}
.jm-task-card.done { border-left-color: var(--green); }
.jm-task-card.blocked { border-left-color: var(--red); }
.jm-task-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.jm-task-agent {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 800;
  color: var(--gold-bright);
}
.jm-task-title {
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.35;
  color: var(--text);
}
.jm-task-progress {
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.35;
  color: var(--text-dim);
}
.jm-task-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 7px;
  font-size: 10px;
  font-family: 'DM Mono', monospace;
  color: var(--text-faint);
}
.jm-task-result-btn {
  margin-top: 9px;
  width: 100%;
  min-height: 34px;
  border-radius: 8px;
  border: 1px solid rgba(201,162,39,.34);
  background: rgba(201,162,39,.10);
  color: var(--gold-bright);
  font-size: 12px;
  font-weight: 800;
}
.jm-feed { display: flex; flex-direction: column; gap: 8px; }
.jm-feed-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  border-radius: 14px;
  background: var(--bg-card);
  border: 1px solid var(--line-soft);
}
.jm-feed-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.jm-feed-row.run .jm-feed-dot { background: var(--gold-bright); box-shadow: 0 0 6px var(--gold-bright); }
.jm-feed-row.ok .jm-feed-dot { background: var(--green); }
.jm-feed-text { flex: 1; min-width: 0; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jm-feed-text b { font-weight: 700; }
.jm-feed-text span { color: var(--text-dim); }
.jm-feed-meta {
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: 10px;
  color: var(--text-faint);
  letter-spacing: .05em;
}

/* ── Finance Tab v2 ──────────────────────────────────────────── */
.jm-finance-refresh-btn {
  width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08); color: var(--text-dim); font-size: 16px;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; -webkit-tap-highlight-color: transparent;
}
.jm-finance-state {
  font-size: 13px; color: var(--text-faint); text-align: center; padding: 24px 0;
}
.jm-finance-state.is-err { color: var(--red); }
.jm-finance-kpi-row { display: flex; gap: 10px; margin-bottom: 20px; }
.jm-finance-kpi {
  flex: 1; text-align: center; background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07); border-radius: 14px; padding: 14px 4px;
}
.jm-finance-kpi-val { display: block; font-size: 18px; font-weight: 900; line-height: 1.1; word-break: break-all; }
.jm-finance-kpi-lbl { display: block; font-size: 8px; font-family: 'DM Mono', monospace; color: var(--text-faint); letter-spacing: .1em; margin-top: 4px; }
.jm-finance-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 4px; }
.jm-finance-row {
  background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.07);
  border-radius: 12px; padding: 11px 13px;
}
.jm-finance-row-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 5px; }
.jm-finance-row-name { font-size: 13px; font-weight: 600; color: var(--text); }
.jm-finance-row-badge { font-size: 10px; font-family: 'DM Mono', monospace; color: var(--text-dim); flex-shrink: 0; margin-left: 8px; }
.jm-finance-row-sub { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-faint); font-family: 'DM Mono', monospace; }
.jm-finance-member-bar { height: 3px; border-radius: 99px; background: rgba(255,255,255,.08); overflow: hidden; margin-top: 7px; }
.jm-finance-member-bar span { display: block; height: 100%; border-radius: 99px; transition: width .4s; }

/* Cockpit-Header (sticky top) */
.finance-cockpit-header {
  padding: 14px 0 8px; border-bottom: 1px solid rgba(255,255,255,.07); flex-shrink: 0;
}

/* Tenant-Toggle */
.tenant-toggle { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; }
.tenant-toggle-btn {
  flex: 1; padding: 7px 10px; border-radius: 10px; font-size: 12px; font-weight: 700;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
  color: var(--text-dim); cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background .15s, color .15s, border-color .15s;
}
.tenant-toggle-btn.is-active {
  background: #c9a227; border-color: #c9a227; color: #070a10;
}

/* Ampel-Row */
.ampel-row { display: flex; justify-content: space-between; margin: 4px 0 8px; }
.ampel-cell { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 1; }
.ampel-dot { width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0; }
.ampel-dot-label { font-size: 9px; font-family: 'DM Mono', monospace; color: var(--text-faint); letter-spacing: .04em; text-align: center; line-height: 1.2; }
.ampel-summary { font-size: 11px; font-family: 'DM Mono', monospace; text-align: center; margin-bottom: 2px; }

/* Finance Sections (Accordion) */
.finance-section { border-bottom: 1px solid rgba(255,255,255,.06); }
.finance-section-header {
  display: flex; justify-content: space-between; align-items: center;
  width: 100%; padding: 12px 0; background: none; border: none; cursor: pointer;
  color: var(--text-dim); font-size: 11px; font-family: 'DM Mono', monospace;
  font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  -webkit-tap-highlight-color: transparent;
}
.finance-section-header.is-warn { color: #E3B341; }
.finance-section-chevron { font-size: 13px; color: var(--text-faint); }
.finance-section-body { padding-bottom: 10px; }
.finance-section-ok { font-size: 12px; color: #3FB950; padding: 4px 0 8px; font-family: 'DM Mono', monospace; }
.finance-section-item { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.04); }
.finance-section-item:last-child { border-bottom: none; }
.finance-section-item-name { font-size: 13px; font-weight: 600; color: var(--text); line-height: 1.3; }
.finance-section-item-sub { font-size: 10px; font-family: 'DM Mono', monospace; color: var(--text-faint); margin-top: 2px; }

/* Finance Actions Footer (sticky bottom) */
.finance-actions-footer {
  display: flex; gap: 10px; padding: 12px 0 4px;
  border-top: 1px solid rgba(255,255,255,.07); flex-shrink: 0;
}
.finance-actions-btn {
  flex: 1; padding: 10px 8px; border-radius: 10px; font-size: 12px; font-weight: 700;
  background: #c9a227; color: #070a10; border: none; cursor: pointer;
  font-family: Inter, -apple-system, sans-serif; letter-spacing: .02em;
  -webkit-tap-highlight-color: transparent; transition: opacity .15s;
}
.finance-actions-btn:disabled { opacity: .45; cursor: not-allowed; }
.finance-actions-btn.is-secondary {
  background: rgba(201,162,39,.12); color: #c9a227; border: 1px solid rgba(201,162,39,.3);
}
.finance-actions-btn:active:not(:disabled) { opacity: .8; }

/* Finance Report View */
.finance-report-view {
  display: flex; flex-direction: column; min-height: 0; flex: 1;
  overflow: hidden;
}
.finance-report-topbar {
  display: flex; align-items: center; gap: 12px; padding: 12px 0 10px;
  border-bottom: 1px solid rgba(255,255,255,.07); flex-shrink: 0;
}
.finance-report-back {
  background: none; border: none; color: #c9a227; font-size: 14px; font-weight: 700;
  cursor: pointer; padding: 0; -webkit-tap-highlight-color: transparent;
}
.finance-report-title { font-size: 12px; font-family: 'DM Mono', monospace; color: var(--text-dim); flex: 1; }
.finance-report-paper {
  flex: 1; overflow-y: auto; background: #fff; color: #1a1a1a;
  border-radius: 12px; margin: 12px 0; padding: 20px 16px;
}
.finance-report-kpi-strip {
  display: flex; gap: 6px; margin-bottom: 18px; padding-bottom: 14px;
  border-bottom: 2px solid #c9a227; flex-wrap: wrap;
}
.finance-report-kpi-cell {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  flex: 1; min-width: 50px;
}
.finance-report-kpi-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.finance-report-kpi-val { font-size: 13px; font-weight: 900; font-family: 'DM Mono', monospace; color: #070a10; }
.finance-report-kpi-lbl { font-size: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: #999; text-align: center; }
.finance-report-cols { display: flex; gap: 16px; }
.finance-report-col { flex: 1; min-width: 0; }
.finance-report-col-head { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: #c9a227; margin-bottom: 8px; }
.finance-report-row { padding: 6px 0; border-bottom: 1px solid #f0f0f0; }
.finance-report-row-name { display: block; font-size: 12px; font-weight: 600; color: #1a1a1a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.finance-report-row-val { display: block; font-size: 12px; font-family: 'DM Mono', monospace; color: #070a10; }
.finance-report-row-sub { display: block; font-size: 10px; color: #999; font-family: 'DM Mono', monospace; }
.finance-report-empty { font-size: 11px; color: #bbb; font-style: italic; padding: 8px 0; }
.finance-report-total { display: flex; justify-content: space-between; font-size: 11px; font-family: 'DM Mono', monospace; font-weight: 700; color: #070a10; padding: 5px 0 2px; border-top: 1px solid #eee; margin-top: 4px; }
.finance-report-footer { margin-top: 16px; font-size: 10px; color: #bbb; text-align: center; border-top: 1px solid #eee; padding-top: 10px; }
.finance-report-actions { display: flex; gap: 10px; padding: 8px 0 4px; flex-shrink: 0; }
.finance-report-btn {
  flex: 1; padding: 10px 8px; border-radius: 10px; font-size: 12px; font-weight: 700;
  background: #c9a227; color: #070a10; border: none; cursor: pointer;
  font-family: Inter, -apple-system, sans-serif; -webkit-tap-highlight-color: transparent;
  transition: opacity .15s;
}
.finance-report-btn.is-secondary {
  background: rgba(201,162,39,.12); color: #c9a227; border: 1px solid rgba(201,162,39,.3);
}
.finance-report-btn:disabled { opacity: .45; cursor: not-allowed; }
.finance-drive-note { font-size: 11px; font-family: 'DM Mono', monospace; color: var(--text-dim); text-align: center; padding: 4px 0 8px; }
.finance-export-btn:disabled { opacity: .4; cursor: not-allowed; }

/* katia minimum touch targets */
.jm-rdp-expand,
.jm-rdp-feedback-btn,
.jm-chip-btn,
.jm-chat-search-clear,
.jm-artifact-search-x {
  min-width: 44px;
  min-height: 44px;
}