/*
 * VioletRoom V2.5 Premium UI
 * Visual-only polish layer: keeps Laravel, routes and realtime logic intact.
 */

:root {
    --bg: #f6f5f8;
    --surface: #ffffff;
    --surface-2: #f2f0f6;
    --surface-3: #e9e5f1;
    --text: #191720;
    --muted: #716d7d;
    --line: rgba(45, 35, 62, .10);
    --green: #22c55e;
    --green-strong: #16a34a;
    --green-soft: rgba(34, 197, 94, .11);
    --purple: #8b5cf6;
    --purple-strong: #7438ed;
    --purple-soft: rgba(139, 92, 246, .12);
    --pink: #ec4899;
    --live: #ff3f67;
    --danger: #ef476f;
    --warning: #f2b84b;
    --shadow: 0 26px 70px rgba(41, 28, 61, .12);
    --shadow-soft: 0 12px 36px rgba(41, 28, 61, .075);
    --radius: 16px;
    --radius-sm: 11px;
    --shell: min(1480px, calc(100vw - 36px));
}

html[data-theme="dark"] {
    --bg: #08080d;
    --surface: #101017;
    --surface-2: #16151f;
    --surface-3: #1d1b29;
    --text: #f6f4fb;
    --muted: #9b97aa;
    --line: rgba(255,255,255,.085);
    --purple-soft: rgba(139, 92, 246, .13);
    --green-soft: rgba(34, 197, 94, .10);
    --shadow: 0 28px 80px rgba(0,0,0,.38);
    --shadow-soft: 0 14px 40px rgba(0,0,0,.24);
}

@media (prefers-color-scheme: dark) {
    html[data-theme="system"] {
        --bg: #08080d;
        --surface: #101017;
        --surface-2: #16151f;
        --surface-3: #1d1b29;
        --text: #f6f4fb;
        --muted: #9b97aa;
        --line: rgba(255,255,255,.085);
        --purple-soft: rgba(139, 92, 246, .13);
        --green-soft: rgba(34, 197, 94, .10);
        --shadow: 0 28px 80px rgba(0,0,0,.38);
        --shadow-soft: 0 14px 40px rgba(0,0,0,.24);
    }
}

body {
    background:
        radial-gradient(circle at 52% -22%, rgba(139,92,246,.075), transparent 34%),
        var(--bg);
    letter-spacing: -.005em;
}

::selection { background: rgba(139,92,246,.34); color: #fff; }

/* Header / global navigation */
.demo-ribbon {
    height: 24px;
    display: flex;
    justify-content: center;
    gap: 34px;
    background: #050508;
    border-bottom: 1px solid rgba(255,255,255,.07);
    color: #9e9aaa;
    font-size: 9px;
    letter-spacing: .16em;
}
.demo-ribbon b { color: #c4b5fd; }

.site-header {
    background: color-mix(in srgb, var(--bg) 91%, transparent);
    backdrop-filter: blur(24px) saturate(125%);
    box-shadow: 0 10px 30px rgba(0,0,0,.08);
}
.header-inner { min-height: 64px; gap: 20px; }
.brand { gap: 10px; font-size: 20px; }
.brand > span:last-child > span { color: inherit; }
.brand-mark {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    color: #fff;
    background: linear-gradient(145deg, #9c67ff, #6f2cf1 58%, #d946ef);
    box-shadow: 0 8px 24px rgba(123,65,238,.28);
}
.brand small {
    padding: 3px 6px;
    border: 1px solid var(--line);
    border-radius: 6px;
    color: var(--muted);
    font-size: 8px;
    letter-spacing: .04em;
}
.nav-links { gap: 6px; }
.nav-links a {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 12px;
    border-radius: 9px;
    position: relative;
    color: #aaa5b8;
    font-size: 12px;
    font-weight: 750;
}
.nav-links a:hover { background: var(--surface-2); color: var(--text); }
.nav-links a.active { background: rgba(139,92,246,.10); color: #f3edff; }
.nav-links a.active::after {
    content: "";
    position: absolute;
    left: 11px;
    right: 11px;
    bottom: -13px;
    height: 2px;
    border-radius: 99px;
    background: linear-gradient(90deg, #9a63ff, #c084fc);
}
.nav-live-dot {
    width: 7px;
    height: 7px;
    background: var(--live);
    box-shadow: 0 0 0 4px rgba(255,63,103,.12);
}
.header-actions { gap: 7px; }
.wallet-pill {
    min-height: 38px;
    padding: 0 12px;
    border-radius: 10px;
    background: var(--surface);
    color: var(--muted);
}
.wallet-pill .icon { color: #a78bfa; }
.icon-button {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--surface);
    transition: transform .16s ease, border-color .16s ease, background .16s ease;
}
.icon-button:hover { transform: translateY(-1px); background: var(--surface-2); border-color: rgba(139,92,246,.25); }
.user-chip {
    min-height: 40px;
    border-radius: 10px;
    padding: 4px 8px 4px 5px;
    background: var(--surface);
}
.user-chip > span:first-child {
    border-radius: 8px;
    background: linear-gradient(145deg,#7c3aed,#4338ca);
    color: #fff;
}
.user-menu-popover {
    border-radius: 13px;
    box-shadow: 0 24px 70px rgba(0,0,0,.38);
}

/* Buttons / fields */
.button {
    min-height: 40px;
    padding: 8px 14px;
    border-radius: 9px;
    font-size: 12px;
    font-weight: 800;
    box-shadow: none;
    transition: transform .14s ease, box-shadow .14s ease, background .14s ease, border-color .14s ease;
}
.button:hover { transform: translateY(-1px); }
.button.small { min-height: 34px; border-radius: 8px; padding: 6px 10px; }
.button.primary,
.button.purple {
    color: #fff;
    border-color: transparent;
    background: linear-gradient(135deg,#8b5cf6,#7138e9);
    box-shadow: 0 8px 24px rgba(124,58,237,.20);
}
.button.primary:hover,
.button.purple:hover { box-shadow: 0 11px 30px rgba(124,58,237,.27); }
.button.secondary {
    color: #ddd6fe;
    background: rgba(139,92,246,.10);
    border-color: rgba(139,92,246,.24);
}
.button.ghost { background: var(--surface-2); border-color: var(--line); }
.button.ghost:hover { border-color: rgba(139,92,246,.25); }
.button.live-action {
    color: #fff;
    background: linear-gradient(135deg,#ff3f67,#e82f58);
    border-color: transparent;
    box-shadow: 0 9px 25px rgba(255,63,103,.20);
}
.button.danger { background: #d93659; }
.button.danger.ghost { color: #fb7185; background: rgba(255,63,103,.055); border-color: rgba(255,63,103,.28); }
.input {
    min-height: 40px;
    border-radius: 9px;
    background: var(--surface-2);
    border-color: var(--line);
    padding: 9px 11px;
    font-size: 12px;
}
.input:focus { border-color: rgba(139,92,246,.68); box-shadow: 0 0 0 3px rgba(139,92,246,.11); }
textarea.input { line-height: 1.45; }
label { font-size: 11px; }

/* Shared surfaces */
.panel,
.metric-card,
.form-card,
.age-card,
.moderation-card,
.vr-client-panel,
.vr-studio-card,
.vr-live-console,
.vr-room-section,
.vr-action-card,
.vr-side-panel {
    border-color: var(--line);
    box-shadow: none;
}
.panel { border-radius: 12px; }
.page-heading { margin-bottom: 18px; }
.page-heading h1,
.vr-page-title h1 { font-size: clamp(28px,3vw,36px); }
.eyebrow,
.vr-kicker { color: #a78bfa; }
.status-pill,
.status-badge,
.priority { border-radius: 6px; }
.subnav {
    position: relative;
    gap: 3px;
    padding: 4px;
    border-radius: 10px;
    background: color-mix(in srgb,var(--surface) 96%,transparent);
    box-shadow: none;
}
.subnav a { min-height: 35px; padding: 0 11px; border-radius: 7px; }
.subnav a.active {
    color: #e8e0ff;
    background: rgba(139,92,246,.13);
    box-shadow: inset 0 0 0 1px rgba(139,92,246,.18);
}
.table-wrap { border-radius: 10px; }
th { color: #bcb7ca; font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }
td { font-size: 11px; }
tr:hover td { background: rgba(139,92,246,.035); }

/* Explore / home */
.vr-explore-shell { padding-top: 18px; }
.vr-explore-grid { grid-template-columns: 184px minmax(0,1fr); gap: 24px; }
.vr-discovery-side { top: 82px; }
.vr-side-card { border-radius: 11px; padding: 7px; background: #0f0f16; }
html:not([data-theme="dark"]) .vr-side-card { background: var(--surface); }
.vr-side-card a { min-height: 37px; border-radius: 7px; }
.vr-side-card a.active {
    background: linear-gradient(90deg,rgba(139,92,246,.13),rgba(139,92,246,.045));
    box-shadow: inset 2px 0 #8b5cf6;
}
.vr-welcome-strip,
.vr-guest-hero {
    min-height: 126px;
    padding: 20px 24px;
    border-radius: 13px;
    background:
        radial-gradient(circle at 86% 18%, rgba(236,72,153,.10), transparent 28%),
        linear-gradient(120deg,rgba(139,92,246,.125),var(--surface) 48%);
}
.vr-welcome-strip h1,
.vr-guest-hero h1 { font-size: clamp(28px,3vw,34px); }
.vr-live-stats div,
.vr-guest-statboard {
    min-width: 118px;
    border-radius: 10px;
    background: rgba(6,6,10,.28);
}
.vr-home-section { margin-top: 28px; }
.vr-section-head { margin-bottom: 12px; }
.vr-section-head h2 { font-size: 23px; }
.vr-section-head > a { color: #c4b5fd; }

/* Critical V2.5 fix: one live no longer stretches across the screen. */
.vr-live-rail {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: clamp(260px, 23vw, 330px);
    justify-content: start;
    gap: 11px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
    scrollbar-color: rgba(139,92,246,.35) transparent;
}
.vr-live-tile { scroll-snap-align: start; }
.vr-live-thumb {
    aspect-ratio: 16 / 9;
    border-radius: 11px;
    border-color: rgba(255,255,255,.09);
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.vr-live-tile:hover .vr-live-thumb {
    transform: translateY(-2px);
    border-color: rgba(139,92,246,.35);
    box-shadow: 0 14px 34px rgba(0,0,0,.27);
}
.vr-live-thumb::after { background: linear-gradient(transparent 42%,rgba(5,5,9,.82)); }
.vr-live-badge { border-radius: 5px; background: #ff3f67; box-shadow: 0 5px 16px rgba(255,63,103,.22); }
.vr-viewers { background: rgba(5,5,9,.76); backdrop-filter: blur(8px); }
.vr-live-overlay { bottom: 10px; }
.vr-live-overlay strong { font-size: 14px; }
.vr-live-overlay small { font-size: 10px; }

.vr-category-chips a { border-radius: 7px; }
.vr-filter-bar {
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: var(--surface);
}
.vr-creator-grid { grid-template-columns: repeat(5,minmax(0,1fr)); gap: 11px; }
.vr-creator-card { border-radius: 11px; }
.vr-creator-card:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(0,0,0,.22); }
.vr-creator-thumb { aspect-ratio: 4 / 3; }
.vr-creator-info { padding: 11px; }
.vr-creator-info strong { font-size: 13px; }
.vr-card-tags span { border-radius: 5px; }

/* Public creator profile */
.vr-profile-cover { border-radius: 0 0 18px 18px; }
.vr-profile-summary { border-radius: 13px; }
.vr-profile-avatar { box-shadow: 0 12px 34px rgba(0,0,0,.28); }
.vr-profile-primary-actions { gap: 6px; }
.vr-profile-statbar { border-radius: 11px; }
.vr-profile-tabs {
    position: sticky;
    top: 65px;
    z-index: 12;
    background: color-mix(in srgb,var(--bg) 92%,transparent);
    backdrop-filter: blur(14px);
}
.vr-media-card,
.vr-album-card,
.vr-tier-card,
.vr-post-card { border-radius: 11px; }
.vr-action-card.sticky { top: 78px; }
.vr-live-callout { border-radius: 9px; }

/* Room / live */
.vr-room-page { padding-top: 14px; }
.vr-room-topbar { margin-bottom: 9px; }
.vr-room-title-line h1 { font-size: 22px; }
.vr-room-grid { grid-template-columns: minmax(0,1fr) 360px; gap: 10px; }
.vr-video-shell { border-radius: 11px; }
.vr-video-shell .video-stage { min-height: clamp(460px, 62vh, 690px); }
.vr-video-controls { padding: 8px 10px; }
.video-control-button { border-radius: 8px; }
.vr-room-creator-bar {
    grid-template-columns: auto minmax(0,1fr) auto auto;
    border-radius: 10px;
    padding: 10px 11px;
}
.vr-room-avatar { width: 40px; height: 40px; }
.vr-room-meta span { border-radius: 5px; }

.vr-support-dock {
    display: grid;
    grid-template-columns: auto minmax(0,1fr);
    align-items: center;
    gap: 18px;
    padding: 12px 14px;
    border-radius: 10px;
    background: linear-gradient(110deg,rgba(139,92,246,.14),var(--surface) 44%);
}
.vr-support-dock .tip-form {
    display: grid;
    grid-template-columns: auto 86px minmax(150px,1fr) auto;
    gap: 7px;
    align-items: center;
}
.quick-tips { gap: 5px; }
.quick-tips button {
    min-width: 34px;
    height: 34px;
    border-radius: 999px;
    background: var(--surface-2);
    border: 1px solid var(--line);
    color: var(--text);
    font-size: 10px;
    font-weight: 850;
}
.quick-tips button:hover,
.quick-tips button.active { border-color: rgba(139,92,246,.48); background: rgba(139,92,246,.14); color: #ddd6fe; }

.vr-room-section { border-radius: 10px; }
.vr-gift-grid { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; }
.vr-gift-card { border-radius: 9px; padding: 7px; transition: transform .15s ease,border-color .15s ease; }
.vr-gift-card:hover { transform: translateY(-2px); border-color: rgba(139,92,246,.30); }
.vr-gift-card > button { min-height: 82px; }
.vr-gift-card > button > span { font-size: 24px; }

/* Critical V2.5 fix: chat no longer assigns the composer to the flexible row when the poll is absent. */
.vr-room-chat {
    position: sticky;
    top: 78px;
    display: flex !important;
    flex-direction: column;
    height: calc(100vh - 96px);
    min-height: 560px;
    max-height: 820px;
    overflow: hidden;
    border-radius: 11px;
    background: var(--surface);
}
.vr-room-chat > header,
.vr-room-chat > .vr-live-poll,
.vr-room-chat > .chat-tabs,
.vr-room-chat > .chat-form,
.vr-room-chat > footer { flex: 0 0 auto; }
.vr-room-chat > header { min-height: 52px; }
.vr-room-chat .chat-tabs { padding: 7px; gap: 4px; }
.vr-room-chat .chat-tabs button { min-height: 32px; border-radius: 7px; }
.vr-room-chat .chat-messages {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto;
    padding: 10px;
}
.chat-line { border-radius: 8px; padding: 7px; }
.chat-line:hover { background: rgba(139,92,246,.045); }
.chat-form {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) 42px !important;
    gap: 7px;
    padding: 9px !important;
    min-height: 58px;
    background: var(--surface);
    border-top: 1px solid var(--line);
}
.chat-form .input { height: 40px; min-height: 40px; }
.chat-form .button { width: 42px; min-width: 42px; height: 40px; padding: 0; }
.vr-room-chat > footer { min-height: 38px; padding: 0 10px; }
.vr-room-chat > .report-form:not([hidden]) {
    position: absolute;
    left: 9px;
    right: 9px;
    bottom: 9px;
    z-index: 8;
    display: grid;
    gap: 7px;
    padding: 12px;
    border: 1px solid rgba(255,63,103,.22);
    border-radius: 10px;
    background: color-mix(in srgb,var(--surface) 96%,#000 4%);
    box-shadow: 0 18px 50px rgba(0,0,0,.42);
}

/* Client dashboard */
.vr-client-dashboard { padding-top: 22px; }
.vr-client-hero {
    padding: 20px 22px;
    border-radius: 12px;
    background: radial-gradient(circle at 90% 10%,rgba(236,72,153,.08),transparent 30%),linear-gradient(120deg,rgba(139,92,246,.12),var(--surface) 50%);
}
.vr-client-hero h1 { font-size: clamp(29px,3vw,35px); }
.vr-client-metrics { gap: 8px; }
.vr-client-metrics article { border-radius: 9px; min-height: 88px; }
.vr-client-panel { border-radius: 10px; }
.vr-client-media-card { border-radius: 9px; }

/* Creator Studio */
.vr-studio-hero { padding: 2px 0 4px; }
.vr-studio-hero h1 { font-size: clamp(30px,3vw,38px); }
.vr-studio-metrics { gap: 8px; }
.vr-studio-metrics article { min-height: 92px; border-radius: 9px; }
.vr-studio-layout { grid-template-columns: minmax(0,1fr) 320px; gap: 11px; }
.vr-live-console,
.vr-studio-card { border-radius: 11px; }
.vr-live-console.is-live {
    border-color: rgba(255,63,103,.27);
    background: linear-gradient(130deg,rgba(255,63,103,.06),var(--surface) 46%);
}
.vr-progress-hero { background: linear-gradient(135deg,rgba(139,92,246,.14),rgba(139,92,246,.06)); }
.vr-quick-actions a { border: 1px solid transparent; }
.vr-quick-actions a:hover { border-color: rgba(139,92,246,.22); background: rgba(139,92,246,.09); }

/* Admin / staff command center */
.vr-admin-pro-strip { gap: 8px; }
.vr-admin-pro-strip > div { border-radius: 9px; min-height: 82px; }
.admin-command-bar { border-radius: 10px; }
.admin-metrics { gap: 8px; }
.admin-metrics .metric-card { min-height: 96px; border-radius: 9px; }
.metric-card::after { opacity: .42; }
.danger-card { border-color: rgba(255,63,103,.22) !important; }
.quick-link-grid a { transition: border-color .14s ease,background .14s ease; }
.quick-link-grid a:hover { border-color: rgba(139,92,246,.24); background: rgba(139,92,246,.075); }
.inline-reason .button.danger { min-height: 34px; font-size: 10px; letter-spacing: .04em; }

.vr-staff-hub {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 10px;
    margin-top: 18px;
}
.vr-staff-hub a {
    display: grid;
    gap: 7px;
    min-height: 122px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: var(--surface);
    transition: transform .15s ease,border-color .15s ease;
}
.vr-staff-hub a:hover { transform: translateY(-2px); border-color: rgba(139,92,246,.28); }
.vr-staff-hub a .icon { width: 21px; height: 21px; color: #a78bfa; }
.vr-staff-hub a strong { font-size: 15px; }
.vr-staff-hub a span { color: var(--muted); font-size: 11px; }

/* Messaging */
.vr-inbox-shell,
.vr-chat-shell { border-radius: 12px; border-color: var(--line); box-shadow: none; }
.vr-inbox-sidebar { background: var(--surface); }
.vr-conversation-row { border-radius: 8px; }
.vr-conversation-row:hover,
.vr-conversation-row.active { background: rgba(139,92,246,.075); }
.vr-message-thread { background: radial-gradient(circle at 50% 0%,rgba(139,92,246,.05),transparent 30%); }
.vr-dm { border-radius: 12px; }

/* Auth / account */
.auth-page,
.auth-shell {
    background: radial-gradient(circle at 15% 25%,rgba(139,92,246,.12),transparent 30%),radial-gradient(circle at 86% 70%,rgba(236,72,153,.065),transparent 28%),var(--bg)!important;
}
.auth-card {
    border-radius: 14px !important;
    border-color: var(--line) !important;
    box-shadow: 0 26px 75px rgba(0,0,0,.30) !important;
}
.auth-card h1 { font-size: clamp(30px,4vw,36px)!important; }
.security-icon { border-radius: 10px !important; }

/* Footer */
.site-footer { padding: 32px 0; background: #09090e; }

/* Motion kept intentionally subtle. */
@media (prefers-reduced-motion: reduce) {
    *,*::before,*::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}

@media (max-width: 1280px) {
    .vr-creator-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
    .vr-room-grid { grid-template-columns: minmax(0,1fr) 340px; }
    .vr-gift-grid { grid-template-columns: repeat(4,1fr); }
}

@media (max-width: 1040px) {
    .vr-explore-grid { grid-template-columns: 164px minmax(0,1fr); gap: 16px; }
    .vr-creator-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
    .vr-room-grid { grid-template-columns: 1fr; }
    .vr-room-chat { position: static; height: 640px; max-height: none; }
    .vr-studio-layout { grid-template-columns: 1fr; }
    .vr-staff-hub { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 820px) {
    :root { --shell: min(100% - 22px,1480px); }
    .demo-ribbon { gap: 16px; }
    .header-inner { min-height: 58px; }
    .nav-links { display: none; }
    .vr-explore-grid { grid-template-columns: 1fr; }
    .vr-discovery-side { display: none; }
    .vr-welcome-strip,
    .vr-guest-hero { min-height: 0; }
    .vr-live-rail { grid-auto-columns: min(78vw,310px); }
    .vr-creator-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .vr-support-dock { grid-template-columns: 1fr; }
    .vr-support-dock .tip-form { grid-template-columns: 1fr 1fr; }
    .vr-support-dock .quick-tips { grid-column: 1 / -1; }
    .vr-support-dock .tip-form input[name="message"] { grid-column: 1 / -1; }
    .vr-gift-grid { grid-template-columns: repeat(2,1fr); }
    .vr-staff-hub { grid-template-columns: 1fr; }
}

@media (max-width: 540px) {
    :root { --shell: min(100% - 16px,1480px); }
    .demo-ribbon span:last-child { display: none; }
    .brand > span:nth-child(2) { font-size: 18px; }
    .brand small { display: none; }
    .wallet-pill { padding: 0 9px; }
    .user-chip-copy { display: none !important; }
    .vr-welcome-strip,
    .vr-guest-hero { padding: 17px; }
    .vr-welcome-strip h1,
    .vr-guest-hero h1 { font-size: 28px; }
    .vr-live-stats { width: 100%; }
    .vr-live-stats div { min-width: 0; flex: 1; }
    .vr-live-rail { grid-auto-columns: 82vw; }
    .vr-creator-grid { gap: 7px; }
    .vr-creator-info footer { display: grid; gap: 2px; }
    .vr-room-topbar { align-items: flex-start; }
    .vr-video-shell .video-stage { min-height: 320px; }
    .vr-room-creator-bar { grid-template-columns: auto 1fr auto; }
    .vr-room-meta { display: none; }
    .vr-room-chat { height: 590px; min-height: 520px; }
    .vr-studio-metrics,
    .vr-client-metrics,
    .vr-admin-pro-strip,
    .admin-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); }
}