:root{font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif;color:#f4f7fb;background:#090d14}*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at top,#172033 0,#090d14 48%);min-height:100vh}.top{height:68px;border-bottom:1px solid #273044;background:#0b1019dd;backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:space-between;padding:0 28px;position:sticky;top:0;z-index:5}.top a{color:#c8d0df;text-decoration:none}.brand{font-weight:900;letter-spacing:.12em;color:#fff!important;font-size:32px}.top nav{display:flex;gap:14px;align-items:center}.top button,button{border:1px solid #354159;background:#141b28;color:#fff;border-radius:10px;padding:10px 14px;cursor:pointer}.primary{background:#fff;color:#0b1019;border-color:#fff;font-weight:800}.danger{background:#5b1f2a;border-color:#9c3c4b}.container{max-width:1400px;margin:0 auto;padding:42px 24px}.hero{display:flex;justify-content:space-between;gap:30px;align-items:center;padding:20px 0 44px}.eyebrow{font-size:12px;letter-spacing:.16em;color:#8ea0bd}.hero h1{font-size:clamp(34px,6vw,70px);line-height:.95;margin:12px 0 18px}.hero p{color:#9aa7bb;max-width:650px;font-size:18px}.hero-card{min-width:170px;padding:24px;border:1px solid #29354b;border-radius:18px;background:#0e1521}.hero-card strong{font-size:38px;display:block}.hero-card span{color:#8c99ae}.section-head{display:flex;justify-content:space-between;align-items:center}.section-head span{color:#8c99ae}.grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}.room-card{border:1px solid #2b3549;border-radius:16px;overflow:hidden;background:#0f1622;cursor:pointer}.preview{aspect-ratio:16/10;background:linear-gradient(135deg,#202d45,#0d121b);display:grid;place-items:center;color:#66758d;overflow:hidden}.preview img{width:100%;height:100%;object-fit:cover;display:block}.room-meta{padding:14px}.room-meta strong{display:block}.live{color:#ff6c78;font-size:12px;font-weight:800}.muted{color:#8c99ae}.empty{padding:55px;text-align:center;border:1px dashed #334057;border-radius:16px;color:#8997ad}.modal{position:fixed;inset:0;background:#0009;display:grid;place-items:center;z-index:20}.hidden{display:none!important}.modal-box{width:min(420px,calc(100% - 32px));background:#111925;border:1px solid #303b50;border-radius:18px;padding:24px;box-shadow:0 30px 100px #0008}.modal-box input,.chat input{display:block;width:100%;padding:13px;margin:10px 0;border-radius:10px;border:1px solid #334057;background:#0a1019;color:#fff}.x{float:right;font-size:22px}.room-layout{max-width:1500px;margin:0 auto;padding:20px;display:grid;grid-template-columns:1fr 340px;gap:18px}.video-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:10px}.video-tile{position:relative;background:#05080d;border-radius:14px;overflow:hidden;aspect-ratio:16/10}.video-tile video{width:100%;height:100%;object-fit:cover}.video-name{position:absolute;left:10px;bottom:10px;background:#0009;padding:6px 9px;border-radius:8px}.controls{display:flex;gap:8px;padding:12px 0}.chat{border:1px solid #2b3549;background:#0e1520;border-radius:14px;display:flex;flex-direction:column;min-height:70vh;padding:14px}.chat h3{margin-top:0}.chat #messages{flex:1;overflow:auto}.msg{padding:8px 0;border-bottom:1px solid #202a3a}.msg b{font-size:13px}.msg span{color:#9aa7bb}.auth{min-height:100vh;display:grid;place-items:center}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.stat{background:#111925;border:1px solid #2b3549;border-radius:14px;padding:18px}.stat b{font-size:30px;display:block}.admin-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:20px}.panel{border:1px solid #2b3549;border-radius:14px;padding:14px;margin-bottom:10px}.error{color:#ff8894}@media(max-width:1100px){.grid{grid-template-columns:repeat(4,minmax(0,1fr))}}@media(max-width:850px){.grid{grid-template-columns:repeat(3,minmax(0,1fr))}.room-layout,.admin-grid{grid-template-columns:1fr}.hero{align-items:flex-start;flex-direction:column}.stats{grid-template-columns:1fr 1fr}}

.room-nav{display:flex;gap:10px;align-items:center}.rooms-overlay{position:fixed;inset:0;z-index:50}.rooms-backdrop{position:absolute;inset:0;background:#0009;backdrop-filter:blur(3px)}.rooms-drawer{position:absolute;right:0;top:0;height:100%;width:min(460px,92vw);background:#0d141f;border-left:1px solid #2b3549;box-shadow:-30px 0 80px #0008;padding:24px;overflow:auto}.rooms-drawer-head{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:20px}.rooms-drawer-head h2{margin:5px 0 0}.room-browser{display:grid;gap:10px}.browser-room{width:100%;text-align:left;padding:15px;border:1px solid #2b3549;border-radius:14px;background:#111a28;color:#fff;display:grid;gap:5px;cursor:pointer}.browser-room:hover{border-color:#52617c;transform:translateY(-1px)}.browser-room span:last-child{color:#8c99ae}.browser-live{font-size:11px;color:#ff6c78;font-weight:800;letter-spacing:.06em}.room-nav a{color:#c8d0df;text-decoration:none}@media(max-width:600px){.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.room-nav a{display:none}.room-nav button{padding:8px 10px}.rooms-drawer{width:100%}}.participants{margin-top:12px;border:1px solid #2b3549;background:#0e1520;border-radius:14px;padding:14px}.participants-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.participants-head h3{margin:0;font-size:15px}.participants-head span{color:#8c99ae}.participant-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 0;border-top:1px solid #202a3a}.owner-badge{font-size:10px;color:#9fb1ce;border:1px solid #3b4860;border-radius:999px;padding:2px 6px}.kick-small{padding:6px 9px;font-size:12px;background:#3b1620;border-color:#6b2a39}.browser-thumb{width:100%;aspect-ratio:16/9;background:#151f2e;border-radius:10px;overflow:hidden;display:grid;place-items:center;color:#71819b;margin-bottom:3px}.browser-thumb img{width:100%;height:100%;object-fit:cover;display:block}.webcam-status{font-size:10px;color:#7f8da3;margin-left:6px}

/* Active room video layout */
.owner-stage{margin-bottom:14px}.video-section-title{font-size:13px;font-weight:800;color:#9aa7bb;margin:4px 0 8px}.owner-video{display:flex;align-items:flex-start;min-height:240px}.owner-video .video-tile{width:640px;height:480px;max-width:100%;aspect-ratio:4/3}.visitor-stage{margin-top:10px}.visitor-grid{display:grid;grid-template-columns:repeat(auto-fill,160px);gap:10px;align-items:start}.visitor-grid .video-tile{width:160px;height:120px;aspect-ratio:4/3}.video-tile{position:relative;background:#05080d;border-radius:14px;overflow:hidden}.video-tile video{width:100%;height:100%;object-fit:cover;display:block}.video-name{position:absolute;left:7px;bottom:7px;background:#0009;padding:4px 7px;border-radius:7px;font-size:11px;max-width:calc(100% - 14px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.video-tools{position:absolute;top:6px;right:6px;display:flex;align-items:center;gap:5px;padding:4px;border-radius:8px;background:#05080dcc;opacity:0;transition:opacity .15s ease}.video-tile:hover .video-tools,.video-tile:focus-within .video-tools{opacity:1}.video-resize{width:104px;padding:4px 5px;border:1px solid #354159;border-radius:6px;background:#141b28;color:#fff;font-size:11px}.video-pip{padding:4px 7px;border-radius:6px;font-size:10px;font-weight:800}.owner-video:empty,.visitor-grid:empty{display:none}
@media(max-width:720px){.owner-video .video-tile{width:100%;height:auto;aspect-ratio:4/3}.visitor-grid{grid-template-columns:repeat(auto-fill,160px)}.visitor-grid .video-tile{width:160px;height:120px}.video-tools{opacity:1}}

/* EPICSOLO active room: starter and visitors are separate video areas; chat and participant list sit side-by-side. */
.room-layout{grid-template-columns:minmax(0,1fr) minmax(620px,680px);align-items:start}
.room-side{display:grid;grid-template-columns:minmax(0,1fr) minmax(210px,260px);gap:12px;min-width:0}
.room-side .chat{min-height:70vh;height:70vh}
.room-side .participants{margin-top:0;min-height:70vh;height:70vh;overflow:auto}
.owner-stage{margin-bottom:18px}
.owner-video{min-height:0;display:flex;align-items:flex-start}
.owner-video .video-tile{width:640px;height:480px;max-width:100%;aspect-ratio:4/3}
.visitor-stage{margin-top:4px}
.visitor-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,160px));gap:10px;align-items:start}
.visitor-grid .video-tile{width:160px;height:120px;aspect-ratio:4/3}
@media(max-width:1200px){.room-layout{grid-template-columns:minmax(0,1fr) 560px}.room-side{grid-template-columns:minmax(0,1fr) 220px}}
@media(max-width:900px){.room-layout{grid-template-columns:1fr}.room-side{grid-template-columns:minmax(0,1fr) minmax(220px,280px)}.room-side .chat,.room-side .participants{height:55vh;min-height:420px}}
@media(max-width:650px){.room-side{grid-template-columns:1fr}.room-side .chat,.room-side .participants{height:auto;min-height:320px}.owner-video .video-tile{width:100%;height:auto;aspect-ratio:4/3}.visitor-grid{grid-template-columns:repeat(2,minmax(0,160px))}}

/* EPICSOLO room layout controls: each participant can choose where their visitor webcam grid appears. */
.room-layout{display:grid;grid-template-columns:minmax(0,640px) minmax(620px,680px);grid-template-rows:auto auto;gap:18px;align-items:start;grid-template-areas:"main side" "main visitors";max-width:1500px;margin:0 auto;padding:20px;}
.room-main{grid-area:main;min-width:0}.room-side{grid-area:side;display:grid;grid-template-columns:minmax(0,1fr) minmax(210px,260px);gap:12px;min-width:0}.room-side .chat,.room-side .participants{height:480px;min-height:480px;margin-top:0;overflow:auto}.visitor-stage{grid-area:visitors;min-width:0;border:1px solid #2b3549;background:#0e1520;border-radius:14px;padding:12px}.visitor-stage-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}.layout-picker{font-size:12px;color:#9aa7bb;display:flex;align-items:center;gap:6px}.layout-picker select{border:1px solid #354159;background:#141b28;color:#fff;border-radius:7px;padding:6px 8px;font-size:12px}.owner-stage{margin-bottom:18px}.owner-video{min-height:480px;display:flex;align-items:flex-start}.owner-video .video-tile{width:640px;height:480px;max-width:100%;aspect-ratio:4/3}.visitor-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,160px));gap:10px;align-items:start}.visitor-grid .video-tile{width:160px;height:120px;aspect-ratio:4/3}
.room-layout.layout-top{grid-template-areas:"visitors side" "main main"}.room-layout.layout-top .visitor-stage{grid-area:visitors}.room-layout.layout-bottom{grid-template-areas:"main main" "visitors side"}.room-layout.layout-left{grid-template-columns:minmax(160px,260px) minmax(0,640px) minmax(620px,680px);grid-template-areas:"visitors main side"}.room-layout.layout-right{grid-template-columns:minmax(0,640px) minmax(620px,680px);grid-template-areas:"main side" "main visitors"}.room-layout.layout-left .visitor-stage{grid-area:visitors}.room-layout.layout-left .room-main{grid-area:main}.room-layout.layout-left .room-side{grid-area:side}
@media(max-width:1200px){.room-layout,.room-layout.layout-left{grid-template-columns:minmax(0,1fr) minmax(520px,560px)}.room-layout.layout-left{grid-template-areas:"visitors side" "main main"}.room-layout.layout-top{grid-template-areas:"visitors side" "main main"}.room-layout.layout-bottom{grid-template-areas:"main main" "visitors side"}.room-layout.layout-right{grid-template-areas:"main side" "main visitors"}.room-side{grid-template-columns:minmax(0,1fr) 220px}}
@media(max-width:900px){.room-layout,.room-layout.layout-left,.room-layout.layout-right,.room-layout.layout-top,.room-layout.layout-bottom{grid-template-columns:1fr;grid-template-areas:"main" "side" "visitors"}.room-side{grid-template-columns:minmax(0,1fr) minmax(220px,280px)}.room-side .chat,.room-side .participants{height:55vh;min-height:420px}.owner-video{min-height:0}.owner-video .video-tile{width:100%;height:auto;aspect-ratio:4/3}.visitor-stage{width:100%}}
@media(max-width:650px){.room-side{grid-template-columns:1fr}.room-side .chat,.room-side .participants{height:auto;min-height:320px}.visitor-grid{grid-template-columns:repeat(2,minmax(0,160px))}.visitor-stage-head{align-items:flex-start;flex-direction:column}}

/* EPICSOLO room layout: separate large starter video from visitor webcams */
.room-page{width:100%;max-width:none;margin:0;padding:20px;box-sizing:border-box}.room-main-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(420px,1fr);gap:20px;align-items:start}.starter-panel{min-width:0}.panel-title{display:flex;align-items:center;justify-content:space-between;margin:4px 0 10px}.starter-label{color:#c8d0df;font-weight:700}.starter-video-wrap{width:100%;aspect-ratio:4/3;max-width:none;position:relative;background:#05080d;border:1px solid #2b3549;border-radius:14px;overflow:hidden}.starter-video{width:100%;height:100%;display:block;object-fit:cover}.starter-offline{position:absolute;inset:0;display:grid;place-items:center;color:#8190a7;background:#0b1019}.starter-actions{position:absolute;right:10px;top:10px;display:flex;gap:6px}.starter-actions button{padding:7px 9px;font-size:12px;background:#0b1019cc}
.media-control-bar{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.starter-actions{z-index:4;max-width:calc(100% - 20px)}
.starter-actions button,.visitor-actions button{white-space:nowrap}
.pip-primary{font-weight:900;border-color:#6d7cff!important;box-shadow:0 0 0 1px #6d7cff55}
.volume-control{display:flex;align-items:center;gap:5px;padding:5px 7px;border:1px solid #354159;border-radius:8px;background:#0b1019e8;color:#fff;font-size:11px}
.volume-control input[type=range]{width:82px;accent-color:currentColor}
.volume-control span:last-child{min-width:34px;text-align:right;font-variant-numeric:tabular-nums}
.visitor-tile{overflow:visible}
.visitor-video-frame{position:relative;width:100%;aspect-ratio:4/3;background:#05080d;border-radius:12px 12px 0 0;overflow:hidden}
.visitor-video-frame .visitor-video{width:100%;height:100%;object-fit:cover}
.visitor-video-tools{position:absolute;left:6px;right:6px;top:6px;display:flex;align-items:center;justify-content:flex-end;gap:5px;z-index:3}
.visitor-video-tools .volume-control{margin-left:auto}
.visitor-video-tools .disconnect-webcam{border-color:#9a4b55}
.visitor-actions{display:flex;align-items:center;gap:5px;padding:6px;background:#0e1520;border-radius:0 0 12px 12px;flex-wrap:wrap}
.visitor-actions .resize-group{display:flex;gap:4px}
.visitor-actions .resize-group button{padding:4px 6px;font-size:10px}
@media(max-width:720px){
  .starter-actions{left:8px;right:8px;top:8px}
  .starter-actions .volume-control input[type=range]{width:64px}
  .visitor-video-tools .volume-control input[type=range]{width:58px}
}
.chat-panel{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:12px;min-width:0}.chat{min-height:480px;height:480px}.participants{height:480px;margin:0;overflow:auto}.visitors-panel{margin-top:18px;border:1px solid #2b3549;background:#0e1520;border-radius:14px;padding:14px}.visitors-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:12px}.visitors-head h3{margin:4px 0 0}.visitors-head label{display:flex;align-items:center;gap:8px;color:#8c99ae;font-size:13px}.visitors-head select{border:1px solid #354159;background:#141b28;color:#fff;border-radius:10px;padding:8px 10px}.visitor-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,160px));gap:12px;align-items:start}.visitor-grid.position-top{margin-bottom:0}.visitor-tile{width:160px;position:relative;background:#05080d;border:1px solid #2b3549;border-radius:12px;overflow:hidden}.visitor-video{width:160px;height:120px;display:block;object-fit:cover}.visitor-name{position:absolute;left:6px;bottom:6px;background:#0009;padding:4px 7px;border-radius:7px;font-size:12px}.visitor-actions{display:flex;gap:5px;padding:6px;background:#0e1520}.visitor-actions button{padding:5px 7px;font-size:11px}.visitor-empty{color:#7f8da3;font-size:13px;padding:16px 4px}.room-main-grid.visitors-right .visitors-panel{grid-column:2}.room-main-grid.visitors-left .visitors-panel{grid-column:1}.room-main-grid.visitors-top .visitors-panel{grid-column:1 / -1;grid-row:1}.room-main-grid.visitors-bottom .visitors-panel{grid-column:1 / -1;grid-row:2}.room-page.layout-right .visitors-panel,.room-page.layout-left .visitors-panel{margin-top:18px}
@media(max-width:1150px){.room-main-grid{grid-template-columns:minmax(0,640px) minmax(360px,1fr)}.chat-panel{grid-template-columns:minmax(0,1fr) 260px}.room-page{padding:16px}}
@media(max-width:900px){.room-main-grid{grid-template-columns:1fr}.starter-video-wrap{max-width:none}.chat-panel{grid-template-columns:1fr}.chat,.participants{height:auto;min-height:360px}.visitors-head{align-items:flex-start;flex-direction:column}.visitor-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}.visitor-tile{width:100%;max-width:240px}.visitor-video{width:100%;height:auto;aspect-ratio:4/3}}

/* Visitor webcam placement: responsive 100%-width room.
   The selector controls a real layout state; the webcam tiles themselves
   remain draggable independently of this position. */
.room-page{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  width:100%;
  max-width:none;
  min-width:0;
  box-sizing:border-box;
}

.room-page > .room-main-grid,
.room-page > .visitors-panel{
  min-width:0;
  width:100%;
  box-sizing:border-box;
}

/* Above / below: webcam raster spans the complete available width. */
.room-page.layout-top{
  grid-template-rows:auto minmax(0,auto);
}
.room-page.layout-top > .visitors-panel{grid-row:1;grid-column:1;margin:0 0 18px}
.room-page.layout-top > .room-main-grid{grid-row:2;grid-column:1}

.room-page.layout-bottom{
  grid-template-rows:minmax(0,auto) auto;
}
.room-page.layout-bottom > .room-main-grid{grid-row:1;grid-column:1}
.room-page.layout-bottom > .visitors-panel{grid-row:2;grid-column:1;margin:18px 0 0}

/* Left / right: the webcam raster becomes a fluid sidebar.
   It never uses a fixed viewport width, so 100% browser zoom stays inside
   the browser without horizontal scrolling. */
.room-page.layout-right{
  grid-template-columns:minmax(0,1fr) clamp(220px,24vw,360px);
  column-gap:18px;
  align-items:start;
}
.room-page.layout-right > .room-main-grid{grid-column:1;grid-row:1}
.room-page.layout-right > .visitors-panel{
  grid-column:2;grid-row:1;margin:0;min-width:0;
}
.room-page.layout-right .visitor-grid{
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  justify-content:stretch;
}
.room-page.layout-right .visitor-tile{width:100%;max-width:none}
.room-page.layout-right .visitor-video{width:100%;height:auto;aspect-ratio:4/3}

.room-page.layout-left{
  grid-template-columns:clamp(220px,24vw,360px) minmax(0,1fr);
  column-gap:18px;
  align-items:start;
}
.room-page.layout-left > .visitors-panel{
  grid-column:1;grid-row:1;margin:0;min-width:0;
}
.room-page.layout-left > .room-main-grid{grid-column:2;grid-row:1}
.room-page.layout-left .visitor-grid{
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  justify-content:stretch;
}
.room-page.layout-left .visitor-tile{width:100%;max-width:none}
.room-page.layout-left .visitor-video{width:100%;height:auto;aspect-ratio:4/3}

/* Keep all four position modes usable while the viewport gets smaller.
   Below 760px left/right become a full-width stack in the selected direction,
   rather than overflowing the browser. */
@media(max-width:760px){
  .room-page.layout-right,
  .room-page.layout-left{
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:auto auto;
  }
  .room-page.layout-right > .room-main-grid,
  .room-page.layout-left > .room-main-grid{
    grid-column:1;grid-row:1;
  }
  .room-page.layout-right > .visitors-panel,
  .room-page.layout-left > .visitors-panel{
    grid-column:1;grid-row:2;margin-top:18px;
  }
  .room-page.layout-left > .visitors-panel{
    grid-row:1;margin:0 0 18px;
  }
  .room-page.layout-left > .room-main-grid{grid-row:2}
  .room-page.layout-right .visitor-grid,
  .room-page.layout-left .visitor-grid{
    grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  }
}

.room-page .visitors-panel,
.room-page .visitor-grid,
.room-page .visitor-tile{
  max-width:100%;
  min-width:0;
}

/* EPICSOLO theme switcher */
[data-theme-toggle]{min-width:92px;white-space:nowrap}
.admin-theme-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}

/* Light mode keeps the existing EPICSOLO layout and only changes its visual theme. */
html[data-theme="light"] body{color:#172033;background:radial-gradient(circle at top,#f3f7fc 0,#eef2f7 48%,#e8edf4 100%)}
html[data-theme="light"] .top{background:#ffffffee;border-bottom-color:#d6deea}
html[data-theme="light"] .top a{color:#334155}
html[data-theme="light"] .brand{color:#111827!important}
html[data-theme="light"] .top button,html[data-theme="light"] button{background:#fff;color:#172033;border-color:#cbd5e1}
html[data-theme="light"] .primary{background:#172033;color:#fff;border-color:#172033}
html[data-theme="light"] .danger{background:#ffe5e8;color:#8f2332;border-color:#e5a3ac}
html[data-theme="light"] .hero p,html[data-theme="light"] .muted,html[data-theme="light"] .section-head span,html[data-theme="light"] .hero-card span,html[data-theme="light"] .eyebrow{color:#64748b}
html[data-theme="light"] .hero-card{background:#fff;border-color:#d5deea}
html[data-theme="light"] .room-card{background:#fff;border-color:#d5deea}
html[data-theme="light"] .preview{background:linear-gradient(135deg,#e7edf6,#f7f9fc);color:#64748b}
html[data-theme="light"] .empty{border-color:#cbd5e1;color:#64748b}
html[data-theme="light"] .modal{background:#0006}
html[data-theme="light"] .modal-box{background:#fff;border-color:#d5deea;box-shadow:0 30px 100px #47556933}
html[data-theme="light"] .modal-box input,html[data-theme="light"] .chat input{background:#f8fafc;color:#172033;border-color:#cbd5e1}
html[data-theme="light"] .rooms-backdrop{background:#0f172a66}
html[data-theme="light"] .rooms-drawer{background:#fff;border-left-color:#d5deea;box-shadow:-30px 0 80px #47556933}
html[data-theme="light"] .browser-room{background:#f8fafc;color:#172033;border-color:#d5deea}
html[data-theme="light"] .browser-room:hover{border-color:#94a3b8}
html[data-theme="light"] .participants,html[data-theme="light"] .chat,html[data-theme="light"] .visitors-panel{background:#fff;border-color:#d5deea}
html[data-theme="light"] .participant-row,html[data-theme="light"] .msg{border-color:#e2e8f0}
html[data-theme="light"] .participants-head span,html[data-theme="light"] .msg span,html[data-theme="light"] .visitors-head label{color:#64748b}
html[data-theme="light"] .owner-badge{color:#475569;border-color:#cbd5e1}
html[data-theme="light"] .kick-small{background:#fff0f2;border-color:#e5a3ac;color:#8f2332}
html[data-theme="light"] .starter-video-wrap,html[data-theme="light"] .visitor-tile{background:#e2e8f0;border-color:#cbd5e1}
html[data-theme="light"] .starter-offline{background:#eef2f7;color:#64748b}
html[data-theme="light"] .visitor-actions{background:#f8fafc;border-top:1px solid #d5deea}
html[data-theme="light"] .visitor-actions button,html[data-theme="light"] .layout-picker select,html[data-theme="light"] .visitors-head select{background:#fff;color:#172033;border-color:#cbd5e1}
html[data-theme="light"] .visitor-empty{color:#64748b}
html[data-theme="light"] .stat,html[data-theme="light"] .panel{background:#fff;border-color:#d5deea}
html[data-theme="light"] pre{background:#f8fafc;color:#334155;border-color:#d5deea}
html[data-theme="light"] .error{color:#b42335}

/* Webcam labels: always show the chatter name in the top-left corner. */
.video-name,.visitor-name{left:8px;top:8px;bottom:auto;background:#000b;padding:5px 8px;border-radius:7px;font-size:11px;z-index:3}
.participants-tools{display:flex;align-items:center;gap:8px}
.watchers-button{padding:6px 9px;font-size:11px}
.watch-toggle{margin-left:8px;padding:3px 6px;border:1px solid #354159;background:#141b28;color:#aebbd0;border-radius:7px;font-size:12px;line-height:1;vertical-align:middle}
.watch-toggle.active{border-color:#6d8dba;background:#1a2a40;color:#fff}
.watch-toggle:disabled{opacity:.4;cursor:not-allowed}
.watchers-overlay{position:fixed;inset:0;z-index:60}
.watchers-backdrop{position:absolute;inset:0;background:#0009;backdrop-filter:blur(3px)}
.watchers-dialog{position:absolute;right:24px;top:86px;width:min(420px,calc(100vw - 48px));max-height:70vh;overflow:auto;background:#0d141f;border:1px solid #2b3549;border-radius:14px;padding:18px;box-shadow:0 30px 90px #0009}
.watchers-dialog-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:14px}
.watchers-dialog-head h2{margin:5px 0 0}
.watchers-list{display:grid;gap:8px}
.watcher-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 0;border-top:1px solid #202a3a}
.watching-label{color:#8c99ae;font-size:12px}
.watchers-empty{color:#7f8da3;font-size:13px;padding:12px 0}
html[data-theme="light"] .watch-toggle{background:#fff;color:#334155;border-color:#cbd5e1}
html[data-theme="light"] .watch-toggle.active{background:#e8eef7;border-color:#94a3b8;color:#172033}
html[data-theme="light"] .watchers-dialog{background:#fff;border-color:#d5deea;box-shadow:0 30px 90px #47556933}
html[data-theme="light"] .watcher-row{border-color:#e2e8f0}

.room-participants{display:block;margin-top:4px;font-size:.78rem;color:var(--muted);}

/* EPICSOLO shared webcam grid + drag/drop */
.visitor-grid{min-height:130px;border:1px dashed #34425a;border-radius:12px;padding:10px;transition:.15s ease}
.visitor-grid:empty{display:none}
.visitor-grid.drop-target{border-color:#6ea8fe;background:#162235}
.participants.drop-target{outline:2px dashed #6ea8fe;outline-offset:3px}
.participant-row[draggable="true"]{cursor:grab}
.participant-row[draggable="true"]:active{cursor:grabbing}
.visitor-tile[draggable="true"]{cursor:grab}
.visitor-tile[draggable="true"]:active{cursor:grabbing}
.visitor-tile{user-select:none}
.visitor-name{top:6px;bottom:auto;left:6px}
.visitors-head .muted{margin:5px 0 0;font-size:12px;max-width:760px}
@media(max-width:900px){.visitor-grid{grid-template-columns:repeat(auto-fill,minmax(160px,160px))}}

/* EPICSOLO: eigen webcam van een bezoeker naast de kamerstarter; remote bezoekers blijven in drag/drop raster */
.starter-media-row{display:flex;align-items:flex-start;gap:12px;min-width:0}
.self-video-wrap{width:320px;height:240px;position:relative;background:#05080d;border:1px solid #2b3549;border-radius:14px;overflow:hidden;flex:0 0 320px}
.self-video{width:100%;height:100%;display:block;object-fit:cover}
.self-video-wrap .video-name{left:8px;top:8px;bottom:auto}
.self-video-actions{position:absolute;right:8px;top:8px;display:flex;gap:5px;opacity:0;transition:opacity .15s ease}
.self-video-wrap:hover .self-video-actions,.self-video-wrap:focus-within .self-video-actions{opacity:1}
.self-video-actions button{padding:6px 8px;font-size:11px;background:#0b1019cc}
@media(max-width:1450px){.room-main-grid{grid-template-columns:minmax(0,1fr) minmax(420px,1fr)}.starter-media-row{flex-wrap:wrap}.self-video-wrap{flex-basis:320px}}
@media(max-width:900px){.starter-media-row{flex-direction:column}.self-video-wrap{width:320px;max-width:100%;height:auto;aspect-ratio:4/3}.self-video{height:100%}}

/* Bezoeker eigen webcam actief: starter en eigen webcam worden gelijkwaardige 320x240 beelden.
   De gebruikerslijst krijgt extra breedte en het drag/drop bezoekersraster wordt iets ruimer. */
@media(min-width:901px){
  .room-page.self-camera-active .starter-video-wrap{width:320px;max-width:320px;height:240px;aspect-ratio:auto}
  .room-page.self-camera-active .starter-media-row{align-items:flex-start}
  .room-page.self-camera-active .self-video-wrap{width:320px;height:240px;flex:0 0 320px}
  .room-page.self-camera-active .chat-panel{grid-template-columns:minmax(0,1fr) 340px}
  .room-page.self-camera-active .participants{width:auto}
}
.room-page.self-camera-active .visitor-grid{grid-template-columns:repeat(auto-fill,minmax(180px,180px))}
.room-page.self-camera-active .visitor-tile{width:180px}
.room-page.self-camera-active .visitor-video{width:180px;height:135px}
@media(max-width:900px){
  .room-page.self-camera-active .starter-video-wrap{width:320px;max-width:100%;height:auto;aspect-ratio:4/3}
  .room-page.self-camera-active .self-video-wrap{width:320px;max-width:100%;height:auto;aspect-ratio:4/3}
  .room-page.self-camera-active .visitor-grid{grid-template-columns:repeat(auto-fill,minmax(180px,180px))}
  .room-page.self-camera-active .visitor-tile,.room-page.self-camera-active .visitor-video{width:180px}
  .room-page.self-camera-active .visitor-video{height:135px}
}

.presence-control{display:flex;align-items:center;gap:7px;font-size:12px;color:#8c99ae}.presence-control select{background:#111a28;color:inherit;border:1px solid #2b3549;border-radius:8px;padding:7px 9px}.presence-badge{display:inline-block;font-size:10px;margin-left:6px;white-space:nowrap}.presence-online{color:#52d273}.presence-away{color:#f2a23a}.presence-offline{color:#9aa6b8}.presence-unavailable{color:#ff6b6b}.presence-control select:focus{outline:2px solid #52617c;outline-offset:1px}

.webcam-denied-badge{display:inline-flex;align-items:center;gap:4px;font-size:10px;color:#f0a24b;margin-left:6px;white-space:nowrap}.webcam-denied-badge::first-letter{font-size:12px}

/* Camera denied: keep the kamerstarter stage/layout, only show the empty video state. */
.room-page.owner-webcam-denied .starter-video-wrap{
  width:100% !important;
  max-width:none !important;
  aspect-ratio:4 / 3 !important;
}
.room-page.owner-webcam-denied .starter-offline{
  display:none !important;
}
.room-page.owner-webcam-denied .self-video-wrap{
  display:none !important;
}

/* EPICSOLO visitor layout fix: keep webcam controls horizontal and prevent the privacy text from collapsing into a narrow column. */
.controls{display:flex;align-items:center;flex-wrap:wrap;gap:8px;width:100%;min-width:0;}
.controls #privacyHint{flex:1 0 100%;width:100%;max-width:none;line-height:1.45;margin-bottom:2px;}
.controls button,.controls .presence-control{flex:0 0 auto;min-height:40px;}
.presence-control select{min-width:128px;}

/* Only two presence states are used: online and even weg. */
.presence-away{color:#f2a23a}.presence-online{color:#52d273}


/* EPICSOLO loading screen */
.loading-screen{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;background:radial-gradient(circle at top,#172033 0,#090d14 58%,#070a10 100%);transition:opacity .2s ease,visibility .2s ease}
.loading-card{text-align:center;padding:30px 34px;border:1px solid #2b3549;border-radius:18px;background:#0e1521;box-shadow:0 30px 100px #0009;min-width:240px}
.loading-logo{font-weight:900;letter-spacing:.14em;color:#fff;font-size:18px;margin-bottom:22px}
.loading-spinner{width:34px;height:34px;margin:0 auto 16px;border:3px solid #2b3549;border-top-color:#8ea0bd;border-radius:50%;animation:epicsolo-spin .8s linear infinite}
.loading-text{color:#9aa7bb;font-size:13px}
@keyframes epicsolo-spin{to{transform:rotate(360deg)}}
.loading-screen.hidden{opacity:0;visibility:hidden;pointer-events:none}
html[data-theme="light"] .loading-screen{background:radial-gradient(circle at top,#eef3f9 0,#dce5f0 65%,#d4deea 100%)}
html[data-theme="light"] .loading-card{background:#fff;border-color:#d5deea;box-shadow:0 30px 100px #47556933}
html[data-theme="light"] .loading-logo{color:#172033}
html[data-theme="light"] .loading-spinner{border-color:#cbd5e1;border-top-color:#64748b}
html[data-theme="light"] .loading-text{color:#64748b}

.disconnected-feed{opacity:.82;border:1px dashed #5d6b85!important}
.has-disconnected-webcam{min-height:80px;border:1px dashed #5d6b85;border-radius:12px}

.visitor-video-frame{background:#05080d}
.visitor-video-frame video{background:#05080d}
.video-reconnecting .visitor-video-frame video{opacity:1}
.video-reconnecting .visitor-video-frame::after{
  content:"Verbinden…";
  position:absolute;left:8px;bottom:8px;
  padding:3px 7px;border-radius:6px;
  background:#0b1019d9;color:#fff;font-size:10px;
  pointer-events:none
}

.drag-drop-area,.has-webcams{overflow:visible}
.visitor-tile{overflow:visible;contain:layout}
.visitor-video-frame{background:#05080d}
.visitor-video-frame video{background:#05080d;display:block}

/* Drag & Drop webcam workspace */
.drag-drop-area,
#dragDropArea,
[data-drag-drop]{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
  gap:14px;
  padding:12px;
  overflow:visible;
}

.drag-drop-area .visitor-tile,
#dragDropArea .visitor-tile,
[data-drag-drop] .visitor-tile{
  width:300px;
  min-width:300px;
  max-width:360px;
  flex:0 0 300px;
}

.drag-drop-area .visitor-video-frame,
#dragDropArea .visitor-video-frame,
[data-drag-drop] .visitor-video-frame{
  width:100%;
  height:225px;
  min-height:225px;
  aspect-ratio:4/3;
}

.drag-drop-area .visitor-video,
#dragDropArea .visitor-video,
[data-drag-drop] .visitor-video{
  width:100%;
  height:100%;
  object-fit:cover;
}

/* More room for controls without covering the webcam */
.drag-drop-area .visitor-actions,
#dragDropArea .visitor-actions,
[data-drag-drop] .visitor-actions{
  min-height:42px;
  padding:8px;
  gap:7px;
  justify-content:space-between;
  flex-wrap:nowrap;
}

.drag-drop-area .visitor-video-tools,
#dragDropArea .visitor-video-tools,
[data-drag-drop] .visitor-video-tools{
  left:8px;
  right:8px;
  top:8px;
  gap:7px;
}

.drag-drop-area .visitor-video-tools button,
#dragDropArea .visitor-video-tools button,
[data-drag-drop] .visitor-video-tools button{
  min-height:32px;
  padding:6px 9px;
}

.drag-drop-area .volume-control,
#dragDropArea .volume-control,
[data-drag-drop] .volume-control{
  min-height:32px;
  padding:6px 9px;
  gap:7px;
}

.drag-drop-area .volume-control input[type=range],
#dragDropArea .volume-control input[type=range],
[data-drag-drop] .volume-control input[type=range]{
  width:96px;
}

.drag-drop-area .resize-group,
#dragDropArea .resize-group,
[data-drag-drop] .resize-group{
  display:flex;
  align-items:center;
  gap:5px;
}

.drag-drop-area .resize-group button,
#dragDropArea .resize-group button,
[data-drag-drop] .resize-group button{
  min-width:44px;
  padding:6px 8px;
  font-size:11px;
}

/* Realtime volume indicator */
.drag-drop-area .volume-meter,
#dragDropArea .volume-meter,
[data-drag-drop] .volume-meter{
  position:relative;
  display:inline-block;
  width:7px;
  height:22px;
  flex:0 0 7px;
  border-radius:4px;
  background:linear-gradient(to top,#62e38a var(--volume-level,0%),#253047 var(--volume-level,0%));
  box-shadow:inset 0 0 0 1px #ffffff12;
  overflow:hidden;
}
.volume-meter::after{
  content:'';
  position:absolute;
  inset:0;
  background:repeating-linear-gradient(
    to top,
    transparent 0 4px,
    #0b101955 4px 5px
  );
  pointer-events:none;
}

/* On narrow screens the cards remain larger but become responsive */
@media(max-width:760px){
  .drag-drop-area .visitor-tile,
  #dragDropArea .visitor-tile,
  [data-drag-drop] .visitor-tile{
    width:min(100%,340px);
    min-width:0;
    max-width:100%;
    flex-basis:100%;
  }
  .drag-drop-area .visitor-video-frame,
  #dragDropArea .visitor-video-frame,
  [data-drag-drop] .visitor-video-frame{
    height:auto;
    aspect-ratio:4/3;
  }
  .drag-drop-area .volume-control input[type=range],
  #dragDropArea .volume-control input[type=range],
  [data-drag-drop] .volume-control input[type=range]{
    width:72px;
  }
}

/* Compact Drag & Drop webcam cards */
.drag-drop-area .visitor-tile,
#dragDropArea .visitor-tile,
[data-drag-drop] .visitor-tile{
  width:150px;
  min-width:150px;
  max-width:180px;
  flex:0 0 150px;
}

.drag-drop-area .visitor-video-frame,
#dragDropArea .visitor-video-frame,
[data-drag-drop] .visitor-video-frame{
  height:112px;
  min-height:112px;
  aspect-ratio:4/3;
}

.drag-drop-area .visitor-actions,
#dragDropArea .visitor-actions,
[data-drag-drop] .visitor-actions{
  min-height:34px;
  padding:5px;
  gap:4px;
}

.drag-drop-area .visitor-video-tools,
#dragDropArea .visitor-video-tools,
[data-drag-drop] .visitor-video-tools{
  left:5px;
  right:5px;
  top:5px;
  gap:4px;
}

.drag-drop-area .visitor-video-tools button,
#dragDropArea .visitor-video-tools button,
[data-drag-drop] .visitor-video-tools button{
  min-height:26px;
  padding:4px 6px;
  font-size:10px;
}

.drag-drop-area .volume-control,
#dragDropArea .volume-control,
[data-drag-drop] .volume-control{
  min-height:26px;
  padding:4px 6px;
  gap:4px;
  font-size:10px;
}

.drag-drop-area .volume-control input[type=range],
#dragDropArea .volume-control input[type=range],
[data-drag-drop] .volume-control input[type=range]{
  width:52px;
}

.drag-drop-area .resize-group button,
#dragDropArea .resize-group button,
[data-drag-drop] .resize-group button{
  min-width:30px;
  padding:4px 5px;
  font-size:9px;
}

.drag-drop-area .visitor-name,
#dragDropArea .visitor-name,
[data-drag-drop] .visitor-name{
  padding:4px 6px;
  font-size:11px;
}

@media(max-width:760px){
  .drag-drop-area .visitor-tile,
  #dragDropArea .visitor-tile,
  [data-drag-drop] .visitor-tile{
    width:150px;
    min-width:150px;
    max-width:180px;
    flex-basis:150px;
  }
  .drag-drop-area .visitor-video-frame,
  #dragDropArea .visitor-video-frame,
  [data-drag-drop] .visitor-video-frame{
    height:112px;
    aspect-ratio:4/3;
  }
}

/* Media settings */
.media-settings-overlay{
  position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;
}
.media-settings-overlay.hidden{display:none}
.media-settings-backdrop{position:absolute;inset:0;background:#0009;backdrop-filter:blur(3px)}
.media-settings-dialog{
  position:relative;width:min(520px,calc(100vw - 28px));max-height:calc(100vh - 40px);
  overflow:auto;padding:20px;border:1px solid #2f3b52;border-radius:16px;
  background:#0c121c;color:#fff;box-shadow:0 24px 70px #0008;
}
.media-settings-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.media-settings-head h2{margin:4px 0 0;font-size:20px}
.media-setting-row{display:grid;grid-template-columns:120px 1fr;gap:12px;align-items:center;margin:14px 0}
.media-setting-row label{font-weight:700}
.media-setting-row select{
  width:100%;min-height:40px;padding:8px 10px;border-radius:9px;
  border:1px solid #33415b;background:#111a28;color:#fff;
}
.media-settings-status{min-height:20px;margin:10px 0;color:#aebbd0;font-size:13px}
.media-settings-status.error{color:#ffb0b0}
.media-settings-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:18px}
.settings-button{font-weight:800}
.pip-primary{font-weight:900!important;border-color:#7181ff!important;box-shadow:0 0 0 1px #7181ff55}

/* EPICSOLO webcam control layout */
.drag-drop-area .visitor-tile,
#dragDropArea .visitor-tile,
[data-drag-drop] .visitor-tile{
  position:relative;
  overflow:visible;
  border-radius:12px;
}

.visitor-video-frame{
  position:relative;
  overflow:hidden;
}

.visitor-badge{
  position:absolute;
  left:7px;
  top:7px;
  z-index:4;
  padding:3px 7px;
  border-radius:7px;
  background:#101927e8;
  border:1px solid #ffffff1c;
  color:#fff;
  font-size:10px;
  font-weight:800;
  pointer-events:none;
}

.visitor-video-tools{
  opacity:0;
  transform:translateY(-4px);
  transition:opacity .16s ease,transform .16s ease;
  pointer-events:none;
}
.visitor-tile:hover .visitor-video-tools,
.visitor-tile:focus-within .visitor-video-tools{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}

.visitor-actions{
  position:relative;
  display:flex;
  align-items:center;
  gap:5px;
  overflow:visible!important;
  z-index:6;
}

.visitor-actions button{
  min-width:28px;
  min-height:28px;
}

.visitor-actions .volume-control{
  display:flex;
  align-items:center;
  min-width:62px;
  padding:4px 5px;
}
.visitor-actions .volume-control input[type=range]{
  width:42px;
}

.resize-menu{
  position:relative;
  display:inline-flex;
}
.resize-dropdown{
  position:absolute;
  left:0;
  top:calc(100% + 5px);
  min-width:118px;
  padding:5px;
  display:none;
  flex-direction:column;
  gap:3px;
  z-index:50;
  background:#0c1420;
  border:1px solid #33415a;
  border-radius:9px;
  box-shadow:0 12px 30px #0009;
}
.resize-dropdown.open{display:flex}
.resize-dropdown button{
  width:100%;
  text-align:left;
  padding:6px 8px;
  font-size:10px;
  border:0;
  background:transparent;
}
.resize-dropdown button:hover{
  background:#1a2638;
}

.realtime-volume-meter{
  position:absolute;
  left:8px;
  bottom:8px;
  z-index:4;
  width:64px;
  height:8px;
  border-radius:5px;
  background:linear-gradient(90deg,#62e38a var(--audio-level,0%),#263246 var(--audio-level,0%));
  box-shadow:0 0 8px #62e38a44,inset 0 0 0 1px #ffffff12;
  pointer-events:none;
}
.realtime-volume-meter::after{
  content:'';
  position:absolute;
  inset:0;
  background:repeating-linear-gradient(90deg,transparent 0 7px,#0b101955 7px 8px);
  pointer-events:none;
}

/* Start all remote playback muted: no echo until the user explicitly enables it. */
.visitor-video:not([muted]){
  /* state is controlled by JS; this selector intentionally has no forced volume */
}

@media(max-width:700px){
  .visitor-video-tools{opacity:1;transform:none;pointer-events:auto}
  .visitor-actions .volume-control input[type=range]{width:34px}
}

.media-settings-overlay{z-index:99999!important}
.media-settings-dialog{z-index:100000!important}

/* Integrated webcam rail: cards own their stream, never recreate it on drag/drop. */
#dragDropArea,
.drag-drop-area,
[data-drag-drop]{
  position:relative;
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
  gap:10px;
  overflow:visible;
}
#dragDropArea .visitor-tile,
.drag-drop-area .visitor-tile,
[data-drag-drop] .visitor-tile{
  position:relative;
  flex:0 0 150px;
  width:150px;
  min-width:150px;
  overflow:visible;
}
#dragDropArea .visitor-video-frame,
.drag-drop-area .visitor-video-frame,
[data-drag-drop] .visitor-video-frame{
  overflow:hidden;
  background:#05080d;
}
#dragDropArea .visitor-video,
.drag-drop-area .visitor-video,
[data-drag-drop] .visitor-video{
  display:block;
  background:#05080d;
}

.media-settings-overlay{z-index:10000!important}
.media-settings-dialog{z-index:10001!important}

.media-settings-overlay{z-index:10000!important}.media-settings-dialog{z-index:10001!important}

/* Kamerstarter is a fixed main-stage participant; only guests/users enter Drag & Drop. */
#starterVideo,
#starterVideoWrap,
.starter-video-wrap{
  position:relative;
}
#starterVideoWrap + .visitor-main,
.starter-main-with-visitor{
  display:flex;
  gap:12px;
  align-items:stretch;
}

.media-settings-role{
  display:inline-flex;
  margin-left:8px;
  padding:3px 7px;
  border:1px solid #34445f;
  border-radius:999px;
  color:#a9b9d0;
  font-size:11px;
  vertical-align:middle;
}
.media-settings-overlay[data-role="owner"] .media-settings-role{
  border-color:#5f78a9;
}
.media-settings-overlay[data-role="guest"] .media-settings-role{
  border-color:#466d5b;
}

/* Visitor webcam controls: settings are intentionally absent; audio/resize/PIP remain. */
.visitor-tile .starter-only-settings{display:none!important}
.visitor-tile .visitor-actions{position:relative;z-index:3}
.visitor-tile.dragging{opacity:.72}
.visitor-tile.drag-over-before{outline:2px solid rgba(120,170,255,.75)}
.visitor-tile.drag-over-after{outline:2px solid rgba(120,170,255,.45)}

.visitor-video-frame{position:relative}
.webcam-private-overlay{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(12,16,24,.88);
  color:#dce5f5;
  font-weight:600;
  font-size:13px;
  letter-spacing:.01em;
  pointer-events:none;
  z-index:4;
}
.visitor-tile.webcam-private video{visibility:visible}

.account-box{max-width:430px}.account-tabs{display:flex;gap:8px;margin:14px 0}.account-tabs button.active{outline:2px solid rgba(120,170,255,.5)}.account-form{display:grid;gap:10px}.account-form input{width:100%;box-sizing:border-box}.account-logged{padding:12px;border:1px solid #2d3c54;border-radius:10px}

.link-button{background:none;border:0;padding:4px 0;text-align:left;text-decoration:underline;cursor:pointer}
.account-reset-page{min-height:100vh;display:grid;place-items:center;padding:24px;box-sizing:border-box}

.account-topbar{display:inline-flex;align-items:center;gap:10px}
.logged-in-user{display:inline-flex;align-items:center;gap:8px;font-weight:600}
.logged-in-user.hidden{display:none!important}
.logged-in-user #loggedInUsername{max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.account-arrow{opacity:.65}
.topbar-logout{border:0;background:transparent;cursor:pointer;text-decoration:underline;font:inherit;padding:2px 0}

/* Systeemmeldingen zoals binnenkomen/verlaten zijn bewust kleiner dan chatberichten. */
.msg.system-msg{font-size:11px;opacity:.72;padding:5px 0;border-bottom:1px solid rgba(32,42,58,.55)}
.msg.system-msg span{font-size:10px;opacity:.7}

#mediaSettings{white-space:nowrap}
.media-setting-row select{width:100%;min-height:38px}

.media-settings-dialog select:focus{outline:2px solid #7aa2ff;outline-offset:1px}
#starterMute{min-width:38px}

.volume-meter{
  display:inline-block!important;
  width:34px!important;
  height:8px!important;
  min-width:34px;
  margin-left:6px;
  border-radius:5px;
  border:1px solid rgba(255,255,255,.16);
  background:linear-gradient(90deg,#62e38a 0%,#62e38a var(--volume-level,0%),#263246 var(--volume-level,0%),#263246 100%);
  box-shadow:0 0 6px rgba(98,227,138,.22);
  vertical-align:middle;
  pointer-events:none;
}
.media-setting-row{margin-top:12px}
.media-setting-row select{display:block;width:100%;min-height:40px}

.admin-message{color:#e53935!important;font-weight:800}
.moderator-message{color:#1976d2!important;font-weight:800}
.global-message{color:#c084fc!important;font-weight:800;font-size:inherit}
.staff-badge{font-weight:800}
.participant-row .staff-name-admin,
.participant-row.participant-admin .staff-badge,
.participant-row.participant-admin .staff-name-admin{
  color:#e53935!important;
  font-weight:800!important;
}
.participant-row .staff-name-moderator,
.participant-row.participant-moderator .staff-badge,
.participant-row.participant-moderator .staff-name-moderator{
  color:#1976d2!important;
  font-weight:800!important;
}

.staff-badge.admin{color:#e53935}
.staff-badge.moderator{color:#1976d2}
#staffVisibility{font-weight:700}

.admin-page{min-height:100vh;background:#0b1018;color:#e8edf5;font-family:system-ui,-apple-system,Segoe UI,sans-serif}
.admin-shell{max-width:1200px;margin:auto;padding:24px}
.admin-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}
.admin-header h1{margin:0}.admin-header button,.admin-nav button,.admin-row button{cursor:pointer}
.admin-nav{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.admin-nav button{padding:9px 13px;border:1px solid #334057;border-radius:8px;background:#172033;color:#fff}
.admin-card{background:#111a28;border:1px solid #2a374d;border-radius:12px;padding:18px;margin-bottom:16px}
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:16px}
.stats-grid>div{background:#111a28;border:1px solid #2a374d;border-radius:12px;padding:18px}
.stats-grid b{display:block;font-size:28px}.stats-grid span{opacity:.7}
.admin-row{display:flex;justify-content:space-between;gap:15px;align-items:center;padding:12px 0;border-bottom:1px solid #263247}
.admin-table .thead,.admin-table .trow{display:grid;grid-template-columns:1.2fr 1fr 1.5fr 1.4fr 1.2fr;gap:10px;padding:10px;border-bottom:1px solid #263247}
.admin-table .thead{font-weight:800;background:#172033}.log-controls{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}.log-controls input,.log-controls select{padding:9px;background:#0d1420;color:#fff;border:1px solid #334057;border-radius:7px}
.log-line{padding:9px 0;border-bottom:1px solid #263247}.log-line span,.log-line em{opacity:.6;margin-right:10px}.log-line b{margin-right:10px}
.admin-page .admin{color:#e53935}.admin-page .moderator{color:#1976d2}
@media(max-width:700px){.admin-table .thead,.admin-table .trow{grid-template-columns:1fr}.admin-row{align-items:flex-start;flex-direction:column}}

.user-context-menu{position:fixed;z-index:10000;min-width:210px;padding:6px;background:#111a28;border:1px solid #3a4860;border-radius:9px;box-shadow:0 12px 35px rgba(0,0,0,.45)}
.user-context-menu button{display:block;width:100%;padding:9px 11px;border:0;background:transparent;color:#eef2f7;text-align:left;border-radius:6px;cursor:pointer}
.user-context-menu button:hover{background:#1d2a40}
.staff-notice{position:fixed;right:20px;bottom:20px;z-index:11000;max-width:380px;padding:12px 16px;border-radius:9px;background:#183b27;color:#eaffef;border:1px solid #2e7d4a;opacity:0;transform:translateY(8px);pointer-events:none;transition:.18s}
.staff-notice.show{opacity:1;transform:none}.staff-notice.error{background:#421d22;color:#ffe9eb;border-color:#8e3a45}
.user-lookup{display:flex;gap:8px;margin:10px 0 14px}.user-lookup input{flex:1;padding:9px;background:#0d1420;color:#fff;border:1px solid #334057;border-radius:7px}.user-lookup button{padding:9px 12px}

.admin-cam-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.admin-cam-card{min-width:0;background:#0d1522;border:1px solid #2b3850;border-radius:11px;overflow:hidden}
.admin-cam-media{position:relative;aspect-ratio:16/9;background:#070b12;overflow:hidden}
.admin-cam-thumb,.admin-live-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.admin-cam-thumb{display:block}
.admin-live-video{display:none}
.admin-cam-card.hover-live .admin-cam-thumb{display:none}
.admin-cam-card.hover-live .admin-live-video{display:block}
.admin-cam-hover{position:absolute;right:7px;top:7px;padding:4px 7px;border-radius:5px;background:rgba(0,0,0,.72);font-size:10px;font-weight:800;opacity:.7}
.admin-cam-info{padding:10px 11px;line-height:1.45;font-size:12px}
.admin-cam-name{font-size:14px;font-weight:800;margin-bottom:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.admin-cam-info>div:not(.admin-cam-name){opacity:.8}
.admin-cam-info .cam-status{margin-top:4px;opacity:1}
.admin-cam-card:not(.has-frame) .admin-cam-thumb{opacity:.35}
@media(max-width:1100px){.admin-cam-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:850px){.admin-cam-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:620px){.admin-cam-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

.user-lookup-result{margin:8px 0 14px;padding:12px;border:1px solid #334057;border-radius:8px;background:#0d1522}
.user-lookup-actions{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.user-lookup-actions button{padding:8px 11px;border:1px solid #334057;border-radius:7px;background:#172033;color:#fff;cursor:pointer}

.chat-form{position:relative}
.chat-input-row{display:flex;gap:8px;align-items:center}
.chat-input-row input{flex:1;min-width:0}
.chat-input-meta{display:flex;justify-content:flex-end;margin-top:4px;min-height:14px}
.chat-char-counter{font-size:11px;color:#8c99ae;line-height:1}
.chat-char-counter.at-limit{color:#ff8894;font-weight:700}
.room-page .chat #messages .msg{max-width:100%;overflow-wrap:anywhere;word-break:break-word;white-space:pre-wrap}
.room-page .chat #messages .msg>div{max-width:100%;overflow-wrap:anywhere;word-break:break-word;white-space:pre-wrap}
.emoji-button{width:46px;min-width:46px;padding:8px;font-size:22px}
.emoji-choice:hover{background:#202b3d}
.msg.admin-message{color:#e53935;font-weight:800}
.msg.moderator-message{color:#1976d2;font-weight:800}
.msg.admin-message span,.msg.moderator-message span{color:inherit;opacity:.72;font-weight:600}
.msg a{color:#7fb8ff;text-decoration:underline;overflow-wrap:anywhere}
.msg.admin-message a{color:#ff9b9b}
.msg.moderator-message a{color:#8dbdff}


.join-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.join-actions button{flex:1;min-width:150px}

.admin-cam-room{display:block;width:100%;margin:0 0 3px;padding:0;border:0;background:transparent;color:#7fb8ff;text-align:left;font:inherit;font-weight:700;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.admin-cam-room:hover{text-decoration:underline}

.chat-log-modal-box{width:min(900px,94vw);max-height:85vh;display:flex;flex-direction:column}
.chat-log-header{display:flex;align-items:center;justify-content:space-between;gap:12px}
.chat-log-content{margin-top:10px;overflow:auto;min-height:180px;max-height:62vh;padding:8px;border:1px solid #2b3850;border-radius:8px;background:#0a101a}
.chat-log-entry{padding:7px 5px;border-bottom:1px solid rgba(127,145,173,.14);font-size:13px;line-height:1.4}
.chat-log-entry:last-child{border-bottom:0}
.chat-log-entry>div:first-child{margin-bottom:2px}

.staff-own-context-menu{position:fixed;z-index:10000;min-width:190px;padding:5px;background:#111a28;border:1px solid #3a4860;border-radius:8px;box-shadow:0 12px 30px rgba(0,0,0,.45)}
.staff-own-context-menu button{display:block;width:100%;padding:9px 10px;border:0;border-radius:6px;background:transparent;color:#fff;text-align:left;cursor:pointer;font:inherit}
.staff-own-context-menu button:hover{background:#243149}
.staff-own-row{cursor:context-menu}

.webcam-privacy-badge{display:inline-flex;align-items:center;gap:4px;margin-left:5px;font-size:11px;line-height:1.2;font-weight:600}
.webcam-open{color:#6ee7b7}
.webcam-closed{color:#aeb9c9}

.hidden-staff-eye{display:inline-flex;align-items:center;margin-left:4px;font-size:13px;opacity:.9;vertical-align:middle}

.admin-cam-card{cursor:pointer}
.admin-cam-card:focus-visible{outline:2px solid #6ea8ff;outline-offset:3px}
.admin-cam-room-name{font-weight:600}

/* Realtime volume meter in webcam/player controls */
.volume-control .volume-meter,.starter-actions .volume-meter,.visitor-video-tools .volume-meter{
  position:relative;display:inline-block;width:7px;height:22px;flex:0 0 7px;border-radius:4px;
  background:linear-gradient(to top,#62e38a var(--volume-level,0%),#253047 var(--volume-level,0%));
  box-shadow:inset 0 0 0 1px #ffffff12;overflow:hidden;
}
.volume-control .volume-meter::after,.starter-actions .volume-meter::after,.visitor-video-tools .volume-meter::after{
  content:'';position:absolute;inset:0;background:repeating-linear-gradient(to top,transparent 0 4px,#0b101955 4px 5px);pointer-events:none;
}
.webcam-name-overlay{display:none!important}
.global-message-card{margin-top:18px}
.global-message-form{display:flex;flex-direction:column;gap:10px}
.global-message-form textarea{width:100%;box-sizing:border-box;resize:vertical;min-height:78px;padding:10px 12px;border:1px solid #334057;border-radius:8px;background:#0b111c;color:#fff;font:inherit}
.global-message-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}

.staff-context-menu,.staff-own-context-menu{position:fixed;z-index:10000;min-width:210px;padding:6px;border:1px solid #334057;border-radius:9px;background:#111a29;box-shadow:0 14px 36px #0008}
.staff-context-menu button,.staff-own-context-menu button{display:block;width:100%;border:0;background:transparent;color:#eef3ff;text-align:left;padding:9px 11px;border-radius:6px;cursor:pointer;font:inherit}
.staff-context-menu button:hover,.staff-own-context-menu button:hover{background:#22304a}


/* Global admin messages: bold, readable purple, normal chat size. */
.msg.global-message{color:#c084fc!important;font-weight:800;font-size:inherit}
.msg.global-message span{color:inherit;opacity:.72;font-weight:600}

.chat-log-entry.global-message{
  color:#c084fc!important;
  font-weight:800!important;
  font-size:inherit!important;
}
.chat-log-entry.global-message span{
  color:inherit!important;
  opacity:.72;
  font-weight:600;
}

.participant-meta-tooltip{position:fixed;z-index:11000;min-width:220px;max-width:300px;padding:9px 11px;border:1px solid #3a4860;border-radius:8px;background:#111a28;color:#eef3ff;box-shadow:0 12px 30px rgba(0,0,0,.5);font-size:13px;line-height:1.5;pointer-events:none}
.participant-meta-tooltip div:first-child{color:#fff;font-weight:700}
.participant-meta-tooltip div+div{margin-top:2px;color:#c9d3e4}

.stats-for-nerds{
  position:absolute;right:10px;bottom:58px;z-index:20;
  min-width:235px;white-space:pre-line;
  padding:9px 11px;border:1px solid rgba(255,255,255,.18);
  border-radius:7px;background:rgba(5,9,16,.88);color:#dbe7ff;
  font:12px/1.45 ui-monospace,SFMono-Regular,Consolas,monospace;
  pointer-events:none;backdrop-filter:blur(5px);
}
.stats-for-nerds.hidden{display:none}
.volume-meter{
  position:relative;display:inline-block;width:42px;height:7px;margin-left:6px;
  vertical-align:middle;border-radius:99px;overflow:hidden;
  background:rgba(255,255,255,.12);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
}
.volume-meter::after{
  content:"";position:absolute;left:0;top:0;bottom:0;width:var(--volume-level,0%);
  background:linear-gradient(90deg,#45d483 0%,#f6c344 72%,#ef5350 100%);
  border-radius:inherit;transition:width 60ms linear;
}

/* Chatlogs in admin dashboard: preserve chat role/global colors. */
.admin-page .log-line.admin-message-log b,
.admin-page .log-line.admin-message-log div{
  color:#e53935!important;
  font-weight:800!important;
}
.admin-page .log-line.moderator-message-log b,
.admin-page .log-line.moderator-message-log div{
  color:#1976d2!important;
  font-weight:800!important;
}
.admin-page .log-line.global-message-log b,
.admin-page .log-line.global-message-log div{
  color:#c084fc!important;
  font-weight:800!important;
}
.admin-page .log-line.global-message-log{
  border-left:3px solid #c084fc;
  padding-left:9px;
}

/* Chatlog user grouping and role colors. */
.admin-page .log-user-group{margin:0 0 12px;border:1px solid rgba(255,255,255,.12);border-radius:10px;overflow:hidden;background:rgba(5,9,16,.45)}
.admin-page .log-user-header{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:9px 11px;font-weight:800;border-bottom:1px solid rgba(255,255,255,.1)}
.admin-page .log-room-list{font-size:11px;font-weight:500;opacity:.72;margin-left:auto}
.admin-page .log-role-badge{font-size:10px;padding:2px 6px;border-radius:999px;background:rgba(255,255,255,.1)}
.admin-page .log-user-messages .log-line{border-left:0;border-radius:0;margin:0;border-bottom:1px solid rgba(255,255,255,.07)}
.admin-page .log-user-group.admin-message-log .log-user-header,.admin-page .log-user-group.admin-audit-log{color:#e53935}
.admin-page .log-user-group.moderator-message-log .log-user-header,.admin-page .log-user-group.moderator-audit-log{color:#1976d2}
.admin-page .log-user-group.global-message-log .log-user-header,.admin-page .log-user-group.global-audit-log{color:#c084fc}
.admin-page .log-user-group.admin-message-log{border-color:rgba(229,57,53,.35)}
.admin-page .log-user-group.moderator-message-log{border-color:rgba(25,118,210,.35)}
.admin-page .log-user-group.global-message-log{border-color:rgba(192,132,252,.35)}
.admin-page .log-line.admin-audit-log b,.admin-page .log-line.admin-audit-log div{color:#e53935!important;font-weight:800}
.admin-page .log-line.moderator-audit-log b,.admin-page .log-line.moderator-audit-log div{color:#1976d2!important;font-weight:800}
.admin-page .log-line.global-audit-log b,.admin-page .log-line.global-audit-log div{color:#c084fc!important;font-weight:800}

.participant-row .staff-name-hidden{
  opacity:.2!important;
  transition:opacity .15s ease;
}
.participant-row .staff-name-hidden:hover{
  opacity:.2!important;
}

.global-system-label{
  display:inline-block;
  margin-right:6px;
  font-size:.82em;
  font-weight:800;
  letter-spacing:.02em;
  color:#c084fc;
}

.participant-meta-tooltip{
  min-width:270px;
  max-width:310px;
}
.participant-meta-divider{
  height:1px;
  margin:8px 0;
  background:rgba(255,255,255,.16);
}
.participant-stats-title{
  font-size:11px;
  font-weight:800;
  letter-spacing:.06em;
  color:#c084fc;
  margin-bottom:5px;
}
.participant-stats-body{
  font:11px/1.45 ui-monospace,SFMono-Regular,Consolas,monospace;
  color:#dbe7ff;
}


/* Admin dashboard theme: keep the entire beheeromgeving consistently light/dark.
   The default rules above are the dark theme; these overrides switch every
   admin surface when the shared EPICSOLO theme is light. */
html[data-theme="light"] body.admin-page{
  background:#eef2f7;
  color:#172033;
}
html[data-theme="light"] .admin-page .admin-card,
html[data-theme="light"] .admin-page .stats-grid>div{
  background:#fff;
  border-color:#d5deea;
  color:#172033;
}
html[data-theme="light"] .admin-page .admin-nav button{
  background:#fff;
  color:#172033;
  border-color:#cbd5e1;
}
html[data-theme="light"] .admin-page .admin-nav button:hover,
html[data-theme="light"] .admin-page .admin-nav button.active{
  background:#e8eef7;
}
html[data-theme="light"] .admin-page .admin-table .thead{
  background:#e8eef7;
  color:#172033;
}
html[data-theme="light"] .admin-page .admin-table .thead,
html[data-theme="light"] .admin-page .admin-table .trow,
html[data-theme="light"] .admin-page .admin-row,
html[data-theme="light"] .admin-page .log-line{
  border-color:#d8e0eb;
}
html[data-theme="light"] .admin-page input,
html[data-theme="light"] .admin-page select,
html[data-theme="light"] .admin-page textarea{
  background:#fff;
  color:#172033;
  border-color:#cbd5e1;
}
html[data-theme="light"] .admin-page input::placeholder,
html[data-theme="light"] .admin-page textarea::placeholder{
  color:#64748b;
}
html[data-theme="light"] .admin-page .user-context-menu,
html[data-theme="light"] .admin-page .staff-own-context-menu,
html[data-theme="light"] .admin-page html[data-theme="light"] .admin-page .user-context-menu button,
html[data-theme="light"] .admin-page .staff-own-context-menu button{
  color:#172033;
}
html[data-theme="light"] .admin-page .user-context-menu button:hover,
html[data-theme="light"] .admin-page .staff-own-context-menu button:hover,
html[data-theme="light"] .admin-page .emoji-choice:hover{
  background:#eef3f9;
}
html[data-theme="light"] .admin-page .staff-notice{
  background:#e7f6ed;
  color:#14532d;
  border-color:#a7d8b8;
}
html[data-theme="light"] .admin-page .staff-notice.error{
  background:#fff0f1;
  color:#8f2332;
  border-color:#e5a3ac;
}
html[data-theme="light"] .admin-page .user-lookup-result{
  background:#f8fafc;
  border-color:#cbd5e1;
}
html[data-theme="light"] .admin-page .user-lookup-actions button{
  background:#fff;
  color:#172033;
  border-color:#cbd5e1;
}
html[data-theme="light"] .admin-page .admin-cam-card{
  background:#fff;
  border-color:#d5deea;
}
html[data-theme="light"] .admin-page .admin-cam-media{
  background:#e8edf4;
}
html[data-theme="light"] .admin-page .admin-cam-hover{
  background:rgba(15,23,42,.72);
  color:#fff;
}
html[data-theme="light"] .admin-page .chat-log-content{
  background:#f8fafc;
  border-color:#d5deea;
}
html[data-theme="light"] .admin-page .chat-log-entry{
  border-color:#d8e0eb;
}
html[data-theme="light"] .admin-page .muted,
html[data-theme="light"] .admin-page .stats-grid span{
  color:#64748b;
}
html[data-theme="light"] .admin-page .admin-cam-info>div:not(.admin-cam-name){
  color:#475569;
}
html[data-theme="light"] .admin-page .admin-cam-room{
  color:#2563eb;
}
html[data-theme="light"] .admin-page .admin-cam-card,
html[data-theme="light"] .admin-page .user-lookup-result{
  box-shadow:0 1px 2px rgba(15,23,42,.04);
}

/* Hidden staff is visibly faded immediately on join, while retaining the role color. */
/* Chatlog user grouping and role colors. */
.admin-page .log-user-group{margin:0 0 12px;border:1px solid rgba(255,255,255,.12);border-radius:10px;overflow:hidden;background:rgba(5,9,16,.45)}
.admin-page .log-user-header{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:9px 11px;font-weight:800;border-bottom:1px solid rgba(255,255,255,.1)}
.admin-page .log-room-list{font-size:11px;font-weight:500;opacity:.72;margin-left:auto}
.admin-page .log-role-badge{font-size:10px;padding:2px 6px;border-radius:999px;background:rgba(255,255,255,.1)}
.admin-page .log-user-messages .log-line{border-left:0;border-radius:0;margin:0;border-bottom:1px solid rgba(255,255,255,.07)}
.admin-page .log-user-group.admin-message-log .log-user-header,.admin-page .log-user-group.admin-audit-log{color:#e53935}
.admin-page .log-user-group.moderator-message-log .log-user-header,.admin-page .log-user-group.moderator-audit-log{color:#1976d2}
.admin-page .log-user-group.global-message-log .log-user-header,.admin-page .log-user-group.global-audit-log{color:#c084fc}
.admin-page .log-user-group.admin-message-log{border-color:rgba(229,57,53,.35)}
.admin-page .log-user-group.moderator-message-log{border-color:rgba(25,118,210,.35)}
.admin-page .log-user-group.global-message-log{border-color:rgba(192,132,252,.35)}
.admin-page .log-line.admin-audit-log b,.admin-page .log-line.admin-audit-log div{color:#e53935!important;font-weight:800}
.admin-page .log-line.moderator-audit-log b,.admin-page .log-line.moderator-audit-log div{color:#1976d2!important;font-weight:800}
.admin-page .log-line.global-audit-log b,.admin-page .log-line.global-audit-log div{color:#c084fc!important;font-weight:800}

.participant-row .staff-name-hidden{
  opacity:0.2!important;
  filter:none!important;
}


/* Staff enters hidden: role color remains, visibility is only 20%, eye is shown. */
/* Chatlog user grouping and role colors. */
.admin-page .log-user-group{margin:0 0 12px;border:1px solid rgba(255,255,255,.12);border-radius:10px;overflow:hidden;background:rgba(5,9,16,.45)}
.admin-page .log-user-header{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:9px 11px;font-weight:800;border-bottom:1px solid rgba(255,255,255,.1)}
.admin-page .log-room-list{font-size:11px;font-weight:500;opacity:.72;margin-left:auto}
.admin-page .log-role-badge{font-size:10px;padding:2px 6px;border-radius:999px;background:rgba(255,255,255,.1)}
.admin-page .log-user-messages .log-line{border-left:0;border-radius:0;margin:0;border-bottom:1px solid rgba(255,255,255,.07)}
.admin-page .log-user-group.admin-message-log .log-user-header,.admin-page .log-user-group.admin-audit-log{color:#e53935}
.admin-page .log-user-group.moderator-message-log .log-user-header,.admin-page .log-user-group.moderator-audit-log{color:#1976d2}
.admin-page .log-user-group.global-message-log .log-user-header,.admin-page .log-user-group.global-audit-log{color:#c084fc}
.admin-page .log-user-group.admin-message-log{border-color:rgba(229,57,53,.35)}
.admin-page .log-user-group.moderator-message-log{border-color:rgba(25,118,210,.35)}
.admin-page .log-user-group.global-message-log{border-color:rgba(192,132,252,.35)}
.admin-page .log-line.admin-audit-log b,.admin-page .log-line.admin-audit-log div{color:#e53935!important;font-weight:800}
.admin-page .log-line.moderator-audit-log b,.admin-page .log-line.moderator-audit-log div{color:#1976d2!important;font-weight:800}
.admin-page .log-line.global-audit-log b,.admin-page .log-line.global-audit-log div{color:#c084fc!important;font-weight:800}

.participant-row .staff-name-hidden{
  opacity:0.2 !important;
  filter:none !important;
}
.participant-row .staff-name-hidden + .staff-hidden-eye{
  opacity:1 !important;
}
.starter-actions,
.starter-actions *{pointer-events:auto;}
.starter-video-wrap .starter-actions{z-index:20;}

/* Close button for shared visitor webcams. Resize, PIP and fullscreen remain. */
.visitor-video-tools .visitor-close{
  width:26px;
  height:26px;
  padding:0 !important;
  display:inline-grid;
  place-items:center;
  border:1px solid #8b3f4b;
  border-radius:7px;
  background:#34151d;
  color:#fff;
  font-size:18px !important;
  line-height:1;
  font-weight:800;
  cursor:pointer;
}
.visitor-video-tools .visitor-close:hover{
  background:#6b2533;
  border-color:#b65a68;
}

/* Staff hidden state: role color is retained, visibility is only 20%. */
/* Chatlog user grouping and role colors. */
.admin-page .log-user-group{margin:0 0 12px;border:1px solid rgba(255,255,255,.12);border-radius:10px;overflow:hidden;background:rgba(5,9,16,.45)}
.admin-page .log-user-header{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:9px 11px;font-weight:800;border-bottom:1px solid rgba(255,255,255,.1)}
.admin-page .log-room-list{font-size:11px;font-weight:500;opacity:.72;margin-left:auto}
.admin-page .log-role-badge{font-size:10px;padding:2px 6px;border-radius:999px;background:rgba(255,255,255,.1)}
.admin-page .log-user-messages .log-line{border-left:0;border-radius:0;margin:0;border-bottom:1px solid rgba(255,255,255,.07)}
.admin-page .log-user-group.admin-message-log .log-user-header,.admin-page .log-user-group.admin-audit-log{color:#e53935}
.admin-page .log-user-group.moderator-message-log .log-user-header,.admin-page .log-user-group.moderator-audit-log{color:#1976d2}
.admin-page .log-user-group.global-message-log .log-user-header,.admin-page .log-user-group.global-audit-log{color:#c084fc}
.admin-page .log-user-group.admin-message-log{border-color:rgba(229,57,53,.35)}
.admin-page .log-user-group.moderator-message-log{border-color:rgba(25,118,210,.35)}
.admin-page .log-user-group.global-message-log{border-color:rgba(192,132,252,.35)}
.admin-page .log-line.admin-audit-log b,.admin-page .log-line.admin-audit-log div{color:#e53935!important;font-weight:800}
.admin-page .log-line.moderator-audit-log b,.admin-page .log-line.moderator-audit-log div{color:#1976d2!important;font-weight:800}
.admin-page .log-line.global-audit-log b,.admin-page .log-line.global-audit-log div{color:#c084fc!important;font-weight:800}

.participant-row .staff-name-hidden{
  opacity:.2 !important;
  filter:none !important;
}
.participant-row .hidden-staff-eye{
  opacity:1 !important;
  display:inline-flex !important;
}
.starter-video-wrap .starter-actions,
.starter-video-wrap .starter-actions button,
.starter-video-wrap .starter-actions input{
  pointer-events:auto !important;
  position:relative;
  z-index:30;
}

/* Realtime audio indicator: name + live level, bottom-left of every webcam. */
.webcam-audio-overlay{
  position:absolute;
  left:10px;
  bottom:10px;
  z-index:12;
  display:inline-flex;
  align-items:center;
  gap:7px;
  max-width:calc(100% - 20px);
  padding:5px 8px;
  border-radius:7px;
  background:rgba(5,8,13,.78);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 3px 12px rgba(0,0,0,.28);
  pointer-events:none;
  box-sizing:border-box;
}
.webcam-audio-name{
  max-width:150px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:11px;
  line-height:1;
  font-weight:700;
  color:#fff;
}
.webcam-audio-level{
  position:relative;
  display:block;
  width:62px;
  height:7px;
  flex:0 0 62px;
  overflow:hidden;
  border-radius:5px;
  background:#263246;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
}
.webcam-audio-fill{
  display:block;
  width:0%;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,#62e38a 0%,#a9ee5f 65%,#ffb84d 82%,#ff6262 100%);
  transition:width 55ms linear;
}
.webcam-audio-overlay.audio-speaking{
  border-color:rgba(98,227,138,.38);
}
.visitor-video-frame .visitor-audio-overlay{
  left:8px;
  bottom:8px;
}
.visitor-video-frame .visitor-audio-overlay .webcam-audio-name{
  max-width:100px;
}
/* Hover/focus guarantees the PIP control is exposed before activation. */
.pip-hover-active [data-pip]{
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
}
@media(max-width:700px){
  .webcam-audio-overlay{left:6px;bottom:6px;padding:4px 6px;gap:5px}
  .webcam-audio-name{max-width:90px;font-size:10px}
  .webcam-audio-level{width:48px;flex-basis:48px;height:6px}
}

.epic-pip-fallback{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:100000;
  width:min(360px,42vw);
  aspect-ratio:4/3;
  display:none;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.22);
  border-radius:12px;
  background:#05080d;
  box-shadow:0 18px 50px rgba(0,0,0,.55);
}
.epic-pip-fallback.open{display:block}
.epic-pip-fallback video{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.epic-pip-fallback-head{
  position:absolute;
  left:0;
  right:0;
  top:0;
  z-index:2;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:6px 8px;
  background:linear-gradient(rgba(0,0,0,.65),transparent);
  color:#fff;
  font-size:11px;
  font-weight:700;
  pointer-events:none;
}
.epic-pip-fallback-head button{
  pointer-events:auto;
  border:0;
  border-radius:5px;
  background:rgba(0,0,0,.55);
  color:#fff;
  cursor:pointer;
  width:24px;
  height:24px;
}
@media(max-width:700px){
  .epic-pip-fallback{width:48vw;right:10px;bottom:10px}
}

/* The room always uses the full browser width. */
.room-page{width:100%;max-width:none;min-width:0;box-sizing:border-box}
.participants-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.watchers-button{white-space:nowrap;cursor:pointer}

.admin-notice{
  margin:12px 0 16px;
  padding:12px 14px;
  border:1px solid #35415f;
  border-radius:10px;
  background:rgba(20,28,42,.72);
  line-height:1.55;
}
.closure-reason-label{font-weight:700}

/* The lower webcam/drag-drop workspace follows the full browser width too. */
.room-page > .visitors-panel,
.room-page .visitors-panel{
  width:100%;
  max-width:none;
  box-sizing:border-box;
}
.room-page .visitors-panel .drag-drop-area,
.room-page .visitors-panel #dragDropArea,
.room-page .visitors-panel [data-drag-drop],
.room-page .visitors-panel .visitor-grid{
  width:100%;
  max-width:none;
  box-sizing:border-box;
}
.room-page .visitors-panel .visitor-grid{
  grid-template-columns:repeat(auto-fill,minmax(220px,300px));
}
.room-page .visitors-panel .visitor-tile{
  cursor:grab;
}
.room-page .visitors-panel .visitor-tile.dragging{
  cursor:grabbing;
  opacity:.72;
}
.room-page .visitors-panel .visitor-tile.drag-over-before{
  outline:2px solid #6d7cff;
  outline-offset:3px;
}
.room-page .visitors-panel .visitor-tile.drag-over-after{
  box-shadow:10px 0 0 -8px #6d7cff;
}

/* Full-width room without viewport overflow at 100% browser zoom. */
html,body{max-width:100%;overflow-x:hidden}
.room-page,
.room-page > *,
.room-main-grid,
.room-main-grid > *,
.visitors-panel,
.visitors-panel > *{min-width:0;box-sizing:border-box}
.room-main-grid{width:100%}
.visitors-panel{width:100%;overflow:hidden}
.visitors-panel .visitor-grid{max-width:100%;min-width:0}

@media (max-width:1100px){
  .room-main-grid{
    grid-template-columns:minmax(0,1fr) minmax(300px,.75fr);
  }
}
@media (max-width:820px){
  .room-main-grid{
    grid-template-columns:minmax(0,1fr);
  }
}


/* EPICSOLO v70 — authoritative responsive room geometry.
   Keep the starter stage and chat side-by-side at desktop widths, and make
   the starter camera actually consume its whole stage. The visitor raster
   can move around this complete main area without creating horizontal scroll. */
html,body{
  width:100%;
  max-width:100%;
  overflow-x:hidden;
}

.room-page{
  display:grid !important;
  width:100% !important;
  max-width:none !important;
  min-width:0 !important;
  margin:0 !important;
  padding:20px !important;
  box-sizing:border-box !important;
}

.room-main-grid{
  display:grid !important;
  width:100% !important;
  min-width:0 !important;
  grid-template-columns:minmax(0,1.38fr) minmax(0,1fr) !important;
  gap:18px !important;
  align-items:start !important;
}

.starter-panel{
  width:100% !important;
  min-width:0 !important;
  max-width:none !important;
}

.starter-media-row{
  display:flex !important;
  width:100% !important;
  min-width:0 !important;
  gap:12px !important;
  align-items:flex-start !important;
}

.starter-video-wrap{
  display:block !important;
  width:100% !important;
  max-width:none !important;
  min-width:0 !important;
  flex:1 1 auto !important;
  aspect-ratio:4/3 !important;
  box-sizing:border-box !important;
}

.starter-video{
  width:100% !important;
  height:100% !important;
  display:block !important;
  object-fit:cover !important;
}

.chat-panel{
  width:100% !important;
  min-width:0 !important;
  max-width:none !important;
  box-sizing:border-box !important;
  display:grid !important;
  grid-template-columns:minmax(0,1fr) minmax(220px,300px) !important;
  gap:12px !important;
}

.chat-panel > .chat,
.chat-panel > .participants{
  min-width:0 !important;
  width:100% !important;
  box-sizing:border-box !important;
}

.visitors-panel{
  width:100% !important;
  max-width:none !important;
  min-width:0 !important;
  box-sizing:border-box !important;
}

.room-page.layout-right{
  grid-template-columns:minmax(0,1fr) clamp(240px,23vw,360px) !important;
  column-gap:18px !important;
}
.room-page.layout-left{
  grid-template-columns:clamp(240px,23vw,360px) minmax(0,1fr) !important;
  column-gap:18px !important;
}

.room-page.layout-right > .room-main-grid{
  grid-column:1 !important;
  grid-row:1 !important;
}
.room-page.layout-right > .visitors-panel{
  grid-column:2 !important;
  grid-row:1 !important;
  margin:0 !important;
}
.room-page.layout-left > .visitors-panel{
  grid-column:1 !important;
  grid-row:1 !important;
  margin:0 !important;
}
.room-page.layout-left > .room-main-grid{
  grid-column:2 !important;
  grid-row:1 !important;
}

.room-page.layout-top{
  grid-template-columns:minmax(0,1fr) !important;
}
.room-page.layout-top > .visitors-panel{
  grid-column:1 !important;
  grid-row:1 !important;
  margin:0 0 18px !important;
}
.room-page.layout-top > .room-main-grid{
  grid-column:1 !important;
  grid-row:2 !important;
}

.room-page.layout-bottom{
  grid-template-columns:minmax(0,1fr) !important;
}
.room-page.layout-bottom > .room-main-grid{
  grid-column:1 !important;
  grid-row:1 !important;
}
.room-page.layout-bottom > .visitors-panel{
  grid-column:1 !important;
  grid-row:2 !important;
  margin:18px 0 0 !important;
}

/* At smaller widths stack the actual room content instead of shrinking the
   starter camera into an unusable thumbnail. */
@media(max-width:1100px){
  .room-main-grid{
    grid-template-columns:minmax(0,1fr) minmax(0,320px) !important;
  }
  .chat-panel{
    grid-template-columns:minmax(0,1fr) !important;
  }
  .participants{
    height:auto !important;
    min-height:260px !important;
  }
}

@media(max-width:820px){
  .room-page{
    padding:12px !important;
  }
  .room-main-grid{
    grid-template-columns:minmax(0,1fr) !important;
  }
  .chat-panel{
    grid-template-columns:minmax(0,1fr) !important;
  }
  .starter-video-wrap{
    width:100% !important;
  }
  .room-page.layout-right,
  .room-page.layout-left{
    grid-template-columns:minmax(0,1fr) !important;
  }
  .room-page.layout-right > .room-main-grid,
  .room-page.layout-left > .room-main-grid{
    grid-column:1 !important;
    grid-row:1 !important;
  }
  .room-page.layout-right > .visitors-panel{
    grid-column:1 !important;
    grid-row:2 !important;
    margin:18px 0 0 !important;
  }
  .room-page.layout-left > .visitors-panel{
    grid-column:1 !important;
    grid-row:1 !important;
    margin:0 0 18px !important;
  }
  .room-page.layout-left > .room-main-grid{
    grid-row:2 !important;
  }
}

/* The lower drag/drop workspace always gets the full width of its grid cell. */
.room-page .visitor-grid{
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  box-sizing:border-box !important;
}


/* EPICSOLO v71 — viewport-fit room stage.
   Width remains fluid at 100% browser zoom; desktop video height is capped so
   the controls and the lower webcam workspace are reachable without the
   giant 4:3 stage forcing an unnecessary page scroll. */
.room-page{
  width:100vw !important;
  max-width:100vw !important;
  min-width:0 !important;
  overflow-x:hidden !important;
  box-sizing:border-box !important;
}

.room-main-grid{
  min-width:0 !important;
  width:100% !important;
  grid-template-columns:minmax(0,1.38fr) minmax(360px,1fr) !important;
  gap:18px !important;
}

.starter-video-wrap{
  width:100% !important;
  max-width:none !important;
  height:min(60vh,calc((100vw - 440px) * .5625)) !important;
  min-height:300px !important;
  aspect-ratio:16/9 !important;
  box-sizing:border-box !important;
}

.starter-video{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
}

.starter-media-row{
  width:100% !important;
  min-width:0 !important;
}

.chat-panel{
  min-width:0 !important;
  width:100% !important;
}

.room-page.layout-right{
  grid-template-columns:minmax(0,1fr) clamp(240px,23vw,360px) !important;
}
.room-page.layout-left{
  grid-template-columns:clamp(240px,23vw,360px) minmax(0,1fr) !important;
}

.room-page.layout-right > .room-main-grid,
.room-page.layout-left > .room-main-grid{
  min-width:0 !important;
}

.room-page.layout-right > .visitors-panel,
.room-page.layout-left > .visitors-panel{
  min-width:0 !important;
  width:100% !important;
}

.room-page.layout-top > .visitors-panel,
.room-page.layout-bottom > .visitors-panel{
  width:100% !important;
}

@media(max-width:1200px){
  .room-main-grid{
    grid-template-columns:minmax(0,1.25fr) minmax(320px,.9fr) !important;
  }
  .starter-video-wrap{
    height:min(58vh,calc((100vw - 370px) * .5625)) !important;
  }
}

@media(max-width:900px){
  .room-page{
    width:100% !important;
    max-width:100% !important;
    padding:12px !important;
  }
  .room-main-grid{
    grid-template-columns:minmax(0,1fr) !important;
  }
  .starter-video-wrap{
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    aspect-ratio:16/9 !important;
  }
  .room-page.layout-right,
  .room-page.layout-left{
    grid-template-columns:minmax(0,1fr) !important;
  }
}


/* EPICSOLO v72 — authoritative visitor-position state.
   Use the data attribute as the final source of truth so older room-layout
   rules cannot leave the raster stuck underneath the chat. */
.room-page[data-visitor-position="right"]{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) clamp(240px,23vw,360px) !important;
  grid-template-rows:auto !important;
  column-gap:18px !important;
  row-gap:0 !important;
}
.room-page[data-visitor-position="right"] > .room-main-grid{
  grid-column:1 !important;grid-row:1 !important;
}
.room-page[data-visitor-position="right"] > .visitors-panel{
  grid-column:2 !important;grid-row:1 !important;
  margin:0 !important;
}

.room-page[data-visitor-position="left"]{
  display:grid !important;
  grid-template-columns:clamp(240px,23vw,360px) minmax(0,1fr) !important;
  grid-template-rows:auto !important;
  column-gap:18px !important;
  row-gap:0 !important;
}
.room-page[data-visitor-position="left"] > .visitors-panel{
  grid-column:1 !important;grid-row:1 !important;
  margin:0 !important;
}
.room-page[data-visitor-position="left"] > .room-main-grid{
  grid-column:2 !important;grid-row:1 !important;
}

.room-page[data-visitor-position="top"]{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) !important;
  grid-template-rows:auto auto !important;
  row-gap:18px !important;
}
.room-page[data-visitor-position="top"] > .visitors-panel{
  grid-column:1 !important;grid-row:1 !important;
  margin:0 !important;
}
.room-page[data-visitor-position="top"] > .room-main-grid{
  grid-column:1 !important;grid-row:2 !important;
}

.room-page[data-visitor-position="bottom"]{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) !important;
  grid-template-rows:auto auto !important;
  row-gap:18px !important;
}
.room-page[data-visitor-position="bottom"] > .room-main-grid{
  grid-column:1 !important;grid-row:1 !important;
}
.room-page[data-visitor-position="bottom"] > .visitors-panel{
  grid-column:1 !important;grid-row:2 !important;
  margin:0 !important;
}

@media(max-width:900px){
  .room-page[data-visitor-position="right"],
  .room-page[data-visitor-position="left"]{
    grid-template-columns:minmax(0,1fr) !important;
    grid-template-rows:auto auto !important;
  }
  .room-page[data-visitor-position="right"] > .room-main-grid,
  .room-page[data-visitor-position="left"] > .room-main-grid{
    grid-column:1 !important;grid-row:1 !important;
  }
  .room-page[data-visitor-position="right"] > .visitors-panel{
    grid-column:1 !important;grid-row:2 !important;
    margin:18px 0 0 !important;
  }
  .room-page[data-visitor-position="left"] > .visitors-panel{
    grid-column:1 !important;grid-row:1 !important;
    margin:0 0 18px !important;
  }
  .room-page[data-visitor-position="left"] > .room-main-grid{
    grid-row:2 !important;
  }
}

/* Keep the actual drag/drop webcam raster fluid inside whichever position it
   occupies. Reordering is handled by DOM insertion in room.js. */
.room-page .visitor-grid{
  display:grid !important;
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
  box-sizing:border-box !important;
}


/* Persistent moderation & daily analytics */
.analysis-table-wrap{width:100%;overflow:auto;margin-top:16px}
.analysis-table{width:100%;border-collapse:collapse;min-width:680px}
.analysis-table th,.analysis-table td{padding:10px 12px;border-bottom:1px solid var(--border,#26344a);text-align:left;vertical-align:top}
.analysis-table th{font-size:.82rem;text-transform:uppercase;letter-spacing:.04em;opacity:.75}
.analysis-table td{font-size:.92rem}
.analysis-events{display:grid;gap:8px;max-height:560px;overflow:auto}
.analysis-summary{margin:16px 0}
.admin-chart-card{margin-top:18px;padding:16px;border:1px solid var(--border,#26344a);border-radius:12px;background:var(--card,#111a28)}
.admin-chart-card h3{margin:0 0 8px}
.admin-chart{display:block;width:100%;height:280px;color:var(--muted,#94a3b8)}
@media(max-width:800px){
  .analysis-table{min-width:600px}
  .admin-chart{height:240px}
}

.preview .thumb-fallback{display:grid;place-items:center;width:100%;height:100%;font-size:12px;letter-spacing:.08em;font-weight:800}.preview.thumbnail-failed{background:linear-gradient(135deg,#1a2436,#0d121b)}

.site-footer{max-width:1180px;margin:56px auto 0;padding:28px 20px 36px;border-top:1px solid var(--border,#26344b);color:var(--muted,#9aa8bd);display:grid;gap:12px}
.site-footer>div{display:flex;gap:14px;align-items:center;flex-wrap:wrap}.site-footer>div strong{color:var(--text,#f4f7fb);letter-spacing:.08em}
.site-footer nav{display:flex;gap:18px;flex-wrap:wrap}.site-footer a{color:inherit;text-decoration:none}.site-footer a:hover{text-decoration:underline;color:var(--text,#f4f7fb)}
.footer-disclaimer{max-width:900px;font-size:12px;line-height:1.65;margin:0}
.page-shell{max-width:980px;margin:0 auto;padding:48px 20px}.page-card{padding:28px;border:1px solid var(--border,#26344b);border-radius:18px;background:var(--panel,#101827);box-shadow:0 12px 35px rgba(0,0,0,.12)}.page-card h1{margin-top:0}.page-card h2{margin-top:28px}.page-card p,.page-card li{line-height:1.7}.page-card ul{padding-left:22px}
.contact-form{display:grid;gap:14px}.contact-form input,.contact-form textarea{width:100%;box-sizing:border-box}.contact-form textarea{min-height:180px;resize:vertical}.contact-status{min-height:22px}

.starter-identity{display:inline-flex;align-items:center;gap:6px;min-width:0}
.country-flag{display:inline-flex;align-items:center;font-size:.92em;line-height:1;vertical-align:middle}
.country-flag.hidden{display:none}

.room-country-flag,.participant-country-flag{display:inline-flex;align-items:center;line-height:1;margin-right:5px;font-size:.9em;vertical-align:middle}

.admin-nav-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;width:100%;margin-bottom:8px}
.admin-analysis-row{padding-top:2px}
.admin-nav-label{font-weight:700;margin-right:2px;align-self:center}
.admin-secondary-row{margin-top:2px}

.admin-cam-media{position:relative}
.admin-cam-tooltip{position:absolute;left:10px;right:10px;bottom:10px;z-index:8;padding:9px 11px;border:1px solid rgba(148,163,184,.35);border-radius:9px;background:rgba(2,6,23,.94);color:#f8fafc;font-size:12px;line-height:1.45;opacity:0;transform:translateY(5px);pointer-events:none;transition:opacity .15s ease,transform .15s ease;box-shadow:0 8px 24px rgba(0,0,0,.35)}
.admin-cam-card:hover .admin-cam-tooltip,.admin-cam-card:focus-within .admin-cam-tooltip{opacity:1;transform:translateY(0)}
.admin-staff-assigned{margin-top:5px}
.staff-assigned-label{font-size:11px;color:#94a3b8;margin-bottom:2px}
.staff-assigned-name{display:block;color:#4ade80;font-weight:700;font-size:12px}


.admin-nav-title{
  color:#94a3b8;
  font-size:13px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  margin:10px 0 6px;
}
.staff-assigned-inline{
  margin-top:4px;
  font-size:12px;
  font-weight:700;
}
.staff-assigned-inline.admin{color:#ff4d4f;}
.staff-assigned-inline.moderator{color:#3b82f6;}

.contact-unread{border-left:3px solid #60a5fa}.contact-log-row{opacity:.9}

.chat-log-filters{display:flex;gap:8px;align-items:end;margin:12px 0}.chat-log-filters label{display:flex;flex-direction:column;gap:5px;font-size:12px;color:#94a3b8}.chat-log-filters input{min-height:38px}

.moderation-hidden{opacity:.85;border-style:dashed}.coarse-badge{display:inline-block;padding:2px 7px;border-radius:10px;background:#7f1d1d;color:#fecaca;font-size:11px;font-weight:700}.moderation-hidden button{margin-left:8px}

.brand-version{font-size:13.6px;font-weight:500;opacity:.65;vertical-align:middle;margin-left:3px;letter-spacing:.02em}
.loading-logo .brand-version{font-size:.35em}

.admin-version{font-size:.42em;font-weight:500;opacity:.65;vertical-align:middle;margin-left:4px;letter-spacing:.02em}

/* Subtiele twinkel links van 'Kamer openen'. */
.twinkle-left{position:relative;overflow:hidden}
.twinkle-left::before{content:"✦";position:absolute;left:10px;top:50%;transform:translateY(-50%) scale(.8);opacity:0;pointer-events:none;animation:epicsoTwinkle 1.2s ease-in-out infinite}
@keyframes epicsoTwinkle{
  0%,62%,100%{opacity:0;transform:translateY(-50%) scale(.45) rotate(0deg)}
  70%{opacity:.65;transform:translateY(-50%) scale(1.05) rotate(20deg)}
  78%{opacity:1;transform:translateY(-50%) scale(1.3) rotate(45deg)}
  86%{opacity:.3;transform:translateY(-50%) scale(.7) rotate(70deg)}
}
@media (prefers-reduced-motion:reduce){.twinkle-left::before{animation:none;opacity:.25;transform:translateY(-50%) scale(.6)}}

.admin-cam-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,240px));gap:14px}
.admin-cam-card{overflow:hidden;border:1px solid var(--border,#2a3a52);border-radius:12px;background:var(--panel,#111a29)}
.admin-cam-media{height:120px;background:#05080d;position:relative}
.admin-cam-media video,.admin-cam-thumb{width:100%;height:100%;object-fit:cover;display:block}
.admin-cam-thumb{position:absolute;inset:0;cursor:pointer}
.live-badge{position:absolute;right:7px;top:7px;background:#05070b;color:#fff;padding:3px 6px;border-radius:4px;font-size:10px;font-weight:800}
.admin-cam-body{padding:10px;font-size:13px;line-height:1.45}
.admin-cam-body>b{display:block;font-size:15px;margin-bottom:4px}
.staff-present{margin-top:6px;font-weight:700}

.admin-cam-media{overflow:hidden;cursor:pointer}
.admin-cam-media video{opacity:0;transition:opacity .15s ease}
.admin-cam-card.live-preview .admin-cam-media video{opacity:1}
.admin-cam-thumb{transition:opacity .15s ease}
.admin-cam-card.live-preview .admin-cam-thumb{opacity:0;pointer-events:none}
.hover-live-hint{position:absolute;left:7px;bottom:7px;background:rgba(0,0,0,.72);color:#fff;padding:3px 6px;border-radius:4px;font-size:10px;opacity:0;transition:opacity .15s ease}
.admin-cam-card:hover .hover-live-hint{opacity:1}

.admin-cam-card{cursor:pointer}
.admin-cam-card:focus-visible{outline:2px solid #6ea8ff;outline-offset:2px}

/* Admin webcamraster: maximaal 5 kaarten per rij, daarna automatisch een nieuwe rij. */
.admin-cam-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;align-items:start}
.admin-cam-card{width:100%;min-width:0}
@media (max-width:1200px){.admin-cam-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:950px){.admin-cam-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:700px){.admin-cam-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:460px){.admin-cam-grid{grid-template-columns:1fr}}


/* EPICSOLO v1.1.1 — authoritative 100% browser-fit room layout */
html,body{width:100%;max-width:100%;margin:0;overflow-x:hidden}
body{min-height:100vh}
.top{width:100%;max-width:100vw;box-sizing:border-box}
.brand{font-size:36px!important}
.brand-version{font-size:10px!important}

/* The room itself fills exactly the viewport area below the sticky header.
   Content panels may scroll internally, never the complete browser page. */
.room-page{
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  height:calc(100vh - 68px)!important;
  min-height:0!important;
  box-sizing:border-box!important;
  overflow:hidden!important;
}
.room-page > .room-main-grid,
.room-page > .visitors-panel,
.room-main-grid > *,
.room-main-grid .chat-panel,
.room-main-grid .starter-panel,
.room-main-grid .chat,
.room-main-grid .participants{
  min-width:0!important;
  min-height:0!important;
  box-sizing:border-box!important;
}
.room-page > .room-main-grid{overflow:hidden!important}
.room-page .chat{overflow:hidden!important}
.room-page .chat #messages,
.room-page .participants #participantsList,
.room-page .visitor-grid{overflow:auto!important;min-height:0!important}

/* Bottom/top webcam positions share the available height instead of
   increasing document height. */
.room-page[data-visitor-position="bottom"],
.room-page[data-visitor-position="top"]{
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
  grid-template-rows:minmax(0,1fr) minmax(0,auto)!important;
  gap:12px!important;
  align-content:stretch!important;
}
.room-page[data-visitor-position="bottom"] > .room-main-grid{grid-row:1!important;min-height:0!important}
.room-page[data-visitor-position="bottom"] > .visitors-panel{grid-row:2!important;min-height:0!important;max-height:30vh!important;overflow:hidden!important}
.room-page[data-visitor-position="top"] > .visitors-panel{grid-row:1!important;min-height:0!important;max-height:30vh!important;overflow:hidden!important}
.room-page[data-visitor-position="top"] > .room-main-grid{grid-row:2!important;min-height:0!important}

/* Left/right positions use one viewport-height row. */
.room-page[data-visitor-position="right"],
.room-page[data-visitor-position="left"]{
  display:grid!important;
  grid-template-rows:minmax(0,1fr)!important;
  height:calc(100vh - 68px)!important;
  align-items:stretch!important;
}
.room-page[data-visitor-position="right"] > .room-main-grid,
.room-page[data-visitor-position="left"] > .room-main-grid{min-height:0!important}
.room-page[data-visitor-position="right"] > .visitors-panel,
.room-page[data-visitor-position="left"] > .visitors-panel{min-height:0!important;max-height:none!important;overflow:hidden!important}

/* Never let a video force the viewport wider/taller. */
.room-page video,.room-page img{max-width:100%;box-sizing:border-box}
.starter-panel,.starter-media-row,.chat-panel{min-width:0!important;max-width:100%!important}
@media(max-width:900px){
  .top{height:58px;padding:0 14px}
  .brand{font-size:30px!important}
  .room-page{height:calc(100vh - 58px)!important;overflow:hidden!important}
  .room-page[data-visitor-position="bottom"],
  .room-page[data-visitor-position="top"]{grid-template-rows:minmax(0,1fr) minmax(0,24vh)!important}
}

/* FINAL — authoritative admin webcam preview. Thumbnail is shown at rest;
   a real WebRTC track is shown only while hovering and receiving frames. */
.admin-cam-media{position:relative;overflow:hidden;cursor:pointer;background:#05080d}
.admin-cam-media video{display:block!important;position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important;opacity:0!important;visibility:hidden!important;z-index:2!important}
.admin-cam-media .admin-cam-thumb{display:block!important;position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important;opacity:1!important;visibility:visible!important;z-index:1!important;transition:opacity .12s ease}
.admin-cam-card.live-preview .admin-cam-media video{opacity:1!important;visibility:visible!important}
.admin-cam-card.live-preview .admin-cam-media .admin-cam-thumb{opacity:0!important;visibility:hidden!important;pointer-events:none!important}
.admin-role-badge{display:inline-flex;align-items:center;padding:2px 7px;border-radius:999px;font-size:10px;font-weight:800;border:1px solid currentColor;margin-left:5px}
.admin-role-badge.role-admin{color:#e53935!important;background:rgba(229,57,53,.12)!important}
.admin-role-badge.role-moderator{color:#1976d2!important;background:rgba(25,118,210,.12)!important}
.admin-role-badge.type-beta-tester{color:#c084fc!important;background:rgba(192,132,252,.12)!important}
.admin-role-badge.type-gebruiker{color:#60a5fa!important;background:rgba(96,165,250,.10)!important}
.admin-role-badge.type-gast{color:#94a3b8!important;background:rgba(148,163,184,.10)!important}
.admin-role-badge.type-bezoeker{color:#34d399!important;background:rgba(52,211,153,.10)!important}
.admin-cam-name.admin{color:#e53935!important}
.admin-cam-name.moderator{color:#1976d2!important}

/* EPICSOLO FINAL — room webcam + chat media geometry. One authoritative layer. */
.room-page{width:100%!important;max-width:none!important;min-width:0!important;box-sizing:border-box!important;overflow-x:hidden!important}
.room-main-grid{display:grid!important;grid-template-columns:minmax(280px,654px) minmax(0,1fr)!important;gap:18px!important;width:100%!important;min-width:0!important;align-items:start!important}
.starter-panel,.chat-panel,.visitors-panel{min-width:0!important;box-sizing:border-box!important}
#mainWebcamGrid{display:grid!important;width:100%!important;max-width:654px!important;min-width:0!important;box-sizing:border-box!important;align-items:start!important;overflow:visible!important}
#mainWebcamGrid>.starter-video-wrap,#mainWebcamGrid>#selfVideoWrap,#mainWebcamGrid>#mainRemoteWebcamClone{box-sizing:border-box!important;min-width:0!important;max-width:100%!important;aspect-ratio:4/3!important;overflow:hidden!important;border-radius:12px!important}
#mainWebcamGrid .starter-video,#mainWebcamGrid #selfVideo,#mainWebcamGrid .visitor-video{width:100%!important;height:100%!important;object-fit:cover!important;display:block!important}
#mainWebcamGrid .visitor-video-frame{width:100%!important;height:100%!important;position:relative!important}
#mainWebcamGrid .visitor-actions{display:flex!important}
#mainWebcamGrid .main-webcam-tile{position:relative!important}
.room-page .visitors-panel .visitor-grid{display:flex!important;flex-wrap:nowrap!important;align-items:flex-start!important;gap:14px!important;width:100%!important;max-width:100%!important;min-width:0!important;overflow-x:auto!important;overflow-y:hidden!important;padding:10px!important;box-sizing:border-box!important;scrollbar-width:none!important;-ms-overflow-style:none!important}
.room-page .visitors-panel .visitor-grid::-webkit-scrollbar{height:0}
.room-page .visitors-panel .visitor-tile{flex:0 0 320px!important;width:320px!important;min-width:320px!important;max-width:320px!important;box-sizing:border-box!important}
.room-page .visitors-panel .visitor-video-frame,.room-page .visitors-panel .visitor-video{width:320px!important;height:240px!important;aspect-ratio:4/3!important;object-fit:cover!important}
.room-page .visitor-tile .visitor-actions,.room-page .visitor-tile .visitor-video-tools{opacity:0!important;visibility:hidden!important;pointer-events:none!important;transition:opacity .12s ease,visibility .12s ease!important}
.room-page .visitor-tile:hover .visitor-actions,.room-page .visitor-tile:focus-within .visitor-actions,.room-page .visitor-tile:hover .visitor-video-tools,.room-page .visitor-tile:focus-within .visitor-video-tools{opacity:1!important;visibility:visible!important;pointer-events:auto!important}
.room-page .visitor-close{display:inline-flex!important;align-items:center!important;justify-content:center!important}
.room-page .main-webcam-close,.room-page [data-main-unpin]{position:absolute!important;right:7px!important;top:7px!important;z-index:20!important;width:28px!important;height:28px!important;padding:0!important;border-radius:50%!important}
.room-page .chat #messages{overflow-y:auto!important;overflow-x:hidden!important;scrollbar-width:none!important;-ms-overflow-style:none!important}
.room-page .chat #messages::-webkit-scrollbar{width:0;height:0}
.room-page .chat #messages:hover{scrollbar-width:thin!important;scrollbar-color:#52617c transparent!important}
.room-page .chat #messages:hover::-webkit-scrollbar{width:7px;height:7px}
.room-page .chat #messages:hover::-webkit-scrollbar-track{background:transparent}
.room-page .chat #messages:hover::-webkit-scrollbar-thumb{background:#52617c;border-radius:10px}

/* Compact original smiley raster. */
.room-page .emoji-picker{position:absolute!important;left:0!important;right:auto!important;bottom:calc(100% + 4px)!important;top:auto!important;width:min(280px,100%)!important;max-width:100%!important;max-height:min(230px,45vh)!important;overflow-y:auto!important;overflow-x:hidden!important;display:grid!important;grid-template-columns:repeat(8,1fr)!important;gap:3px!important;padding:7px!important;box-sizing:border-box!important;background:#111a28!important;border:1px solid #334057!important;border-radius:10px!important;box-shadow:0 12px 30px rgba(0,0,0,.35)!important;scrollbar-width:none!important;-ms-overflow-style:none!important;z-index:1002!important}
.room-page .emoji-picker.hidden{display:none!important}
.room-page .emoji-picker::-webkit-scrollbar{width:0;height:0}
.room-page .emoji-choice{width:34px!important;height:34px!important;min-width:34px!important;padding:0!important;display:grid!important;place-items:center!important;border:0!important;border-radius:6px!important;background:transparent!important;font-size:22px!important;line-height:1!important;cursor:pointer!important}
.room-page .emoji-choice:hover{background:#202b3d!important}

/* GIFs stay separate from smileys and use the existing GIF files from the ZIP. */
.room-page .gif-picker{position:absolute!important;left:0!important;right:auto!important;bottom:calc(100% + 8px)!important;top:auto!important;width:320px!important;max-width:min(320px,calc(100vw - 24px))!important;max-height:300px!important;display:block!important;overflow:hidden!important;padding:8px!important;box-sizing:border-box!important;background:#111a28!important;border:1px solid #334057!important;border-radius:10px!important;box-shadow:0 12px 30px rgba(0,0,0,.35)!important;z-index:1002!important}
.room-page .gif-picker.hidden{display:none!important}
.room-page .gif-picker-search{display:flex!important;align-items:center!important;gap:7px!important;margin-bottom:8px!important}
.room-page .gif-picker-search>span{display:grid!important;place-items:center!important;width:42px!important;height:42px!important;flex:0 0 42px!important;border:1px solid #354159!important;border-radius:8px!important;background:#141b28!important;font-size:11px!important;font-weight:900!important}
.room-page .gif-picker-search input{flex:1!important;min-width:0!important;padding:9px 10px!important;border:1px solid #354159!important;border-radius:8px!important;background:#111a29!important;color:#fff!important}
.room-page .gif-picker .gif-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:6px!important;max-height:235px!important;overflow-y:auto!important;overflow-x:hidden!important;scrollbar-width:none!important;-ms-overflow-style:none!important}
.room-page .gif-picker .gif-grid::-webkit-scrollbar{width:0;height:0}
.room-page .gif-choice{display:block!important;width:100%!important;min-width:0!important;padding:3px!important;border:0!important;border-radius:7px!important;background:#0b1019!important;color:#c8d0df!important;cursor:pointer!important;overflow:hidden!important}
.room-page .gif-choice img{display:block!important;width:100%!important;height:70px!important;object-fit:cover!important;border-radius:5px!important}
.room-page .gif-choice span{display:block!important;padding:3px 2px 1px!important;font-size:10px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
.room-page .gif-choice:hover{outline:2px solid #62e38a!important}
.room-page .gif-empty{padding:20px!important;text-align:center!important;color:#8c99ae!important;grid-column:1/-1!important}
.room-page .chat-gif{display:block!important;max-width:min(280px,100%)!important;max-height:190px!important;margin-top:6px!important;border-radius:8px!important}

@media(max-width:900px){
  .room-main-grid{grid-template-columns:minmax(0,1fr)!important}
  #mainWebcamGrid{max-width:100%!important}
  .room-page .visitors-panel .visitor-tile{flex-basis:240px!important;width:240px!important;min-width:240px!important;max-width:240px!important}
  .room-page .visitors-panel .visitor-video-frame,.room-page .visitors-panel .visitor-video{width:240px!important;height:180px!important}
}
@media(max-width:560px){
  #mainWebcamGrid{grid-template-columns:minmax(0,1fr)!important;grid-template-rows:auto auto!important;gap:10px!important}
  #mainWebcamGrid>.starter-video-wrap,#mainWebcamGrid>#selfVideoWrap,#mainWebcamGrid>#mainRemoteWebcamClone{grid-column:1!important;width:100%!important;height:auto!important;aspect-ratio:4/3!important}
}

/* EPICSOLO v1.1.9 — final room flow: no webcam/chat overlap */
.room-page{height:auto!important;min-height:calc(100vh - 68px)!important;overflow:visible!important;display:block!important;padding-bottom:24px!important}
.room-page > .room-main-grid{overflow:visible!important;width:100%!important;min-height:0!important;align-items:start!important}
.room-page > .visitors-panel{position:relative!important;clear:both!important;width:100%!important;max-width:100%!important;max-height:none!important;min-height:0!important;overflow:visible!important;margin-top:18px!important}
.room-page .visitors-panel .visitor-grid{display:flex!important;flex-wrap:nowrap!important;align-items:flex-start!important;gap:10px!important;width:100%!important;max-width:100%!important;overflow-x:auto!important;overflow-y:hidden!important;padding:8px!important}
.room-page .visitors-panel .visitor-tile{flex:0 0 160px!important;width:160px!important;min-width:160px!important;max-width:160px!important;height:120px!important}
.room-page .visitors-panel .visitor-video-frame,.room-page .visitors-panel .visitor-video{width:160px!important;height:120px!important;min-width:160px!important;min-height:120px!important;object-fit:cover!important}
.room-page #mainWebcamGrid{display:grid!important;align-items:start!important;justify-content:start!important;overflow:visible!important;max-width:100%!important;min-height:0!important}
.room-page #mainWebcamGrid > .starter-video-wrap,.room-page #mainWebcamGrid > #selfVideoWrap,.room-page #mainWebcamGrid > #mainRemoteWebcamClone{margin:0!important;flex:none!important}
.room-page #mainRemoteWebcamClone,.room-page .detached-webcam-frame{width:320px!important;height:240px!important;min-width:320px!important;max-width:320px!important;min-height:240px!important;max-height:240px!important}
.room-page #mainRemoteWebcamClone .visitor-video-frame,.room-page #mainRemoteWebcamClone .visitor-video{width:320px!important;height:240px!important;object-fit:cover!important}
.room-page #mainRemoteWebcamClone .visitor-actions{display:flex!important}
.room-page .final-main-drop{outline:2px dashed #62e38a!important;outline-offset:3px!important}
.room-page .final-rail-drop{outline:2px dashed #62e38a!important;outline-offset:-2px!important}
.room-page .visitor-tile.disconnected-feed{display:none!important}
/* Coloured admin role/account badges, including legacy naming variants. */
.admin-role-badge.role-admin{color:#ef4444!important;background:rgba(239,68,68,.14)!important;border-color:#ef4444!important}
.admin-role-badge.role-moderator{color:#3b82f6!important;background:rgba(59,130,246,.14)!important;border-color:#3b82f6!important}
.admin-role-badge.type-beta-tester,.admin-role-badge.type-beta,.admin-role-badge.type-betatester,.admin-role-badge.type-beta_tester{color:#c084fc!important;background:rgba(192,132,252,.16)!important;border-color:#c084fc!important}
.admin-role-badge.type-gebruiker,.admin-role-badge.type-user,.admin-role-badge.type-account{color:#60a5fa!important;background:rgba(96,165,250,.14)!important;border-color:#60a5fa!important}
.admin-role-badge.type-gast,.admin-role-badge.type-guest{color:#cbd5e1!important;background:rgba(203,213,225,.12)!important;border-color:#94a3b8!important}
.admin-role-badge.type-bezoeker,.admin-role-badge.type-visitor{color:#34d399!important;background:rgba(52,211,153,.14)!important;border-color:#34d399!important}
.admin-cam-name.admin{color:#ef4444!important}.admin-cam-name.moderator{color:#3b82f6!important}
/* Admin hover live-preview state */
.admin-cam-media{position:relative!important;aspect-ratio:16/9!important;min-height:120px!important}
.admin-cam-media::after{content:'LIVE PREVIEW';position:absolute;left:8px;top:8px;z-index:4;display:none;padding:3px 6px;border-radius:6px;background:rgba(0,0,0,.72);font-size:9px;font-weight:900;letter-spacing:.08em;color:#fff;pointer-events:none}
.admin-cam-card.live-preview .admin-cam-media::after{display:block}.admin-cam-card.preview-loading .admin-cam-media::after{display:block;content:'LIVE PREVIEW…'}
@media(max-width:900px){.room-page{min-height:calc(100vh - 58px)!important}.room-page > .room-main-grid{display:grid!important;grid-template-columns:minmax(0,1fr)!important}.room-page #mainWebcamGrid{max-width:100%!important}.room-page #mainRemoteWebcamClone,.room-page .detached-webcam-frame{width:320px!important;height:240px!important;min-width:320px!important;max-width:100%!important}}
@media(max-width:700px){.room-page #mainWebcamGrid{grid-template-columns:minmax(0,1fr)!important;grid-template-rows:auto auto!important}.room-page #mainWebcamGrid > .starter-video-wrap,.room-page #mainWebcamGrid > #selfVideoWrap,.room-page #mainWebcamGrid > #mainRemoteWebcamClone{grid-column:1!important;width:100%!important;max-width:100%!important}.room-page #mainRemoteWebcamClone,.room-page .detached-webcam-frame{width:320px!important;height:240px!important;max-width:100%!important}}


/* v1.1.9 webcam layout hardening: shared webcams stay 160x120; a detached
   webcam is always a separate 320x240 frame and never expands the shared rail. */
.room-page .visitor-grid{grid-template-columns:repeat(auto-fill,160px)!important;grid-auto-rows:max-content!important;}
.room-page #visitorGrid .visitor-tile{width:160px!important;min-width:160px!important;max-width:160px!important;box-sizing:border-box!important;}
.room-page #visitorGrid .visitor-video-frame,
.room-page #visitorGrid .visitor-video{width:160px!important;height:120px!important;max-width:160px!important;max-height:120px!important;}
.room-page #mainWebcamGrid{overflow:visible!important;position:relative!important;z-index:1!important;min-width:0!important;}
.room-page #mainWebcamGrid .detached-webcam-frame{width:320px!important;height:240px!important;min-width:160px!important;max-width:320px!important;box-sizing:border-box!important;}
.room-page #mainWebcamGrid .detached-webcam-frame .visitor-video-frame,
.room-page #mainWebcamGrid .detached-webcam-frame .visitor-video{width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;}
.room-page .camera-pair-2x2 .starter-video-wrap,
.room-page .camera-pair-2x2 .self-video-wrap{box-sizing:border-box!important;}
.room-page .camera-single-1x1 .self-video-wrap{display:none!important;}
@media(min-width:901px){
  .room-page > .room-main-grid{overflow:visible!important;}
  .room-page .starter-panel,.room-page .chat-panel{min-width:0!important;}
}


/* v1.1.9 admin: live-preview is a refreshed webcam snapshot, not WebRTC video. */
.admin-page .admin-cam-thumb.live-preview-image{display:block!important;opacity:1!important;filter:none!important;}
.admin-page .admin-cam-card.preview-loading .admin-cam-thumb{opacity:.72;}
.admin-page .admin-cam-card.live-preview .admin-cam-thumb{display:block!important;}
.admin-page .admin-cam-card.live-preview .admin-live-video{display:none!important;}
.admin-page .admin-role-badge.role-admin{color:#ef4444!important;background:rgba(239,68,68,.14)!important;border-color:#ef4444!important;}
.admin-page .admin-role-badge.role-moderator{color:#3b82f6!important;background:rgba(59,130,246,.14)!important;border-color:#3b82f6!important;}
.admin-page .admin-role-badge.type-beta-tester,.admin-page .admin-role-badge.type-beta,.admin-page .admin-role-badge.type-betatester,.admin-page .admin-role-badge.type-beta_tester{color:#c084fc!important;background:rgba(192,132,252,.16)!important;border-color:#c084fc!important;}
.admin-page .admin-role-badge.type-gebruiker,.admin-page .admin-role-badge.type-user,.admin-page .admin-role-badge.type-account{color:#60a5fa!important;background:rgba(96,165,250,.14)!important;border-color:#60a5fa!important;}
.admin-page .admin-role-badge.type-gast,.admin-page .admin-role-badge.type-guest{color:#cbd5e1!important;background:rgba(203,213,225,.12)!important;border-color:#94a3b8!important;}
.admin-page .admin-role-badge.type-bezoeker,.admin-page .admin-role-badge.type-visitor{color:#34d399!important;background:rgba(52,211,153,.14)!important;border-color:#34d399!important;}

/* v1.1.9 FINAL: detached webcams are independent floating windows. */
.visitor-floating-viewer{position:fixed!important;width:320px!important;height:240px!important;z-index:5000!important;background:#05080d!important;border:1px solid #354159!important;border-radius:12px!important;box-shadow:0 20px 60px #000b!important;overflow:hidden!important;display:flex!important;flex-direction:column!important}
.visitor-floating-viewer.hidden{display:none!important}
.visitor-floating-head{position:relative!important;flex:0 0 32px!important;display:flex!important;align-items:center!important;justify-content:space-between!important;padding:5px 8px!important;background:#0b1019eF!important;color:#fff!important;cursor:move!important;z-index:3!important}
.visitor-floating-head button{padding:2px 7px!important;min-height:24px!important}
#visitorFloatingVideo{display:block!important;width:320px!important;height:180px!important;flex:1 1 auto!important;min-height:0!important;object-fit:cover!important;background:#05080d!important}
.visitor-floating-controls{height:28px!important;flex:0 0 28px!important;display:flex!important;align-items:center!important;gap:6px!important;padding:3px 7px!important;background:#0b1019!important}
.visitor-floating-controls button{padding:2px 5px!important;min-height:22px!important}
.visitor-floating-controls input{width:130px!important;min-width:60px!important}
.visitor-floating-controls span{font-size:10px!important;color:#c8d0df!important;min-width:34px!important}
/* Keep the 2x2 pair beside the chat, never underneath it. */
.room-page #mainWebcamGrid.camera-pair-2x2{display:grid!important;grid-template-columns:320px 320px!important;grid-template-rows:240px!important;gap:14px!important;width:654px!important;max-width:654px!important}
.room-page #mainWebcamGrid.camera-pair-2x2>.starter-video-wrap,.room-page #mainWebcamGrid.camera-pair-2x2>#selfVideoWrap{width:320px!important;height:240px!important;max-width:320px!important;min-width:320px!important}
@media(max-width:1120px){.room-page #mainWebcamGrid.camera-pair-2x2{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;width:100%!important;max-width:100%!important}.room-page #mainWebcamGrid.camera-pair-2x2>.starter-video-wrap,.room-page #mainWebcamGrid.camera-pair-2x2>#selfVideoWrap{width:100%!important;min-width:0!important;height:auto!important;aspect-ratio:4/3!important}}

/* EPICSOLO v1.1.9 CLEAN FINAL — visitor webcam layout + inline audio controls.
   This block is intentionally last: it is the single visual authority after
   the older room-layout rules. */
.room-page .room-main-grid{
  min-width:0!important;
  width:100%!important;
  max-width:100%!important;
  box-sizing:border-box!important;
}
@media(min-width:901px){
  .room-page:not(.layout-top):not(.layout-bottom) .room-main-grid{
    grid-template-columns:minmax(280px,654px) minmax(260px,1fr)!important;
  }
  .room-page #mainWebcamGrid{
    width:100%!important;
    max-width:654px!important;
    min-width:0!important;
    box-sizing:border-box!important;
    overflow:visible!important;
  }
  .room-page #mainWebcamGrid.camera-pair-2x2{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
    gap:14px!important;
  }
}
@media(max-width:900px){
  .room-page .room-main-grid{
    grid-template-columns:minmax(0,1fr)!important;
  }
  .room-page #mainWebcamGrid{
    max-width:100%!important;
  }
  .room-page #mainWebcamGrid.camera-pair-2x2{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
    gap:8px!important;
  }
}
@media(max-width:560px){
  .room-page #mainWebcamGrid.camera-pair-2x2{
    grid-template-columns:minmax(0,1fr)!important;
    grid-template-rows:auto auto!important;
  }
}

/* Volume belongs to the webcam frame, never to the page below it. */
.webcam-inline-audio-controls{
  position:absolute!important;
  left:8px!important;
  right:8px!important;
  bottom:8px!important;
  z-index:20!important;
  pointer-events:none!important;
}
.webcam-inline-audio-controls .audio-control-group{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:5px!important;
  width:max-content!important;
  max-width:100%!important;
  margin-left:auto!important;
  padding:4px!important;
  border:1px solid #354159!important;
  border-radius:9px!important;
  background:#0b1019dd!important;
  backdrop-filter:blur(5px)!important;
  box-sizing:border-box!important;
  pointer-events:auto!important;
}
.webcam-inline-audio-controls .compact-audio-level{
  display:none!important;
}
.webcam-inline-audio-controls .volume-control{
  margin:0!important;
  padding:3px 5px!important;
  border:0!important;
  background:transparent!important;
}
.webcam-inline-audio-controls .volume-control input[type=range]{
  width:78px!important;
}
.webcam-inline-audio-controls button{
  min-width:30px!important;
  min-height:28px!important;
  padding:4px 7px!important;
}

/* Visitor controls sit directly on the video frame. */
.visitor-video-frame{
  position:relative!important;
}
.visitor-inline-audio-controls{
  position:absolute!important;
  left:6px!important;
  right:6px!important;
  bottom:6px!important;
  z-index:8!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:4px!important;
  pointer-events:none!important;
}
.visitor-inline-audio-controls .volume-control{
  margin:0!important;
  padding:3px 5px!important;
  background:#0b1019dd!important;
  backdrop-filter:blur(5px)!important;
  pointer-events:auto!important;
}
.visitor-inline-audio-controls .volume-control input[type=range]{
  width:72px!important;
}
.visitor-inline-audio-controls .mute-control{
  min-width:30px!important;
  min-height:28px!important;
  padding:4px 7px!important;
  border:1px solid #354159!important;
  border-radius:8px!important;
  background:#0b1019dd!important;
  pointer-events:auto!important;
}
.visitor-video-frame + .visitor-name{margin-top:6px!important}
.visitor-tile > .visitor-actions{display:none!important}

/* The self preview is deliberately muted to prevent microphone feedback.
   Its control can still be shown in-frame without being placed outside. */
\n/* v1.1.9 patch: guest/user 2x2 is always side-by-side on desktop. */\n@media(min-width:901px){\n.room-page .room-main-grid{grid-template-columns:654px minmax(320px,1fr)!important;min-width:992px!important;overflow:visible!important}\n.room-page #mainWebcamGrid.camera-pair-2x2{display:grid!important;grid-template-columns:320px 320px!important;grid-template-rows:240px!important;gap:14px!important;width:654px!important;min-width:654px!important;max-width:654px!important}\n.room-page #mainWebcamGrid.camera-pair-2x2>.starter-video-wrap,.room-page #mainWebcamGrid.camera-pair-2x2>#selfVideoWrap{grid-column:auto!important;grid-row:1!important;width:320px!important;min-width:320px!important;max-width:320px!important;height:240px!important;min-height:240px!important;max-height:240px!important;aspect-ratio:4/3!important}\n}\n@media(max-width:900px){\n.room-page #mainWebcamGrid.camera-pair-2x2{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;grid-template-rows:auto!important;gap:8px!important;width:100%!important;min-width:0!important}\n.room-page #mainWebcamGrid.camera-pair-2x2>.starter-video-wrap,.room-page #mainWebcamGrid.camera-pair-2x2>#selfVideoWrap{width:100%!important;min-width:0!important;max-width:none!important;height:auto!important;aspect-ratio:4/3!important}\n}\n/* Detached webcam: user can resize the floating tile. */\n.visitor-floating-viewer.floating-resizable{resize:both!important;min-width:260px!important;min-height:210px!important;width:320px!important;height:240px!important;max-width:80vw!important;max-height:80vh!important}\n.visitor-floating-viewer.floating-resizable #visitorFloatingVideo{width:100%!important;height:auto!important;min-height:0!important;flex:1 1 auto!important;object-fit:cover!important}\n/* GIF load feedback. */\n.room-page .gif-choice.gif-load-error img{display:none!important}\n.room-page .gif-choice.gif-load-error:before{content:'GIF kon niet laden';display:grid!important;place-items:center!important;height:70px!important;color:#8c99ae!important;font-size:10px!important}\n
/* EPICSOLO v1.1.11 — FINAL guest/user side-by-side authority. */
@media(min-width:901px){
  .room-page #mainWebcamGrid.camera-pair-2x2{
    display:grid!important;
    grid-template-columns:320px 320px!important;
    grid-template-rows:240px!important;
    grid-auto-flow:row!important;
    column-gap:14px!important;
    row-gap:0!important;
    width:654px!important;
    min-width:654px!important;
    max-width:654px!important;
    overflow:visible!important;
    align-items:start!important;
  }
  .room-page #mainWebcamGrid.camera-pair-2x2 > .starter-video-wrap,
  .room-page #mainWebcamGrid.camera-pair-2x2 > #selfVideoWrap{
    position:relative!important;
    grid-row:1!important;
    width:320px!important;
    min-width:320px!important;
    max-width:320px!important;
    height:240px!important;
    min-height:240px!important;
    max-height:240px!important;
    margin:0!important;
    flex:none!important;
  }
  .room-page #mainWebcamGrid.camera-pair-2x2 > .starter-video-wrap{grid-column:1!important}
  .room-page #mainWebcamGrid.camera-pair-2x2 > #selfVideoWrap{grid-column:2!important}
  .room-page #mainWebcamGrid.camera-single-1x1{
    display:grid!important;grid-template-columns:320px!important;grid-template-rows:240px!important;width:320px!important;min-width:320px!important;max-width:320px!important;gap:0!important;
  }
  .room-page #mainWebcamGrid.camera-single-1x1 > .starter-video-wrap{grid-column:1!important;grid-row:1!important}
}
@media(max-width:900px){
  .room-page #mainWebcamGrid.camera-pair-2x2{
    display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;grid-template-rows:auto!important;width:100%!important;min-width:0!important;max-width:none!important;gap:8px!important;
  }
  .room-page #mainWebcamGrid.camera-pair-2x2 > .starter-video-wrap,
  .room-page #mainWebcamGrid.camera-pair-2x2 > #selfVideoWrap{
    grid-row:1!important;width:100%!important;min-width:0!important;max-width:none!important;height:auto!important;min-height:0!important;max-height:none!important;aspect-ratio:4/3!important;
  }
  .room-page #mainWebcamGrid.camera-pair-2x2 > .starter-video-wrap{grid-column:1!important}
  .room-page #mainWebcamGrid.camera-pair-2x2 > #selfVideoWrap{grid-column:2!important}
}
/* Never let legacy flex wrapping move the second webcam underneath the first. */
.room-page #mainWebcamGrid.camera-pair-2x2{flex-wrap:nowrap!important}
.room-page #mainWebcamGrid.camera-pair-2x2 > *{float:none!important}

/* EPICSOLO v1.1.11 — final webcam/GIF authority. */
@media (min-width:901px){
  .room-page .room-main-grid{
    display:grid!important;
    grid-template-columns:654px minmax(320px,1fr)!important;
    column-gap:20px!important;
    align-items:start!important;
    min-width:994px!important;
    overflow:visible!important;
  }
  .room-page .starter-panel{width:654px!important;min-width:654px!important;max-width:654px!important;box-sizing:border-box!important}
  .room-page #mainWebcamGrid.camera-pair-2x2{
    display:grid!important;
    grid-template-columns:320px 320px!important;
    grid-template-rows:240px!important;
    grid-auto-flow:row!important;
    gap:0 14px!important;
    width:654px!important;
    min-width:654px!important;
    max-width:654px!important;
    height:240px!important;
    min-height:240px!important;
    max-height:240px!important;
    overflow:visible!important;
    flex:none!important;
  }
  .room-page #mainWebcamGrid.camera-pair-2x2>.starter-video-wrap,
  .room-page #mainWebcamGrid.camera-pair-2x2>#selfVideoWrap{
    position:relative!important;
    grid-row:1!important;
    width:320px!important;
    min-width:320px!important;
    max-width:320px!important;
    height:240px!important;
    min-height:240px!important;
    max-height:240px!important;
    margin:0!important;
    flex:none!important;
  }
  .room-page #mainWebcamGrid.camera-pair-2x2>.starter-video-wrap{grid-column:1!important}
  .room-page #mainWebcamGrid.camera-pair-2x2>#selfVideoWrap{grid-column:2!important}
}
@media (max-width:900px){
  .room-page #mainWebcamGrid.camera-pair-2x2{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
    grid-template-rows:auto!important;
    gap:8px!important;
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
  }
  .room-page #mainWebcamGrid.camera-pair-2x2>.starter-video-wrap,
  .room-page #mainWebcamGrid.camera-pair-2x2>#selfVideoWrap{
    grid-row:1!important;width:100%!important;min-width:0!important;max-width:none!important;
    height:auto!important;min-height:0!important;max-height:none!important;aspect-ratio:4/3!important;
  }
  .room-page #mainWebcamGrid.camera-pair-2x2>.starter-video-wrap{grid-column:1!important}
  .room-page #mainWebcamGrid.camera-pair-2x2>#selfVideoWrap{grid-column:2!important}
}
.visitor-floating-viewer.floating-resizable{
  resize:both!important;
  overflow:hidden!important;
  width:320px!important;height:240px!important;
  min-width:260px!important;min-height:210px!important;
  max-width:80vw!important;max-height:80vh!important;
  box-sizing:border-box!important;
}
.visitor-floating-viewer.floating-resizable #visitorFloatingVideo{
  flex:1 1 auto!important;width:100%!important;height:auto!important;
  min-width:0!important;min-height:0!important;object-fit:cover!important;
}
.visitor-floating-viewer.floating-resizable .visitor-floating-controls{
  flex:0 0 28px!important;
}
/* GIFs are local same-origin assets; never hide a successfully loaded GIF. */
.gif-choice img{display:block!important;width:180px!important;height:120px!important;object-fit:cover!important}
.gif-choice.gif-loaded img{display:block!important}
.chat-gif{display:block!important;max-width:min(100%,360px)!important;width:auto!important;height:auto!important;min-height:60px!important;object-fit:contain!important}
.chat-gif.gif-load-error{display:none!important}


/* EPICSOLO v1.1.13 — authoritative guest pair + presence */
@media (min-width:901px){
  .room-page .room-main-grid{display:grid!important;grid-template-columns:654px minmax(320px,1fr)!important;column-gap:20px!important;align-items:start!important;min-width:994px!important;overflow:visible!important}
  .room-page #mainWebcamGrid.camera-pair-2x2{display:grid!important;grid-template-columns:320px 320px!important;grid-template-rows:320px!important;column-gap:14px!important;row-gap:0!important;width:654px!important;min-width:654px!important;max-width:654px!important;height:320px!important;min-height:320px!important;max-height:320px!important;flex:none!important;overflow:visible!important}
  .room-page #mainWebcamGrid.camera-pair-2x2>.starter-video-wrap,.room-page #mainWebcamGrid.camera-pair-2x2>#selfVideoWrap{grid-row:1!important;width:320px!important;min-width:320px!important;max-width:320px!important;height:320px!important;min-height:320px!important;max-height:320px!important;aspect-ratio:1/1!important;margin:0!important;flex:none!important;position:relative!important}
  .room-page #mainWebcamGrid.camera-pair-2x2>.starter-video-wrap{grid-column:1!important}
  .room-page #mainWebcamGrid.camera-pair-2x2>#selfVideoWrap{grid-column:2!important}
  .room-page #mainWebcamGrid.camera-single-1x1{display:grid!important;grid-template-columns:640px!important;grid-template-rows:480px!important;width:640px!important;min-width:640px!important;max-width:640px!important;height:480px!important}
  .room-page #mainWebcamGrid.camera-single-1x1>.starter-video-wrap{grid-column:1!important;grid-row:1!important;width:640px!important;height:480px!important;min-width:640px!important;max-width:640px!important;min-height:480px!important;max-height:480px!important;aspect-ratio:4/3!important}
}
@media (max-width:900px){
  .room-page #mainWebcamGrid.camera-pair-2x2{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;grid-template-rows:auto!important;gap:8px!important;width:100%!important;min-width:0!important;max-width:none!important;height:auto!important}
  .room-page #mainWebcamGrid.camera-pair-2x2>.starter-video-wrap,.room-page #mainWebcamGrid.camera-pair-2x2>#selfVideoWrap{grid-row:1!important;width:100%!important;min-width:0!important;max-width:none!important;height:auto!important;aspect-ratio:1/1!important}
  .room-page #mainWebcamGrid.camera-pair-2x2>.starter-video-wrap{grid-column:1!important}.room-page #mainWebcamGrid.camera-pair-2x2>#selfVideoWrap{grid-column:2!important}
  .room-page #mainWebcamGrid.camera-single-1x1{width:100%!important;min-width:0!important;max-width:none!important;grid-template-columns:minmax(0,1fr)!important;grid-template-rows:auto!important;height:auto!important}
  .room-page #mainWebcamGrid.camera-single-1x1>.starter-video-wrap{width:100%!important;min-width:0!important;max-width:none!important;height:auto!important;aspect-ratio:4/3!important}
}
.presence-online-text{color:#35d07f!important}.presence-offline-text{color:#8b95a7!important}.staff-presence-row{border-left:3px solid #3b4860}.staff-presence-row .admin{color:#f0b34f}.staff-presence-row .moderator{color:#7db7ff}

.room-page .visitor-tile.webcam-private .visitor-video{visibility:hidden!important}
.room-page .visitor-tile.webcam-private .visitor-audio-overlay{visibility:hidden!important}
.room-page .webcam-private-overlay{position:absolute;inset:0;display:grid;place-items:center;padding:16px;text-align:center;background:rgba(5,8,13,.88);color:#dbe5f4;font-size:12px;font-weight:700;z-index:4}

.private-webcam-name-request{cursor:pointer;text-decoration:underline dotted;text-underline-offset:3px}

/* EPICSOLO v1.1.13 final webcam geometry. */
@media (min-width:901px){
 .room-page #mainWebcamGrid.camera-pair-2x2{
   display:grid!important; grid-template-columns:320px 320px!important; grid-template-rows:320px!important;
   column-gap:14px!important; row-gap:0!important; width:654px!important; min-width:654px!important;
   max-width:654px!important; height:320px!important; min-height:320px!important; max-height:320px!important;
   align-items:start!important; justify-content:start!important; overflow:visible!important;
 }
 .room-page #mainWebcamGrid.camera-pair-2x2>.starter-video-wrap,
 .room-page #mainWebcamGrid.camera-pair-2x2>#selfVideoWrap{
   width:320px!important; min-width:320px!important; max-width:320px!important;
   height:320px!important; min-height:320px!important; max-height:320px!important;
   grid-row:1!important; margin:0!important; padding:0!important; position:relative!important;
 }
 .room-page #mainWebcamGrid.camera-pair-2x2>.starter-video-wrap{grid-column:1!important}
 .room-page #mainWebcamGrid.camera-pair-2x2>#selfVideoWrap{grid-column:2!important;display:block!important}
 .room-page #mainWebcamGrid.camera-pair-2x2 video{width:100%!important;height:100%!important;object-fit:cover!important}
}
.visitor-floating-viewer.floating-resizable{resize:none!important;overflow:hidden!important;min-width:260px!important;min-height:210px!important;max-width:80vw!important;max-height:80vh!important;box-sizing:border-box!important}
.floating-resize-handle{position:absolute!important;right:0!important;bottom:0!important;width:18px!important;height:18px!important;z-index:30!important;cursor:nwse-resize!important;background:linear-gradient(135deg,transparent 0 35%,rgba(255,255,255,.85) 36% 44%,transparent 45% 55%,rgba(255,255,255,.85) 56% 64%,transparent 65%)!important;touch-action:none!important}

/* v1.1.15 hotfix: authoritative guest/starter pair + real floating resize. */
@media (min-width:901px){
  .room-page .starter-panel{overflow:visible!important;}
  .room-page #mainWebcamGrid.camera-pair-2x2{
    display:grid!important;
    grid-template-columns:320px 320px!important;
    grid-template-rows:320px!important;
    grid-auto-columns:320px!important;
    gap:14px!important;
    width:654px!important; min-width:654px!important; max-width:654px!important;
    height:320px!important; min-height:320px!important; max-height:320px!important;
    flex:none!important; overflow:visible!important;
  }
  .room-page #mainWebcamGrid.camera-pair-2x2 > .starter-video-wrap,
  .room-page #mainWebcamGrid.camera-pair-2x2 > #selfVideoWrap{
    display:block!important; grid-row:1!important;
    width:320px!important; min-width:320px!important; max-width:320px!important;
    height:320px!important; min-height:320px!important; max-height:320px!important;
    flex:none!important; aspect-ratio:1/1!important;
  }
  .room-page #mainWebcamGrid.camera-pair-2x2 > .starter-video-wrap{grid-column:1!important;}
  .room-page #mainWebcamGrid.camera-pair-2x2 > #selfVideoWrap{grid-column:2!important;}
  .room-page #mainWebcamGrid.camera-pair-2x2 video{width:100%!important;height:100%!important;object-fit:cover!important;}
}
.visitor-floating-viewer.floating-resizable{
  resize:none!important; overflow:hidden!important; box-sizing:border-box!important;
  min-width:260px!important; min-height:210px!important; width:320px!important; height:240px!important;
  max-width:85vw!important; max-height:85vh!important;
}
.visitor-floating-viewer.floating-resizable .floating-resize-handle{
  display:block!important; position:absolute!important; right:0!important; bottom:0!important;
  width:24px!important; height:24px!important; z-index:9999!important; cursor:nwse-resize!important;
  pointer-events:auto!important; touch-action:none!important;
}
.visitor-floating-viewer.floating-resizable #visitorFloatingVideo{width:100%!important;height:auto!important;max-height:none!important;object-fit:contain!important;}


/* v1.1.17 FINAL CSS — authoritative guest 2x2 and floating resize. */
@media(min-width:901px){
  .room-page .room-main-grid{grid-template-columns:654px minmax(320px,1fr)!important;min-width:994px!important;overflow:visible!important}
  .room-page #mainWebcamGrid.camera-pair-2x2{display:grid!important;grid-template-columns:320px 320px!important;grid-template-rows:320px!important;gap:14px!important;width:654px!important;min-width:654px!important;max-width:654px!important;height:320px!important;min-height:320px!important;max-height:320px!important}
  .room-page #mainWebcamGrid.camera-pair-2x2>.starter-video-wrap,.room-page #mainWebcamGrid.camera-pair-2x2>#selfVideoWrap{width:320px!important;min-width:320px!important;max-width:320px!important;height:320px!important;min-height:320px!important;max-height:320px!important;aspect-ratio:1/1!important;grid-row:1!important;box-sizing:border-box!important}
}
.visitor-floating-viewer.floating-resizable{resize:none!important;overflow:hidden!important;width:320px!important;height:240px!important;min-width:260px!important;min-height:210px!important;max-width:80vw!important;max-height:80vh!important;box-sizing:border-box!important}
.visitor-floating-viewer.floating-resizable #visitorFloatingVideo{width:100%!important;height:100%!important;max-height:none!important;object-fit:contain!important;display:block!important}
.floating-resize-handle{position:absolute!important;right:0!important;bottom:0!important;width:24px!important;height:24px!important;z-index:100!important;cursor:nwse-resize!important;touch-action:none!important;background:linear-gradient(135deg,transparent 0 35%,rgba(255,255,255,.9) 36% 44%,transparent 45% 55%,rgba(255,255,255,.9) 56% 64%,transparent 65%)!important}
/* Admin webcam cards: compact at rest, full details on hover. */
.admin-cam-card .admin-cam-body{position:relative}
.admin-cam-card .admin-cam-details{display:none!important}
.admin-cam-card:hover .admin-cam-details,.admin-cam-card:focus-within .admin-cam-details{display:block!important}
.admin-cam-card .admin-cam-summary{display:flex!important;align-items:center;gap:6px;flex-wrap:wrap}
.admin-cam-card .admin-cam-summary .admin-cam-type{font-size:10px;font-weight:800;padding:2px 6px;border-radius:999px;border:1px solid #475569}
.admin-cam-card .admin-cam-summary .starter-type{color:#fbbf24;border-color:#f59e0b;background:rgba(245,158,11,.12)}
.admin-cam-card .admin-cam-summary .visitor-type{color:#34d399;border-color:#10b981;background:rgba(16,185,129,.12)}


/* v1.1.17 final main-room geometry: guest/user/visitor + starter are a true 320x320 pair. */
@media(min-width:901px){
  .room-page #mainWebcamGrid.camera-pair-2x2{
    display:grid!important;
    grid-template-columns:320px 320px!important;
    grid-template-rows:320px!important;
    column-gap:14px!important;
    row-gap:0!important;
    width:654px!important;
    min-width:654px!important;
    max-width:654px!important;
    height:320px!important;
    min-height:320px!important;
    max-height:320px!important;
  }
  .room-page #mainWebcamGrid.camera-pair-2x2>.starter-video-wrap,
  .room-page #mainWebcamGrid.camera-pair-2x2>#selfVideoWrap{
    width:320px!important;min-width:320px!important;max-width:320px!important;
    height:320px!important;min-height:320px!important;max-height:320px!important;
    box-sizing:border-box!important;margin:0!important;float:none!important;
  }
  .room-page #mainWebcamGrid.camera-pair-2x2>.starter-video-wrap{grid-column:1!important;grid-row:1!important}
  .room-page #mainWebcamGrid.camera-pair-2x2>#selfVideoWrap{grid-column:2!important;grid-row:1!important}
  .room-page #mainWebcamGrid.camera-single-1x1{
    display:grid!important;grid-template-columns:640px!important;grid-template-rows:480px!important;
    width:640px!important;min-width:640px!important;max-width:640px!important;height:480px!important;
  }
}
/* Admin webcam details are compact and appear only on hover/focus. */
.admin-page .admin-cam-card .admin-cam-details{display:none!important;position:absolute;left:0;right:0;bottom:0;padding:10px;background:rgba(8,13,22,.96);z-index:5;max-height:75%;overflow:auto}
.admin-page .admin-cam-card{position:relative}
.admin-page .admin-cam-card:hover .admin-cam-details,
.admin-page .admin-cam-card:focus-within .admin-cam-details,
.admin-page .admin-cam-card.is-hovered .admin-cam-details{display:block!important}
.admin-page .admin-cam-card .admin-cam-summary{position:relative;z-index:6}
.admin-page .admin-cam-card .admin-cam-type.starter-type{color:#fbbf24;border-color:#f59e0b;background:rgba(245,158,11,.14)}
.admin-page .admin-cam-card .admin-cam-type.visitor-type{color:#34d399;border-color:#10b981;background:rgba(16,185,129,.14)}

.admin-page .online-room-link{color:#78aaff;text-decoration:underline;font-weight:700;margin-left:6px}.admin-page .online-room-link:hover{color:#fff}


/* EPICSOLO v1.1.18 — clean guest/visitor main stage authority. */
@media (min-width:901px){
  .room-page .room-main-grid{display:grid!important;grid-template-columns:654px minmax(320px,1fr)!important;column-gap:20px!important;align-items:start!important;min-width:994px!important;overflow:visible!important}
  .room-page .starter-panel{width:654px!important;min-width:654px!important;max-width:654px!important;overflow:visible!important}
  .room-page #mainWebcamGrid.camera-pair-2x2{display:grid!important;grid-template-columns:320px 320px!important;grid-template-rows:320px!important;grid-auto-flow:row!important;column-gap:14px!important;row-gap:0!important;width:654px!important;min-width:654px!important;max-width:654px!important;height:320px!important;min-height:320px!important;max-height:320px!important;flex:none!important;overflow:visible!important;align-items:start!important;justify-items:start!important}
  .room-page #mainWebcamGrid.camera-pair-2x2>.starter-video-wrap,.room-page #mainWebcamGrid.camera-pair-2x2>#selfVideoWrap{display:block!important;position:relative!important;grid-row:1!important;width:320px!important;min-width:320px!important;max-width:320px!important;height:320px!important;min-height:320px!important;max-height:320px!important;aspect-ratio:1/1!important;margin:0!important;padding:0!important;float:none!important;flex:none!important;overflow:hidden!important}
  .room-page #mainWebcamGrid.camera-pair-2x2>.starter-video-wrap{grid-column:1!important}
  .room-page #mainWebcamGrid.camera-pair-2x2>#selfVideoWrap{grid-column:2!important}
  .room-page #mainWebcamGrid.camera-single-1x1{display:grid!important;grid-template-columns:640px!important;grid-template-rows:480px!important;width:640px!important;min-width:640px!important;max-width:640px!important;height:480px!important}
  .room-page #mainWebcamGrid.camera-single-1x1>.starter-video-wrap{grid-column:1!important;grid-row:1!important;width:640px!important;height:480px!important;min-width:640px!important;max-width:640px!important;min-height:480px!important;max-height:480px!important;aspect-ratio:4/3!important}
}
@media (max-width:900px){
  .room-page .room-main-grid{grid-template-columns:minmax(0,1fr)!important;min-width:0!important}
  .room-page .starter-panel{width:100%!important;min-width:0!important;max-width:none!important}
  .room-page #mainWebcamGrid.camera-pair-2x2{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;grid-template-rows:auto!important;gap:8px!important;width:100%!important;min-width:0!important;max-width:none!important;height:auto!important;min-height:0!important;max-height:none!important}
  .room-page #mainWebcamGrid.camera-pair-2x2>.starter-video-wrap,.room-page #mainWebcamGrid.camera-pair-2x2>#selfVideoWrap{grid-row:1!important;width:100%!important;min-width:0!important;max-width:none!important;height:auto!important;min-height:0!important;max-height:none!important;aspect-ratio:1/1!important}
  .room-page #mainWebcamGrid.camera-pair-2x2>.starter-video-wrap{grid-column:1!important}.room-page #mainWebcamGrid.camera-pair-2x2>#selfVideoWrap{grid-column:2!important}
}

/* Admin webcam: compact card + true floating hover information/thumbnail. */
.admin-webcam-hover-float{position:fixed;z-index:999999;width:300px;max-width:calc(100vw - 24px);padding:10px;border:1px solid #42526b;border-radius:12px;background:#0b1320;color:#f4f7fb;box-shadow:0 16px 45px rgba(0,0,0,.45);pointer-events:none;font-size:12px}
.admin-webcam-hover-title{display:flex;justify-content:space-between;gap:8px;font-weight:800;margin-bottom:8px}.admin-webcam-hover-title span{font-size:10px;padding:2px 6px;border-radius:999px;border:1px solid #64748b}
.admin-webcam-hover-media{height:169px;border-radius:8px;overflow:hidden;background:#05080d;display:grid;place-items:center;color:#91a0b6;margin-bottom:8px}.admin-webcam-hover-media img{width:100%;height:100%;display:block;object-fit:cover}.admin-webcam-hover-info{line-height:1.45;color:#c5d0df}
.admin-page .admin-cam-card .admin-cam-type.starter-type{color:#fbbf24!important;border-color:#f59e0b!important;background:rgba(245,158,11,.14)!important}.admin-page .admin-cam-card .admin-cam-type.visitor-type{color:#34d399!important;border-color:#10b981!important;background:rgba(16,185,129,.14)!important}

/* EPICSOLO 1.1.19 admin webcam hover */
.admin-webcam-hover-float{position:fixed;z-index:2147483000;width:min(360px,calc(100vw - 24px));background:var(--panel-bg,#151922);border:1px solid rgba(255,255,255,.18);border-radius:12px;box-shadow:0 18px 50px rgba(0,0,0,.45);padding:10px;pointer-events:none}
.admin-webcam-hover-float img{display:block;width:100%;max-height:220px;object-fit:cover;border-radius:8px;background:#000}
.admin-webcam-hover-title{display:flex;justify-content:space-between;gap:8px;font-weight:700;margin-bottom:8px}
.admin-webcam-hover-info{font-size:.82rem;line-height:1.4;margin-top:8px;opacity:.9}
.admin-cam-card .admin-cam-details{display:none}
.admin-cam-card.is-hovered .admin-cam-details{display:none}
.admin-cam-type{white-space:nowrap}

/* EPICSOLO 1.1.24 authoritative admin webcam presentation. */
.admin-page .admin-cam-card .admin-cam-details-static{display:block!important;position:static!important;padding:8px 10px;background:transparent;max-height:none;overflow:visible;font-size:12px;line-height:1.45}
.admin-page .admin-cam-card .admin-cam-summary{display:flex!important;align-items:center;gap:7px;flex-wrap:wrap}
.admin-page .admin-cam-card .admin-cam-type{font-size:10px;font-weight:900;padding:2px 7px;border-radius:999px;white-space:nowrap}
.admin-page .admin-cam-card .admin-cam-type.starter-type{color:#fbbf24!important;border:1px solid #f59e0b!important;background:rgba(245,158,11,.14)!important}
.admin-page .admin-cam-card .admin-cam-type.visitor-type{color:#34d399!important;border:1px solid #10b981!important;background:rgba(16,185,129,.14)!important}
.admin-page .admin-cam-card .admin-cam-media{position:relative;overflow:hidden;cursor:pointer;aspect-ratio:16/9;min-height:120px}
.admin-page .admin-cam-card .admin-cam-thumb{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important;opacity:1!important;visibility:visible!important;display:block!important;z-index:1!important;transition:opacity .12s ease}
.admin-page .admin-cam-card .admin-cam-thumb.live-preview-image{opacity:1!important;filter:none!important}
.admin-page .admin-cam-card .admin-preview-label{position:absolute;left:8px;bottom:8px;z-index:3;padding:3px 6px;border-radius:5px;background:rgba(0,0,0,.72);color:#fff;font-size:9px;font-weight:800;pointer-events:none}
.admin-page .admin-cam-card .admin-cam-details-static>div{margin:2px 0}
.admin-page .admin-cam-card .admin-cam-details{display:none!important}


/* v1.1.24 admin webcam hover: information lives in a floating card, not inside the compact tile. */
.admin-webcam-hover-card{position:fixed;z-index:999999;width:360px;max-width:calc(100vw - 16px);background:#0b1220;color:#eef4ff;border:1px solid #334155;border-radius:12px;box-shadow:0 18px 55px rgba(0,0,0,.48);overflow:hidden;pointer-events:auto;font-size:12px;line-height:1.45}
.admin-hover-preview{position:relative;aspect-ratio:16/9;background:#03070d;overflow:hidden}.admin-hover-preview img{width:100%;height:100%;display:block;object-fit:cover}.admin-hover-live{position:absolute;left:8px;top:8px;padding:3px 6px;border-radius:5px;background:rgba(210,25,45,.9);color:#fff;font-size:9px;font-weight:900;letter-spacing:.08em}.admin-hover-info{padding:10px 12px}.admin-hover-name{font-weight:900;font-size:14px;margin-bottom:4px}.admin-hover-tag{display:inline-block;margin-bottom:7px;padding:2px 7px;border-radius:999px;border:1px solid #475569;font-size:9px;font-weight:900;letter-spacing:.04em}.admin-cam-compact{font-size:10px;color:#71819b;padding:5px 0}.admin-page .admin-cam-details-static{display:none!important}

/* EPICSOLO 1.1.24: chat YouTube cards */
.chat-youtube-link{display:flex;align-items:center;gap:10px;width:min(360px,100%);margin-top:8px;padding:7px;border:1px solid rgba(255,255,255,.14);border-radius:10px;background:rgba(15,23,42,.82);color:inherit;text-align:left;cursor:pointer;overflow:hidden}
.chat-youtube-thumb{width:92px;height:52px;flex:0 0 92px;border-radius:7px;overflow:hidden;background:#050505;display:block}.chat-youtube-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.chat-youtube-copy{display:flex;flex-direction:column;gap:2px;min-width:0}.chat-youtube-copy strong{font-size:.84rem}.chat-youtube-copy small{opacity:.72;font-size:.72rem}.chat-youtube-link:hover{filter:brightness(1.08)}
.youtube-modal-box{position:fixed!important;margin:0!important;width:800px;height:600px;max-width:none;max-height:none;padding:0;overflow:hidden}.youtube-window-header{height:58px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;cursor:move;user-select:none}.youtube-window-header h2{margin:0;font-size:18px}.youtube-frame-wrap{width:100%;height:calc(100% - 58px);min-height:0;background:#000;border-radius:0 0 10px 10px;overflow:hidden}.youtube-frame-wrap iframe{width:100%;height:100%;border:0;display:block}.youtube-resize-handle{position:absolute;right:0;bottom:0;width:22px;height:22px;cursor:nwse-resize;background:linear-gradient(135deg,transparent 0 42%,#8ea0bd 43% 48%,transparent 49% 58%,#8ea0bd 59% 64%,transparent 65%)}
/* EPICSOLO 1.1.24: starter viewer audio controls are always local playback controls */
.role-bezoeker .webcam-inline-audio-controls{display:block}.role-kamerstarter .webcam-inline-audio-controls{display:block}


/* EPICSOLO 1.1.28 — final shared webcam roster contract. */
.room-page .visitors-panel #visitorGrid.shared-webcam-roster{
  display:grid!important;
  grid-template-columns:repeat(auto-fill,160px)!important;
  grid-auto-rows:120px!important;
  gap:12px!important;
  align-items:start!important;
  justify-content:start!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  overflow:auto!important;
  flex-wrap:unset!important;
}
.room-page .visitors-panel #visitorGrid.shared-webcam-roster .visitor-tile[data-shared-roster="true"]{
  width:160px!important;
  min-width:160px!important;
  max-width:160px!important;
  height:120px!important;
  min-height:120px!important;
  max-height:120px!important;
  margin:0!important;
  box-sizing:border-box!important;
  cursor:grab;
}
.room-page .visitors-panel #visitorGrid.shared-webcam-roster .visitor-video-frame,
.room-page .visitors-panel #visitorGrid.shared-webcam-roster .visitor-video{
  width:160px!important;
  height:120px!important;
  min-width:160px!important;
  min-height:120px!important;
  max-width:160px!important;
  max-height:120px!important;
  object-fit:cover!important;
}
.room-page .visitors-panel #visitorGrid.shared-webcam-roster .visitor-tile[data-shared-roster="true"]::after{
  content:'BEZOEKER';
  position:absolute;left:7px;top:7px;z-index:4;
  padding:2px 6px;border-radius:999px;background:#000b;color:#fff;
  font-size:9px;font-weight:800;letter-spacing:.05em;pointer-events:none;
}
.room-page .visitors-panel #visitorGrid.shared-webcam-roster .visitor-tile.dragging{opacity:.55;cursor:grabbing}

/* 3 live rooms per row, with 160×120 thumbnails. */
.rooms-drawer{width:min(560px,94vw)!important}
.room-browser{display:grid!important;grid-template-columns:repeat(3,160px)!important;gap:14px!important;align-items:start!important;justify-content:start!important}
.browser-room{width:160px!important;min-width:160px!important;display:grid!important;grid-template-rows:120px auto auto auto!important;gap:5px!important;padding:8px!important;box-sizing:border-box!important}
.browser-thumb{width:160px!important;height:120px!important;aspect-ratio:auto!important;margin:0!important}
.browser-thumb img{width:160px!important;height:120px!important;object-fit:cover!important}
.browser-room strong,.browser-room span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:560px){.room-browser{grid-template-columns:repeat(2,160px)!important}}
@media(max-width:370px){.room-browser{grid-template-columns:160px!important;justify-content:center!important}}

/* v1.1.66 — staff role colors in Admin > Webcams. */
.admin-page .admin-cam-name.staff-admin,.admin-page .admin-cam-type.staff-admin{color:#ef4444!important;border-color:#ef4444!important;background:rgba(239,68,68,.12)!important}
.admin-page .admin-cam-name.staff-moderator,.admin-page .admin-cam-type.staff-moderator{color:#3b82f6!important;border-color:#3b82f6!important;background:rgba(59,130,246,.12)!important}
.admin-page .admin-cam-name.staff-beta,.admin-page .admin-cam-type.staff-beta{color:#c084fc!important;border-color:#c084fc!important;background:rgba(192,132,252,.14)!important}

.last-online{color:#9aa8bd;font-size:.92em;white-space:nowrap}

.admin-page .log-session-label{font-size:11px;font-weight:600;opacity:.65;margin-left:10px;}

.ip-analysis-user{display:inline-block;margin:.25rem .35rem .25rem 0;padding:.25rem .5rem;border:1px solid rgba(255,255,255,.12);border-radius:8px;background:rgba(255,255,255,.03)}.ip-analysis-user small{opacity:.7;margin-left:.25rem}

/* v1.1.66 — country flags in Admin > Webcams. */
.admin-country-flag{display:inline-flex;align-items:center;margin-right:4px;font-size:1rem;line-height:1;vertical-align:-1px}
.participant-country-flag{display:inline-flex;align-items:center;margin-right:4px;line-height:1}

.log-user-folder{border:1px solid #2a3a55;border-radius:10px;margin:10px 0;background:rgba(15,23,42,.45)}
.log-user-folder>summary,.log-user-group>summary{cursor:pointer;list-style:none;padding:12px 14px;display:flex;gap:12px;align-items:center;justify-content:space-between}
.log-user-folder>summary::-webkit-details-marker,.log-user-group>summary::-webkit-details-marker{display:none}
.log-user-folder-body{padding:0 10px 10px}.log-user-group{border-top:1px solid #24334b;margin:0}.log-user-messages{padding:0 12px 10px}.log-session-label{margin-left:auto;color:#94a3b8;font-size:.85em}

/* FIX6: beta-tester typing color only; no bold/italic. */
.room-page.role-beta-tester #chatInput{color:#a855f7!important;font-weight:400!important;font-style:normal!important;}
.room-page.role-beta-tester #chatInput::placeholder{color:#a855f7!important;opacity:.62!important;font-weight:400!important;font-style:normal!important;}
.room-page.role-beta-tester .msg{font-style:normal;}
.room-page.role-beta-tester .msg.starter-message,.room-page.role-beta-tester .msg.beta-tester-message{font-weight:400;font-style:normal;}
/* FIX6: EPICCHAT YouTube is a floating, draggable, resizable tile. */
#youtubeModal.epicchat-floating{position:fixed!important;inset:0!important;background:transparent!important;pointer-events:none!important;z-index:99990!important;display:block!important;}
#youtubeModal.epicchat-floating.hidden{display:none!important;}
#youtubeModal.epicchat-floating .youtube-modal-box{position:fixed!important;left:auto!important;top:auto!important;transform:none!important;width:720px!important;height:460px!important;min-width:360px!important;min-height:260px!important;max-width:calc(100vw - 24px)!important;max-height:calc(100vh - 24px)!important;resize:none!important;overflow:hidden!important;pointer-events:auto!important;box-sizing:border-box!important;}
#youtubeModal.epicchat-floating .chat-log-header{cursor:move!important;user-select:none!important;touch-action:none!important;}
#youtubeModal.epicchat-floating .youtube-frame-wrap{height:calc(100% - 50px)!important;}
#youtubeModal.epicchat-floating .epicchat-resize-handle{position:absolute!important;right:0!important;bottom:0!important;width:24px!important;height:24px!important;cursor:nwse-resize!important;z-index:20!important;touch-action:none!important;background:linear-gradient(135deg,transparent 0 35%,rgba(255,255,255,.9) 36% 44%,transparent 45% 55%,rgba(255,255,255,.9) 56% 64%,transparent 65%)!important;}
/* FIX6: admin chatlog rich media */
.admin-chat-gif{margin-top:6px;max-width:360px}.admin-chat-gif img{display:block;max-width:100%;max-height:240px;width:auto;height:auto;object-fit:contain;border-radius:8px;background:#05080d}.admin-chat-youtube{margin-top:7px;width:min(360px,100%);border:1px solid rgba(255,255,255,.14);border-radius:9px;overflow:hidden;background:rgba(15,23,42,.82)}.admin-chat-youtube-title{padding:5px 8px;font-size:11px;font-weight:800}.admin-chat-youtube a{display:flex;gap:8px;align-items:center;padding:6px;color:inherit;text-decoration:none}.admin-chat-youtube img{width:96px;height:54px;object-fit:cover;border-radius:6px}.admin-chat-youtube span{font-size:11px;font-weight:700}

/* FIX7: beta-tester messages are purple in the chat, never bold/italic. */
.room-page.role-beta-tester .msg.beta-tester-message, .room-page.role-beta-tester .msg.beta-tester-message *{color:#a855f7!important;font-weight:400!important;font-style:normal!important;}

/* FIX7: beta-tester messages are purple for every chat viewer. */
.msg.beta-tester-message, .msg.beta-tester-message *{color:#a855f7!important;font-weight:400!important;font-style:normal!important;}


/* FIX10: beta-tester sender is purple in the live chat itself,
   including name, timestamp and message body; never bold or italic. */
#messages .msg.beta-tester-message,
#messages .msg.beta-tester-message *,
#messages .msg.beta-tester-message b,
#messages .msg.beta-tester-message span,
#messages .msg.beta-tester-message div{
  color:#a855f7!important;
  font-weight:400!important;
  font-style:normal!important;
}

/* FIX11 floating webcam: compact 160x120, click to expand 320x240, manual resize. */
.visitor-floating-viewer.floating-resizable{width:160px!important;height:120px!important;min-width:160px!important;min-height:120px!important;max-width:85vw!important;max-height:85vh!important;resize:none!important;box-sizing:border-box!important}
.visitor-floating-viewer.floating-resizable #visitorFloatingVideo{width:100%!important;height:100%!important;min-width:0!important;min-height:0!important;max-height:none!important;object-fit:contain!important;display:block!important;cursor:pointer!important}
.visitor-floating-viewer.floating-resizable .floating-resize-handle{position:absolute!important;right:2px!important;bottom:2px!important;width:16px!important;height:16px!important;z-index:6!important;cursor:nwse-resize!important;background:rgba(255,255,255,.12)!important;border-radius:3px!important}
.webcam-name-openable{cursor:pointer!important}

/* FIX12: beta-tester live-chat messages are purple for every viewer.
   The sender role is carried by the chat-message payload; this selector is
   deliberately independent of the current viewer's room role. */
#messages .msg.beta-tester-message,
#messages .msg.beta-tester-message > *,
#messages .msg.beta-tester-message b,
#messages .msg.beta-tester-message span,
#messages .msg.beta-tester-message div,
#messages .msg.beta-tester-message a{
  color:#a855f7!important;
  font-weight:400!important;
  font-style:normal!important;
}

/* FIX12: slightly larger smileys in the room chat picker/button. */
.room-page .emoji-button{
  width:46px!important;
  min-width:46px!important;
  height:46px!important;
  min-height:46px!important;
  padding:7px!important;
  font-size:22px!important;
  line-height:1!important;
}
.room-page .emoji-choice{
  width:34px!important;
  height:34px!important;
  min-width:34px!important;
  min-height:34px!important;
  font-size:22px!important;
  line-height:1!important;
}

/* FIX12: visitor/guest/registered-user room gets the same desktop working
   area as the starter/staff presentations. With no self camera the starter
   occupies the full media stage; when the visitor camera is active the two
   cameras share that stage evenly. */
@media(min-width:901px){
  .room-page.role-bezoeker .room-main-grid{
    grid-template-columns:minmax(0,1.38fr) minmax(360px,1fr)!important;
    gap:18px!important;
  }
  .room-page.role-bezoeker .starter-media-row{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
    gap:14px!important;
    align-items:start!important;
    width:100%!important;
  }
  .room-page.role-bezoeker .starter-video-wrap{
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
    height:auto!important;
    min-height:0!important;
    aspect-ratio:4/3!important;
    flex:none!important;
  }
  .room-page.role-bezoeker .starter-video-wrap:only-child{
    grid-column:1 / -1!important;
  }
  .room-page.role-bezoeker .starter-video,
  .room-page.role-bezoeker #selfVideo{
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
  }
  .room-page.role-bezoeker .self-video-wrap{
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    height:auto!important;
    min-height:0!important;
    aspect-ratio:4/3!important;
    flex:none!important;
  }
  .room-page.role-bezoeker .chat-panel{
    min-width:0!important;
    width:100%!important;
  }
}

@media(max-width:900px){
  .room-page.role-bezoeker .starter-media-row{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:10px!important;
  }
  .room-page.role-bezoeker .starter-video-wrap,
  .room-page.role-bezoeker .self-video-wrap{
    width:100%!important;
    max-width:100%!important;
    height:auto!important;
    min-height:0!important;
    aspect-ratio:4/3!important;
  }
}


/* FIX13: role-colored admin chat logs and private webcam decision card */
.log-identity-folder > summary{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.log-session-folder{margin:8px 0;border:1px solid rgba(255,255,255,.08);border-radius:10px;background:rgba(255,255,255,.02)}
.log-session-folder>summary{padding:9px 12px;display:flex;gap:10px;align-items:center;flex-wrap:wrap;cursor:pointer}
.log-session-body{padding:0 10px 10px}
.log-role-badge{display:inline-flex;align-items:center;border-radius:999px;padding:2px 7px;font-size:10px;font-weight:800;letter-spacing:.03em;background:#334155;color:#fff}
.log-role-badge.admin-message-log{background:#7f1d1d;color:#fecaca}
.log-role-badge.moderator-message-log{background:#1e3a8a;color:#bfdbfe}
.log-role-badge.beta-message-log{background:#581c87;color:#e9d5ff}
.log-line.admin-message-log b,.log-line.admin-message-log>div{color:#ef4444}
.log-line.moderator-message-log b,.log-line.moderator-message-log>div{color:#60a5fa}
.log-line.beta-message-log b,.log-line.beta-message-log>div{color:#a855f7}
.private-webcam-request-title{font-weight:800;font-size:16px;margin-bottom:8px}
.private-webcam-request-text{line-height:1.45;margin-bottom:12px}
.private-webcam-request-actions{display:flex;gap:8px}
.private-webcam-request-actions button{flex:1;border:0;border-radius:9px;padding:9px 12px;font-weight:700;cursor:pointer}
.private-webcam-request-actions [data-private-allow]{background:#16a34a;color:#fff}
.private-webcam-request-actions [data-private-deny]{background:#334155;color:#fff}

/* FIX15b: admin webcam flying tile */
.admin-floating-webcam{position:fixed!important;left:24px;top:24px;width:160px;height:120px;z-index:2147483000!important;background:#05080d;border:1px solid #42526b;border-radius:10px;box-shadow:0 18px 55px rgba(0,0,0,.55);overflow:hidden;display:flex;flex-direction:column;box-sizing:border-box}
.admin-floating-webcam-head{height:28px;flex:0 0 28px;display:flex;align-items:center;justify-content:space-between;gap:6px;padding:3px 6px;background:rgba(11,16,25,.96);color:#fff;cursor:move;font-size:11px;user-select:none}
.admin-floating-webcam-head b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.admin-floating-webcam-head button{border:0;background:transparent;color:#fff;font-size:20px;line-height:20px;padding:0 4px;cursor:pointer}
.admin-floating-webcam-media{position:relative;flex:1 1 auto;min-height:0;background:#000;overflow:hidden;cursor:pointer}
.admin-floating-webcam-media img{display:block;width:100%;height:100%;object-fit:cover;background:#000}
.admin-floating-live{position:absolute;left:5px;top:5px;padding:2px 5px;border-radius:4px;background:rgba(220,38,38,.9);color:#fff;font-size:8px;font-weight:900;letter-spacing:.08em}
.admin-floating-webcam-controls{height:18px;flex:0 0 18px;padding:2px 5px;background:#0b1019;color:#9ca8ba;font-size:8px;overflow:hidden;white-space:nowrap}
.admin-floating-resize{position:absolute;right:0;bottom:0;width:14px;height:14px;cursor:nwse-resize;background:linear-gradient(135deg,transparent 0 42%,#94a3b8 43% 50%,transparent 51% 62%,#94a3b8 63% 70%,transparent 71%)}

/* Internal admin/moderator discussion */
.moderator-discussion-card{display:flex;flex-direction:column;gap:10px}
.moderator-chat-messages{height:360px;max-height:55vh;overflow-y:auto;border:1px solid rgba(127,127,127,.35);border-radius:10px;padding:10px;background:rgba(0,0,0,.04);scroll-behavior:smooth}
.moderator-chat-message{padding:9px 10px;border-bottom:1px solid rgba(127,127,127,.18);word-break:break-word}
.moderator-chat-message:last-child{border-bottom:0}
.moderator-chat-meta{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:.82rem;margin-bottom:4px}
.moderator-chat-meta span{opacity:.75;text-transform:capitalize}
.moderator-chat-meta time{margin-left:auto;opacity:.65}
.moderator-chat-text{white-space:pre-wrap;line-height:1.4}
.moderator-chat-form textarea{width:100%;resize:vertical;box-sizing:border-box}
.moderator-chat-empty{padding:30px 10px;text-align:center}
.moderator-chat-actions{display:flex;gap:6px;margin-top:7px}.moderator-chat-actions button{font-size:.78rem;padding:4px 8px}.moderator-chat-message em{opacity:.6;font-size:.78rem}.moderator-chat-deleted{opacity:.7}.moderator-chat-system{display:flex;justify-content:space-between;gap:12px;padding:8px 10px;margin:6px 0;border:1px dashed rgba(127,127,127,.35);border-radius:8px;font-size:.82rem;opacity:.85}.moderator-chat-system time{white-space:nowrap;opacity:.65}



/* FIX18: beta-tester is always the purple identity in every room surface. */
.room-page.beta-tester-user #chatInput,
.room-page.beta-tester-user #chatInput::placeholder{color:#a855f7!important;font-weight:400!important;font-style:normal!important;}
.room-page .participant-row.participant-beta-tester,
.room-page .participant-row.participant-beta-tester strong,
.room-page .participant-row.participant-beta-tester .participant-name{color:#a855f7!important;}
.room-page .visitor-tile.beta-tester-tile{border-color:#a855f7!important;box-shadow:0 0 0 1px rgba(168,85,247,.28)!important;}
.room-page .visitor-tile.beta-tester-tile .visitor-badge,
.room-page .visitor-tile.beta-tester-tile .visitor-name{color:#a855f7!important;}
.room-page .visitor-tile.beta-tester-tile .visitor-video-tools,
.room-page .visitor-tile.beta-tester-tile .visitor-inline-audio-controls{border-color:rgba(168,85,247,.35)!important;}