/* The meeting room (lib/room.js): the guest's page and the host's recorder page hold a call on this screen.
   It is always dark, whatever the page's theme, so faces and shared screens stand out the way they do in any call. */
.room{--st:#0b120e;--tile:#18241d;--ctl:#22322a;--ctl2:#2c4036;--ln:#2d3f35;--ink:#eef2ea;--mut:#a6b5ab;--lime:#d4f74a;--rec:#d6403a;--hand:#f5b642;--pan:#121c16;--av:#3a5a48;
  position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;background:var(--st);color:var(--ink);font:15px/1.45 "Instrument Sans",-apple-system,system-ui,sans-serif;color-scheme:dark}
.room *,.room-back *{box-sizing:border-box}
.room[hidden],.room [hidden],.room-back[hidden]{display:none !important}
.room svg.i,.room-back svg.i{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.room button,.room input,.room select{font:inherit;color:inherit}
.room button{cursor:pointer}
.room button:disabled{cursor:default;opacity:.5}
.room :focus-visible{outline:3px solid var(--lime);outline-offset:2px}
.room .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* The pages the room opens on style some of its elements page-wide: every video, .who and .avatar on the recorder page
   (public/styles.css), .note on the guest's page (site/join.html). The room sets those properties back itself;
   test/room.test.mjs lists every such name, and test/ux/meetings.spec.mjs measures the host's page. */
.room h2,.room h3{font-family:"Bricolage Grotesque","Instrument Sans",system-ui,sans-serif;margin:0;line-height:1.15}

.room-body{flex:1;min-height:0;display:flex;gap:16px;padding:16px 16px 0}
.room-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:10px}
.room-top{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:34px}
.room-top-start{display:flex;align-items:center;gap:12px;min-width:0}
.room-head{display:none}
.room-rec{display:inline-flex;align-items:center;gap:8px;background:var(--rec);color:#fff;border-radius:999px;padding:6px 12px 6px 10px;font-size:14px;font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums}
.room-rec::before{content:"";width:9px;height:9px;border-radius:50%;background:#fff;animation:room-blink 1.4s infinite}
@keyframes room-blink{50%{opacity:.3}}
.room-note{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--mut);min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.room-note b{color:var(--ink);font-weight:600}
.room-line{font-size:13px;color:var(--hand);font-weight:600}
.room-ghost{display:inline-flex;align-items:center;gap:8px;height:36px;border:1px solid var(--ln);border-radius:10px;background:transparent;padding:0 12px;font-size:14px;font-weight:600;white-space:nowrap}
.room-ghost:hover{background:var(--ctl)}

/* The stage: one to four tiles in a grid, or one tile large with the others beside it (pinned). */
.room-stage{position:relative;flex:1;min-height:0;display:grid;gap:10px;grid-template-columns:repeat(var(--cols,1),minmax(0,1fr));grid-auto-rows:minmax(0,1fr)}
.room-stage[data-count="2"]{--cols:2}
.room-stage[data-count="3"],.room-stage[data-count="4"]{--cols:2}
/* Three on a computer: two above and the third centred below them, not left beside an empty space. */
@media (min-width:641px){
  .room-stage[data-count="3"]:not(.focused){--cols:4}
  .room-stage[data-count="3"]:not(.focused)>.room-tile{grid-column:span 2}
  .room-stage[data-count="3"]:not(.focused)>.room-tile:nth-of-type(3){grid-column:2/span 2}
}
.room-stage.focused{grid-template-columns:minmax(0,1fr) minmax(180px,22%);grid-template-rows:repeat(3,minmax(0,1fr))}
.room-stage.focused .room-tile.focus{grid-column:1;grid-row:1/-1}
.room-stage.focused .room-tile:not(.focus){grid-column:2}
.room-tile{position:relative;margin:0;border-radius:16px;overflow:hidden;background:var(--tile);min-height:0;display:grid;place-items:center}
.room-tile video{position:absolute;inset:0;width:100%;height:100%;max-width:none;aspect-ratio:auto;border:0;border-radius:0;background:transparent;object-fit:cover;display:block}
.room-tile.me:not(.sharing) video{transform:scaleX(-1)}
.room-tile.screen video{object-fit:contain;background:#000}
.room-tile.whole video{object-fit:contain}   /* a phone held upright in a wide tile: the whole face, not a strip of it */
.room-tile.nocam video{visibility:hidden}
.room-tile .avatar{display:none;width:96px;height:96px;max-width:40%;aspect-ratio:1;height:auto;border-radius:50%;background:var(--av);color:inherit;place-items:center;font:800 36px "Bricolage Grotesque",system-ui,sans-serif;position:relative}
.room-tile.nocam .avatar{display:grid}
.room-tile::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 3px var(--lime);opacity:0;transition:opacity .15s;pointer-events:none}
.room-tile.speaking::after{opacity:1}
.room-tile figcaption{position:absolute;left:12px;bottom:12px;max-width:calc(100% - 24px);display:flex;align-items:center;gap:8px;background:rgba(8,14,10,.72);border-radius:8px;padding:5px 10px;font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden}
.room-tile figcaption .name{overflow:hidden;text-overflow:ellipsis}
.room-tile figcaption .note{margin:0;font-size:inherit;line-height:inherit;font-weight:500;color:var(--mut)}
.room-tile figcaption .note span+span::before{content:", "}
.room .bars{display:flex;align-items:flex-end;gap:2px;height:14px;flex:none}
.room .bars i{width:3px;height:4px;border-radius:2px;background:var(--lime);transition:height .1s}
.room-tile:not(.speaking) .bars{display:none}
.room-tile .mutedmark{position:absolute;right:12px;top:12px;width:32px;height:32px;border-radius:50%;background:rgba(8,14,10,.72);display:grid;place-items:center;color:#fff}
.room-tile.me .mutedmark{background:var(--rec)}
.room-tile .handmark{position:absolute;left:12px;top:12px;display:flex;align-items:center;gap:6px;background:var(--hand);color:#0b120e;border-radius:999px;padding:5px 10px 5px 8px;font-size:13px;font-weight:600}
.room-tile .pin{position:absolute;right:12px;top:12px;width:40px;height:40px;border:0;border-radius:50%;background:rgba(8,14,10,.72);display:grid;place-items:center;opacity:0;transition:opacity .15s}
.room-tile:hover .pin,.room-tile .pin:focus-visible,.room-tile.pinned .pin{opacity:1}
.room-tile.pinned .pin{background:var(--lime);color:#0b120e}
.room-tile .mutedmark~.pin{right:52px}
.room-tile .tstate{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:16px;color:#e6ece8;font-size:15px;background:rgba(11,18,14,.72)}
.room-tile .tstate:empty{display:none}
.room-caption{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);width:min(640px,calc(100% - 32px));margin:0;background:rgba(8,14,10,.86);border-radius:12px;padding:10px 16px;font-size:17px;line-height:1.45;text-align:center;overflow-wrap:anywhere;z-index:2}
.room-caption b{color:var(--lime);font-weight:600}
.room-knock{position:absolute;left:50%;top:12px;transform:translateX(-50%);display:flex;align-items:center;gap:10px;background:var(--ink);color:#0b120e;border-radius:14px;padding:10px 10px 10px 16px;box-shadow:0 8px 30px rgba(0,0,0,.45);z-index:3;max-width:calc(100% - 24px)}
.room-knock span{font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.room-knock button{height:38px;border-radius:10px;padding:0 14px;font-weight:600;border:1px solid #c9d0c6;background:transparent;color:#0b120e;white-space:nowrap}
.room-knock button.yes{background:#0b6b45;border-color:#0b6b45;color:#fff}
.room-toast{position:absolute;left:50%;bottom:96px;transform:translateX(-50%);background:var(--ink);color:#0b120e;border-radius:12px;padding:10px 16px;font-weight:600;box-shadow:0 8px 30px rgba(0,0,0,.45);z-index:5;max-width:calc(100% - 32px);text-align:center}

/* The side panel: the chat or the people in the call, one at a time. */
.room-panel{width:340px;flex:none;background:var(--pan);border:1px solid var(--ln);border-radius:16px;display:flex;flex-direction:column;overflow:hidden;min-height:0}
.room-panel-head{display:flex;align-items:center;justify-content:space-between;padding:14px 12px 10px 18px}
.room-panel-head h2{font-size:20px;font-weight:600}
.room-x{width:40px;height:40px;border:0;border-radius:50%;background:transparent;display:grid;place-items:center}
.room-x:hover{background:var(--ctl)}
.room-hint{margin:0 18px 8px;font-size:13px;line-height:1.45;color:var(--mut);background:var(--tile);border-radius:10px;padding:8px 10px}
.room-chat{list-style:none;margin:0;padding:8px 18px;flex:1;min-height:0;display:flex;flex-direction:column;gap:14px;overflow:auto;overflow-wrap:anywhere}
.room-chat:empty::before{content:attr(data-empty);color:var(--mut);font-size:14px}
.room-chat li{display:flex;flex-direction:column;gap:3px}
.room-chat li small{font-size:13px;color:var(--mut)}
.room-chat li small b{color:var(--ink);font-weight:600}
.room-chat li.mine{align-items:flex-end}
.room-chat li.mine span{background:var(--ctl);border-radius:12px 12px 4px 12px;padding:8px 12px}
.room-send{display:flex;gap:8px;padding:12px;border-top:1px solid var(--ln)}
.room-send input{flex:1;min-width:0;height:44px;border:1px solid var(--ln);border-radius:12px;background:var(--st);padding:0 12px;font-size:15px}
.room-send button{width:44px;height:44px;border:0;border-radius:12px;background:var(--lime);color:#0b120e;display:grid;place-items:center;flex:none}
.room-save{margin:0 12px 12px;height:40px;border:1px solid var(--ln);border-radius:10px;background:transparent;font-weight:600}
.room-people{flex:1;min-height:0;overflow:auto;padding:0 10px 10px;display:flex;flex-direction:column;gap:14px}
.room-link{display:flex;align-items:center;gap:8px;margin:0 8px;padding:8px 8px 8px 12px;border:1px solid var(--ln);border-radius:12px;font-size:13px;color:var(--mut)}
.room-link span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.room-link button{height:34px;border:0;border-radius:9px;background:var(--ctl);padding:0 10px;font-size:13px;font-weight:600;white-space:nowrap}
.room-people section{display:flex;flex-direction:column;gap:2px}
.room-people h3{display:flex;align-items:center;justify-content:space-between;gap:8px;font:600 13px "Instrument Sans",system-ui,sans-serif;color:var(--mut);letter-spacing:.02em;padding:6px 8px}
.room-people h3 button{height:30px;border:0;border-radius:8px;background:var(--lime);color:#0b120e;padding:0 10px;font-size:13px;font-weight:600}
.room-person{position:relative;display:flex;align-items:center;gap:10px;padding:6px 8px;border-radius:10px;min-height:48px}
.room-person:hover{background:var(--tile)}
.room-person .av{width:34px;height:34px;border-radius:50%;background:var(--av);display:grid;place-items:center;font:800 13px "Bricolage Grotesque",system-ui,sans-serif;flex:none}
.room-person .who{flex:1;min-width:0;display:flex;flex-direction:column;align-items:stretch;gap:0;font-size:inherit;color:inherit;line-height:1.25}
.room-person .who b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.room-person .who b .you{font-weight:400}
.room-person .who small{font-size:12.5px;color:var(--mut)}
.room-person .who small.hand{color:var(--hand)}
.room-person .who small.speak{color:var(--lime)}
.room-person .who small.bad{color:#ff8f86}
.room-person .sm{width:34px;height:34px;border:0;border-radius:50%;background:transparent;display:grid;place-items:center;flex:none;color:var(--mut)}
.room-person button.sm{color:var(--ink)}
.room-person button.sm:hover{background:var(--ctl)}
.room-person .txt{height:32px;border-radius:9px;padding:0 10px;font-size:13px;font-weight:600;border:1px solid var(--ln);background:transparent;white-space:nowrap}
.room-person .txt.yes{background:var(--lime);border-color:var(--lime);color:#0b120e}
.room-menu{position:absolute;right:8px;top:calc(100% - 4px);z-index:4;min-width:220px;background:var(--ctl);border:1px solid var(--ln);border-radius:12px;padding:6px;display:flex;flex-direction:column;box-shadow:0 12px 30px rgba(0,0,0,.5)}
.room-menu button{text-align:left;border:0;background:transparent;border-radius:8px;padding:9px 12px;font-size:14px;display:flex;align-items:center;gap:10px}
.room-menu button:hover,.room-menu button:focus-visible{background:var(--ctl2)}
.room-menu button.bad{color:#ff8f86}
.room-hostctl{border-top:1px solid var(--ln);padding:12px;display:flex;flex-direction:column;gap:10px}
.room-hostctl>button{height:42px;border:1px solid var(--ln);border-radius:12px;background:transparent;font-weight:600;display:flex;align-items:center;justify-content:center;gap:8px}
.room-switch{display:flex;align-items:center;gap:10px;cursor:pointer}
.room-switch>span{flex:1;display:flex;flex-direction:column;line-height:1.3}
.room-switch small{color:var(--mut);font-size:12.5px}
.room-switch input{appearance:none;width:44px;height:26px;border-radius:999px;background:var(--ctl2);position:relative;flex:none;cursor:pointer;margin:0;transition:background .15s}
.room-switch input::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:var(--ink);transition:transform .15s}
.room-switch input:checked{background:var(--lime)}
.room-switch input:checked::after{transform:translateX(18px);background:#0b120e}

/* The controls bar. */
.room-bar{height:84px;flex:none;padding:0 20px;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:16px;position:relative}
.room-bar-start{display:flex;align-items:center;gap:12px;font-size:15px;min-width:0}
.room-clock{font-weight:600;font-variant-numeric:tabular-nums}
.room-sep{width:1px;height:18px;background:var(--ln);flex:none}
.room-title{color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.room-bar-mid{display:flex;align-items:center;gap:10px}
.room-bar-end{display:flex;align-items:center;justify-content:flex-end;gap:10px}
.room .cb{position:relative;width:48px;height:48px;border:0;border-radius:50%;background:var(--ctl);display:grid;place-items:center;flex:none;transition:background .15s}
.room .cb:hover:not(:disabled){background:var(--ctl2)}
.room .cb.off{background:var(--rec);color:#fff}
.room .cb.off:hover:not(:disabled){background:#e0544e}
.room .cb.on{background:var(--lime);color:#0b120e}
.room .cb.on:hover:not(:disabled){background:#e1fb74}
.room .cb .count{position:absolute;right:-2px;top:-2px;min-width:20px;height:20px;border-radius:999px;background:var(--ink);color:#0b120e;font-size:12px;font-weight:700;display:grid;place-items:center;padding:0 5px}
.room .cb .count.alert{background:var(--hand)}
.room-leave{height:48px;border:0;border-radius:999px;background:var(--rec);color:#fff;padding:0 20px 0 16px;display:flex;align-items:center;gap:8px;font-size:15px;font-weight:600;margin-left:6px;white-space:nowrap}
.room-leave:hover{background:#e0544e}
.room-record{height:48px;border:1px solid var(--ln);border-radius:999px;background:var(--ctl);padding:0 18px 0 14px;display:flex;align-items:center;gap:9px;font-size:15px;font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums}
.room-record::before{content:"";width:12px;height:12px;border-radius:50%;background:var(--rec);flex:none}
.room-record.live{border-color:var(--rec);background:rgba(214,64,58,.14)}
.room-record.live::before{border-radius:3px;width:11px;height:11px}
.room-record small{color:var(--mut);font-size:14px;font-weight:500}
.room-bar .room-menu{right:auto;left:50%;top:auto;bottom:calc(100% + 4px);transform:translateX(-50%)}
.room .phone-only{display:none}

/* Dialogs: record this meeting, end it for everyone, and the guest's camera, microphone and speaker. */
.room-dialog{background:var(--ink);color:#0f1a14;border:0;border-radius:20px;padding:26px;width:min(460px,calc(100vw - 32px));box-shadow:0 24px 60px rgba(0,0,0,.55)}
.room-dialog::backdrop{background:rgba(4,8,6,.6)}
.room-dialog h2{font-size:24px;font-weight:800;margin-bottom:10px}
.room-dialog p{margin:0 0 10px;font-size:15px;line-height:1.55;color:#3d4a42}
.room-dialog ul{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-direction:column;gap:8px;font-size:15px}
.room-dialog li{display:flex;align-items:center;gap:10px}
.room-dialog li svg{color:#0b6b45}
.room-dialog .actions{display:flex;justify-content:flex-end;gap:10px;margin-top:16px;flex-wrap:wrap}
.room-dialog .actions button{height:46px;border-radius:12px;padding:0 18px;font-weight:600;border:1px solid #c9d0c6;background:transparent;color:#0f1a14;display:inline-flex;align-items:center;gap:8px}
.room-dialog .actions button.go{background:#0b6b45;border-color:#0b6b45;color:#fff}
.room-dialog .actions button.bad{background:#c0362c;border-color:#c0362c;color:#fff}
.room-dialog .small{font-size:13px;color:#5c6a62;margin-top:12px}
.room-dialog .folder{display:flex;align-items:center;gap:8px;background:#e9ece3;border-radius:12px;padding:10px 12px;font-size:14px}
.room-dialog label{display:block;font-weight:600;font-size:14px;margin:12px 0 6px}
.room-dialog select{width:100%;height:44px;border-radius:10px;border:1px solid #c9d0c6;background:#fff;color:#0f1a14;padding:0 10px}

/* The recorder page, while the host has the room tucked away to change the recorder's settings. */
.room-back{position:fixed;left:50%;top:12px;transform:translateX(-50%);z-index:59;display:flex;align-items:center;gap:12px;background:#0b120e;color:#eef2ea;border-radius:14px;padding:8px 8px 8px 16px;box-shadow:0 10px 30px rgba(0,0,0,.35);font:600 14px "Instrument Sans",system-ui,sans-serif;max-width:calc(100vw - 24px)}
.room-back .dot{width:9px;height:9px;border-radius:50%;background:#d4f74a;flex:none}
.room-back .dot.rec{background:#d6403a}
.room-back span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.room-back button{height:36px;border:0;border-radius:10px;background:#d4f74a;color:#0b120e;padding:0 14px;font:600 14px "Instrument Sans",system-ui,sans-serif;cursor:pointer;white-space:nowrap}

@media (prefers-reduced-motion:reduce){.room-rec::before{animation:none}.room-tile::after,.bars i{transition:none}}

/* A phone, or a phone or tablet held upright (PHONE_QUERY in room.js): the person talking or a shared screen fills the screen, you in a corner, the others in a strip; the chat and the people
   open over the whole screen, and the less used controls move into More. */
@media (max-width:640px), (orientation:portrait) and (pointer:coarse){
  .room-body{padding:0 8px;gap:0}
  .room-top{display:none}
  .room-head{display:flex;align-items:center;gap:10px;height:60px;flex:none;padding:0 12px 0 16px}
  .room-head>div{flex:1;min-width:0;display:flex;flex-direction:column}
  .room-head b{font-size:15px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .room-head small{font-size:12px;color:var(--mut);font-variant-numeric:tabular-nums}
  .room-head .room-rec{font-size:13px;padding:5px 10px 5px 8px}
  .room-stage,.room-stage.focused,.room-stage[data-count]{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:minmax(0,1fr) 150px;gap:8px}
  .room-stage[data-others="0"],.room-stage[data-others="1"]{grid-template-rows:minmax(0,1fr)}
  .room-stage .room-tile.focus{grid-column:1/-1 !important;grid-row:1 !important;border-radius:18px}
  .room-stage .room-tile:not(.focus):not(.pip){grid-row:2;grid-column:auto}
  .room-stage[data-others="2"] .room-tile:not(.focus):not(.pip){grid-column:1/-1}
  .room-stage .room-tile.pip{position:absolute;right:10px;top:calc(100% - 150px - 8px - 10px - 128px);width:92px;height:128px;border:2px solid var(--st);border-radius:12px;z-index:2}
  .room-stage[data-others="0"] .room-tile.pip,.room-stage[data-others="1"] .room-tile.pip{top:auto;bottom:10px}
  .room-tile.pip figcaption{left:6px;bottom:6px;font-size:11px;padding:2px 6px}
  .room-tile.pip .mutedmark{right:5px;top:5px;width:22px;height:22px}
  .room-tile.pip .avatar{width:44px;height:44px;font-size:16px}
  .room-tile.pip .pin,.room-tile.pip .handmark{display:none}
  .room-tile:not(.focus) .avatar{width:60px;height:60px;font-size:22px}
  .room-tile:not(.focus) figcaption{left:8px;bottom:8px;font-size:12px;padding:3px 7px}
  .room-tile .pin{opacity:1;width:34px;height:34px}
  .room-caption{position:static;transform:none;width:auto;grid-column:1/-1;font-size:15px;text-align:left;background:var(--pan)}
  .room-stage:has(.room-caption:not([hidden])){grid-template-rows:minmax(0,1fr) auto auto}
  .room-panel{position:fixed;inset:0;width:auto;border-radius:0;border:0;z-index:6}
  .room-bar{height:96px;padding:0 16px 8px;display:flex;justify-content:space-between}
  .room-bar-start,.room-bar-end{display:none}
  .room-bar-mid{width:100%;justify-content:space-between;gap:6px}
  .room .desk-only{display:none}
  .room .phone-only{display:flex}
  .room-leave{width:48px;padding:0;justify-content:center;margin:0}
  .room-leave .word{display:none}
  .room-record{padding:0 12px}
  .room-record .word{display:none}
  .room-knock{top:auto;bottom:10px;flex-wrap:wrap;justify-content:flex-end}
  .room-knock span{flex-basis:100%}
  .room-toast{bottom:10px}
}