/*
 * VioletRoom V2.5.2 Pulse UI
 * Visual-only refinement: denser spacing, immersive live rooms, stronger contrast,
 * richer gift/tip presentation and consistent premium surfaces across roles.
 */

:root {
    --vr-252-purple: #8d35ff;
    --vr-252-purple-2: #6d24ff;
    --vr-252-pink: #ff3f92;
    --vr-252-live: #ff315d;
    --vr-252-cyan: #20c8ff;
    --vr-252-green: #25df79;
    --vr-252-gold: #ffc044;
    --vr-252-deep: #08070b;
    --vr-252-panel: #111016;
    --vr-252-panel-2: #17141e;
    --vr-252-line: rgba(255,255,255,.09);
    --vr-252-glow: 0 14px 38px rgba(111,36,255,.22);
}

/* ---------- GLOBAL RHYTHM ---------- */
.shell { width: min(100% - 24px, 1540px); }
.header-inner { min-height: 56px !important; }
.site-header .icon-button,
.site-header .wallet-pill,
.site-header .user-chip { min-height: 38px; }
.site-header .nav-links a { min-height: 38px; }

.button {
    border-radius: 9px !important;
    font-weight: 850 !important;
    transition: transform .14s ease, box-shadow .14s ease, filter .14s ease, border-color .14s ease !important;
}
.button:hover { transform: translateY(-1px); }
.button.primary,
.button.purple {
    background: linear-gradient(135deg,#a54cff 0%,#802cff 46%,#651cff 100%) !important;
    box-shadow: 0 10px 24px rgba(112,34,255,.28), inset 0 1px rgba(255,255,255,.22) !important;
}
.button.primary:hover,
.button.purple:hover {
    box-shadow: 0 14px 32px rgba(112,34,255,.38), inset 0 1px rgba(255,255,255,.24) !important;
}
.button.secondary {
    background: linear-gradient(135deg,#ff5aa0,#f02f7b) !important;
    box-shadow: 0 9px 22px rgba(240,47,123,.24) !important;
}
.button.danger,
.button.danger.ghost {
    background: linear-gradient(135deg,#ff4d6d,#ef2450) !important;
    box-shadow: 0 9px 22px rgba(239,36,80,.22) !important;
}

.input { border-radius: 9px !important; }
.vr-kicker,
.eyebrow { letter-spacing: .14em !important; }

/* Tighter generic vertical rhythm without flattening sections. */
.vr-client-dashboard,
.vr-studio-page,
.admin-page,
.profile-page { padding-top: 16px !important; }
.vr-client-panel,
.vr-studio-card,
.panel,
.form-card { border-radius: 12px !important; }

/* ---------- IMMERSIVE LIVE EXPERIENCE ---------- */
body.vr-live-experience {
    color: #f8f6fb;
    background:
        radial-gradient(circle at 14% -8%, rgba(121,44,255,.17), transparent 30%),
        radial-gradient(circle at 84% 10%, rgba(255,49,93,.08), transparent 22%),
        var(--vr-252-deep) !important;
}
body.vr-live-experience #main-content {
    background: transparent;
}
body.vr-live-experience .site-footer {
    background: #07060a !important;
    border-top-color: rgba(255,255,255,.06) !important;
}

body.vr-live-experience .vr-room-page,
body.vr-live-experience .private-room {
    --bg: #08070b;
    --surface: #111016;
    --surface-2: #17141e;
    --surface-3: #211c2b;
    --text: #f8f6fb;
    --muted: #9f98aa;
    --line: rgba(255,255,255,.09);
    --purple: #9b50ff;
    --purple-strong: #7627ff;
    --live: #ff315d;
}

.vr-room-page { padding: 8px 0 42px !important; }
.vr-room-topbar {
    margin-bottom: 7px !important;
    min-height: 44px;
    align-items: center !important;
}
.vr-room-title-line { margin-top: 2px !important; }
.vr-room-title-line h1 { font-size: 19px !important; letter-spacing: -.025em !important; }
.vr-room-topbar p { margin: 2px 0 0 !important; color: #8f8899 !important; }
.vr-back-link { color: #bca7dd !important; }
.connection-chip {
    background: #17131e !important;
    border: 1px solid rgba(155,80,255,.22) !important;
    color: #c7b6db !important;
}

.vr-room-grid {
    grid-template-columns: minmax(0,1fr) 382px !important;
    gap: 8px !important;
}
.vr-room-main { gap: 8px !important; }

.vr-video-shell {
    border-radius: 12px !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    background: #030306 !important;
    box-shadow: 0 18px 50px rgba(0,0,0,.28), 0 0 0 1px rgba(126,46,255,.05) !important;
}
.vr-video-shell .video-stage {
    min-height: clamp(390px, 48vw, 610px) !important;
    background:
        radial-gradient(circle at 50% 45%, rgba(90,31,154,.11), transparent 34%),
        linear-gradient(180deg,#030305,#050407) !important;
}
.vr-video-controls {
    min-height: 48px;
    padding: 6px 8px !important;
    background: linear-gradient(180deg,#111016,#0c0b10) !important;
    border-top-color: rgba(255,255,255,.07) !important;
}
.video-control-button {
    width: 38px !important;
    height: 36px !important;
    border-radius: 9px !important;
    background: #191620 !important;
    border-color: rgba(255,255,255,.10) !important;
    color: #eee9f5 !important;
}
.video-control-button:hover {
    background: #241d30 !important;
    border-color: rgba(155,80,255,.38) !important;
    box-shadow: 0 7px 18px rgba(90,31,154,.22);
}

.vr-room-creator-bar {
    padding: 8px 10px !important;
    gap: 9px !important;
    border-color: rgba(255,255,255,.09) !important;
    background: linear-gradient(100deg,#111016 0%,#15111c 55%,#111016 100%) !important;
    box-shadow: inset 0 1px rgba(255,255,255,.025) !important;
}
.vr-room-avatar {
    width: 36px !important;
    height: 36px !important;
    background: linear-gradient(145deg,#9f48ff,#ff3d92) !important;
    box-shadow: 0 7px 18px rgba(139,53,255,.28);
}
.vr-room-creator-bar > div:nth-child(2) strong { color: #fff !important; font-size: 12px; }
.vr-room-creator-bar > div:nth-child(2) span { color: #918a9b !important; font-size: 9px !important; }
.vr-room-meta span {
    color: #aaa2b2 !important;
    background: #1b1721 !important;
    border: 1px solid rgba(255,255,255,.055);
    padding: 5px 7px !important;
}
.vr-room-creator-bar .button.ghost {
    color: #fff !important;
    background: #211a2b !important;
    border-color: rgba(155,80,255,.28) !important;
}

/* Tip dock: compact, vivid, one clear action row. */
.vr-support-dock {
    min-height: 68px;
    padding: 9px 11px !important;
    gap: 14px !important;
    align-items: center !important;
    border: 1px solid rgba(143,55,255,.38) !important;
    background:
        radial-gradient(circle at 0% 50%, rgba(152,69,255,.20), transparent 25%),
        linear-gradient(100deg,#1c1427 0%,#17131e 48%,#111016 100%) !important;
    box-shadow: inset 0 1px rgba(255,255,255,.035), 0 8px 24px rgba(62,21,104,.12) !important;
}
.vr-support-dock .vr-kicker { color: #c883ff !important; }
.vr-support-dock h2 { color: #fff !important; font-size: 17px !important; margin: 2px 0 0 !important; white-space: nowrap; }
.vr-support-dock .tip-form {
    grid-template-columns: auto 88px minmax(170px,1fr) auto !important;
    gap: 6px !important;
}
.quick-tips { gap: 5px !important; flex-wrap: nowrap !important; }
.quick-tips button {
    min-width: 35px !important;
    height: 34px !important;
    color: #eee9f6 !important;
    background: #25202d !important;
    border-color: rgba(255,255,255,.10) !important;
}
.quick-tips button:hover,
.quick-tips button.active {
    color: #fff !important;
    background: linear-gradient(135deg,#9d47ff,#7225ff) !important;
    border-color: rgba(255,255,255,.18) !important;
    box-shadow: 0 7px 17px rgba(118,39,255,.34), inset 0 1px rgba(255,255,255,.18) !important;
}
.vr-support-dock .input {
    height: 38px !important;
    min-height: 38px !important;
    color: #f3eff7 !important;
    background: #211c28 !important;
    border-color: rgba(255,255,255,.10) !important;
}
.vr-support-dock .input::placeholder { color: #77707e !important; }
.vr-support-dock .button { min-height: 38px !important; }

/* Gifts: less empty space, stronger visual identity per item. */
.vr-room-section {
    padding: 11px !important;
    border-color: rgba(255,255,255,.09) !important;
    background: #111016 !important;
    box-shadow: inset 0 1px rgba(255,255,255,.022) !important;
}
.vr-room-section .vr-section-head { margin-bottom: 8px !important; }
.vr-room-section .vr-section-head h2 { color: #fff !important; font-size: 19px !important; margin-top: 2px !important; }
.vr-room-section .muted { color: #918a9c !important; }
.vr-gift-grid { gap: 7px !important; }
.vr-gift-card {
    padding: 6px !important;
    border-radius: 10px !important;
    background: #17141d !important;
    border-color: rgba(255,255,255,.08) !important;
    box-shadow: inset 0 1px rgba(255,255,255,.025);
}
.vr-gift-card:nth-child(1) { background: linear-gradient(135deg,rgba(255,61,143,.15),#17141d 56%) !important; border-color: rgba(255,61,143,.28) !important; }
.vr-gift-card:nth-child(2) { background: linear-gradient(135deg,rgba(145,61,255,.16),#17141d 56%) !important; border-color: rgba(145,61,255,.30) !important; }
.vr-gift-card:nth-child(3) { background: linear-gradient(135deg,rgba(32,200,255,.14),#17141d 56%) !important; border-color: rgba(32,200,255,.26) !important; }
.vr-gift-card:nth-child(4) { background: linear-gradient(135deg,rgba(255,192,68,.16),#17141d 56%) !important; border-color: rgba(255,192,68,.28) !important; }
.vr-gift-card:hover {
    transform: translateY(-2px) scale(1.006) !important;
    box-shadow: 0 10px 24px rgba(0,0,0,.24) !important;
}
.vr-gift-card > button {
    min-height: 58px !important;
    padding: 7px !important;
    display: grid !important;
    grid-template-columns: 40px minmax(0,1fr) !important;
    grid-template-rows: auto auto !important;
    column-gap: 9px !important;
    align-items: center !important;
    place-items: initial !important;
    text-align: left !important;
}
.vr-gift-card > button > span {
    grid-row: 1 / 3;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #fff !important;
    font-size: 18px !important;
    background: linear-gradient(145deg,#9e42ff,#f43d95);
    box-shadow: 0 7px 18px rgba(139,53,255,.24);
}
.vr-gift-card:nth-child(3) > button > span { background: linear-gradient(145deg,#22baf5,#377dff); }
.vr-gift-card:nth-child(4) > button > span { color:#251700 !important; background: linear-gradient(145deg,#ffd66e,#ffad25); }
.vr-gift-card strong { color:#fff !important; font-size:11px !important; }
.vr-gift-card small { color:#c589ff !important; font-size:10px !important; font-weight:850; }
.vr-gift-card select {
    height: 34px !important;
    min-height: 34px !important;
    margin-top: 3px !important;
    color:#ddd7e5 !important;
    background:#211c28 !important;
    border-color:rgba(255,255,255,.09) !important;
}

.vr-tip-menu-grid { gap: 6px !important; }
.vr-tip-menu-grid > div {
    min-height: 42px;
    align-items: center;
    padding: 8px 10px !important;
    color:#dcd7e3 !important;
    background: linear-gradient(90deg,#191620,#151219) !important;
    border: 1px solid rgba(255,255,255,.07);
    border-left: 3px solid #8d35ff;
}
.vr-tip-menu-grid > div:nth-child(2) { border-left-color:#ff3f92; }
.vr-tip-menu-grid > div:nth-child(3) { border-left-color:#20c8ff; }
.vr-tip-menu-grid > div:nth-child(4) { border-left-color:#ffc044; }
.vr-tip-menu-grid b { color:#bf83ff !important; }

/* Chat: denser, darker, more live-product than admin panel. */
.vr-room-chat {
    top: 70px !important;
    height: calc(100vh - 82px) !important;
    min-height: 570px !important;
    max-height: 860px !important;
    border-radius: 12px !important;
    border-color: rgba(255,255,255,.10) !important;
    background: #0f0e13 !important;
    box-shadow: 0 18px 50px rgba(0,0,0,.30) !important;
}
.vr-room-chat > header {
    min-height: 48px !important;
    padding: 9px 11px !important;
    background: linear-gradient(180deg,#15121b,#111016) !important;
}
.vr-room-chat > header strong { color:#fff !important; }
.vr-room-chat .chat-tabs {
    padding: 5px 7px !important;
    background:#111016 !important;
    border-bottom:1px solid rgba(255,255,255,.07);
}
.vr-room-chat .chat-tabs button {
    min-height: 31px !important;
    color:#958e9f !important;
    background:transparent !important;
}
.vr-room-chat .chat-tabs button.active {
    color:#fff !important;
    background: linear-gradient(135deg,rgba(142,53,255,.34),rgba(255,63,146,.12)) !important;
    border:1px solid rgba(155,80,255,.24) !important;
}
.vr-room-chat .chat-messages {
    padding: 8px !important;
    background:
        radial-gradient(circle at 50% 0%, rgba(128,48,220,.07), transparent 26%),
        #0c0b0f !important;
}
.vr-room-chat .chat-line {
    grid-template-columns: 23px minmax(0,1fr) !important;
    gap: 6px !important;
    padding: 5px 4px !important;
    border-radius: 7px !important;
}
.vr-chat-avatar { width:23px !important; height:23px !important; font-size:7px !important; }
.vr-room-chat .chat-line b { color:#bf80ff !important; font-size:9px !important; }
.vr-room-chat .chat-line span { color:#d7d1dc !important; font-size:10px !important; }
.vr-room-chat .chat-line.tip {
    background: linear-gradient(90deg,rgba(36,220,119,.12),rgba(139,53,255,.07)) !important;
    border-color: rgba(36,220,119,.17) !important;
}
.vr-room-chat .chat-form {
    padding: 7px !important;
    min-height: 54px !important;
    background:#121017 !important;
}
.vr-room-chat .chat-form .input {
    height: 38px !important;
    min-height: 38px !important;
    background:#1d1923 !important;
}
.vr-room-chat .chat-form .button {
    width: 40px !important;
    min-width: 40px !important;
    height: 38px !important;
}
.vr-room-chat > footer { min-height:34px !important; padding:0 9px !important; background:#0f0d12 !important; }
.vr-room-chat > .report-form:not([hidden]) {
    left: 8px !important;
    right: 8px !important;
    bottom: 8px !important;
    padding: 10px !important;
    background: linear-gradient(180deg,#1b1118,#151014) !important;
    border-color: rgba(255,49,93,.38) !important;
    box-shadow: 0 22px 60px rgba(0,0,0,.58) !important;
}

/* ---------- PRIVATE ROOM: same visual language ---------- */
body.vr-live-experience .private-room { padding-top: 12px !important; }
body.vr-live-experience .private-room .room-head { margin-bottom: 9px !important; }
body.vr-live-experience .private-room .room-grid { grid-template-columns:minmax(0,1fr) 382px !important; gap:8px !important; }
body.vr-live-experience .private-room .video-panel,
body.vr-live-experience .private-room .chat-panel,
body.vr-live-experience .private-room .private-billing {
    background:#111016 !important;
    border-color:rgba(255,255,255,.09) !important;
    border-radius:12px !important;
    box-shadow:0 18px 48px rgba(0,0,0,.26) !important;
}
body.vr-live-experience .private-room .video-stage {
    min-height:clamp(390px,48vw,610px) !important;
    background:#030305 !important;
}
body.vr-live-experience .private-room .video-controls {
    padding:7px 9px !important;
    background:#0f0e13 !important;
}
body.vr-live-experience .private-room .privacy-callout {
    margin:9px !important;
    padding:10px !important;
    background:linear-gradient(90deg,rgba(139,53,255,.12),rgba(32,200,255,.05)) !important;
    border-color:rgba(139,53,255,.24) !important;
}
body.vr-live-experience .private-room .chat-panel {
    top:70px !important;
    height:calc(100vh - 82px) !important;
    min-height:570px !important;
}

/* ---------- HOME / DISCOVERY: stronger content hierarchy ---------- */
.vr-welcome-strip,
.vr-guest-hero { padding: 18px 20px !important; }
.vr-welcome-strip h1,
.vr-guest-hero h1 { margin-bottom: 5px !important; }
.vr-live-rail { gap: 9px !important; }
.vr-live-tile {
    border-radius: 12px !important;
    border-color: rgba(139,53,255,.18) !important;
    box-shadow: 0 10px 25px rgba(0,0,0,.08) !important;
}
.vr-live-tile:hover {
    transform: translateY(-3px) !important;
    border-color: rgba(155,80,255,.42) !important;
    box-shadow: 0 16px 34px rgba(83,31,143,.16) !important;
}
.vr-creator-grid { gap: 9px !important; }
.vr-creator-card { border-radius: 11px !important; }

/* ---------- CLIENT / CREATOR / ADMIN: denser professional workspaces ---------- */
.vr-client-metrics,
.vr-studio-metrics,
.admin-metrics,
.vr-admin-pro-strip { gap: 7px !important; }
.vr-client-metrics article,
.vr-studio-metrics article,
.admin-metrics .metric-card,
.vr-admin-pro-strip > div { min-height: 82px !important; padding: 12px !important; }
.vr-studio-layout { gap: 9px !important; }
.vr-quick-actions,
.quick-link-grid,
.vr-staff-hub { gap: 8px !important; }
.vr-quick-actions a,
.quick-link-grid a,
.vr-staff-hub a {
    border-radius: 11px !important;
    box-shadow: inset 0 1px rgba(255,255,255,.02);
}
.admin-command-bar { padding: 12px 14px !important; }

/* ---------- PUBLIC PROFILE ---------- */
.vr-profile-cover { min-height: 190px !important; }
.vr-profile-summary { padding: 14px !important; }
.vr-profile-tabs { gap: 4px !important; padding: 5px !important; }
.vr-profile-tabs a { border-radius: 8px !important; }
.vr-profile-tabs a.active {
    color:#fff !important;
    background:linear-gradient(135deg,#913cff,#6c25ff) !important;
    box-shadow:0 8px 18px rgba(108,37,255,.24) !important;
}

/* ---------- TABLES / FORMS ---------- */
table td, table th { padding-top: 9px !important; padding-bottom: 9px !important; }
.form-card { padding: 14px !important; }

@media (max-width: 1280px) {
    .vr-room-grid,
    body.vr-live-experience .private-room .room-grid { grid-template-columns:minmax(0,1fr) 350px !important; }
    .vr-video-shell .video-stage,
    body.vr-live-experience .private-room .video-stage { min-height:clamp(360px,46vw,560px) !important; }
}

@media (max-width: 1040px) {
    .vr-room-grid,
    body.vr-live-experience .private-room .room-grid { grid-template-columns:1fr !important; }
    .vr-room-chat,
    body.vr-live-experience .private-room .chat-panel {
        position:static !important;
        height:580px !important;
        max-height:none !important;
    }
}

@media (max-width: 820px) {
    .shell { width:min(100% - 16px,1540px); }
    .vr-support-dock { grid-template-columns:1fr !important; gap:8px !important; }
    .vr-support-dock .tip-form { grid-template-columns:1fr 1fr !important; }
    .vr-support-dock .quick-tips { grid-column:1/-1; overflow-x:auto; }
    .vr-support-dock .tip-form input[name="message"] { grid-column:1/-1; }
    .vr-gift-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
}

@media (max-width: 540px) {
    .vr-room-page { padding-top:4px !important; }
    .vr-room-topbar { align-items:flex-start !important; }
    .vr-video-shell .video-stage,
    body.vr-live-experience .private-room .video-stage { min-height:280px !important; }
    .vr-room-creator-bar { grid-template-columns:auto minmax(0,1fr) auto !important; }
    .vr-room-meta { display:none !important; }
    .vr-gift-grid { grid-template-columns:1fr !important; }
    .vr-tip-menu-grid { grid-template-columns:1fr 1fr !important; }
    .vr-room-chat,
    body.vr-live-experience .private-room .chat-panel { height:540px !important; min-height:500px !important; }
}