/* ============================================================
   Support System — Stylesheet
   ------------------------------------------------------------
   Struktur file:
   1. Design tokens (CSS variables)
   2. Reset & dasar
   3. Komponen umum (tombol, badge, avatar, form)
   4. Top bar
   5. Layout 3 kolom
   6. Sidebar (folder)
   7. Daftar percakapan
   8. Panel detail (thread + composer)
   9. Panel pelanggan
   10. Laporan
   11. Modal & toast
   12. Responsif (tablet & HP)
   ============================================================ */

/* ---------- 1. Design tokens ----------
   Bahasa warna mengikuti app Manage (lidwa-manage › Panel): abu-abu netral
   ala Apple, warna status "lembut" (latar transparan + teks jenuh), garis
   pemisah tipis semi-transparan, dan mode gelap hitam pekat.
   Aksen dipisah dua peran:
     --primary       teks, ikon, garis, cincin fokus (harus terbaca di latar)
     --primary-fill  latar pekat bertulisan putih (tombol utama, badge hitung)
   Di mode gelap keduanya berbeda jauh: teks aksen dibuat terang agar
   terbaca, sedangkan latar tombol tetap cukup gelap untuk tulisan putih. */
:root {
  /* Aksen bawaan: hijau Manage — preset lain di blok "Tema warna" */
  --primary: #17843f;
  --primary-fill: #1d8f47;
  --primary-hover: #187c3d;
  --primary-soft: rgba(29, 143, 71, .11);    /* latar item terpilih, cincin fokus */
  --primary-soft-2: rgba(29, 143, 71, .20);

  /* Netral */
  --bg: #f5f5f7;                   /* latar aplikasi */
  --surface: #ffffff;              /* kartu / panel */
  --surface-2: #f5f5f7;            /* kolom isian, area sekunder */
  --sidebar: #eeeef2;              /* navigasi kiri, sedikit lebih gelap dari latar */
  --fill: rgba(118, 118, 128, .12);   /* tombol biasa */
  --fill-2: rgba(118, 118, 128, .20); /* hover tombol biasa */
  --border: rgba(60, 60, 67, .13);    /* garis pemisah tipis */
  --border-strong: rgba(60, 60, 67, .26);
  --text: #1d1d1f;
  --text-2: #6e6e73;               /* teks sekunder */
  --text-3: #8e8e93;               /* teks redup / placeholder */
  --hover: rgba(0, 0, 0, .04);
  --selected: rgba(0, 0, 0, .07);
  --row-line: rgba(60, 60, 67, .13);
  --toast-bg: #1d1d1f;

  /* Warna status — latar lembut + teks jenuh */
  --success: #17843f;  --success-soft: rgba(29, 143, 71, .11);
  --warning: #b25f00;  --warning-soft: rgba(255, 149, 0, .14);
  --danger: #d92d20;   --danger-soft: rgba(255, 59, 48, .11);
  --neutral: #6e6e73;  --neutral-soft: rgba(118, 118, 128, .12);
  --blue: #0066cc;     --blue-soft: rgba(0, 122, 255, .10);
  --purple: #8944ab;   --purple-soft: rgba(175, 82, 222, .12);
  --teal: #0b7a8c;     --teal-soft: rgba(48, 176, 199, .13);

  /* Catatan internal (kuning-oranye lembut) */
  --note-bg: #fff8e5;
  --note-border: rgba(255, 149, 0, .32);
  --note-accent: #c77700;
  --note-text: #5c3a00;

  /* Kanal WhatsApp */
  --wa-bg: rgba(52, 199, 89, .07);
  --wa-border: rgba(52, 199, 89, .35);
  --wa-soft: rgba(52, 199, 89, .14);
  --wa-text: #17843f;

  /* Efek — bayangan halus menggantikan bingkai tebal */
  --shadow-sm: 0 1px 1px rgba(0, 0, 0, .03), 0 1px 3px rgba(0, 0, 0, .04);
  --shadow-md: 0 0 0 .5px rgba(0, 0, 0, .04), 0 1px 2px rgba(0, 0, 0, .04), 0 4px 18px rgba(0, 0, 0, .045);
  --shadow-lg: 0 0 0 .5px rgba(0, 0, 0, .05), 0 12px 48px rgba(0, 0, 0, .18), 0 2px 10px rgba(0, 0, 0, .07);
  --radius: 12px;
  --radius-lg: 18px;
  --radius-sm: 8px;
  --radius-pill: 999px;         /* kontrol form bergaya elips */

  /* Ketinggian kontrol seragam */
  --control-h: 40px;      /* kolom & tombol di dalam form */
  --control-h-sm: 34px;   /* kontrol toolbar/header berdampingan dgn .btn-sm */

  /* Tipografi: Figtree untuk judul, Barlow untuk teks lainnya */
  --font-body: "Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Figtree", var(--font-body);
}

/* ---------- Tema warna (aksen) ----------
   Dipilih lewat menu profil; disimpan di localStorage 'support-accent' dan
   dituangkan sebagai atribut data-accent pada <html> (hijau = bawaan, tanpa
   atribut). Warna diambil dari palet sistem yang sama dengan app Manage.
   Tiap preset hanya menimpa keluarga --primary; sisanya ikut token dasar. */
:root[data-accent="violet"] { --primary: #8944ab; --primary-fill: #8944ab; --primary-hover: #7a3a9a; --primary-soft: rgba(175, 82, 222, .12); --primary-soft-2: rgba(175, 82, 222, .22); }
:root[data-accent="blue"]   { --primary: #0066cc; --primary-fill: #0071e3; --primary-hover: #0066cc; --primary-soft: rgba(0, 122, 255, .10); --primary-soft-2: rgba(0, 122, 255, .20); }
:root[data-accent="teal"]   { --primary: #0b7a8c; --primary-fill: #0b7a8c; --primary-hover: #096a7a; --primary-soft: rgba(48, 176, 199, .13); --primary-soft-2: rgba(48, 176, 199, .24); }
:root[data-accent="amber"]  { --primary: #b25f00; --primary-fill: #c26a00; --primary-hover: #a85a00; --primary-soft: rgba(255, 149, 0, .14); --primary-soft-2: rgba(255, 149, 0, .26); }
:root[data-accent="rose"]   { --primary: #c9184a; --primary-fill: #d91e52; --primary-hover: #bd1646; --primary-soft: rgba(255, 45, 85, .11); --primary-soft-2: rgba(255, 45, 85, .20); }
:root[data-accent="slate"]  { --primary: #48484a; --primary-fill: #636366; --primary-hover: #545456; --primary-soft: rgba(118, 118, 128, .14); --primary-soft-2: rgba(118, 118, 128, .24); }

/* Versi tema gelap: teks aksen dicerahkan, latar tombol tetap cukup gelap */
:root[data-theme="dark"][data-accent="violet"] { --primary: #d59cff; --primary-fill: #9f55cc; --primary-hover: #ad63da; --primary-soft: rgba(191, 90, 242, .20); --primary-soft-2: rgba(191, 90, 242, .32); }
:root[data-theme="dark"][data-accent="blue"]   { --primary: #5eb0ff; --primary-fill: #0a84ff; --primary-hover: #2b95ff; --primary-soft: rgba(10, 132, 255, .20); --primary-soft-2: rgba(10, 132, 255, .32); }
:root[data-theme="dark"][data-accent="teal"]   { --primary: #6ad8e8; --primary-fill: #1f8a9c; --primary-hover: #2598ab; --primary-soft: rgba(64, 200, 224, .18); --primary-soft-2: rgba(64, 200, 224, .30); }
:root[data-theme="dark"][data-accent="amber"]  { --primary: #ffb340; --primary-fill: #c26d00; --primary-hover: #d17a00; --primary-soft: rgba(255, 159, 10, .18); --primary-soft-2: rgba(255, 159, 10, .30); }
:root[data-theme="dark"][data-accent="rose"]   { --primary: #ff6482; --primary-fill: #d6304f; --primary-hover: #e23d5c; --primary-soft: rgba(255, 55, 95, .18); --primary-soft-2: rgba(255, 55, 95, .30); }
:root[data-theme="dark"][data-accent="slate"]  { --primary: #c7c7cc; --primary-fill: #636366; --primary-hover: #737378; --primary-soft: rgba(118, 118, 128, .24); --primary-soft-2: rgba(118, 118, 128, .36); }

/* Logo & gradien mengikuti warna aksen aktif */
.brand-logo { background: linear-gradient(135deg, var(--primary-fill), var(--primary-hover)); }

/* ---------- Tema gelap ----------
   Diaktifkan lewat atribut data-theme="dark" pada <html>.
   Preferensi disimpan di localStorage ('support-theme':
   'light' | 'dark' | 'system') — lihat setupTheme() di app.js.
   Latar hitam pekat, permukaan #1c1c1e/#2c2c2e — seperti app Manage. */
:root[data-theme="dark"] {
  --primary: #4cd97b;
  --primary-fill: #248a47;
  --primary-hover: #2b9a52;
  --primary-soft: rgba(48, 209, 88, .16);
  --primary-soft-2: rgba(48, 209, 88, .28);

  --bg: #000000;
  --surface: #1c1c1e;
  --surface-2: #2c2c2e;
  --sidebar: #141416;
  --fill: rgba(118, 118, 128, .24);
  --fill-2: rgba(118, 118, 128, .36);
  --border: rgba(84, 84, 88, .55);
  --border-strong: rgba(84, 84, 88, .85);
  --text: #f5f5f7;
  --text-2: #a1a1a6;
  --text-3: #7c7c80;
  --hover: rgba(255, 255, 255, .05);
  --selected: rgba(255, 255, 255, .10);
  --row-line: rgba(84, 84, 88, .45);
  --toast-bg: #2c2c2e;

  --success: #4cd97b;  --success-soft: rgba(48, 209, 88, .16);
  --warning: #ffb340;  --warning-soft: rgba(255, 159, 10, .18);
  --danger: #ff6961;   --danger-soft: rgba(255, 69, 58, .18);
  --neutral: #a1a1a6;  --neutral-soft: rgba(118, 118, 128, .24);
  --blue: #5eb0ff;     --blue-soft: rgba(10, 132, 255, .20);
  --purple: #d59cff;   --purple-soft: rgba(191, 90, 242, .20);
  --teal: #6ad8e8;     --teal-soft: rgba(64, 200, 224, .18);

  --note-bg: rgba(255, 214, 10, .07);
  --note-border: rgba(255, 214, 10, .22);
  --note-accent: #ffd60a;
  --note-text: #f2dc8c;

  --wa-bg: rgba(48, 209, 88, .07);
  --wa-border: rgba(48, 209, 88, .30);
  --wa-soft: rgba(48, 209, 88, .16);
  --wa-text: #4cd97b;

  --shadow-sm: none;
  --shadow-md: 0 0 0 .5px rgba(255, 255, 255, .06);
  --shadow-lg: 0 0 0 .5px rgba(255, 255, 255, .10), 0 16px 60px rgba(0, 0, 0, .6);
}

/* ---------- 2. Reset & dasar ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }
/* Atribut hidden selalu menang atas display komponen (flex/grid) */
[hidden] { display: none !important; }

html, body { height: 100%; }
/* dvh mengikuti tinggi viewport SETELAH bilah URL browser HP menyusut —
   tanpa ini composer di bawah tertutup bilah alamat Safari/Chrome Android. */
@supports (height: 100dvh) {
  html, body { height: 100dvh; }
}

body {
  font-family: var(--font-body);
  color: var(--text);
  background: var(--bg);
  display: flex;
  flex-direction: column;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  /* Kenyamanan layar sentuh: teks tidak diskalakan ulang saat rotasi,
     tidak ada kotak abu-abu saat elemen ditekan, dan halaman tidak
     ikut memantul / memicu pull-to-refresh saat panel di dalam digulir. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none;
}

/* Judul memakai font display (Figtree) */
h1, h2, h3,
.brand-name,
.list-header,
.stat-value,
.kpi-value,
.cust-name,
.notif-title {
  font-family: var(--font-display);
}

/* ---------- Ikon SVG (line = default, *-fill = state aktif) ---------- */
.icon {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  display: inline-block;
  vertical-align: -3px;
}
.icon-sm { width: 14px; height: 14px; vertical-align: -2px; }
.icon-lg { width: 50px; height: 50px; }

/* ---------- 3. Komponen umum ---------- */

/* Tombol — SEMUA tombol memakai .btn + varian agar seragam.
   Varian: .btn-primary (aksi utama), .btn-secondary (default),
   .btn-ghost (tanpa border), .btn-danger. Ukuran: .btn-sm */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: var(--control-h);
  padding: 0 18px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  transition: background .12s, border-color .12s, box-shadow .12s;
}
.btn:hover { background: var(--hover); border-color: var(--border-strong); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

.btn-primary { background: var(--primary-fill); border-color: var(--primary-fill); color: #fff; box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); }

.btn-ghost { border-color: transparent; background: transparent; color: var(--text-2); }
.btn-ghost:hover { background: var(--hover); border-color: transparent; }

.btn-danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn-danger:hover { background: #be123c; }

.btn-sm { height: var(--control-h-sm); padding: 0 14px; font-size: 14.5px; }

/* ---- Kolom isian: SATU gaya untuk seluruh aplikasi ----
   Tinggi, border, sudut elips, fokus, placeholder, dan keadaan nonaktif
   diatur HANYA di sini. Aturan per-konteks (.modal, .mail-form, …) cukup
   mengatur tata letak (lebar/jarak) — jangan mengulang gaya visual. */
input:is([type="text"], [type="email"], [type="password"], [type="search"], [type="number"],
  [type="time"], [type="url"], [type="tel"], :not([type])),
select {
  box-sizing: border-box;
  height: var(--control-h);
  padding: 0 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background-color: var(--surface-2);   /* kolom "berisi" ala Manage */
  color: var(--text);
  font-family: inherit;
  font-size: 15px;
  outline: none;
  transition: border-color .12s, box-shadow .12s, background-color .12s;
}
/* Panah dropdown kustom: sama di semua browser & kedua tema */
select {
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  padding-right: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238e8e93' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 14px;
}
textarea {
  box-sizing: border-box;
  padding: 10px 16px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background-color: var(--surface-2);
  color: var(--text);
  font-family: inherit;
  font-size: 15px;
  line-height: 1.55;
  outline: none;
  transition: border-color .12s, box-shadow .12s;
}
:is(input, select, textarea):hover:not(:focus):not(:disabled) { border-color: var(--border-strong); }
:is(input:is([type="text"], [type="email"], [type="password"], [type="search"], [type="number"],
  [type="time"], [type="url"], [type="tel"], :not([type])), select, textarea):focus {
  border-color: var(--primary);
  background-color: var(--surface);
  box-shadow: 0 0 0 4px var(--primary-soft);
}
::placeholder { color: var(--text-3); opacity: 1; }
:is(input, select, textarea):disabled { opacity: .55; cursor: not-allowed; }
/* Tombol terkunci harus TERLIHAT terkunci (mis. "Hapus semua data" sebelum konfirmasi) */
.btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; pointer-events: none; }
.control, input.control {
  height: var(--control-h-sm);
  padding: 0 14px;
  font-size: 14.5px;
}
.control:hover { border-color: var(--border-strong); }
.control:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }

/* Badge status & tag */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12.5px;
  padding: 3px 9px;
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: .2px;
}
.badge.tag { color: #fff; }
.badge.assignee { background: var(--neutral-soft); color: var(--text-2); }

/* Pil status berwarna lembut (latar soft + teks pekat) */
.badge.st-active  { background: var(--success-soft); color: var(--success); }
.badge.st-pending { background: var(--warning-soft); color: var(--warning); }
.badge.st-closed  { background: var(--neutral-soft); color: var(--neutral); }
.badge.st-spam    { background: var(--danger-soft); color: var(--danger); }

/* Avatar inisial */
.avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  flex-shrink: 0;
  letter-spacing: .3px;
}

/* ---------- 4. Top bar ---------- */
.topbar {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 0 20px;
  height: 60px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  z-index: 10;
}

.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 18px; letter-spacing: -.2px; }
.brand-logo {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--primary-fill), var(--primary-hover));
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  font-weight: 800;
  box-shadow: var(--shadow-sm);
}

.search-wrap { flex: 1; max-width: 460px; }
.search-wrap input {
  width: 100%;
  height: var(--control-h);
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg);
  font-size: 15px;
  outline: none;
  transition: border-color .12s, box-shadow .12s;
}
.search-wrap input::placeholder { color: var(--text-3); }
.search-wrap input:focus { border-color: var(--primary); background: var(--surface); box-shadow: 0 0 0 3px var(--primary-soft-2); }

.topbar-right { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.agent-switch { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text-3); }
.agent-switch select {
  height: var(--control-h);
  padding: 0 14px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background-color: var(--surface-2);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

/* ---------- 5. Layout ---------- */
.layout { display: flex; flex: 1; min-height: 0; }

/* ---------- 6. Sidebar ---------- */
.sidebar {
  width: 224px;
  background: var(--surface);
  border-right: 1px solid var(--border);
  padding: 14px 0;
  flex-shrink: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

/* ---- Pemilih workspace (project) ----
   Kartu dengan avatar warna + label "Workspace" + nama; klik membuka menu
   daftar project. Rupa kartu sengaja berbeda dari pemilih mailbox (pill)
   di bawahnya supaya keduanya tidak tertukar. */
.ws-switch { position: relative; padding: 0 14px 12px; }
.ws-btn {
  display: flex; align-items: center; gap: 10px; width: 100%;
  min-height: 52px; padding: 8px 10px 8px 8px;
  border: 0; border-radius: var(--radius);
  background: var(--fill); color: var(--text);
  font: inherit; text-align: left; cursor: pointer;
  transition: background .12s;
}
.ws-btn:hover, .ws-btn[aria-expanded="true"] { background: var(--fill-2); }
.ws-avatar {
  width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
  display: grid; place-items: center;
  color: #fff; font-family: var(--font-display); font-weight: 800; font-size: 16px;
  background: var(--primary-fill);
}
.ws-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; line-height: 1.15; }
.ws-eyebrow, .side-eyebrow {
  font-size: 11px; font-weight: 600; letter-spacing: .6px; text-transform: uppercase; color: var(--text-3);
}
.ws-name {
  font-family: var(--font-display); font-weight: 700; font-size: 15.5px; letter-spacing: -.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ws-chev { color: var(--text-3); flex-shrink: 0; transition: transform .15s; }
.ws-btn[aria-expanded="true"] .ws-chev { transform: rotate(180deg); }
.ws-menu {
  position: absolute; left: 14px; right: 14px; top: calc(100% - 6px); z-index: 40;
  padding: 6px; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-lg);
}
.ws-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  min-height: 44px; padding: 8px 10px;
  border: 0; border-radius: var(--radius-sm); background: none;
  font: inherit; color: var(--text); text-align: left; cursor: pointer;
}
.ws-item:hover { background: var(--hover); }
.ws-item-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.ws-item-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ws-item-sub { font-size: 12.5px; color: var(--text-3); }
.ws-item.active .ws-item-name { color: var(--primary); }
.ws-check { color: var(--primary); flex-shrink: 0; }
.ws-manage { margin-top: 4px; border-top: 1px solid var(--border); border-radius: 0 0 var(--radius-sm) var(--radius-sm); color: var(--text-2); }
.ws-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }
input[type="color"].ws-color { width: 34px; height: 34px; padding: 3px; border-radius: 50%; cursor: pointer; }
.mail-form label input[type="color"] { width: 64px; padding: 4px; cursor: pointer; }

/* Label kecil di atas pemilih mailbox */
.mailbox-select .side-eyebrow { display: block; margin: 0 0 6px 6px; }

.mailbox-select { padding: 0 14px 12px; }
.mailbox-select select {
  width: 100%;
  height: var(--control-h);
  padding: 0 14px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  font-size: 15.5px;
  font-weight: 600;
  background-color: var(--surface-2);
  cursor: pointer;
}

.folders { list-style: none; padding: 8px; border-top: 1px solid var(--border); }
.folders li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--text-2);
  font-size: 15.5px;
  font-weight: 500;
  transition: background .1s;
}
.folders li:hover { background: var(--hover); }
.folders li.active { background: var(--primary-soft); color: var(--primary); font-weight: 700; }
.folders .count {
  font-size: 13px;
  background: var(--neutral-soft);
  color: var(--text-2);
  border-radius: 999px;
  padding: 2px 8px;
  font-weight: 700;
  min-width: 26px;
  text-align: center;
}
.folders li.active .count { background: var(--primary-fill); color: #fff; }

/* Tautan ke pusat bantuan publik, di bawah folder */
.kb-link {
  display: block;
  margin: auto 8px 4px;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  color: var(--text-3);
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
}
.kb-link:hover { background: var(--hover); color: var(--text-2); }

/* ---------- 7. Daftar percakapan ---------- */
.conv-list-pane {
  width: 350px;
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  min-height: 0;
}

.list-header {
  padding: 16px;
  border-bottom: 1px solid var(--border);
  font-weight: 700;
  font-size: 17px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 57px;
}
.list-header .muted { font-weight: 500; font-size: 14px; color: var(--text-3); }

.conv-list { list-style: none; overflow-y: auto; flex: 1; }
.conv-item {
  padding: 14px 16px;
  border-bottom: 1px solid var(--row-line);
  border-left: 3px solid transparent;
  cursor: pointer;
  transition: background .1s;
}
.conv-item:hover { background: var(--hover); }
/* Sorotan pilihan netral seperti app Manage; garis aksen di kiri sebagai penanda */
.conv-item.selected { background: var(--selected); border-left-color: var(--primary); }

.conv-item .row1 { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 3px; align-items: baseline; }
.conv-item .cust { font-weight: 600; font-size: 15.5px; color: var(--text-2); }
.conv-item.unread .cust { font-weight: 700; color: var(--text); }
.conv-item .time { font-size: 13.5px; color: var(--text-3); white-space: nowrap; }
.conv-item .subject {
  font-size: 15.5px;
  color: var(--text-2);
  margin-bottom: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.conv-item.unread .subject { font-weight: 700; color: var(--text); }
.conv-item .preview {
  font-size: 14.5px;
  color: var(--text-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 8px;
}
.conv-item .meta { display: flex; gap: 5px; align-items: center; flex-wrap: wrap; }

.dot-unread {
  width: 8px; height: 8px;
  background: var(--primary);
  border-radius: 50%;
  display: inline-block;
  margin-right: 6px;
}

.list-empty {
  padding: 56px 24px;
  text-align: center;
  color: var(--text-3);
  font-size: 14.5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.list-empty b { color: var(--text-2); font-size: 16px; }
.list-empty-icon {
  display: grid;
  place-items: center;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--hover);
  margin-bottom: 6px;
}
.list-empty-icon .icon { width: 24px; height: 24px; color: var(--text-3); }

/* ---- Skeleton loading: shimmer halus selagi data dimuat ---- */
.skeleton {
  display: block;
  height: 12px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--hover) 25%, var(--border) 50%, var(--hover) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s ease-in-out infinite;
}
.skeleton-block { height: 72px; border-radius: 16px; margin-top: 14px; }
.skeleton-item { pointer-events: none; }
.skeleton-item .row1 { display: flex; justify-content: space-between; }
.detail-skeleton { padding: 28px 32px; display: flex; flex-direction: column; gap: 12px; }
@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Konten utama muncul dengan fade halus setiap ganti tampilan */
.fade-in { animation: fadeUp .18s ease-out; }
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .skeleton { animation: none; }
  .fade-in { animation: none; }
}

/* ---- Halaman profil pelanggan ---- */
.cust-profile-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 18px 0 22px;
}
.avatar-lg {
  width: 56px; height: 56px;
  font-size: 20px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  flex-shrink: 0;
}
.cust-profile-head h1 { margin: 0; }
/* Kartu pelanggan di sidebar percakapan kini tombol menuju profil */
button.cust-card-link {
  width: 100%;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  border-radius: 14px;
  padding: 8px;
  margin: -8px;
  transition: background .12s;
}
button.cust-card-link:hover { background: var(--hover); }
.cust-card-arrow { margin-left: auto; color: var(--text-3); flex-shrink: 0; }
.cust-conv { cursor: pointer; transition: background .12s; }
.cust-conv:hover { background: var(--hover); }
.flip-x { transform: scaleX(-1); }

/* Header laporan: judul di kiri, rentang + ekspor di kanan */
.report-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.report-head-actions { display: flex; align-items: center; gap: 8px; }
/* Label tren kosong tetap memakan tinggi agar batang sejajar */
.trend-label { min-height: 1.2em; }

/* Bintang prioritas pada subjek */
.star { color: #f59e0b; }

/* Chip SLA: countdown tenggat balasan pertama */
.badge.sla-ok { background: var(--neutral-soft); color: var(--text-2); }
.badge.sla-soon { background: var(--warning-soft); color: var(--warning); }
.badge.sla-late { background: var(--danger-soft); color: var(--danger); }

/* Highlight @mention di catatan internal */
.mention {
  background: var(--primary-soft-2);
  color: var(--primary);
  font-weight: 700;
  border-radius: 5px;
  padding: 0 4px;
}

/* Baris aturan otomasi di Pengaturan */
.rule-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--row-line);
}
.rule-row.rule-off .rule-desc { opacity: .45; }
.rule-desc { flex: 1; font-size: 15px; }
.rule-desc span { color: var(--text-3); font-size: 14.5px; }
.rule-toggle input { accent-color: var(--primary); width: 16px; height: 16px; cursor: pointer; }

/* Mode laporan: daftar percakapan disembunyikan agar laporan lega */
body.report-mode .conv-list-pane { display: none; }

/* Item navigasi Laporan di bawah folder */
.folders .nav-report { margin-top: 8px; border-top: 1px solid var(--border); border-radius: 0; padding-top: 14px; }
.folders .nav-report.active { border-radius: var(--radius-sm); border-top-color: transparent; }

/* ---------- 8. Panel detail ---------- */
.detail-pane { flex: 1; display: flex; min-width: 0; min-height: 0; }

.empty-state {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--text-3);
  gap: 12px;
  font-size: 15.5px;
}
.empty-icon { font-size: 44px; opacity: .8; }

.thread-col { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }

.detail-header {
  padding: 14px 20px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.detail-title-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.btn-back { display: none; } /* hanya tampil di HP */
.detail-header h1 { font-size: 18px; font-weight: 700; letter-spacing: -.2px; flex: 1; min-width: 0; }

.detail-controls { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.detail-controls select { max-width: 170px; }

.tag-row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-left: auto; }
.tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  padding: 4px 10px;
  border-radius: 999px;
}
.tag-chip button {
  background: none; border: none; color: rgba(255,255,255,.85);
  cursor: pointer; font-size: 14px; padding: 0; line-height: 1;
}
.tag-chip button:hover { color: #fff; }
.tag-add input {
  width: 104px;
  height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px dashed var(--border-strong);
  background: transparent;
  font-size: 13.5px;
  outline: none;
}
.tag-add input:focus { border-color: var(--primary); border-style: solid; }

/* Indikator presence (deteksi tabrakan): avatar agent lain yang sedang
   melihat percakapan yang sama, dengan cincin berdenyut */
.viewers { display: inline-flex; gap: 4px; }
.viewer .avatar {
  width: 26px; height: 26px; font-size: 12px;
  outline: 2px solid var(--warning);
  outline-offset: 1px;
  animation: viewer-pulse 1.6s ease-in-out infinite;
}
@keyframes viewer-pulse {
  0%, 100% { outline-color: var(--warning); }
  50% { outline-color: transparent; }
}

/* Thread pesan */
.thread { flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 14px; }

.msg {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  max-width: 760px;
  box-shadow: var(--shadow-sm);
}
.msg.agent { border-left: 3px solid var(--primary); }
.msg.customer { border-left: 3px solid var(--border-strong); }
.msg.note { background: var(--note-bg); border-color: var(--note-border); border-left: 3px solid var(--note-accent); box-shadow: none; }

.msg-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px 0; }
.msg-author { font-weight: 700; font-size: 15px; }
.msg-kind { font-size: 13px; color: var(--text-3); }
.msg-time { margin-left: auto; font-size: 13.5px; color: var(--text-3); white-space: nowrap; }
.msg-body { padding: 10px 16px 14px; font-size: 15.5px; line-height: 1.65; white-space: pre-wrap; word-break: break-word; color: var(--text-2); }
.msg.note .msg-body { color: var(--note-text); }

/* Body email HTML (hasil sanitasi) di dalam thread */
.html-body { white-space: normal; overflow-x: auto; }
.html-body img { max-width: 100%; height: auto; border-radius: 6px; }
.html-body table { border-collapse: collapse; margin: 8px 0; font-size: 15px; }
.html-body td, .html-body th { border: 1px solid var(--border); padding: 6px 10px; }
.html-body a { color: var(--primary); }
.html-body h1, .html-body h2, .html-body h3 { margin: 10px 0 6px; color: var(--text); }
.html-body p { margin-bottom: 8px; }
.html-body blockquote {
  border-left: 3px solid var(--border-strong);
  padding-left: 12px;
  color: var(--text-3);
  margin: 8px 0;
}

/* Chip lampiran di bawah isi pesan */
.msg-attachments { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 16px 12px; }
.attach-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--bg);
  color: var(--text-2);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
.attach-chip:hover { border-color: var(--primary); color: var(--primary); }
.attach-chip span { color: var(--text-3); font-weight: 500; font-size: 13px; }

/* Status pengiriman email di bawah balasan agent */
.msg-delivery {
  padding: 6px 16px 10px;
  font-size: 13.5px;
  font-weight: 600;
}
.msg-delivery.ok { color: var(--success); }
.msg-delivery.fail { color: var(--danger); }

/* Info sinkronisasi terakhir di form email masuk */
.sync-info {
  margin-right: auto;
  font-size: 13.5px;
  color: var(--text-3);
  align-self: center;
  max-width: 50%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Baris log aktivitas di tengah thread (ubah status, tunda, rating, dll.) */
.thread-event {
  text-align: center;
  font-size: 14px;
  color: var(--text-3);
  padding: 2px 12px;
}
.thread-event b { color: var(--text-2); font-weight: 600; }

/* Composer */
.composer {
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding: 10px 20px 16px;
}
.composer-tabs { display: flex; gap: 2px; margin-bottom: 10px; }
.composer-tabs button {
  height: var(--control-h-sm);
  padding: 0 16px;
  border: none;
  background: none;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-3);
  cursor: pointer;
  border-radius: var(--radius-pill);
}
.composer-tabs button:hover { background: var(--hover); color: var(--text-2); }
.composer-tabs button.active { color: var(--primary); background: var(--primary-soft); }
.composer-tabs button.active.note-tab { color: var(--note-accent); background: var(--note-bg); }

.composer textarea {
  width: 100%;
  min-height: 92px;
  padding: 12px 16px;
  border-radius: 16px;
  border: 1px solid var(--border);
  /* Tanpa ini textarea memakai warna bawaan browser (putih) — di tema
     gelap jadi blok putih menyilaukan yang menutupi sebagian layar HP. */
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  font-size: 15.5px;
  line-height: 1.6;
  resize: vertical;
  outline: none;
  transition: border-color .12s, box-shadow .12s;
}
.composer textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft-2); }
.composer.note-mode textarea { background: var(--note-bg); border-color: var(--note-border); }
.composer.note-mode textarea:focus { border-color: var(--note-accent); box-shadow: 0 0 0 3px var(--warning-soft); }

.composer-actions { display: flex; gap: 8px; margin-top: 10px; align-items: center; flex-wrap: wrap; }
.composer-hint { margin-left: auto; font-size: 13.5px; color: var(--text-3); }

/* ---------- 9. Panel pelanggan ---------- */
.customer-col {
  width: 272px;
  background: var(--surface);
  border-left: 1px solid var(--border);
  padding: 20px 16px;
  overflow-y: auto;
  flex-shrink: 0;
}
.customer-col h3 {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .7px;
  color: var(--text-3);
  margin: 20px 0 8px;
  font-weight: 700;
}
.cust-card { display: flex; align-items: center; gap: 12px; }
.cust-card .avatar { width: 42px; height: 42px; font-size: 17px; }
.cust-name { font-weight: 700; font-size: 16.5px; }
.cust-email { font-size: 14px; color: var(--text-3); word-break: break-all; }
.cust-company { font-size: 14.5px; margin-top: 2px; color: var(--text-2); }

.cust-notes {
  width: 100%;
  min-height: 72px;
  padding: 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface);   /* ikut tema gelap, bukan putih bawaan browser */
  color: var(--text);
  font-family: inherit;
  font-size: 14.5px;
  line-height: 1.5;
  resize: vertical;
  outline: none;
}
.cust-notes:focus { border-color: var(--primary); }

.prev-conv { list-style: none; }
.prev-conv li {
  padding: 9px 0;
  border-bottom: 1px solid var(--row-line);
  cursor: pointer;
  font-size: 14.5px;
  color: var(--text-2);
}
.prev-conv li:hover { color: var(--primary); }
.prev-conv .pc-time { font-size: 13px; color: var(--text-3); margin-top: 2px; }
.prev-conv .prev-empty { cursor: default; color: var(--text-3); }
.prev-conv .prev-empty:hover { color: var(--text-3); }

/* ---------- 10. Laporan ---------- */
/* position: relative menjadikan panel ini containing block bagi elemen
   absolute di dalamnya (mis. label .sr-only di daftar Tim). Tanpa itu elemen
   tersebut "lolos" dari panel scroll, menempel di posisi aslinya di dokumen,
   dan memanjangkan halaman → muncul ruang kosong saat halaman digulir. */
.report-view { flex: 1; overflow-y: auto; padding: 24px; position: relative; }
.report-view h1 { font-size: 23px; margin-bottom: 4px; letter-spacing: -.3px; }
.report-sub { color: var(--text-3); font-size: 15px; margin-bottom: 20px; }

.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; margin-bottom: 24px; }
.stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow-sm);
}
.stat-card .stat-label { font-size: 14px; color: var(--text-3); font-weight: 600; margin-bottom: 6px; }
.stat-card .stat-value { font-size: 30px; font-weight: 800; letter-spacing: -.5px; }
.stat-card .stat-value small { font-size: 15px; font-weight: 600; color: var(--text-3); }

.report-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 16px;
}
.report-section h2 { font-size: 16px; margin-bottom: 14px; }

/* Utilitas */
.hidden { display: none !important; }
.section-gap { margin-top: 18px; }
.section-gap-sm { margin-top: 10px; }
.span-full { grid-column: 1 / -1; }

/* Textarea seragam untuk form pengaturan (padanan input elips) */
.form-textarea { display: block; width: 100%; margin-top: 6px; resize: vertical; }
.form-textarea:focus { border-color: var(--primary); }

/* ---------- Drill-down laporan ---------- */
.drillable { cursor: pointer; transition: background .1s, border-color .1s; }
.stat-card.drillable:hover { border-color: var(--primary); box-shadow: var(--shadow-md); }
.bar-row.drillable { border-radius: var(--radius-sm); padding: 3px 6px; margin: 0 -6px 7px; }
.bar-row.drillable:hover { background: var(--hover); }
.trend-day.drillable:hover { background: var(--hover); border-radius: var(--radius-sm); }
tr.drillable:hover td { background: var(--hover); }

/* Chip filter drill-down di header daftar percakapan */
.filter-chip {
  border: none;
  background: var(--primary-soft);
  color: var(--primary);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 999px;
  cursor: pointer;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.filter-chip:hover { background: var(--primary-soft-2); }
.list-header { flex-wrap: wrap; gap: 6px; }

/* ---------- Form pengaturan koneksi email ---------- */
.mail-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 16px;
  align-items: end;
}
/* Isi panjang (status sinkron, galat) tidak boleh melebarkan kolom grid */
.mail-form > * { min-width: 0; }
.mail-form > .report-sub { margin: 0; }
.mail-form label { font-size: 14px; font-weight: 600; color: var(--text-2); }
.mail-form :is(input:not([type="checkbox"], [type="radio"], [type="file"]), select) {
  display: block;
  width: 100%;
  margin-top: 6px;
}
/* Pemilih di dalam form = ukuran standar, bukan ringkas toolbar */
.mail-form .mail-select { height: var(--control-h); padding: 0 16px; font-size: 15px; }
.mail-form .mail-check { align-self: center; padding-top: 14px; }
.mail-actions {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 4px;
  border-top: 1px dashed var(--border);
  margin-top: 4px;
}
.report-view code {
  background: var(--hover);
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 13.5px;
}
@media (max-width: 700px) { .mail-form { grid-template-columns: 1fr; } }

/* ---------- Panel KPI ---------- */
.kpi-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.kpi-header h2 { margin-bottom: 0; }

.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }

.kpi-card {
  border: 1px solid var(--border);
  border-left: 3px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 14px;
  background: var(--bg);
}
.kpi-card.kpi-met { border-left-color: var(--success); }
.kpi-card.kpi-miss { border-left-color: var(--danger); }

.kpi-head { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.kpi-label { font-size: 14px; font-weight: 700; color: var(--text-2); }
.kpi-status { font-size: 12.5px; font-weight: 700; color: var(--text-3); white-space: nowrap; }
.kpi-met .kpi-status { color: var(--success); }
.kpi-miss .kpi-status { color: var(--danger); }

.kpi-value { font-size: 26px; font-weight: 800; letter-spacing: -.4px; }
.kpi-value small { font-size: 14px; font-weight: 600; color: var(--text-3); }
.kpi-target { font-size: 13.5px; color: var(--text-3); margin: 2px 0 10px; }

.kpi-bar { height: 6px; background: var(--hover); border-radius: 999px; overflow: hidden; }
.kpi-fill { height: 100%; border-radius: 999px; background: var(--border-strong); }
.kpi-met .kpi-fill { background: var(--success); }
.kpi-miss .kpi-fill { background: var(--danger); }

/* Form ubah target KPI */
.kpi-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px dashed var(--border);
}
.kpi-form label { font-size: 14px; font-weight: 600; color: var(--text-2); }
.kpi-form input { display: block; width: 100%; margin-top: 6px; }
.kpi-form input:focus { border-color: var(--primary); }
.kpi-form-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 8px; }
@media (max-width: 700px) { .kpi-form { grid-template-columns: 1fr; } }

/* Dua kolom laporan berdampingan (agent + kanal/tag) */
.report-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 900px) { .report-grid-2 { grid-template-columns: 1fr; } }

/* Grafik kolom tren harian (murni CSS, tanpa library) */
.trend { display: flex; align-items: flex-end; gap: 6px; height: 130px; }
.trend-day { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; min-width: 0; }
.trend-cols { flex: 1; display: flex; align-items: flex-end; gap: 3px; width: 100%; justify-content: center; }
.trend-col { width: 38%; max-width: 16px; border-radius: 4px 4px 0 0; min-height: 2px; }
.trend-col.created { background: var(--primary); }
.trend-col.closed { background: var(--success); }
.trend-label { font-size: 11.5px; color: var(--text-3); white-space: nowrap; }
.trend-legend { display: flex; gap: 16px; margin-top: 10px; font-size: 14px; color: var(--text-2); }
.trend-legend .dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; }
.trend-legend .dot.created { background: var(--primary); }
.trend-legend .dot.closed { background: var(--success); }

/* Tabel performa agent */
.agent-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.agent-table th {
  text-align: left;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--text-3);
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
}
.agent-table td { padding: 9px 8px; border-bottom: 1px solid var(--row-line); }
.agent-table .num { text-align: right; font-variant-numeric: tabular-nums; }
/* Flex di span dalam sel — td yang di-flex keluar dari tata letak tabel
   sehingga garis barisnya tidak sejajar dengan sel lain */
.agent-table .cell-agent { display: inline-flex; align-items: center; gap: 8px; vertical-align: middle; }
.avatar-xs { width: 24px; height: 24px; font-size: 11.5px; }

.bar-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-size: 14.5px; }
.bar-row .bar-label { width: 130px; color: var(--text-2); flex-shrink: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar-row .bar-track { flex: 1; height: 10px; background: var(--hover); border-radius: 999px; overflow: hidden; }
.bar-row .bar-fill { height: 100%; border-radius: 999px; background: var(--primary); }
.bar-row .bar-val { width: 32px; text-align: right; font-weight: 700; color: var(--text-2); }

/* ---------- 11. Modal & toast ---------- */
.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(15, 23, 42, .5);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  padding: 20px;
}
.modal-backdrop.hidden { display: none; }
.modal {
  background: var(--surface);
  border-radius: 14px;
  padding: 24px;
  width: 460px;
  max-width: 100%;
  max-height: calc(100vh - 60px);
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
}
.modal h2 { font-size: 20px; margin-bottom: 18px; letter-spacing: -.2px; }
.modal label { display: block; font-size: 14.5px; font-weight: 600; margin-bottom: 14px; color: var(--text-2); }
.modal label .muted { font-weight: 400; color: var(--text-3); }
.modal :is(input:not([type="checkbox"], [type="radio"], [type="file"]), select, textarea) {
  display: block;
  width: 100%;
  margin-top: 6px;
}
.modal .checkbox-row { display: flex; }
/* Textarea tidak bisa elips penuh — pakai sudut membulat besar */
.modal textarea { border-radius: 16px; }
.modal input:focus, .modal select:focus, .modal textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft-2);
}
.checkbox-row { display: flex; align-items: center; gap: 8px; font-weight: 400 !important; }
.checkbox-row input { width: auto !important; margin: 0 !important; display: inline !important; accent-color: var(--primary); }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }

.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--toast-bg);
  color: #fff;
  padding: 10px 22px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 500;
  z-index: 100;
  box-shadow: var(--shadow-lg);
  animation: toast-in .2s ease;
}
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 10px); } }

/* ---------- Menu profil di topbar ---------- */
.profile-wrap { position: relative; }
.profile-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: var(--control-h);
  padding: 0 14px 0 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
.profile-btn:hover { background: var(--hover); border-color: var(--border-strong); }
.profile-name { font-size: 15px; font-weight: 600; }
.profile-btn .icon-sm { color: var(--text-3); }

.profile-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 120;
  width: 268px;
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}
.profile-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 10px 12px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 6px;
}
.profile-head > div { flex: 1; min-width: 0; }
.profile-head-name { font-family: var(--font-display); font-weight: 700; font-size: 15px; }
.profile-head-mail {
  font-size: 13px; color: var(--text-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.profile-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border: none;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--text-2);
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 500;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.profile-item:hover { background: var(--hover); color: var(--text); }
.profile-item.danger { color: var(--danger); }
.profile-item.danger:hover { background: var(--danger-soft); }
.profile-sep { height: 1px; background: var(--border); margin: 6px 4px; }

/* Pemilih tema warna di menu profil */
.accent-row { padding: 8px 10px 10px; }
.accent-label {
  font-size: 12.5px; font-weight: 600; color: var(--text-3);
  text-transform: uppercase; letter-spacing: .5px; margin-bottom: 8px;
}
/* Selalu sebaris: satu kolom per warna, bulatan mengecil bila menu sempit */
.accent-swatches {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 6px;
  justify-items: center;
}
.accent-dot {
  width: 100%; max-width: 28px; height: auto; aspect-ratio: 1;
  border-radius: 50%;
  border: 2px solid transparent;
  outline: 1px solid var(--border);
  outline-offset: 1px;
  cursor: pointer;
  padding: 0;
  transition: transform .12s;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff;
}
.accent-dot:hover { transform: scale(1.12); }
.accent-dot.active { outline-color: var(--primary); outline-width: 2px; }
.accent-dot .icon-sm { width: 12px; height: 12px; }

/* ---------- Aksi massal ---------- */
.conv-item { position: relative; }
.bulk-check {
  position: absolute;
  top: 16px; left: 4px;
  width: 15px; height: 15px;
  accent-color: var(--primary);
  cursor: pointer;
  opacity: 0;
  transition: opacity .12s;
}
.conv-item:hover .bulk-check,
.conv-item.bulk-on .bulk-check { opacity: 1; }
.conv-item.bulk-on { background: var(--primary-soft); }

.bulk-bar {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px dashed var(--border);
}
.bulk-count { font-size: 13.5px; font-weight: 700; color: var(--primary); margin-right: auto; }

/* Tombol muat bertahap di akhir daftar */
.load-more { padding: 14px; text-align: center; }

/* ---------- Lampiran keluar di composer ---------- */
.attach-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.attach-row:empty { display: none; }
.attach-row .attach-chip button {
  background: none; border: none; cursor: pointer;
  color: var(--text-3); display: inline-flex; padding: 0;
}
.attach-row .attach-chip button:hover { color: var(--danger); }

/* Balasan terjadwal di thread */
.msg.scheduled {
  border-left: 3px solid var(--warning);
  border-style: dashed;
  background: var(--warning-soft);
}
.msg.scheduled .msg-body { color: var(--text-2); }

/* ---------- Editor artikel KB ---------- */
.kb-cat {
  font-size: 13px; text-transform: uppercase; letter-spacing: .5px;
  color: var(--text-3); margin: 16px 0 6px;
}
.kb-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 0; border-bottom: 1px solid var(--row-line);
}
.kb-row-title {
  flex: 1; text-align: left; background: none; border: none;
  font-family: inherit; font-size: 15px; font-weight: 600;
  color: var(--text); cursor: pointer; padding: 0;
}
.kb-row-title:hover { color: var(--primary); }
.kb-row.kb-draft .kb-row-title { color: var(--text-3); }
.kb-views { font-size: 13px; color: var(--text-3); white-space: nowrap; }

/* ---------- Command palette ---------- */
.palette-backdrop {
  position: fixed; inset: 0; z-index: 150;
  background: rgba(15, 23, 42, .5);
  backdrop-filter: blur(2px);
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 12vh;
}
.palette {
  width: 620px; max-width: calc(100vw - 32px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.palette input {
  width: 100%; border: none; outline: none;
  height: auto; border-radius: 0; box-shadow: none !important;
  padding: 18px 22px;
  font-family: inherit; font-size: 17px;
  background: var(--surface); color: var(--text);
  border-bottom: 1px solid var(--border);
}
.palette ul { list-style: none; max-height: 380px; overflow-y: auto; }
.palette li {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 22px;
  font-size: 15px; color: var(--text-2); cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.palette li.active { background: var(--primary-soft); color: var(--primary); font-weight: 600; }
.palette li.palette-empty { color: var(--text-3); cursor: default; }

kbd {
  display: inline-block;
  padding: 2px 8px;
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  border-radius: 6px;
  background: var(--bg);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-2);
}

/* ---------- Kanal WhatsApp ---------- */
/* Badge kanal WA di daftar percakapan */
.badge.ch-wa { background: var(--wa-soft); color: var(--wa-text); }
/* Badge kanal ulasan aplikasi */
.badge.ch-play { background: color-mix(in srgb, #34a853 18%, transparent); color: #34a853; }
.badge.ch-as { background: color-mix(in srgb, #0d96f6 18%, transparent); color: #0d96f6; }
/* ---- Cc/Bcc di komposer balasan email ---- */
.cc-row { margin-bottom: 6px; }
.cc-toggle {
  border: 0;
  background: none;
  color: var(--text-3);
  font: inherit;
  font-size: 13.5px;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 8px;
}
.cc-toggle:hover { color: var(--primary); background: var(--hover); }
.cc-fields { display: flex; gap: 10px; flex-wrap: wrap; }
.cc-fields label {
  flex: 1;
  min-width: 220px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  color: var(--text-3);
}
.cc-fields input { flex: 1; min-width: 0; }
.cc-fields input:focus { outline: none; border-color: var(--primary); }
/* Baris Cc/Bcc pada pesan terkirim di thread */
.msg-cc { font-size: 13px; color: var(--text-3); margin-top: 6px; }
/* ---- Navigasi lompat antar seksi Pengaturan (chip lengket di atas) ---- */
.jump-nav {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  padding: 10px 0 12px;
  margin: 4px 0 8px;
  background: linear-gradient(var(--bg) 80%, transparent);
}
.jump-nav a {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-2);
  text-decoration: none;
  padding: 6px 13px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  transition: background .12s, color .12s, border-color .12s;
}
.jump-nav a:hover { color: var(--primary); border-color: var(--primary); background: var(--hover); }
.report-section { scroll-margin-top: 64px; } /* judul tidak tertutup jump-nav */

/* ---- Status sistem: grid label/nilai ---- */
.sys-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px 18px;
}
.sys-grid > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--hover);
}
.sys-label { font-size: 12.5px; color: var(--text-3); text-transform: uppercase; letter-spacing: .3px; }
.sys-grid b { font-weight: 600; color: var(--text); font-size: 14.5px; }
.sys-grid b.sys-warn { color: #dc2626; }

/* ---- Direktori pelanggan ---- */
.cust-dir-row { cursor: pointer; transition: background .12s; }
.cust-dir-row:hover { background: var(--hover); }
.cust-dir-time { font-size: 13px; white-space: nowrap; }
#cust-search { min-width: 280px; }

/* Tabel lebar (riwayat login, dsb.) menggulir sendiri, bukan halamannya */
.table-scroll { overflow-x: auto; }
/* Baris linimasa aktivitas tim bisa diklik menuju tiketnya */
.act-row { cursor: pointer; transition: background .12s; }
.act-row:hover { background: var(--hover); }

/* Peringatan balasan publik di komposer ulasan Play Store */
.play-reply-note {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  color: var(--text-2);
  background: color-mix(in srgb, #f59e0b 12%, transparent);
  border-radius: 12px;
  padding: 8px 12px;
  margin-bottom: 8px;
}

/* Panel pengganti composer untuk percakapan WA:
   balasan dilakukan langsung di WhatsApp via tautan wa.me */
.wa-panel {
  border: 1px dashed var(--wa-border);
  background: var(--wa-bg);
  border-radius: var(--radius);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
}
.wa-panel p { font-size: 15px; color: var(--text-2); line-height: 1.6; }
.wa-no-phone { color: var(--danger) !important; font-weight: 600; }

.btn-wa { background: #25d366; border-color: #25d366; color: #fff; text-decoration: none; }
.btn-wa:hover { background: #1eb958; border-color: #1eb958; color: #fff; }

/* ---------- Kartu notifikasi pesan masuk ---------- */
#notif-stack {
  position: fixed;
  top: 12px;
  right: 12px;
  z-index: 200; /* di atas topbar & modal agar selalu terlihat */
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 320px;
  max-width: calc(100vw - 24px);
}
.notif {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--primary);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 12px 14px;
  cursor: pointer;
  animation: notif-in .25s ease;
}
.notif:hover { border-color: var(--primary); }
.notif-icon { font-size: 24px; }
.notif-body { flex: 1; min-width: 0; }
.notif-title { font-size: 13px; font-weight: 700; color: var(--primary); text-transform: uppercase; letter-spacing: .5px; }
.notif-from { font-size: 15.5px; font-weight: 700; margin-top: 2px; }
.notif-subject { font-size: 14.5px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.notif-close {
  background: none; border: none; color: var(--text-3);
  cursor: pointer; font-size: 15px; padding: 2px;
}
.notif-close:hover { color: var(--text); }
@keyframes notif-in { from { opacity: 0; transform: translateX(20px); } }

/* ---------- 12. Responsif ---------- */

/* Layar lebar: kolom ikut melebar + padding lebih lega agar tidak terasa
   sempit; isi thread & composer dipusatkan (ala Help Scout) supaya tidak
   menempel di kiri dengan ruang kosong besar di kanan. */
@media (min-width: 1440px) {
  /* Lebar kolom samping dijaga agar kolom baca tetap ≥ ±550px (lihat juga
     ambang panel geser 1400px); pelebaran penuh baru mulai 1680px */
  .sidebar { width: 236px; }
  .conv-list-pane { width: 360px; }
  .customer-col { width: 280px; padding: 24px 20px; }

  .list-header { padding: 18px 20px; }
  .conv-item { padding: 16px 20px; }
  .folders li { padding: 10px 14px; }
  .folders { padding: 10px; }
  .mailbox-select { padding: 0 16px 14px; }

  .detail-header { padding: 16px 32px; }
  .thread { padding: 28px 32px; gap: 16px; }
  .composer { padding: 12px 32px 20px; }
  .composer textarea { min-height: 104px; }

  /* Kolom baca terpusat dengan lebar nyaman */
  .msg, .thread-event { width: 100%; max-width: 840px; margin-left: auto; margin-right: auto; }
  .composer-tabs, .composer textarea, .composer-actions, .wa-panel {
    width: 100%; max-width: 840px; margin-left: auto; margin-right: auto;
  }
  .composer-tabs { margin-bottom: 8px; }
  .detail-title-row, .detail-controls { max-width: 1040px; }
}

@media (min-width: 1680px) {
  .sidebar { width: 252px; }
  .conv-list-pane { width: 412px; }
  .customer-col { width: 304px; }
}

@media (min-width: 1800px) {
  .conv-list-pane { width: 456px; }
  .customer-col { width: 328px; }
  .msg, .thread-event,
  .composer-tabs, .composer textarea, .composer-actions, .wa-panel { max-width: 900px; }
  .report-view { max-width: 1280px; margin: 0 auto; width: 100%; }
}

/* Laptop & tablet lebar (≤1400px): panel pelanggan jadi panel geser (lihat blok
   tablet di bawah) — dengan empat kolom berdampingan, kolom baca di 1280px
   hanya ±434px, di bawah batas nyaman ±480px */
@media (max-width: 1250px) {
  .customer-col { width: 232px; }
  .conv-list-pane { width: 320px; }
}
/* Tablet: panel pelanggan disembunyikan */
@media (max-width: 1050px) {
  .customer-col { display: none; }
  .sidebar { width: 196px; }
}
@media (max-width: 860px) {
  .conv-list-pane { width: 272px; }
  .sidebar { width: 176px; }
  .agent-switch label { display: none; }
}

/* ============================================================
   TIPOGRAFI — hierarki Figtree (judul/angka) × Barlow (teks)
   ------------------------------------------------------------
   Aturan: Figtree untuk apa pun yang "diumumkan" (judul halaman,
   judul seksi, nama, angka besar); Barlow untuk apa pun yang
   "dibaca" (isi pesan, deskripsi, label, tombol). Eyebrow =
   label kecil kapital bertracking untuk konteks di atas judul.
   Blok ini sengaja di akhir berkas agar menimpa aturan lama.
   ============================================================ */
:root {
  --fs-display: 30px;  /* sapaan beranda */
  --fs-h1: 24px;       /* judul halaman */
  --fs-h2: 17px;       /* judul seksi */
  --fs-h3: 15px;       /* sub-judul */
  --fs-body: 15.5px;   /* teks utama */
  --fs-small: 14px;    /* meta, deskripsi */
  --fs-micro: 12.5px;  /* eyebrow, timestamp */
  --track-display: -.025em;
  --track-title: -.015em;
  --track-eyebrow: .07em;
}

/* Judul: Figtree tebal, rapat, seimbang */
h1, h2, h3, .display {
  font-family: var(--font-display);
  text-wrap: balance;
  color: var(--text);
}
.report-view h1 {
  font-size: var(--fs-h1);
  font-weight: 800;
  letter-spacing: var(--track-title);
  line-height: 1.15;
  margin-bottom: 6px;
}
h1.display {
  font-size: var(--fs-display);
  font-weight: 800;
  letter-spacing: var(--track-display);
  line-height: 1.1;
}
.report-section h2 {
  font-size: var(--fs-h2);
  font-weight: 700;
  letter-spacing: var(--track-title);
  margin-bottom: 12px;
}
.report-section h2 .icon { color: var(--primary); }
.detail-title-row h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: var(--track-title);
  line-height: 1.3;
}

/* Eyebrow: konteks kecil di atas judul / label kolom */
.eyebrow, .kb-cat, .stat-card .stat-label, .sys-label, .kpi-label, .agent-table th, .cust-col h3, .customer-col h3 {
  font-family: var(--font-body);
  font-size: var(--fs-micro);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--track-eyebrow);
  color: var(--text-3);
}
.eyebrow { margin-bottom: 8px; }
.stat-card .stat-label { margin-bottom: 8px; }

/* Angka: Figtree, digit selebar-sama agar kolom rapi */
.stat-value, .kpi-value, .count, .num, .bar-val, .msg-time, .conv-item .time, .trend-label, .home-sla {
  font-variant-numeric: tabular-nums;
}
.stat-card .stat-value { font-size: 32px; font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.stat-card .stat-value small { font-size: 14px; font-weight: 600; letter-spacing: 0; margin-left: 2px; }

/* Teks bacaan: Barlow dengan ritme baris lega */
.report-sub { font-size: var(--fs-body); line-height: 1.55; }
.msg-body { font-size: var(--fs-body); line-height: 1.7; }
.msg-author { font-family: var(--font-display); font-weight: 700; font-size: 15px; letter-spacing: -.005em; }
.rule-desc b { font-weight: 600; color: var(--text); }
.rule-desc span { font-size: var(--fs-small); color: var(--text-3); }

/* Daftar percakapan: nama pelanggan (kuat) → subjek (menengah) → cuplikan (lembut) */
.conv-item .cust { font-weight: 600; font-size: 15px; }
.conv-item .subject { font-weight: 500; font-size: 15px; }
.conv-item .preview { font-size: var(--fs-small); }
.conv-item .time { font-size: var(--fs-micro); letter-spacing: .01em; }
.list-header { font-size: 16px; font-weight: 700; letter-spacing: var(--track-title); }

/* Navigasi & tombol: Barlow medium, sedikit tracking untuk kejelasan */
#folders li span:first-child { font-weight: 500; }
#folders li.active span:first-child { font-weight: 600; }
.btn { font-family: var(--font-body); font-weight: 600; letter-spacing: .01em; }
.badge { font-family: var(--font-body); font-weight: 600; letter-spacing: .02em; }
.brand { font-family: var(--font-display); font-weight: 800; letter-spacing: -.02em; }

/* Hero beranda */
.home-hero { padding: 8px 0 22px; }
.home-hero .report-sub { margin-top: 10px; margin-bottom: 0; }
.home-hero .report-sub b { color: var(--text); font-weight: 600; }
.home-row { cursor: pointer; transition: background .12s; }
.home-row:hover { background: var(--hover); }
.home-row.unread b { color: var(--text); }
.home-sla {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 13px; font-weight: 600; white-space: nowrap;
  color: var(--text-3);
}
.home-sla.soon { color: var(--warning); }
.home-sla.over { color: var(--danger); }
.list-empty.compact { padding: 28px 12px; }

/* ============================================================
   HP (≤ 700px) — pola master-detail satu kolom
   ------------------------------------------------------------
   Prinsip:
   - Satu layar = satu tugas. Daftar percakapan tampil penuh; membuka
     tiket (body.show-detail) menukar layar ke panel detail + tombol ←.
   - Navigasi folder pindah ke laci geser (body.nav-open) agar tidak
     memakan tinggi layar yang sudah sempit.
   - Kontrol tiket & panel pelanggan dilipat di balik tombol ⋯ dan 👤
     supaya header tidak menumpuk jadi 5–6 baris.
   - Semua kolom isian dikunci 16px: di bawah itu iOS Safari otomatis
     mem-perbesar halaman saat kolom difokuskan.
   - Jarak aman notch & home indicator lewat env(safe-area-inset-*).
   ============================================================ */

/* Elemen berikut hanya dipakai di layar HP — sembunyikan di layar besar. */
.nav-toggle,
.search-toggle,
.compact-only,
.sidebar-head,
.customer-col-head,
.nav-backdrop,
.icon-search-close { display: none; }

/* Layar sentuh tidak mengenal hover: kotak centang aksi massal yang
   biasanya baru muncul saat hover harus selalu terlihat. */
@media (hover: none) {
  .bulk-check { opacity: 1; }
}

/* Syarat kedua menangkap HP yang dimiringkan: lebarnya (±780px) lolos dari
   ambang 700px sehingga tadinya tetap memakai layout 3 kolom — padahal
   tingginya cuma ±380px, menyisakan thread setinggi 30px. Layar sependek
   itu perlu pola satu kolom yang sama, bukan layout desktop. */
@media (max-width: 700px), (max-width: 1000px) and (max-height: 480px) {
  /* Kontrol dibuat lebih tinggi agar nyaman ditekan jari */
  :root { --control-h: 40px; --control-h-sm: 36px; }

  /* ---- Top bar ---- */
  /* viewport-fit=cover membuat halaman mengisi sampai ke bawah notch —
     tinggi topbar ditambah inset atas agar isinya tidak tertutup. */
  .topbar {
    height: calc(56px + env(safe-area-inset-top));
    gap: 6px;
    padding: 0;
    padding-top: env(safe-area-inset-top);
    padding-left: calc(10px + env(safe-area-inset-left));
    padding-right: calc(10px + env(safe-area-inset-right));
  }
  .brand-name { display: none; }
  .nav-toggle,
  .search-toggle { display: inline-flex; width: 40px; padding: 0; flex-shrink: 0; }
  #theme-toggle { display: none; }   /* tetap tersedia di menu profil */
  .profile-name { display: none; }
  .profile-btn { padding: 0 6px; }
  .btn-new-label { display: none; }
  #btn-new { width: 40px; padding: 0; flex-shrink: 0; }
  .topbar-right { gap: 6px; flex-shrink: 0; }
  .agent-switch label { display: none; }
  .agent-switch select { max-width: 104px; padding: 0 10px; }

  /* Pencarian disembunyikan sampai tombol cari ditekan, lalu selebar topbar */
  .search-wrap { display: none; }
  body.search-open .search-wrap { display: block; flex: 1; min-width: 0; max-width: none; }
  body.search-open .brand,
  body.search-open .nav-toggle,
  body.search-open #btn-new,
  body.search-open .profile-wrap { display: none; }
  body.search-open .icon-search-open { display: none; }
  body.search-open .icon-search-close { display: inline-block; }
  .search-wrap input { padding: 0 14px; }

  /* ---- Sidebar sebagai laci geser dari kiri ---- */
  .nav-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 59;
    background: rgba(15, 23, 42, .45);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
  }
  body.nav-open .nav-backdrop,
  body.show-customer .nav-backdrop { opacity: 1; pointer-events: auto; }

  .sidebar {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    z-index: 60;
    width: min(84vw, 300px);
    padding: 0 0 calc(8px + env(safe-area-inset-bottom));
    border-right: 1px solid var(--border);
    transform: translateX(-101%);
    /* visibility disembunyikan saat tertutup supaya laci di luar layar tidak
       bisa di-tab, tidak dibacakan screen reader, dan tidak menimbulkan
       gulir horizontal di browser yang menghitung elemen fixed tergeser.
       Penundaan 0.22s menjaga animasi menutup tetap terlihat. */
    visibility: hidden;
    transition: transform .22s ease, visibility 0s linear .22s;
  }
  body.nav-open .sidebar {
    transform: none;
    visibility: visible;
    transition: transform .22s ease, visibility 0s;
    box-shadow: var(--shadow-lg);
  }

  .sidebar-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: calc(12px + env(safe-area-inset-top)) 10px 12px 16px;
    border-bottom: 1px solid var(--border);
  }
  .sidebar-head .brand-name {
    display: block;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 18px;
  }
  .mailbox-select { padding: 12px 12px 10px; }
  .folders { padding: 8px; border-top: none; }
  .folders li { padding: 12px 14px; font-size: 16px; }
  .folders .nav-report { margin-top: 8px; padding-top: 14px; }
  .kb-link { padding: 12px 14px; font-size: 16px; }

  /* ---- Panel utama: satu kolom, tukar layar daftar ↔ detail ---- */
  .conv-list-pane { width: 100%; flex: 1; border-right: none; }
  .detail-pane { display: none; }
  body.show-detail .conv-list-pane { display: none; }
  body.show-detail .detail-pane { display: flex; }
  body.report-mode .detail-pane { display: flex; }

  /* ---- Daftar percakapan ---- */
  .list-header { padding: 12px 14px; min-height: 52px; }
  .conv-list { padding-bottom: env(safe-area-inset-bottom); }
  .conv-item { padding: 14px 14px 14px 40px; }
  .conv-item .subject,
  .conv-item .cust { font-size: 16px; }
  /* Tanpa hover, kotak centang harus permanen — tapi diredupkan supaya
     tidak lebih menarik perhatian daripada isi percakapannya sendiri. */
  .bulk-check {
    opacity: .45;
    top: 50%;
    left: 12px;
    width: 20px;
    height: 20px;
    transform: translateY(-50%);
  }
  .conv-item.bulk-on .bulk-check { opacity: 1; }
  .bulk-bar .btn { flex: 1 1 auto; }

  /* ---- Header detail: judul + tombol lipat ---- */
  .detail-header { padding: 10px 12px; position: relative; z-index: 5; }
  .detail-title-row { gap: 6px; margin-bottom: 0; }
  .detail-header h1 {
    font-size: 16px;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .btn-back { display: inline-flex; }
  .compact-only { display: inline-flex; }
  .btn-back,
  #btn-priority,
  #btn-cust-panel,
  #btn-detail-actions { width: 36px; padding: 0; flex-shrink: 0; }
  #btn-priority .btn-label { display: none; }

  /* Baris kontrol tiket terlipat; dibuka lewat tombol ⋯ */
  .detail-controls { display: none; }
  /* Panel kontrol MENGAMBANG di atas thread, bukan mendorongnya turun:
     di layar pendek (mis. 320x700) mendorong menyisakan thread ±16px saja,
     karena topbar + header + composer sudah menghabiskan tinggi layar. */
  body.detail-actions-open .detail-controls {
    display: flex;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 20;
    margin: 0;
    padding: 10px 12px 12px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-md);
    max-height: 60vh;
    overflow-y: auto;
  }
  .detail-controls select,
  .detail-controls .control,
  .detail-controls .btn { flex: 1 1 46%; max-width: none; }
  .tag-row { margin-left: 0; flex: 1 1 100%; }
  .tag-add { flex: 1; }
  .tag-add input { width: 100%; height: 32px; }

  /* ---- Thread ---- */
  .thread { padding: 12px 12px 4px; gap: 10px; }
  .msg { max-width: none; }
  .msg-head { padding: 10px 12px 0; gap: 8px; flex-wrap: wrap; }
  .msg-body { padding: 8px 12px 12px; }
  .msg-attachments { padding: 0 12px 12px; }
  .msg-time { font-size: 12.5px; }
  .empty-state { padding: 24px; text-align: center; }

  /* ---- Composer ---- */
  .composer { padding: 8px 12px calc(10px + env(safe-area-inset-bottom)); }
  .composer-tabs button { flex: 1; padding: 0 8px; }
  .composer textarea { min-height: 64px; padding: 10px 14px; }
  .composer-hint { display: none; }   /* pintasan keyboard tak relevan di HP */
  /* Tanpa penataan, tombol composer melebar jadi 4 baris dan memakan ~43%
     layar. Susun jadi 3 baris: kirim · perkakas · sisipan. */
  .composer-actions { gap: 6px; margin-top: 8px; }
  .composer-actions .btn { min-height: 42px; }
  #btn-send,
  #btn-send-close { flex: 1 1 40%; }
  #btn-attach,
  #btn-schedule { flex: 0 0 auto; width: 42px; padding: 0; }
  #btn-schedule .btn-label { display: none; }   /* ikon jam + tooltip sudah cukup */
  #btn-ai-draft { flex: 1 1 auto; }
  #sel-saved-reply,
  #sel-kb-insert { flex: 1 1 44%; min-width: 0; }
  .cc-fields label { flex: 1 1 100%; min-width: 0; }

  /* ---- Panel pelanggan sebagai lembar geser dari kanan ---- */
  .customer-col {
    display: block;
    position: fixed;
    top: 0; right: 0; bottom: 0;
    z-index: 70;
    width: min(88vw, 340px);
    padding: 0 16px calc(16px + env(safe-area-inset-bottom));
    border-left: 1px solid var(--border);
    transform: translateX(101%);
    visibility: hidden;   /* lihat catatan pada .sidebar di atas */
    transition: transform .22s ease, visibility 0s linear .22s;
  }
  body.show-customer .customer-col {
    transform: none;
    visibility: visible;
    transition: transform .22s ease, visibility 0s;
    box-shadow: var(--shadow-lg);
  }
  .customer-col-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    position: sticky;
    top: 0;
    z-index: 1;
    margin: 0 -16px 14px;
    padding: calc(12px + env(safe-area-inset-top)) 10px 12px 16px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 16px;
  }
  .prev-conv li { padding: 12px 0; }

  /* ---- Modal jadi lembar bawah (bottom sheet) ---- */
  .modal-backdrop { padding: 0; align-items: flex-end; }
  .modal {
    width: 100%;
    max-width: none;
    border-radius: 18px 18px 0 0;
    padding: 20px 16px calc(20px + env(safe-area-inset-bottom));
    max-height: 92vh;
    max-height: 92dvh;
    animation: sheet-up .22s ease;
  }
  @keyframes sheet-up { from { transform: translateY(24px); opacity: .5; } }
  .modal input[type="text"],
  .modal input[type="email"],
  .modal select,
  .modal textarea { padding: 11px 16px; }
  .modal-actions { gap: 10px; }
  .modal-actions .btn { flex: 1; min-height: 44px; }
  /* Kotak centang bawaan browser terlalu kecil untuk jari */
  .checkbox-row { gap: 10px; padding: 4px 0; }
  .checkbox-row input[type="checkbox"] { width: 20px !important; height: 20px; flex-shrink: 0; }

  /* ---- Command palette ---- */
  .palette-backdrop {
    align-items: flex-start;
    padding: calc(12px + env(safe-area-inset-top)) 12px 12px;
  }
  .palette { width: 100%; max-width: none; }
  .palette input { padding: 15px 18px; }
  .palette ul { max-height: 58vh; max-height: 58dvh; }
  .palette li { padding: 13px 18px; }

  /* ---- Laporan, pengaturan, artikel ---- */
  .report-view { padding: 16px 14px calc(24px + env(safe-area-inset-bottom)); }
  .report-view h1 { font-size: 20px; }
  .report-head-actions { width: 100%; }
  .report-head-actions .control,
  .report-head-actions .btn { flex: 1; }
  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 18px; }
  .stat-card { padding: 12px; }
  .stat-card .stat-value { font-size: 24px; }
  .report-section { padding: 14px; }
  .kpi-grid { grid-template-columns: 1fr; }
  /* Judul seksi + keterangannya tidak muat berdampingan — keterangan
     dipaksa turun ke barisnya sendiri (tombol, mis. "Ubah Target",
     tetap sebaris dengan judul). */
  .kpi-header { flex-wrap: wrap; gap: 8px; }
  .kpi-header .report-sub { flex: 1 0 100%; margin-bottom: 0; }
  .trend { height: 110px; }
  .trend-label { font-size: 10.5px; }
  .bar-row .bar-label { width: 92px; }
  .agent-table { font-size: 14px; }
  .agent-table th,
  .agent-table td { padding: 8px 6px; }
  .mail-actions { flex-wrap: wrap; }
  .mail-actions .btn { flex: 1 1 auto; }
  .sync-info { max-width: 100%; flex: 1 1 100%; margin-right: 0; white-space: normal; overflow-wrap: anywhere; }
  /* Baris agent/tag/aturan: biarkan deskripsi menyusut & membungkus di
     tempat, jangan sampai tombol aksinya terlempar ke baris sendiri. */
  .rule-row,
  .kb-row { gap: 8px; }
  .rule-desc { min-width: 0; overflow-wrap: anywhere; }
  .rule-row > .btn,
  .kb-row > .btn,
  .rule-toggle { flex-shrink: 0; }

  /* ---- Menu profil, notifikasi, toast ---- */
  .profile-menu { width: min(268px, calc(100vw - 24px)); }
  .profile-item { padding: 12px; font-size: 15.5px; }
  .accent-dot { max-width: 32px; }
  #notif-stack {
    top: calc(64px + env(safe-area-inset-top));
    left: 12px;
    right: 12px;
    width: auto;
    max-width: none;
  }
  .notif-close { padding: 6px; }
  .toast {
    bottom: calc(16px + env(safe-area-inset-bottom));
    max-width: calc(100vw - 32px);
    text-align: center;
  }

  /* Gulir tiap panel berhenti di dirinya sendiri — tidak menyeret halaman
     di belakangnya (dan tidak memicu pull-to-refresh saat membaca thread). */
  .sidebar,
  .conv-list,
  .thread,
  .report-view,
  .customer-col,
  .palette ul,
  .modal { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }

  /* Kunci ukuran font kolom isian di 16px — di bawah itu iOS Safari
     otomatis mem-perbesar halaman ketika kolom mendapat fokus, dan
     halaman tidak pernah kembali ke skala semula.

     !important dipakai sengaja: ini pagar kegunaan, bukan pilihan gaya.
     Urutan saja tidak cukup karena selector di sini sebagian besar
     bernilai satu kelas, sehingga aturan komponen dua kelas mana pun
     mengalahkannya di mana pun ia diletakkan — persis yang terjadi pada
     `.composer-actions .control { font-size: 15px }`, yang membuat dua
     pemilih di komposer memicu zoom lagi. Kalau menambah aturan ukuran
     font untuk kontrol form, batasi ke layar lebar, jangan di sini. */
  input,
  select,
  textarea,
  .control,
  .search-wrap input,
  .mailbox-select select,
  .detail-controls select,
  .tag-add input,
  .composer textarea,
  .cc-fields input,
  .cust-notes,
  .form-textarea,
  .mail-form input[type="text"],
  .mail-form input[type="number"],
  .mail-form input[type="email"],
  .mail-form input[type="password"],
  .kpi-form input,
  .modal input[type="text"],
  .modal input[type="email"],
  .modal select,
  .modal textarea,
  .palette input { font-size: 16px !important; }
}

/* Layar sangat sempit (≤ 360px): rapatkan sisa jarak yang masih boros */
@media (max-width: 360px) {
  .topbar { gap: 4px; }
  .topbar-right { gap: 4px; }
  .conv-item { padding-left: 36px; }
  .stat-grid { grid-template-columns: 1fr; }
}

/* HP dimiringkan (landscape): lebarnya cukup untuk layout 3 kolom, tapi
   tingginya tinggal ~400px. Rampingkan elemen yang memakan tinggi agar
   thread & composer tetap kebagian ruang. */
@media (max-width: 1000px) and (max-height: 480px) and (orientation: landscape) {
  .topbar { height: calc(48px + env(safe-area-inset-top)); }
  .brand-name { display: none; }
  .composer { padding-top: 6px; padding-bottom: calc(8px + env(safe-area-inset-bottom)); }
  /* Tinggi bawaan textarea (2 baris) sendiri sudah ±73px. Di landscape
     dikunci satu baris dan baru memanjang saat composer dipakai, supaya
     saat membaca, thread yang kebagian ruang — bukan kotak balasan kosong. */
  .composer textarea { min-height: 40px; height: 40px; }
  .composer:focus-within textarea { height: 92px; }
  .composer-tabs { margin-bottom: 6px; }
  .composer-hint { display: none; }
  /* Basis persen yang dipakai di potret membuat tombol composer melebar
     jadi 4 baris (±300px) — di layar setinggi 360px thread tinggal 14px.
     Di landscape semuanya dipaksa satu baris yang bisa digeser mendatar. */
  .composer-actions {
    margin-top: 6px;
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
  }
  .composer-actions > * { flex: 0 0 auto; }
  .thread { padding-top: 10px; gap: 10px; }
  .detail-header { padding-top: 10px; padding-bottom: 10px; }
  .modal { max-height: 88vh; max-height: 88dvh; }
}

/* ============================================================
   Tablet (701–1250px, layar tinggi)
   ------------------------------------------------------------
   Masalah pada rentang ini sebelumnya:
   - Panel pelanggan display:none di bawah 1050px tanpa cara membukanya,
     jadi catatan pelanggan & riwayat tiket hilang sama sekali — persis
     kerugian yang sudah diperbaiki di HP.
   - Di iPad potret (820px): sidebar 176 + daftar 272 = 448px habis untuk
     kerangka, thread cuma kebagian 357px. Kolom baca lebih sempit
     daripada navigasinya sendiri.
   - Kontrol masih ukuran desktop (36/30px) padahal ini perangkat sentuh,
     dan kolom isian < 16px membuat Safari iPad mem-perbesar halaman.

   Aturan tata letak memakai ambang lebar (jendela desktop sempit punya
   masalah ruang yang sama), sedangkan pembesaran target sentuh memakai
   pointer:coarse supaya jendela desktop tidak ikut membesar.

   min-height: 481px menyingkirkan HP yang dimiringkan — layar sependek
   itu sudah ditangani blok HP.
   ============================================================ */

/* ---- Panel pelanggan jadi lembar geser, sama seperti di HP ----
   Berlaku sampai 1250px, bukan hanya sampai 1050px seperti aturan lama yang
   menyembunyikannya. Di iPad lanskap (1180px) kolom statis 232px membuat
   thread tinggal 432px; sebagai lembar geser thread dapat 664px dan datanya
   tetap sejauh satu ketukan. */
@media (min-width: 701px) and (max-width: 1400px) and (min-height: 481px) {
  #btn-cust-panel { display: inline-flex; }

  .customer-col {
    display: block;
    position: fixed;
    top: 0; right: 0; bottom: 0;
    z-index: 70;
    width: min(60vw, 360px);
    padding: 0 18px calc(18px + env(safe-area-inset-bottom));
    border-left: 1px solid var(--border);
    transform: translateX(101%);
    visibility: hidden;
    transition: transform .22s ease, visibility 0s linear .22s;
  }
  body.show-customer .customer-col {
    transform: none;
    visibility: visible;
    transition: transform .22s ease, visibility 0s;
    box-shadow: var(--shadow-lg);
  }
  .customer-col-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    position: sticky;
    top: 0;
    z-index: 1;
    margin: 0 -18px 16px;
    padding: calc(14px + env(safe-area-inset-top)) 12px 14px 18px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 16px;
  }

  .nav-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 59;
    background: rgba(15, 23, 42, .45);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
  }
  body.nav-open .nav-backdrop,
  body.show-customer .nav-backdrop { opacity: 1; pointer-events: auto; }
}

/* ---- Tablet sempit: sidebar jadi laci agar kolom baca dapat ruang ----
   Ambangnya dipilih dari satu prinsip: kolom baca jangan sampai di bawah
   ±480px. Dengan sidebar tampil, thread = lebar − 196 − 320, jadi sidebar
   baru layak muncul mulai ±1000px. Di bawah itu ia jadi laci — di 820px
   thread naik 357px → 505px.
   Daftar percakapan tetap berdampingan dengan thread (bukan master-detail
   seperti HP), jadi tombol ← tidak diperlukan. */
@media (min-width: 701px) and (max-width: 1000px) and (min-height: 481px) {
  .nav-toggle { display: inline-flex; width: 40px; padding: 0; flex-shrink: 0; }

  .sidebar {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    z-index: 60;
    width: min(56vw, 300px);
    padding: 0 0 calc(8px + env(safe-area-inset-bottom));
    border-right: 1px solid var(--border);
    transform: translateX(-101%);
    visibility: hidden;
    transition: transform .22s ease, visibility 0s linear .22s;
  }
  body.nav-open .sidebar {
    transform: none;
    visibility: visible;
    transition: transform .22s ease, visibility 0s;
    box-shadow: var(--shadow-lg);
  }
  .sidebar-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: calc(14px + env(safe-area-inset-top)) 12px 14px 18px;
    border-bottom: 1px solid var(--border);
  }
  .sidebar-head .brand-name {
    display: block;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 18px;
  }

  .conv-list-pane { width: 300px; }
}

/* ---- Target sentuh untuk tablet (bukan jendela desktop sempit) ---- */
@media (min-width: 701px) and (max-width: 1400px) and (min-height: 481px) and (pointer: coarse) {
  :root { --control-h: 40px; --control-h-sm: 34px; }

  .btn { min-height: 40px; }
  .btn-sm { min-height: 34px; }
  .folders li { padding: 12px 14px; }
  .kb-link { padding: 12px 14px; }
  .conv-item { padding: 16px 16px 16px 36px; }
  .prev-conv li { padding: 12px 0; }
  .profile-item { padding: 12px; }
  .accent-dot { max-width: 30px; }
  .tag-chip { padding: 6px 12px; }
  .tag-chip button { padding: 4px; margin: -4px -4px -4px 0; }
  .tag-add input { height: 32px; }
  .notif-close { padding: 6px; }
  .checkbox-row input[type="checkbox"] { width: 18px !important; height: 18px; }

  /* Tanpa hover, kotak centang aksi massal permanen (diatur global di
     @media (hover: none)) — geser dari teks dan perbesar agar bisa ditekan. */
  .bulk-check {
    top: 50%;
    left: 12px;
    width: 18px;
    height: 18px;
    transform: translateY(-50%);
  }
  .conv-item.bulk-on .bulk-check { opacity: 1; }

  .agent-table th,
  .agent-table td { padding: 10px 8px; }

  /* Safari di iPad juga mem-perbesar halaman saat kolom isian < 16px
     mendapat fokus — kunci 16px seperti di HP, termasuk !important-nya
     (alasannya ada di komentar blok HP di atas). */
  input,
  select,
  textarea,
  .control,
  .search-wrap input,
  .mailbox-select select,
  .detail-controls select,
  .tag-add input,
  .composer textarea,
  .cc-fields input,
  .cust-notes,
  .form-textarea,
  .mail-form input[type="text"],
  .mail-form input[type="number"],
  .mail-form input[type="email"],
  .mail-form input[type="password"],
  .kpi-form input,
  .modal input[type="text"],
  .modal input[type="email"],
  .modal select,
  .modal textarea,
  .palette input { font-size: 16px !important; }
}

/* ============================================================
   CETAK — hanya thread percakapan, tanpa kerangka aplikasi
   ============================================================ */
@media print {
  @page { margin: 16mm; }
  body { background: #fff !important; color: #000; }
  .topbar, .sidebar, .conv-list-pane, .composer, .customer-col, .detail-controls,
  .detail-title-row .btn, .viewers, #notif-stack, .toast, .modal-backdrop, .thread-event,
  .msg-delivery button, .btn-back { display: none !important; }
  .layout, .detail-pane, .thread-col, .thread { display: block !important; height: auto !important; overflow: visible !important; }
  .detail-title-row h1 { font-size: 20pt; margin-bottom: 8pt; }
  .msg { break-inside: avoid; border: 1px solid #ccc !important; box-shadow: none !important; margin-bottom: 8pt; page-break-inside: avoid; }
  .msg.note { display: none !important; } /* catatan internal tidak untuk dibagikan */
  .msg-body { color: #000 !important; }
  a { color: #000; text-decoration: underline; }
}

/* ---- Aksesibilitas: cincin fokus hanya untuk navigasi keyboard ---- */
:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: 8px;
}
.btn:focus-visible, .control:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline-offset: 1px;
}
/* Baris yang bisa diklik (kb-row berperan tombol) ikut mendapat cincin fokus */
[role="button"]:focus-visible { outline-offset: -2px; border-radius: 10px; }

/* ---- Modal verifikasi dua langkah ---- */
.tf-qr-wrap { display: flex; gap: 18px; align-items: flex-start; margin-bottom: 14px; flex-wrap: wrap; }
.tf-qr-wrap canvas { border-radius: 12px; border: 1px solid var(--border); background: #fff; flex-shrink: 0; }
.tf-secret {
  display: inline-block;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 14.5px;
  letter-spacing: .06em;
  padding: 8px 12px;
  border-radius: 10px;
  background: var(--hover);
  color: var(--text);
  word-break: break-all;
  user-select: all;
}

/* ---- Toast dengan aksi (mis. "Urungkan") ---- */
.toast { display: flex; align-items: center; gap: 12px; }
.toast-action {
  border: 0;
  background: rgba(255,255,255,.14);
  color: inherit;
  font: inherit;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 999px;
  cursor: pointer;
}
.toast-action:hover { background: rgba(255,255,255,.24); }

/* Penanda draf balasan yang belum terkirim di daftar percakapan */
.badge.draft { background: var(--warning-soft); color: var(--warning); }

/* Banner koneksi terputus — di bawah topbar, tidak menutup konten */
#offline-bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 60;
  padding: 8px 16px;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  background: var(--danger);
  transform: translateY(-100%);
  transition: transform .25s ease;
}
#offline-bar.show { transform: none; }

/* Textarea komposer tumbuh mengikuti isi (dibatasi setengah layar) */
#composer-text { resize: none; overflow-y: auto; max-height: 50vh; }

/* Kata yang cocok pada cuplikan hasil pencarian */
.conv-item .preview mark {
  background: var(--warning-soft);
  color: var(--text);
  border-radius: 4px;
  padding: 0 3px;
  font-weight: 600;
}

/* ---- Checklist persiapan go-live (Beranda admin) ---- */
.golive { border-color: color-mix(in srgb, var(--primary) 35%, var(--border)); }
.golive .eyebrow { margin-bottom: 4px; }
.golive-count {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  color: var(--primary);
}
.golive-count small { font-size: 15px; color: var(--text-3); font-weight: 600; }
.golive-bar { height: 6px; border-radius: 999px; background: var(--hover); overflow: hidden; margin: 4px 0 10px; }
.golive-bar span { display: block; height: 100%; border-radius: inherit; background: var(--primary); transition: width .4s ease; }
.golive-item { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--row-line); }
.golive-item:last-child { border-bottom: 0; }
.golive-check {
  display: grid; place-items: center; flex-shrink: 0;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--warning-soft); color: var(--warning);
}
.golive-item.ok .golive-check { background: var(--success-soft); color: var(--success); }
.golive-item.ok .rule-desc b { color: var(--text-3); font-weight: 500; }
.golive-item .rule-desc { flex: 1; min-width: 0; }

/* ---- Zona berbahaya (Mulai bersih) ---- */
.danger-zone {
  display: flex; align-items: center; gap: 14px;
  margin-top: 18px; padding: 14px 16px;
  border: 1px solid color-mix(in srgb, var(--danger) 40%, var(--border));
  border-radius: 14px;
  background: color-mix(in srgb, var(--danger) 6%, transparent);
}
.danger-zone .rule-desc { flex: 1; }
.danger-zone .rule-desc b { color: var(--danger); }
@media (max-width: 640px) { .danger-zone { flex-direction: column; align-items: stretch; } }

/* ============================================================
   FORM — label, jarak, dan tombol aksi yang seragam
   ============================================================ */
:is(.modal, .mail-form, .kpi-form) label:not(.checkbox-row) {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-2);
}
.modal label:not(.checkbox-row) { margin-bottom: 14px; }
.checkbox-row { gap: 10px; font-size: 15px; color: var(--text-2); margin-bottom: 10px; }
/* Tombol aksi form setinggi kolom isiannya, apa pun ukuran kelasnya */
:is(.mail-actions, .modal-actions, .kpi-form-actions) .btn {
  height: var(--control-h);
  padding: 0 20px;
  font-size: 15px;
}
.modal-actions { margin-top: 20px; }

/* ---- Baris anggota tim: peran sebagai pemilih berlabel, aksi bertulisan ---- */
.team-row { flex-wrap: wrap; gap: 10px 12px; padding: 12px 0; }
.team-row .rule-desc { flex: 1; min-width: 200px; }
.team-row .rule-desc .badge { margin-left: 4px; vertical-align: 1px; }
.team-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.team-role select { min-width: 96px; }
.btn.text-danger { color: var(--danger); }
.btn.text-danger:hover { background: var(--danger-soft); }
@media (max-width: 640px) {
  .team-actions { width: 100%; justify-content: flex-start; padding-left: 36px; }
}

/* ---- Kotak kredensial (akun baru / reset password) ---- */
.cred-box { display: grid; gap: 10px; padding: 14px 16px; margin-bottom: 12px; border-radius: 14px; background: var(--hover); }
.cred-box > div { display: flex; flex-direction: column; gap: 2px; }
.cred-box b { font-size: 16px; color: var(--text); word-break: break-all; }
.cred-pw { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .06em; user-select: all; }

/* Label untuk pembaca layar saja */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* Pemilih di baris aksi komposer setinggi tombol Kirim di sebelahnya */
.composer-actions .control { height: var(--control-h); font-size: 15px; }

/* ---- Putaran 2: konsistensi ---- */
/* Tautan bergaya tombol tidak bergaris bawah (Ekspor CSV/JSON, dsb.) */
a.btn, a.btn:hover { text-decoration: none; }

/* Kelompok di dalam form panjang (Pengaturan › Otomasi) */
.form-group-title {
  grid-column: 1 / -1;
  margin: 8px 0 -4px;
  padding-top: 16px;
  border-top: 1px solid var(--row-line);
  font-size: var(--fs-micro);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--track-eyebrow);
  color: var(--text-3);
}
.form-group-title:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.field-hint { display: block; margin-top: 6px; font-size: 13px; font-weight: 400; color: var(--text-3); }
.mail-form .checkbox-row { align-items: flex-start; margin-bottom: 0; line-height: 1.5; font-weight: 400; }
.mail-form .checkbox-row input { margin-top: 3px !important; }
.checkbox-row b { font-weight: 600; color: var(--text); }
.checkbox-row em { font-style: normal; }

/* Ikon mini di baris daftar (mailbox) */
.list-empty-icon.mini { width: 30px; height: 30px; margin: 0; flex-shrink: 0; }
.list-empty-icon.mini .icon { width: 15px; height: 15px; }

/* Panel detail kosong: ikon lingkaran seperti empty state lainnya */
.empty-state .list-empty-icon { width: 56px; height: 56px; }
/* Navigasi lompat menempel TEPAT di tepi atas area gulir (menutup padding
   halaman), berlatar penuh agar isi kartu tidak terlihat di belakangnya */
.jump-nav {
  top: -24px;
  margin: 4px -24px 14px;
  padding: 12px 24px;
  background: color-mix(in srgb, var(--bg) 94%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--row-line);
}
@media (max-width: 640px) {
  .jump-nav {
    top: -16px;
    margin: 4px -14px 12px;
    padding: 10px 14px;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .jump-nav::-webkit-scrollbar { display: none; }
  .jump-nav a { flex-shrink: 0; }
}

/* Menu "Lainnya" di header tiket */
.more-wrap { position: relative; }
.more-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 30;
  min-width: 220px;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow-lg);
}
.more-menu .profile-item { width: 100%; }

/* ============================================================
   Putaran 3 — tema & perangkat
   ============================================================ */
/* Beri tahu browser tema aktifnya: kotak centang, pemilih waktu, daftar
   pilihan <select>, dan scrollbar bawaan ikut gelap/terang (sebelumnya
   kotak centang tampil putih menyala di tema gelap) */
:root { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--primary); width: 17px; height: 17px; cursor: pointer; }
/* HP: menu "Lainnya" di panel kontrol tiket tampil sebagai daftar di dalam
   panel (panel bisa digulir; dropdown melayang akan terpotong tepinya) */
@media (max-width: 700px), (max-width: 1000px) and (max-height: 480px) {
  .detail-controls .more-wrap { flex: 1 1 46%; }
  .detail-controls .more-wrap > .btn { width: 100%; }
  .detail-controls .more-menu {
    position: static;
    margin-top: 6px;
    padding: 4px 0 0;
    border: 0;
    border-top: 1px solid var(--row-line);
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    min-width: 0;
  }
  /* Baris tim: aksi sejajar tepi kiri, bukan inden menggantung */
  .team-actions { padding-left: 0; }
}
/* Latar navigasi lompat pekat — versi tembus-pandang memperlihatkan tombol
   merah "Mulai bersih" sebagai noda kabur saat digulir di belakangnya */
.jump-nav { background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none; }

/* ============================================================
   Warna & komponen ala app Manage (putaran 4–6)
   ============================================================ */
/* Ruang kanan untuk panah dropdown kustom — aturan per-konteks di atas
   menulis padding simetris dan membuat teks menabrak panah */
select.control, .mail-form .mail-select, .mailbox-select select, .agent-switch select, .team-role select {
  padding-right: 36px;
  background-position: right 12px center;
}

/* ---- Tombol: isian tanpa garis tepi (Manage) ----
   Biasa = abu transparan, Utama = aksen pekat, Hantu = tanpa latar,
   Bahaya = merah LEMBUT (bukan merah pekat) agar tidak berteriak */
.btn { border-color: transparent; background: var(--fill); color: var(--text); font-weight: 600; }
.btn:hover { background: var(--fill-2); border-color: transparent; }
.btn:active { transform: scale(.97); }
.btn-primary { background: var(--primary-fill); color: #fff; box-shadow: none; }
.btn-primary:hover { background: var(--primary-hover); }
.btn-ghost { background: transparent; color: var(--text-2); }
.btn-ghost:hover { background: var(--hover); color: var(--text); }
.btn-danger { background: var(--danger-soft); color: var(--danger); }
.btn-danger:hover { background: color-mix(in srgb, var(--danger) 18%, transparent); }
.btn.text-danger { background: transparent; color: var(--danger); }
.btn.text-danger:hover { background: var(--danger-soft); }

/* ---- Kartu tanpa bingkai: bayangan halus + sudut lebih bulat ---- */
.report-section, .stat-card, .msg { border-color: transparent; box-shadow: var(--shadow-md); }
.report-section { border-radius: var(--radius-lg); }
.stat-card { border-radius: var(--radius-lg); }
.msg { border-radius: 16px; }
.msg.note { box-shadow: none; }
.modal { border-radius: 22px; }
.kpi-card { border-color: transparent; background: var(--surface-2); border-radius: 14px; }

/* ---- Navigasi kiri: latar abu tipis, item aktif netral, ikon beraksen ---- */
.sidebar { background: var(--sidebar); border-right-color: var(--border); }
.folders li { color: var(--text); font-weight: 500; }
.folders li:hover { background: var(--hover); }
.folders li.active { background: var(--selected); color: var(--text); font-weight: 600; }
.folders li .icon { color: var(--primary); }
.folders .count { background: transparent; color: var(--text-2); font-weight: 600; font-variant-numeric: tabular-nums; }
.folders li.active .count { background: transparent; color: var(--text); }
.mailbox-select select { background-color: var(--surface); }

/* ---- Pencarian topbar: kolom isian lembut tanpa garis tepi ---- */
.search-wrap input { background-color: var(--fill); border-color: transparent; }

/* ---- Chip navigasi lompat & tab komposer: isian, bukan garis ---- */
.jump-nav a { border-color: transparent; background: var(--fill); color: var(--text); }
.jump-nav a:hover { background: var(--fill-2); color: var(--text); border-color: transparent; }

/* ---- Badge kanal memakai warna sistem yang sama ---- */
.badge.ch-play { background: var(--success-soft); color: var(--success); }
.badge.ch-as { background: var(--blue-soft); color: var(--blue); }

/* Butir checklist opsional (mis. 2FA): netral, bukan peringatan */
.golive-item.optional:not(.ok) .golive-check { background: var(--neutral-soft); color: var(--text-2); }
.golive-item.optional .badge { margin-left: 4px; vertical-align: 1px; }