:root{color-scheme:dark;font-family:Inter,"Segoe UI",system-ui,-apple-system,sans-serif;background:#0b1020;color:#f2f4ff;font-synthesis:none}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 12% -8%,#252052 0,transparent 38%),#0b1020}button,input,textarea,select{font:inherit}button{cursor:pointer;border:1px solid #38405c;background:#1c2540;color:#edf0ff;padding:10px 14px;border-radius:10px}button:hover:not(:disabled){border-color:#9b8eff;background:#2d3253}button:disabled{opacity:.45;cursor:not-allowed}.primary{background:#7966f1;color:white;border-color:#7966f1;font-weight:650}.primary:hover:not(:disabled){background:#8e79ff}.subtle{background:#182039}.danger{border-color:#853b59;color:#ffc0d2}input,select,textarea{width:100%;min-width:0;border:1px solid #3d4566;background:#10182d;color:white;border-radius:10px;padding:11px 12px;outline:0}input:focus,select:focus,textarea:focus{border-color:#aa99ff;box-shadow:0 0 0 2px #7866f133}label{display:block;font-size:13px;color:#c6cde6;margin:10px 0}label input,label textarea,label select{margin-top:7px}.hidden{display:none!important}.muted,.notice{font-size:12px;color:#abb5d5}.notice{line-height:1.6}.topbar{height:69px;padding:0 max(18px,calc((100vw - 1230px)/2));border-bottom:1px solid #303752;display:flex;align-items:center;gap:24px;background:#101629d9;position:sticky;top:0;z-index:9;backdrop-filter:blur(12px)}.brand{border:0;background:transparent;font-size:25px;font-weight:850;letter-spacing:-1.4px;padding:0}.brand span{color:#a899ff}.account{margin-left:auto;display:flex;align-items:center;gap:12px;font-size:13px}main{max-width:1230px;margin:0 auto;padding:22px}.hero{padding:82px 32px 68px;text-align:center}.eyebrow{font-size:11px;letter-spacing:.2em;color:#b3a7ff;font-weight:800}.hero h1{font-size:clamp(30px,4.3vw,57px);letter-spacing:-.065em;line-height:1.3;margin:18px 0}.hero em{font-style:normal;color:#ad9fff}.hero p{color:#b9c1dc}.hero-actions{display:flex;gap:12px;justify-content:center;margin-top:30px}.panel{background:#151d33;border:1px solid #343c58;border-radius:16px;padding:21px;margin:15px 0}.panel h2,.panel h3{margin:0 0 12px}.section-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.section-head h2{margin:5px 0 12px}.filters{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:12px 0 24px}.checkbox{display:flex;align-items:center;gap:10px}.checkbox input{width:auto;margin:0}.filters>input{max-width:350px}.room-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:15px}.room-card{border:1px solid #343c58;border-radius:16px;background:#171f36;overflow:hidden;text-align:left;padding:0}.room-card img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}.room-card .room-details{padding:15px}.room-card h3{margin:0 0 8px;font-size:16px;line-height:1.45}.room-card p{color:#adb5d5;margin:0;font-size:12px}.room-heading{display:flex;align-items:center;gap:20px;margin:10px 0 22px}.room-heading #copyInvite{margin-left:auto}.room-heading h2{margin:0 0 5px}.watch-layout{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(310px,1fr);gap:18px;align-items:start}.video-frame{aspect-ratio:16/9;background:black;border:1px solid #373e5a;border-radius:14px;overflow:hidden;position:relative}.video-frame iframe,.video-frame #youtubePlayer{width:100%;height:100%}.video-hint{position:absolute;inset:0;background:#0c1124ec;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:20px}.video-hint p{color:#bfc7dd}.controls{display:flex;align-items:center;gap:9px;flex-wrap:wrap}.control-foot{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding-top:12px}.control-foot label{display:flex;gap:10px;align-items:center;margin:0}.control-foot select{width:95px;margin:0}.host-only{border-top:1px solid #303952;margin-top:16px;padding-top:16px}.inline-settings{display:flex;align-items:end;gap:9px;flex-wrap:wrap}.inline-settings select{width:125px}.member{display:flex;align-items:center;gap:9px;padding:8px 0;border-bottom:1px solid #2d3652;flex-wrap:wrap}.member span{flex:1;min-width:150px}.member button{font-size:11px;padding:7px}.chat-panel{margin:0;position:sticky;top:88px;height:min(760px,calc(100vh - 116px));min-height:530px;display:flex;flex-direction:column}.chat-head{display:flex;justify-content:space-between;border-bottom:1px solid #323a59;padding-bottom:10px}.chat-head h3{margin:0 0 5px}.messages{min-height:120px;flex:1;overflow:auto;padding:10px 0;overscroll-behavior:contain}.msg{padding:9px 5px;border-bottom:1px solid #28314b;overflow-wrap:anywhere}.msg-head{display:flex;gap:7px;align-items:center;flex-wrap:wrap;font-size:12px}.msg-name{font-weight:750;color:#c5baff}.msg-handle,.msg-time{color:#8993b7;font-size:11px}.msg-body{margin:5px 0 2px;line-height:1.5;font-size:13px;white-space:pre-wrap}.msg-actions{display:flex;gap:5px;margin-top:5px}.msg-actions button{font-size:10px;padding:4px 7px}.chat-compose{display:flex;gap:7px;padding-top:12px;border-top:1px solid #343c59}.chat-compose input{flex:1}.overlay{position:fixed;inset:0;background:#040816d9;display:grid;place-items:center;z-index:20;padding:18px}.modal{width:min(100%,570px);max-height:90vh;overflow:auto;box-shadow:0 30px 90px #0009;margin:0}.modal h2{font-size:21px}#toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:#333c60;border:1px solid #797fbb;border-radius:12px;padding:12px 17px;opacity:0;pointer-events:none;transition:opacity .2s;z-index:30;max-width:90vw}#toast.visible{opacity:1}@media(max-width:850px){.watch-layout{grid-template-columns:1fr}.chat-panel{position:static;height:580px;min-height:0}.hero{padding:50px 8px}.topbar{padding:0 15px;gap:9px}.topbar .connection{display:none}.account{gap:6px}main{padding:14px}.room-heading{gap:9px;flex-wrap:wrap}.room-heading>div{order:3;width:100%}.controls button{flex:1}.panel{padding:15px}}@media(max-width:480px){.topbar .account span{display:none}.hero-actions{flex-direction:column}.room-grid{grid-template-columns:1fr}.control-foot{font-size:11px}}

.settings-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0 20px}.settings-tabs button{flex:1;min-width:100px}.settings-entry{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px;border-bottom:1px solid rgba(130,140,170,.2)}.settings-entry button{flex-shrink:0}.modal{max-height:min(85vh,850px);overflow-y:auto}#transferControls{margin-top:16px;padding:14px;border:1px solid rgba(130,140,170,.2);border-radius:12px}#transferControls input{min-width:140px;flex:1}#settingsModal input{width:100%}#settingsModal .inline-settings{display:flex;gap:8px;flex-wrap:wrap}#settingsModal .inline-settings input{flex:1;min-width:180px}#settingsModal .inline-settings button{white-space:nowrap}

.reaction-buttons{display:flex;justify-content:space-between;gap:5px;padding-top:8px}.reaction-buttons button{font-size:18px;flex:1;padding:5px}.reaction-stream{min-height:21px;font-size:18px;text-align:center;overflow:hidden;white-space:nowrap;color:#c8baff}.room-details button{margin:8px 6px 0 0;padding:6px 10px}

/* Compact message metadata/actions: no extra action row. */
.msg-head{flex-wrap:nowrap;min-width:0}
.msg-name,.msg-handle{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.msg-handle{flex:1}
.msg-meta{margin-left:auto;display:flex;align-items:center;gap:6px;flex-shrink:0}
.msg-actions{display:flex;gap:4px;margin:0}
.msg-actions button{font-size:10px;padding:3px 5px;line-height:1.3}
@media(max-width:480px){.msg-head{gap:4px}.msg-meta{gap:3px}.msg-actions{gap:2px}.msg-actions button{padding:3px 4px}}

/* Keep refresh alongside presence label without growing the member list. */
.member-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.member-tools #refreshMembers{padding:5px 9px;white-space:nowrap;font-size:.8rem}


/* Portrait watching: video, then live chat, then playback controls. */
@media (max-width:850px) and (orientation:portrait) {
  .watch-layout { display:flex; flex-direction:column; gap:14px; }
  .watch-left { display:contents; }
  .watch-layout > .chat-panel { order:2; width:100%; height:clamp(360px,62dvh,660px); min-height:0; position:static; }
  .watch-left > .video-frame { order:1; width:100%; }
  .watch-left > .control-panel { order:3; width:100%; margin:0; }
  .watch-left > .member-panel { order:4; width:100%; margin:0; }
  .chat-panel > .chat-head { order:0; }
  .chat-panel > .chat-compose { order:1; padding:10px 0; border-top:0; border-bottom:1px solid #343c59; }
  .chat-panel > #chatAuthHint { order:2; }
  .chat-panel > .messages { order:3; min-height:0; }
  .chat-panel > .reaction-buttons { order:4; }
  .chat-panel > .reaction-stream { order:5; }
}