/* Public pages use the preview stylesheet. These rules only exist so older
   chat, form, and Bootstrap styles do not cover that layout. */

body.omeger {
    font-family: "Nunito", system-ui, sans-serif !important;
}

body.omeger header.topbar {
    height: auto;
    background: rgba(255, 255, 255, 0.92);
    color: var(--ink);
}

body.omeger main {
    padding: 0;
}

body.omeger a.brand,
body.omeger a.brand:hover,
body.omeger a.brand:focus {
    color: var(--coral);
    text-decoration: none;
}

body.omeger .nav a,
body.omeger .nav a:hover,
body.omeger .nav a:focus {
    color: var(--ink);
    text-decoration: none;
    font-weight: 800;
}

body.omeger .nav a.btn,
body.omeger .nav a.btn:hover,
body.omeger a.btn-green,
body.omeger a.btn-green:hover,
body.omeger button.btn-green,
body.omeger button.btn-green:hover {
    color: #fff;
    text-decoration: none;
}

body.omeger a.btn-ink,
body.omeger a.btn-ink:hover,
body.omeger button.btn-ink,
body.omeger button.btn-ink:hover {
    color: #fff;
    text-decoration: none;
}

body.omeger a.btn-ghost,
body.omeger a.btn-ghost:hover,
body.omeger button.btn-ghost,
body.omeger button.btn-ghost:hover {
    color: var(--green);
    background: #fff;
    text-decoration: none;
}

body.omeger .dark-theme-setting {
    border: 0;
    background: transparent;
    color: var(--ink);
    width: 36px;
    height: 36px;
    border-radius: 999px;
    cursor: pointer;
    padding: 0;
}

body.omeger .dropdown {
    position: relative;
}

body.omeger .dropdown-menu {
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: 0 16px 40px rgba(28, 36, 48, 0.08);
}

body.omeger .dashboard,
body.omeger .main,
body.omeger .chat-main,
body.omeger .chat-area,
body.omeger .about,
body.omeger .chat-panel,
body.omeger .chat-box,
body.omeger .btn-actions {
    height: auto !important;
    top: auto !important;
    position: relative;
}

body.omeger .btn-actions {
    border: 0;
    background: transparent;
    padding: 0;
}

body.omeger .lobby .stage,
body.omeger .lobby .panel {
    min-width: 0;
}

body.omeger .text-chat-panel {
    grid-column: 1 / -1;
}

body.omeger .stage .well,
body.omeger .remote-video-container,
body.omeger .local-video-container {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    min-height: 180px;
    margin: 0;
    right: auto !important;
    bottom: auto !important;
    border: 1px dashed #cfe8da;
    border-radius: 18px;
    background: linear-gradient(180deg, #fff, #f3fbf6);
    overflow: hidden;
}

body.omeger .well-copy {
    position: relative;
    z-index: 1;
    color: var(--green);
    font-weight: 800;
    text-align: center;
    padding: 28px 16px;
}

body.omeger .well-copy strong {
    display: block;
    color: var(--ink);
    margin-top: 6px;
}

body.omeger .well-copy span {
    color: var(--muted);
    font-size: 0.88rem;
    font-weight: 700;
}

body.omeger .stage video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    background: #111;
    z-index: 2;
}

body.omeger .stage .has-video video {
    opacity: 1;
}

body.omeger .stage .has-video .well-copy,
body.omeger .stage .has-video .video-load-icon {
    display: none;
}

body.omeger .stage .video-load-icon {
    z-index: 1;
    font-size: 18px;
    opacity: 0.45;
}

body.omeger .remote-user-info,
body.omeger .report,
body.omeger .video-actions {
    z-index: 3;
}

body.omeger .partner-flag {
    vertical-align: middle;
    margin-right: 6px;
}

body.omeger .filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: end;
}

body.omeger .filters label {
    margin: 0;
}

body.omeger .interest-chip.is-active,
body.omeger .chip.interest-chip.is-active {
    background: var(--ink);
    color: #fff;
    border-color: var(--ink);
}

body.omeger .interest-save {
    background: #fff;
    color: var(--ink);
}

body.omeger .chat-panel:not(.hide) {
    display: block;
}

body.omeger .chat-body {
    height: auto;
    min-height: 180px;
    max-height: 320px;
    overflow: auto;
    background: transparent;
    padding: 4px;
}

body.omeger .chat-footer {
    position: relative;
    bottom: auto;
    width: auto;
    background: transparent;
    border: 0;
    padding: 8px 0 0;
}

body.omeger .composer {
    display: flex;
    gap: 8px;
}

body.omeger .composer input {
    flex: 1;
}

body.omeger .remote-chat,
body.omeger .local-chat {
    float: none;
    width: auto;
    padding: 0;
    margin-bottom: 8px;
}

body.omeger .remote-chat div,
body.omeger .local-chat div {
    background: #fff;
    color: var(--ink);
    border-radius: 14px;
    padding: 10px 12px;
    width: fit-content;
    max-width: 100%;
}

body.omeger .local-chat div {
    margin-left: auto;
    background: #fff7ef;
}

body.omeger .remote-chat:has(.font-weight-bold) div {
    background: #eef8f3;
}

body.omeger .sheet .invalid-feedback,
body.omeger .is-invalid ~ .invalid-feedback {
    display: block;
    color: #8a4632;
    font-weight: 700;
    font-size: 0.88rem;
}

body.omeger input[type="checkbox"],
body.omeger input[type="radio"] {
    width: auto;
    padding: 0;
    border-radius: 4px;
}

body.omeger input[type="hidden"] {
    width: auto;
    padding: 0;
    border: 0;
}

body.omeger .is-invalid {
    border-color: #c4532d;
}

body.omeger .sheet label.inline,
body.omeger label.inline {
    display: inline;
    margin: 0 0 0 6px;
    color: var(--ink);
    font-weight: 800;
}

body.omeger .toggle {
    align-items: center;
}

body.omeger .toggle input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}

body.omeger .toggle label.btn {
    margin: 0;
    background: #fff;
    color: var(--green);
    border: 2px solid var(--green);
}

body.omeger .toggle input:checked + label.btn {
    background: var(--green);
    color: #fff;
    border-color: var(--green);
}

body.omeger .plan .btn,
body.omeger .plan button.btn {
    margin-top: 8px;
}

body.omeger .faq-span {
    grid-column: 1 / -1;
}

body.omeger .faq_section .card {
    box-shadow: none;
    border-radius: 14px;
    border: 1px solid var(--line);
    margin-bottom: 8px;
}

body.omeger .faq_section .card-header,
body.omeger .faq_section .card-body {
    background: #fff;
    border: 0;
}

body.omeger .faq_section .card-header a,
body.omeger .faq_section .card-header a:hover {
    color: var(--ink);
    text-decoration: none;
}

body.omeger .modal-content {
    border: 0;
    border-radius: 24px;
    overflow: hidden;
}

body.omeger .modal-header {
    background: #fff;
    color: var(--ink);
    border-bottom: 1px solid var(--line);
}

body.omeger .modal-header .close {
    color: var(--ink);
}

body.omeger .cookie.show-cookie {
    display: flex;
}

body.omeger .pay-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
}

body.omeger[data-theme="dark"] {
    background: #1b2430;
    color: #f4f7fb;
}

body.omeger[data-theme="dark"] .topbar,
body.omeger[data-theme="dark"] .footer,
body.omeger[data-theme="dark"] .cookie,
body.omeger[data-theme="dark"] .stage,
body.omeger[data-theme="dark"] .panel,
body.omeger[data-theme="dark"] .card,
body.omeger[data-theme="dark"] .sheet,
body.omeger[data-theme="dark"] .sections article,
body.omeger[data-theme="dark"] .policy {
    background: #243140;
    color: #f4f7fb;
}

body.omeger[data-theme="dark"] .nav a,
body.omeger[data-theme="dark"] .nav a:hover,
body.omeger[data-theme="dark"] .brand,
body.omeger[data-theme="dark"] a.brand:hover {
    color: #f4f7fb;
}

@media (max-width: 800px) {
    body.omeger .nav {
        flex-wrap: wrap;
        justify-content: flex-end;
        row-gap: 8px;
    }

    body.omeger .nav a.quiet {
        display: inline;
    }

    body.omeger .local-video-container,
    body.omeger .remote-video-container,
    body.omeger .chat-main,
    body.omeger .chat-area,
    body.omeger .about,
    body.omeger .chat-panel {
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
    }

    body.omeger .pay-row {
        grid-template-columns: 1fr;
    }

    body.omeger .toolbar {
        align-items: stretch;
    }

    body.omeger .filters {
        width: 100%;
    }

    body.omeger .filters select {
        width: 100%;
    }
}

/* Simplified home (2026-10-07) */
/* .btn sets display:inline-flex, which beat the legacy .hide rule, so Stop/Next showed before a chat started. */
body.omeger .btn.hide {
    display: none;
}

body.omeger .welcome .fine {
    font-size: 0.85rem;
}

body.omeger .welcome .disambiguation {
    display: block;
    margin-top: 4px;
}

body.omeger .sections-simple {
    grid-template-columns: 1fr;
    max-width: 760px;
    margin: 0 auto;
}

body.omeger .sections-simple details {
    border-top: 1px solid rgba(28, 36, 48, 0.08);
    padding: 12px 0;
}

body.omeger .sections-simple summary {
    cursor: pointer;
    font-weight: 800;
}

body.omeger .sections-simple details p {
    margin: 8px 0 0;
}

/* Legacy style.css pins every <footer> to the bottom of the screen, so on phones it sat on top of the chat. */
body.omeger footer.footer {
    position: static;
}

/* Keep the camera icon above the "Their video" / "Your video" label instead of on top of it. */
body.omeger .stage .video-load-icon {
    top: calc(50% - 28px);
}

@media (max-width: 800px) {
    /* Phones: Start buttons first, camera wells after. */
    body.omeger .lobby .chat-main {
        order: -1;
    }

    body.omeger .remote-video-container,
    body.omeger .local-video-container {
        min-height: 120px;
    }
}

/* Login-only front page and auth pages (layouts/minimal) */
body.omeger-minimal #app {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

body.omeger-minimal .minimal-main {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
}

body.omeger-minimal .sheet {
    width: 100%;
    max-width: 380px;
    margin: 0 auto;
    background: #fff;
    border-radius: 28px;
    box-shadow: 0 20px 50px rgba(28, 36, 48, 0.08);
}

body.omeger .login-card input {
    margin-bottom: 12px;
}

body.omeger .login-card .btn-wide {
    margin-top: 4px;
    font-size: 1.05rem;
    padding: 12px 16px;
}

body.omeger .login-brand {
    text-align: center;
    margin-bottom: 18px;
}

body.omeger .login-brand h1 {
    margin: 10px 0 4px;
    font-size: 2rem;
    font-weight: 800;
    color: var(--coral);
    letter-spacing: -0.02em;
}

body.omeger .login-tagline {
    margin: 0;
    color: var(--muted);
    font-weight: 700;
}

body.omeger .login-links {
    display: flex;
    justify-content: space-between;
    margin: 14px 0 0;
    font-size: 0.9rem;
}

body.omeger-minimal footer.minimal-footer {
    position: static;
    text-align: center;
    padding: 14px 16px 18px;
    font-size: 0.82rem;
    background: transparent;
    border-top: 0;
}

body.omeger-minimal .minimal-footer p {
    margin: 0 0 4px;
}

body.omeger-minimal .minimal-footer nav a {
    margin: 0 8px;
}

body.omeger[data-theme="dark"].omeger-minimal .sheet {
    background: #243140;
}

/* Logged-in chat: the welcome box is just one short line now. */
body.omeger .welcome .chat-hint {
    margin: 0;
    text-align: center;
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--muted);
}

/* Mirror only the self-view preview (like FaceTime/Zoom). The outgoing MediaStream is untouched, so remote users see the caller the right way round.
   home.js drops .is-mirrored when the back camera is active. */
#localVideo.is-mirrored { transform: scaleX(-1); }

/* Guest "Start chatting now" button on the login-only front page */
body.omeger .login-card .btn-guest {
    font-size: 1.15rem;
    padding: 14px 16px;
    margin-bottom: 4px;
    box-shadow: 0 10px 24px rgba(31, 157, 98, 0.25);
}

body.omeger .login-or {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 14px 0;
    color: var(--muted);
    font-size: 0.85rem;
    font-weight: 700;
}

body.omeger .login-or::before,
body.omeger .login-or::after {
    content: "";
    flex: 1;
    border-top: 1px solid var(--line);
}

body.omeger .login-guest-link {
    justify-content: center;
}