:root {
  --xy-ink: #17202a;
  --xy-muted: #667085;
  --xy-line: #e4e7ec;
  --xy-bg: #f6f7f9;
  --xy-panel: #ffffff;
  --xy-primary: #087f75;
  --xy-primary-dark: #06665e;
  --xy-warning: #c77800;
  --xy-danger: #c2413b;
  --xy-sidebar: #1c252c;
}

* { letter-spacing: 0 !important; }
body { background: var(--xy-bg); color: var(--xy-ink); font-size: .9rem; }
a { color: var(--xy-primary); }
.app-shell { min-height: 100vh; }
.sidebar { position: fixed; inset: 0 auto 0 0; width: 248px; background: var(--xy-sidebar); color: #d7dde1; z-index: 1030; overflow-y: auto; }
.brand { display: flex; align-items: center; gap: .75rem; height: 68px; padding: 0 1.2rem; color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.08); }
.brand-mark { width: 34px; height: 34px; display: grid; place-items: center; background: #f5b83d; color: #17202a; border-radius: 6px; font-weight: 800; }
.brand-name { font-size: 1rem; font-weight: 700; }
.sidebar-label { margin: 1.1rem 1rem .35rem; color: #89959d; font-size: .7rem; text-transform: uppercase; }
.sidebar .nav-link { display: flex; align-items: center; gap: .7rem; min-height: 42px; margin: .1rem .65rem; padding: .55rem .75rem; border-radius: 6px; color: #cfd6db; }
.sidebar .nav-link:hover, .sidebar .nav-link.active { color: #fff; background: rgba(255,255,255,.09); }
.sidebar .nav-link.active { box-shadow: inset 3px 0 #f5b83d; }
.sidebar .nav-link svg { width: 18px; height: 18px; }
.main-wrap { margin-left: 248px; min-width: 0; }
.topbar { position: sticky; top: 0; z-index: 1020; height: 68px; display: flex; align-items: center; justify-content: space-between; padding: 0 1.5rem; background: rgba(255,255,255,.96); border-bottom: 1px solid var(--xy-line); }
.page-content { padding: 1.4rem 1.5rem 2.5rem; max-width: 1680px; margin: 0 auto; }
.page-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }
.page-heading h1 { margin: 0; font-size: 1.35rem; line-height: 1.4; font-weight: 700; }
.page-heading p { margin: .25rem 0 0; color: var(--xy-muted); }
.panel { background: var(--xy-panel); border: 1px solid var(--xy-line); border-radius: 7px; }
.panel-header { display: flex; align-items: center; justify-content: space-between; gap: .75rem; min-height: 54px; padding: .8rem 1rem; border-bottom: 1px solid var(--xy-line); }
.panel-title { margin: 0; font-size: .98rem; font-weight: 700; }
.panel-body { padding: 1rem; }
.metric-card { height: 100%; padding: 1rem; background: #fff; border: 1px solid var(--xy-line); border-radius: 7px; }
.metric-label { color: var(--xy-muted); font-size: .8rem; }
.metric-value { margin-top: .25rem; font-size: 1.65rem; line-height: 1.25; font-weight: 750; }
.metric-icon { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 6px; background: #e8f5f3; color: var(--xy-primary); }
.table { --bs-table-bg: transparent; margin-bottom: 0; }
.table > :not(caption) > * > * { padding: .78rem .85rem; border-color: #edf0f2; vertical-align: middle; }
.table thead th { color: var(--xy-muted); font-size: .73rem; font-weight: 650; text-transform: uppercase; white-space: nowrap; background: #fafbfc; }
.status-dot { display: inline-block; width: 8px; height: 8px; margin-right: .4rem; border-radius: 50%; background: #98a2b3; }
.status-dot.online, .status-dot.success, .status-dot.active, .status-dot.paid { background: #1f9d74; }
.status-dot.pending, .status-dot.waiting, .status-dot.running { background: #d89313; }
.status-dot.failed, .status-dot.error, .status-dot.risk, .status-dot.suspended { background: var(--xy-danger); }
.status-dot.offline, .status-dot.expired, .status-dot.cancelled { background: #98a2b3; }
.btn { border-radius: 6px; font-size: .86rem; }
.btn-primary { --bs-btn-bg: var(--xy-primary); --bs-btn-border-color: var(--xy-primary); --bs-btn-hover-bg: var(--xy-primary-dark); --bs-btn-hover-border-color: var(--xy-primary-dark); }
.btn-icon { width: 34px; height: 34px; display: inline-grid; place-items: center; padding: 0; }
.btn-icon svg { width: 17px; height: 17px; }
.badge { border-radius: 4px; font-weight: 600; }
.form-control, .form-select { border-radius: 6px; border-color: #d6dbe1; font-size: .88rem; }
.form-control:focus, .form-select:focus { border-color: #4aa79f; box-shadow: 0 0 0 .2rem rgba(8,127,117,.12); }
.auth-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(340px, 460px) 1fr; background: #fff; }
.auth-panel { display: flex; flex-direction: column; justify-content: center; padding: clamp(2rem, 6vw, 4.5rem); border-right: 1px solid var(--xy-line); }
.auth-context { display: flex; align-items: flex-end; padding: clamp(2rem, 6vw, 5rem); color: #fff; background: linear-gradient(150deg, #1d2a30 0%, #263a40 50%, #0e756d 100%); }
.auth-context h1 { max-width: 680px; font-size: clamp(2rem, 4vw, 3.6rem); font-weight: 750; }
.captcha-image { width: 150px; height: 44px; border: 1px solid var(--xy-line); border-radius: 6px; cursor: pointer; }
.empty-state { padding: 3.5rem 1.5rem; text-align: center; color: var(--xy-muted); }
.empty-state svg { width: 36px; height: 36px; margin-bottom: .8rem; }
.qr-box { width: 220px; height: 220px; display: grid; place-items: center; margin: auto; border: 1px solid var(--xy-line); background: #fff; }
.qr-box img { max-width: 208px; max-height: 208px; }
.dashboard-trend-panel { overflow: hidden; }
.dashboard-trend-body { padding: 1rem 1.25rem 1.1rem; }
.trend-bars { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: clamp(.4rem, 1.2vw, .9rem); width: 100%; }
.trend-column { display: grid; grid-template-rows: 20px 126px 20px; min-width: 0; text-align: center; color: var(--xy-muted); font-size: .72rem; }
.trend-value { align-self: start; overflow: hidden; color: #536179; font-size: .72rem; font-weight: 700; line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; }
.trend-track { display: flex; align-items: flex-end; justify-content: center; min-width: 0; border-bottom: 1px solid #e7ebee; }
.trend-bar { width: min(44px, 72%); max-height: 100%; background: var(--xy-primary); border-radius: 4px 4px 0 0; }
.trend-column.is-zero .trend-value { color: #98a2b3; }
.trend-column.is-zero .trend-bar { width: min(44px, 72%); height: 2px !important; background: #d8dee2; border-radius: 2px 2px 0 0; }
.trend-day { align-self: end; overflow: hidden; line-height: 1.15; text-overflow: clip; white-space: nowrap; }
.subtle { color: var(--xy-muted); }
.text-truncate-2 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.review-tabs, .review-status-tabs { display: flex; align-items: center; overflow-x: auto; scrollbar-width: thin; }
.review-tabs { gap: 1.25rem; padding: 0 1rem; border-bottom: 1px solid var(--xy-line); }
.review-tabs a { display: inline-flex; align-items: center; gap: .38rem; min-height: 48px; padding: 0 .2rem; color: var(--xy-muted); font-size: .82rem; font-weight: 650; text-decoration: none; border-bottom: 2px solid transparent; white-space: nowrap; }
.review-tabs a:hover, .review-tabs a.is-active { color: var(--xy-primary); border-bottom-color: var(--xy-primary); }
.review-tabs svg { width: 15px; height: 15px; }
.review-status-tabs { gap: .1rem; padding: .25rem .7rem; }
.review-status-tabs a { display: inline-flex; align-items: center; gap: .4rem; min-height: 36px; padding: .35rem .7rem; color: var(--xy-muted); font-size: .76rem; text-decoration: none; border-radius: 5px; white-space: nowrap; }
.review-status-tabs a:hover, .review-status-tabs a.is-active { color: var(--xy-primary); background: #e8f5f3; }
.review-status-tabs strong { font-size: .7rem; font-weight: 700; }
.review-account-name { display: inline-flex; align-items: center; gap: .35rem; max-width: 140px; overflow: hidden; color: var(--xy-ink); font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.review-account-name svg { width: 15px; height: 15px; flex: 0 0 auto; color: var(--xy-muted); }
.review-product, .review-buyer { display: flex; align-items: center; gap: .65rem; min-width: 0; }
.review-product > img, .review-product-placeholder { width: 52px; height: 52px; flex: 0 0 52px; object-fit: cover; border: 1px solid var(--xy-line); border-radius: 5px; background: #f2f5f6; }
.review-product-placeholder { display: grid; place-items: center; color: #87939a; }
.review-product-placeholder svg { width: 19px; height: 19px; }
.review-product > span:last-child, .review-buyer > span:last-child { display: block; min-width: 0; }
.review-product strong, .review-product small, .review-buyer strong, .review-buyer small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.review-product strong { max-width: 220px; font-size: .78rem; }
.review-product small, .review-buyer small { margin-top: .22rem; color: var(--xy-muted); font-size: .68rem; }
.review-avatar { position: relative; display: grid; place-items: center; width: 40px; height: 40px; flex: 0 0 40px; overflow: hidden; color: #31615d; font-size: .8rem; font-weight: 700; border-radius: 50%; background: #d9ece9; }
.review-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.review-avatar img.is-broken { display: none; }
.review-buyer strong { max-width: 150px; font-size: .78rem; }
.review-content { max-width: 330px; }
.review-rating { min-height: 18px; color: #e69b24; font-size: .78rem; letter-spacing: 1px !important; }
.review-rating .text-secondary { letter-spacing: 0 !important; }
.review-text { margin-top: .18rem; overflow-wrap: anywhere; color: var(--xy-ink); font-size: .78rem; line-height: 1.48; }
.review-content > small { display: block; margin-top: .35rem; color: var(--xy-muted); font-size: .66rem; }
.review-reply { margin-top: .45rem; padding: .38rem .5rem; color: #4e5e63; font-size: .7rem; line-height: 1.4; border-left: 2px solid #8acac3; background: #f4faf9; }
.review-reply > span { color: var(--xy-primary); font-weight: 650; }
.review-order-info { display: flex; flex-direction: column; align-items: flex-start; gap: .35rem; }
.review-order-info code { display: block; max-width: 180px; overflow: hidden; color: var(--xy-ink); text-overflow: ellipsis; white-space: nowrap; }
.review-order-info small { color: var(--xy-muted); font-size: .66rem; }
.review-table > tbody > tr > td { padding-top: .9rem; padding-bottom: .9rem; }
@media (max-width: 767.98px) {
  .page-actions { align-items: stretch; flex-direction: column; }
  .page-actions form { width: 100%; }
  .page-actions form .form-select { flex: 1 1 0; min-width: 0; }
  .review-tabs { padding: 0 .75rem; }
  .review-status-tabs { padding-left: .45rem; padding-right: .45rem; }
}
@media (max-width: 991.98px) {
  .sidebar { transform: translateX(-100%); transition: transform .2s ease; }
  .sidebar.show { transform: translateX(0); }
  .main-wrap { margin-left: 0; }
  .topbar, .page-content { padding-left: 1rem; padding-right: 1rem; }
  .auth-shell { grid-template-columns: 1fr; }
  .auth-context { display: none; }
}
@media (max-width: 575.98px) {
  .page-heading { align-items: stretch; flex-direction: column; }
  .page-heading .btn, .page-heading .btn-group { width: 100%; }
  .table-responsive { font-size: .82rem; }
  .dashboard-trend-body { padding: .85rem .65rem 1rem; }
  .trend-bars { gap: .22rem; }
  .trend-column { grid-template-rows: 18px 104px 18px; font-size: .65rem; }
  .trend-value { font-size: .65rem; }
  .trend-bar, .trend-column.is-zero .trend-bar { width: min(30px, 76%); }
}


/* Platform administration */
.min-w-0 { min-width: 0; }
.platform-admin .sidebar { display: flex; flex-direction: column; background: #20272d; }
.platform-admin .brand-mark { background: #f3b63b; color: #20272d; }
.platform-admin .sidebar .nav-link.active { background: rgba(255, 255, 255, .1); }
.sidebar-admin-meta { display: flex; align-items: center; gap: .7rem; margin: auto .8rem 1rem; padding: .8rem; color: #e7ecef; border: 1px solid rgba(255,255,255,.1); border-radius: 6px; }
.sidebar-admin-meta > svg { width: 19px; flex: 0 0 auto; color: #f3b63b; }
.sidebar-admin-meta span { min-width: 0; }
.sidebar-admin-meta strong, .sidebar-admin-meta small { display: block; }
.sidebar-admin-meta strong { font-size: .78rem; }
.sidebar-admin-meta small { margin-top: .12rem; color: #929ea6; font-size: .68rem; }
.sidebar-backdrop { display: none; position: fixed; inset: 0; z-index: 1025; padding: 0; border: 0; background: rgba(15, 23, 28, .48); }
.topbar-context { display: flex; align-items: center; gap: .65rem; min-width: 0; }
.topbar-title { font-size: .9rem; }
.topbar-subscription { display: block; margin-top: .1rem; color: var(--xy-muted); font-size: .7rem; white-space: nowrap; }
.user-menu-button { display: inline-flex; align-items: center; gap: .4rem; max-width: 190px; }
.user-menu-button > svg { width: 18px; height: 18px; }
.dropdown-item > svg { width: 16px; height: 16px; margin-right: .5rem; }
.page-eyebrow { margin-bottom: .25rem; color: #7b8790; font-size: .68rem; font-weight: 700; }
.page-actions { display: flex; align-items: center; gap: .5rem; }
.page-actions .btn, .panel-header .btn, .admin-filter .btn, .ticket-reply-actions .btn, .modal-footer .btn, .page-heading > .btn { display: inline-flex; align-items: center; justify-content: center; gap: .38rem; white-space: nowrap; }
.page-actions .btn svg, .panel-header .btn svg, .admin-filter .btn svg, .ticket-reply-actions .btn svg, .modal-footer .btn svg, .page-heading > .btn svg, .admin-table .btn svg { width: 15px; height: 15px; }
.section-heading-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin: .2rem 0 .7rem; }
.section-heading-row h2 { margin: 0; font-size: .98rem; font-weight: 700; }
.section-heading-row span { display: block; margin-top: .15rem; color: var(--xy-muted); font-size: .72rem; }
.panel-header > div { min-width: 0; }
.panel-caption { display: block; margin-top: .1rem; color: var(--xy-muted); font-size: .72rem; }
.admin-metric { min-height: 104px; }
.compact-metric { min-height: 92px; }
.compact-metric .metric-value { font-size: 1.45rem; }
.metric-value { overflow-wrap: anywhere; }
.metric-icon.primary { background: #e8f5f3; color: var(--xy-primary); }
.metric-icon.success { background: #e7f6ee; color: #18794e; }
.metric-icon.warning { background: #fff3d9; color: #a66200; }
.metric-icon.danger { background: #fdeceb; color: #b63a35; }
.metric-icon.gold { background: #fff1cc; color: #8f6400; }
.metric-icon.neutral { background: #eef1f3; color: #53616b; }
.metric-icon svg { width: 19px; height: 19px; }
.filter-bar { padding: .85rem 1rem; border-bottom: 1px solid var(--xy-line); background: #fbfcfc; }
.admin-filter { display: grid; grid-template-columns: minmax(240px, 1fr) 170px auto auto; gap: .6rem; align-items: center; }
.admin-filter-wide { grid-template-columns: minmax(240px, 1fr) 150px 150px auto auto; }
.admin-filter-compact { grid-template-columns: 190px auto auto; justify-content: start; }
.filter-search { position: relative; min-width: 0; }
.filter-search > svg { position: absolute; top: 50%; left: .72rem; width: 16px; height: 16px; color: #7e8a93; transform: translateY(-50%); pointer-events: none; }
.filter-search .form-control { padding-left: 2.15rem; }
.admin-table { min-width: 980px; }
.account-sales-table { min-width: 900px; }
.admin-table .table-primary-cell { max-width: 280px; }
.table-primary-cell strong, .table-primary-cell small { display: block; }
.table-primary-cell small { margin-top: .15rem; color: var(--xy-muted); line-height: 1.4; }
.resource-counts { display: flex; align-items: center; gap: .75rem; }
.resource-counts span { display: inline-flex; align-items: center; gap: .25rem; white-space: nowrap; }
.resource-counts svg { width: 15px; height: 15px; color: var(--xy-muted); }
.status-pill { display: inline-flex; align-items: center; min-height: 24px; padding: .15rem .42rem; color: #49545c; font-size: .72rem; font-weight: 650; white-space: nowrap; border: 1px solid #dfe3e6; border-radius: 4px; background: #f5f7f8; }
.status-pill .status-dot { margin-right: .32rem; }
.status-pill.active, .status-pill.online, .status-pill.success, .status-pill.paid, .status-pill.published, .status-pill.resolved { color: #166b49; border-color: #cbe8d9; background: #edf8f2; }
.status-pill.pending, .status-pill.created, .status-pill.open, .status-pill.in_progress, .status-pill.waiting_customer, .status-pill.queued, .status-pill.retry_wait, .status-pill.running, .status-pill.leased, .status-pill.captcha_required, .status-pill.draft { color: #8a5700; border-color: #f1d9a7; background: #fff8e8; }
.status-pill.failed, .status-pill.error, .status-pill.risk_blocked, .status-pill.suspended, .status-pill.locked, .status-pill.disabled { color: #a12f2b; border-color: #f0cbc8; background: #fff1f0; }
.status-pill.closed, .status-pill.expired, .status-pill.cancelled, .status-pill.archived, .status-pill.refunded, .status-pill.offline, .status-pill.paused, .status-pill.ignored { color: #59656d; border-color: #dfe3e6; background: #f5f7f8; }
.status-pill.muted { color: #59656d; border-color: #dfe3e6; background: #f5f7f8; }
.status-pill.ok, .status-pill.success { color: #166b49; border-color: #cbe8d9; background: #edf8f2; }
.status-pill.attention { color: #8a5700; border-color: #f1d9a7; background: #fff8e8; }
.status-dot.published, .status-dot.resolved { background: #1f9d74; }
.status-dot.created, .status-dot.open, .status-dot.in_progress, .status-dot.waiting_customer, .status-dot.queued, .status-dot.retry_wait, .status-dot.leased, .status-dot.captcha_required, .status-dot.draft { background: #d89313; }
.status-dot.risk_blocked, .status-dot.locked, .status-dot.disabled { background: var(--xy-danger); }
.status-dot.closed, .status-dot.archived, .status-dot.refunded, .status-dot.paused, .status-dot.ignored { background: #98a2b3; }
.status-dot.ok, .status-dot.success { background: #1f9d74; }
.status-dot.attention { background: #d89313; }
.protected-label { display: inline-flex; align-items: center; gap: .3rem; color: var(--xy-muted); font-size: .75rem; white-space: nowrap; }
.protected-label svg { width: 14px; height: 14px; }
.price-stack { display: flex; align-items: center; gap: .4rem; white-space: nowrap; }
.price-stack span { padding-right: .4rem; border-right: 1px solid var(--xy-line); }
.price-stack span:last-child { padding-right: 0; border-right: 0; }
.order-code { display: inline-block; max-width: 190px; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
.level-badge, .priority-badge { display: inline-flex; align-items: center; min-height: 23px; padding: .14rem .42rem; font-size: .7rem; font-weight: 700; white-space: nowrap; border-radius: 4px; }
.level-badge.info, .priority-badge.normal, .level-badge.low { color: #3e5668; background: #eaf0f4; }
.level-badge.success { color: #166b49; background: #e7f6ee; }
.level-badge.warning, .level-badge.medium, .priority-badge.high { color: #8a5700; background: #fff0cf; }
.level-badge.danger, .level-badge.error, .level-badge.critical, .level-badge.high, .priority-badge.urgent { color: #a12f2b; background: #fde9e7; }
.priority-badge.low { color: #65717a; background: #eef1f3; }
.announcement-copy { min-width: 260px; max-width: 560px; }
.announcement-copy strong, .announcement-copy small { display: block; }
.announcement-copy small { margin-top: .25rem; color: var(--xy-muted); line-height: 1.45; }
.pin-label { display: inline-flex; align-items: center; gap: .25rem; color: #936000; font-size: .75rem; font-weight: 650; }
.pin-label svg { width: 14px; height: 14px; }
.announcement-page-heading { align-items: flex-end; }
.announcement-total { display: inline-flex; align-items: center; gap: .35rem; min-height: 30px; padding: .3rem .6rem; color: var(--xy-primary); font-size: .74rem; font-weight: 650; white-space: nowrap; border: 1px solid #cce7e3; border-radius: 5px; background: #eef9f7; }
.announcement-total svg { width: 15px; height: 15px; }
.announcement-panel { overflow: hidden; }
.announcement-panel-header { background: #fbfcfc; }
.announcement-panel-count { color: var(--xy-muted); font-size: .74rem; white-space: nowrap; }
.announcement-feed { display: flex; flex-direction: column; }
.announcement-item { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: .9rem; padding: 1.15rem 1.25rem; border-bottom: 1px solid var(--xy-line); border-left: 4px solid transparent; background: var(--xy-panel); }
.announcement-item:last-child { border-bottom: 0; }
.announcement-item.level-info { border-left-color: #7891a1; }
.announcement-item.level-success { border-left-color: #2b9a6b; }
.announcement-item.level-warning { border-left-color: #d28a0c; }
.announcement-item.level-danger { border-left-color: var(--xy-danger); }
.announcement-marker { display: grid; place-items: center; width: 40px; height: 40px; color: #4b6474; border-radius: 6px; background: #edf2f5; }
.announcement-marker svg { width: 19px; height: 19px; }
.announcement-item.level-success .announcement-marker { color: #18794e; background: #e7f6ee; }
.announcement-item.level-warning .announcement-marker { color: #a66200; background: #fff3d9; }
.announcement-item.level-danger .announcement-marker { color: #b63a35; background: #fdeceb; }
.announcement-content { min-width: 0; }
.announcement-meta { display: flex; align-items: center; flex-wrap: wrap; gap: .45rem .6rem; min-height: 24px; }
.announcement-meta .level-badge { gap: .25rem; }
.announcement-meta .level-badge svg { width: 13px; height: 13px; }
.announcement-pin { display: inline-flex; align-items: center; gap: .25rem; color: #936000; font-size: .7rem; font-weight: 650; }
.announcement-pin svg { width: 13px; height: 13px; }
.announcement-time { margin-left: auto; color: var(--xy-muted); font-size: .7rem; white-space: nowrap; }
.announcement-title { margin: .55rem 0 .35rem; color: var(--xy-ink); font-size: 1.02rem; line-height: 1.4; font-weight: 700; overflow-wrap: anywhere; }
.announcement-body { color: #46525b; font-size: .84rem; line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; }
.announcement-empty-panel { min-height: 260px; }
.announcement-empty-icon { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: .8rem; color: var(--xy-primary); border-radius: 8px; background: #e8f5f3; }
.announcement-empty-icon svg { width: 24px; height: 24px; margin: 0; }
.health-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.health-item { display: grid; grid-template-columns: 34px minmax(0, 1fr) 18px; align-items: center; gap: .65rem; min-height: 76px; padding: .8rem 1rem; border-right: 1px solid var(--xy-line); border-bottom: 1px solid var(--xy-line); }
.health-item:nth-child(3n) { border-right: 0; }
.health-item:nth-last-child(-n+3) { border-bottom: 0; }
.health-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 6px; background: #eef1f3; color: #53616b; }
.health-icon svg { width: 17px; height: 17px; }
.health-item strong, .health-item small { display: block; }
.health-item strong { font-size: .8rem; }
.health-item small { margin-top: .12rem; color: var(--xy-muted); font-size: .7rem; line-height: 1.35; }
.health-item.ok .health-icon { color: #18794e; background: #e7f6ee; }
.health-item.attention .health-icon { color: #a66200; background: #fff3d9; }
.health-result { width: 17px; height: 17px; }
.health-item.ok .health-result { color: #239162; }
.health-item.attention .health-result { color: #c77800; }
.health-summary { display: inline-flex; align-items: center; gap: .3rem; font-size: .74rem; font-weight: 650; white-space: nowrap; }
.health-summary svg { width: 16px; height: 16px; }
.health-summary.ok { color: #18794e; }
.health-summary.attention { color: #a66200; }
.status-distribution { display: flex; flex-direction: column; gap: .85rem; }
.status-row-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .35rem; color: #46525b; font-size: .78rem; }
.status-row-head > span { min-width: 0; }
.status-row-head > span:last-child { text-align: right; }
.status-row-head small { display: block; margin-top: .1rem; color: var(--xy-muted); font-size: .65rem; font-weight: 400; }
.status-track { height: 6px; overflow: hidden; border-radius: 3px; background: #edf0f2; }
.status-fill { display: block; height: 100%; min-width: 3px; border-radius: 3px; background: #76848d; }
.status-fill.active, .status-fill.online, .status-fill.success, .status-fill.paid, .status-fill.published, .status-fill.resolved { background: #25946a; }
.status-fill.pending, .status-fill.queued, .status-fill.retry_wait, .status-fill.leased, .status-fill.running, .status-fill.captcha_required { background: #d28a0c; }
.status-fill.failed, .status-fill.error, .status-fill.risk_blocked, .status-fill.suspended, .status-fill.locked, .status-fill.disabled { background: #c2413b; }
.compact-list { display: flex; flex-direction: column; }
.compact-list-item { display: flex; align-items: center; gap: .7rem; min-height: 64px; padding: .65rem 1rem; color: inherit; text-decoration: none; border-bottom: 1px solid #edf0f2; }
.compact-list-item:last-child { border-bottom: 0; }
.compact-list-item:hover { background: #fafbfc; }
.compact-list-item small { display: block; margin-top: .15rem; color: var(--xy-muted); font-size: .7rem; }
.compact-list-icon { width: 32px; height: 32px; display: grid; place-items: center; flex: 0 0 auto; color: #53616b; border-radius: 6px; background: #eef1f3; }
.compact-list-icon svg { width: 16px; height: 16px; }
.compact-list-icon.priority-urgent, .compact-list-icon.priority-high { color: #a12f2b; background: #fde9e7; }
.empty-state { display: flex; flex-direction: column; align-items: center; }
.empty-state strong, .empty-state span { display: block; }
.empty-state strong { margin-bottom: .25rem; color: var(--xy-ink); font-size: .9rem; }
.empty-state.compact { min-height: 150px; justify-content: center; padding: 1.5rem; }
.ticket-list { display: flex; flex-direction: column; gap: .8rem; }
.ticket-item { overflow: hidden; }
.ticket-header { padding: 1rem; border-bottom: 1px solid var(--xy-line); background: #fbfcfc; }
.ticket-heading h2 { margin: .65rem 0 .35rem; font-size: 1rem; font-weight: 700; }
.ticket-meta { display: flex; flex-wrap: wrap; gap: .8rem; color: var(--xy-muted); font-size: .72rem; }
.ticket-meta span { display: inline-flex; align-items: center; gap: .25rem; }
.ticket-meta svg { width: 13px; height: 13px; }
.ticket-body { display: grid; grid-template-columns: minmax(260px, .85fr) minmax(420px, 1.4fr); gap: 1rem; padding: 1rem; }
.ticket-message { min-width: 0; padding-right: 1rem; border-right: 1px solid var(--xy-line); }
.ticket-message-label { display: block; margin-bottom: .45rem; color: var(--xy-muted); font-size: .7rem; font-weight: 700; }
.ticket-message p { max-height: 138px; margin: 0; overflow: auto; color: #46525b; line-height: 1.6; white-space: normal; overflow-wrap: anywhere; }
.ticket-reply { min-width: 0; }
.ticket-reply-actions { display: flex; justify-content: flex-end; gap: .55rem; margin-top: .6rem; }
.ticket-reply-actions .form-select { width: 160px; }
.runtime-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.runtime-item { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 52px; padding: .65rem 1rem; border-right: 1px solid var(--xy-line); border-bottom: 1px solid var(--xy-line); }
.runtime-item:nth-child(2n) { border-right: 0; }
.runtime-item span { display: inline-flex; align-items: center; gap: .45rem; color: var(--xy-muted); font-size: .75rem; }
.runtime-item svg { width: 15px; height: 15px; }
.runtime-item strong { max-width: 58%; text-align: right; overflow-wrap: anywhere; font-size: .76rem; }
.activity-list { display: flex; flex-direction: column; }
.activity-row { display: flex; align-items: center; gap: .7rem; min-height: 68px; padding: .7rem 1rem; border-bottom: 1px solid var(--xy-line); }
.activity-row:last-child { border-bottom: 0; }
.activity-icon { width: 34px; height: 34px; display: grid; place-items: center; color: var(--xy-primary); border-radius: 6px; background: #e8f5f3; }
.activity-icon svg { width: 16px; height: 16px; }
.activity-row strong, .activity-row small { display: block; }
.activity-row strong { font-size: .8rem; }
.activity-row small { margin-top: .12rem; color: var(--xy-muted); font-size: .7rem; }
.compact-table { min-width: 700px; }
.log-message { max-width: 300px; }
.modal-header small { display: block; margin-top: .15rem; }
.modal-content { border: 0; border-radius: 7px; box-shadow: 0 20px 50px rgba(21, 30, 36, .18); }
.modal-header, .modal-footer { border-color: var(--xy-line); }
.input-group-text { border-color: #d6dbe1; background: #f5f7f8; }
.settings-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.settings-field { min-width: 0; }
.settings-field-wide { grid-column: 1 / -1; }
.settings-actions { display: flex; justify-content: flex-end; padding: .8rem 1rem; border-top: 1px solid var(--xy-line); background: #fbfcfc; }
.settings-actions .btn { display: inline-flex; align-items: center; justify-content: center; gap: .38rem; }
.settings-actions .btn svg { width: 15px; height: 15px; }
.daemon-runtime-grid { grid-template-columns: 1fr; }
.daemon-runtime-grid .runtime-item,
.daemon-runtime-grid .runtime-item-wide { grid-column: auto; border-right: 0; }
.daemon-command { font-family: var(--bs-font-monospace); font-weight: 600; }

@media (max-width: 1199.98px) {
  .health-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .health-item:nth-child(3n) { border-right: 1px solid var(--xy-line); }
  .health-item:nth-child(2n) { border-right: 0; }
  .health-item:nth-last-child(-n+3) { border-bottom: 1px solid var(--xy-line); }
  .health-item:nth-last-child(-n+2) { border-bottom: 0; }
  .ticket-body { grid-template-columns: 1fr; }
  .ticket-message { padding: 0 0 1rem; border-right: 0; border-bottom: 1px solid var(--xy-line); }
}

@media (max-width: 991.98px) {
  body.sidebar-open { overflow: hidden; }
  .sidebar-backdrop.show { display: block; }
  .admin-filter, .admin-filter-wide { grid-template-columns: minmax(200px, 1fr) 160px auto auto; }
  .admin-filter-wide .filter-search { grid-column: 1 / -1; }
}

@media (max-width: 767.98px) {
  .admin-filter, .admin-filter-wide { grid-template-columns: 1fr 1fr; }
  .admin-filter .filter-search { grid-column: 1 / -1; }
  .admin-filter-compact { grid-template-columns: 1fr auto auto; }
  .health-grid { grid-template-columns: 1fr; }
  .health-item, .health-item:nth-child(2n), .health-item:nth-child(3n), .health-item:nth-last-child(-n+2), .health-item:nth-last-child(-n+3) { border-right: 0; border-bottom: 1px solid var(--xy-line); }
  .health-item:last-child { border-bottom: 0; }
  .runtime-grid { grid-template-columns: 1fr; }
  .runtime-item, .runtime-item:nth-child(2n) { border-right: 0; }
  .ticket-reply-actions { align-items: stretch; }
  .ticket-reply-actions .form-select { width: 100%; }
}

@media (max-width: 575.98px) {
  .topbar { height: 60px; padding-left: .75rem; padding-right: .75rem; }
  .page-content { padding: 1rem .75rem 2rem; }
  .page-heading { margin-bottom: 1rem; }
  .page-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .page-actions .btn { width: 100%; }
  .section-heading-row { align-items: flex-start; flex-direction: column; gap: .4rem; }
  .admin-metric { min-height: 94px; padding: .8rem; }
  .compact-metric { min-height: 82px; padding: .75rem; }
  .admin-metric .metric-icon { width: 30px; height: 30px; }
  .admin-metric .metric-value, .compact-metric .metric-value { font-size: 1.25rem; }
  .filter-bar { padding: .75rem; }
  .admin-filter, .admin-filter-wide, .admin-filter-compact { grid-template-columns: 1fr 1fr; }
  .admin-filter .filter-search, .admin-filter-compact .form-select { grid-column: 1 / -1; }
  .admin-filter .btn { width: 100%; }
  .ticket-header, .ticket-body { padding: .8rem; }
  .ticket-meta { flex-direction: column; gap: .3rem; }
  .ticket-reply-actions { flex-direction: column; }
  .ticket-reply-actions .btn { width: 100%; }
  .runtime-item { align-items: flex-start; }
  .runtime-item strong { max-width: 54%; }
  .settings-form-grid { grid-template-columns: 1fr; }
  .settings-field-wide { grid-column: auto; }
  .settings-actions .btn { width: 100%; }
  .daemon-runtime-grid .runtime-item-wide { grid-column: auto; }
  .daemon-runtime-grid .runtime-item { flex-direction: column; gap: .35rem; }
  .daemon-runtime-grid .runtime-item strong { max-width: 100%; text-align: left; }
  .announcement-page-heading { align-items: stretch; }
  .announcement-total { align-self: flex-start; }
  .announcement-panel-header { align-items: flex-start; }
  .announcement-item { grid-template-columns: 32px minmax(0, 1fr); gap: .7rem; padding: 1rem .85rem; }
  .announcement-marker { width: 32px; height: 32px; }
  .announcement-marker svg { width: 16px; height: 16px; }
  .announcement-time { width: 100%; margin-left: 0; }
  .announcement-title { margin-top: .45rem; font-size: .94rem; }
}


html, body { max-width: 100%; }
body { overflow-x: hidden; }
.table-responsive { overscroll-behavior-inline: contain; }

@media (max-width: 767.98px) {
  .table-responsive { padding-bottom: .28rem; scrollbar-width: auto; scrollbar-color: #8e9aa2 #e9edef; }
  .table-responsive::-webkit-scrollbar { height: 8px; }
  .table-responsive::-webkit-scrollbar-track { background: #e9edef; }
  .table-responsive::-webkit-scrollbar-thumb { background: #8e9aa2; border: 2px solid #e9edef; border-radius: 4px; }
}

/* Chat workspace */
.chat-workspace-page .main-wrap { height: 100dvh; overflow: hidden; }
.chat-page-content { display: flex; flex-direction: column; width: 100%; max-width: none; height: calc(100dvh - 68px); padding: 0; overflow: hidden; }
.chat-page-content > .alert { z-index: 4; flex: 0 0 auto; margin: .75rem .9rem 0; }
.chat-workspace { display: grid; grid-template-columns: 328px minmax(0, 1fr); flex: 1 1 auto; min-width: 0; min-height: 0; overflow: hidden; background: #fff; border-top: 1px solid #edf0f2; }
.chat-sidebar-pane { display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; border-right: 1px solid #e6e9ec; background: #fff; }
.chat-stat-strip { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); flex: 0 0 72px; border-bottom: 4px solid #f5f6f7; }
.chat-stat-item { display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: 8px 14px; border-right: 1px solid #edf0f2; }
.chat-stat-item:last-child { border-right: 0; }
.chat-stat-item strong { display: block; color: #222a30; font-size: .88rem; line-height: 1.25; font-weight: 700; }
.chat-stat-item span { display: block; margin-top: 5px; overflow: hidden; color: #68737b; font-size: .7rem; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.chat-stat-details { position: relative; padding: 0; }
.chat-stat-details > summary { display: grid; grid-template-columns: minmax(0, 1fr) 18px; align-items: center; height: 68px; padding: 8px 10px 8px 14px; cursor: pointer; list-style: none; }
.chat-stat-details > summary::-webkit-details-marker { display: none; }
.chat-stat-details > summary:focus-visible { outline: 2px solid #4aa79f; outline-offset: -2px; }
.chat-stat-item .chat-stat-copy { display: block; min-width: 0; margin-top: 0; overflow: visible; }
.chat-stat-copy > span { margin-top: 5px; }
.chat-stat-details > summary > svg { width: 16px; height: 16px; color: #a4aaae; transition: transform .15s ease; }
.chat-stat-details[open] > summary > svg { transform: rotate(180deg); }
.chat-stat-popover { position: absolute; top: calc(100% + 4px); right: 6px; z-index: 30; display: grid; width: 214px; padding: 8px 10px; border: 1px solid #e2e6e8; border-radius: 6px; background: #fff; box-shadow: 0 10px 26px rgba(28, 37, 44, .14); }
.chat-stat-popover > span { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0; padding: 6px 2px; }
.chat-stat-popover > span + span { border-top: 1px solid #edf0f2; }
.chat-stat-popover small { color: #68737b; font-size: .68rem; }
.chat-stat-popover strong { flex: 0 0 auto; font-size: .76rem; }
.chat-account-switcher { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 7px 12px 6px 14px; border-bottom: 1px solid #f0f2f3; background: #fff; }
.chat-account-switcher label { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; color: #68737b; font-size: .72rem; white-space: nowrap; }
.chat-account-switcher label svg { width: 14px; height: 14px; color: #7e8a91; }
.chat-account-switcher .form-select { min-width: 0; height: 32px; padding-top: .25rem; padding-bottom: .25rem; border-color: #e7ebed; border-radius: 4px; color: #263138; font-size: .74rem; }
.chat-account-switcher .form-select:focus { border-color: #9fc8c3; box-shadow: 0 0 0 2px rgba(8,127,117,.08); }
.chat-list-toolbar { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px; flex: 0 0 49px; padding: 7px 9px 7px 14px; border-bottom: 1px solid #f0f2f3; }
.chat-list-title { display: inline-flex; align-items: center; gap: 5px; color: #20282e; font-size: .95rem; font-weight: 750; white-space: nowrap; }
.chat-total-unread { display: inline-grid; place-items: center; min-width: 20px; height: 18px; padding: 0 5px; color: #fff; font-size: .64rem; font-weight: 750; border-radius: 9px; background: #f04b55; }
.chat-search { display: block; min-width: 0; }
.chat-search > svg { left: auto; right: .66rem; width: 14px; height: 14px; }
.chat-search .form-control { height: 34px; padding: .35rem 2rem .35rem .7rem; border-color: transparent; border-radius: 4px; background: #f6f7f8; font-size: .75rem; }
.chat-search .form-control:focus { border-color: #c7d8d5; background: #fff; box-shadow: 0 0 0 2px rgba(8,127,117,.08); }
.conversation-list { flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-color: #aeb5ba transparent; scrollbar-width: thin; }
.conversation-list::-webkit-scrollbar { width: 6px; }
.conversation-list::-webkit-scrollbar-track { background: transparent; }
.conversation-list::-webkit-scrollbar-thumb { border-radius: 3px; background: #aeb5ba; }
.conversation-item { display: grid; grid-template-columns: 42px minmax(0, 1fr) 48px; align-items: center; gap: 10px; min-height: 68px; padding: 7px 10px; color: #222a30; text-decoration: none; border-bottom: 1px solid #f0f2f3; background: #fff; }
.conversation-item[hidden] { display: none; }
.conversation-item:hover { color: #222a30; background: #f8f9fa; }
.conversation-item.active { color: #182327; background: #eef7f5; box-shadow: inset 3px 0 var(--xy-primary); }
.conversation-avatar { position: relative; display: grid; place-items: center; width: 42px; height: 42px; flex: 0 0 42px; color: #34434d; border-radius: 50%; background: #e9eef1; }
.conversation-avatar > svg { width: 20px; height: 20px; }
.conversation-avatar-fallback { font-size: .88rem; line-height: 1; font-weight: 750; }
.conversation-avatar > img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: inherit; object-fit: cover; background: inherit; }
.conversation-avatar > img.is-broken { display: none; }
.chat-avatar-tone-0 { color: #31615d; background: #d9ece9; }
.chat-avatar-tone-1 { color: #6e5130; background: #f3e5cb; }
.chat-avatar-tone-2 { color: #475b76; background: #dfe7f2; }
.chat-avatar-tone-3 { color: #744d62; background: #f0dfe8; }
.chat-avatar-tone-4 { color: #4e6841; background: #e3eddc; }
.chat-avatar-tone-5 { color: #66557b; background: #e9e2f2; }
.chat-avatar-tone-notice { color: #fff; background: #ffbe00; }
.conversation-unread { position: absolute; top: -5px; right: -7px; z-index: 2; display: grid; place-items: center; min-width: 19px; height: 19px; padding: 0 4px; color: #fff; font-size: .61rem; line-height: 1; font-weight: 750; border: 2px solid #fff; border-radius: 10px; background: #fb4755; }
.conversation-copy { display: flex; flex-direction: column; justify-content: center; min-width: 0; line-height: 1.25; }
.conversation-name-row { display: flex; align-items: center; gap: 5px; min-width: 0; height: 18px; }
.conversation-name-row strong { min-width: 0; overflow: hidden; color: #222a30; font-size: .79rem; line-height: 18px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.conversation-status { display: inline-flex; align-items: center; flex: 0 0 auto; max-width: 88px; height: 17px; padding: 0 4px; overflow: hidden; color: #55706a; font-size: .58rem; line-height: 17px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; border-radius: 3px; background: #edf2f1; }
.conversation-status.success { color: #209660; background: #ebf8ef; }
.conversation-status.danger { color: #b23a3a; background: #fdeceb; }
.conversation-preview, .conversation-time { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conversation-preview { height: 17px; margin-top: 1px; color: #56636c; font-size: .7rem; line-height: 17px; }
.conversation-time { height: 15px; color: #99a1a7; font-size: .62rem; line-height: 15px; }
.conversation-product-cover, .conversation-product-placeholder { display: grid; place-items: center; }
.conversation-product-cover { position: relative; width: 48px; height: 48px; overflow: hidden; border: 1px solid #edf0f2; border-radius: 4px; background: #f3f5f6; }
.conversation-product-cover > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #f3f5f6; }
.conversation-product-cover > img.is-broken { display: none; }
.conversation-product-placeholder { width: 100%; height: 100%; color: #8a959c; }
.conversation-product-placeholder > svg { width: 18px; height: 18px; }
.conversation-notification .conversation-product-placeholder { color: #c39000; background: #fff7db; border-radius: 4px; }
.chat-list-pagination { display: grid; grid-template-columns: 34px minmax(0, 1fr) 34px; align-items: center; gap: 8px; flex: 0 0 48px; padding: 7px 10px; border-top: 1px solid #edf0f2; background: #fff; }
.chat-list-pagination small { overflow: hidden; color: #78838a; font-size: .67rem; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.chat-search-empty { border-bottom: 0; }

.chat-conversation-pane { display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; background: #f6f7f8; }
.chat-empty-conversation { flex: 1 1 auto; background: #fff; }
.chat-conversation-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex: 0 0 68px; min-width: 0; padding: 9px 16px; border-bottom: 1px solid #e6e9ec; background: #fff; }
.chat-peer-summary, .chat-header-actions, .chat-active-product { display: flex; align-items: center; }
.chat-peer-summary { flex: 1 1 auto; gap: 10px; min-width: 0; overflow: hidden; }
.chat-peer-copy { display: block; min-width: 0; overflow: hidden; }
.chat-peer-name { display: flex; align-items: center; gap: 6px; min-width: 0; color: #20282e; font-size: .86rem; font-weight: 750; }
.chat-peer-name > strong { min-width: 0; overflow: hidden; font: inherit; text-overflow: ellipsis; white-space: nowrap; }
.chat-peer-copy small { display: block; max-width: 380px; margin-top: 3px; overflow: hidden; color: #7b858c; font-size: .67rem; text-overflow: ellipsis; white-space: nowrap; }
.chat-mobile-back { display: none; }
.chat-header-actions { flex: 0 0 auto; gap: 9px; min-width: 0; }
.chat-active-product { gap: 8px; min-width: 0; max-width: 300px; }
.chat-active-product-copy { display: block; min-width: 0; text-align: right; }
.chat-active-product-copy small, .chat-active-product-copy strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-active-product-copy small { color: #98a1a7; font-size: .6rem; }
.chat-active-product-copy strong { max-width: 220px; margin-top: 2px; color: #4b575f; font-size: .7rem; font-weight: 650; }
.chat-active-product .conversation-product-cover { width: 46px; height: 46px; flex: 0 0 46px; }

.message-stream { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto; padding: 18px 28px 24px; overscroll-behavior: contain; background: #f6f7f8; scrollbar-color: #b3bbc0 transparent; scrollbar-width: thin; }
.message-stream::-webkit-scrollbar { width: 7px; }
.message-stream::-webkit-scrollbar-track { background: transparent; }
.message-stream::-webkit-scrollbar-thumb { border-radius: 4px; background: #b3bbc0; }
.chat-history-pagination { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 0 auto 18px; }
.chat-history-pagination .btn { display: inline-flex; align-items: center; gap: 4px; }
.chat-history-pagination .btn svg { width: 14px; height: 14px; }
.chat-history-pagination small { color: #8b959b; font-size: .65rem; }
.chat-date-divider { display: flex; align-items: center; justify-content: center; margin: 2px 0 14px; }
.chat-date-divider span { padding: 3px 8px; color: #89939a; font-size: .62rem; border-radius: 3px; background: rgba(224,228,231,.86); }
.message { width: fit-content; max-width: min(62%, 620px); margin: 0 0 12px; padding: 9px 12px 7px; overflow-wrap: anywhere; color: #263137; border: 1px solid #e1e5e8; border-radius: 7px; background: #fff; box-shadow: 0 1px 1px rgba(26,35,40,.025); }
.message.outbound { align-self: flex-end; margin-left: auto; color: #fff; border-color: var(--xy-primary); background: var(--xy-primary); }
.message.system { align-self: center; max-width: 78%; color: #667179; border-color: transparent; background: #e9edef; }
.message-content { display: block; font-size: .78rem; line-height: 1.55; }
.message-time { display: block; margin-top: 4px; font-size: .6rem; line-height: 1.25; opacity: .68; }
.chat-message-media { position: relative; display: block; min-width: 140px; min-height: 80px; overflow: hidden; border-radius: 5px; background: #eef1f3; }
.chat-message-media > img { display: block; max-width: min(360px, 100%); max-height: 320px; object-fit: contain; }
.chat-message-media > img.is-broken { display: none; }
.chat-image-error { display: none; align-items: center; justify-content: center; gap: 6px; min-height: 80px; padding: 12px; color: #7d878d; font-size: .7rem; }
.chat-message-media > img.is-broken + .chat-image-error { display: flex; }
.chat-image-error svg { width: 16px; height: 16px; }
.chat-message-empty { margin: auto; }

.chat-composer { position: relative; flex: 0 0 auto; min-width: 0; padding: 10px 16px 12px; border-top: 1px solid #e1e5e8; background: #fff; }
.chat-compose-form { overflow: hidden; border: 1px solid #dfe3e6; border-radius: 6px; background: #fff; transition: border-color .15s ease, box-shadow .15s ease; }
.chat-compose-form:focus-within { border-color: #65aaa4; box-shadow: 0 0 0 3px rgba(8,127,117,.08); }
.chat-compose-form textarea { display: block; width: 100%; height: 68px; min-height: 68px; max-height: 160px; padding: 10px 12px 4px; resize: vertical; color: #263137; font: inherit; font-size: .78rem; line-height: 1.5; border: 0; outline: 0; background: transparent; }
.chat-compose-form textarea::placeholder { color: #a3abb0; }
.chat-compose-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 42px; padding: 4px 7px 6px; }
.chat-compose-tools { display: flex; align-items: center; gap: 3px; min-width: 0; }
.chat-tool-button { display: inline-grid; place-items: center; width: 34px; height: 34px; padding: 0; color: #5d686f; border: 0; border-radius: 4px; background: transparent; }
.chat-tool-button:hover, .chat-tool-button[aria-expanded="true"] { color: var(--xy-primary); background: #edf6f4; }
.chat-tool-button:focus-visible { outline: 2px solid #4aa79f; outline-offset: 1px; }
.chat-tool-button svg { width: 19px; height: 19px; }
.chat-send-button, .chat-media-send { display: inline-flex; align-items: center; justify-content: center; gap: 5px; white-space: nowrap; }
.chat-send-button { min-width: 76px; height: 34px; padding: 0 14px; }
.chat-send-button svg, .chat-media-send svg { width: 15px; height: 15px; }
.chat-send-button:disabled { opacity: .66; }

.chat-media-form { min-width: 0; }
.chat-media-preview { display: grid; grid-template-columns: 52px minmax(0, 1fr) 34px auto; align-items: center; gap: 9px; min-width: 0; margin-bottom: 8px; padding: 7px; border: 1px solid #dde5e4; border-radius: 6px; background: #f7faf9; }
.chat-media-preview > img { width: 52px; height: 52px; object-fit: cover; border-radius: 4px; background: #e9edef; }
.chat-media-preview-copy { display: block; min-width: 0; }
.chat-media-preview-copy strong, .chat-media-preview-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-media-preview-copy strong { color: #354148; font-size: .73rem; }
.chat-media-preview-copy small { margin-top: 3px; color: #849097; font-size: .64rem; }
.chat-media-send { height: 34px; }
.chat-tool-error { margin-bottom: 8px; padding: 7px 9px; color: #a12f2b; font-size: .68rem; border: 1px solid #f0cbc8; border-radius: 4px; background: #fff1f0; }

.chat-tool-popover { position: absolute; bottom: calc(100% - 2px); left: 16px; z-index: 20; width: min(380px, calc(100% - 32px)); max-height: min(420px, var(--chat-tool-max-height, 55dvh)); margin-bottom: 8px; padding: 10px; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; border: 1px solid #dfe3e6; border-radius: 7px; background: #fff; box-shadow: 0 16px 38px rgba(23,32,42,.16); }
.chat-tool-popover[hidden], .chat-media-preview[hidden], .chat-tool-error[hidden] { display: none !important; }
.chat-tool-panel-head { position: sticky; top: 0; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 8px; min-height: 34px; margin-bottom: 8px; background: #fff; }
.chat-tool-panel-head strong { font-size: .78rem; }
.chat-tool-panel-head a { font-size: .67rem; text-decoration: none; }
.chat-tool-panel-head .btn-icon { width: 30px; height: 30px; }
.chat-emoji-panel { width: min(340px, calc(100% - 32px)); }
.chat-emoji-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 3px; }
.chat-emoji-grid button { display: grid; place-items: center; aspect-ratio: 1; min-width: 0; padding: 0; font-size: 1.15rem; border: 0; border-radius: 4px; background: transparent; }
.chat-emoji-grid button:hover, .chat-emoji-grid button:focus-visible { background: #eef2f3; outline: 0; }
.chat-product-list, .chat-quick-reply-list { max-height: min(300px, 38dvh); overflow-y: auto; overscroll-behavior: contain; }
.chat-product-option { display: grid; grid-template-columns: 48px minmax(0, 1fr) 18px; align-items: center; gap: 9px; width: 100%; padding: 7px; color: #263137; text-align: left; border: 1px solid transparent; border-radius: 5px; background: transparent; }
.chat-product-option:hover { background: #f6f8f8; }
.chat-product-option.is-selected { border-color: #a9d2cd; background: #eef7f5; }
.chat-product-option-copy { display: block; min-width: 0; }
.chat-product-option-copy strong, .chat-product-option-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-product-option-copy strong { font-size: .72rem; }
.chat-product-option-copy small { margin-top: 3px; color: #b15037; font-size: .65rem; }
.chat-product-check { width: 17px; height: 17px; color: transparent; }
.chat-product-option.is-selected .chat-product-check { color: var(--xy-primary); }
.chat-quick-reply { display: block; width: 100%; padding: 8px; color: #28343a; text-align: left; border: 0; border-bottom: 1px solid #edf0f2; background: transparent; }
.chat-quick-reply:last-child { border-bottom: 0; }
.chat-quick-reply:hover { background: #f6f8f8; }
.chat-quick-reply strong, .chat-quick-reply span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-quick-reply strong { font-size: .72rem; }
.chat-quick-reply span { margin-top: 3px; color: #748087; font-size: .66rem; }
.chat-tool-panel-empty { padding: 24px 12px; color: #8a949a; font-size: .7rem; text-align: center; }

@media (max-width: 1199.98px) {
  .chat-active-product { max-width: 230px; }
  .chat-active-product-copy strong { max-width: 150px; }
  .message { max-width: min(72%, 560px); }
}

@media (max-width: 991.98px) {
  .chat-workspace { grid-template-columns: 300px minmax(0, 1fr); }
  .chat-active-product-copy { display: none; }
  .message-stream { padding-right: 20px; padding-left: 20px; }
}

@media (max-width: 767.98px) {
  .chat-workspace { grid-template-columns: minmax(0, 1fr); }
  .chat-conversation-pane { display: none; }
  .chat-workspace.has-active-chat .chat-sidebar-pane { display: none; }
  .chat-workspace.has-active-chat .chat-conversation-pane { display: flex; }
  .chat-sidebar-pane { border-right: 0; }
  .chat-mobile-back { display: inline-grid; }
  .chat-conversation-header { padding-right: 10px; padding-left: 10px; }
  .chat-header-actions { margin-left: auto; }
  .chat-active-product { max-width: 48px; }
  .message { max-width: min(84%, 520px); }
  .message-stream { padding: 14px 12px 18px; }
  .chat-composer { padding: 8px 10px 10px; padding-bottom: max(10px, env(safe-area-inset-bottom)); }
  .chat-tool-popover { left: 10px; width: min(380px, calc(100% - 20px)); }
  .chat-emoji-panel { width: min(340px, calc(100% - 20px)); }
}

@media (max-width: 575.98px) {
  .chat-page-content { height: calc(100dvh - 60px); }
  .chat-page-content > .alert { margin: .55rem .65rem 0; }
  .chat-peer-copy small { max-width: 150px; }
  .chat-conversation-header { flex-basis: 62px; }
  .chat-conversation-header .conversation-avatar { width: 38px; height: 38px; flex-basis: 38px; }
  .chat-header-actions .btn-icon { width: 32px; height: 32px; }
  .chat-active-product .conversation-product-cover { width: 40px; height: 40px; flex-basis: 40px; }
  .chat-compose-form textarea { height: 62px; min-height: 62px; }
  .chat-media-preview { grid-template-columns: 46px minmax(0, 1fr) 32px; }
  .chat-media-preview > img { width: 46px; height: 46px; }
  .chat-media-send { grid-column: 1 / -1; width: 100%; }
}

@media (max-width: 374.98px) {
  .chat-list-toolbar { gap: 8px; padding-left: 10px; }
  .chat-compose-toolbar { gap: 4px; padding-right: 5px; padding-left: 5px; }
  .chat-compose-tools { gap: 1px; }
  .chat-tool-button { width: 31px; height: 32px; }
  .chat-send-button { min-width: 36px; width: 36px; padding: 0; }
  .chat-send-button span { display: none; }
  .chat-emoji-grid { grid-template-columns: repeat(7, 1fr); }
}

/* Reference-density buyer message center */
.chat-workspace { background: #fff; }
.chat-workspace:not(.has-active-chat) { grid-template-columns: 328px minmax(0, 1fr); }
.chat-sidebar-pane { background: #fff; }
.chat-stat-strip { flex-basis: 72px; }
.conversation-item { min-height: 68px; padding-top: 6px; padding-bottom: 6px; border-bottom-color: #f3f4f5; }
.conversation-item.active { background: #f0f1f2; box-shadow: none; }
.conversation-item:hover { background: #f5f6f7; }
.chat-conversation-pane { background: #fff; }
.chat-empty-conversation { display: flex; align-items: center; justify-content: center; flex: 1 1 auto; min-width: 0; min-height: 0; padding: 32px; background: #fff; }
.chat-empty-conversation-panel { display: flex; flex-direction: column; align-items: center; justify-content: center; width: min(100%, 460px); min-height: 260px; color: #899399; text-align: center; }
.chat-empty-conversation-illustration { display: grid; place-items: center; width: 141px; height: 117px; margin-bottom: 8px; }
.chat-empty-conversation-illustration img { display: block; width: 141px; height: 117px; object-fit: contain; }
.chat-empty-conversation-panel h2 { margin: 0; color: #273136; font-size: .92rem; font-weight: 700; line-height: 1.4; }
.chat-empty-conversation-panel p { margin: 7px 0 0; color: #a0a8ad; font-size: .7rem; line-height: 1.5; }
.chat-conversation-header { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0; flex-basis: auto; min-height: 66px; padding: 0; background: #fff; }
.chat-header-topline { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 54px; padding: 8px 16px; }
.chat-peer-summary { gap: 8px; }
.chat-peer-name { display: flex; align-items: baseline; gap: 5px; min-width: 0; font-size: .92rem; }
.chat-peer-name strong { overflow: hidden; color: #1f2428; text-overflow: ellipsis; white-space: nowrap; }
.chat-peer-name small { flex: 0 0 auto; color: #788087; font-size: .66rem; font-weight: 500; }
.chat-header-actions { gap: 10px; }
.chat-account-link { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 13px; color: #252a2e; font-size: .73rem; font-weight: 650; text-decoration: none; border: 1px solid #e7e8e9; border-radius: 17px; background: #fff; }
.chat-account-link:hover { color: #111; border-color: #cfd2d4; background: #fafafa; }
.chat-account-link svg { width: 16px; height: 16px; }
.chat-header-more { display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0; color: #30363b; border: 0; background: transparent; }
.chat-header-more:hover { background: #f3f4f5; }
.chat-header-more svg { width: 18px; height: 18px; }
.chat-product-context { display: grid; grid-template-columns: 60px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 84px; padding: 8px 16px 10px; border-top: 1px solid #f4f4f4; }
.chat-product-context .conversation-product-cover { width: 60px; height: 60px; }
.chat-product-context-copy { display: block; min-width: 0; }
.chat-product-context-copy strong, .chat-product-context-copy span, .chat-product-context-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-product-context-copy strong { color: #25292c; font-size: .76rem; }
.chat-product-context-copy span { margin-top: 4px; color: #f14735; font-size: .75rem; font-weight: 700; }
.chat-product-context-copy small { margin-top: 2px; color: #8b9297; font-size: .62rem; }
.chat-buy-link { display: inline-flex; align-items: center; justify-content: center; min-width: 80px; height: 34px; padding: 0 14px; color: #fff; font-size: .72rem; font-weight: 700; text-decoration: none; border-radius: 17px; background: #ff4b2b; }
.chat-buy-link:hover { color: #fff; background: #e83c20; }

.message-stream { padding: 20px 16px 28px; background: #fff; }
.chat-date-divider { margin: 10px 0 22px; }
.chat-date-divider span { color: #9ba1a6; background: transparent; }
.chat-message-row { display: flex; align-items: flex-start; gap: 9px; width: 100%; margin: 0 0 28px; }
.chat-message-row.outbound { flex-direction: row-reverse; }
.chat-message-row.system { justify-content: center; }
.chat-message-row.system .chat-message-avatar, .chat-message-row.system .chat-message-sender { display: none; }
.chat-message-avatar { width: 40px; height: 40px; flex: 0 0 40px; }
.chat-message-body { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; max-width: min(66%, 680px); }
.chat-message-row.outbound .chat-message-body { align-items: flex-end; }
.chat-message-row.system .chat-message-body { align-items: center; max-width: 78%; }
.chat-message-sender { max-width: 100%; margin-bottom: 4px; overflow: hidden; color: #767e84; font-size: .64rem; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.message { width: fit-content; max-width: 100%; margin: 0; padding: 9px 11px; color: #21262a; border: 0; border-radius: 6px; background: #f2f3f4; box-shadow: none; }
.chat-message-row.outbound .message { color: #1d2226; background: #ffd900; }
.chat-message-row.system .message { color: #667179; background: #eef0f1; }
.message-content { font-size: .79rem; line-height: 1.55; }
.message-time { margin-top: 5px; color: #9ca2a7; font-size: .6rem; opacity: 1; }
.chat-message-failure { color: #c43d37; font-weight: 650; }
.chat-message-media { min-width: 120px; min-height: 72px; border-radius: 5px; background: #e9ecee; }
.chat-message-media > img { max-width: min(360px, 100%); max-height: 320px; }
.chat-location-card { display: grid; grid-template-columns: 24px minmax(0, 1fr) 16px; align-items: center; gap: 8px; min-width: min(300px, 58vw); color: #252b2f; text-decoration: none; }
.chat-location-card > svg { width: 20px; height: 20px; color: #ee5a3f; }
.chat-location-card > svg:last-child { width: 15px; height: 15px; color: #9aa1a6; }
.chat-location-card span, .chat-location-card strong, .chat-location-card small { display: block; min-width: 0; }
.chat-location-card strong { overflow: hidden; font-size: .75rem; text-overflow: ellipsis; white-space: nowrap; }
.chat-location-card small { margin-top: 3px; overflow: hidden; color: #737c82; font-size: .64rem; text-overflow: ellipsis; white-space: nowrap; }
.chat-message-product { display: grid; grid-template-columns: 52px minmax(0, 1fr); align-items: center; gap: 9px; min-width: min(280px, 56vw); }
.chat-message-product > img { width: 52px; height: 52px; object-fit: cover; border-radius: 4px; background: #e8ebed; }
.chat-message-product span, .chat-message-product strong, .chat-message-product small { display: block; min-width: 0; }
.chat-message-product strong { overflow: hidden; font-size: .73rem; text-overflow: ellipsis; white-space: nowrap; }
.chat-message-product small { margin-top: 4px; color: #f14735; font-size: .68rem; font-weight: 700; }

.chat-composer { min-height: 150px; padding: 0 10px 10px; border-top-color: #eceeef; }
.chat-account-alert { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center; gap: 9px; min-height: 54px; margin: 8px 0 2px; padding: 8px 10px; color: #6f4a00; border: 1px solid #f0d499; border-radius: 6px; background: #fff8e8; }
.chat-account-alert > svg { width: 18px; height: 18px; }
.chat-account-alert > span, .chat-account-alert strong, .chat-account-alert small { display: block; min-width: 0; }
.chat-account-alert strong { font-size: .72rem; }
.chat-account-alert small { margin-top: 2px; color: #8b650d; font-size: .64rem; line-height: 1.35; }
.chat-account-alert form { margin: 0; }
.chat-account-alert .btn { white-space: nowrap; }
.chat-compose-form { position: relative; height: 100%; min-height: 140px; overflow: visible; border: 0; border-radius: 0; }
.chat-compose-form:focus-within { border-color: transparent; box-shadow: none; }
.chat-compose-toolbar { justify-content: flex-start; min-height: 42px; padding: 6px 2px 2px; }
.chat-compose-tools { gap: 4px; }
.chat-tool-button { width: 36px; height: 34px; color: #343a3e; }
.chat-tool-button:hover, .chat-tool-button[aria-expanded="true"] { color: #111; background: #f1f2f3; }
.chat-tool-button:disabled { color: #a6acb0; cursor: wait; }
.chat-compose-form textarea { height: 72px; min-height: 72px; max-height: 100px; padding: 6px 96px 8px 2px; resize: none; font-size: .76rem; }
.chat-compose-form textarea::placeholder { color: #c4c8cb; }
.chat-compose-form textarea:disabled { color: #8f969a; cursor: not-allowed; background: #fafafa; }
.chat-send-button { position: absolute; right: 0; bottom: 0; display: inline-flex; align-items: center; justify-content: center; min-width: 78px; height: 34px; padding: 0 15px; color: #856f1a; font-size: .72rem; border: 0; border-radius: 17px; background: #ffe984; }
.chat-send-button:hover:not(:disabled) { color: #4f430f; background: #ffdd35; }
.chat-send-button:disabled { color: #b8a55e; cursor: default; background: #fff1ae; opacity: .72; }
.chat-media-form { display: none; }
.chat-tool-error { position: absolute; right: 10px; bottom: calc(100% + 8px); left: 10px; z-index: 25; margin: 0; }
.chat-tool-popover { bottom: calc(100% - 1px); left: 10px; width: min(380px, calc(100% - 20px)); margin-bottom: 8px; border-radius: 6px; }
.chat-tool-panel-head { grid-template-columns: minmax(0, 1fr) auto; }
.chat-tool-panel-head:has(> a) { grid-template-columns: minmax(0, 1fr) auto auto; }
.chat-product-option { grid-template-columns: 48px minmax(0, 1fr) 20px; }
.chat-product-option .conversation-product-cover { width: 48px; height: 48px; }
.chat-location-fields { display: grid; gap: 9px; }
.chat-location-fields label { display: grid; gap: 4px; color: #5f696f; font-size: .65rem; }
.chat-location-fields .form-control { height: 34px; font-size: .72rem; }
.chat-coordinate-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.chat-location-status { min-height: 18px; color: #788188; font-size: .65rem; }
.chat-location-fields .btn { display: inline-flex; align-items: center; justify-content: center; gap: 5px; justify-self: end; min-width: 96px; }
.chat-location-fields .btn svg { width: 15px; height: 15px; }

@media (max-width: 991.98px) {
  .chat-workspace { grid-template-columns: 300px minmax(0, 1fr); }
  .chat-message-body { max-width: 74%; }
}

@media (max-width: 767.98px) {
  .chat-workspace { grid-template-columns: minmax(0, 1fr); }
  .chat-header-topline { padding-right: 10px; padding-left: 10px; }
  .chat-product-context { grid-template-columns: 50px minmax(0, 1fr) auto; padding-right: 10px; padding-left: 10px; }
  .chat-product-context .conversation-product-cover { width: 50px; height: 50px; }
  .chat-buy-link { min-width: 70px; padding: 0 10px; }
  .chat-message-body { max-width: 82%; }
  .message-stream { padding-right: 10px; padding-left: 10px; }
  .chat-composer { padding-right: 8px; padding-left: 8px; }
  .chat-tool-popover { left: 8px; width: calc(100% - 16px); }
}

@media (max-width: 575.98px) {
  .chat-account-link span { display: none; }
  .chat-account-link { width: 34px; padding: 0; justify-content: center; }
  .chat-product-context-copy small { display: none; }
  .chat-message-avatar { width: 36px; height: 36px; flex-basis: 36px; }
  .chat-message-body { max-width: calc(100% - 46px); }
  .chat-tool-button { width: 34px; }
  .chat-coordinate-row { grid-template-columns: 1fr; }
  .chat-account-alert { grid-template-columns: 18px minmax(0, 1fr); }
  .chat-account-alert .btn, .chat-account-alert form { grid-column: 2; justify-self: start; }
}

@media (max-width: 374.98px) {
  .chat-product-context { grid-template-columns: 44px minmax(0, 1fr); }
  .chat-product-context .conversation-product-cover { width: 44px; height: 44px; }
  .chat-buy-link { display: none; }
  .chat-compose-tools { gap: 1px; }
  .chat-tool-button { width: 32px; }
}

/* Buyer profile panel */
.chat-workspace.has-active-chat { grid-template-columns: 328px minmax(0, 1fr) 388px; }
.chat-buyer-pane { display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; border-left: 1px solid #eceeef; background: #fff; }
.chat-buyer-tabs { display: flex; align-items: stretch; flex: 0 0 48px; padding: 0 18px; border-bottom: 1px solid #eceeef; }
.chat-buyer-tab { position: relative; flex: 1 1 50%; min-width: 92px; padding: 0 5px; color: #7a8388; font-size: .78rem; font-weight: 650; border: 0; background: transparent; }
.chat-buyer-tab::after { position: absolute; right: 12px; bottom: -1px; left: 12px; height: 2px; content: ''; background: transparent; }
.chat-buyer-tab:hover, .chat-buyer-tab.is-active { color: #202629; }
.chat-buyer-tab.is-active::after { background: #ffd900; }
.chat-buyer-panel-content { min-height: 0; padding: 18px; overflow-y: auto; }
.chat-buyer-panel-content[hidden] { display: none; }
.chat-buyer-profile-head { display: grid; grid-template-columns: 54px minmax(0, 1fr) 32px; align-items: center; gap: 11px; }
.chat-buyer-avatar { width: 54px; height: 54px; flex-basis: 54px; }
.chat-buyer-profile-copy { min-width: 0; }
.chat-buyer-profile-copy strong, .chat-buyer-profile-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-buyer-profile-copy strong { color: #252a2d; font-size: .9rem; }
.chat-buyer-profile-copy small { margin-top: 5px; color: #8b9499; font-size: .66rem; }
.chat-buyer-profile-head .btn-icon { width: 30px; height: 30px; }
.chat-buyer-profile-head .btn-icon svg { width: 15px; height: 15px; }
.chat-buyer-sync-status { display: grid; grid-template-columns: 9px minmax(0, 1fr); align-items: start; gap: 8px; margin-top: 11px; padding: 8px 10px; color: #667278; border-left: 2px solid #cbd2d5; background: #f7f8f8; }
.chat-buyer-sync-status > span:last-child { min-width: 0; }
.chat-buyer-sync-status strong, .chat-buyer-sync-status small { display: block; overflow-wrap: anywhere; }
.chat-buyer-sync-status strong { color: #465158; font-size: .66rem; }
.chat-buyer-sync-status small { margin-top: 2px; font-size: .6rem; line-height: 1.45; }
.chat-buyer-sync-indicator { width: 7px; height: 7px; margin-top: 4px; border-radius: 50%; background: #aeb7bb; }
.chat-buyer-sync-status[data-state="loading"] { color: #75621e; border-color: #e7c400; background: #fffbea; }
.chat-buyer-sync-status[data-state="loading"] .chat-buyer-sync-indicator { background: #e5bd00; animation: buyer-sync-pulse 1s ease-in-out infinite; }
.chat-buyer-sync-status[data-state="success"] { color: #33705d; border-color: #52a589; background: #f0faf6; }
.chat-buyer-sync-status[data-state="success"] .chat-buyer-sync-indicator { background: #3d9c7d; }
.chat-buyer-sync-status[data-state="warning"] { color: #80601e; border-color: #d6a93d; background: #fff8e8; }
.chat-buyer-sync-status[data-state="warning"] .chat-buyer-sync-indicator { background: #cb9324; }
.chat-buyer-sync-status[data-state="error"] { color: #99473f; border-color: #d75b50; background: #fff3f2; }
.chat-buyer-sync-status[data-state="error"] .chat-buyer-sync-indicator { background: #d84f43; }
@keyframes buyer-sync-pulse { 50% { opacity: .35; transform: scale(.72); } }
.chat-buyer-endpoint-statuses { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 8px; }
.chat-buyer-endpoint-status { display: grid; grid-template-columns: 7px minmax(0, 1fr); align-items: start; gap: 6px; min-width: 0; padding: 7px 8px; border: 1px solid #e8ebec; border-radius: 4px; background: #fafbfb; }
.chat-buyer-endpoint-status > span:last-child { min-width: 0; }
.chat-buyer-endpoint-status strong, .chat-buyer-endpoint-status small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-buyer-endpoint-status strong { color: #4d585e; font-size: .61rem; }
.chat-buyer-endpoint-status small { margin-top: 2px; color: #8a9499; font-size: .56rem; }
.chat-buyer-endpoint-indicator { width: 6px; height: 6px; margin-top: 4px; border-radius: 50%; background: #aeb7bb; }
.chat-buyer-endpoint-status[data-state="loading"] .chat-buyer-endpoint-indicator { background: #e5bd00; animation: buyer-sync-pulse 1s ease-in-out infinite; }
.chat-buyer-endpoint-status[data-state="success"] { border-color: #cde6dd; background: #f0faf6; }
.chat-buyer-endpoint-status[data-state="success"] .chat-buyer-endpoint-indicator { background: #3d9c7d; }
.chat-buyer-endpoint-status[data-state="partial"], .chat-buyer-endpoint-status[data-state="cached"], .chat-buyer-endpoint-status[data-state="skipped"] { border-color: #ead9aa; background: #fff9e9; }
.chat-buyer-endpoint-status[data-state="partial"] .chat-buyer-endpoint-indicator, .chat-buyer-endpoint-status[data-state="cached"] .chat-buyer-endpoint-indicator, .chat-buyer-endpoint-status[data-state="skipped"] .chat-buyer-endpoint-indicator { background: #cb9324; }
.chat-buyer-endpoint-status[data-state="error"] { border-color: #efc8c4; background: #fff3f2; }
.chat-buyer-endpoint-status[data-state="error"] .chat-buyer-endpoint-indicator { background: #d84f43; }
.chat-buyer-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 13px; }
.chat-buyer-tags span { display: inline-flex; align-items: center; min-height: 24px; padding: 0 8px; color: #59656b; font-size: .64rem; border: 1px solid #e8ebec; border-radius: 12px; background: #fafbfb; }
.chat-buyer-tags span:first-child { color: #287966; border-color: #cde6dd; background: #f0faf6; }
.chat-buyer-note { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 8px; margin-top: 10px; padding: 8px 9px; border: 1px solid #edf0f1; border-radius: 4px; background: #fafbfb; }
.chat-buyer-note span { display: inline-flex; align-items: center; gap: 4px; color: #8a9499; font-size: .6rem; white-space: nowrap; }
.chat-buyer-note span svg { width: 12px; height: 12px; }
.chat-buyer-note strong { min-width: 0; overflow-wrap: anywhere; color: #566168; font-size: .61rem; font-weight: 550; line-height: 1.45; }
.chat-buyer-stats-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-top: 18px; }
.chat-buyer-stats-head strong { color: #3d4549; font-size: .72rem; }
.chat-buyer-stats-head small { min-width: 0; color: #9aa1a5; font-size: .6rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-buyer-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin-top: 7px; }
.chat-buyer-stats > div { min-width: 0; padding: 10px 6px; text-align: center; border-radius: 5px; background: #f6f7f7; }
.chat-buyer-stats strong, .chat-buyer-stats span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-buyer-stats strong { color: #242b2f; font-size: .86rem; }
.chat-buyer-stats span { margin-top: 4px; color: #899196; font-size: .62rem; }
.chat-buyer-section-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 22px 0 10px; }
.chat-buyer-section-head strong { color: #252b2e; font-size: .76rem; }
.chat-buyer-section-head a { color: #778289; font-size: .65rem; text-decoration: none; }
.chat-buyer-section-head a:hover { color: #e44529; }
.chat-buyer-product-tabs { display: flex; gap: 15px; margin-bottom: 11px; border-bottom: 1px solid #f0f1f2; }
.chat-buyer-product-tabs button { position: relative; padding: 0 0 8px; color: #969da1; font-size: .65rem; border: 0; background: transparent; }
.chat-buyer-product-tabs button::after { position: absolute; right: 0; bottom: -1px; left: 0; height: 2px; content: ''; background: transparent; }
.chat-buyer-product-tabs button.is-active { color: #252b2e; font-weight: 650; }
.chat-buyer-product-tabs button.is-active::after { background: #ff4b2b; }
.chat-buyer-products { display: grid; gap: 7px; }
.chat-buyer-current-product { display: grid; grid-template-columns: 52px minmax(0, 1fr); align-items: center; gap: 9px; padding: 8px; border: 1px solid #eceeef; border-radius: 5px; background: #fff; }
.chat-buyer-product-card { color: inherit; text-decoration: none; }
.chat-buyer-product-card:hover { color: inherit; border-color: #d8dde0; background: #fcfcfc; }
.chat-buyer-current-product .conversation-product-cover { width: 52px; height: 52px; }
.chat-buyer-product-loading { min-height: 68px; }
.chat-buyer-current-product strong, .chat-buyer-current-product small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-buyer-current-product strong { color: #30383d; font-size: .7rem; }
.chat-buyer-current-product small { margin-top: 5px; color: #ef5037; font-size: .68rem; font-weight: 700; }
.chat-buyer-product-copy { min-width: 0; }
.chat-buyer-product-subtitle, .chat-buyer-product-metrics, .chat-buyer-product-promotion { display: block; margin-top: 4px; overflow: hidden; color: #879197; font-size: .58rem; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.chat-buyer-product-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.chat-buyer-product-tags em { max-width: 100%; padding: 1px 5px; overflow: hidden; color: #4f7168; font-size: .54rem; font-style: normal; text-overflow: ellipsis; white-space: nowrap; border: 1px solid #d2e5df; border-radius: 2px; background: #f2faf7; }
.chat-buyer-product-promotion { color: #b56d16; }
.chat-buyer-orders { display: grid; gap: 8px; margin-top: 9px; }
.chat-buyer-order-filters { display: flex; align-items: center; gap: 15px; min-width: max-content; margin-top: 15px; padding: 0 0 9px; overflow-x: auto; border-bottom: 1px solid #f0f1f2; }
.chat-buyer-order-filters button { position: relative; padding: 0; color: #747e84; font-size: .64rem; white-space: nowrap; border: 0; background: transparent; }
.chat-buyer-order-filters button::after { position: absolute; right: 0; bottom: -10px; left: 0; height: 2px; content: ''; background: transparent; }
.chat-buyer-order-filters button.is-active { color: #272d31; font-weight: 700; }
.chat-buyer-order-filters button.is-active::after { background: #ff4b2b; }
.chat-buyer-order-filters .chat-buyer-order-more { display: inline-grid; place-items: center; width: 18px; height: 18px; }
.chat-buyer-order-filters .chat-buyer-order-more::after { display: none; }
.chat-buyer-order-filters .chat-buyer-order-more svg { width: 14px; height: 14px; }
.chat-buyer-order { padding: 10px; border: 1px solid #eceeef; border-radius: 5px; background: #fff; }
.chat-buyer-order-heading { display: flex; align-items: center; gap: 7px; min-width: 0; padding-bottom: 8px; border-bottom: 1px solid #f1f2f2; }
.chat-buyer-order-status { flex: 0 0 auto; color: #f04f37; font-size: .65rem; font-weight: 700; }
.chat-buyer-order-number { min-width: 0; overflow: hidden; color: #8c959a; font-size: .6rem; text-overflow: ellipsis; white-space: nowrap; }
.chat-buyer-order-heading button { flex: 0 0 auto; border: 0; background: transparent; }
.chat-buyer-order-copy, .chat-order-detail-copy { display: inline-grid; place-items: center; width: 22px; height: 22px; padding: 0; color: #8b959a; border: 0; background: transparent; }
.chat-buyer-order-copy svg, .chat-order-detail-copy svg { width: 13px; height: 13px; }
.chat-buyer-order-copy:hover, .chat-buyer-order-copy.is-copied, .chat-order-detail-copy:hover, .chat-order-detail-copy.is-copied { color: #df452d; }
.chat-buyer-order-detail-trigger { margin-left: auto; color: #3f85d7; font-size: .62rem; }
.chat-buyer-order-detail-trigger:hover { color: #1f69ba; }
.chat-buyer-order-time { padding: 7px 0 0; overflow: hidden; color: #9ba3a7; font-size: .58rem; text-overflow: ellipsis; white-space: nowrap; }
.chat-buyer-order-product { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 10px 0; }
.chat-buyer-order-product .conversation-product-cover { width: 48px; height: 48px; }
.chat-buyer-order-product strong, .chat-buyer-order-product small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-buyer-order-product strong { color: #333b40; font-size: .68rem; }
.chat-buyer-order-product > strong { color: #282e32; font-size: .72rem; }
.chat-buyer-order-product small { margin-top: 4px; color: #a0a7ab; font-size: .6rem; }
.chat-buyer-order-top, .chat-buyer-order-meta, .chat-buyer-order-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.chat-buyer-order-top strong { overflow: hidden; color: #30383d; font-size: .68rem; text-overflow: ellipsis; white-space: nowrap; }
.chat-buyer-order-top > span { flex: 0 0 auto; color: #e84c32; font-size: .68rem; font-weight: 700; }
.chat-buyer-order-meta { margin-top: 6px; color: #9aa1a5; font-size: .6rem; }
.chat-buyer-order-meta span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-buyer-order-detail { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px 12px; padding: 8px 0; border-top: 1px solid #f1f2f2; }
.chat-buyer-order-detail > div { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; min-width: 0; }
.chat-buyer-order-detail span, .chat-buyer-order-detail strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-buyer-order-detail span { color: #9aa2a6; font-size: .58rem; }
.chat-buyer-order-detail strong { color: #505a60; font-size: .59rem; font-weight: 550; }
.chat-buyer-order-remark { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; padding: 7px 0; border-top: 1px solid #f1f2f2; }
.chat-buyer-order-remark span { color: #9aa2a6; font-size: .58rem; }
.chat-buyer-order-remark strong { overflow: hidden; color: #505a60; font-size: .59rem; font-weight: 550; text-overflow: ellipsis; white-space: nowrap; }
.chat-buyer-order-actions { justify-content: flex-start; margin-top: 9px; padding-top: 8px; border-top: 1px solid #f1f2f2; }
.chat-buyer-order-actions button, .chat-buyer-order-actions a { padding: 0; color: #68747a; font-size: .62rem; text-decoration: none; border: 0; background: transparent; }
.chat-buyer-order-actions button:hover, .chat-buyer-order-actions a:hover { color: #e84c32; }
.chat-buyer-empty { padding: 24px 8px; color: #a0a8ac; font-size: .68rem; text-align: center; }
.chat-buyer-replies { display: grid; gap: 2px; }
.chat-buyer-replies .chat-quick-reply { border: 1px solid #edf0f1; border-radius: 4px; }

/* Order detail drawer */
.chat-order-detail-drawer { --bs-offcanvas-width: min(520px, 100vw); border-left: 1px solid #e7eaec; box-shadow: -12px 0 30px rgb(28 37 42 / 10%); }
.chat-order-detail-header { min-height: 70px; padding: 15px 20px; border-bottom: 1px solid #eceeef; }
.chat-order-detail-header > div { min-width: 0; }
.chat-order-detail-header h2, .chat-order-detail-header small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-order-detail-header h2 { color: #252c30; font-size: 1rem; font-weight: 720; }
.chat-order-detail-header small { margin-top: 4px; color: #8d979c; font-size: .68rem; }
.chat-order-detail-body { padding: 0; }
.chat-order-detail-loading { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 280px; color: #717c82; font-size: .78rem; }
.chat-order-detail-loading[hidden], .chat-order-detail-error[hidden], [data-order-detail-content][hidden] { display: none; }
.chat-order-detail-error { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; min-height: 300px; padding: 28px; color: #8c4540; text-align: center; }
.chat-order-detail-error > svg { width: 30px; height: 30px; color: #dc4c3c; }
.chat-order-detail-error strong { font-size: .86rem; }
.chat-order-detail-error span { min-width: 0; max-width: 360px; overflow-wrap: anywhere; color: #7e898e; font-size: .7rem; line-height: 1.55; }
.chat-order-detail-notice { display: flex; align-items: flex-start; gap: 8px; padding: 9px 20px; color: #795e20; font-size: .66rem; line-height: 1.45; border-bottom: 1px solid #f3e5b8; background: #fff9e8; }
.chat-order-detail-notice[hidden] { display: none; }
.chat-order-detail-notice svg { width: 14px; height: 14px; margin-top: 1px; flex: 0 0 auto; }
.chat-order-detail-summary { display: grid; grid-template-columns: 56px minmax(0, 1fr) minmax(70px, 32%); align-items: center; gap: 11px; padding: 18px 20px; border-bottom: 1px solid #eceeef; background: #fafbfb; }
.chat-order-detail-cover { width: 56px; height: 56px; }
.chat-order-detail-summary > span:nth-child(2) { min-width: 0; }
.chat-order-detail-summary strong, .chat-order-detail-summary small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-order-detail-summary > span:nth-child(2) > strong { color: #2d3539; font-size: .78rem; }
.chat-order-detail-summary small { margin-top: 6px; color: #889297; font-size: .66rem; }
.chat-order-detail-summary > strong { min-width: 0; overflow-wrap: anywhere; color: #e64b31; font-size: .88rem; text-align: right; white-space: normal; }
.chat-order-detail-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 0 20px; border-bottom: 1px solid #eceeef; }
.chat-order-detail-tabs button { position: relative; min-height: 44px; padding: 0 6px; color: #7b858a; font-size: .7rem; border: 0; background: transparent; }
.chat-order-detail-tabs button::after { position: absolute; right: 20%; bottom: -1px; left: 20%; height: 2px; content: ''; background: transparent; }
.chat-order-detail-tabs button.is-active { color: #252c30; font-weight: 700; }
.chat-order-detail-tabs button.is-active::after { background: #ffd400; }
.chat-order-detail-panel { padding: 4px 20px 24px; }
.chat-order-detail-panel[hidden] { display: none; }
.chat-order-detail-panel h3 { margin: 20px 0 10px; color: #30383c; font-size: .75rem; font-weight: 720; }
.chat-order-detail-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 22px; margin: 0; }
.chat-order-detail-list > div { display: grid; grid-template-columns: 78px minmax(0, 1fr); align-items: baseline; gap: 8px; min-width: 0; padding: 9px 0; border-bottom: 1px solid #f0f2f2; }
.chat-order-detail-list > div.is-wide { grid-column: 1 / -1; }
.chat-order-detail-list dt { color: #929b9f; font-size: .65rem; font-weight: 500; }
.chat-order-detail-list dd { min-width: 0; margin: 0; overflow-wrap: anywhere; color: #3f484d; font-size: .67rem; text-align: right; }
.chat-order-detail-list dd:has(.chat-order-detail-copy) { display: flex; align-items: center; justify-content: flex-end; gap: 3px; }
.chat-order-detail-empty { padding: 18px 12px; color: #98a1a5; font-size: .68rem; text-align: center; border-top: 1px solid #f0f2f2; border-bottom: 1px solid #f0f2f2; background: #fafbfb; }
.chat-order-review-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 0; }
.chat-order-review-heading span { color: #dc4b32; font-size: .8rem; font-weight: 700; }
.chat-order-review-heading small { color: #7e898e; font-size: .66rem; }
.chat-order-review-content blockquote { margin: 0 0 10px; padding: 12px 14px; overflow-wrap: anywhere; color: #414a4f; font-size: .72rem; line-height: 1.65; border-left: 3px solid #ffd400; background: #fafbfb; }
.chat-order-upstream-entry { display: grid; grid-template-columns: 38px minmax(0, 1fr); align-items: center; gap: 8px 11px; padding: 16px; color: #3c464b; border-top: 1px solid #eceeef; border-bottom: 1px solid #eceeef; background: #fafbfb; }
.chat-order-upstream-entry[hidden] { display: none; }
.chat-order-upstream-icon { display: grid; place-items: center; width: 38px; height: 38px; color: #806a00; border-radius: 50%; background: #ffe66a; }
.chat-order-upstream-icon svg { width: 18px; height: 18px; }
.chat-order-upstream-entry > div:nth-child(2) { min-width: 0; }
.chat-order-upstream-entry strong, .chat-order-upstream-entry small { display: block; overflow-wrap: anywhere; }
.chat-order-upstream-entry strong { font-size: .75rem; }
.chat-order-upstream-entry small { margin-top: 3px; color: #7d888d; font-size: .64rem; line-height: 1.45; }
.chat-order-upstream-qr { grid-column: 1 / -1; justify-self: center; width: 156px; min-height: 156px; padding: 6px; background: #fff; }
.chat-order-upstream-qr[hidden] { display: none; }
.chat-order-upstream-qr img, .chat-order-upstream-qr canvas { display: block; width: 144px !important; height: 144px !important; }
.chat-order-upstream-entry > a { display: inline-flex; grid-column: 1 / -1; align-items: center; justify-content: center; gap: 5px; min-height: 34px; color: #3576bd; font-size: .68rem; text-decoration: none; }
.chat-order-upstream-entry > a:hover { color: #195caa; }
.chat-order-upstream-entry > a svg { width: 14px; height: 14px; }
.chat-replies-panel { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; padding: 0 22px 16px; }
.chat-replies-panel .chat-buyer-replies { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; overflow-y: auto; }
.chat-quick-reply-empty { display: flex; flex: 1 1 auto; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-height: 300px; color: #8c9498; text-align: center; }
.chat-quick-reply-empty p { margin: 0; font-size: .72rem; }
.chat-quick-reply-empty-illustration { display: grid; place-items: center; width: 88px; height: 72px; color: #d9ddde; }
.chat-quick-reply-empty-illustration svg { width: 66px; height: 66px; stroke-width: 1.15; }
.chat-quick-reply-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; flex: 0 0 auto; padding-top: 18px; }
.chat-quick-reply-actions button, .chat-quick-reply-actions a { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 18px; font-size: .76rem; text-decoration: none; border-radius: 24px; }
.chat-quick-reply-actions button { color: #50595d; border: 1px solid #e2e5e6; background: #fff; }
.chat-quick-reply-actions button:hover { color: #252b2e; border-color: #cdd3d5; background: #f7f8f8; }
.chat-quick-reply-actions a { color: #292300; border: 1px solid #ffd900; background: #ffd900; }
.chat-quick-reply-actions a:hover { color: #292300; border-color: #efca00; background: #efca00; }
.chat-quick-reply-actions svg { width: 15px; height: 15px; }

@media (max-width: 1199.98px) {
  .chat-workspace.has-active-chat { grid-template-columns: 300px minmax(0, 1fr) 330px; }
  .chat-buyer-panel-content { padding-right: 13px; padding-left: 13px; }
}

@media (max-width: 991.98px) {
  .chat-workspace, .chat-workspace.has-active-chat { grid-template-columns: 300px minmax(0, 1fr); }
  .chat-buyer-pane { display: none; }
}

@media (max-width: 767.98px) {
  .chat-workspace, .chat-workspace.has-active-chat, .chat-workspace:not(.has-active-chat) { grid-template-columns: minmax(0, 1fr); }
  .chat-empty-conversation { min-height: calc(100dvh - 140px); padding: 24px 16px; }
  .chat-empty-conversation-panel { min-height: 220px; }
  .chat-order-detail-drawer { --bs-offcanvas-width: 100vw; }
  .chat-order-detail-header, .chat-order-detail-summary, .chat-order-detail-panel { padding-right: 16px; padding-left: 16px; }
  .chat-order-detail-summary > span:nth-child(2) > strong { overflow: visible; overflow-wrap: anywhere; line-height: 1.4; text-overflow: clip; white-space: normal; }
  .chat-order-detail-tabs { padding-right: 10px; padding-left: 10px; }
  .chat-order-detail-list { grid-template-columns: minmax(0, 1fr); }
  .chat-order-detail-list > div.is-wide { grid-column: auto; }
}

/* Platform transaction wallboard */
.trade-screen-body { min-width: 320px; min-height: 100vh; margin: 0; overflow-x: hidden; color: #edf4f2; background: #101615; }
.trade-screen { --screen-line: #29332f; --screen-muted: #8fa09a; --screen-green: #3bd29f; --screen-gold: #f3bd55; --screen-coral: #f07868; --screen-cyan: #54b7c4; display: flex; flex-direction: column; min-height: 100vh; padding: 16px clamp(14px, 2vw, 30px) 12px; }
.trade-screen-header { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 64px; padding: 0 2px 14px; border-bottom: 1px solid var(--screen-line); }
.trade-screen-brand, .trade-screen-head-actions, .trade-kpi, .trade-screen-panel > header, .trade-screen-footer, .trade-legend, .trade-runtime-dot, .trade-live { display: flex; align-items: center; }
.trade-screen-brand { min-width: 0; gap: 12px; }
.trade-screen-mark { display: grid; place-items: center; width: 42px; height: 42px; flex: 0 0 42px; color: #111714; border-radius: 6px; background: var(--screen-green); }
.trade-screen-mark svg { width: 24px; height: 24px; }
.trade-screen-brand h1 { margin: 0; font-size: clamp(1.1rem, 2vw, 1.55rem); line-height: 1.25; letter-spacing: 0; }
.trade-screen-brand p { margin: 3px 0 0; color: var(--screen-muted); font-size: .72rem; letter-spacing: 0; }
.trade-screen-head-actions { flex: 0 0 auto; gap: 10px; }
.trade-screen-head-actions time { min-width: 74px; font-variant-numeric: tabular-nums; font-size: .96rem; font-weight: 700; text-align: center; }
.trade-live { gap: 6px; color: #b8c5c0; font-size: .7rem; }
.trade-live > span { width: 7px; height: 7px; border-radius: 50%; background: var(--screen-green); box-shadow: 0 0 0 4px rgba(59, 210, 159, .12); }
.trade-icon-button { display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 0; color: #b9c5c1; border: 1px solid #34413c; border-radius: 5px; background: #18201e; }
.trade-icon-button:hover { color: #fff; border-color: #60716a; background: #202a27; }
.trade-icon-button svg { width: 17px; height: 17px; }
.trade-icon-button.is-loading svg { animation: trade-spin .8s linear infinite; }
@keyframes trade-spin { to { transform: rotate(360deg); } }

.trade-kpi-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; padding: 14px 0; }
.trade-kpi { min-width: 0; min-height: 82px; gap: 11px; padding: 13px; border: 1px solid var(--screen-line); border-radius: 6px; background: #171e1c; }
.trade-kpi-icon { display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 34px; border-radius: 5px; }
.trade-kpi-icon svg { width: 18px; height: 18px; }
.trade-kpi-icon.green { color: var(--screen-green); background: rgba(59,210,159,.12); }
.trade-kpi-icon.gold { color: var(--screen-gold); background: rgba(243,189,85,.12); }
.trade-kpi-icon.coral { color: var(--screen-coral); background: rgba(240,120,104,.12); }
.trade-kpi-icon.cyan { color: var(--screen-cyan); background: rgba(84,183,196,.12); }
.trade-kpi > div { min-width: 0; }
.trade-kpi small { display: block; overflow: hidden; color: var(--screen-muted); font-size: .68rem; text-overflow: ellipsis; white-space: nowrap; }
.trade-kpi strong { display: block; margin-top: 5px; overflow: hidden; color: #f5faf8; font-size: clamp(1rem, 1.55vw, 1.38rem); line-height: 1.2; font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; }

.trade-screen-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(280px, 3fr); grid-template-rows: minmax(280px, 42vh) minmax(300px, 1fr); gap: 10px; flex: 1 1 auto; min-height: 600px; }
.trade-screen-panel { min-width: 0; min-height: 0; overflow: hidden; border: 1px solid var(--screen-line); border-radius: 6px; background: #171e1c; }
.trade-screen-panel > header { justify-content: space-between; min-height: 54px; gap: 14px; padding: 10px 14px; border-bottom: 1px solid var(--screen-line); }
.trade-screen-panel > header h2 { margin: 0; color: #edf4f2; font-size: .82rem; line-height: 1.3; }
.trade-screen-panel > header p { margin: 3px 0 0; color: var(--screen-muted); font-size: .62rem; }
.trade-screen-panel > header > svg { width: 18px; height: 18px; color: #71817b; }
.trade-trend-panel { grid-column: 1; grid-row: 1; }
.trade-status-panel { grid-column: 2; grid-row: 1; }
.trade-ranking-panel { grid-column: 2; grid-row: 2; }
.trade-orders-panel { grid-column: 1; grid-row: 2; }
.trade-legend { gap: 12px; color: var(--screen-muted); font-size: .62rem; }
.trade-legend span::before { display: inline-block; width: 8px; height: 8px; margin-right: 5px; border-radius: 2px; content: ''; }
.trade-legend .amount::before { background: var(--screen-green); }
.trade-legend .orders::before { background: var(--screen-gold); }
.trade-chart-wrap { position: relative; width: 100%; height: calc(100% - 54px); min-height: 220px; padding: 8px 12px 10px; }
.trade-chart-wrap canvas { display: block; width: 100%; height: 100%; }
.trade-chart-tooltip { position: absolute; z-index: 2; min-width: 112px; padding: 7px 9px; pointer-events: none; color: #eaf2ef; font-size: .64rem; line-height: 1.6; border: 1px solid #405049; border-radius: 4px; background: #0d1211; box-shadow: 0 7px 18px rgba(0,0,0,.24); }

.trade-status-list, .trade-ranking-list { height: calc(100% - 54px); overflow-y: auto; scrollbar-width: thin; scrollbar-color: #46534e transparent; }
.trade-status-row { padding: 10px 14px; border-bottom: 1px solid #232c29; }
.trade-status-row:last-child { border-bottom: 0; }
.trade-status-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: .68rem; }
.trade-status-head span { color: #bcc7c3; }
.trade-status-head strong { color: #fff; font-variant-numeric: tabular-nums; }
.trade-status-track { height: 4px; margin-top: 7px; overflow: hidden; border-radius: 2px; background: #2b3531; }
.trade-status-track span { display: block; height: 100%; border-radius: inherit; background: var(--screen-green); transition: width .35s ease; }
.trade-status-row:nth-child(2) .trade-status-track span { background: var(--screen-gold); }
.trade-status-row:nth-child(3) .trade-status-track span { background: var(--screen-cyan); }
.trade-status-row:nth-child(4) .trade-status-track span { background: var(--screen-coral); }
.trade-empty { display: grid; place-items: center; height: 100%; min-height: 120px; padding: 20px; color: var(--screen-muted); font-size: .72rem; text-align: center; }

.trade-ranking-item { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 8px; min-height: 50px; padding: 7px 12px; border-bottom: 1px solid #232c29; }
.trade-ranking-item:last-child { border-bottom: 0; }
.trade-rank-number { display: grid; place-items: center; width: 24px; height: 24px; color: #82918b; font-size: .66rem; font-weight: 800; border-radius: 4px; background: #242d2a; }
.trade-ranking-item:nth-child(1) .trade-rank-number { color: #17120a; background: var(--screen-gold); }
.trade-ranking-item:nth-child(2) .trade-rank-number { color: #14201e; background: #9ec7bd; }
.trade-ranking-item:nth-child(3) .trade-rank-number { color: #21150f; background: #cf8f6b; }
.trade-rank-copy { min-width: 0; }
.trade-rank-copy strong, .trade-rank-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trade-rank-copy strong { color: #e4ece9; font-size: .68rem; }
.trade-rank-copy small { margin-top: 3px; color: var(--screen-muted); font-size: .58rem; }
.trade-rank-value { text-align: right; }
.trade-rank-value strong, .trade-rank-value small { display: block; white-space: nowrap; }
.trade-rank-value strong { color: var(--screen-gold); font-size: .7rem; font-variant-numeric: tabular-nums; }
.trade-rank-value small { margin-top: 2px; color: var(--screen-muted); font-size: .56rem; }

.trade-update-countdown { color: var(--screen-muted); font-size: .61rem; }
.trade-update-countdown b { color: var(--screen-green); font-variant-numeric: tabular-nums; }
.trade-order-table-head, .trade-order-row { display: grid; grid-template-columns: minmax(150px, 1.25fr) minmax(180px, 1.6fr) 100px 128px; align-items: center; gap: 12px; }
.trade-order-table-head { min-height: 32px; padding: 0 14px; color: #71817b; font-size: .58rem; border-bottom: 1px solid #232c29; background: #141a18; }
.trade-order-stream { height: calc(100% - 86px); min-height: 0; overflow: hidden; }
.trade-order-row { min-height: 52px; padding: 7px 14px; border-bottom: 1px solid #232c29; transition: transform .25s ease, opacity .25s ease; }
.trade-order-row > span { min-width: 0; }
.trade-order-row strong, .trade-order-row small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trade-order-row strong { color: #dfe9e5; font-size: .67rem; }
.trade-order-row small { margin-top: 3px; color: var(--screen-muted); font-size: .57rem; }
.trade-order-amount { color: var(--screen-gold) !important; font-size: .73rem !important; font-variant-numeric: tabular-nums; text-align: right; }
.trade-order-time { color: #a7b5b0; font-size: .61rem; font-variant-numeric: tabular-nums; text-align: right; }

.trade-screen-footer { flex-wrap: wrap; gap: 10px 20px; min-height: 36px; padding: 10px 2px 0; color: var(--screen-muted); font-size: .61rem; }
.trade-screen-footer > div { display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.trade-screen-footer strong { color: #d8e2de; font-weight: 650; }
.trade-runtime-dot { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; }
.trade-runtime-dot.online { background: var(--screen-green); }
.trade-runtime-dot.running { background: var(--screen-gold); }
.trade-runtime-dot.failed { background: var(--screen-coral); }

@media (max-width: 1199.98px) {
  .trade-kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .trade-screen-grid { grid-template-columns: minmax(0, 3fr) minmax(260px, 2fr); }
}
@media (max-width: 767.98px) {
  .trade-screen { padding: 10px; }
  .trade-screen-header { align-items: flex-start; }
  .trade-screen-brand p, .trade-live { display: none; }
  .trade-screen-head-actions { gap: 6px; }
  .trade-screen-head-actions time { display: none; }
  .trade-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trade-kpi { min-height: 72px; padding: 10px; }
  .trade-screen-grid { display: flex; flex-direction: column; min-height: 0; }
  .trade-screen-panel { flex: 0 0 auto; }
  .trade-trend-panel { height: 330px; }
  .trade-status-panel, .trade-ranking-panel { height: 340px; }
  .trade-orders-panel { height: 430px; }
  .trade-order-table-head { display: none; }
  .trade-order-stream { height: calc(100% - 54px); overflow-y: auto; }
  .trade-order-row { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; }
  .trade-order-row > span:nth-child(2) { grid-column: 1; }
  .trade-order-row > span:nth-child(3) { grid-column: 2; grid-row: 1; }
  .trade-order-row > span:nth-child(4) { grid-column: 2; grid-row: 2; }
  .trade-screen-footer { align-items: flex-start; }
  .trade-screen-footer .ms-auto { margin-left: 0 !important; }
}
@media (max-width: 399.98px) {
  .trade-screen-brand h1 { max-width: 150px; font-size: .98rem; }
  .trade-screen-mark { width: 36px; height: 36px; flex-basis: 36px; }
  .trade-kpi-icon { display: none; }
  .trade-kpi strong { font-size: .98rem; }
}

.profile-facts { display: grid; gap: 0; }
.profile-facts-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--xy-border); border-radius: 6px; }
.profile-facts > div { display: grid; grid-template-columns: minmax(100px, 38%) minmax(0, 1fr); gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--xy-border); }
.profile-facts > div:last-child { border-bottom: 0; }
.profile-facts-grid > div { display: block; min-height: 74px; padding: 12px; border-right: 1px solid var(--xy-border); border-bottom: 1px solid var(--xy-border); }
.profile-facts-grid > div:nth-child(4n) { border-right: 0; }
.profile-facts-grid > div:nth-last-child(-n + 4) { border-bottom: 0; }
.profile-facts dt { color: var(--xy-muted); font-size: .72rem; font-weight: 500; }
.profile-facts dd { min-width: 0; margin: 0; overflow-wrap: anywhere; color: var(--xy-text); font-size: .82rem; font-weight: 650; }
.profile-facts-grid dd { margin-top: 7px; }
.admin-password-reset-form { max-width: 520px; }
@media (min-width: 992px) { .border-start-lg { border-left: 1px solid var(--xy-border); } }
@media (max-width: 991.98px) {
  .profile-facts-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .profile-facts-grid > div:nth-child(4n) { border-right: 1px solid var(--xy-border); }
  .profile-facts-grid > div:nth-child(2n) { border-right: 0; }
  .profile-facts-grid > div:nth-last-child(-n + 4) { border-bottom: 1px solid var(--xy-border); }
  .profile-facts-grid > div:nth-last-child(-n + 2) { border-bottom: 0; }
}
@media (max-width: 575.98px) {
  .profile-facts-grid { grid-template-columns: minmax(0, 1fr); }
  .profile-facts-grid > div { border-right: 0 !important; border-bottom: 1px solid var(--xy-border) !important; }
  .profile-facts-grid > div:last-child { border-bottom: 0 !important; }
}

/* User-selectable day/night theme. Keep the palette neutral so dense tables and
   the message center remain readable without changing their layout. */
html[data-theme="dark"] {
  color-scheme: dark;
  --xy-ink: #e8eef1;
  --xy-muted: #9aa8b0;
  --xy-line: #34434c;
  --xy-border: #34434c;
  --xy-text: #e8eef1;
  --xy-bg: #11181d;
  --xy-panel: #1a2329;
  --xy-primary: #55c6ba;
  --xy-primary-dark: #3da99f;
  --xy-sidebar: #0e1519;
  --bs-body-bg: #11181d;
  --bs-body-color: #e8eef1;
  --bs-emphasis-color: #f7fafb;
  --bs-secondary-color: #9aa8b0;
  --bs-tertiary-bg: #202b32;
  --bs-border-color: #34434c;
  --bs-link-color: #73d6cc;
  --bs-link-hover-color: #9be5de;
}
html[data-theme="dark"] body { background: var(--xy-bg); color: var(--xy-ink); }
html[data-theme="dark"] a { color: #73d6cc; }
html[data-theme="dark"] .topbar { background: rgba(20, 28, 34, .96); }
html[data-theme="dark"] .panel,
html[data-theme="dark"] .metric-card,
html[data-theme="dark"] .card,
html[data-theme="dark"] .list-group-item { background: var(--xy-panel); border-color: var(--xy-line); color: var(--xy-ink); }
html[data-theme="dark"] .metric-icon { background: #203a3b; color: #8ce2d9; }
html[data-theme="dark"] .metric-icon.success { background: #1d3a30; color: #72d7a6; }
html[data-theme="dark"] .metric-icon.warning,
html[data-theme="dark"] .health-item.attention .health-icon { background: #40351f; color: #f1c56b; }
html[data-theme="dark"] .metric-icon.danger { background: #432a2d; color: #f18d89; }
html[data-theme="dark"] .metric-icon.gold { background: #40351f; color: #f1c56b; }
html[data-theme="dark"] .metric-icon.neutral,
html[data-theme="dark"] .health-icon { background: #27343b; color: #b8c6cc; }
html[data-theme="dark"] .panel-header,
html[data-theme="dark"] .modal-header,
html[data-theme="dark"] .modal-footer { border-color: var(--xy-line); }
html[data-theme="dark"] .table { --bs-table-color: var(--xy-ink); --bs-table-bg: transparent; --bs-table-border-color: #34434c; }
html[data-theme="dark"] .table thead th { color: #aebbc2; background: #202b32; border-color: var(--xy-line); }
html[data-theme="dark"] .table > :not(caption) > * > * { border-color: #34434c; }
html[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * { --bs-table-accent-bg: rgba(255,255,255,.025); color: var(--xy-ink); }
html[data-theme="dark"] .table-hover > tbody > tr:hover > * { --bs-table-accent-bg: rgba(115,214,204,.07); color: var(--xy-ink); }
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select,
html[data-theme="dark"] .input-group-text { color: var(--xy-ink); border-color: #465761; background-color: #202b32; }
html[data-theme="dark"] .form-control::placeholder { color: #82919a; }
html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] .form-select:focus { border-color: #55c6ba; background-color: #202b32; box-shadow: 0 0 0 .2rem rgba(85,198,186,.18); }
html[data-theme="dark"] .form-select option { color: var(--xy-ink); background: #202b32; }
html[data-theme="dark"] .btn-light,
html[data-theme="dark"] .btn-outline-light { color: #e8eef1; border-color: #465761; background: #202b32; }
html[data-theme="dark"] .btn-light:hover,
html[data-theme="dark"] .btn-outline-light:hover { color: #fff; border-color: #60727c; background: #2b3941; }
html[data-theme="dark"] .btn-outline-secondary { color: #c1cdd2; border-color: #53636d; }
html[data-theme="dark"] .btn-outline-secondary:hover { color: #fff; border-color: #71858f; background: #2b3941; }
html[data-theme="dark"] .dropdown-menu,
html[data-theme="dark"] .dropdown-item-text,
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .popover,
html[data-theme="dark"] .offcanvas,
html[data-theme="dark"] .toast { color: var(--xy-ink); border-color: var(--xy-line); background: #1a2329; }
html[data-theme="dark"] .dropdown-item { color: #dce5e8; }
html[data-theme="dark"] .dropdown-item:hover,
html[data-theme="dark"] .dropdown-item:focus { color: #fff; background: #2b3941; }
html[data-theme="dark"] .dropdown-divider { border-color: var(--xy-line); }
html[data-theme="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(1.8); }
html[data-theme="dark"] .bg-white,
html[data-theme="dark"] .bg-light,
html[data-theme="dark"] .text-bg-light { color: #e8eef1 !important; background-color: #202b32 !important; }
html[data-theme="dark"] .text-dark { color: #e8eef1 !important; }
html[data-theme="dark"] .text-secondary { color: #9aa8b0 !important; }
html[data-theme="dark"] .filter-bar,
html[data-theme="dark"] .ticket-header,
html[data-theme="dark"] .settings-actions { border-color: var(--xy-line); background: #202b32; }
html[data-theme="dark"] .compact-list-item,
html[data-theme="dark"] .announcement-item,
html[data-theme="dark"] .activity-row { border-color: var(--xy-line); }
html[data-theme="dark"] .compact-list-item:hover { background: #25333b; }
html[data-theme="dark"] .announcement-panel-header { background: #202b32; }
html[data-theme="dark"] .announcement-item { background: #1a2329; }
html[data-theme="dark"] .announcement-marker { color: #a9c0cc; background: #27343b; }
html[data-theme="dark"] .announcement-item.level-success .announcement-marker { color: #92d2bd; background: #20352e; }
html[data-theme="dark"] .announcement-item.level-warning .announcement-marker { color: #f1c56b; background: #40351f; }
html[data-theme="dark"] .announcement-item.level-danger .announcement-marker { color: #f0aaa3; background: #3e2928; }
html[data-theme="dark"] .announcement-title { color: #e8eef1; }
html[data-theme="dark"] .announcement-body { color: #c1cdd2; }
html[data-theme="dark"] .announcement-total { color: #9bd3c2; border-color: #3e6b5e; background: #20352e; }
html[data-theme="dark"] .announcement-empty-icon { color: #9bd3c2; background: #203a3b; }
html[data-theme="dark"] .status-pill { color: #c3cfd4; border-color: #465761; background: #253139; }
html[data-theme="dark"] .status-pill.active,
html[data-theme="dark"] .status-pill.online,
html[data-theme="dark"] .status-pill.success,
html[data-theme="dark"] .status-pill.paid,
html[data-theme="dark"] .status-pill.published,
html[data-theme="dark"] .status-pill.resolved { color: #8ce0b5; border-color: #2e6651; background: #1d3a30; }
html[data-theme="dark"] .status-pill.pending,
html[data-theme="dark"] .status-pill.created,
html[data-theme="dark"] .status-pill.open,
html[data-theme="dark"] .status-pill.in_progress,
html[data-theme="dark"] .status-pill.waiting_customer,
html[data-theme="dark"] .status-pill.queued,
html[data-theme="dark"] .status-pill.retry_wait,
html[data-theme="dark"] .status-pill.running,
html[data-theme="dark"] .status-pill.captcha_required,
html[data-theme="dark"] .status-pill.draft { color: #f1c56b; border-color: #6c572e; background: #40351f; }
html[data-theme="dark"] .status-pill.failed,
html[data-theme="dark"] .status-pill.error,
html[data-theme="dark"] .status-pill.risk_blocked,
html[data-theme="dark"] .status-pill.suspended,
html[data-theme="dark"] .status-pill.locked,
html[data-theme="dark"] .status-pill.disabled { color: #f18d89; border-color: #754247; background: #432a2d; }
html[data-theme="dark"] .alert { --bs-alert-color: #dce5e8; --bs-alert-border-color: #465761; --bs-alert-bg: #202b32; }
html[data-theme="dark"] .alert-success { --bs-alert-color: #9ce4bd; --bs-alert-border-color: #2e6651; --bs-alert-bg: #1d3a30; }
html[data-theme="dark"] .alert-warning { --bs-alert-color: #f1c56b; --bs-alert-border-color: #6c572e; --bs-alert-bg: #40351f; }
html[data-theme="dark"] .alert-danger { --bs-alert-color: #f18d89; --bs-alert-border-color: #754247; --bs-alert-bg: #432a2d; }
html[data-theme="dark"] .auth-shell { background: #11181d; }
html[data-theme="dark"] .auth-panel { border-color: var(--xy-line); background: #1a2329; }
html[data-theme="dark"] .auth-context { background: linear-gradient(150deg, #0c1519 0%, #17262b 50%, #0c5c57 100%); }
html[data-theme="dark"] .qr-box { background: #fff; }
.theme-toggle { transition: color .15s ease, background-color .15s ease, border-color .15s ease; }
.theme-toggle-auth { position: fixed; top: 1rem; right: 1rem; z-index: 1050; }

/* Message center surfaces use a deliberately dense palette, so override the
   hard-coded light surfaces as a group when night mode is active. */
html[data-theme="dark"] .chat-workspace,
html[data-theme="dark"] .chat-sidebar-pane,
html[data-theme="dark"] .chat-conversation-pane,
html[data-theme="dark"] .chat-empty-conversation,
html[data-theme="dark"] .chat-conversation-header,
html[data-theme="dark"] .chat-composer,
html[data-theme="dark"] .chat-buyer-pane,
html[data-theme="dark"] .chat-stat-strip,
html[data-theme="dark"] .chat-account-switcher,
html[data-theme="dark"] .chat-list-pagination { background: #1a2329; border-color: var(--xy-line); }
html[data-theme="dark"] .chat-empty-conversation-illustration { color: #62727a; }
html[data-theme="dark"] .chat-empty-conversation-panel h2 { color: #e8eef1; }
html[data-theme="dark"] .chat-empty-conversation-panel p { color: #9aa8b0; }
html[data-theme="dark"] .chat-list-toolbar,
html[data-theme="dark"] .chat-product-context { border-color: var(--xy-line); background: #1a2329; }
html[data-theme="dark"] .chat-list-title,
html[data-theme="dark"] .chat-peer-name,
html[data-theme="dark"] .chat-peer-name strong,
html[data-theme="dark"] .chat-product-option,
html[data-theme="dark"] .chat-quick-reply,
html[data-theme="dark"] .chat-location-card,
html[data-theme="dark"] .chat-buyer-tab.is-active { color: #e8eef1; }
html[data-theme="dark"] .chat-stat-item,
html[data-theme="dark"] .conversation-item,
html[data-theme="dark"] .chat-buyer-tabs { border-color: var(--xy-line); }
html[data-theme="dark"] .conversation-item { color: #dce5e8; background: #1a2329; }
html[data-theme="dark"] .conversation-item:hover { color: #fff; background: #25333b; }
html[data-theme="dark"] .conversation-item.active { color: #fff; background: #203a3b; }
html[data-theme="dark"] .conversation-name-row strong,
html[data-theme="dark"] .chat-stat-item strong { color: #e8eef1; }
html[data-theme="dark"] .conversation-preview,
html[data-theme="dark"] .conversation-time,
html[data-theme="dark"] .chat-stat-item span,
html[data-theme="dark"] .chat-peer-copy small,
html[data-theme="dark"] .chat-active-product-copy small,
html[data-theme="dark"] .chat-active-product-copy strong { color: #9aa8b0; }
html[data-theme="dark"] .conversation-unread { border-color: #1a2329; }
html[data-theme="dark"] .chat-search .form-control { background: #202b32; color: #e8eef1; }
html[data-theme="dark"] .message-stream { background: #151e23; }
html[data-theme="dark"] .message { color: #e8eef1; border-color: #34434c; background: #253139; }
html[data-theme="dark"] .message.outbound { color: #10201f; background: var(--xy-primary); }
html[data-theme="dark"] .message.system { color: #b7c3c9; background: #26343b; }
html[data-theme="dark"] .chat-compose-form,
html[data-theme="dark"] .chat-tool-popover,
html[data-theme="dark"] .chat-tool-panel-head { border-color: #465761; background: #1a2329; }
html[data-theme="dark"] .chat-compose-form textarea { color: #e8eef1; }
html[data-theme="dark"] .chat-tool-button { color: #c1cdd2; }
html[data-theme="dark"] .chat-tool-button:hover,
html[data-theme="dark"] .chat-tool-button[aria-expanded="true"],
html[data-theme="dark"] .chat-product-option:hover,
html[data-theme="dark"] .chat-quick-reply:hover { color: #fff; background: #2b3941; }
html[data-theme="dark"] .chat-product-option.is-selected { border-color: #3d7770; background: #203a3b; }
html[data-theme="dark"] .chat-quick-reply,
html[data-theme="dark"] .chat-product-option,
html[data-theme="dark"] .chat-media-preview { border-color: var(--xy-line); }
html[data-theme="dark"] .chat-media-preview { background: #202b32; }
html[data-theme="dark"] .chat-account-alert { color: #f1c56b; border-color: #6c572e; background: #40351f; }
html[data-theme="dark"] .chat-buyer-stats > div,
html[data-theme="dark"] .chat-buyer-tags span { color: #c1cdd2; border-color: #465761; background: #202b32; }
html[data-theme="dark"] .chat-buyer-stats-head strong { color: #d9e2e6; }
html[data-theme="dark"] .chat-buyer-stats-head small { color: #93a2a9; }
html[data-theme="dark"] .chat-order-detail-drawer { color: #dce5e8; border-color: #465761; background: #1a2329; }
html[data-theme="dark"] .chat-order-detail-header,
html[data-theme="dark"] .chat-order-detail-summary,
html[data-theme="dark"] .chat-order-detail-tabs,
html[data-theme="dark"] .chat-order-detail-list > div { border-color: #3c4b53; }
html[data-theme="dark"] .chat-order-detail-header h2,
html[data-theme="dark"] .chat-order-detail-summary > span:nth-child(2) > strong,
html[data-theme="dark"] .chat-order-detail-tabs button.is-active,
html[data-theme="dark"] .chat-order-detail-panel h3 { color: #e8eef1; }
html[data-theme="dark"] .chat-order-detail-summary,
html[data-theme="dark"] .chat-order-detail-empty,
html[data-theme="dark"] .chat-order-review-content blockquote,
html[data-theme="dark"] .chat-order-upstream-entry { background: #202b32; }
html[data-theme="dark"] .chat-order-detail-list dd { color: #cbd5da; }
html[data-theme="dark"] .chat-order-detail-notice { color: #f1c56b; border-color: #6c572e; background: #40351f; }
html[data-theme="dark"] .chat-order-upstream-entry { color: #dce5e8; border-color: #3c4b53; }
html[data-theme="dark"] .chat-order-upstream-entry small { color: #9aa8b0; }
html[data-theme="dark"] .chat-buyer-sync-status { color: #b7c3c8; border-color: #596a72; background: #202b32; }
html[data-theme="dark"] .chat-buyer-sync-status strong { color: #dce5e8; }
html[data-theme="dark"] .chat-buyer-sync-status[data-state="loading"],
html[data-theme="dark"] .chat-buyer-sync-status[data-state="warning"] { color: #e8ca7b; border-color: #8b702c; background: #3c331f; }
html[data-theme="dark"] .chat-buyer-sync-status[data-state="error"] { color: #f0aaa3; border-color: #8e4a43; background: #3e2928; }
html[data-theme="dark"] .chat-buyer-sync-status[data-state="success"] { color: #92d2bd; border-color: #3e7b67; background: #20352e; }
html[data-theme="dark"] .chat-buyer-endpoint-status { border-color: #3c4b53; background: #202b32; }
html[data-theme="dark"] .chat-buyer-endpoint-status strong { color: #dce5e8; }
html[data-theme="dark"] .chat-buyer-endpoint-status small { color: #96a5ac; }
html[data-theme="dark"] .chat-buyer-endpoint-status[data-state="success"] { border-color: #3e7b67; background: #20352e; }
html[data-theme="dark"] .chat-buyer-endpoint-status[data-state="partial"],
html[data-theme="dark"] .chat-buyer-endpoint-status[data-state="cached"],
html[data-theme="dark"] .chat-buyer-endpoint-status[data-state="skipped"] { border-color: #8b702c; background: #3c331f; }
html[data-theme="dark"] .chat-buyer-endpoint-status[data-state="error"] { border-color: #8e4a43; background: #3e2928; }
html[data-theme="dark"] .chat-buyer-product-card { border-color: #3c4b53; background: #202b32; }
html[data-theme="dark"] .chat-buyer-product-card:hover { border-color: #53656f; background: #253139; }
html[data-theme="dark"] .chat-buyer-product-tags em { color: #9bd3c2; border-color: #3e6b5e; background: #20352e; }
html[data-theme="dark"] .chat-buyer-note { border-color: #3c4b53; background: #202b32; }
html[data-theme="dark"] .chat-buyer-note strong { color: #c9d4d9; }
html[data-theme="dark"] .chat-quick-reply-empty { color: #9aa8b0; }
html[data-theme="dark"] .chat-quick-reply-empty-illustration { color: #607079; }
html[data-theme="dark"] .chat-quick-reply-actions button { color: #dce5e8; border-color: #465761; background: #202b32; }
html[data-theme="dark"] .chat-quick-reply-actions button:hover { color: #fff; border-color: #60727c; background: #2b3941; }
html[data-theme="dark"] .chat-quick-reply-actions a { color: #292300; border-color: #ffd900; background: #ffd900; }
html[data-theme="dark"] .review-tabs,
html[data-theme="dark"] .review-status-tabs { border-color: var(--xy-line); }
html[data-theme="dark"] .review-status-tabs a:hover,
html[data-theme="dark"] .review-status-tabs a.is-active { color: #8ce2d9; background: #203a3b; }
html[data-theme="dark"] .review-product-placeholder,
html[data-theme="dark"] .review-avatar { border-color: #465761; background: #27343b; color: #9adbd4; }
html[data-theme="dark"] .review-reply { color: #c1cdd2; border-color: #3d7770; background: #203a3b; }
html[data-theme="dark"] .review-reply > span,
html[data-theme="dark"] .review-tabs a:hover,
html[data-theme="dark"] .review-tabs a.is-active { color: #8ce2d9; }
html[data-theme="dark"] .review-order-info code,
html[data-theme="dark"] .review-text,
html[data-theme="dark"] .review-account-name { color: var(--xy-ink); }

/* Platform-wide read-only message center. */
.admin-message-workspace { display: grid; grid-template-columns: minmax(210px, 0.75fr) minmax(280px, 1fr) minmax(360px, 1.8fr); gap: 1rem; min-width: 0; }
.admin-message-workspace > .panel { min-width: 0; min-height: 620px; overflow: hidden; }
.admin-message-account-list,
.admin-message-conversation-list { max-height: 720px; overflow-y: auto; }
.admin-message-account,
.admin-message-conversation { display: flex; align-items: center; gap: .65rem; min-width: 0; padding: .7rem .8rem; color: var(--xy-ink); text-decoration: none; border-bottom: 1px solid var(--xy-line); transition: background .15s ease, color .15s ease; }
.admin-message-account:hover,
.admin-message-conversation:hover { color: var(--xy-ink); background: var(--xy-bg); }
.admin-message-account.active,
.admin-message-conversation.active { color: var(--xy-ink); background: rgba(23, 143, 132, .1); box-shadow: inset 3px 0 var(--xy-primary); }
.admin-message-avatar { width: 38px; height: 38px; flex: 0 0 38px; object-fit: cover; border-radius: 50%; border: 1px solid var(--xy-line); background: var(--xy-bg); }
.admin-message-avatar.small { width: 30px; height: 30px; flex-basis: 30px; }
.admin-message-avatar.placeholder { display: inline-flex; align-items: center; justify-content: center; color: var(--xy-muted); }
.admin-message-avatar.placeholder svg { width: 18px; height: 18px; }
.admin-message-account-body,
.admin-message-conversation-body { display: grid; gap: .12rem; min-width: 0; flex: 1 1 auto; }
.admin-message-account-body strong,
.admin-message-conversation-body strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .86rem; }
.admin-message-account-body small,
.admin-message-conversation-body small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--xy-muted); font-size: .7rem; }
.admin-message-conversation-meta { display: grid; justify-items: end; gap: .35rem; flex: 0 0 auto; color: var(--xy-muted); font-size: .68rem; }
.admin-message-preview { display: block; overflow: hidden; color: var(--xy-muted); font-size: .76rem; text-overflow: ellipsis; white-space: nowrap; }
.admin-message-detail { display: flex; flex-direction: column; }
.admin-message-detail-header { align-items: center; }
.admin-message-session-meta { display: flex; align-items: center; gap: .55rem; padding: .65rem 1rem; color: var(--xy-muted); border-bottom: 1px solid var(--xy-line); background: var(--xy-bg); font-size: .74rem; }
.admin-message-session-meta > span:not(.ms-auto) { display: grid; gap: .1rem; min-width: 0; }
.admin-message-session-meta strong { color: var(--xy-ink); font-size: .78rem; }
.admin-message-session-meta small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-message-stream { display: flex; flex: 1 1 auto; flex-direction: column; gap: .65rem; min-height: 0; max-height: 610px; padding: 1rem; overflow-y: auto; background: #f7f9fa; }
.admin-message-row { display: flex; max-width: 88%; }
.admin-message-row.inbound { align-self: flex-start; }
.admin-message-row.outbound { align-self: flex-end; }
.admin-message-bubble { min-width: 110px; padding: .55rem .7rem; color: var(--xy-ink); border: 1px solid #e2e7e9; border-radius: 8px; background: #fff; box-shadow: 0 1px 2px rgba(15, 30, 35, .04); }
.admin-message-row.outbound .admin-message-bubble { color: #193332; border-color: #9bd4c6; background: #d9f3eb; }
.admin-message-bubble-meta,
.admin-message-bubble-status { display: flex; justify-content: space-between; gap: .8rem; color: var(--xy-muted); font-size: .66rem; }
.admin-message-content { margin: .35rem 0; overflow-wrap: anywhere; white-space: normal; font-size: .85rem; line-height: 1.5; }
.admin-message-bubble-status { justify-content: flex-start; }
.admin-message-pagination { display: flex; align-items: center; justify-content: center; gap: .75rem; padding: .7rem 1rem; color: var(--xy-muted); border-top: 1px solid var(--xy-line); font-size: .75rem; }
.admin-message-empty { flex: 1 1 auto; }

html[data-theme="dark"] .admin-message-account:hover,
html[data-theme="dark"] .admin-message-conversation:hover { background: #253139; }
html[data-theme="dark"] .admin-message-account.active,
html[data-theme="dark"] .admin-message-conversation.active { background: #203a3b; }
html[data-theme="dark"] .admin-message-session-meta { background: #202b32; }
html[data-theme="dark"] .admin-message-stream { background: #151e23; }
html[data-theme="dark"] .admin-message-bubble { color: #e8eef1; border-color: #465761; background: #253139; }
html[data-theme="dark"] .admin-message-row.outbound .admin-message-bubble { color: #10201f; border-color: #3e7b67; background: #9bd3c2; }

@media (max-width: 1199.98px) {
  .admin-message-workspace { grid-template-columns: minmax(220px, .8fr) minmax(280px, 1fr); }
  .admin-message-detail { grid-column: 1 / -1; min-height: 560px !important; }
}
@media (max-width: 767.98px) {
  .admin-message-workspace { display: flex; flex-direction: column; }
  .admin-message-workspace > .panel { min-height: auto; }
  .admin-message-account-list,
  .admin-message-conversation-list { max-height: 360px; }
  .admin-message-stream { max-height: 520px; }
  .admin-message-filter { flex-direction: column; align-items: stretch; }
  .admin-message-filter > * { width: 100%; }
}