:root{
  --bg:#0f0f0f;
  --surface:#171717;
  --card:#1c1c1c;
  --border:#2a2a2a;
  --text:#ededed;
  --muted:#9a9a9a;
  --eng:#7dd3fc;
  --phil:#c4b5fd;
  --law:#fbbf24;
  --men:#fb7185;
  --user:#86efac;
  --max-width:1280px;
  --radius:10px;
  --radius-sm:8px;
}
*{box-sizing:border-box; scrollbar-width:none; -ms-overflow-style:none}
*::-webkit-scrollbar{display:none}
*:focus-visible{outline:2px solid var(--text); outline-offset:2px}
html{margin:0; padding:0; height:100%; background:var(--bg); color:var(--text); font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif; line-height:1.5; overflow:hidden; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale}
body{margin:0; padding:0; height:100%; background:transparent; color:var(--text); font-family: inherit; line-height:inherit; display:flex; flex-direction:column; height:100vh; height:100dvh; overflow:hidden}
.hidden{display:none !important}

/* bg glow - terbang selayar, subtle (imitasi React Native Animated), 3 orbs saja biar tidak slop */
.bg-glow{position:fixed; inset:0; overflow:hidden; pointer-events:none; z-index:0}
.glow{position:absolute; width:600px; height:600px; border-radius:50%; filter:blur(80px); opacity:.14; will-change:transform}
.glow--1{background:radial-gradient(circle, rgba(125,211,252,.9) 0%, transparent 70%); top:-10%; left:-10%; animation:drift1 28s ease-in-out infinite alternate}
.glow--2{background:radial-gradient(circle, rgba(196,181,253,.85) 0%, transparent 70%); bottom:-15%; right:-8%; animation:drift2 32s ease-in-out infinite alternate}
.glow--3{background:radial-gradient(circle, rgba(251,191,36,.65) 0%, transparent 70%); top:38%; left:48%; width:520px; height:520px; opacity:.10; animation:drift3 26s ease-in-out infinite alternate}
.glow--4{background:radial-gradient(circle, rgba(134,239,172,.75) 0%, transparent 70%); top:18%; right:22%; width:480px; height:480px; opacity:.08; animation:drift4 24s ease-in-out infinite alternate}
.glow--5{background:radial-gradient(circle, rgba(251,113,133,.6) 0%, transparent 70%); bottom:8%; left:12%; width:680px; height:680px; opacity:.06; animation:drift5 30s ease-in-out infinite alternate}
.gloss-log{position:absolute; height:2px; width:420px; background:linear-gradient(90deg, transparent, rgba(125,211,252,.9), rgba(196,181,253,.85), rgba(251,191,36,.7), transparent); filter:blur(1px); opacity:.16; mix-blend-mode:screen}
.gloss-log--1{top:20%; left:-24%; transform:rotate(-12deg); animation:logDrift1 18s linear infinite}
.gloss-log--2{bottom:26%; right:-24%; width:520px; background:linear-gradient(90deg, transparent, rgba(134,239,172,.8), rgba(251,113,133,.65), transparent); transform:rotate(8deg); animation:logDrift2 22s linear infinite}
@keyframes drift1{0%{transform:translate(0,0) scale(1)} 100%{transform:translate(18vw,14vh) scale(1.08)}}
@keyframes drift2{0%{transform:translate(0,0) scale(1)} 100%{transform:translate(-16vw,-12vh) scale(1.06)}}
@keyframes drift3{0%{transform:translate(-50%,-50%) scale(1)} 100%{transform:translate(-42%,-48%) scale(1.12)}}
@keyframes drift4{0%{transform:translate(0,0) scale(1)} 100%{transform:translate(-14vw,10vh) scale(1.07)}}
@keyframes drift5{0%{transform:translate(0,0) scale(1)} 100%{transform:translate(12vw,-14vh) scale(1.05)}}
@keyframes logDrift1{0%{transform:translateX(-30vw) rotate(-12deg)} 100%{transform:translateX(130vw) rotate(-12deg)}}
@keyframes logDrift2{0%{transform:translateX(30vw) rotate(8deg)} 100%{transform:translateX(-130vw) rotate(8deg)}}
@media (prefers-reduced-motion: reduce){.glow{animation:none}}

/* topbar - R-05 purpose: memberi konteks sesi (topik, ronde, waktu) bukan dekorasi */
.topbar{flex:0 0 auto; display:flex; justify-content:space-between; align-items:center; gap:16px; padding:12px 16px; border-bottom:1px solid var(--border); background:var(--bg); position:relative; z-index:1}
.hall,.dock{position:relative; z-index:1}
.topbar__left,.topbar__right{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.topbar__brand{font-size:11px; letter-spacing:.14em; font-weight:700}
.topbar__topic{font-size:11px; color:var(--muted); max-width:36ch; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; border-left:1px solid var(--border); padding-left:12px}
.topbar__meta{border-radius:var(--radius-sm);font-size:11px; color:var(--muted); border:1px solid var(--border); padding:4px 6px}
.topbar__action{border-radius:var(--radius-sm);font:inherit; font-size:11px; letter-spacing:.06em; text-transform:uppercase; padding:6px 10px; min-height:44px; min-width:44px; border:1px solid var(--border); background:var(--surface); color:var(--text); cursor:pointer}
.topbar__action:hover{border-color:#3a3a3a}
.topbar__action:focus-visible{outline:2px solid var(--text)}

.topbar__countdown{font-size:11px; color:var(--muted); border:1px dashed var(--border); padding:4px 6px; min-width:96px; text-align:center; background:var(--surface)}
.topbar__countdown:empty{display:none}
.toggle--topbar{padding:4px 8px; gap:6px}


/* hall - fixed single viewport, no page scroll (Core UX 2) */
.hall{flex:1 1 auto; display:flex; flex-direction:column; min-height:0; max-width:var(--max-width); width:100%; margin:0 auto; padding:16px; gap:16px; overflow:hidden}

/* motion card - centered, bukan template hero + 3 cards */
.motion{display:grid; place-items:center; flex:1; min-height:0}
.motion__card{border-radius:16px 12px 14px 18px;width:min(640px, 100%); background:var(--card); border:1px solid var(--border); padding:20px}
.motion__title{font-size:18px; margin:0 0 6px; letter-spacing:-.02em}
.motion__desc{font-size:12px; color:var(--muted); margin:0 0 14px}
.motion__label{font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
.motion__input{border-radius:var(--radius-sm);width:100%; margin-top:6px; background:var(--surface); color:var(--text); border:1px solid var(--border); padding:12px; font:inherit; font-size:13px; resize:vertical; min-height:84px}
.motion__input:focus{outline:none; border-color:#3a3a3a}
.motion__row{display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:10px; flex-wrap:wrap}
.motion__hint{font-size:11px; color:var(--muted)}
.motion__examples{display:flex; gap:8px; flex-wrap:wrap; margin-top:14px; align-items:center}
.motion__examples-label{font-size:11px; color:var(--muted)}
.field-error{border-radius:var(--radius-sm);font-size:11px; color:#fbbf24; border:1px solid rgba(251,191,36,.3); background:rgba(251,191,36,.08); padding:8px; margin:10px 0 0}
.motion__note{border-radius:var(--radius-sm);margin:12px 0; padding:12px; border:1px dashed var(--border); background:var(--surface)}
.motion__note-title{font-size:11px; letter-spacing:.08em; text-transform:uppercase; margin:0 0 6px; color:var(--text)}
.motion__note-text{font-size:11px; color:var(--muted); margin:0 0 6px; line-height:1.5}
.motion__note-text:last-child{margin:0}

/* buttons - R-15: CTAs spesifik, bukan Get Started */
.btn{border-radius:var(--radius-sm);font:inherit; font-size:11px; letter-spacing:.06em; text-transform:uppercase; padding:10px 14px; min-height:44px; min-width:44px; border:1px solid var(--border); background:var(--surface); color:var(--text); cursor:pointer}
.btn:hover{border-color:#3a3a3a}
.btn--primary{background:var(--text); color:var(--bg); border-color:var(--text)}
.btn:disabled{opacity:.45; cursor:not-allowed}
.chip{border-radius:var(--radius-sm);font:inherit; font-size:11px; padding:6px 10px; min-height:44px; border:1px solid var(--border); background:transparent; color:var(--muted); cursor:pointer}
.chip:hover{color:var(--text); border-color:#3a3a3a}

/* stage - spatial fixed 4 agents + center floor; kartu uniform sengaja karena identitas dari posisi tetap (R-14, RHYTHM 1) */
.stage{flex:1; display:flex; flex-direction:column; min-height:0; gap:12px; overflow:hidden}
.stage__grid{flex:1; display:grid; grid-template-columns:1fr 1.6fr 1fr; grid-template-rows:1fr auto 1fr; gap:12px; min-height:0; overflow:hidden; position:relative}
.connections{position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:0}
.connection{fill:none; stroke-width:1.2; stroke-dasharray:5 7; stroke-linecap:round; opacity:0; filter:drop-shadow(0 0 4px currentColor); transition:opacity .3s}
.connection--eng{stroke:var(--eng)}
.connection--phil{stroke:var(--phil)}
.connection--law{stroke:var(--law)}
:root{
  --bg:#0f0f0f;
  --surface:#171717;
  --card:#1c1c1c;
  --border:#2a2a2a;
  --text:#ededed;
  --muted:#9a9a9a;
  --eng:#7dd3fc;
  --phil:#c4b5fd;
  --law:#fbbf24;
  --men:#fb7185;
  --user:#86efac;
  --max-width:1280px;
  --radius:10px;
  --radius-sm:8px;
}
*{box-sizing:border-box; scrollbar-width:none; -ms-overflow-style:none}
*::-webkit-scrollbar{display:none}
*:focus-visible{outline:2px solid var(--text); outline-offset:2px}
html{margin:0; padding:0; height:100%; background:var(--bg); color:var(--text); font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif; line-height:1.5; overflow:hidden; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale}
body{margin:0; padding:0; height:100%; background:transparent; color:var(--text); font-family: inherit; line-height:inherit; display:flex; flex-direction:column; height:100vh; height:100dvh; overflow:hidden}
.hidden{display:none !important}

/* bg glow - terbang selayar, subtle (imitasi React Native Animated), 3 orbs saja biar tidak slop */
.bg-glow{position:fixed; inset:0; overflow:hidden; pointer-events:none; z-index:0}
.glow{position:absolute; width:600px; height:600px; border-radius:50%; filter:blur(80px); opacity:.14; will-change:transform}
.glow--1{background:radial-gradient(circle, rgba(125,211,252,.9) 0%, transparent 70%); top:-10%; left:-10%; animation:drift1 28s ease-in-out infinite alternate}
.glow--2{background:radial-gradient(circle, rgba(196,181,253,.85) 0%, transparent 70%); bottom:-15%; right:-8%; animation:drift2 32s ease-in-out infinite alternate}
.glow--3{background:radial-gradient(circle, rgba(251,191,36,.65) 0%, transparent 70%); top:38%; left:48%; width:520px; height:520px; opacity:.10; animation:drift3 26s ease-in-out infinite alternate}
.glow--4{background:radial-gradient(circle, rgba(134,239,172,.75) 0%, transparent 70%); top:18%; right:22%; width:480px; height:480px; opacity:.08; animation:drift4 24s ease-in-out infinite alternate}
.glow--5{background:radial-gradient(circle, rgba(251,113,133,.6) 0%, transparent 70%); bottom:8%; left:12%; width:680px; height:680px; opacity:.06; animation:drift5 30s ease-in-out infinite alternate}
.gloss-log{position:absolute; height:2px; width:420px; background:linear-gradient(90deg, transparent, rgba(125,211,252,.9), rgba(196,181,253,.85), rgba(251,191,36,.7), transparent); filter:blur(1px); opacity:.16; mix-blend-mode:screen}
.gloss-log--1{top:20%; left:-24%; transform:rotate(-12deg); animation:logDrift1 18s linear infinite}
.gloss-log--2{bottom:26%; right:-24%; width:520px; background:linear-gradient(90deg, transparent, rgba(134,239,172,.8), rgba(251,113,133,.65), transparent); transform:rotate(8deg); animation:logDrift2 22s linear infinite}
@keyframes drift1{0%{transform:translate(0,0) scale(1)} 100%{transform:translate(18vw,14vh) scale(1.08)}}
@keyframes drift2{0%{transform:translate(0,0) scale(1)} 100%{transform:translate(-16vw,-12vh) scale(1.06)}}
@keyframes drift3{0%{transform:translate(-50%,-50%) scale(1)} 100%{transform:translate(-42%,-48%) scale(1.12)}}
@keyframes drift4{0%{transform:translate(0,0) scale(1)} 100%{transform:translate(-14vw,10vh) scale(1.07)}}
@keyframes drift5{0%{transform:translate(0,0) scale(1)} 100%{transform:translate(12vw,-14vh) scale(1.05)}}
@keyframes logDrift1{0%{transform:translateX(-30vw) rotate(-12deg)} 100%{transform:translateX(130vw) rotate(-12deg)}}
@keyframes logDrift2{0%{transform:translateX(30vw) rotate(8deg)} 100%{transform:translateX(-130vw) rotate(8deg)}}
@media (prefers-reduced-motion: reduce){.glow{animation:none}}

/* topbar - R-05 purpose: memberi konteks sesi (topik, ronde, waktu) bukan dekorasi */
.topbar{flex:0 0 auto; display:flex; justify-content:space-between; align-items:center; gap:16px; padding:12px 16px; border-bottom:1px solid var(--border); background:var(--bg); position:relative; z-index:1}
.hall,.dock{position:relative; z-index:1}
.topbar__left,.topbar__right{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.topbar__brand{font-size:11px; letter-spacing:.14em; font-weight:700}
.topbar__topic{font-size:11px; color:var(--muted); max-width:36ch; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; border-left:1px solid var(--border); padding-left:12px}
.topbar__meta{border-radius:var(--radius-sm);font-size:11px; color:var(--muted); border:1px solid var(--border); padding:4px 6px}
.topbar__action{border-radius:var(--radius-sm);font:inherit; font-size:11px; letter-spacing:.06em; text-transform:uppercase; padding:6px 10px; min-height:44px; min-width:44px; border:1px solid var(--border); background:var(--surface); color:var(--text); cursor:pointer}
.topbar__action:hover{border-color:#3a3a3a}
.topbar__action:focus-visible{outline:2px solid var(--text)}

.topbar__countdown{font-size:11px; color:var(--muted); border:1px dashed var(--border); padding:4px 6px; min-width:96px; text-align:center; background:var(--surface)}
.topbar__countdown:empty{display:none}
.toggle--topbar{padding:4px 8px; gap:6px}


/* hall - fixed single viewport, no page scroll (Core UX 2) */
.hall{flex:1 1 auto; display:flex; flex-direction:column; min-height:0; max-width:var(--max-width); width:100%; margin:0 auto; padding:16px; gap:16px; overflow:hidden}

/* motion card - centered, bukan template hero + 3 cards */
.motion{display:grid; place-items:center; flex:1; min-height:0}
.motion__card{border-radius:16px 12px 14px 18px;width:min(640px, 100%); background:var(--card); border:1px solid var(--border); padding:20px}
.motion__title{font-size:18px; margin:0 0 6px; letter-spacing:-.02em}
.motion__desc{font-size:12px; color:var(--muted); margin:0 0 14px}
.motion__label{font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
.motion__input{border-radius:var(--radius-sm);width:100%; margin-top:6px; background:var(--surface); color:var(--text); border:1px solid var(--border); padding:12px; font:inherit; font-size:13px; resize:vertical; min-height:84px}
.motion__input:focus{outline:none; border-color:#3a3a3a}
.motion__row{display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:10px; flex-wrap:wrap}
.motion__hint{font-size:11px; color:var(--muted)}
.motion__examples{display:flex; gap:8px; flex-wrap:wrap; margin-top:14px; align-items:center}
.motion__examples-label{font-size:11px; color:var(--muted)}
.field-error{border-radius:var(--radius-sm);font-size:11px; color:#fbbf24; border:1px solid rgba(251,191,36,.3); background:rgba(251,191,36,.08); padding:8px; margin:10px 0 0}
.motion__note{border-radius:var(--radius-sm);margin:12px 0; padding:12px; border:1px dashed var(--border); background:var(--surface)}
.motion__note-title{font-size:11px; letter-spacing:.08em; text-transform:uppercase; margin:0 0 6px; color:var(--text)}
.motion__note-text{font-size:11px; color:var(--muted); margin:0 0 6px; line-height:1.5}
.motion__note-text:last-child{margin:0}

/* buttons - R-15: CTAs spesifik, bukan Get Started */
.btn{border-radius:var(--radius-sm);font:inherit; font-size:11px; letter-spacing:.06em; text-transform:uppercase; padding:10px 14px; min-height:44px; min-width:44px; border:1px solid var(--border); background:var(--surface); color:var(--text); cursor:pointer}
.btn:hover{border-color:#3a3a3a}
.btn--primary{background:var(--text); color:var(--bg); border-color:var(--text)}
.btn:disabled{opacity:.45; cursor:not-allowed}
.chip{border-radius:var(--radius-sm);font:inherit; font-size:11px; padding:6px 10px; min-height:44px; border:1px solid var(--border); background:transparent; color:var(--muted); cursor:pointer}
.chip:hover{color:var(--text); border-color:#3a3a3a}

/* stage - spatial fixed 4 agents + center floor; kartu uniform sengaja karena identitas dari posisi tetap (R-14, RHYTHM 1) */
.stage{flex:1; display:flex; flex-direction:column; min-height:0; gap:12px; overflow:hidden}
.stage__grid{flex:1; display:grid; grid-template-columns:1fr 1.6fr 1fr; grid-template-rows:1fr auto 1fr; gap:12px; min-height:0; overflow:hidden; position:relative}
.connections{position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:0}
.connection{fill:none; stroke-width:1.2; stroke-dasharray:5 7; stroke-linecap:round; opacity:0; filter:drop-shadow(0 0 4px currentColor); transition:opacity .3s}
.connection--eng{stroke:var(--eng)}
.connection--phil{stroke:var(--phil)}
.connection--law{stroke:var(--law)}
.connection--men{stroke:var(--men)}

.agent-card--arka{border-left:2px solid var(--eng)}
.agent-card--bara{border-left:2px solid var(--men)}
.agent-card--nara{border-left:2px solid var(--phil)}
.agent-card--raka{border-left:2px solid var(--law)}
.agent-card__avatar--arka{color:var(--eng); border-color:rgba(125,211,252,.35); border-radius:42% 58% 45% 55% / 45% 45% 55% 55%}
.agent-card__avatar--bara{color:var(--men); border-color:rgba(251,113,133,.35); border-radius:60% 40% 55% 45% / 50% 60% 40% 50%}
.agent-card__avatar--nara{color:var(--phil); border-color:rgba(196,181,253,.35); border-radius:35% 65% 45% 55% / 55% 45% 60% 40%}
.agent-card__avatar--raka{color:var(--law); border-color:rgba(251,191,36,.35); border-radius:55% 45% 40% 60% / 45% 35% 65% 55%}
.floor__avatar--arka{color:var(--eng); border-color:rgba(125,211,252,.35); background:rgba(125,211,252,.08); border-radius:42% 58% 45% 55% / 45% 45% 55% 55%}
.floor__avatar--bara{color:var(--men); border-color:rgba(251,113,133,.35); background:rgba(251,113,133,.08); border-radius:60% 40% 55% 45% / 50% 60% 40% 50%}
.floor__avatar--nara{color:var(--phil); border-color:rgba(196,181,253,.35); background:rgba(196,181,253,.08); border-radius:35% 65% 45% 55% / 55% 45% 60% 40%}
.floor__avatar--raka{color:var(--law); border-color:rgba(251,191,36,.35); background:rgba(251,191,36,.08); border-radius:55% 45% 40% 60% / 45% 35% 65% 55%}
.floor--arka{border-color:rgba(125,211,252,.35)}
.floor--bara{border-color:rgba(251,113,133,.35)}
.floor--nara{border-color:rgba(196,181,253,.35)}
.floor--raka{border-color:rgba(251,191,36,.35)}
.floor__speaker--arka{color:var(--eng)}
.floor__speaker--bara{color:var(--men)}
.floor__speaker--nara{color:var(--phil)}
.floor__speaker--raka{color:var(--law)}
.thinking__avatar--arka{color:var(--eng); border-color:rgba(125,211,252,.35); border-radius:42% 58% 45% 55% / 45% 45% 55% 55%}
.thinking__avatar--bara{color:var(--men); border-color:rgba(251,113,133,.35); border-radius:60% 40% 55% 45% / 50% 60% 40% 50%}
.thinking__avatar--nara{color:var(--phil); border-color:rgba(196,181,253,.35); border-radius:35% 65% 45% 55% / 55% 45% 60% 40%}
.thinking__avatar--raka{color:var(--law); border-color:rgba(251,191,36,.35); border-radius:55% 45% 40% 60% / 45% 35% 65% 55%}
.connection--arka{stroke:var(--eng)}
.connection--bara{stroke:var(--men)}
.connection--nara{stroke:var(--phil)}
.connection--raka{stroke:var(--law)}
.panel__body .turn--arka{border-color:var(--eng)}
.panel__body .turn--bara{border-color:var(--men)}
.panel__body .turn--nara{border-color:var(--phil)}
.panel__body .turn--raka{border-color:var(--law)}
.turn__speaker--arka{color:var(--eng)}
.turn__speaker--bara{color:var(--men)}
.turn__speaker--nara{color:var(--phil)}
.turn__speaker--raka{color:var(--law)}

.connection--active{opacity:.85; animation:dashFlow 1s linear infinite, springIn .45s cubic-bezier(0.34,1.56,0.64,1)}
@keyframes dashFlow{to{stroke-dashoffset:-24}}
@keyframes springIn{from{stroke-dashoffset:24; opacity:0} to{stroke-dashoffset:0; opacity:.85}}
.agent-card,.floor{position:relative; z-index:1}
.agent-card{border-radius:var(--radius);background:var(--card); border:1px solid var(--border); padding:14px; display:flex; flex-direction:column; justify-content:space-between; min-height:0; overflow:hidden}
.agent-card--speaking{border-color:var(--text); animation:cardTyping 1.4s ease-in-out infinite}
.agent-card--thinking{border-color:#3a3a3a; animation:cardPulse 1.2s ease-in-out infinite}
.agent-card--want{border-color:rgba(251,113,133,.5); animation:cardPulse 0.9s ease-in-out infinite}
@keyframes cardPulse{0%,100%{transform:translateY(0); box-shadow:0 0 0 rgba(237,237,237,0)} 50%{transform:translateY(-1px); box-shadow:0 4px 12px rgba(0,0,0,.2)}}
@keyframes cardTyping{0%,100%{border-color:var(--text)} 50%{border-color:#3a3a3a}}
.agent-card--thinking .agent-card__avatar{animation:avatarThink 1s ease-in-out infinite}
.agent-card--speaking .agent-card__avatar{animation:avatarType 0.6s ease-in-out infinite}
@keyframes avatarThink{0%,100%{transform:scale(1)} 50%{transform:scale(1.06)}}
@keyframes avatarType{0%,100%{transform:translateY(0)} 50%{transform:translateY(-1px)}}
@media (prefers-reduced-motion: reduce){.agent-card--thinking,.agent-card--speaking,.agent-card--want,.agent-card__avatar{animation:none}}
.agent-card__head{display:flex; gap:8px; align-items:center}
.agent-card__id{border-radius:6px;width:22px; height:22px; display:grid; place-items:center; border:1px solid var(--border); font-size:11px; color:var(--muted); flex:0 0 auto}
.agent-card__avatar{border-radius:6px;width:22px; height:22px; display:grid; place-items:center; border:1px solid var(--border); font-size:10px; background:var(--surface); flex:0 0 auto}
.agent-card__avatar--eng{color:var(--eng); border-color:rgba(125,211,252,.35); border-radius:42% 58% 45% 55% / 45% 45% 55% 55%}
.agent-card__avatar--phil{color:var(--phil); border-color:rgba(196,181,253,.35); border-radius:60% 40% 55% 45% / 50% 60% 40% 50%}
.agent-card__avatar--law{color:var(--law); border-color:rgba(251,191,36,.35); border-radius:35% 65% 45% 55% / 55% 45% 60% 40%}
.agent-card__avatar--men{color:var(--men); border-color:rgba(251,113,133,.35); border-radius:55% 45% 40% 60% / 45% 35% 65% 55%}
.agent-card--eng{border-left:2px solid var(--eng)}
.agent-card--phil{border-left:2px solid var(--phil)}
.agent-card--law{border-left:2px solid var(--law)}
.agent-card--men{border-left:2px solid var(--men)}
.agent-card__name{font-size:11px; letter-spacing:.06em; text-transform:uppercase}
.agent-card__role{font-size:11px; color:var(--muted); margin:6px 0 8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.agent-card__state{font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin:0; min-height:16px}
.agent-card--speaking .agent-card__state{color:var(--text)}
.agent-card--want .agent-card__state{color:var(--men)}
.agent-card__meta{margin-top:8px; display:flex; justify-content:space-between; gap:8px; font-size:11px; color:var(--muted)}
/* positions - spatially consistent; shape agak abstrak, tidak kotak konsisten */
#card-engineer{grid-column:1; grid-row:1; border-radius:14px 10px 16px 8px}
#card-philosopher{grid-column:3; grid-row:1; border-radius:10px 16px 8px 14px}
.floor{border-radius:18px 14px 16px 12px;grid-column:2; grid-row:2; background:var(--surface); border:1px solid var(--border); padding:16px; display:flex; flex-direction:column; gap:8px; min-height:0; overflow:hidden}
.floor__label{font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin:0}
.floor__speaker{font-size:12px; letter-spacing:.06em; text-transform:uppercase; margin:0}
.floor__text{font-size:13px; margin:0; overflow:auto; max-height:18vh; line-height:1.6; white-space:pre-wrap; word-break:break-word}
.floor__meta{font-size:11px; color:var(--muted); margin:0}
.floor__head{display:flex; gap:10px; align-items:center}
.floor__head-text{flex:1; min-width:0}
.floor__avatar{border-radius:6px;width:28px; height:28px; display:grid; place-items:center; border:1px solid var(--border); background:var(--card); font-size:12px; color:var(--muted); flex:0 0 auto}
.floor__avatar--eng{color:var(--eng); border-color:rgba(125,211,252,.35); background:rgba(125,211,252,.08); border-radius:42% 58% 45% 55% / 45% 45% 55% 55%}
.floor__avatar--phil{color:var(--phil); border-color:rgba(196,181,253,.35); background:rgba(196,181,253,.08); border-radius:60% 40% 55% 45% / 50% 60% 40% 50%}
.floor__avatar--law{color:var(--law); border-color:rgba(251,191,36,.35); background:rgba(251,191,36,.08); border-radius:35% 65% 45% 55% / 55% 45% 60% 40%}
.floor__avatar--men{color:var(--men); border-color:rgba(251,113,133,.35); background:rgba(251,113,133,.08); border-radius:55% 45% 40% 60% / 45% 35% 65% 55%}
.floor__avatar--user{color:var(--user); border-color:rgba(134,239,172,.35); background:rgba(134,239,172,.08)}
.floor__avatar--system{color:var(--muted); border-color:var(--border)}
.floor--eng{border-color:rgba(125,211,252,.35)}
.floor--phil{border-color:rgba(196,181,253,.35)}
.floor--law{border-color:rgba(251,191,36,.35)}
.floor--men{border-color:rgba(251,113,133,.35)}
.floor--user{border-color:rgba(134,239,172,.35)}
.floor__speaker--eng{color:var(--eng)}
.floor__speaker--phil{color:var(--phil)}
.floor__speaker--law{color:var(--law)}
.floor__speaker--men{color:var(--men)}
.floor__speaker--user{color:var(--user)}
.floor__atmosphere{font-size:11px; color:var(--muted); margin:0; border-top:1px solid var(--border); padding-top:8px}

.thinking{display:flex; align-items:center; gap:8px; padding:8px 10px; border:1px solid var(--border); background:var(--card); margin:0}
.thinking__avatar{width:22px; height:22px; display:grid; place-items:center; border:1px solid var(--border); background:var(--surface); font-size:10px; flex:0 0 auto}
.thinking__avatar--eng{color:var(--eng); border-color:rgba(125,211,252,.35); border-radius:42% 58% 45% 55% / 45% 45% 55% 55%}
.thinking__avatar--phil{color:var(--phil); border-color:rgba(196,181,253,.35); border-radius:60% 40% 55% 45% / 50% 60% 40% 50%}
.thinking__avatar--law{color:var(--law); border-color:rgba(251,191,36,.35); border-radius:35% 65% 45% 55% / 55% 45% 60% 40%}
.thinking__avatar--men{color:var(--men); border-color:rgba(251,113,133,.35); border-radius:55% 45% 40% 60% / 45% 35% 65% 55%}
.thinking__text{font-size:11px; color:var(--muted); flex:1}
.thinking__dots{display:flex; gap:3px; align-items:center}
.thinking__dots i{width:4px; height:4px; background:var(--muted); border-radius:999px; opacity:.6; animation:thinkPulse 1s infinite}
.thinking__dots i:nth-child(2){animation-delay:.15s}
.thinking__dots i:nth-child(3){animation-delay:.3s}
@keyframes thinkPulse{0%,80%,100%{opacity:.3; transform:scale(.8)} 40%{opacity:1; transform:scale(1)}}
.floor__text--typing::after{content:"▌"; margin-left:2px; animation:caretBlink 1s step-end infinite; color:var(--muted)}
@keyframes caretBlink{0%,50%{opacity:1} 51%,100%{opacity:0}}

#card-lawyer{grid-column:1; grid-row:3; border-radius:8px 14px 12px 16px}
#card-menace{grid-column:3; grid-row:3; border-radius:16px 8px 10px 14px}
#card-arka{grid-column:1; grid-row:1; border-radius:14px 10px 16px 8px}
#card-bara{grid-column:3; grid-row:1; border-radius:10px 16px 8px 14px}
#card-nara{grid-column:1; grid-row:3; border-radius:8px 14px 12px 16px}
#card-raka{grid-column:3; grid-row:3; border-radius:16px 8px 10px 14px}
.stage__budget{border-radius:var(--radius-sm);display:flex; align-items:center; gap:10px; border:1px solid var(--border); background:var(--card); padding:8px 10px}
.budget-bar{border-radius:999px;flex:1; height:4px; background:#262626; overflow:hidden}
.budget-bar__fill{border-radius:999px;height:100%; background:var(--text); width:0; transition:width .3s}
.budget-detail{font-size:11px; color:var(--muted); margin:0; white-space:nowrap}

/* dock - bottom, always visible, no page scroll */
.dock{flex:0 0 auto; border-top:1px solid var(--border); background:var(--bg); padding:10px 16px; max-width:var(--max-width); width:100%; margin:0 auto}
.dock__label{font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
.dock__row{display:flex; gap:8px; margin-top:6px; align-items:flex-end}
.dock__input{border-radius:var(--radius-sm);flex:1; background:var(--card); color:var(--text); border:1px solid var(--border); padding:10px; font:inherit; font-size:13px; resize:none; min-height:42px; max-height:84px; overflow:auto}
.dock__input:focus{outline:none; border-color:#3a3a3a}
.dock__foot{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:8px}
.dock__hint{font-size:11px; color:var(--muted)}
.toggle{border-radius:var(--radius-sm);display:flex; align-items:center; gap:8px; background:transparent; border:1px solid var(--border); padding:6px 10px; min-height:44px; cursor:pointer; font:inherit; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin-left:auto}
.toggle__track{border-radius:999px;width:36px; height:20px; background:#262626; border:1px solid var(--border); position:relative; display:block; flex:0 0 auto}
.toggle__thumb{border-radius:999px;position:absolute; top:2px; left:2px; width:14px; height:14px; background:var(--muted); transition:transform .2s, background .2s}
.toggle[aria-checked="true"] .toggle__thumb{transform:translateX(16px); background:var(--text)}
.toggle[aria-checked="true"] .toggle__track{border-radius:999px;background:var(--card); border-color:#3a3a3a}
.toggle:focus-visible{outline:2px solid var(--text); outline-offset:2px}
.toggle__label{white-space:nowrap}

/* panel overlay - transcript & summary, no primary page scroll; blur 4px hanya di overlay untuk memisahkan layer dari hall (R-10 dose cap 1 elemen) */
.panel{position:fixed; inset:0; background:rgba(15,15,15,.72); backdrop-filter:blur(4px); display:grid; place-items:center; padding:16px; z-index:20}
.panel__inner{border-radius:14px 18px 12px 16px;width:min(760px, 100%); max-height:min(78vh, 720px); background:var(--card); border:1px solid var(--border); display:flex; flex-direction:column; overflow:hidden}
.panel__head{display:flex; justify-content:space-between; align-items:center; padding:12px; border-bottom:1px solid var(--border)}
.panel__title{font-size:12px; letter-spacing:.08em; text-transform:uppercase; margin:0}
.panel__close{border-radius:var(--radius-sm);font:inherit; font-size:11px; letter-spacing:.06em; text-transform:uppercase; padding:6px 10px; min-height:44px; min-width:44px; border:1px solid var(--border); background:var(--surface); color:var(--text); cursor:pointer}
.panel__body{padding:12px; overflow:auto; flex:1; min-height:0}
.panel__empty{font-size:12px; color:var(--muted); margin:0; padding:12px; border:1px dashed var(--border); background:var(--surface)}
.panel__body .turn{border-radius:4px;margin-bottom:12px; padding-left:8px; border-left:2px solid var(--border)}
.panel__body .turn--eng{border-color:var(--eng)}
.panel__body .turn--phil{border-color:var(--phil)}
.panel__body .turn--law{border-color:var(--law)}
.panel__body .turn--men{border-color:var(--men)}
.panel__body .turn--user{border-color:var(--user); background:rgba(134,239,172,.06)}
.panel__body .turn--system{border-color:var(--muted)}
.turn__head{display:flex; gap:8px; align-items:center; font-size:11px; margin-bottom:4px}
.turn__speaker{letter-spacing:.06em; text-transform:uppercase; font-weight:700}
.turn__speaker--eng{color:var(--eng)} .turn__speaker--phil{color:var(--phil)} .turn__speaker--law{color:var(--law)} .turn__speaker--men{color:var(--men)} .turn__speaker--user{color:var(--user)} .turn__speaker--system{color:var(--muted)}
.turn__meta{font-size:10px; color:var(--muted)}
.turn__body{font-size:13px; white-space:pre-wrap; word-break:break-word}
.panel__actions{display:flex; gap:8px; padding:12px; border-top:1px solid var(--border)}


.summary__grid{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:10px}
.summary__card{border:1px solid var(--border); background:var(--surface); padding:10px; overflow:hidden}
.summary__card--full{grid-column:1 / -1}
.summary__card-title{font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin:0 0 6px}
.summary__card-text{font-size:12px; margin:0; line-height:1.5}
.summary__card-list{font-size:12px; margin:0; padding-left:16px; line-height:1.5}
.summary__card-list li{margin-bottom:4px}
.summary__stat{font-size:11px; color:var(--muted); border:1px solid var(--border); background:var(--surface); padding:8px; margin:0}
@media(max-width:640px){.summary__grid{grid-template-columns:1fr}}

/* responsive - keep viewport fixed, compress, no horizontal scroll */
@media(max-width:900px){
  .stage__grid{grid-template-columns:1fr 1fr; grid-template-rows:auto 1fr auto; gap:10px}
  #card-engineer{grid-column:1; grid-row:1}
  #card-philosopher{grid-column:2; grid-row:1}
  .floor{grid-column:1 / span 2; grid-row:2; max-height:none}
  .floor__text{max-height:20vh}
  #card-lawyer{grid-column:1; grid-row:3}
  #card-menace{grid-column:2; grid-row:3}
  #card-nara{grid-column:1; grid-row:3}
  #card-raka{grid-column:2; grid-row:3}
  #card-arka{grid-column:1; grid-row:1}
  #card-bara{grid-column:2; grid-row:1}
  .dock__row{flex-wrap:wrap}
  .topbar__topic{max-width:18ch}
}
@media(max-width:560px){
  .hall{padding:10px}
  .agent-card{padding:10px}
  .floor{padding:12px}
}

.connection--active{opacity:.85; animation:dashFlow 1s linear infinite, springIn .45s cubic-bezier(0.34,1.56,0.64,1)}
@keyframes dashFlow{to{stroke-dashoffset:-24}}
@keyframes springIn{from{stroke-dashoffset:24; opacity:0} to{stroke-dashoffset:0; opacity:.85}}
.agent-card,.floor{position:relative; z-index:1}
.agent-card{border-radius:var(--radius);background:var(--card); border:1px solid var(--border); padding:14px; display:flex; flex-direction:column; justify-content:space-between; min-height:0; overflow:hidden}
.agent-card--speaking{border-color:var(--text); animation:cardTyping 1.4s ease-in-out infinite}
.agent-card--thinking{border-color:#3a3a3a; animation:cardPulse 1.2s ease-in-out infinite}
.agent-card--want{border-color:rgba(251,113,133,.5); animation:cardPulse 0.9s ease-in-out infinite}
@keyframes cardPulse{0%,100%{transform:translateY(0); box-shadow:0 0 0 rgba(237,237,237,0)} 50%{transform:translateY(-1px); box-shadow:0 4px 12px rgba(0,0,0,.2)}}
@keyframes cardTyping{0%,100%{border-color:var(--text)} 50%{border-color:#3a3a3a}}
.agent-card--thinking .agent-card__avatar{animation:avatarThink 1s ease-in-out infinite}
.agent-card--speaking .agent-card__avatar{animation:avatarType 0.6s ease-in-out infinite}
@keyframes avatarThink{0%,100%{transform:scale(1)} 50%{transform:scale(1.06)}}
@keyframes avatarType{0%,100%{transform:translateY(0)} 50%{transform:translateY(-1px)}}
@media (prefers-reduced-motion: reduce){.agent-card--thinking,.agent-card--speaking,.agent-card--want,.agent-card__avatar{animation:none}}
.agent-card__head{display:flex; gap:8px; align-items:center}
.agent-card__id{border-radius:6px;width:22px; height:22px; display:grid; place-items:center; border:1px solid var(--border); font-size:11px; color:var(--muted); flex:0 0 auto}
.agent-card__avatar{border-radius:6px;width:22px; height:22px; display:grid; place-items:center; border:1px solid var(--border); font-size:10px; background:var(--surface); flex:0 0 auto}
.agent-card__avatar--eng{color:var(--eng); border-color:rgba(125,211,252,.35); border-radius:42% 58% 45% 55% / 45% 45% 55% 55%}
.agent-card__avatar--phil{color:var(--phil); border-color:rgba(196,181,253,.35); border-radius:60% 40% 55% 45% / 50% 60% 40% 50%}
.agent-card__avatar--law{color:var(--law); border-color:rgba(251,191,36,.35); border-radius:35% 65% 45% 55% / 55% 45% 60% 40%}
.agent-card__avatar--men{color:var(--men); border-color:rgba(251,113,133,.35); border-radius:55% 45% 40% 60% / 45% 35% 65% 55%}
.agent-card--eng{border-left:2px solid var(--eng)}
.agent-card--phil{border-left:2px solid var(--phil)}
.agent-card--law{border-left:2px solid var(--law)}
.agent-card--men{border-left:2px solid var(--men)}
.agent-card__name{font-size:11px; letter-spacing:.06em; text-transform:uppercase}
.agent-card__role{font-size:11px; color:var(--muted); margin:6px 0 8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.agent-card__state{font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin:0; min-height:16px}
.agent-card--speaking .agent-card__state{color:var(--text)}
.agent-card--want .agent-card__state{color:var(--men)}
.agent-card__meta{margin-top:8px; display:flex; justify-content:space-between; gap:8px; font-size:11px; color:var(--muted)}
/* positions - spatially consistent; shape agak abstrak, tidak kotak konsisten */
#card-engineer{grid-column:1; grid-row:1; border-radius:14px 10px 16px 8px}
#card-philosopher{grid-column:3; grid-row:1; border-radius:10px 16px 8px 14px}
.floor{border-radius:18px 14px 16px 12px;grid-column:2; grid-row:2; background:var(--surface); border:1px solid var(--border); padding:16px; display:flex; flex-direction:column; gap:8px; min-height:0; overflow:hidden}
.floor__label{font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin:0}
.floor__speaker{font-size:12px; letter-spacing:.06em; text-transform:uppercase; margin:0}
.floor__text{font-size:13px; margin:0; overflow:auto; max-height:18vh; line-height:1.6; white-space:pre-wrap; word-break:break-word}
.floor__meta{font-size:11px; color:var(--muted); margin:0}
.floor__head{display:flex; gap:10px; align-items:center}
.floor__head-text{flex:1; min-width:0}
.floor__avatar{border-radius:6px;width:28px; height:28px; display:grid; place-items:center; border:1px solid var(--border); background:var(--card); font-size:12px; color:var(--muted); flex:0 0 auto}
.floor__avatar--eng{color:var(--eng); border-color:rgba(125,211,252,.35); background:rgba(125,211,252,.08); border-radius:42% 58% 45% 55% / 45% 45% 55% 55%}
.floor__avatar--phil{color:var(--phil); border-color:rgba(196,181,253,.35); background:rgba(196,181,253,.08); border-radius:60% 40% 55% 45% / 50% 60% 40% 50%}
.floor__avatar--law{color:var(--law); border-color:rgba(251,191,36,.35); background:rgba(251,191,36,.08); border-radius:35% 65% 45% 55% / 55% 45% 60% 40%}
.floor__avatar--men{color:var(--men); border-color:rgba(251,113,133,.35); background:rgba(251,113,133,.08); border-radius:55% 45% 40% 60% / 45% 35% 65% 55%}
.floor__avatar--user{color:var(--user); border-color:rgba(134,239,172,.35); background:rgba(134,239,172,.08)}
.floor__avatar--system{color:var(--muted); border-color:var(--border)}
.floor--eng{border-color:rgba(125,211,252,.35)}
.floor--phil{border-color:rgba(196,181,253,.35)}
.floor--law{border-color:rgba(251,191,36,.35)}
.floor--men{border-color:rgba(251,113,133,.35)}
.floor--user{border-color:rgba(134,239,172,.35)}
.floor__speaker--eng{color:var(--eng)}
.floor__speaker--phil{color:var(--phil)}
.floor__speaker--law{color:var(--law)}
.floor__speaker--men{color:var(--men)}
.floor__speaker--user{color:var(--user)}
.floor__atmosphere{font-size:11px; color:var(--muted); margin:0; border-top:1px solid var(--border); padding-top:8px}

.thinking{display:flex; align-items:center; gap:8px; padding:8px 10px; border:1px solid var(--border); background:var(--card); margin:0}
.thinking__avatar{width:22px; height:22px; display:grid; place-items:center; border:1px solid var(--border); background:var(--surface); font-size:10px; flex:0 0 auto}
.thinking__avatar--eng{color:var(--eng); border-color:rgba(125,211,252,.35); border-radius:42% 58% 45% 55% / 45% 45% 55% 55%}
.thinking__avatar--phil{color:var(--phil); border-color:rgba(196,181,253,.35); border-radius:60% 40% 55% 45% / 50% 60% 40% 50%}
.thinking__avatar--law{color:var(--law); border-color:rgba(251,191,36,.35); border-radius:35% 65% 45% 55% / 55% 45% 60% 40%}
.thinking__avatar--men{color:var(--men); border-color:rgba(251,113,133,.35); border-radius:55% 45% 40% 60% / 45% 35% 65% 55%}
.thinking__text{font-size:11px; color:var(--muted); flex:1}
.thinking__dots{display:flex; gap:3px; align-items:center}
.thinking__dots i{width:4px; height:4px; background:var(--muted); border-radius:999px; opacity:.6; animation:thinkPulse 1s infinite}
.thinking__dots i:nth-child(2){animation-delay:.15s}
.thinking__dots i:nth-child(3){animation-delay:.3s}
@keyframes thinkPulse{0%,80%,100%{opacity:.3; transform:scale(.8)} 40%{opacity:1; transform:scale(1)}}
.floor__text--typing::after{content:"▌"; margin-left:2px; animation:caretBlink 1s step-end infinite; color:var(--muted)}
@keyframes caretBlink{0%,50%{opacity:1} 51%,100%{opacity:0}}

#card-lawyer{grid-column:1; grid-row:3; border-radius:8px 14px 12px 16px}
#card-menace{grid-column:3; grid-row:3; border-radius:16px 8px 10px 14px}
#card-arka{grid-column:1; grid-row:1; border-radius:14px 10px 16px 8px}
#card-bara{grid-column:3; grid-row:1; border-radius:10px 16px 8px 14px}
#card-nara{grid-column:1; grid-row:3; border-radius:8px 14px 12px 16px}
#card-raka{grid-column:3; grid-row:3; border-radius:16px 8px 10px 14px}
.stage__budget{border-radius:var(--radius-sm);display:flex; align-items:center; gap:10px; border:1px solid var(--border); background:var(--card); padding:8px 10px}
.budget-bar{border-radius:999px;flex:1; height:4px; background:#262626; overflow:hidden}
.budget-bar__fill{border-radius:999px;height:100%; background:var(--text); width:0; transition:width .3s}
.budget-detail{font-size:11px; color:var(--muted); margin:0; white-space:nowrap}

/* dock - bottom, always visible, no page scroll */
.dock{flex:0 0 auto; border-top:1px solid var(--border); background:var(--bg); padding:10px 16px; max-width:var(--max-width); width:100%; margin:0 auto}
.dock__label{font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
.dock__row{display:flex; gap:8px; margin-top:6px; align-items:flex-end}
.dock__input{border-radius:var(--radius-sm);flex:1; background:var(--card); color:var(--text); border:1px solid var(--border); padding:10px; font:inherit; font-size:13px; resize:none; min-height:42px; max-height:84px; overflow:auto}
.dock__input:focus{outline:none; border-color:#3a3a3a}
.dock__foot{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:8px}
.dock__hint{font-size:11px; color:var(--muted)}
.toggle{border-radius:var(--radius-sm);display:flex; align-items:center; gap:8px; background:transparent; border:1px solid var(--border); padding:6px 10px; min-height:44px; cursor:pointer; font:inherit; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin-left:auto}
.toggle__track{border-radius:999px;width:36px; height:20px; background:#262626; border:1px solid var(--border); position:relative; display:block; flex:0 0 auto}
.toggle__thumb{border-radius:999px;position:absolute; top:2px; left:2px; width:14px; height:14px; background:var(--muted); transition:transform .2s, background .2s}
.toggle[aria-checked="true"] .toggle__thumb{transform:translateX(16px); background:var(--text)}
.toggle[aria-checked="true"] .toggle__track{border-radius:999px;background:var(--card); border-color:#3a3a3a}
.toggle:focus-visible{outline:2px solid var(--text); outline-offset:2px}
.toggle__label{white-space:nowrap}

/* panel overlay - transcript & summary, no primary page scroll; blur 4px hanya di overlay untuk memisahkan layer dari hall (R-10 dose cap 1 elemen) */
.panel{position:fixed; inset:0; background:rgba(15,15,15,.72); backdrop-filter:blur(4px); display:grid; place-items:center; padding:16px; z-index:20}
.panel__inner{border-radius:14px 18px 12px 16px;width:min(760px, 100%); max-height:min(78vh, 720px); background:var(--card); border:1px solid var(--border); display:flex; flex-direction:column; overflow:hidden}
.panel__head{display:flex; justify-content:space-between; align-items:center; padding:12px; border-bottom:1px solid var(--border)}
.panel__title{font-size:12px; letter-spacing:.08em; text-transform:uppercase; margin:0}
.panel__close{border-radius:var(--radius-sm);font:inherit; font-size:11px; letter-spacing:.06em; text-transform:uppercase; padding:6px 10px; min-height:44px; min-width:44px; border:1px solid var(--border); background:var(--surface); color:var(--text); cursor:pointer}
.panel__body{padding:12px; overflow:auto; flex:1; min-height:0}
.panel__empty{font-size:12px; color:var(--muted); margin:0; padding:12px; border:1px dashed var(--border); background:var(--surface)}
.panel__body .turn{border-radius:4px;margin-bottom:12px; padding-left:8px; border-left:2px solid var(--border)}
.panel__body .turn--eng{border-color:var(--eng)}
.panel__body .turn--phil{border-color:var(--phil)}
.panel__body .turn--law{border-color:var(--law)}
.panel__body .turn--men{border-color:var(--men)}
.panel__body .turn--user{border-color:var(--user); background:rgba(134,239,172,.06)}
.panel__body .turn--system{border-color:var(--muted)}
.turn__head{display:flex; gap:8px; align-items:center; font-size:11px; margin-bottom:4px}
.turn__speaker{letter-spacing:.06em; text-transform:uppercase; font-weight:700}
.turn__speaker--eng{color:var(--eng)} .turn__speaker--phil{color:var(--phil)} .turn__speaker--law{color:var(--law)} .turn__speaker--men{color:var(--men)} .turn__speaker--user{color:var(--user)} .turn__speaker--system{color:var(--muted)}
.turn__meta{font-size:10px; color:var(--muted)}
.turn__body{font-size:13px; white-space:pre-wrap; word-break:break-word}
.panel__actions{display:flex; gap:8px; padding:12px; border-top:1px solid var(--border)}


.summary__grid{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:10px}
.summary__card{border:1px solid var(--border); background:var(--surface); padding:10px; overflow:hidden}
.summary__card--full{grid-column:1 / -1}
.summary__card-title{font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin:0 0 6px}
.summary__card-text{font-size:12px; margin:0; line-height:1.5}
.summary__card-list{font-size:12px; margin:0; padding-left:16px; line-height:1.5}
.summary__card-list li{margin-bottom:4px}
.summary__stat{font-size:11px; color:var(--muted); border:1px solid var(--border); background:var(--surface); padding:8px; margin:0}
@media(max-width:640px){.summary__grid{grid-template-columns:1fr}}

/* responsive - keep viewport fixed, compress, no horizontal scroll */
@media(max-width:900px){
  .stage__grid{grid-template-columns:1fr 1fr; grid-template-rows:auto 1fr auto; gap:10px}
  #card-engineer{grid-column:1; grid-row:1}
  #card-philosopher{grid-column:2; grid-row:1}
  .floor{grid-column:1 / span 2; grid-row:2; max-height:none}
  .floor__text{max-height:20vh}
  #card-lawyer{grid-column:1; grid-row:3}
  #card-menace{grid-column:2; grid-row:3}
  #card-nara{grid-column:1; grid-row:3}
  #card-raka{grid-column:2; grid-row:3}
  #card-arka{grid-column:1; grid-row:1}
  #card-bara{grid-column:2; grid-row:1}
  .dock__row{flex-wrap:wrap}
  .topbar__topic{max-width:18ch}
}
@media(max-width:560px){
  .hall{padding:10px}
  .agent-card{padding:10px}
  .floor{padding:12px}
}