/* ═══════════════════════════════════════════════════════════════
   RAVIN LIVE — clean light agent-desk panel (LiveChat-style)
   Slim icon rail (hover-expand) + bright content + tidy inbox.
   Single source of truth for the panel UI. Loaded last.
   ═══════════════════════════════════════════════════════════════ */

.dashboard-layout,
.plan-modal-card, .checkout-card, .rvn-confirm-card, .msg-edit-dialog {
    /* ── DARK MODE palette (gold accent) ── */
    --tx-strong: #e9ebef;
    --tx: #a8afb9;
    --tx-muted: #6e7681;
    --sf: #23252d;         /* cards on the content surface */
    --sf-2: #1b1d24;       /* subtle surface / inputs */
    --sf-3: #2b2e39;       /* hover */
    --bg: #191a20;         /* the content card surface */
    --ln: rgba(255,255,255,.08);
    --ln-strong: rgba(255,255,255,.16);
    --em: #eab308; --em-2: #facc15; --em-soft: rgba(234,179,8,.16); --em-ln: rgba(234,179,8,.4);
    --online: #10b981;
    --rail: #121317;
    --frame: #121317;      /* sidebar + header + outer frame */
    --sidebar: #121317;
    --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
    --shadow: 0 4px 10px rgba(0,0,0,.35), 0 16px 40px rgba(0,0,0,.4);
    --shadow-pop: 0 20px 50px rgba(0,0,0,.55);
    /* legacy var remap */
    --text: var(--tx); --text-soft: var(--tx); --text-muted: var(--tx-muted);
    --border: var(--ln); --border-strong: var(--ln-strong);
    --pearl: var(--sf-2); --cream: var(--sf-2);
    --ravin-green-dark: var(--em-2);
}

/* ─── SHELL: dark fixed frame; content is a rounded card that scrolls internally ─── */
.dashboard-layout { background: var(--frame); height: 100vh; overflow: hidden; }
.dashboard-sidebar {
    width: 248px !important;
    background: var(--frame) !important;
    border: none;
    box-shadow: none !important;
    overflow-y: auto;
    z-index: 80;
    display: flex; flex-direction: column;
}
.dashboard-sidebar::after { display: none !important; }
.dashboard-sidebar:hover { width: 248px !important; box-shadow: none !important; }

/* the shell (sidebar + header) is fixed; only the content card scrolls */
.dashboard-body {
    flex: 1;
    margin: 0;
    margin-right: 248px;
    height: 100vh;
    display: flex; flex-direction: column;
    background: var(--frame);
    overflow: hidden;
}
.dashboard-body .dashboard-main {
    margin: 8px 10px 10px 10px !important; flex: 1; min-height: 0;
    padding: 1.5rem 1.8rem 2.4rem;
    background: var(--bg) !important; color: var(--tx) !important;
    border-radius: 16px;
    border: 1px solid var(--ln);
    box-shadow: 0 8px 30px rgba(0,0,0,.28);
    overflow-y: auto;
}
.dashboard-main::before { display: none !important; }
.panel-container { max-width: 1180px; margin: 0 auto; }

/* brand — project header (logo square + name) */
.dashboard-sidebar .brand { padding: 1rem .8rem .6rem; border-bottom: none; }
.dashboard-sidebar .brand a { justify-content: flex-start; gap: .75rem; padding: .35rem .45rem; font-size: 1.3rem !important; color: var(--tx-strong); font-weight: 800; border-radius: 8px; }
.dashboard-sidebar .brand a:hover { background: var(--sf-3); }
.dashboard-sidebar .brand-mark { background: linear-gradient(135deg, var(--em), var(--em-2)) !important; box-shadow: none !important; width: 38px !important; height: 38px !important; border-radius: 11px !important; flex-shrink: 0; }
.dashboard-sidebar .brand-mark::before, .dashboard-sidebar .brand-mark::after { display: none !important; }
.dashboard-sidebar .brand-mark img { width: 64% !important; height: 64% !important; }

/* section label */
.dashboard-sidebar .panel-badge { display: block !important; margin: .85rem .95rem .35rem; padding: 0; font-size: .68rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--tx-muted); background: none !important; border: none !important; }

/* nav — labeled rows (GitLab) */
.dashboard-nav { padding: .35rem .55rem; flex: 0 0 auto; }
.dashboard-nav a {
    position: relative;
    display: flex; align-items: center; justify-content: flex-start; gap: .7rem;
    padding: .5rem .55rem; border-radius: 8px;
    color: var(--tx) !important; border: none !important;
    box-shadow: none !important; margin-bottom: 2px;
    font-size: .875rem; font-weight: 500;
    transition: background .14s, color .14s;
}
/* nav icons: local SVG files (Tabler set) as premium badged chips, recolored via mask */
.dashboard-nav a .nav-ic { width: 32px; height: 32px; flex-shrink: 0; border-radius: 10px; background: var(--sf-3); border: 1px solid var(--ln); display: flex; align-items: center; justify-content: center; transition: background .18s, border-color .18s, transform .18s; }
.dashboard-nav a .nav-ic::before { content: ''; width: 18px; height: 18px; background: var(--tx); transition: background .18s;
    -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }
.dashboard-nav a .nav-dot { display: none; }
.dashboard-nav a:hover { color: var(--tx-strong) !important; background: var(--sf-3) !important; }
.dashboard-nav a:hover .nav-ic { border-color: var(--em-ln); transform: translateY(-1px); }
.dashboard-nav a:hover .nav-ic::before { background: var(--em-2); }
.dashboard-nav a.active { color: var(--em-2) !important; background: var(--em-soft) !important; font-weight: 700; }
.dashboard-nav a.active .nav-ic { background: linear-gradient(135deg, var(--em-2), var(--em)); border-color: transparent; box-shadow: 0 4px 12px -2px rgba(234,179,8,.5); }
.dashboard-nav a.active .nav-ic::before { background: #1a1a1f; }

/* label — always visible, inline (not a tooltip) */
.dashboard-nav a .nav-label {
    position: static; opacity: 1; pointer-events: auto; transform: none;
    background: none; color: inherit; padding: 0; border: none; box-shadow: none;
    font-size: .875rem; font-weight: inherit; line-height: 1.3; white-space: nowrap; flex: 1;
}
.dashboard-nav a:hover .nav-label { transform: none; }

/* unread → count pill at row end */
.dashboard-nav a #nav-unread, .dashboard-nav a .nav-count {
    position: static !important; margin-inline-start: auto !important; top: auto; left: auto;
    min-width: 20px; height: 18px; box-sizing: border-box;
    padding: 0 6px !important; border-radius: 100px; background: var(--em) !important;
    color: #191a20 !important; font-size: .68rem !important; font-weight: 700;
    text-align: center; line-height: 18px; box-shadow: none;
}

/* sidebar footer — visible plan chip */
.dashboard-sidebar .sidebar-foot { display: block !important; margin-top: auto; padding: .7rem .85rem; border-top: 1px solid var(--ln); }
.sidebar-plan { display: flex; align-items: center; gap: .5rem; padding: .5rem .6rem; border-radius: 8px; background: var(--sf); border: 1px solid var(--ln); text-decoration: none; white-space: nowrap; overflow: hidden; }
.sidebar-plan-note { font-size: .7rem; color: var(--tx-muted); }

/* ─── TOPBAR — same dark color as the sidebar (part of the frame) ─── */
.panel-topbar {
    position: static; z-index: 60;
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    height: 54px; padding: 0 1.4rem 0 1.6rem;
    background: var(--frame);
    border-bottom: none;
    flex-shrink: 0;
}
.tb-page { font-size: .95rem; font-weight: 700; color: var(--tx-strong); letter-spacing: -.01em; white-space: nowrap; }
/* light header controls */
.panel-topbar .tb-search { background: var(--sf-2); border-color: var(--ln); color: var(--tx-muted); }
.panel-topbar .tb-search:focus-within { background: var(--sf-3); border-color: var(--em); box-shadow: 0 0 0 3px var(--em-soft); }
.panel-topbar .tb-search input { color: var(--tx-strong); }
.panel-topbar .tb-search input::placeholder { color: var(--tx-muted); }
.panel-topbar .tb-search svg { color: var(--tx-muted); }
.panel-topbar .tb-search-kbd { color: var(--tx-muted); border-color: var(--ln-strong); }
.panel-topbar .tb-pill { background: var(--sf); border-color: var(--ln-strong); color: var(--tx); box-shadow: var(--shadow-sm); }
.panel-topbar .tb-pill.is-on { background: var(--sf); border-color: var(--ln-strong); color: var(--tx-strong); }
.tb-actions { display: flex; align-items: center; gap: .55rem; }
.tb-pill {
    display: inline-flex; align-items: center; gap: .45rem;
    padding: .44rem .9rem; border-radius: 100px;
    background: var(--sf); border: 1px solid var(--ln-strong);
    color: var(--tx); font-family: inherit; font-size: .77rem; font-weight: 700; cursor: pointer;
    transition: all .2s; box-shadow: var(--shadow-sm);
}
.tb-pill.is-on { border-color: var(--em-ln); color: var(--em-2); background: var(--em-soft); }
.tb-dot { width: 8px; height: 8px; border-radius: 50%; background: #98a2b3; }
.tb-icon-btn { width: 38px; height: 38px; border-radius: 11px; border: 1px solid var(--ln-strong); background: var(--sf); cursor: pointer; font-size: .95rem; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-sm); }
.tb-icon-btn:hover { border-color: var(--em); }
.tb-user-wrap { position: relative; }
.tb-avatar {
    width: 38px; height: 38px; border-radius: 11px; border: none; cursor: pointer;
    background: linear-gradient(135deg, #eab308, #ca8a04); color: #fff;
    font-family: inherit; font-weight: 800; font-size: .85rem; color: #191a20; box-shadow: 0 4px 12px rgba(234,179,8,.28);
}
.tb-menu { position: absolute; top: calc(100% + 10px); left: 0; min-width: 228px; background: var(--sf); border: 1px solid var(--ln); border-radius: 14px; box-shadow: var(--shadow-pop); padding: .4rem; z-index: 90; }
.tb-menu[hidden] { display: none; }
.tb-menu-head { padding: .6rem .75rem .7rem; border-bottom: 1px solid var(--ln); margin-bottom: .35rem; }
.tb-menu-name { font-weight: 800; font-size: .86rem; color: var(--tx-strong); }
.tb-menu-sub { font-size: .7rem; color: var(--tx-muted); margin-top: 2px; direction: ltr; text-align: right; }
.tb-menu-item { display: block; width: 100%; text-align: right; padding: .55rem .75rem; border: none; background: none; border-radius: 9px; cursor: pointer; font-family: inherit; font-size: .82rem; color: var(--tx) !important; text-decoration: none; }
.tb-menu-item:hover { background: var(--sf-2); color: var(--tx-strong) !important; }
.tb-menu-danger { color: #e11d48 !important; }
.tb-menu-danger:hover { background: rgba(225,29,72,.07); }

.mobile-topbar { background: #1c1d21 !important; border-bottom: 1px solid rgba(255,255,255,.08) !important; }

/* ─── HEADINGS + LINKS ─── */
.dashboard-main :is(h1,h2,h3,h4) { color: var(--tx-strong) !important; }
.dashboard-main .page-header h1 { font-size: 1.5rem; letter-spacing: -.03em; }
.dashboard-main .page-header p { color: var(--tx-muted) !important; }
.dashboard-main a:not(.btn):not(.inbox-item) { color: var(--em-2); }
.dashboard-main ::selection { background: rgba(234,179,8,.2); }
/* custom thin dark scrollbars (content card + sidebar + inner regions) */
.dashboard-main, .dashboard-sidebar, .dashboard-main * { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.16) transparent; }
.dashboard-main::-webkit-scrollbar, .dashboard-sidebar::-webkit-scrollbar, .dashboard-main *::-webkit-scrollbar { width: 8px; height: 8px; }
.dashboard-main::-webkit-scrollbar-thumb, .dashboard-sidebar::-webkit-scrollbar-thumb, .dashboard-main *::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 100px; border: 2px solid transparent; background-clip: padding-box; }
.dashboard-main::-webkit-scrollbar-thumb:hover, .dashboard-sidebar::-webkit-scrollbar-thumb:hover, .dashboard-main *::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.3); background-clip: padding-box; }
.dashboard-main::-webkit-scrollbar-track, .dashboard-sidebar::-webkit-scrollbar-track, .dashboard-main *::-webkit-scrollbar-track { background: transparent; }
.dashboard-main::-webkit-scrollbar-corner { background: transparent; }

/* ─── BUTTONS ─── */
.dashboard-main .btn { border-radius: 11px; font-weight: 700; }
.dashboard-main .btn-glow, .plan-modal .btn-glow, .checkout-card .btn-glow, .rvn-confirm-card .btn-glow {
    background: linear-gradient(135deg, #eab308, #ca8a04) !important; color: #191a20 !important;
    box-shadow: 0 1px 2px rgba(234,179,8,.3), 0 8px 20px rgba(234,179,8,.22) !important; border: none;
}
.dashboard-main .btn-glow:hover { transform: translateY(-1px); filter: brightness(1.04); }
.dashboard-main .btn-primary { background: #e9ebef !important; color: #191a20 !important; box-shadow: var(--shadow-sm) !important; transition: background .18s, transform .15s, box-shadow .18s, filter .18s; }
.dashboard-main .btn-primary:hover { background: linear-gradient(135deg, #facc15, #eab308) !important; color: #191a20 !important; transform: translateY(-1px); box-shadow: 0 8px 20px rgba(234,179,8,.28) !important; }
.dashboard-main .btn-outline { background: var(--sf) !important; border: 1px solid var(--ln-strong) !important; color: var(--tx) !important; box-shadow: var(--shadow-sm) !important; backdrop-filter: none !important; }
.dashboard-main .btn-outline:hover { border-color: var(--em) !important; color: var(--em-2) !important; background: var(--sf) !important; }
.dashboard-main .btn-ghost { color: var(--tx-muted) !important; }
.dashboard-main .btn-ghost:hover { color: var(--tx-strong) !important; background: var(--sf-2) !important; }

/* ─── CARDS + STATS ─── */
.dashboard-main .card, .dashboard-main .admin-panel, .dashboard-main .inbox-panel, .dashboard-main .sales-stat-box {
    background: var(--sf) !important; border: 1px solid var(--ln) !important;
    box-shadow: var(--shadow) !important; backdrop-filter: none !important; border-radius: 16px; color: var(--tx);
}
.dashboard-main .card-hover:hover { transform: translateY(-3px); border-color: var(--em-ln) !important; box-shadow: 0 12px 32px rgba(234,179,8,.12) !important; }
.dashboard-main .stat-card { border-radius: 16px; overflow: hidden; }
.dashboard-main .stat-card::after { content: ''; position: absolute; top: 0; right: 1.2rem; left: 1.2rem; height: 2px; background: linear-gradient(90deg, transparent, var(--em), transparent); opacity: .5; }
.dashboard-main .stat-label { color: var(--tx-muted) !important; }
.dashboard-main .stat-value { color: var(--tx-strong) !important; font-size: 2.05rem; }
.dashboard-main .stat-card.teal { background: linear-gradient(155deg, rgba(234,179,8,.24), rgba(234,179,8,.06)) !important; border: 1px solid rgba(234,179,8,.32) !important; }
.dashboard-main .stat-card.teal .stat-label { color: rgba(255,255,255,.5) !important; }
.dashboard-main .stat-card.teal .stat-value { color: #facc15 !important; }
.dashboard-main .stat-card.gold .stat-value { color: var(--em-2) !important; }

/* ─── TABLES + ADMIN ─── */
.dashboard-main .admin-panel { overflow: hidden; }
.dashboard-main .admin-panel-head { border-bottom: 1px solid var(--ln) !important; }
.dashboard-main .admin-panel-head span { color: var(--tx-muted) !important; }
.dashboard-main .admin-table th { background: var(--sf-2) !important; color: var(--tx-muted) !important; border-bottom: 1px solid var(--ln) !important; backdrop-filter: none !important; }
.dashboard-main .admin-table td { border-bottom: 1px solid var(--ln) !important; color: var(--tx); }
.dashboard-main .admin-table tr:hover td { background: var(--sf-2) !important; }
.dashboard-main .admin-empty { color: var(--tx-muted) !important; }
.dashboard-main .admin-live, .dashboard-main .admin-online-toggle, .dashboard-main .inbox-page-filter { background: var(--sf) !important; border: 1px solid var(--ln-strong) !important; color: var(--tx) !important; backdrop-filter: none !important; }
.dashboard-main .admin-status.online { background: var(--em-soft) !important; color: var(--em-2) !important; }
.dashboard-main .admin-status.offline { background: var(--sf-2) !important; color: var(--tx-muted) !important; }
.dashboard-main .admin-role { background: var(--sf-2) !important; color: var(--tx) !important; }
.dashboard-main .admin-link { color: var(--em-2) !important; }
.dashboard-main .sales-stat-label, .dashboard-main .sales-bar-label { color: var(--tx-muted) !important; }
.dashboard-main .sales-stat-value { color: var(--tx-strong) !important; }
.dashboard-main .sales-bar-track { background: var(--sf-3) !important; }
.dashboard-main .tools-list-item { border-bottom: 1px solid var(--ln) !important; color: var(--tx); }
.dashboard-main .feature-list-item { background: var(--sf-2) !important; }
.dashboard-main .feature-list-icon { background: var(--em-soft) !important; color: var(--em-2) !important; }
.dashboard-main .feature-list-name { color: var(--tx-strong) !important; }
.dashboard-main .feature-list-meta { color: var(--tx-muted) !important; }
.dashboard-main .feature-matrix th { background: var(--sf-2) !important; color: var(--tx-muted) !important; }
.dashboard-main .feature-matrix th, .dashboard-main .feature-matrix td { border-bottom: 1px solid var(--ln) !important; color: var(--tx); }
.dashboard-main .feature-matrix-cat td { background: var(--em-soft) !important; color: var(--em-2) !important; }
.dashboard-main .feature-check { color: var(--em-2) !important; }
.dashboard-main .feature-dash { color: #cdd3dc !important; }
.dashboard-main .feature-addon-price { color: var(--em-2) !important; }
.dashboard-main .price-amount { color: var(--tx-strong) !important; }
.dashboard-main .price-label, .dashboard-main .price-features { color: var(--tx-muted) !important; }
.dashboard-main .sales-plan-base { background: rgba(148,163,184,.15) !important; color: #64748b !important; }
.dashboard-main .sales-plan-plus { background: rgba(59,130,246,.12) !important; color: #2563eb !important; }
.dashboard-main .sales-plan-pro { background: var(--em-soft) !important; color: var(--em-2) !important; }
.dashboard-main .sales-plan-elite { background: rgba(234,179,8,.12) !important; color: #b45309 !important; }

/* ─── FORMS ─── */
.dashboard-main .form-group label { color: var(--tx) !important; font-weight: 600; }
.dashboard-main .form-control, .dashboard-main select.form-control, .dashboard-main textarea.form-control {
    background: var(--sf) !important; border: 1px solid var(--ln-strong) !important; color: var(--tx-strong) !important; border-radius: 11px;
}
.dashboard-main .form-control::placeholder { color: var(--tx-muted) !important; }
.dashboard-main .form-control:focus { border-color: var(--em) !important; box-shadow: 0 0 0 3px rgba(234,179,8,.13) !important; outline: none; }

/* ─── ALERTS + BADGES ─── */
.dashboard-main .alert-success { background: var(--em-soft) !important; border: 1px solid var(--em-ln) !important; color: var(--em-2) !important; }
.dashboard-main .alert-danger, .dashboard-main .alert-error { background: rgba(225,29,72,.07) !important; border: 1px solid rgba(225,29,72,.22) !important; color: #be123c !important; }
.dashboard-main .badge-teal, .dashboard-main .badge-green { background: var(--em-soft) !important; color: var(--em-2) !important; }
.dashboard-main .badge-red { background: rgba(225,29,72,.1) !important; color: #be123c !important; }
.dashboard-main .badge-dark { background: var(--sf-3) !important; color: #facc15 !important; }

/* ─── INBOX (agent desk) ─── */
.dashboard-main .inbox-page-bar.inbox-panel { background: var(--sf) !important; }
.dashboard-main .inbox-page-title { color: var(--tx-strong) !important; }
.dashboard-main .inbox-page-desc { color: var(--tx-muted) !important; }
.dashboard-main .inbox-sidebar { background: var(--sf) !important; backdrop-filter: none !important; }
.dashboard-main .inbox-profile { background: var(--sf-2) !important; backdrop-filter: none !important; }
.dashboard-main .inbox-sidebar-header { background: var(--sf) !important; border-bottom: 1px solid var(--ln) !important; backdrop-filter: none !important; }
.dashboard-main .inbox-search { background-color: var(--sf-2) !important; border: 1px solid var(--ln-strong) !important; color: var(--tx-strong) !important; }
.dashboard-main .inbox-search::placeholder { color: var(--tx-muted) !important; }
.dashboard-main .inbox-item { border-bottom: 1px solid var(--ln) !important; color: var(--tx) !important; }
.dashboard-main .inbox-item:hover { background: var(--sf-2) !important; }
.dashboard-main .inbox-item.active { background: var(--em-soft) !important; border-inline-start: 2px solid var(--em) !important; }
.dashboard-main .inbox-item-name { color: var(--tx-strong) !important; }
.dashboard-main .inbox-item-preview, .dashboard-main .inbox-item-meta { color: var(--tx-muted) !important; }
.dashboard-main .inbox-avatar { background: linear-gradient(135deg, #eab308, #ca8a04) !important; color: #191a20 !important; }
.dashboard-main .inbox-unread { background: var(--em) !important; color: #191a20 !important; }
.dashboard-main .inbox-empty-icon { background: var(--em-soft) !important; border: 1px solid var(--em-ln) !important; color: var(--em-2) !important; }
.dashboard-main .chat-pro-header { background: var(--sf) !important; border-bottom: 1px solid var(--ln) !important; backdrop-filter: none !important; }
.dashboard-main .chat-pro-messages { background: var(--sf-2) !important; backdrop-filter: none !important; }
.dashboard-main .chat-pro-input { background: var(--sf) !important; border-top: 1px solid var(--ln) !important; backdrop-filter: none !important; }
.dashboard-main .chat-pro-input .form-control { background: var(--sf-2) !important; }
.dashboard-main .msg-bubble.visitor { background: var(--sf-3) !important; border: 1px solid var(--ln) !important; color: var(--tx-strong) !important; backdrop-filter: none !important; }
.dashboard-main .msg-bubble.agent { background: linear-gradient(135deg, #eab308, #ca8a04) !important; color: #191a20 !important; border: none; }
.dashboard-main .msg-bubble.agent .msg-time { color: rgba(25,26,32,.6); opacity: 1; }
.dashboard-main .msg-bubble.system { background: var(--sf-3) !important; color: var(--tx-muted) !important; }
.dashboard-main .msg-time { color: var(--tx-muted); }
.dashboard-main .msg-edited { color: var(--tx-muted) !important; }
.dashboard-main .chat-typing-indicator { color: var(--tx-muted) !important; }
.dashboard-main .inbox-canned-btn { background: var(--sf) !important; border: 1px solid var(--ln-strong) !important; color: var(--tx) !important; }
.dashboard-main .inbox-canned-btn:hover { border-color: var(--em) !important; color: var(--em-2) !important; }
.dashboard-main .profile-label { color: var(--tx-muted) !important; }
.dashboard-main .profile-value { color: var(--tx) !important; }
.dashboard-main .profile-link { color: var(--em-2) !important; }
.dashboard-main .profile-field { border-bottom: 1px solid var(--ln) !important; }
.dashboard-main .profile-actions { border-top: 1px solid var(--ln) !important; }
.dashboard-main .inbox-profile-header { background: var(--sf) !important; border-bottom: 1px solid var(--ln) !important; }
.dashboard-main .inbox-profile-name { color: var(--tx-strong) !important; }
.dashboard-main .inbox-profile-site { color: var(--tx-muted) !important; }
.dashboard-main .inbox-profile-avatar { background: linear-gradient(135deg, #eab308, #ca8a04) !important; color: #191a20 !important; }
.dashboard-main .chat-pro-input .btn-attach { background: var(--sf-2) !important; border: 1px solid var(--ln-strong) !important; color: var(--tx-muted) !important; }
.dashboard-main .chat-pro-input .btn-attach:hover { border-color: var(--em) !important; color: var(--em-2) !important; }
.dashboard-main .attach-menu, .dashboard-main .msg-popover { background: var(--sf) !important; border: 1px solid var(--ln) !important; box-shadow: var(--shadow-pop) !important; }
.dashboard-main .attach-menu-item, .dashboard-main .msg-popover-item { color: var(--tx) !important; }
.dashboard-main .attach-menu-item:hover, .dashboard-main .msg-popover-item:hover { background: var(--sf-2) !important; color: var(--tx-strong) !important; }
/* full-bleed agent-desk layout: three flush columns, no page scroll */
.dashboard-body .dashboard-main:has(.inbox-layout) {
    padding: 0 !important; min-height: 0 !important;
    overflow: hidden !important;
    display: flex; flex-direction: column;
}
.panel-container:has(.inbox-layout) {
    max-width: none !important; margin: 0 !important;
    flex: 1; min-height: 0; display: flex; flex-direction: column;
}
.dashboard-main:has(.inbox-layout) .alert { margin: .7rem .7rem 0; flex-shrink: 0; }
.inbox-page-bar { display: none !important; }
.dashboard-main .inbox-layout,
.dashboard-main .inbox-layout.has-profile {
    gap: 0; height: 100%; flex: 1; min-height: 0;
    grid-template-columns: 344px minmax(0, 1fr);
    background: var(--sf); border-radius: 0;
}
.dashboard-main .inbox-layout.has-profile { grid-template-columns: 344px minmax(0, 1fr) 328px; }
.dashboard-main .inbox-panel { border-radius: 0 !important; border: none !important; box-shadow: none !important; }
.dashboard-main .inbox-main { border-inline: 1px solid var(--ln) !important; }
/* conversation list — LiveChat cards */
.dashboard-main .inbox-sidebar-header { padding: 0 .9rem; min-height: 66px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; }
.dashboard-main .inbox-search { padding: .6rem 2.3rem .6rem 1rem; border-radius: 10px; font-size: .82rem; }
.dashboard-main .inbox-item { padding: .8rem .95rem; gap: .7rem; align-items: center; }
.dashboard-main .inbox-avatar { width: 46px; height: 46px; border-radius: 50%; font-size: .95rem; font-weight: 700; }
.dashboard-main .inbox-item-name { font-size: .875rem; font-weight: 700; }
.dashboard-main .inbox-item-preview { font-size: .78rem; margin-top: 3px; }
.dashboard-main .inbox-item-meta { font-size: .68rem; margin-top: 3px; }
.dashboard-main .inbox-item.active { border-inline-start: 3px solid var(--em) !important; }
.dashboard-main .inbox-unread { min-width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; padding: 0 5px; }
/* chat thread */
.dashboard-main .chat-pro-header { padding: 0 1.25rem; min-height: 66px; box-sizing: border-box; }
.dashboard-main .chat-pro-header .inbox-avatar { width: 40px; height: 40px; border-radius: 50%; }
.dashboard-main .chat-pro-messages { padding: 1.5rem 1.75rem; gap: .55rem; }
.dashboard-main .msg-bubble { max-width: 66%; border-radius: 18px; box-shadow: 0 1px 2px rgba(16,24,40,.05); }
.dashboard-main .msg-bubble.visitor { border-radius: 18px 18px 18px 4px; }
.dashboard-main .msg-bubble.agent { border-radius: 18px 18px 4px 18px; }
.dashboard-main .chat-pro-input { padding: .85rem 1.25rem 1.1rem; }
.dashboard-main .chat-pro-input .form-control { border-radius: 12px; }
/* profile column */
.dashboard-main .inbox-profile-header { padding: 0 1rem; gap: .7rem; min-height: 66px; box-sizing: border-box; }
.dashboard-main .inbox-profile-avatar { width: 48px; height: 48px; border-radius: 50%; }
.dashboard-main .inbox-profile-name { font-size: .95rem; }
.dashboard-main .inbox-profile-body { padding: .5rem 1rem; }
.dashboard-main .profile-field { padding: .6rem 0; }

/* ─── MODALS (light) ─── */
.plan-modal, .checkout-modal, .rvn-confirm, .msg-edit-overlay { background: rgba(16,24,40,.5) !important; backdrop-filter: blur(4px); }
.plan-modal-card, .checkout-card, .rvn-confirm-card, .msg-edit-dialog { background: var(--sf) !important; color: #e9ebef !important; border: 1px solid var(--ln) !important; box-shadow: var(--shadow-pop) !important; }
.plan-modal-card :is(h1,h2,h3,h4), .checkout-card :is(h1,h2,h3,h4), .rvn-confirm-card :is(h1,h2,h3,h4), .checkout-title, .checkout-modal h2 { color: #e9ebef !important; }
.plan-modal-head p, .checkout-muted { color: var(--tx-muted) !important; }
.plan-pick { background: var(--sf) !important; border: 1px solid var(--ln-strong) !important; }
.plan-pick.featured { border-color: var(--em) !important; box-shadow: 0 0 0 1px var(--em), 0 18px 40px rgba(234,179,8,.16) !important; }
.plan-pick-name, .plan-pick-price { color: #e9ebef !important; }
.plan-pick-price span, .plan-pick ul { color: var(--tx-muted) !important; }
.plan-modal .btn-outline, .checkout-card .btn-outline, .rvn-confirm-card .btn-outline { background: var(--sf) !important; border: 1px solid var(--ln-strong) !important; color: #e9ebef !important; }
.checkout-section-title { color: #e9ebef !important; }
.checkout-plan-row { background: var(--em-soft) !important; border: 1px solid var(--em-ln) !important; }
.checkout-plan-row strong { color: #e9ebef !important; }
.checkout-addon-toggle { background: var(--sf) !important; border: 1px dashed var(--ln-strong) !important; color: #e9ebef !important; }
.checkout-addon { background: var(--sf) !important; border: 1px solid var(--ln-strong) !important; }
.ck-addon-info { color: #e9ebef !important; }
.ck-addon-price, .ck-toggle-plus { color: var(--em-2) !important; }
.checkout-discount input { background: var(--sf) !important; color: #e9ebef !important; border: 1px solid var(--ln-strong) !important; }
.ck-row { color: var(--tx-muted) !important; }
.ck-row > span:last-child { color: #e9ebef !important; }
.ck-total > span { color: #e9ebef !important; }
.rvn-confirm-text { color: #e9ebef !important; }
.rvn-confirm-card label { color: var(--tx) !important; }
.rvn-confirm-card .form-control { background: var(--sf) !important; color: #e9ebef !important; border: 1px solid var(--ln-strong) !important; }
.msg-edit-dialog .msg-edit-head { color: #e9ebef !important; }
.msg-edit-dialog .msg-edit-input { background: var(--sf-2) !important; color: #e9ebef !important; }

/* ─── TOP BANNER — floating rounded pill in the dark frame, matches the card ─── */
.top-banner { display: flex; align-items: center; justify-content: center; gap: 1rem; flex-wrap: wrap;
    margin: 8px; border-radius: 14px;
    padding: .7rem 1.4rem; font-size: .84rem; font-weight: 600; color: #fff;
    background: linear-gradient(100deg, #047857 0%, #eab308 58%, #facc15 100%);
    box-shadow: 0 8px 24px rgba(234,179,8,.26); }
.top-banner-trial { background: linear-gradient(100deg, #0f766e 0%, #14b8a6 100%); }
.top-banner-btn { background: #fff; color: #047857; padding: .42rem 1.2rem; border-radius: 100px;
    font-weight: 800; font-size: .78rem; text-decoration: none; box-shadow: 0 4px 12px rgba(0,0,0,.16); transition: transform .15s; }
.top-banner-btn:hover { transform: translateY(-1px); }

/* ─── TOPBAR SEARCH ─── */
.tb-context { flex: 0 0 auto; }
.tb-search { flex: 1 1 auto; max-width: 440px; margin: 0 auto; display: flex; align-items: center; gap: .5rem;
    background: var(--sf-2); border: 1px solid var(--ln); border-radius: 100px; padding: .5rem 1rem; color: var(--tx-muted); }
.tb-search:focus-within { border-color: var(--em); box-shadow: 0 0 0 3px rgba(234,179,8,.12); background: #fff; }
.tb-search input { flex: 1; min-width: 0; border: none; background: none; outline: none; font-family: inherit; font-size: .83rem; color: var(--tx-strong); }
.tb-search input::placeholder { color: var(--tx-muted); }
.tb-search-kbd { font-size: .64rem; color: var(--tx-muted); border: 1px solid var(--ln-strong); border-radius: 6px; padding: .1rem .4rem; white-space: nowrap; }

/* ─── GETTING STARTED (client home) ─── */
.gs-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 1.5rem; align-items: start; margin-bottom: 2rem; }
.gs-hello { margin-bottom: 1.35rem; }
.gs-hi { color: var(--tx-muted); font-size: .95rem; font-weight: 600; }
.gs-title { font-size: 1.7rem; font-weight: 800; letter-spacing: -.03em; color: var(--tx-strong); margin-top: .2rem; }
.gs-progress { display: flex; align-items: center; gap: .9rem; margin-bottom: 1.4rem; }
.gs-progress-bar { flex: 1; height: 8px; border-radius: 100px; background: var(--sf-3); overflow: hidden; }
.gs-progress-bar span { display: block; height: 100%; border-radius: 100px; background: linear-gradient(90deg, #eab308, #facc15); transition: width .5s; }
.gs-progress-num { font-size: .76rem; color: var(--tx-muted); white-space: nowrap; font-weight: 600; }
.gs-list { display: flex; flex-direction: column; gap: .75rem; }
.gs-item { display: flex; gap: 1rem; padding: 1.1rem 1.25rem; background: var(--sf); border: 1px solid var(--ln); border-radius: 16px; box-shadow: var(--shadow-sm); }
.gs-item.is-active { border-color: var(--em-ln); box-shadow: 0 6px 22px rgba(234,179,8,.1); }
.gs-check { flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--ln-strong);
    display: flex; align-items: center; justify-content: center; color: #fff; margin-top: 1px; }
.gs-item.is-done .gs-check { background: var(--em); border-color: var(--em); }
.gs-item.is-active .gs-check { border-color: var(--em); }
.gs-body { flex: 1; min-width: 0; }
.gs-item-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.gs-item-title { font-weight: 700; font-size: .92rem; color: var(--tx-strong); }
.gs-item.is-done .gs-item-title { text-decoration: line-through; color: var(--tx-muted); font-weight: 600; }
.gs-chev { color: var(--tx-muted); display: flex; }
.gs-chev:hover { color: var(--em-2); }
.gs-item-desc { color: var(--tx-muted); font-size: .83rem; line-height: 1.7; margin: .5rem 0 .9rem; }
.gs-cta { display: inline-block; text-decoration: none; }
.gs-aside { position: relative; }
.gs-preview { background: var(--sf); border: 1px solid var(--ln); border-radius: 20px; overflow: hidden; box-shadow: var(--shadow); }
.gs-preview-head { display: flex; align-items: center; gap: .6rem; padding: 1rem 1.1rem; background: linear-gradient(135deg, #eab308, #ca8a04); color: #fff; }
.gs-preview-avatar { width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.2); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: .8rem; }
.gs-preview-name { font-weight: 700; font-size: .86rem; }
.gs-preview-status { font-size: .68rem; opacity: .85; display: flex; align-items: center; gap: .3rem; }
.gs-preview-status span { width: 7px; height: 7px; border-radius: 50%; background: #fef08a; }
.gs-preview-body { padding: 1.1rem; display: flex; flex-direction: column; gap: .6rem; background: var(--sf-2); min-height: 176px; }
.gs-msg { max-width: 80%; padding: .6rem .9rem; border-radius: 14px; font-size: .8rem; line-height: 1.6; }
.gs-msg-in { align-self: flex-start; background: var(--sf-3); border: 1px solid var(--ln); color: var(--tx-strong); border-bottom-right-radius: 4px; }
.gs-msg-out { align-self: flex-end; background: linear-gradient(135deg, #eab308, #ca8a04); color: #fff; border-bottom-left-radius: 4px; }
.gs-preview-input { padding: .8rem 1.1rem; border-top: 1px solid var(--ln); color: var(--tx-muted); font-size: .8rem; }
.gs-launcher { position: absolute; bottom: -10px; left: 14px; width: 52px; height: 52px; border-radius: 50%; background: linear-gradient(135deg, #eab308, #ca8a04); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; box-shadow: 0 10px 26px rgba(234,179,8,.4); }
.gs-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 2rem; }
.gs-stat { background: var(--sf); border: 1px solid var(--ln); border-radius: 14px; padding: 1.1rem 1.25rem; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: .2rem; }
.gs-stat-num { font-size: 1.6rem; font-weight: 800; color: var(--tx-strong); }
.gs-stat-lbl { font-size: .76rem; color: var(--tx-muted); }
.gs-stat-add { align-items: center; justify-content: center; text-align: center; text-decoration: none; color: var(--em-2); font-weight: 700; border-style: dashed; border-color: var(--em-ln); }
.gs-sites-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
.gs-sites-head h2 { font-size: 1rem; font-weight: 800; color: var(--tx-strong); }
.gs-sites-head a { font-size: .8rem; color: var(--tx-muted); }
.gs-sites { display: grid; gap: .75rem; }
.gs-site { padding: 1.1rem 1.35rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; }
.gs-site-info { display: flex; align-items: center; gap: .9rem; }
.gs-site-dot { width: 11px; height: 11px; border-radius: 50%; }
.gs-site-info h3 { font-size: .9rem; font-weight: 700; color: var(--tx-strong); }
.gs-site-info span { font-size: .78rem; color: var(--tx-muted); }
.gs-site-actions { display: flex; gap: .5rem; }
@media (max-width: 900px) {
    .gs-grid { grid-template-columns: 1fr; }
    .gs-stats { grid-template-columns: repeat(2, 1fr); }
    .tb-search { display: none; }
}

/* ─── SHARED: page header + empty state (professional) ─── */
.dashboard-main .page-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.75rem; }
.dashboard-main .page-header > div { min-width: 0; }
.dashboard-main .page-header h1 { font-size: 1.5rem; font-weight: 800; letter-spacing: -.03em; color: var(--tx-strong); }
.dashboard-main .page-header p { color: var(--tx-muted); font-size: .86rem; margin-top: .3rem; line-height: 1.7; }
.empty-state { background: var(--sf); border: 1px solid var(--ln); border-radius: 20px; padding: 4rem 2rem; text-align: center; box-shadow: var(--shadow-sm); }
.empty-state-icon { width: 64px; height: 64px; border-radius: 18px; margin: 0 auto 1.25rem; display: flex; align-items: center; justify-content: center; background: var(--em-soft); color: var(--em-2); border: 1px solid var(--em-ln); }
.empty-state h3 { font-size: 1.05rem; font-weight: 800; color: var(--tx-strong); margin-bottom: .5rem; }
.empty-state p { color: var(--tx-muted); font-size: .88rem; max-width: 430px; margin: 0 auto 1.5rem; line-height: 1.9; }

/* ─── SITE CARDS ─── */
.site-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 1.25rem; }
.site-card { padding: 1.4rem 1.5rem; display: flex; flex-direction: column; gap: 1.1rem; transition: transform .18s, box-shadow .18s, border-color .18s; }
.site-card:hover { transform: translateY(-3px); border-color: var(--em-ln) !important; box-shadow: 0 12px 30px rgba(234,179,8,.1) !important; }
.site-card-top { display: flex; align-items: center; gap: .85rem; }
.site-card-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--c, #eab308); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c, #eab308) 20%, transparent); flex-shrink: 0; }
.site-card-id { flex: 1; min-width: 0; }
.site-card-id h3 { font-size: 1rem; font-weight: 800; color: var(--tx-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.site-card-id span { font-size: .78rem; color: var(--tx-muted); }
.site-status { display: inline-flex; align-items: center; gap: .35rem; font-size: .72rem; font-weight: 700; padding: .28rem .6rem; border-radius: 100px; flex-shrink: 0; }
.site-status.on { background: var(--em-soft); color: var(--em-2); }
.site-status.off { background: var(--sf-3); color: var(--tx-muted); }
.site-status .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.site-card-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; padding: 1rem 0; border-top: 1px solid var(--ln); border-bottom: 1px solid var(--ln); }
.site-card-stats > div { display: flex; flex-direction: column; gap: .2rem; text-align: center; }
.site-card-stats .num { font-size: 1.3rem; font-weight: 800; color: var(--tx-strong); }
.site-card-stats .num.accent { color: var(--em-2); }
.site-card-stats .num.sm { font-size: .8rem; font-weight: 700; line-height: 1.5; }
.site-card-stats .lbl { font-size: .68rem; color: var(--tx-muted); }
.site-card-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.site-card-actions .btn { flex: 1 1 auto; text-align: center; }

/* ─── DASHBOARD CHART ─── */
.chart-card { padding: 1.4rem 1.6rem 1.1rem; }
.chart-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: .6rem; }
.chart-head h2 { font-size: 1rem; font-weight: 800; color: var(--tx-strong); }
.chart-sub { font-size: .74rem; color: var(--tx-muted); }
.chart-legend { display: flex; gap: 1rem; }
.chart-lg { font-size: .78rem; color: var(--tx-muted); display: inline-flex; align-items: center; gap: .35rem; }
.chart-lg::before { content: ''; width: 9px; height: 9px; border-radius: 3px; background: var(--em); }
.chart-lg.alt::before { background: #fef08a; }
.chart-lg b { color: var(--tx-strong); font-size: .95rem; font-weight: 800; }
.chart-body { width: 100%; }
.chart-svg { width: 100%; height: auto; display: block; overflow: visible; }
.chart-labels { display: flex; justify-content: space-between; margin-top: .5rem; padding: 0 2px; }
.chart-labels span { font-size: .62rem; color: var(--tx-muted); direction: ltr; }

/* ─── CALL BUTTON (chat header) ─── */
.chat-call-btn { width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--em-ln); background: var(--em-soft); color: var(--em-2); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: all .18s; }
.chat-call-btn:hover { background: var(--em); color: #fff; border-color: var(--em); transform: translateY(-1px); }
.chat-call-btn:disabled { opacity: .5; cursor: default; }

/* ─── VOICE MESSAGE (operator composer) ─── */
.voice-rec-bar[hidden], .voice-pending[hidden] { display: none !important; }
.voice-rec-bar { display: flex; align-items: center; gap: .6rem; padding: .5rem .8rem; margin-bottom: .5rem;
    background: rgba(225,29,72,.06); border: 1px solid rgba(225,29,72,.22); border-radius: 12px; }
.voice-rec-dot { width: 10px; height: 10px; border-radius: 50%; background: #e11d48; animation: voicePulse 1s infinite; flex-shrink: 0; }
@keyframes voicePulse { 0%,100% { opacity: 1; } 50% { opacity: .25; } }
.voice-rec-time { font-weight: 800; color: #be123c; font-variant-numeric: tabular-nums; }
.voice-rec-label { flex: 1; font-size: .8rem; color: var(--tx-muted); }
.voice-pending { display: flex; align-items: center; gap: .55rem; padding: .45rem .7rem; margin-bottom: .5rem;
    background: var(--em-soft); border: 1px solid var(--em-ln); border-radius: 12px; }
.voice-pending-ic { font-size: 1.1rem; flex-shrink: 0; }
.voice-pending audio { flex: 1; height: 36px; min-width: 0; }
#voice-pending-remove { border: none; background: none; cursor: pointer; font-size: 1.35rem; line-height: 1; color: var(--tx-muted); padding: 0 .2rem; flex-shrink: 0; }
#voice-pending-remove:hover { color: #e11d48; }

/* ─── RESPONSIVE ─── */
.mobile-topbar { display: none !important; }
.tb-burger { display: none; background: none; border: none; color: var(--tx); cursor: pointer; padding: 6px; margin-inline-end: 4px; border-radius: 8px; }
.tb-burger:hover { background: var(--sf-3); color: var(--tx-strong); }
.sidebar-backdrop { position: fixed; inset: 0; z-index: 998; background: rgba(0,0,0,.55); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.sidebar-backdrop[hidden] { display: none; }

@media (max-width: 1024px) {
    .dashboard-main .admin-grid-2 { grid-template-columns: 1fr; }
    .user-form-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
    /* sidebar → slide-in drawer (display:flex overrides ravin.css display:none) */
    .dashboard-sidebar { display: flex !important; position: fixed !important; top: 0; bottom: 0; inset-inline-end: 0; z-index: 999; width: 270px;
        transform: translateX(100%); transition: transform .28s cubic-bezier(.4,0,.2,1); box-shadow: -12px 0 40px rgba(0,0,0,.5); }
    .dashboard-sidebar.is-open { transform: translateX(0); }
    .dashboard-body { margin: 0 !important; border-radius: 0; box-shadow: none; min-height: 100vh; height: auto; }
    .dashboard-body .dashboard-main { padding: 1rem; }
    .panel-topbar { padding: 0 1rem; }
    .tb-burger { display: inline-flex; }
    .tb-search { display: none; }
    .tb-page { font-size: .95rem; }
    .dashboard-main .page-header { margin-bottom: 1.15rem; }
    .dashboard-main .page-header h1 { font-size: 1.25rem; }
    .dashboard-main .stat-value { font-size: 1.7rem; }
    /* tables scroll instead of overflowing */
    .dashboard-main .admin-panel { overflow-x: auto; }
    .dashboard-main .admin-table { min-width: 560px; }
    .user-form-grid { grid-template-columns: 1fr; }
    .gs-grid, .gs-stats { grid-template-columns: 1fr; }
    /* inbox: single column, page scrolls normally (undo desktop full-height flex) */
    .dashboard-body .dashboard-main:has(.inbox-layout) { overflow: visible !important; display: block; }
    .panel-container:has(.inbox-layout) { display: block; min-height: 0; }
    .dashboard-main .inbox-layout, .dashboard-main .inbox-layout.has-profile { grid-template-columns: 1fr !important; height: auto; flex: none; }
    .dashboard-main .inbox-profile { display: none; }
    .ticket-filters { overflow-x: auto; flex-wrap: nowrap; }
    /* keep wide content inside the viewport */
    .dashboard-main .panel-container { max-width: 100%; }
    .dashboard-main .card, .dashboard-main form, .dashboard-main .page-header { max-width: 100% !important; }
    .dashboard-main pre, .dashboard-main .bento-code, .dashboard-main textarea, .dashboard-main table { max-width: 100%; overflow-x: auto; }
    .dashboard-main .btn-row, .dashboard-main .tb-tabs { flex-wrap: wrap; }
}

@media (max-width: 640px) {
    .dashboard-sidebar { width: 84vw !important; max-width: 320px; }
    .empty-state { padding: 2.5rem 1.25rem; }
    .page-header .btn { width: 100%; }
    .gs-stats { grid-template-columns: 1fr 1fr; }
}

/* ═══════════════════════════════════════════════════════════════
   AUTH — refined minimal-dark login, consistent with the panel
   (loaded last → overrides the older glass in ravin-panel.css §8)
   ═══════════════════════════════════════════════════════════════ */
.auth-split {
    background:
        radial-gradient(58% 52% at 84% 10%, rgba(234,179,8,.15), transparent 60%),
        radial-gradient(40% 40% at 6% 90%, rgba(234,179,8,.07), transparent 60%),
        linear-gradient(160deg, #0f1218 0%, #0b0c10 58%, #0d100e 100%) !important;
}
.auth-split::after { display: none !important; }
.auth-split::before { width: 520px; height: 520px; background: rgba(234,179,8,.12) !important; top: -14%; inset-inline-end: -8%; }

/* subtle dotted depth on the brand side */
.auth-brand::after { content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
    background-image: radial-gradient(circle, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 30px 30px;
    -webkit-mask-image: radial-gradient(ellipse 70% 70% at 40% 40%, #000, transparent 72%);
    mask-image: radial-gradient(ellipse 70% 70% at 40% 40%, #000, transparent 72%); }
.auth-brand-inner { position: relative; z-index: 1; max-width: 420px; }
.auth-logo { display:flex; align-items:center; gap:.6rem; margin-bottom:2.2rem; }
.auth-logo .t { color:#fff; font-weight:900; font-size:1.2rem; }
.auth-brand h1 { color:#fff; font-size:2.5rem; font-weight:900; letter-spacing:-.035em; line-height:1.18; }
.auth-brand p { color:rgba(255,255,255,.55); font-size:1.05rem; margin-top:.9rem; line-height:1.8; }
.auth-features { list-style:none; padding:0; margin:2.2rem 0; display:flex; flex-direction:column; gap:1.05rem; }
.auth-features li { display:flex; align-items:center; gap:.85rem; color:rgba(255,255,255,.82); font-size:.96rem; }
.auth-feature-ic { flex-shrink:0; width:40px; height:40px; border-radius:12px; background:rgba(234,179,8,.13); border:1px solid rgba(234,179,8,.3); color:#facc15; display:flex; align-items:center; justify-content:center; }
.auth-feature-ic svg { width:19px; height:19px; }
.auth-trust { display:inline-flex; align-items:center; gap:.5rem; color:rgba(255,255,255,.55); font-size:.82rem; border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.03); padding:.5rem .95rem; border-radius:100px; }
.auth-trust svg { color:#facc15; }

/* card — solid & crisp (minimal, not heavy glass) */
.auth-card {
    background: rgba(20,22,28,.86) !important;
    backdrop-filter: blur(14px) saturate(1.2);
    -webkit-backdrop-filter: blur(14px) saturate(1.2);
    border: 1px solid rgba(255,255,255,.1) !important;
    box-shadow: 0 30px 70px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.07) !important;
    border-radius: 22px !important; padding: 2.3rem 2rem !important;
}
.auth-card-logo { display:flex; align-items:center; gap:.55rem; justify-content:center; margin-bottom:1.5rem; }
.auth-card h2 { color:#fff !important; font-size:1.55rem; font-weight:900; text-align:center; letter-spacing:-.025em; }
.auth-card .sub { color:rgba(255,255,255,.5) !important; text-align:center; margin:.4rem 0 1.6rem; font-size:.9rem; }
.auth-card .form-group { margin-bottom:1.1rem; }
.auth-card label { color:rgba(255,255,255,.72) !important; font-size:.82rem; font-weight:700; margin-bottom:.45rem; display:block; }

/* input with leading icon */
.input-icon { position: relative; display:flex; align-items:center; }
.input-icon > svg { position:absolute; inset-inline-start:14px; color:rgba(255,255,255,.32); pointer-events:none; transition:color .2s; }
.input-icon:focus-within > svg { color:#facc15; }
.input-icon .form-control { padding-inline-start:42px !important; }
.auth-card .form-control {
    background: rgba(255,255,255,.05) !important; border:1px solid rgba(255,255,255,.13) !important;
    color:#fff !important; border-radius:12px !important; height:50px; font-size:.95rem;
}
.auth-card .form-control::placeholder { color:rgba(255,255,255,.28) !important; }
.auth-card .form-control:focus { border-color:#eab308 !important; background:rgba(255,255,255,.08) !important; box-shadow:0 0 0 3px rgba(234,179,8,.2) !important; }

/* primary button */
.auth-card .btn-glow { height:52px; border-radius:13px; font-size:1rem; font-weight:800; background:linear-gradient(135deg,#eab308,#ca8a04) !important; color:#fff !important; box-shadow:0 12px 28px rgba(234,179,8,.32) !important; margin-top:.5rem; transition:transform .18s, filter .18s; }
.auth-card .btn-glow:hover { transform:translateY(-1px); filter:brightness(1.06); }

/* divider */
.auth-divider { display:flex; align-items:center; gap:1rem; color:rgba(255,255,255,.35); font-size:.8rem; margin:1.6rem 0 1rem; }
.auth-divider::before, .auth-divider::after { content:''; flex:1; height:1px; background:rgba(255,255,255,.1); }

/* ═══════════════ SUPPORT TICKETS ═══════════════ */
.ticket-new { padding: 1.4rem 1.6rem; margin-bottom: 1.25rem; }
.ticket-new h2 { font-size: 1rem; font-weight: 800; margin-bottom: 1rem; color: var(--tx-strong); }
.ticket-new-row { display: grid; grid-template-columns: 1fr 180px; gap: .75rem; }
.ticket-back { font-size: .8rem; color: var(--tx-muted); }
.ticket-back:hover { color: var(--em-2); }
.ticket-subject { font-weight: 700; }
.ticket-meta { font-size: .72rem; color: var(--tx-muted); margin-top: 2px; }
.ticket-table tbody tr { cursor: pointer; }
.ticket-unread-row td:first-child { box-shadow: inset 3px 0 0 var(--em); }

.tk-status { display: inline-flex; align-items: center; gap: .35rem; font-size: .72rem; font-weight: 700; padding: .22rem .62rem; border-radius: 100px; }
.tk-status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.tk-status.open { background: var(--em-soft); color: var(--em-2); }
.tk-status.answered { background: rgba(16,185,129,.14); color: #34d399; }
.tk-status.closed { background: var(--sf-3); color: var(--tx-muted); }
.tk-pri { font-size: .74rem; font-weight: 700; }
.tk-pri-high { color: #f87171; } .tk-pri-normal { color: var(--tx); } .tk-pri-low { color: var(--tx-muted); }
.tk-flag { display: inline-block; font-size: .64rem; font-weight: 800; background: var(--em); color: #191a20; padding: .12rem .5rem; border-radius: 100px; margin-inline-start: .4rem; vertical-align: middle; }

.ticket-filters { display: flex; gap: .5rem; margin-bottom: 1.25rem; flex-wrap: wrap; }
.ticket-filter { font-size: .82rem; font-weight: 600; padding: .45rem .95rem; border-radius: 8px; background: var(--sf); border: 1px solid var(--ln); color: var(--tx); }
.ticket-filter:hover { border-color: var(--ln-strong); color: var(--tx-strong); }
.ticket-filter.active { background: var(--em-soft); border-color: var(--em-ln); color: var(--em-2); }

.ticket-thread { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 1.25rem; }
.tk-msg { display: flex; gap: .8rem; max-width: 84%; }
.tk-msg.client { align-self: flex-start; }
.tk-msg.staff { align-self: flex-end; flex-direction: row-reverse; }
.tk-msg-avatar { flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: .85rem; }
.tk-msg.client .tk-msg-avatar { background: var(--sf-3); color: var(--tx-strong); }
.tk-msg.staff .tk-msg-avatar { background: linear-gradient(135deg, var(--em), var(--em-2)); color: #191a20; }
.tk-msg-body { background: var(--sf); border: 1px solid var(--ln); border-radius: 14px; padding: .8rem 1rem; min-width: 0; }
.tk-msg.staff .tk-msg-body { background: var(--em-soft); border-color: var(--em-ln); }
.tk-msg-head { display: flex; align-items: center; gap: .6rem; margin-bottom: .35rem; }
.tk-msg-head b { font-size: .82rem; color: var(--tx-strong); }
.tk-msg-head span { font-size: .68rem; color: var(--tx-muted); }
.tk-msg-text { font-size: .9rem; line-height: 1.85; color: var(--tx); word-break: break-word; }

.ticket-reply { padding: 1.1rem 1.3rem; }
.ticket-reply-foot { display: flex; justify-content: flex-end; margin-top: .8rem; }
.ticket-closed { padding: 1.5rem; text-align: center; color: var(--tx-muted); }
@media (max-width: 620px) { .ticket-new-row { grid-template-columns: 1fr; } .tk-msg { max-width: 100%; } }

/* getting-started support card (replaces the old chat mockup) */
.gs-support { background: var(--sf); border: 1px solid var(--ln); border-radius: 20px; padding: 34px 28px; text-align: center; box-shadow: var(--shadow-sm); }
.gs-support-ic { width: 66px; height: 66px; margin: 0 auto 18px; border-radius: 18px; background: linear-gradient(135deg, var(--em), var(--em-2)); color: #191a20; display: flex; align-items: center; justify-content: center; }
.gs-support h3 { font-size: 1.18rem; font-weight: 800; color: var(--tx-strong); margin-bottom: .6rem; }
.gs-support p { font-size: .9rem; color: var(--tx); line-height: 1.85; margin-bottom: 1.4rem; }
.gs-support-note { font-size: .72rem; color: var(--tx-muted); margin-top: 1rem; }

/* ── user management + discount codes (owner) ── */
.user-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1rem 1.2rem; margin-bottom: 1.2rem; }
.user-form-grid .form-group { margin: 0; }
.user-search { flex: 1 1 220px; min-width: 200px; margin: 0; }
.user-search .form-control { height: 100%; }
.user-role-select { display: inline-block; width: auto; min-width: 118px; padding: .35rem 1.9rem .35rem .7rem !important; font-size: .8rem; height: auto; }
.role-badge { display: inline-flex; align-items: center; gap: .35rem; font-size: .72rem; font-weight: 700; padding: .24rem .66rem; border-radius: 100px; }
.role-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.role-badge.role-client { background: rgba(59,130,246,.14); color: #60a5fa; }
.role-badge.role-support { background: rgba(16,185,129,.14); color: #34d399; }
.role-badge.role-admin { background: var(--em-soft); color: var(--em-2); }
.discount-code { display: inline-block; direction: ltr; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-weight: 800; font-size: .84rem; letter-spacing: .04em; color: var(--em-2); background: var(--em-soft); border: 1px solid var(--em-ln); padding: .2rem .6rem; border-radius: 7px; }

/* dashboard quick-ticket form + tickets link */
.gs-support { text-align: right; }
.gs-support-head { display: flex; align-items: center; gap: .8rem; margin-bottom: 1.1rem; }
.gs-support-head .gs-support-ic { width: 46px; height: 46px; margin: 0; border-radius: 13px; flex-shrink: 0; }
.gs-support-head h3 { margin: 0 0 .2rem; text-align: right; }
.gs-ticket-form { display: flex; flex-direction: column; gap: .7rem; }
.gs-ticket-row { display: grid; grid-template-columns: 1fr 130px; gap: .7rem; }
.gs-ticket-form textarea { resize: vertical; line-height: 1.7; }
.gs-tickets-link { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-top: 1rem; padding: .85rem 1rem; border-radius: 12px; background: var(--sf-2); border: 1px solid var(--ln); color: var(--tx-strong); font-weight: 700; font-size: .88rem; transition: border-color .15s, background .15s; }
.gs-tickets-link:hover { border-color: var(--em-ln); background: var(--em-soft); color: var(--em-2); }
.gs-tickets-link > span { display: inline-flex; align-items: center; gap: .55rem; }
.gs-tickets-badge { background: var(--em); color: #191a20; font-size: .74rem; font-weight: 800; min-width: 22px; height: 22px; padding: 0 .4rem; border-radius: 100px; display: inline-flex; align-items: center; justify-content: center; }
@media (max-width: 620px) { .gs-ticket-row { grid-template-columns: 1fr; } }

/* ticket image attachments */
.tk-attach { display: inline-block; margin-top: .6rem; border-radius: 12px; overflow: hidden; border: 1px solid var(--ln); max-width: 260px; }
.tk-attach img { display: block; max-width: 100%; height: auto; }
.tk-attach:hover { border-color: var(--em-ln); }
.tk-attach-btn { display: inline-flex; align-items: center; gap: .45rem; cursor: pointer; font-size: .82rem; font-weight: 600; color: var(--tx); background: var(--sf-2); border: 1px solid var(--ln); padding: .5rem .85rem; border-radius: 9px; margin-inline-end: auto; transition: border-color .15s, color .15s; max-width: 220px; overflow: hidden; }
.tk-attach-btn span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tk-attach-btn:hover { border-color: var(--em-ln); color: var(--em-2); }
.tk-attach-btn svg { flex-shrink: 0; }

/* blog cover uploader */
.blog-cover-field { display: flex; gap: 1rem; align-items: flex-start; }
.blog-cover-preview { width: 140px; height: 90px; object-fit: cover; border-radius: 12px; border: 1px solid var(--ln); flex-shrink: 0; background: var(--sf-2); }
@media (max-width: 560px) { .blog-cover-field { flex-direction: column; } }

/* login captcha */
/* captcha image sits on the LEFT of the input (row-reverse keeps the input RTL
   so the Persian placeholder renders correctly) */
.captcha-row { display: flex; align-items: center; gap: .6rem; flex-direction: row-reverse; }
.captcha-row .captcha-input { text-align: center; letter-spacing: .12em; }
.captcha-row .captcha-img { border-radius: 10px; flex-shrink: 0; background: #23252d; border: 1px solid rgba(255,255,255,.1); height: 46px; width: 138px; object-fit: cover; }
.captcha-reload { flex-shrink: 0; width: 40px; height: 46px; display: flex; align-items: center; justify-content: center; border-radius: 10px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); color: rgba(255,255,255,.7); cursor: pointer; transition: color .15s, border-color .15s; }
.captcha-reload:hover { color: #facc15; border-color: rgba(234,179,8,.5); }
.captcha-row .captcha-input { flex: 1; min-width: 0; }

/* professional icon polish */
.feature-lock-ic { width: 56px; height: 56px; margin: 0 auto .9rem; border-radius: 16px; display: flex; align-items: center; justify-content: center; background: var(--sf-3); color: var(--tx-muted); }
.attach-menu-icon, .msg-file-icon, .voice-pending-ic { display: inline-flex; align-items: center; justify-content: center; }

/* password strength meter (admin add-user form) */
.pw-meter { margin-top: .55rem; display: flex; align-items: center; gap: .7rem; }
.pw-bars { display: flex; gap: 4px; flex: 1; }
.pw-bars span { height: 5px; flex: 1; border-radius: 100px; background: var(--sf-3); transition: background .25s; }
.pw-label { font-size: .74rem; font-weight: 800; white-space: nowrap; color: var(--tx-muted); }
.pw-meter[data-score="1"] .pw-bars span:nth-child(-n+1) { background: #f87171; }
.pw-meter[data-score="2"] .pw-bars span:nth-child(-n+2) { background: #fb923c; }
.pw-meter[data-score="3"] .pw-bars span:nth-child(-n+3) { background: #facc15; }
.pw-meter[data-score="4"] .pw-bars span { background: #34d399; }
.pw-meter[data-score="1"] .pw-label { color: #f87171; }
.pw-meter[data-score="2"] .pw-label { color: #fb923c; }
.pw-meter[data-score="3"] .pw-label { color: #facc15; }
.pw-meter[data-score="4"] .pw-label { color: #34d399; }

/* dedicated inbox-access link box */
.op-link-row td { background: var(--sf-2) !important; }
.inbox-link-box { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.inbox-link-row { display: flex; align-items: center; gap: .5rem; flex: 1; min-width: 260px; }
.inbox-link-input { flex: 1; min-width: 200px; direction: ltr; text-align: left; font-size: .72rem !important; font-family: ui-monospace, monospace; padding: .4rem .6rem !important; }

/* ── page/tab transition animation ── */
@keyframes rvnPageIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes rvnNavIn { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: none; } }
.dashboard-main .panel-container { animation: rvnPageIn .34s cubic-bezier(.22,1,.36,1); }
.dashboard-main .page-header { animation: rvnPageIn .3s cubic-bezier(.22,1,.36,1); }
/* staggered sidebar nav entrance */
.dashboard-nav a { animation: rvnNavIn .3s cubic-bezier(.22,1,.36,1) backwards; }
.dashboard-nav a:nth-child(1){animation-delay:.02s}.dashboard-nav a:nth-child(2){animation-delay:.05s}.dashboard-nav a:nth-child(3){animation-delay:.08s}.dashboard-nav a:nth-child(4){animation-delay:.11s}.dashboard-nav a:nth-child(5){animation-delay:.14s}.dashboard-nav a:nth-child(6){animation-delay:.17s}.dashboard-nav a:nth-child(7){animation-delay:.2s}.dashboard-nav a:nth-child(8){animation-delay:.23s}.dashboard-nav a:nth-child(9){animation-delay:.26s}.dashboard-nav a:nth-child(10){animation-delay:.29s}
.dashboard-nav a.active .nav-ic { animation: rvnPop .3s cubic-bezier(.34,1.4,.6,1); }
@keyframes rvnPop { 0%{transform:scale(.7)} 60%{transform:scale(1.15)} 100%{transform:scale(1)} }
@media (prefers-reduced-motion: reduce) { .dashboard-main .panel-container, .dashboard-main .page-header, .dashboard-nav a, .dashboard-nav a.active .nav-ic { animation: none; } }

/* ── checkout modal: dark controls + gold accents (was light-on-dark) ── */
.checkout-card { border-radius: 20px !important; padding: 1.6rem !important; }
.checkout-plan-row { border-radius: 14px !important; }
.ck-period, .checkout-addon-toggle, .checkout-discount input, .checkout-addon, .ck-plan-btn {
    background: var(--sf-2) !important; color: var(--tx) !important; border-color: var(--ln-strong) !important; }
.ck-period:hover, .checkout-addon-toggle:hover, .checkout-addon:hover, .ck-plan-btn:hover { border-color: var(--em-ln) !important; }
.ck-period.active { background: var(--em-soft) !important; border-color: var(--em) !important; box-shadow: 0 0 0 1px var(--em) !important; color: var(--em-2) !important; }
.ck-period-off { background: linear-gradient(135deg,#facc15,#eab308) !important; color: #191a20 !important; }
.checkout-close { background: var(--sf-3) !important; color: var(--tx) !important; }
.checkout-close:hover { background: var(--sf-2) !important; color: #fff !important; }
.checkout-discount input { direction: rtl !important; text-align: right !important; }
.checkout-invoice { border-color: var(--ln) !important; }
.ck-row { color: var(--tx-muted) !important; }
.ck-row > span:last-child { color: var(--tx-strong) !important; }
.checkout-addon:hover { background: var(--sf-3) !important; }
/* plan switcher inside the modal */
.ck-plan-pick { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: .45rem; }
.ck-plan-btn { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: .6rem .4rem; border: 1px solid var(--ln-strong); border-radius: 12px; cursor: pointer; font-family: inherit; font-weight: 700; font-size: .82rem; transition: all .15s; text-align: center; }
.ck-plan-btn .ck-plan-price { font-size: .68rem; color: var(--tx-muted); font-weight: 600; }
.ck-plan-btn.active { background: var(--em-soft) !important; border-color: var(--em) !important; box-shadow: 0 0 0 1px var(--em) !important; color: var(--em-2) !important; }
.ck-plan-btn.active .ck-plan-price { color: var(--em-2); }