/* Thành phần giao diện dùng chung: thẻ, nút, ô nhập, tab, chip, bảng, popup, thanh lọc */

/* thẻ */
.card{background:var(--surface);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow)}
.card-h{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-bottom:1px solid var(--line2)}
.card-h h2{font-size:15px;font-weight:600;white-space:nowrap;color:var(--neon-soft)}
.card-b{padding:16px}
/* Thu gọn khung (15/10/2026): trang có từ 2 khung có tiêu đề thì bấm tiêu đề để thu gọn / mở; mặc định mở (site.js). */
.card-h h2[data-fold]{cursor:pointer;user-select:none}
.card-h h2[data-fold]::before{content:"\25BE";display:inline-block;width:1em;margin-right:4px;color:var(--muted);transition:transform .15s}
.card-h h2[data-fold]:focus-visible{outline:2px solid var(--neon);outline-offset:2px;border-radius:4px}
.card.is-folded>.card-h h2[data-fold]::before{transform:rotate(-90deg)}
.card.is-folded>:not(.card-h){display:none!important}
.card.is-folded>.card-h{border-bottom:0}
.card.is-folded>.card-h>:not(h2):not(.tag){display:none!important}

/* nút: nút chính là neon đặc chữ tối; nút nguy hiểm là đỏ đặc chữ trắng */
.btn{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 14px;border-radius:8px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font:500 14px var(--sans);cursor:pointer;text-decoration:none}
.btn:hover{background:var(--hover);border-color:var(--neon);text-decoration:none}
.btn:active{background:var(--primary-l)}
.btn.primary{background:var(--neon);border-color:var(--neon);color:var(--on-neon);font-weight:700;box-shadow:var(--glow)}
.btn.primary:hover,.btn.primary:active{background:var(--primary-d);border-color:var(--primary-d);color:var(--on-neon)}
.btn.danger,.btn.primary.late{background:var(--red);border-color:var(--red-line);color:#fff;box-shadow:var(--glow-red)}
.btn.danger:hover{background:#B00D35;color:#fff}
.btn.sm{height:30px;padding:0 10px;font-size:13px}
.btn.icon{width:36px;padding:0;justify-content:center}

/* ô nhập */
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-weight:500;font-size:13px;color:var(--ink2)}
.field .hint{font-size:12px;color:var(--ink3)}
.input{height:36px;border:1px solid var(--line);border-radius:8px;padding:0 10px;font:14px var(--sans);color:var(--ink);background:var(--field);width:100%;color-scheme:inherit}
.input.ta{height:auto;padding:8px 10px;min-height:76px}
.input[readonly]{background:var(--head-bg);color:var(--ink2)}
.input:focus{border-color:var(--neon);outline:0;box-shadow:0 0 0 3px rgba(11,124,147,.18)}
select.input option{background:var(--menu-bg);color:var(--ink)}

/* nhóm nút chọn và tab */
.seg{display:inline-flex;flex-wrap:wrap;max-width:100%;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--surface)}
.seg a,.seg button{padding:7px 12px;font:500 13px var(--sans);white-space:nowrap;color:var(--ink2);border:0;background:transparent;cursor:pointer;text-decoration:none;border-right:1px solid var(--line)}
.seg a:last-child,.seg button:last-child{border-right:0}
.seg .on{background:var(--neon);color:var(--on-neon);font-weight:700}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line)}
.tabs a{padding:10px 14px;color:var(--ink2);font-weight:500;border-bottom:2px solid transparent;margin-bottom:-1px;text-decoration:none}
.tabs a.on{color:var(--neon-text);border-color:var(--neon)}

/* chip trạng thái: viên thuốc tối, chữ + chấm neon (đỏ thì nền đỏ chữ trắng) */
.chip{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:2px 10px 2px 8px;font-size:12.5px;font-weight:600;white-space:nowrap;background:var(--chip-bg);border:1px solid color-mix(in srgb,currentColor 45%,transparent)}
.chip::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.chip.fin{color:var(--fin)}
.chip.prog{color:var(--prog)}
.chip.pend{color:var(--pend)}
.chip.none{color:var(--none)}
.chip.late{background:var(--red);color:#fff;border-color:var(--red)}
.chip.late::before{background:#fff}
/* Flow các bước của dự án (PhaseFlowPicker): ô bước nối bằng mũi tên, tick chọn; bước không chọn mờ đi */
.phase-flow{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.pf-step{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border:1px solid var(--line);border-left:4px solid var(--c);border-radius:8px;background:var(--surface);cursor:pointer;font-weight:500;font-size:13.5px;opacity:.55}
.pf-step.on{opacity:1;border-color:var(--c);box-shadow:var(--shadow)}
.pf-step input{width:16px;height:16px;margin:0}
.pf-share{font-size:11.5px;color:var(--ink3)}
.pf-arrow{color:var(--ink3);font-weight:700}
.tag{display:inline-block;border:1px solid var(--line);border-radius:6px;padding:0 7px;font-size:12px;color:var(--ink2);background:var(--head-bg)}
.avatar{width:28px;height:28px;border-radius:50%;background:#1B2A70;color:#fff;border:1px solid var(--line);display:inline-flex;align-items:center;justify-content:center;font-weight:600;font-size:12px;flex:none}
.avatar.lg{width:36px;height:36px;font-size:13px}

/* bảng */
.tbl{width:100%;border-collapse:collapse}
.tbl th{text-align:left;font-weight:600;font-size:12px;color:var(--ink3);text-transform:uppercase;letter-spacing:.5px;padding:10px 14px;border-bottom:1px solid var(--line);background:var(--head-bg);white-space:nowrap}
.tbl td{padding:11px 14px;border-bottom:1px solid var(--line2);vertical-align:middle}
.tbl tr:last-child td{border-bottom:0}
.tbl tbody tr:hover td{background:var(--hover)}
.tbl tr.sel td{background:var(--primary-l)}
.tbl tr.late td:first-child{box-shadow:inset 3px 0 0 var(--red)}

/* popup dùng chung (Modal.razor) */
.scrim{position:absolute;inset:0;background:var(--scrim)}
.modal{background:var(--panel);border-radius:12px;border:1px solid var(--line);box-shadow:0 24px 60px rgba(0,0,0,.28)}
.modal-back{position:fixed;inset:0;z-index:1000;background:var(--scrim);display:flex;align-items:flex-start;justify-content:center;padding:32px 16px;overflow:auto}
.modal-box{width:100%;display:flex;flex-direction:column;outline:none;margin:auto}
.modal-h{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line2)}
.modal-h h2{font-size:17px;font-weight:600}
.modal-b{padding:16px 18px;display:flex;flex-direction:column;gap:16px}

/* thanh bộ lọc gọn: một hàng, ô nhập nhỏ; tự xuống dòng khi màn hình hẹp */
.fbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:6px 8px;margin-left:auto}
.fbar .input{width:auto;height:30px;padding:0 8px;font-size:13px;border-radius:7px}
.fbar select.input{width:140px}
.fbar input[type=date].input{width:128px}
.fbar input.input:not([type=date]):not([type=checkbox]){width:190px}
.fbar .btn{height:30px;padding:0 12px;font-size:13px}
.fbar .fcheck{display:inline-flex;align-items:center;gap:6px;font-weight:500;font-size:13px;white-space:nowrap;cursor:pointer}
.fbar .fcheck input{width:15px;height:15px;accent-color:var(--neon)}
.fbar .muted{font-size:13px}
@media(min-width:1100px){.fbar{flex-wrap:nowrap}}

/* dòng thanh đếm bấm để lọc (CountBars) */
.cbar-row{display:flex;align-items:center;gap:8px;border:0;background:transparent;padding:3px 4px;border-radius:6px;cursor:pointer;text-align:left;font:inherit}
.cbar-row:hover{background:var(--hover)}
.cbar-row.on{background:var(--primary-l)}

/* bảng cố định 3 cột đầu (trang Lịch sử lắp ráp) */
.freeze th:nth-child(-n+3),.freeze td:nth-child(-n+3){position:sticky;background:var(--panel);z-index:2}
.freeze th:nth-child(1),.freeze td:nth-child(1){left:0;min-width:44px}
.freeze th:nth-child(2),.freeze td:nth-child(2){left:44px;min-width:110px}
.freeze th:nth-child(3),.freeze td:nth-child(3){left:154px;min-width:220px;box-shadow:2px 0 0 var(--line)}

/* Báo lỗi nhập tại ô (site.js) */
[aria-invalid="true"]{border-color:var(--late)!important;box-shadow:0 0 0 2px rgba(208,16,63,.25)!important}
.field-tip{position:fixed;z-index:10000;display:none;max-width:320px;background:var(--red);color:#fff;font-size:12.5px;font-weight:500;padding:5px 9px;border-radius:6px;box-shadow:0 6px 18px -6px rgba(0,0,0,.6);pointer-events:none}
.field-tip.warn{background:#2a3a8a;color:#fff;border:1px solid var(--line)}

/* Thông báo (E2): tại chỗ trong popup; toast cố định ở góc khi đặt trực tiếp trong trang. */
.notice { display: flex; gap: 10px; align-items: flex-start; border-radius: 8px; padding: 10px 12px; font-size: 13.5px; border: 1px solid; }
.notice.err { border-color: var(--late); background: var(--red); color: #fff; }
.notice.ok { border-color: var(--fin); background: var(--fin-bg); color: var(--fin); }
.notice-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.notice-x { background: none; border: 0; color: inherit; cursor: pointer; font-size: 14px; line-height: 1; padding: 2px 4px; min-width: 28px; min-height: 28px; }
main.page > .notice { position: fixed; right: 16px; bottom: 16px; z-index: 950; max-width: min(520px, calc(100vw - 32px));
  box-shadow: 0 8px 28px rgba(40, 35, 20, .18); animation: notice-in .18s ease-out; }
main.page > .notice.ok { background: var(--ok-bg); }
main.page > .notice.err ~ .notice.err, main.page > .notice.ok ~ .notice.err { bottom: 76px; }
@keyframes notice-in { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { main.page > .notice { animation: none; } }

/* Dòng bảng bấm được (A11Y1): thấy rõ khi đi bằng phím Tab. */
tr[role=button]:focus-visible { outline: 2px solid var(--neon); outline-offset: -2px; }

/* Công việc của tôi (theo bản mẫu của tester, E1–E9) */
.savebar { position: fixed; left: 50%; bottom: 16px; z-index: 940; transform: translate(-50%, 160%); transition: transform .2s;
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap; padding: 10px 14px; border-radius: 14px;
  background: var(--surface); border: 1px solid var(--amber); box-shadow: var(--shadow); max-width: calc(100vw - 24px); }
.savebar.show { transform: translate(-50%, 0); }
.savebar kbd { opacity: .7; font-family: var(--mono); font-size: 12px; margin-left: 4px; }
main.page > .savebar.show ~ .notice { bottom: 84px; }
.kpi-btn { text-align: left; font: inherit; color: inherit; cursor: pointer; }
.kpi-btn[aria-pressed=true] { outline: 2px solid var(--neon); outline-offset: -2px; }
.th-sort { all: unset; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; font-weight: inherit; }
.th-sort:focus-visible { outline: 2px solid var(--neon); outline-offset: 2px; border-radius: 4px; }
.sticky-head { max-height: 70vh; overflow: auto; }
.sticky-head thead th { position: sticky; top: 0; z-index: 3; background: var(--head-bg); }
.stepper { display: flex; align-items: center; gap: 4px; }
.stepper .input { width: 64px; height: 36px; text-align: center; }
.step { min-width: 32px; height: 36px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-size: 16px; cursor: pointer; }
.step:disabled { opacity: .4; cursor: not-allowed; }
.quick { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; }
.quick button { min-height: 28px; padding: 0 9px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--ink3); font: inherit; font-size: 12px; cursor: pointer; }
.quick button:hover { color: var(--neon-text); border-color: var(--neon); }
tr.dirty { box-shadow: inset 4px 0 0 var(--amber); background: rgba(255,211,107,.07); }
.row-state { font-size: 12.5px; min-height: 1.2em; margin-top: 4px; color: var(--ink3); }
.row-state.dirty { color: var(--amber); }
.row-state.ok { color: var(--green); }
.field-error { margin-top: 4px; color: #fff; background: var(--red); border-radius: 6px; padding: 2px 8px; font-size: 12.5px; }
.late-text { color: var(--red-text); font-weight: 600; }
.row-actions { display: inline-flex; gap: 6px; align-items: center; justify-content: flex-end; }
.menu-wrap { position: relative; }
.pop-menu { position: absolute; right: 0; top: calc(100% + 4px); z-index: 30; min-width: 190px; margin: 0; padding: 6px; list-style: none;
  background: var(--menu-bg); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); text-align: left; }
.pop-menu button { all: unset; box-sizing: border-box; display: flex; align-items: center; width: 100%; min-height: 40px; padding: 0 12px; border-radius: 8px; cursor: pointer; color: var(--ink); }
.pop-menu button:hover, .pop-menu button:focus-visible { background: var(--hover); }
.pop-menu .danger-text { color: var(--red-text); }
@media (max-width:767px) {
  .savebar { left: 12px; right: 12px; transform: translateY(160%); }
  .savebar.show { transform: none; }
  .sticky-head { max-height: none; overflow: visible; }
  .stepper .input { width: 84px; height: 44px; }
  .step { min-width: 44px; height: 44px; }
  .quick button { min-height: 40px; padding: 0 14px; }
}

/* Trường bắt buộc (E12): dấu * thống nhất cho mọi biểu mẫu. */
label.req::after { content: " *"; color: var(--amber); font-weight: 700; }   /* nhãn bắt buộc đặt lớp .req tường minh (bỏ :has để vẽ nhanh) */

/* Chỉ báo đang xử lý (AD1) */
.busy-bar { position: fixed; left: 0; right: 0; top: 0; z-index: 980; pointer-events: none; opacity: 0; animation: busy-show 0s linear .3s forwards; }
.busy-line { display: block; height: 3px; background: linear-gradient(90deg, transparent, var(--neon), transparent); background-size: 50% 100%; background-repeat: no-repeat; animation: busy-run 1s linear infinite; }
.busy-label { position: fixed; top: 10px; right: 16px; background: var(--surface); border: 1px solid var(--neon); color: var(--ink); border-radius: 999px; padding: 4px 12px; font-size: 13px; }
@keyframes busy-show { to { opacity: 1; } }
@keyframes busy-run { from { background-position: -50% 0; } to { background-position: 150% 0; } }
/* BusyBar bật lớp body.busy (JS); không dùng body:has(.busy-bar): :has ở body làm trình duyệt kiểm lại cả trang mỗi khi thêm phần tử (tối ưu vẽ lại 15/10/2026). */
body.busy main.page button { pointer-events: none; opacity: .7; }
@media (prefers-reduced-motion: reduce) { .busy-line { animation: none; background: var(--neon); } }

/* Vòng đời danh mục */
.btn.danger-outline { color: var(--red-text); border-color: rgba(208,16,63,.45); background: var(--surface); }
.btn.danger-outline:hover { background: rgba(208,16,63,.08); }
.deleted-items summary::-webkit-details-marker { display: none; }

/* Hộp xác nhận của trang (D3) */
.confirm-back { z-index: 1100; }
.confirm-box { max-width: 480px; }
.confirm-box #cf-m { white-space: pre-line; margin-bottom: 12px; }

/* Ô chọn gõ để tìm (site.js): danh sách nổi dưới ô chọn, có ô tìm. */
.ss-pop{position:fixed;z-index:1100;background:var(--menu-bg);border:1px solid var(--line);border-radius:10px;box-shadow:0 12px 32px rgba(0,0,0,.22);padding:6px;display:flex;flex-direction:column;gap:6px;max-width:min(560px,calc(100vw - 16px))}
.ss-q{height:34px}
.ss-list{list-style:none;margin:0;padding:0;max-height:300px;overflow:auto}
.ss-opt{padding:6px 10px;border-radius:6px;cursor:pointer;color:var(--ink);font-size:14px;line-height:1.35}
.ss-opt.ss-act{background:var(--primary-l)}
.ss-opt.ss-cur{font-weight:600}
.ss-empty{padding:6px 10px;color:var(--ink3);font-size:13px}

/* Ô nhập số có đơn vị (NumberBox): đơn vị nằm trong ô, bên phải. */
.num-box{position:relative;display:flex;align-items:center;width:100%}
.num-box .input{width:100%;text-align:right}
.num-unit{position:absolute;right:10px;color:var(--ink3);font-size:12.5px;pointer-events:none}

/* Thông báo việc giao (chốt 13/10/2026): chồng ở góc phải trên, tự ẩn. */
.toast-stack { position: fixed; top: 16px; right: 16px; z-index: 960; display: flex; flex-direction: column; gap: 8px; max-width: min(420px, calc(100vw - 32px)); }
.toast { display: flex; gap: 8px; align-items: flex-start; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-left: 4px solid var(--amber);
  border-radius: 8px; padding: 10px 8px 10px 12px; font-size: 13.5px; box-shadow: 0 8px 28px rgba(40, 35, 20, .18); animation: notice-in .18s ease-out; }
.toast a { flex: 1; min-width: 0; color: inherit; text-decoration: none; overflow-wrap: anywhere; }
@media (prefers-reduced-motion: reduce) { .toast { animation: none; } }

/* Ô chọn nhiều (MultiPick) */
.mp{position:relative;display:inline-block}
.mp-b{display:flex;align-items:center;gap:6px;width:100%;text-align:left;cursor:pointer}
.mp-b .mp-t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mp-b .mp-c{color:var(--ink3);font-size:11px}
.mp-b.on{border-color:var(--neon)}
.mp-back{position:fixed;inset:0;z-index:40}
.mp-p{position:absolute;top:calc(100% + 4px);left:0;z-index:41;min-width:100%;max-height:320px;overflow:auto;background:var(--surface);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);padding:6px;display:flex;flex-direction:column;gap:2px}
.mp-i{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:6px;font-weight:400;cursor:pointer;white-space:nowrap}
.mp-i:hover{background:var(--hover)}
.mp-i.on{color:var(--ink);font-weight:600}
.mp-i input{width:15px;height:15px;margin:0}
.mp-clear{border:0;background:none;color:var(--neon);font:inherit;font-size:12.5px;text-align:left;padding:4px 8px;cursor:pointer;border-bottom:1px solid var(--line2);border-radius:0;margin-bottom:2px}

/* Giải pháp 7 bước */
.sol-flow{display:flex;flex-wrap:wrap;gap:6px;padding:12px 16px}
.sol-step{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:150px;flex:1 1 150px;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:var(--surface);cursor:pointer;font:inherit;text-align:left;color:var(--ink2)}
.sol-step .n{font-size:11px;font-weight:700;color:var(--ink3)}
.sol-step .t{font-size:12.5px;font-weight:600;color:var(--ink)}
.sol-step .s{font-size:11.5px;color:var(--ink3)}
.sol-step.work{border-color:var(--amber-bar);background:color-mix(in srgb,var(--amber-bar) 10%,var(--surface))}
.sol-step.wait{border-color:var(--neon);background:color-mix(in srgb,var(--neon) 10%,var(--surface))}
.sol-step.ok{border-color:var(--green);background:color-mix(in srgb,var(--green) 10%,var(--surface))}
.sol-step.na{opacity:.6}
.sol-step.sel{outline:2px solid var(--neon);outline-offset:1px}

/* Bộ đo hiệu năng tải trang (galileoPerf): hộp góc dưới phải, thanh chạy khi đang tải, danh sách lần đo gần nhất */
.perf { position: fixed; right: 12px; bottom: 12px; z-index: 985; width: 340px; max-width: calc(100vw - 24px); background: var(--surface); color: var(--ink); border: 1px solid var(--line2); border-radius: 10px; box-shadow: 0 6px 24px rgba(0,0,0,.18); font-size: 12.5px; }
.perf-h { display: flex; align-items: center; gap: 8px; padding: 6px 10px; cursor: pointer; }
.perf-t { font-weight: 600; }
.perf-now { margin-left: auto; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.perf-x { background: none; border: 0; font-size: 16px; line-height: 1; cursor: pointer; color: var(--ink); padding: 0 2px; }
.perf-bar { height: 3px; background: var(--line2); overflow: hidden; }
.perf-bar span { display: block; height: 100%; width: 100%; background: var(--neon); transform: scaleX(0); transform-origin: left; }
.perf-bar.done span { transform: scaleX(1); transition: transform .2s; }
.perf-bar.run span { animation: perf-run 1.2s linear infinite; }
@keyframes perf-run { 0% { transform: translateX(-100%) scaleX(.4); } 100% { transform: translateX(250%) scaleX(.4); } }
.perf-list { list-style: none; margin: 0; padding: 4px 0; max-height: 220px; overflow: auto; }
.perf.fold .perf-list, .perf.fold .perf-bar { display: none; }
.perf-list li { display: flex; gap: 8px; padding: 3px 10px; border-top: 1px solid var(--line2); font-variant-numeric: tabular-nums; }
.perf-r { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: ui-monospace, Consolas, monospace; }
.perf-ms { font-weight: 600; min-width: 64px; text-align: right; }
.perf-m { color: var(--muted, #888); min-width: 56px; text-align: right; }
.perf-list li.mid .perf-ms { color: #b8860b; }
.perf-list li.slow .perf-ms { color: var(--red-text); }
.perf-on { display: none; } html[data-perf] .perf-on { display: inline; } html[data-perf] .perf-off { display: none; }
@media (prefers-reduced-motion: reduce) { .perf-bar.run span { animation: none; transform: scaleX(1); opacity: .5; } }

@media print { .perf, .side, .busy-bar { display: none !important; } }

/* Luồng trao đổi (CommentThread) */
.thread-list { display: flex; flex-direction: column; gap: 10px; max-height: 60vh; overflow: auto; padding: 4px 0; }
.thread-item { display: flex; gap: 10px; align-items: flex-start; }
.thread-item .avatar { flex: 0 0 auto; }
.thread-body { flex: 1 1 auto; min-width: 0; background: var(--panel); border: 1px solid var(--line2); border-radius: 10px; padding: 8px 12px; }
.thread-item.mine .thread-body { border-color: var(--neon); }
.thread-item.sys .thread-body { background: transparent; border-style: dashed; color: var(--muted, #666); font-size: 13px; }
.thread-meta { display: flex; align-items: center; gap: 6px; font-size: 12.5px; margin-bottom: 4px; }
.thread-text { white-space: pre-line; word-break: break-word; }
.thread-compose { border-top: 1px solid var(--line2); margin-top: 10px; padding-top: 10px; }

/* Trao đổi: thanh công cụ định dạng, bảng emoji, nội dung đã định dạng */
.thread-tools { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin-bottom: 6px; }
.thread-tools .tool { min-width: 30px; height: 28px; padding: 0 8px; border: 1px solid var(--line2); border-radius: 6px; background: var(--surface); color: var(--ink); cursor: pointer; font: inherit; font-size: 13px; }
.thread-tools .tool:hover, .thread-tools .tool.on { border-color: var(--neon); background: rgba(34,228,255,.12); }
.emoji-pad { display: flex; flex-wrap: wrap; gap: 2px; padding: 6px; margin-bottom: 6px; border: 1px solid var(--line2); border-radius: 8px; background: var(--surface); }
.emoji-btn { width: 32px; height: 32px; border: 0; background: none; font-size: 20px; line-height: 1; cursor: pointer; border-radius: 6px; }
.emoji-btn:hover { background: rgba(34,228,255,.18); }
.thread-text code { font-family: var(--mono); font-size: 12.5px; background: rgba(127,127,127,.12); padding: 1px 5px; border-radius: 4px; }
.thread-text ul { margin: 2px 0 2px 18px; padding: 0; }
.thread-text a { color: var(--neon-text, #0b7285); text-decoration: underline; word-break: break-all; }
.thread-text .mention { color: var(--neon-text, #0b7285); font-weight: 600; background: rgba(34,228,255,.12); padding: 0 3px; border-radius: 4px; }

/* Ngăn trao đổi bên phải (CommentDock) */
:root { --dock-w: 400px; }
.dock { position: fixed; top: 0; right: 0; bottom: 0; width: var(--dock-w); min-width: 400px; max-width: 50vw; z-index: 60; display: flex; flex-direction: column; background: var(--surface); border-left: 1px solid var(--line2); box-shadow: -4px 0 16px rgba(0,0,0,.08); }
.dock-handle { position: absolute; left: -3px; top: 0; bottom: 0; width: 7px; cursor: col-resize; z-index: 61; }
.dock-handle:hover, body.dock-resizing .dock-handle { background: rgba(34,228,255,.35); }
body.dock-resizing { cursor: col-resize; user-select: none; }
body.dock-resizing .dock-b { pointer-events: none; }
.dock-h { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--line2); }
.dock-b { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 10px 14px; }
.dock-b .thread-list { max-height: none; }
.dock-tab { position: fixed; right: 0; top: 40%; z-index: 60; transform: rotate(-90deg) translate(50%, -100%); transform-origin: right top; background: var(--neon); color: var(--on-neon, #fff); border: 0; border-radius: 8px 8px 0 0; padding: 8px 14px; font: inherit; font-size: 13px; cursor: pointer; box-shadow: 0 -2px 8px rgba(0,0,0,.15); white-space: nowrap; }
@media (min-width: 1100px) { body.dock-open .main { margin-right: var(--dock-w); } body.dock-open .perf { right: calc(var(--dock-w) + 12px); } }
@media (max-width: 1099px) { .dock { max-width: 100vw; } }
@media print { .dock, .dock-tab { display: none !important; } }

/* Gợi ý nhắc tên (@) trong khung trao đổi */
.mention-menu { position: absolute; left: 8px; right: 8px; bottom: calc(100% + 4px); z-index: 70; background: var(--surface); border: 1px solid var(--line2); border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,.15); max-height: 240px; overflow: auto; padding: 4px; }
.mention-item { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 6px 10px; border-radius: 6px; font: inherit; font-size: 13px; color: var(--ink); cursor: pointer; }
.mention-item.on, .mention-item:hover { background: rgba(34,228,255,.18); }


/* Dải báo mất kết nối (thay hộp "Rejoining the server..." chặn màn hình), 18/10/2026 */
.reconnect-banner { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 9999; display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  padding: 10px 14px; border-radius: 10px; background: #1f2a5c; color: #fff; box-shadow: 0 6px 24px rgba(0,0,0,.25); font-size: 14px; }
.reconnect-banner[hidden] { display: none; }
.reconnect-banner button { border: 1px solid rgba(255,255,255,.5); background: transparent; color: #fff; border-radius: 8px; padding: 6px 12px; font: inherit; cursor: pointer; }
.reconnect-banner span { flex: 1 1 auto; }