/* ============================================================================
   app.css — the application shells: random video/text chat, private rooms,
   the room forms, sign-in, age-check and the admin dashboard.
   ============================================================================

   Loaded AFTER css/theme.css and inherits its tokens (--bg / --fg / --muted /
   --faint / --line / --line-strong / --surface / --radius). It must never
   redefine a token and never introduce a hue, gradient, shadow or radius —
   see the header of theme.css for the full rule list.

   The chat shells used to hard-code their own dark palette and therefore
   ignored the user's theme choice. They now follow it like every
   other page: the video stage stays black because video is black, but every
   chrome surface is --bg/--fg.
   ========================================================================== */

/* ---------- Shared app shell ---------- */
.app-shell {
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
}
.app-container { display: flex; height: 100vh; height: 100dvh; }

/* Text-only shell (random-text-chat.html): no video stage, so the container
   is a single centred column instead of the video|chat row. Without this the
   header, status, message list and composer lay out side by side. */
.app-container-text {
    flex-direction: column;
    max-width: 720px;
    margin: 0 auto;
    border-left: var(--hairline);
    border-right: var(--hairline);
}
.app-container-text .chat-panel { width: 100%; flex: 1; min-height: 0; }
/* Here the header/status/messages/composer are direct children of the
   container — there is no .chat-panel wrapper as in the video shell. */
.app-container-text > .chat-header { justify-content: space-between; }
.app-container-text > .chat-messages { min-height: 0; }

/* ---------- Video panel ---------- */
.video-panel {
    flex: 1;
    position: relative;
    background: #000;      /* the video stage is black in both themes */
    min-width: 0;
    border-right: var(--hairline);
}
.video-area { position: relative; width: 100%; height: 100%; }

#remoteVideo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #000;
    transition: filter 0.45s ease-out;
}
/* Privacy buffer: partner video is blurred for ~2 s after a new stream
   attaches so the user can react before seeing explicit content.
   webrtc.js adds the class on srcObject change and strips it on a timer. */
#remoteVideo.partner-blur { filter: blur(28px); }

#localVideo {
    position: absolute;
    bottom: 80px;
    right: 16px;
    width: 160px;
    height: 120px;
    object-fit: cover;
    border-radius: var(--radius);
    border: 1px solid rgba(255, 255, 255, 0.55);
    z-index: 10;
    background: #000;
    cursor: pointer;
}
.local-video-wrap {
    position: absolute;
    bottom: 80px;
    right: 16px;
    width: 160px;
    height: 120px;
    z-index: 10;
}
.local-video-wrap #localVideo {
    position: relative;
    bottom: auto;
    right: auto;
    width: 100%;
    height: 100%;
}
.flip-icon {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 26px;
    height: 26px;
    background: #000;
    border: 1px solid rgba(255, 255, 255, 0.55);
    color: #fff;
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s;
    z-index: 11;
}
.local-video-wrap:hover .flip-icon, .flip-icon.visible { opacity: 1; }
.flip-icon svg { width: 15px; height: 15px; }
.flip-icon.flipping svg { animation: flipSpin 0.4s ease; }
@keyframes flipSpin { 0% { transform: rotate(0deg); } 100% { transform: rotate(180deg); } }

/* ---------- Status overlay ---------- */
.status-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
    color: #fff;
    z-index: 5;
    transition: opacity 0.3s;
}
.status-overlay.hidden { opacity: 0; pointer-events: none; }
.status-content { text-align: center; padding: 20px; }
.status-text { font-size: 19px; font-weight: 600; margin-bottom: 6px; }
.status-subtext { font-size: 13px; color: rgba(255, 255, 255, 0.6); }

/* Search animation: three concentric rings, monochrome, no gradient fill. */
.search-anim { width: 120px; height: 120px; margin: 0 auto 18px; display: block; stroke: currentColor; fill: none; }
.search-anim .search-ring {
    transform-origin: 100px 100px;
    animation: search-ring-expand 3s ease-out infinite;
    opacity: 0;
}
.search-anim .search-ring-2 { animation-delay: 1s; }
.search-anim .search-ring-3 { animation-delay: 2s; }
@keyframes search-ring-expand {
    0% { transform: scale(0.3); opacity: 0.9; }
    100% { transform: scale(2.6); opacity: 0; }
}
.search-anim .search-core { transform-origin: 100px 100px; animation: search-core-pulse 1.8s ease-in-out infinite; }
@keyframes search-core-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.15); opacity: 0.7; }
}
.status-spinner {
    width: 32px;
    height: 32px;
    border: 2px solid rgba(255, 255, 255, 0.25);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 12px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Video controls ---------- */
.video-controls {
    position: absolute;
    bottom: 36px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 14px;
    background: #000;
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 9px 16px 7px;
    border-radius: var(--radius);
    z-index: 10;
}
.ctrl-wrap { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.ctrl-label { font-size: 10px; color: rgba(255, 255, 255, 0.65); white-space: nowrap; }
.ctrl-btn {
    width: 44px;
    height: 44px;
    border-radius: var(--radius);
    border: 1px solid rgba(255, 255, 255, 0.4);
    background: #000;
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s;
}
.ctrl-btn:hover, .ctrl-btn.active { background: #fff; color: #000; }
.ctrl-btn.end-btn { border-width: 2px; }
.ctrl-btn.end-btn:hover { background: #fff; color: #000; }

/* ---------- Online indicator ----------
   The dot is the one element on the site that carries a hue (--online in
   theme.css) — a live-user signal reads as green or not at all. */
.online-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--online);
    animation: pulse 2s infinite;
    flex-shrink: 0;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.online-count { font-size: 13px; color: var(--muted); }
.online-count-overlay {
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    background: #000;
    border: 1px solid rgba(255, 255, 255, 0.25);
    z-index: 9;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.85);
    pointer-events: none;
    white-space: nowrap;
}
.online-count-overlay .online-dot { background: #4ade80; }
.online-count-overlay .online-count { font-size: 12px; color: inherit; }
.online-count-overlay .online-hint {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.6);
    margin-left: 6px;
    padding-left: 6px;
    border-left: 1px solid rgba(255, 255, 255, 0.25);
}
.online-count-overlay .online-hint:empty { display: none; }

/* ---------- Chat panel ---------- */
.chat-panel {
    width: 380px;
    display: flex;
    flex-direction: column;
    background: var(--bg);
    color: var(--fg);
    position: relative;
    overflow: hidden;
}
.chat-header {
    padding: 10px 14px;
    border-bottom: var(--hairline);
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--bg);
    gap: 10px;
    flex-wrap: wrap;
}
.chat-header h1 {
    font-size: 15px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}
.chat-header-row { display: flex; justify-content: space-between; align-items: center; width: 100%; }
.header-controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.lang-select {
    background: var(--bg);
    border: var(--hairline);
    border-radius: var(--radius);
    color: var(--fg);
    padding: 6px 8px;
    font-size: 12px;
    cursor: pointer;
    max-width: 150px;
}

/* ---------- Messages ---------- */
.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    scroll-behavior: smooth;
}
.chat-bottom-fixed { flex-shrink: 0; background: var(--bg); z-index: 20; border-top: var(--hairline); }

.msg {
    max-width: 85%;
    padding: 9px 13px;
    border-radius: var(--radius);
    border: var(--hairline);
    font-size: 14px;
    line-height: 1.5;
    word-wrap: break-word;
    overflow-wrap: anywhere;
    animation: fadeIn 0.2s ease;
}
@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
/* Own vs partner is carried by side + fill, not by colour. */
.msg-self { align-self: flex-end; background: var(--fg); color: var(--bg); border-color: var(--fg); }
.msg-other { align-self: flex-start; background: var(--bg); color: var(--fg); }
.msg-system {
    align-self: center;
    text-align: center;
    font-size: 12px;
    color: var(--faint);
    padding: 3px 10px;
    border: 0;
    max-width: 100%;
}
.msg-translation {
    font-size: 12px;
    opacity: 0.72;
    margin-top: 5px;
    padding-top: 5px;
    border-top: 1px solid currentColor;
}
.typing-indicator {
    padding: 4px 14px;
    font-size: 12px;
    color: var(--faint);
    font-style: italic;
    opacity: 0;
    transition: opacity 0.2s;
}
.typing-indicator.show { opacity: 1; }

/* ---------- Auto-message bar ---------- */
.auto-msg-bar {
    padding: 7px 14px;
    border-top: var(--hairline);
    display: flex;
    gap: 8px;
    align-items: center;
}
.auto-msg-toggle { position: relative; width: 34px; height: 18px; flex-shrink: 0; }
.auto-msg-toggle input { opacity: 0; width: 0; height: 0; }
.auto-msg-slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background: var(--bg);
    border: 1px solid var(--line-strong);
    transition: background 0.2s;
}
.auto-msg-slider::before {
    content: "";
    position: absolute;
    height: 12px;
    width: 12px;
    left: 2px;
    top: 2px;
    background: var(--fg);
    transition: transform 0.2s, background 0.2s;
}
.auto-msg-toggle input:checked + .auto-msg-slider { background: var(--fg); border-color: var(--fg); }
.auto-msg-toggle input:checked + .auto-msg-slider::before { transform: translateX(16px); background: var(--bg); }
.auto-msg-toggle input:focus-visible + .auto-msg-slider { outline: 2px solid var(--fg); outline-offset: 2px; }
.auto-msg-label { font-size: 11px; color: var(--faint); white-space: nowrap; flex-shrink: 0; }
.auto-msg-input {
    flex: 1;
    background: var(--bg);
    border: var(--hairline);
    border-radius: var(--radius);
    color: var(--fg);
    padding: 6px 9px;
    font-size: 16px; /* 16px minimum prevents iOS Safari auto-zoom on focus */
    outline: none;
    min-width: 0;
}
.auto-msg-input:focus { border-color: var(--fg); }

/* ---------- Composer ---------- */
.chat-input-area { padding: 10px 14px; border-top: var(--hairline); display: flex; gap: 8px; align-items: center; }
.chat-input {
    flex: 1;
    background: var(--bg);
    border: var(--hairline);
    border-radius: var(--radius);
    color: var(--fg);
    padding: 11px 14px;
    font-size: 16px; /* 16px minimum prevents iOS Safari auto-zoom on focus */
    outline: none;
    min-width: 0;
}
.chat-input:focus { border-color: var(--fg); }
.chat-input::placeholder { color: var(--faint); }

.send-btn, .next-btn, .end-btn {
    width: 42px;
    height: 42px;
    border-radius: var(--radius);
    border: 1px solid var(--fg);
    background: var(--fg);
    color: var(--bg);
    font-size: 17px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s;
    flex-shrink: 0;
}
.send-btn:hover, .next-btn:hover, .end-btn:hover { background: var(--bg); color: var(--fg); }
.next-btn, .end-btn { background: var(--bg); color: var(--fg); }
.next-btn:hover, .end-btn:hover { background: var(--fg); color: var(--bg); }
.send-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.send-btn:disabled:hover { background: var(--fg); color: var(--bg); }
.action-row { display: flex; gap: 8px; justify-content: center; padding: 8px 14px 12px; border-top: var(--hairline); }
.action-row .ctrl-wrap { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.action-row .ctrl-label { color: var(--faint); }

/* ---------- Connection bar ---------- */
.connection-bar { padding: 6px 14px; font-size: 12px; text-align: center; display: none; }
.connection-bar.disconnected, .connection-bar.reconnecting {
    display: block;
    background: var(--fg);
    color: var(--bg);
}
.connection-bar.reconnecting { background: var(--bg); color: var(--fg); border-bottom: 1px solid var(--fg); }

/* ---------- Text-mode extras ---------- */
.chat-status {
    position: relative;
    padding: 22px 16px;
    text-align: center;
    border-bottom: var(--hairline);
    flex-shrink: 0;
}
.chat-status.hidden { display: none; }
.chat-status .status-spinner { border-color: var(--line); border-top-color: var(--fg); }
.chat-status .status-text { color: var(--fg); }
.chat-status .status-subtext { color: var(--muted); }
.video-mode-link {
    background: var(--bg);
    border: var(--hairline);
    border-radius: var(--radius);
    color: var(--fg);
    text-decoration: none;
    padding: 6px 10px;
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.video-mode-link:hover { background: var(--fg); color: var(--bg); }
.room-id-label {
    font-size: 13px;
    color: var(--muted);
    cursor: pointer;
    padding: 4px 8px;
    border: var(--hairline);
    border-radius: var(--radius);
}
.room-id-label:hover { color: var(--fg); border-color: var(--line-strong); }
.partner-status { font-size: 12px; color: var(--faint); }

/* ---------- Account button + menu ---------- */
.account-wrap { position: relative; display: inline-block; }
.account-btn {
    background: var(--bg);
    border: var(--hairline);
    border-radius: var(--radius);
    color: var(--fg);
    cursor: pointer;
    font-size: 15px;
    line-height: 1;
    padding: 6px 8px;
    display: inline-flex;
    align-items: center;
}
.account-btn:hover { background: var(--fg); color: var(--bg); }
.account-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    background: var(--bg);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    min-width: 160px;
    z-index: 50;
    overflow: hidden;
}
.account-menu-item {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: 0;
    color: var(--fg);
    padding: 10px 14px;
    font-size: 13px;
    cursor: pointer;
    font-family: inherit;
}
.account-menu-item:hover { background: var(--fg); color: var(--bg); }
.account-menu-item-danger { color: var(--muted); }

/* ---------- Report ---------- */
.chat-header-report-btn {
    background: var(--bg);
    border: var(--hairline);
    border-radius: var(--radius);
    padding: 6px 10px;
    font-size: 13px;
    cursor: pointer;
    line-height: 1;
    color: var(--fg);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.chat-header-report-btn:hover { background: var(--fg); color: var(--bg); }
.chat-header-report-btn[disabled] { opacity: 0.4; cursor: not-allowed; }
.chat-header-report-btn[disabled]:hover { background: var(--bg); color: var(--fg); }

.report-modal[hidden] { display: none; }
.report-modal {
    position: fixed;
    inset: 0;
    background: var(--bg);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.report-card {
    background: var(--bg);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    padding: 22px;
    max-width: 420px;
    width: 100%;
    color: var(--fg);
}
.report-title { font-size: 18px; font-weight: 700; margin-bottom: 4px; }
.report-sub { font-size: 13px; color: var(--muted); margin-bottom: 14px; line-height: 1.45; }
.report-reasons { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.report-reason {
    background: var(--bg);
    border: var(--hairline);
    border-radius: var(--radius);
    color: var(--fg);
    padding: 10px 8px;
    font-size: 13px;
    cursor: pointer;
    text-align: left;
}
.report-reason:hover { border-color: var(--line-strong); }
.report-reason.selected { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.report-note {
    width: 100%;
    background: var(--bg);
    border: var(--hairline);
    border-radius: var(--radius);
    color: var(--fg);
    padding: 8px 10px;
    font-size: 13px;
    resize: vertical;
    font-family: inherit;
}
.report-actions { display: flex; gap: 8px; margin-top: 12px; justify-content: flex-end; }
.report-cancel, .report-submit {
    border: 1px solid var(--fg);
    border-radius: var(--radius);
    padding: 9px 16px;
    font-size: 14px;
    cursor: pointer;
    font-weight: 600;
    font-family: inherit;
}
.report-cancel { background: var(--bg); color: var(--fg); }
.report-cancel:hover { background: var(--fg); color: var(--bg); }
.report-submit { background: var(--fg); color: var(--bg); }
.report-submit:hover:not(:disabled) { background: var(--bg); color: var(--fg); }
.report-submit:disabled { opacity: 0.4; cursor: not-allowed; }
.report-toast { margin-top: 10px; font-size: 13px; color: var(--muted); min-height: 18px; text-align: center; }

/* ---------- Blocking gate (camera required) ---------- */
.gate-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: var(--bg);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.gate-card {
    background: var(--bg);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    padding: 32px;
    max-width: 440px;
    width: 100%;
    text-align: center;
    color: var(--fg);
}
.gate-badge {
    display: inline-block;
    background: var(--fg);
    color: var(--bg);
    font-size: 22px;
    font-weight: 800;
    padding: 10px 20px;
    border-radius: var(--radius);
    margin-bottom: 20px;
    letter-spacing: 0.06em;
}
.gate-card h2 { font-size: 22px; margin: 0 0 12px; }
.gate-card p { color: var(--muted); font-size: 15px; margin-bottom: 8px; }
/* Both are used on <a> as well as <button>, so the link underline and the
   default anchor colour have to be reset here. */
.gate-btn-primary, .gate-btn-secondary {
    display: block;
    width: 100%;
    padding: 14px;
    border: 1px solid var(--fg);
    border-radius: var(--radius);
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    margin-top: 12px;
    text-align: center;
    text-decoration: none;
}
.gate-btn-primary:hover, .gate-btn-secondary:hover { text-decoration: none; }
.gate-btn-primary { background: var(--fg); color: var(--bg); }
.gate-btn-primary:hover { background: var(--bg); color: var(--fg); }
.gate-btn-secondary { background: var(--bg); color: var(--fg); font-weight: 600; border-color: var(--line-strong); }
.gate-btn-secondary:hover { background: var(--fg); color: var(--bg); }

/* ---------- Centred form pages (create-room, join-room, sign-in, age-check, profile) ---------- */
.page-centered {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 72px 20px 40px;
}
.back-btn {
    position: fixed;
    top: 16px;
    left: 16px;
    color: var(--muted);
    text-decoration: none;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border: var(--hairline);
    border-radius: var(--radius);
    background: var(--bg);
}
.back-btn:hover { background: var(--fg); color: var(--bg); text-decoration: none; }

.card, .signin-card, .age-card {
    background: var(--bg);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    padding: 32px;
    max-width: 460px;
    width: 100%;
}
.card h1, .signin-card h1, .age-card h1 { font-size: 24px; margin-bottom: 8px; }
.card h1 { text-align: center; }
.card p.sub, .signin-sub, .age-sub {
    color: var(--muted);
    font-size: 14px;
    margin-bottom: 26px;
}
.card p.sub { text-align: center; }
.signin-sub strong, .age-sub strong { color: var(--fg); }

.form-group { margin-bottom: 18px; }
.form-group label { display: block; font-size: 13px; font-weight: 600; color: var(--muted); margin-bottom: 7px; }
.form-input, .local-field {
    width: 100%;
    padding: 12px 14px;
    background: var(--bg);
    border: var(--hairline);
    border-radius: var(--radius);
    color: var(--fg);
    font-size: 15px;
    outline: none;
}
.form-input:focus, .local-field:focus { border-color: var(--fg); }
.form-input::placeholder, .local-field::placeholder { color: var(--faint); }
.form-hint { font-size: 12px; color: var(--faint); margin-top: 6px; }
.submit-btn, .local-submit { width: 100%; margin-top: 8px; }
.local-field { margin-bottom: 10px; }
.local-auth { margin-top: 4px; }
.local-toggle { text-align: center; font-size: 13px; color: var(--muted); margin-top: 12px; }
.local-toggle a { cursor: pointer; }
.local-error { color: var(--fg); font-weight: 600; font-size: 13px; margin-bottom: 10px; line-height: 1.4; }
.local-note { color: var(--muted); font-size: 13px; margin-bottom: 10px; line-height: 1.45; }

/* "You used X last time." A bordered block rather than a coloured one — the
   green online dot stays the site's only hue. The matching control also gets
   .is-last-used, because the sentence alone is easy to skim past. */
.last-provider-hint {
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    padding: 10px 12px;
    margin: 0 0 4px;
    font-size: 13px;
    line-height: 1.45;
    color: var(--fg);
    text-align: left;
}
.last-provider-hint strong { font-weight: 600; }
.is-last-used { outline: 2px solid var(--fg); outline-offset: 3px; }
.or-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--faint);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 18px 0 14px;
}
.or-divider::before, .or-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.google-btn, .apple-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 12px 24px;
    background: var(--bg);
    color: var(--fg);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    font-family: inherit;
    width: 250px;
}
.google-btn:hover, .apple-btn:hover { background: var(--fg); color: var(--bg); }
.google-btn svg, .apple-btn svg { width: 19px; height: 19px; flex-shrink: 0; }
.signin-actions { display: flex; flex-direction: column; align-items: center; gap: 12px; margin: 16px 0; }
.status-banner {
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    padding: 12px 14px;
    margin-bottom: 18px;
    font-size: 14px;
    line-height: 1.45;
    color: var(--fg);
}
.what-we-store {
    border: var(--hairline);
    border-radius: var(--radius);
    padding: 12px 14px;
    margin: 16px 0;
    font-size: 12px;
    color: var(--muted);
    line-height: 1.55;
}
.what-we-store strong { color: var(--fg); }
.small-print { font-size: 12px; color: var(--faint); margin-top: 22px; text-align: center; line-height: 1.55; }

/* Room create/join results */
.result { display: none; text-align: center; margin-top: 22px; }
.result.show { display: block; }
.result-success { border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 22px; }
.result-success h3 { font-size: 17px; margin: 0 0 12px; }
.room-id-display, .room-code-display {
    border: var(--hairline);
    border-radius: var(--radius);
    padding: 14px;
    font-family: var(--font-mono);
    color: var(--fg);
    margin: 12px 0;
    cursor: pointer;
}
.room-id-display { font-size: 19px; letter-spacing: 2px; }
.room-code-display { font-size: 34px; font-weight: 700; letter-spacing: 8px; padding: 20px 12px; }
.room-id-display:hover, .room-code-display:hover { border-color: var(--fg); }
.room-id-secondary { margin-top: 8px; font-size: 11px; color: var(--faint); font-family: var(--font-mono); word-break: break-all; }
.copy-hint { font-size: 12px; color: var(--faint); }
.result-actions { display: flex; gap: 10px; margin-top: 16px; justify-content: center; flex-wrap: wrap; }
.result-btn, .share-btn {
    padding: 11px 20px;
    border: 1px solid var(--fg);
    border-radius: var(--radius);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--bg);
    color: var(--fg);
    font-family: inherit;
}
.result-btn-primary { background: var(--fg); color: var(--bg); }
.result-btn:hover, .share-btn:hover { background: var(--fg); color: var(--bg); }
.result-btn-primary:hover { background: var(--bg); color: var(--fg); }
.share-row { display: flex; gap: 10px; justify-content: center; margin-top: 16px; flex-wrap: wrap; }
.share-btn-whatsapp, .share-btn-telegram, .share-btn-native { background: var(--bg); color: var(--fg); }
.share-label { font-size: 13px; color: var(--faint); margin-top: 18px; text-align: center; }
.error-msg { color: var(--fg); font-weight: 600; font-size: 14px; margin-top: 12px; display: none; }
.error-msg.show { display: block; }
.password-step { display: none; margin-top: 20px; padding-top: 20px; border-top: var(--hairline); }
.password-step.show { display: block; }
.status-msg {
    text-align: center;
    font-size: 14px;
    margin-top: 16px;
    padding: 11px;
    border: var(--hairline);
    border-radius: var(--radius);
    display: none;
    color: var(--fg);
}
.status-msg.show { display: block; }
.status-msg.error { border-color: var(--fg); border-width: 2px; }

/* Age check */
.age-state[hidden] { display: none; }
.age-consent {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13px;
    margin: 14px 0 18px;
    cursor: pointer;
    color: var(--muted);
    line-height: 1.5;
}
.age-consent input { margin-top: 3px; accent-color: var(--fg); }
.age-actions { display: flex; gap: 10px; justify-content: flex-end; }
.age-preview {
    width: 100%;
    max-width: 360px;
    margin: 0 auto 16px;
    border: var(--hairline);
    background: #000;
    display: block;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}
.age-status { font-size: 13px; color: var(--muted); margin-bottom: 12px; min-height: 18px; text-align: center; }
.age-status.error { color: var(--fg); font-weight: 600; }
.result-title { text-align: center; font-size: 20px; margin-bottom: 8px; }
.result-detail { text-align: center; color: var(--muted); font-size: 14px; margin-bottom: 18px; line-height: 1.5; }

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
    .app-container { flex-direction: column; }
    .video-panel { height: 40vh; min-height: 200px; border-right: 0; border-bottom: var(--hairline); }
    .chat-panel { width: 100%; flex: 1; }
    #localVideo, .local-video-wrap { width: 100px; height: 75px; bottom: 80px; right: 8px; }
    .flip-icon { opacity: 1; }
    .video-controls { bottom: 30px; gap: 10px; padding: 7px 12px 5px; }
    .online-count-overlay { bottom: 6px; padding: 2px 8px; font-size: 11px; }
    .ctrl-btn { width: 38px; height: 38px; font-size: 15px; }
    .ctrl-label { font-size: 9px; }
    .report-reasons { grid-template-columns: 1fr; }
    .card, .signin-card, .age-card { padding: 22px; }
}
@media (max-width: 480px) {
    .video-panel { height: 35vh; }
    .chat-header { padding: 8px 10px; }
    .chat-input-area { padding: 8px 10px; }
    .room-code-display { font-size: 26px; letter-spacing: 5px; }
}

/* ---------- Reduced motion: keep the feedback, drop the movement ----------
   Reported 2026-07-29: on iOS with "Bewegung reduzieren" on, the matchmaking
   sonar and the spinner froze — theme.css's blanket reduced-motion reset ran
   each animation once for 0.01 ms, leaving the rings at their end keyframe
   (opacity 0) and the core static. A user waiting for a partner saw a dead
   circle and no sign the site was doing anything.

   These override it with opacity-only variants: no scaling, no rotation, so
   nothing that triggers vestibular symptoms, but the indicator still reads as
   alive. Keyframes are declared at top level (not inside the media query) so
   they stay greppable next to the ones they replace. */
@keyframes search-ring-fade-rm {
    0%, 100% { opacity: 0.15; }
    50% { opacity: 1; }
}
@keyframes indicator-pulse-rm {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}
@media (prefers-reduced-motion: reduce) {
    /* Three concentric rings held at FIXED radii — a static transform is not
       motion — fading in sequence so the pulse still travels outward without
       anything actually moving. Without the staggered scales all three sit on
       top of each other and the indicator reads as one flickering circle. */
    .search-anim .search-ring {
        animation-name: search-ring-fade-rm !important;
        animation-duration: 2.4s !important;
        animation-iteration-count: infinite !important;
        transform: scale(1) !important;
    }
    .search-anim .search-ring-2 { transform: scale(1.75) !important; }
    .search-anim .search-ring-3 { transform: scale(2.5) !important; }
    .search-anim .search-core {
        transform: none !important;
        animation-name: indicator-pulse-rm !important;
        animation-duration: 2.4s !important;
        animation-iteration-count: infinite !important;
    }
    /* The spinner is a ring with one bright arc; without rotation it just
       looks broken, so pulse the whole thing instead. */
    .status-spinner {
        animation-name: indicator-pulse-rm !important;
        animation-duration: 1.4s !important;
        animation-iteration-count: infinite !important;
    }
    .online-dot {
        animation-duration: 2s !important;
        animation-iteration-count: infinite !important;
    }
}

/* ============================================================================
   Admin dashboard (admin-metrics.html) — internal, noindex. Monospace,
   same monochrome tokens. Severity is carried by border weight and the
   .is-critical / .is-warn modifiers, never by hue.
   ========================================================================== */
.admin-body { font-family: var(--font-mono); padding: 20px; overflow: auto; height: auto; }
.admin-body .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 22px;
    padding-bottom: 14px;
    border-bottom: var(--hairline);
    gap: 12px;
    flex-wrap: wrap;
}
.admin-body .header h1 { font-size: 17px; font-weight: 600; letter-spacing: 0.04em; }
.status-badge { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
.pulse { width: 7px; height: 7px; background: var(--fg); border-radius: 50%; animation: pulse 2s ease-in-out infinite; }
.pulse.error { animation: none; background: var(--faint); }
.admin-body .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin-bottom: 22px; }
.admin-body .card {
    background: var(--bg);
    border: var(--hairline);
    border-radius: var(--radius);
    padding: 16px;
    max-width: none;
}
.admin-body .card:hover { border-color: var(--line-strong); }
.admin-body .card .label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--faint); margin-bottom: 6px; }
.admin-body .card .value { font-size: 28px; font-weight: 700; color: var(--fg); font-variant-numeric: tabular-nums; }
.admin-body .card .value.warn { text-decoration: underline; text-decoration-style: double; }
.admin-body .section-title {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--faint);
    margin: 22px 0 10px;
    text-align: left;
}
.previews-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.previews-toolbar button, .chart-tab, .autoban-toggle, .btn-kick, .btn-unkick, .btn-nuke, .preview-tile-kick {
    background: var(--bg);
    color: var(--fg);
    border: var(--hairline);
    border-radius: var(--radius);
    padding: 6px 12px;
    font-family: inherit;
    font-size: 11px;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.previews-toolbar button:hover, .chart-tab:hover, .autoban-toggle:hover,
.btn-kick:hover, .btn-unkick:hover, .btn-nuke:hover, .preview-tile-kick:hover {
    background: var(--fg);
    color: var(--bg);
}
.previews-toolbar button.active, .chart-tab.active, .autoban-toggle.on { background: var(--fg); color: var(--bg); }
.autoban-toggle { display: inline-flex; align-items: center; gap: 8px; }
.autoban-toggle .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.autoban-toggle.off { border-color: var(--fg); border-width: 2px; }
.autoban-toggle:disabled { opacity: 0.5; cursor: progress; }
.btn-kick, .btn-nuke { border-color: var(--line-strong); font-weight: 600; }
.previews-status, .preview-empty, .geo-loading, .empty-state, .no-data { color: var(--faint); font-size: 12px; }
.empty-state, .no-data { padding: 14px; text-align: center; font-style: italic; }
.no-data { display: flex; align-items: center; justify-content: center; height: 100%; }
.previews-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.preview-tile { background: var(--bg); border: var(--hairline); border-radius: var(--radius); overflow: hidden; position: relative; }
.preview-tile.kicking { opacity: 0.35; }
.preview-tile img { width: 100%; display: block; background: #000; aspect-ratio: 4 / 3; object-fit: cover; }
.preview-tile .meta { padding: 8px 10px; font-size: 11px; color: var(--muted); line-height: 1.5; }
.preview-tile .meta strong { color: var(--fg); }
.preview-tile .meta .id { font-family: inherit; color: var(--faint); }
.preview-tile-kick { position: absolute; top: 6px; right: 6px; padding: 3px 7px; font-weight: 600; }
.preview-tile-kick:disabled { opacity: 0.5; cursor: not-allowed; }
.rooms-table, .users-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.rooms-table th, .users-table th {
    text-align: left;
    padding: 7px 10px;
    color: var(--faint);
    font-weight: 500;
    border-bottom: var(--hairline);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    background: var(--bg);
}
.users-table th { position: sticky; top: 0; }
.rooms-table td, .users-table td { padding: 7px 10px; border-bottom: var(--hairline); color: var(--muted); }
.rooms-table tr:hover td, .users-table tr:hover td { background: var(--surface); }
.refresh-control { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--faint); }
.refresh-control select {
    background: var(--bg);
    color: var(--fg);
    border: var(--hairline);
    border-radius: var(--radius);
    padding: 4px 8px;
    font-size: 12px;
    font-family: inherit;
}
.flash { animation: flashInvert 0.5s ease-out; }
@keyframes flashInvert { 0% { opacity: 0.35; } 100% { opacity: 1; } }
.uptime-bar { font-size: 12px; color: var(--faint); margin-top: 4px; }
.charts-grid, .geo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 22px; }
.chart-card, .geo-card { background: var(--bg); border: var(--hairline); border-radius: var(--radius); padding: 16px; }
.geo-card { max-height: 500px; overflow-y: auto; }
.chart-card:hover, .geo-card:hover { border-color: var(--line-strong); }
.chart-card.full-width, .geo-card.full-width { grid-column: 1 / -1; }
.chart-header, .geo-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; gap: 10px; }
.chart-title, .geo-card-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.chart-tabs { display: flex; gap: 4px; }
.chart-container { position: relative; height: 220px; }
.chart-container.tall { height: 180px; }
.peak-value { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.peak-time { font-size: 11px; color: var(--faint); margin-top: 4px; }
.admin-body .stat-row { display: flex; gap: 22px; margin-top: 12px; }
.admin-body .stat-item { display: flex; flex-direction: column; gap: 2px; padding: 0; border: 0; text-align: left; }
.admin-body .stat-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--faint); margin: 0; }
.stat-value { font-size: 15px; font-weight: 600; color: var(--fg); font-variant-numeric: tabular-nums; }
.geo-badge { border: var(--hairline); font-size: 10px; padding: 2px 7px; font-weight: 600; }
.country-row { display: flex; align-items: center; justify-content: space-between; padding: 7px 0; border-bottom: var(--hairline); }
.country-row:last-child { border-bottom: none; }
.country-info { display: flex; align-items: center; gap: 9px; }
.country-name { font-size: 13px; color: var(--fg); }
.country-code { font-size: 10px; color: var(--faint); margin-left: 4px; }
.country-count { font-size: 13px; font-weight: 700; color: var(--fg); min-width: 30px; text-align: right; font-variant-numeric: tabular-nums; }
.country-bar-bg { flex: 1; height: 4px; border: var(--hairline); margin: 0 12px; min-width: 40px; }
.country-bar { height: 100%; background: var(--fg); transition: width 0.3s; }
.rank-num { font-size: 11px; color: var(--faint); min-width: 20px; }
.type-badge {
    font-size: 9px;
    padding: 2px 6px;
    border: var(--hairline);
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.06em;
}
.status-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: 4px; background: var(--fg); }
.status-dot.waiting { background: transparent; border: 1px solid var(--fg); }
.ban-expires { color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.admin-toast {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: var(--bg);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    padding: 12px 18px;
    font-size: 12px;
    color: var(--fg);
    z-index: 1000;
    max-width: 400px;
}
.admin-toast.error { border-width: 2px; border-color: var(--fg); }
@media (max-width: 900px) {
    .charts-grid, .geo-grid { grid-template-columns: 1fr; }
    .admin-body .header { flex-direction: column; align-items: flex-start; }
}