/* =========================================================
   CONNIE — Voice-driven AI Command Center
   Dark, futuristic, V-gradient (Lime → Teal)
   ========================================================= */

@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@100;200;300;400;500;600&family=Roboto+Mono:wght@400;500;600&display=swap");

:root {
  /* Background system (user spec: midnight) */
  --bg:               #1A1A2E;
  --bg-card:          #22223A;
  --bg-accent:        #2D2D4A;
  --bg-deeper:        #14142A;

  /* Accents — V gradient */
  --lime:             #E1F528;
  --teal:             #05E6A5;
  --v-gradient:       linear-gradient(135deg, #E1F528 0%, #05E6A5 100%);
  --v-gradient-soft:  linear-gradient(135deg, rgba(225,245,40,0.18) 0%, rgba(5,230,165,0.18) 100%);
  --v-aura:           radial-gradient(60% 60% at 50% 50%, rgba(225,245,40,0.25) 0%, rgba(5,230,165,0.15) 50%, transparent 80%);

  /* Text */
  --fg-1:             #FFFFFF;
  --fg-2:             #B0B0B0;
  --fg-3:             #6B7273;
  --fg-on-accent:     #0A0A1A;

  /* Status */
  --success:          #05E6A5;
  --warning:          #FFB020;
  --danger:           #FF4D6D;

  /* Lines */
  --line:             rgba(255,255,255,0.08);
  --line-strong:      rgba(255,255,255,0.16);

  /* Glass */
  --glass-bg:         rgba(176,176,176,0.06);
  --glass-bg-strong:  rgba(176,176,176,0.10);
  --glass-border:     rgba(255,255,255,0.10);
  --glass-blur:       blur(14px);

  /* Typography */
  --font-display:     "Roboto", system-ui, sans-serif;
  --font-body:        "Roboto", system-ui, sans-serif;
  --font-mono:        "Roboto Mono", "Monaco", monospace;

  /* Radii */
  --r-card:           16px;
  --r-large:          24px;
  --r-input:          12px;
  --r-pill:           999px;

  /* Shadow / glow */
  --shadow-card:      0 1px 0 rgba(255,255,255,0.04) inset, 0 12px 32px rgba(0,0,0,0.45);
  --glow-teal:        0 0 28px rgba(5,230,165,0.35);
  --glow-lime:        0 0 28px rgba(225,245,40,0.35);
  --glow-v:           0 0 28px rgba(5,230,165,0.35), 0 0 48px rgba(225,245,40,0.22);

  /* Motion */
  --ease:             cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast:         160ms;
  --dur:              240ms;
  --dur-slow:         480ms;

  /* dashboard-v3: speech text size (overridden from the settings panel via JS;
     default = the old "M" clamp so the layout is unchanged before any choice) */
  --speech-size:      clamp(20px, 2.0vw, 25px);
}

/* =========================================================
   Reset / base
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }
html, body, #root {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--bg);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow: hidden;
}
::selection { background: var(--teal); color: #000; }
button { font-family: inherit; }

/* Dot-grid background texture */
.bg-stage {
  position: fixed;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(5,230,165,0.06), transparent 60%),
    radial-gradient(ellipse 50% 40% at 50% 100%, rgba(225,245,40,0.04), transparent 70%),
    var(--bg);
  pointer-events: none;
}
.bg-stage::before {
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(5,230,165,0.10) 1px, transparent 1px);
  background-size: 18px 18px;
  mask-image: radial-gradient(ellipse 90% 80% at 50% 50%, #000 30%, transparent 90%);
  -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 50%, #000 30%, transparent 90%);
  opacity: 0.55;
}
.bg-stage::after {
  /* faint starfield */
  content: "";
  position: absolute; inset: 0;
  background-image:
    radial-gradient(1px 1px at 12% 18%, rgba(255,255,255,0.5), transparent 60%),
    radial-gradient(1px 1px at 78% 32%, rgba(255,255,255,0.4), transparent 60%),
    radial-gradient(1px 1px at 30% 70%, rgba(5,230,165,0.4), transparent 60%),
    radial-gradient(1px 1px at 65% 88%, rgba(225,245,40,0.3), transparent 60%),
    radial-gradient(1px 1px at 92% 52%, rgba(255,255,255,0.3), transparent 60%),
    radial-gradient(1px 1px at 8% 60%, rgba(255,255,255,0.4), transparent 60%);
  opacity: 0.7;
}

/* =========================================================
   App layout
   ========================================================= */
.app {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: 60px 1fr auto;
  height: 100vh;
  width: 100vw;
}

/* Topbar */
.topbar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 28px;
  height: 60px;
  background: rgba(26,26,46,0.6);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid var(--line);
  position: relative;
  z-index: 5;
}
.topbar__left, .topbar__right {
  display: flex;
  align-items: center;
  gap: 14px;
}
.topbar__right { justify-content: flex-end; }
.topbar__center { text-align: center; }

.wordmark {
  font-family: var(--font-display);
  font-weight: 200;
  font-size: 22px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--fg-1);
}
.wordmark-dot {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--teal);
  margin-left: 10px;
  vertical-align: middle;
  box-shadow: 0 0 8px var(--teal);
  animation: pulse-soft 2.6s var(--ease) infinite;
}
.status-online {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--teal);
}
.brand-tagline {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.brand-tagline strong { color: var(--fg-2); font-weight: 500; }

.clock {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--fg-2);
  letter-spacing: 0.06em;
}
.clock .date { color: var(--fg-3); margin-right: 10px; }

.avatar-chip {
  width: 32px; height: 32px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 40%, #2D2D4A 0%, #14142A 70%);
  border: 1px solid var(--line-strong);
  display: grid; place-items: center;
  overflow: hidden;
  position: relative;
}
.avatar-chip img { width: 32px; height: 32px; object-fit: cover; }

.menu-btn {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--fg-2);
  cursor: pointer;
  transition: all var(--dur) var(--ease);
}
.menu-btn:hover { color: var(--fg-1); border-color: var(--line-strong); }

/* =========================================================
   Main grid (S3 widescreen): 2 columns | Orb | 2 columns.

   The markup is flat (4 column zones + the centre Orb as siblings); the
   responsive shape is driven entirely by grid-template-areas so no markup
   changes between breakpoints:
     >= 1700px : "l l2 c r r2"            (true 4-column widescreen)
     881-1699  : "l c r" / "l2 c r2"      (2-column optic: l2 under l, r2 under r)
     <= 880px  : "l" "l2" "c" "r" "r2"    (single-column stack)
   The base rule below is the mid/default (2-column) shape; the >=1700px and
   <=880px overrides live in the media-query block at the end of the file.
   ========================================================= */
.main {
  --col-w: 300px;            /* width of one expanded side column (mid layout) */
  --col-collapsed-w: 30px;   /* width of a collapsed column strip */
  display: grid;
  /* Side tracks are content-sized (auto): an expanded column sizes to --col-w,
     a collapsed one to --col-collapsed-w; the Orb track takes the rest (1fr).
     This makes a collapsed column actually narrow the layout, with no per-combo
     media queries. */
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto auto;
  grid-template-areas:
    "l  c  r"
    "l2 c  r2";
  gap: 24px;
  padding: 24px 28px 8px;
  overflow: hidden;
  min-height: 0;
}

.col {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 0;
  overflow: hidden;
}
/* Map each zone (and the centre) onto its grid area. */
.col--left   { grid-area: l;  }
.col--left2  { grid-area: l2; }
.col--right  { grid-area: r;  }
.col--right2 { grid-area: r2; }
.center      { grid-area: c;  }

/* Expanded side columns take the configured width; a collapsed one shrinks to a
   strip. The width lives on the column so the auto track sizes to it. The
   transition gives a smooth fold (disabled under reduced-motion). */
.col--left, .col--left2, .col--right, .col--right2 {
  width: var(--col-w);
  transition: width var(--dur) var(--ease);
}
.col--left.col--collapsed,
.col--left2.col--collapsed,
.col--right.col--collapsed,
.col--right2.col--collapsed {
  width: var(--col-collapsed-w);
}

/* All four card columns scroll independently with the same thin scrollbar. */
.col--left, .col--left2, .col--right, .col--right2 {
  overflow-y: auto;
  padding-right: 4px;
}
.col--left::-webkit-scrollbar,
.col--left2::-webkit-scrollbar,
.col--right::-webkit-scrollbar,
.col--right2::-webkit-scrollbar { width: 4px; }
.col--left::-webkit-scrollbar-thumb,
.col--left2::-webkit-scrollbar-thumb,
.col--right::-webkit-scrollbar-thumb,
.col--right2::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 4px; }

/* Column header: collapse chevron + (when collapsed) a rotated label. Kept
   subtle so it does not compete with the cards. */
.col__head {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  min-height: 22px;
}
.col__collapse {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 7px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.03);
  color: var(--fg-3);
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.col__collapse:hover { background: rgba(255,255,255,0.08); color: var(--fg-1); }
.col__label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-3);
  white-space: nowrap;
}

/* Empty (but expanded) column: keep it tall enough to be an easy drop target
   and show a dashed "hier ablegen" hint so it doesn't read as broken. With four
   columns this is the normal start state for any column the user drains. The
   hint is purely decorative (the real hit-test is the data-colzone wrapper). */
.col--left:not(.col--collapsed):not(:has(.card-shell))::after,
.col--left2:not(.col--collapsed):not(:has(.card-shell))::after,
.col--right:not(.col--collapsed):not(:has(.card-shell))::after,
.col--right2:not(.col--collapsed):not(:has(.card-shell))::after {
  content: "Kachel hierher ziehen";
  display: grid;
  place-items: center;
  min-height: 120px;
  padding: 12px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-card);
  color: var(--fg-3);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
}

/* Collapsed column: fold to a thin strip. The whole column becomes a narrow
   rail with just the chevron, and the label rotates to read vertically. An
   empty/collapsed zone stays drop-targetable (it keeps data-colzone), so a
   drop auto-expands it (handled in app.jsx). */
.col--collapsed {
  overflow: hidden;
  align-items: center;
}
.col--collapsed .col__head {
  flex-direction: column;
  align-items: center;
  gap: 10px;
  height: 100%;
}
.col--collapsed .col__label {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

/* Card */
.card {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 14px 16px 14px;
  box-shadow: var(--shadow-card);
  position: relative;
}
.card--glass {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-color: var(--glass-border);
}
.card--flex {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.card--scroll {
  flex: 1 1 auto;
  min-height: 0;
}

.card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.card__title {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--teal);
}
.card__meta {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-3);
}

/* =========================================================
   HEUTE — schedule
   ========================================================= */
.schedule {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.appt {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 12px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--line);
  border-radius: 12px;
  align-items: center;
  transition: all var(--dur) var(--ease);
  cursor: pointer;
}
.appt:hover {
  border-color: rgba(5,230,165,0.4);
  background: rgba(5,230,165,0.04);
}
.appt__time {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--fg-1);
  letter-spacing: 0.04em;
}
.appt__title {
  font-size: 13px;
  color: var(--fg-1);
  line-height: 1.3;
}
.appt__sub {
  font-size: 11px;
  color: var(--fg-3);
  margin-top: 2px;
}
.appt__dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 6px var(--teal);
}
.appt--lime .appt__dot { background: var(--lime); box-shadow: 0 0 6px var(--lime); }
.appt--neutral .appt__dot { background: var(--fg-3); box-shadow: none; }

/* =========================================================
   PIPELINE
   ========================================================= */
.pipe {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.pipe__stat {
  padding: 12px 14px;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--line);
  border-radius: 12px;
}
.pipe__num {
  font-family: var(--font-display);
  font-weight: 200;
  font-size: 34px;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--fg-1);
}
.pipe__num.v { background: var(--v-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pipe__label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin-top: 6px;
}
.spark {
  margin-top: 10px;
  height: 28px;
  width: 100%;
  display: block;
}

/* =========================================================
   GEDÄCHTNIS — memory graph
   ========================================================= */
.memory {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.memory__graph {
  height: 48px;
  margin: 2px 0 6px;
  position: relative;
}
.memory__note {
  font-size: 12.5px;
  color: var(--fg-2);
  line-height: 1.5;
  padding: 8px 10px;
  background: rgba(5,230,165,0.04);
  border-left: 2px solid var(--teal);
  border-radius: 0 6px 6px 0;
}
.memory__note .source {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--teal);
  display: block;
  margin-bottom: 4px;
}
.memory__stats {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-3);
  padding-top: 6px;
  border-top: 1px solid var(--line);
}
.memory__stats span strong { color: var(--fg-2); font-weight: 500; }
.memory__graph--empty { height: auto; min-height: 48px; display: grid; place-items: center; }

/* SVG node labels in the interactive graph (rendered as React <text>). */
.graph__label {
  font-family: var(--font-mono);
  font-size: 3.4px;
  letter-spacing: 0.02em;
  fill: var(--fg-2);
  pointer-events: none;
}
.graph__label--focus { fill: var(--fg-1); font-size: 3.8px; }

/* =========================================================
   PIPELINE — top deals (clickable HubSpot deep-links, F2)
   ========================================================= */
.deals {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 12px;
}
.deal {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 8px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.02);
  text-decoration: none;
}
.deal__name {
  font-size: 12px;
  color: var(--fg-1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.deal__stage {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-3);
  flex-shrink: 0;
}
.deal--link { transition: border-color 0.15s, background 0.15s; }
.deal--link:hover {
  border-color: var(--teal);
  background: rgba(5,230,165,0.06);
}
.deal--link:hover .deal__name { color: var(--teal); }

/* =========================================================
   WETTER — local weather card (F3, Open-Meteo)
   ========================================================= */
.weather { display: flex; flex-direction: column; gap: 8px; }
.weather__main {
  display: flex;
  align-items: center;
  gap: 10px;
}
.weather__icon { color: var(--lime); display: inline-flex; }
.weather__temp {
  font-family: var(--font-display);
  font-weight: 200;
  font-size: 30px;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--fg-1);
}
.weather__desc { font-size: 13px; color: var(--fg-2); }
.weather__rain {
  font-size: 12.5px;
  color: var(--fg-2);
  padding: 8px 10px;
  background: rgba(5,230,165,0.04);
  border-left: 2px solid var(--teal);
  border-radius: 0 6px 6px 0;
}
.weather--empty { gap: 10px; align-items: flex-start; }
.weather__note { font-size: 12.5px; color: var(--fg-2); }
.weather__retry {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-on-accent);
  background: var(--teal);
  border: none;
  border-radius: 999px;
  padding: 6px 14px;
  cursor: pointer;
}
.weather__retry:hover { filter: brightness(1.08); }
.weather__hint {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  color: var(--fg-3);
  line-height: 1.4;
}

/* =========================================================
   CENTER — Orb + speech
   ========================================================= */
.center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 0 20px;
  min-height: 0;
  overflow: hidden;
}
.orb-wrap {
  position: relative;
  width: min(420px, 42vh);
  height: min(420px, 42vh);
  display: grid;
  place-items: center;
}
.speech {
  margin-top: 28px;
  text-align: center;
  max-width: 640px;
  min-height: 96px;
}
.speech__line {
  font-family: var(--font-display);
  font-weight: 200;
  /* dashboard-v3 #10: respect the settings text-size; default a touch smaller
     than before so long replies fit, and make the area scrollable instead of
     clipping at the bottom. App auto-scrolls to the newest words on update. */
  font-size: var(--speech-size);
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--fg-1);
  max-height: 34vh;
  overflow-y: auto;
  overflow-x: hidden;
  /* keep the scrollbar gutter subtle; avoid a hard edge on the words */
  padding: 0 6px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.18) transparent;
}
.speech__line::-webkit-scrollbar { width: 5px; }
.speech__line::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.16);
  border-radius: 4px;
}
.speech__line::-webkit-scrollbar-track { background: transparent; }
.speech__line .caret {
  display: inline-block;
  width: 2px;
  height: 0.95em;
  background: var(--teal);
  margin-left: 4px;
  vertical-align: -0.12em;
  animation: caret-blink 0.9s steps(2) infinite;
}
.speech__status {
  margin-top: 18px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--teal);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.speech__status .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 8px currentColor;
}
.speech__status[data-state="ready"]    { color: var(--fg-2); }
.speech__status[data-state="ready"] .dot { background: var(--fg-2); box-shadow: none; }
.speech__status[data-state="listening"]{ color: var(--lime); }
.speech__status[data-state="thinking"] { color: #ffd54a; }
.speech__status[data-state="speaking"] { color: var(--teal); }

/* Waveform under speech */
.wave {
  margin-top: 14px;
  display: flex;
  gap: 3px;
  align-items: end;
  justify-content: center;
  height: 28px;
  width: 220px;
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.wave[data-active="true"] { opacity: 1; }
.wave .bar {
  width: 3px;
  height: 4px;
  background: var(--v-gradient);
  border-radius: 2px;
  transform-origin: bottom center;
}

/* =========================================================
   AKTIVITÄT
   ========================================================= */
.activity {
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  padding-right: 4px;
  max-height: 230px;
}
.activity::-webkit-scrollbar { width: 4px; }
.activity::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 4px; }

.act {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--line);
  border-radius: 10px;
  animation: act-in 360ms var(--ease) both;
}
.act__icon {
  width: 22px; height: 22px;
  display: grid; place-items: center;
  color: var(--teal);
}
.act__icon.spinner {
  animation: spin 1.2s linear infinite;
}
.act__text {
  font-size: 12.5px;
  color: var(--fg-1);
  line-height: 1.3;
}
.act__sub {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--fg-3);
  text-transform: uppercase;
  margin-top: 2px;
}
.act__time {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--fg-3);
}
.act[data-status="running"] { border-color: rgba(255,176,32,0.3); }
.act[data-status="done"] .act__icon { color: var(--teal); }
.act[data-status="running"] .act__icon { color: var(--warning); }

/* =========================================================
   ARBEITSGEDÄCHTNIS — recent cross-channel cues (working memory)
   ========================================================= */
.worklog {
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  padding-right: 4px;
  max-height: 230px;
}
.worklog::-webkit-scrollbar { width: 4px; }
.worklog::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 4px; }

.wlog {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  gap: 10px;
  align-items: start;
  padding: 8px 10px;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.wlog__icon {
  width: 22px; height: 22px;
  display: grid; place-items: center;
  color: var(--teal);
  margin-top: 1px;
}
.wlog__body { min-width: 0; }
.wlog__summary {
  font-size: 12.5px;
  color: var(--fg-1);
  line-height: 1.35;
  /* Keep the condensed snippet to two lines so one entry can't dominate. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.wlog__meta {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 3px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--fg-3);
  text-transform: uppercase;
}
.wlog__peer { color: var(--fg-2); }
.wlog__time {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--fg-3);
  white-space: nowrap;
}

/* =========================================================
   TRANSKRIPT
   ========================================================= */
.transcript {
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
  padding-right: 4px;
  scroll-behavior: smooth;
}
.transcript::-webkit-scrollbar { width: 4px; }
.transcript::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 4px; }

.msg {
  max-width: 90%;
  padding: 10px 12px;
  border-radius: 14px;
  font-size: 13px;
  line-height: 1.5;
  animation: msg-in 320ms var(--ease) both;
}
.msg--user {
  align-self: flex-end;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--line-strong);
  border-bottom-right-radius: 4px;
  color: var(--fg-1);
}
.msg--connie {
  align-self: flex-start;
  background: rgba(5,230,165,0.05);
  border: 1px solid rgba(5,230,165,0.35);
  border-bottom-left-radius: 4px;
  color: var(--fg-1);
  box-shadow: 0 0 16px rgba(5,230,165,0.08);
}
.msg__who {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin-bottom: 4px;
}
.msg--connie .msg__who { color: var(--teal); }

/* =========================================================
   Control bar
   ========================================================= */
.controls {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
  padding: 14px 28px 28px;
  position: relative;
}
.quicks {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.quicks--left { justify-content: flex-start; }
.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 16px;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line-strong);
  color: var(--fg-1);
  font-size: 12.5px;
  font-family: var(--font-body);
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: all var(--dur) var(--ease);
}
.pill:hover {
  background: rgba(5,230,165,0.08);
  border-color: rgba(5,230,165,0.4);
  color: var(--fg-1);
  box-shadow: 0 0 16px rgba(5,230,165,0.18);
}
.pill svg { color: var(--teal); }

/* "Guten Morgen" pill — the morning-briefing primary. Same pill shape, a touch
   more presence via a faint brand-gradient wash and a teal hairline, so it reads
   as the lead action without breaking the quick-action row. */
.pill--morning {
  background:
    linear-gradient(rgba(34,34,58,0.0), rgba(34,34,58,0.0)),
    linear-gradient(135deg, rgba(225,245,40,0.14) 0%, rgba(5,230,165,0.14) 100%);
  border-color: rgba(5,230,165,0.45);
  color: var(--fg-1);
  font-weight: 600;
}
.pill--morning:hover {
  background: linear-gradient(135deg, rgba(225,245,40,0.22) 0%, rgba(5,230,165,0.22) 100%);
  border-color: rgba(5,230,165,0.7);
  box-shadow: 0 0 18px rgba(5,230,165,0.28);
}

/* Mic button — center of controls */
.mic {
  position: relative;
  width: 84px; height: 84px;
  border-radius: 50%;
  background: var(--bg-card);
  border: 2px solid transparent;
  background-image:
    linear-gradient(var(--bg-card), var(--bg-card)),
    var(--v-gradient);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  cursor: pointer;
  display: grid; place-items: center;
  color: var(--fg-1);
  transition: all var(--dur) var(--ease);
  box-shadow: var(--glow-v);
}
.mic:hover { transform: translateY(-1px); }
.mic:active { transform: scale(0.96); }
.mic svg { width: 28px; height: 28px; }
.mic--active {
  background-image:
    linear-gradient(rgba(225,245,40,0.16), rgba(5,230,165,0.16)),
    var(--v-gradient);
  box-shadow: 0 0 32px rgba(5,230,165,0.6), 0 0 64px rgba(225,245,40,0.3);
}
.mic--active::before, .mic--active::after {
  content: ""; position: absolute; inset: -3px;
  border-radius: 50%;
  border: 2px solid rgba(5,230,165,0.5);
  animation: ripple 1.8s var(--ease) infinite;
}
.mic--active::after { animation-delay: 0.9s; }

.mic-label {
  position: absolute;
  bottom: -18px; left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-3);
  white-space: nowrap;
}
/* Keyboard push-to-talk hint, sits just under the mic status label. */
.mic-hint {
  position: absolute;
  bottom: -34px; left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  color: var(--fg-3);
  opacity: 0.7;
  white-space: nowrap;
}
/* Live tool-status under the orb: "Frage den Mail-Server ab" etc.
   Shown only while Connie is thinking/speaking with an active tool call. */
.mic-tool {
  position: absolute;
  bottom: -36px; left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--lime, #E1F528);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 8px;
  animation: micToolFade 0.18s ease-out;
}
.mic-tool__dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--lime, #E1F528);
  box-shadow: 0 0 8px var(--lime, #E1F528);
  animation: micToolPulse 1.1s ease-in-out infinite;
}
@keyframes micToolFade {
  from { opacity: 0; transform: translate(-50%, 4px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
@keyframes micToolPulse {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%      { opacity: 0.35; transform: scale(0.7); }
}

/* Text input alternative */
.text-input-wrap {
  flex: 1;
  max-width: 380px;
  position: relative;
}
.text-input {
  width: 100%;
  height: 44px;
  padding: 0 44px 0 16px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-size: 13.5px;
  outline: none;
  transition: all var(--dur) var(--ease);
}
.text-input::placeholder { color: var(--fg-3); }
.text-input:focus {
  border-color: rgba(5,230,165,0.5);
  background: rgba(5,230,165,0.04);
  box-shadow: 0 0 0 3px rgba(5,230,165,0.08);
}
.text-input-send {
  position: absolute;
  right: 6px; top: 50%;
  transform: translateY(-50%);
  width: 32px; height: 32px;
  border: none;
  border-radius: 50%;
  background: var(--v-gradient);
  color: #0A0A1A;
  cursor: pointer;
  display: grid; place-items: center;
  transition: transform var(--dur) var(--ease);
}
.text-input-send:hover { transform: translateY(-50%) scale(1.05); }
.text-input-send svg { width: 16px; height: 16px; }

/* =========================================================
   Animations
   ========================================================= */
@keyframes pulse-soft {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}
@keyframes caret-blink {
  0%, 50% { opacity: 1; }
  50.01%, 100% { opacity: 0; }
}
@keyframes ripple {
  0%   { transform: scale(1);   opacity: 0.7; }
  100% { transform: scale(1.5); opacity: 0; }
}
@keyframes act-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes msg-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* =========================================================
   dashboard-v3.1 - per-card shell (drag / resize / hide)
   ========================================================= */
/* The shell is a flex pass-through so the cards keep their original column
   sizing: most cards are content-sized (flex 0 0 auto); the scrollable one
   (Transkript, .card--scroll) must still grow to fill the column wherever it is
   ordered. :has() lets the shell inherit that intent from its child. */
.card-shell {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  min-height: 0;
}
.card-shell:has(.card--scroll) { flex: 1 1 auto; }
.card-shell > .card { width: 100%; }
.card-shell:has(.card--scroll) > .card { flex: 1 1 auto; min-height: 0; }

/* The card being dragged: dimmed + slightly lifted so the drop-line reads as
   "where it will land". Reduced-motion drops the lift (see the media query). */
.card-shell--dragging {
  opacity: 0.45;
  transform: scale(0.99);
  transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}

/* The control cluster sits in the card's top-right corner. .card is
   position:relative, so absolute positioning anchors to it. Hidden until the
   card (or the cluster) is hovered/focused, to keep the cards calm. */
.card-shell__ctrls {
  position: absolute;
  top: 10px; right: 12px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 4px;
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  pointer-events: none;
}
.card-shell:hover .card-shell__ctrls,
.card-shell:focus-within .card-shell__ctrls {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
/* Keep the controls visible on the card being dragged (the body is dimmed but
   the handle must stay graspable). */
.card-shell--dragging .card-shell__ctrls {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.card-shell__btn {
  width: 22px; height: 22px;
  display: grid; place-items: center;
  background: rgba(20,20,42,0.82);
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  color: var(--fg-2);
  cursor: pointer;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease),
              background var(--dur) var(--ease);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.card-shell__btn:hover:not(:disabled) {
  color: var(--fg-1);
  border-color: rgba(5,230,165,0.45);
  background: rgba(5,230,165,0.12);
}
.card-shell__btn:disabled { opacity: 0.3; cursor: default; }
.card-shell__btn--hide:hover:not(:disabled) {
  color: var(--danger);
  border-color: rgba(255,77,109,0.5);
  background: rgba(255,77,109,0.12);
}
/* Drag handle: grab cursor + touch-action none so a pointer-drag doesn't scroll
   the column on touch devices. */
.card-shell__grip { cursor: grab; touch-action: none; }
.card-shell__grip:active { cursor: grabbing; }

/* Size step segmented control (S / M / L) - small pills in the control cluster. */
.card-shell__sizes {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  background: rgba(20,20,42,0.82);
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.card-shell__size {
  min-width: 18px; height: 18px;
  padding: 0 4px;
  border: none;
  border-radius: 5px;
  background: transparent;
  color: var(--fg-3);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.card-shell__size:hover { color: var(--fg-1); }
.card-shell__size.is-active {
  background: var(--v-gradient);
  color: var(--fg-on-accent);
}

/* Size steps - really change the rendered tile. "M" is the natural look. "S"
   tightens padding + clamps scrollable bodies; "L" gives the tile a tall
   min-height so e.g. the transcript / activity / worklog show much more. The
   min-height is on the inner .card so flex sizing in the column still works. */
.card-shell--size-S > .card { padding: 10px 12px; }
.card-shell--size-S .card__head { margin-bottom: 8px; }
.card-shell--size-S .schedule { gap: 8px; }
.card-shell--size-S .appt { padding: 7px 10px; }
.card-shell--size-S .activity,
.card-shell--size-S .worklog { max-height: 120px; }
.card-shell--size-S .memory__graph { height: 36px; }
.card-shell--size-S .pipe__num { font-size: 26px; }
.card-shell--size-S .spark { display: none; }
.card-shell--size-S .weather__temp { font-size: 24px; }

/* L: a visibly bigger tile. The min-height makes content-sized cards grow; the
   scrollable bodies get a much larger window so the change is obvious. */
.card-shell--size-L > .card { min-height: 360px; }
.card-shell--size-L .activity,
.card-shell--size-L .worklog { max-height: 420px; }
.card-shell--size-L .memory__graph { height: 72px; }
.card-shell--size-L .pipe__num { font-size: 40px; }

/* Drop-indicator line drawn between cards during a drag. The lime->teal accent
   makes the insertion point unmistakable. */
.drop-indicator {
  height: 3px;
  margin: 1px 2px;
  border-radius: 999px;
  background: var(--v-gradient);
  box-shadow: 0 0 10px rgba(5,230,165,0.55);
  flex: 0 0 auto;
  animation: drop-pulse 1.1s var(--ease) infinite;
}

/* While a drag is in progress, kill text selection across the app. */
body.is-dragging,
body.is-dragging * {
  user-select: none !important;
  -webkit-user-select: none !important;
  cursor: grabbing !important;
}

@keyframes drop-pulse {
  0%, 100% { opacity: 0.75; }
  50% { opacity: 1; }
}

/* =========================================================
   dashboard-v3 #7 - settings drawer (voice / text-size / hidden tiles)
   ========================================================= */
.settings-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(8,8,20,0.55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  display: flex;
  justify-content: flex-end;
  animation: settings-fade var(--dur) var(--ease) both;
}
.settings-drawer {
  width: min(420px, 92vw);
  height: 100%;
  background: linear-gradient(180deg, rgba(34,34,58,0.96) 0%, rgba(26,26,46,0.98) 100%);
  border-left: 1px solid var(--glass-border);
  box-shadow: -24px 0 60px rgba(0,0,0,0.5), var(--glow-teal);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  display: flex;
  flex-direction: column;
  animation: settings-slide var(--dur) var(--ease) both;
}
.settings-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 22px;
  border-bottom: 1px solid var(--line);
}
.settings-drawer__title {
  font-family: var(--font-display);
  font-weight: 200;
  font-size: 22px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-1);
}
.settings-drawer__close {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--fg-2);
  cursor: pointer;
  transition: all var(--dur) var(--ease);
}
.settings-drawer__close:hover { color: var(--fg-1); border-color: var(--line-strong); }
.settings-drawer__body {
  padding: 22px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 26px;
}
.settings-sec { display: flex; flex-direction: column; gap: 12px; }
.settings-sec__title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--teal);
}
.settings-sec__title svg { color: var(--teal); }
.settings-hint {
  font-size: 12.5px;
  color: var(--fg-2);
  line-height: 1.5;
  padding: 8px 10px;
  background: rgba(5,230,165,0.04);
  border-left: 2px solid var(--teal);
  border-radius: 0 6px 6px 0;
}

/* Voice dropdown */
.settings-select {
  width: 100%;
  height: 42px;
  padding: 0 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-input);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-size: 14px;
  cursor: pointer;
  outline: none;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.settings-select:focus {
  border-color: rgba(5,230,165,0.5);
  background: rgba(5,230,165,0.04);
}
.settings-select option { background: var(--bg-card); color: var(--fg-1); }
/* Language filter sits a touch tighter above the voice rows. */
.settings-select--lang { height: 38px; font-size: 13px; }

/* Voice rows: a pick button (radio) + a pre-listen play button per voice. */
.settings-voices {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 320px;
  overflow-y: auto;
  padding-right: 2px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.18) transparent;
}
.settings-voices::-webkit-scrollbar { width: 5px; }
.settings-voices::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.16); border-radius: 4px;
}
.settings-voice {
  display: flex;
  align-items: stretch;
  gap: 6px;
  border-radius: 10px;
}
/* The standalone "Standard-Stimme" row is itself the pick button. */
button.settings-voice {
  padding: 10px 12px;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--line);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.settings-voice__pick {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--fg-1);
  font-family: var(--font-body);
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.settings-voice__pick:hover,
button.settings-voice:hover {
  border-color: rgba(5,230,165,0.4);
  background: rgba(5,230,165,0.05);
}
.settings-voice.is-active .settings-voice__pick,
button.settings-voice.is-active {
  border-color: rgba(5,230,165,0.6);
  background: rgba(5,230,165,0.08);
  box-shadow: 0 0 14px rgba(5,230,165,0.12);
}
.settings-voice__name { color: var(--fg-1); }
.settings-voice.is-active .settings-voice__name { color: var(--teal); }
.settings-voice__lang {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-3);
  flex-shrink: 0;
}
.settings-voice__play {
  flex: 0 0 auto;
  width: 38px;
  display: grid; place-items: center;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  color: var(--teal);
  cursor: pointer;
  transition: all var(--dur) var(--ease);
}
.settings-voice__play:hover {
  background: rgba(5,230,165,0.12);
  border-color: rgba(5,230,165,0.45);
}
.settings-voice__play.is-playing {
  background: var(--v-gradient);
  color: var(--fg-on-accent);
  border-color: transparent;
}

/* Text-size segmented control */
.settings-seg {
  display: inline-flex;
  gap: 6px;
  padding: 4px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  width: fit-content;
}
.settings-seg__btn {
  min-width: 52px;
  height: 34px;
  padding: 0 16px;
  border: none;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--fg-2);
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: all var(--dur) var(--ease);
}
.settings-seg__btn:hover { color: var(--fg-1); }
.settings-seg__btn.is-active {
  background: var(--v-gradient);
  color: var(--fg-on-accent);
  font-weight: 600;
}

/* Hidden-tiles list */
.settings-hidden { display: flex; flex-direction: column; gap: 8px; }
.settings-hidden__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 12px;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.settings-hidden__name { font-size: 13px; color: var(--fg-1); }
.settings-hidden__show {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  background: rgba(5,230,165,0.08);
  border: 1px solid rgba(5,230,165,0.4);
  color: var(--teal);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all var(--dur) var(--ease);
  white-space: nowrap;
}
.settings-hidden__show:hover {
  background: rgba(5,230,165,0.16);
  box-shadow: 0 0 14px rgba(5,230,165,0.18);
}
.settings-hidden__show svg { color: var(--teal); }

/* Calendar-visibility list (per-user-visibility UI) */
.settings-cals { display: flex; flex-direction: column; gap: 8px; }
.settings-cal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.settings-cal__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.settings-cal__name {
  font-size: 13px;
  color: var(--fg-1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.settings-cal__id {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--fg-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* A compact segmented control for the Alle/Nur-ich toggle (smaller than the
   text-size one so two long-ish labels fit next to the calendar name). */
.settings-seg--cal { padding: 3px; flex: none; }
.settings-seg--cal .settings-seg__btn {
  min-width: auto;
  height: 30px;
  padding: 0 12px;
  font-size: 11px;
  letter-spacing: 0.04em;
}
.settings-cals__foot {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
}
.settings-save {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  border: none;
  border-radius: var(--r-pill);
  background: var(--v-gradient);
  color: var(--fg-on-accent);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: all var(--dur) var(--ease);
}
.settings-save:hover { box-shadow: 0 0 16px rgba(5,230,165,0.3); }
.settings-save:disabled { opacity: 0.6; cursor: default; box-shadow: none; }
.settings-save__ok {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--teal);
}
.settings-save__ok svg { color: var(--teal); }
.settings-save__err { font-size: 12px; color: var(--danger); }

/* ---------------------------------------------------------------------------
   Aktien-Portfolio: settings rows {WKN, Menge} + the dashboard tile.
   Day-diff sign colours: teal (up) / danger (down) / fg-3 (flat) - lime->teal
   stays an accent only (CONVENTIC CI).
   --------------------------------------------------------------------------- */
.settings-stocks { display: flex; flex-direction: column; gap: 8px; }
.settings-stock {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;   /* row has 5 controls (WKN, Auflösen, Symbol, Menge, Del);
                        in the narrow drawer they wrap instead of crushing the
                        qty field to 0px width (which made it invisible). */
}
.settings-input {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--fg-1);
  font-size: 13px;
  padding: 8px 10px;
  transition: border-color var(--dur) var(--ease);
}
.settings-input:focus { outline: none; border-color: var(--teal); }
.settings-input--wkn {
  font-family: var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  width: 96px;
  flex: none;
}
.settings-input--symbol {
  font-family: var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  width: 116px;
  flex: none;
}
.settings-input--qty { flex: 1 1 90px; min-width: 90px; }  /* never crush to 0 -> stays visible; wraps to its own line if needed */
.settings-input--loc { width: 100%; }
.settings-stock__del {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: transparent;
  color: var(--fg-3);
  cursor: pointer;
  transition: all var(--dur) var(--ease);
}
.settings-stock__del:hover { color: var(--danger); border-color: var(--danger); }
.settings-stocks__foot {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
  flex-wrap: wrap;
}
.settings-stock__add {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--fg-2);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: all var(--dur) var(--ease);
}
.settings-stock__add:hover { color: var(--fg-1); border-color: var(--teal); }

/* ---------------------------------------------------------------------------
   Wissen (Knowledge-Input, S4): a new-fact form (textarea + 3 meta inputs)
   plus the shared fact list with a per-row delete. Reuses the settings-input
   tokens above. The list is GLOBAL (Connie uses the facts for all users).
   --------------------------------------------------------------------------- */
.settings-knowledge { display: flex; flex-direction: column; gap: 8px; }
.settings-input--know {
  width: 100%;
  resize: vertical;
  min-height: 64px;
  line-height: 1.45;
  font-family: inherit;
}
.settings-know__row { display: flex; flex-wrap: wrap; gap: 8px; }
.settings-input--know-meta { flex: 1 1 120px; min-width: 120px; }
.settings-know__list {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.settings-know__item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255,255,255,0.02);
}
.settings-know__text { flex: 1 1 auto; min-width: 0; }
.settings-know__t {
  font-size: 12px;
  font-weight: 600;
  color: var(--fg-1);
  margin-bottom: 2px;
}
.settings-know__b {
  font-size: 13px;
  color: var(--fg-2);
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.settings-know__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-top: 5px;
}
.settings-know__tag {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.03em;
  color: var(--teal);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 1px 8px;
}
.settings-know__by { font-size: 11px; color: var(--fg-3); }
.settings-know__del {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: transparent;
  color: var(--fg-3);
  cursor: pointer;
  transition: all var(--dur) var(--ease);
}
.settings-know__del:hover { color: var(--danger); border-color: var(--danger); }
.settings-know__del:disabled { opacity: 0.5; cursor: default; }

/* File-Upload extension (2026-05-25): the upload block sits between the typed
   form and the list. The "ODER" hint separates it; the file row keeps the input
   + button on one line; the PII warning is a soft amber callout. */
.settings-know__upload {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 8px;
  margin-top: 2px;
  border-top: 1px dashed var(--line);
}
.settings-know__or { margin: 0; }
.settings-know__uprow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.settings-know__file {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 12px;
  color: var(--fg-2);
}
.settings-know__file::file-selector-button {
  font-family: inherit;
  font-size: 12px;
  color: var(--fg-1);
  background: var(--surface-2, transparent);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 5px 10px;
  margin-right: 8px;
  cursor: pointer;
  transition: all var(--dur) var(--ease);
}
.settings-know__file::file-selector-button:hover { border-color: var(--teal); }
.settings-know__pii {
  font-size: 12px;
  line-height: 1.4;
  color: var(--warn, #B8860B);
  border: 1px solid var(--warn, #B8860B);
  border-radius: 8px;
  padding: 6px 10px;
  background: rgba(184, 134, 11, 0.08);
}
.settings-know__count { font-weight: 500; color: var(--fg-3); }

/* WKN-resolve (S1b): a row groups the inputs + the candidate list. */
.settings-stock-group { display: flex; flex-direction: column; gap: 6px; }
.settings-stock__resolve {
  flex: none;
  padding: 7px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: transparent;
  color: var(--fg-2);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--dur) var(--ease);
}
.settings-stock__resolve:hover:not(:disabled) { color: var(--fg-1); border-color: var(--teal); }
.settings-stock__resolve:disabled { opacity: 0.4; cursor: not-allowed; }
.settings-stock__hits {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0 0 4px 0;
  padding-left: 4px;
}
.settings-hit {
  display: grid;
  grid-template-columns: 116px 1fr auto;
  grid-row-gap: 2px;
  align-items: baseline;
  gap: 10px;
  text-align: left;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255,255,255,0.02);
  color: var(--fg-1);
  cursor: pointer;
  transition: all var(--dur) var(--ease);
}
.settings-hit:hover { border-color: var(--teal); background: rgba(255,255,255,0.05); }
.settings-hit--weak { border-color: var(--amber, #d8a23a); }
.settings-hit__sym {
  font-family: var(--font-mono);
  letter-spacing: 0.06em;
  font-size: 13px;
  color: var(--fg-1);
}
.settings-hit__name { font-size: 13px; color: var(--fg-2); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.settings-hit__place { font-family: var(--font-mono); font-size: 11px; color: var(--fg-3); white-space: nowrap; }
.settings-hit__warn {
  grid-column: 1 / -1;
  font-size: 11px;
  color: var(--amber, #d8a23a);
}

/* Tile (StockPortfolioCard). */
.stocks { display: flex; flex-direction: column; gap: 8px; padding-top: 4px; }
.stocks__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--fg-2);
}
.stocks__diff {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
}
.stocks__diff svg { align-self: center; }
.stocks__diff-eur { font-size: 22px; font-weight: 600; line-height: 1; }
.stocks__diff-pct { font-size: 13px; color: var(--fg-2); }
.stocks__diff--up { color: var(--teal); }
.stocks__diff--up .stocks__diff-pct { color: var(--teal); }
.stocks__diff--down { color: var(--danger); }
.stocks__diff--down .stocks__diff-pct { color: var(--danger); }
.stocks__diff--flat { color: var(--fg-2); }
.stocks__value {
  font-size: 12px;
  color: var(--fg-3);
  font-family: var(--font-mono);
}
.stocks__stale { color: var(--danger); }
/* Feature 2: prominent portfolio total. The value is the largest figure in the
   tile body; the label sits above it (and switches to the Teil-Summe text). */
.stocks__total {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-top: 2px;
}
.stocks__total-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--fg-3);
}
.stocks__total-value {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.1;
  color: var(--fg-1);
  font-variant-numeric: tabular-nums;
}
.stocks__list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
  border-top: 1px solid var(--line);
  padding-top: 8px;
}
.stocks__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.stocks__info { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.stocks__name {
  font-size: 13px;
  color: var(--fg-1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.stocks__sub {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--fg-3);
}
/* Feature 3: per-line trend sparkline, between the name block and the figures. */
.stocks__spark {
  width: 64px;
  height: 22px;
  flex: none;
  opacity: 0.95;
}
.stocks__row-diff {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  flex: none;
}
/* Feature 1: EUR position value is the per-line headline; the day-diff is the
   smaller second line. */
.stocks__row-value {
  font-size: 13px;
  font-weight: 600;
  color: var(--fg-1);
}
.stocks__row-day { font-size: 10px; }
.stocks__row-pct { font-size: 10px; }
.stocks__row-stale {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-3);
  flex: none;
}

@keyframes settings-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes settings-slide {
  from { transform: translateX(24px); opacity: 0.6; }
  to   { transform: translateX(0); opacity: 1; }
}

/* =========================================================
   WORKFLOWS — approval queue + start + recent runs (B4b)
   ========================================================= */
.wf {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.wf-sec { display: flex; flex-direction: column; gap: 8px; }
.wf-sec__title {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.wf-empty {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--fg-3);
  padding: 6px 2px;
}

/* 1. Freigabe-Warteschlange - the prominent block. The lime->teal accent border
   marks it as the place that needs Bernd's attention. */
.wf-sec--queue .wf-sec__title { color: var(--lime); }
.wf-appr {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px;
  background: rgba(225,245,40,0.04);
  border: 1px solid rgba(225,245,40,0.28);
  border-radius: 12px;
}
.wf-appr + .wf-appr { margin-top: 2px; }
.wf-appr__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.wf-appr__main { min-width: 0; }
.wf-appr__name {
  font-size: 13px;
  color: var(--fg-1);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wf-appr__since {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--fg-3);
  margin-top: 2px;
}
.wf-appr__actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

/* Shared workflow buttons. Approve = lime->teal accent (the primary action);
   reject = dezent outline; start = teal outline. */
.wf-btn {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 7px 13px;
  border-radius: var(--r-pill);
  cursor: pointer;
  border: 1px solid var(--line-strong);
  background: rgba(255,255,255,0.03);
  color: var(--fg-1);
  transition: all var(--dur) var(--ease);
  white-space: nowrap;
}
.wf-btn:disabled { opacity: 0.4; cursor: default; }
.wf-btn--approve {
  background: var(--v-gradient);
  border-color: transparent;
  color: var(--fg-on-accent);
  font-weight: 600;
}
.wf-btn--approve:hover:not(:disabled) { filter: brightness(1.08); box-shadow: var(--glow-v); }
.wf-btn--reject { color: var(--fg-2); }
.wf-btn--reject:hover:not(:disabled) {
  color: var(--danger);
  border-color: rgba(255,77,109,0.5);
  background: rgba(255,77,109,0.1);
}
.wf-btn--start {
  color: var(--teal);
  border-color: rgba(5,230,165,0.4);
  background: rgba(5,230,165,0.06);
}
.wf-btn--start:hover:not(:disabled) {
  background: rgba(5,230,165,0.14);
  box-shadow: 0 0 14px rgba(5,230,165,0.18);
}

/* Collapsible masked preview inside an approval row. */
.wf-appr__toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  align-self: flex-start;
  padding: 2px 0;
  background: transparent;
  border: none;
  color: var(--fg-3);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color var(--dur) var(--ease);
}
.wf-appr__toggle:hover { color: var(--teal); }
.wf-appr__toggle svg { color: currentColor; }
.wf-appr__preview {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.5;
  color: var(--fg-2);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 160px;
  overflow-y: auto;
  padding: 8px 10px;
  background: rgba(0,0,0,0.25);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.wf-appr__preview::-webkit-scrollbar { width: 4px; }
.wf-appr__preview::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 4px; }

/* "Pruefen" = secondary review action (opens the approval overlay). */
.wf-btn--preview { color: var(--fg-1); }
.wf-btn--preview:hover:not(:disabled) {
  border-color: var(--teal);
  color: var(--teal);
  background: rgba(5,230,165,0.08);
}

/* Approval review overlay (rendered via portal to <body> so the card's
   transform/overflow never clips it). Centered panel with a scrollable body -
   room to read the full draft + decide, vs. a cramped inline preview. */
.wf-modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(8,8,20,0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: settings-fade var(--dur) var(--ease) both;
}
.wf-modal__panel {
  width: min(640px, 94vw);
  max-height: 82vh;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, rgba(34,34,58,0.98) 0%, rgba(26,26,46,0.99) 100%);
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  box-shadow: 0 24px 70px rgba(0,0,0,0.55), var(--glow-teal);
}
.wf-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.wf-modal__title {
  font-family: var(--font-display);
  font-weight: 200;
  font-size: 18px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg-1);
}
.wf-modal__close {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--fg-2);
  cursor: pointer;
  transition: all var(--dur) var(--ease);
}
.wf-modal__close:hover { color: var(--fg-1); border-color: var(--line-strong); }
.wf-modal__note {
  flex-shrink: 0;
  padding: 12px 22px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--fg-2);
  background: rgba(5,230,165,0.06);
  border-bottom: 1px solid var(--line);
}
.wf-modal__body {
  flex: 1 1 auto;
  min-height: 0;            /* lets the body scroll inside the flex column */
  padding: 20px 22px;
  overflow-y: auto;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.6;
  color: var(--fg-1);
  white-space: pre-wrap;
  word-break: break-word;
}
.wf-modal__body::-webkit-scrollbar { width: 6px; }
.wf-modal__body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 6px; }
.wf-modal__foot {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 22px;
  border-top: 1px solid var(--line);
  flex-shrink: 0;
}

/* 2. Workflow starten - catalog rows with an optional inline form. */
.wf-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--line);
  border-radius: 12px;
}
.wf-row + .wf-row { margin-top: 2px; }
.wf-row__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.wf-row__info { min-width: 0; }
.wf-row__name { font-size: 13px; color: var(--fg-1); line-height: 1.3; }
.wf-row__desc {
  font-size: 11.5px;
  color: var(--fg-3);
  line-height: 1.4;
  margin-top: 2px;
}
.wf-row__form { display: flex; flex-direction: column; gap: 6px; }
.wf-input {
  width: 100%;
  height: 36px;
  padding: 0 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-input);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-size: 13px;
  outline: none;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.wf-input::placeholder { color: var(--fg-3); }
.wf-input:focus {
  border-color: rgba(5,230,165,0.5);
  background: rgba(5,230,165,0.04);
}
.wf-row__msg {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  padding: 2px 2px;
}
.wf-row__msg--ok { color: var(--teal); }
.wf-row__msg--err { color: var(--danger); }

/* 3. Letzte Laeufe - compact run list with a status badge. */
.wf-runs { display: flex; flex-direction: column; gap: 6px; }
.wf-run {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.wf-run__name {
  font-size: 12px;
  color: var(--fg-1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wf-run__time {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--fg-3);
  white-space: nowrap;
}
.wf-badge {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid transparent;
  white-space: nowrap;
}
.wf-badge--done {
  color: var(--teal);
  background: rgba(5,230,165,0.1);
  border-color: rgba(5,230,165,0.35);
}
.wf-badge--failed {
  color: var(--danger);
  background: rgba(255,77,109,0.1);
  border-color: rgba(255,77,109,0.35);
}
.wf-badge--awaiting {
  color: var(--lime);
  background: rgba(225,245,40,0.1);
  border-color: rgba(225,245,40,0.35);
}
.wf-badge--running {
  color: var(--warning);
  background: rgba(255,176,32,0.1);
  border-color: rgba(255,176,32,0.35);
}
.wf-badge--cancelled,
.wf-badge--partial,
.wf-badge--neutral {
  color: var(--fg-3);
  background: rgba(255,255,255,0.04);
  border-color: var(--line-strong);
}

/* Size steps for the workflow card (mirrors the activity/worklog clamps). */
.card-shell--size-S .wf-appr__preview { max-height: 100px; }
.card-shell--size-L .wf-appr__preview { max-height: 260px; }

/* =========================================================
   Responsive (S3): widescreen 4-col, mid 2-col, narrow 1-col.

   The base .main rule is the MID layout (2 columns: l2 under l, r2 under r),
   so 881-1699px needs no override except the tighter <=1280 spacing. The two
   overrides below switch to true 4-column at >=1700px and a single stack at
   <=880px - all via grid-template-areas, the markup never changes.
   ========================================================= */

/* Widescreen: true 4 columns "l l2 | Orb | r r2". Each side column gets its own
   auto track so collapsing one actually narrows that column (not its neighbour). */
@media (min-width: 1700px) {
  .main {
    --col-w: 320px;
    grid-template-columns: auto auto 1fr auto auto;
    grid-template-rows: 1fr;
    grid-template-areas: "l l2 c r r2";
  }
}

/* Mid layout spacing tweak (kept from the old 2-column design). */
@media (max-width: 1280px) {
  .main { --col-w: 280px; gap: 18px; padding: 18px 18px 4px; }
}
@media (max-width: 1100px) {
  .main { --col-w: 260px; }
  .topbar__center { display: none; }
}

/* Narrow / mobile: single column, every zone stacked (Orb in the middle). */
@media (max-width: 880px) {
  .main {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto auto;
    grid-template-areas:
      "l"
      "l2"
      "c"
      "r"
      "r2";
    overflow: auto;
  }
  /* Full-width zones; the per-column fixed width no longer applies. */
  .col--left, .col--left2, .col--right, .col--right2 { width: auto; max-height: none; }
  .col--left.col--collapsed, .col--left2.col--collapsed,
  .col--right.col--collapsed, .col--right2.col--collapsed { width: auto; }
  .col { max-height: none; }
  .controls { grid-template-columns: 1fr; gap: 12px; }
  .quicks { justify-content: center; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  /* No wobble on the dragged card; the drop-line is static (still visible). */
  .card-shell--dragging { transform: none; }
  .drop-indicator { animation: none; opacity: 1; }
  /* S3: column collapse/expand is instant (no width tween) - the global
     transition-duration override above already covers .col--* width, this is
     explicit for clarity. */
  .col--left, .col--left2, .col--right, .col--right2 { transition: none; }
}