/* Shared Z tokens; voice-specific layout only. */
.app-shell { display:grid; grid-template-columns:minmax(0,1.7fr) minmax(240px,1fr); gap:24px; max-width:var(--w); padding:0 var(--gutter) 48px; margin:auto; }
.room-panel,.people-panel { border:1px solid var(--line); padding:24px; min-width:0; }
.room-panel { display:flex; flex-direction:column; gap:24px; }
.room-heading,.section-head,.invite-row,.control-strip,.person { display:flex; align-items:center; gap:12px; }
.room-heading,.section-head { justify-content:space-between; }
.room-heading h2 { margin-top:8px; }
.status-pill { border:1px solid var(--line); padding:6px 12px; font:12px var(--mono); color:var(--fg-2); }
.status-pill[data-state="ready"] { color:var(--ok); }
.status-pill[data-state="connecting"] { color:var(--warn); }
.status-pill[data-state="error"] { color:var(--danger); }
.field { display:grid; gap:8px; flex:1; min-width:0; }
.field span,.low-mem-toggle,.person-state { color:var(--fg-2); font-size:13px; }
.field input { width:100%; min-width:0; padding:10px 12px; min-height:44px; border:1px solid var(--line); background:var(--bg); border-radius:0; }
.join-grid { display:grid; grid-template-columns:minmax(100px,1fr) auto auto; gap:12px; align-items:end; }
.icon-button,.primary-button,.secondary-button,.tool-button { min-height:44px; padding:10px 16px; border:1px solid var(--line); border-radius:0; background:var(--bg); color:var(--fg); cursor:pointer; }
.primary-button { background:var(--ink); color:var(--ink-fg); border-color:var(--ink); }
.app-shell button:disabled { opacity:.45; cursor:not-allowed; }
.icon-button { align-self:end; }
.tool-button[aria-pressed="true"] { color:var(--accent); border-color:var(--accent); }
.control-strip { padding:12px; background:var(--bg-2); flex-wrap:wrap; }
.meter { flex:1; min-width:60px; height:6px; background:var(--line); overflow:hidden; }
.meter span { display:block; height:100%; width:0; background:var(--accent); }
.low-mem-toggle { display:flex; align-items:center; gap:8px; cursor:pointer; }
.low-mem-toggle input { accent-color:var(--accent); }
.network-note { color:var(--warn); font-size:13px; }
.section-head { padding-bottom:20px; border-bottom:1px solid var(--line); margin-bottom:16px; }
.people-list { list-style:none; padding:0; margin:0; display:grid; gap:12px; }
.person { flex-wrap:wrap; padding:12px 0; border-bottom:1px solid var(--line-2); }
.avatar { display:grid; place-items:center; width:32px; height:32px; background:var(--bg-2); color:var(--fg); }
.person-main { flex:1; min-width:80px; }
.person-name { overflow:hidden; text-overflow:ellipsis; }
.person[data-talking="true"] { border-color:var(--ok); }
.person-volume { width:100%; height:16px; accent-color:var(--accent); }
.remote-audio { display:none; }
#toast { position:fixed; bottom:20px; right:20px; max-width:calc(100vw - 40px); opacity:0; pointer-events:none; }
#toast[data-show="true"] { opacity:1; }
@media(max-width:760px) { .app-shell { grid-template-columns:1fr; } .room-panel,.people-panel { padding:16px; } .join-grid { grid-template-columns:1fr 1fr; } .join-grid .field { grid-column:1/-1; } }