/* ==========================================================================
   Senn - designsysteem (Sprint 3, herontwerp, oktober 2026)

   Idee: Senn is een rustige werkvloer-assistent. De app staat als een licht
   "vel" in een donker of warm-grijs frame; navigatie hoort bij het frame, het
   werk bij het vel. Senn zelf (AI) is een uitschuifbaar paneel en heeft één
   eigen kleur ("aura"), zodat altijd zichtbaar is wat van Senn komt.

   - Gewone CSS, geen buildstap, geen externe fonts of CDN.
   - Alle kleuren staan in de twee tokenblokken hieronder; componenten
     gebruiken alleen tokens (licht en donker werken daardoor automatisch).
   - Contrast: tekst >= 4,5:1 op het vel; randen van invoervelden >= 3:1.
   ========================================================================== */

:root {
  color-scheme: light;

  /* ---------- Frame en vlakken ---------- */
  --brand-night: #0d0e11;       /* donker merkvlak (inloggen) */
  --showcase-glow-1: rgba(14, 125, 139, 0.45);  /* petrol */
  --showcase-glow-2: rgba(176, 120, 64, 0.22);  /* warm koper, sluit aan op het steengrijze kader */
  --on-night: rgba(255, 255, 255, 0.92);
  --on-night-muted: rgba(255, 255, 255, 0.62);
  --on-night-soft: rgba(255, 255, 255, 0.1);
  --on-night-line: rgba(255, 255, 255, 0.14);
  /* UI/UX Sprint 3c (V1): inlogvlak = petrol-verloop met een geluidsgolf (geen paars/blauw). */
  --login-from: #0b6b78;
  --login-to: #06363d;
  --login-wave: rgba(255, 255, 255, 0.3);
  --login-wave-peak: rgba(157, 226, 233, 0.75);
  --on-aura: #ffffff;            /* tekst/icoon op het Senn-verloop */
  --knob: #ffffff;               /* knop van een schakelaar */
  --scrim: rgba(10, 11, 14, 0.42);
  --senn-glow: rgba(11, 107, 120, 0.4);
  --frame: #e9e7e2;              /* warm steengrijs rond het vel */
  --frame-text: #2a2c31;
  --frame-muted: #5d6068;
  --frame-hover: rgba(20, 22, 26, 0.06);
  --frame-active: #ffffff;
  --sheet: #ffffff;              /* het werkvlak */
  --surface: #ffffff;            /* kaarten op het vel */
  --surface-sunken: #f6f5f2;     /* rustige ondergrond binnen het vel */
  --surface-raised: #ffffff;     /* menu's, dialogen */
  --surface-hover: #f3f2ee;
  --surface-selected: #eef1fe;

  /* ---------- Tekst ---------- */
  --text: #16181d;
  --text-muted: #555b67;         /* 7,0:1 op wit */
  --text-faint: #6a707c;         /* 4,9:1 op wit */
  --text-inverse: #ffffff;

  /* ---------- Lijnen ---------- */
  --line: rgba(22, 24, 29, 0.08);
  --line-strong: rgba(22, 24, 29, 0.14);
  --field-border: #8a8f99;       /* 3,3:1 op wit (WCAG 1.4.11) */
  --field-bg: #ffffff;

  /* ---------- Acties ---------- */
  --ink: #16181d;                /* primaire knop: inkt */
  --ink-hover: #2b2e35;
  --ink-text: #ffffff;
  --accent: #0b6b78;             /* focus, selectie, actieve iconen: Senn-petrol (besluit eigenaar 24 okt), 6,2:1 op wit */
  --accent-hover: #08525c;
  --accent-soft: rgba(11, 107, 120, 0.09);
  --accent-border: rgba(11, 107, 120, 0.32);
  --accent-contrast: #ffffff;
  /* Sprint 3b (eigenaar, 23 okt): tekst die een link of doorverwijzing is, is Senn-petrol, nooit blauw. */
  --link: #0b6b78;               /* 6,2:1 op wit */
  --link-hover: #08525c;
  --focus-ring: 0 0 0 2px var(--sheet), 0 0 0 4px var(--accent);

  /* ---------- Senn (AI) ---------- */
  --senn: #0b6b78;               /* petrol, 6,2:1 op wit; bewust geen AI-paars */
  --senn-soft: rgba(11, 107, 120, 0.08);
  --senn-border: rgba(11, 107, 120, 0.3);
  --senn-aura: #0b6b78;          /* effen vlak voor Senn-elementen, geen verloop */

  /* ---------- Statussen ---------- */
  --success: #12733f;
  --success-soft: rgba(18, 115, 63, 0.09);
  --success-border: rgba(18, 115, 63, 0.26);
  --warning: #9a5200;
  --warning-soft: rgba(214, 135, 25, 0.12);
  --warning-border: rgba(214, 135, 25, 0.34);
  --danger: #b8241b;
  --danger-soft: rgba(184, 36, 27, 0.08);
  --danger-border: rgba(184, 36, 27, 0.26);
  --neutral-soft: rgba(22, 24, 29, 0.05);
  --neutral-border: rgba(22, 24, 29, 0.12);

  /* ---------- Kenteken (NL) ---------- */
  /* Labelkleuren van werkwijzen (zoals de garage ze in Autoflex gebruikt) */
  --label-paars: #6d3fa8;
  --label-paars-soft: rgba(109, 63, 168, 0.12);
  --label-blauw: #1d5bd8;
  --label-blauw-soft: rgba(29, 91, 216, 0.1);
  --label-groen: #12733f;
  --mascot-light: #4fb7c1;       /* het Senn-figuurtje */
  --mascot-mid: #13808c;
  --mascot-dark: #0a5c68;
  --mascot-eye: #0a3a42;
  --mascot-shine: #ffffff;
  --mascot-shadow: rgba(10, 60, 66, 0.2);
  --chat-wall: #efeae2;          /* achtergrond van een berichtgesprek (WhatsApp-gevoel) */
  --chat-in: #ffffff;
  --chat-out: #d9fdd3;
  --chat-tick-read: #1d6fd8;
  --label-groen-soft: rgba(18, 115, 63, 0.11);
  --label-oranje: #a34a00;
  --label-oranje-soft: rgba(197, 102, 18, 0.13);
  --label-rood: #b8241b;
  --label-rood-soft: rgba(184, 36, 27, 0.1);
  --label-grijs: #5d6068;
  --label-grijs-soft: rgba(93, 96, 104, 0.12);
  --plate-bg: #f2cf45;
  --plate-text: #111111;
  --plate-eu: #2a4ea6;

  /* ---------- Merkteken (inline SVG) ---------- */
  --logo-main-1: #6b7280;
  --logo-main-2: #374151;
  --logo-main-3: #141821;
  --logo-small-1: #9ca3af;
  --logo-small-2: #4b5563;
  --logo-fold-1: #1f2937;
  --logo-fold-2: #111827;
  --logo-fold-3: #374151;

  /* ---------- Schaduwen ---------- */
  --shadow-sheet: 0 0 0 1px rgba(22, 24, 29, 0.05), 0 1px 2px rgba(22, 24, 29, 0.04);
  --shadow-sm: 0 1px 2px rgba(22, 24, 29, 0.06);
  --shadow-md: 0 4px 16px -4px rgba(22, 24, 29, 0.12), 0 1px 3px rgba(22, 24, 29, 0.06);
  --shadow-lg: 0 24px 48px -12px rgba(22, 24, 29, 0.22), 0 2px 6px rgba(22, 24, 29, 0.08);

  /* ---------- Vorm en maat ---------- */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 999px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --sidebar-w: 244px;
  --panel-w: 392px;
  --gap-frame: 8px;
  /* Vaste schil rond het vel: hoogte erboven (chrome-top) en in totaal (chrome-h). */
  --chrome-top: 0px;
  --chrome-h: calc(2 * var(--gap-frame));

  /* ---------- Typografie ---------- */
  --font: "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Inter Display", "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, "Roboto Mono", monospace;
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-base: 14px;
  --fs-md: 15px;
  --fs-lg: 17px;
  --fs-xl: 21px;
  --fs-2xl: 28px;
  --fs-3xl: 34px;

  /* ---------- Beweging ---------- */
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-fast: 120ms;
  --dur: 180ms;
  --dur-slow: 280ms;

  /* ---------- Compatibiliteit (namen die oudere scripts en tests nog gebruiken) ---------- */
  --bg: var(--sheet);
  --border: var(--line);
  --border-strong: var(--line-strong);
  --surface-muted: var(--surface-sunken);
  --surface-solid: var(--surface);
  --fill: var(--neutral-soft);
  --fill-strong: rgba(22, 24, 29, 0.09);
  --accent-fill: var(--accent);
  --panel-surface: var(--surface);
  --panel-text: var(--text);
  --card-border: var(--line);
}

/* Donker: zelfde opbouw, inkt wordt licht, het frame bijna zwart. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --scrim: rgba(0, 0, 0, 0.6);
  --senn-glow: rgba(92, 196, 207, 0.3);
  --frame: #0b0c0e;
  --frame-text: #e6e7ea;
  --frame-muted: #9a9fa9;
  --frame-hover: rgba(255, 255, 255, 0.06);
  --frame-active: #1b1d22;
  --sheet: #131417;
  --surface: #17191d;
  --surface-sunken: #101114;
  --surface-raised: #1d1f23;
  --surface-hover: #1c1e23;
  --surface-selected: #16202e;

  --text: #eeeff1;
  --text-muted: #a6abb5;
  --text-faint: #8d929d;
  --text-inverse: #0f1013;

  --line: rgba(255, 255, 255, 0.07);
  --line-strong: rgba(255, 255, 255, 0.13);
  --field-border: #6c717c;
  --field-bg: #111215;

  --ink: #f1f2f4;
  --ink-hover: #ffffff;
  --ink-text: #0f1013;
  --accent: #5cc4cf;             /* leesbare petrol op het donkere vel (besluit eigenaar 24 okt) */
  --accent-hover: #8ad8df;
  --accent-soft: rgba(92, 196, 207, 0.12);
  --accent-border: rgba(92, 196, 207, 0.36);
  --accent-contrast: #0f1013;
  --link: #5cc4cf;               /* leesbare petrol op het donkere vel */
  --link-hover: #8ad8df;

  --label-paars: #c4a3f5;
  --label-paars-soft: rgba(196, 163, 245, 0.14);
  --label-blauw: #6fa8ff;
  --label-blauw-soft: rgba(111, 168, 255, 0.13);
  --label-groen: #5fd28f;
  --mascot-light: #5cc4cf;
  --mascot-mid: #1a8f9b;
  --mascot-dark: #0d6670;
  --mascot-eye: #062a30;
  --mascot-shine: #ffffff;
  --mascot-shadow: rgba(0, 0, 0, 0.45);
  --chat-wall: #0c0d10;
  --chat-in: #1f2228;
  --chat-out: #0f3a2b;
  --chat-tick-read: #53bdeb;
  --label-groen-soft: rgba(95, 210, 143, 0.12);
  --label-oranje: #f5a65b;
  --label-oranje-soft: rgba(245, 166, 91, 0.13);
  --label-rood: #ff7c70;
  --label-rood-soft: rgba(255, 124, 112, 0.12);
  --label-grijs: #b3b8c2;
  --label-grijs-soft: rgba(179, 184, 194, 0.12);
  --senn: #5cc4cf;
  --senn-soft: rgba(92, 196, 207, 0.1);
  --senn-border: rgba(92, 196, 207, 0.32);
  --senn-aura: #1f8792;

  --success: #5fd28f;
  --success-soft: rgba(95, 210, 143, 0.1);
  --success-border: rgba(95, 210, 143, 0.28);
  --warning: #f2b45a;
  --warning-soft: rgba(242, 180, 90, 0.1);
  --warning-border: rgba(242, 180, 90, 0.3);
  --danger: #ff7c70;
  --danger-soft: rgba(255, 124, 112, 0.1);
  --danger-border: rgba(255, 124, 112, 0.3);
  --neutral-soft: rgba(255, 255, 255, 0.05);
  --neutral-border: rgba(255, 255, 255, 0.12);

  --logo-main-1: #f8fafc;
  --logo-main-2: #cbd5e1;
  --logo-main-3: #94a3b8;
  --logo-small-1: #e2e8f0;
  --logo-small-2: #94a3b8;
  --logo-fold-1: #64748b;
  --logo-fold-2: #475569;
  --logo-fold-3: #94a3b8;

  --shadow-sheet: 0 0 0 1px rgba(255, 255, 255, 0.05);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 6px 20px -6px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.05);
  --shadow-lg: 0 28px 56px -12px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.06);

  --fill-strong: rgba(255, 255, 255, 0.09);
}

/* ==========================================================================
   Basis
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

html,
body {
  margin: 0;
  padding: 0;
  font-family: var(--font);
  font-size: var(--fs-base);
  line-height: 1.5;
  color: var(--text);
  background: var(--frame);
  font-feature-settings: "cv11", "ss01", "tnum" 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Weergave-wissel: kleuren vloeien kort over (theme.js zet deze klasse ~0,4 s). */
.theme-switching,
.theme-switching *,
.theme-switching *::before,
.theme-switching *::after {
  transition: background-color 320ms var(--ease), border-color 320ms var(--ease), color 320ms var(--ease),
    fill 320ms var(--ease), box-shadow 320ms var(--ease) !important;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  color: var(--text);
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.25;
}

h1 {
  font-size: var(--fs-2xl);
  letter-spacing: -0.025em;
}

h2 {
  font-size: var(--fs-lg);
}

h3 {
  font-size: var(--fs-md);
}

p {
  margin: 0;
}

a {
  color: var(--link);
  text-decoration: none;
  text-underline-offset: 3px;
}

a:hover {
  text-decoration: underline;
}

strong,
b {
  font-weight: 600;
}

code,
kbd,
samp {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

kbd {
  display: inline-block;
  min-width: 1.6em;
  padding: 0 5px;
  border: 1px solid var(--line-strong);
  border-bottom-width: 2px;
  border-radius: 5px;
  background: var(--surface);
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.55;
  text-align: center;
}

hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: var(--space-6) 0;
}

img,
svg {
  vertical-align: middle;
}

.icon {
  width: 18px;
  height: 18px;
  flex: none;
}

::selection {
  background: var(--accent-soft);
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

[hidden] {
  display: none !important;
}

/* Componenten met een eigen display-waarde blijven echt verborgen. */
.nav a[hidden],
.tab-link[hidden],
:is(.button-primary, .button-secondary)[hidden] {
  display: none !important;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 200;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  background: var(--ink);
  color: var(--ink-text);
  font-weight: 600;
}

.skip-link:focus {
  top: 12px;
  text-decoration: none;
}

/* Dunne, rustige schuifbalken */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}

/* ==========================================================================
   Shell: frame, zijbalk, vel, Senn-paneel
   ========================================================================== */

.app-shell {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr) 0;
  grid-template-areas: "sidebar main panel";
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: var(--frame);
}

/* Geen kolom-animatie (dat herschikt het hele vel 280 ms lang); het paneel zelf schuift.
   Bij sluiten blijft de kolom staan tot het paneel weg is (body.senn-closing, app-shell.js). */
.senn-open .app-shell,
.senn-closing .app-shell {
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr) var(--panel-w);
}

.mobile-bar,
.tabbar,
.nav-scrim {
  display: none;
}

/* ---------- Zijbalk ---------- */

.sidebar {
  grid-area: sidebar;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 14px 12px 12px;
  color: var(--frame-text);
}

.sidebar-top {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 8px 14px;
}

.app-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--frame-text);
  text-decoration: none;
}

.app-brand:hover {
  text-decoration: none;
}

.brand-mark-svg {
  width: 30px;
  height: auto;
  flex: none;
}

.app-wordmark {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 650;
  letter-spacing: -0.03em;
}

.shell-org {
  padding-left: 0;
  color: var(--frame-muted);
  font-size: var(--fs-xs);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.shell-org:empty {
  display: none;
}

/* "Vraag Senn" - de vaste ingang naar de assistent */
.senn-button {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 40px;
  margin: 0 0 14px;
  padding: 0 10px 0 8px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--sheet);
  color: var(--text);
  font: inherit;
  font-weight: 550;
  text-align: left;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur-fast) var(--ease);
}

.senn-button:hover {
  border-color: var(--senn-border);
  box-shadow: 0 0 0 3px var(--senn-soft), var(--shadow-sm);
}

.senn-button:active {
  transform: scale(0.99);
}

.senn-button[aria-expanded="true"] {
  border-color: var(--senn-border);
  background: var(--senn-soft);
}

.senn-button-icon {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: var(--senn-aura);
  color: var(--on-aura);
}

.senn-button-icon .icon {
  width: 16px;
  height: 16px;
}

.senn-button-label {
  flex: 1;
}

.senn-button-key {
  font-size: 11px;
}

.sidebar-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  margin: 0 -4px;
  padding: 0 4px;
}

.nav-group + .nav-group {
  margin-top: 18px;
}

.nav-group-label {
  padding: 0 10px 6px;
  color: var(--frame-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nav a {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 36px;
  padding: 0 10px;
  border-radius: var(--radius-sm);
  color: var(--frame-text);
  font-weight: 500;
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.nav a .icon {
  color: var(--frame-muted);
  transition: color var(--dur-fast) var(--ease);
}

.nav a:hover {
  background: var(--frame-hover);
  text-decoration: none;
}

.nav a.active {
  background: var(--frame-active);
  color: var(--text);
  font-weight: 600;
  box-shadow: var(--shadow-sm);
}

.nav a.active .icon {
  color: var(--accent);
}

.nav-label {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-footer {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 12px;
}

.icon-button {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--frame-muted);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.icon-button:hover {
  background: var(--frame-hover);
  color: var(--frame-text);
}

/* ---------- Menu's (profiel) ---------- */

.menu {
  position: relative;
}

.menu-dropdown {
  position: absolute;
  z-index: 60;
  right: 0;
  top: calc(100% + 6px);
  min-width: 240px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
  color: var(--text);
  box-shadow: var(--shadow-lg);
  font-size: var(--fs-sm);
  animation: pop-in var(--dur) var(--ease);
}

.menu-dropdown p + p {
  margin-top: 8px;
}

.menu-dropdown-up {
  top: auto;
  bottom: calc(100% + 6px);
}

.user-menu .menu-dropdown {
  left: 0;
  right: 0;
  min-width: 0;
}

.menu-footnote {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  color: var(--text-faint);
  font-size: var(--fs-xs);
}

.user-button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--frame-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease);
}

.user-button:hover,
.user-button[aria-expanded="true"] {
  background: var(--frame-hover);
}

.user-avatar {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: 50%;
  background: var(--ink);
  color: var(--ink-text);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.02em;
}

.user-avatar .icon {
  width: 16px;
  height: 16px;
}

.user-button-text {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  line-height: 1.3;
}

.user-button-name {
  font-weight: 600;
  font-size: var(--fs-sm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-button-org {
  color: var(--frame-muted);
  font-size: var(--fs-xs);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.icon-chevron {
  width: 16px;
  height: 16px;
  color: var(--frame-muted);
}

.user-context-pill {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.user-context-name {
  font-weight: 600;
}

.user-context-org {
  color: var(--text-muted);
  font-size: var(--fs-xs);
  margin-bottom: 8px;
}

/* ---------- Het vel (hoofdinhoud) ---------- */

.main {
  grid-area: main;
  min-width: 0;
  min-height: 0;
  margin: var(--gap-frame) var(--gap-frame) var(--gap-frame) 0;
  padding: 36px 44px 56px;
  overflow-y: auto;
  border-radius: var(--radius-xl);
  background: var(--sheet);
  box-shadow: var(--shadow-sheet);
  outline: none;
  scroll-behavior: smooth;
}

.main > * {
  max-width: 1180px;
  margin-left: auto;
  margin-right: auto;
}

@media (prefers-reduced-motion: reduce) {
  .main {
    scroll-behavior: auto;
  }
}

/* Paginakop binnen het vel */
.page-header {
  display: block;
  margin-bottom: 28px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line);
}

.page-header h1 {
  font-size: var(--fs-3xl);
  letter-spacing: -0.03em;
}

.page-header p {
  max-width: 680px;
  margin-top: 8px;
  color: var(--text-muted);
  font-size: var(--fs-md);
  line-height: 1.5;
}

.eyebrow {
  display: block;
  margin-bottom: 6px;
  color: var(--text-faint);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ---------- Senn-paneel ---------- */

.ai-panel {
  grid-area: panel;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  margin: var(--gap-frame) var(--gap-frame) var(--gap-frame) 0;
  overflow: hidden;
  border-radius: var(--radius-xl);
  background: var(--sheet);
  box-shadow: var(--shadow-sheet);
  visibility: hidden;
  opacity: 0;
  transform: translateX(16px);
  transition: opacity var(--dur) var(--ease), transform var(--dur-slow) var(--ease), visibility 0s linear var(--dur-slow);
}

.senn-open .ai-panel {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition: opacity var(--dur) var(--ease) 60ms, transform var(--dur-slow) var(--ease), visibility 0s;
}

.ai-panel-header {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 18px 52px 16px 18px;
  border-bottom: 1px solid var(--line);
}

.ai-panel-header > .icon {
  width: 32px;
  height: 32px;
  padding: 7px;
  border-radius: 10px;
  background: var(--senn-aura);
  color: var(--on-aura);
}

.ai-panel-header h2 {
  font-size: var(--fs-md);
}

.ai-panel-header p {
  margin-top: 2px;
  color: var(--text-muted);
  font-size: var(--fs-sm);
  line-height: 1.4;
}

.ai-panel-close {
  position: absolute;
  top: 14px;
  right: 12px;
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}

.ai-panel-close:hover {
  background: var(--surface-hover);
  color: var(--text);
}

.ai-panel .chat-window {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 18px;
}

.ai-panel .chat-form {
  margin: 0 14px 14px;
}

@keyframes pop-in {
  from {
    opacity: 0;
    transform: translateY(4px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Pagina zonder Senn-paneel (Vandaag): twee kolommen. */
.app-shell-single {
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  grid-template-areas: "sidebar main";
}

.senn-open .app-shell-single {
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
}

/* Banner van auth.js (verbinding weg). De pilotbalk is vervallen (UI/UX Sprint 3c, D1). */
.senn-connection-banner {
  position: fixed;
  z-index: 120;
  left: 50%;
  top: 14px;
  transform: translateX(-50%);
  max-width: min(640px, calc(100vw - 32px));
  padding: 10px 16px;
  border-radius: var(--radius-pill);
  background: var(--ink);
  color: var(--ink-text);
  font-size: var(--fs-sm);
  font-weight: 500;
  box-shadow: var(--shadow-lg);
  animation: fade-up var(--dur) var(--ease);
}

/* ==========================================================================
   Componenten
   ========================================================================== */

/* ---------- Knoppen ----------
   Primair: inkt (zwart op licht, wit op donker). Secundair: vel met dunne rand.
   Tekst: alleen kleur. Elke knop heeft een korte, rustige reactie. */

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed;
}

.button-primary,
.button-secondary,
.button-text,
.call-button,
.login-form button[type="submit"],
.chat-form button[type="submit"],
.senn-dialog-confirm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease),
    color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}

.button-primary .icon,
.button-secondary .icon,
.button-text .icon {
  width: 16px;
  height: 16px;
}

.button-primary,
.login-form button[type="submit"],
.senn-dialog-confirm,
.call-button.is-primary {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--ink-text);
}

.button-primary:hover:not(:disabled),
.login-form button[type="submit"]:hover:not(:disabled),
.senn-dialog-confirm:hover:not(:disabled),
.call-button.is-primary:hover:not(:disabled) {
  background: var(--ink-hover);
  border-color: var(--ink-hover);
  text-decoration: none;
}

.button-secondary,
.call-button {
  background: var(--surface);
  border-color: var(--line-strong);
  color: var(--text);
  box-shadow: var(--shadow-sm);
}

.button-secondary:hover:not(:disabled),
.call-button:hover:not(:disabled) {
  background: var(--surface-hover);
  border-color: var(--field-border);
  text-decoration: none;
}

.button-text {
  min-height: 32px;
  padding: 0 8px;
  background: transparent;
  color: var(--link);
}

.button-text:hover:not(:disabled) {
  background: var(--accent-soft);
  text-decoration: none;
}

.button-primary:active:not(:disabled),
.button-secondary:active:not(:disabled),
.call-button:active:not(:disabled),
.button-text:active:not(:disabled) {
  transform: scale(0.98);
}

.button-primary:disabled,
.button-secondary:disabled,
.button-text:disabled,
.call-button:disabled,
.login-form button[type="submit"]:disabled {
  opacity: 0.5;
  box-shadow: none;
}

.button-danger {
  color: var(--danger) !important;
}

/* ---------- Invoer ---------- */

label {
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: 550;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="url"],
select,
textarea {
  width: 100%;
  min-height: 38px;
  padding: 8px 12px;
  border: 1px solid var(--field-border);
  border-radius: var(--radius-sm);
  background: var(--field-bg);
  color: var(--text);
  font-size: var(--fs-base);
  line-height: 1.4;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}

input::placeholder,
textarea::placeholder {
  color: var(--text-faint);
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

input:disabled,
select:disabled,
textarea:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

select {
  appearance: none;
  padding-right: 34px;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
    linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
  background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

textarea {
  min-height: 96px;
  resize: vertical;
}

input[type="checkbox"],
input[type="radio"] {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--accent);
}

/* Schakelaar: bestaande checkboxen met deze klassen worden schakelaars. */
.host-capability-checkbox,
.manager-checkbox {
  appearance: none;
  position: relative;
  width: 40px !important;
  height: 24px !important;
  flex: none;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--line-strong);
  cursor: pointer;
  transition: background-color var(--dur) var(--ease);
}

.host-capability-checkbox::after,
.manager-checkbox::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--knob);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--ease);
}

.host-capability-checkbox:checked,
.manager-checkbox:checked {
  background: var(--success);
}

.host-capability-checkbox:checked::after,
.manager-checkbox:checked::after {
  transform: translateX(16px);
}

.host-capability-checkbox:focus-visible,
.manager-checkbox:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ---------- Panelen en kaarten ---------- */

.panel {
  margin-bottom: 20px;
  padding: 22px 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.panel > h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.panel h2 + p,
.panel > p {
  color: var(--text-muted);
}

.panel-hint {
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

.state-box,
.state-loading,
.workspace-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 40px 24px;
  color: var(--text-muted);
  text-align: center;
}

.state-box .icon {
  width: 28px;
  height: 28px;
  color: var(--text-faint);
}

.state-loading {
  flex-direction: row;
}

.spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid var(--line-strong);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.inline-error,
.inline-success,
.call-error {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--danger-border);
  border-radius: var(--radius-sm);
  background: var(--danger-soft);
  color: var(--danger);
  font-size: var(--fs-sm);
}

.inline-success {
  border-color: var(--success-border);
  background: var(--success-soft);
  color: var(--success);
}

.inline-error .icon,
.inline-success .icon,
.call-error .icon {
  width: 16px;
  height: 16px;
  margin-top: 1px;
}

/* ---------- Status ---------- */

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--text-muted);
  font-size: var(--fs-xs);
  font-weight: 550;
  white-space: nowrap;
  text-decoration: none;
}

.status-pill-text {
  overflow: hidden;
  text-overflow: ellipsis;
}

.status-dot {
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  background: var(--text-faint);
}

.status-pill.status-ok .status-dot,
.status-ok .status-dot {
  background: var(--success);
  box-shadow: 0 0 0 3px var(--success-soft);
}

.status-pill.status-warn .status-dot,
.status-warn .status-dot {
  background: var(--warning);
  box-shadow: 0 0 0 3px var(--warning-soft);
}

.status-pill.status-error .status-dot,
.status-error .status-dot {
  background: var(--danger);
  box-shadow: 0 0 0 3px var(--danger-soft);
}

.badge-status,
.today-chip,
.capability-chip,
.source-tag,
.demo-tag,
.yesno-badge,
.today-tag,
.intake-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 22px;
  padding: 0 8px;
  border-radius: var(--radius-pill);
  background: var(--neutral-soft);
  color: var(--text-muted);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}

.badge-status::before,
.today-chip::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.badge-status-success,
.today-chip-ok {
  background: var(--success-soft);
  color: var(--success);
}

.badge-status-warning,
.today-chip-warn,
.today-chip-wait {
  background: var(--warning-soft);
  color: var(--warning);
}

.badge-status-error,
.badge-status-danger,
.today-chip-danger,
.today-chip-error,
.today-chip-fail {
  background: var(--danger-soft);
  color: var(--danger);
}

.badge-status-info,
.badge-status-neutral,
.today-chip-accent,
.today-chip-info,
.today-chip-neutral {
  background: var(--accent-soft);
  color: var(--link);
}

.inbox-updated {
  margin-left: 10px;
  color: var(--text-faint);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  vertical-align: middle;
}

@keyframes pulse {
  50% {
    opacity: 0.35;
  }
}

/* Kenteken: geel met blauwe EU-strook */
.call-plate,
.plate {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 8px 0 14px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--plate-eu) 0 8px, var(--plate-bg) 8px);
  color: var(--plate-text);
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18);
}

/* ---------- Segment / tabs ---------- */

.workspace-tabs,
.manager-tabs,
.theme-choice,
.today-filters {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 3px;
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
  box-shadow: inset 0 0 0 1px var(--line);
}

.workspace-tab,
.manager-tab,
.theme-option,
.today-filter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 0 12px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--text-muted);
  font-size: var(--fs-sm);
  font-weight: 550;
  white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.workspace-tab:hover,
.manager-tab:hover,
.theme-option:hover,
.today-filter:hover {
  color: var(--text);
}

.workspace-tab.active,
.manager-tab.active,
.manager-tab[aria-selected="true"],
.theme-option.active,
.today-filter[aria-pressed="true"] {
  background: var(--sheet);
  color: var(--text);
  box-shadow: var(--shadow-sm), 0 0 0 1px var(--line);
}

.today-filter-count {
  min-width: 18px;
  padding: 0 5px;
  border-radius: var(--radius-pill);
  background: var(--neutral-soft);
  color: var(--text-muted);
  font-size: 11px;
  line-height: 18px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.today-filter[aria-pressed="true"] .today-filter-count {
  background: var(--ink);
  color: var(--ink-text);
}


/* ---------- Dialoog ---------- */

.senn-dialog {
  width: min(480px, calc(100vw - 32px));
  padding: 0;
  border: 0;
  border-radius: var(--radius-xl);
  background: var(--surface-raised);
  color: var(--text);
  box-shadow: var(--shadow-lg);
  animation: pop-in var(--dur) var(--ease);
}

.senn-dialog::backdrop {
  background: var(--scrim);
}

.senn-dialog-body {
  padding: 22px 24px;
}

.senn-dialog-label {
  font-weight: 650;
  font-size: var(--fs-md);
}

.senn-dialog-note {
  margin-top: 8px;
  color: var(--text-muted);
}

.senn-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 24px 18px;
}

/* ---------- Verbruiksmeter ---------- */

.usage-meter {
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.usage-meter-head,
.usage-meter-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 16px;
  font-size: var(--fs-sm);
}

.usage-meter-title {
  font-weight: 600;
}

.usage-meter-summary,
.usage-meter-foot {
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.usage-meter-bar {
  height: 8px;
  margin: 12px 0 10px;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: var(--neutral-soft);
}

.usage-meter-fill {
  height: 100%;
  border-radius: inherit;
  background: var(--success);
  transition: width var(--dur-slow) var(--ease);
}

.usage-meter-warning .usage-meter-fill,
[data-usage-level="warning"] .usage-meter-fill {
  background: var(--warning);
}

.usage-meter-limit .usage-meter-fill,
[data-usage-level="limit"] .usage-meter-fill {
  background: var(--danger);
}

/* ==========================================================================
   Senn: chat, bubbels en kaarten
   ========================================================================== */

.chat-window {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.chat-bubble {
  max-width: 88%;
  padding: 10px 14px;
  border-radius: 14px;
  font-size: var(--fs-base);
  line-height: 1.55;
  overflow-wrap: anywhere;
  animation: fade-up var(--dur) var(--ease);
}

.chat-bubble.user {
  align-self: flex-end;
  border-bottom-right-radius: 4px;
  background: var(--ink);
  color: var(--ink-text);
}

.chat-bubble.assistant {
  align-self: flex-start;
  border-bottom-left-radius: 4px;
  background: var(--surface-sunken);
  box-shadow: inset 0 0 0 1px var(--line);
}

.chat-bubble.assistant.typing {
  color: var(--text-muted);
  font-style: normal;
}

.chat-bubble.assistant.typing::after {
  content: "";
  display: inline-block;
  width: 18px;
  height: 6px;
  margin-left: 8px;
  background: radial-gradient(circle, var(--senn) 2px, transparent 2.5px) 0 50% / 6px 6px repeat-x;
  animation: pulse 1.2s ease-in-out infinite;
}

.chat-sources {
  align-self: flex-start;
  max-width: 88%;
  color: var(--text-muted);
  font-size: var(--fs-xs);
}

.chat-sources summary {
  cursor: pointer;
}

.chat-sources ul {
  margin: 6px 0 0;
  padding-left: 18px;
}

.source-tier {
  color: var(--text-faint);
}

.chat-form {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 5px 5px 14px;
  border: 1px solid var(--field-border);
  border-radius: 14px;
  background: var(--field-bg);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}

.chat-form:focus-within {
  border-color: var(--senn);
  box-shadow: 0 0 0 3px var(--senn-soft);
}

.chat-form input {
  flex: 1;
  min-width: 0;
  min-height: 36px;
  padding: 0;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.chat-form button[type="submit"] {
  min-height: 34px;
  border-radius: 10px;
  background: var(--ink);
  border-color: var(--ink);
  color: var(--ink-text);
}

.chat-form button[type="submit"]:hover:not(:disabled) {
  background: var(--ink-hover);
}

/* Klantkaart in de chat */
.customer-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.customer-name {
  font-weight: 650;
}

.customer-contact {
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

.vehicle-chip {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
  font-size: var(--fs-sm);
}

/* Sprint 33: intakekaart en actiekaart (voorgestelde Autoflex-wijziging) met Senn-kader */
.gms-action-card,
.intake-card {
  position: relative;
  width: 100%;
  max-width: 560px;
  padding: 14px 16px 14px 18px !important;
  border-radius: var(--radius-lg) !important;
  background: var(--surface) !important;
  box-shadow: inset 0 0 0 1px var(--senn-border), var(--shadow-sm) !important;
}

.gms-action-card::before,
.intake-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  bottom: 12px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--senn-aura);
}

.gms-action-card ul {
  color: var(--text-muted);
}

.gms-action-outcome:empty {
  display: none;
}

.intake-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.intake-ref,
.intake-class {
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

.intake-section {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.intake-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.intake-warn,
.intake-missing {
  color: var(--warning);
  font-size: var(--fs-sm);
}

.intake-step-icon {
  display: inline-block;
  width: 16px;
  color: var(--text-muted);
}

.intake-edit {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.intake-candidates {
  display: grid;
  gap: 6px;
}

/* Leeg Senn-paneel: een rustige uitnodiging in plaats van een leeg vlak. */
.ai-panel .chat-window:empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-align: center;
}

.ai-panel .chat-window:empty::before {
  content: "";
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: var(--senn-aura);
  box-shadow: 0 10px 30px -10px var(--senn-glow);
}

.ai-panel .chat-window:empty::after {
  content: "Vraag Senn naar klanten, auto's, afspraken of werkorders. Senn zoekt het op en bereidt voor; jij beslist.";
  max-width: 260px;
  color: var(--text-muted);
  font-size: var(--fs-sm);
  line-height: 1.55;
}

/* ==========================================================================
   Vandaag (index.html)
   Eén hoofdtaak: wat wacht op jou. Senn bovenaan als vraagbalk; rechts de
   rustige stand van de dag.
   ========================================================================== */

.today-main > * {
  max-width: 1240px;
}

.today-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px 24px;
  margin-bottom: 26px;
}

.today-title {
  min-width: 0;
}

.today-title h1 {
  margin-top: 6px;
  font-size: clamp(30px, 3.4vw, 42px);
  letter-spacing: -0.035em;
  line-height: 1.08;
}

.today-context {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  color: var(--text-faint);
  font-size: var(--fs-sm);
  font-weight: 550;
}

.today-summary {
  margin-top: 8px;
  color: var(--text-muted);
  font-size: var(--fs-lg);
  line-height: 1.4;
}

.today-summary:empty {
  display: none;
}

.today-tag {
  background: var(--warning-soft);
  color: var(--warning);
}

.today-refresh-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.today-updated {
  color: var(--text-faint);
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
}

/* ---------- Puls van de dag (band) ---------- */

.today-pulse {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  align-items: stretch;
  margin-bottom: 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  overflow: hidden;
}

.today-pulse-head {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 8px;
  padding: 18px 20px;
  border-right: 1px solid var(--line);
  background: var(--surface-sunken);
}

.today-pulse-head h2 {
  font-size: var(--fs-md);
  line-height: 1.3;
}

.today-pulse #today-garage-body {
  display: flex;
  align-items: stretch;
  min-width: 0;
}

.today-pulse .today-stats {
  display: grid;
  flex: 1;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
}

.today-pulse .today-stat {
  padding: 16px 20px;
  border-left: 1px solid var(--line);
}

.today-pulse .today-stat:first-child {
  border-left: 0;
}

.today-pulse .today-stats .today-stat dd > span:first-child {
  font-size: 34px;
}

.today-pulse .today-autoflex {
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  width: 168px;
  margin: 0;
  padding: 16px 20px;
  border-top: 0;
  border-left: 1px dashed var(--line-strong);
}

.today-pulse .today-autoflex span:last-child {
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: 600;
}

/* ---------- Vraag Senn (hero) ---------- */

.home-chat-bar {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
  padding: 10px 10px 12px;
  border-radius: 18px;
  background: var(--surface-sunken);
  box-shadow: inset 0 0 0 1px var(--line);
}

.home-chat-bar::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  padding: 1px;
  background: var(--senn-aura);
  opacity: 0.35;
  -webkit-mask: linear-gradient(black 0 0) content-box, linear-gradient(black 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.home-chat-bar > * {
  position: relative;
  z-index: 1;
}

.home-chat-bar .chat-form {
  min-height: 56px;
  padding: 7px 7px 7px 18px;
  border-color: var(--line-strong);
  border-radius: 14px;
  background: var(--sheet);
  box-shadow: var(--shadow-sm);
}

.home-chat-bar .chat-form input {
  font-size: var(--fs-md);
}

.home-chat-bar .chat-form button[type="submit"] {
  width: 42px;
  min-height: 42px;
  padding: 0;
  border-radius: 11px;
  background: var(--senn-aura);
  border: 0;
  color: var(--on-aura);
}

.home-chat-bar .chat-form button[type="submit"]:hover:not(:disabled) {
  background: var(--senn-aura);
  filter: brightness(1.08);
}

.home-chat-bar .chat-form button[type="submit"] .icon {
  width: 20px;
  height: 20px;
}

.home-chat-bar.is-empty .chat-window {
  display: none;
}

.home-chat-bar .chat-window {
  order: 2;
  max-height: 0;
  overflow-y: auto;
  transition: max-height var(--dur-slow) var(--ease);
}

.home-chat-bar .chat-form-row {
  order: 1;
}

.home-chat-bar:not(.is-empty) .chat-window {
  max-height: min(56vh, 560px);
  padding: 6px 4px 4px;
}

.home-chat-bar {
  scroll-margin-top: calc(var(--chrome-top) + 8px);
}

/* Zodra er een gesprek is, vult de chat het zichtbare vel; invoer onderaan,
   Vandaag gewoon in de paginaflow eronder. */
.home-main.is-chat-active .home-chat-bar {
  height: calc(100vh - var(--chrome-h) - 36px);
  height: calc(100dvh - var(--chrome-h) - 36px);
  padding: 12px;
}

.home-main.is-chat-active .home-chat-bar .chat-window {
  order: 1;
  flex: 1;
  min-height: 0;
  max-height: none;
}

.home-main.is-chat-active .home-chat-bar .chat-form-row {
  order: 3;
}

/* ---------- Raster ---------- */

.today-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 24px;
  align-items: start;
}

.today-side {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.today-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--text);
}

.today-side .today-card {
  padding: 18px 20px;
}

.today-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  margin-bottom: 14px;
}

.today-card-head h2 {
  font-size: var(--fs-md);
}

.today-card-note {
  color: var(--text-faint);
  font-size: var(--fs-xs);
}

.today-count:not(:empty) {
  display: inline-grid;
  place-items: center;
  min-width: 24px;
  height: 22px;
  margin-left: 6px;
  padding: 0 7px;
  border-radius: var(--radius-pill);
  background: var(--ink);
  color: var(--ink-text);
  font-size: 12px;
  font-weight: 650;
  vertical-align: 3px;
  font-variant-numeric: tabular-nums;
}

/* ---------- Wacht op jou ---------- */

.today-wait {
  overflow: hidden;
}

.today-wait .today-card-head {
  margin: 0;
  padding: 18px 20px 14px;
}

.today-wait .today-card-head h2 {
  font-size: var(--fs-lg);
}

.today-group h3 {
  padding: 14px 20px 8px;
  border-top: 1px solid var(--line);
  color: var(--text-faint);
  font-family: var(--font);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.today-list {
  margin: 0;
  padding: 0 8px 8px;
  list-style: none;
}

.today-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 12px 12px 22px;
  border-radius: var(--radius-md);
  transition: background-color var(--dur-fast) var(--ease);
}

.today-row::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 16px;
  bottom: 16px;
  width: 3px;
  border-radius: 3px;
  background: var(--line-strong);
}

.today-row[data-group="check"]::before,
.today-row[data-group="failed"]::before {
  background: var(--danger);
}

.today-row[data-group="expiring"]::before {
  background: var(--senn);
}

.today-row[data-group="todo"]::before {
  background: var(--warning);
}

.today-row:hover {
  background: var(--surface-hover);
}

.today-row-main {
  flex: 1;
  min-width: 0;
}

.today-row-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
}

.today-row-name {
  font-weight: 600;
}

.today-row-meta {
  color: var(--text-faint);
  font-size: var(--fs-sm);
}

.today-row-why {
  margin-top: 3px;
  color: var(--text);
  font-size: var(--fs-sm);
}

.today-row-who {
  margin-top: 2px;
  color: var(--text-faint);
  font-size: var(--fs-xs);
}

.today-row-who strong {
  color: var(--senn);
  font-weight: 600;
}

.today-row-error {
  margin-top: 6px;
  color: var(--danger);
  font-size: var(--fs-sm);
}

.today-row-action {
  flex: none;
}

.today-card-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px 20px;
  padding: 14px 20px;
  border-top: 1px solid var(--line);
  background: var(--surface-sunken);
  color: var(--text-faint);
  font-size: var(--fs-xs);
}

.today-card-foot a {
  font-weight: 600;
  font-size: var(--fs-sm);
}

.today-notice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 20px 12px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--neutral-soft);
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

.today-notice-warn {
  background: var(--warning-soft);
  color: var(--text);
}

.today-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 44px 24px 48px;
  border-top: 1px solid var(--line);
  color: var(--text-muted);
  text-align: center;
}

.today-empty .icon {
  width: 40px;
  height: 40px;
  padding: 10px;
  border-radius: 50%;
  background: var(--success-soft);
  color: var(--success);
}

.today-empty strong {
  color: var(--text);
  font-size: var(--fs-md);
}

.today-empty span {
  max-width: 420px;
  font-size: var(--fs-sm);
}

.today-skeleton {
  display: grid;
  gap: 10px;
  padding: 8px 20px 20px;
}

.today-skeleton span {
  height: 54px;
  border-radius: var(--radius-md);
  background: linear-gradient(90deg, var(--neutral-soft) 0%, var(--surface-hover) 50%, var(--neutral-soft) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.4s linear infinite;
}

@keyframes shimmer {
  to {
    background-position: -200% 0;
  }
}

/* ---------- Zijkolom: cijfers, Senn, Live ---------- */

.today-stats,
.today-senn-rows {
  margin: 0;
}

.today-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 16px;
}

.today-stat dt {
  color: var(--text-muted);
  font-size: var(--fs-xs);
}

.today-stat dd {
  margin: 2px 0 0;
}

.today-stats .today-stat dd > span:first-child {
  display: block;
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}

.today-stat-note {
  display: block;
  color: var(--text-faint);
  font-size: 11.5px;
}

.today-senn-rows .today-stat {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px dashed var(--line);
}

.today-senn-rows .today-stat:last-child {
  border-bottom: 0;
}

.today-senn-rows .today-stat dt {
  color: var(--text);
  font-size: var(--fs-sm);
}

.today-senn-rows .today-stat dd {
  display: flex;
  flex-direction: row-reverse;
  align-items: baseline;
  gap: 8px;
  margin: 0;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

.today-senn-rows .today-stat-note {
  display: inline;
}

.today-autoflex {
  display: flex;
  justify-content: space-between;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  color: var(--text-faint);
  font-size: var(--fs-xs);
}

.today-log {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.today-log h3 {
  margin-bottom: 8px;
  color: var(--text-muted);
  font-family: var(--font);
  font-size: var(--fs-xs);
  font-weight: 650;
}

.today-log ul {
  margin: 0 0 10px;
  padding: 0;
  list-style: none;
}

.today-log li {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 8px;
  padding: 4px 0;
  font-size: var(--fs-xs);
}

.today-log li > span:nth-child(2) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 11.5px;
}

.today-log-time {
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}

.today-log-outcome {
  color: var(--text-muted);
}

.today-muted {
  color: var(--text-faint);
  font-size: var(--fs-sm);
}

/* Sprint 42 Fase 1: blok "Onderdelen" (aandacht bovenaan; alleen lezen) */
.today-parts-summary {
  margin-bottom: 10px;
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

.today-parts {
  margin: 0 0 10px;
  padding: 0;
  list-style: none;
}

.today-parts > li {
  border-top: 1px solid var(--line);
}

.today-parts > li:first-child {
  border-top: 0;
}

/* Sprint 43B: het label staat onder de titel (de kolom is smal en een signaal als "Levert te laat (wo 28 okt
   15:10)" is lang); zo houdt de titel altijd zijn ruimte. */
.today-parts-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 4px 10px;
  padding: 8px 0;
}

.today-parts-row > .today-chip {
  grid-column: 2;
  justify-self: start;
}

/* Sprint 43B: elke aandachtsregel klapt de hele order open (<details>; hoogte + doorzichtigheid, zie V3) */
.today-parts-item summary.today-parts-row {
  grid-template-columns: auto minmax(0, 1fr) auto;
  border-radius: var(--radius-xs);
  cursor: pointer;
  list-style: none;
}

.today-parts-item summary.today-parts-row::-webkit-details-marker {
  display: none;
}

.today-parts-item summary.today-parts-row:hover .today-parts-main strong {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.today-parts-toggle {
  display: inline-flex;
  grid-column: 3;
  grid-row: 1 / span 2;
  color: var(--text-faint);
}

.today-parts-toggle .icon {
  width: 16px;
  height: 16px;
  transition: transform 200ms var(--ease);
}

.today-parts-item details[open] .today-parts-toggle .icon {
  transform: rotate(180deg);
}

.today-parts-order {
  margin: 0 0 10px;
  padding: 8px 12px;
  border-radius: var(--radius-xs);
  background: var(--neutral-soft);
}

.today-parts-order-head {
  margin-bottom: 4px;
  color: var(--text-muted);
  font-size: var(--fs-xs);
  font-weight: 600;
}

.today-parts-order ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.today-parts-order li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, max-content);
  align-items: center;
  gap: 10px;
  padding: 6px 0;
}

.today-parts-order li + li {
  border-top: 1px solid var(--line);
}

/* Lange signalen (bv. een routeschatting) mogen in het blok over twee regels lopen. */
.today-parts .today-chip {
  max-width: 100%;
  padding-block: 3px;
  line-height: 1.3;
  white-space: normal;
}

.today-parts-clear {
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

@media (prefers-reduced-motion: reduce) {
  .today-parts-toggle .icon {
    transition: none;
  }
}


.today-parts-main {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}

.today-parts-main strong {
  overflow: hidden;
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.today-parts-main span {
  color: var(--text-faint);
  font-size: var(--fs-xs);
}

.today-parts-main .today-parts-bit {
  /* release 2f: alleen afbreken tussen "gepland wo 28 okt" en "2× LF-88", nooit midden in de datum */
  white-space: nowrap;
}

.today-parts-note {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  color: var(--text-faint);
  font-size: var(--fs-xs);
  line-height: 1.45;
}

.today-log a,
.today-card > div > a,
#today-live-body > a {
  display: inline-block;
  margin-top: 10px;
  font-size: var(--fs-sm);
  font-weight: 600;
}

.today-live-state {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.today-live-state strong {
  display: block;
}

.today-live-state span {
  display: block;
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

.today-live-dot {
  width: 10px;
  height: 10px;
  margin-top: 6px;
  flex: none;
  border-radius: 50%;
  background: var(--text-faint);
}

.today-live-active .today-live-dot {
  background: var(--success);
  box-shadow: 0 0 0 4px var(--success-soft);
  animation: pulse 1.6s ease-in-out infinite;
}

.today-live-idle .today-live-dot,
.today-live-simulated .today-live-dot {
  background: var(--success);
}

.today-live-off .today-live-dot,
.today-live-error .today-live-dot {
  background: var(--danger);
}

/* ==========================================================================
   Inloggen (login.html) en wachtwoord (wachtwoord.html)
   ========================================================================== */

.login-shell {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--sheet);
}

.login-showcase {
  position: relative;
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 28px;
  margin: 10px 0 10px 10px;
  padding: 56px;
  overflow: hidden;
  border-radius: 20px;
  background: linear-gradient(165deg, var(--login-from) 0%, var(--login-to) 100%);
  color: var(--on-night);
}

.login-showcase-title {
  max-width: 460px;
  font-family: var(--font-display);
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.12;
}

/* Geluidsgolf midden in het inlogvlak (Sprint 3c, V1; op verzoek eigenaar 25 okt soepel, vervagend en stil):
   een paar zachte, over elkaar lopende golflijnen die naar de randen toe uitdoven. Verzoek eigenaar 31 okt: de golf
   als geheel "ademt" rustig (3,6 s per cyclus; dekking 72-100% en een minimale verticale schaal). Alleen opacity en
   transform, dus geen verspringing; de lijnen zelf bewegen niet. Bij "minder beweging" staat hij stil. */
.login-wave {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 34%;
  transform: translateY(-50%);
  pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 22%, black 78%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, black 22%, black 78%, transparent 100%);
  animation: login-wave-breathe 3.6s ease-in-out infinite;
}

@keyframes login-wave-breathe {
  0%,
  100% {
    opacity: 0.72;
    transform: translateY(-50%) scaleY(0.96);
  }

  50% {
    opacity: 1;
    transform: translateY(-50%) scaleY(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .login-wave {
    animation: none;
  }
}

.login-wave path {
  fill: none;
  stroke: var(--login-wave-peak);
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.login-wave .w1 { stroke-width: 2.2; opacity: 0.85; }
.login-wave .w2 { stroke-width: 1.6; opacity: 0.55; stroke: var(--login-wave); }
.login-wave .w3 { stroke-width: 1.4; opacity: 0.45; }
.login-wave .w4 { stroke-width: 1; opacity: 0.35; stroke: var(--login-wave); }

.login-showcase-title {
  position: relative;
  z-index: 1;
}

.login-card {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  justify-self: center;
  width: min(400px, calc(100% - 48px));
  padding: 32px 0;
}

.login-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 36px;
  color: var(--text);
}

.login-brand .brand-mark-svg {
  width: 40px;
}

.login-brand .app-wordmark {
  font-size: 26px;
}

.login-org {
  margin-bottom: 6px;
  color: var(--text-faint);
  font-size: var(--fs-xs);
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.login-title {
  font-size: var(--fs-2xl);
}

.login-subtitle {
  margin: 8px 0 26px;
  color: var(--text-muted);
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.login-form label {
  margin-top: 8px;
}

.login-form input,
.login-form select {
  min-height: 44px;
  background: var(--sheet);
}

.login-form button[type="submit"] {
  min-height: 46px;
  margin-top: 16px;
  font-size: var(--fs-base);
}

.login-form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.login-footnote {
  margin-top: 18px;
  color: var(--text-faint);
  font-size: var(--fs-sm);
}

.login-footnote + .login-footnote {
  margin-top: 6px;
}

.success-card {
  padding: 16px;
  border-radius: var(--radius-md);
  background: var(--success-soft);
}

.success-title {
  color: var(--success);
  font-weight: 650;
}

.reset-link-field {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
}

/* ==========================================================================
   Gesprekken (werkplek.html): lijst links, gesprek + context rechts, Senn als
   paneel ernaast. Het vel is hier een werkblad zonder buitenmarge.
   ========================================================================== */

.main-workspace {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}

.main-workspace > * {
  max-width: none;
  width: 100%;
  margin: 0;
}

#workspace-consent-banner:empty {
  display: none;
}

.consent-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--warning-border);
  background: var(--warning-soft);
  font-size: var(--fs-sm);
}

.workspace-layout {
  display: grid;
  grid-template-columns: clamp(296px, 26vw, 380px) minmax(0, 1fr);
  flex: 1;
  min-height: 0;
}

.workspace-column {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

.workspace-column-list {
  border-right: 1px solid var(--line);
  background: var(--surface-sunken);
}

.workspace-column-header {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 26px 20px 14px;
}

.workspace-column-header h1 {
  font-size: var(--fs-xl);
  letter-spacing: -0.02em;
}

.workspace-subtitle {
  margin-top: 2px;
  color: var(--text-faint);
  font-size: var(--fs-sm);
}

.workspace-column-header .workspace-tabs {
  align-self: stretch;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.workspace-tab {
  justify-content: center;
}

.workspace-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0 10px 16px;
}

.workspace-inbox-row {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  margin-bottom: 2px;
  padding: 12px;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text);
  text-align: left;
  transition: background-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}

.workspace-inbox-row:hover {
  background: var(--surface-hover);
}

.workspace-inbox-row.selected {
  background: var(--sheet);
  box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--line);
}

.workspace-inbox-row.selected::before {
  content: "";
  position: absolute;
  left: -10px;
  top: 14px;
  bottom: 14px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--accent);
}

.workspace-avatar {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: 50%;
  background: var(--sheet);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  color: var(--text);
  font-size: 12.5px;
  font-weight: 650;
}

.workspace-avatar.is-unknown {
  color: var(--text-faint);
}

.workspace-avatar > .icon {
  width: 17px;
  height: 17px;
}

.workspace-avatar-channel {
  position: absolute;
  right: -3px;
  bottom: -3px;
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--ink-text);
  box-shadow: 0 0 0 2px var(--surface-sunken);
}

.workspace-avatar-channel .icon {
  width: 11px;
  height: 11px;
}

.workspace-avatar.is-unknown .workspace-avatar-channel {
  display: none;
}

.workspace-row-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  flex: 1;
  min-width: 0;
}

.workspace-inbox-row-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
}

.workspace-inbox-row-top strong {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  overflow: hidden;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.workspace-row-time {
  flex: none;
  color: var(--text-faint);
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
}

.workspace-row-sub {
  max-width: 100%;
  overflow: hidden;
  color: var(--text-muted);
  font-size: var(--fs-sm);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.workspace-inbox-row .badge-status {
  margin-top: 3px;
}

.workspace-attention-dot {
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  background: var(--warning);
}

/* ---------- Detail ---------- */

.workspace-back {
  display: none;
}

.workspace-column-detail {
  overflow-y: auto;
}

#workspace-context-panel {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.workspace-empty {
  flex: 1;
  min-height: 420px;
  gap: 8px;
}

.workspace-empty strong {
  color: var(--text);
  font-size: var(--fs-lg);
}

.workspace-empty span:last-child {
  max-width: 340px;
}

.workspace-empty-mark {
  width: 56px;
  height: 56px;
  margin-bottom: 8px;
  border-radius: 18px;
  background: var(--senn-soft);
  box-shadow: inset 0 0 0 1px var(--senn-border);
  -webkit-mask: none;
  position: relative;
}

.workspace-empty-mark::after {
  content: "";
  position: absolute;
  inset: 16px;
  border-radius: 6px;
  background: var(--senn-aura);
  transform: rotate(45deg) scale(0.8);
}

/* Gespreksscherm (telefoon) */
.call-panel {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  animation: fade-up var(--dur) var(--ease);
}

.call-panel-top {
  position: sticky;
  z-index: 5;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 52px;
  padding: 10px 28px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--sheet) 90%, transparent);
  backdrop-filter: blur(10px);
}

.call-panel-title {
  color: var(--text-faint);
  font-size: var(--fs-xs);
  font-weight: 650;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.call-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text-muted);
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
}

.call-status i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-faint);
}

.call-status.is-live {
  color: var(--success);
  font-weight: 600;
}

.call-status.is-live i {
  background: var(--success);
  box-shadow: 0 0 0 4px var(--success-soft);
  animation: pulse 1.4s ease-in-out infinite;
}

.call-panel-body {
  display: grid;
  gap: 16px;
  width: 100%;
  max-width: 820px;
  margin: 0 auto;
  padding: 28px 28px 24px;
}

.call-caller {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-bottom: 4px;
}

.call-avatar {
  display: inline-grid;
  place-items: center;
  width: 56px;
  height: 56px;
  flex: none;
  border-radius: 18px;
  background: var(--ink);
  color: var(--ink-text);
  font-size: 19px;
  font-weight: 650;
  letter-spacing: 0.01em;
}

.call-avatar .icon {
  width: 24px;
  height: 24px;
}

.call-caller-text {
  flex: 1;
  min-width: 0;
}

.call-caller-name {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.15;
}

.call-caller-sub {
  margin-top: 4px;
  color: var(--text-muted);
}

.call-caller .call-plate {
  min-height: 30px;
  font-size: 14px;
  padding-left: 16px;
}

.call-box {
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.call-box-label {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  color: var(--text-faint);
  font-size: var(--fs-xs);
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.call-box-label span:last-child {
  font-weight: 550;
  letter-spacing: 0;
  text-transform: none;
}

.call-row {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  gap: 12px;
  padding: 9px 0;
  border-top: 1px solid var(--line);
  font-size: var(--fs-sm);
}

.call-row:first-of-type {
  border-top: 0;
}

.call-row > span:first-child {
  color: var(--text-muted);
}

.call-row details summary {
  cursor: pointer;
  color: var(--link);
}

.call-note {
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

.call-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.call-done {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--success);
  font-size: var(--fs-sm);
  font-weight: 600;
}

/* Transcript als gesprek */
.call-transcript {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 420px;
  overflow-y: auto;
}

.call-line {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-width: 82%;
}

.call-line b {
  color: var(--text-faint);
  font-size: 11px;
  font-weight: 650;
}

.call-line span {
  padding: 9px 13px;
  border-radius: 14px;
  font-size: var(--fs-base);
  line-height: 1.5;
}

.call-line.is-customer {
  align-self: flex-start;
}

.call-line.is-customer span {
  border-bottom-left-radius: 4px;
  background: var(--surface-sunken);
  box-shadow: inset 0 0 0 1px var(--line);
}

.call-line.is-staff {
  align-self: flex-end;
  align-items: flex-end;
}

.call-line.is-staff span {
  border-bottom-right-radius: 4px;
  background: var(--accent-soft);
}

.call-line.no-speaker {
  max-width: none;
}

.call-panel-foot {
  position: sticky;
  bottom: 0;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: auto;
  padding: 12px 28px;
  border-top: 1px solid var(--line);
  background: color-mix(in srgb, var(--sheet) 92%, transparent);
  backdrop-filter: blur(10px);
}

@media (prefers-reduced-motion: reduce) {
  .call-status.is-live i {
    animation: none;
  }
}

/* Berichtcontext (e-mail / WhatsApp) gebruikt dezelfde call-panel-opbouw. */
.message-panel .call-panel-top .button-text {
  min-height: 32px;
}

.fact-muted {
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

.fact-spaced {
  margin-top: 6px;
}

.suggestion-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.fact-group {
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.fact-group-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  color: var(--text-faint);
  font-size: var(--fs-xs);
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.fact-group-title .icon {
  width: 15px;
  height: 15px;
}

.fact-group-title.source-gms .icon {
  color: var(--success);
}

.fact-group-title.source-communication .icon {
  color: var(--accent);
}

.fact-group-title.source-senn {
  color: var(--senn);
}

.fact-group-title.source-senn .icon {
  color: var(--senn);
}

.fact-group > div {
  line-height: 1.6;
}

.fact-details summary {
  cursor: pointer;
  color: var(--link);
  font-size: var(--fs-sm);
}

.fact-details-body {
  margin-top: 6px;
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

/* Voorstellen van Senn (antwoord, werkorder) */
.suggestion-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.suggestion-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.approval-textarea {
  min-height: 120px;
  font-size: var(--fs-base);
  line-height: 1.55;
}

.approval-line-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-top: 1px solid var(--line);
  font-size: var(--fs-sm);
}

.approval-line-item:first-of-type {
  border-top: 0;
}

/* ---------- Senn UI/UX - Autoflex-workflows: "Volgende stap" (workspace-steps.js) ---------- */

#workspace-steps:empty {
  display: none;
}

.ws-steps {
  position: relative;
  padding: 18px 20px 16px 22px;
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--senn-border), 0 8px 24px -16px var(--senn-glow);
}

.ws-steps::before {
  content: "";
  position: absolute;
  left: 0;
  top: 14px;
  bottom: 14px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--senn-aura);
}

.ws-steps-title {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 10px;
  color: var(--senn);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.ws-step-primary {
  display: flex;
  align-items: center;
  gap: 16px;
}

.ws-step-text {
  flex: 1;
  min-width: 0;
}

.ws-step-name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  margin: 0;
  font-size: var(--fs-md);
  font-weight: 650;
}

.ws-step-reason {
  margin: 3px 0 0;
  color: var(--text-muted);
  font-size: var(--fs-sm);
  line-height: 1.45;
}

.ws-step-go {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 16px;
  flex: none;
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--ink);
  color: var(--ink-text);
  font-size: var(--fs-sm);
  font-weight: 650;
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}

.ws-step-go:hover {
  background: var(--ink-hover);
  text-decoration: none;
}

.ws-step-go:active {
  transform: scale(0.98);
}

.ws-step-more {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.ws-step-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  min-height: 32px;
  padding: 0 6px 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: var(--sheet);
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: 550;
  text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}

.ws-step-chip:hover {
  border-color: var(--senn-border);
  background: var(--senn-soft);
  text-decoration: none;
}

.ws-step-chip-label {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ws-step-go:focus-visible,
.ws-step-chip:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.ws-step-go:disabled,
.ws-step-chip:disabled {
  opacity: 0.55;
}

.ws-effect {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 0 7px;
  border-radius: var(--radius-pill);
  background: var(--neutral-soft);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.ws-effect-draft {
  background: var(--senn-soft);
  color: var(--senn);
}

.ws-effect-approve {
  background: var(--warning-soft);
  color: var(--warning);
}

.ws-steps-note {
  margin: 10px 0 0;
  color: var(--warning);
  font-size: var(--fs-sm);
}

.ws-steps-status {
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

.ws-steps-status:not(:empty) {
  margin-top: 10px;
}

/* Met Senn ernaast blijft er genoeg ruimte voor het gesprek zelf. */
@media (min-width: 1281px) and (max-width: 1600px) {
  .senn-open .workspace-layout {
    grid-template-columns: 288px minmax(0, 1fr);
  }

  .senn-open .call-caller {
    flex-wrap: wrap;
  }

  .senn-open .call-caller .call-plate {
    margin-left: 72px;
  }
}

@media (max-width: 1080px) {
  .workspace-layout {
    grid-template-columns: 300px minmax(0, 1fr);
  }
}

@media (max-width: 860px) {
  .main-workspace {
    overflow: visible;
  }

  .workspace-layout {
    display: flex;
    flex-direction: column;
  }

  .workspace-column-list {
    border-right: 0;
    background: transparent;
  }

  /* Lijst en gesprek als twee stappen. */
  .workspace-layout:not(.has-selection) .workspace-column-detail,
  .workspace-layout.has-selection .workspace-column-list {
    display: none;
  }

  .workspace-layout.has-selection .workspace-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    min-height: 36px;
    margin: -4px 0 4px -6px;
    padding: 0 10px 0 6px;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--link);
    font-size: var(--fs-sm);
    font-weight: 600;
  }

  .workspace-back::before {
    content: "";
    width: 8px;
    height: 8px;
    border-left: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    margin-left: 4px;
  }

  .workspace-column-header {
    padding: 4px 0 12px;
  }

  .workspace-list {
    padding: 0 0 12px;
  }

  .workspace-inbox-row.selected::before {
    left: 0;
  }

  .call-panel-top,
  .call-panel-foot {
    padding: 10px 0;
  }

  .call-panel-body {
    padding: 18px 0;
  }

  .call-caller {
    flex-wrap: wrap;
  }

  .call-caller .call-caller-text {
    flex-basis: calc(100% - 72px);
  }

  .call-caller .call-plate {
    margin-left: 72px;
  }

  .call-caller-name {
    font-size: var(--fs-xl);
  }

  .call-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }

  .ws-step-primary {
    flex-wrap: wrap;
  }

  .ws-step-go {
    width: 100%;
    justify-content: center;
  }
}

/* ==========================================================================
   Overige schermen: Inbox, Live, Team en gebruik, Instellingen,
   Integraties, Automatisering, Audit, Senn-activiteit, gespreksanalyse.
   Eén taal: lijsten met rustige rijen, kaarten alleen waar iets bij elkaar hoort.
   ========================================================================== */

/* ---------- Gedeelde rij (integraties, automatisering, leden) ---------- */

.integration-row,
.capability-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  padding: 13px 4px;
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-base);
}

.integration-row:last-child,
.capability-row:last-child {
  border-bottom: 0;
}

.integration-name,
.capability-row-name {
  display: flex;
  flex: 1 1 12rem;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 10px;
  min-width: 0;
  font-weight: 600;
}

.integration-name > .icon,
.capability-row-name > .icon {
  width: 18px;
  height: 18px;
  flex: none;
  color: var(--text-faint);
}

.integration-sub {
  min-width: 0;
  color: var(--text-faint);
  font-size: var(--fs-xs);
  font-weight: 450;
  overflow-wrap: anywhere;
}

label.capability-row {
  margin: 0 -8px;
  padding-left: 12px;
  padding-right: 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease);
}

label.capability-row:hover {
  background: var(--surface-hover);
}

/* Schakelaar voor elk vinkje in een instellingsrij */
.capability-row input[type="checkbox"]:not(.host-capability-checkbox):not(.manager-checkbox) {
  position: relative;
  width: 40px;
  min-width: 40px;
  height: 24px;
  margin: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--line-strong);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: background-color var(--dur-fast) var(--ease);
}

.capability-row input[type="checkbox"]:not(.host-capability-checkbox):not(.manager-checkbox)::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--knob);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  transition: transform var(--dur-fast) var(--ease);
}

.capability-row input[type="checkbox"]:not(.host-capability-checkbox):not(.manager-checkbox):checked {
  background: var(--success);
}

.capability-row input[type="checkbox"]:not(.host-capability-checkbox):not(.manager-checkbox):checked::after {
  transform: translateX(16px);
}

.capability-row input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.capability-row input[type="checkbox"]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.capability-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.capability-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 22px;
  padding: 0 9px;
  border-radius: var(--radius-pill);
  background: var(--success-soft);
  color: var(--success);
  font-size: 11.5px;
  font-weight: 550;
}

.capability-chip .icon {
  width: 12px;
  height: 12px;
}

.integration-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}

.integration-provider-select {
  flex: 1 1 260px;
}

.autoflex-credential-form {
  display: grid;
  gap: 8px;
  max-width: 520px;
  margin-top: 12px;
  padding: 16px;
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
}

.autoflex-credential-result:not(:empty) {
  margin-top: 8px;
  font-size: var(--fs-sm);
}

.gms-state-details {
  margin: 8px 0 0;
  padding-left: 18px;
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

.settings-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Leden */
.member-role-select {
  flex: 1 1 220px;
  max-width: 260px;
}

/* ---------- Instellingen (controls.html) ---------- */

.appearance-subtitle {
  display: block;
  margin: 20px 0 10px;
  font-size: var(--fs-sm);
  font-weight: 650;
}

.panel-hint + .appearance-subtitle {
  margin-top: 6px;
}

.appearance-note {
  margin: 12px 0 0;
}

/* Aan/uit-voorkeur onder Uiterlijk (bijv. Senn laten zweven) */
.appearance-toggle {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.appearance-toggle .ww-switch {
  flex: none;
  margin-top: 1px;
}

.appearance-toggle-text label {
  font-weight: 600;
  cursor: pointer;
}

.appearance-toggle-text .panel-hint {
  margin: 2px 0 0;
}








/* ---------- Team en gebruik (manager.html) ---------- */

.manager-section[hidden] {
  display: none;
}

.manager-stats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
}

.manager-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
  box-shadow: inset 0 0 0 1px var(--line);
}

.manager-stat-label {
  color: var(--text-muted);
  font-size: var(--fs-xs);
  font-weight: 550;
}

.manager-stat-value {
  color: var(--text);
  font-size: var(--fs-md);
  font-weight: 600;
  overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
}

.manager-stats + * {
  margin-top: 14px;
}

.manager-usage-state {
  margin: 14px 0 0;
}

.manager-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 560px;
  margin-bottom: 18px;
}

.manager-form label {
  margin-top: 8px;
  color: var(--text-muted);
  font-size: var(--fs-sm);
  font-weight: 600;
}

.manager-form label:has(.manager-checkbox) {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
}

.manager-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.manager-setting-group {
  max-width: 600px;
  margin: 4px 0 22px;
}

.manager-setting-group[hidden] {
  display: none;
}

.manager-setting-title {
  margin: 0 0 4px;
  font-size: var(--fs-base);
  font-weight: 650;
}

.manager-setting-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.manager-setting-hint {
  color: var(--text-muted);
  font-size: var(--fs-sm);
  font-weight: 400;
}

.manager-row-actions {
  display: flex;
  flex: none;
  gap: 6px;
}

.manager-instruction .integration-sub {
  white-space: normal;
}

/* ---------- Inbox / Live: contactlijst ---------- */

.day-group {
  margin-bottom: 4px;
}

.day-group-title {
  padding: 14px 4px 6px;
  color: var(--text-faint);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.inbox-row {
  position: relative;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 4px 16px;
  margin: 0 -10px;
  padding: 12px 10px;
  border-radius: var(--radius-md);
  transition: background-color var(--dur-fast) var(--ease);
}

.inbox-row + .inbox-row {
  box-shadow: 0 -1px 0 var(--line);
}

.inbox-row:hover {
  background: var(--surface-hover);
  box-shadow: none;
}

.inbox-row:hover + .inbox-row {
  box-shadow: none;
}

.inbox-row-time {
  align-self: start;
  padding-top: 2px;
  color: var(--text-muted);
  font-size: var(--fs-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.inbox-row-main {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.inbox-row-name {
  font-weight: 650;
}

.inbox-row-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

.inbox-row-meta .icon {
  width: 14px;
  height: 14px;
  color: var(--text-faint);
}

.inbox-row-intent {
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

.inbox-row > .badge-status {
  justify-self: end;
}

/* De hele rij is klikbaar via de bestaande knop (rekt uit over de rij). */
.inbox-view-button,
.inbox-row .inbox-view-button:active:not(:disabled) {
  position: static;
  transform: none; /* een transform bij indrukken zou de uitgerekte klikzone verkleinen */
}

.inbox-row:active {
  background: var(--surface-selected);
}

.inbox-view-button::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.inbox-view-button:focus-visible {
  outline: none;
}

.inbox-view-button:focus-visible::after {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

/* Zoek- en filterbalk */
.search-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 8px;
}

.search-form :is(input, select) {
  min-width: 0;
}

.search-form input {
  flex: 1 1 220px;
}

/* ---------- Senn-activiteit (chat.js) ---------- */

.activity-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 6px 0;
  font-size: var(--fs-sm);
}

.activity-icon {
  display: inline-grid;
  place-items: center;
  width: 18px;
  flex: none;
  margin-top: 1px;
  color: var(--text-faint);
}

.activity-icon .icon {
  width: 15px;
  height: 15px;
}

.activity-thinking .activity-text {
  color: var(--text-muted);
}

.activity-success .activity-icon {
  color: var(--success);
}

.activity-warning .activity-icon {
  color: var(--warning);
}

.activity-error .activity-icon {
  color: var(--danger);
}

.activity-source {
  display: block;
  color: var(--text-faint);
  font-size: 11px;
}

/* ---------- Audit en Senn-activiteit: tijdlijn ---------- */

.audit-log-row {
  position: relative;
  display: grid;
  gap: 2px;
  padding: 12px 0 12px 24px !important;
  border-bottom: 0 !important;
}

.audit-log-row::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--line-strong);
}

.audit-log-row::after {
  content: "";
  position: absolute;
  left: 1px;
  top: 17px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--sheet);
  box-shadow: inset 0 0 0 2px var(--text-faint);
}

.audit-log-row:first-child::before {
  top: 18px;
}

.audit-log-row:last-child::before {
  bottom: calc(100% - 18px);
}

.audit-log-row > div:nth-child(2) {
  font-weight: 600;
}

/* ---------- Gespreksanalyse / Communicatie ---------- */

.conversation-workspace {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.conversation-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-sunken);
}

.conversation-header-title {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-faint);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.conversation-header-title .icon {
  color: var(--senn);
}

.conversation-identity {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 32px;
  padding: 20px 20px 6px;
}

.identity-block {
  min-width: 200px;
}

.identity-label {
  margin-bottom: 4px;
  color: var(--text-faint);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.identity-name {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 650;
  letter-spacing: -0.01em;
}

.identity-sub {
  margin-top: 2px;
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

.conversation-body {
  padding: 8px 20px 20px;
}

.analysis-section {
  margin-bottom: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.analysis-section:first-child {
  padding-top: 0;
  border-top: 0;
}

.analysis-section:last-child {
  margin-bottom: 0;
}

.analysis-section h3 {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 10px;
  color: var(--text-faint);
  font-family: var(--font);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.analysis-section h3 .icon {
  width: 15px;
  height: 15px;
}

.analysis-field {
  margin: 5px 0;
  line-height: 1.55;
}

.analysis-field .label {
  margin-right: 4px;
  color: var(--text-muted);
}

.analysis-empty {
  color: var(--text-faint);
  font-size: var(--fs-sm);
}

.analysis-disclaimer {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 18px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--warning-soft);
  color: var(--text);
  font-size: var(--fs-sm);
}

.analysis-disclaimer .icon {
  margin-top: 1px;
  color: var(--warning);
}

.source-tag.from-gms {
  background: var(--success-soft);
  color: var(--success);
}

.source-tag.unconfirmed {
  background: var(--neutral-soft);
  color: var(--text-muted);
}

.action-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.action-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px dashed var(--line);
}

.action-item:last-child {
  border-bottom: 0;
}

.proposal-item-text {
  min-width: 0;
}

.slot-option {
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--sheet);
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: 550;
  font-variant-numeric: tabular-nums;
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.slot-option:hover {
  border-color: var(--accent);
  color: var(--link);
}

.preview-card {
  padding: 16px 18px;
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
  box-shadow: inset 0 0 0 1px var(--line-strong);
}

.preview-card h3 {
  margin: 0 0 10px;
  color: var(--text-faint);
  font-family: var(--font);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.preview-not-saved,
.commit-warning {
  margin-top: 8px;
  color: var(--text-faint);
  font-size: var(--fs-xs);
}

.dropzone {
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 28px 16px;
  border: 1.5px dashed var(--line-strong);
  border-radius: var(--radius-lg);
  background: var(--surface-sunken);
  color: var(--text-muted);
  text-align: center;
  transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}

.dropzone .icon {
  width: 24px;
  height: 24px;
  color: var(--text-faint);
}

.dropzone.dragover {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--link);
}

.dropzone p {
  margin: 2px 0;
}

/* Intakes en GMS-actiekaarten (chat.js) delen de knoppenrij */
:is(.intake-card, .gms-action-card) :is(.intake-plan, .intake-outcome, .intake-blocked) {
  margin-top: 8px;
  font-size: var(--fs-sm);
}

.intake-blocked {
  color: var(--warning);
}

@media (max-width: 860px) {
  .inbox-row {
    grid-template-columns: 44px minmax(0, 1fr) auto;
  }

  .inbox-row-main {
    grid-column: 2 / -1;
  }

  .inbox-row > .badge-status {
    grid-column: 2;
    justify-self: start;
  }

  .conversation-identity {
    padding: 16px 16px 4px;
  }

  .conversation-body {
    padding: 8px 16px 16px;
  }

  .identity-block {
    min-width: 0;
  }
}

/* ==========================================================================
   Werkwijzen (werkwijzen.html) en de herkende werkwijze in Gesprekken.
   "Wanneer" en "Dan" zijn de twee vaste delen van elke werkwijze.
   ========================================================================== */

.ww-page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 24px;
}

.ww-page-header > div {
  flex: 1 1 420px;
  min-width: 0;
}

.ww-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 24px;
  align-items: start;
}

.ww-side {
  display: grid;
  gap: 16px;
}

.ww-side .panel {
  margin: 0;
}

.ww-grid {
  display: grid;
  gap: 14px;
}

/* ---------- Kaart ---------- */

.ww-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  transition: border-color var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}

.ww-card:hover {
  border-color: var(--line-strong);
}

.ww-card.is-off {
  opacity: 0.72;
}

.ww-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
}

.ww-card-head h3 {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  letter-spacing: -0.01em;
}

.ww-state {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 8px;
  border-radius: var(--radius-pill);
  background: var(--success-soft);
  color: var(--success);
  font-size: var(--fs-xs);
  font-weight: 650;
}

.ww-card.is-off .ww-state {
  background: var(--neutral-soft);
  color: var(--text-muted);
}

.ww-card-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.ww-card-body {
  display: grid;
  gap: 12px;
  padding: 14px 18px 16px;
}

.ww-when,
.ww-then {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
}

.ww-step-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 0 9px;
  border-radius: var(--radius-pill);
  background: var(--ink);
  color: var(--ink-text);
  font-size: 11.5px;
  font-weight: 650;
  letter-spacing: 0.01em;
}

.ww-step-badge.is-then {
  background: var(--senn);
  color: var(--ink-text);
}

.ww-when > .ww-step-badge,
.ww-then > .ww-step-badge {
  justify-self: start;
  width: 76px;
}

.ww-var-token {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 0 7px;
  border-radius: var(--radius-xs);
  background: var(--accent-soft);
  color: var(--link);
  font-size: var(--fs-xs);
  font-weight: 650;
  vertical-align: 1px;
}

.ww-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ww-chips li {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 26px;
  padding: 0 10px;
  border-radius: var(--radius-pill);
  background: var(--surface-sunken);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  font-size: var(--fs-sm);
  font-weight: 550;
}

.ww-then-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ww-then-row {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  font-size: var(--fs-sm);
}

.ww-then-kind {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-muted);
  font-weight: 600;
}

.ww-then-kind .icon {
  width: 15px;
  height: 15px;
}

.ww-then-text {
  white-space: pre-line;
  line-height: 1.5;
}

/* Label zoals in Autoflex: gekleurde stip + naam */
.ww-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  padding: 0 10px 0 8px;
  border-radius: var(--radius-pill);
  font-size: var(--fs-sm);
  font-weight: 600;
  white-space: nowrap;
}

.ww-label i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}

.ww-label-paars { background: var(--label-paars-soft); color: var(--label-paars); }
.ww-label-blauw { background: var(--label-blauw-soft); color: var(--label-blauw); }
.ww-label-groen { background: var(--label-groen-soft); color: var(--label-groen); }
.ww-label-oranje { background: var(--label-oranje-soft); color: var(--label-oranje); }
.ww-label-rood { background: var(--label-rood-soft); color: var(--label-rood); }
.ww-label-grijs { background: var(--label-grijs-soft); color: var(--label-grijs); }

/* Aan/uit-schakelaar per werkwijze */
.ww-switch {
  position: relative;
  display: inline-flex;
  cursor: pointer;
}

.ww-switch input {
  position: absolute;
  opacity: 0;
  width: 40px;
  height: 24px;
  margin: 0;
  cursor: pointer;
}

.ww-switch span {
  position: relative;
  width: 40px;
  height: 24px;
  border-radius: var(--radius-pill);
  background: var(--line-strong);
  transition: background-color var(--dur-fast) var(--ease);
}

.ww-switch span::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--knob);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-fast) var(--ease);
}

.ww-switch input:checked + span {
  background: var(--success);
}

.ww-switch input:checked + span::after {
  transform: translateX(16px);
}

.ww-switch input:focus-visible + span {
  box-shadow: var(--focus-ring);
}

.ww-switch input:disabled + span {
  opacity: 0.5;
}

/* ---------- Leeg, voorbeelden, meldingen ---------- */

.ww-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 40px 24px;
  border: 1.5px dashed var(--line-strong);
  border-radius: var(--radius-lg);
  color: var(--text-muted);
  text-align: center;
}

.ww-empty strong {
  color: var(--text);
  font-size: var(--fs-lg);
}

.ww-empty span:last-child {
  max-width: 440px;
}

.ww-empty-mark {
  width: 44px;
  height: 44px;
  margin-bottom: 4px;
  border-radius: 14px;
  background: var(--senn-soft);
  box-shadow: inset 0 0 0 1px var(--senn-border);
}

.ww-examples {
  margin-top: 20px;
}

.ww-examples > p {
  margin-bottom: 10px;
  color: var(--text-muted);
  font-size: var(--fs-sm);
  font-weight: 600;
}

.ww-example-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 10px;
}

.ww-example {
  display: grid;
  gap: 2px;
  padding: 12px 14px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text);
  text-align: left;
  transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}

.ww-example:hover {
  border-style: solid;
  border-color: var(--senn-border);
  background: var(--senn-soft);
}

.ww-example strong {
  font-size: var(--fs-base);
}

.ww-example span {
  overflow: hidden;
  color: var(--text-muted);
  font-size: var(--fs-xs);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ww-toast {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  background: var(--success-soft);
  color: var(--success);
  font-size: var(--fs-sm);
  font-weight: 600;
  animation: fade-up var(--dur) var(--ease);
}

.ww-toast .icon {
  width: 16px;
  height: 16px;
}

#ww-notice .inline-error {
  margin-bottom: 16px;
}

.ww-readonly {
  margin-bottom: 16px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  background: var(--neutral-soft);
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

/* ---------- Zijkolom ---------- */

.ww-try textarea {
  width: 100%;
  resize: vertical;
}

.ww-try-result:not(:empty) {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.ww-try-hit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--senn-soft);
  box-shadow: inset 0 0 0 1px var(--senn-border);
  font-size: var(--fs-sm);
}

.ww-try-hit span:not(.ww-label) {
  color: var(--text-muted);
}

.ww-try-none {
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

.ww-how-steps {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: ww;
}

.ww-how-steps li {
  position: relative;
  display: grid;
  gap: 2px;
  padding-left: 34px;
  counter-increment: ww;
  font-size: var(--fs-sm);
}

.ww-how-steps li::before {
  content: counter(ww);
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 8px;
  background: var(--surface-sunken);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  font-size: 12px;
  font-weight: 650;
}

.ww-how-steps span {
  color: var(--text-muted);
}

/* ---------- Editor ---------- */

.ww-dialog {
  width: min(640px, calc(100vw - 24px));
  max-height: calc(100dvh - 32px);
}

.ww-dialog form {
  display: flex;
  flex-direction: column;
  max-height: calc(100dvh - 32px);
}

.ww-dialog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 24px 12px;
}

.ww-dialog-head h2 {
  font-size: var(--fs-xl);
  letter-spacing: -0.02em;
}

.ww-icon-button {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-muted);
}

.ww-icon-button:hover {
  background: var(--surface-hover);
  color: var(--text);
}

.ww-dialog-body {
  display: grid;
  gap: 18px;
  padding: 4px 24px 8px;
  overflow-y: auto;
}

.ww-field {
  display: grid;
  gap: 6px;
}

.ww-field label {
  font-size: var(--fs-sm);
  font-weight: 600;
}

.ww-block {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  border: 0;
}

.ww-block legend {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  padding: 0;
  font-weight: 650;
}

.ww-chips-input {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-height: 46px;
  padding: 6px 8px;
  border: 1px solid var(--field-border);
  border-radius: var(--radius-sm);
  background: var(--field-bg);
  cursor: text;
}

.ww-chips-input:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.ww-chips-input input {
  flex: 1 1 160px;
  min-width: 120px;
  min-height: 30px;
  padding: 0 4px;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.ww-chips-input input:focus {
  outline: none;
  box-shadow: none;
}

.ww-chip-remove {
  position: relative;
  width: 18px;
  height: 18px;
  margin-right: -4px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-muted);
}

.ww-chip-remove::before,
.ww-chip-remove::after {
  content: "";
  position: absolute;
  left: 4px;
  right: 4px;
  top: 8.5px;
  height: 1.5px;
  border-radius: 1px;
  background: currentColor;
  transform: rotate(45deg);
}

.ww-chip-remove::after {
  transform: rotate(-45deg);
}

.ww-chip-remove:hover {
  background: var(--surface-hover);
  color: var(--text);
}

.ww-hint {
  color: var(--text-faint);
  font-size: var(--fs-xs);
}

.ww-action {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.ww-action-toggle {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  cursor: pointer;
}

.ww-action-toggle input {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--senn);
}

.ww-action-toggle span {
  display: grid;
  gap: 2px;
}

.ww-action-toggle small {
  color: var(--text-muted);
  font-size: var(--fs-xs);
}

.ww-action-body {
  display: grid;
  gap: 10px;
  padding: 0 14px 14px 44px;
}

.ww-action-body[hidden] {
  display: none;
}

.ww-action-body textarea {
  width: 100%;
  resize: vertical;
}

.ww-vars {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.ww-vars-label {
  color: var(--text-faint);
  font-size: var(--fs-xs);
}

.ww-var {
  min-height: 28px;
  padding: 0 10px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text);
  font-size: var(--fs-xs);
  font-weight: 600;
}

.ww-var:hover {
  border-style: solid;
  border-color: var(--accent);
  color: var(--link);
}

.ww-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ww-swatch {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 12px 0 10px;
  border-radius: var(--radius-pill);
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
}

.ww-swatch input {
  position: absolute;
  opacity: 0;
  inset: 0;
  margin: 0;
  cursor: pointer;
}

.ww-swatch i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: currentColor;
}

.ww-swatch:has(input:checked) {
  box-shadow: 0 0 0 2px currentColor;
}

.ww-swatch:has(input:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.ww-preview {
  padding: 14px;
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
}

.ww-preview-title {
  margin-bottom: 10px;
  color: var(--text-faint);
  font-size: var(--fs-xs);
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ww-preview-card .ws-step-go {
  pointer-events: none;
}

#ww-form-error[hidden] {
  display: none;
}

/* ---------- In Gesprekken: herkende werkwijze binnen "Volgende stap" ---------- */

.ws-werkwijzen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: -2px 0 12px;
}

.ws-werkwijze-tag {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 10px;
  border-radius: var(--radius-pill);
  background: var(--senn-soft);
  box-shadow: inset 0 0 0 1px var(--senn-border);
  color: var(--senn);
  font-size: var(--fs-xs);
  font-weight: 700;
}

.ws-werkwijze-label-note {
  margin: -4px 0 12px;
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

@media (max-width: 1080px) {
  .ww-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .ww-side {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  }
}

@media (max-width: 860px) {
  .ww-when,
  .ww-then,
  .ww-then-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }

  .ww-when .ww-step-badge,
  .ww-then .ww-step-badge {
    justify-self: start;
  }

  .ww-card-tools {
    width: 100%;
    margin-left: 0;
  }

  .ww-dialog-head,
  .ww-dialog-body {
    padding-left: 16px;
    padding-right: 16px;
  }

  .ww-action-body {
    padding-left: 14px;
  }
}

/* ==========================================================================
   Gevoel: beweging, focus, klikdoelen en laden (na de volledige UI-scan)
   ========================================================================== */

/* Segmentknoppen: de witte markering glijdt naar de actieve knop (app-shell.js). */
.workspace-tabs,
.manager-tabs,
.theme-choice,
.today-filters {
  position: relative;
}

.seg-thumb {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  border-radius: 7px;
  background: var(--sheet);
  box-shadow: var(--shadow-sm), 0 0 0 1px var(--line);
  pointer-events: none;
}

.seg-animate > .seg-thumb {
  transition: transform var(--dur-slow) var(--ease), width var(--dur-slow) var(--ease), opacity var(--dur-fast) var(--ease);
}

.seg-ready > :not(.seg-thumb) {
  position: relative;
  z-index: 1;
}

.seg-ready > .workspace-tab.active,
.seg-ready > .manager-tab.active,
.seg-ready > .manager-tab[aria-selected="true"],
.seg-ready > .theme-option.active,
.seg-ready > .today-filter[aria-pressed="true"] {
  background: transparent;
  box-shadow: none;
}

/* Dialogen gaan ook rustig dicht; de achtergrond vervaagt mee. */
.senn-dialog[open]::backdrop {
  animation: fade-in var(--dur) var(--ease);
}

.senn-dialog.is-closing {
  animation: pop-out var(--dur-fast) var(--ease) forwards;
}

.senn-dialog.is-closing::backdrop {
  animation: fade-out var(--dur-fast) var(--ease) forwards;
}

@keyframes pop-out {
  to {
    opacity: 0;
    transform: translateY(4px) scale(0.98);
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
}

@keyframes fade-out {
  to {
    opacity: 0;
  }
}

/* Gespreksrijen in een scrollende lijst: focusring binnen de rij, zodat hij niet wordt afgesneden. */
.workspace-inbox-row:focus-visible,
.today-row-action:focus-visible,
.ww-example:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

/* Links in lopende tekst: ook zonder kleur herkenbaar (WCAG 1.4.1). */
.page-header p a,
.panel-hint a,
.panel p a,
.state-box a,
.today-muted a,
.login-footnote a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

/* Klikdoelen minstens 24 px hoog (WCAG 2.5.8), vooral op de telefoon. */
.today-card-foot a,
#today-live-body > a,
.today-log > a,
#password-back-link {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
}

/* Laden: rustige placeholder-balkjes onder de tekst in plaats van alleen een draaiend icoon. */
.state-loading {
  position: relative;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  padding: 20px 4px;
  color: var(--text-faint);
  font-size: var(--fs-sm);
  text-align: left;
}

.state-loading .spinner {
  display: none;
}

.state-loading::after {
  content: "";
  display: block;
  height: 64px;
  border-radius: var(--radius-md);
  background:
    linear-gradient(90deg, transparent 0%, var(--surface-hover) 50%, transparent 100%) 0 0 / 200% 100%,
    repeating-linear-gradient(180deg, var(--neutral-soft) 0 16px, transparent 16px 24px);
  animation: shimmer-load 1.4s linear infinite;
}

@keyframes shimmer-load {
  to {
    background-position: -200% 0, 0 0;
  }
}

/* ==========================================================================
   Gesprekken als chat (WhatsApp/e-mail) en Live als telefoonscherm
   ========================================================================== */

.chat-channel {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.chat-whatsapp .chat-channel .icon {
  color: var(--success);
}

.chat-body {
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}

/* Klant en auto: één compacte regel, open te klappen. */
.chat-facts {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.chat-facts > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 14px;
  cursor: pointer;
  color: var(--text);
  font-size: var(--fs-sm);
  list-style: none;
}

.chat-facts > summary::-webkit-details-marker {
  display: none;
}

.chat-facts > summary .icon {
  color: var(--text-muted);
}

.chat-facts > summary > span:first-of-type {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-facts-hint {
  color: var(--text-faint);
  font-size: var(--fs-xs);
}

.chat-facts > summary::after {
  content: "";
  width: 7px;
  height: 7px;
  margin-left: 4px;
  border-right: 1.6px solid var(--text-faint);
  border-bottom: 1.6px solid var(--text-faint);
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--dur-fast) var(--ease);
}

.chat-facts[open] > summary::after {
  transform: rotate(-135deg) translateY(-2px);
}

.chat-facts-body {
  display: grid;
  gap: 10px;
  padding: 0 12px 12px;
}

/* De draad zelf */
.wa-thread {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-height: 220px;
  padding: 16px 14px 18px;
  border-radius: var(--radius-lg);
  background: var(--chat-wall);
}

.wa-day {
  display: flex;
  justify-content: center;
  margin: 10px 0 8px;
}

.wa-day span {
  padding: 4px 10px;
  border-radius: 8px;
  background: var(--chat-in);
  box-shadow: var(--shadow-sm);
  color: var(--text-muted);
  font-size: var(--fs-xs);
  font-weight: 600;
}

.wa-msg {
  display: flex;
  animation: fade-up var(--dur) var(--ease);
}

.wa-msg.is-out {
  justify-content: flex-end;
}

.wa-msg.is-in + .wa-msg.is-out,
.wa-msg.is-out + .wa-msg.is-in {
  margin-top: 8px;
}

.wa-bubble {
  position: relative;
  max-width: min(78%, 520px);
  padding: 7px 10px 6px 11px;
  border-radius: 10px;
  background: var(--chat-in);
  box-shadow: var(--shadow-sm);
  color: var(--text);
}

.wa-msg.is-in .wa-bubble {
  border-top-left-radius: 3px;
}

.wa-msg.is-out .wa-bubble {
  border-top-right-radius: 3px;
  background: var(--chat-out);
}

.wa-subject {
  margin: 0 0 4px;
  font-size: var(--fs-sm);
  font-weight: 650;
}

.wa-text {
  display: inline;
  margin: 0;
  font-size: var(--fs-base);
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Tijd rechtsonder in de bubbel, zoals in WhatsApp. */
.wa-meta {
  float: right;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin: 6px 0 -2px 10px;
  color: var(--text-muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.wa-tick {
  width: 16px;
  height: 11px;
}

.wa-state-read {
  color: var(--chat-tick-read);
}

.wa-state-failed {
  color: var(--danger);
}

.wa-empty {
  margin: auto;
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

/* E-mail: onderwerp telt, bubbels mogen breder. */
.chat-email .wa-bubble {
  max-width: min(88%, 620px);
}

/* Onderaan: het antwoord dat Senn klaarzette, als invoerbalk. */
.wa-composer {
  position: sticky;
  z-index: 4;
  bottom: 0;
  width: 100%;
  max-width: 820px;
  margin: auto auto 0;
  padding: 12px 28px 16px;
  border-top: 1px solid var(--line);
  background: color-mix(in srgb, var(--sheet) 94%, transparent);
  backdrop-filter: blur(10px);
}

.wa-composer .fact-group,
.wa-composer .suggestion-card {
  margin: 0;
}

.wa-composer .suggestion-card {
  padding: 12px 14px;
  border: 1px solid var(--senn-border);
  border-radius: var(--radius-lg);
  background: var(--senn-soft);
}

.wa-composer-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--senn);
  font-size: var(--fs-sm);
  font-weight: 650;
}

.wa-composer .approval-textarea {
  min-height: 56px;
  margin-top: 8px;
  padding: 10px 14px;
  border-radius: 18px;
  background: var(--sheet);
}

.wa-composer .suggestion-actions {
  margin-top: 8px;
}

.wa-composer .suggestion-actions .button-primary,
.wa-composer .suggestion-actions .button-secondary {
  min-height: 36px;
  padding: 0 14px;
}

.wa-composer-empty {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

.wa-composer-empty > .icon {
  color: var(--senn);
}

.wa-composer-empty > span {
  flex: 1;
  min-width: 180px;
}

@media (max-width: 860px) {
  .wa-thread {
    margin: 0 -16px;
    border-radius: 0;
    padding: 14px 10px 16px;
  }

  .wa-bubble {
    max-width: 86%;
  }

  .wa-composer {
    padding: 10px 0 12px;
  }

  .wa-composer .approval-textarea {
    min-height: 84px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wa-msg {
    animation: none;
  }
}

/* ==========================================================================
   "Senn denkt mee": vervolgvragen tijdens een lopend telefoongesprek
   ========================================================================== */

.la-card {
  position: fixed;
  z-index: 60;
  right: calc(var(--gap-frame) + 20px);
  bottom: 84px;
  display: flex;
  flex-direction: column;
  width: 372px;
  max-height: min(620px, calc(100dvh - 120px));
  overflow: hidden;
  border: 1px solid var(--senn-border);
  border-radius: var(--radius-xl);
  background: var(--sheet);
  box-shadow: var(--shadow-lg);
  animation: la-in var(--dur-slow) var(--ease);
}

.senn-open .la-card {
  right: calc(var(--panel-w) + var(--gap-frame) + 20px);
}

.la-card[hidden] {
  display: none;
}

.la-card.has-new:not(.is-collapsed) {
  animation: la-nudge 600ms var(--ease);
}

@keyframes la-in {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
  }
}

@keyframes la-nudge {
  30% {
    box-shadow: var(--shadow-lg), 0 0 0 4px var(--senn-glow);
  }
}

.la-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 10px 10px 16px;
}

.la-mark {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: var(--senn-aura);
  color: var(--on-aura);
}

.la-head-text {
  flex: 1;
  min-width: 0;
}

.la-title {
  margin: 0;
  color: var(--text);
  font-size: var(--fs-base);
  font-weight: 650;
}

.la-sub {
  margin: 1px 0 0;
  overflow: hidden;
  color: var(--text-muted);
  font-size: var(--fs-xs);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.la-icon-button {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}

.la-icon-button:hover {
  background: var(--surface-hover);
  color: var(--text);
}

.la-progress {
  height: 3px;
  margin: 0 16px;
  overflow: hidden;
  border-radius: 3px;
  background: var(--neutral-soft);
}

.la-progress span {
  display: block;
  width: var(--la-done, 0%);
  height: 100%;
  border-radius: inherit;
  background: var(--senn);
  transition: width var(--dur-slow) var(--ease);
}

.la-body {
  display: grid;
  gap: 14px;
  padding: 14px 16px 16px;
  overflow-y: auto;
}

.la-question {
  animation: fade-up var(--dur) var(--ease);
}

.la-kicker {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 6px;
  color: var(--senn);
  font-size: var(--fs-xs);
  font-weight: 650;
}

.la-count {
  color: var(--text-faint);
  font-weight: 550;
}

/* Wat Senn hoorde: de aanleiding, als citaat uit het gesprek. */
.la-heard {
  padding: 10px 12px;
  border-left: 3px solid var(--senn);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  background: var(--surface-sunken);
  animation: fade-up var(--dur) var(--ease);
}

.la-heard-label {
  display: block;
  margin-bottom: 2px;
  color: var(--text-muted);
  font-size: var(--fs-xs);
  font-weight: 600;
}

.la-heard-text {
  margin: 0;
  color: var(--text);
  font-size: var(--fs-sm);
  font-style: italic;
  line-height: 1.45;
}

/* De vervolgvraag: zo zegt de receptionist het tegen de klant. */
.la-say {
  margin: 0;
  color: var(--text);
  font-size: var(--fs-lg);
  font-weight: 600;
  line-height: 1.35;
}

.la-text-sm {
  margin: 0;
  font-size: var(--fs-sm);
}

.la-why {
  margin: 8px 0 0;
  color: var(--text-muted);
  font-size: var(--fs-sm);
  line-height: 1.45;
}

.la-why-label {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 2px;
  color: var(--text);
  font-size: var(--fs-xs);
  font-weight: 600;
}

.la-why-label .icon {
  width: 14px;
  height: 14px;
  color: var(--text-muted);
}

.la-answer-prompt {
  margin: 14px 0 0;
  color: var(--text-muted);
  font-size: var(--fs-xs);
  font-weight: 600;
}

.la-answer-prompt + .la-chips {
  margin-top: 6px;
}

/* Advies dat de receptionist direct aan de klant doorgeeft (bijv. bij een rood lampje). */
.la-advice {
  display: flex;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--warning-border);
  border-radius: var(--radius-md);
  background: var(--warning-soft);
  animation: fade-up var(--dur) var(--ease);
}

.la-advice > .icon {
  flex: none;
  margin-top: 1px;
  color: var(--warning);
}

.la-advice-label {
  color: var(--warning);
  font-size: var(--fs-xs);
  font-weight: 650;
}

.la-advice p {
  margin: 2px 0 0;
  color: var(--text);
  font-size: var(--fs-sm);
  line-height: 1.45;
}

.la-answer-advice {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  margin-top: 2px;
  color: var(--warning);
  font-size: var(--fs-xs);
  font-weight: 500;
}

.la-answer-advice .icon {
  flex: none;
  width: 13px;
  height: 13px;
  margin-top: 1px;
}

.la-mechanic-heard {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 8px;
  margin: 0 0 4px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-sm);
}

.la-mechanic-heard span {
  color: var(--text-muted);
}

.la-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}

.la-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 0 12px 0 8px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--sheet);
  color: var(--text);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 550;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}

.la-chip:hover {
  border-color: var(--senn-border);
  background: var(--senn-soft);
}

.la-chip.is-chosen {
  border-color: var(--senn);
  background: var(--senn-soft);
}

.la-chip kbd {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  border-radius: 6px;
  background: var(--neutral-soft);
  color: var(--text-muted);
  font: inherit;
  font-size: 11px;
  font-weight: 650;
}

.la-chip-other {
  padding: 0 12px;
  border-style: dashed;
  color: var(--text-muted);
}

.la-other {
  display: flex;
  flex: 1 1 100%;
  gap: 6px;
}

.la-other input {
  flex: 1;
  min-width: 0;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--sheet);
  color: var(--text);
  font: inherit;
  font-size: var(--fs-sm);
}

.la-other .button-secondary {
  min-height: 36px;
}

.la-question-foot {
  display: flex;
  justify-content: flex-end;
  margin-top: 4px;
}

.la-answers,
.la-summary {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.la-answers {
  border-top: 1px solid var(--line);
}

.la-mechanic .la-answers {
  border-top: 0;
}

.la-mechanic .la-answers li:last-child {
  border-bottom: 0;
}

/* Zolang het venster open is, kan het gesprek eronder vandaan scrollen. */
@media (min-width: 861px) {
  .la-open .call-panel-body {
    padding-bottom: 300px;
  }
}

.la-answers li {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 8px;
  min-height: 36px;
  padding: 6px 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-sm);
}

.la-answer-label {
  color: var(--text-muted);
}

.la-answer {
  display: flex;
  flex-direction: column;
  color: var(--text);
  font-weight: 550;
}

.la-answer.is-skipped {
  color: var(--text-faint);
  font-weight: 400;
}

.la-edit {
  min-height: 28px;
  padding: 0 6px;
  border: 0;
  background: transparent;
  color: var(--link);
  font: inherit;
  font-size: var(--fs-xs);
  cursor: pointer;
}

.la-mechanic {
  padding: 12px 14px;
  border: 1px solid var(--senn-border);
  border-radius: var(--radius-md);
  background: var(--senn-soft);
}

.la-summary li {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 8px;
  padding: 4px 0;
  font-size: var(--fs-sm);
}

.la-summary li span {
  color: var(--text-muted);
}

.la-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.la-done {
  display: flex;
  gap: 10px;
  color: var(--success);
}

.la-done > div {
  color: var(--text);
}

/* Ingeklapt: een pil die laat zien hoeveel er nog open staat. */
.la-card.is-collapsed {
  width: auto;
  border-radius: 999px;
}

.la-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 8px 0 9px;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
}

.la-pill .la-mark {
  width: 30px;
  height: 30px;
  border-radius: 50%;
}

.la-pill-count {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--neutral-soft);
  color: var(--text-muted);
  font-size: var(--fs-xs);
}

.la-pill-count.is-new {
  background: var(--senn);
  color: var(--on-aura);
}

@media (max-width: 860px) {
  .la-card,
  .senn-open .la-card {
    right: 8px;
    left: 8px;
    bottom: calc(72px + env(safe-area-inset-bottom));
    width: auto;
    max-height: 62dvh;
  }

  .la-card.is-collapsed {
    left: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .la-card,
  .la-card.has-new:not(.is-collapsed),
  .la-question,
  .la-heard,
  .la-advice {
    animation: none;
  }
}

/* ==========================================================================
   Hulp en tickets (hulp.html)
   ========================================================================== */

.hulp-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, 1fr);
  align-items: start;
  gap: 20px;
}

.hulp-side {
  display: grid;
  gap: 20px;
}

.hulp-layout .panel {
  margin: 0;
}

.hulp-banner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 20px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface-sunken);
  font-size: var(--fs-sm);
}

.hulp-banner > .icon {
  flex: none;
  margin-top: 2px;
  color: var(--text-muted);
}

.hulp-banner div {
  display: grid;
  gap: 2px;
}

.hulp-banner span {
  color: var(--text-muted);
}

#hulp-form {
  display: grid;
  gap: 18px;
}

.hulp-kind,
.hulp-urgency {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.hulp-kind legend,
.hulp-urgency legend,
.hulp-field label,
.hulp-label {
  display: block;
  margin-bottom: 6px;
  padding: 0;
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: 600;
}

.hulp-kind-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.hulp-kind-option {
  position: relative;
  cursor: pointer;
}

.hulp-kind-option input,
.hulp-urgency-options input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.hulp-kind-option span {
  display: grid;
  gap: 3px;
  height: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--sheet);
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}

.hulp-kind-option strong {
  font-size: var(--fs-sm);
}

.hulp-kind-option small {
  color: var(--text-muted);
  font-size: var(--fs-xs);
  line-height: 1.4;
}

.hulp-kind-option:hover span {
  background: var(--surface-hover);
}

.hulp-kind-option input:checked + span {
  border-color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink);
}

.hulp-kind-option input:focus-visible + span,
.hulp-urgency-options input:focus-visible + span {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.hulp-field {
  display: grid;
  min-width: 0;
}

.hulp-field-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
  gap: 16px;
}

.hulp-field input[type="text"],
.hulp-field select,
.hulp-field textarea {
  width: 100%;
  min-height: 40px;
  padding: 9px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--sheet);
  color: var(--text);
  font: inherit;
  font-size: var(--fs-base);
}

.hulp-field textarea {
  resize: vertical;
  line-height: 1.5;
}

.hulp-field [aria-invalid="true"] {
  border-color: var(--danger);
}

.hulp-urgency-options {
  display: flex;
  gap: 4px;
  padding: 3px;
  border-radius: var(--radius-md);
  background: var(--neutral-soft);
}

.hulp-urgency-options label {
  position: relative;
  flex: 1;
  margin: 0;
  cursor: pointer;
}

.hulp-urgency-options span {
  display: grid;
  place-items: center;
  min-height: 34px;
  padding: 0 8px;
  border-radius: 7px;
  color: var(--text-muted);
  font-size: var(--fs-sm);
  font-weight: 550;
  text-align: center;
}

.hulp-urgency-options input:checked + span {
  background: var(--sheet);
  box-shadow: var(--shadow-sm), 0 0 0 1px var(--line);
  color: var(--text);
}

.hulp-urgency-options input[value="hoog"]:checked + span {
  color: var(--danger);
}

.hulp-hint,
.hulp-optional {
  margin: 6px 0 0;
  color: var(--text-faint);
  font-size: var(--fs-xs);
  font-weight: 400;
}

.hulp-error {
  margin: 6px 0 0;
  color: var(--danger);
  font-size: var(--fs-xs);
  font-weight: 550;
}

.hulp-field .hulp-drop {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 56px;
  padding: 10px 14px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
  color: var(--text-muted);
  font-size: var(--fs-sm);
  font-weight: 400;
  cursor: pointer;
}

.hulp-drop:hover,
.hulp-drop.is-over {
  border-color: var(--accent);
  color: var(--text);
}

.hulp-drop:focus-within {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.hulp-drop input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.hulp-drop-text {
  display: flex;
  align-items: center;
  gap: 10px;
}

.hulp-shot-preview {
  width: 48px;
  height: 36px;
  border-radius: 6px;
  object-fit: cover;
  box-shadow: 0 0 0 1px var(--line);
}

.hulp-context {
  border-top: 1px solid var(--line);
  padding-top: 12px;
  font-size: var(--fs-sm);
}

.hulp-context summary {
  min-height: 28px;
  color: var(--text-muted);
  cursor: pointer;
}

.hulp-context ul {
  display: grid;
  gap: 4px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.hulp-context li {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr);
  gap: 8px;
}

.hulp-context li span {
  color: var(--text-muted);
}

.hulp-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

#hulp-result {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

#hulp-result.hulp-ok {
  color: var(--success);
  font-weight: 550;
}

#hulp-result.hulp-fail {
  color: var(--danger);
}

/* Jouw meldingen */
.hulp-tickets {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hulp-ticket {
  border-top: 1px solid var(--line);
}

.hulp-ticket:first-child {
  border-top: 0;
}

.hulp-ticket summary {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  cursor: pointer;
  list-style: none;
}

.hulp-ticket summary::-webkit-details-marker {
  display: none;
}

.hulp-ticket-main {
  display: grid;
  flex: 1;
  gap: 2px;
  min-width: 0;
}

.hulp-ticket-subject {
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: 600;
}

.hulp-ticket-meta {
  color: var(--text-faint);
  font-size: var(--fs-xs);
}

.hulp-status {
  flex: none;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: var(--fs-xs);
  font-weight: 600;
  white-space: nowrap;
}

.hulp-status-neutral {
  background: var(--neutral-soft);
  color: var(--text-muted);
}

.hulp-status-info {
  background: var(--accent-soft);
  color: var(--link);
}

.hulp-status-warning {
  background: var(--warning-soft);
  color: var(--warning);
}

.hulp-status-success {
  background: var(--success-soft);
  color: var(--success);
}

.hulp-reply {
  margin: 0 0 14px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
  font-size: var(--fs-sm);
}

.hulp-reply-from {
  color: var(--text-faint);
  font-size: var(--fs-xs);
}

.hulp-reply p {
  margin: 4px 0 0;
  line-height: 1.5;
}

.hulp-ticket .hulp-hint {
  margin: 0 0 12px;
}

.hulp-empty {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

.hulp-faq details {
  border-top: 1px solid var(--line);
  font-size: var(--fs-sm);
}

.hulp-faq details:first-of-type {
  border-top: 0;
}

.hulp-faq summary {
  padding: 10px 0;
  color: var(--text);
  font-weight: 550;
  cursor: pointer;
}

.hulp-faq p {
  margin: 0 0 12px;
  color: var(--text-muted);
  line-height: 1.5;
}

.hulp-faq p a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

@media (max-width: 1100px) {
  .hulp-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 600px) {
  .hulp-kind-options,
  .hulp-field-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .hulp-kind-option span {
    padding: 10px 12px;
  }
}

/* ==========================================================================
   Senn-figuurtje (js/icons.js: sennMascot): standen en beweging
   ========================================================================== */

.senn-mascot {
  display: inline-block;
  flex: none;
  overflow: visible;
  vertical-align: middle;
}

.senn-mascot .m-shadow {
  fill: var(--mascot-shadow);
  transform-box: view-box;
  transform-origin: 102px 182px;
}

.senn-mascot .m-body {
  transform-box: view-box;
  transform-origin: 100px 180px;
}

.senn-mascot .m-shade {
  fill: var(--mascot-dark);
  opacity: 0.35;
}

.senn-mascot .m-gloss {
  fill: var(--mascot-light);
  opacity: 0.35;
}

.senn-mascot .m-eyes {
  transform-box: view-box;
  transition: transform var(--dur-slow) var(--ease);
}

.senn-mascot .m-eye {
  transform-box: fill-box;
  transform-origin: center;
  animation: mascot-blink 5.2s infinite;
}

.senn-mascot .m-pupil {
  fill: var(--mascot-eye);
}

.senn-mascot .m-shine {
  fill: var(--mascot-shine);
}

.senn-mascot .m-happy {
  opacity: 0;
  fill: none;
  stroke: var(--mascot-eye);
  stroke-width: 6;
  stroke-linecap: round;
}

.senn-mascot .m-waves path {
  opacity: 0;
  fill: none;
  stroke: var(--senn);
  stroke-width: 6;
  stroke-linecap: round;
}

.senn-mascot .m-dots circle {
  opacity: 0;
  fill: var(--senn);
}

.senn-mascot[data-state="rust"] .m-body {
  animation: mascot-breathe 4.2s ease-in-out infinite;
}

.senn-mascot[data-state="luistert"] .m-body {
  animation: mascot-lean 2.6s ease-in-out infinite;
}

.senn-mascot[data-state="luistert"] .m-eyes {
  transform: translate(-7px, 2px);
}

.senn-mascot[data-state="luistert"] .m-waves path {
  animation: mascot-wave 1.6s ease-out infinite;
}

.senn-mascot[data-state="luistert"] .m-waves path:nth-child(2) {
  animation-delay: 0.25s;
}

.senn-mascot[data-state="luistert"] .m-waves path:nth-child(3) {
  animation-delay: 0.5s;
}

.senn-mascot[data-state="denkt"] .m-body {
  animation: mascot-squish 1.8s ease-in-out infinite;
}

.senn-mascot[data-state="denkt"] .m-eyes {
  animation: mascot-ponder 3.6s ease-in-out infinite;
}

.senn-mascot[data-state="denkt"] .m-dots circle {
  animation: mascot-dot 1.2s ease-in-out infinite;
}

.senn-mascot[data-state="denkt"] .m-dots circle:nth-child(2) {
  animation-delay: 0.18s;
}

.senn-mascot[data-state="denkt"] .m-dots circle:nth-child(3) {
  animation-delay: 0.36s;
}

.senn-mascot[data-state="iets"] .m-body {
  animation: mascot-hop 1.9s cubic-bezier(0.3, 0.7, 0.3, 1) infinite;
}

.senn-mascot[data-state="iets"] .m-shadow {
  animation: mascot-shadow-hop 1.9s cubic-bezier(0.3, 0.7, 0.3, 1) infinite;
}

.senn-mascot[data-state="iets"] .m-eye {
  animation: mascot-wide 1.9s infinite;
}

.senn-mascot[data-state="klaar"] .m-eye {
  opacity: 0;
  animation: none;
}

.senn-mascot[data-state="klaar"] .m-happy {
  opacity: 1;
}

.senn-mascot[data-state="klaar"] .m-body {
  animation: mascot-nod 2.4s ease-in-out infinite;
}

.senn-mascot[data-state="stuk"] .m-body {
  transform: scale(1.03, 0.95);
}

.senn-mascot[data-state="stuk"] .m-eyes {
  transform: translate(0, 9px);
}

@keyframes mascot-breathe {
  50% { transform: scale(1.012, 1.035); }
}

@keyframes mascot-blink {
  0%, 94%, 100% { transform: scaleY(1); }
  96% { transform: scaleY(0.1); }
}

@keyframes mascot-lean {
  0%, 100% { transform: rotate(-3deg) scale(1.01, 1); }
  50% { transform: rotate(-5deg) scale(1, 1.02); }
}

@keyframes mascot-wave {
  0% { opacity: 0; transform: translateX(6px); }
  30% { opacity: 0.9; }
  100% { opacity: 0; transform: translateX(-6px); }
}

@keyframes mascot-squish {
  50% { transform: scale(1.04, 0.96); }
}

@keyframes mascot-ponder {
  0%, 100% { transform: translate(6px, -8px); }
  45%, 60% { transform: translate(-5px, -9px); }
}

@keyframes mascot-dot {
  0%, 100% { opacity: 0.2; transform: translateY(0); }
  40% { opacity: 1; transform: translateY(-5px); }
}

@keyframes mascot-hop {
  0%, 60%, 100% { transform: translateY(0) scale(1, 1); }
  8% { transform: translateY(0) scale(1.08, 0.9); }
  22% { transform: translateY(-16px) scale(0.96, 1.05); }
  36% { transform: translateY(0) scale(1.06, 0.93); }
  46% { transform: translateY(0) scale(1, 1); }
}

@keyframes mascot-shadow-hop {
  0%, 60%, 100% { transform: scaleX(1); opacity: 1; }
  22% { transform: scaleX(0.8); opacity: 0.6; }
}

@keyframes mascot-wide {
  0%, 60%, 100% { transform: scale(1); }
  22% { transform: scale(1.18); }
}

@keyframes mascot-nod {
  25% { transform: rotate(2.5deg); }
  75% { transform: rotate(-2.5deg); }
}

/* Klein (onder 24 px) of "minder beweging": stilstaan, alleen de stand blijft zichtbaar. */
.senn-mascot.is-still *,
.senn-mascot.is-still {
  animation: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .senn-mascot,
  .senn-mascot * {
    animation: none !important;
    transition: none !important;
  }
}

/* --- Waar het figuurtje staat (één tegelijk, app-shell.js "Eén Senn") --- */

.senn-slot {
  display: inline-grid;
  flex: none;
  place-items: center;
}

.senn-slot > .senn-mascot {
  width: 100%;
  height: 100%;
}

/* Op de plekken waar Senn nu niet is: het effen silhouet, rustig in petrol. */
.senn-glyph {
  width: 62%;
  height: 62%;
  color: var(--senn);
  opacity: 0.85;
}

/* Tijdens de zweefvlucht vliegt een kopie; de echte verschijnt pas bij aankomst. */
.senn-slot-arriving > .senn-mascot {
  visibility: hidden;
}

.senn-flyer {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 90;
  pointer-events: none;
  will-change: transform;
}

.senn-flyer > .senn-mascot {
  width: 100%;
  height: 100%;
}

/* Vraag Senn */
.senn-button-icon.senn-slot {
  width: 28px;
  height: 28px;
  background: transparent;
  color: inherit;
}

/* Kop van het Senn-paneel */
.ai-panel-header > .senn-slot {
  width: 34px;
  height: 34px;
  margin-top: -2px;
}

/* Leeg Senn-paneel: Senn boven de uitnodiging.
   .ai-panel-hello staat vlak voor .chat-window; samen vullen ze de ruimte (boven/onder het midden). */
.ai-panel .chat-window:empty::before {
  display: none;
}

.ai-panel-hello {
  display: none;
}

.ai-panel:has(.chat-window:empty) .ai-panel-hello {
  display: flex;
  flex: 1 1 0;
  align-items: flex-end;
  justify-content: center;
  min-height: 0;
  padding-bottom: 4px;
  pointer-events: none;
}

.ai-panel .chat-window:empty {
  flex: 1 1 0;
  justify-content: flex-start;
  padding-top: 8px;
}

.ai-panel-hello > .senn-slot {
  width: 72px;
  height: 72px;
}

/* Senn denkt na in de chat */
.chat-bubble.assistant.typing.has-mascot {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.chat-bubble.assistant.typing.has-mascot::after {
  display: none;
}

.chat-bubble.typing > .senn-slot {
  width: 30px;
  height: 30px;
  margin: -4px 0;
}

/* Lege werkplek ("Kies een gesprek"): alleen het rustige silhouet */
.workspace-empty-mark.has-glyph {
  display: inline-grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--senn-soft);
  box-shadow: none;
}

.workspace-empty-mark.has-glyph::after {
  display: none;
}

.workspace-empty-mark .senn-glyph {
  width: 30px;
  height: 30px;
  opacity: 1;
}

/* Senn denkt mee (live-assist.js) */
.la-mark.has-mascot {
  width: 40px;
  height: 40px;
  margin: -4px 0;
  background: transparent;
}

.la-pill .la-mark.has-mascot {
  width: 36px;
  height: 36px;
  margin: -2px 0;
}

@media (prefers-reduced-motion: reduce) {
  .senn-flyer {
    display: none;
  }
}

/* ==========================================================================
   Responsief
   - <= 1280 px: Senn-paneel schuift over het vel heen in plaats van ernaast.
   - <= 1080 px: zijkolommen onder de hoofdinhoud.
   - <= 860 px: telefoon/tablet: kopbalk + tabbalk; navigatie als blad.
   ========================================================================== */

@media (max-width: 1280px) {
  .senn-open .app-shell,
  .senn-closing .app-shell {
    grid-template-columns: var(--sidebar-w) minmax(0, 1fr) 0;
  }

  .ai-panel {
    position: fixed;
    z-index: 70;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(var(--panel-w), calc(100vw - 24px));
    box-shadow: var(--shadow-lg);
  }
}

@media (max-width: 1080px) {
  :root {
    --sidebar-w: 216px;
  }

  .today-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .today-side {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  }

  .today-pulse {
    grid-template-columns: minmax(0, 1fr);
  }

  .today-pulse-head {
    flex-direction: row;
    align-items: baseline;
    padding: 12px 20px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .main {
    padding: 28px 28px 48px;
  }
}

@media (max-width: 860px) {
  :root {
    --chrome-top: 56px;
    --chrome-h: calc(56px + 64px + env(safe-area-inset-bottom));
  }

  .app-shell,
  .senn-open .app-shell,
  .app-shell-single,
  .senn-open .app-shell-single {
    display: block;
    height: auto;
    min-height: 100vh;
    min-height: 100dvh;
    overflow: visible;
  }

  .mobile-bar {
    position: sticky;
    z-index: 50;
    top: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 56px;
    padding: 8px 10px;
    background: var(--frame);
    color: var(--frame-text);
  }

  .mobile-bar .app-brand .brand-mark-svg {
    width: 24px;
  }

  .mobile-bar .app-wordmark {
    font-size: 17px;
  }

  .mobile-bar-title {
    flex: 1;
    min-width: 0;
    padding-left: 6px;
    overflow: hidden;
    color: var(--frame-muted);
    font-size: var(--fs-sm);
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .senn-button-compact {
    width: 40px;
    min-height: 40px;
    margin: 0;
    padding: 0;
    justify-content: center;
    border-radius: 12px;
    border: 0;
    background: var(--senn-aura);
    color: var(--on-aura);
  }

  .senn-button-compact .icon {
    width: 20px;
    height: 20px;
  }

  .sidebar {
    position: fixed;
    z-index: 90;
    top: 0;
    bottom: 0;
    left: 0;
    width: min(300px, 86vw);
    padding-top: 18px;
    background: var(--frame);
    box-shadow: var(--shadow-lg);
    transform: translateX(-105%);
    transition: transform var(--dur-slow) var(--ease);
  }

  .nav-open .sidebar {
    transform: none;
  }

  .nav-scrim {
    position: fixed;
    z-index: 80;
    inset: 0;
    display: block;
    background: var(--scrim);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur) var(--ease);
  }

  .nav-scrim[hidden] {
    display: block !important;
  }

  .nav-open .nav-scrim {
    opacity: 1;
    pointer-events: auto;
  }

  .tabbar {
    position: fixed;
    z-index: 50;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: space-around;
    gap: 2px;
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--line);
    background: color-mix(in srgb, var(--sheet) 92%, transparent);
    backdrop-filter: saturate(1.4) blur(14px);
  }

  .tab-link {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 0;
    padding: 6px 2px 4px;
    border-radius: var(--radius-sm);
    color: var(--text-faint);
    font-size: 11px;
    font-weight: 550;
    text-decoration: none;
  }

  .tab-link .icon {
    width: 22px;
    height: 22px;
  }

  .tab-link .nav-label {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .tab-link.active {
    color: var(--text);
  }

  .tab-link.active .icon {
    color: var(--accent);
  }

  .tab-link:hover {
    text-decoration: none;
  }

  .main {
    margin: 0;
    padding: 20px 16px calc(96px + env(safe-area-inset-bottom));
    border-radius: 18px 18px 0 0;
    overflow: visible;
    min-height: calc(100dvh - 56px);
  }

  .main > * {
    max-width: none;
  }

  .ai-panel {
    position: fixed;
    z-index: 95;
    inset: 0;
    width: auto;
    margin: 0;
    border-radius: 0;
    transform: translateY(24px);
  }

  .senn-open .ai-panel {
    transform: none;
  }

  .page-header {
    margin-bottom: 20px;
  }

  .page-header h1,
  .today-title h1 {
    font-size: 26px;
  }

  .today-header {
    align-items: flex-start;
  }

  .today-side {
    grid-template-columns: minmax(0, 1fr);
  }

  .today-pulse #today-garage-body {
    flex-direction: column;
  }

  .today-pulse .today-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .today-pulse .today-stat:nth-child(3) {
    border-left: 0;
  }

  .today-pulse .today-stat:nth-child(n + 3) {
    border-top: 1px solid var(--line);
  }

  .today-pulse .today-stats .today-stat dd > span:first-child {
    font-size: 28px;
  }

  .today-pulse .today-autoflex {
    flex-direction: row;
    justify-content: space-between;
    width: auto;
    padding: 12px 20px;
    border-left: 0;
    border-top: 1px dashed var(--line-strong);
  }

  .today-row {
    flex-wrap: wrap;
  }

  .today-row-main {
    flex-basis: 100%;
  }

  .today-row-action {
    margin-left: 0;
  }

  .today-filters {
    width: 100%;
    overflow-x: auto;
    flex-wrap: nowrap;
  }

  .panel {
    padding: 18px 16px;
  }

  .login-shell {
    grid-template-columns: minmax(0, 1fr);
  }

  .login-showcase {
    grid-row: 1;
    grid-column: 1;
    gap: 14px;
    margin: 10px;
    padding: 28px 24px;
  }

  .login-wave {
    display: none;
  }

  .login-showcase-title {
    font-size: 22px;
  }

  .login-card {
    grid-column: 1;
    grid-row: 2;
    align-self: start;
    padding-top: 28px;
  }

  .login-brand {
    margin-bottom: 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ==========================================================================
   UI/UX Sprint 3b (eigenaar, 23 okt): vaste app-schil; herzien in Sprint 3c (D2, 24 okt)
   De pagina zelf (body) scrolt nooit. Alleen de zijbalk staat vast (onder 860 px: de kopbalk
   en de tabbalk). Het hele werkvlak scrolt als één geheel, inclusief de paginakop en op
   Vandaag de bovenbalk met de vraagbalk. Gesprekken en het Senn-paneel scrollen in hun eigen vlak.
   ========================================================================== */

body.has-shell {
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

/* Het vel is het blok waarbinnen absoluut geplaatste hulpelementen (bv. .visually-hidden) staan;
   anders steekt zo'n element buiten de vaste schil uit en zou de pagina zelf kunnen scrollen. */
.main {
  position: relative;
}

.main:not(.main-workspace) {
  padding-top: 0;
  overscroll-behavior: contain;
}

/* Sprint 3c (D2): de kop scrolt mee met de inhoud (niet meer sticky). */
.main > .page-header,
.main > .today-sticky {
  position: static;
  padding-top: 36px;
}

.main > .today-sticky {
  padding-bottom: 4px;
  margin-bottom: 16px;
}

.today-sticky .today-header {
  margin-bottom: 20px;
}

.today-sticky .home-chat-bar {
  margin-bottom: 0;
}

/* Vraagbalk: het invoerveld zit met aan alle kanten dezelfde ruimte in zijn kader
   (geen voorbeeldvragen meer eronder, geen extra marge onder het formulier). */
.home-chat-bar {
  padding: 10px;
}

.home-chat-bar .chat-form-row {
  display: flex;
  flex-direction: column;
}

.home-chat-bar .chat-form {
  margin: 0;
}

/* Uitklappen/scrollen: wie naar een plek springt, houdt wat lucht boven zich. */
.main:has(> .page-header) :is(section, .panel, [id]) {
  scroll-margin-top: 24px;
}

@media (max-width: 1280px) {
  .main > .page-header,
  .main > .today-sticky {
    padding-top: 28px;
  }
}

@media (max-width: 860px) {
  .app-shell,
  .senn-open .app-shell,
  .app-shell-single,
  .senn-open .app-shell-single {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
  }

  .mobile-bar {
    position: relative;
    flex: none;
  }

  .main {
    flex: 1;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .main > .page-header,
  .main > .today-sticky {
    padding-top: 20px;
  }

  .main-workspace {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding-bottom: calc(64px + env(safe-area-inset-bottom));
  }

  .main-workspace .workspace-layout {
    flex: 1;
    min-height: 0;
  }

  .main-workspace .workspace-column {
    flex: 1;
    min-height: 0;
  }

  .main-workspace .workspace-column-detail {
    overflow-y: auto;
  }
}

/* ---------- Sprint 3b: tab- en filtergroepen vullen de volle breedte ----------
   Eén gedeeld segmentcomponent: Wachtrij/Alles, Alles/E-mail/WhatsApp/Medewerker nodig, de filters van
   Wacht op jou, de onderdelen van Team en gebruik en Licht/Donker. Gelijk verdeelde knoppen. */
.workspace-tabs,
.manager-tabs,
.theme-choice,
.today-filters,
.segment-tabs {
  display: flex;
  flex-wrap: nowrap;
  gap: 2px;
  width: 100%;
  padding: 3px;
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
  box-shadow: inset 0 0 0 1px var(--line);
}

.workspace-tabs > :not(.seg-thumb),
.manager-tabs > :not(.seg-thumb),
.theme-choice > :not(.seg-thumb),
.today-filters > :not(.seg-thumb),
.segment-tabs > :not(.seg-thumb) {
  flex: 1 1 0;
  justify-content: center;
  min-width: 0;
}

.segment-tabs {
  position: relative;
  margin-bottom: 14px;
}

.segment-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 30px;
  padding: 0 12px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--text-muted);
  font-size: var(--fs-sm);
  font-weight: 550;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.segment-tab:hover {
  color: var(--text);
}

.segment-tab.active,
.segment-tab[aria-pressed="true"] {
  background: var(--sheet);
  color: var(--text);
  box-shadow: var(--shadow-sm), 0 0 0 1px var(--line);
}

.seg-ready > .segment-tab.active,
.seg-ready > .segment-tab[aria-pressed="true"] {
  background: transparent;
  box-shadow: none;
}

/* Wacht op jou: de filters krijgen een eigen, volle regel onder de titel. */
.today-card-head .today-filters {
  flex-basis: 100%;
}

.workspace-column-header .workspace-tabs {
  display: flex;
}

@media (max-width: 860px) {
  .today-filters {
    overflow-x: visible;
  }

  /* Te veel onderdelen voor één regel op een telefoon: netjes over twee regels, nooit horizontaal scrollen. */
  .manager-tabs,
  .segment-tabs,
  .today-filters {
    flex-wrap: wrap;
  }

  .manager-tabs > :not(.seg-thumb),
  .segment-tabs > :not(.seg-thumb),
  .today-filters > :not(.seg-thumb) {
    flex: 1 1 40%;
  }
}

/* ---------- Sprint 3b: Instellingen > Wat Senn mag gebruiken ----------
   Geen vinkjes vóór de regels; onder elke schakelaartekst één korte regel uitleg. */
.capability-row-text {
  display: flex;
  flex: 1 1 12rem;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.capability-row-text .capability-row-name {
  flex: none;
}

.capability-row-hint {
  color: var(--text-muted);
  font-size: var(--fs-sm);
  font-weight: 450;
  line-height: 1.45;
}

/* ---------- UI/UX Sprint 3b: rustige statusregel per blok ---------- */

.block-status {
  margin: 8px 0 0;
}

.block-status-line {
  margin: 0;
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: 600;
}

.block-status.is-ok .block-status-line,
.block-status.is-neutral .block-status-line {
  color: var(--text-muted);
  font-weight: 550;
}

.block-status-points {
  margin: 4px 0 0;
  padding-left: 18px;
  color: var(--text);
  font-size: var(--fs-sm);
}

.block-status-points li + li {
  margin-top: 2px;
}

.block-details {
  margin-top: 8px;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

.block-details > summary {
  width: fit-content;
  cursor: pointer;
  color: var(--link);
  font-weight: 550;
}

.block-details > summary:hover {
  color: var(--link-hover);
}

.block-details > p {
  margin: 6px 0 0;
}

.capability-row-status {
  flex: none;
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

.capability-row-status.is-open {
  color: var(--text);
  font-weight: 550;
}

.seat-usage-line,
.member-role {
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

.seat-usage-line {
  margin: 10px 0 0;
}

.member-role {
  margin-right: 8px;
  white-space: nowrap;
}

.member-role.is-inactive {
  font-style: italic;
}

/* ---------- UI/UX Sprint 3c (D4): Instellingen klapt inline uit in de zijbalk ----------
   "Instellingen" is een gewone navigatielink (naar Algemeen) en krijgt de stijl van .nav a. Op een van
   zijn pagina's klapt de lijst eronder open; de items eronder schuiven op. Uitklappen = hoogte (grid-rij
   0fr -> 1fr) plus doorzichtigheid, 200 ms ease-out. Dicht is de lijst onzichtbaar en niet te tabben. */

.nav-menu-chevron {
  width: 14px;
  height: 14px;
  margin-left: auto;
  transition: transform 200ms var(--ease);
}

.nav-menu.is-open .nav-menu-chevron {
  transform: rotate(180deg);
}

.nav-submenu-wrap {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  visibility: hidden;
  transition: grid-template-rows 200ms var(--ease), opacity 200ms var(--ease),
    visibility 0s linear 200ms;
}

.nav-menu.is-open > .nav-submenu-wrap {
  grid-template-rows: 1fr;
  opacity: 1;
  visibility: visible;
  transition: grid-template-rows 200ms var(--ease), opacity 200ms var(--ease),
    visibility 0s linear 0s;
}

.nav-submenu {
  min-height: 0;
  margin: 0;
  padding: 0 0 0 30px;
  overflow: hidden;
  list-style: none;
}

/* Lucht boven en onder de lijst zit binnen het afgekapte deel, zodat dicht echt 0 px hoog is. */
.nav-submenu > li:first-child {
  padding-top: 2px;
}

.nav-submenu > li:last-child {
  padding-bottom: 4px;
}

.nav .nav-submenu a {
  min-height: 32px;
  padding: 0 10px;
  color: var(--frame-text);
  font-weight: 500;
}

.nav .nav-submenu a.active {
  background: transparent;
  box-shadow: none;
  color: var(--link);
  font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
  .nav-submenu-wrap,
  .nav-menu.is-open > .nav-submenu-wrap,
  .nav-menu-chevron {
    transition: none;
  }
}

/* ---------- UI/UX Sprint 3b: rustige kolommen in lijsten ---------- */

/* Vandaag, Wacht op jou: wat en waarom | status met kanaal en tijd | actie. */
.today-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 176px 112px;
  column-gap: 16px;
}

.today-row-side {
  display: grid;
  gap: 4px;
  justify-items: start;
  min-width: 0;
}

.today-row-side .today-row-meta {
  font-variant-numeric: tabular-nums;
}

.today-row-action {
  justify-self: end;
}

/* Inbox: tijd | contact | status (eigen kolom, links uitgelijnd) | actie. */
.inbox-row {
  grid-template-columns: 56px minmax(0, 1fr) 176px auto;
}

.inbox-row > .badge-status {
  justify-self: start;
}

@media (max-width: 1100px) {
  .today-row {
    grid-template-columns: minmax(0, 1fr) auto;
    row-gap: 8px;
  }

  .today-row-main {
    grid-column: 1 / -1;
  }

  .today-row-side {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
  }

  .today-row-side .today-row-meta {
    white-space: nowrap;
  }
}

@media (max-width: 860px) {
  .inbox-row {
    grid-template-columns: 44px minmax(0, 1fr) auto;
  }
}

@media print {
  .sidebar,
  .tabbar,
  .mobile-bar,
  .ai-panel {
    display: none !important;
  }

  .app-shell {
    display: block;
    height: auto;
  }

  body.has-shell {
    height: auto;
    overflow: visible;
  }

  .main {
    margin: 0;
    box-shadow: none;
    overflow: visible;
  }
}

/* ---------- UI/UX Sprint 3c (D6): profielmenu linksonder ----------
   Eén profielblok (naam, rol en organisatie) opent een klein menu: Uiterlijk (Licht/Donker en Senn laten
   zweven), Hulp, Organisatie wisselen, Wachtwoord wijzigen en Uitloggen. Geen losse zon/maan- of helpknop. */

.profile-menu {
  display: grid;
  gap: 2px;
  padding: 10px;
}

.profile-menu-label {
  margin: 2px 4px 6px;
  color: var(--text-faint);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.profile-menu .profile-theme {
  margin-bottom: 4px;
}

.profile-menu .profile-theme .theme-option {
  min-height: 30px;
  font-size: var(--fs-sm);
}

.profile-menu-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 36px;
  padding: 0 4px 0 8px;
  border-radius: var(--radius-sm);
  color: var(--text);
  font-weight: 500;
  cursor: pointer;
}

.profile-menu-row:hover {
  background: var(--surface-hover);
}

.profile-menu-sep {
  height: 1px;
  margin: 6px 0;
  background: var(--line);
}

.profile-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 34px;
  padding: 0 8px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text);
  font: inherit;
  font-weight: 500;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.profile-menu-item[hidden] {
  display: none;
}

.profile-menu-item .icon {
  width: 16px;
  height: 16px;
  flex: none;
  color: var(--text-muted);
}

.profile-menu-item:hover {
  background: var(--surface-hover);
  color: var(--text);
  text-decoration: none;
}

.profile-menu-item:focus-visible,
.profile-menu-row:focus-within {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.profile-menu-hint {
  margin: 6px 8px 0;
  color: var(--text-faint);
  font-size: var(--fs-xs);
}

/* ---------- UI/UX Sprint 3c (V3, keuze eigenaar 25 okt): uitklappen met hoogte + doorzichtigheid ----------
   Alle <details>-blokken (Details, Bronnen, openstaande werkorders, hulpvragen) klappen in 200 ms ease-out
   open en dicht, in hetzelfde ritme als Instellingen in de zijbalk. Browsers zonder ::details-content
   klappen gewoon direct open; bij "minder beweging" geen animatie. */
:root {
  interpolate-size: allow-keywords;
}

details::details-content {
  block-size: 0;
  opacity: 0;
  overflow: clip;
  transition: block-size 200ms var(--ease), opacity 200ms var(--ease), content-visibility 200ms;
  transition-behavior: allow-discrete;
}

details[open]::details-content {
  block-size: auto;
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  details::details-content {
    transition: none;
  }
}

/* ---------- UI/UX Sprint 3c (V4, keuze eigenaar 25 okt): rustige paginawissel ----------
   Cross-document View Transitions: bij een klik in de zijbalk blijft de zijbalk (mobiel: kop- en tabbalk)
   staan en loopt alleen het vel in 180 ms over. De achtergrond is het kader (html/body: var(--frame)), dus geen
   witte flits. Browsers zonder View Transitions wisselen gewoon zoals voorheen; bij "minder beweging" niets. */
@view-transition {
  navigation: auto;
}

#shell-sidebar {
  view-transition-name: senn-zijbalk;
}

.mobile-bar {
  view-transition-name: senn-kopbalk;
}

.tabbar {
  view-transition-name: senn-tabbalk;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 180ms;
  animation-timing-function: var(--ease);
}

::view-transition-group(senn-zijbalk),
::view-transition-group(senn-kopbalk),
::view-transition-group(senn-tabbalk) {
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}

/* ---------- UI/UX Sprint 3c (V5): Telefoon zonder telefoniemodule ---------- */
.workspace-layout.is-not-linked {
  display: block;
}

.workspace-not-linked {
  max-width: none;
}

.telephony-not-linked {
  min-height: 320px;
}

.telephony-not-linked p {
  max-width: 460px;
  margin: 0;
}

.telephony-not-linked .icon {
  width: 28px;
  height: 28px;
  color: var(--text-faint);
}

.telephony-not-linked-link {
  font-weight: 600;
}

/* ---------- UI/UX Sprint 3c: naam van de organisatie wijzigen (Organisatie & leden) ---------- */
.organization-rename-form {
  display: grid;
  gap: 8px;
  max-width: 420px;
  margin: 10px 0 14px;
}

.organization-rename-form label {
  font-size: var(--fs-sm);
  font-weight: 600;
}

.organization-rename-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* ---------- UI/UX Sprint 3c (verzoek eigenaar 25 okt): labels rechthoekig met afgeronde hoeken ----------
   Statuslabels, chips, tellers en tags zijn geen pillen meer maar rustige rechthoeken (6 px). Schakelaars,
   stippen, de verbindingsmelding en het ingeklapte venster "Senn denkt mee" blijven rond. */
.status-pill,
.badge-status,
.today-chip,
.capability-chip,
.source-tag,
.demo-tag,
.yesno-badge,
.today-tag,
.intake-tag,
.today-filter-count,
.today-count:not(:empty),
.ws-step-chip,
.ws-effect,
.ww-state,
.ww-step-badge,
.ww-chips li,
.ww-label,
.ww-var,
.ws-werkwijze-tag,
.la-chip,
.la-pill-count,
.hulp-status {
  border-radius: var(--radius-xs);
}