:root {
color-scheme: dark;
--background: #101112;
--surface: #292a31;
--surface-soft: #1d1f21;
--text: #f8f8f8;
--muted: #8a8b8d;
--muted-dark: #5e6062;
--blue: hsl(220 34% 48% / 1);
--blue-link: #4c93c9;
--cyan: #00edf2;
--cyan-soft: #75d9e7;
--danger: #cb1f24;
font-family: Arial, Helvetica, sans-serif;
background: var(--background);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body { margin: 0; min-height: 100%; background: var(--background); }

body {
min-width: 320px;
color: var(--text);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}

button, a { -webkit-tap-highlight-color: transparent; cursor: pointer;}
button {     
cursor: pointer;
font-size: 14px;
border-radius: 999px;
padding: 6px 0;
display: flex;
align-items: center;
justify-content: center;
max-height: 50px; 
}
button img {
max-width: 30px;
max-height: 30px;
}

.visually-hidden {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}

.roulette-app {
position: relative;
display: grid;
grid-template-rows: auto minmax(0, 1fr) auto;
min-height: 100vh;
min-height: 100dvh;
padding: 0px;
overflow: hidden;
background: var(--background);
max-width: 380px;
margin: auto;
}

.app-header {
position: relative;
padding: 10px;
display: flex;
gap: 8px;
align-items: center;
background: var(--surface);
margin: 0px 0px 16px 0px;
border-radius: 0px 0px 27px 27px;
}

.brand-mini {
font-size: 21px;
display: block;
margin: auto;
}

.language-button {
width: 35px;
height: 35px;
border: 0;
border-radius: 997px;
color: #bdbdbd;
background: #33353d;
}

.pwa-install-button {
width: auto;
justify-self: center;
min-height: 35px;
padding: 6px 10px;
border: 1px solid var(--cyan);
border-radius: 10px;
color: var(--cyan);
background: transparent;
font-size: 12px;
white-space: nowrap;
}

.language-button:focus-visible,
.language-menu button:focus-visible,
.pwa-install-button:focus-visible,
.age-choice:focus-visible,
.filter-option:focus-visible,
.location-select:focus-visible,
.search-button:focus-visible,
.saved-button:focus-visible,
.microphone-permission-button:focus-visible,
.next-dialog-button:focus-visible,
.rating-button:focus-visible,
.change-search-button:focus-visible,
.round-control:focus-visible,
.primary-outline-button:focus-visible,
.secondary-link:focus-visible {
outline: none;
outline-offset: 4px;
}

.language-menu {
position: absolute;
top: 40px;
right: 0;
display: grid;
grid-template-columns: repeat(1, 58px);
gap: 1px;
padding: 0px;
border: 0px solid #4d5255;
border-radius: 0px;
background: #202224;
box-shadow: 0 12px 30px rgb(0 0 0 / 45%);
width: 200px;
z-index: 1;
}

.language-menu[hidden] { display: none; }
.language-menu button {
border: 0;
border-radius: 0px;
color: var(--text);
background: #292a31;
cursor: pointer;
padding: 20px 10px;
width: inherit;
}
.language-menu button:hover {background: #232527;}

.screen {
grid-row: 2;
margin: 0 auto;
width: 100%;
padding: 0px 20px 20px 20px;
}

.screen[hidden] { display: none; }

.screen-loading, .denied-screen, .ready-screen, .conflict-screen {
display: grid;
place-items: center;
text-align: center;
}

.loading-ring {
width: 94px;
height: 94px;
margin: 0 auto 22px;
border: 4px solid #303234;
border-top-color: var(--cyan);
border-radius: 50%;
animation: roulette-spin 1s linear infinite;
}

@keyframes roulette-spin { to { transform: rotate(360deg); } }

.age-content {
margin: 30px 10px;
font-weight: 400;
}

.age-content h1 {
margin: 0;
font-weight: 400;
letter-spacing: -.02em;
text-align: center;
}

.age-subtitle {
margin: 20px auto 30px;
line-height: 1.3;
display: none;
}

.age-actions {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin: 30px 0;
}

.age-choice {
border: 0;
color: var(--text);
cursor: pointer;
}

.age-choice:not(:disabled):active { transform: scale(.985); }
.age-choice:disabled { cursor: wait; filter: saturate(.35) brightness(.7); }
.age-choice-yes { background: var(--blue); padding: 14px 0;}
.age-choice-no { background: var(--surface); }

.consent-copy {
margin: 20px auto 0;
line-height: 1.25;
text-align: center;
}

.consent-copy a {
color: var(--blue-link);
}

.cookie-copy {
color: var(--muted);
line-height: 1.42;
font-size: 14px;
text-align: center;
}

.antibot-panel {
display: grid;
justify-items: center;
margin-top: 20px;
}

.antibot-widget { max-width: 100%; overflow: hidden; }
.antibot-hint { margin: 12px 0 0; color: var(--muted); font-size: 16px; }
.form-status { min-height: 28px; margin: 20px 0 0; color: #ff8185; font-size: 18px; }

.status-card { width: min(100%, 720px); }
.status-card h1 { margin: 28px 0 18px; font-size: 28px; font-weight: 400; }
.status-card p { color: var(--muted); font-size: 19px; line-height: 1.45; }
.status-icon {
display: grid;
place-items: center;
width: 160px;
height: 160px;
margin: 0 auto;
border: 3px solid var(--danger);
border-radius: 50%;
color: var(--danger);
font-size: 46px;
}

.ready-ring {
display: grid;
place-items: center;
width: min(58vw, 330px);
aspect-ratio: 1;
margin: 0 auto;
border: 4px solid #303234;
border-top-color: var(--cyan);
border-right-color: var(--cyan);
border-radius: 50%;
box-shadow: 0 0 32px rgb(0 237 242 / 10%);
font-size: clamp(28px, 5vw, 44px);
}

.filters-screen {
overflow: auto;
scrollbar-width: thin;
scrollbar-color: var(--muted-dark) transparent;
padding: 0 20px;
}

.filters-form {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 12px;
width: 100%;
}

.filter-group {
min-width: 0;
margin: 0;
padding: 0;
border: 0;
}

.filter-group legend, .location-filter > span {
color: var(--muted);
line-height: 1.1;
font-size: 13px;
}

.filter-options {
display: grid;
gap: 2px;
}

.filter-option {
width: 100%;
border: 0;
color: var(--text);
background: var(--surface);
cursor: pointer;
transition: .15s ease;
}

.filter-option.is-selected { background: var(--blue); }
.filter-option:active { transform: scale(.985); }

.location-filter {
display: block;
min-width: 0;
}

#cityFilter { grid-column: 1; }
#peerCityFilter { grid-column: 2; }

.location-select {
width: 100%;
padding: 8px 13px;
border: 0;
border-radius: 999px;
color: var(--text);
background-color: var(--blue);
font: inherit;
font-size: 14px;
cursor: pointer;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-position: right 4px center;
background-size: 21px;
background-image: url(img/icon-9-enter.png);
background-repeat: no-repeat;
}

.location-select:disabled {
color: var(--text);
cursor: default;
opacity: 1;
}

.online-counter {
grid-column: 1 / -1;
margin: 2px 0 4px;
text-align: center;
font-size: 22px;
line-height: 1.1;
}

.online-counter strong {
color: var(--cyan);
font-weight: 400;
}

.filter-actions {
grid-column: 1 / -1;
display: grid;
gap: 10px;
grid-template-columns: minmax(0, 1fr) 50px;
}

.search-button, .saved-button {
border-radius: 32px;
font-size: 19px;
height: 50px;
border: 1px solid #00c1c1;
color: white;
background: #009b9b;
}

.saved-button {
border-width: 1px;
border-color: #292929;
color: #f000e6;
background: transparent;
}

.search-button:disabled,
.saved-button:disabled {
cursor: default;
opacity: 1;
}

.searching-screen {
align-items: center;
justify-content: center;
}

.searching-content {
display: grid;
place-items: center;
}

.searching-ring {
display: grid;
place-items: center;
width: 200px;
aspect-ratio: 1;
border: 2px solid #303234;
border-top-color: var(--cyan);
border-right-color: var(--cyan);
border-radius: 50%;
box-shadow: 0 0 35px rgb(0 237 242 / 12%);
font-size: 23px;
animation: roulette-search-spin 2.1s linear infinite;
}

.searching-ring span { animation: roulette-search-counterspin 2.1s linear infinite; }
.searching-online { margin: 28px 0 0; }

.searching-status {
margin: 18px 0;
color: var(--muted);
text-align: center;
font-size: 14px;
}

.searching-actions {
display: grid;
gap: 10px;
width: 100%;
margin-top: auto;
}

.find-any-button, .change-search-button {
cursor: pointer;
width: 100%;
min-height: 50px;
border: 1px solid #00c1c1;
color: white;
background: #009b9b;
font-size: 19px;
border-radius: 999px;
}

.change-search-button {
border-color: #383a3c;
display: inline-flex;
align-items: center;
justify-content: center;
border: 0px solid var(--cyan);
border-radius: 999px;
color: #ffffff61;
background: var(--surface);
font-size: 19px;
text-decoration: none;
cursor: pointer;
padding: 12px 20px;
}

.find-any-button:disabled,
.change-search-button:disabled { cursor: wait; opacity: .55; }

@keyframes roulette-search-spin { to { transform: rotate(360deg); } }
@keyframes roulette-search-counterspin { to { transform: rotate(-360deg); } }

.session-screen {
overflow: auto;
}

.session-content {
display: flex;
justify-items: center;
gap: 10px;
flex-direction: column;
align-items: center;
}

.session-timer {
margin: 0;
font-size: 60px;
font-variant-numeric: tabular-nums;
line-height: 1;
color: #3c3d44;
}

.microphone-permission {
display: grid;
justify-items: center;
width: 100%;
padding: 10px;
border: 1px solid #383a3c;
border-radius: 20px;
text-align: center;
background: var(--surface-soft);
}

.microphone-symbol {
display: flex;
width: 80px;
aspect-ratio: 1 / 1;
border: 2px solid var(--cyan);
border-radius: 50%;
font-size: 50px;
align-items: center;
justify-content: center;
}

.microphone-permission h2 {
margin: 2px;
}

.microphone-permission p, .audio-state p, .audio-hint {
color: var(--muted);
line-height: 1.25;
text-align: center;
margin: 0;
font-size: 14px;
}

.microphone-permission-button {
width: 100%;
min-height: 60px;
border: 5px solid var(--cyan);
border-radius: 7px;
color: var(--cyan);
background: transparent;
font-size: 19px;
cursor: pointer;
}

.microphone-permission-button:disabled { cursor: wait; opacity: .55; }

.audio-state {
display: grid;
justify-items: center;
width: 100%;
}

.audio-ring {
display: grid;
place-items: center;
width: min(52vw, 360px);
aspect-ratio: 1;
border: 4px solid #303234;
border-top-color: var(--cyan);
border-right-color: var(--cyan);
border-radius: 50%;
box-shadow: 0 0 35px rgb(0 237 242 / 12%);
font-size: clamp(26px, 4.5vw, 42px);
}

.audio-state.is-connecting .audio-ring { animation: roulette-search-spin 2.1s linear infinite; }
.audio-state.is-connected .audio-ring { box-shadow: 0 0 48px rgb(0 237 242 / 24%); }

.temporary-chat {
width: 100%;
overflow: hidden;
border: 0px solid #333;
border-radius: 20px;
background: hsl(220 6% 11% / 1);
position: relative;
scrollbar-color: #7d7d7da3 #00000000;
scrollbar-width: thin;
}

.chat-messages {
display: flex;
flex-direction: column;
gap: 5px;
min-height: 50px;
max-height: 150px;
overflow-y: auto;
padding: 10px;
}

.chat-message {
max-width: 82%;
margin: 0;
padding: 4px 10px;
border-radius: 7px;
overflow-wrap: anywhere;
white-space: pre-wrap;
}

.chat-message.is-own { 
align-self: flex-end;
color: #ffffff;
background: #292c2e;
}
.chat-message.is-peer { 
align-self: flex-start; 
color: var(--text); 
background: #414c62; 
}
.chat-message a { 
color: inherit; 
text-decoration: 
underline; 
}

.chat-compose {
display: grid;
grid-template-columns: minmax(0, 1fr) 50px;
background: hsl(220 7% 13% / 1);
padding: 0;
position: relative;
}

.chat-compose textarea {
width: 100%;
min-height: 50px;
max-height: 140px;
resize: vertical;
padding: 18px 12px 0px 18px;
border: 0;
outline: 0;
color: var(--text);
background: transparent;
font: inherit;
resize: none;
}

.chat-compose button {
border: 0;
background: #3c3d44;
cursor: pointer;
position: absolute;
right: 5px;
bottom: 5px;
display: flex;
width: 40px;
height: 40px;
border-radius: 999px;
align-items: center;
justify-content: center;
rotate: 0deg;
transition: 0.1s;
}
.chat-compose button img {
width: 25px;
height: 25px;
}
.chat-compose button:hover {
rotate: -90deg;
}
.chat-compose :disabled { cursor: default; opacity: .45; }
.chat-status {
margin: 0;
color: white;
position: absolute;
top: 100px;
right: 50%;
background: #8d1d1d;
transform: translate(50%, 0%);
padding: 0 5px;
}

.next-dialog-button {
width: 100%;
min-height: 50px;
border: 1px solid #00c1c1;
color: white;
background: #009b9b;
font-size: 19px;
border-radius: 999px;
}

.next-dialog-button:disabled { cursor: wait; opacity: .45; }

.reputation-summary {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
flex-direction: column;
}

.reputation-label {
color: var(--text);
font-size: 11px;
text-transform: uppercase;
}

.reputation-bar {
display: flex;
width: 150px;
height: 2px;
background: var(--muted-dark);
}

.reputation-green { 
width: var(--green-ratio, 0%); 
background: #b0ffa8;
box-shadow: 0px 0px 14px 2px #16ff00;
}
.reputation-red {
width: var(--red-ratio, 0%);
background: #ff0009;
box-shadow: 0px 0px 18px 2px #ff0000;
}
.reputation-bar.is-empty .reputation-green,
.reputation-bar.is-empty .reputation-red { width: 0; }

.rating-controls {
display: grid;
gap: 4px;
width: 100%;
grid-template-columns: repeat(5, 1fr);
}

.rating-controls[hidden] { display: none; }

.rating-button {
border: 0px solid #333;
background: hsl(240, 2%, 11%);
padding: 17px 0;
border-radius: 999px;
}

.like-button { 
border: 0px solid #333;
background: hsl(240, 2%, 11%);
padding: 17px 0;
border-radius: 999px;
}
.dislike-button { 
border: 0px solid #333;
background: hsl(240, 2%, 11%);
padding: 17px 0; 
border-radius: 999px;
}
.rating-button:disabled { cursor: default; opacity: .35; }
.rating-button.is-selected { 
outline: 0px solid #ffffff05;
outline-offset: -2px;
background: #16161620;
box-shadow: inset 0px 1px 1px 0px #000000, inset 0px -1px 1px 0px #ffffff10;
filter: brightness(3.5);
}
.rating-status { min-height: 1.5em; margin: 0; color: var(--muted); }

.contact-save-button {
border: 0px solid #333;
background: hsl(240, 2%, 11%);
padding: 17px 0;
border-radius: 999px;
}
.contact-save-button span {display: none;}

.contact-save-button:disabled { cursor: default; opacity: .35; }

.contact-save-notice {
position: absolute;
z-index: 20;
left: 50%;
top: 40%;
transform: translate(-50%, -50%);
width: 230px;
margin: 0px;
padding: 30px;
border: 0px solid #f0e;
box-shadow: 0px 0px 60px 0px #ff00ee;
border-radius: 10px;
color: var(--text);
background: #18181a;
text-align: center;
}

.contact-save-notice:empty { display: none; }

.information-notice-layer {
position: fixed;
inset: 0;
overflow: hidden;
pointer-events: none;
z-index: 60;
}
.information-notice {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: min(360px, calc(100vw - 32px));
box-sizing: border-box;
margin: 0;
padding: 16px 20px;
border: 1px solid rgb(0 237 242 / 35%);
border-radius: 14px;
background: rgb(24 24 26 / 96%);
box-shadow: 0 8px 32px rgb(0 0 0 / 35%);
color: var(--text);
font-size: 15px;
line-height: 1.4;
text-align: center;
overflow-wrap: anywhere;
user-select: none;
pointer-events: none;
}
.information-notice * { pointer-events: none; }
.information-notice.is-entering { animation: information-notice-enter 240ms ease-out both; }
.information-notice.is-leaving { animation: information-notice-exit 240ms ease-in both; }
@keyframes information-notice-enter {
from { opacity: 0; transform: translate(calc(50vw + 100%), -50%); }
to { opacity: 1; transform: translate(-50%, -50%); }
}
@keyframes information-notice-exit {
from { opacity: 1; transform: translate(-50%, -50%); }
to { opacity: 0; transform: translate(calc(-50vw - 100%), -50%); }
}
@media (prefers-reduced-motion: reduce) {
.information-notice.is-entering, .information-notice.is-leaving { animation-duration: 1ms; }
}

.saved-contacts-screen {
align-content: start;
overflow: auto;
}

.saved-contacts-header {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
}

.saved-contacts-header h1 {
margin: 0;
font-size: 16px;
font-weight: 400;
text-align: center;
}

.saved-back-button {
background: transparent;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
border: 0;
}

.saved-heart { color: #f0e; text-align: center; line-height: 0;}
.saved-heart img {width: 30px; height: 30px;}
.saved-contacts-empty, .saved-contacts-status { 
margin: 30px;
color: var(--muted);
text-align: center;
font-size: 19px;
}
.saved-contacts-list { 
display: grid; 
gap: 6px;
}

.profile-privacy-open { 
width: 100%;
margin: 10px auto 0;
padding: 20px 20px;
font-size: 16px;
background: hsl(222 27% 20% / 1);
color: #8796bb;
}
.secondary-button {
width: 100%;
margin: 10px auto 0;
padding: 20px 20px;
font-size: 16px;
background: hsl(222 27% 20% / 1);
color: #8796bb;
border: 0;
}
.secondary-button:hover {
background: hsl(222 27% 30% / 1);
color: #fff;
border: 0;
}
.profile-privacy-screen {
align-content: start;
overflow: auto;
}
.profile-privacy-actions {
display: grid;
gap: 14px;
width: min(100%, 520px);
margin: 36px auto 0;
}
.profile-privacy-actions .secondary-button { 
width: 100%;
margin: -7px auto 0;
padding: 20px 20px;
font-size: 16px;
background: hsl(222 27% 20% / 1);
color: #8796bb;
}
.profile-privacy-actions .secondary-button:hover {
background: hsl(222 27% 30% / 1);
color: #fff;    
}
.profile-backup-status { 
margin: 28px auto 0;
color: hsl(0 50% 70% / 1);
text-align: center;
font-size: 17px;
}

.profile-dialog-card { width: min(calc(100% - 30px), 560px); text-align: left; }
.profile-dialog-card h2 { margin: 0; text-align: center; }
.profile-dialog-card label { display: grid; gap: 7px; }
.profile-dialog-card input,
.profile-dialog-card textarea {
box-sizing: border-box;
width: 100%;
border: 1px solid var(--border);
border-radius: 8px;
padding: 11px;
color: var(--text);
background: #111315;
font: inherit;
}
.recovery-code-value {
overflow-wrap: anywhere;
border: 1px solid var(--border);
border-radius: 8px;
padding: 12px;
font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
user-select: all;
}
.restore-replace-warning { color: #ffcf70; }
.restore-confirm-field { grid-template-columns: auto 1fr !important; align-items: start; }
.restore-confirm-field input { width: auto; }

.saved-contact-card {
display: flex;
gap: 0px;
justify-content: space-between;
align-items: center;
padding: 10px;
background: hsl(222 10% 15% / 1);
border-radius: 12px;
}

.saved-contact-remove {
border: 0;
color: hwb(0 50% 50% / 1);
background: #00000000;
font-size: 28px;
padding: 0px;
height: 30px;
width: 30px;
margin: 0 10px 0 0;
font-family: serif;
font-weight: 100;
}
.saved-contact-remove:hover {color: #fff;}

.saved-contact-identity { 
/* width: 100%;  */
}
.saved-contact-name {
width: 100%;
border: 0;
border-bottom: 2px dotted #6177ad;
color: #fff;
cursor: pointer;
padding: 8px 0;
background: #00000000;
}
.saved-contact-name::placeholder { color: #fff; opacity: 1; }
.saved-contact-name::placeholder:focus { color: #000;}
.saved-contact-name:focus { 
background: hsl(220 32% 56% / 1);
outline: none;
font-size: 18px;
padding: 9px;
opacity: 1;
border-radius: 7px;
border: 0;
box-shadow: inset 0px 0px 9px 0px #00061291;
}
.saved-contact-unavailable { margin: 0;}
.saved-contact-reputation { width: 100%; }
.saved-contact-reputation-group {
display: flex;
flex-flow: column wrap;
align-items: center;
justify-content: center;
margin: 0 20px;
}
.saved-contact-actions { 
position: relative;
display: grid;
place-items: center;
}
.saved-contact-call {
border: 0;
background: hsl(115 68% 38% / 1);
rotate: 0deg;
border-radius: 999px;
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
}
.saved-contact-call img {
width: 23px;
height: 23px;
rotate: 135deg;
}
.saved-contact-call:disabled { color: #777; cursor: not-allowed; }
.saved-contact-missed {
position: absolute;
right: 0;
bottom: -6px;
min-width: 0px;
font-size: 12px;
text-align: center;
pointer-events: none;
background: var(--danger);
color: white;
padding: 2px 6px;
border-radius: 999px;
FONT-WEIGHT: 600;
}
.saved-contact-missed[hidden] { display: none; }
.saved-contact-card.is-unavailable .saved-contact-name, .saved-contact-card.is-unavailable .saved-contact-reputation { opacity: .55; }

.audio-controls {
display: flex;
gap: 10px;
}

.peer-microphone-muted {
display: flex;
align-items: center;
font-size: 14px;
color: #ff6969;
background: #451616;
text-align: center;
border-radius: 999px;
padding: 2px 17px 2px 6px;
gap: 7px;
}
.peer-microphone-muted img {
width: 30px;
height: 30px;
}

.peer-microphone-muted[hidden] { display: none; }

.round-control {
min-width: 0;
aspect-ratio: 1 / 1;
border: 0;
border-radius: 50%;
color: var(--text);
background: hsl(230 6% 25% / 1);
font-size: 30px;
padding: 30px;
cursor: pointer;
}

.round-control:disabled { cursor: default; opacity: .36; }
.round-control.is-muted { color: var(--danger); }
.disabled-control { color: var(--muted); }
.hangup-control:not(:disabled) { background: var(--danger); }
.session-safety, .post-call-safety {
position: relative;
}
.session-safety > .round-control, .post-call-safety > .round-control { margin: 0;}
.safety-control:not(:disabled) { 
color: #333;
background: #1c1c1c;
border: 1px solid;
width: stretch;
border-radius: 13px;
padding: unset;
}
.safety-control[aria-expanded="true"] { color: var(--danger); background: #ff43494f;}
.safety-menu {
display: flex;
gap: 40px;
height: 50px;
border-radius: 3px;
background: var(--danger);
position: absolute;
bottom: 63px;
right: 108%;
transform: translate(50%, 0%);
width: 300px;
justify-content: center;
align-items: center;
}
.safety-menu[hidden] { display: none; }
.safety-menu::before {
content: '';
position: absolute;
top: 100%;
left: 63%;
transform: translateX(-50%);
width: 0;
height: 0;
border-style: solid;
border-width: 10px 10px 0 10px;
border-color: var(--danger) transparent transparent transparent;
}
.safety-menu button {
border: 0;
color: var(--text);
background: transparent;
font-size: 19px;
}
.safety-menu .block-action:not(:disabled) { cursor: pointer; }
.safety-menu .report-action:disabled { cursor: not-allowed; opacity: .45; }
.safety-status { min-height: 1.5em; margin: 0; color: var(--muted); }
.audio-hint { min-height: 2.7em; margin: 0; }
#remoteAudio { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.post-call-screen {
overflow: auto;
}

.personal-call-modal {
position: fixed;
inset: 0;
z-index: 50;
display: grid;
place-items: center;
text-align: center;
width: 100%;
min-height: 100vh;
min-height: 100dvh;
padding: max(10px, env(safe-area-inset-top, 0px)) max(10px, env(safe-area-inset-right, 0px)) max(10px, env(safe-area-inset-bottom, 0px)) max(10px, env(safe-area-inset-left, 0px));
background: rgb(0 0 0 / 65%);
backdrop-filter: blur(10px);
}

.personal-call-modal[hidden] { display: none; }

.personal-call-card {
display: grid;
justify-items: center;
gap: 10px;
padding:30px;
width: 310px;
border-radius: 16px;
background: var(--background);
box-shadow: 0 18px 50px rgb(0 0 0 / 55%);
}

.personal-call-symbol {
display: grid;
place-items: center;
width: 110px;
aspect-ratio: 1;
border: 0px solid #ff00f6;
border-radius: 50%;
color: var(--cyan);
background: #1a1a1a;
}


#reportReasonSelect {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 100%;
max-width: 400px;
padding: 12px 40px 12px 16px;
font-size: 15px;
font-family: sans-serif;
border-radius: 8px;
background-color: #242426;
color: #ffffff;
border: 1px solid #3a3a3c;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
cursor: pointer;
background-image: url("img/icon-9-enter.png");
background-repeat: no-repeat;
background-position: right 16px center;
background-size: 16px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
#reportReasonSelect:hover {
border-color: #48484a;
}
#reportReasonSelect:focus {
outline: none;
border-color: #007aff;
box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.2);
}
#reportReasonSelect option {
background-color: #242426;
color: #ffffff;
padding: 12px;
max-width: 100%;
}




.personal-call-name, .personal-call-countdown { 
margin: 0; 
}
.personal-call-name { 
font-size: 19px;
text-align: center;
margin: 0 0 20px 0;
}
.personal-call-reputation { justify-content: center; }
.personal-call-countdown { min-height: 1.5em; color: var(--muted); }
.personal-call-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; width: 100%; }
.personal-call-actions.is-single { grid-template-columns: 1fr; }
.personal-call-actions button { 
margin: 0; 
}
.personal-call-accept {
border: 0;
border-radius: 10px;
color: #fff;
background: teal;
font-size: 19px;
cursor: pointer;
}
.danger-button {
border: 0;
border-radius: 10px;
color: var(--text);
background: var(--danger);
font-size: 19px;
cursor: pointer;
}

.post-call-content {
display: grid;
justify-items: center;
align-content: start;
gap: 10px;
min-height: 100%;
margin: 0 auto;
text-align: center;
}

.goodbye-ring {
display: grid;
place-items: center;
width: min(54vw, 180px);
aspect-ratio: 1;
margin: 0;
border: 1px solid #444;
border-radius: 50%;
font-size: 22px;
}

.post-call-content h1 { margin: 0; font-weight: 400; font-size: 28px;}
.post-call-status { height: 30px; margin: 0; color: var(--muted); font-size: 12px;}
.post-call-rating-controls { margin-top: 4px; }
.post-call-actions { display: grid; gap: 10px; width: 100%; margin-top: auto; }
.post-call-actions .change-search-button { order: 2; }

.secondary-link, .primary-outline-button {
display: inline-flex;
align-items: center;
justify-content: center;
border: 0px solid var(--cyan);
border-radius: 10px;
color: #fff;
background: #353535;
font-size: 17px;
text-decoration: none;
cursor: pointer;
padding: 12px 20px;
}

.advertising {
display: grid;
margin: 20px 0 0 0;
place-items: center;
height: calc(90px + env(safe-area-inset-bottom, 0px));
padding: 0 0 env(safe-area-inset-bottom, 0px);
color: rgb(255 255 255 / 65%);
background: #37b8cc;
font-size: 25px;
font-weight: 300;
}
.rating-trait-pair { display: flex; gap: 1rem; justify-content: space-between; margin: 0.75rem 0; }
.rating-trait-pair label { display: flex; align-items: center; gap: 0.4rem; }
.self-reputation,
.self-reputation-title {
font-size: 26px;
display: block;
margin: 20px auto;
text-align: center;
font-weight: 200;
}
.self-reputation-content {
display: flex;
flex-flow: column wrap;
align-items: center;
}
.reputation-traits {
display: flex;
font-size: 12px;
color: #aaa;
margin: 6px 0;
height: 68px;
flex-direction: column;
overflow: hidden;
}
.reputation-trait span {color: #fff;}
.reputation-trait {
display: grid;
grid-template-columns: 3fr 1fr;
text-align: left;
gap: 10px;
}
.reputation-trait-value { white-space: nowrap; }