/* Agentic Boardroom: donkere controlekamer. Alles in rem, html schaalt mee met de schermbreedte
   zodat het op een projector of 4K-scherm vanzelf groter wordt. */
:root {
  --bg: #0a0f1f;
  --bg2: #111936;
  --panel: #151d3b;
  --line: #28345f;
  --fg: #eaf0ff;
  --muted: #98a6cc;
  --accent: #6c8cff;
  --pos: #55d994;
  --neg: #ff8484;
  --gold: #ffd25e;
  --font: "Trebuchet MS", "Segoe UI", ui-rounded, system-ui, sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { font-size: clamp(13px, 0.83vw, 26px); }
body { margin: 0; background: radial-gradient(1200px 700px at 50% -10%, var(--bg2), var(--bg)); color: var(--fg); font-family: var(--font); line-height: 1.4; min-height: 100dvh; }
body.nocursor, body.nocursor * { cursor: none !important; }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

#app { display: grid; grid-template-rows: auto auto 1fr auto; gap: 0.9rem; padding: 0.9rem 1.2rem 1.2rem; min-height: 100dvh; }
@media (min-width: 1100px) and (min-height: 640px) { #app { height: 100dvh; overflow: hidden; } .stage, .cards { min-height: 0; } }

.top { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.brand { font-weight: 800; letter-spacing: 0.22em; font-size: 0.95rem; display: flex; gap: 0.8rem; align-items: center; }
.badge { font-size: 0.7rem; letter-spacing: 0.08em; padding: 0.2rem 0.6rem; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); font-weight: 600; }
.badge.live { color: var(--pos); border-color: var(--pos); }
.badge.demo { color: var(--gold); border-color: var(--gold); }
.top-actions { display: flex; gap: 0.5rem; }
.ghost { background: transparent; border: 1px solid var(--line); border-radius: 0.6rem; padding: 0.45rem 0.9rem; font-size: 0.85rem; }
.ghost:hover { border-color: var(--accent); }
.ghost.small { padding: 0.25rem 0.6rem; font-size: 0.75rem; }
.primary { background: var(--accent); color: #0a0f1f; border: 0; border-radius: 0.7rem; padding: 0.7rem 1.4rem; font-weight: 800; font-size: 1rem; }
.primary:hover { filter: brightness(1.1); }

/* stage */
.stage { background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)); border: 1px solid var(--line); border-radius: 1rem; padding: 1.2rem 1.6rem; display: flex; align-items: center; justify-content: center; }
.panel { width: 100%; max-width: 78rem; display: flex; flex-direction: column; gap: 0.9rem; }
.panel[hidden] { display: none; }
#pIdle { align-items: center; text-align: center; }
h1 { margin: 0; font-size: 2.1rem; font-weight: 800; letter-spacing: -0.01em; text-wrap: balance; }
.ask { display: flex; gap: 0.6rem; width: 100%; max-width: 62rem; }
.ask input { flex: 1; min-width: 0; background: rgba(0,0,0,.35); border: 2px solid var(--line); border-radius: 0.8rem; padding: 0.8rem 1.1rem; font-size: 1.25rem; }
.ask input:focus { border-color: var(--accent); outline: none; }
.presets { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; max-width: 70rem; }
.preset { background: rgba(255,255,255,.06); border: 1px solid var(--line); border-radius: 999px; padding: 0.4rem 0.9rem; font-size: 0.85rem; }
.preset:hover { border-color: var(--accent); background: rgba(108,140,255,.15); }
.hint { margin: 0; color: var(--muted); font-size: 0.85rem; }
.hint a, .hint button { color: var(--accent); background: none; border: 0; padding: 0; text-decoration: underline; font-size: inherit; }

.runq { font-size: 1.7rem; font-weight: 800; text-wrap: balance; }
.runq.small { font-size: 1.1rem; font-weight: 700; color: var(--muted); }
.runrow { display: flex; gap: 1.2rem; align-items: center; flex-wrap: wrap; }
.ada { display: flex; gap: 0.7rem; align-items: center; }
.ada img { width: 4.6rem; height: 4.6rem; border-radius: 50%; border: 3px solid var(--gold); object-fit: cover; background: #222; }
.ada b { display: block; }
.ada span { color: var(--muted); font-size: 0.8rem; }
.bubble { position: relative; background: rgba(255,255,255,.08); border-radius: 0.9rem; padding: 0.55rem 0.8rem; font-size: 0.9rem; min-height: 2.6rem; }
.bubble::before { content: ""; position: absolute; left: 1.4rem; top: -0.45rem; width: 0.9rem; height: 0.9rem; background: inherit; transform: rotate(45deg); border-radius: 0.15rem; }
.bubble.big { flex: 1; min-width: 14rem; font-size: 1.05rem; }
.bubble.big::before { left: -0.4rem; top: 1.2rem; }
.bubble.live { font-style: italic; color: var(--muted); }
.tally { display: flex; gap: 1rem; align-items: baseline; font-weight: 800; font-size: 1.4rem; }
.tally .pos { color: var(--pos); } .tally .neg { color: var(--neg); }
.tally .phase { font-size: 0.85rem; font-weight: 600; color: var(--muted); }
#btnStop { align-self: flex-start; }

.verdictpanel { flex-direction: row; gap: 2rem; align-items: center; flex-wrap: wrap; }
.verdict-col { display: flex; flex-direction: column; gap: 0.4rem; min-width: 15rem; }
.label { font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.verdict { font-size: 3.2rem; font-weight: 800; line-height: 1; }
.verdict.yes { color: var(--pos); } .verdict.yes_if { color: var(--gold); } .verdict.no { color: var(--neg); }
.conf { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.8rem; color: var(--muted); }
.track { height: 0.5rem; background: rgba(255,255,255,.12); border-radius: 0.3rem; overflow: hidden; }
.track b { display: block; height: 100%; background: var(--accent); width: 0; transition: width 1s; }
.summary-col { flex: 1; min-width: 18rem; display: flex; flex-direction: column; gap: 0.7rem; }
.summary-col p { margin: 0; font-size: 1.25rem; max-width: 50rem; }
.done-actions { display: flex; gap: 0.6rem; }

/* cards */
.cards { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.8rem; }
@media (max-width: 1099px) { .cards { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } }
.card { --c: var(--accent); background: var(--panel); border: 1px solid var(--line); border-top: 0.3rem solid var(--c); border-radius: 0.9rem; padding: 0.8rem; display: flex; flex-direction: column; gap: 0.6rem; min-width: 0; min-height: 0; transition: box-shadow .4s, opacity .4s; }
.card.thinking { box-shadow: 0 0 0 1px var(--c), 0 0 1.6rem -0.2rem var(--c); }
.card.error { opacity: 0.6; }
.who { display: flex; gap: 0.7rem; align-items: center; }
.who img { width: 5.4rem; height: 5.4rem; flex: none; border-radius: 50%; object-fit: cover; border: 3px solid var(--c); background: #222; }
.who h2 { margin: 0; font-size: 1.15rem; line-height: 1.1; overflow-wrap: anywhere; }
.who .role { color: var(--c); font-weight: 700; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; }
.who .hob { color: var(--muted); font-size: 0.72rem; }
.lean { font-size: 0.72rem; color: var(--muted); border-left: 2px solid var(--c); padding-left: 0.5rem; }
.progress { height: 0.28rem; background: rgba(255,255,255,.1); border-radius: 0.2rem; overflow: hidden; }
.progress b { display: block; height: 100%; width: 0; background: var(--c); }
.card.thinking .progress b { width: 100%; animation: sweep 1.6s linear infinite; transform-origin: left; }
.card.done .progress b { width: 100%; opacity: .4; }
@keyframes sweep { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
.card .bubble { min-height: 2.4rem; }
.finds { display: flex; flex-direction: column; gap: 0.45rem; overflow: auto; min-height: 0; scrollbar-width: thin; }
.find { border-radius: 0.55rem; padding: 0.45rem 0.6rem; font-size: 0.8rem; animation: pop .45s cubic-bezier(.2,1.4,.4,1); }
.find.p { background: rgba(85,217,148,.14); border-left: 3px solid var(--pos); }
.find.n { background: rgba(255,132,132,.14); border-left: 3px solid var(--neg); }
.find b { display: flex; justify-content: space-between; gap: 0.5rem; font-size: 0.85rem; }
.find .w { letter-spacing: 0.1em; opacity: .75; font-size: 0.7rem; flex: none; }
.find span { color: var(--muted); display: block; }
@keyframes pop { from { transform: translateY(-1.2rem) scale(.9); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .find { animation: none; } .card.thinking .progress b { animation: none; } .track b { transition: none; } }

/* dialogs */
dialog { border: 1px solid var(--line); border-radius: 1rem; background: var(--bg2); color: var(--fg); padding: 0; width: min(46rem, 94vw); max-height: 92dvh; }
dialog::backdrop { background: rgba(3,6,16,.75); }
dialog[open] { display: flex; }
.sheet { display: flex; flex-direction: column; width: 100%; min-height: 0; overflow: auto; font-size: 1rem; }
.sheet.wide { height: 88dvh; }
dialog:has(.wide) { width: min(78rem, 96vw); }
.sheet-head, .sheet-foot { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.9rem 1.2rem; position: sticky; background: var(--bg2); z-index: 1; }
.sheet-head { top: 0; border-bottom: 1px solid var(--line); }
.sheet-foot { bottom: 0; border-top: 1px solid var(--line); justify-content: flex-end; }
.sheet h2 { margin: 0; font-size: 1.3rem; }
.sec { padding: 1rem 1.2rem; display: flex; flex-direction: column; gap: 0.7rem; border-bottom: 1px solid var(--line); }
.sec h3 { margin: 0; font-size: 1.05rem; }
.note { margin: 0; color: var(--muted); font-size: 0.85rem; }
.field { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.85rem; color: var(--muted); }
.field input, .field textarea, .inline input { background: rgba(0,0,0,.35); border: 1px solid var(--line); border-radius: 0.5rem; padding: 0.55rem 0.7rem; color: var(--fg); min-width: 0; width: 100%; }
.inline { display: flex; gap: 0.5rem; }
.check { display: flex; gap: 0.5rem; align-items: center; font-size: 0.9rem; }
.row { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; }
.result { font-size: 0.85rem; }
.result.ok { color: var(--pos); } .result.bad { color: var(--neg); }
.editors { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 0.8rem; }
.editor { border: 1px solid var(--line); border-top: 0.25rem solid var(--c); border-radius: 0.7rem; padding: 0.7rem; display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; }
.editor header { display: flex; gap: 0.6rem; align-items: center; font-weight: 700; }
.editor header img { width: 2.4rem; height: 2.4rem; border-radius: 50%; object-fit: cover; }
.dd { position: relative; }
.dd-btn { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 0.6rem; text-align: left; background: rgba(0,0,0,.35); border: 1px solid var(--line); border-radius: 0.5rem; padding: 0.55rem 0.7rem; color: var(--fg); font-size: 1rem; }
.dd-btn:hover:not(:disabled) { border-color: var(--accent); }
.dd-btn:disabled { opacity: .5; cursor: not-allowed; }
.dd-btn .ph { color: var(--muted); }
.dd-btn i { font-style: normal; color: var(--muted); transition: transform .15s; }
.dd-btn[aria-expanded="true"] i { transform: rotate(180deg); }
.dd-list { position: absolute; z-index: 5; left: 0; right: 0; top: calc(100% + 0.25rem); margin: 0; padding: 0.25rem; list-style: none; max-height: 14rem; overflow: auto; background: #0e1530; border: 1px solid var(--accent); border-radius: 0.6rem; box-shadow: 0 0.8rem 2rem rgba(0,0,0,.55); outline: none; scrollbar-width: thin; }
.dd-list li { padding: 0.45rem 0.6rem; border-radius: 0.4rem; cursor: pointer; color: var(--fg); font-size: 0.95rem; display: flex; justify-content: space-between; gap: 0.6rem; overflow-wrap: anywhere; }
.dd-list li.act { background: rgba(108,140,255,.22); }
.dd-list li.sel::after { content: "✓"; color: var(--pos); }
.primary.small { padding: 0.45rem 1rem; font-size: 0.9rem; }
#reportFrame { flex: 1; width: 100%; border: 0; background: #fff; min-height: 0; }
.howto { border: 1px solid var(--line); border-radius: 0.6rem; padding: 0.5rem 0.8rem; font-size: 0.85rem; color: var(--muted); }
.howto summary { cursor: pointer; color: var(--accent); font-weight: 600; }
.howto ol { padding-left: 1.2em; display: flex; flex-direction: column; gap: 0.4rem; }
.howto a { color: var(--accent); }
.howto code { background: rgba(0,0,0,.4); padding: 0 0.3rem; border-radius: 0.25rem; overflow-wrap: anywhere; }

/* ruimte voor de kaarten: tijdens de run wordt het podium compact */
.running .stage { padding: 0.6rem 1.2rem; }
.running .runq { font-size: 1.15rem; }
.running .panel { gap: 0.4rem; }
.running .ada img { width: 3rem; height: 3rem; }
.running #btnStop { position: absolute; right: 1.6rem; }
.stage { position: relative; }
.who img { width: 6.4rem; height: 6.4rem; }
.who h2 { font-size: 1.3rem; }
.card .bubble.say { font-size: 1rem; background: #f2f5ff; color: #121a33; font-weight: 600; border-radius: 1rem; }
.card .bubble.say::before { background: #f2f5ff; }
.card .bubble.say.idle { background: rgba(255,255,255,.06); color: var(--muted); font-weight: 400; font-style: italic; }
.card .bubble.say.idle::before { background: rgba(255,255,255,.06); }
.bubble.think { background: transparent; border: 2px dashed var(--c); color: var(--muted); font-style: italic; font-size: 0.85rem; border-radius: 1.4rem; margin-left: 1rem; max-height: 5.2em; overflow: hidden; }
.bubble.think::before { display: none; }
.bubble.think::after { content: ""; position: absolute; left: -0.9rem; top: 50%; width: 0.5rem; height: 0.5rem; border: 2px dashed var(--c); border-radius: 50%; box-shadow: -0.5rem 0.5rem 0 -0.1rem var(--c); }
.find { font-size: 0.9rem; }
.find b { font-size: 0.95rem; }
.feed { background: rgba(0,0,0,.35); border: 1px solid var(--line); border-radius: 0.8rem; padding: 0.5rem 0.9rem; font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: 0.8rem; }
.feed-head { display: flex; justify-content: space-between; margin-bottom: 0.3rem; }
.feed ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.1rem; height: 8.6em; overflow: hidden; justify-content: flex-end; }
.feed li { display: flex; gap: 0.8rem; white-space: nowrap; animation: slide .35s ease-out; }
.feed li time { color: var(--muted); flex: none; }
.feed li span { overflow: hidden; text-overflow: ellipsis; }
.feed li.pos span { color: var(--pos); } .feed li.neg span { color: var(--neg); } .feed li.say span { color: var(--fg); } .feed li.orch span { color: var(--gold); } .feed li.info span { color: #aeb9dd; }
@keyframes slide { from { transform: translateY(0.6rem); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .feed li { animation: none; } }
@media (max-width: 1099px) { .feed ol { height: auto; } }

/* grote figuren bovenaan de kaart */
.who { flex-direction: column; align-items: stretch; gap: 0.4rem; }
.pic { position: relative; border-radius: 0.8rem; overflow: hidden; border: 2px solid var(--c); }
.who .pic img { width: 100%; height: clamp(8rem, 27vh, 19rem); border: 0; border-radius: 0; object-fit: cover; object-position: 50% 22%; display: block; }
.cap { position: absolute; inset: auto 0 0 0; padding: 1.6rem 0.8rem 0.5rem; background: linear-gradient(transparent, rgba(5,8,20,.88)); }
.cap h2 { font-size: 1.35rem; }
.who .hob { padding: 0 0.2rem; }

/* ruimte voor de overwegingen: lagere portretten, compact adviespaneel */
.who .pic img { height: clamp(7rem, 19vh, 14rem); object-position: 50% 16%; }
.card .bubble { flex: none; }
.finds { flex: 1; }
.verdict { font-size: 2.6rem; }
.summary-col p { font-size: 1.1rem; }
.verdictpanel { gap: 1.6rem; }
.stage:has(.verdictpanel:not([hidden])) { padding-block: 0.7rem; }
.brand .tag { font-weight: 500; letter-spacing: 0.04em; font-size: 0.8rem; color: var(--muted); }
@media (max-width: 800px) { .brand .tag { display: none; } }

/* Ada blijft zichtbaar bij het advies */
.ada-pic { --c: var(--gold); width: 10.5rem; flex: none; }
.ada-pic img { width: 100%; height: 9.5rem; object-fit: cover; object-position: 50% 14%; display: block; }
.ada-pic .role { color: var(--c); font-weight: 700; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; }
.running .ada img { width: 3.6rem; height: 3.6rem; }

/* signalen bij het advies */
.verdict-col { min-width: 17rem; gap: 0.5rem; }
.signal { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.85rem; color: var(--muted); }
.stances { display: flex; gap: 0.4rem; }
.stances .st { width: 2.2rem; height: 2.2rem; border-radius: 50%; object-fit: cover; object-position: 50% 18%; border: 3px solid var(--muted); }
.stances .st.pos { border-color: var(--pos); } .stances .st.neg { border-color: var(--neg); } .stances .st.mix { border-color: var(--gold); }
.toprisk { color: var(--fg); font-size: 0.95rem; }
.toprisk b { color: var(--neg); }
.toprisk small { display: block; color: var(--muted); }

/* kleine naamvermelding */
.credit { opacity: .65; }
.credit a { color: inherit; text-decoration: none; border-bottom: 1px dotted transparent; }
.credit a:hover, .credit a:focus-visible { color: var(--accent); border-bottom-color: currentColor; }

/* denk-animatie: bewegende puntjes, ademend portret en een vraagteken bij Ada's vragen */
.dots { display: inline-flex; gap: 0.3rem; align-items: center; height: 1.2rem; }
.dots i { width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--c, var(--gold)); animation: bounce 1.2s ease-in-out infinite; }
.dots i:nth-child(2) { animation-delay: 0.15s; } .dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes bounce { 0%, 60%, 100% { transform: translateY(0); opacity: .4; } 30% { transform: translateY(-0.4rem); opacity: 1; } }
.card.thinking .pic { animation: breathe 2.4s ease-in-out infinite; }
@keyframes breathe { 0%, 100% { box-shadow: 0 0 0 0 transparent; } 50% { box-shadow: 0 0 1.4rem 0.1rem var(--c); } }
.card.thinking .pic img { animation: sway 4.8s ease-in-out infinite; }
@keyframes sway { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }
.qmark { position: absolute; top: 0.5rem; right: 0.5rem; width: 2rem; height: 2rem; border-radius: 50%; background: var(--gold); color: #1a1405; font-weight: 800; display: grid; place-items: center; font-size: 1.1rem; animation: ping 1.4s ease-in-out infinite; }
.qmark[hidden] { display: none; }
@keyframes ping { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } }
.bubble.big { white-space: pre-line; max-height: 8.5rem; overflow: auto; scrollbar-width: thin; }
.bubble.reply { background: rgba(255,255,255,.08); border-left: 3px solid var(--c); border-radius: 0.8rem; font-size: 0.9rem; }
.bubble.reply::before { display: none; }
.bubble.reply .to { display: block; color: var(--c); font-weight: 700; font-size: 0.75rem; letter-spacing: 0.04em; text-transform: uppercase; }
.bubble.reply .shift { display: block; margin-top: 0.25rem; color: var(--gold); font-size: 0.78rem; font-weight: 700; }
.stances .st.moved { outline: 2px dashed var(--gold); outline-offset: 2px; }
.discuss { display: flex; gap: 0.5rem; align-items: center; color: var(--muted); font-size: 0.85rem; cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .dots i, .card.thinking .pic, .card.thinking .pic img, .qmark { animation: none; } }

/* token- en kostenteller */
.top-actions { align-items: center; }
.usage { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: 0.8rem; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 0.35rem 0.9rem; white-space: nowrap; cursor: help; }
.usage b { color: var(--gold); }
.usage[hidden] { display: none; }
.pricegrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 0.7rem; }

/* gesprek: Ada's vraag en de antwoorden als duidelijke spreekwolkjes */
.bubble.big .open { display: block; opacity: .7; font-size: 0.9rem; margin-bottom: 0.35rem; }
.bubble.big .askline { display: block; font-size: 1.2rem; font-weight: 600; color: #fff; line-height: 1.35; }
.bubble.big .nm { font-weight: 800; }
.card.turn { box-shadow: 0 0 0 2px var(--gold), 0 0 1.6rem -0.2rem var(--gold); }
.card .bubble.reply { background: #f2f5ff; color: #121a33; font-weight: 600; font-size: 0.95rem; border: 0; border-radius: 1rem; }
.card .bubble.reply::before { display: block; background: #f2f5ff; }
.bubble.reply .shift { color: #8a6a00; }
.bubble.reply .to { font-size: 0.8rem; }

/* wolkjes en bevindingen scrollen samen in één gebied per kaart */
.scroller { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; gap: 0.6rem; padding: 0.55rem 0.3rem 0.2rem 0; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.25) transparent; }
.scroller .finds { flex: none; overflow: visible; min-height: auto; }
.scroller .bubble { flex: none; }
.usage { font-variant-numeric: tabular-nums; min-width: 17ch; text-align: center; }

.orgline { margin: -0.4rem 0 0; color: var(--gold); font-size: 0.95rem; letter-spacing: 0.04em; }
.orgline[hidden] { display: none; }
.field textarea { background: rgba(0,0,0,.35); border: 1px solid var(--line); border-radius: 0.5rem; padding: 0.55rem 0.7rem; color: var(--fg); width: 100%; resize: vertical; font: inherit; }

/* een lange statusregel mag de pagina nooit breder maken: de kolom krijgt een vaste breedte en de regel wordt afgekapt */
#app { grid-template-columns: minmax(0, 1fr); }
.top, .stage, .cards, .feed, .feed ol, .feed li { min-width: 0; }
.feed li span { flex: 1; min-width: 0; }