/* VEYTU V5.6 UX refinement. Presentation only; original brand and media styles stay intact. */
:root { --ux-gutter:clamp(16px,3.2vw,32px); --orbit-rotation:45s; }
html { overflow-x:clip; }
body { min-width:0; overflow-x:clip; }
.app { min-height:100vh; min-height:100dvh; }
.topbar { align-items:center; }
.topbar .brand:focus-visible {outline-offset:6px}
.room-view {padding-bottom:32px; }
.call-panel {border-radius:20px; padding:14px 18px; margin-bottom:14px; }
.call-panel .call-controls {gap:8px; }
.call-panel .call-controls button{min-height:44px; }
.call-status {gap:12px; }
.call-status #audioStatus{font-size:clamp(13px,1.6vw,16px);line-height:1.35;}
#audioError:empty, #audioGrant:empty{display:none;}
.audio-roster {display:flex; gap:6px; flex-wrap:wrap; align-items:center; margin-top:8px; max-height:76px; overflow:hidden; }
.audio-roster .audio-person {display:inline-flex;align-items:center;gap:6px;max-width:min(210px,100%);font-size:12px; color:var(--muted);padding:5px 8px;background:var(--bg);border:1px solid var(--line);border-radius:999px;}
.audio-roster .audio-person strong{font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:105px;color:var(--ink)}
.audio-roster .audio-person .audio-indicator{height:6px;width:6px;border-radius:99px;background:#aebbb5;flex-shrink:0}
.audio-roster .audio-person[data-audio=transmitting] .audio-indicator{background:var(--jade)}
.audio-roster .audio-person[data-audio=listening] .audio-indicator{background:#7dbda3}
.audio-roster .audio-person[data-audio=outside] .audio-indicator{background:#c3c9c6}
.audio-roster-count {font-size:11px;color:var(--muted);white-space:nowrap;}
.room-toolbar {max-width:100%;padding:8px 0 16px;display:flex;flex-wrap:wrap;gap:7px;}
.room-toolbar .tiny {min-height:42px;border-radius:13px;}
.orbit-panel {min-height:0;}
.orbit-wrap{isolation:isolate;}
/* Rotate ornamental dashed ring, never the speaker's name, clock, or timing progress. */
.orbit-secondary {transform-origin:200px 200px;animation:veytu-orbit-spin var(--orbit-rotation) linear infinite;}
.orbit-wrap[data-orbit-direction=reverse] .orbit-secondary {animation-direction:reverse;}
@keyframes veytu-orbit-spin {from{transform:rotate(0)}to{transform:rotate(360deg)}}
body[data-orbit-speed=slow]{--orbit-rotation:80s}
body[data-orbit-speed=soft]{--orbit-rotation:45s}
body[data-orbit-speed=dynamic]{--orbit-rotation:25s}
body[data-orbit-speed=still] .orbit-secondary {animation:none!important}
@media(prefers-reduced-motion:reduce){.orbit-secondary,.final-ring-moving{animation:none!important}}
body.reduced-motion .orbit-secondary,body.reduced-motion .final-ring-moving{animation:none!important}
/* Bottom controls: separate personal exit, host-only closure and the call controls. */
.room-exit-bar {display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:12px;padding:18px 12px max(18px,env(safe-area-inset-bottom));margin:20px auto 0;max-width:700px;border-top:1px solid var(--line);}
.room-exit-bar #leaveBtn{min-height:44px;padding:10px 16px;border:1px solid var(--line);border-radius:999px;background:var(--paper);color:var(--muted);font-size:12px;font-weight:700}
.room-exit-bar #endBtn{min-height:44px;padding:10px 16px;border-radius:999px;font-size:12px}
.exit-options{display:grid;gap:12px}.exit-options>button{width:100%}
.exit-options .secondary-btn{justify-content:flex-start;text-align:left}
.exit-options small{display:block; font-size:12px;color:var(--muted);font-weight:500; margin-top:3px}
.audio-settings-group{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.audio-settings-group > * {min-width:0}
.audio-settings-group select{width:100%}
.audio-technical-details{margin-top:4px;}
.call-management-details{margin-top:8px;}
.call-management-details summary{font-weight:650;color:var(--muted);font-size:12px;cursor:pointer;min-height:38px}
.call-management-details #audioModerator{max-height:240px;overflow-y:auto;overscroll-behavior:contain}
/* FINAL: show above the fold, inside the app rather than below a full-height sibling. */
.final-view:not([hidden]){width:min(540px,100%);min-height:0;max-height:none;flex:1 0 auto;margin:0 auto;padding:clamp(18px,4vh,40px) 20px 26px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;text-align:center;gap:10px;}
.final-view h1{font-size:clamp(24px,5.5vw,34px);line-height:1.13;letter-spacing:-.045em;margin:4px auto 0;max-width:440px;text-wrap:balance;}
.final-view p {max-width:460px;font-size:clamp(14px,2.7vw,16px);line-height:1.5;margin:0 auto;color:var(--muted)}
.final-view #finalInvitation{font-size:13px;margin:5px auto 8px;}
.final-view button{width:min(100%,370px);min-height:46px;margin:2px 0;border-radius:14px;font-size:13px}
.final-view #finalHome {order:1;margin-top:12px}
.final-view #finalReport {order:2}
.final-view #finalSummary {order:3}
.final-orbit{width:64px;height:64px;flex:0 0 64px;font-size:0;line-height:1;margin:2px auto 6px}
.final-orbit svg{width:100%;height:100%;overflow:visible}
.final-orbit .final-ring,.final-ring-inner{fill:none;stroke:#b8d8ca;stroke-width:1.5}
.final-orbit .final-ring-inner{stroke:#d6e9df}
.final-orbit .final-ring-moving{fill:none;stroke:var(--jade);stroke-width:3.5;stroke-linecap:round;stroke-dasharray:70 250;transform-origin:50px 50px;animation:veytu-orbit-spin 45s linear infinite}
.final-ring-dot{fill:#82c2a7}.final-ring-dot-secondary{fill:var(--jade);opacity:.6}
@media(max-width:900px){
 .room-view{padding:16px clamp(12px,3vw,24px) 28px}
 .room-layout{display:flex;flex-direction:column;gap:12px}
 .orbit-panel{width:100%;padding:18px clamp(12px,3vw,20px);}
 .sidebar{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);width:100%}
 .room-toolbar{padding:8px 0 14px}
 .room-exit-bar{margin-top:14px}
}
@media(max-width:600px){
 .topbar{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start;gap:7px;padding:calc(10px + env(safe-area-inset-top,0px)) 14px 10px;min-height:76px}
 .topbar .top-actions{display:flex;flex-wrap:wrap;gap:5px;justify-content:flex-end}
 .topbar .top-actions #interfaceLanguage{max-width:130px;height:44px}
 .brand-name{font-size:21px}.topbar .brand-tagline{font-size:8px}
 .topbar .network-pill{display:none}
 .room-view{padding:12px 12px 20px}
 .call-panel{padding:12px 13px;margin-bottom:10px;border-radius:16px}
 .call-panel .call-controls{display:flex;flex-wrap:wrap;width:100%;gap:7px}
 .call-panel .call-controls button{width:auto;flex:1 1 110px;font-size:12px;padding:9px 10px}
 .audio-roster{max-height:96px}.audio-roster .audio-person{font-size:11px;padding:4px 7px}
 .call-panel+.call-controls {margin:6px 0 8px}
 .call-panel+.call-controls button{min-height:40px;font-size:12px}
 .session-top{gap:8px;padding:0 2px;margin-bottom:10px}
 .session-info h2{font-size:clamp(20px,6vw,27px);margin:4px 0}
 .session-code{padding:6px;min-width:100px}.session-code strong{font-size:11px}
 .room-toolbar{gap:6px;padding:5px 0 10px}
 .room-toolbar button{font-size:11px;padding:8px 10px;min-height:40px}
 .orbit-panel{padding:12px 13px 18px;border-radius:18px}
 .orbit-wrap{width:100%;max-width:min(290px,76vw);margin:3px auto}
 .speaker-name{font-size:clamp(20px,5vw,27px)}.timer-text{font-size:clamp(41px,12vw,52px)}
 .orbit-bottom{padding-top:10px;gap:6px}.micro-stats{font-size:10px}
 .orbit-actions{margin-top:12px}.orbit-actions .primary-btn{min-height:46px}
 .sidebar{display:flex;flex-direction:column;gap:10px}
 .side-card{padding:14px 15px}.people-list{max-height:220px;overflow-y:auto;overscroll-behavior:contain}
 .queue-list{max-height:200px;overflow-y:auto;overscroll-behavior:contain}
 .room-exit-bar{position:relative;gap:6px;padding:12px 0 calc(14px + env(safe-area-inset-bottom));margin:12px auto 0}
 .room-exit-bar #endBtn,.room-exit-bar #leaveBtn{font-size:12px;min-height:44px}
 .final-view:not([hidden]){padding:clamp(12px,2.4vh,25px) 18px 24px;gap:10px}
 .final-view h1{font-size:clamp(24px,7vw,30px)}.final-orbit{width:58px;height:58px;flex-basis:58px}
 .final-view p{font-size:14px;line-height:1.5}.final-view #finalInvitation{font-size:12px}
 .form-card,.modal{max-width:100%;}
 .modal{max-height:calc(100dvh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px) - 20px);overflow-y:auto;overscroll-behavior:contain;}
 .audio-settings-group{grid-template-columns:1fr}
}
@media(max-height:660px) and (max-width:600px){.final-view:not([hidden]){gap:6px;padding-top:6px}.final-orbit{width:46px;height:46px;flex-basis:46px;margin:0}.final-view h1{font-size:23px}}
/* Progressive disclosure keeps lists readable, rather than creating narrow columns. */
.sidebar{min-width:0}
.sidebar>.side-card,.sidebar>details,.sidebar>button{min-width:0}
.duration-editor{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.duration-editor input{flex:1 1 100px;max-width:200px;min-width:0;height:48px;padding:0 12px;border:1px solid var(--line);background:var(--bg);border-radius:12px;color:var(--ink)}
.duration-editor button{flex:0 1 auto}
body[data-orbit-speed=slow] .ring-highlight,body[data-orbit-speed=slow] .final-ring-moving{animation-duration:80s}
body[data-orbit-speed=soft] .ring-highlight,body[data-orbit-speed=soft] .final-ring-moving{animation-duration:45s}
body[data-orbit-speed=dynamic] .ring-highlight,body[data-orbit-speed=dynamic] .final-ring-moving{animation-duration:25s}
body[data-orbit-speed=still] .ring-highlight,body[data-orbit-speed=still] .final-ring-moving{animation:none!important}
@media(max-width:600px){
 .sidebar{align-items:stretch;width:100%}
 .sidebar>*{width:100%;max-width:100%}
 .room-view{padding-bottom:92px}
 .room-exit-bar{position:fixed;z-index:15;bottom:0;left:0;right:0;max-width:none;margin:0;min-height:66px;padding:8px 12px calc(8px + env(safe-area-inset-bottom));background:var(--bg);border-top:1px solid var(--line);box-shadow:0 -7px 24px rgba(16,42,38,.05);gap:8px}
 .room-exit-bar #endBtn,.room-exit-bar #leaveBtn{margin:0;min-height:44px;padding:8px 12px;flex:0 1 auto}
}
#modTools{padding:10px 0 0;border-top:1px solid var(--line);margin-top:12px}
#modTools>label{display:block;font-size:11px;color:var(--muted);font-weight:700;padding-bottom:9px}
#modPeople{display:flex;flex-direction:column;align-items:stretch;gap:6px}
#modPeople>button{width:100%;min-height:44px;font-size:12px}
.moderation-pick{border:1px solid var(--line);border-radius:12px;padding:8px 10px;max-height:220px;overflow:auto;}
.moderation-pick summary{min-height:30px;font-size:12px;cursor:pointer;font-weight:600;}
.moderation-pick .mod-row{padding:6px 0;border-top:1px solid var(--line)}
.notes-disclosure{border-radius:19px;border:1px solid var(--line);background:var(--paper);min-width:0}
.notes-disclosure>summary{min-height:46px;font-size:12px;font-weight:750;padding:14px 16px;cursor:pointer;color:var(--ink)}
.notes-disclosure>.side-card{box-shadow:none;border:0;border-radius:0;background:transparent;padding-top:2px}
.notes-disclosure>.side-card .side-head{display:none}
@media(max-width:600px){.notes-disclosure,.notes-disclosure>.side-card{width:100%}}