:root{font-family:Inter,Aptos,system-ui,sans-serif;color:#fff;background:#000}*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0}body{background:#000;overflow:auto}main{width:100%;min-height:100%;padding:22px;background:transparent}header,.room-head{display:flex;align-items:center;justify-content:space-between;gap:15px}.brand{color:#fff;font-size:29px;font-weight:900;letter-spacing:.22em;text-decoration:none;text-shadow:0 3px 16px #000}.encrypted{padding:9px 13px;border:0;border-radius:30px;background:transparent;text-shadow:0 2px 9px #000;color:#c8ffea;font-size:12px}.welcome{width:min(490px,calc(100% - 24px));margin:12vh auto;padding:34px;border:0;border-radius:22px;background:transparent;color:#fff;text-align:center;text-shadow:0 2px 12px #000;box-shadow:none;backdrop-filter:none}.welcome p{color:#9fe5d2;font-size:11px;font-weight:800;letter-spacing:.16em}.welcome h1{font-size:42px;margin:8px}.welcome label{display:grid;gap:8px;margin:24px 0;text-align:left;font-size:12px;font-weight:700}input{height:48px;padding:0 14px;border:1px solid #ffffff55;border-radius:11px;background:#ffffffee;color:#241b1e;font:inherit}button{min-height:42px;padding:0 15px;border:1px solid #ffffff80;border-radius:10px;background:transparent;color:#fff;font:inherit;font-size:12px;font-weight:750;cursor:pointer;text-shadow:0 2px 8px #000}button:not(:disabled):active{transform:scale(.96);filter:brightness(.8)}@media(prefers-reduced-motion:no-preference){button{transition:transform .08s ease,filter .08s ease}}#join{width:100%;background:transparent;color:white;min-height:120px;padding:14px;line-height:1.15;font-size:clamp(32px,8vw,60px);font-weight:800}.welcome small{display:block;margin-top:14px;color:#d5e2e6;line-height:1.5}.room{min-height:calc(100vh - 90px)}.room-head{margin-top:24px;padding:13px 16px;border:0;border-radius:15px;background:transparent;text-shadow:0 2px 10px #000;backdrop-filter:none}.room-head span{display:block;color:#d1dce0;font-size:11px;margin-top:4px}.videos{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr));align-items:center;gap:0;width:100%;min-height:calc(100dvh - 250px);padding:10px 0;overflow-y:auto}.videos video{display:block;width:100%;height:auto;aspect-ratio:16/9;max-height:80dvh;object-fit:contain;object-position:center;border:0;border-radius:0;background:transparent;box-shadow:none}#notice{position:fixed;right:20px;bottom:20px;max-width:380px;padding:12px 16px;border:0;background:transparent;color:white;display:none;text-shadow:0 2px 8px #000}@media(max-width:600px){main{padding:12px}.brand{font-size:23px}.encrypted{font-size:9px}.welcome{margin-top:8vh;padding:24px}.welcome h1{font-size:34px}.room-head{align-items:flex-start;flex-direction:column}.videos{grid-template-columns:repeat(2,1fr);min-height:60dvh}#join{min-height:90px;font-size:clamp(26px,11vw,44px)}}
.brand{display:inline-flex;align-items:center;gap:10px}.brand img{width:48px;height:48px;object-fit:contain;border:0;background:transparent}.room-head button[aria-pressed="false"]{opacity:.72}.room-head button.recording{color:#ff9b9b;border-color:#ff9b9b}

.videos.fill-video video{object-fit:cover}


/* Embedded video wall: the parent paints the studio, this page owns only live meeting UI. */
/* Reported directly, on Room 03: "Remove the black background for transparent. Only when the video is
   active then gets live". The wall shows the office photo through it until the video is live; the
   name, Join and the meeting's buttons stand below the photo, in the room page. */
html.conference-wall-mode,html.conference-wall-mode body{width:100%;height:100%;background:transparent;overflow:hidden;color-scheme:light}
html.conference-wall-mode main{height:100%;min-height:0;padding:0;display:flex;flex-direction:column;overflow:hidden}
html.conference-wall-mode main>header{display:none}
html.conference-wall-mode main{background:transparent}
html.conference-wall-mode .welcome,html.conference-wall-mode .room-head{display:none!important}
html.conference-wall-mode .room{height:100%;min-height:0;display:flex;flex-direction:column;overflow:hidden}
html.conference-wall-mode .room[hidden]{display:none}
html.conference-wall-mode .videos{flex:1;min-height:0;height:auto;padding:2px;gap:2px;overflow:auto;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));align-items:stretch;align-content:center}
html.conference-wall-mode .videos video{height:100%;max-height:none;min-height:0;object-fit:contain;background:transparent}
html.conference-wall-mode #notice{left:8px;bottom:8px;right:8px;max-width:none;font-size:12px}
@media(max-width:700px){html.conference-wall-mode .videos{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Reported directly: "Amend the messages and the video call so that the called get a calling tone and make
   a futuristic tone plus selector", then, after a test call: "the receiver should have more easy about the
   camera and audio activation and automatically all participants should have message, operative and a
   button for register the AVISphere". */
.incoming{display:flex;align-items:center;justify-content:center;gap:12px;margin:10px 0 2px;font-size:18px;font-weight:800;letter-spacing:.04em}
.incoming-ring{position:relative;width:18px;height:18px;border-radius:50%;background:#8fd3ff;box-shadow:0 0 12px #8fd3ff}
.incoming.ringing .incoming-ring::before,.incoming.ringing .incoming-ring::after{content:"";position:absolute;inset:-6px;border:2px solid #8fd3ff;border-radius:50%;animation:incoming-wave 1.6s ease-out infinite}
.incoming.ringing .incoming-ring::after{animation-delay:.8s}
.incoming:not(.ringing) .incoming-ring{background:#ffffff80;box-shadow:none}
@keyframes incoming-wave{from{transform:scale(.6);opacity:1}to{transform:scale(2.4);opacity:0}}
@media(prefers-reduced-motion:reduce){.incoming.ringing .incoming-ring::before,.incoming.ringing .incoming-ring::after{animation:none}}
.devices,.answer,.tone{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:10px 0}
.devices button[aria-pressed="false"],.room-head #microphone[aria-pressed="false"],.room-head #camera[aria-pressed="false"]{color:#ff9b9b;border-color:#ff9b9b}
.answer #join{min-width:150px}
.answer #decline{color:#ff9b9b;border-color:#ff9b9b}
.tone label{display:flex;align-items:center;gap:8px;margin:0;font-size:12px;font-weight:700}
.tone select{min-height:34px;padding:0 8px;border:1px solid #ffffff80;border-radius:8px;background:#000;color:#fff;font:inherit;font-size:12px}
.tone button{min-height:34px;padding:0 12px}
.register-avisphere{width:min(490px,calc(100% - 24px));margin:12px auto 24px;color:#fff;text-align:center;text-shadow:0 2px 8px #000}
.register-avisphere summary{display:inline-block;padding:9px 15px;border:1px solid #ffffff80;border-radius:10px;font-size:12px;font-weight:750;cursor:pointer;list-style:none}
.register-avisphere summary::-webkit-details-marker{display:none}
.register-avisphere form{display:flex;gap:8px;margin-top:10px}
.register-avisphere input{flex:1;min-width:0;min-height:42px;padding:0 12px;border:1px solid #ffffff80;border-radius:10px;background:#000;color:#fff;font:inherit}
.register-avisphere p{min-height:1em;margin:8px 0 0;font-size:12px;color:#d5e2e6}
html.conference-wall-mode .register-avisphere{display:none}
.call-chat{width:min(720px,100%);margin:10px auto 0;text-shadow:0 2px 8px #000}
.call-chat ol{max-height:180px;margin:0 0 8px;padding:0;overflow-y:auto;list-style:none;font-size:13px;line-height:1.45}
.call-chat li{display:flex;gap:8px;padding:3px 0}
.call-chat li strong{flex:0 0 auto;color:#8fd3ff}
.call-chat li.own strong{color:#d5e2e6}
.call-chat li span{overflow-wrap:anywhere}
.call-chat form{display:flex;gap:8px}
.call-chat input{flex:1;min-width:0;height:42px}
html.conference-wall-mode .call-chat{display:none}
/* A meeting in a window of its own closes by its × (conference.js). */
.own-close{min-height:0;width:40px;height:40px;padding:0;font-size:22px;line-height:1}.own-close[hidden]{display:none}
/* Reported directly, with the design uploaded: "Make in all instances where video or messages involved the design as in
   the enclosed 07 IconMessage zip". The meeting is white as the Messages window: dark text, the design's icons (full
   screen, ×, JOIN, send - message-icons.mjs) plain, the other buttons white with a fine red line, the call's messages
   as the window's own bubbles. Not on the office's wall screen, which shows the photo through it. */
html:not(.conference-wall-mode){color:#201e20;background:#fff}
html:not(.conference-wall-mode) body{background:#fff}
html:not(.conference-wall-mode) :is(.brand,.welcome,.room-head,.call-chat,.register-avisphere,#notice){color:#201e20;text-shadow:none}
html:not(.conference-wall-mode) .encrypted{color:#756f72;text-shadow:none}
html:not(.conference-wall-mode) .welcome p{color:#7f172a}
html:not(.conference-wall-mode) :is(.welcome small,.room-head span,.register-avisphere p){color:#756f72}
html:not(.conference-wall-mode) button{border-color:#7f172ab3;background:#fff;color:#7f172a;text-shadow:none;box-shadow:0 8px 20px -8px #00000059,0 2px 6px -2px #00000014}
html:not(.conference-wall-mode) :is(.devices button[aria-pressed="false"],.room-head #microphone[aria-pressed="false"],.room-head #camera[aria-pressed="false"],.answer #decline,.room-head button.recording){color:#a52b2b;border-color:#a52b2b80}
html:not(.conference-wall-mode) .room-head #leave{color:#a52b2b}
html:not(.conference-wall-mode) .mi-button{min-height:0;border:0;background:transparent;box-shadow:none}
html:not(.conference-wall-mode) input{border:1px solid #655656;border-radius:6px;background:#fff;color:#201e20}
html:not(.conference-wall-mode) .answer{align-items:center}
.head-actions{display:flex;align-items:center;gap:10px}
.own-close,.own-full{width:auto;height:auto;min-height:0;padding:4px}
#join.mi-button,html:not(.conference-wall-mode) #join{width:auto;min-height:0;margin:6px auto;padding:10px 18px;border:0;background:transparent;box-shadow:none}
#join .mi-join{width:135px;height:73.5px}#join:disabled .mi-join{opacity:.35}
html:not(.conference-wall-mode) .incoming-ring{background:#880303;box-shadow:0 0 12px #88030366}
html:not(.conference-wall-mode) .incoming.ringing .incoming-ring::before,html:not(.conference-wall-mode) .incoming.ringing .incoming-ring::after{border-color:#880303}
html:not(.conference-wall-mode) .incoming:not(.ringing) .incoming-ring{background:#d6babe}
html:not(.conference-wall-mode) :is(.tone select,.register-avisphere input){border-color:#655656;background:#fff;color:#201e20}
html:not(.conference-wall-mode) .register-avisphere summary{border-color:#7f172ab3;color:#7f172a}
html:not(.conference-wall-mode) .videos video{background:#111}
html:not(.conference-wall-mode) #notice{border:1px solid #e8e4e5;border-radius:10px;background:#fff;box-shadow:0 12px 34px #00000026}
/* The call's messages: received ones white with a fine grey line, one's own rose on the right, as in Messages. */
.call-chat ol{max-height:220px}
.call-chat li{display:block;width:min(76%,520px);margin:0 0 8px;padding:8px 12px;border:1px solid #e8e4e5;border-radius:14px;background:#fff;color:#201e20;text-shadow:none}
.call-chat li.own{margin-left:auto;border-color:#d6babe;background:#f7edef}
.call-chat li strong,.call-chat li.own strong{display:block;margin-bottom:2px;color:#222;font-size:12px}
.call-chat form{align-items:center}
html:not(.conference-wall-mode) .call-chat input{border:1px solid #655656;border-radius:6px;background:#fff}
/* Reported directly, with the call on the phone: "This is not usable for making calls or Video CC on mobile as it is not
   simply integrated All these putton must be reorganised and between messenger and Video must not be a difference". In
   the call, the screen is the call's, as a phone call: the others fill it, one's own picture small in its corner (alone,
   it fills it), one row of round buttons at the bottom - microphone, camera, the other camera, messages, more, the red end
   - the rest behind "more", and the messages a sheet opened on demand, its bubbles as in Messages. Not on the office's
   wall, whose room page holds the call's buttons. */
.call-icons{position:absolute;width:0;height:0;overflow:hidden}
html.conference-wall-mode :is(.call-top,.call-more){display:none!important}
html:not(.conference-wall-mode) .room:not([hidden]){position:fixed;inset:0;z-index:20;min-height:0;margin:0;background:#0d0d0f;overflow:hidden}
html:not(.conference-wall-mode) .room .videos{position:absolute;inset:0;width:auto;height:auto;min-height:0;margin:0;padding:0;gap:2px;display:grid;grid-template-columns:1fr;grid-auto-rows:minmax(0,1fr);align-items:stretch;overflow:hidden;background:#0d0d0f}
html:not(.conference-wall-mode) .room .videos video{width:100%;height:100%;min-height:0;max-height:none;aspect-ratio:auto!important;object-fit:contain;background:#0d0d0f}
html:not(.conference-wall-mode) .room .videos.fill-video video{object-fit:cover}
html:not(.conference-wall-mode) .room .videos:is([data-others="3"],[data-others="4"],[data-others="5"]){grid-template-columns:1fr 1fr}
@media(orientation:landscape){html:not(.conference-wall-mode) .room .videos[data-others="2"]{grid-template-columns:1fr 1fr}}
html:not(.conference-wall-mode) .room .videos video.self{position:absolute;top:calc(env(safe-area-inset-top) + 54px);right:12px;z-index:3;width:min(27vw,150px);height:auto;aspect-ratio:3/4!important;object-fit:cover;border-radius:14px;box-shadow:0 6px 18px #0009;transform:scaleX(-1)}
html:not(.conference-wall-mode) .room.alone .videos video.self{position:static;width:100%;height:100%;aspect-ratio:auto!important;border-radius:0;box-shadow:none;object-fit:cover}
html:not(.conference-wall-mode) .room .videos video.self:is(.rear,.screen){transform:none}
html:not(.conference-wall-mode) .room .videos video.self.screen{object-fit:contain}
html:not(.conference-wall-mode) .room .call-top{position:absolute;top:0;left:0;right:0;z-index:4;padding:calc(env(safe-area-inset-top) + 14px) 16px 28px;background:linear-gradient(#000000a6,transparent);color:#fff;font-size:13px;text-align:center;text-shadow:0 1px 4px #000;pointer-events:none}
html:not(.conference-wall-mode) .room .call-top span{color:#fff}
html:not(.conference-wall-mode) .room .call-bar{position:absolute;left:0;right:0;bottom:0;z-index:5;margin:0;display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;justify-content:center;gap:clamp(8px,3vw,20px);padding:26px 10px calc(env(safe-area-inset-bottom) + 18px);border:0;border-radius:0;background:linear-gradient(transparent,#000000cc);text-shadow:none}
html:not(.conference-wall-mode) .room:has(.call-chat:not([hidden])) .call-bar{background:#0d0d0f}
html:not(.conference-wall-mode) .room .call-bar .call-round{position:relative;display:grid;place-items:center;flex:none;width:54px;height:54px;min-height:0;padding:0;border:0;border-radius:50%;background:#1d1b1c99;color:#fff;box-shadow:none;opacity:1}
html:not(.conference-wall-mode) .room .call-bar .call-round[hidden]{display:none}
html:not(.conference-wall-mode) .room .call-round svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
html:not(.conference-wall-mode) .room .call-round .off,html:not(.conference-wall-mode) .room .call-round[aria-pressed="false"] .on{display:none}
html:not(.conference-wall-mode) .room .call-round[aria-pressed="false"] .off{display:block}
html:not(.conference-wall-mode) .room .call-bar :is(#microphone,#camera)[aria-pressed="false"],html:not(.conference-wall-mode) .room .call-bar .call-round[aria-expanded="true"]{background:#fff;color:#1d1d1f;opacity:1}
html:not(.conference-wall-mode) .room .call-bar #more svg{stroke-width:3.4}
html:not(.conference-wall-mode) .room .call-bar #leave{width:62px;height:62px;background:#e5372f;color:#fff}
html:not(.conference-wall-mode) .room .call-bar #leave svg{width:30px;height:30px;fill:currentColor;stroke:none}
/* Codex review finding: with both cameras all six buttons show, and at 375px they needed about 408px - the end and the
   microphone were cut off. Below 430px the buttons and the gaps shrink with the screen: 320px still holds all six. */
@media(max-width:430px){html:not(.conference-wall-mode) .room .call-bar{gap:clamp(6px,2.5vw,12px)}html:not(.conference-wall-mode) .room .call-bar .call-round{width:clamp(40px,12.5vw,54px);height:clamp(40px,12.5vw,54px)}html:not(.conference-wall-mode) .room .call-bar #leave{width:clamp(46px,14.5vw,62px);height:clamp(46px,14.5vw,62px)}}
/* Codex review finding: the room covers the page in a call, the header's full screen and the AVISphere registration with
   it - both are in More, and the registration opens as a sheet over the call. */
html:not(.conference-wall-mode) body:has(.room:not([hidden])) .register-avisphere[open]{position:fixed;left:12px;right:12px;top:calc(env(safe-area-inset-top) + 60px);z-index:21;width:auto;max-width:490px;margin:0 auto;padding:14px;border-radius:14px;background:#fff;color:#201e20;box-shadow:0 14px 34px #0009}
html:not(.conference-wall-mode) .room .call-unread{position:absolute;top:-3px;right:-3px;min-width:20px;height:20px;padding:0 5px;border-radius:10px;background:#e5372f;color:#fff;font:700 11px/20px system-ui,sans-serif;text-align:center}
html:not(.conference-wall-mode) .room .call-unread[hidden]{display:none}
html:not(.conference-wall-mode) .room .call-more:not([hidden]){position:absolute;right:12px;bottom:calc(env(safe-area-inset-bottom) + 100px);z-index:6;display:flex;flex-direction:column;gap:2px;min-width:210px;padding:6px;border-radius:14px;background:#232326f2;box-shadow:0 14px 34px #000a}
html:not(.conference-wall-mode) .room .call-more button{min-height:46px;padding:0 14px;border:0;border-radius:10px;background:transparent;color:#fff;box-shadow:none;font-size:15px;font-weight:600;text-align:left}
html:not(.conference-wall-mode) .room .call-more button:hover{background:#ffffff1a}
html:not(.conference-wall-mode) .room .call-more button.recording{color:#ff8a80}
html:not(.conference-wall-mode) .room .call-more button[hidden]{display:none}
html:not(.conference-wall-mode) .room .call-chat:not([hidden]){position:absolute;left:0;right:0;bottom:0;z-index:4;width:auto;max-height:64%;margin:0;padding:14px 12px calc(env(safe-area-inset-bottom) + 122px);display:flex;flex-direction:column;border-radius:18px 18px 0 0;background:#f6f3f4;box-shadow:0 -12px 32px #0007}
html:not(.conference-wall-mode) .room .call-chat ol{flex:1;min-height:60px;max-height:none}
html:not(.conference-wall-mode) main:has(.room:not([hidden])) #notice{z-index:40;top:calc(env(safe-area-inset-top) + 48px);right:12px;bottom:auto;left:12px;margin:0 auto}
/* In Messages, made small beside the conversation (app.js smallCall): the other's video alone, filling it - no buttons. */
html.call-small :is(.call-top,.call-bar,.call-more,.call-chat,.register-avisphere,#notice){display:none!important}
html.call-small .room .videos video.self:not(:only-child){display:none}
html.call-small .room .videos video{object-fit:cover}
.mi{display:inline-block;flex:none;vertical-align:middle;background:center/contain no-repeat}.mi-back{width:32px;height:25.5px;background-image:url(/message-icons/back.webp)}.mi-close{width:23px;height:22.5px;background-image:url(/message-icons/close.webp)}.mi-fullscreen{width:22px;height:22px;background-image:url(/message-icons/fullscreen.webp)}.mi-delete{width:25px;height:30px;background-image:url(/message-icons/delete.webp)}.mi-camera{width:39px;height:30.5px;background-image:url(/message-icons/camera.webp)}.mi-calendar{width:30px;height:29.5px;background-image:url(/message-icons/calendar.webp)}.mi-attach{width:28px;height:32px;background-image:url(/message-icons/attach.webp)}.mi-sticker{width:31px;height:31.5px;background-image:url(/message-icons/sticker.webp)}.mi-send{width:28.5px;height:28px;background-image:url(/message-icons/send.webp)}.mi-forward{width:22px;height:17.5px;background-image:url(/message-icons/forward.webp)}.mi-join{width:45px;height:24.5px;background-image:url(/message-icons/join.webp)}.mi-robot{width:40.5px;height:27px;background-image:url(/message-icons/robot.webp)}.mi-trading{width:48px;height:48px;background-image:url(/message-icons/trading.webp)}.mi-search{width:49px;height:47.5px;background-image:url(/message-icons/search.webp)}.mi-button{display:inline-grid;place-items:center;flex:none;margin:0;padding:4px;border:0;border-radius:6px;background:transparent;box-shadow:none;color:inherit;cursor:pointer;line-height:0}.mi-button:disabled{opacity:.3;cursor:default}.mi-button[hidden]{display:none}.mi-button:focus-visible{outline:2px solid #880303;outline-offset:2px}