/**
 * File: support-chat/assets/css/chat.css
 * Purpose: Styles for the live-support chat - staff inbox, player widget and
 *          the standalone player chat page. Sits on top of the site's own
 *          variables (--bg, --card, --text, --text-dim, --border, --gold).
 * Module: Live Support / Assets
 */

/* Dark palette for the standalone player chat page (chat.css loads without the
   site's style.css there, so the theme variables must exist locally). Values
   mirror assets/css/style.css :root so embedded pages are unaffected. */
:root {
    --bg-0: #070a12;
    --bg-1: #0b0f1a;
    --bg-2: #111726;
    --bg-card: #141b2d;
    --border: rgba(255, 255, 255, .07);
    --border-strong: rgba(255, 255, 255, .14);
    --text: #e9ecf5;
    --text-dim: #98a2bd;
    --gold: #ffd54a;
    --gold-2: #ff8f00;
}

/* Standalone player chat page (chat.php) renders without the site's style.css.
   data-theme="dark" identifies that page on its own, mirroring the site theme. */
body[data-theme="dark"] {
    color: var(--text);
    background: var(--bg-0);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
body[data-theme="dark"] .text-dim { color: var(--text-dim) !important; }
body[data-theme="dark"] .btn-soft {
    background: rgba(255, 255, 255, .06);
    border: 1px solid var(--border);
    color: var(--text);
}
body[data-theme="dark"] .btn-soft:hover { background: rgba(255, 255, 255, .1); color: var(--text); }
body[data-theme="dark"] .form-control,
body[data-theme="dark"] .form-select {
    background-color: var(--bg-2);
    color: var(--text);
    border-color: var(--border);
}
body[data-theme="dark"] .form-control::placeholder { color: var(--text-dim); }
body[data-theme="dark"] .form-select option { background-color: var(--bg-2); color: var(--text); }
body[data-theme="dark"] a { color: var(--gold); }

/* ---------- staff inbox layout ---------- */
.sc-inbox {
    height: calc(100vh - 200px);
    min-height: 480px;
    display: grid;
    grid-template-columns: 340px 1fr 300px;
    overflow: hidden;
}
.sc-inbox-cols { display: contents; }

/* live-support.php panes (the real markup) */
.sc-inbox > .card {
    color: var(--text);
    min-width: 0;
    min-height: 0;
    background: var(--bg-card);
}
.sc-list { display: flex; flex-direction: column; }
.sc-list-toolbar { padding: 10px 12px 8px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.sc-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; }
.sc-tabs::-webkit-scrollbar { display: none; }
.sc-tabs .btn { white-space: nowrap; padding: 2px 9px; font-size: 0.75rem; }
.sc-filter-row { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; }
.sc-filter-row::-webkit-scrollbar { display: none; }
.sc-filt { flex: 0 0 auto; font-size: 0.72rem; padding-block: 1px; color: var(--text); background-color: var(--bg-2); }
.sc-list-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.sc-list-foot { flex-shrink: 0; }

.sc-chat { display: flex; flex-direction: column; overflow: hidden; }
.sc-chat-wrap { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.sc-empty {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 10px; color: var(--text-dim); font-size: 1.05rem;
}
.sc-empty i { font-size: 2.6rem; color: var(--gold); }
#scMessages {
    flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
    padding: 14px; display: flex; flex-direction: column;
    scroll-behavior: auto !important;
}
.sc-list-body, .sc-detail, .sc-chat-scroller, .sc-widget-body { scroll-behavior: auto !important; }
#scMessages::-webkit-scrollbar, .sc-list-body::-webkit-scrollbar, .sc-detail::-webkit-scrollbar { width: 8px; }
#scMessages::-webkit-scrollbar-thumb, .sc-list-body::-webkit-scrollbar-thumb, .sc-detail::-webkit-scrollbar-thumb { background: #2a3550; border-radius: 8px; }

.sc-detail { display: flex; flex-direction: column; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }

.sc-pane { min-height: 0; display: flex; flex-direction: column; }
.sc-pane-list { border-right: 1px solid var(--border); }
.sc-pane-chat { border-right: 1px solid var(--border); background: var(--bg-1); }
.sc-pane-detail { background: var(--bg-card); }

.sc-list-scroll, .sc-msgs-scroll, .sc-detail-scroll {
    overflow-y: auto;
    overscroll-behavior: contain;
    flex: 1;
    min-height: 0;
}

.sc-conv {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    transition: background 0.12s ease;
}
.sc-conv:hover { background: var(--bg-1); }
.sc-conv.active { background: color-mix(in srgb, var(--gold) 12%, transparent); border-left: 3px solid var(--gold); }
.sc-conv-ico { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--bg-1); flex-shrink: 0; }
.sc-pill { font-size: 0.68rem; font-weight: 500; }
.text-gold { color: var(--gold) !important; }
.min-width-0 { min-width: 0; }

/* ---------- chat pane ---------- */
.sc-chat-scroller { flex: 1; min-height: 0; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; }
.sc-msg-row { display: flex; flex-direction: column; margin-bottom: 10px; }
.sc-msg { max-width: 78%; padding: 8px 12px; border-radius: 12px; background: var(--bg-card); border: 1px solid var(--border); align-self: flex-start; }
.sc-msg-mine { align-self: flex-end; background: color-mix(in srgb, var(--gold) 16%, var(--bg-card)); border-color: color-mix(in srgb, var(--gold) 45%, var(--border)); }
.sc-msg-meta { display: flex; gap: 8px; align-items: center; font-size: 0.68rem; color: var(--text-dim); margin-bottom: 3px; }
.sc-msg-who { font-weight: 600; color: var(--text); }
.sc-msg-system { align-self: center; max-width: 90%; font-size: 0.75rem; color: var(--text-dim); background: transparent; border: 0; text-align: center; }
.sc-msg-txt { white-space: pre-wrap; word-wrap: break-word; color: var(--text); }
.sc-img { max-width: 260px; max-height: 220px; border-radius: 8px; object-fit: cover; }
.sc-typing { font-size: 0.72rem; color: var(--text-dim); font-style: italic; }

.sc-composer-row {
    display: flex; gap: 8px; padding: 10px 12px;
    border-top: 1px solid var(--border); background: var(--bg-card); align-items: flex-end;
}
.sc-composer { flex-shrink: 0; }
.sc-composer textarea { resize: none; max-height: 140px; overflow-y: auto; }

/* detail pane */
.sc-detail-sec { padding: 12px 14px; }
.sc-note-txt {
    background: var(--bg-1); border: 1px solid var(--border); border-radius: 8px;
    padding: 8px 10px; font-size: 0.85rem; white-space: pre-wrap; color: var(--text);
}
.sc-note strong { color: var(--text); }

/* offline bar */
.sc-offline-bar {
    background: color-mix(in srgb, var(--gold) 14%, transparent);
    border-bottom: 1px solid var(--gold);
    padding: 6px 14px; font-size: 0.78rem; text-align: center;
}

/* tabs / filters */
.sc-subhead .btn { border-radius: 8px; }
.sc-tab.active { background: var(--gold); border-color: var(--gold); color: #0c0c0c; }

/* misc */
.sc-kpi-value { font-size: 1.6rem; font-weight: 700; }
.sc-kpi-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-dim); }
.sc-table { font-size: 0.875rem; }
.sc-table th { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-dim); }
.sc-row-off td { opacity: 0.55; }

/* ---------- mobile inbox ---------- */
@media (max-width: 991px) {
    .sc-inbox { grid-template-columns: 1fr; height: calc(100vh - 120px); }
    .sc-inbox-cols { display: contents; }
    .sc-pane-list { border-right: 0; }
    .sc-pane-chat { border-right: 0; }
    .sc-pane-detail { border-left: 4px solid var(--gold); }
    .sc-pane { display: none; }
    body.sc-mobile-open .sc-pane-list { display: flex; }
    body:not(.sc-mobile-open).sc-has-conv .sc-pane-chat { display: flex; }
    .sc-detail-slide { position: absolute; right: 0; top: 0; bottom: 0; width: min(86vw, 340px); z-index: 20; display: none; }
    body.sc-detail-toggled .sc-detail-slide { display: flex; }
}
@media (max-width: 991px) {
    body:not(.sc-mobile-open):not(.sc-has-conv) .sc-pane-chat { display: none; }
}
@media (min-width: 992px) {
    .sc-detail-slide { display: flex; }
}

/* ---------- player widget ---------- */
.sc-widget-root { position: fixed; right: 22px; bottom: 22px; z-index: 2147483000; font-family: inherit; }
.sc-widget-launcher {
    position: relative; width: 58px; height: 58px; border-radius: 50%; border: 0; cursor: pointer;
    background: var(--gold); color: #0c0c0c; font-size: 1.5rem;
    display: grid; place-items: center; box-shadow: 0 8px 24px rgba(0,0,0,0.35);
    transition: transform 0.15s ease;
}
.sc-widget-launcher:hover { transform: scale(1.06); }
@media (max-width: 991.98px) {
    /* Floating launcher hidden on mobile; Live Chat is opened via the user bottom-nav */
    .sc-widget-launcher { display: none; }
}
.sc-widget-badge {
    position: absolute; top: -2px; right: -2px; min-width: 20px; height: 20px;
    border-radius: 10px; background: #d0342c; color: #fff; font-size: 0.72rem;
    display: grid; place-items: center; padding: 0 5px; font-weight: 700;
}
.sc-widget-panel {
    position: absolute; right: 0; bottom: 70px; width: 360px; max-width: calc(100vw - 32px);
    height: min(560px, calc(100vh - 120px)); background: var(--bg-card); color: var(--text);
    border: 1px solid var(--border); border-radius: 14px; overflow: hidden;
    box-shadow: 0 18px 60px rgba(0,0,0,0.45);
    display: flex; flex-direction: column;
}
.sc-widget-head {
    display: flex; align-items: center; gap: 10px; padding: 12px 14px;
    background: var(--gold); color: #0c0c0c;
}
.sc-widget-head .sc-img-round { width: 34px; height: 34px; border-radius: 50%; }
.sc-widget-title { font-weight: 700; line-height: 1.1; }
.sc-widget-live { font-size: 0.72rem; opacity: 0.85; }
.sc-widget-body { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.sc-widget-day { text-align: center; font-size: 0.7rem; color: var(--text-dim); }
.sc-widget-msg { max-width: 82%; padding: 8px 12px; border-radius: 12px; font-size: 0.9rem; white-space: pre-wrap; word-wrap: break-word; align-self: flex-start; background: var(--bg-1); border: 1px solid var(--border); }
.sc-widget-msg.mine { align-self: flex-end; background: color-mix(in srgb, var(--gold) 20%, transparent); border-color: var(--gold); }
.sc-widget-msg img { max-width: 100%; border-radius: 8px; }
.sc-widget-time { display: block; margin-top: 3px; font-size: 0.62rem; line-height: 1; color: var(--text-dim); opacity: 0.85; text-align: right; }
.sc-widget-quick { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 12px 6px; }
.sc-widget-quick button { font-size: 0.78rem; border: 1px solid var(--border); background: var(--bg-1); color: var(--text); border-radius: 30px; padding: 4px 12px; }
.sc-widget-offline { text-align: center; font-size: 0.85rem; color: var(--text-dim); padding: 8px 12px; }
.sc-widget-foot { border-top: 1px solid var(--border); display: flex; gap: 8px; padding: 10px 12px; align-items: flex-end; background: var(--bg-card); }
.sc-widget-foot textarea { flex: 1; border: 1px solid var(--border); background: var(--bg-1); color: var(--text); border-radius: 10px; padding: 8px 12px; font-size: 0.9rem; resize: none; max-height: 120px; outline: none; }
.sc-widget-foot button { border: 0; background: transparent; color: var(--gold); font-size: 1.05rem; cursor: pointer; padding: 4px 6px; }
.sc-widget-typing { font-size: 0.72rem; color: var(--text-dim); font-style: italic; padding: 0 14px 4px; }

@media (max-width: 575.98px) {
    .sc-widget-root { right: 12px; bottom: 12px; }
    .sc-widget-panel {
        position: fixed; left: 0; right: 0; bottom: 0; top: auto;
        width: 100%; max-width: 100%;
        height: min(88vh, 88dvh, 640px);
        border-radius: 16px 16px 0 0; border-bottom: 0;
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    .sc-widget-body { -webkit-overflow-scrolling: touch; }
    .sc-widget-foot { padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
    .sc-widget-foot textarea { touch-action: manipulation; max-height: 110px; }
}

/* Toast notifications (player chat page and widget load chat.css WITHOUT the
   site's style.css, whose .toast-stack/.app-toast rules are missing there). */
.toast-stack {
    position: fixed; top: 74px; right: 14px; z-index: 3000;
    display: flex; flex-direction: column; gap: .5rem; max-width: 340px;
}
.app-toast {
    display: flex; gap: .6rem; align-items: flex-start;
    background: var(--bg-2); color: var(--text);
    border: 1px solid var(--border); border-radius: 10px;
    padding: 10px 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
    font-size: .875rem; animation: scToastIn .25s ease;
}
@keyframes scToastIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.app-toast.success { border-left: 3px solid #2fb463; }
.app-toast.error   { border-left: 3px solid #f04747; }
.app-toast.info    { border-left: 3px solid #3f8cff; }
.app-toast.warning { border-left: 3px solid var(--gold); }
.app-toast.success i { color: #2fb463; }
.app-toast.error   i { color: #f04747; }
.app-toast.info    i { color: #3f8cff; }
.app-toast.warning i { color: var(--gold); }