/* ============================================================================
   Moderne look: zijbalk, rustige kaarten, één accentkleur. Staat als laatste laag bovenop de bestaande stijlen,
   zodat alle schermen blijven werken. Verwijder deze regel in index.html om terug te gaan naar de oude look.
   ========================================================================== */
:root {
  --side-w: 236px; --tab-h: 66px;
  --bg: #0b0f14; --panel: #131a23; --line: rgba(255,255,255,.09);
  --cyan: #22d3ee; --blue: #38bdf8; --text: #e8eef5; --dim: #8a97a8; --err: #f87171;
  --surface2: #18212d; --accent-soft: rgba(34,211,238,.12); --accent-ink: #04222a; --radius: 20px;
  --shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 12px 32px -16px rgba(0,0,0,.6);
}
:root[data-theme="light"] {
  --bg: #f3f5f8; --panel: #ffffff; --line: rgba(15,23,42,.10);
  --cyan: #0891b2; --blue: #0284c7; --text: #0f172a; --dim: #5b6778; --err: #dc2626;
  --surface2: #f6f8fb; --accent-soft: rgba(8,145,178,.10); --accent-ink: #ffffff;
  --shadow: 0 1px 2px rgba(15,23,42,.06), 0 10px 28px -16px rgba(15,23,42,.22);
}
html::before { background: var(--bg); }
body { background: radial-gradient(900px 420px at 80% -10%, var(--accent-soft), transparent 70%), var(--bg); font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif; }
[data-theme="light"] body { background: radial-gradient(900px 420px at 80% -10%, var(--accent-soft), transparent 70%), var(--bg); }
body::before, [data-theme="light"] body::before { display: none; }

/* ---- knoppen en invoer: neutraal, met één accentkleur ---- */
button, [data-theme="light"] button { background: var(--surface2); color: var(--text); border: 1px solid var(--line); border-radius: 12px; }
button:hover:not(:disabled), [data-theme="light"] button:hover:not(:disabled) { box-shadow: none; background: color-mix(in srgb, var(--surface2) 86%, var(--cyan) 14%); }
button.ghost, [data-theme="light"] button.ghost { background: transparent; }
button.primary, [data-theme="light"] button.primary, #login-form button[type=submit], [data-theme="light"] #login-form button[type=submit] {
  background: var(--cyan); color: var(--accent-ink); border-color: transparent; font-weight: 600;
}
input[type=text], input[type=password] { background: var(--panel); border-color: var(--line); border-radius: 14px; }
input:focus, [data-theme="light"] input:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px var(--accent-soft); }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

/* ---- zijbalk ---- */
#side { display: none; position: fixed; inset: 0 auto 0 0; width: var(--side-w); z-index: 12; flex-direction: column; gap: 4px; padding: calc(18px + env(safe-area-inset-top)) 12px 16px; background: color-mix(in srgb, var(--bg) 92%, #000 8%); border-right: 1px solid var(--line); overflow-y: auto; }
[data-theme="light"] #side { background: #eef1f5; }
body:has(#app:not([hidden])) #side { display: flex; }
body:has(#app:not([hidden])) { padding-left: var(--side-w); }
.side-brand { display: flex; align-items: center; gap: 10px; padding: 4px 10px 16px; font-weight: 700; letter-spacing: .04em; color: var(--text); }
.side-brand i { width: 26px; height: 26px; border-radius: 9px; background: conic-gradient(from 210deg, var(--cyan), #a78bfa, var(--blue), var(--cyan)); box-shadow: 0 0 22px -4px var(--cyan); display: block; }
.side-nav { display: flex; flex-direction: column; gap: 2px; }
#side .nav { display: flex; align-items: center; gap: 12px; width: 100%; height: auto; padding: 9px 10px; border: 0; border-radius: 11px; background: transparent; color: var(--dim); font-size: 14px; text-align: left; cursor: pointer; box-shadow: none; }
#side .nav svg { width: 19px; height: 19px; flex: none; }
#side .nav:hover:not(:disabled) { background: var(--panel); color: var(--text); box-shadow: none; }
#side .nav[aria-current="page"] { background: var(--accent-soft); color: var(--cyan); font-weight: 600; }
.side-foot { margin-top: auto; padding: 12px 10px 4px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--dim); }
.side-status { display: flex; align-items: center; gap: 8px; }
.side-status b { width: 8px; height: 8px; border-radius: 50%; background: var(--err); }
.side-status b[data-on="true"] { background: #34d399; box-shadow: 0 0 10px #34d399; }
:root[data-theme="light"] .side-status b[data-on="true"] { background: #059669; box-shadow: none; }

/* ---- Praten ---- */
#app { max-width: 920px; }
header { border: 0; padding: 14px 0 6px; }
.brand { display: none; }                           /* het merk staat in de zijbalk */
.msg { backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: var(--shadow); border-radius: 18px; border: 1px solid var(--line); padding: 11px 15px; }
.msg.user, [data-theme="light"] .msg.user { background: var(--cyan); color: var(--accent-ink); border-color: transparent; border-bottom-right-radius: 6px; }
.msg.bot, [data-theme="light"] .msg.bot { background: var(--panel); border-color: var(--line); border-bottom-left-radius: 6px; }
.msg.error { color: var(--err); border-color: color-mix(in srgb, var(--err) 50%, transparent); }
.log:empty::before { content: ""; }
.dock { display: grid; gap: 10px; padding-top: 6px; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.chips button { background: var(--panel); color: var(--dim); border: 1px solid var(--line); border-radius: 99px; padding: 7px 13px; font-size: 13px; }
.chips button:hover:not(:disabled) { color: var(--text); }
.log:not(:empty) ~ .dock .chips { display: none; }
.composer, [data-theme="light"] .composer { background: var(--panel); border: 1px solid var(--line); border-radius: 22px; padding: 7px 7px 7px 16px; box-shadow: var(--shadow); gap: 8px; }
.composer:focus-within { border-color: var(--cyan); box-shadow: 0 0 0 3px var(--accent-soft), var(--shadow); }
.composer input[type=text] { background: transparent; }
#btn-mic { order: 3; width: 46px; height: 46px; border-radius: 15px; background: var(--cyan); color: var(--accent-ink); border-color: transparent; box-shadow: 0 8px 24px -8px var(--cyan); }
#btn-mic:hover:not(:disabled) { background: color-mix(in srgb, var(--cyan) 86%, #fff); }
#input { order: 1; flex: 1; }
#btn-send, [data-theme="light"] #btn-send { order: 2; border-radius: 14px; background: var(--surface2); color: var(--text); border-color: var(--line); font-weight: 500; }
#avatar { filter: drop-shadow(0 0 32px color-mix(in srgb, var(--cyan) 30%, transparent)); }

/* ---- de bediening als pagina naast de zijbalk (geen venster) ---- */
#ctl { left: var(--side-w); }
#ctl.panel { background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none; padding: 0; align-items: stretch; place-items: stretch; }
#ctl .ctl-box, #ctl .panel-box { width: 100%; max-width: none; max-height: none; height: 100%; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.ctl-top { background: transparent; border: 0; padding: calc(20px + env(safe-area-inset-top)) 32px 4px; }
.ctl-title strong { font-size: 26px; letter-spacing: -.02em; }
.ctl-title small { font-size: 13.5px; }
.ctl-title svg { display: none; }
#ctl .ctl-tabs { display: none; }                  /* de zijbalk vervangt de tabbladen */
#ctl-msg { margin: 0 32px; border-radius: 12px; border: 0; }
.ctl-body { padding: 14px 32px 32px; }
#ctl { --d-r: 20px; --d-r-sm: 12px; --d-surface: var(--panel); --d-surface-2: var(--surface2); --d-border: var(--line); }
[data-theme="light"] #ctl { --d-surface: var(--panel); --d-surface-2: var(--surface2); --d-good: #059669; --d-warn: #b45309; }
.dcard, .today-card, .tile, .ctl-meters, .profile, .ctl-set, .ctl-det, .kv { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
#ctl button { border-radius: 12px; }
#ctl button.primary { background: var(--cyan); color: var(--accent-ink); border-color: transparent; }
#ctl input[type="text"], #ctl input[type="date"], #ctl input[type="time"], #ctl input[type="datetime-local"], #ctl input[type="number"], #ctl select { border-radius: 12px; background: var(--surface2); border-color: var(--line); }
#ctl .ctl-h { font-size: 12px; letter-spacing: .09em; color: var(--dim); }
.today-card .today-big { font-size: 28px; letter-spacing: -.02em; }

/* ---- paneeltjes (geheugen, bevestiging) ---- */
.panel { background: rgba(5,9,13,.6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
[data-theme="light"] .panel { background: rgba(15,23,42,.35); }
.panel-box { background: var(--panel); border: 1px solid var(--line); border-radius: 22px; box-shadow: 0 30px 80px -30px rgba(0,0,0,.6); }
#confirm { z-index: 40; }

/* ---- onderbalk op de telefoon ---- */
#tabbar { display: none; }
@media (max-width: 760px) {
  body:has(#app:not([hidden])) { padding-left: 0; padding-bottom: var(--tab-h); }
  body:has(#app:not([hidden])) #side { display: none; }
  body:has(#app:not([hidden])) #tabbar { display: grid; }
  #tabbar { position: fixed; inset: auto 0 0 0; z-index: 12; grid-template-columns: repeat(5, 1fr); gap: 2px; min-height: var(--tab-h); padding: 6px 8px calc(8px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid var(--line); }
  #tabbar button { display: grid; justify-items: center; gap: 3px; height: auto; padding: 6px 0; border: 0; background: transparent; color: var(--dim); font-size: 11px; border-radius: 12px; box-shadow: none; }
  #tabbar button svg { width: 22px; height: 22px; }
  #tabbar button:hover:not(:disabled) { background: transparent; box-shadow: none; }
  #tabbar button[aria-current="page"] { color: var(--cyan); }
  #tabbar button[aria-current="page"] svg { filter: drop-shadow(0 0 8px color-mix(in srgb, var(--cyan) 70%, transparent)); }
  #app { height: calc(100dvh - var(--tab-h)); }
  header .lbl { display: none; } header button.ghost { padding: 7px 9px; }
  #btn-ctl { display: none; }                      /* Meer in de onderbalk opent de bediening */
  #ctl { left: 0; bottom: var(--tab-h); }
  #ctl .ctl-tabs { display: none; }                /* de onderbalk en het Meer-blad vervangen de tabbladen */
  .ctl-top { padding: calc(14px + env(safe-area-inset-top)) 16px 0; }
  .ctl-title strong { font-size: 22px; }
  .ctl-body { padding: 12px 16px 24px; }
  #ctl-msg { margin: 0 16px; }
  .chips { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .chips::-webkit-scrollbar { display: none; }
  .chips button { flex: none; }
}
@media (min-width: 761px) { #btn-brain, #btn-ctl, #btn-mem { display: none; } }   /* de zijbalk heeft deze knoppen al */

/* ---- Vandaag als rooster ---- */
.ctl-body { container-type: inline-size; container-name: ctlb; }
#today-body.today-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px; align-items: stretch; }
#today-body .sec { display: contents; }
#today-body .today-card { grid-column: span 4; }
#today-body .today-card.wide, #today-body .f1-wrap { grid-column: 1 / -1; }
#today-body [data-sec="summary"] .today-card { grid-column: span 8; }
#today-body [data-sec="weather"] .today-card { grid-column: span 4; }
#today-body [data-sec="agenda"] .today-card { grid-column: span 6; }
#today-body [data-sec="weather"] .today-big { font-size: 44px; letter-spacing: -.03em; line-height: 1.05; }
.today-card.hero { background: linear-gradient(135deg, color-mix(in srgb, var(--cyan) 20%, var(--panel)) 0%, var(--panel) 58%); overflow: hidden; }
.today-card.hero::after { content: ""; position: absolute; right: -70px; top: -70px; width: 280px; height: 280px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--cyan) 32%, transparent), transparent 65%); filter: blur(8px); pointer-events: none; }
.sum-h { margin: 2px 0 4px; font-size: 24px; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; position: relative; z-index: 1; }
.sum-t { margin: 0 0 8px; color: var(--dim); font-size: 16px; line-height: 1.55; max-width: 62ch; position: relative; z-index: 1; }
.sum-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 8px; position: relative; z-index: 1; }
@container ctlb (max-width: 860px) {
  #today-body [data-sec="summary"] .today-card { grid-column: span 12; }
  #today-body [data-sec="weather"] .today-card, #today-body .today-card { grid-column: span 6; }
  #today-body [data-sec="agenda"] .today-card { grid-column: span 12; }
}
@container ctlb (max-width: 560px) {
  #today-body .today-card, #today-body [data-sec="weather"] .today-card { grid-column: span 12; }
  .sum-h { font-size: 21px; }
}

/* ============================ brein ============================ */
#brainview, :root[data-theme="light"] #brainview { --b-line: var(--line); --b-surface: var(--panel); --b-surface-2: var(--surface2); background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
#brainview { --k-fact: 34,211,238; --k-episode: 167,139,250; --k-preference: 251,191,36; --k-entity: 186,230,253; }
:root[data-theme="light"] #brainview { --k-fact: 8,145,178; --k-episode: 124,58,237; --k-preference: 180,83,9; --k-entity: 2,132,199; }
.bv-top { background: transparent; border: 0; padding: 0; gap: 10px 14px; }
.bv-search input { background: var(--panel); border: 1px solid var(--line); height: 38px; }
.bv-chip { background: var(--panel); border: 1px solid var(--line); }
.bv-chip[aria-pressed="false"] { background: transparent; }
.bv-chip i { box-shadow: none; }
.bv-zoom { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); backdrop-filter: none; }
.bv-time { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 10px 16px; box-shadow: var(--shadow); }
.bv-tip, :root[data-theme="light"] .bv-tip { background: var(--panel); border: 1px solid var(--line); border-top: 3px solid rgb(var(--tipc, 34,211,238)); border-radius: 16px; box-shadow: 0 18px 44px -18px rgba(0,0,0,.55); backdrop-filter: none; }
.bv-tip .kind::before { box-shadow: none; }
#bv-new { border-color: color-mix(in srgb, var(--warn, #fbbf24) 55%, transparent); color: #fbbf24; }
:root[data-theme="light"] #bv-new { color: #b45309; }

/* ============================ inlogscherm ============================ */
#login { position: fixed; inset: 0; z-index: 30; background: radial-gradient(900px 520px at 50% -10%, var(--accent-soft), transparent 70%), var(--bg); }
#login-form, :root[data-theme="light"] #login-form { width: min(380px, 100%); gap: 14px; padding: 34px 28px 28px; background: var(--panel); border: 1px solid var(--line); border-radius: 26px; box-shadow: var(--shadow), 0 40px 100px -40px rgba(0,0,0,.55); backdrop-filter: none; -webkit-backdrop-filter: none; }
#login-logo { display: none; }
#login-form::before { content: ""; display: block; width: 64px; height: 64px; margin: 0 auto 6px; border-radius: 22px; background: conic-gradient(from 210deg, var(--cyan), #a78bfa, var(--blue), var(--cyan)); box-shadow: 0 0 44px -8px var(--cyan); animation: pulse 4s ease-in-out infinite; }
#login-form h1, :root[data-theme="light"] #login-form h1 { margin: 2px 0 0; font-size: 28px; font-weight: 700; letter-spacing: .03em; color: var(--text); text-shadow: none; }
#login-form h1::after { content: "Je persoonlijke assistent"; display: block; margin-top: 6px; font-size: 14px; font-weight: 400; letter-spacing: 0; color: var(--dim); }
#login-form input[type=password], #login-form input[type=text] { height: 48px; border-radius: 14px; background: var(--surface2); border: 1px solid var(--line); }
#login-form button[type=submit], :root[data-theme="light"] #login-form button[type=submit] { height: 48px; border-radius: 14px; font-size: 16px; padding: 0; background: var(--cyan); color: var(--accent-ink); }

/* ============================ kaartjes in het gesprek ============================ */
.card, :root[data-theme="light"] .card { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 14px 16px; box-shadow: var(--shadow), 0 18px 40px -22px rgba(0,0,0,.5); backdrop-filter: none; -webkit-backdrop-filter: none; font-size: 14px; }
.card header { color: var(--dim); font-size: 11.5px; letter-spacing: .1em; font-weight: 600; margin-bottom: 8px; }
.card header .x { color: var(--dim); }
.card .row { padding: 3px 0; } .card .row .l { color: var(--dim); }
.card .day { color: var(--cyan); font-weight: 600; letter-spacing: .02em; }
.card .temp, :root[data-theme="light"] .card .temp { font-size: 40px; font-weight: 700; letter-spacing: -.03em; color: var(--text); text-shadow: none; line-height: 1; }
.card .desc { color: var(--dim); }
.card .note { border-left-color: var(--line); } .card .note.unread { border-left-color: var(--cyan); }
.card .bar, :root[data-theme="light"] .card .bar { background: var(--surface2); height: 7px; border-radius: 99px; }
.card .bar i, :root[data-theme="light"] .card .bar i { background: linear-gradient(90deg, var(--cyan), var(--blue)); box-shadow: none; border-radius: 99px; }
.card .bar.hot i { background: linear-gradient(90deg, #fbbf24, #f87171); box-shadow: none; }
.card .dot::before, :root[data-theme="light"] .card .dot::before { background: #34d399; box-shadow: none; }
.card .dot.off::before { background: var(--err); box-shadow: none; }
:root[data-theme="light"] .card .dot::before { background: #059669; }
.card .warn { color: #fbbf24; } :root[data-theme="light"] .card .warn { color: #b45309; }
.card .chip, :root[data-theme="light"] .card .chip { background: var(--accent-soft); border-color: transparent; color: var(--cyan); font-weight: 600; }
.card .brain-link { border-radius: 12px; }
.card .scroll { scrollbar-color: color-mix(in srgb, var(--dim) 50%, transparent) transparent; }
.card .scroll::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--dim) 50%, transparent); }

/* ============================ Brein en Geheugen als pagina ============================ */
#ctl-tab-brain:not([hidden]) { flex: 1; min-height: 0; }
#ctl[data-tab="brain"] .ctl-body { overflow: hidden; display: flex; flex-direction: column; padding-bottom: 20px; }
#brainview { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 12px; z-index: auto; }
.bv-status { margin-right: auto; color: var(--dim); font-size: 13.5px; align-self: center; }
.bv-stage { flex: 1; min-height: 260px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); overflow: hidden; box-shadow: var(--shadow); }
.bv-tip { z-index: 5; }
.ctl-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.ctl-card .ctl-h { margin: 0; }
.mem-form { display: flex; gap: 8px; } .mem-form input { flex: 1; }
.ctl-card .opt { display: flex; gap: 10px; align-items: flex-start; line-height: 1.4; }
.ctl-card .opt input { margin-top: 3px; flex: none; }
.ctl-card .mem-list { max-height: none; margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.ctl-card .mem-list li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); background: transparent; border-left: 0; border-right: 0; border-bottom: 0; border-radius: 0; }
.ctl-card .mem-list li:first-child { border-top: 0; }
.mem-list .kind { display: inline-block; margin-right: 8px; padding: 1px 9px; border-radius: 99px; font-size: 11.5px; font-weight: 600; background: var(--accent-soft); color: var(--cyan); }

/* ============================ Praten in dezelfde paginastijl ============================ */
#app { max-width: none; padding-left: 32px; padding-right: 32px; }
header { padding: 20px 0 4px; align-items: center; }
.page-title strong { display: block; font-size: 26px; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; }
.page-title small { display: block; font-size: 13.5px; color: var(--dim); line-height: 1.35; }
header .conn { display: none; }
#app .stage, #app .log, #app .dock { width: min(920px, 100%); margin-inline: auto; }
@media (max-width: 760px) { #app { padding-left: 16px; padding-right: 16px; } header { padding-top: 12px; } .page-title strong { font-size: 22px; } }

/* Taken: kaarten zoals de andere pagina's */
#ctl-tab-tasks { display: flex; flex-direction: column; gap: 16px; }
#ctl-tab-tasks[hidden] { display: none; }
#ctl-tab-tasks .ctl-cols { gap: 16px; }
#ctl-tab-tasks .ctl-cols > .ctl-card { gap: 12px; }
#ctl-tab-tasks .ctl-list { margin: 0; padding: 0; list-style: none; }

/* iPhone: veiligheidsmarge zit al in #app, kop en rijen compacter */
.page-title { min-width: 0; flex: 1 1 auto; }
.page-title small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 859px) {
  #app { grid-template-rows: auto minmax(0, 1fr) auto auto; }
  .page-title small { font-size: 12.5px; }
  #tabbar { padding-bottom: calc(4px + env(safe-area-inset-bottom)); }
}

/* Google Live aan: de microfoonknop is de Live-knop */
body.liveall #btn-live { display: none; }

/* Telefoon: leesbare tekstmaten. Invoervelden minstens 16px (anders zoomt iOS bij het aantikken in), uitleg en bijschriften groter. */
@media (max-width: 760px) {
  input, select, textarea, #ctl input, #ctl select, #ctl textarea { font-size: 16px !important; }
  #chips button, .chips button { font-size: 14.5px; height: 38px; }
  #tabbar button { font-size: 11.5px; }
  #ctl .ctl-tabs button { font-size: 14px; }
  .ctl-desc, .home-temps, .ph-year, .ctl-meta { font-size: 14.5px; line-height: 1.45; }
  .ctl-note, .ctl-set-msg, .news-meta, .ctl-det > summary small, .bv-hint { font-size: 13.5px; }
  .tile-s, .pill.cal { font-size: 13.5px; }
  .tile-l, .kv .k, .f1-sub, #ctl .ctl-h, .ctl-h .count { font-size: 12.5px; }
  #ctl button.small { height: 34px; font-size: 14px; }
  .ctl-title small, #app-sub { font-size: 13px; }
  #ctl-msg { font-size: 14px; }
  .ctl-card .opt, .mem-list li { font-size: 15px; }
}

/* Agenda-pagina: werk en privé naast elkaar, raceknoppen erboven */
.agenda-page { display: flex; flex-direction: column; gap: 16px; }
.agenda-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; align-items: start; }
@media (max-width: 760px) { .agenda-cards { grid-template-columns: 1fr; } }

/* Telefoon: Meer-blad dat van boven komt */
#moresheet { position: fixed; inset: 0 0 var(--tab-h) 0; z-index: 40; }
#moresheet[hidden] { display: none; }
#moresheet .ms-back { position: absolute; inset: 0; background: rgba(5, 10, 20, .45); animation: ms-fade .18s ease-out; }
#moresheet .ms-panel { position: absolute; top: 0; left: 0; right: 0; padding: calc(14px + env(safe-area-inset-top)) 16px 18px; background: var(--panel); border-bottom: 1px solid var(--line); border-radius: 0 0 24px 24px; box-shadow: var(--shadow), 0 24px 60px -20px rgba(0,0,0,.5); animation: ms-down .22s cubic-bezier(.2,.8,.2,1); }
#moresheet .ms-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
#moresheet .ms-grid button { display: flex; flex-direction: column; align-items: center; gap: 8px; height: auto; padding: 16px 6px 12px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface2); color: var(--text); font-size: 14px; font-weight: 500; box-shadow: none; }
#moresheet .ms-grid button svg { width: 24px; height: 24px; color: var(--dim); }
#moresheet .ms-grid button[aria-current="page"] { background: var(--accent-soft); border-color: transparent; color: var(--cyan); }
#moresheet .ms-grid button[aria-current="page"] svg { color: var(--cyan); }
@keyframes ms-down { from { transform: translateY(-30px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes ms-fade { from { opacity: 0; } to { opacity: 1; } }
@media (min-width: 761px) { #moresheet { display: none !important; } }
@media (prefers-reduced-motion: reduce) { #moresheet .ms-back, #moresheet .ms-panel { animation: none; } }

/* Praten: de gespreksmodus-knop (golfje) rechtsboven is weg; de knop naast Stuur is Google Gemini zodra Live aanstaat */
#btn-talk { display: none !important; }
body.liveall #btn-mic { width: auto; min-width: 46px; padding: 0 16px 0 14px; border-radius: 15px; display: inline-flex; align-items: center; gap: 8px; }
.mic .mic-l { font-size: 14px; font-weight: 600; letter-spacing: 0; }
@media (max-width: 520px) { body.liveall #btn-mic { width: 46px; padding: 0; justify-content: center; } .mic .mic-l { display: none; } }
/* Telefoon: de schakelaar "Alles via Google Live" staat niet in het menu (Gemini is daar de standaard) */
@media (max-width: 760px) { #more-liveall { display: none !important; } }

/* Praten: de orb past zich aan. Leeg scherm: een rustige orb met een begroeting. Zodra er een gesprek is: een kleine orb bovenaan en alle ruimte voor het gesprek. */
@media (min-height: 521px), (max-width: 559px) {
  #app { grid-template-rows: auto minmax(0, 1fr) auto auto; }
  #avatar { max-height: min(300px, 38dvh); transition: max-height .3s ease; }
  .log:empty { display: flex; align-items: center; justify-content: center; padding: 4px 0 14px; }
  .log:empty::before { content: "Waar kan ik mee helpen?"; margin: 0; opacity: 1; color: var(--text); font-size: 20px; font-weight: 600; letter-spacing: -.01em; }
  #app:has(#log:not(:empty)) { grid-template-rows: auto auto minmax(0, 1fr) auto; }
  #app:has(#log:not(:empty)) .stage { display: flex; flex-direction: column; align-items: center; gap: 8px; }
  #app:has(#log:not(:empty)) #avatar { flex: none; width: auto; height: 104px; min-height: 0; max-height: 104px; }
  #app:has(#log:not(:empty)) .cards { position: static; display: flex; gap: 8px; width: 100%; overflow-x: auto; pointer-events: auto; padding: 2px 2px 4px; scroll-snap-type: x mandatory; }
  #app:has(#log:not(:empty)) .cards:empty { display: none; }
  #app:has(#log:not(:empty)) .cards .card { position: static; flex: 0 0 min(78%, 300px); scroll-snap-align: start; max-height: min(190px, 26dvh); overflow-y: auto; }
  #app:has(#log:not(:empty)) .log { max-height: none; }
}

/* Maps */
.maps-page { display: flex; flex-direction: column; gap: 14px; }
.maps-phones { display: flex; gap: 8px; flex-wrap: wrap; }
.maps-phones .chip.on { background: var(--accent-soft); color: var(--cyan); border-color: transparent; font-weight: 600; }
.maps-phones .chip.off { opacity: .55; }
.maps-status { margin: 0; }
.maps-dests { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
#ctl .maps-dest { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 3px; height: auto; min-height: 92px; padding: 14px 16px; cursor: pointer; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); color: var(--text); text-align: left; box-shadow: var(--shadow); }
#ctl .maps-dest .md-l { font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
#ctl .maps-dest .md-t { font-size: 26px; font-weight: 700; letter-spacing: -.02em; }
#ctl .maps-dest .md-s { font-size: 13px; color: var(--dim); }
#ctl .maps-dest.on { border-color: var(--cyan); box-shadow: 0 0 0 1px var(--cyan), var(--shadow); }
.maps-frame { width: 100%; height: min(520px, 55dvh); min-height: 280px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.maps-foot { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.maps-open { display: inline-flex; align-items: center; height: 38px; padding: 0 16px; border-radius: 12px; background: var(--cyan); color: var(--accent-ink); font-weight: 600; text-decoration: none; }
.maps-form { display: flex; gap: 8px; }
.maps-form input { flex: 1; min-width: 0; height: 44px; }
.maps-form button { height: 44px; padding: 0 18px; flex: none; }
.maps-open.ghost-link { background: transparent; color: var(--text); border: 1px solid var(--line); }

/* ====== Slimmer dashboard: aandacht, trends, vertrektijd, opdrachtbalk ====== */
.attn { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.attn:empty { display: none; }
.attn > .ctl-h { margin: 0 0 2px; }
.attn-ok { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); color: var(--dim); font-size: 14px; }
.attn-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); box-shadow: var(--shadow); }
.attn-row.bad { border-color: color-mix(in srgb, var(--err) 55%, var(--line)); background: color-mix(in srgb, var(--err) 8%, var(--panel)); }
.attn-row.warn { border-color: color-mix(in srgb, #e0a100 55%, var(--line)); }
.attn-row .ctl-text { flex: 1; min-width: 0; }
.trends { display: flex; flex-direction: column; gap: 14px; }
.trend-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.trend-cell { display: flex; flex-direction: column; gap: 6px; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.spark { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "g v" "d d"; gap: 2px 10px; align-items: end; }
.spark-svg { grid-area: g; width: 100%; height: 44px; color: var(--cyan); overflow: visible; }
.spark-line { stroke: var(--cyan); stroke-width: 1.6; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.spark-area { fill: var(--cyan); opacity: .13; }
.spark-v { grid-area: v; font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
.spark > .ctl-desc { grid-area: d; }
.svc-trend { display: grid; grid-template-columns: minmax(110px, 190px) 1fr auto; gap: 12px; align-items: center; padding: 6px 2px; }
.svc-bar { width: 100%; height: 14px; border-radius: 4px; background: color-mix(in srgb, var(--dim) 14%, transparent); }
.svc-bar .t-ok { fill: var(--d-good, #3dffa0); } .svc-bar .t-bad { fill: var(--d-bad, #ff5d6c); }
@media (max-width: 760px) { .svc-trend { grid-template-columns: 1fr auto; } .svc-trend .svc-bar { grid-column: 1 / -1; grid-row: 2; } }
.dep-big { margin: 0; font-size: 30px; font-weight: 700; letter-spacing: -.02em; }
.dep-big.ok { color: var(--text); } .dep-big.warn { color: #e0a100; } .dep-big.bad { color: var(--err); }
#today-body [data-sec="departure"] .today-card { grid-column: span 12; }
.side-search { display: flex; align-items: center; gap: 10px; width: 100%; height: 38px; margin: 0 0 8px; padding: 0 10px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface2); color: var(--dim); font-size: 13.5px; cursor: pointer; }
.side-search svg { width: 16px; height: 16px; flex: none; }
.side-search span { flex: 1; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-search kbd { font: inherit; font-size: 11.5px; padding: 1px 6px; border: 1px solid var(--line); border-radius: 6px; color: var(--dim); }
.ms-search { display: block; width: 100%; height: 44px; margin: 0 0 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface2); color: var(--dim); font-size: 15px; text-align: left; padding: 0 14px; }
#palette { position: fixed; inset: 0; z-index: 60; }
#palette[hidden] { display: none; }
#palette .pal-back { position: absolute; inset: 0; background: rgba(5, 10, 20, .5); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
#palette .pal-box { position: absolute; top: min(14vh, 120px); left: 50%; transform: translateX(-50%); width: min(620px, calc(100vw - 24px)); max-height: 70dvh; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 18px; background: var(--panel); box-shadow: var(--shadow), 0 30px 80px -20px rgba(0,0,0,.6); overflow: hidden; }
#pal-input { height: 54px; padding: 0 18px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; font-size: 16px; color: var(--text); outline: none; }
#pal-list { list-style: none; margin: 0; padding: 6px; overflow-y: auto; }
.pal-item { display: flex; justify-content: space-between; gap: 14px; align-items: center; padding: 10px 12px; border-radius: 10px; cursor: pointer; font-size: 14.5px; }
.pal-item.on { background: var(--accent-soft); color: var(--cyan); }
.pal-l { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pal-h { flex: none; font-size: 12px; color: var(--dim); }
.pal-empty { padding: 14px; color: var(--dim); text-align: center; }
.pal-foot { display: flex; gap: 16px; padding: 8px 14px; border-top: 1px solid var(--line); font-size: 12px; color: var(--dim); }
@media (max-width: 760px) { .pal-foot { display: none; } }
#toast { position: fixed; left: 50%; bottom: calc(var(--tab-h, 0px) + 20px + env(safe-area-inset-bottom)); transform: translate(-50%, 20px); z-index: 70; max-width: min(520px, calc(100vw - 32px)); padding: 11px 16px; border-radius: 14px; background: var(--panel); color: var(--text); border: 1px solid var(--line); box-shadow: var(--shadow); font-size: 14px; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; }
#toast.on { opacity: 1; transform: translate(-50%, 0); }
@media (min-width: 761px) { #toast { bottom: 24px; } }
@media (prefers-reduced-motion: reduce) { #toast { transition: none; } }
.today-card .maps-open { align-self: flex-start; margin-top: 4px; }

/* Logo = het pictogram van de site (favicon) */
.side-brand img { width: 30px; height: 30px; border-radius: 9px; display: block; box-shadow: 0 0 22px -6px var(--cyan); }
#login-form::before { background: url("/icons/icon-192.png") center / cover no-repeat; border-radius: 18px; }
.energy-best { font-weight: 600; color: var(--cyan); }
.energy-best.now { color: var(--d-good, #3dffa0); }

.usage-t { width: 100%; border-collapse: collapse; font-size: 14px; }
.usage-t th { text-align: left; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); font-weight: 600; padding: 6px 8px; border-bottom: 1px solid var(--line); }
.usage-t td { padding: 8px; border-bottom: 1px solid var(--line); }
.usage-t tr.today td { font-weight: 600; color: var(--cyan); }
@media (max-width: 760px) { .usage { overflow-x: auto; } .usage-t { min-width: 520px; } }
.logs-bar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.logs-bar select, .logs-bar input { height: 38px; flex: 0 1 auto; }
.logs-bar input { flex: 1 1 160px; min-width: 120px; }
.logs-pre { margin: 0; max-height: 360px; overflow: auto; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); color: var(--text); font: 12.5px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; word-break: break-word; }
.logs-pre .l-err { color: var(--err); } .logs-pre .l-warn { color: #e0a100; }

#today-body .today-tools { grid-column: 1 / -1; display: flex; justify-content: flex-end; }
#today-body .layout-panel { grid-column: 1 / -1; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); display: flex; flex-direction: column; gap: 10px; }
#today-body .layout-panel[hidden] { display: none; }
.layout-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 6px 16px; }
.layout-row { display: flex; align-items: center; gap: 10px; padding: 4px 0; }
.layout-row label { flex: 1; font-size: 14.5px; }
.layout-panel .reset, .layout-panel > button { align-self: flex-start; }
#today-body .sec[hidden] { display: none !important; }
#ctl-svc { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 8px; }
#ctl-svc .ctl-row { flex-wrap: nowrap; }
#ctl-svc .ctl-name { flex: 1; min-width: 0; }
.home-wrap { display: contents; }
#home-body { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; align-items: start; }
#home-body .home-wrap > .today-tools, #home-body .home-wrap > .layout-panel { grid-column: 1 / -1; }
.layout-sec { padding: 8px 0; border-top: 1px solid var(--line); }
.layout-sec:first-child { border-top: 0; }
.layout-items { margin: 4px 0 4px 26px; }
.layout-items summary { cursor: pointer; font-size: 13.5px; color: var(--dim); padding: 4px 0; }
.home-layout { display: block; }
#home-body .today-tools { grid-column: 1 / -1; display: flex; justify-content: flex-end; }
#home-body .layout-panel { grid-column: 1 / -1; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); display: flex; flex-direction: column; gap: 10px; }
#home-body .layout-panel[hidden] { display: none; }
@media (max-width: 760px) { #home-body { grid-template-columns: 1fr; } }

/* Indeling van Overzicht en Systeem */
.blks { display: grid; gap: 16px; }
.ov-grid { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); align-items: start; }
.sys-stack { grid-template-columns: minmax(0, 1fr); }
.blk { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.blk.full { grid-column: 1 / -1; }
.blk[hidden] { display: none !important; }
.blk:has(> .attn:empty) { display: none; }
#ctl-tab-overview .today-tools, #ctl-tab-system .today-tools { display: flex; justify-content: flex-end; margin-bottom: 10px; }
#ctl-tab-overview .layout-panel, #ctl-tab-system .layout-panel { padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
#ctl-tab-overview .layout-panel[hidden], #ctl-tab-system .layout-panel[hidden] { display: none; }

/* Geheugen: bewerken, voorstellen, mensen en "waarom" */
.mem-opts { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; margin-top: 8px; }
.mem-tools { display: flex; gap: 8px; margin-bottom: 8px; } .mem-tools input { flex: 1; min-width: 0; height: 38px; }
.mem-item, .prop { display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
.mem-item.pinned { border-left: 3px solid var(--cyan); }
.mem-text { flex: 1; min-width: 0; line-height: 1.45; overflow-wrap: anywhere; }
.mem-acts { display: flex; gap: 6px; flex-wrap: wrap; }
.mem-acts .on { border-color: var(--cyan); color: var(--cyan); }
.kind.k-pin { background: var(--accent-soft); color: var(--cyan); } .kind.k-priv { background: color-mix(in srgb, #a78bfa 22%, transparent); color: #a78bfa; } .kind.k-exp { background: color-mix(in srgb, #e0a100 18%, transparent); color: #e0a100; }
.mem-edit { display: flex; flex-direction: column; gap: 8px; } .mem-edit textarea { width: 100%; font-size: 16px; }
.person { border-top: 1px solid var(--line); padding: 8px 0; } .person summary { cursor: pointer; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.person-mems { margin: 6px 0 2px 18px; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.why { align-self: flex-start; margin: -2px 0 6px 6px; font-size: 13px; color: var(--dim); max-width: 88%; }
.why summary { cursor: pointer; } .why ul { margin: 6px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.why li { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .why-t { flex: 1; min-width: 160px; color: var(--text); } .why-acts { display: flex; gap: 6px; }

.bv-person select { height: 36px; border-radius: 12px; }
.bv-acts { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ctl-card .mem-list li.mem-item, .ctl-card .mem-list li.prop { flex-direction: column; justify-content: flex-start; align-items: stretch; text-align: left; gap: 8px; }
.prop .mem-text, .mem-item .mem-text { text-align: left; }

/* Koppelingen */
.integ { display: flex; flex-direction: column; gap: 14px; }
.integ-group h4 { margin: 0 0 6px; font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.integ-row { display: flex; justify-content: space-between; gap: 14px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); margin-bottom: 6px; align-items: flex-start; }
.integ-row.off { opacity: .6; }
.integ-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.integ-out { font-size: 12.5px; }
.integ-s { display: flex; gap: 8px; align-items: center; flex: none; font-size: 13px; color: var(--dim); max-width: 45%; text-align: right; }
#ctl .dot.idle { background: var(--dim); box-shadow: none; opacity: .7; } #ctl .dot.off { background: transparent; border: 1.5px solid var(--dim); box-shadow: none; opacity: .6; }
@media (max-width: 760px) { .integ-row { flex-direction: column; } .integ-s { max-width: none; text-align: left; } }

/* Inklappen */
.fold-head { cursor: pointer; user-select: none; position: relative; padding-right: 26px; }
.fold-head::after { content: ""; position: absolute; right: 4px; top: 50%; width: 8px; height: 8px; border-right: 2px solid var(--dim); border-bottom: 2px solid var(--dim); transform: translateY(-70%) rotate(45deg); transition: transform .15s; }
.blk.folded .fold-head::after { transform: translateY(-50%) rotate(-45deg); }
.fold-head:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 6px; }
.blk-body { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.blk-body[hidden] { display: none; }
.layout-folds { display: flex; gap: 8px; flex-wrap: wrap; }
.integ-set { margin: -2px 0 8px 12px; } .integ-set summary { cursor: pointer; font-size: 13.5px; color: var(--cyan); padding: 4px 0; }
.integ-set .ctl-list { margin-top: 6px; }
@media (prefers-reduced-motion: reduce) { .fold-head::after { transition: none; } }

/* Kopjes in de zijbalk */
.side-nav .nav-group { margin: 14px 12px 4px; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); opacity: .8; }

/* Afspraak toevoegen (Agenda) */
.agenda-add { margin-bottom: 12px; }
.agenda-form { display: grid; gap: 10px; padding: 14px; margin-top: 8px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
.agenda-form .ctl-field { display: grid; gap: 4px; }
.agenda-form .ctl-label { font-size: 13px; color: var(--dim); }
.agenda-form input:not([type="checkbox"]) { width: 100%; }
.agenda-form input[type="checkbox"] { justify-self: start; width: 20px; height: 20px; }
.agenda-del { padding: 0 6px; min-height: 0; line-height: 1.4; opacity: .55; }
.agenda-del:hover, .agenda-del:focus-visible { opacity: 1; }

/* Documenten */
.doc-bar { display: flex; gap: 8px; margin-bottom: 8px; }
.doc-bar input { flex: 1; min-width: 0; }
.doc-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.doc-chips .on { background: var(--accent-soft, rgba(34, 211, 238, .16)); border-color: var(--cyan); color: var(--cyan); }
.doc-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.doc-row:first-of-type { border-top: 0; }
.doc-main { flex: 1 1 260px; min-width: 0; }
.doc-title { all: unset; cursor: pointer; font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.doc-title:hover, .doc-title:focus-visible { color: var(--cyan); text-decoration: underline; }
.doc-snip { font-size: 13.5px; color: var(--dim); margin-top: 4px; overflow-wrap: anywhere; }
.doc-warn { color: var(--warn, #f5b942); }
.doc-acts { display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-start; }

/* Groepen in de zijbalk zijn knoppen die in- en uitklappen */
.side-nav button.nav-group { all: unset; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; cursor: pointer; margin: 14px 0 4px; padding: 4px 12px; border-radius: 8px; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); opacity: .85; }
.side-nav button.nav-group:hover { opacity: 1; color: var(--text); }
.side-nav button.nav-group:focus-visible { outline: 2px solid var(--cyan); outline-offset: 1px; }
.side-nav button.nav-group::after { content: ""; width: 7px; height: 7px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(45deg); transition: transform .15s; margin-right: 2px; }
.side-nav button.nav-group[aria-expanded="false"]::after { transform: rotate(-45deg); }
.side-nav .nav[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .side-nav button.nav-group::after { transition: none; } }

/* Volgorde van het menu aanpassen */
.side-edit { all: unset; box-sizing: border-box; display: block; cursor: pointer; margin: 0 0 8px; padding: 4px 2px; font-size: 12px; color: var(--dim); }
.side-edit:hover { color: var(--text); text-decoration: underline; }
.side-edit:focus-visible { outline: 2px solid var(--cyan); outline-offset: 1px; border-radius: 4px; }
.no-box { width: min(440px, 100%); }
.no-list { display: flex; flex-direction: column; overflow-y: auto; min-height: 0; }
.no-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 0; }
.no-head { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); }
.no-acts { display: inline-flex; gap: 4px; }
.no-btn { min-width: 36px; }
.no-foot { display: flex; justify-content: space-between; gap: 8px; }

/* Agenda: overzicht, dag, week en maand */
.ag-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-bottom: 10px; }
.ag-views, .ag-nav, .ag-filter { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ag-views .on, .ag-filter .on { background: var(--accent-soft, rgba(34, 211, 238, .16)); border-color: var(--cyan); color: var(--cyan); }
.ag-title { margin-left: 4px; }
.ag-title::first-letter, .ag-dayhead::first-letter { text-transform: uppercase; }
.ag-line { overflow-wrap: anywhere; }
.ag-week { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.ag-week .ag-line { font-size: 13px; margin: 0 0 6px; }

.ag-day { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px; min-width: 0; }
.ag-day.today { border-color: var(--cyan); }
.ag-dayhead { all: unset; cursor: pointer; display: block; font-weight: 600; margin-bottom: 6px; }
.ag-dayhead:hover, .ag-dayhead:focus-visible { color: var(--cyan); text-decoration: underline; }
.ag-month { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.ag-dow { text-align: center; font-size: 12px; color: var(--dim); text-transform: uppercase; letter-spacing: .06em; padding: 2px 0; }
.ag-cell { all: unset; box-sizing: border-box; cursor: pointer; display: flex; flex-direction: column; gap: 2px; min-height: 84px; padding: 6px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.ag-cell:hover, .ag-cell:focus-visible { border-color: var(--cyan); }
.ag-cell.today { border-color: var(--cyan); box-shadow: inset 0 0 0 1px var(--cyan); }
.ag-cell.other { opacity: .45; }
.ag-num { font-weight: 600; font-size: 13px; }
.ag-ev { font-size: 11.5px; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text); }
.ag-ev.work { color: var(--cyan); }
.ag-more { font-size: 11px; color: var(--dim); }
.ag-count { display: none; align-self: flex-start; min-width: 20px; padding: 0 6px; border-radius: 10px; background: var(--accent-soft, rgba(34, 211, 238, .16)); color: var(--cyan); font-size: 12px; text-align: center; }
@media (max-width: 720px) { .ag-cell { min-height: 56px; padding: 4px; } .ag-ev, .ag-more { display: none; } .ag-count { display: inline-block; } }
.agenda-cards.ag-day, .agenda-cards.ag-week, .agenda-cards.ag-month { display: block; }
.ag-week, .ag-month { width: 100%; }
.ag-ev, .ag-more { text-align: left; }

/* Agenda: tijdlijn (dag en week), in de stijl van Outlook: rustige blokken met een gekleurde rand links, één regel voor korte afspraken */
.tg-wrap { overflow-x: auto; }
.tg { --axis: 52px; min-width: calc(var(--axis) + var(--cols) * 128px); background: var(--panel); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.tg-head, .tg-allday, .tg-body { display: grid; grid-template-columns: var(--axis) repeat(var(--cols), minmax(0, 1fr)); }
.tg-head { border-bottom: 1px solid var(--line); background: var(--surface2); }
.tg-dayhead { all: unset; box-sizing: border-box; display: flex; align-items: baseline; justify-content: center; gap: 6px; padding: 8px 6px; text-align: center; cursor: pointer; border-left: 1px solid var(--line); color: var(--dim); font-size: 12.5px; }
.tg-dayhead:disabled { cursor: default; }
.tg-dayhead .tg-dow { text-transform: capitalize; }
.tg-dayhead .tg-dnum { display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 4px; border-radius: 13px; font-size: 16px; font-weight: 600; color: var(--text); }
.tg-dayhead .tg-mon { display: none; font-size: 11px; }
.tg-dayhead:not(:disabled):hover .tg-dnum, .tg-dayhead:focus-visible .tg-dnum { background: var(--surface); }
.tg-dayhead.today { color: var(--cyan); }
.tg-dayhead.today .tg-dnum { background: var(--cyan); color: #fff; }
@media (min-width: 900px) { .tg-dayhead .tg-mon { display: inline; } }
.tg-corner { font-size: 10.5px; color: var(--dim); padding: 6px 6px 6px 0; text-align: right; align-self: end; }
.tg-allday { border-bottom: 1px solid var(--line); }
.tg-adcol { display: flex; flex-direction: column; gap: 2px; padding: 3px; border-left: 1px solid var(--line); min-height: 8px; }
.tg-ad { --ev: #8b5cd6; font-size: 11.5px; line-height: 1.3; padding: 1px 6px; border-radius: 3px; border-left: 3px solid var(--ev); background: color-mix(in srgb, var(--ev) 15%, var(--panel)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tg-ad.work { --ev: #2b7fd1; }
.tg-ad.own { --ev: #1f9d6b; }
.tg-body { position: relative; }
.tg-axis { position: relative; }
.tg-hour { position: absolute; right: 8px; transform: translateY(-50%); font-size: 10.5px; color: var(--dim); }
.tg-hour:first-child { transform: none; }
.tg-col { position: relative; border-left: 1px solid var(--line);
  background-image: linear-gradient(to bottom, transparent calc(var(--h) * 1px - 1px), var(--line) calc(var(--h) * 1px - 1px)), linear-gradient(to bottom, transparent calc(var(--h) * .5px - 1px), color-mix(in srgb, var(--line) 45%, transparent) calc(var(--h) * .5px - 1px), color-mix(in srgb, var(--line) 45%, transparent) calc(var(--h) * .5px));
  background-size: 100% calc(var(--h) * 1px), 100% calc(var(--h) * 1px); }
.tg-col.today { background-color: color-mix(in srgb, var(--cyan) 5%, transparent); }
.tg-ev { all: unset; box-sizing: border-box; --ev: #8b5cd6; position: absolute; padding: 2px 5px 2px 6px; border-radius: 4px; border-left: 3px solid var(--ev); overflow: hidden; cursor: pointer; font-size: 11.5px; line-height: 1.25; color: var(--text);
  background: color-mix(in srgb, var(--ev) 16%, var(--panel)); box-shadow: 0 0 0 1px var(--panel); display: block; }
.tg-ev.work { --ev: #2b7fd1; }
.tg-ev.own { --ev: #1f9d6b; }
.tg-ev b { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tg-ev span { display: block; font-size: 10.5px; color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tg-ev .tg-where { font-style: normal; }
.tg-ev.short { display: flex; align-items: center; gap: 5px; padding-top: 0; padding-bottom: 0; }
.tg-ev.short b { display: block; flex: 0 1 auto; min-width: 0; }
.tg-ev.short span { display: block; flex: 0 100 auto; min-width: 0; }               /* smal: eerst de tijd inkorten, de titel blijft staan */
.tg-ev.dense { padding-left: 4px; padding-right: 2px; }
.tg-ev.dense span { display: none; }
.tg-ev:hover, .tg-ev:focus-visible { background: color-mix(in srgb, var(--ev) 26%, var(--panel)); outline: 0; z-index: 3; box-shadow: 0 2px 10px rgba(15, 23, 42, .25), 0 0 0 1px var(--ev); overflow: visible; }
.tg-ev:hover b, .tg-ev:focus-visible b { white-space: normal; }
.tg-now { position: absolute; left: 0; right: 0; height: 0; border-top: 2px solid #e5484d; z-index: 2; pointer-events: none; }
.tg-now::before { content: ""; position: absolute; left: -5px; top: -6px; width: 10px; height: 10px; border-radius: 50%; background: #e5484d; }
#ctl .tg-ev { display: block; justify-content: flex-start; align-items: stretch; border: 0; border-left: 3px solid var(--ev); border-radius: 4px; background: color-mix(in srgb, var(--ev) 16%, var(--panel)); box-shadow: 0 0 0 1px var(--panel); color: var(--text); height: auto; min-height: 0; }
#ctl .tg-ev.short { display: flex; align-items: center; gap: 5px; padding-top: 0; padding-bottom: 0; }
#ctl .tg-ev:hover, #ctl .tg-ev:focus-visible { background: color-mix(in srgb, var(--ev) 26%, var(--panel)); box-shadow: 0 2px 10px rgba(15, 23, 42, .25), 0 0 0 1px var(--ev); }
#ctl .tg-dayhead { border-radius: 0; }
.tg-ev, .tg-ad { text-align: left; }

/* Mail, in de stijl van Outlook: mailboxen links, berichtenlijst in het midden en het leesvenster rechts */
.mail { display: grid; grid-template-columns: minmax(280px, 400px) minmax(0, 1fr); gap: 0; align-items: start; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.mail-shell { grid-template-columns: 190px minmax(280px, 380px) minmax(0, 1fr); }
.mail-nav { align-self: stretch; padding: 10px 8px; border-right: 1px solid var(--line); background: var(--surface2); display: flex; flex-direction: column; gap: 2px; }
.mail-navh { padding: 10px 10px 4px; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--dim); font-weight: 600; }
.mail-navh:first-child { padding-top: 2px; }
.mail-navlist { display: flex; flex-direction: column; gap: 1px; }
#ctl .mail-navlist button { all: unset; box-sizing: border-box; display: block; width: 100%; padding: 7px 10px; border-radius: 4px; font-size: 13.5px; cursor: pointer; border-left: 3px solid transparent; color: var(--text); }
#ctl .mail-navlist button:hover { background: color-mix(in srgb, var(--text) 7%, transparent); }
#ctl .mail-navlist button.on, #ctl .mail-navlist button[aria-pressed="true"] { background: color-mix(in srgb, var(--cyan) 14%, transparent); border-left-color: var(--cyan); font-weight: 600; }
#ctl .mail-navlist button:focus-visible { outline: 2px solid var(--cyan); outline-offset: -2px; }
.mail-mid { min-width: 0; border-right: 1px solid var(--line); display: flex; flex-direction: column; align-self: stretch; max-height: calc(100dvh - 150px); }
.mail-searchrow { display: flex; gap: 6px; padding: 8px; border-bottom: 1px solid var(--line); }
.mail-searchrow input { flex: 1; min-width: 0; height: 32px; border-radius: 4px; }
#ctl .mail-searchrow .mail-sync { width: 32px; height: 32px; min-width: 32px; padding: 0; border-radius: 4px; }
.mail-list { min-width: 0; overflow-y: auto; padding: 0; background: transparent; border: 0; border-radius: 0; flex: 1; }
.mail-read { min-width: 0; padding: 18px 22px; position: sticky; top: 8px; max-height: calc(100dvh - 150px); overflow-y: auto; background: transparent; border: 0; border-radius: 0; }
.mail-day { font-size: 12px; font-weight: 600; color: var(--cyan); padding: 12px 12px 4px; }
.mail-day:first-child { padding-top: 8px; }
.mail-row { all: unset; box-sizing: border-box; width: 100%; display: flex; align-items: center; gap: 10px; padding: 9px 12px 9px 14px; border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent); border-radius: 0; cursor: pointer; position: relative; }
.mail-row:hover, .mail-row:focus-visible { background: color-mix(in srgb, var(--text) 5%, transparent); }
.mail-row.on { background: color-mix(in srgb, var(--cyan) 14%, transparent); }
.mail-row.on::before, .mail-row.unread::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--cyan); }
.mail-row:focus-visible { outline: 2px solid var(--cyan); outline-offset: -2px; }
.mail-av { flex: none; width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 12.5px; font-weight: 600; color: #fff; }
.mail-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.mail-from, .mail-subj { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-from { font-size: 13.5px; }
.mail-subj { font-size: 12.5px; color: var(--dim); }
.mail-row.unread .mail-from { font-weight: 700; }
.mail-row.unread .mail-subj { color: var(--cyan); font-weight: 600; }
.mail-time { flex: none; align-self: flex-start; padding-top: 2px; font-size: 11.5px; color: var(--dim); }
.mail-dot { display: none; }
.mail-head { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.mail-av { box-shadow: none; }
.mail-head .mail-av { width: 40px; height: 40px; font-size: 14px; }
.mail-who { display: flex; flex-direction: column; min-width: 0; }
.mail-subject { margin: 0 0 14px; font-size: 20px; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
.mail-bodytext { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; font-size: 14px; line-height: 1.55; margin: 0 0 12px; }
.mail-note { margin-top: 8px; }
#ctl .mail .mail-back { display: none; margin-bottom: 8px; }
@media (max-width: 1100px) {
  .mail-shell { grid-template-columns: minmax(260px, 360px) minmax(0, 1fr); }
  .mail-nav { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 14px; padding: 6px 8px; border-right: 0; border-bottom: 1px solid var(--line); }
  .mail-navh { display: none; }
  .mail-navlist { flex-direction: row; gap: 4px; }
  #ctl .mail-navlist button { width: auto; border-left: 0; border-bottom: 2px solid transparent; border-radius: 4px 4px 0 0; padding: 6px 12px; }
  #ctl .mail-navlist button.on, #ctl .mail-navlist button[aria-pressed="true"] { border-bottom-color: var(--cyan); }
}
@media (max-width: 860px) {
  .mail, .mail-shell { grid-template-columns: 1fr; }
  .mail-mid { border-right: 0; max-height: none; }
  .mail-read { position: static; max-height: none; display: none; }
  .mail.reading .mail-mid, .mail.reading .mail-nav { display: none; }
  .mail.reading .mail-read { display: block; }
  #ctl .mail .mail-back { display: inline-block; }
  .mail-empty { display: none; }
}
.doc-pick { flex: none; width: 18px; height: 18px; margin-top: 3px; cursor: pointer; }
.doc-row { flex-wrap: nowrap; align-items: flex-start; }
.doc-row .doc-main { flex: 1 1 200px; }
.doc-row .doc-acts { flex: 0 1 auto; }
@media (max-width: 720px) { .doc-row { flex-wrap: wrap; } .doc-row .doc-acts { flex-basis: 100%; padding-left: 28px; } }
.doc-selbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; padding: 8px 10px; border: 1px solid var(--cyan); border-radius: 10px; background: var(--accent-soft, rgba(34, 211, 238, .1)); }
.doc-selbar[hidden] { display: none; }
.doc-seltxt { font-weight: 600; margin-right: 4px; }
.doc-selbar input[type="text"] { flex: 1 1 160px; min-width: 0; }
.ag-ev.own { color: #34d399; }
.sec.stale { opacity: .72; transition: opacity .2s; }
@media (prefers-reduced-motion: reduce) { .sec.stale { transition: none; } }

/* Afvalkalender, Buienradar en Pakketten (Vandaag) */
.waste-line { display: flex; align-items: center; gap: 8px; }
.waste-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; }
.rain-text { margin: 0 0 8px; font-size: 15px; }
.rain-text.wet { font-weight: 600; color: var(--cyan); }
.rain-bars { display: flex; align-items: flex-end; gap: 2px; height: 56px; }
.rain-bars i { flex: 1; min-width: 0; border-radius: 3px 3px 1px 1px; background: color-mix(in srgb, var(--dim) 35%, transparent); }
.rain-bars i.wet { background: var(--blue); }
.rain-bars i.hard { background: var(--violet); }
.rain-axis { display: flex; justify-content: space-between; font-size: 11px; color: var(--dim); margin-top: 4px; }
.parcel-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.parcel-line .ctl-desc { flex-basis: 100%; overflow-wrap: anywhere; }
.pill.parcel-pickup { background: rgba(245, 158, 11, .2); color: #f59e0b; }
.pill.parcel-transit { background: rgba(34, 211, 238, .16); color: var(--cyan); }
.pill.parcel-delivered { background: rgba(52, 211, 153, .18); color: #34d399; }
.pill.parcel-ordered { background: rgba(148, 163, 184, .2); color: var(--dim); }

/* Schermen Afval, Buienradar en Pakketten */
.waste-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.waste-row:first-of-type { border-top: 0; }
.waste-dot.big { width: 16px; height: 16px; flex: none; border-radius: 50%; }
.waste-txt { flex: 1; font-weight: 600; }
.rain-text.big { font-size: 22px; margin-bottom: 14px; line-height: 1.3; }
.rain-bars.big { height: 140px; gap: 3px; }
.rain-axis.ticks span { flex: 1; text-align: left; }
.rain-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 12px; font-size: 12.5px; color: var(--dim); }
.rain-legend .lg { display: inline-flex; align-items: center; gap: 6px; }
.rain-legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; background: color-mix(in srgb, var(--dim) 35%, transparent); }
.rain-legend i.wet { background: var(--blue); } .rain-legend i.hard { background: var(--violet); }
.parcel-row { padding: 12px 0; border-top: 1px solid var(--line); }
.parcel-row:first-of-type { border-top: 0; }
.parcel-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.parcel-subj { margin-top: 4px; overflow-wrap: anywhere; }
#waste-body, #rain-body, #parcels-body { display: grid; gap: 14px; }

/* Kiosk-weergave: schermvullend dagbord */
body.kiosk-on { overflow: hidden; }
.kiosk { position: fixed; inset: 0; z-index: 80; display: grid; grid-template-rows: auto 1fr; gap: clamp(14px, 2.4vw, 32px); padding: clamp(18px, 3vw, 44px); background: var(--bg); color: var(--text); overflow: hidden; cursor: none; }
.kiosk.controls { cursor: default; }
.kiosk[hidden] { display: none; }
.k-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.k-clock { font-size: clamp(72px, 15vw, 220px); font-weight: 700; letter-spacing: -.05em; line-height: .9; font-variant-numeric: tabular-nums; }
.k-date { font-size: clamp(20px, 3vw, 40px); color: var(--dim); margin-top: 8px; }
.k-date::first-letter { text-transform: uppercase; }
.k-right { display: grid; gap: 10px; justify-items: end; text-align: right; min-width: 0; max-width: 46vw; }
.k-temp { font-size: clamp(48px, 8vw, 110px); font-weight: 650; letter-spacing: -.04em; line-height: 1; }
.k-desc { font-size: clamp(16px, 2.2vw, 30px); color: var(--dim); }
.k-raintext { font-size: clamp(16px, 2.2vw, 30px); }
.k-raintext.wet { color: var(--cyan); font-weight: 600; }
.k-bars { display: flex; align-items: flex-end; gap: 3px; height: clamp(34px, 5vw, 70px); width: min(46vw, 560px); }
.k-bars i { flex: 1; border-radius: 3px 3px 1px 1px; background: color-mix(in srgb, var(--dim) 35%, transparent); }
.k-bars i.wet { background: var(--blue); } .k-bars i.hard { background: var(--violet); }
.k-grid { display: grid; grid-template-columns: repeat(var(--k-cols, 3), minmax(0, 1fr)); gap: clamp(12px, 2vw, 28px); min-height: 0; }
.k-card { min-height: 0; overflow: hidden; padding: clamp(16px, 2vw, 30px); border-radius: 28px; background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow); }
.k-h { margin: 0 0 12px; font-size: clamp(12px, 1.2vw, 16px); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); font-weight: 600; }
.k-sub { margin: 14px 0 6px; font-size: clamp(14px, 1.6vw, 22px); color: var(--cyan); font-weight: 600; }
.k-sub:first-child { margin-top: 0; }
.k-line { display: flex; align-items: baseline; gap: 12px; margin: 0 0 8px; font-size: clamp(17px, 2.3vw, 32px); line-height: 1.25; overflow-wrap: anywhere; }
.k-line.strong { font-weight: 700; }
.k-dot { flex: none; width: .55em; height: .55em; border-radius: 50%; transform: translateY(-.05em); }
.k-note { margin: 0; color: var(--dim); font-size: clamp(15px, 1.8vw, 24px); }
.k-close { position: absolute; top: 14px; right: 14px; width: 48px; height: 48px; border-radius: 50%; font-size: 20px; opacity: 0; transition: opacity .3s; z-index: 2; }
.kiosk.controls .k-close { opacity: .9; }
.kiosk.night .k-card, .kiosk.night .k-right { opacity: .28; filter: saturate(.5); }
.kiosk.night { background: #000; }
.kiosk.night .k-clock, .kiosk.night .k-date { color: #9aa3b2; }
@media (max-aspect-ratio: 4/5) { .k-grid { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-rows: min-content; align-content: start; overflow-y: auto; } .k-right { justify-items: start; text-align: left; max-width: 100%; } .k-bars { width: 100%; } }
@media (max-width: 900px) and (min-aspect-ratio: 4/5) { .k-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.k-card { position: relative; }
.k-card::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 38px; border-radius: 0 0 28px 28px; background: linear-gradient(to bottom, transparent, var(--panel)); pointer-events: none; }
@media (max-aspect-ratio: 4/5) { .k-card::after { display: none; } }
.waste-form { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.waste-form input { flex: 1 1 160px; min-width: 0; }

.kiosk[data-size="large"] { --ks: 1.18; } .kiosk[data-size="xlarge"] { --ks: 1.4; }
.kiosk .k-line { font-size: calc(clamp(17px, 2.3vw, 32px) * var(--ks, 1)); }
.kiosk .k-note { font-size: calc(clamp(15px, 1.8vw, 24px) * var(--ks, 1)); }
.kiosk .k-sub { font-size: calc(clamp(14px, 1.6vw, 22px) * var(--ks, 1)); }
.kiosk .k-raintext, .kiosk .k-desc { font-size: calc(clamp(16px, 2.2vw, 30px) * var(--ks, 1)); }
.k-top > .k-right > [hidden], .k-grid[hidden] { display: none; }

/* Nieuws, Kleuren en thema en Kiosk-instellingen (schermen) */
#news-body, #theme-body, #kiosk-body { display: grid; gap: 14px; }
.news-row { display: flex; flex-direction: column; gap: 2px; padding: 10px 0; border-top: 1px solid var(--line); }
.news-row:first-of-type { border-top: 0; }
.news-title { font-weight: 600; color: var(--text); text-decoration: none; overflow-wrap: anywhere; }
a.news-title:hover, a.news-title:focus-visible { color: var(--cyan); text-decoration: underline; }
.kc-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; padding: 9px 0; border-top: 1px solid var(--line); }
.kc-row:first-of-type { border-top: 0; }
.kc-row input[type="checkbox"] { width: 22px; height: 22px; }
.kc-row input[type="number"], .kc-row input[type="time"] { width: 120px; }
.kc-row small { flex-basis: 100%; }

/* Kiosk: Huis */
.k-temps { margin: 0 0 12px; color: var(--dim); font-size: calc(clamp(15px, 1.8vw, 24px) * var(--ks, 1)); }
.k-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(clamp(120px, 14vw, 190px), 1fr)); gap: 10px; }
.k-tile { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 18px; background: var(--surface2); border: 1px solid var(--line); min-width: 0; }
.k-tile.on { background: var(--accent-soft); border-color: var(--cyan); }
.k-tn { font-weight: 600; font-size: calc(clamp(14px, 1.6vw, 22px) * var(--ks, 1)); overflow-wrap: anywhere; }
.k-tile small { color: var(--dim); font-size: calc(clamp(12px, 1.3vw, 17px) * var(--ks, 1)); }
.k-tbtn { cursor: pointer; padding: 10px 12px; border-radius: 12px; font-size: calc(clamp(14px, 1.5vw, 20px) * var(--ks, 1)); min-height: 44px; }
.k-tile.on .k-tbtn { background: var(--accent-grad); color: var(--accent-ink); border-color: transparent; font-weight: 650; }
.k-trow { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.k-trow b { font-size: calc(clamp(20px, 2.4vw, 34px) * var(--ks, 1)); }
.k-step { width: 48px; height: 48px; border-radius: 50%; font-size: 24px; cursor: pointer; }
.k-toast { position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(20px); max-width: 80vw; padding: 12px 20px; border-radius: 999px; background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow); opacity: 0; transition: opacity .25s, transform .25s; z-index: 3; pointer-events: none; }
.k-toast.on { opacity: 1; transform: translateX(-50%); }
.kiosk { cursor: auto; }
.kc-house { margin-top: 8px; }
.kc-grouphead { display: flex; align-items: center; gap: 8px; padding: 12px 0 4px; border-top: 1px solid var(--line); }
.kc-spacer { flex: 1; }
.k-card .k-body { max-height: 100%; }
.k-card:has(.k-tiles) { overflow-y: auto; }
.k-card:has(.k-tiles)::after { display: none; }
.ms-order { all: unset; box-sizing: border-box; display: block; width: 100%; margin-top: 14px; padding: 12px; text-align: center; cursor: pointer; color: var(--dim); font-size: 14px; border-top: 1px solid var(--line); }
.ms-order:active, .ms-order:hover { color: var(--text); }
#moresheet .ms-panel { max-height: 100%; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }

/* Inloggen met een naam of een uitnodigingscode; wie er is ingelogd */
#login-form .login-link { all: unset; display: block; margin: 8px auto 0; cursor: pointer; font-size: 13px; color: var(--dim); text-align: center; }
#login-form .login-link:hover, #login-form .login-link:focus-visible { color: var(--text); text-decoration: underline; }
.side-user { display: flex; align-items: center; justify-content: flex-start; gap: 12px; margin: 4px 4px 10px; padding: 8px 10px; border-radius: 14px; background: color-mix(in srgb, var(--cyan) 9%, var(--surface2)); border: 1px solid color-mix(in srgb, var(--cyan) 20%, var(--line)); min-width: 0; }
.side-user[hidden] { display: none; }
.side-user .su-av { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, var(--cyan), var(--violet, #8b5cf6)); color: #fff; font-weight: 700; font-size: 14px; }
.side-user .su-tx { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 0; margin-right: 42px; line-height: 1.2; }   /* de initiaal links, de tekst in het midden van de kaart */
.side-user small { font-size: 10.5px; color: var(--dim); letter-spacing: .04em; }
.side-user b { font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-denied] { display: none !important; }

/* Accounts (Systeem) */
.acct-form { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.acct-form input { flex: 1 1 150px; min-width: 0; }
.acct-list { display: grid; gap: 10px; margin-top: 8px; }
.acct-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface2); }
.acct-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; min-width: 0; }
.acct-pills { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: baseline; }
.acct-acts { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pill.acct-on { background: rgba(52, 211, 153, .18); color: #34d399; }
.pill.acct-wait { background: rgba(245, 158, 11, .2); color: #f59e0b; }
.pill.acct-off { background: rgba(148, 163, 184, .2); color: var(--dim); }
.acct-code { margin: 10px 0; padding: 14px; border: 1px solid var(--cyan); border-radius: 16px; background: var(--accent-soft); }
.acct-codetxt { display: block; font-size: 26px; letter-spacing: .12em; font-weight: 700; margin: 8px 0; user-select: all; }

/* Accounts: wel/niet per recht, en het kioskaccount ziet alleen de kiosk */
.acct-rights { flex: 1 1 100%; }
.acct-rights summary { cursor: pointer; font-weight: 600; }
.acct-grp { margin: 12px 0 4px; }
.acct-gt { margin: 0 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--dim); font-weight: 600; }
.acct-sw { display: flex; align-items: center; gap: 12px; min-height: 40px; padding: 4px 0; cursor: pointer; }
.acct-sw input { appearance: none; -webkit-appearance: none; flex: none; width: 42px; height: 24px; margin: 0; border-radius: 999px; background: var(--line); position: relative; cursor: pointer; transition: background .2s; }
.acct-sw input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .2s; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); }
.acct-sw input:checked { background: var(--cyan); }
.acct-sw input:checked::after { transform: translateX(18px); }
.acct-sw input:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
body.role-kiosk #app { visibility: hidden; }

/* Eufy-camera's */
.eufy-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin: 10px 0; }
.eufy-img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 12px; background: var(--surface2); }
.eufy-ph { display: grid; place-items: center; aspect-ratio: 16 / 9; padding: 12px; text-align: center; border-radius: 12px; background: var(--surface2); color: var(--dim); font-size: 13px; }
.eufy-captcha { display: block; max-width: 100%; margin: 8px 0; border-radius: 8px; background: #fff; }

/* Eufy: schermvullend beeld (de Fullscreen-API waar die bestaat, anders dit kader) */
.eufy-cam.eufy-big { position: fixed; inset: 0; z-index: 90; margin: 0; border-radius: 0; background: #000 !important; background-image: none !important; box-shadow: none !important; backdrop-filter: none !important; color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 16px; overflow: auto; }
.eufy-cam.eufy-big .eufy-img, .eufy-cam.eufy-big .eufy-ph { width: min(100%, calc((100vh - 150px) * 16 / 9)); max-height: calc(100vh - 150px); object-fit: contain; }
.eufy-cam.eufy-big .ctl-h, .eufy-cam.eufy-big .ctl-desc, .eufy-cam.eufy-big .today-line { color: #fff; }
.eufy-cam.eufy-big button { color: #fff; border-color: rgba(255, 255, 255, .4); }
body.eufy-zoom { overflow: hidden; }

/* Wijzigen na invoer */
.ctl-edit { display: grid; gap: 8px; width: 100%; }
.ctl-edit-fields { display: flex; flex-wrap: wrap; gap: 8px; }
.ctl-edit-fields input[type=text] { flex: 1 1 200px; min-width: 0; }

/* Zwevende gespreksknop: een glazen pil met de avatar en "Vraag VR46"; op een telefoon alleen de avatar */
.fab { position: fixed; right: 20px; bottom: 20px; z-index: 40; display: inline-flex; align-items: center; gap: 10px; height: 54px; padding: 7px 20px 7px 7px; border-radius: 999px; cursor: pointer; font: inherit; font-size: 14px; font-weight: 600; color: var(--text);
  border: 1px solid color-mix(in srgb, var(--cyan) 30%, var(--line)); background: color-mix(in srgb, var(--panel) 80%, transparent); -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5);
  box-shadow: 0 14px 36px -12px color-mix(in srgb, var(--cyan) 50%, rgba(15, 23, 42, .5)), 0 2px 8px rgba(15, 23, 42, .16); transition: transform .2s ease, box-shadow .2s ease; }
.fab:hover { transform: translateY(-2px); box-shadow: 0 18px 40px -12px color-mix(in srgb, var(--cyan) 60%, rgba(15, 23, 42, .5)), 0 2px 8px rgba(15, 23, 42, .2); }
.fab:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.fab[hidden] { display: none; }
.fab-av { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: color-mix(in srgb, var(--cyan) 16%, var(--surface2)); }
.fab .fa { width: 28px; height: 28px; overflow: visible; }
.fab-label { white-space: nowrap; letter-spacing: .01em; }
@media (max-width: 760px) { .fab { right: 16px; bottom: calc(var(--tab-h) + 14px + env(safe-area-inset-bottom)); padding: 7px; } .fab-label { display: none; } }
.fa .fa-main { fill: var(--cyan); }
.fa .fa-ring { stroke: var(--cyan); }
.fa .fa-eye, .fa .fa-mark { fill: #fff; stroke: #fff; }
.fa .fa-mark { fill: none; }
.fa .fa-mouth { fill: #fff; stroke: #fff; }
.fa .fa-smile { fill: none; }
.fa .fa-line { stroke: var(--cyan); }
.fa-robot .fa-main, .fa-gezicht .fa-main, .fa-initiaal .fa-main { fill: var(--cyan); }
.fa { transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {
  .fa-vonk .fa-main, .fa-orb .fa-main, .fa-ring .fa-core { transform-box: fill-box; transform-origin: center; animation: fa-breathe 4s ease-in-out infinite; }
  .fa-ring .fa-r3 { transform-box: fill-box; transform-origin: center; animation: fa-breathe 4s ease-in-out infinite .6s; }
  .fa-robot .fa-eye, .fa-gezicht .fa-eye { transform-box: fill-box; transform-origin: center; animation: fa-blink 5s infinite; }
  :is(.fab, .cd)[data-state="thinking"] .fa-vonk .fa-main { animation: fa-spin 1.6s linear infinite; }
  :is(.fab, .cd)[data-state="thinking"] .fa-orb .fa-main, :is(.fab, .cd)[data-state="thinking"] .fa-ring .fa-core { animation-duration: 1s; }
  :is(.fab, .cd)[data-state="thinking"] .fa-ring .fa-r2 { transform-box: fill-box; transform-origin: center; animation: fa-spin 2s linear infinite; stroke-dasharray: 8 6; }
  .fab[data-state="listening"] { animation: fa-ripple 1.4s ease-out infinite; }
  :is(.fab, .cd)[data-state="speaking"] .fa { transform: scale(calc(1 + var(--level, 0) * .16)); transition: transform .08s linear; }
  :is(.fab, .cd)[data-state="speaking"] .fa-smile { transform-box: fill-box; transform-origin: center; animation: fa-talk .35s ease-in-out infinite alternate; }
}
.fab[data-state="listening"] { box-shadow: 0 0 0 4px color-mix(in srgb, var(--danger, #ef4444) 40%, transparent), 0 10px 28px rgba(15, 23, 42, .22); }
.fab[data-state="offline"] { opacity: .5; filter: grayscale(1); }
@keyframes fa-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }
@keyframes fa-blink { 0%, 94%, 100% { transform: scaleY(1); } 97% { transform: scaleY(.1); } }
@keyframes fa-spin { to { transform: rotate(360deg); } }
@keyframes fa-talk { from { transform: scaleY(.6); } to { transform: scaleY(1.5); } }
@keyframes fa-ripple { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--danger, #ef4444) 50%, transparent), 0 10px 28px rgba(15, 23, 42, .22); } 100% { box-shadow: 0 0 0 16px transparent, 0 10px 28px rgba(15, 23, 42, .22); } }
.fab-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 10px; margin: 10px 0; }
#ctl .fab-grid .fab-opt { display: grid; justify-items: center; align-content: center; gap: 6px; height: auto; min-height: 88px; padding: 12px 8px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface2); cursor: pointer; font-size: 12.5px; box-shadow: none; }
#ctl .fab-grid .fab-opt .fa { width: 44px; height: 44px; }
#ctl .fab-grid .fab-opt[aria-pressed="true"] { border-color: var(--cyan); box-shadow: 0 0 0 2px var(--accent-soft); }

/* Het gespreksvenster rechts: een rustig, modern paneel (kop, begroeting, berichten zonder kader voor VR46, ronde invoer) met vier thema's.
   Elk thema zet alleen kleuren (--cd-*) en een paar lokale variabelen; de opbouw is voor alle thema's gelijk. */
@property --cd-ang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.cd, .fab, .cd-prev {
  --cd-bg: color-mix(in srgb, var(--panel) 78%, transparent); --cd-blur: 26px; --cd-ring: 1; --cd-radius: 24px; --cd-text: var(--text);
  --cd-a: var(--cyan); --cd-b: var(--violet, #8b5cf6); --cd-user: linear-gradient(135deg, var(--cd-a), var(--cd-b)); --cd-user-fg: var(--accent-ink, #fff);
  --cd-bot-bg: transparent; --cd-bot-line: transparent; --cd-comp: color-mix(in srgb, var(--panel) 80%, transparent); --cd-comp-line: color-mix(in srgb, var(--cd-a) 30%, var(--line));
  --cd-chip: color-mix(in srgb, var(--panel) 70%, transparent); --cd-glow: color-mix(in srgb, var(--cd-a) 38%, rgba(15, 23, 42, .6)); --cd-aura: 1;
}
[data-cdtheme="minimaal"] { --cd-bg: var(--panel); --cd-blur: 0px; --cd-ring: 0; --cd-radius: 16px; --cd-user: var(--text); --cd-user-fg: var(--panel); --cd-comp: var(--surface2); --cd-comp-line: var(--line); --cd-chip: var(--surface2); --cd-glow: rgba(15, 23, 42, .35); --cd-aura: 0; }
[data-cdtheme="neon"] { --text: #d9f7ff; --dim: #7ea6b8; --panel: #0a1120; --surface2: #101a2e; --line: rgba(0, 229, 255, .24); --cyan: #00e5ff; --accent-ink: #04121c; --cd-bg: #070c18; --cd-blur: 0px; --cd-radius: 18px; --cd-text: #d9f7ff;
  --cd-a: #00e5ff; --cd-b: #ff2bd6; --cd-user-fg: #04121c; --cd-bot-bg: rgba(0, 229, 255, .06); --cd-bot-line: rgba(0, 229, 255, .3); --cd-comp: #0d1626; --cd-comp-line: rgba(0, 229, 255, .35); --cd-chip: #0d1626; --cd-glow: rgba(0, 229, 255, .45); }
[data-cdtheme="zacht"] { --text: #3b3150; --dim: #8b7fa3; --panel: #fffaf6; --surface2: #f6eefc; --line: #eadbf3; --cyan: #ff8a65; --accent-ink: #fff; --cd-bg: linear-gradient(165deg, #fff4ea, #f4ecff 70%); --cd-blur: 0px; --cd-radius: 30px; --cd-text: #3b3150;
  --cd-a: #ff8a65; --cd-b: #8f7bff; --cd-bot-bg: rgba(255, 255, 255, .8); --cd-bot-line: #eadbf3; --cd-comp: #fff; --cd-comp-line: #eadbf3; --cd-chip: #fff; --cd-glow: rgba(143, 123, 255, .35); --cd-aura: 0; }

.cd { position: fixed; top: 12px; right: 12px; bottom: 12px; width: min(420px, calc(100vw - 24px)); z-index: 55; display: flex; flex-direction: column; overflow: hidden; color: var(--cd-text); border-radius: var(--cd-radius);
  background: radial-gradient(120% 50% at 100% 0%, color-mix(in srgb, var(--cd-a) calc(var(--cd-aura) * 22%), transparent), transparent 62%), radial-gradient(90% 46% at 0% 100%, color-mix(in srgb, var(--cd-b) calc(var(--cd-aura) * 18%), transparent), transparent 62%), var(--cd-bg);
  -webkit-backdrop-filter: blur(var(--cd-blur)) saturate(1.6); backdrop-filter: blur(var(--cd-blur)) saturate(1.6); border: 1px solid var(--line);
  box-shadow: 0 40px 100px -26px var(--cd-glow), 0 6px 20px rgba(15, 23, 42, .16); animation: cd-in .36s cubic-bezier(.16, .9, .2, 1) both; }
.cd[hidden] { display: none; }
.cd::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1.5px; pointer-events: none; z-index: 2; opacity: var(--cd-ring);
  background: conic-gradient(from var(--cd-ang), var(--cd-a), var(--cd-b), transparent 40%, var(--cd-a) 65%, var(--cd-a));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
[data-cdtheme="neon"].cd { background-image: linear-gradient(rgba(0, 229, 255, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 229, 255, .045) 1px, transparent 1px), radial-gradient(100% 40% at 100% 0%, rgba(0, 229, 255, .16), transparent 70%); background-size: 26px 26px, 26px 26px, auto; }
[data-cdtheme="neon"].cd::before { opacity: 1; }
.cd-head { position: relative; display: flex; align-items: center; gap: 12px; padding: 16px 12px 8px 18px; }
.cd-av { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 50%; background: color-mix(in srgb, var(--cd-a) 16%, var(--surface2)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--cd-a) 35%, transparent), 0 0 20px -4px color-mix(in srgb, var(--cd-a) 55%, transparent); }
.cd-av .fa { width: 26px; height: 26px; overflow: visible; }
.cd-title { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.cd-title strong { font-size: 15px; font-weight: 700; }
.cd-title small { font-size: 12px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cd-btns { display: flex; gap: 2px; }
.cd .cd-btn { all: unset; box-sizing: border-box; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 12px; cursor: pointer; color: var(--dim); }
.cd .cd-btn:hover, .cd .cd-btn:focus-visible { background: color-mix(in srgb, var(--cd-text) 9%, transparent); color: var(--cd-text); }
.cd .cd-btn:focus-visible { outline: 2px solid var(--cd-a); }
.cd-head::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 34%; background: linear-gradient(90deg, transparent, var(--cd-a), transparent); opacity: 0; }
.cd-body { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 0 14px 14px; }
.cd-hello { display: none; margin: auto 0; padding: 16px 6px; }
.cd-body:has(.log:empty) .cd-hello { display: block; }
.cd-hi { margin: 0 0 4px; font-size: 30px; line-height: 1.1; font-weight: 700; letter-spacing: -.02em; background: linear-gradient(120deg, var(--cd-a), var(--cd-b)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cd-hello p { margin: 0; font-size: 17px; color: var(--dim); }
.cd-body .log { flex: 1; min-height: 0; max-height: none; width: auto; margin: 0; overflow-y: auto; padding: 8px 2px; gap: 12px; scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--cd-a) 40%, transparent) transparent; }
.cd-body .log:empty { flex: 0 0 0; padding: 0; min-height: 0; }
.cd-body .log:empty::before { content: none; }
.cd .msg { box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; color: inherit; font-size: 14.5px; line-height: 1.55; }
.cd .msg.bot { max-width: 100%; align-self: stretch; padding: 4px 2px; border: 1px solid var(--cd-bot-line); background: var(--cd-bot-bg); border-radius: 14px; }
[data-cdtheme="neon"] .msg.bot, [data-cdtheme="zacht"] .msg.bot { padding: 9px 13px; }
.cd .msg.user { max-width: 86%; background: var(--cd-user); color: var(--cd-user-fg); border: 0; border-radius: 20px 20px 6px 20px; padding: 9px 14px; box-shadow: 0 10px 24px -14px var(--cd-glow); }
.cd .msg.error, .cd .msg.info { background: transparent; }
.cd-body .dock { width: auto; margin: 0; padding-top: 8px; display: grid; gap: 10px; }
.cd-body .chips { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.cd-body .chips button { flex: none; font-size: 12.5px; padding: 7px 13px; border-radius: 999px; background: var(--cd-chip); color: var(--cd-text); border: 1px solid var(--cd-comp-line); }
.cd-body .chips button:hover { border-color: var(--cd-a); box-shadow: 0 0 16px -5px var(--cd-glow); }
.cd-body:has(.log:empty) .chips { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; overflow: visible; }
.cd-body:has(.log:empty) .chips button { white-space: normal; text-align: left; border-radius: 16px; padding: 12px 14px; font-size: 13.5px; line-height: 1.3; min-height: 64px; }
.cd .composer { background: var(--cd-comp); border: 1px solid var(--cd-comp-line); border-radius: 26px; padding: 6px 6px 6px 10px; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: none; }
.cd .composer:focus-within { border-color: var(--cd-a); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cd-a) 20%, transparent), 0 0 28px -8px var(--cd-glow); }
.cd .composer input[type=text] { color: var(--cd-text); }
.cd .composer #btn-send { font-size: 0; width: 38px; height: 38px; min-width: 38px; padding: 0; border-radius: 50%; border: 0; background: var(--cd-user); color: var(--cd-user-fg); display: grid; place-items: center; }
.cd .composer #btn-send::before { content: "↑"; font-size: 19px; font-weight: 700; line-height: 1; }
.cd .composer .mic { width: 38px; height: 38px; background: color-mix(in srgb, var(--cd-a) 14%, transparent); color: var(--cd-a); border: 0; }

.fab[data-cdtheme="minimaal"] { background: var(--panel); -webkit-backdrop-filter: none; backdrop-filter: none; border-color: var(--line); box-shadow: 0 8px 24px -10px rgba(15, 23, 42, .4); }
.fab[data-cdtheme="neon"] { background: #070c18; color: #d9f7ff; border-color: rgba(0, 229, 255, .55); box-shadow: 0 0 24px -4px rgba(0, 229, 255, .55), inset 0 0 14px rgba(0, 229, 255, .1); -webkit-backdrop-filter: none; backdrop-filter: none; }
.fab[data-cdtheme="neon"] .fab-av { background: #0d1626; }
.fab[data-cdtheme="zacht"] { background: linear-gradient(165deg, #fff4ea, #f4ecff); color: #3b3150; border-color: #eadbf3; box-shadow: 0 14px 30px -14px rgba(143, 123, 255, .6); -webkit-backdrop-filter: none; backdrop-filter: none; }
.fab[data-cdtheme="zacht"] .fab-av { background: #fff; }
.fab-av { box-shadow: 0 0 0 1px color-mix(in srgb, var(--cd-a) 35%, transparent), 0 0 18px -3px color-mix(in srgb, var(--cd-a) 55%, transparent); }
.fab .fa-main, .cd .fa-main { fill: var(--cd-a); }

/* keuze in Kleuren en thema: kleine voorbeelden van het paneel */
.cd-looks { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 10px; margin: 10px 0; }
#ctl .cd-looks .cd-look { display: grid; gap: 8px; justify-items: center; height: auto; padding: 10px 8px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface2); box-shadow: none; cursor: pointer; font-size: 12.5px; color: var(--text); }
#ctl .cd-looks .cd-look[aria-pressed="true"] { border-color: var(--cyan); box-shadow: 0 0 0 2px var(--accent-soft); }
.cd-prev { position: relative; display: block; width: 88px; height: 108px; border-radius: 12px; overflow: hidden; background: radial-gradient(90% 50% at 100% 0%, color-mix(in srgb, var(--cd-a) calc(var(--cd-aura) * 30%), transparent), transparent 70%), var(--cd-bg); border: 1px solid var(--line); }
.cd-prev i { position: absolute; display: block; border-radius: 6px; }
.cd-prev .pv-head { left: 8px; top: 8px; width: 40%; height: 7px; background: var(--cd-a); opacity: .85; }
.cd-prev .pv-bot { left: 8px; top: 26px; width: 66%; height: 9px; background: var(--cd-bot-bg); border: 1px solid var(--cd-bot-line); box-shadow: 0 10px 0 -1px color-mix(in srgb, var(--cd-text) 18%, transparent); border-radius: 5px; }
.cd-prev .pv-user { right: 8px; top: 50px; width: 52%; height: 12px; background: var(--cd-user); border-radius: 8px 8px 2px 8px; }
.cd-prev .pv-bar { left: 8px; right: 8px; bottom: 8px; height: 13px; background: var(--cd-comp); border: 1px solid var(--cd-comp-line); border-radius: 8px; }
@media (max-width: 760px) { .cd { inset: 0; width: 100vw; border-radius: 0; border: 0; padding-top: env(safe-area-inset-top); } .cd::before { display: none; } .cd-body { padding-bottom: calc(14px + env(safe-area-inset-bottom)); } }
@keyframes cd-in { from { opacity: 0; transform: translateX(36px) scale(.97); filter: blur(8px); } }
@keyframes cd-spin { to { --cd-ang: 360deg; } }
@keyframes cd-scan { 0% { left: -34%; } 100% { left: 100%; } }
@media (prefers-reduced-motion: no-preference) {
  .cd::before { animation: cd-spin 9s linear infinite; }
  .cd[data-state="thinking"] .cd-head::after, .cd[data-state="speaking"] .cd-head::after { opacity: 1; animation: cd-scan 1.4s ease-in-out infinite; }
  .cd-av, .fab-av { animation: fa-breathe 5.5s ease-in-out infinite; }
}
@media (prefers-reduced-motion: reduce) { .cd { animation: none; } }

/* Samenvatting: de dag in één zin */
.sum-label { margin: 0 0 4px; text-transform: uppercase; letter-spacing: .08em; font-size: 11px; }
.sum-one { font-size: clamp(22px, 3.2vw, 30px); line-height: 1.2; letter-spacing: -.01em; }
.sum-more { margin-top: 10px; }
.sum-more summary { cursor: pointer; color: var(--dim); font-size: 13px; }
.sum-more .sum-t { margin-top: 8px; }

.parcel-win { color: var(--cyan); }
.parcel-win-line { font-weight: 600; margin-top: 2px; }
.energy-advice.good { color: #16a34a; }
.energy-advice.wait { color: #d97706; }
#ctl-quiet.on { background: color-mix(in srgb, var(--cyan) 22%, transparent); color: var(--cyan); border-color: var(--cyan); }

/* Gezinsbord, foto van de dag en de kinderkaart */
.board-people { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.board-person { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 999px; background: var(--surface2); }
.board-av { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, var(--cyan), var(--violet, #8b5cf6)); color: #fff; font-weight: 700; font-size: 13px; }
.board-feat { display: grid; gap: 4px; padding: 10px 12px; margin: 6px 0; border-radius: 14px; background: color-mix(in srgb, var(--cyan) 10%, transparent); }
.photoday-img { display: block; width: 100%; max-height: 360px; object-fit: cover; border-radius: 14px; }
.kids-hi { margin: 0; font-size: 30px; font-weight: 800; letter-spacing: -.02em; }
.kids-wx { margin: 4px 0 0; font-size: 22px; }
.kids-tip { margin: 2px 0 0; font-size: 18px; color: var(--cyan); font-weight: 600; }
.kids-line { margin: 0; font-size: 20px; line-height: 1.4; }
.kids-task { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.kids-task.done .kids-line { text-decoration: line-through; opacity: .5; }
#ctl .kids-task button { min-width: 96px; height: 48px; font-size: 17px; }

/* Kiosk: foto's als schermbeveiliging */
.k-photo { position: absolute; inset: 0; z-index: 5; background: #000; display: grid; place-items: center; animation: cd-in .6s ease both; }
.k-photo img { width: 100%; height: 100%; object-fit: contain; }
.k-photo-cap { position: absolute; left: 24px; bottom: 20px; color: #fff; font-size: 18px; text-shadow: 0 2px 8px rgba(0, 0, 0, .7); }

/* Uitloggen rechtsboven in elk beheerscherm (vervangt het kruisje) */
#ctl #ctl-logout { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; font-size: 13.5px; }
@media (max-width: 560px) { #ctl #ctl-logout span { display: none; } #ctl #ctl-logout { width: 36px; padding: 0; justify-content: center; } }