/* =============================================================================
 * bulbal-shell.css — khung vỏ ứng dụng Bulbal Chat (nạp SAU bulbal-tokens.css).
 *
 * Sở hữu: #mountPoint, #app-container, #sidepanel, #side-caption-panel (+
 * #self-avatar, #sidepanel-title), #topic-view, #topic-caption-panel (+
 * #topic-title-group, #topic-title, #topic-last-seen), .caption-panel,
 * div.info-box, #dummy-view, #messages-container (chỉ nền chấm + layout
 * ngoài — #scroller/nội dung tin nhắn thuộc P03), a#hide-message-view.
 *
 * CHỈ dùng var(--bb-*) khai báo ở bulbal-tokens.css — KHÔNG hardcode màu ở
 * đây (kể cả rgba). Mọi số đo tương phản đã tính trong report kèm phase.
 * ============================================================================= */

/* ── 1. Tràn màn hình + gốc typography ────────────────────────────────────
 * Upstream dựng app như "thẻ nổi": #mountPoint padding 1rem + #app-container
 * max-width 84rem (+114rem ở >=1440px) + bo góc + đổ bóng. Chat nội bộ dùng
 * cả ngày => tràn viền. #app-container cũng là nơi gán font-family/size/màu
 * chữ GỐC cho toàn app — P02/03/04 kế thừa qua inheritance, chỉ cần chỉnh
 * chỗ khác biệt. */
#mountPoint {
  padding: 0;
}

#app-container {
  max-width: none;
  border-radius: 0;
  box-shadow: none;
  background-color: var(--bb-bg-chat);
  font-family: var(--bb-font);
  font-size: var(--bb-fs-base);
  color: var(--bb-txt-1);
}

/* ── 2. Sidepanel — cột danh sách hội thoại ───────────────────────────────── */
#sidepanel {
  width: var(--bb-side-w);
  min-width: var(--bb-side-w);
  background-color: var(--bb-bg-side);
  border-right: 1px solid var(--bb-line);
}

/* ── 3. .caption-panel dùng chung (side/topic/info) ───────────────────────
 * Bỏ box-shadow mặc định của upstream, chuyển sang border-bottom mảnh; bỏ
 * padding đều 0.5rem để mỗi header tự set padding theo mockup. Áp dụng cho
 * cả #info-caption-panel (không phase nào sở hữu riêng) để 3 header đồng bộ
 * chiều cao (--caption-panel-height) + kiểu viền, tránh 1 header bị "mồ côi"
 * nhìn khác hẳn 2 header kia. */
.caption-panel {
  gap: 12px;
  padding: 0 16px;
  border-bottom: 1px solid var(--bb-line);
  box-shadow: none;
}

/* ── 3.1 Header sidebar: avatar mình + tên + 2 icon ───────────────────────
 * Nền/chữ khai báo TƯỜNG MINH bằng --bb-hdr-bg/--bb-hdr-txt (không ăn theo
 * --bb-brand/--bb-sel) — đúng gotcha đã ghi trong tokens.css mục 4. */
#side-caption-panel {
  background-color: var(--bb-hdr-bg);
  color: var(--bb-hdr-txt);
  padding: 0 12px 0 16px;
}

#self-avatar {
  width: 40px;
  height: 40px;
  min-width: 40px;
  flex: 0 0 40px;
  border-radius: 50%;
}

#self-avatar img.avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  /* Viền trong khớp màu nền header thật (--bb-hdr-bg), KHÔNG dùng --bb-bg-side
   * như bản mockup gốc — mockup giả định header nền trắng, ở đây header là
   * banner xanh nên viền trong phải cùng tông mới liền mạch (xem report). */
  box-shadow: 0 0 0 2px var(--bb-hdr-bg), 0 0 0 4px var(--bb-avatar-ring);
}

#sidepanel-title {
  flex: 1;
  min-width: 0;
  margin: 0;
  display: flex;
  align-items: center;
  font-size: var(--bb-fs-title);
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--bb-hdr-txt);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* DOM thật: 2 icon nằm trong 1 <div> KHÔNG tên (anh em sau #sidepanel-title),
 * mỗi icon là <a><i class="material-icons">…</i></a> — KHÁC cấu trúc phẳng mà
 * mockup giả định (mockup style thẳng lên .material-icons, không có <a> bọc
 * ngoài). #sidepanel-title đã flex:1 nên tự đẩy khối icon này sát phải, không
 * cần margin-left:auto. Selector cấu trúc theo đúng khuyến nghị dom-map. */
#side-caption-panel > div:last-child {
  display: flex;
  align-items: center;
  gap: 2px;
}

#side-caption-panel a {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  margin: 0;
  border-radius: 50%;
  color: var(--bb-hdr-txt);
  transition: background var(--bb-dur) var(--bb-ease),
              color var(--bb-dur) var(--bb-ease),
              transform var(--bb-dur) var(--bb-ease);
}

#side-caption-panel a .material-icons {
  font-size: 22px;
}

#side-caption-panel a:hover {
  background: var(--bb-hdr-hover-bg);
  color: var(--bb-hdr-txt-hover);
  transform: scale(1.06);
}

/* ── 3.2 Thanh thông báo (info-box) — banner mềm, không chiếm chỗ khi ẩn ──
 * KHÔNG đổi `display` (mặc định none, base.css chỉ bật flex khi có class
 * .error/.warning/.info) — chỉ restyle hình dạng dùng chung + màu riêng cho
 * biến thể .info (đúng với banner xanh trong mockup). .error/.warning giữ
 * nguyên màu đỏ/vàng theo ngữ nghĩa cảnh báo của base.css, không đụng tới. */
.info-box {
  margin: 10px 12px 2px;
  padding: 9px 12px;
  border-radius: 12px;
  font-size: 12.5px;
  line-height: 1.45;
  font-weight: 500;
}

.info-box.info {
  color: var(--bb-info-txt);
  background-color: var(--bb-info-bg);
  border: 1px solid var(--bb-info-border);
}

/* ── 4. Topic view — khung chat ───────────────────────────────────────────── */
#topic-view {
  min-width: 0;
  background-color: var(--bb-bg-chat);
}

/* ── 4.1 Header khung chat ─────────────────────────────────────────────────
 * Div rỗng giữa #topic-title-group và nút more_vert có style="margin-left:auto"
 * INLINE trong DOM thật. Không cần !important: cho #topic-title-group flex:1
 * để nó tự chiếm hết khoảng trống trước, div rỗng kia không còn gì để đẩy nên
 * vô hại — nút more_vert vẫn nằm sát phải đúng ý đồ mockup. */
#topic-caption-panel {
  background: var(--bb-bg-bar);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: var(--bb-sh-1);
  gap: 13px;
  padding: 0 18px;
  position: relative;
  z-index: 4;
}

#topic-caption-panel .avatar-box {
  width: 42px;
  height: 42px;
  min-width: 42px;
  flex: 0 0 42px;
  font-size: 24px;
  margin-right: 0;
}

#topic-caption-panel .avatar-box img.avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

/* ── AVATAR MÉO — vá toàn cục (31/07/2026) ────────────────────────────────
 * Ảnh nhân viên đồng bộ từ HRM là ảnh chụp điện thoại DỌC (đo thực tế:
 * 1536×2048 và 960×1280, tỉ lệ 3:4), không qua bước cắt vuông của Tinode.
 * Khung avatar thì luôn vuông ⇒ nếu để `object-fit` mặc định (`fill`), ảnh
 * bị kéo giãn ngang ~33%, mặt người bè ra.
 *
 * Trước bản vá chỉ 2 selector rất hẹp được đặt cover (#self-avatar và
 * #topic-caption-panel), nên còn méo ở: avatar to trong panel thông tin
 * (img.preview) và avatar người gửi trên MỌI bong bóng tin nhắn (10/10 ảnh
 * khi đo). Gom về một rule thay vì rải cover từng nơi — thêm màn mới sau này
 * không phải nhớ đặt lại.
 *
 * `cover` = giữ nguyên tỉ lệ, cắt bớt phần thừa. Ảnh chân dung dọc bị cắt
 * trên/dưới, khuôn mặt (thường ở giữa-trên) vẫn nguyên — đúng cách Zalo làm. */
img.avatar,
.avatar-upload img.preview {
  object-fit: cover;
}

#topic-title-group {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

#topic-title {
  font-size: var(--bb-fs-title);
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--bb-txt-1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#topic-last-seen {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--bb-txt-2);
}

/* .is-online: chưa xác nhận được trong dump dom-map (chỉ thấy text tĩnh "105
 * người theo dõi") — giữ phòng hờ theo mockup, vô hại nếu JS không gắn class
 * này. P05 xác nhận bằng ảnh chat 1-1 với người đang online. */
#topic-last-seen.is-online {
  color: var(--bb-online-txt);
}

/* ── 4.2 Vùng tin nhắn — nền chấm rất nhạt thay cho wallpaper ────────────────
 * Lớp phủ nền thật của #messages-container là pseudo-element ::before (xem
 * base.css:1800) — chính nó mới là thứ hiển thị (z-index 0, phủ kín), nên phải
 * ghi đè ở ::before, không phải background trên chính #messages-container.
 * Điều này CHỦ ĐỘNG tắt tính năng wallpaper tuỳ chỉnh cũ (ảnh nền do người
 * dùng chọn trong Cài đặt) — đúng ý đồ mockup, không phải sơ suất. */
#messages-container {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

#messages-container::before {
  background-color: var(--bb-bg-chat);
  background-image: radial-gradient(circle at 1px 1px, var(--bb-dot) 1px, transparent 0);
  background-size: 22px 22px;
  filter: none;
}

/* ── 5. Màn hình trống thân thiện hơn ─────────────────────────────────────────
 * Giữ hành vi cũ (ẩn dòng phiên bản client/server, chỉ hiện logo + tên app),
 * đổi màu nền/chữ sang token mới cho đồng bộ với --bb-bg-chat xung quanh. */
#dummy-view {
  background-color: var(--bb-bg-chat);
}

#dummy-view p {
  display: none;
}

#dummy-view h2 {
  color: var(--bb-txt-2);
  font-weight: 500;
}

/* ── 6. Mobile ≤640px — 1 cột, header chừa safe-area ─────────────────────────
 * Breakpoint 640px là của base.css (base.css:3816), không tự chế mốc khác. */
@media (max-width: 640px) {
  /* #sidepanel{width:var(--bb-side-w)} ở mục 2 KHÔNG nằm trong media nên áp
   * dụng ở mọi kích thước màn hình; nếu không khai báo lại ở đây, nó sẽ đè lên
   * rule width:100% của base.css (cùng specificity 1 ID, file này nạp SAU nên
   * thắng) — phải re-assert để không vỡ layout 1 cột trên mobile. */
  #sidepanel {
    width: 100%;
    min-width: 0;
  }

  .caption-panel {
    height: calc(var(--caption-panel-height) + env(safe-area-inset-top));
    padding-top: env(safe-area-inset-top);
  }

  a#hide-message-view {
    width: var(--bb-touch);
    height: var(--bb-touch);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
  }
}