/* ==========================================================
   هنر فناوری — Panel stylesheet
   ========================================================== */
@font-face {
  font-family: iransans;
  src: url('../fonts/IRANSansWeb(FaNum).ttf');
}
:root{
    --navy:#152341;
    --navy-2:#1c2e52;
    --gold:#e3a94d;
    --teal:#3fa7ae;
    --teal-dark:#2d8a92;
    --rail-bg:#8ffaff;        /* icon rail */
    --panel-bg:#d2fdff;       /* submenu panel */
    --pill-active:#70e0e0;    /* selected submenu pill */
    --side-ink:#1f4c5e;       /* sidebar icons + labels */
    --gold-accent:#e8a752;    /* icon accent in the active pill */
    --rail-w:70px;
    --panel-w:200px;
    --side-top:100px;         /* logo block height */
    --sidebar-bg:#d2fdff;
    --page-bg:#eef6f7;
    --card-bg:#ffffff;
    --card-bg-soft:#eef1f3;
    --danger:#e2434f;
    --danger-bg:#fbe1e4;
    --success:#2fbf71;
    --success-bg:#e5f8ee;
    --gold-grad-1:#f9dfa0;
    --gold-grad-2:#eba845;
    --text-main:#1c2b4a;
    --text-muted:#7c8aa0;
    --border:#e3edf0;
    --radius:18px;
    --radius-sm:12px;
    --shadow:0 6px 22px rgba(21,35,65,.06);

    /* Ticket thread accents: customer vs support. */
    --thread-client:var(--teal);
    --thread-staff:var(--gold);

    /* Chat panel ink — the client panel is dark (#2c3c55). */
    --chat-ink:#e8edf3;
    --chat-ink-muted:#a7b6c9;
}

*,*::before,*::after{ box-sizing:border-box; }

/* The `hidden` attribute means hidden. Any `.thing{display:flex}` outranks the
   browser's own `[hidden]{display:none}`, which silently leaves the element on
   screen — an empty badge, a dropdown that never closes. One rule here instead
   of remembering a `[hidden]` guard beside every new component. */
[hidden]{ display:none !important; }
html,body{ height:100%; }
/* Jumping to a section is easier to follow when the page slides there. */
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }
body{
    margin:0;
    font-family:'iransans', Tahoma, sans-serif;
    background:var(--page-bg);
    color:var(--text-main);
    font-size:15px;
    -webkit-font-smoothing:antialiased;
}
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
ul{ list-style:none; margin:0; padding:0; }

.icon{ width:20px; height:20px; flex:none; }

/* ---------------- App shell ---------------- */
.app{
    display:flex;
    min-height:100vh;
}

/* ---------------- Sidebar: icon rail + submenu panel ---------------- */
/* Palette sampled directly from the reference design. */
.sidebar{
    flex:none;
    display:flex;
    min-height:100vh;
    background:var(--panel-bg);
}

/* --- Icon rail (far right) --- */
.rail{
    order:1;                       /* first in RTL flow => sits on the right */
    width:var(--rail-w);
    flex:none;
    background:var(--rail-bg);
    display:flex;
    flex-direction:column;
    padding-top:var(--side-top);   /* clears the logo block */
}
.rail__item{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:5px;
    padding:13px 4px;
    color:var(--side-ink);
    text-align:center;
    transition:background .15s;
}
.rail__icon{ width:27px; height:27px; stroke-width:1.5; }
.rail__label{ font-size:10px; font-weight:700; line-height:1.4; }
.rail__item:hover{ background:rgba(255,255,255,.45); }

/* The selected tab takes the panel's colour so the two read as one shape. */
.rail__item.is-active,
.rail__item.is-selected{
    background:var(--panel-bg);
    border-top-left-radius:16px;
    border-bottom-left-radius:16px;
}
.rail.has-selection .rail__item.is-active:not(.is-selected){
    background:transparent;
    border-radius:0;
}

/* --- Submenu panel --- */
.side-panel{
    order:2;
    width:var(--panel-w);
    flex:none;
    background:var(--panel-bg);
    display:flex;
    flex-direction:column;
}
.side-panel__logo{
    height:var(--side-top);
    display:flex;
    align-items:center;
    justify-content:center;
}
.side-panel__logo img{ max-width:100%; max-height:65%; }
.logo{ display:flex; align-items:center; gap:8px; }
.logo__text{ display:flex; flex-direction:column; text-align:right; line-height:1.25; }
.logo__text strong{ font-size:17px; color:var(--navy); font-weight:800; letter-spacing:.5px; }
.logo__text small{ font-size:8.5px; letter-spacing:1.7px; color:var(--navy); font-weight:700; opacity:.85; }

.side-panel__menus{ padding:17px 12px 14px; }
.submenu{ display:flex; flex-direction:column; gap:8px; }
.submenu[hidden]{ display:none; }

.submenu__item{
    display:flex;
    align-items:center;
    gap:9px;
    justify-content:flex-start;   /* RTL: content hugs the right edge */
    /*flex-direction:row-reverse;   /* icon ends up on the right of the label */
    padding:11px 12px;
    border-radius:11px;
    font-size:12px;
    font-weight:700;
    color:var(--side-ink);
    white-space:nowrap;
    transition:background .15s;
}
.submenu__icon{ width:19px; height:19px; flex:none; }
.submenu__item:hover{ background:rgba(255,255,255,.55); }
.submenu__item.is-active{ background:var(--pill-active); color:var(--navy); }
.submenu__item.is-active .submenu__icon{ color:var(--gold-accent); }

/* ---------------- Topbar ---------------- */
.main{ flex:1; display:flex; flex-direction:column; min-width:0; }
.topbar{
    background:#fff;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:16px 26px;
    border-bottom:1px solid var(--border);
}
.topbar__greeting{ font-size:17px; font-weight:700; color:var(--navy); margin:0; }
.avatar-btn{
    width:40px; height:40px;
    border-radius:50%;
    border:1px solid var(--border);
    background:#f4f8f9;
    color:var(--navy-2);
    display:flex; align-items:center; justify-content:center;
}

.content{ padding:26px; max-width:1280px; width:100%; margin:0 auto; }

/* ---------------- Grid / layout helpers ---------------- */
.row{ display:flex; gap:20px; flex-wrap:wrap}
.row > *{ flex:1 1 280px; }
.stack{ display:flex; flex-direction:column; gap:20px; }
.section-title{
    display:flex; align-items:center; gap:10px;
    font-size:17px; font-weight:800; color:var(--navy);
    margin:0 0 16px;
}
.section-title .icon{ color:var(--teal-dark); }

/* ---------------- Cards ---------------- */
.card{
    background:var(--card-bg);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    padding:22px;
}
.card--soft{ background:var(--card-bg-soft); box-shadow:none; }

.card--warning{ background:var(--danger-bg); }
.card--warning .card__head{ color:var(--danger); font-weight:800; display:flex; align-items:center; gap:8px; justify-content:flex-end; margin-bottom:14px;}
.card--warning .icon{ color:var(--danger); }
.card--warning ul li{
    display:flex; align-items:flex-start; gap:8px; justify-content:flex-end;
    text-align:right; color:#8a3038; font-size:13.5px; font-weight:600; margin-bottom:10px; line-height:1.7;
}
.card--warning ul li::after{ content:"!"; color:var(--danger); font-weight:900; }
.card--warning ul li:last-child{ margin-bottom:0; }

.card__head{ font-weight:700; color:var(--navy); margin-bottom:6px; }
.card__eyebrow{ display:flex; align-items:center; gap:8px; justify-content:flex-end; font-weight:800; color:var(--navy); margin-bottom:14px; }

.wallet-card .balance{
    font-size:28px; font-weight:800; color:var(--navy);
    display:flex; align-items:baseline; gap:8px; justify-content:flex-end; margin:10px 0 18px;
}
.wallet-card .balance small{ font-size:14px; font-weight:600; color:var(--text-muted); }

.gold-card{
    background:linear-gradient(135deg,var(--gold-grad-1),var(--gold-grad-2));
    border-radius:var(--radius);
    padding:20px 22px;
    box-shadow:var(--shadow);
    display:flex; align-items:center; gap:16px; justify-content:flex-end;
}
.gold-card__avatar{
    width:58px; height:58px; border-radius:50%;
    background:var(--navy);
    display:flex; align-items:center; justify-content:center;
    color:#fff; flex:none;
}
.gold-card__info{ text-align:right; }
.gold-card__title{ display:flex; align-items:center; gap:6px; justify-content:flex-end; font-weight:800; color:#5a3c10; font-size:15px; }
.gold-card__title .icon{ width:18px; height:18px; color:#a8681a;}
.gold-card__name{ font-weight:800; color:var(--navy); font-size:16px; margin-top:6px; }
.gold-card__meta{ font-size:12px; color:#6b4c1c; margin-top:4px; }

/* ---------------- Buttons ---------------- */
.btn{
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    border:none; border-radius:12px;
    padding:12px 20px;
    font-weight:700; font-size:14px;
    transition:filter .15s, transform .05s;
}
.btn:active{ transform:translateY(1px); }
.btn-block{ width:100%; }
.btn-primary{ background:linear-gradient(135deg,#3fb3c9,#2d8a92); color:#fff; }
.btn-primary:hover{ filter:brightness(1.05); }
.btn-dark{ background:var(--navy); color:#fff; }
.btn-outline{ background:#fff; border:1px solid var(--border); color:var(--navy-2); }
.btn-outline:hover{ border-color:var(--teal); color:var(--teal-dark); }
.btn-soft{ background:#fdeecb; color:#8a5a12; }
.btn-danger{ background:var(--danger); color:#fff; }
.btn-sm{ padding:8px 14px; font-size:12.5px; border-radius:10px; }
.btn[disabled]{ opacity:.55; cursor:not-allowed; }

/* ---------------- Tables ---------------- */
.table-wrap{ overflow-x:auto; }
table.data{ width:100%; border-collapse:collapse; text-align:right; }
table.data th{
    background:transparent; color:var(--text-muted); font-weight:700;
    font-size:12.5px; padding:12px 14px; border-bottom:2px solid var(--border);
}
table.data td{ padding:14px; font-size:13.5px; font-weight:600; color:var(--navy-2); border-bottom:1px solid var(--border); }
table.data tr:last-child td{ border-bottom:none; }
table.data tbody tr:hover{ background:#f7fbfb; }
.news-table tr:nth-child(odd){ background:var(--card-bg-soft); }
.news-table td{ border:none; }
.news-table .time-col{ color:var(--text-muted); font-size:12.5px; width:110px; }

/* ---------------- Badges / status ---------------- */
.badge{ display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:999px; font-size:12px; font-weight:700; }
.badge-success{ background:var(--success-bg); color:var(--success); }
.badge-danger{ background:var(--danger-bg); color:var(--danger); }
.badge-muted{ background:#eef1f3; color:var(--text-muted); }

.status-pill{ display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; }
.status-pill .circle{
    width:46px; height:46px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
}
.status-pill .circle.on{ background:var(--success-bg); color:var(--success); }
.status-pill .circle.off{ background:var(--danger-bg); color:var(--danger); }
.status-pill .label{ font-size:12px; color:var(--text-muted); font-weight:700; }
.status-pill .value{ font-weight:800; color:var(--navy); }

/* ---------------- Service cards ---------------- */
.service-card{ background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; }
.service-card__head{
    display:flex; align-items:center; justify-content:space-between;
    padding:16px 20px; background:var(--navy); color:#fff; font-weight:800; font-size:14.5px;
}
.service-card__head .icon{ color:var(--gold); }
.service-card__body{ padding:20px; display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.metric-box{ background:var(--card-bg-soft); border-radius:var(--radius-sm); padding:14px 16px; text-align:center; }
.metric-box .metric-label{ font-size:12px; color:var(--text-muted); font-weight:700; margin-bottom:8px; }
.metric-box .metric-value{ font-size:16px; font-weight:800; color:var(--navy); }
.service-card__actions{ display:flex; gap:10px; padding:0 20px 20px; flex-wrap:wrap; }
.service-card__actions .btn{ flex:1; }

/* ---------------- Usage ring ---------------- */
.ring-box{ text-align:center; }
.ring{ position:relative; width:110px; height:110px; margin:0 auto 10px; }
.ring svg{ transform:rotate(-90deg); }
.ring .pct{
    position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    font-weight:800; font-size:20px; color:var(--navy);
}
.usage-note{ font-size:12px; color:var(--text-muted); text-align:center; margin-top:8px; line-height:1.7; }

/* ---------------- Toggle switch ---------------- */
.switch{ position:relative; display:inline-block; width:46px; height:26px; flex:none; }
.switch input{ opacity:0; width:0; height:0; }
.switch .slider{
    position:absolute; cursor:pointer; inset:0; background:#dfe6ea; border-radius:999px; transition:.2s;
}
.switch .slider::before{
    content:""; position:absolute; height:20px; width:20px; right:3px; bottom:3px;
    background:#fff; border-radius:50%; transition:.2s; box-shadow:0 1px 3px rgba(0,0,0,.25);
}
.switch input:checked + .slider{ background:var(--teal); }
.switch input:checked + .slider::before{ transform:translateX(-20px); }

/* ---------------- Forms ---------------- */
.field{ margin-bottom:16px; }
.field label{ display:block; font-size:13px; font-weight:700; color:var(--navy-2); margin-bottom:8px; }
.input, select.input, textarea.input{
    width:100%; border:1px solid var(--border); background:#f9fbfc;
    border-radius:12px; padding:12px 14px; font-family:inherit; font-size:14px; color:var(--navy-2);
}
.input:focus, select.input:focus, textarea.input:focus{ outline:none; border-color:var(--teal); background:#fff; }
textarea.input{ resize:vertical; min-height:110px; }

.chip-select{ display:flex; gap:10px; flex-wrap:wrap; }
.chip{
    border:1px solid var(--border); border-radius:12px; padding:10px 16px;
    font-size:13px; font-weight:700; color:var(--text-muted); display:flex; align-items:center; gap:8px;
    background:#fff;
}
.chip .dot{ width:8px; height:8px; border-radius:50%; }
.chip.is-active{ border-color:var(--teal); color:var(--teal-dark); background:#eefaf9; }

.amount-quick{ display:flex; gap:10px; flex-wrap:wrap; margin:10px 0 18px; }
.amount-quick button{
    flex:1; min-width:120px; border:1px solid var(--border); background:#f9fbfc;
    border-radius:12px; padding:12px; font-weight:700; color:var(--navy-2); font-size:13px;
}
.amount-quick button.is-active, .amount-quick button:hover{ border-color:var(--teal); color:var(--teal-dark); background:#eefaf9; }

/* ---------------- Wallet top-up ----------------
   One card: the balance is the heading of the form that is about to
   change it. As two cards the balance held a single short number and
   still stretched to the height of the form beside it. */
.topup{ padding:0; overflow:hidden; }

.topup__balance{
    display:flex; align-items:center; justify-content:space-between;
    gap:16px; flex-wrap:wrap;
    padding:18px 22px;
    /* Deeper than the pay button's gradient: that one carries 15px bold
       text, this band carries a 14px label that has to clear 4.5:1. */
    background:linear-gradient(135deg,#26757c,#1d626a);
    color:#fff;
}
.topup__label{
    display:flex; align-items:center; gap:8px;
    font-size:14px; font-weight:700;
}
.topup__label .icon{ width:20px; height:20px; }
.topup__amount{
    display:flex; align-items:baseline; gap:6px;
    font-size:30px; font-weight:800;
}
.topup__amount small{ font-size:13px; font-weight:600; opacity:.9; }

.topup__form{ padding:20px 22px 22px; }
.topup__form .amount-quick{ margin-bottom:20px; }

.topup__go{
    display:flex; align-items:center; justify-content:space-between;
    gap:14px; flex-wrap:wrap;
}
.topup__gateway{
    display:flex; align-items:center; gap:6px;
    font-size:12.5px;
    /* --text-muted sits at 3.5:1 on white, which is thin for 12.5px. */
    color:#5f6e86;
}
.topup__gateway .icon{ width:15px; height:15px; }
.topup__go .btn{ flex:1 1 200px; }

@media screen and (max-width:520px){
    .topup__amount{ font-size:24px; }
}

/* ---------------- Empty state ---------------- */
.empty-state{ text-align:center; padding:70px 20px; color:var(--text-muted); }
.empty-state .icon{ width:46px; height:46px; margin:0 auto 14px; color:var(--text-muted); opacity:.5; }
.empty-state p{ font-weight:700; font-size:15px; margin:0 0 16px; color:var(--navy-2); }

/* ---------------- Chat ---------------- */
.chat-shell{ display:flex; gap:20px; align-items:flex-start; }
.agent-list{ width:230px; flex:none; display:flex; flex-direction:column; gap:10px; }
.agent-card{
    background:#fff; border-radius:var(--radius-sm); padding:14px; box-shadow:var(--shadow);
    display:flex; align-items:center; gap:10px; justify-content:flex-end; text-align:right; cursor:pointer;
    border:2px solid transparent;
}
.agent-card.is-active{ border-color:var(--teal); background:#eefaf9; }
.agent-card__avatar{
    width:38px; height:38px; border-radius:50%; background:var(--success-bg); color:var(--success);
    display:flex; align-items:center; justify-content:center; flex:none;
}
.agent-card__avatar.offline{ background:#eef1f3; color:var(--text-muted); }
.agent-card__name{ font-weight:800; font-size:13.5px; color:var(--navy); }
.agent-card__dept{ font-size:11.5px; color:var(--text-muted); font-weight:600; }

.chat-panel{ flex:1; background:#2c3c55; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); display:flex; flex-direction:column; height:560px; }
.chat-panel__head{ background:#25334a; color:#fff; padding:16px 20px; font-weight:800; display:flex; align-items:center; gap:10px; justify-content:flex-end; }
.chat-panel__head .agent-card__avatar{ background:rgba(255,255,255,.15); color:#fff; }
.chat-panel__messages{ flex:1; padding:20px; overflow-y:auto; display:flex; flex-direction:column; gap:12px; }
.msg{ max-width:70%; padding:12px 16px; border-radius:14px; font-size:13.5px; line-height:1.8; font-weight:600; }
.msg.agent{ align-self:flex-start; background:#3a4b66; color:#e8edf3; border-bottom-left-radius:4px; }
.msg.user{ align-self:flex-end; background:var(--success); color:#fff; border-bottom-right-radius:4px; }
.chat-panel__input{ background:#25334a; padding:12px 16px; display:flex; align-items:center; gap:10px; }
.chat-panel__input input{
    flex:1; background:#33455f; border:none; border-radius:12px; padding:12px 16px; color:#fff; font-family:inherit; font-size:13.5px;
}
.chat-panel__input input::placeholder{ color:#9aa8bd; }
.chat-panel__input button{ background:transparent; border:none; color:#9aa8bd; }
.chat-panel__input button.send{ color:var(--teal); }
.chat-panel__input .attach{ color:#9aa8bd; }

/* ---------------- Guide ---------------- */
.guide-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.guide-tile{
    direction: ltr;
    background:var(--card-bg-soft); border-radius:var(--radius-sm); padding:22px;
    display:flex; align-items:center; gap:12px; justify-content:flex-end; font-weight:700; color:var(--navy-2);
}
.guide-tile .icon{ color:var(--teal-dark); }

/* ---------------- FAQ ---------------- */
.faq-item{ border-bottom:1px solid var(--border); padding:16px 0; }
.faq-item:last-child{ border-bottom:none; }
.faq-q{ display:flex; align-items:center; justify-content:space-between; font-weight:700; color:var(--navy); cursor:pointer; }
.faq-a{ margin-top:10px; color:var(--text-muted); font-size:13.5px; line-height:1.9; display:none; }
.faq-item.is-open .faq-a{ display:block; }
.faq-item.is-open .faq-q .chev{ transform:rotate(135deg); }
.faq-q .chev{ width:8px; height:8px; border-left:2px solid var(--text-muted); border-bottom:2px solid var(--text-muted); transform:rotate(-45deg); transition:.15s; }

/* ---------------- Toast ---------------- */
.toast{
    position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(20px);
    background:var(--navy); color:#fff; padding:12px 22px; border-radius:12px; font-weight:700; font-size:13.5px;
    opacity:0; pointer-events:none; transition:.25s; z-index:50; box-shadow:0 10px 30px rgba(0,0,0,.25);
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
.toast.error{ background:var(--danger); }

/* ---------------- Misc ---------------- */
.muted{ color:var(--text-muted); }
.text-left{ text-align:left; }
.divider{ height:1px; background:var(--border); margin:18px 0; }
.progressbar{ height:8px; border-radius:999px; background:#eef1f3; overflow:hidden; }
.progressbar > span{ display:block; height:100%; background:linear-gradient(90deg,var(--teal),var(--teal-dark)); }

/* ---------------- Auth pages (login / register / logout) ---------------- */
.auth-body{
    background:linear-gradient(160deg,var(--sidebar-bg) 0%, var(--page-bg) 55%, #e6eef0 100%);
    display:flex; align-items:center; justify-content:center; min-height:100vh; padding:24px;
}
.auth-wrap{ width:100%; max-width:420px; }
.auth-card{
    background:#fff; border-radius:22px; padding:34px 30px;
    box-shadow:0 18px 50px rgba(21,35,65,.12);
}
.auth-card__brand{ display:flex; align-items:center; gap:12px; justify-content:center; margin-bottom:22px; }
.auth-card__brand strong{ display:block; font-size:17px; color:var(--navy); font-weight:800; }
.auth-card__brand small{ display:block; font-size:9px; letter-spacing:1.6px; color:var(--gold); font-weight:700; }
.auth-card__title{ font-size:19px; font-weight:800; color:var(--navy); margin:0 0 6px; text-align:center; }
.auth-card__sub{ font-size:13px; color:var(--text-muted); text-align:center; margin:0 0 22px; line-height:1.8; }
.auth-card__foot{ text-align:center; font-size:13px; color:var(--text-muted); margin:18px 0 0; }
.auth-card__foot a{ color:var(--teal-dark); font-weight:700; }
.auth-card .btn{ margin-top:6px; }

.alert{ border-radius:12px; padding:12px 16px; font-size:13px; font-weight:600; margin-bottom:18px; line-height:1.8; }
.alert-danger{ background:var(--danger-bg); color:#8a3038; }
.alert-success{ background:var(--success-bg); color:#1d7a4a; }

/* ---------------- Account dropdown ---------------- */
.account{ position:relative; }
.account__menu{
    position:absolute; top:calc(100% + 10px); right:-200px; min-width:220px;
    background:#fff; border:1px solid var(--border); border-radius:14px;
    box-shadow:0 14px 38px rgba(21,35,65,.14); padding:8px; z-index:40;
}
.account__menu[hidden]{ display:none; }
.account__who{ padding:10px 12px 12px; border-bottom:1px solid var(--border); margin-bottom:6px; text-align:right; }
.account__who strong{ display:block; font-size:14px; color:var(--navy); }
.account__who small{ display:block; font-size:11.5px; color:var(--text-muted); margin-top:2px; }
.account__item{
    display:flex; align-items:center; gap:10px; width:100%;
    padding:10px 12px; border-radius:10px; font-size:13.5px; font-weight:600;
    color:var(--navy-2); background:none; border:none; text-align:right;
}
.account__item:hover{ background:#f2f8f9; }
.account__item--danger{ color:var(--danger); }
.account__item--danger:hover{ background:var(--danger-bg); }
.account__logout{ margin:0; }
.account__logout button{ cursor:pointer; }

/* ---------------- Accessibility ---------------- */
:focus-visible{ outline:2px solid var(--teal-dark); outline-offset:2px; }
@media (prefers-reduced-motion: reduce){
    *{ animation:none !important; transition:none !important; }
}

/* ---------------- Responsive ---------------- */
@media (max-width: 960px){
    .service-card__body{ grid-template-columns:1fr; }
    .chat-shell{ flex-direction:column; }
    .agent-list{ width:100%; flex-direction:row; overflow-x:auto; }
    .guide-grid{ grid-template-columns:1fr; }
}
@media (max-width: 760px){
    .app{ flex-direction:column; }
    .sidebar{ width:100%; min-height:auto; flex-direction:column; }
    /* Rail becomes a horizontal strip, panel sits underneath it. */
    .rail{
        order:1; width:100%; flex-direction:row; padding-top:0;
        overflow-x:auto; justify-content:space-between;
    }
    .rail__item{ flex:1 0 auto; padding:10px 8px; }
    .rail__item.is-active,
    .rail__item.is-selected{
        border-radius:0;
        box-shadow:inset 0 -3px 0 var(--side-ink);
        background:var(--panel-bg);
    }
    .side-panel{ order:2; width:100%; }
    .side-panel__logo{ height:auto; padding:14px; justify-content:center; }
    .submenu{ flex-direction:row; flex-wrap:wrap; }
    .submenu__item{ flex:1 1 auto; justify-content:center; }
    .content{ padding:16px; }
}

.ltr {
    direction: ltr;
}
/* ---------------- Login artwork (shared by both panels) ---------------- */
.auth-body--photo{
    background:#0f2230 url('../img/bck.webp') center / cover no-repeat;
}
.auth-body--photo .auth-card{
    background:rgba(255,255,255,.96);
    box-shadow:0 18px 50px rgba(9,26,36,.45);
}
.auth-card__logo{ max-height:64px; width:auto; }
.auth-card__note{ color:#6b7b85; font-size:12.5px; line-height:2; }

/* The tier card takes its colour from the customer's actual tier, instead of
   every account being painted gold. */
.gold-card--silver{ background:linear-gradient(135deg,#eef1f3,#b9c4cc); }
.gold-card--bronze{ background:linear-gradient(135deg,#f3e0cf,#c98f5d); }

/* ---------------- Staff presence ---------------- */
.presence{
    display:inline-flex; align-items:center; gap:5px;
    font-size:12px; white-space:nowrap;
}
.presence::before{
    content:""; width:7px; height:7px; border-radius:50%;
    background:currentColor; flex:none;
}
.presence--on{ color:var(--success); }
.presence--off{ color:var(--text-muted); }
.agent-card__avatar.offline{ opacity:.45; }

/* ---------------- Ticket thread ----------------
   Shared by both panels: the customer reads the same conversation in
   ticket_view.php that staff answer in admin/ticket_view.php. Defined here
   rather than in admin.css, which the client pages never load. */
.thread{ display:flex; flex-direction:column; gap:14px; }
.thread__msg{
    background:var(--card-bg);
    border-radius:var(--radius-sm);
    padding:14px 18px;
    box-shadow:var(--shadow);
    /* The accent is a token so each panel can restyle it by redefining the
       variable. Overriding the rule itself needs a more specific selector,
       which then also beats --staff below and flattens both sides to one
       colour — which is exactly what happened before. */
    border-right:4px solid var(--thread-client);
}
/* A reply from support reads differently from the customer's own messages. */
.thread__msg--staff{
    border-right-color:var(--thread-staff);
    background:#f7fafb;
}
.thread__meta{
    display:flex; justify-content:space-between; align-items:baseline; gap:12px;
    font-size:12.5px; color:var(--text-muted);
    margin-bottom:8px;
    flex-wrap:wrap;
}
.thread__meta strong{ color:var(--navy); font-size:13.5px; }
.thread__body{
    line-height:2;
    white-space:pre-wrap;      /* keep the customer's own line breaks */
    word-break:break-word;     /* and don't let a long token blow out the card */
    text-align:right;
}

/* ---------------- Customer support chat (single conversation) ----------------
   The customer talks to support, not to a chosen agent, so there is no
   agent list — just one panel, with each reply signed by whoever sent it. */
.chat-single{ max-width:760px; margin:0 auto; width:100%; }
.chat-single .chat-panel{ border-radius:var(--radius); overflow:hidden; }

.chat-intro{
    margin:auto;
    text-align:center;
    color:var(--text-muted);
    padding:30px 20px;
}
.chat-intro .icon{ width:38px; height:38px; opacity:.5; margin-bottom:10px; }
.chat-intro p{ margin:0; line-height:2; }

/* Sides follow the original design: support on the inline-start edge, the
   customer's own messages on the inline-end — which RTL mirrors for us. */
.msg-row{ display:flex; flex-direction:column; max-width:78%; }
.msg-row--agent{ align-self:flex-start; align-items:flex-start; }
.msg-row--user { align-self:flex-end;   align-items:flex-end;   }

/* Who is talking — the whole point of dropping the agent picker.
   The two panels sit on opposite backgrounds (the customer's is dark,
   the staff one light), so the ink is a token each side sets rather than a
   fixed colour: navy here would score 1.35:1 on the customer's panel. */
.msg-author{
    font-size:12px;
    font-weight:800;
    color:var(--chat-ink);
    margin-bottom:4px;
    display:flex; align-items:center; gap:6px;
}
.msg-author small{ font-weight:500; color:var(--chat-ink-muted); }
.msg-row time{ font-size:11px; color:var(--chat-ink-muted); margin-top:4px; }

.msg-row .msg{ margin:0; max-width:100%; }
.chat-note{ text-align:center; padding:6px 0; margin:0; font-size:12.5px; }

/* ---------------- Attachments ---------------- */
.msg-shot{
    display:block;
    margin-top:6px;
    border-radius:12px;
    overflow:hidden;
    max-width:260px;
    line-height:0;
    border:2px solid rgba(255,255,255,.14);
}
.msg-shot img{ display:block; width:100%; height:auto; max-height:260px; object-fit:cover; }
.msg-shot:hover{ border-color:var(--gold); }

.msg-file{
    display:inline-flex; align-items:center; gap:6px;
    margin-top:6px; padding:8px 12px;
    border-radius:10px;
    background:rgba(255,255,255,.10);
    color:var(--chat-ink);
    font-size:12.5px; font-weight:600;
    text-decoration:none;
    max-width:100%; word-break:break-all;
}
.msg-file::before{ content:"📎"; }
.msg-file:hover{ background:rgba(255,255,255,.18); }

/* Files already sitting in a ticket thread (light background). */
.thread__files{ display:flex; flex-wrap:wrap; gap:10px; margin-top:12px; }
.thread__files .msg-shot{ margin-top:0; border-color:var(--border); }
.thread__files .msg-file{
    margin-top:0;
    background:var(--card-bg-soft);
    color:var(--navy);
    border:1px solid var(--border);
}
.thread__files .msg-file:hover{ background:#fff; }

/* The paperclip beside the chat input. */
.chat-panel__input .attach{ cursor:pointer; display:inline-flex; align-items:center; }
.chat-panel__input .attach:hover{ color:var(--gold); }

/* What is queued for the next send. */
.chat-files{ display:flex; flex-wrap:wrap; gap:8px; padding:8px 20px 0; }
.file-chip{
    background:rgba(255,255,255,.14);
    color:var(--chat-ink);
    border-radius:8px; padding:4px 10px;
    font-size:12px; word-break:break-all;
}
.admin-body .chat-files .file-chip{ background:var(--card-bg-soft); color:var(--navy); }
.admin-body .msg-file{ background:var(--card-bg-soft); color:var(--navy); border:1px solid var(--border); }
.admin-body .msg-shot{ border-color:var(--border); }

/* ---------------- Plan picker (capacity + term) ----------------
   Two sliders and a live total. The figure beside each track is an input,
   not a read-out: a slider is good at "roughly" and bad at 137. */
.picker{
    background:var(--card-bg-soft);
    border:1px solid var(--border);
    border-radius:var(--radius-sm);
    padding:16px 18px;
    margin:14px 0;
}

.picker__row{
    display:flex; align-items:center; gap:14px;
    margin-bottom:18px;
    flex-wrap:wrap;
}
.picker__label{
    flex:0 0 150px;
    font-size:13.5px; font-weight:700; color:var(--navy-2);
}
.picker__control{ flex:1 1 220px; min-width:0; }

.picker__box{
    flex:0 0 130px;
    display:flex; align-items:center; gap:6px;
    background:#fff; border:1px solid var(--border); border-radius:12px;
    padding:8px 12px;
}
.picker__number{
    flex:1; min-width:0;
    border:0; background:none; outline:none;
    font-family:inherit; font-size:15px; font-weight:800; color:var(--navy);
    text-align:center;
}
/* The spinners fight the slider for the same job and steal width. */
.picker__number::-webkit-outer-spin-button,
.picker__number::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.picker__number{ -moz-appearance:textfield; appearance:textfield; }
.picker__unit{ font-size:12px; color:var(--text-muted); flex:none; }

.picker__range{
    -webkit-appearance:none; appearance:none;
    width:100%; height:6px; border-radius:999px;
    background:#dfe7ea;
    outline:none; margin:0;
}
.picker__range::-webkit-slider-thumb{
    -webkit-appearance:none; appearance:none;
    width:18px; height:18px; border-radius:50%;
    background:var(--teal); border:3px solid #fff;
    box-shadow:0 1px 4px rgba(21,35,65,.35);
    cursor:pointer;
}
.picker__range::-moz-range-thumb{
    width:18px; height:18px; border-radius:50%;
    background:var(--teal); border:3px solid #fff;
    box-shadow:0 1px 4px rgba(21,35,65,.35);
    cursor:pointer;
}
.picker__range:focus-visible{ box-shadow:0 0 0 3px rgba(63,167,174,.35); }

.picker__ticks{
    display:flex; justify-content:space-between;
    margin-top:6px;
    font-size:11px; color:var(--text-muted);
}

.picker__total{
    display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
    border-top:1px dashed var(--border);
    padding-top:14px;
}
.picker__total-label{ font-size:13px; font-weight:700; color:var(--navy-2); }
.picker__total-value{ font-size:20px; font-weight:800; color:var(--teal-dark); }
.picker__formula{ font-size:11px; color:var(--text-muted); margin-inline-start:auto; }

@media screen and (max-width:560px){
    .picker__label{ flex-basis:100%; }
    .picker__formula{ margin-inline-start:0; flex-basis:100%; }
}

/* ---------------- Buy blocks (renew / add seats) ----------------
   Two purchases on one card, each its own sum. They need a visible seam
   between them, or the reader cannot tell which total belongs to which
   button. */
.buy-block{
    border:1px solid var(--border);
    border-radius:var(--radius-sm);
    padding:14px 16px 16px;
    margin-bottom:14px;
}
.buy-block__title{
    display:flex; align-items:center; gap:8px;
    font-size:14px; font-weight:800; color:var(--navy);
}
.buy-block__title .icon{ width:18px; height:18px; color:var(--teal-dark); }
.buy-block .picker{ margin:12px 0 14px; }