:root {
  --bg: #050b14; --panel: #0a1624; --line: #0e3a52;
  --cyan: #00e5ff; --blue: #2d7bff; --text: #d6f3ff; --dim: #6f9bb0; --err: #ff6b81;
  --level: 0;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: radial-gradient(ellipse at 50% 20%, #0b2036 0%, var(--bg) 60%);
  color: var(--text);
  font: 16px/1.45 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
  overscroll-behavior: none;
}
[hidden] { display: none !important; }

button, input { font: inherit; color: inherit; }
button {
  background: rgba(0,229,255,.08); border: 1px solid var(--line); color: var(--cyan);
  border-radius: 12px; padding: 10px 16px; cursor: pointer; transition: box-shadow .2s, background .2s;
}
button:hover:not(:disabled) { box-shadow: 0 0 14px rgba(0,229,255,.35); background: rgba(0,229,255,.14); }
button:disabled { opacity: .35; cursor: not-allowed; }
button.ghost { padding: 6px 12px; font-size: 14px; background: transparent; }
input[type=text], input[type=password] {
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px;
  font-size: 16px; /* voorkomt iOS-zoom */ outline: none; width: 100%;
}
input:focus { border-color: var(--cyan); box-shadow: 0 0 12px rgba(0,229,255,.3); }

/* login */
.overlay { position: fixed; inset: 0; display: grid; place-items: center; padding: 24px; }
#login-form { width: min(340px, 100%); display: grid; gap: 14px; text-align: center; }
#login-form h1 { margin: 0 0 6px; letter-spacing: .5em; font-weight: 300; color: var(--cyan); text-shadow: 0 0 18px var(--cyan); }
.err { color: var(--err); min-height: 1.4em; margin: 0; font-size: 14px; }

/* app layout */
#app {
  height: 100dvh; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) minmax(0, 34vh) auto;
  max-width: 880px; margin: 0 auto;
  padding: env(safe-area-inset-top) calc(14px + env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) calc(14px + env(safe-area-inset-left));
}
header { display: flex; align-items: center; gap: 10px; padding: 10px 0; }
.brand { letter-spacing: .4em; color: var(--cyan); text-shadow: 0 0 10px var(--cyan); font-weight: 300; }
.spacer { flex: 1; }
.conn { width: 9px; height: 9px; border-radius: 50%; background: var(--err); box-shadow: 0 0 8px var(--err); }
.conn[data-on="true"] { background: #3dffa0; box-shadow: 0 0 8px #3dffa0; }

.stage { position: relative; display: grid; place-items: center; min-height: 0; }
#avatar { height: 100%; max-height: 380px; width: auto; max-width: 100%; overflow: visible; filter: drop-shadow(0 0 24px rgba(0,229,255,.25)); }
.cards { position: absolute; inset: 0; pointer-events: none; } /* fase 6 */

.log { overflow-y: auto; padding: 8px 2px; display: flex; flex-direction: column; gap: 8px; scroll-behavior: smooth; }
.msg { max-width: 88%; padding: 9px 13px; border-radius: 14px; white-space: pre-wrap; overflow-wrap: anywhere; border: 1px solid var(--line); }
.msg.user { align-self: flex-end; background: rgba(45,123,255,.15); border-color: rgba(45,123,255,.5); }
.msg.bot { align-self: flex-start; background: rgba(0,229,255,.07); }
.msg.bot.streaming::after { content: "▍"; color: var(--cyan); animation: blink 1s steps(2) infinite; }
.msg.error { align-self: center; color: var(--err); border-color: var(--err); background: transparent; font-size: 14px; }

.composer { display: flex; gap: 8px; padding-top: 8px; }
.mic { padding: 10px 12px; display: grid; place-items: center; }

/* avatar-animaties */

#avatar[data-state="listening"] .halo { animation: pulse 1.2s ease-in-out infinite; }
#avatar[data-state="speaking"] .halo { opacity: calc(.7 + var(--level) * .3); }
#avatar[data-state="offline"] { opacity: .45; filter: grayscale(1); }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 0%,100% { transform: scale(.96); opacity: .8; } 50% { transform: scale(1.04); opacity: 1; } }
@keyframes pulse-op { 0%,100% { opacity: .35; } 50% { opacity: 1; } }
@keyframes blink { 50% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; } }
@media (max-height: 640px) { .log { max-height: 26vh; } }

/* spraak */
button.icon { padding: 6px 9px; display: grid; place-items: center; }
button.icon[aria-pressed="false"] { color: var(--dim); }
button.icon[aria-pressed="false"] .waves { display: none; }
button#btn-wake[aria-pressed="true"] { box-shadow: 0 0 12px rgba(0,229,255,.45); }
.mic { touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.mic.rec { background: rgba(0,229,255,.28); box-shadow: 0 0 22px rgba(0,229,255,.7); animation: pulse-op 1s ease-in-out infinite; }
#avatar[data-state="listening"] .halo { opacity: calc(.6 + var(--level) * .4); }

/* geheugenpaneel */
.panel { background: rgba(3,9,15,.82); backdrop-filter: blur(6px); z-index: 10; align-items: start; padding-top: calc(24px + env(safe-area-inset-top)); }
.panel-box { width: min(560px, 100%); max-height: 86dvh; display: flex; flex-direction: column; gap: 10px; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 14px; box-shadow: 0 0 30px rgba(0,229,255,.15); }
.panel-head { display: flex; justify-content: space-between; align-items: center; color: var(--cyan); }
.mem-list { list-style: none; margin: 0; padding: 0; overflow-y: auto; display: grid; gap: 8px; }
.mem-list li { display: flex; gap: 10px; align-items: flex-start; justify-content: space-between; border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; }
.mem-list .kind { font-size: 11px; letter-spacing: .12em; color: var(--dim); text-transform: uppercase; display: block; }
.mem-list button { padding: 4px 10px; font-size: 13px; color: var(--err); border-color: rgba(255,107,129,.4); background: transparent; flex: none; }
.mem-empty { color: var(--dim); text-align: center; padding: 14px; }

/* bevestigingen en herinneringen */
.msg.confirm { border-color: var(--cyan); box-shadow: 0 0 14px rgba(0,229,255,.25); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.msg.confirm button { padding: 4px 14px; }
.msg.reminder { border-color: #ffd166; background: rgba(255,209,102,.08); }

/* zwevende kaarten */
.stage { overflow: hidden; }
.cards { z-index: 2; }
.card { pointer-events: auto; position: relative; flex: none; width: 224px; padding: 10px 12px; border-radius: 14px; font-size: 14px; line-height: 1.35;
  background: rgba(7,20,33,.78); backdrop-filter: blur(6px); border: 1px solid rgba(0,229,255,.35);
  box-shadow: 0 0 18px rgba(0,229,255,.18), inset 0 0 18px rgba(0,229,255,.04);
  opacity: 0; transform: translateY(8px) scale(.97); transition: opacity .35s ease, transform .35s ease; }
.card.in { opacity: 1; transform: none; }
.card header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; color: var(--cyan); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; }
.card header .x { padding: 0 6px; font-size: 18px; line-height: 1; border: 0; background: transparent; color: var(--dim); border-radius: 8px; }
.card .row { display: flex; justify-content: space-between; gap: 10px; padding: 2px 0; }
.card .row .l { color: var(--dim); white-space: nowrap; } .card .row .r { text-align: right; overflow-wrap: anywhere; }
.card .row.done .l { text-decoration: line-through; opacity: .6; }
.card .day { margin-top: 6px; color: var(--cyan); font-size: 12px; } .card .day:first-child { margin-top: 0; }
.card .sub { color: var(--dim); font-size: 12px; margin-bottom: 4px; }
.card .wx-now { display: flex; align-items: baseline; gap: 10px; } .card .temp { font-size: 34px; font-weight: 200; color: var(--cyan); text-shadow: 0 0 12px rgba(0,229,255,.6); }
.card .desc { color: var(--text); font-size: 13px; }
.card .note { display: flex; flex-direction: column; padding: 3px 0 3px 8px; border-left: 2px solid var(--line); margin-bottom: 4px; }
.card .note.unread { border-left-color: var(--cyan); } .card .note strong { font-weight: 600; font-size: 13px; } .card .note span { color: var(--dim); font-size: 13px; }

@media (max-width: 859px) {
  .stage { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; }
  #avatar { flex: 1 1 0; min-height: 90px; width: 100%; height: auto; max-height: 380px; order: 1; }
  .cards { order: 2; position: static; flex: 0 0 auto; width: 100%; display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 4px; scroll-snap-type: x mandatory; align-items: flex-start; }
  .cards:empty { display: none; }
  .card { position: static; flex: 0 0 min(78%, 270px); scroll-snap-align: start; max-height: min(170px, 24dvh); overflow-y: auto; }
}
@media (max-width: 520px) {
  header { gap: 6px; flex-wrap: nowrap; }
  header .brand { letter-spacing: .25em; font-size: 15px; }
  header button.ghost { padding: 5px 8px; font-size: 13px; }
  header button.icon { padding: 5px 7px; }
}

/* NAS-kaart */
.card .bar { height: 6px; border-radius: 4px; background: rgba(0,229,255,.12); margin: 2px 0 6px; overflow: hidden; }
.card .bar i { display: block; height: 100%; background: linear-gradient(90deg, #00b8d4, var(--cyan)); box-shadow: 0 0 8px var(--cyan); }
.card .bar.hot i { background: linear-gradient(90deg, #ffb703, #ff6b81); box-shadow: 0 0 8px #ff6b81; }
.card .row.bad .r { color: var(--err); }
.card .dots { display: flex; flex-wrap: wrap; gap: 4px 8px; margin-top: 6px; font-size: 11px; color: var(--dim); }
.card .dot::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #3dffa0; box-shadow: 0 0 6px #3dffa0; margin-right: 4px; }
.card .dot.off { color: var(--err); } .card .dot.off::before { background: var(--err); box-shadow: 0 0 6px var(--err); }
.card .warn { margin-top: 6px; color: #ffd166; font-size: 12px; }

/* bevestigingspop-up */
#confirm { align-items: center; padding-top: 24px; z-index: 20; }
.confirm-box { border-color: var(--cyan); box-shadow: 0 0 40px rgba(0,229,255,.35); }
.confirm-text { white-space: pre-wrap; overflow-wrap: anywhere; overflow-y: auto; max-height: 50dvh; padding: 6px 2px; line-height: 1.5; }
.confirm-actions { display: flex; gap: 10px; justify-content: flex-end; }
.confirm-actions button { padding: 12px 22px; font-size: 16px; }
button.primary { background: rgba(0,229,255,.22); border-color: var(--cyan); color: #fff; box-shadow: 0 0 14px rgba(0,229,255,.4); }

/* avatar: stemring */
#avatar .halo { transform-box: fill-box; transform-origin: center; animation: pulse 4s ease-in-out infinite; }
#avatar .orbit { transform-box: fill-box; transform-origin: center; animation: spin 50s linear infinite; }
#avatar #bars { filter: drop-shadow(0 0 4px rgba(0,229,255,.7)); }
#avatar #bars rect { fill: #00e5ff; }
#avatar .ctr { transform-box: fill-box; transform-origin: center; animation: pulse 3.4s ease-in-out infinite; filter: drop-shadow(0 0 12px rgba(0,229,255,.8)); }
#avatar .rip { fill: none; stroke: #00e5ff; stroke-width: 2; opacity: 0; }
#avatar[data-state="thinking"] .orbit { animation-duration: 6s; }
#avatar[data-state="thinking"] .ctr { animation-duration: 1.2s; }
#avatar[data-state="listening"] .rip { animation: ripple 1.8s ease-out infinite; }
#avatar[data-state="listening"] .rip.r2 { animation-delay: .6s; }
#avatar[data-state="listening"] .rip.r3 { animation-delay: 1.2s; }
#avatar[data-state="listening"] .ctr, #avatar[data-state="speaking"] .ctr { animation: none; transform: scale(calc(1 + var(--level) * .3)); transition: transform .06s linear; }
#avatar[data-state="speaking"] .halo { opacity: calc(.7 + var(--level) * .3); }
@keyframes ripple { 0% { r: 50; opacity: .6; } 100% { r: 128; opacity: 0; } }

/* lage schermen (telefoon in landscape, klein venster) */
@media (max-height: 560px) {
  .log { max-height: 22vh; }
  .card { max-height: 20dvh; }
  #avatar { min-height: 70px; }
  header { padding: 4px 0; }
}


/* ===== thema: HUD-opknapbeurt ===== */
body {
  background:
    radial-gradient(ellipse at 50% 16%, rgba(0,229,255,.11), transparent 56%),
    radial-gradient(ellipse at 50% 105%, rgba(45,123,255,.10), transparent 60%),
    var(--bg);
}
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: .55;
  background-image: radial-gradient(rgba(0,229,255,.18) 1px, transparent 1.3px); background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 38%, #000, transparent 68%); mask-image: radial-gradient(ellipse at 50% 38%, #000, transparent 68%);
}
#app, #login { position: relative; z-index: 1; }

header { border-bottom: 1px solid rgba(0,229,255,.12); margin-bottom: 4px; }
.brand { font-size: 17px; letter-spacing: .5em; }
header button.ghost { display: inline-flex; align-items: center; gap: 6px; border-color: rgba(14,58,82,.9); border-radius: 10px; }
header button.icon { padding: 6px 9px; }
@media (max-width: 600px) { header .lbl { display: none; } header button.ghost { padding: 7px 9px; } }

.stage::before {
  content: ""; position: absolute; inset: 4px; pointer-events: none; opacity: .5; z-index: 0;
  --b: linear-gradient(var(--cyan), var(--cyan));
  background:
    var(--b) top left / 20px 1.5px no-repeat, var(--b) top left / 1.5px 20px no-repeat,
    var(--b) top right / 20px 1.5px no-repeat, var(--b) top right / 1.5px 20px no-repeat,
    var(--b) bottom left / 20px 1.5px no-repeat, var(--b) bottom left / 1.5px 20px no-repeat,
    var(--b) bottom right / 20px 1.5px no-repeat, var(--b) bottom right / 1.5px 20px no-repeat;
}
#avatar { filter: drop-shadow(0 0 28px rgba(0,229,255,.28)); position: relative; z-index: 1; }
#avatar .status { fill: #5fc7e6; letter-spacing: 6px; font-size: 10px; }

.msg { backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); box-shadow: 0 4px 18px rgba(0,0,0,.25); animation: msgIn .35s ease both; line-height: 1.5; }
.msg.user { background: linear-gradient(135deg, rgba(45,123,255,.30), rgba(0,229,255,.10)); border-color: rgba(90,165,255,.55); border-bottom-right-radius: 5px; }
.msg.bot  { background: linear-gradient(135deg, rgba(0,229,255,.11), rgba(10,22,36,.65)); border-color: rgba(0,229,255,.28); border-bottom-left-radius: 5px; }
@keyframes msgIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.log:empty { display: flex; }
.log:empty::before { content: "Houd de microfoon ingedrukt of typ een bericht"; color: var(--dim); font-size: 14px; letter-spacing: .06em; text-align: center; margin: auto; opacity: .8; }

.composer { background: rgba(10,22,36,.82); border: 1px solid var(--line); border-radius: 22px; padding: 6px; gap: 6px; align-items: center; transition: border-color .2s, box-shadow .2s; }
.composer:focus-within { border-color: var(--cyan); box-shadow: 0 0 20px rgba(0,229,255,.25); }
.composer input[type=text] { border: 0; background: transparent; border-radius: 12px; box-shadow: none; }
.composer input[type=text]:focus { box-shadow: none; }
.composer button { border-radius: 16px; }
.composer .mic { border-radius: 50%; width: 44px; height: 44px; padding: 0; flex: none; }
#btn-send { background: linear-gradient(135deg, rgba(0,229,255,.28), rgba(45,123,255,.28)); border-color: rgba(0,229,255,.6); color: #fff; }

#login-form { padding: 28px 26px; border: 1px solid rgba(0,229,255,.25); border-radius: 22px; background: rgba(8,20,32,.7); backdrop-filter: blur(8px); box-shadow: 0 0 50px rgba(0,229,255,.12); }
#login-logo { width: 110px; height: 110px; margin: 0 auto -4px; filter: drop-shadow(0 0 14px rgba(0,229,255,.55)); animation: pulse 4s ease-in-out infinite; }
#login-form button[type=submit] { background: linear-gradient(135deg, rgba(0,229,255,.28), rgba(45,123,255,.28)); border-color: rgba(0,229,255,.6); color: #fff; padding: 12px; }


/* ===== thema-knop ===== */
#btn-theme svg { display: none; }
#btn-theme[data-pref="auto"] .i-auto, #btn-theme[data-pref="light"] .i-light, #btn-theme[data-pref="dark"] .i-dark { display: block; }
html::before { content: ""; position: fixed; top: 0; left: 0; right: 0; height: env(safe-area-inset-top); background: #050b14; z-index: 50; pointer-events: none; }

/* ===== lichte modus ===== */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #eaf3f9; --panel: rgba(255,255,255,.9); --line: #b4d0e1;
  --cyan: #0a86a6; --blue: #2159c9; --text: #0c2236; --dim: #4f6f88; --err: #c92c47;
}
[data-theme="light"] body {
  background:
    radial-gradient(ellipse at 50% 12%, rgba(10,134,166,.16), transparent 58%),
    radial-gradient(ellipse at 50% 108%, rgba(33,89,201,.12), transparent 60%),
    var(--bg);
}
[data-theme="light"] body::before { background-image: radial-gradient(rgba(10,100,140,.20) 1px, transparent 1.3px); opacity: .5; }
[data-theme="light"] button { background: rgba(10,134,166,.09); }
[data-theme="light"] button:hover:not(:disabled) { box-shadow: 0 2px 10px rgba(10,100,140,.22); background: rgba(10,134,166,.16); }
[data-theme="light"] button.ghost { background: transparent; }
[data-theme="light"] button.primary, [data-theme="light"] #btn-send, [data-theme="light"] #login-form button[type=submit] { color: var(--text); background: linear-gradient(135deg, rgba(10,134,166,.22), rgba(33,89,201,.2)); border-color: rgba(10,134,166,.55); box-shadow: none; }
[data-theme="light"] input:focus { box-shadow: 0 0 0 3px rgba(10,134,166,.18); }
[data-theme="light"] .brand, [data-theme="light"] #login-form h1 { text-shadow: none; }
[data-theme="light"] header { border-bottom-color: rgba(10,100,140,.18); }
[data-theme="light"] .msg { box-shadow: 0 3px 12px rgba(20,60,90,.10); }
[data-theme="light"] .msg.user { background: linear-gradient(135deg, rgba(33,89,201,.18), rgba(10,134,166,.08)); border-color: rgba(33,89,201,.4); }
[data-theme="light"] .msg.bot  { background: rgba(255,255,255,.78); border-color: #b4d0e1; }
[data-theme="light"] .msg.error { background: rgba(255,255,255,.7); }
[data-theme="light"] .msg.confirm { box-shadow: 0 0 0 2px rgba(10,134,166,.25); }
[data-theme="light"] .msg.reminder { background: rgba(255,209,102,.25); border-color: #d6a021; }
[data-theme="light"] .composer { background: rgba(255,255,255,.88); }
[data-theme="light"] .composer:focus-within { box-shadow: 0 0 0 3px rgba(10,134,166,.2); }
[data-theme="light"] .card { background: rgba(255,255,255,.84); border-color: rgba(10,134,166,.4); box-shadow: 0 6px 20px rgba(20,60,90,.14); }
[data-theme="light"] .card .temp { text-shadow: none; }
[data-theme="light"] .card .warn { color: #a86a00; }
[data-theme="light"] .card .bar { background: rgba(10,134,166,.15); }
[data-theme="light"] .card .bar i { box-shadow: none; }
[data-theme="light"] .card .dot::before { box-shadow: none; background: #1b9e5a; }
[data-theme="light"] .card .dot.off::before { background: var(--err); }
[data-theme="light"] #login-form { background: rgba(255,255,255,.8); border-color: rgba(10,134,166,.35); box-shadow: 0 10px 40px rgba(20,60,90,.16); }
[data-theme="light"] #login-logo { filter: drop-shadow(0 2px 8px rgba(10,100,140,.35)); }
[data-theme="light"] #login-logo rect { fill: var(--cyan); }
[data-theme="light"] #login-logo circle:nth-of-type(1) { fill: #0c2236; stroke: var(--cyan); }
[data-theme="light"] #login-logo circle:nth-of-type(2) { fill: var(--cyan); }
[data-theme="light"] #login-logo circle:nth-of-type(3) { fill: #e6f6fb; }
[data-theme="light"] .panel { background: rgba(214,230,241,.72); }
[data-theme="light"] .confirm-box { box-shadow: 0 10px 40px rgba(20,60,90,.28); }
[data-theme="light"] .mic.rec { background: rgba(10,134,166,.3); box-shadow: 0 0 0 4px rgba(10,134,166,.2); }
[data-theme="light"] .msg.bot.streaming::after { color: var(--cyan); }

/* avatar in de lichte modus */
[data-theme="light"] #avatar { filter: drop-shadow(0 6px 18px rgba(10,100,140,.28)); }
[data-theme="light"] #avatar #bars { filter: drop-shadow(0 0 2px rgba(10,100,140,.35)); }
[data-theme="light"] #avatar #ticks rect { fill: var(--cyan); }
[data-theme="light"] #avatar .halo { opacity: .55; }
[data-theme="light"] #avatar .orbit { stroke: var(--blue); }
[data-theme="light"] #avatar .rip { stroke: var(--cyan); }
[data-theme="light"] #avatar .ctr { filter: drop-shadow(0 2px 8px rgba(10,100,140,.5)); }
[data-theme="light"] #avatar .ctr circle:nth-child(1) { fill: #0c2236; stroke: var(--cyan); }
[data-theme="light"] #avatar .ctr circle:nth-child(2) { fill: var(--cyan); }
[data-theme="light"] #avatar .ctr circle:nth-child(3) { fill: #e6f6fb; }
[data-theme="light"] #avatar .status { fill: var(--dim); }
[data-theme="light"] .stage::before { opacity: .65; }


/* kaartkolommen: links en rechts van de avatar, onder elkaar */
.cards { display: flex; justify-content: space-between; align-items: flex-start; padding: 8px 6px; }
.cards .col { display: flex; flex-direction: column; gap: 10px; width: 224px; max-height: 100%; overflow-y: auto; scrollbar-width: none; }
.cards .col.right { margin-left: auto; }
@media (max-width: 859px) {
  .cards { padding: 2px 2px 4px; }
  .cards .col { display: contents; }
  .cards .col.right { margin-left: 0; }
}


.opt { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; color: var(--dim); line-height: 1.35; cursor: pointer; }
.opt input { margin-top: 3px; accent-color: var(--cyan); }

/* profielkaart */
.card .chips { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0 2px; }
.card .chip { padding: 1px 8px; border-radius: 999px; font-size: 12px; border: 1px solid rgba(0,229,255,.35); color: var(--cyan); background: rgba(0,229,255,.06); }
.card .brain-link { margin-top: 8px; padding: 4px 10px; font-size: 12px; border-radius: 10px; width: 100%; }
[data-theme="light"] .card .chip { background: rgba(10,134,166,.08); }

.card .scroll { max-height: min(210px, 25dvh); overflow-y: auto; padding-right: 4px; scrollbar-width: thin; scrollbar-color: rgba(0,229,255,.4) transparent; overscroll-behavior: contain; }
.card .scroll::-webkit-scrollbar { width: 5px; } .card .scroll::-webkit-scrollbar-thumb { background: rgba(0,229,255,.4); border-radius: 4px; }
.card[data-kind="profile"] { width: 264px; }
.cards .col:has(.card[data-kind="profile"]) { width: 264px; }
@media (max-width: 859px) { .card[data-kind="profile"] { max-height: 300px; } .card .scroll { max-height: 160px; } }

.opt-row { display: grid; gap: 4px; }
.push-line { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding-left: 24px; }
.push-status { font-size: 13px; color: var(--dim); line-height: 1.35; }
#push-test { padding: 3px 10px; font-size: 13px; }


/* Gespreksmodus */
button#btn-talk[aria-pressed="true"] { color: var(--cyan); border-color: rgba(0,229,255,.6); box-shadow: 0 0 12px rgba(0,229,255,.45); animation: talkpulse 2.4s ease-in-out infinite; }
@keyframes talkpulse { 50% { box-shadow: 0 0 4px rgba(0,229,255,.2); } }
@media (prefers-reduced-motion: reduce) { button#btn-talk[aria-pressed="true"] { animation: none; } }


/* ===== Responsief (telefoon en tablet): niets mag de pagina breder maken dan het scherm ===== */
header { min-width: 0; }
.more { display: none; position: relative; }
.more-menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 30; min-width: 220px; padding: 6px; display: flex; flex-direction: column; gap: 2px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 12px 34px rgba(0,0,0,.5); }
.more-menu[hidden] { display: none; }
.more-menu button { width: 100%; justify-content: flex-start; text-align: left; border: 0; background: transparent; padding: 0 14px; height: 46px; border-radius: 10px; font-size: 15px; color: var(--text); }
.more-menu button:hover, .more-menu button:focus-visible { background: rgba(0,229,255,.12); box-shadow: none; outline: none; }
[data-theme="light"] .more-menu { box-shadow: 0 12px 30px rgba(20,60,90,.25); }

/* kaarten: sluitknop met een ruimer raakvlak, datum op één regel, tekst links inkorten in plaats van de datum af te breken */
.card header .x { padding: 4px 10px; margin: -6px -8px -6px 0; min-width: 40px; min-height: 32px; font-size: 20px; }
.card .row .l { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.card .row .r { white-space: nowrap; flex: none; }
.cards .col.fade { -webkit-mask-image: linear-gradient(#000 calc(100% - 34px), transparent); mask-image: linear-gradient(#000 calc(100% - 34px), transparent); }

@media (max-width: 560px) {
  #btn-theme, #btn-reset, #btn-logout { display: none; }
  .more { display: block; }
  header { gap: 6px; }
  header button.icon, header button.ghost { min-width: 40px; height: 40px; padding: 0 8px; justify-content: center; }
  header .brand { font-size: 15px; letter-spacing: .22em; }
  .composer button, .composer .mic { min-height: 46px; }
}
@media (max-width: 360px) {
  header .brand { display: none; }
  header { gap: 4px; }
  header button.icon, header button.ghost { min-width: 36px; padding: 0 6px; }
}

/* geheugenpaneel en bevestigingen: ruime raakvlakken */
#mem-form button { white-space: nowrap; flex: none; }
#mem-form input { min-width: 0; }
.panel-head button.ghost { min-height: 36px; }
.mem-list button { min-height: 36px; }
@media (max-width: 560px) {
  .panel-head button.ghost { min-height: 40px; min-width: 64px; }
  .mem-list button { min-height: 40px; padding: 0 14px; }
  .msg.confirm button { min-height: 42px; padding: 0 18px; }
  .confirm-actions button { min-height: 48px; }
  #mem-form { padding: 6px 6px 6px 10px; }
}

/* telefoon in de liggende stand: avatar links, gesprek rechts; de kaartjes (die na een tijdje verdwijnen) laten we daar weg */
@media (max-height: 520px) and (min-width: 560px) {
  #app { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); grid-template-rows: auto minmax(0, 1fr) auto; column-gap: 14px; }
  header { grid-column: 1 / -1; }
  .stage { grid-column: 1; grid-row: 2; }
  #avatar { max-height: none; height: 100%; }
  .cards { display: none; }
  .log { grid-column: 2; grid-row: 2; max-height: none; }
  .composer { grid-column: 1 / -1; grid-row: 3; }
}

/* aanraakschermen (telefoon en tablet): knoppen minstens 40 px hoog */
@media (pointer: coarse) {
  header button.icon, header button.ghost { min-height: 40px; }
  .card header .x { min-height: 36px; }
}

/* Google Live */
button#btn-live[aria-pressed="true"] { color: #7dffb2; border-color: rgba(125,255,178,.6); box-shadow: 0 0 12px rgba(125,255,178,.45); animation: talkpulse 2.4s ease-in-out infinite; }
.msg.info { align-self: center; max-width: 94%; background: transparent; border-style: dashed; color: var(--dim); font-size: 13px; text-align: center; padding: 6px 12px; }
@media (max-width: 560px) { #btn-voice { display: none; } }
@media (prefers-reduced-motion: reduce) { button#btn-live[aria-pressed="true"] { animation: none; } }