.voice-rooms-launch {     border: 0px solid #00d6df;
border-radius: 666px;
padding: 7px 10px;
background: transparent;
color: inherit;
cursor: pointer;
font-size: 17px;
}
.app-header:has(.voice-rooms-launch) { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.app-header:has(.voice-rooms-launch) .brand-mini { grid-column:1/-1; grid-row:1; margin:0 43px 0 0; text-align:center; }
.app-header:has(.voice-rooms-launch) .language-button { grid-column:2; grid-row:1; justify-self:end; }
.app-header .voice-rooms-launch { grid-row:2; width:100%; min-width:0; box-sizing:border-box; min-height:40px; display:flex; align-items:center; justify-content:center; }
.app-header .voice-rooms-launch[aria-pressed="true"] { 
color: rgb(255 255 255) !important;
background: #007183 !important;
box-shadow: inset 0px 2px 12px 0px #000, inset 0px -1px 11px 0px #00e7ff;
}
.vr-screen { display:block; width:100%; max-width:680px; padding:0px 10px; }
.vr-toolbar, .vr-actions, .vr-room-stats { 
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
justify-content: flex-start;
}
.vr-toolbar { margin:0px; }
.vr-toolbar input { min-width:0; flex:1; }
.vr-toolbar.vr-room-toolbar { flex-wrap:nowrap; }
.vr-room-toolbar>.vr-room-name { flex:1; min-width:0; margin:0; }
.vr-room-navigation { display:flex; flex-shrink:0; gap:4px; }
.vr-screen .vr-room-toolbar button.saved-back-button { display:flex; align-items:center; justify-content:center; flex:0 0 50px; width:50px; height:50px; padding:0; border:0; border-radius:50%; background:#24262a; }
.vr-room-navigation .vr-icon { width:30px; height:30px; }
.vr-room-actions { margin-top:12px; }
.vr-screen button.vr-room-vote { display:flex; align-items:center; gap:6px; padding:8px 12px; }
.vr-room-vote .vr-icon-heart { width:20px; height:20px; color:#ff4457; }
.vr-room-actions .vr-listeners { color:#9ba0a6; font-size:14px; }
.vr-room-actions .vr-card-menu { position:relative; top:auto; right:auto; margin-left:auto; flex-shrink:0; z-index:4; }
.vr-screen input, .vr-dialog input, .vr-dialog select { padding:10px 17px; border:1px solid #ffffff0d; border-radius:999px; background:#202226; color:inherit; font:inherit; }
.vr-screen button:not(.search-button):not(:where(.vr-reaction-option,.vr-reaction-more,.vr-reaction-chip)), .vr-dialog button:not(.search-button) { cursor:pointer; padding:12px; border:0px solid #555; border-radius:999px; color:inherit; background:#24262a; }
.vr-create-button { display:flex; justify-content:center; width:100%; margin:0 0 18px; cursor:pointer; }
.vr-create-dialog .vr-create-button { margin:0; }
.vr-sort-dialog { padding-top:48px; }
.vr-dialog button.vr-modal-close { padding:0; border:0; background:transparent; }
.vr-search-field { position:relative; width:100%; min-width:0; }
.vr-search-field input { box-sizing:border-box; width:100%; padding-right:52px; }
.vr-screen button .vr-sort-button { position:absolute; right:5px; top:50%; transform:translateY(-50%); display:flex; align-items:center; justify-content:center; width:38px; height:34px; padding:0; border:0; background:transparent; }
.vr-listeners { display:inline-flex; align-items:center; gap:5px; }
.vr-listeners .vr-icon { width:18px; height:18px; }
.vr-screen button:disabled { opacity:.5; cursor:default; }
.vr-screen .saved-back-button { padding:0; background:transparent; border:0; }
.vr-list, .vr-messages { display:flex; flex-direction:column; gap:2px; margin:16px 0; }
.vr-card, .vr-message { border:0px solid #34373c; border-radius:10px; padding:0px; background:#181a1d00; min-width:0; cursor: pointer;}
.vr-room-name { font-size:18px; overflow-wrap:anywhere; }
.vr-card h3.vr-room-name { margin:0px 0px; font-weight:400; }
.vr-card .vr-card-stats { flex-wrap:nowrap; }
.vr-card-stats>span { white-space:nowrap; }
.vr-screen button.vr-card-icon { display:flex; align-items:center; justify-content:center; flex:0 0 28px; width:28px; height:28px; padding:0; border:0; background:transparent; color:#9ba0a6; }
.vr-card-icon .vr-icon { width:20px; height:20px; }
.vr-room-stats, .vr-status, .vr-message-time { color:#9ba0a6; font-size:14px; margin: 0; }
.vr-message { position:relative; cursor:pointer; }
.vr-messages { 
max-width: 296px;
width: 100%;
margin: 16px auto;
gap: 5px;
max-height: 350px;
overflow-y: auto;
scrollbar-color: #4d4d4d82 #00000000;
scrollbar-width: thin;
padding: 0 10px 0 0;
}
.vr-message-player, .vr-recorder-row { 
display: grid;
grid-template-columns: 40px minmax(0, 1fr) 40px;
column-gap: 9px;
align-items: center;
border-radius: 999px;
background: #24262a;
background: linear-gradient(180deg, hsl(222 14% 16% / 1), hsl(222 8% 14% / 1));
box-shadow: inset 0px 1px 0px 0px #b8e2ff1f;
}
.vr-message-gutter { height:40px; display:flex; justify-content:center; align-items:center; }
.vr-player-center { width:176px; min-width:176px; grid-column:2; grid-row:1; padding:0px; }
.vr-player-track { 
position:relative; 
width:176px; 
height:18px;
}
.vr-player-track canvas, .vr-live-wave canvas { 
display:block; 
width:176px; 
height:16px; 
image-rendering:pixelated; 
}
.vr-screen input.vr-player-seek { position:absolute; inset:0; width:100%; height:100%; margin:0; padding:0; border:0; opacity:0; cursor:pointer; }
.vr-player-track:focus-within { 
outline:0px solid #00efff; 
outline-offset:0px; 
}
.vr-player-meta { display:flex; justify-content:space-between; gap:4px; font:12px/18px Arial,sans-serif; color:#555d60; white-space:nowrap; }
.vr-player-date { color:#777; overflow:hidden; text-overflow:ellipsis; text-align:right; }
.vr-player-center.has-progress .vr-player-meta>span:first-child,.vr-preview-player .vr-player-meta>span:first-child { color:#00efff; }
.vr-screen button.vr-player-toggle, .vr-screen .vr-composer button.vr-record-main {
display: flex;
justify-content: center;
align-items: center;
grid-column: 3;
grid-row: 1;
width: 40px;
height: 40px;
min-width: 0;
border: 0;
border-radius: 50%;
padding: 0;
margin: 0;
background: #009e9f;
color: #fff;
max-height: 40px;
}
.vr-icon { 
width: 16px;
height: 16px;
display: block;
stroke-linecap: round;
stroke-linejoin: round;
pointer-events: none;
fill: rgb(0 0 0 / 0%);
stroke: currentColor;
stroke-width: 2px;
}
.vr-player-toggle .vr-icon, .vr-record-main .vr-icon { width:20px; height:20px; }
.vr-icon-play,.vr-icon-stop { fill:currentColor; stroke-width:1; }
.vr-icon-pause { stroke-width:4; stroke-linecap:butt; }
.vr-screen button.vr-message-delete { 
width:30px; 
height:30px; 
display:flex; 
align-items:center; 
justify-content:center; 
border:0; 
padding:0; 
background: #5f0000;
color: #ffc5c5; 
}
.vr-message-footer { 
display: flex;
align-items: center;
gap: 6px;
margin: 4px 4px 5px 5px;
}
.vr-message-reactions { display:flex; flex-wrap:wrap; align-items:center; flex:1; gap:12px; margin:0; }
.vr-screen .vr-message-footer button:not(:where(.vr-reaction-chip)) { 
background: transparent;
color: #fff;
font: 14px / 20px Arial, sans-serif;
min-height: 18px;
padding: 1px 8px;
border-radius: 999px;
border: 1px solid #00000000;
}
.vr-screen .vr-message-footer button:disabled:not(:where(.vr-reaction-chip)) { 
opacity: 1;
cursor: default;
padding: 1px 4px;
border-radius: 999px;
border: 0px solid #474747;
}
.vr-screen .vr-message-footer .vr-message-report { display:flex; align-items:center; gap:4px; margin-left:auto; color:#484d4e; }
.vr-screen .vr-message-footer .vr-reaction-open { color:#484d4e; }
.vr-message-footer .vr-icon { 
width:13px; 
height:13px; 
}
.vr-icon-report { 
fill: rgb(255 233 0);
stroke-width: 3px !important;
stroke: rgb(255 233 0);
}
.vr-icon-report .vr-warning-mark { stroke:#101212; stroke-width:2; fill:none; }
.vr-screen .vr-message-footer .vr-message-report.is-reported { color:#ffd52a; }
.vr-report-count { color:#fff; }
.vr-actions button[aria-pressed="true"] { 
border-color: hsl(0 0% 26% / 1);
}
.vr-reaction-picker { overflow:hidden; }
.vr-reaction-options { 
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0px;
padding: 10px;
}
.vr-screen .vr-reaction-option {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0px;
border: 0px solid transparent;
border-radius: 999px;
font-size: 23px;
line-height: 0;
color: inherit;
background: #24262a00;
cursor: pointer;
width: 34px;
height: 34px;
}
.vr-screen .vr-reaction-option[aria-pressed="true"] { border-color:#424242; }
.vr-screen .vr-reaction-more {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 3px 24px;
border: 1px solid transparent;
border-radius: 999px;
font-size: 24px;
line-height: 20px;
color: inherit;
background: #0053ff99;
cursor: pointer;
}
.vr-screen .vr-reaction-chip {
display:inline-flex; 
align-items:center; 
gap:4px;
padding:1px 4px; 
min-height:18px; 
border:1px solid transparent; 
border-radius:999px;
font:14px / 20px Arial,sans-serif; 
color:#fff; 
background:transparent; 
cursor:pointer;
}
.vr-screen .vr-reaction-chip[aria-pressed="true"] { border-color:#424242; }
.vr-screen .vr-reaction-chip:disabled { opacity:1; cursor:default; }
.vr-reaction-symbol { font-size:18px; }
.vr-reaction-count { font-size:14px; }
.vr-error { 
color: #ff8585;
text-align: center;
margin: 0 0 10px 0;
}
.vr-dialog { width:min(90vw,300px); box-sizing:border-box; color:#fff; background:#181a1d; border:0px solid #ff00f6; border-radius:18px; padding:22px; }
.vr-dialog::backdrop { background:#0009; }
.vr-dialog.vr-confirm-dialog { padding-top:48px; }
.vr-dialog form { display:grid; gap:14px; }
.vr-report-reasons { 
display: flex;
flex-direction: column;
gap: 17px;
min-width: 0;
margin: 20px 0px;
padding: 0;
border: 0;
}
.vr-report-reason-option { display:flex; align-items:flex-start; gap:10px; min-width:0; cursor:pointer; }
.vr-dialog input.vr-report-reason-radio { appearance:auto; flex:0 0 18px; width:18px; height:18px; margin:2px 0 0; padding:0; accent-color:#00cbd4; cursor:pointer; }
.vr-report-reason-label { 
min-width: 0;
line-height: 22px;
white-space: normal;
overflow-wrap: anywhere;
color: #cdcdcd;
}
.vr-dialog h2 { font-size:21px; font-weight:400; margin:0; }
.vr-create-dialog h2 { padding-right:28px; }
.vr-dialog .vr-modal-close { position:absolute; top:8px; right:8px; width:32px; height:32px; padding:0; display:flex; justify-content:center; align-items:center; border:0; background:transparent; font-size:28px; }
.vr-composer { display:block; max-width:361px; width:100%; margin:10px auto 0; }
.vr-record-main img { width:30px; height:30px; }
.vr-screen .vr-composer button.vr-record-cancel { 
grid-column:1; 
grid-row:1; 
display:flex; 
align-items:center; 
justify-content:center; 
width:50px; 
height:50px; 
border:0; 
border-radius:50%; 
padding:0; 
background:#22282b; 
color:#ff555b; 
}
.vr-record-status { margin:4px 22px 0; color:#ff555b; font:14px/18px Arial,sans-serif; }
.vr-screen .vr-composer button.vr-record-main.is-recording { color:#ff0808; background:radial-gradient(circle,#ac0000 0%,#680000 45%,#280000 72%,#160000 100%); }
.vr-record-main.is-recording .vr-icon { width:30px; height:30px; filter:drop-shadow(0 0 8px #ff0000); }
.vr-message-report { font-size:13px; }

/* Compact 320px directory; other roulette screens retain their dimensions. */
.roulette-app:has(.vr-directory:not([hidden])) { max-width:380px; }
.roulette-app:has(.vr-directory:not([hidden])) .app-header { margin:0 0px 14px; }
.roulette-app:has(.vr-directory:not([hidden])) .brand-mini {  }
.roulette-app:has(.vr-directory:not([hidden])) .voice-rooms-launch {
color: rgb(255 255 255);
background: #ff000000;
}
.vr-directory { width:100%; max-width:380px; min-width:0; margin-inline:auto; padding:0 8px; background:radial-gradient(ellipse at 0 12%,#00d7e909,transparent 60%),radial-gradient(ellipse at 100% 85%,#5852e811,transparent 60%); }
.vr-directory>.vr-toolbar:first-child .vr-room-name { margin:4px 0 10px; color:#f5f8ff; font-size:23px; font-weight:700; }
.vr-directory>.vr-toolbar { margin-bottom:12px; display: none; }
.vr-directory .vr-create-button { 
padding: 27px 30px;
border-radius: 999px;
color: #f5fbff;
font-size: 21px;
font-weight: 400;
text-align: center;
background-image: url(./directory-wave.svg), linear-gradient(115deg, #008786, #075776 48%, #007f9e);
background-size: cover;
box-shadow: inset 0 0 21px #00edff90;
width: min-content;
margin: 20px auto;
background: linear-gradient(90deg, #027c82, #065a79, #0185a3);
text-wrap-mode: nowrap;
}
.vr-directory .vr-search-field { display:flex; align-items:center; }
.vr-directory .vr-search-field>.vr-icon { 
position: absolute;
left: 12px;
width: 19px;
height: 19px;
color: #60666b;
pointer-events: none;
}
.vr-directory .vr-search-field input { 
height: 44px;
padding: 10px 12px 10px 40px;
border: 1px solid #60778b6b;
border-radius: 999px;
color: #edf4ff;
background: #202226;
}
.vr-directory .vr-search-field input::placeholder { color:#7b90af; }
.vr-filters { display:flex; flex-wrap:nowrap; gap:6px; align-items:center; padding:3px 0 6px; margin:0 0 8px; min-width:0; max-width:100%; overflow-x:auto; overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.vr-filters::-webkit-scrollbar { display:none; }
.vr-screen .vr-filters button.vr-filter { 
display: flex;
flex: 0 0 auto;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 7px;
padding: 11px 11px;
max-height: none;
white-space: nowrap;
border: 0px solid #303b50;
border-radius: 184px;
color: #747c93;
background: #1f2129;
}
.vr-filter .vr-icon { width:18px; height:18px; flex-shrink:0; }
.vr-screen .vr-filters button[aria-pressed="true"] { 
color: #00ecff;
border-color: #00ecff;
background: #007183 !important;
box-shadow: inset 0px 2px 12px 0px #000, inset 0px -1px 11px 0px #00e7ff;
}
.vr-icon-fire,.vr-icon-spark,.vr-icon-grid,.vr-icon-heart,.vr-icon-thumbDown { fill:currentColor; }
.vr-icon-more { stroke-width:4; }
.vr-directory .vr-list { gap:8px; margin:6px 0 14px; }
.vr-directory .vr-card {
position: relative;
display: grid;
grid-template-columns: 55px minmax(0, 1fr);
align-items: start;
gap: 16px;
padding: 15px;
border: 0px solid #31414f;
background: linear-gradient(180deg, hsl(222 14% 16% / 1), hsl(222 8% 14% / 1));
box-shadow: inset 0px 1px 0px 0px #b8e2ff1f;
}
.vr-room-avatar { 
width: 108px;
height: 108px;
display: flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
border: 0px solid #597089;
border-radius: 20%;
overflow: hidden;
box-sizing: border-box;
color: #78cada;
background: radial-gradient(circle at 30% 15%, #245360, #20253f 70%);
}
.vr-room-avatar img { display:block; width:100%; height:100%; object-fit:cover; }
.vr-room-avatar>.vr-icon { width:52%; height:52%; }
.vr-card>.vr-room-avatar { width:100%; height:auto; aspect-ratio:1; }
.vr-card-content { min-width:0; }
.vr-directory .vr-card-heading { padding-right:24px; }
.vr-directory .vr-card h3.vr-room-name {
margin: 0 0 6px;
font-size: 18px;
color: #f5f6ff;
}
.vr-card-description { 
margin: 0px;
line-height: 1.35;
color: #6f7a83;
overflow-wrap: anywhere;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.vr-card-bottom { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; margin-top:10px; }
.vr-directory .vr-card-stats { 
border: 0px solid #34373c;
border-radius: 10px;
padding: 0px;
background: #181a1d00;
min-width: 0;
cursor: pointer;
}
.vr-stat { display:inline-flex; align-items:center; gap:5px; }
.vr-stat .vr-icon { width:20px; height:23px; }
.vr-stat-mic .vr-icon { 
color: #9ba0a6;
fill: none;
}
.vr-stat-heart .vr-icon { color:#ff7c89; }
.vr-stat-thumbDown .vr-icon { color:#f6c644; }
.vr-screen button.vr-enter { 
display: flex;
align-items: center;
justify-content: center;
gap: 11px;
min-height: 32px;
padding: 4px 12px;
border: 2px solid #00ebff30;
border-radius: 51px;
background: linear-gradient(100deg, #004e60, #007383);
box-shadow: inset 0 0 14px #00e8ee12;
color: #edfaff;
font-size: 13px;
}
.vr-enter .vr-icon { color:#00eeff; width:23px; }
.vr-card-menu { position:absolute; top:13px; right:10px; }
.vr-card-menu summary { 
display: flex;
align-items: center;
justify-content: center;
width: 18px;
height: 20px;
cursor: pointer;
list-style: none;
right: 4px;
position: relative;
fill: currentColor;
stroke: currentColor;
stroke-width: 2px;
}
.vr-card-menu summary::-webkit-details-marker { display:none; }
.vr-card-menu-items {
position: absolute;
right: 0;
top: 24px;
z-index: 4;
min-width: 202px;
padding: 7px;
border: 0px solid #405870;
border-radius: 14px;
background: hsl(220 13% 23% / 1);
box-shadow: 0 12px 30px #0009;
}
.vr-screen .vr-card-menu-items button { 
display: flex;
align-items: center;
gap: 8px;
padding: 9px 10px;
width: 100%;
text-align: left;
background: transparent;
border: 0;
border-radius: 8px;
font-size: 16px;
color: hwb(220 60% 28% / 1);
justify-content: flex-start;
}
.vr-card-menu-items .vr-icon { width:18px; height:18px; flex-shrink:0; }
.vr-card-menu-items button:hover { background:#1f3544; }
.vr-directory .vr-card:has(.vr-card-menu[open]) { z-index:3; }
.vr-avatar-picker { display:flex; align-items:center; justify-content:center; gap:20px; margin:5px 0; }
.vr-dialog button.vr-avatar-arrow { 
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
padding: 0;
border: 0px solid #426371;
border-radius: 50%;
background: #2b2b2b;
color: #ffffff;
}
.vr-avatar-arrow:disabled { opacity:.3; cursor:default; }
.vr-avatar-choice { width:108px; height:108px; }
.vr-dialog textarea.vr-description-input { width:100%; box-sizing:border-box; resize:vertical; min-height:70px; max-height:180px; padding:12px; border:1px solid #405061; border-radius:14px; background:#15212b; color:inherit; font:inherit; }
.vr-location-consent { display:flex; align-items:flex-start; gap:9px; font-size:13px; color:#a7bdd7; }
.vr-location-consent input { margin:3px 0 0; padding:0; flex-shrink:0; accent-color:#00c9d5; }
.vr-directory .vr-card-bottom { gap:6px; margin-top:6px; }
.vr-directory .vr-card-stats { flex-wrap:wrap; gap:14px; min-width:0; font-size:15px; }
.vr-directory .vr-stat { gap:3px; }
.vr-directory .vr-stat .vr-icon { width:22px; height:16px; }
.vr-screen.vr-directory button.vr-enter { }
.vr-directory .vr-enter .vr-icon { width:17px; height:19px; }
.vr-directory .vr-card-menu { top:9px; right:5px; }
.vr-create-dialog form, .vr-create-dialog input, .vr-create-dialog textarea { min-width:0; }
.vr-create-dialog input:not([type="checkbox"]) { width:100%; }