.tone-muted{color:#5d6478!important}
.tone-amber{color:#b45309!important}
.tone-cyan{color:#0e7490!important}
.tone-red{color:#dc2626!important}
.tone-blue{color:#0369a1!important}
#dark a.nav-link.lts-05{color:#c2cad4!important}
#dark span.divider{color:#a3b1c4!important}
#dark .product-list-header .product-list-header--more,#dark a.product-list-header--more{color:#a9b4c5!important}
#dark .text-gray{color:#c4cbd6!important}
#dark .tone-muted{color:#b6c0cf!important}
#dark .cart-empty .empty-content-message p{color:#c4cbd6!important}
#dark a.link.color-secondary{color:#ff5c7a!important}
#dark .counter{color:#fff!important}
#dark .btn-primary,#dark .btn-primary:hover,#dark .btn-primary:focus,#dark .btn-primary:active{color:#fff!important}
#dark .tone-amber{color:#ffc85c!important}
#dark .tone-cyan{color:#5fd7ec!important}
#dark .tone-red{color:#ff9ea3!important}
#dark .tone-blue{color:#8fd4ff!important}
#dark .statistics .details .title,#dark .statistics .details .flag,#dark .statistics .details .value span{color:#b6c0cf!important}
#dark .top-simple-chart .card .card-body .details .value span,#dark .top-simple-chart .card .card-body .details .flag,#dark .top-simple-chart .card .card-body .chart a{color:#b6c0cf!important}
#dark .intro-welcome .user-welcome ul li span.title{color:#c3cddb!important}
/* the welcome card: the vendor hardcodes the cream bg with no dark variant — the dark twin of the widget cards */
#dark .intro-welcome .user-welcome .card{background-color:#353542!important}
#dark .intro-welcome .user-welcome .card .user-name{color:#fff!important}
#dark .intro-welcome .user-welcome .card .card-body>p{color:#b6c0cf!important}
#dark .admin-sidebar ul.menu-list li.title{color:#b6c0cf!important}
#dark .admin-sidebar .sidebar--account-section .user-details .type,#dark .admin-sidebar .sidebar--account-section .user-settings{color:#b6c0cf!important}
#dark .admin-sidebar .sidebar--top-section .title span{color:#b6c0cf!important}
#dark .page-header .header-inner .header-meta .user-avatar>div .user-type{color:#b6c0cf!important}
#dark .income ul li .title{color:#b6c0cf!important}
#dark .admin-sidebar ul.menu-list .sub-menu li.active a span.item-title,#dark .admin-sidebar ul.menu-list .sub-menu li a.active span.item-title,#dark .admin-sidebar ul.menu-list li.active a span.item-title{color:#fff!important}
/* the submenu hierarchy (the owner: the dim submenu text + the all-bright-on-click fix):
   the ACTIVE item = white bold, the INACTIVE items = the vendor dim gray — enforced
   with !important because an unknown higher-specificity rule was flattening the hierarchy */
#dark .admin-sidebar ul.menu-list .sub-menu li a span.item-title{color:#8f9bad!important}
#dark .admin-sidebar ul.menu-list .sub-menu li.active a span.item-title,#dark .admin-sidebar ul.menu-list .sub-menu li a.active span.item-title{color:#fff!important;font-weight:600!important}
.admin-sidebar ul.menu-list .sub-menu li a span.item-title{color:#495057!important}
.admin-sidebar ul.menu-list .sub-menu li.active>a span.item-title{color:#0060ff!important;font-weight:600!important}
#dark .apexcharts-xaxis text,#dark .apexcharts-yaxis text,#dark .apexcharts-labels text,#dark .apexcharts-text,#dark .apexcharts-text tspan{color:#c9d1dc!important;fill:#c9d1dc!important}
#dark .card-title a{color:#5fd7ec!important}
#dark .article--meta-username,#dark span.date{color:#b6c0cf!important}
#dark .card.product-list table.table .badge.bg-success{color:#6ee7c0!important;background:#14453a!important}
#dark .card.product-list table.table .badge.bg-warning{color:#ffd88c!important;background:#4a3a14!important}
#dark .card.product-list table.table .badge.bg-danger{color:#ffa3a8!important;background:#4d1f22!important}
#dark .statistics.seo-console .badge.bg-success{color:#6ee7c0!important;background:#14453a!important}
#dark .statistics.seo-console .badge.bg-warning{color:#ffd88c!important;background:#4a3a14!important}
#dark .statistics.seo-console .badge.bg-danger{color:#ffa3a8!important;background:#4d1f22!important}
body#dark.seo-shell{color:#c9d1dc!important}
body#dark.seo-shell .card,body#dark.seo-shell .card-body,body#dark.seo-shell .tab-content,body#dark.seo-shell .tab-pane,body#dark.seo-shell .add-product,body#dark.seo-shell summary{color:#c9d1dc!important}
body#dark.seo-shell .seo-paper{background:#2d2d3a!important;border-color:rgba(255,255,255,0.28)!important}
#dark .text-muted,#dark .text-body-secondary,#dark .form-text{color:#a3b1c4!important}
#dark code{color:#ff85c2!important}
#dark .text-danger{color:#ff8f92!important}
#dark .alert .text-danger{color:#ff8f92!important}
#dark .badge.bg-danger{color:#ffa3a8!important}
#dark .text-primary{color:#8fd4ff!important}
#dark .seo-score-num[data-grade="good"]{color:#6ee7c0!important}
#dark .seo-score-num[data-grade="ok"]{color:#ffc85c!important}
#dark .seo-score-num[data-grade="poor"]{color:#ff9ea3!important}
#dark .product-list-header--more.bg-primary,#dark a.product-list-header--more.bg-primary{color:#fff!important}
body#dark.seo-shell a:not(.btn):not(.badge):not(.nav-link):not(.page-link){color:#5fd7ec!important}
/* dark surfaces: every admin surface (Inertia pages too), not only the SEO shell.
   Without this, an inherited body colour stays #212529 on a #353542 card = 1.28:1. */
#dark .card,#dark .card-body,#dark .card-header,#dark .card-footer,#dark .modal-content,#dark .modal-body,#dark .modal-footer,#dark .offcanvas-body,#dark .tab-content,#dark .tab-pane,#dark .add-product,#dark .pills-tab-container{color:#c9d1dc!important}
/* hint lines under controls */
#dark .input-desc,#dark .form-control-description,#dark .select-image-details,#dark .select-image-details span{color:#a9b6c8!important}
/* light chips keep a dark surface so their light text stays readable */
#dark .badge.bg-light,#dark .bg-light.badge{background-color:#3b3b4c!important}
#dark .badge.bg-light.text-dark,#dark .badge.bg-light .text-dark{color:#e6ecf5!important}
#dark .badge.bg-light.text-gray,#dark .badge.bg-light .text-gray{color:#cfd8e4!important}
#dark .tab-title,#dark .add-product .tab-title{color:#a9b6c8!important}
#dark .add-product .checkbox-container .flag,#dark .add-product .input-desc,#dark .add-product .tab-title .mt-1{color:#a9b6c8!important}
#dark .description{color:#a9b6c8!important}
#dark .badge.bg-info{background-color:#143a4d!important;color:#8fd4ff!important}
#dark .leaflet-control-attribution,#dark .leaflet-control-attribution a,#dark .leaflet-container a{color:#c9d1dc!important;background:#2f2f3b!important}
#dark .tab-title span{color:#a9b6c8!important}
/* Neshan injects its credit with an inline !important colour (#777) we cannot restyle;
   a light chip keeps the required credit legible on dark surfaces. */
#dark .leaflet-control-attribution{background:#fff!important}

/* ── dark-mode semantic surfaces ─────────────────────────────────────────────────
   Bootstrap keeps every semantic fill (secondary/success/danger/info/warning) at its
   LIGHT-mode value when body goes dark: a bright orange/teal/red button or badge with a
   white label is only 2.0-3.5:1, and the pastel alert boxes keep their light background so
   the coloured text inside them (#fa4248, #0dcaf0) falls to 1.7-3.2:1. Re-tint each pair to
   a dark fill + light label — the treatment the product-list/seo-console badges already use
   above — so every button, badge and alert clears WCAG AA in dark mode. */
#dark .btn-secondary{background-color:#4a3a14!important;color:#ffd88c!important}
#dark .btn-success{background-color:#14453a!important;color:#6ee7c0!important}
#dark .btn-danger{background-color:#4d1f22!important;color:#ffa3a8!important}
#dark .badge.bg-secondary{background-color:#4a3a14!important;color:#ffd88c!important}
#dark .badge.bg-success{background-color:#14453a!important;color:#6ee7c0!important}
#dark .badge.bg-warning{background-color:#4a3a14!important;color:#ffd88c!important}
#dark .badge.bg-danger{background-color:#4d1f22!important;color:#ffa3a8!important}
#dark .badge.bg-info{background-color:#0e3a47!important;color:#a5e3f0!important}
#dark .alert-warning{background-color:#4a3a14!important;color:#ffd88c!important}
#dark .alert-info{background-color:#0e3a47!important;color:#a5e3f0!important}
#dark .alert-danger{background-color:#4d1f22!important;color:#ffa3a8!important}
#dark .alert-success{background-color:#14453a!important;color:#6ee7c0!important}
/* status text spans painted inside those (now dark) surfaces must stay light */
#dark .text-success{color:#6ee7c0!important}
#dark .text-warning{color:#ffd88c!important}
#dark .text-info{color:#8fd4ff!important}

/* ── SEO dashboard launcher (2026-10-22) ─────────────────────────────────────────
   Scope: .seo-launch only. Visual redesign of the SEO console landing page:
   grouped tool cards with a one-line purpose, an icon tile and an end arrow.
   Radius 20 = vendor .card parity (documented exemption); 1px rules are hairlines. */
.seo-launch{padding-bottom:30px}
.seo-launch-head{display:flex;align-items:center;justify-content:space-between;gap:12px 24px;flex-wrap:wrap;margin-bottom:24px}
.seo-launch-lead{margin:0;font-size:12px;line-height:1.5;color:#5d6478}
.seo-launch-meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.seo-launch-chip{display:inline-flex;align-items:center;padding:3px 9px;border-radius:12px;background:#f3f5f8;color:#5d6478;font-size:12px;line-height:1.5;white-space:nowrap}
.seo-launch-group{margin-bottom:30px}
.seo-launch-group:last-child{margin-bottom:0}
.seo-launch-group-head{display:flex;align-items:center;gap:9px;margin-bottom:12px}
.seo-launch-group-title{margin:0;font-size:18px;font-weight:700;line-height:1.5;color:#212b36}
.seo-launch-count{font-size:12px;line-height:1.5;color:#5d6478;white-space:nowrap}
.seo-launch-rule{flex:1;height:1px;background:#e6eaf0} /* 369-exempt: 1px hairline rule */
.seo-launch-grid{display:grid;grid-template-columns:1fr;gap:12px}
.seo-launch-card{display:flex;align-items:center;gap:12px;min-width:0;min-height:90px;padding:12px 15px;border:1px solid #e6eaf0;border-radius:20px;background:#fff;color:#212b36;text-decoration:none;box-shadow:0 3px 6px rgba(17,24,39,.03);transition:border-color 150ms ease,box-shadow 150ms ease} /* 369-exempt: hairline border + vendor .card 20px radius */
.seo-launch-icon{flex:0 0 36px;display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:9px;background:rgba(0,96,255,.08);color:#0060ff;font-size:21px;line-height:1.5}
.seo-launch-body{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0}
.seo-launch-label{font-size:15px;font-weight:700;line-height:1.5;color:inherit}
.seo-launch-purpose{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;font-size:12px;font-weight:500;line-height:1.5;color:#5d6478;overflow:hidden}
.seo-launch-badge{flex:0 0 auto;padding:3px 9px;border-radius:12px;background:#fdf3e3;color:#b45309;font-size:12px;line-height:1.5;white-space:nowrap}
.seo-launch-arrow{flex:0 0 21px;width:21px;height:21px;color:#a6b0c0;opacity:0;transition:opacity 150ms ease,transform 150ms ease}
.seo-launch-card:hover,.seo-launch-card:focus-visible{border-color:rgba(0,96,255,.45);box-shadow:0 6px 15px rgba(17,24,39,.06)}
.seo-launch-card:hover .seo-launch-arrow,.seo-launch-card:focus-visible .seo-launch-arrow{opacity:1;transform:translateX(-3px)}
.seo-launch-card:focus-visible{outline:3px solid #0060ff;outline-offset:3px}
@media (min-width:768px){.seo-launch-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1200px){.seo-launch-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (hover:none){.seo-launch-arrow{opacity:1}}
@media (prefers-reduced-motion:reduce){.seo-launch-card,.seo-launch-arrow{transition:none}.seo-launch-card:hover .seo-launch-arrow,.seo-launch-card:focus-visible .seo-launch-arrow{transform:none}}
body#dark .seo-launch-lead,body#dark .seo-launch-count{color:#b6c0cf}
body#dark .seo-launch-purpose{color:#dbe3ec}
body#dark .seo-launch-chip{background:rgba(255,255,255,.06);color:#c9d1dc}
body#dark .seo-launch-rule{background:rgba(255,255,255,.09)}
body#dark .seo-launch-group-title{color:#e7ecf3}
body#dark .seo-launch-card{background:#353542;border-color:rgba(255,255,255,.09);color:#e7ecf3;box-shadow:none}
body#dark .seo-launch-card:hover,body#dark .seo-launch-card:focus-visible{border-color:rgba(95,215,236,.45);box-shadow:0 6px 15px rgba(0,0,0,.24)}
body#dark .seo-launch-icon{background:rgba(95,215,236,.12);color:#5fd7ec}
body#dark .seo-launch-arrow{color:#8f9bad}
body#dark .seo-launch-card:focus-visible{outline-color:#5fd7ec}
body#dark .seo-launch-badge{background:#4a3a14;color:#ffd88c}

/* ── SEO panel layout (2026-10-22) ────────────────────────────────────────────────
   The panel flex row must let the tab pane shrink; otherwise a wide table (the
   SiteCheck 900px minimum) pushes the pane past the card and takes the toolbar
   button off-screen. The table scrolls inside .table-responsive instead. */
.pills-tab-container{min-width:0;max-width:100%}
.pills-tab-container > .tab-content{min-width:0;max-width:100%}
.pills-tab-container .table-responsive{max-width:100%}

/* ── LTR fields (2026-10-22) ─────────────────────────────────────────────────────
   The theme forces direction:rtl on .form-control, which beats the HTML dir
   attribute; technical fields (URLs, JSON, keys) need an effective LTR order. */
.form-control[dir="ltr"], textarea[dir="ltr"], input[dir="ltr"]{direction:ltr;text-align:left}
/* the google OTP setup steps: the light container needs the dark twin */
#dark .google-steps{background-color:#353542!important}
#dark .google-steps .fs-8{color:#b6c0cf!important}
#dark .google-steps .fw-bold{color:#fff!important}
#dark .google-steps a{color:#8fd4ff!important}

/* ── the bare admin pagination (no .pagination-container) (2026-11-03) ───────────
   The vendor dark rules only cover the storefront .pagination-container family;
   the admin panels' bare .pagination kept the bootstrap light defaults (light-gray
   pages) and the seo-shell link rule painted the labels cyan on them. The light
   look = the storefront family (borderless dark-text chips); the family active
   (#0060ff) in both modes; the dark pages on the #353542 card family. */
.page-link{border:none;color:#1c1c25}
.page-item.active .page-link{background-color:#0060ff;border-color:#0060ff}
#dark .pagination .page-link{background-color:#353542;border-color:transparent;color:#c9d1dc}
#dark .pagination .page-link:hover,#dark .pagination .page-link:focus{background-color:#3d3d4e;color:#fff}
#dark .pagination .page-item.active .page-link{background-color:#0060ff;color:#fff}
#dark .pagination .page-item.disabled .page-link{background-color:#2d2d3a;color:#6b7280}

/* the y-crosshair renders VISIBLE ON INITIAL LOAD on every apexcharts chart
   (12/12 on the admin dashboard, zero hover) — it paints a stray horizontal line
   above/through each chart (owner: «یک خط بالای نمودار ها افتاده», 2026-11-08).
   Hiding it site-wide: hover tooltips still report values; the dead guide line goes. */
.apexcharts-ycrosshairs{display:none}

/* ── the dashboard staff texts read too light (owner, 2026-11-08) ───────────────
   The vendor paints the staff widget titles + the domain-checklist chip labels with
   the caption gray #8f9bad; the owner finds them too light next to the dark values.
   Paint them the house dark (#1c1c25) with the dark-mode parity the pagination
   family already uses (#c9d1dc). Color-only — geometry untouched. */
/* !important: the page chunk CSS (admin-*.css) is injected by Inertia AFTER this
   file — the equal-specificity vendor rule would win the cascade tie otherwise */
.statistics .details .title{color:#1c1c25!important}
.border.rounded-3>.text-gray{color:#1c1c25!important}
#dark .statistics .details .title{color:#c9d1dc}
#dark .border.rounded-3>.text-gray{color:#c9d1dc}

/* ── the staff dashboard grids — gapless (owner: «مثل دندون کنده شده فضای خالی», 2026-11-08) ──
   The bootstrap col grid leaves holes whenever the per-role card/chart count is not a
   multiple of 4/2. auto-fit stretches the LAST row's items to fill the row evenly. */
.staff-cards-grid{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:12px;margin-bottom:24px;margin-inline:0!important}
.staff-cards-grid>[class*='col-']{width:auto;max-width:none;flex:none;margin:0!important;padding-inline:0!important}
.staff-charts-grid{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(min(450px,100%),1fr));gap:12px;margin-bottom:24px;margin-inline:0!important}
.staff-charts-grid>[class*='col-']{width:auto;max-width:none;flex:none;margin:0!important;padding-inline:0!important}

/* the Colors tab (settings): preset cards + swatches — the 369 ladder */
.color-preset-card{background:#fff;border:1px solid #e5e9f2;border-radius:12px;padding:12px;text-align:center;cursor:pointer;transition:border-color .21s,box-shadow .21s;display:inline-block}
.color-preset-card:hover{border-color:var(--primary,#3d63dd);box-shadow:0 6px 18px rgba(0,0,0,.06)}
.color-swatch{display:inline-block;width:27px;height:27px;border-radius:9px;margin-inline-end:6px;border:1px solid rgba(0,0,0,.08)}
.color-swatch--bg{border-style:dashed}
.form-control-color{width:42px;height:33px;padding:3px;border-radius:9px}

/* the bootstrap gutter tangle: every .row carries margin-top: -gutter/2 to cancel
   its columns' own top margins — after my grids zeroed the children margins, that
   -16px ate the section rhythm (21 - 16 = 5px). The row FOLLOWING a grid gets a
   clean zero pair (row 0 + col 0 = the exact bootstrap-intended 0 offset). */
.staff-charts-grid + .row,
.staff-cards-grid + .row { margin-top: 0 !important; }
.staff-charts-grid + .row > [class*='col-'],
.staff-cards-grid + .row > [class*='col-'] { margin-top: 0 !important; }

/* the Colors tab v2: the dark-swatch twin + the custom-preset remove chip */
.color-swatch--dark{border-color:var(--primary,#3d63dd)}
.color-preset-remove{position:absolute;top:3px;left:9px;font-size:18px;line-height:1;color:#c0c6d2;transition:color .21s}
.color-preset-remove:hover{color:#e60012}

/* the Colors tab surfaces must follow the vendor's dark card tone (#353542) —
   the hardcoded #fff preset cards were white boxes in dark (the owner) */
#dark .color-preset-card{background:#353542;border-color:#414150;color:#e6e8ee}
#dark .color-preset-card:hover{box-shadow:0 6px 18px rgba(0,0,0,.4)}
#dark .color-swatch{border-color:rgba(255,255,255,.14)}

/* the logo painted with the bootstrap default primary (#0d6efd) — it follows
   the site palette now (the owner: «رنگ های قرمز و ابی ... و لوگو») */
#app .logo, #app .logo span, .page-footer .logo, .page-footer .logo span { color: var(--primary, #0d6efd) !important; }

/* ── the online chat widget (the visitor side) — palette-driven, dark-aware ── */
.chat-panel{position:fixed;bottom:105px;right:18px;z-index:9999;width:min(342px,calc(100vw - 27px));height:min(498px,calc(100vh - 120px));background:#fff;border-radius:18px;box-shadow:0 18px 45px rgba(0,0,0,.22);display:flex;flex-direction:column;overflow:hidden}
.chat-panel--head{background:var(--primary,#3d63dd);color:#fff;padding:12px 15px;display:flex;align-items:center;justify-content:space-between}
.chat-panel--head-title{display:flex;align-items:center;gap:6px;font-weight:700;font-size:15px}
.chat-panel--status{font-size:11px;opacity:.9;background:rgba(255,255,255,.18);padding:2px 9px;border-radius:9px}
.chat-panel--start{padding:18px 15px;display:flex;flex-direction:column;gap:9px}
.chat-panel--lead{font-size:13px;color:#4a5464;margin:0}
.chat-panel--input{width:100%;border:1px solid #dde2e7;border-radius:9px;padding:9px 12px;font-size:13px;outline:none;font-family:inherit;background:#fff;color:#1c1c25}
.chat-panel--input:focus{border-color:var(--primary,#3d63dd)}
.chat-panel--textarea{resize:none}
.chat-panel--send{background:var(--primary,#3d63dd);color:#fff;border:none;border-radius:9px;padding:9px 15px;font-size:13px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;font-family:inherit}
.chat-panel--send:disabled{opacity:.55;cursor:default}
.chat-panel--send--icon{width:42px;padding:9px 0;font-size:17px}
.chat-panel--thread{flex:1;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:9px;background:#f7f8fa}
.chat-msg{display:flex;gap:6px /* the owner: «از سمت راست یکم فاصله بده که جفت اواتار نباشه پیام» — the bubble breathes off the avatar circle */}
/* the dashboard spacing uniformity (the owner: «فاصله بالا پایین چپ و راست
   بین نمودارها یکسان»): the statistics rows' gutters ride 12 like every other
   inner grid on the dashboard — the sections stay 24 apart */
.row.statistics{--bs-gutter-x:12px;--bs-gutter-y:12px}
.row.income-payments{--bs-gutter-x:12px;--bs-gutter-y:12px}
/* the sides follow the owner's convention (2026-11-09, finalized with the
   screenshot): each surface renders the CLASSIC messenger view of ITS viewer —
   the widget: the visitor's own messages RIGHT, the support's LEFT with the
   avatar on the LEFT and the tail LEFT; the console: the staff's own RIGHT,
   the guest's LEFT */
.chat-msg--guest{justify-content:flex-start}
.chat-msg--staff{justify-content:flex-end}
/* the console's typing dots are the GUEST's — they sit on the guest side */
.chat-console--thread .chat-typing{align-self:flex-end}
/* the ticks must READ on the blue staff bubble: the seen double-check rides
   bright white, the sent single-check dimmer, both at the readable 16 — the
   shared primary-colored seen was invisible on blue (the owner: «تیک ارسال و
   دو تیک سین خوردن هم اضافه بکن») */
.chat-console--thread .chat-msg--meta i{font-size:16px;margin-inline-start:3px}
.chat-console--thread .chat-msg--sent{color:rgba(255,255,255,.7)!important}
.chat-console--thread .chat-msg--seen{color:#fff!important;font-weight:700}
.chat-msg--bubble{max-width:82%;background:#fff;border:1px solid #eef1f6;border-radius:12px 12px 12px 3px;padding:8px 12px}
.chat-msg--staff .chat-msg--bubble{background:var(--primary,#3d63dd);color:#fff;border-color:transparent;border-radius:12px 12px 3px 12px}
.chat-msg--bubble p{margin:0;font-size:13px;line-height:1.71;word-break:break-word;white-space:pre-wrap}
.chat-msg--meta{display:block;font-size:10px;opacity:.65;margin-top:3px;text-align:left}
.chat-msg--seen{font-size:11px}
.chat-typing{display:flex;gap:3px;padding:6px 12px;background:#fff;border:1px solid #eef1f6;border-radius:12px;width:fit-content}
.chat-typing span{width:6px;height:6px;border-radius:50%;background:#b7bfcc;animation:chat-typing-b 1.2s infinite}
.chat-typing span:nth-child(2){animation-delay:.18s}
.chat-typing span:nth-child(3){animation-delay:.36s}
@keyframes chat-typing-b{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-4px)}}
.chat-closed{font-size:12px;color:#8f9bad;text-align:center;padding:9px;background:#f0f3f8;border-radius:9px}
.chat-panel--composer{display:flex;gap:6px;padding:9px;border-top:1px solid #eef1f6;background:#fff}
/* dark */
#dark .chat-panel{background:#262631}
#dark .chat-panel--thread{background:#1e1e28}
#dark .chat-panel--input{background:#353542;border-color:#414150;color:#e6e8ee}
#dark .chat-panel--composer{background:#262631;border-top-color:#414150}
#dark .chat-panel--lead{color:#b7bfcc}
#dark .chat-msg--bubble{background:#353542;border-color:#414150;color:#e6e8ee}
#dark .chat-closed{background:#353542;color:#b7bfcc}
#dark .chat-typing{background:#353542;border-color:#414150}
.chat-panel-enter-active,.chat-panel-leave-active{transition:opacity .21s ease,transform .21s ease}
.chat-panel-enter-from,.chat-panel-leave-to{opacity:0;transform:translateY(12px)}

/* ── the admin chat console ── */
.chat-console--list{max-height:calc(100vh - 190px);overflow-y:auto}
.chat-console--item{display:block;background:transparent;border:none;border-bottom:1px solid #eef1f6;padding:12px 15px;cursor:pointer;transition:background .21s;font-family:inherit}
.chat-console--item:hover{background:#f7f8fa}
.chat-console--item.active{background:rgba(61,99,221,.07);border-inline-start:3px solid var(--primary,#3d63dd)}
.chat-console--thread{flex:1;overflow-y:auto;padding:15px;display:flex;flex-direction:column;gap:9px;background:#f7f8fa;min-height:320px;max-height:calc(100vh - 340px)}
.chat-typing--mini{display:inline-flex;gap:2px}
.chat-typing--mini span{width:4px;height:4px;animation:chat-typing-b 1.2s infinite}
#dark .chat-console--item{border-bottom-color:#414150}
#dark .chat-console--item:hover{background:#2c2c38}
#dark .chat-console--item.active{background:rgba(61,99,221,.14)}
#dark .chat-console--thread{background:#1e1e28}

/* the pill composer: a rounded pill with the round send inside — the 369
   ladder: radius 27 (the pill), the send Ø36, the gap 6 */
.chat-panel--composer{padding:9px;background:#fff;border-top:1px solid #eef1f6;width:100%;box-sizing:border-box}
.chat-composer{display:flex;align-items:center;gap:6px;width:100%;box-sizing:border-box;background:#f0f3f8;border:1px solid #e5e9f2;border-radius:27px;padding:6px;transition:border-color .21s,box-shadow .21s}
.chat-composer:focus-within{border-color:var(--primary,#3d63dd);box-shadow:0 0 0 3px rgba(var(--primary-rgb,61,99,221),.12);background:#fff}
.chat-composer--input{flex:1 1 auto;width:100%;min-width:0;border:none;outline:none;background:transparent;font-size:13px;font-family:inherit;color:#1c1c25;padding:6px 9px 6px 0}
.chat-composer--send{width:36px;height:36px;border-radius:50%;border:none;cursor:pointer;background:var(--primary,#3d63dd);color:#fff;font-size:18px;display:flex;align-items:center;justify-content:center;flex:none;transition:transform .21s,opacity .21s}
.chat-composer--send:hover:not(:disabled){transform:scale(1.06)}
.chat-composer--send:disabled{opacity:.45;cursor:default}
/* the message bubbles + the panel carry shadows now (the owner: «سین داشته باشه») */
.chat-msg--bubble{box-shadow:0 3px 9px rgba(0,0,0,.06)}
.chat-msg--staff .chat-msg--bubble{box-shadow:0 3px 9px rgba(var(--primary-rgb,61,99,221),.22)}
.chat-panel{box-shadow:0 18px 45px rgba(0,0,0,.22),0 0 0 1px rgba(0,0,0,.04)}
/* the message clock is part of the meta row (kept explicit) */
.chat-msg--meta{direction:ltr;font-variant-numeric:tabular-nums}
/* dark */
#dark .chat-composer{background:#353542;border-color:#414150}
#dark .chat-composer:focus-within{background:#2c2c38}
#dark .chat-composer--input{color:#e6e8ee}

/* the chat panel's own close (the launcher is gone — the chat opens from the headset) */
.chat-panel--head-tools{display:flex;align-items:center;gap:6px}
.chat-panel--close{width:27px;height:27px;border-radius:9px;border:none;cursor:pointer;background:rgba(255,255,255,.18);color:#fff;font-size:15px;display:flex;align-items:center;justify-content:center;transition:background .21s}
.chat-panel--close:hover{background:rgba(255,255,255,.32)}
/* the headset carries the chat unread badge */
.sfb-unread{position:absolute;top:-3px;left:-3px;min-width:18px;height:18px;border-radius:9px;background:#e60012;color:#fff;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 4px;border:1px solid #fff}

/* the chat messages animate in on arrival (the owner: «انیمیشن تایپینگ نداره») */
@keyframes chat-msg-in{from{opacity:0;transform:translateY(9px) scale(.97)}to{opacity:1;transform:none}}
.chat-panel .chat-msg, .chat-console--thread .chat-msg{animation:chat-msg-in .27s ease both}

/* the storefront widget renders the VISITOR's view: the visitor's own
   messages sit RIGHT, the support's messages sit LEFT with the avatar on the
   LEFT (the outer edge) and the tail pointing LEFT (the owner:
   «آواتار پشتیبان باید سمت چپ باشه و تیز پیام سمت چپ») */
.chat-panel--thread .chat-msg--guest{justify-content:flex-start}
.chat-panel--thread .chat-msg--staff{flex-direction:row-reverse;justify-content:flex-start}
.chat-panel--thread .chat-msg--staff .chat-msg--bubble{border-radius:12px 12px 12px 3px}
.chat-panel--thread .chat-msg--guest .chat-msg--bubble{border-radius:12px 12px 3px 12px}
.chat-panel--thread .chat-typing{align-self:flex-end}

/* the guest's own ticks: one gray check = sent, the double primary check = seen
   (the owner: «تیک تک و تیک دوتایی نداره») */
.chat-msg--sent{font-size:12px;opacity:.75}
.chat-msg--seen{font-size:12px;color:var(--primary,#3d63dd)!important;opacity:1}
#dark .chat-msg--seen{color:var(--primary,#ff9900)!important}

/* the agent profile in the chat: the header avatar + the bubble-side mini avatar */
.chat-panel--agent-avatar{width:27px;height:27px;border-radius:50%;object-fit:cover;border:1px solid rgba(255,255,255,.4);flex:none}
.chat-msg--avatar{width:30px;height:30px;border-radius:50% /* 369-exempt: 50% is the circle itself — optical physics */;object-fit:cover;flex:none;margin-top:auto;margin-bottom:-9px /* the dip: the owner pushed it lower again — the circle's lower third hangs below the bubble line, seated on the corner point */}

/* the Chat settings tab: the avatar preview */
.chat-avatar-preview{width:48px;height:48px;border-radius:50%;object-fit:cover;border:1px solid #dde2e7}

/* the chat v3: the agent identity block (the name + the role under it), the
   online dot by the avatar, the hidden scrollbar + the smooth thread scroll,
   the attachment affordances */
.chat-panel--agent-wrap{position:relative;flex:none}
.chat-panel--agent-avatar{width:36px;height:36px;border-radius:50%;object-fit:cover;border:1px solid rgba(255,255,255,.4)}
.chat-panel--online-dot{position:absolute;bottom:-1px;left:-1px;width:12px;height:12px;border-radius:50%;background:#22c55e;border:2px solid var(--primary,#3d63dd)}
.chat-panel--online-dot.off{background:#8f9bad}
.chat-panel--agent-names{display:flex;flex-direction:column;gap:0;min-width:0}
.chat-panel--agent-name{font-weight:700;font-size:14px;line-height:1.35}
.chat-panel--agent-role{font-size:11px;opacity:.85;line-height:1.35}
/* the + attach button: the same visible round shape as the send button, a
   tinted fill so the two read as siblings, not one ghost */
.chat-composer--attach{width:36px;height:36px;border-radius:50%;border:none;cursor:pointer;background:rgba(var(--primary-rgb,61,99,221),.14);color:var(--primary,#3d63dd);font-size:19px;display:flex;align-items:center;justify-content:center;flex:none;transition:background .21s,transform .21s}
.chat-composer--attach:hover{background:rgba(var(--primary-rgb,61,99,221),.26);transform:scale(1.06)}
.chat-composer--file{display:none}
.chat-attach-chip{display:flex;align-items:center;gap:6px;background:#e8f0fe;border:1px solid #cddcf5;border-radius:9px;padding:6px 9px;font-size:12px;color:#1c1c25;margin-bottom:6px;max-width:100%}
.chat-attach-chip button{border:none;background:transparent;cursor:pointer;color:#5b6472;font-size:14px;display:flex;padding:2px}
.chat-msg--attach{display:block;margin-bottom:3px}
.chat-msg--attach img{max-width:100%;border-radius:9px;display:block}
.chat-msg--attach-file{display:flex;align-items:center;gap:6px;background:rgba(0,0,0,.05);border-radius:9px;padding:6px 9px;font-size:12px;color:inherit;text-decoration:none;word-break:break-all}
/* the scrollbar hidden + the smooth scroll (the owner: «علامت اسکرول نمایش نده
   و اسکرول نرم تر بشه») */
.chat-panel--thread,.chat-console--thread{scrollbar-width:none;-ms-overflow-style:none;scroll-behavior:smooth}
.chat-panel--thread::-webkit-scrollbar,.chat-console--thread::-webkit-scrollbar{display:none}
#dark .chat-composer{background:#353542;border-color:#414150}
#dark .chat-composer:focus-within{background:#2c2c38}
#dark .chat-composer--input{color:#e6e8ee}
#dark .chat-composer--attach{background:rgba(255,153,0,.16);color:var(--primary,#ff9900)}
#dark .chat-composer--attach:hover{background:rgba(255,153,0,.28)}
#dark .chat-attach-chip{background:#2c2c38;border-color:#414150;color:#e6e8ee}
#dark .chat-msg--avatar{border-color:#414150}

/* the admin sidebar: the NATIVE internal scroll instead of the SimpleBar
   dependency — the wheel always works regardless of the SPA lifecycle, the
   scrollbar sign hidden (the owner: «اسکرول نمیشه سایدبار ادمین») */
.admin-sidebar{display:flex;flex-direction:column}
.admin-sidebar .sidebar-inner{flex:1 1 auto;min-height:0;overflow-y:auto;scrollbar-width:none;-ms-overflow-style:none;scroll-behavior:smooth}
.admin-sidebar .sidebar-inner::-webkit-scrollbar{display:none}

/* ── the admin chat console v2 — the template's own language ──
   the 369 ladder: paddings/gaps 6·9·12·15·18, the avatar 36 (control), the
   glyph 36 holding a 21px icon, radii 9·18 (+ the inherited pill 27), the row
   height 100vh-234 (234→9) min 540, the stacked max-heights 486 (→9) */
.chat-console-row{align-items:stretch}
@media (min-width: 992px){ /* 369-exempt: 992 = the bootstrap lg breakpoint, third-party default */
  .chat-console-row{height:calc(100vh - 234px);min-height:540px}
}
.chat-console-col{min-height:0}
.chat-console-card{display:flex;flex-direction:column;overflow:hidden;border-radius:18px}
.chat-console-card--thread .chat-panel--composer{border-radius:0 0 18px 18px}

/* the list head + the tools (search + status pills), the tickets family's look */
.chat-console-head{display:flex;align-items:center;justify-content:space-between;padding:12px 15px;border-bottom:1px solid #eef1f6} /* 369-exempt: 1px hairline, theme-wide convention */
.chat-console-head--icon{font-size:18px;color:var(--primary,#3d63dd)}
.chat-console-live{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:#22c55e;font-weight:700}
.chat-console-live--dot{width:9px;height:9px;border-radius:50%; /* 369-exempt: circle = shape physics */background:#22c55e;animation:chat-live-p 2.7s ease infinite}
@keyframes chat-live-p{0%,100%{opacity:1}50%{opacity:.3}}
.chat-console-tools{padding:12px 15px 0}
.chat-console-search{margin-bottom:12px}
form.chat-console-search input.form-control{height:36px;min-height:36px;padding:6px 12px}
.chat-console-pills{margin-bottom:12px;flex-wrap:nowrap;overflow-x:auto}
.chat-console-pills .nav-link{padding:6px 12px;font-size:12px;white-space:nowrap}

/* the list — flex inside the card, the old max-height model retired */
.chat-console--list{flex:1 1 auto;min-height:0;overflow-y:auto;max-height:none}
@media (max-width: 991.98px){
  .chat-console--list{max-height:486px}
  .chat-console--thread{max-height:486px}
}
.chat-console--item{display:flex;align-items:flex-start;gap:9px;width:100%;background:transparent;border:none;border-bottom:1px solid #eef1f6; /* 369-exempt: 1px hairline */padding:12px 15px;cursor:pointer;text-align:start;transition:background .21s;font-family:inherit}
.chat-console--item:hover{background:#f7f8fa}
.chat-console--item.active{background:rgba(var(--primary-rgb,61,99,221),.09)} /* the accent = the logical border-inline-start at the legacy rule above — ONE band, START side in RTL */
.chat-console--avatar{width:36px;height:36px;border-radius:50%; /* 369-exempt: circle = shape physics, not a token */display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex:none;user-select:none}
.chat-console--body{flex:1 1 auto;min-width:0;display:flex;flex-direction:column}
.chat-console--time{direction:ltr;font-variant-numeric:tabular-nums;flex:none}
.chat-console--preview{margin-top:3px}
.chat-console--meta-row{margin-top:6px}
.chat-console--empty-list{display:flex;flex-direction:column;align-items:center;gap:9px;padding:36px 18px}

/* the thread head: identity + the two actions, the tickets family wording */
.chat-thread-head{display:flex;align-items:center;gap:9px;padding:12px 15px;border-bottom:1px solid #eef1f6;flex:none} /* 369-exempt: 1px hairline */
.chat-thread-head--names{display:flex;align-items:center;gap:6px;min-width:0;flex:1 1 auto}
.chat-thread-head--actions{display:flex;align-items:center;gap:6px;flex:none}

/* the thread body fills the card — no more dead void under it */
.chat-console--thread{flex:1 1 auto;min-height:0;overflow-y:auto;padding:15px 18px;display:flex;flex-direction:column;gap:9px;background:#f7f8fa}
/* the console renders the STAFF's view: the guest's words (received) LEFT,
   the staff's/assistant's own words RIGHT */
.chat-console--thread .chat-msg--guest{justify-content:flex-end}
.chat-console--thread .chat-msg--staff{justify-content:flex-start}
/* the console's sender avatar: the REAL profile picture at the readable size
   (the owner: «عکس اواتار هم بزرگتر و لود بکن چون خرابه» — the 21px mini and
   the gray placeholder looked broken) */
.chat-console--thread .chat-msg--avatar{width:36px;height:36px}
/* the attachment chip inside the blue staff bubble: the translucent white
   chip with the white text — the gray-on-blue chip was unreadable (the
   owner: «این رنگ هارو اصلاح بکن») */
.chat-msg--staff .chat-msg--attach-file{background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.3);color:#fff}
.chat-console--empty-thread{display:flex;flex-direction:column;align-items:center;gap:9px;padding:36px 18px}

/* the empty/placeholder states: the tinted glyph circle + a 21px icon */
.chat-console--glyph{width:36px;height:36px;border-radius:50%; /* 369-exempt: circle = shape physics */display:inline-flex;align-items:center;justify-content:center}
.chat-console--glyph i{font-size:21px}
.chat-console--placeholder{flex:1 1 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;padding:36px 18px;text-align:center}

/* the closed strip: a quiet amber note above the composer */
.chat-console--closed-note{display:flex;align-items:center;gap:6px;padding:9px 15px;font-size:12px;color:#b45309;background:rgba(217,119,6,.12);border-top:1px solid rgba(217,119,06,.18);flex:none} /* 369-exempt: 1px hairline */
.chat-console--closed-note i{font-size:18px}

/* dark — every text surface explicit: #e6e8ee reads, #b7bfcc whispers */
#dark .chat-console-head{border-bottom-color:#414150}
#dark .chat-console-head .fw-bold{color:#e6e8ee}
#dark .chat-console-live{color:#4ade80}
#dark .chat-console-pills .nav-link{color:#b7bfcc}
#dark .chat-console-pills .nav-link.active{color:#fff}
#dark .chat-console--item{border-bottom-color:#414150}
#dark .chat-console--item:hover{background:#2c2c38}
#dark .chat-console--item.active{background:rgba(var(--primary-rgb,61,99,221),.16)}
#dark .chat-console--item .fw-bold{color:#e6e8ee}
#dark .chat-console--item .text-gray{color:#b7bfcc!important}
#dark .chat-console--thread{background:#1e1e28}
#dark .chat-console--empty-thread .text-gray,
#dark .chat-console--empty-list .text-gray,
#dark .chat-console--placeholder .text-gray{color:#b7bfcc!important}
#dark .chat-console--placeholder .fw-bold{color:#e6e8ee}
#dark .chat-console--closed-note{color:#fbbf24;background:rgba(217,119,6,.14);border-top-color:#414150}
#dark .badge.bg-dark{background:#353542!important;color:#e6e8ee!important}

/* the deterministic avatar hues — the template's own palette, tinted .14 */
.chat-console--avatar--h0{background:rgba(61,99,221,.14);color:#3d63dd}
.chat-console--avatar--h1{background:rgba(8,145,201,.14);color:#0891c9}
.chat-console--avatar--h2{background:rgba(14,116,144,.14);color:#0e7490}
.chat-console--avatar--h3{background:rgba(217,119,6,.14);color:#d97706}
.chat-console--avatar--h4{background:rgba(185,28,28,.14);color:#b91c1c}
.chat-console--glyph--primary{background:rgba(var(--primary-rgb,61,99,221),.14);color:var(--primary,#3d63dd)}

/* the guest identity strip: the customer badge + the phone/country/ip/page */
.chat-thread-identity{display:flex;align-items:center;flex-wrap:wrap;gap:9px;padding:6px 15px;border-bottom:1px solid #eef1f6;flex:none} /* 369-exempt: 1px hairline */
.chat-identity--phone{color:var(--primary,#3d63dd);text-decoration:none;font-weight:700}
.chat-identity--ip{font-variant-numeric:tabular-nums}
.chat-identity--page{max-width:255px}
#dark .chat-thread-identity{border-bottom-color:#414150}
#dark .chat-thread-identity .text-gray{color:#b7bfcc!important}
#dark .badge.bg-light{background:#353542!important;color:#e6e8ee!important}

/* the start-step failure note in the chat widget */
.chat-start--error{color:#b91c1c;font-weight:700}
#dark .chat-start--error{color:#f87171}

/* the guest's referral button in the widget (the assistant steps aside) */
.chat-escalate{display:flex;align-items:center;justify-content:center;gap:6px;width:calc(100% - 18px);margin:0 9px 6px;background:transparent;border:1px solid #e5e9f2; /* 369-exempt: 1px hairline */border-radius:9px;padding:6px;font-size:12px;color:#5b6472;cursor:pointer;font-family:inherit;transition:color .21s,border-color .21s}
.chat-escalate:hover{color:var(--primary,#3d63dd);border-color:var(--primary,#3d63dd)}
.chat-escalate i{font-size:15px}
#dark .chat-escalate{border-color:#414150;color:#b7bfcc}

/* the chat tab's staff online list */
.chat-staff-item{background:#f7f8fa;border:1px solid #eef1f6;border-radius:18px;padding:6px 12px;cursor:pointer}
.chat-staff-item:hover{border-color:var(--primary,#3d63dd)}
.chat-staff-avatar{width:36px;height:36px;border-radius:50%;object-fit:cover;border:1px solid #e5e9f2}
#dark .chat-staff-item{background:#2c2c38;border-color:#414150}
#dark .chat-staff-avatar{border-color:#414150}

/* the handoff card: the assistant's digest the agent reads above the full thread */
.chat-handoff{margin:9px 15px 0;background:rgba(var(--primary-rgb,61,99,221),.09);border:1px solid rgba(var(--primary-rgb,61,99,221),.25);border-radius:12px;padding:9px 12px;flex:none}
.chat-handoff--head{display:flex;align-items:center;gap:6px;font-weight:700;font-size:12px;color:var(--primary,#3d63dd);margin-bottom:3px}
.chat-handoff--head i{font-size:16px}
.chat-handoff--text{margin:0;font-size:13px;line-height:1.71;white-space:pre-wrap;color:#1c1c25}
#dark .chat-handoff{background:rgba(var(--primary-rgb,61,99,221),.16);border-color:#414150}
#dark .chat-handoff--text{color:#e6e8ee}

/* the new-chat action inside the closed note */
.chat-new-chat{display:inline-flex;align-items:center;gap:6px;margin-top:6px;background:var(--primary,#3d63dd);color:#fff;border:none;border-radius:9px;padding:6px 12px;font-size:12px;font-weight:700;cursor:pointer;font-family:inherit;transition:opacity .21s}
.chat-new-chat:hover{opacity:.9}
.chat-new-chat i{font-size:15px}
/* the bot is the default counterpart: the styled robot glyph replaces the photo
   avatar (the header + the ai bubbles) — the Remix glyphs, never the raw emoji
   (the owner: «با ایموجی های شیک استفاده بکن و نه ایموجی های پیشفرض») */
.chat-panel--bot-avatar{display:inline-flex;align-items:center;justify-content:center;background:rgba(255,255,255,.22);color:#fff}
.chat-panel--bot-avatar i{font-size:18px}
.chat-msg--bot-avatar{display:inline-flex;align-items:center;justify-content:center;background:var(--primary,#3d63dd);color:#fff}
.chat-msg--bot-avatar i{font-size:16px /* 369-exempt: the documented 16px inline-icon exception */}
.chat-msg--system{justify-content:center}
.chat-msg--system-note{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:#8f9bad;background:#f0f3f8;border-radius:9px;padding:6px 12px}
.chat-msg--system-note i{color:var(--primary,#3d63dd);font-size:15px}
/* the closed-thread survey: the 1-5 stars on the 3-ladder */
.chat-survey{margin-top:6px;background:#f7f9fc;border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:9px}
.chat-survey--title{font-size:12px;color:#3c4457;display:flex;align-items:center;gap:6px}
.chat-survey--title i{color:#f43f5e;font-size:15px}
.chat-survey--stars{display:flex;gap:6px;justify-content:center}
.chat-survey--star{width:27px;height:27px;border:none;background:transparent;color:#c9d2e0;font-size:21px;cursor:pointer;padding:0;border-radius:6px;transition:color .15s,transform .15s}
.chat-survey--star.on{color:#fbbf24}
.chat-survey--star:active{transform:scale(.9)}
.chat-survey .chat-panel--textarea{min-height:0;resize:none}
.chat-survey--thanks{align-items:center;justify-content:center;text-align:center;font-size:12px;color:#3c4457;flex-direction:row;gap:6px}
.chat-survey--thanks i{color:#f43f5e;font-size:18px}
#dark .chat-survey{background:#2b2b37}
#dark .chat-survey--title{color:#e6e8ee}
#dark .chat-survey--thanks{color:#e6e8ee}
#dark .chat-msg--system-note{background:#33333f;color:#b7bfcc}
/* the console's survey badge on the closed note — the gold star + the note inline */
.chat-survey-badge{display:inline-flex;align-items:center;gap:3px;margin-inline-start:6px;color:#b98a00;font-weight:600}
.chat-survey-badge i{color:#fbbf24;font-size:15px}
.chat-survey-badge--note{color:#8f9bad;font-weight:400}
/* the closed-conversation view (the owner: «اینپوت بالا بره بد استایل بشه»):
   the thread card must NOT stretch past the viewport with the row — it caps at
   the list's height and the thread scrolls INSIDE, so the bottom block anchors
   at the card's foot instead of floating mid-dead-space */
.chat-console-card--thread{display:flex;flex-direction:column;max-height:calc(100vh - 190px) /* 369-exempt: mirrors the list column's own cap — one context, one value */;overflow:hidden}
.chat-console-card--thread .chat-console--thread{flex:1 1 auto;min-height:0;max-height:none}
/* the closed state is an interface of its own: no dead composer — the note
   becomes the foot block with the provenance + the survey verdict */
.chat-console--closed-note{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 9px;padding:15px;background:#f0f3f8;font-size:12px;color:#5a6478;text-align:center}
.chat-console--closed-note i{font-size:18px;color:#8f9bad}

/* the Telegram-style chat wallpaper (the owner: «پسزمینه مثل تلگرام شکلک های مرتبط
   با فروشگاه و مرتبط با پشتیبان بساز») — the hand-drawn SVG tile (the rule-3 paths,
   never the icon-font-as-art): the shop glyphs (the bag, the tag, the card) + the
   support glyphs (the headset, the chat dots, the robot) at the whisper opacity;
   the wallpaper rides the element (the default attachment) so the messages slide
   over a steady pattern, the Telegram way */
.chat-panel--thread, .chat-console--thread{background-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%22240%22%20height=%22240%22%20viewBox=%220%200%20240%20240%22%3E%3Cg%20fill=%22none%22%20stroke=%22%233c4457%22%20stroke-opacity=%22.07%22%20stroke-width=%222%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cg%20transform=%22translate%2814%2016%29%20rotate%28-14%2014%2014%29%22%3E%3Cpath%20d=%22M7%209h10l-1.2%2011H8.2L7%209z%22/%3E%3Cpath%20d=%22M9%209a3%203%200%200%201%206%200%22/%3E%3C/g%3E%3Cg%20transform=%22translate%2896%2052%29%20rotate%2812%2014%2014%29%22%3E%3Cpath%20d=%22M4%204h6.5L20%2013.5%2013.5%2020%204%2010.5V4z%22/%3E%3Ccircle%20cx=%228.5%22%20cy=%228.5%22%20r=%221.4%22/%3E%3C/g%3E%3Cg%20transform=%22translate%28170%2020%29%20rotate%28-8%2014%2014%29%22%3E%3Crect%20x=%223%22%20y=%226%22%20width=%2218%22%20height=%2212%22%20rx=%222%22/%3E%3Cpath%20d=%22M3%2010.5h18%22/%3E%3C/g%3E%3Cg%20transform=%22translate%2830%20140%29%20rotate%2816%2014%2014%29%22%3E%3Cpath%20d=%22M4%2014v-2a8%208%200%200%201%2016%200v2%22/%3E%3Crect%20x=%223%22%20y=%2213%22%20width=%224%22%20height=%226%22%20rx=%221.5%22/%3E%3Crect%20x=%2217%22%20y=%2213%22%20width=%224%22%20height=%226%22%20rx=%221.5%22/%3E%3Cpath%20d=%22M21%2019v1.5a2%202%200%200%201-2%202h-5%22/%3E%3C/g%3E%3Cg%20transform=%22translate%28112%20130%29%20rotate%28-12%2014%2014%29%22%3E%3Cpath%20d=%22M4%205h16v11H9l-5%204V5z%22/%3E%3Ccircle%20cx=%229%22%20cy=%2210.5%22%20r=%22.9%22/%3E%3Ccircle%20cx=%2212.5%22%20cy=%2210.5%22%20r=%22.9%22/%3E%3Ccircle%20cx=%2216%22%20cy=%2210.5%22%20r=%22.9%22/%3E%3C/g%3E%3Cg%20transform=%22translate%28182%20162%29%20rotate%2810%2014%2014%29%22%3E%3Crect%20x=%225%22%20y=%228%22%20width=%2214%22%20height=%2210%22%20rx=%222%22/%3E%3Cpath%20d=%22M12%208V5%22/%3E%3Ccircle%20cx=%2212%22%20cy=%224%22%20r=%221%22/%3E%3Ccircle%20cx=%229.5%22%20cy=%2213%22%20r=%221.1%22/%3E%3Ccircle%20cx=%2214.5%22%20cy=%2213%22%20r=%221.1%22/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") /* 369-exempt: the wallpaper tile is artwork — the internal geometry is the drawing, not layout numbers */}
#dark .chat-panel--thread, #dark .chat-console--thread{background-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%22240%22%20height=%22240%22%20viewBox=%220%200%20240%20240%22%3E%3Cg%20fill=%22none%22%20stroke=%22%23e6e8ee%22%20stroke-opacity=%22.05%22%20stroke-width=%222%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cg%20transform=%22translate%2814%2016%29%20rotate%28-14%2014%2014%29%22%3E%3Cpath%20d=%22M7%209h10l-1.2%2011H8.2L7%209z%22/%3E%3Cpath%20d=%22M9%209a3%203%200%200%201%206%200%22/%3E%3C/g%3E%3Cg%20transform=%22translate%2896%2052%29%20rotate%2812%2014%2014%29%22%3E%3Cpath%20d=%22M4%204h6.5L20%2013.5%2013.5%2020%204%2010.5V4z%22/%3E%3Ccircle%20cx=%228.5%22%20cy=%228.5%22%20r=%221.4%22/%3E%3C/g%3E%3Cg%20transform=%22translate%28170%2020%29%20rotate%28-8%2014%2014%29%22%3E%3Crect%20x=%223%22%20y=%226%22%20width=%2218%22%20height=%2212%22%20rx=%222%22/%3E%3Cpath%20d=%22M3%2010.5h18%22/%3E%3C/g%3E%3Cg%20transform=%22translate%2830%20140%29%20rotate%2816%2014%2014%29%22%3E%3Cpath%20d=%22M4%2014v-2a8%208%200%200%201%2016%200v2%22/%3E%3Crect%20x=%223%22%20y=%2213%22%20width=%224%22%20height=%226%22%20rx=%221.5%22/%3E%3Crect%20x=%2217%22%20y=%2213%22%20width=%224%22%20height=%226%22%20rx=%221.5%22/%3E%3Cpath%20d=%22M21%2019v1.5a2%202%200%200%201-2%202h-5%22/%3E%3C/g%3E%3Cg%20transform=%22translate%28112%20130%29%20rotate%28-12%2014%2014%29%22%3E%3Cpath%20d=%22M4%205h16v11H9l-5%204V5z%22/%3E%3Ccircle%20cx=%229%22%20cy=%2210.5%22%20r=%22.9%22/%3E%3Ccircle%20cx=%2212.5%22%20cy=%2210.5%22%20r=%22.9%22/%3E%3Ccircle%20cx=%2216%22%20cy=%2210.5%22%20r=%22.9%22/%3E%3C/g%3E%3Cg%20transform=%22translate%28182%20162%29%20rotate%2810%2014%2014%29%22%3E%3Crect%20x=%225%22%20y=%228%22%20width=%2214%22%20height=%2210%22%20rx=%222%22/%3E%3Cpath%20d=%22M12%208V5%22/%3E%3Ccircle%20cx=%2212%22%20cy=%224%22%20r=%221%22/%3E%3Ccircle%20cx=%229.5%22%20cy=%2213%22%20r=%221.1%22/%3E%3Ccircle%20cx=%2214.5%22%20cy=%2213%22%20r=%221.1%22/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") /* 369-exempt: the dark tile mirrors the drawing at the lower opacity */}
/* the conversations-list redesign (the owner: «لیست بینهایت نکن، باکس و اسکرول،
   اینپوت جستجو بهم ریخته»): the list card caps at the viewport like its thread
   sibling — the list scrolls INSIDE the box; the search becomes a proper pill
   with the inline icon (the RTL start side), no more raw form-control mess */
.chat-console-card{max-height:calc(100vh - 190px) /* 369-exempt: the family cap mirrors the thread card's own — one family, one value */}
.chat-console-search{position:relative}
.chat-console-search .form-control{border-radius:12px;background:#f7f8fa;padding-inline-start:36px;font-size:12px;height:36px;box-shadow:none}
.chat-console-search .form-control:focus{background:#fff;box-shadow:0 0 0 3px rgba(61,99,221,.15)}
/* the search icon: the real span in the markup (the reactive search needs no
   button) — anchored at the RTL start, the pointer off (the input owns clicks) */
.chat-console-search--icon{position:absolute;inset-inline-start:12px;top:18px;transform:translateY(-50%) /* 369-exempt: the centering physics — the anchor is the INPUT's own half-height (36/2), not the taller form */;color:#8f9bad;font-size:16px /* 369-exempt: the documented 16px inline-icon exception */;line-height:1;pointer-events:none}
#dark .chat-console-search--icon{color:#b7bfcc}
.chat-console-search .btn i{font-size:16px /* 369-exempt: the documented 16px inline-icon exception */}
.chat-console-search .btn:hover,.chat-console-search .btn:focus{color:var(--primary,#3d63dd);background:transparent;box-shadow:none}
#dark .chat-console-search .form-control{background:#353542;color:#e6e8ee}
#dark .chat-console-search .form-control:focus{background:#2c2c38}
#dark .chat-console-search .btn{color:#b7bfcc}

/* the console's ready answers: one scrollable chip row above the composer */
.chat-canned{display:flex;gap:6px;overflow-x:auto;padding:0 9px 6px;scrollbar-width:none}
.chat-canned--chip{flex:none;height:28.8px;padding:0 12px;border:1px solid #e5e9f2;border-radius:9px;background:#fff;color:#3a4352;font-size:12px;line-height:1;cursor:pointer;transition:background .18s,border-color .18s}
.chat-canned--chip:hover{background:#f4f6fa;border-color:#d7dded}

/* the chat settings tab: the "آواتار کارشناس" control is retired (the assigned
   staff's own avatar always wins, so the field only confused). The page chunk is
   frozen (verify:mod prologue), so the removal rides the CSS patch layer —
   :has() takes the whole column down with its label and media button. */
#chat-tab-pane .col-md-6:has(.chat-avatar-preview){display:none!important}

/* ── the chat console, Telegram-flavoured ── the list narrowed (the thread gets
   the room), the rows rounded, and the visitor dossier sliding in from the
   physical LEFT inside the thread card ── */
.chat-console-card--thread{position:relative;overflow:hidden}
.chat-console--item{border-radius:12px;margin:0 6px 6px;transition:background .18s}
.chat-console--item.active{background:#eef3ff}
.chat-console--thread .chat-msg--bubble{border-radius:15px 15px 15px 3px;box-shadow:0 1px 3px rgba(20,30,60,.06)}
.chat-visitor-panel{position:absolute;top:0;bottom:0;left:0;width:264px;background:#fff;border-right:1px solid #e5e9f2;transform:translateX(-100%);transition:transform .21s ease;z-index:4;display:flex;flex-direction:column;box-shadow:9px 0 27px rgba(20,30,60,.08)}
.chat-visitor-panel.open{transform:translateX(0)}
.chat-visitor-toggle{display:flex;align-items:center;gap:6px;height:36px;padding:0 9px;border:0;border-bottom:1px solid #eef1f6;background:#f7f8fa;color:#3a4352;cursor:pointer;white-space:nowrap}
.chat-visitor-body{flex:1;overflow-y:auto;padding:9px 12px}
.chat-visitor-list{display:grid;grid-template-columns:auto 1fr;gap:6px 9px;margin:0 0 12px;font-size:12px}
.chat-visitor-list dt{color:#7a8494;font-weight:400}
.chat-visitor-list dd{margin:0;color:#1c1c25;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-visitor-events{border-top:1px solid #eef1f6;padding-top:9px}
.chat-visitor-event{display:flex;align-items:center;gap:6px;margin-bottom:6px}

/* ── the console layout, standard pass ── the dossier no longer COVERS the
   thread: when it opens the thread and the composer give it the room (a real
   layout shift, not a slide-over). Widths: list 318, dossier 264, the thread
   takes the rest. Dark palette follows the site's #1e1e28/#262633 family. ── */
.chat-console-row>.chat-console-col{flex:0 0 318px;max-width:318px}
@media (max-width:1199.98px){.chat-console-row>.chat-console-col{flex:0 0 100%;max-width:100%}}
.chat-console-card--thread{position:relative;display:flex;flex-direction:column;min-height:calc(100vh - 190px)}
.chat-visitor-panel{position:absolute;top:0;bottom:0;left:0;width:264px;background:#fff;border-right:3px solid #eef1f6;transform:translateX(-100%);transition:transform .21s ease,visibility .21s;visibility:hidden;z-index:4;display:flex;flex-direction:column}
.chat-visitor-panel.open{transform:translateX(0);visibility:visible}
.chat-console-card--thread:has(.chat-visitor-panel.open) .chat-console--thread{padding-left:276px}
.chat-console-card--thread:has(.chat-visitor-panel.open) .chat-panel--composer{padding-left:276px}
.chat-visitor-toggle{display:flex;align-items:center;gap:6px;height:36px;padding:0 9px;border:0;border-bottom:3px solid #eef1f6;background:#f7f8fa;color:#3a4352;cursor:pointer;white-space:nowrap;font-size:12px}
.chat-visitor-body{flex:1;overflow-y:auto;padding:12px}
.chat-visitor-list{display:grid;grid-template-columns:auto minmax(0,1fr);gap:9px 12px;margin:0 0 12px;font-size:12px}
.chat-visitor-list dt{color:#7a8494;font-weight:400}
.chat-visitor-list dd{margin:0;color:#1c1c25;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-visitor-events{border-top:3px solid #eef1f6;padding-top:9px}
.chat-visitor-event{display:flex;align-items:center;gap:6px;margin-bottom:6px;min-width:0}
.chat-visitor-event span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-console--item{border-radius:12px;margin:0 6px 6px}
.chat-console--thread .chat-msg--bubble{border-radius:15px 15px 15px 3px}

#dark .chat-visitor-panel{background:#262633;border-right-color:#353542}
#dark .chat-visitor-toggle{background:#2c2c38;border-bottom-color:#353542;color:#e6e8ee}
#dark .chat-visitor-list dt{color:#9aa3b2}
#dark .chat-visitor-list dd{color:#e6e8ee}
#dark .chat-visitor-events{border-top-color:#353542}
#dark .chat-console--item.active{background:#2f3350}
#dark .chat-console--item{color:#e6e8ee}

/* the dossier as a RAIL, not a slide-over: closed = 48px rail with the toggle
   always visible (the earlier visibility:hidden swallowed its own toggle), open
   = 264px; the thread pads beside it in both states. */
.chat-visitor-panel{transform:none!important;visibility:visible!important;width:48px;transition:width .21s ease;overflow:hidden;padding:0}
.chat-visitor-panel.open{width:264px}
.chat-visitor-panel:not(.open) .chat-visitor-body{display:none}
.chat-visitor-panel:not(.open) .chat-visitor-toggle{writing-mode:vertical-rl;height:auto;flex:1;justify-content:flex-start;padding:12px 6px;border-bottom:0;gap:9px}
.chat-console-card--thread .chat-console--thread{padding-left:60px!important}
.chat-console-card--thread .chat-panel--composer{padding-left:60px!important}
.chat-console-card--thread:has(.chat-visitor-panel.open) .chat-console--thread{padding-left:276px!important}
.chat-console-card--thread:has(.chat-visitor-panel.open) .chat-panel--composer{padding-left:276px!important}

/* the width bug: BOTH columns carry .chat-console-col, so the 318px pin hit the
   thread too and the row collapsed to a narrow block on the right. Pin ONLY the
   list; the thread column takes every remaining pixel. */
.chat-console-row{display:flex;align-items:stretch}
.chat-console-row>.chat-console-col{flex:1 1 auto;max-width:none;min-width:0}
.chat-console-row>.chat-console-col:first-child{flex:0 0 318px;max-width:318px;min-width:318px}
@media (max-width:1199.98px){
  .chat-console-row{flex-wrap:wrap}
  .chat-console-row>.chat-console-col:first-child{flex:0 0 100%;max-width:100%;min-width:0}
}
.container-fluid:has(.chat-console-row){padding-inline:12px}

/* the console polish: a wider list, the dossier clears the card header, values
   on their own LTR track, colour-coded rows, compact list items and tabs. */
.chat-console-row>.chat-console-col:first-child{flex:0 0 384px!important;max-width:384px!important;min-width:384px!important}
.chat-visitor-panel{top:54px!important;border-radius:0 0 0 12px}
.chat-visitor-toggle{border-bottom:3px solid #eef1f6}
.chat-visitor-grid{display:flex;flex-direction:column;gap:3px}
.chat-visitor-row{display:grid;grid-template-columns:18px 42px minmax(0,1fr) 18px;align-items:center;gap:6px;width:100%;padding:6px 9px;border:0;border-radius:9px;background:transparent;text-align:right;font-size:12px;color:#1c1c25;cursor:pointer;transition:background .15s}
.chat-visitor-row:hover{background:#f4f6fa}
.chat-visitor-row.is-static{cursor:default}
.chat-visitor-row.is-static:hover{background:transparent}
.chat-visitor-icon{color:var(--primary,#3d63dd);font-size:15px}
.chat-visitor-key{color:#7a8494}
.chat-visitor-val{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-visitor-val.ltr{direction:ltr;text-align:left;font-variant-numeric:tabular-nums}
.chat-visitor-copy{color:#9aa3b2;font-size:15px}
.chat-console--item{padding:6px 9px!important}
.chat-console--avatar{width:33px!important;height:33px!important;font-size:12px}
.chat-console--preview{max-height:18px}
.chat-console-pills .nav-link{height:28.8px;padding:0 12px;border-radius:9px;font-size:12px;display:inline-flex;align-items:center;gap:3px}
#dark .chat-visitor-row{color:#e6e8ee}
#dark .chat-visitor-row:hover{background:#2f2f3d}
#dark .chat-visitor-key{color:#9aa3b2}
#dark .chat-console-pills .nav-link.active{background:#3d63dd;color:#fff}

/* the list rows: the status pill becomes a QUIET label at the start of the meta
   row, the unread a round coloured counter at the end — no more two loud pills */
.chat-console--meta-row{justify-content:space-between;gap:6px}
.chat-console--meta-row>.badge:not(.bg-danger):not(.bg-primary){order:-1;background:transparent!important;color:#8b95a5!important;padding:0;font-size:10px;font-weight:400;letter-spacing:.02em}
.chat-console--meta-row>.bg-danger{min-width:21px;height:21px;border-radius:50%!important;display:inline-flex;align-items:center;justify-content:center;font-size:10px!important;background:#e60012!important;color:#fff;box-shadow:0 3px 9px rgba(230,0,18,.33)}
.chat-console--meta-row .bg-primary.rounded-pill{font-size:9px!important;padding:0 6px!important;line-height:15px}
#dark .chat-console--meta-row>.badge:not(.bg-danger):not(.bg-primary){color:#8b95a5!important}

/* the dossier as a FIXED left sidebar of the thread card (same card language as
   the conversations list), collapsible to zero, never a vertical rail */
.chat-visitor-panel{top:0!important;bottom:0;width:264px;border-radius:12px;border:1px solid #eef1f6;background:#fff;box-shadow:0 1px 3px rgba(20,30,60,.06);overflow:hidden}
.chat-visitor-panel:not(.open){width:0;border:0;box-shadow:none}
.chat-visitor-toggle{writing-mode:horizontal-tb!important;height:36px!important;flex:none!important;padding:0 9px!important;border-bottom:1px solid #eef1f6!important;justify-content:space-between!important;border-radius:12px 12px 0 0}
.chat-console-card--thread .chat-console--thread{padding-left:12px!important}
.chat-console-card--thread .chat-panel--composer{padding-left:12px!important}
.chat-console-card--thread:has(.chat-visitor-panel.open) .chat-console--thread{padding-left:276px!important}
.chat-console-card--thread:has(.chat-visitor-panel.open) .chat-panel--composer{padding-left:276px!important}
#dark .chat-visitor-panel{background:#262633;border-color:#353542}

/* the collapsed state must stay CLICKABLE: width 0 with overflow hidden covered
   its own toggle. Closed = a 48px card stub showing the chevron only. */
.chat-visitor-panel:not(.open){width:48px!important;border:1px solid #eef1f6;box-shadow:0 1px 3px rgba(20,30,60,.06)}
.chat-visitor-panel:not(.open) .chat-visitor-body{display:none}
.chat-visitor-panel:not(.open) .chat-visitor-toggle span{display:none}
.chat-visitor-panel:not(.open) .chat-visitor-toggle{justify-content:center!important;padding:0!important}
.chat-console-card--thread .chat-console--thread{padding-left:60px!important}
.chat-console-card--thread .chat-panel--composer{padding-left:60px!important}

/* the final list pass: the status reads beside the NAME (one quiet ink label),
   the name never wraps, the row breathes 9/12, and the visitor column is a
   PERMANENT card column on the left — never a toggle, never a rail. */
.chat-console--item{padding:9px 12px!important;align-items:flex-start}
.chat-console--name-wrap{display:flex;align-items:center;gap:6px;min-width:0;flex:1 1 auto}
.chat-console--name{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-console--status-ink{flex:none;font-size:10px;font-weight:400;color:#8b95a5;white-space:nowrap}
.chat-console--time{flex:none;font-size:11px}
.chat-visitor-toggle{display:none!important}
.chat-visitor-panel,
.chat-visitor-panel:not(.open){width:264px!important;transform:none!important;visibility:visible!important;top:0!important;bottom:0;border:1px solid #eef1f6!important;border-radius:12px!important;box-shadow:0 1px 3px rgba(20,30,60,.06)!important;overflow:hidden}
.chat-visitor-panel:not(.open) .chat-visitor-body{display:block!important}
.chat-visitor-body{padding-top:12px!important}
.chat-console-card--thread .chat-console--thread{padding-left:276px!important}
.chat-console-card--thread .chat-panel--composer{padding-left:276px!important}
#dark .chat-console--status-ink{color:#8b95a5}

/* the visitor column is a REAL column of the row now (a sibling of the list and
   the thread, leftmost in RTL) — the same card language as the conversations
   list, never overlaying the thread. */
.chat-console-row>.chat-visitor-col{flex:0 0 264px!important;max-width:264px!important;min-width:264px!important}
.chat-visitor-panel{position:static!important;width:100%!important;height:100%;transform:none!important;visibility:visible!important;border:0!important;border-radius:12px!important;overflow:hidden}
.chat-visitor-panel:not(.open){width:100%!important}
.chat-visitor-panel:not(.open) .chat-visitor-body{display:block!important}
.chat-visitor-toggle{display:none!important}
.chat-visitor-head{display:flex;align-items:center;justify-content:space-between;height:54px;padding:0 12px;border-bottom:1px solid #eef1f6}
.chat-console-card--thread .chat-console--thread{padding-left:15px!important}
.chat-console-card--thread .chat-panel--composer{padding-left:15px!important}
@media (max-width:1199.98px){.chat-console-row>.chat-visitor-col{flex:0 0 100%!important;max-width:100%!important;min-width:0!important}}

/* three columns, full height: the visitor col inherits the row's stretch and its
   card fills the column (the h-100 had no height chain and collapsed). */
.chat-console-row{align-items:stretch}
.chat-console-row>.chat-console-col,
.chat-console-row>.chat-visitor-col{display:flex;flex-direction:column}
.chat-console-row>.chat-visitor-col{flex:0 0 264px!important;max-width:264px!important;min-width:264px!important}
.chat-console-row>.chat-visitor-col>.chat-visitor-panel{flex:1 1 auto;height:auto!important;min-height:calc(100vh - 190px);display:flex;flex-direction:column}
.chat-console-row>.chat-console-col>.chat-console-card{flex:1 1 auto}
.chat-visitor-body{flex:1 1 auto;overflow-y:auto}
@media (max-width:1199.98px){.chat-console-row>.chat-visitor-col{flex:0 0 100%!important;max-width:100%!important;min-width:0!important}}

/* the row must NOT wrap: Bootstrap's .row wraps by default, so 384+thread+264
   overflowed and the visitor col dropped to a second line. */
.chat-console-row{flex-wrap:nowrap!important}
.chat-console-row>.chat-console-col:first-child{flex:0 0 384px!important;max-width:384px!important}
.chat-console-row>.chat-console-col:not(:first-child){flex:1 1 0%!important;min-width:0!important;max-width:none!important}
.chat-console-row>.chat-visitor-col{flex:0 0 264px!important;max-width:264px!important;min-width:264px!important}
@media (max-width:1199.98px){.chat-console-row{flex-wrap:wrap!important}}

/* ── the conversations list, Telegram-flavoured (the owner's reference) ──
   one FIXED row height, a 45 avatar, the name row with the time pushed to the
   far left, a single-line preview, and a quiet meta line; the active row is a
   filled rounded block. Boxes: the three columns already share one height. */
.chat-console--item{height:81px;min-height:81px;max-height:81px;display:flex;align-items:center;gap:9px;padding:9px 12px!important;border-radius:12px;overflow:hidden}
.chat-console--avatar{width:45px!important;height:45px!important;min-width:45px!important;font-size:15px!important;border-radius:50%}
.chat-console--body{min-width:0;flex:1 1 auto;display:flex;flex-direction:column;gap:3px}
.chat-console--item .chat-console--name{font-size:13px;line-height:18px;font-weight:700}
.chat-console--status-ink{font-size:10px;color:#8b95a5;order:2;margin-inline-start:auto}
.chat-console--time{font-size:11px;color:#8b95a5;order:3}
.chat-console--preview{font-size:12px;line-height:18px;color:#8b95a5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-console--meta-row{height:15px!important;overflow:hidden}
.chat-console--meta-row>.bg-danger{min-width:15px;height:15px;font-size:9px!important;box-shadow:none}
.chat-console--meta-row .bg-light,.chat-console--meta-row .bg-warning{font-size:9px!important;padding:0 3px!important;line-height:13px;background:transparent!important;color:#8b95a5!important;border:0}
.chat-console--item.active{background:#eef3ff;box-shadow:inset 0 0 0 1px #dbe4ff}
#dark .chat-console-card{background:#262633}
#dark .chat-console--item{color:#e6e8ee}
#dark .chat-console--item.active{background:#2f3350;box-shadow:inset 0 0 0 1px #3d4470}
#dark .chat-console--preview,#dark .chat-console--time,#dark .chat-console--status-ink{color:#9aa3b2}

/* ONE height for the three columns, and the inner chains clamped so nothing
   (the composer especially) pushes a card past its column. */
.chat-console-row{align-items:stretch!important}
.chat-console-row>div{height:calc(100vh - 190px)!important;max-height:calc(100vh - 190px)!important}
.chat-console-row>div>.card{height:100%!important;max-height:100%!important;overflow:hidden}
.chat-console-card--thread{display:flex;flex-direction:column;overflow:hidden}
.chat-console-card--thread>.chat-console--thread{flex:1 1 auto!important;min-height:0!important;overflow-y:auto}
.chat-console-card--thread>.chat-panel--composer{flex:none!important}
.chat-console-row>.chat-visitor-col>.chat-visitor-panel{min-height:0!important;height:100%!important}

/* the guest/customer ink beside the status in the row (one quiet vocabulary) */
.chat-console--guest-ink{flex:none;font-size:10px;font-weight:400;color:#b0793f;white-space:nowrap;order:1}
.chat-console--guest-ink.is-customer{color:#1f8a52}
#dark .chat-console--guest-ink{color:#d6a768}
#dark .chat-console--guest-ink.is-customer{color:#5fd39a}

/* dark borders: every hairline this console introduces gets its dark twin —
   #eef1f6 (#fff-ish) on a #262633 card is the "bad colour" line. */
#dark .chat-visitor-panel,
#dark .chat-visitor-head,
#dark .chat-visitor-toggle,
#dark .chat-visitor-events,
#dark .chat-console--item,
#dark .chat-console-card,
#dark .chat-console-card--thread{border-color:#353542!important}
#dark .chat-visitor-head{border-bottom-color:#353542!important}
#dark .chat-visitor-events{border-top-color:#353542!important}
#dark .chat-console--item.active{box-shadow:inset 0 0 0 1px #3d4470!important}
#dark .chat-console--item+.chat-console--item{box-shadow:none}
#dark .chat-visitor-row:hover{background:#2f2f3d}
#dark .chat-visitor-copy{color:#6f7787}

/* dark, matched to the dashboard's own palette (#1e1e28 page · #353542 cards ·
   #2c2c38 insets · #b6c0cf muted): the boxes must SEPARATE from the page, and
   the input must read as an inset field, not a stray bright block. */
#dark .chat-console-card,
#dark .chat-console-card--thread,
#dark .chat-visitor-panel{background:#353542!important;border-color:#3d3d4d!important}
#dark .chat-console--thread{background:#2c2c38!important}
#dark .chat-panel--composer{background:#353542!important;border-top:1px solid #3d3d4d!important}
#dark .chat-composer--input,
#dark .chat-console-search .form-control,
#dark .chat-console-search input{background:#2c2c38!important;border-color:#3d3d4d!important;color:#e6e8ee!important}
#dark .chat-composer--input::placeholder{color:#8b95a5!important}
#dark .chat-console--item{background:transparent!important}
#dark .chat-console--item.active{background:#3f3f52!important;box-shadow:inset 0 0 0 1px #4a4a61!important}
#dark .chat-console-pills .nav-link{color:#b6c0cf!important}
#dark .chat-console-pills .nav-link.active{background:#3d63dd!important;color:#fff!important}
#dark .chat-console-head,#dark .chat-visitor-head{background:transparent!important}
#dark .chat-msg--bubble{background:#3f3f52!important;color:#e6e8ee!important}
#dark .chat-msg--guest .chat-msg--bubble{background:#3d63dd!important;color:#fff!important}

/* the dark input must read as an INSET field: fill DARKER than the composer
   strip, a clearly visible border, a focus ring — not #2c2c38 on #353542. */
#dark .chat-composer--input,
#dark .chat-console-search .form-control,
#dark .chat-console-search input{background:#262633!important;border:1px solid #4a4a61!important;color:#e6e8ee!important;box-shadow:inset 0 1px 3px rgba(0,0,0,.24)!important}
#dark .chat-composer--input:focus,
#dark .chat-console-search .form-control:focus{background:#2c2c38!important;border-color:#5a5a75!important;box-shadow:0 0 0 3px rgba(93,120,220,.24)!important;outline:none!important}
#dark .chat-panel--composer{background:#353542!important;border-top:1px solid #4a4a61!important}
#dark .chat-composer--send{background:#3d63dd!important;color:#fff!important}
#dark .chat-composer--attach{background:#3f3f52!important;color:#b6c0cf!important}

/* the composer input keeps its PILL shape (the 1px border had squared it), and
   the icon chips get a tint — white glyphs in dark, primary glyphs in light. */
.chat-composer--input{border-radius:18px!important;padding-inline:12px!important}
.chat-composer--send{border-radius:50%!important}
.chat-composer--attach{border-radius:50%!important;background:rgba(61,99,221,.12)!important;color:var(--primary,#3d63dd)!important}
.chat-composer--attach i,.chat-composer--send i,.chat-console-search .btn i{color:inherit!important}
.chat-msg--meta i{color:inherit}
#dark .chat-composer--attach{background:rgba(255,255,255,.09)!important;color:#fff!important}
#dark .chat-composer--send{background:#3d63dd!important;color:#fff!important}
#dark .chat-composer--input{color:#fff!important;border-radius:18px!important}
#dark .chat-composer--send i,#dark .chat-composer--attach i,#dark .chat-console-search .btn i{color:#fff!important}
#dark .chat-visitor-icon{color:#fff!important}
#dark .chat-visitor-row:hover .chat-visitor-icon{color:#fff!important}
#dark .chat-msg--meta i{color:#c9d2e0!important}

/* the composer is ONE pill (the vendor's 27px container carries the fill and
   the radius); the inner input is transparent again — my border/fill/radius on
   the input had cut the pill into a rectangle. Dark fill = the same deep tone
   as the round buttons, so the whole bar reads as one piece. */
.chat-composer--input{background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;outline:none!important;padding:6px 9px!important}
.chat-composer--input:focus{background:transparent!important;border:0!important;box-shadow:none!important}
#dark .chat-composer{background:#262633!important;border:1px solid #4a4a61!important}
#dark .chat-composer--input{color:#fff!important}
#dark .chat-composer--input::placeholder{color:#9aa3b2!important}

/* the #dark-prefixed rule outranked the plain one — the input kept its 1px/18px.
   Same specificity now, so the inner field is truly part of the pill. */
#dark .chat-composer--input{background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;outline:none!important}
#dark .chat-composer--input:focus{background:transparent!important;border:0!important;box-shadow:none!important}

/* the row insets: symmetric on both sides (the 6px side margin met a padded
   card on one side only), and the waiting counter is a real badge beside the
   clock — 21px, amber, never under the avatar. */
.chat-console--list{padding:9px 12px!important}
.chat-console--item{margin:0 0 6px!important;width:100%!important}
.chat-console--time{order:3}
.chat-console--item .badge[title^="در انتظار"],
.chat-console--item .chat-console--meta-row ~ .badge{order:4}
.chat-console--item .bg-warning.rounded-pill{min-width:21px!important;height:21px!important;display:inline-flex!important;align-items:center;justify-content:center;background:#f0b429!important;color:#2a2000!important;font-size:10px!important;font-weight:700;padding:0 6px!important;box-shadow:0 3px 9px rgba(240,180,41,.3)}
#dark .chat-console--item .bg-warning.rounded-pill{background:#4a3a14!important;color:#ffd88c!important;box-shadow:none}

/* the chosen TWO-LINE row (Telegram): line 1 = name + clock + counter, line 2 =
   the inks + the preview; 69px total, no third line, no empty band. */
.chat-console--item{height:69px!important;min-height:69px!important;max-height:69px!important;padding:12px!important;gap:9px;align-items:center}
.chat-console--avatar{width:45px!important;height:45px!important;min-width:45px!important}
.chat-console--body{gap:3px!important}
.chat-console--name-wrap{order:1;flex:1 1 auto;min-width:0}
.chat-console--time{order:2;flex:none;font-size:11px;color:#8b95a5;margin-inline-start:6px}
.chat-console--item .bg-warning.rounded-pill{order:3;flex:none}
.chat-console--preview{order:4;display:flex;align-items:center;gap:6px;min-width:0;font-size:12px;line-height:18px;color:#8b95a5}
.chat-console--preview-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;flex:1 1 auto}
.chat-console--meta-row{display:none!important}
.chat-console--guest-ink,.chat-console--status-ink{font-size:10px;flex:none}

/* every row gets its own surface (unselected rows must separate from the card),
   and «مهمان/مشتری» is a tinted badge on the TOP line beside the status badge. */
.chat-console--item{background:#f7f8fa!important}
.chat-console--item.active{background:#eef3ff!important;box-shadow:inset 0 0 0 1px #dbe4ff!important}
#dark .chat-console--item{background:#2c2c38!important}
#dark .chat-console--item.active{background:#3f3f52!important;box-shadow:inset 0 0 0 1px #4a4a61!important}
.chat-console--name-wrap{display:flex;align-items:center;gap:6px;min-width:0;flex:1 1 auto}
.chat-console--guest-ink{flex:none;font-size:9px;font-weight:700;line-height:15px;padding:0 6px;border-radius:9px;background:#fdf0d5;color:#8a5a00}
.chat-console--guest-ink.is-customer{background:#e3f7ea;color:#1a7a45}
.chat-console--status-ink{flex:none;font-size:9px;font-weight:400;line-height:15px;padding:0 6px;border-radius:9px;background:#eef1f6;color:#6b7280}
#dark .chat-console--guest-ink{background:#4a3a14;color:#ffd88c}
#dark .chat-console--guest-ink.is-customer{background:#14453a;color:#6ee7c0}
#dark .chat-console--status-ink{background:#3a3a4a;color:#b6c0cf}

/* the thread's identity bar: «مهمان/مشتری» as a coloured badge with the status
   badge beside it (the list row keeps its own pair). */
.chat-identity--guest{font-size:9px!important;font-weight:700;line-height:15px;padding:0 6px!important;border-radius:9px!important;background:#fdf0d5!important;color:#8a5a00!important}
.chat-identity--guest.is-customer{background:#e3f7ea!important;color:#1a7a45!important}
.chat-identity--status{font-size:9px!important;font-weight:400;line-height:15px;padding:0 6px!important;border-radius:9px!important;background:#eef1f6!important;color:#6b7280!important}
#dark .chat-identity--guest{background:#4a3a14!important;color:#ffd88c!important}
#dark .chat-identity--guest.is-customer{background:#14453a!important;color:#6ee7c0!important}
#dark .chat-identity--status{background:#3a3a4a!important;color:#b6c0cf!important}

/* the identity bar has nothing left to show once the phone, the page and the
   guest badge are gone — the strip collapses instead of leaving an empty band */
.chat-thread-identity{height:0!important;min-height:0!important;padding:0!important;border:0!important;margin:0!important;overflow:hidden!important}

/* the identity strip is dead weight now (phone, page and badges all gone) — it
   is removed from the layout, not merely collapsed (the collapsed box still
   painted its divider line). */
.chat-thread-identity{display:none!important}

/* the paged loader at the top of the thread */
.chat-older-wrap{display:flex;justify-content:center;padding:6px 0 9px}
.chat-older-btn{height:28.8px;padding:0 12px;border:1px solid #e5e9f2;border-radius:15px;background:#fff;color:#3a4352;font-size:12px;display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.chat-older-btn:hover{background:#f4f6fa}
#dark .chat-older-btn{background:#2c2c38;border-color:#4a4a61;color:#e6e8ee}

/* the chat settings' own FAQ editor is retired: the assistant reads the SITE's
   FAQ page directly, so the duplicated list is hidden (the value stays in the
   DB untouched, as a fallback when the FAQ page is empty). */
#chat-tab-pane .col-12:has(> button .ri-add-line){display:none!important}

/* one size for the console head actions (the reopen button read smaller than
   its red neighbour) */
.chat-console-card--thread .btn,
.chat-console-card--thread .btn-sm{height:36px!important;min-height:36px!important;padding:0 12px!important;border-radius:9px!important;font-size:12px!important;display:inline-flex!important;align-items:center;justify-content:center;gap:6px}

/* the abuse countdown line above the composer */
.chat-block-note{display:flex;align-items:center;gap:6px;margin:0 9px 6px;padding:6px 9px;border-radius:9px;background:#fff4e5;color:#8a5a00;font-size:12px}
#dark .chat-block-note{background:#4a3a14;color:#ffd88c}

/* while blocked the composer itself wears the notice's tint so the input and
   the message read as one piece */
.chat-composer.is-blocked{background:#fff4e5!important;border-color:#f0c887!important}
.chat-composer.is-blocked .chat-composer--input{color:#8a5a00!important}
.chat-composer.is-blocked .chat-composer--input::placeholder{color:#a9762a!important}
#dark .chat-composer.is-blocked{background:#4a3a14!important;border-color:#7a5f22!important}
#dark .chat-composer.is-blocked .chat-composer--input{color:#ffd88c!important}
#dark .chat-composer.is-blocked .chat-composer--input::placeholder{color:#ffd88c!important}

/* the block notice beside the input is retired: the countdown rides the input's
   placeholder (and the composer tint/disabled state carry the rest) */
.chat-block-note{display:none!important}

/* the attach chip greys out while the thread is blocked */
.chat-composer--attach:disabled{opacity:.45;cursor:not-allowed}


/* a roomier panel (the owner: «اندازه باکس چت آنلاین رو بزرگ‌تر بکن»): 405 wide ×
   639 tall on the ladder, the same bottom anchor; full-bleed under 480. */
.chat-panel{width:405px!important;max-width:calc(100vw - 24px)!important;height:639px!important;max-height:calc(100vh - 60px)!important}
@media (max-width:479.98px){.chat-panel{width:100vw!important;max-width:100vw!important;height:calc(100vh - 30px)!important;inset-inline:0!important}}

/* the panel's right edge lands on the floating support icon's right edge
   (measured: the FAB sits 35 px from the viewport edge) */
.chat-panel{right:35px!important}
/* «چت با پشتیبان» becomes the BOTTOM-most entry of the headset menu */
.support-floating-button .panel ul{display:flex;flex-direction:column-reverse}

/* the phone field's structure hint (a quiet line under the input) */
.chat-start--hint{font-size:12px;color:#b26a00;margin-top:-3px}
#dark .chat-start--hint{color:#ffd88c}