/* ============================================================
   IZIGO — Video Call Centre PoC  |  Style dùng chung kiosk + console
   M7 Redesign: theme sáng, Plus Jakarta Sans, design tokens
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');

/* ── Design tokens ────────────────────────────────────────── */
:root {
  /* Surfaces */
  --bg:        #F4F6F9;
  --surface:   #FFFFFF;
  --surface-2: #F8FAFC;
  --muted:     #EEF2F6;

  /* Text */
  --text:   #0F172A;
  --text-2: #475569;
  --text-3: #94A3B8;

  /* Accent */
  --accent:      #0369A1;
  --accent-hover:#075985;
  --accent-soft: #E0F2FE;
  --on-accent:   #FFFFFF;

  /* Trạng thái */
  --success:      #16A34A;
  --success-soft: #DCFCE7;
  --warning:      #B45309;
  --warning-soft: #FEF3C7;
  --danger:       #DC2626;
  --danger-hover: #B91C1C;

  /* Viền + bóng + bo góc */
  --border:       #E2E8F0;
  --border-strong:#CBD5E1;
  --ring:         rgba(3, 105, 161, .35);
  --shadow-sm:    0 1px 2px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.08);
  --shadow-md:    0 4px 12px rgba(15,23,42,.08), 0 2px 4px rgba(15,23,42,.05);
  --shadow-lg:    0 12px 32px rgba(15,23,42,.12), 0 4px 8px rgba(15,23,42,.06);
  --radius-sm:    8px;
  --radius:       12px;
  --radius-lg:    16px;
  --radius-pill:  999px;

  /* Motion */
  --t: 160ms cubic-bezier(.2, .6, .2, 1);
}

/* ── Accessibility: tắt animation khi user yêu cầu ────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
    transform: none !important;
  }
}

/* ── Reset cơ bản ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

/* JS toggle attribute [hidden] để ẩn #lobby/#setup/#call v.v. */
[hidden] { display: none !important; }

/* ── Body ─────────────────────────────────────────────────── */
body {
  margin: 0;
  font-family: 'Plus Jakarta Sans', system-ui, 'Segoe UI', sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* ── Main ─────────────────────────────────────────────────── */
/* Kiosk có 3 <main> (lobby/setup/call); console có 1 <main>
   Rule chung: khung giữa + padding thoáng cho cả hai */
main {
  max-width: 960px;
  margin: 0 auto;
  padding: 28px 20px;
}
/* Cockpit (Workstream C): console = grid 3 cột full-width — bỏ clamp 960px
   CHỈ cho console (kiosk giữ nguyên). Grid/padding đặt ở console.html. */
body.console main {
  max-width: none;
}

/* ── Typography ───────────────────────────────────────────── */
h1 {
  font-size: 22px;
  font-weight: 700;
  margin: 8px 0 4px;
  color: var(--text);
}
h2 {
  font-size: 17px;
  font-weight: 600;
  margin: 0 0 12px;
  color: var(--text);
}

/* Hint / chú thích nhỏ */
.hint {
  color: var(--text-3);
  font-size: 13px;
  margin: 0;
}

/* Trạng thái ngắn (vd "Đang kết nối…") */
.status {
  color: var(--text-2);
  font-size: 13px;
  min-height: 18px;
}

/* ── Form ─────────────────────────────────────────────────── */
label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
}

input {
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  font-size: 15px;
  font-family: inherit;
  transition: border-color var(--t), box-shadow var(--t);
  outline: none;
}
input:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--ring);
}

/* ── Button — 3 cấp ──────────────────────────────────────── */
button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  min-height: 44px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font-size: 15px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: background var(--t), border-color var(--t), box-shadow var(--t), transform var(--t);
  outline: none;
  white-space: nowrap;
}
button:hover {
  background: var(--muted);
  border-color: var(--border-strong);
}
button:active  { transform: scale(.98); }
button:focus-visible {
  box-shadow: 0 0 0 4px var(--ring);
  border-color: var(--accent);
}

/* Primary (nút chính: gọi, xác nhận …) — thêm class .primary hoặc dùng #join button */
#join button,
button.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}
#join button:hover,
button.primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}

/* Danger (kết thúc cuộc gọi, hủy) */
button.danger {
  background: var(--danger);
  border-color: var(--danger);
  color: #fff;
}
button.danger:hover {
  background: var(--danger-hover);
  border-color: var(--danger-hover);
}

/* ── #join — form tham gia nhanh ─────────────────────────── */
#join {
  max-width: 420px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ── Grid video tiles ────────────────────────────────────── */
#grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}

/* ── Tile video ───────────────────────────────────────────── */
/* Luôn nền đen để video không nhấp nháy khi stream chưa tải */
.tile {
  position: relative;
  background: #000;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: transform var(--t), box-shadow var(--t);
}
.tile:hover {
  transform: scale(1.01);
  box-shadow: var(--shadow-md);
}
.tile video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Caption dưới-trái: nền tối bán trong suốt */
.tile .label {
  position: absolute;
  left: 8px;
  bottom: 8px;
  padding: 3px 9px;
  border-radius: 6px;
  background: rgba(0, 0, 0, .60);
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .01em;
}

/* Tile zoom (console click để phóng to) */
.tile.zoom {
  grid-column: 1 / -1;
  aspect-ratio: 16 / 9;
}

/* ── Controls bar ─────────────────────────────────────────── */
.controls {
  display: flex;
  gap: 10px;
  margin-top: 14px;
  flex-wrap: wrap;
  align-items: center;
}

/* ── Nút gọi lớn (kiosk hero) ────────────────────────────── */
.big-call {
  font-size: 26px;
  font-weight: 700;
  padding: 26px 64px;
  min-height: 88px;
  margin-top: 16px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}
.big-call:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  box-shadow: var(--shadow-lg);
}

/* ── Section title ───────────────────────────────────────── */
.section-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin: 16px 0 8px;
}

/* Danh sách rỗng */
.empty {
  color: var(--text-3);
  font-size: 14px;
  padding: 12px 0;
}

/* ── Danh sách cuộc gọi đến (console) ───────────────────── */
.calls {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 8px 0;
}

/* Card cuộc gọi (JS đổ vào, hoặc #screenpop) */
.call-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-wrap: wrap; /* rail hẹp: nút Nhận rớt xuống dòng riêng thay vì bóp nát .meta */
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  transition: box-shadow var(--t);
}
.call-card:hover { box-shadow: var(--shadow-md); }
.call-card .meta {
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.5;
}
.call-card .meta b { color: var(--text); font-weight: 600; }

/* ── Badge trạng thái ─────────────────────────────────────── */
/* Chú ý: chữ ĐỦ CONTRAST với nền nhạt, không dùng chữ trắng trên nền nhạt */
.badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  letter-spacing: .02em;
}
.badge.waiting {
  background: var(--warning-soft);
  color: var(--warning);
}
.badge.active {
  background: var(--success-soft);
  color: var(--success);
}

/* ── Toast thông báo ─────────────────────────────────────── */
.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  background: var(--text);       /* slate-900 */
  color: #fff;
  padding: 11px 20px;
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 500;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t), transform var(--t);
  white-space: nowrap;
  z-index: 9999;
}
.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ── Zone bar — chọn vùng giao tiếp ────────────────────────
   M4: trong/ngoài cửa; dùng trong controls bar                */
.zone-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.zone-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-2);
  white-space: nowrap;
}
/* Zone btn = secondary style */
.zone-btn {
  min-height: 36px;
  padding: 6px 14px;
  font-size: 13px;
  border-radius: var(--radius-pill);
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  transition: background var(--t), color var(--t), border-color var(--t);
}
.zone-btn:hover {
  background: var(--muted);
  border-color: var(--border-strong);
}
/* Vùng đang kết nối */
.zone-btn.active {
  background: var(--success);
  border-color: var(--success);
  color: #fff;
}
.zone-btn.active:hover {
  background: var(--success);
  border-color: var(--success);
}

/* ── Lang bar — chọn ngôn ngữ khách (console) M5 ─────────── */
.lang-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.lang-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-2);
  white-space: nowrap;
}
/* Select ngôn ngữ */
.lang-select {
  padding: 7px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
  transition: border-color var(--t), box-shadow var(--t);
  outline: none;
}
.lang-select:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--ring);
}

/* ── Phụ đề 2 chiều — panel cố định bên phải, chia trên/dưới ─
   Part B: log cuộn 10 dòng + live line (partial đang nói).
   M5: .out = lời gốc chính mình (ASR), .in = người kia đã dịch.
   Nền TỐI bán trong suốt để đọc được dù theme sáng.           */
#subs {
  position: fixed;
  right: 16px;
  top: 88px;
  /* KHÔNG kéo tới đáy — panel cao theo nội dung, tránh đè hàng nút (endBtn) */
  max-height: calc(100vh - 104px);
  width: min(360px, 32vw);
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 30;
  pointer-events: none;
}
.sub-line {
  padding: 9px 16px;
  background: rgba(15, 23, 42, .9);   /* slate-900 — tương phản cao để đọc rõ */
  color: #fff;
  font-size: 15px;
  line-height: 1.6;
  border-radius: var(--radius-sm);
  border-left: 3px solid transparent; /* placeholder — override bên dưới */
  flex: 0 1 auto; /* cao theo nội dung; co lại khi panel chạm max-height (log vẫn cuộn) */
  min-height: 0;
  display: flex;
  flex-direction: column;
  pointer-events: auto;
  overflow: hidden;
}
/* Log cuộn (các dòng đã chốt) */
.sub-log {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sub-log .line {
  padding: 4px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  white-space: pre-wrap;
  word-break: break-word;
}
/* Live line (partial đang nói) — hơi mờ + nghiêng để phân biệt với dòng đã chốt */
.sub-line .txt {
  font-style: italic;
  color: rgba(255, 255, 255, .70);
  white-space: pre-wrap;
  word-break: break-word;
  min-height: 1em;
}
/* Tên người nói nhỏ hơn, mờ hơn */
.sub-line .who {
  color: rgba(255, 255, 255, .70);
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: .04em;
  flex-shrink: 0;
}
/* Người kia (đã dịch sang tiếng mình) */
.sub-line.in  { border-left-color: var(--success); }
/* Chính mình (lời gốc đang ASR) */
.sub-line.out { border-left-color: var(--accent); }
/* Cockpit (Workstream C): console dùng #subs.subs-feed đặt TĨNH trong rail phải
   (#convoRail) — bỏ hẳn position:fixed + clamp magic-number cũ (D-6), hết cảnh
   panel đè lên khu điều khiển/#endBtn. */
body.console #subs.subs-feed {
  position: static;
  width: auto;
  max-height: 50vh;
  pointer-events: auto;
  flex-shrink: 0;
}

/* Responsive: màn nhỏ → panel dưới video thay vì đè bên phải */
@media (max-width: 900px) {
  #subs:not(.subs-feed) {
    position: static;
    right: auto;
    top: auto;
    bottom: auto;
    width: auto;
  }
  .sub-line {
    max-height: 30vh;
  }
}

/* ── Subs feed — card hội thoại kiểu chat (kiosk + display + console) ──
   M-redesign Task2: markup mới #subs.subs-feed (.sub-head + #subFeed.sub-feed +
   .sub-live chứa 2 .sub-line partial). Cockpit (Workstream C): console cũng
   chuyển sang markup feed này (đặt tĩnh trong rail phải — xem rule body.console
   ở trên); style #subs/.sub-log tối cũ phía trên thành dead code, giữ nguyên.
   Card kính trắng, chữ tối, bong bóng chat. */
#subs.subs-feed {
  pointer-events: auto;
  gap: 0; /* bỏ gap 10px của #subs gốc — card chia khu bằng border, không cần khe */
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(8px);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.sub-head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.sub-head svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  stroke-width: 1.75;
  fill: none;
  flex-shrink: 0;
}
/* Log các lượt lời đã chốt (final) — JS append .sub-bubble vào đây rồi cuộn đáy */
.sub-feed {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
}
.sub-bubble {
  max-width: 82%;
  font-size: 15px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  padding: 8px 12px;
  color: var(--text);
}
/* Người kia (đã dịch sang tiếng mình) — bong bóng trái */
.sub-bubble.in {
  align-self: flex-start;
  background: var(--accent-soft);
  border-radius: 14px 14px 14px 4px;
}
/* Chính mình (lời gốc đang ASR) — bong bóng phải */
.sub-bubble.out {
  align-self: flex-end;
  background: var(--success-soft);
  border-radius: 14px 14px 4px 14px;
}
/* Hàng đang-nói (partial) — đáy card, dưới log .sub-feed */
.sub-live {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 12px 12px;
  border-top: 1px solid var(--border);
}
/* Không ai đang nói → ẩn cả khu live, tránh dải footer rỗng dưới card */
.subs-feed .sub-live:not(:has(.sub-line.typing)) {
  display: none;
}
/* .sub-line tái dụng cho partial trong card mới: ẩn mặc định, JS bật .typing
   khi có partial đang nói. Restyle .txt thành bong bóng nhạt chữ tối — bỏ hẳn
   nền slate tối / italic của .sub-line gốc (dùng cho console, giữ nguyên trên). */
.subs-feed .sub-line {
  display: none;
  background: none;
  border-left: none;
  padding: 0;
  overflow: visible;
}
.subs-feed .sub-line.typing { display: flex; }
.subs-feed .sub-line .who {
  color: var(--text-3);
  text-transform: none;
  letter-spacing: normal;
}
.subs-feed .sub-line.out { align-items: flex-end; }
.subs-feed .sub-line.in { align-items: flex-start; }
.subs-feed .sub-line .txt {
  font-style: normal;
  color: var(--text);
  white-space: pre-wrap;
  word-break: break-word;
  padding: 8px 12px;
  border-radius: 14px;
  display: inline-block;
  max-width: 82%;
  min-height: 0;
}
.subs-feed .sub-line.out .txt { background: var(--success-soft); border-radius: 14px 14px 4px 14px; }
.subs-feed .sub-line.in .txt { background: var(--accent-soft); border-radius: 14px 14px 14px 4px; }

/* ── Devmap — panel chọn thiết bị ──────────────────────────
   M5/M6: nhân viên tự chọn Mic+Loa                           */
.devmap {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.devmap label {
  font-size: 14px;
  font-weight: 500;
}
.devmap select {
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
  outline: none;
  transition: border-color var(--t), box-shadow var(--t);
}
.devmap select:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--ring);
}
.devmap select.invalid {
  border-color: #e11d48;
}

/* ── Các panel/section card (lobby, setup, screenpop v.v.) ── */
#lobby,
#setup,
#agentSetup {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 24px 20px;
}

/* (D-7 cũ — console #lobby fixed căn giữa — ĐÃ BỎ: Cockpit đặt #lobby vào cột
   giữa của grid 3 cột, xem console.html.) */

/* Kiosk lobby: căn giữa màn, hero (chỉ áp cho trang kiosk qua body.kiosk;
   console cũng có #lobby nhưng là khu làm việc, không hero) */
.kiosk #lobby {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 12px;
  /* Card gọn tự co theo nội dung, căn giữa cả 2 trục màn kiosk
     (fixed + inset 0 + margin auto — card không bị kéo cao full màn) */
  position: fixed;
  inset: 0;
  margin: auto;
  width: min(480px, calc(100vw - 32px));
  height: fit-content;
  max-height: calc(100vh - 24px);
  overflow: auto;
  padding: 40px 24px;
}

/* ── Status2 — dòng trạng thái trong cuộc gọi ────────────── */
#status2 {
  font-size: 13px;
  color: var(--text-2);
  min-height: 18px;
}

/* ── kioskMeta — thông tin kiosk nhỏ ─────────────────────── */
#kioskMeta {
  font-size: 12px;
  color: var(--text-3);
  margin-top: 4px;
}

/* ── zoneStatus — nhãn vùng hiện tại ─────────────────────── */
#zoneStatus {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
}

/* ── queueInfo — thông tin hàng chờ (console) ─────────────── */
#queueInfo {
  font-size: 14px;
  color: var(--text-2);
}

/* ── agentName — tên nhân viên header ─────────────────────── */
#agentName {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}

/* ── screenpop — card popup cuộc gọi đến ─────────────────── */
#screenpop {
  border: 2px solid var(--accent-soft);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-md);
  padding: 16px;
}

/* ── Icon button (gear, mic v.v.) ────────────────────────── */
.icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  min-height: unset;
  padding: 0;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-2);
  cursor: pointer;
  transition: background var(--t), color var(--t), box-shadow var(--t);
  outline: none;
}
.icon-button:hover {
  background: var(--muted);
  color: var(--text);
}
.icon-button:focus-visible {
  box-shadow: 0 0 0 4px var(--ring);
  border-color: var(--accent);
}

/* D-8: #setupBtn (kiosk, góc trên phải) — hit area 40×40 dưới ngưỡng chạm 44×44.
   Giữ kích thước icon bên trong nguyên vẹn, chỉ nới khung nút. */
#setupBtn {
  width: 44px;
  height: 44px;
}
.icon-button svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  stroke-width: 1.75;
  fill: none;
  pointer-events: none;
}

/* ── Responsive ──────────────────────────────────────────── */

/* ≥768px: padding rộng hơn, tile tối thiểu lớn hơn */
@media (min-width: 768px) {
  main { padding: 32px 24px; }
  #grid { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
}

/* ≥1024px */
@media (min-width: 1024px) {
  main { padding: 36px 32px; }
  #grid { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
}

/* ≥1440px: giới hạn grid để không quá rộng */
@media (min-width: 1440px) {
  main { max-width: 1280px; }
}

/* ── Door-display in-call layout — Workstream A: mirror bố cục kiosk trong ──
   Lưới trái (cam) + rail phải 33vw: promo GIỮ chạy (mute qua JS, không remount)
   phát tiếp phía trên rail, phụ đề (#subs.subs-feed) xếp dưới promo trong rail.
   Lưới trái rows 1.7fr/1fr, cols 1fr/1fr trên nền config bgOuter (giống
   body.call-layout kiosk.html): agent to hàng trên (span 2 cột), hàng dưới
   khách cam:door ↙ + cam thứ 2 ↘ (mặc định cam:doc — SECOND_CAM display.js). */
#promo { position: fixed; inset: 0; z-index: 50; background: #000; }
body.display-incall { --pad: 20px; --gap: 16px; --rail: 33vw; }
body.display-incall #callUi #grid {
  position: absolute;
  left: var(--pad);
  top: var(--pad);
  bottom: var(--pad);
  right: calc(var(--rail) + var(--pad) + var(--gap));
  display: grid;
  grid-template-rows: 1.7fr 1fr;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
  padding: 0;
  box-sizing: border-box;
}
body.display-incall #callUi .tile {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
body.display-incall #callUi .tile[data-kind="agent"] {
  grid-row: 1;
  grid-column: 1 / -1;
  aspect-ratio: auto;
}
body.display-incall #callUi .tile[data-kind="agent"] video {
  object-fit: cover;
}
body.display-incall #callUi .tile[data-cam="cam:door"] {
  grid-row: 2;
  grid-column: 1;
  aspect-ratio: auto;
  border: 3px solid #fff;
}
/* Cam thứ 2 hàng dưới — viết CẢ 2 selector để đổi SECOND_CAM (display.js)
   không phải sửa CSS; runtime chỉ tồn tại 1 trong 2 tile. */
body.display-incall #callUi .tile[data-cam="cam:doc"],
body.display-incall #callUi .tile[data-cam="cam:desk"] {
  grid-row: 2;
  grid-column: 2;
  aspect-ratio: auto;
}
body.display-incall #callUi .tile .label {
  display: none;
}
/* Promo — rail phải trên, GIỮ nguyên element (không remount/pause), chỉ đổi vị trí/kích thước */
body.display-incall #promo {
  inset: auto;
  top: var(--pad);
  right: var(--pad);
  width: var(--rail);
  height: calc(var(--rail) * 9 / 16);
  z-index: 58;
  border-radius: var(--radius-lg);
  overflow: hidden;
}
/* Phụ đề — rail phải dưới, ngay dưới promo, chạy hết chiều cao còn lại */
body.display-incall #subs.subs-feed {
  position: fixed;
  right: var(--pad);
  top: calc(var(--pad) + var(--rail) * 9 / 16 + var(--gap));
  bottom: var(--pad);
  width: var(--rail);
  max-height: none;
  display: flex;
  flex-direction: column;
  z-index: 58;
}

/* WS-B/D: overlay "đang kết nối" dùng chung kiosk + display — che khoảng mở cam/join
   phòng phía sau. Nền ĐẶC (không composite đè lộ <video>). */
.connect-overlay {
  position: fixed; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 18px;
  background: #0b0d10;
  color: #e7e9ee; font-size: 18px; font-weight: 600; text-align: center;
}
.connect-overlay[hidden] { display: none; }
.co-spinner {
  width: 56px; height: 56px; border-radius: 50%;
  border: 4px solid rgba(255,255,255,.18); border-top-color: var(--accent);
  animation: co-spin 0.9s linear infinite;
}
@keyframes co-spin { to { transform: rotate(360deg); } }

/* D2: bản sao #agentWaiting cho màn display (kiosk có bản inline trong kiosk.html) —
   chiếm đúng ô agent (hàng 1) trong lưới #callUi tới khi tile nhân viên xuất hiện. */
body.display-incall #callUi #agentWaiting {
  position: relative; grid-row: 1; grid-column: 1 / -1;
  background: #000; border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
  display: flex; align-items: center; justify-content: center; color: #cfd3da;
}
body.display-incall #callUi #agentWaiting .aw-inner {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  font-size: 17px; font-weight: 500; animation: aw-pulse 2s ease-in-out infinite;
}
@keyframes aw-pulse { 0%,100% { opacity: .55; transform: scale(1); } 50% { opacity: 1; transform: scale(1.04); } }