/* xuanly-zalo.css — Connect (Xuân Lý). The tenant's own stylesheet, linked after the kit.
   Holds only (a) components the kit lacks and (b) layout glue for these screens.
   Colour, spacing, radius, type size and shadow come from var(--*) tokens; no colour literal.
   Every class is prefixed xuanly-zalo-; no kit class is restyled. Gaps: KIT_GAPS.md. */

/* 1. Brand mark: an open "C" with the dot of a recording, drawn in the kit's .brand-mark slot. */
.xuanly-zalo-mark { width: 1.375rem; height: 1.375rem; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; }
.xuanly-zalo-mark circle { fill: currentColor; stroke: none; }
.brand-mark > .xuanly-zalo-mark { display: block; }

/* 2. Layout glue */
.xuanly-zalo-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); }
.xuanly-zalo-row-between { justify-content: space-between; }
.xuanly-zalo-row-center { justify-content: center; }
.xuanly-zalo-fit { flex: 0 0 auto; width: 16rem; max-width: 100%; }
.xuanly-zalo-updated { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--muted); white-space: nowrap; }
.xuanly-zalo-narrow { max-width: 46rem; }
.xuanly-zalo-prose { max-width: 62ch; }
.xuanly-zalo-prose p + p, .xuanly-zalo-prose p + ul, .xuanly-zalo-prose ul + p { margin-top: var(--sp-3); }
.xuanly-zalo-prose ul { margin: 0; padding-inline-start: var(--sp-5); }
.xuanly-zalo-prose li + li { margin-top: var(--sp-1); }
.xuanly-zalo-strong { font-weight: 600; color: var(--heading); }
.xuanly-zalo-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-4); }
@container (max-width: 54rem) { .xuanly-zalo-split { grid-template-columns: minmax(0, 1fr); } }
.xuanly-zalo-cq { container-type: inline-size; }
.xuanly-zalo-foot-note { flex: 1 0 100%; margin: 0; } /* a full-width line of rules above the buttons of a .drawer-foot (S8a) */

/* 3-4. Sparklines, the column chart and the donut use the kit's own .spark, .chart-cols and .chart-donut markup, drawn by hand (kit.js is not vendored). */

/* 5. Hội thoại: three columns (list, read-only log, customer) with their own scroll. */
.xuanly-zalo-inbox { display: grid; grid-template-columns: minmax(16rem, 19rem) minmax(24rem, 1fr) minmax(15rem, 18rem); gap: var(--sp-4); height: max(32rem, calc(100dvh - var(--xuanly-zalo-inbox-top, 15.5rem))); }
.xuanly-zalo-col { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
/* position: relative makes the scroller the containing block of the .visually-hidden spans inside it, so they are clipped with the rest and do not stretch the page. */
.xuanly-zalo-scroll { position: relative; flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.xuanly-zalo-col-tools { display: grid; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--panel-border); }
.xuanly-zalo-col-foot { padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--panel-border); background: var(--surface); }

/* 5a. Thread list */
.xuanly-zalo-threads { list-style: none; margin: 0; padding: 0; }
.xuanly-zalo-threads > li + li { border-top: 1px solid var(--panel-border); }
.xuanly-zalo-thread { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--sp-3); align-items: start; padding: var(--sp-3) var(--sp-4); color: var(--text); text-decoration: none; }
.xuanly-zalo-thread:hover { background: var(--surface-hover); }
.xuanly-zalo-thread[aria-current="true"] { background: var(--primary-tint); box-shadow: inset 3px 0 0 var(--primary); }
.xuanly-zalo-thread:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.xuanly-zalo-thread-main { display: grid; gap: 2px; min-width: 0; }
.xuanly-zalo-thread-who, .xuanly-zalo-thread-text { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xuanly-zalo-thread-name { display: block; min-width: 0; overflow-wrap: anywhere; font-weight: 600; color: var(--heading); } /* the customer's name wraps, never cut */
.xuanly-zalo-thread[data-unread] .xuanly-zalo-thread-name { font-weight: 700; }
.xuanly-zalo-thread-who { font-size: var(--fs-xs); color: var(--muted); }
.xuanly-zalo-thread-text { font-size: var(--fs-sm); color: var(--muted); }
.xuanly-zalo-thread[data-unread] .xuanly-zalo-thread-text { color: var(--text); }
.xuanly-zalo-thread-tags { display: flex; flex-wrap: wrap; gap: var(--sp-1); margin-top: var(--sp-1); }
.xuanly-zalo-thread-end { display: flex; flex-direction: column; align-items: flex-end; gap: var(--sp-1); font-size: var(--fs-xs); color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.xuanly-zalo-dot { display: inline-block; flex: none; width: 0.5rem; height: 0.5rem; border-radius: var(--radius-pill); background: var(--primary); }

/* 5b. Read-only log: one time gutter at the start, received at the start, sent at the end. */
.xuanly-zalo-log { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-4) var(--sp-5) var(--sp-5); }
.xuanly-zalo-archive { align-self: center; display: inline-flex; align-items: center; gap: var(--sp-2); padding: var(--sp-1) var(--sp-3); font-size: var(--fs-sm); color: var(--muted); background: var(--surface-2); border: 1px solid var(--panel-border); border-radius: var(--radius-pill); }
.xuanly-zalo-archive svg { color: var(--primary); }
.xuanly-zalo-day { display: flex; align-items: center; gap: var(--sp-3); margin: var(--sp-3) 0 var(--sp-1); font-size: var(--fs-sm); font-weight: 600; color: var(--muted); }
.xuanly-zalo-day::before, .xuanly-zalo-day::after { content: ""; flex: 1 1 auto; border-top: 1px solid var(--panel-border); }
.xuanly-zalo-msg { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); gap: var(--sp-3); align-items: start; }
.xuanly-zalo-msg-time { padding-top: var(--sp-2); font-size: var(--fs-xs); color: var(--muted); text-align: end; font-variant-numeric: tabular-nums; }
.xuanly-zalo-msg-body { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-1); min-width: 0; max-width: min(100%, 32rem); }
.xuanly-zalo-msg[data-dir="out"] .xuanly-zalo-msg-body { align-items: flex-end; margin-inline-start: auto; }
.xuanly-zalo-who { font-size: var(--fs-xs); font-weight: 600; color: var(--muted); }
.xuanly-zalo-bubble { max-width: 100%; padding: var(--sp-2) var(--sp-3); font-size: var(--fs-md); line-height: var(--lh); color: var(--text); background: var(--surface-2); border: 1px solid var(--panel-border); border-radius: var(--radius-lg); overflow-wrap: anywhere; }
.xuanly-zalo-msg[data-dir="out"] .xuanly-zalo-bubble { background: var(--primary-tint); border-color: var(--primary-tint-line); }
.xuanly-zalo-react { display: inline-flex; align-items: center; gap: var(--sp-1); padding: 0 var(--sp-2); font-size: var(--fs-xs); line-height: 1.6; color: var(--text); background: var(--surface); border: 1px solid var(--panel-border); border-radius: var(--radius-pill); }
.xuanly-zalo-photo { display: grid; place-content: center; justify-items: center; gap: var(--sp-1); width: 15rem; max-width: 100%; aspect-ratio: 4 / 3; padding: var(--sp-3); font: inherit; font-size: var(--fs-xs); color: var(--muted); text-align: center; background: var(--sunk); border: 1px solid var(--panel-border); border-radius: var(--radius); cursor: zoom-in; }
.xuanly-zalo-photo svg { width: 2rem; height: 2rem; }
.xuanly-zalo-photo:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.xuanly-zalo-photo-lg { width: 100%; aspect-ratio: 16 / 10; font-size: var(--fs-sm); cursor: default; }
.xuanly-zalo-file { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--sp-3); width: 18rem; max-width: 100%; padding: var(--sp-2) var(--sp-3); background: var(--surface); border: 1px solid var(--panel-border); border-radius: var(--radius); }
.xuanly-zalo-file-type { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; font-size: var(--fs-xs); font-weight: 700; color: var(--primary); background: var(--primary-tint); border-radius: var(--radius-sm); }
.xuanly-zalo-file-name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-sm); font-weight: 600; }
.xuanly-zalo-file-sub { display: block; font-size: var(--fs-xs); color: var(--muted); }
.xuanly-zalo-file[data-state="lost"] .xuanly-zalo-file-type { color: var(--muted); background: var(--sunk); }
.xuanly-zalo-sticker { font-size: 2.75rem; line-height: 1; }
.xuanly-zalo-call { display: inline-flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); font-size: var(--fs-sm); color: var(--text); background: var(--surface); border: 1px dashed var(--field-border); border-radius: var(--radius); }
.xuanly-zalo-call[data-missed] { color: var(--danger); border-color: var(--danger); }
.xuanly-zalo-gap { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); font-size: var(--fs-sm); color: var(--warn); border: 1px dashed var(--warn-line); border-radius: var(--radius); background: repeating-linear-gradient(-45deg, var(--warn-bg) 0 8px, var(--surface) 8px 16px); }
.xuanly-zalo-gap strong { color: var(--text); font-weight: 600; }

/* 6. QR panel for linking a Zalo account (S10). The code itself is a drawing of the listener's image. */
.xuanly-zalo-link { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-7); align-items: start; }
.xuanly-zalo-qr { position: relative; width: 17rem; aspect-ratio: 1; padding: var(--sp-3); color: var(--heading); background: var(--surface); border: 1px solid var(--panel-border); border-radius: var(--radius-lg); }
.xuanly-zalo-qr-code { display: block; width: 100%; height: 100%; fill: currentColor; shape-rendering: crispEdges; }
.xuanly-zalo-qr[data-state="off"] .xuanly-zalo-qr-code { opacity: 0.12; }
.xuanly-zalo-qr-over { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: var(--sp-2); padding: var(--sp-4); text-align: center; font-size: var(--fs-sm); color: var(--text); }
.xuanly-zalo-qr-over svg { width: 2rem; height: 2rem; color: var(--muted); }
.xuanly-zalo-qr-side { display: grid; gap: var(--sp-3); justify-items: stretch; width: 17rem; }
@container (max-width: 44rem) { .xuanly-zalo-link { grid-template-columns: minmax(0, 1fr); } .xuanly-zalo-qr, .xuanly-zalo-qr-side { width: min(17rem, 100%); } }
.xuanly-zalo-steps { margin: 0; padding-inline-start: var(--sp-5); display: grid; gap: var(--sp-3); }
.xuanly-zalo-steps li::marker { font-weight: 700; color: var(--primary); }

/* 7. Bell panel rows inside .menu.menu-wide (the office look has no notification centre). */
.xuanly-zalo-bell-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--sp-3); align-items: start; }
.xuanly-zalo-bell-text { display: grid; gap: 2px; }
.xuanly-zalo-bell-time { font-size: var(--fs-xs); color: var(--muted); }
.xuanly-zalo-bell-item .xuanly-zalo-dot { margin-top: var(--sp-2); }
.xuanly-zalo-bell-read { visibility: hidden; }

/* 8. Phone frame glue (app look) */
.xuanly-zalo-phone-log .xuanly-zalo-log { padding-inline: 0; }
.xuanly-zalo-phone-foot { position: sticky; bottom: 0; padding: var(--sp-3) 0; background: var(--bg); }
@media (max-width: 40rem) {
  .xuanly-zalo-msg { grid-template-columns: 2.5rem minmax(0, 1fr); gap: var(--sp-2); }
  .xuanly-zalo-msg-body { max-width: 100%; }
  .xuanly-zalo-photo { width: 13rem; }
  .xuanly-zalo-file { width: 100%; }
}