/* gemcare dashboard — LAYOUT and the few pieces the GemBoss kit has no primitive for.
*
* Colours, type, radii, shadows and the shared primitives (.ui-btn, .ui-card, .ui-tabs, .ui-table,
* .ui-empty, .ui-textarea) come from gemboss-ui.css, which inbox.html loads FIRST. That
* file is generated by gemboss and vendored (scripts/gemboss-ui.ts); never edit it, and never restyle
* a kit class here — one owner per component. Every value below is a --gemboss-* / --ui-* token or on
* the gemboss spacing/radius scale; `npm run ui:gates` holds both.
*/
:root {
/* The kit reads --ui-* per surface. gemcare is a working tool used on phones as much as laptops, so
every kit button is a 44px target under every pointer, not only a coarse one (fleet §9.1). */
--ui-control-h: 44px;
}
html, body { height: 100%; margin: 0; }
body {
font-family: var(--gemboss-serif);
font-size: var(--gemboss-fs-body);
line-height: 1.45;
color: var(--gemboss-text);
background: var(--gemboss-canvas);
}
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; color: inherit; }
/* Not textarea: the kit's .ui-textarea owns its focus state (border in --ui-accent); a ring on top drew a double border. */
button:focus-visible, select:focus-visible, input:focus-visible, summary:focus-visible {
outline: 2px solid var(--ui-focus); outline-offset: 2px;
}
/* Inputs and selects: the kit's .ui-select is 36px and it has no text input, so gemcare keeps one field style. */
.field {
min-height: 44px; padding: 0 12px; max-width: 100%;
border: 1px solid var(--ui-border); border-radius: var(--ui-radius-md);
background: var(--ui-surface); color: var(--ui-text);
}
.field:hover { border-color: var(--ui-text-muted); }
.field:focus-visible { outline: none; border-color: var(--ui-accent); box-shadow: 0 0 0 1px var(--ui-accent); }
.link {
background: none; border: 0; padding: 0; min-height: 24px; cursor: pointer;
color: var(--ui-text-muted); text-decoration: underline;
}
.link:hover { color: var(--ui-text); }
.form-error { color: var(--gemboss-danger); margin: 0; font-size: var(--gemboss-fs-caption); }
.muted { color: var(--ui-text-muted); margin: 4px 0 0; font-size: var(--gemboss-fs-caption); }
.brand { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: var(--gemboss-fs-body-lg); letter-spacing: -.01em; color: var(--gemboss-text-strong); }
/* Dấu hiệu GemBoss thật (SVG vendored). `display: block` chứ không để mặc định inline: một ![]()
inline ngồi trên đường cơ sở chữ và kéo theo 4px khoảng trắng dưới đáy — ở rail 64px, 4px đó
đủ để hàng icon đầu tiên lệch khỏi lưới. Bo góc do CHÍNH file SVG vẽ (rect rx=7), không bo
lại ở đây: bo hai lần thì góc gặm vào nét vẽ. */
.brand-mark { display: block; width: 28px; height: 28px; }
/* ── Login ──
Màn đăng nhập là `.gb-auth` của gemboss-ui.css (auth.css): khung, thẻ, bậc co theo chiều cao, cột
thương hiệu từ 900×520, lớp tối. Ở đây CHỈ còn phần của gemcare, không đè luật nào của gói:
(1) cột XANH LÁ bằng token `--gb-panel-*`. `#login` (1,1,0) thắng cả khối tối của auth.css
(`:root:not([data-theme="light"]) .gb-auth`), nên cột giữ màu xanh ở cả hai chế độ.
Màu từ `--gemboss-success` #007f5f, đậm dần theo đúng sắc đó để chữ trắng qua AA mọi chỗ.
(2) dấu ngoặc kép lớn sau câu trích, vẽ bằng ::before để trình đọc màn hình không đọc dấu câu;
(3) nút sang Help centre.
Viên gem trong thẻ là `.gb-auth-mark img` của gói (gemboss #3497), không cỡ riêng ở đây: `.brand-mark`
bên trên vẫn chỉ là 28px của thanh rail. */
#login.gb-auth {
--gb-panel-bg:
radial-gradient(880px 620px at 22% 8%, rgba(255, 255, 255, .16), transparent 62%),
linear-gradient(152deg, #00795a 0%, #045c46 52%, #063f32 100%);
--gb-panel-ink: #ffffff;
--gb-panel-muted: rgba(255, 255, 255, .78);
--gb-panel-eyebrow: rgba(255, 255, 255, .8);
}
.care-quote { position: relative; }
.care-quote::before { content: '\201C'; position: absolute; top: -.36em; left: -.34em;
font-size: 3.2em; line-height: 1; color: rgba(255, 255, 255, .13); pointer-events: none; }
.care-panel-cta { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 32px;
padding: 0 20px; border-radius: var(--gemboss-radius-sm); background: #ffffff; color: #063f32;
font-size: var(--gemboss-fs-body); font-weight: 600; text-decoration: none;
transition: transform .15s ease; }
.care-panel-cta:hover { transform: translateY(-1px); }
.care-panel-cta:focus-visible { outline: 2px solid #ffffff; outline-offset: 3px; }
/* ── Layout ── */
/* Cột 1 là một RAIL BIỂU TƯỢNG 64px, kiểu Intercom: các màn hình nằm đó, còn bộ lọc của hộp thư nằm ở
đầu danh sách. Cột phải rộng hơn trước (320px) vì nay nó mang hai tab. */
.app { height: 100%; display: grid; grid-template-columns: 64px 340px minmax(0, 1fr) var(--details-w, 320px); }
/* Chưa chọn hội thoại ⇒ rãnh cột phải phải bằng 0, chứ không phải "ẩn phần tử đi".
*
* `#details` vào trang với `hidden`, tức `display: none` — nhưng rãnh 320px của nó VẪN nằm đó. Ở 1280
* lúc vừa đăng nhập đó là 320px trắng trơn ở mép phải, và "Select a conversation" thì căn giữa một
* khung lệch hẳn sang trái. Mọi phép đo bằng số vẫn xanh (không tràn ngang, target 44px, 0 pageerror);
* chỉ một tấm ảnh chụp production mới lộ. Đây đúng là cái bẫy đã ghi cho khổ ≤900 ở cuối file — tôi vá
* nó ở đó rồi bỏ sót chính nó ở đây.
*
* Sửa bằng BIẾN, không bằng một luật `grid-template-columns` thứ hai: một luật thứ hai sẽ phải được
* ghi đè lại trong cả hai media query bên dưới (chúng đặt `.app`, độ đặc hiệu thấp hơn `.app:not(…)`,
* nên sẽ thua và cột phải quay lại ở khổ hẹp — đúng lỗi vừa sửa xong). Biến thì không dự vào cuộc
* tranh độ đặc hiệu nào cả. */
.app:not([data-open]) { --details-w: 0px; }
.rail {
background: var(--gemboss-rail-bg); border-right: 1px solid var(--gemboss-divider);
display: flex; flex-direction: column; align-items: center; padding: 12px 0; gap: 12px; min-height: 0;
}
.rail .brand { padding: 0; }
.rail-nav { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
/* Mỗi nút là một ô 44px — ngưỡng điều khiển của §9.1 — và mang nhãn chữ hiện khi rê chuột/focus.
Nhãn là một phần tử thật, không phải `title`: `title` không hiện khi đi bằng bàn phím. */
.rail-btn {
position: relative; width: 44px; height: 44px; display: grid; place-items: center;
border: 0; border-radius: var(--gemboss-radius-md); background: none; color: var(--gemboss-text-muted); cursor: pointer;
}
.rail-btn:hover { background: var(--gemboss-hover); color: var(--gemboss-text); }
.rail-btn[aria-current="true"] { background: var(--gemboss-active-bg); color: var(--gemboss-active-fg); }
/* `display: none`, KHÔNG phải `opacity: 0`.
*
* Một nhãn trong suốt vẫn CHIẾM CHỖ: nó nằm ở `left: calc(100% + 8px)` nên thò ra ngoài mép phải và
* làm cả trang cuộn ngang ở khổ hẹp — đo 23/09, `#duty-tip` đẩy `scrollWidth` lên 351 ở viewport 320.
* Mất hiệu ứng mờ dần là cái giá rẻ hơn hẳn một trang cuộn ngang trên điện thoại. */
.rail-tip {
display: none; position: absolute; left: calc(100% + 8px); top: 50%; transform: translateY(-50%);
white-space: nowrap; padding: 4px 8px; border-radius: var(--gemboss-radius-sm);
background: var(--gemboss-text); color: var(--gemboss-surface); font-size: var(--gemboss-fs-caption);
pointer-events: none; z-index: 40;
}
.rail-btn:hover .rail-tip, .rail-btn:focus-visible .rail-tip,
.rail-duty:hover .rail-tip, .rail-duty:focus-visible .rail-tip,
.rail-me:hover .rail-tip, .rail-me:focus-visible .rail-tip { display: block; }
.rail-count { position: absolute; top: 2px; right: 2px; }
.rail-duty, .rail-me {
position: relative; width: 44px; height: 44px; display: grid; place-items: center;
border: 0; border-radius: 50%; background: var(--gemboss-hover); color: var(--gemboss-text);
font-size: var(--gemboss-fs-caption); font-weight: 600; cursor: pointer;
}
.rail-duty__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--gemboss-text-muted); }
.rail-duty[data-status="on_duty"] .rail-duty__dot { background: var(--gemboss-success); }
.rail-duty[data-status="away"] .rail-duty__dot { background: var(--gemboss-warning); }
/* Bảng trực mở ra từ rail — nó không vừa trong 64px. */
.rail-pop {
position: fixed; left: 72px; bottom: 12px; z-index: 50; width: min(280px, calc(100vw - 84px));
background: var(--gemboss-surface); border: 1px solid var(--gemboss-divider);
border-radius: var(--gemboss-radius-lg); box-shadow: 0 8px 24px rgb(0 0 0 / .14); padding: 12px;
display: grid; gap: 12px;
}
.rail-pop__foot { margin: 0; }
.list-view { display: block; }
.list-view .field { width: 100%; }
/* Hàng nút của luồng hội thoại phải XUỐNG DÒNG: ở 320px "Customer & AI" thò ra 66px ngoài mép. */
.thread-actions { flex-wrap: wrap; }
/* Hai tab của cột phải. `role=tab` chứ không phải link: chúng đổi thứ hiện ra trong cùng một khung. */
.d-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--gemboss-divider); margin: -4px -4px 12px; padding: 0 4px; }
.d-tabs button {
flex: 1 1 0; min-height: 44px; border: 0; background: none; cursor: pointer; font: inherit;
color: var(--gemboss-text-muted); border-bottom: 2px solid transparent;
}
.d-tabs button[aria-selected="true"] { color: var(--gemboss-text); font-weight: 600; border-bottom-color: var(--gemboss-active-fg, var(--gemboss-text)); }
.d-panel { min-width: 0; }
/* Trợ lý. Câu hỏi nhanh trước ô nhập: người trực ca đêm không nghĩ ra câu hỏi, họ cần chỗ để bấm. */
.ai-quick { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.ai-quick__btn { min-height: 44px; text-align: left; }
.ai-ask { display: flex; gap: 8px; align-items: flex-end; }
.ai-ask .ui-textarea { flex: 1 1 auto; }
.ai-ask .ui-btn { min-height: 44px; }
.ai-thread { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.ai-turn__who { font-size: var(--gemboss-fs-caption); color: var(--gemboss-text-muted); }
.ai-turn__body { white-space: pre-wrap; overflow-wrap: anywhere; }
.ai-turn[data-who="me"] .ai-turn__body { color: var(--gemboss-text-muted); }
.ai-insert { min-height: 44px; margin-top: 4px; }
.count {
font-size: var(--gemboss-fs-caption); font-weight: 600; min-width: 20px; text-align: center; font-variant-numeric: tabular-nums;
border-radius: var(--gemboss-radius-full); padding: 0 6px; background: var(--gemboss-hover); color: var(--gemboss-text-muted);
}
.count:empty { display: none; }
/* Bị gọi tên là việc gửi tới MỘT NGƯỜI, không tới hàng đợi: mượn màu của huy hiệu quá hạn. */
.mention-pill { display: flex; align-items: center; width: 100%; min-height: 44px; padding: 0 12px; border-radius: var(--gemboss-radius-md);
border: 1px solid var(--gemboss-danger); background: var(--gemboss-surface); color: var(--gemboss-danger);
font: inherit; font-weight: 600; text-align: left; cursor: pointer; }
.mention-pill:hover { background: var(--gemboss-hover); }
.mention-pill:focus-visible { outline: 2px solid var(--gemboss-danger); outline-offset: 2px; }
/* One rule (28/09/2026): it was declared twice, the second overriding most of the first. These are the
values that were winning; `flex-direction` went with the flex it belonged to. */
.rail-foot { margin-top: auto; display: grid; align-items: center; gap: 12px; font-size: var(--gemboss-fs-caption); color: var(--gemboss-text-muted); }
.team { display: flex; flex-wrap: wrap; gap: 6px; }
/* `> .team-chip`, KHÔNG `span`. Luật cũ `.team span` khớp MỌI span con cháu — vô hại khi chip chỉ
chứa chữ, nhưng chip nay có ảnh đại diện, và `.av` lẫn `.av__initials` đều là span. Để nguyên thì
mỗi ô ảnh tự mọc một viên thuốc có viền và một chấm online riêng: ba chấm cho một người. Đúng họ
lỗi `element-css-collides-across-sections` — một luật con cháu với vào phần tử nó không sở hữu. */
.team > .team-chip {
display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px 2px 2px;
border-radius: var(--gemboss-radius-full); border: 1px solid var(--gemboss-divider); color: var(--gemboss-text);
}
.team > .team-chip::before { content: ""; order: 3; width: 8px; height: 8px; border-radius: 50%; background: var(--gemboss-divider); }
.team > .team-chip[data-online="true"]::before { background: var(--gemboss-success); }
.me { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 0 4px; color: var(--gemboss-text); }
/* Công tắc trực. Ba nút là một nhóm: trạng thái đang chọn phải NHÌN ra ngay, vì nó quyết định câu
khách nghe lúc 2 giờ sáng. Nút cao 44px theo §9.1 (điều khiển, không phải link trong danh sách). */
.duty { display: grid; gap: 6px; padding: 0 4px; }
.duty-buttons { display: flex; gap: 6px; }
.duty-buttons .ui-btn { flex: 1 1 0; min-height: 44px; padding: 0 8px; font-size: var(--gemboss-fs-caption); }
.duty-buttons .ui-btn[aria-pressed="true"] {
border-color: var(--gemboss-primary); color: var(--gemboss-primary); font-weight: 600;
}
.duty[data-status="on_duty"] .ui-btn[aria-pressed="true"] { border-color: var(--gemboss-success); color: var(--gemboss-success); }
.duty #duty-note { margin: 0; }
.conn { display: flex; align-items: center; gap: 8px; padding: 0 4px; }
.conn-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gemboss-warning-border); }
.conn[data-state="live"] .conn-dot { background: var(--gemboss-success); }
.conn[data-state="offline"] .conn-dot { background: var(--gemboss-danger); }
/* The EMAIL channel, not the socket. `no_mx` is red rather than amber on purpose: a configured
channel that silently bounces is worse than one that is plainly switched off, because the team
believes it works. */
.intake[data-state="off"] .conn-dot { background: var(--gemboss-text-muted); }
.intake[data-state="no_mx"] .conn-dot { background: var(--gemboss-danger); }
.intake[data-state="no_mx"] { color: var(--gemboss-danger); font-weight: 600; }
/* `unknown` stays amber and stays quiet. It is not a refusal — it is our own resolver failing — and
painting it red would teach the team that red means nothing. */
.intake[data-state="unknown"] .conn-dot { background: var(--gemboss-warning-border); }
/* `elsewhere` is red and bold like `no_mx`, and it is the worse of the two: a refused mail at least
bounces back to the customer, while mail handed to the wrong host disappears with everyone — sender
and team — believing it arrived. */
.intake[data-state="elsewhere"] .conn-dot { background: var(--gemboss-danger); }
.intake[data-state="elsewhere"] { color: var(--gemboss-danger); font-weight: 600; }
/* `unverified` is amber: nothing is known to be broken, and nothing is known to work either. */
/* `swapped`: model VẪN trả lời, nhưng không phải model được xin. Hổ phách như `unknown` vì tính
năng chưa chết, nhưng ĐẬM — `unknown` cố ý "im lặng, không phải một lời từ chối", và câu to nhất
của hàng model không được mặc áo của trạng thái không-cần-làm-gì. Ở đây CÓ việc phải làm: biết
rằng chất lượng nháp đã đổi. */
.intake[data-state="swapped"] .conn-dot { background: var(--gemboss-warning-border); }
.intake[data-state="swapped"] { font-weight: 600; }
.intake[data-state="unverified"] .conn-dot { background: var(--gemboss-warning-border); }
.list { background: var(--gemboss-surface); border-right: 1px solid var(--gemboss-divider); display: flex; flex-direction: column; min-height: 0; }
.list-head { padding: 16px; border-bottom: 1px solid var(--gemboss-divider); }
.list-head h2 { margin: 0; font-size: var(--gemboss-fs-h3); }
.conversations { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; }
.conversations button {
width: 100%; min-height: 64px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 8px; text-align: left;
padding: 12px 16px; border: 0; border-bottom: 1px solid var(--gemboss-divider-soft); background: transparent; cursor: pointer;
transition: background-color var(--gemboss-transition-fast) ease;
}
.conversations button:hover { background: var(--gemboss-hover); }
/* "Load more" cuối danh sách: một hàng đủ 44px, căn giữa, không trông như một hội thoại. */
.conversations .load-more-row { padding: 8px 12px; }
.conversations .load-more { width: 100%; min-height: 44px; justify-content: center; color: var(--gemboss-accent); }
.conversations button[aria-current="true"] { background: var(--gemboss-active-bg); box-shadow: inset 2px 0 0 var(--gemboss-primary); }
.c-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-time { color: var(--gemboss-text-muted); font-size: var(--gemboss-fs-caption); }
.c-preview { color: var(--gemboss-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-meta { display: flex; gap: 6px; align-items: center; justify-self: end; }
.c-unread {
background: var(--gemboss-accent); color: var(--ui-accent-fg); font-size: var(--gemboss-fs-micro); font-weight: 700;
border-radius: var(--gemboss-radius-full); padding: 0 6px; min-width: 20px; text-align: center;
}
.c-assignee { font-size: var(--gemboss-fs-caption); color: var(--gemboss-text-muted); }
.conversations button[data-unread="true"] .c-preview { color: var(--gemboss-text); font-weight: 500; }
.thread { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--gemboss-surface); }
.thread-empty { flex: 1; }
.thread-body { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.thread-head {
display: flex; align-items: center; gap: 12px; padding: 8px 16px; background: var(--gemboss-surface);
border-bottom: 1px solid var(--gemboss-divider); flex-wrap: wrap;
}
.back { display: none; }
/* `min-width` có SÀN, không phải 0.
*
* `flex: 1` + `min-width: 0` cho khối tên co xuống tới KHÔNG khi hàng nút không đủ chỗ. Đo 23/09 ở
* 1280 (khổ laptop của Chris, ngăn chi tiết đang mở): hộp tên còn **24px**, tên khách hiện ra là
* "H…" và email là "ho…". Lỗi xuất hiện từ lúc thêm nút "Escalate to tech" ở lát 5 ① — năm nút cộng
* một ô chọn không vừa 556px.
*
* Sàn 140px: hàng nút xuống dòng (header vốn `flex-wrap: wrap`) thay vì nuốt mất thứ quan trọng
* nhất trên màn — tên người đang nói chuyện với mình. */
.who { display: grid; min-width: 140px; flex: 1; }
.who strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.who span { color: var(--gemboss-text-muted); font-size: var(--gemboss-fs-caption); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thread-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
/* Nhãn ĐỦ khi rộng, nhãn NGẮN khi chật — cho "New request" và "Escalate to tech".
*
* Đo 26/09 ở 1280 — khổ laptop phổ biến nhất, lý do §9.1 thêm khổ này: thanh hành động rộng 524px mà
* cần 591px (assignee 149 · New request 113 · Escalate to tech 134 · Resolve 83 · Snooze 80 · 4 khe
* 8px), nên Snooze rơi xuống dòng riêng và đầu khung chiếm BA dòng. Ngưỡng 1440 là chỗ thanh có dư thật
* cho nhãn đủ (thread ~716px).
* Ngưỡng theo KHUNG NHÌN, không theo bề rộng của thanh: thanh vẫn gãy ở vài dải hẹp (901–982 khi ngăn
* "Customer & AI" cũng ở trên hàng, 1100–1218) — review #143 tính ra. Truy vấn theo container là việc
* sau; PR này nhắm 1280 và 1366.
* Hai nút không có aria-label: tên truy cập là chữ đang hiện (xem inbox.html). */
.lbl-short { display: none; }
@media (max-width: 1439px) {
.thread-actions .lbl-long { display: none; }
.thread-actions .lbl-short { display: inline; }
/* Đệm ngang 12px thay 16px — chỉ trong thanh này, không đụng `.ui-btn` của hệ thiết kế (vendored,
có khoá sha256). Nút vẫn cao 44px: đệm dọc không đổi. */
.thread-actions > .ui-btn, .thread-actions .snooze > summary { padding-left: 12px; padding-right: 12px; }
}
/* Ô chọn người phụ trách rộng bằng NGƯỜI ĐANG ĐƯỢC CHỌN, không bằng tên dài nhất trong danh sách (đo:
149px với 31 agent). `field-sizing: content` làm việc ấy ở Chromium; trình duyệt chưa hiểu nó thì giữ
hành vi cũ (tên dài nhất, trần 180px dưới đây) — không ai mất gì.
* Bản trước ép cứng 128px ở 901–1439: "Chris Koh (you)" (146px) bị cắt thành "Chris Koh (yo" — đúng dấu
"đây là của tôi" bị cắt trước tiên (review #143, có ảnh). Cắt chữ là đỏ ở §9.1; một hàng xuống dòng
thì không. */
#t-assignee { field-sizing: content; }
/* Gợi ý của model: trải hết hàng (header là flex-wrap), chữ nhỏ, màu phụ. Nó KHÔNG được trông như
một trạng thái của hội thoại — nó là một câu ai đó đoán. */
.tech-hint {
flex: 1 0 100%; margin: 0; padding: 4px 0 0;
font-size: var(--gemboss-fs-caption); color: var(--gemboss-text-muted);
}
.assign .field { max-width: 180px; }
.messages { list-style: none; margin: 0; padding: 20px 16px; overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 12px; }
.msg { max-width: min(640px, 85%); display: grid; gap: 4px; }
.msg-bubble { padding: 8px 12px; border-radius: var(--gemboss-radius-xl); white-space: pre-wrap; overflow-wrap: anywhere; }
.msg-bubble a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.msg-bubble a:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; border-radius: 2px; }
.msg-meta { font-size: var(--gemboss-fs-caption); color: var(--gemboss-text-muted); }
.msg[data-sender="contact"] { align-self: flex-start; }
.msg[data-sender="contact"] .msg-bubble { background: var(--gemboss-primary-soft); border-bottom-left-radius: var(--gemboss-radius-xs); }
.msg[data-sender="agent"], .msg[data-sender="bot"] { align-self: flex-end; text-align: right; }
.msg[data-sender="agent"] .msg-bubble { background: var(--gemboss-primary); color: var(--ui-accent-fg); border-bottom-right-radius: var(--gemboss-radius-xs); text-align: left; }
.msg[data-private="true"] .msg-bubble { background: var(--gemboss-warning-soft); color: var(--gemboss-text); border: 1px dashed var(--gemboss-warning-border); }
.msg[data-pending="true"] { opacity: .6; }
.msg[data-failed="true"] .msg-meta { color: var(--gemboss-danger); }
.day { align-self: center; font-size: var(--gemboss-fs-caption); color: var(--gemboss-text-muted); padding: 4px 0; }
/* "Earlier with this customer": chuyện trước đó, MỜ và chỉ đọc — không lẫn với tin của hội thoại đang mở. */
.earlier { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px dashed var(--gemboss-divider); border-radius: 12px; color: var(--gemboss-text-muted); }
.earlier__title { margin: 0; font-size: var(--gemboss-fs-caption); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.earlier__conv { display: flex; flex-direction: column; gap: 4px; }
.earlier__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: var(--gemboss-fs-caption); }
.earlier__msg { display: flex; flex-direction: column; font-size: var(--gemboss-fs-body); overflow-wrap: anywhere; }
.earlier__who { font-size: var(--gemboss-fs-caption); }
.earlier__gap { font-size: var(--gemboss-fs-caption); }
.typing { margin: 0; padding: 0 16px 6px; color: var(--gemboss-text-muted); font-size: var(--gemboss-fs-caption); }
.composer { background: var(--gemboss-surface); border-top: 1px solid var(--gemboss-divider); padding: 0 16px 12px; display: grid; gap: 8px; }
.composer .ui-textarea { min-height: 72px; max-height: 40vh; }
.composer[data-mode="note"] .ui-textarea { background: var(--gemboss-warning-soft); border-color: var(--gemboss-warning-border); }
/* `flex-wrap` ở MỌI khổ: bốn nút không vừa 264px, và câu báo lỗi (#composer-error) lấy riêng một dòng. */
.composer-foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.composer-foot .attach { width: 44px; min-width: 44px; padding: 0; justify-content: center; }
/* ── Attachments: files waiting in the composer ── */
.files { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.file {
display: flex; align-items: center; gap: 8px; padding: 4px 4px 4px 4px; min-width: 0; width: min(280px, 100%);
border: 1px solid var(--gemboss-divider); border-radius: var(--gemboss-radius-md); background: var(--gemboss-surface);
}
.file[data-status="error"] { border-color: var(--gemboss-danger); background: var(--gemboss-danger-soft); }
.file-preview { width: 44px; height: 44px; flex: none; object-fit: cover; border-radius: var(--gemboss-radius-sm); background: var(--gemboss-hover); }
.file-preview--doc { display: grid; place-items: center; font-size: var(--gemboss-fs-micro); font-weight: 700; color: var(--gemboss-text-muted); }
.file-body { display: grid; gap: 2px; min-width: 0; flex: 1; }
.file-name { font-size: var(--gemboss-fs-caption); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-state { font-size: var(--gemboss-fs-micro); color: var(--gemboss-text-muted); overflow-wrap: anywhere; }
.file[data-status="error"] .file-state { color: var(--gemboss-danger); }
.file-bar { height: 4px; border-radius: var(--gemboss-radius-full); background: var(--gemboss-divider-soft); overflow: hidden; }
.file-bar-fill { display: block; height: 100%; width: 0; background: var(--gemboss-accent); transition: width var(--gemboss-transition-fast) linear; }
.file[data-status="ready"] .file-bar, .file[data-status="error"] .file-bar { visibility: hidden; }
.file[data-status="finalizing"] .file-bar-fill, .file[data-status="preparing"] .file-bar-fill { width: 100%; opacity: .35; }
.file-remove { width: 44px; min-width: 44px; padding: 0; justify-content: center; flex: none; }
#composer-send:disabled { cursor: progress; }
/* ── Attachments in the thread ── */
.msg-files { display: flex; flex-wrap: wrap; gap: 6px; }
.msg[data-sender="agent"] .msg-files, .msg[data-sender="bot"] .msg-files { justify-content: flex-end; }
.file-thumb {
padding: 0; border: 1px solid var(--gemboss-divider); border-radius: var(--gemboss-radius-lg); overflow: hidden; cursor: zoom-in;
background: var(--gemboss-hover); line-height: 0; max-width: 100%;
}
.file-thumb img { display: block; max-width: 100%; height: auto; object-fit: cover; }
.file-thumb:hover { box-shadow: var(--gemboss-shadow-resting); }
.msg[data-private="true"] .file-thumb, .msg[data-private="true"] .file-chip { border: 1px dashed var(--gemboss-warning-border); }
.file-chip {
display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 4px 12px 4px 4px; max-width: 100%;
border: 1px solid var(--gemboss-divider); border-radius: var(--gemboss-radius-md); background: var(--gemboss-surface);
color: var(--gemboss-text); text-decoration: none; text-align: left;
}
.file-chip:hover { background: var(--gemboss-hover); }
.file-chip:focus-visible, .file-thumb:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 2px; }
.file-chip-icon {
width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: var(--gemboss-radius-sm);
background: var(--gemboss-danger-soft); color: var(--gemboss-danger); font-size: var(--gemboss-fs-micro); font-weight: 700;
}
.file-chip-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.file-chip-size { color: var(--gemboss-text-muted); font-size: var(--gemboss-fs-caption); flex: none; }
.thread { position: relative; }
.drop-hint {
position: absolute; inset: 8px; z-index: 5; display: grid; place-items: center; pointer-events: none;
border: 2px dashed var(--gemboss-accent); border-radius: var(--gemboss-radius-xl); background: var(--gemboss-primary-soft);
color: var(--gemboss-text-strong); font-weight: 600;
}
dialog.lightbox {
border: 0; padding: 0; background: transparent; max-width: calc(100vw - 32px); max-height: calc(100vh - 32px);
display: none; flex-direction: column; gap: 8px; align-items: flex-end;
}
dialog.lightbox[open] { display: flex; }
dialog.lightbox::backdrop { background: rgba(20, 19, 18, .72); }
.lightbox-bar { display: flex; gap: 8px; }
.lightbox-bar .ui-btn { background: var(--gemboss-surface); }
#lightbox-img { display: block; max-width: calc(100vw - 32px); max-height: calc(100vh - 96px); object-fit: contain; border-radius: var(--gemboss-radius-md); background: var(--gemboss-surface); }
.composer-hint { color: var(--gemboss-text-muted); font-size: var(--gemboss-fs-caption); flex: 1; }
/* Lỗi của ô soạn lấy HẲN một dòng, phía trên các nút, ở mọi khổ. Để nó chia khe với dòng gợi ý thì
một trong hai bị bóp thành cột: dòng gợi ý bốn dòng ở 1280, câu lỗi sáu dòng trong 69px ở 390 (đo
27/09/2026). Và KHÔNG giấu dòng gợi ý: nó là chỗ duy nhất nói câu trả lời sẽ đi đâu (Telegram, email,
hay trợ lý Gem). Chỉ nhắm đúng #composer-error — `.form-error` trong ngăn Request cũng nằm trong một
`.composer-foot`. `margin: 0` vì `.form-error` chung có lề trên. */
#composer-error { order: -1; flex-basis: 100%; margin: 0; }
@media (max-width: 480px) {
/* Ở khổ điện thoại, dòng gợi ý lấy một dòng riêng DƯỚI hàng nút. Để nó chen giữa "/ Replies" và Send
thì nó thành một cột bốn dòng và đẩy Send xuống một hàng riêng; thêm dòng câu báo nữa là Send lòi
khỏi đáy màn 320×640 (đo 27/09/2026). */
.composer-hint { order: 1; flex-basis: 100%; }
}
.details { background: var(--gemboss-surface); border-left: 1px solid var(--gemboss-divider); padding: 16px; overflow-y: auto; }
.details h3 { font-size: var(--gemboss-fs-caption); text-transform: uppercase; letter-spacing: .06em; color: var(--gemboss-text-muted); margin: 20px 0 8px; }
.details h3:first-child { margin-top: 0; }
.details dl { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 12px; }
.details dt { color: var(--gemboss-text-muted); }
.details dd { margin: 0; overflow-wrap: anywhere; }
.previous { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.previous button {
min-height: 32px; width: 100%; text-align: left; cursor: pointer; padding: 4px 12px;
border: 1px solid var(--gemboss-divider); border-radius: var(--gemboss-radius-md); background: transparent;
}
.previous button:hover { background: var(--gemboss-hover); }
/* ── Segmented range (Reports days, Requests owner). Not the kit's .ui-seg: that is 36px under a mouse. ── */
/* `flex-wrap: wrap` đi kèm BẮT BUỘC với `min-width` ở nút con: không có nó, sàn 44px không làm ô
rộng ra mà chỉ ĐẨY việc nghiền sang nút bên cạnh — đo 24/09 ở 320px, nút "Internal" tụt
74,3 → 64,9px và padding phải co còn 2,6px. Cùng nguyên tắc `.thread-actions` đang dùng. */
.range { display: flex; flex-wrap: wrap; gap: 4px; background: var(--gemboss-primary-soft); border-radius: var(--gemboss-radius-md); padding: 2px; }
/* `min-width` đi CÙNG `min-height`: §9.1 đòi 44px ở CẢ HAI chiều, và một nút chữ lấy bề rộng từ
nhãn của nó. Nhãn ngắn thì tụt xuống dưới sàn — đo trên prod 24/09 ở 390px: nút "All" = 41×44. */
.range button {
min-height: 44px; min-width: 44px; padding: 0 12px; border: 0; border-radius: var(--gemboss-radius-sm); background: transparent; cursor: pointer;
color: var(--gemboss-text-muted); font-weight: 500;
}
.range button:hover { color: var(--gemboss-text); }
.range button[aria-pressed="true"] { background: var(--gemboss-surface); color: var(--gemboss-text-strong); font-weight: 600; box-shadow: var(--gemboss-shadow-resting); }
/* ── Full-width screens: requests, reports, team settings ──
By the ATTRIBUTE, not by a list of its values. The list version was three rules that each had to be
found and extended; the third screen was added without them and rendered inside the 220px rail column
with the conversation list still beside it. A layout rule that has to be edited for every new screen
is a layout rule that will be missed. */
.app[data-screen] { grid-template-columns: 64px minmax(0, 1fr); }
.app[data-screen] .list, .app[data-screen] .thread, .app[data-screen] .details { display: none !important; }
.board-screen { overflow: auto; padding: 24px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-content: start; background: var(--gemboss-app-bg); min-width: 0; }
.board { display: grid; grid-template-columns: repeat(4, minmax(220px, 1fr)); gap: 12px; align-items: start; overflow-x: auto; padding-bottom: 8px; }
.column { background: var(--gemboss-primary-soft); border-radius: var(--gemboss-radius-lg); padding: 12px; display: grid; gap: 8px; min-height: 160px; align-content: start; }
.column[data-drop="true"] { outline: 2px dashed var(--gemboss-accent); outline-offset: -2px; }
.column-head { display: flex; justify-content: space-between; align-items: center; font-weight: 600; padding: 2px 4px; }
.column-head .count { background: var(--gemboss-surface); }
.card-rq {
width: 100%; min-height: 44px; text-align: left; cursor: pointer; display: grid; gap: 4px; padding: 12px;
background: var(--gemboss-surface); border: 1px solid var(--gemboss-divider); border-radius: var(--gemboss-radius-md);
transition: box-shadow var(--gemboss-transition-fast) ease;
}
.card-rq:hover { box-shadow: var(--gemboss-shadow-resting); }
.card-rq[aria-grabbed="true"] { opacity: .5; }
.card-rq .rq-num { color: var(--gemboss-text-muted); font-size: var(--gemboss-fs-caption); }
.card-rq .rq-name { font-weight: 600; overflow-wrap: anywhere; }
.card-rq .rq-foot { display: flex; justify-content: space-between; gap: 8px; color: var(--gemboss-text-muted); font-size: var(--gemboss-fs-caption); }
.empty-col { color: var(--gemboss-text-muted); font-size: var(--gemboss-fs-caption); padding: 4px; margin: 0; }
dialog.drawer {
border: 1px solid var(--gemboss-divider); border-radius: var(--gemboss-radius-xl); padding: 20px; color: var(--gemboss-text); background: var(--gemboss-surface);
width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 48px); box-shadow: var(--gemboss-shadow-overlay);
}
dialog.drawer.small { width: min(440px, calc(100vw - 32px)); }
dialog.drawer::backdrop { background: rgba(20, 19, 18, .38); }
.drawer-close { position: absolute; top: 8px; right: 8px; }
#rq-meta { padding-right: 44px; } /* clear of the 44px close button — it sat on top of the date */
#rq-title { margin: 4px 0 8px; font-size: var(--gemboss-fs-h2); padding-right: 44px; overflow-wrap: anywhere; }
.rq-desc { white-space: pre-wrap; margin: 0 0 12px; overflow-wrap: anywhere; }
.rq-controls { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.rq-controls label, .rq-new label { display: grid; gap: 4px; font-size: var(--gemboss-fs-caption); color: var(--gemboss-text-muted); }
.rq-new .field, .rq-new .ui-textarea { color: var(--gemboss-text); font-size: var(--gemboss-fs-body); }
.rq-new { display: grid; gap: 12px; }
/* A grid item's default minimum is its MIN-CONTENT, and a