/* All new rules are scoped to the replacement chat and its room container. */
/* Composer menus use viewport coordinates, outside floated/clipped chat columns. */
.chat-composer-menu { position:fixed; z-index:1071; display:flex; flex-direction:column; width:310px; max-width:calc(100vw - 20px); margin:0; border:1px solid #c7d3de; border-radius:12px; background:#f9fbfd; color:#263849; box-shadow:0 8px 30px #102c4830; overflow:hidden; font-size:14px; }
.chat-composer-menu header { display:flex; align-items:center; justify-content:space-between; flex:none; gap:12px; padding:10px 12px; border-bottom:1px solid #e0e7ee; }
.chat-composer-menu h2 { margin:0; font-size:15px; font-weight:600; }
.chat-composer-menu button { font:inherit; color:inherit; cursor:pointer; }
.chat-composer-menu header button { flex:none; width:auto; background:transparent; border:0; padding:0 5px; font-size:24px; line-height:26px; border-radius:5px; }
.chat-composer-menu-body { min-height:0; overflow:auto; overscroll-behavior:contain; padding:7px; }
.chat-menu-action { display:flex; align-items:center; gap:12px; width:100%; border:0; background:transparent; border-radius:7px; padding:11px 12px; text-align:left; }
.chat-composer-menu .glyphicon { font-family:'Randomi Chat Icons'; color:#337ab7; }
.chat-menu-action:hover, .chat-emoji-choice:hover { background:#e7f0f8; }
/* Attachment labels need less width than the emoji grid or settings switches. */
.chat-menu-media { width:200px; }
/* Video rooms inherited a 25 px relative offset from the legacy mobile layout. */
.randomi-modern-chat .videoblock { top:0; }
.chat-menu-devices select { width:100%; margin:5px 0 12px; }
.chat-menu-devices label { font-weight:normal; }
.chat-composer-menu button:focus-visible, .chat-composer-menu input:focus-visible { outline:2px solid #337ab7; outline-offset:-2px; }
.chat-menu-emoji { width:348px; }
.chat-menu-gif { width:310px; }
.chat-composer-menu [type=search] { display:block; width:100%; padding:9px 10px; margin-bottom:8px; border:1px solid #c7d3de; border-radius:7px; background:#fff; color:#263849; font-size:16px; }
.chat-gif-grid { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.chat-gif-choice { padding:0; border:0; border-radius:7px; overflow:hidden; background:#e7f0f8; }
.chat-gif-choice img { display:block; width:100%; height:100px; object-fit:cover; }
.chat-menu-gif small { display:block; text-align:right; margin:6px; color:#52697e; }
.chat-emoji-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(40px,1fr)); gap:3px; }
.chat-emoji-choice { display:flex; justify-content:center; align-items:center; width:100%; height:42px; padding:4px; border:0; border-radius:7px; background:transparent; font-size:25px!important; line-height:1; }
.chat-emoji-choice img { width:28px; height:28px; object-fit:contain; }
.chat-emoji-choice[hidden] { display:none; }
.chat-menu-setting { display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:44px; padding:9px 12px; margin:0; font-weight:normal; cursor:pointer; }
.chat-menu-setting input { appearance:none; flex:none; width:34px; height:20px; margin:0; border:1px solid #97a6b3; border-radius:12px; background:#b6c2ce; cursor:pointer; }
.chat-menu-setting input::before { content:''; display:block; width:14px; height:14px; margin:2px; border-radius:50%; background:#fff; }
.chat-menu-setting input:checked { background:#337ab7; border-color:#337ab7; }
.chat-menu-setting input:checked::before { transform:translateX(14px); }
@font-face { font-family:'Randomi Chat Icons'; src:url('../assets/chat/glyphicons-halflings-regular.woff') format('woff'); font-style:normal; font-weight:normal; font-display:block; }
.randomi-modern-chat .glyphicon, .randomi-chat-frame .glyphicon { font-family:'Randomi Chat Icons'; }
/* Legacy Bootstrap columns float; contain them so the chat has a real height
 * and the following advertisement cannot overlap or include those floats. */
.randomi-modern-chat { display:flow-root; position:relative; }
/* A foreground reconnect must not insert/remove a row above the transcript.
 * Keep its existing visible status inside the panel without changing layout. */
.randomi-modern-chat > #chat-connection-state { position:absolute; top:0; left:0; right:0; z-index:3; margin:0; }
/* At Bootstrap's intermediate breakpoint this wrapper is not floated. Clear
 * the transcript floats so its measured height contains controls only; counting
 * the transcript here caused alternating resize/ResizeObserver feedback. */
.randomi-modern-chat .inputmobileadd { clear:both; }
/* Video rooms have two control blocks. Keep camera controls below cameras
 * and the actual composer below the transcript instead of clearing both rows. */
.randomi-chat-frame .randomi-video-room,
.randomi-chat-frame .randomi-video-room > .row,
.randomi-chat-frame .randomi-video-room > .row > .col-sm-12 { height:100%; min-height:0; }
/* Leave more room for participant names beside their profile pictures. */
.randomi-video-room .roomv { display:grid; grid-template-columns:minmax(0,1fr) minmax(280px,25%) 140px; grid-template-rows:minmax(0,1fr) auto; height:100%; min-height:0; overflow:hidden; }
.randomi-video-room .roomv > .videoblock { grid-column:1; grid-row:1; min-width:0; min-height:0; width:auto; height:100%; }
.randomi-video-room .roomv > .chatblock { grid-column:2; grid-row:1; display:flex; flex-direction:column; min-width:0; min-height:0; width:auto; height:100%; }
.randomi-video-room .roomv > .chatblock2 { grid-column:3; grid-row:1; min-width:0; min-height:0; width:auto; height:100%; }
.randomi-video-room .chatblock > .chat-window { flex:1 1 0; height:auto!important; min-height:0!important; max-height:none!important; }
.randomi-video-room .chatblock2 > .chat-window { height:100%!important; min-height:0; }
.randomi-video-room .chatblock > .gonline { flex:none; }
/* Match other chats: transient notices overlay the transcript's bottom edge.
 * Anchor to the chat column instead of the flex item's static position, which
 * can place it near camera controls. Never resize the grid or composer. */
.randomi-video-room .chatblock > .statusline { bottom:0; left:0; right:0; margin:0; height:auto; min-height:24px; line-height:1.4; overflow-wrap:anywhere; }
.randomi-room-viewport .randomi-video-room .roomv > .inputmobileadd { position:static; left:auto; bottom:auto; width:auto; min-width:0; clear:none; }
.randomi-video-room .roomv > .roomvadd { grid-column:1; grid-row:2; display:flow-root; padding:4px; }
.randomi-video-room .roomv > .inputmobileadd:not(.roomvadd),
.randomi-video-room .roomv > .chat-keyboard-spacer { grid-column:2 / 4; grid-row:2; width:auto; min-width:0; padding:0; }
.randomi-video-room .roomv > .mobileclear { display:none!important; }
.randomi-video-room #videoblock { display:grid; grid-template-columns:repeat(var(--room-video-columns,1),minmax(0,1fr)); grid-template-rows:repeat(var(--room-video-rows,1),minmax(0,1fr)); overflow:auto; }
.randomi-video-room #videoblock > .video { width:auto!important; height:100%!important; min-height:0!important; min-width:0; }
.randomi-video-room #videoblock .place { width:100%!important; height:100%!important; max-height:100%; margin:0; top:0!important; }
.randomi-video-room #videoblock video { width:100%; height:100%; max-height:100%!important; object-fit:contain; }
@media(min-width:768px) {
    /* Widen only the active camera room; ordinary rooms and lists keep their
     * existing container width when the user switches back. */
    .randomi-room-page.randomi-video-room-active #body { width:100%!important; max-width:none!important; }
}
@media(max-width:767px) {
    .randomi-video-room .roomv { grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(80px,30%) auto minmax(0,1fr) auto; }
    .randomi-video-room .roomv > .videoblock { grid-column:1; grid-row:1; }
    .randomi-video-room .roomv > .roomvadd { grid-column:1; grid-row:2; display:flow-root!important; }
    .randomi-video-room .roomv > .chatblock { grid-column:1; grid-row:3; clear:none; }
    .randomi-video-room .roomv > .inputmobileadd:not(.roomvadd),
    .randomi-video-room .roomv > .chat-keyboard-spacer { grid-column:1; grid-row:4; }
    .randomi-video-room.room-video-keyboard .roomv { grid-template-rows:minmax(0,18%) auto minmax(0,1fr) auto; }
}
/* Avoid the site's normal panel bottom margin between chat and advertisement. */
.randomi-room-tabs.panel { margin-bottom:0; }
/* Normalize only the modern room page's outer Bootstrap grid. The site's
 * footer adds its own row and sometimes removes column padding; without this
 * shared gutter convention it is 30px wider than the room tab container. */
.randomi-room-page #body > .paarow { margin-left:-15px; margin-right:-15px; }
.randomi-room-page #body > .paarow > .row { margin-left:0; margin-right:0; }
.randomi-room-page #footer { padding-left:0; padding-right:0; }
#randomi-room-header-ad { display:flow-root; }
#randomi-room-header-ad[hidden] { display:none!important; }
/* Celtra skin headers can be injected outside our normal header ad wrapper.
 * Release their reserved height while a room is active; directory tabs keep
 * the placement and the surrounding background skin remains untouched. */
body.randomi-room-page.randomi-room-chat-active #celtra-skin-container-top { display:none!important; }
@media(max-width:767px) {
    /* Mobile room controls reach the viewport bottom. The complete footer,
     * including its ad reservations and links, returns on the directory tab. */
    .randomi-room-page.randomi-room-chat-active #footer { display:none!important; }
}
/* The legacy body offset includes an extra gap and can be rewritten by site
 * scripts. Use the measured header height only on pages with modern room tabs. */
body.randomi-room-page { padding-top:var(--randomi-room-header-height, 78px)!important; }
.randomi-room-tabs > .room-tab-toolbar { padding:2px 4px; font-size:14px; line-height:1.2; }
.room-tab-toolbar { display:flex; gap:4px; align-items:center; margin-bottom:0; }
.room-tab-toolbar [role=tablist] { display:flex; flex:1; min-width:0; gap:.35rem; overflow-x:auto; }
.room-tab-toolbar [role=tablist] { scrollbar-width:none; }
.room-tab-toolbar [role=tablist]::-webkit-scrollbar { display:none; }
.room-tab-add { flex-shrink:0; padding:2px 6px; min-height:24px; font-size:13px; line-height:18px; }
.room-tab { display:flex; flex-shrink:0; border:1px solid #aaa; border-radius:4px; }
.room-tab button { border:0; background:transparent; color:inherit; padding:2px 6px; min-height:24px; font-size:14px; line-height:18px; }
.room-tab [role=tab] { max-width:200px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.room-tab button:not([role=tab]) { padding:2px 6px; min-width:24px; }
@media(max-width:767px) { .room-tab button, .room-tab-add { min-height:28px; } }
.room-tab [aria-selected=true] { background:#337ab7; color:#fff; }
.room-tab .has-mention { font-weight:bold; }
.room-tab .badge { margin-left:.5rem; }
.room-tab-panels { min-width:0; height:calc(100dvh - 300px); min-height:240px; }
.room-tab-panels.is-room-list { min-height:0; }
.room-tab-frame { display:block; width:100%; height:100%; min-height:0; border:0; }
.room-tab-frame[hidden] { display:none; }
.randomi-chat-frame { padding:0!important; margin:0!important; background:transparent!important; }
/* A room has one scroller: its transcript. Safari focus scrolling must not
 * expose an old, taller iframe document beneath the keyboard. Lists retain
 * their ordinary document flow and full content height. */
html.randomi-room-viewport,
.randomi-room-viewport > body.randomi-chat-frame {
    height:var(--randomi-room-viewport-height, 100%);
    min-height:0;
    overflow:hidden;
    overflow:clip;
}
.randomi-chat-frame .teksti { margin:0; padding:0; }
/* Preserve the active theme's panel colors while restoring sidebar sections. */
.randomi-room-list .room-directory-card { border-width:1px; border-style:solid; }
.randomi-room-list .room-directory-card > .panel-heading { padding:10px 15px; }
.randomi-room-list .room-directory-card > .panel-heading h4 { margin:0; }
/* Match the sidebar instead of mixing a large legacy heading and fixed-height
 * floated tiles. Flex rows stretch each pair while descriptions can wrap freely. */
.randomi-room-list .room-directory-main > .panel-heading h2 { margin:0; font-size:22px; line-height:1.3; }
.randomi-room-list .room-directory-main > .panel-body > .row { display:flex; flex-wrap:wrap; }
.randomi-room-list .room-directory-main > .panel-body > .row > .col-sm-12 { flex:0 0 100%; max-width:100%; }
.randomi-room-list .room-directory-main .flayer0 { display:flex; padding-bottom:15px; }
@media(max-width:767px) { .randomi-room-list .room-directory-main .flayer0 { flex:0 0 100%; max-width:100%; } }
.randomi-room-list .room-directory-main .flayer0.hidden { display:none!important; }
.randomi-room-list .room-directory-main .flayer0 > a { display:flex; width:100%; color:inherit; text-decoration:none; }
.randomi-room-list .room-directory-main .roomblock { width:100%; height:auto!important; min-height:120px; margin-bottom:0; border:1px solid rgba(127,127,127,.35); box-shadow:none; }
/* Keep room management separate from the join link and inside the card bounds. */
.randomi-room-list .room-directory-main .flayer0 > .room-directory-remove { position:absolute!important; top:10px; right:25px; z-index:2!important; }
.randomi-room-list .room-directory-main .room-directory-actions { position:absolute; top:10px; right:25px; z-index:2; display:flex; flex-direction:column; align-items:flex-end; gap:4px; width:110px; }
.randomi-room-list .room-directory-main .room-directory-remove + .room-directory-actions { top:40px; }
.randomi-room-list .room-directory-main .room-directory-actions > br { display:none; }
.randomi-room-list .room-directory-main .room-directory-actions > .btn { float:none!important; max-width:100%; }
.randomi-room-list .room-directory-main .flayer0:has(> .room-directory-remove) .roomblock > .panel-body { padding-right:55px; }
.randomi-room-list .room-directory-main .flayer0:has(> .room-directory-actions > .btn) .roomblock > .panel-body { padding-right:135px; }
.randomi-room-list .room-directory-main .flayer0:has(> .room-directory-actions > .btn) .roomblock { min-height:145px; }
.randomi-room-list .room-directory-main .roomblock:hover { filter:brightness(.97); -webkit-filter:brightness(.97); }
.randomi-room-list .room-directory-main .roomblock h3 { margin:0 0 8px!important; font-size:20px; line-height:1.3; }
.randomi-room-list .room-directory-main .roomblock p { margin:0; line-height:1.5; }
.randomi-room-list .room-directory-main .flayer0 > a:focus-visible { outline:2px solid currentColor; outline-offset:2px; }
.randomi-chat-frame .chatpaneli { margin:0; }
/* The site shell normally absorbs Bootstrap's negative row gutters. A lean
 * frame has no padded container, so keep this outer grid inside its viewport. */
.randomi-chat-frame .teksti > .row { margin-left:0; margin-right:0; }
.randomi-chat-frame .chat-window { overscroll-behavior:contain; }
.randomi-chat-frame .gonline { position:static; border-radius:0; padding:5px 10px; line-height:1.4; overflow-wrap:anywhere; }
.randomi-chat-frame #chat-connection-state { margin:0; padding:6px 10px; }
/* Stable roster rows keep an open action menu and keyboard focus across polls. */
.randomi-modern-chat .userlist .useronlist[data-chat-user] { min-height:38px; padding:3px 6px; cursor:pointer; border-bottom:1px solid rgba(127,127,127,.15); }
.randomi-modern-chat .userlist .useronlist[data-chat-user] > img { float:right; width:32px; height:32px; object-fit:cover; border-radius:50%; margin-left:6px; }
.randomi-modern-chat .userlist .useronlist > .name { display:inline-block; max-width:calc(100% - 42px); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; vertical-align:middle; }
.randomi-modern-chat .userlist .useronlist:focus-visible { outline:2px solid #337ab7; outline-offset:-2px; }
.randomi-modern-chat .userlist .menu { clear:both; padding:4px; border-radius:4px; background:rgba(127,127,127,.12); font-size:13px!important; }
.randomi-modern-chat .userlist .menu a { display:block; padding:5px 7px; line-height:1.4; }
.randomi-modern-chat .userlist .menu br { display:none; }
.chat-mention { background:none; color:inherit; font-weight:bold; padding:0; }
/* Stretch composer buttons with the textarea without measuring each button. */
.randomi-modern-chat .chatinputs .input-group { display:flex; align-items:stretch; }
.randomi-modern-chat .chatinputs .input-group > textarea.messageinput { flex:1 1 0; min-width:0; width:0; float:none; }
.randomi-modern-chat .chatinputs .input-group-btn { display:flex; flex:none; width:auto; }
.randomi-modern-chat .chatinputs .input-group-btn > .btn { display:flex; align-items:center; justify-content:center; }
/* The focused field is never collapsed for measurement. It grows by complete
 * lines, using an offscreen mirror, and scrolls only after the height limit. */
@media(max-width:767px), (hover:none) and (pointer:coarse) {
    .randomi-modern-chat textarea.messageinput { box-sizing:border-box; height:44px; min-height:44px; max-height:160px; padding:10px 12px; font-size:16px!important; line-height:22px; overflow-y:auto; resize:none; }
    .randomi-modern-chat .chatinputs .input-group-btn > .btn { min-height:44px; }
}
.chat-gif-credit { display:flex; flex:none; justify-content:flex-end; padding:5px 10px; border-top:1px solid #e0e7ee; }
.chat-gif-credit img { display:block; height:30px; max-width:100%; object-fit:contain; }
@media(max-width:767px) {
    .randomi-room-chat-active .room-tab-panels { min-height:0; }
    .randomi-room-chat-active #randomi-room-tabs { overflow-anchor:none; }
    /* Anchor the entire growing composer independently of transcript reflow.
     * Its height is still reserved by winresize's controlsHeight measurement. */
    .randomi-room-viewport .chatpaneli { position:relative; height:100%; }
    .randomi-room-viewport .chatpaneli > .row,
    .randomi-room-viewport .chatpaneli > .row > .col-sm-12,
    .randomi-room-viewport .chatpaneli > .row > .col-sm-12 > .panel { height:100%; min-height:0; }
    .randomi-room-viewport .chatpaneli > .row > .col-sm-12 > .panel { position:relative; }
    .randomi-room-viewport .chatpaneli .inputmobileadd { position:absolute; bottom:0; left:0; width:100%; }
}
.randomi-modern-chat .camblock { margin-bottom:0; }
/* Desktop camera controls share the input row without increasing the floated
 * camera column height and pushing that input row down. */
@media(min-width:768px) {
    .randomi-modern-chat .camblock .webcambtn { position:absolute; top:100%; left:15px; width:calc(100% - 30px); margin:0; }
}
.randomi-modern-chat #localVideo video { width:100%; height:100%; object-fit:contain; }
.randomi-modern-chat #remoteVideo video { object-fit:contain; }
@media(max-width:767px) { .randomi-modern-chat .mobilevideoinputs { margin-top:0; margin-bottom:0; } }
.randomi-modern-chat .chat-window { overscroll-behavior:contain; contain:layout paint; }
/* Keep bottom alignment without making every message part of a table layout. */
.randomi-modern-chat .inner-chat { display:flex; flex-direction:column; height:100%; }
.randomi-modern-chat .chatdata { display:block; flex:none; margin-top:auto; }
.randomi-modern-chat .chatdata > li { display:flow-root; }
/* Keep the new-message prompt out of flow. The legacy relative wrapper and
 * inline button leave a baseline-sized gap which changes the column height. */
.randomi-modern-chat .chatblock > .chatwindow-info { position:absolute; bottom:0; left:15px; right:15px; height:0; margin:0; padding:0; z-index:2; background:transparent; pointer-events:none; }
/* A full-width translucent target is easier to tap without taking space from
 * the transcript. Keep it inside the existing zero-height overlay wrapper. */
.randomi-modern-chat .chatwindow-info .infomessage { position:absolute; bottom:0; left:0; right:0; width:100%; max-width:100%; min-height:28px; height:auto; margin:0; padding:4px 10px; border:0; border-radius:0; transform:none; background:rgba(240,240,240,.86); color:#333; font-weight:normal; line-height:1.35; white-space:normal; pointer-events:auto; }
/* Dark themes keep a subdued dark overlay; light themes use the pale default. */
html:is([data-randomi-theme=""],[data-randomi-theme="forest"],[data-randomi-theme="violet"],[data-randomi-theme="orage"],[data-randomi-theme="joulu"]) .randomi-modern-chat .chatwindow-info .infomessage { background:rgba(65,65,65,.82); color:#eee; }
.randomi-modern-chat .chatwindow-info .infomessage:hover { filter:brightness(.95); }
.randomi-modern-chat .chatwindow-info .infomessage:focus-visible { outline:2px solid currentColor; outline-offset:-3px; }
/* The site's mobile grid removes the chat column's desktop gutters. */
@media(max-width:767px) { .randomi-modern-chat .chatblock > .chatwindow-info { left:0; right:0; } }
/* GIFs stay inline inside a bubble's paragraph, including when consecutive
 * messages are merged. Limit both the wrapper and media on narrow screens. */
.randomi-modern-chat .chat-gif { display:inline-block; max-width:100%; vertical-align:middle; }
.randomi-modern-chat .chat-gif-player { display:inline-block; position:relative; width:200px; max-width:100%; text-align:center; vertical-align:middle; }
.randomi-modern-chat .chat-gif-player video,
.randomi-modern-chat .chat-gif-player .giphyimg { width:200px; max-width:100%; max-height:150px; height:auto; object-fit:contain; vertical-align:middle; }
.randomi-modern-chat .chat-gif-brand { position:absolute; left:2px; bottom:2px; width:50px; max-width:100%; }
/* Media controls live outside the transcript and never alter its geometry. */
.chat-media-dialog { position:fixed; top:12px; bottom:auto; left:0; right:0; margin:0 auto; padding:0; width:680px; max-width:calc(100% - 24px); max-height:calc(100dvh - 24px); border:1px solid #aaa; border-radius:8px; background:#f7f7f7; color:#222; box-shadow:0 10px 40px #0005; font-size:14px; }
.chat-media-dialog[open] { display:flex; flex-direction:column; }
.chat-media-dialog [hidden] { display:none!important; }
.chat-media-dialog::backdrop { background:rgba(0,0,0,.45); }
.chat-media-dialog header { display:flex; align-items:center; justify-content:space-between; padding:10px 14px; border-bottom:1px solid #ddd; flex:none; }
.chat-media-dialog h2 { margin:0; font-size:20px; }
.chat-media-dialog button:not(.btn) { border:1px solid #aaa; border-radius:4px; padding:6px 10px; background:#fff; color:#222; }
.chat-media-dialog button[disabled] { opacity:.5; cursor:default; }
.chat-media-dialog .chat-media-body { padding:14px; min-height:0; overflow:auto; }
.chat-media-dialog footer { padding:10px 14px; border-top:1px solid #ddd; flex:none; }
.chat-media-actions, .chat-audio-controls, .chat-draw-tools { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.chat-media-actions { justify-content:flex-end; margin-top:8px; }
.chat-media-status { min-height:20px; line-height:1.4; }
.chat-media-dialog progress { width:100%; height:8px; }
.chat-file-label { display:block; margin:0 0 8px; }
.chat-file-label input { display:block; max-width:100%; margin-top:6px; }
.chat-media-filename { overflow-wrap:anywhere; margin:8px 0; }
.chat-media-preview { text-align:center; margin-top:10px; border:1px dashed #bbb; border-radius:4px; padding:6px; }
.chat-media-preview img, .chat-media-preview video { display:block; max-width:100%; max-height:45dvh; margin:auto; }
.chat-media-dialog canvas { display:block; width:100%; height:auto; background:#fff; border:1px solid #aaa; touch-action:none; margin-top:8px; }
.chat-draw-tools label { display:flex; align-items:center; gap:6px; margin:0; }
.chat-draw-tools [type=range] { width:90px; }
.chat-media-dialog audio { width:100%; margin-top:12px; }
.chat-roster-dialog { width:380px; }
.chat-roster-dialog #iduserlist { height:auto!important; max-height:65dvh; border:0; }
/* Media opens above the attachment button, without a modal backdrop or a
 * full-screen surface. Only the scrolling content shrinks on short viewports. */
.chat-media-popover { width:380px; max-width:calc(100% - 20px); margin:0; overflow:visible; border-radius:10px; z-index:1070; box-shadow:0 4px 20px #0003; }
.chat-media-popover::after { content:''; position:absolute; bottom:-6px; left:var(--chat-media-arrow,18px); width:10px; height:10px; transform:rotate(45deg); background:#f7f7f7; border-right:1px solid #aaa; border-bottom:1px solid #aaa; }
.chat-media-popover header { padding:7px 10px; }
.chat-media-popover h2 { font-size:16px; font-weight:600; }
.chat-media-popover header [data-close] { border:0; background:transparent; font-size:22px; line-height:22px; padding:3px 7px; }
.chat-media-popover .chat-media-body { padding:10px; }
.chat-media-popover footer { padding:8px 10px; }
.chat-media-popover .chat-media-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:6px; }
.chat-media-popover .chat-media-actions button { min-height:40px; font-size:15px; }
.chat-media-popover .chat-media-status { min-height:0; font-size:13px; }
.chat-media-choices { display:grid; grid-template-columns:repeat(auto-fit,minmax(125px,1fr)); gap:10px; }
.chat-media-popover .chat-media-choice { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; min-height:90px; padding:12px 6px; border:1px solid #c7d6e3; border-radius:8px; background:#fff; color:#245b88; }
.chat-media-choice svg { width:28px; height:28px; flex:none; }
.chat-media-choice strong { font-size:16px; font-weight:600; }
.chat-media-choice small { font-size:11px; color:#666; }
.chat-media-popover .chat-media-choice:hover, .chat-media-popover .chat-media-choice:focus-visible { background:#edf6fc; border-color:#337ab7; outline:2px solid #337ab7; outline-offset:1px; }
.chat-media-popover.has-file .chat-media-choice { min-height:38px; padding:6px; flex-direction:row; gap:5px; }
.chat-media-popover.has-file .chat-media-choice svg { width:18px; height:18px; }
.chat-media-popover.has-file .chat-media-choice strong { font-size:13px; }
.chat-media-popover.has-file .chat-media-choice small { display:none; }
.chat-media-popover .chat-media-preview { margin-top:8px; padding:0; border:0; }
.chat-media-popover .chat-media-preview img, .chat-media-popover .chat-media-preview video { max-height:min(165px,28dvh); border-radius:5px; }
/* The upload notice stays at the transcript's top-left, below the separate
 * room topic. Its zero-height anchor does not alter message scroll geometry. */
.chat-file-upload-anchor { position:sticky; top:var(--chat-upload-offset,0px); height:0; z-index:4; pointer-events:none; }
.chat-file-uploads { position:absolute; top:8px; left:8px; width:320px; max-width:calc(100% - 16px); max-height:min(35dvh,var(--chat-upload-height,250px)); overflow:auto; pointer-events:auto; }
.chat-file-uploads:empty { display:none; }
.chat-file-upload { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:5px 10px; margin-bottom:6px; padding:10px; border:1px solid var(--chat-border,#aaa); border-radius:8px; background:var(--chat-surface,#f7f7f7); color:var(--chat-text,#222); box-shadow:0 2px 10px #0003; }
.chat-file-upload strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chat-file-upload span { grid-column:1; font-size:13px; overflow-wrap:anywhere; }
.chat-file-upload progress { grid-column:1; width:100%; }
.chat-file-upload.is-stopped progress { display:none; }
.chat-file-upload button { grid-column:2; grid-row:1 / 4; align-self:center; padding:6px 10px; min-height:40px; border:1px solid var(--chat-border,#aaa); border-radius:5px; background:var(--chat-field,#fff); color:var(--chat-field-text,#222); }
.chat-file-upload.has-thumbnail { grid-template-columns:40px minmax(0,1fr) auto; }
.chat-file-upload.has-thumbnail > .chat-upload-thumbnail { grid-column:1; grid-row:1 / 4; align-self:center; width:40px; height:40px; object-fit:contain; border:1px solid var(--chat-border,#aaa); border-radius:4px; }
.chat-file-upload.has-thumbnail > strong,
.chat-file-upload.has-thumbnail > span,
.chat-file-upload.has-thumbnail > progress { grid-column:2; }
.chat-file-upload.has-thumbnail > button { grid-column:3; }
.chat-media-popover .chat-media-filename { margin:6px 0 0; font-size:12px; color:#555; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chat-media-popover .chat-audio-controls { gap:6px; }
.chat-media-popover .chat-audio-controls button { min-height:42px; }
.chat-media-popover .chat-draw-tools { display:block; position:sticky; top:0; z-index:2; padding:2px 0 6px; background:#f7f7f7; }
.chat-draw-palette, .chat-draw-controls, .chat-draw-sizes { display:flex; align-items:center; gap:5px; flex-wrap:wrap; }
.chat-draw-controls { margin-top:7px; }
.chat-draw-palette { gap:3px; }
.chat-media-popover .chat-draw-palette .chat-draw-color { width:28px; height:28px; min-height:0; padding:0; border:1px solid #aaa; border-radius:50%; }
.chat-draw-palette [type=color] { width:30px; height:30px; padding:2px; border:1px solid #aaa; border-radius:5px; background:#fff; }
.chat-media-popover .chat-draw-sizes button { display:flex; align-items:center; justify-content:center; width:28px; height:28px; padding:3px; }
.chat-draw-sizes span { display:block; width:18px; border-radius:8px; background:#333; }
/* All chat-owned menus inherit the active site's surface and field colors.
 * Drawing canvas/palette colors remain explicit because they are image data. */
.chat-composer-menu, .chat-media-dialog { background:var(--chat-surface,#333); color:var(--chat-text,#eee); border-color:var(--chat-border,#777); }
.chat-composer-menu header, .chat-media-dialog header, .chat-media-dialog footer, .chat-gif-credit { border-color:var(--chat-border,#777); }
.chat-composer-menu [type=search], .chat-composer-menu select,
.chat-media-dialog button:not(.btn), .chat-media-dialog .chat-media-choice,
.chat-media-dialog input:not([type=color]):not([type=checkbox]):not([type=radio]), .chat-media-dialog select {
    background:var(--chat-field,#444); color:var(--chat-field-text,#eee); border-color:var(--chat-field-border,#888);
}
.chat-menu-action:hover, .chat-emoji-choice:hover, .chat-gif-choice,
.chat-media-popover .chat-media-choice:hover, .chat-media-popover .chat-media-choice:focus-visible { background:var(--chat-field,#444); color:var(--chat-field-text,#eee); }
.chat-composer-menu .glyphicon, .chat-menu-gif small, .chat-media-choice small, .chat-media-filename { color:inherit; }
.chat-media-popover::after { background:var(--chat-surface,#333); border-color:var(--chat-border,#777); }
.chat-media-popover .chat-draw-tools { background:var(--chat-surface,#333); }
.chat-roster-dialog #iduserlist { background:transparent; color:inherit; }
.chat-menu-setting input { background:var(--chat-field,#444); border-color:var(--chat-field-border,#888); }
.chat-menu-setting input:checked { background:var(--chat-accent,#337ab7); border-color:var(--chat-accent,#337ab7); }
/* Uniform native radio choices preserve the existing moderation values and
 * custom-duration behavior while making selected and focused options clear. */
.randomi-chat-frame .bootbox .bantimeradiolabel { display:inline-flex; align-items:center; gap:8px; width:calc(25% - 12px); min-height:42px; margin:4px; padding:8px 10px; border:1px solid var(--chat-field-border,#888); border-radius:6px; background:var(--chat-field,#444); color:var(--chat-field-text,#eee); font-weight:normal; vertical-align:top; cursor:pointer; }
.randomi-chat-frame .bootbox .bantimeradiolabel input { flex:none; margin:0; }
.randomi-chat-frame .bootbox .bantimeradiolabel:has(input:checked) { border-color:var(--chat-accent,#337ab7); box-shadow:inset 0 0 0 1px var(--chat-accent,#337ab7); font-weight:bold; }
.randomi-chat-frame .bootbox .bantimeradiolabel:focus-within { outline:2px solid var(--chat-accent,#337ab7); outline-offset:1px; }
@media(max-width:767px) { .randomi-chat-frame .bootbox .bantimeradiolabel { width:calc(33.333% - 12px); height:50px; min-height:50px; padding:6px 4px; gap:4px; font-size:13px; line-height:18px; } }
.chat-draw-tools [aria-pressed=true] { outline:2px solid #337ab7; outline-offset:1px; }
.chat-media-popover .chat-draw-width { gap:4px; font-size:12px; }
.chat-media-popover .chat-draw-width [type=range] { width:64px; }
.chat-media-popover .chat-draw-controls > button { padding:5px 7px; font-size:12px; }
.chat-media-popover canvas { margin-left:auto; margin-right:auto; }

/* Keep the mobile video toggle visible and show unread state until opened. */
.randomi-modern-chat .showchat { position:relative; }
.randomi-modern-chat .showchat.chat-video-unread::after { content:''; position:absolute; top:3px; right:3px; width:10px; height:10px; border:2px solid #fff; border-radius:50%; background:#e33; box-shadow:0 0 0 1px #a00; }

/* Small row gaps keep mobile controls distinct without reserving empty rows. */
@media(max-width:767px) {
    .randomi-modern-chat.chat-mobile-video .chatinputs.mobilevideoinputsvisi { display:none; }
    .randomi-modern-chat.chat-mobile-video .inputmobileadd .webcambtn { position:static; clear:both; width:100%; margin:8px 0 0; }
    .randomi-modern-chat.chat-mobile-video .inputmobileadd .tools { margin-top:8px; }
}

@media(max-width:767px) {
    /* Equal gaps replace legacy spacer cells, including duplicated empty cells. */
    .randomi-modern-chat.chat-mobile-video .webcambtn,
    .randomi-modern-chat.chat-mobile-video .tools > .btn-group { display:flex; gap:8px; }
    .randomi-modern-chat.chat-mobile-video .webcambtn > i,
    .randomi-modern-chat.chat-mobile-video .tools > .btn-group > i { display:none!important; }
    .randomi-modern-chat.chat-mobile-video .webcambtn > .btn,
    .randomi-modern-chat.chat-mobile-video .tools > .btn-group > .btn { flex:1; min-width:0; width:auto; margin-left:0; padding-left:4px; padding-right:4px; }
    /* Blend the native theme surface over the camera, keeping text opaque. */
    .randomi-modern-chat.chat-mobile-video .mobilevideo { background:rgba(34,34,34,.8); background:color-mix(in srgb,var(--chat-surface,#222) 80%,transparent); }
}