/* ==========================================================================
   STC — THANH TRÊN CÙNG DÙNG CHUNG (titlebar.js), kiểu BitBrowser: hàng trên cùng của TOÀN app, cao 56px, LIỀN với phần bên dưới (không vạch kẻ,
   nền trong suốt => cùng màu với thứ nằm dưới nó: nền chung / màn đăng nhập / trang khởi động).
     [logo + "STS Browser" + viên phiên bản] [khe GIỮA: dải thông báo / ô tìm kiếm] [vùng kéo] [khe PHẢI: nút biểu tượng, menu tài khoản…] [3 nút cửa sổ]
   Dùng ở: giao diện chính + màn đăng nhập (ui/templates/index.html), trang khởi động/lỗi (ui/shell/khoi_dong.html — cả vỏ WebView2 lẫn vỏ Chrome).
   CHỈ token của ui/static/css/stc_theme.css (Sáng/Tối theo html[data-theme]); không mã màu cứng / gradient / blur / quầng sáng (tests/test_ui_theme_gold.py).
   Vùng kéo cửa sổ: CSS app-region (vỏ WebView2 bật IsNonClientRegionSupportEnabled); MỌI phần tử trong khe: no-drag.
   ========================================================================== */
html.stc-has-titlebar { --tb-h: 56px; }
html.stc-has-titlebar body { padding-top: var(--tb-h); box-sizing: border-box; }
html.stc-has-titlebar #stc-link-overlay { top: var(--tb-h); }          /* lớp phủ mất kết nối (app.js) nằm DƯỚI thanh: vẫn thu nhỏ/đóng được cửa sổ */

/* Bố cục app chính (body có .sidebar), kiểu BitBrowser: một NỀN CHUNG (--stc-side) cho thanh trên + thanh bên; vùng nội dung là MỘT thẻ lớn bo góc
   (--stc-r-dlg) nằm trên nền đó. Không vạch kẻ nào giữa thanh trên / thanh bên / nội dung (kể cả vạch đầu/chân thanh bên). */
html.stc-has-titlebar body:has(> .sidebar) { background: var(--stc-side); }
html.stc-has-titlebar body:has(> .sidebar) > .sidebar { border-right: 0; background: var(--stc-side); }
html.stc-has-titlebar body:has(> .sidebar) > .main-wrapper { margin: 4px 8px 8px 0; border-radius: var(--stc-r-dlg); background: var(--stc-bg); overflow: clip; }
html.stc-has-titlebar body:has(> .sidebar) .stc-side-brand { display: none; }                 /* logo + tên đã ở thanh trên */
html.stc-has-titlebar body:has(> .sidebar) .stc-side-foot { border-top: 0; background: transparent; }
/* Màn dựng bằng khối stc-* (đầu trang, thanh lọc, bảng, chân) đã tự có lề 28px => bỏ lề ngang thứ hai của vùng cuộn (trước đây lùi 56px, phí chỗ cho bảng). */
html.stc-has-titlebar body:is([data-view="profiles"], [data-view="groups"], [data-view="activity"]) .views-container { padding-left: 0; padding-right: 0; }
/* mục đang chọn: chỉ tô nền token (không viền) */
html.stc-has-titlebar .sidebar .nav-item.active { box-shadow: none; border-color: transparent; background: var(--stc-fill-active); }

.stc-titlebar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 2147483600;   /* trên lớp phủ "Đang kết nối lại…" (app.js, 2147483000) */
  height: var(--tb-h, 56px); display: flex; align-items: stretch; gap: 0;
  background: transparent; border: 0; box-shadow: none; color: var(--stc-text); box-sizing: border-box;
  font: 13px/1 var(--stc-font);
  -webkit-user-select: none; user-select: none;
  app-region: drag; -webkit-app-region: drag;
}

.stc-tb-brand { display: flex; align-items: center; gap: 9px; padding: 0 14px 0 18px; min-width: 0; flex-shrink: 0; }
.stc-tb-logo { width: 24px; height: 24px; display: block; flex-shrink: 0; }
.stc-tb-name { font-weight: 600; font-size: 15px; letter-spacing: -0.005em; color: var(--stc-text-strong); white-space: nowrap; }
/* Nhãn phiên bản kiểu viên thuốc (như "BitBrowser 7.2.0"): chữ nhỏ vàng, viền 1px vàng trầm, nền trong suốt. Không có phiên bản => ẩn. */
.stc-tb-ver {
  font-size: 11px; line-height: 1; font-weight: 600; letter-spacing: 0.01em; font-variant-numeric: tabular-nums; white-space: nowrap;
  padding: 3px 8px; border-radius: 999px; background: transparent;
  color: var(--stc-accent-text); border: 1px solid color-mix(in srgb, var(--stc-accent) 55%, transparent);
}
.stc-tb-ver:empty { display: none; }

/* Khe GIỮA (dải thông báo ngắn / ô tìm kiếm) và vùng kéo còn trống */
.stc-tb-center { display: flex; align-items: center; min-width: 0; flex: 0 1 auto; padding: 0 8px; }
.stc-tb-center:empty { display: none; }
.stc-tb-drag { flex: 1 1 auto; min-width: 24px; }

/* Khe PHẢI (trước 3 nút cửa sổ): nút biểu tượng có chú thích + huy hiệu, menu tài khoản thả xuống… */
.stc-tb-slot { display: flex; align-items: center; gap: 4px; padding: 0 8px; flex-shrink: 0; }
.stc-tb-slot:empty { display: none; }
.stc-tb-center > *, .stc-tb-slot > *, .stc-tb-win, .stc-titlebar a, .stc-titlebar button, .stc-titlebar input, .stc-titlebar select, .stc-titlebar [data-no-drag] {
  app-region: no-drag; -webkit-app-region: no-drag;
}
.stc-tb-btn {
  position: relative; height: 34px; min-width: 34px; padding: 0 8px; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 0; border-radius: var(--stc-r-ctl); background: transparent; color: var(--stc-muted); font: inherit; cursor: pointer;
  transition: background-color 0.12s ease-out, color 0.12s ease-out;
}
.stc-tb-btn:hover, .stc-tb-btn[aria-expanded="true"] { background: var(--stc-fill-2); color: var(--stc-text-strong); }
.stc-tb-btn svg { width: 18px; height: 18px; display: block; }
/* huy hiệu: chấm (true) hoặc số */
.stc-tb-badge { position: absolute; top: 5px; right: 5px; width: 8px; height: 8px; border-radius: 999px; background: var(--stc-err-solid);
                color: var(--stc-on-err-solid); font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; pointer-events: none; }
.stc-tb-badge[data-n] { top: 2px; right: 0; width: auto; min-width: 16px; height: 16px; padding: 0 4px; }
.stc-tb-badge[hidden] { display: none; }
/* menu thả xuống (vd. tài khoản) */
.stc-tb-menuwrap { position: relative; display: inline-flex; }
.stc-tb-menu { position: absolute; top: calc(100% + 6px); right: 0; min-width: 200px; padding: 6px; margin: 0; list-style: none; z-index: 1;
               background: var(--stc-surface); border: 1px solid var(--stc-border); border-radius: var(--stc-r-card); box-shadow: var(--stc-shadow); }
.stc-tb-menu[hidden] { display: none; }
.stc-tb-menu button { display: flex; width: 100%; align-items: center; gap: 10px; padding: 9px 12px; border: 0; border-radius: var(--stc-r-ctl);
                      background: transparent; color: var(--stc-text); font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
.stc-tb-menu button:hover, .stc-tb-menu button:focus-visible { background: var(--stc-fill-2); color: var(--stc-text-strong); }

/* 3 nút cửa sổ do app tự vẽ (chỉ khi vỏ WebView2 đặt cờ khung tự vẽ; vỏ Chrome dự phòng không có => không vẽ). */
.stc-tb-win { display: flex; align-items: stretch; flex-shrink: 0; }
.stc-tb-wbtn {
  width: 46px; border: 0; padding: 0; margin: 0; background: transparent; color: var(--stc-text);
  display: inline-flex; align-items: center; justify-content: center; cursor: default;
  transition: background-color 0.1s ease-out, color 0.1s ease-out;
}
.stc-tb-wbtn svg { width: 10px; height: 10px; display: block; shape-rendering: crispEdges; }
.stc-tb-wbtn:hover { background: var(--stc-fill-2); }
.stc-tb-wbtn:active { background: var(--stc-fill-active); }
/* nút Đóng đỏ khi rê chuột như Windows: token lỗi đặc của chủ đề (chữ trắng >= 4,5:1) */
.stc-tb-wbtn.close:hover, .stc-tb-wbtn.close:active { background: var(--stc-err-solid); color: var(--stc-on-err-solid); }
.stc-tb-btn:focus-visible, .stc-tb-wbtn:focus-visible { outline: 2px solid var(--stc-focus); outline-offset: -2px; }
.stc-tb-wbtn .ic-restore { display: none; }
.stc-titlebar[data-max="1"] .stc-tb-wbtn .ic-max { display: none; }
.stc-titlebar[data-max="1"] .stc-tb-wbtn .ic-restore { display: block; }

/* Cửa sổ đang không có tiêu điểm: chữ/biểu tượng nhạt đi như khung Windows */
.stc-titlebar[data-active="0"] .stc-tb-name, .stc-titlebar[data-active="0"] .stc-tb-wbtn { opacity: 0.6; }

/* ---- Công cụ toàn cục của app chính trong khe phải (#stc-tb-tools, index.html; app_frame.js chuyển lên): cùng cỡ/kiểu với .stc-tb-btn ----
   Làm mới | Xếp lưới | Lõi | Hỗ trợ | Thông báo | … (hẹp) | Cập nhật | Tài khoản ▾. Nhóm cách nhau bằng khoảng trống, không vạch. */
.stc-tb-tools { display: flex; align-items: center; gap: 4px; }
.stc-tb-tools .stc-frame-tools { gap: 2px; margin: 0; }
.stc-tb-tools .stc-frame-tools[hidden] { display: none; }
.stc-tb-tools .stc-ft-btn { width: 34px; height: 34px; border: 0; border-radius: var(--stc-r-ctl); color: var(--stc-muted); transition: background-color 0.12s ease-out, color 0.12s ease-out; }
.stc-tb-tools .stc-ft-btn:hover, .stc-tb-tools .stc-ft-btn[aria-expanded="true"] { background: var(--stc-fill-2); color: var(--stc-text-strong); border-color: transparent; }
.stc-tb-tools .stc-ft-btn:focus-visible { outline: 2px solid var(--stc-focus); outline-offset: -2px; }
.stc-tb-tools .stc-ft-count, .stc-tb-tools .stc-ft-dot { box-shadow: 0 0 0 2px var(--stc-side); }      /* viền tách huy hiệu khỏi nền thanh */
#stc-ft-more { display: none; }                                                                     /* "…" chỉ hiện khi cửa sổ hẹp (cuối tệp) */
/* nút Cập nhật (updater.js): chấm đỏ khi có bản mới; chú thích thả xuống, canh phải */
.stc-tb-upd { position: relative; display: inline-flex; align-items: center; }
.stc-tb-upd .stc-upd-btn { width: 34px; height: 34px; margin: 0; border: 0; border-radius: var(--stc-r-ctl); }
.stc-tb-upd .stc-upd-btn:hover { background: var(--stc-fill-2); }
.stc-tb-upd .stc-upd-btn[data-upd-state="urgent"] { border: 1px solid var(--stc-err); }
.stc-tb-upd .stc-upd-btn:focus-visible { outline: 2px solid var(--stc-focus); outline-offset: -2px; }
.stc-tb-upd .stc-upd-dot { top: 5px; right: 5px; box-shadow: 0 0 0 2px var(--stc-side); }
.stc-tb-upd .stc-upd-tip { top: calc(100% + 8px); left: auto; right: 0; width: 260px; z-index: 2; }
/* tài khoản: ảnh đại diện + tên ▾ (vai trò nằm ở đầu menu và trong tên truy cập của nút) */
.stc-tb-tools .stc-account { margin-left: 4px; }
.stc-tb-tools .stc-account > button { width: auto; max-width: 220px; height: 34px; padding: 0 8px 0 4px; gap: 8px; border: 0; border-radius: var(--stc-r-ctl); font-size: 13.5px; }
.stc-tb-tools .stc-account > button:hover, .stc-tb-tools .stc-account > button[aria-expanded="true"] { background: var(--stc-fill-2); border-color: transparent; }
.stc-tb-tools .stc-account > button:focus-visible { outline: 2px solid var(--stc-focus); outline-offset: -2px; }
.stc-tb-tools .stc-avatar { width: 26px; height: 26px; font-size: 12.5px; }
.stc-tb-tools .stc-who { flex: 0 1 auto; }
.stc-tb-tools .stc-who-name { max-width: 150px; font-weight: 500; color: var(--stc-text); }
.stc-tb-tools .stc-who-role { display: none; }
.stc-tb-tools .stc-account > .stc-menu { position: absolute; top: calc(100% + 6px); right: 0; left: auto; bottom: auto; }
.stc-menu-who { display: flex; align-items: center; gap: 10px; padding: 6px 12px 8px; }
.stc-menu-who .stc-avatar { width: 34px; height: 34px; font-size: 14px; }
.stc-menu-who-t { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.stc-menu-who-t b { color: var(--stc-text-strong); font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stc-menu-who-t span { color: var(--stc-muted); font-size: 12.5px; }
.stc-menu-who + button { margin-top: 2px; }
/* Giao diện sáng/tối trong menu: mục đang dùng có chấm vàng ở cuối hàng */
#stc-account-menu [role="menuitemradio"][aria-checked="true"] { color: var(--stc-text-strong); }
#stc-account-menu [role="menuitemradio"][aria-checked="true"]::after { content: ""; margin-left: auto; width: 7px; height: 7px; border-radius: 50%; background: var(--stc-accent); flex-shrink: 0; }
/* biểu tượng trong menu "…" (popover dùng chung của profiles_view.js) */
.stc-menu svg.stc-mi { width: 16px; height: 16px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; color: var(--stc-muted); }
/* Đang có hộp thoại (lớp phủ che nội dung nhưng không che thanh trên): công cụ tạm không bấm được, như phần nội dung bên dưới lớp phủ. 3 nút cửa sổ vẫn dùng được. */
html.stc-has-titlebar body:has(.stc-modal-bg, .modal-overlay.open) .stc-tb-tools { pointer-events: none; opacity: 0.45; }

/* Cửa sổ hẹp: Xếp lưới / Lõi / Hỗ trợ dồn vào menu "…"; tài khoản chỉ còn ảnh đại diện (stc_theme.css <= 900px). */
@media (max-width: 860px) {
  .stc-tb-tools .stc-ft-btn[data-ovf] { display: none; }
  .stc-tb-tools #stc-ft-more { display: inline-flex; }
}
@media (max-width: 640px) { .stc-tb-ver, .stc-tb-center { display: none; } }
@media (prefers-reduced-motion: reduce) { .stc-tb-btn, .stc-tb-wbtn { transition: none; } }