:root {
  --bg: #eef0f2;
  --panel: #ffffff;
  --panel-soft: #f7f8fa;
  --border: #e5e7eb;
  --text: #1a1d23;
  --muted: #6b7280;
  --muted-soft: #9aa0a6;
  /* Palet tosca: teal cerah untuk aksen/tombol, teal tua untuk header/top bar. */
  --primary: #14b8a6;
  --primary-dark: #0d9488;
  --header-green: #14b8a6;
  --primary-soft: #ccfbf1;
  --accent: #2563eb;
  --danger: #dc2626;
  --danger-soft: #fdecea;
  --warning: #d97706;
  --bubble-in: #ffffff;
  --bubble-out: #cdf7f0;
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, .06);
  --shadow-md: 0 4px 16px rgba(16, 24, 40, .08);
  --radius: 12px;
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
}

body {
  margin: 0;
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

/* Scrollbar halus (Chromium/Edge) */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #c7cbd1; border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: #a9aeb5; }

/* --- Avatar bulat berinisial, dipakai di sidebar/team/chat header --- */
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 50%;
  color: #fff;
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1;
}
.avatar-xs { width: 22px; height: 22px; font-size: 10px; }
.rail-bubble-icon { position: relative; width: 27px; height: 27px; }
.rail-bubble-icon svg { display: block; }
.rail-headset-num {
  position: absolute;
  left: 50%;
  top: 63%;
  transform: translate(-50%, -50%);
  font-size: 8.5px;
  font-weight: 800;
  color: #fff;
  line-height: 1;
  text-shadow: 0 0 2px rgba(0,0,0,.55);
}
.avatar-sm { width: 34px; height: 34px; font-size: 13px; }
.avatar-md { width: 42px; height: 42px; font-size: 15px; }

/* --- Auth --- */
.auth-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, #0f3d3a 0%, #0f766e 45%, #14b8a6 100%);
}

.auth-card {
  background: var(--panel);
  border-radius: 16px;
  padding: 36px 32px;
  width: 340px;
  box-shadow: 0 20px 50px rgba(0,0,0,.25);
}

.auth-card h1 {
  font-size: 21px;
  margin: 0 0 4px;
  letter-spacing: -.01em;
}

.auth-card p.sub {
  color: var(--muted);
  font-size: 13px;
  margin: 0 0 22px;
}

.field { margin-bottom: 14px; }
.field label { display: block; font-size: 13px; margin-bottom: 6px; color: var(--muted); font-weight: 500; }
.field input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 9px;
  font-size: 14px;
  transition: border-color .15s, box-shadow .15s;
}
.field input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: none;
  border-radius: 9px;
  padding: 10px 16px;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  background: var(--primary);
  color: #fff;
  transition: background .15s, transform .05s, box-shadow .15s;
}
.btn:hover { background: var(--primary-dark); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: default; transform: none; }
.btn.btn-block { width: 100%; }
.btn.btn-outline { background: transparent; color: var(--primary); border: 1px solid var(--primary); }
.btn.btn-outline:hover { background: var(--primary-soft); }
.btn.btn-danger { background: var(--danger); }
.btn.btn-danger:hover { background: #b91c1c; }
.btn.btn-sm { padding: 5px 11px; font-size: 12px; }

.error-box {
  background: var(--danger-soft);
  color: var(--danger);
  border: 1px solid #f5c2c0;
  border-radius: 9px;
  padding: 10px 12px;
  font-size: 13px;
  margin-bottom: 14px;
}

/* --- Dashboard shell --- */
.app-shell {
  height: 100vh;
  display: grid;
  grid-template-columns: 64px 390px 1fr;
}

/* --- Rail ikon sempit di paling kiri (menu pengaturan + bubble status tim), ala WhatsApp --- */
.icon-rail {
  background: var(--header-green);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 0;
  gap: 6px;
  min-height: 0;
}
.icon-rail-top { display: flex; flex-direction: column; gap: 6px; }
.rail-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: none;
  background: transparent;
  font-size: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  text-decoration: none;
  color: rgba(255,255,255,.85);
  transition: background .12s;
  font-family: inherit;
}
.rail-icon:hover { background: rgba(255,255,255,.14); color: #fff; }
.icon-rail-divider { width: 30px; height: 1px; background: rgba(255,255,255,.25); margin: 8px 0 4px; flex-shrink: 0; }

/* Bubble avatar tiap anggota CS -- SELALU tampil (baik yang lagi online
   maupun offline), beda dengan panel status tim versi sebelumnya yang bisa
   disembunyikan. Yang offline dibuat pudar supaya tetap kebedakan sekilas
   tanpa harus dihilangkan dari rail. */
.icon-rail-cs {
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
  padding: 4px 0;
  flex: 1;
  min-height: 0;
}
.rail-bubble { position: relative; flex-shrink: 0; cursor: default; }
.rail-bubble.offline .avatar { opacity: .35; }
.rail-dot {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid var(--header-green);
}
.rail-dot.free { background: #4ee6d3; }
.rail-dot.busy { background: #f5a623; }
.rail-dot.offline { background: rgba(255,255,255,.4); }

.icon-rail-bottom {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding-top: 8px;
}
.icon-rail-bottom form { margin: 0; }
.rail-me { box-shadow: 0 0 0 2px rgba(255,255,255,.5); }

.sidebar-identity {
  padding: 12px 16px 0;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text);
}
.sidebar-identity-status { font-weight: 400; color: var(--muted); font-size: 11.5px; }

.sidebar {
  border-right: 1px solid var(--border);
  background: var(--panel);
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.sidebar-header {
  padding: 14px 16px;
  background: var(--header-green);
}
.sidebar-header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.sidebar-header-links {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.sidebar-header .who { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; }
.sidebar-header .who-text { display: flex; flex-direction: column; min-width: 0; }
.sidebar-header .who-name {
  font-weight: 700;
  font-size: 13.5px;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sidebar-header .who-status {
  font-size: 11px;
  color: rgba(255,255,255,.75);
  display: flex;
  align-items: center;
  gap: 4px;
}
.sidebar-header .status-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--primary); display: inline-block;
  box-shadow: 0 0 0 2px rgba(255,255,255,.25);
}
.sidebar-header .btn-outline {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255,255,255,.55);
}
.sidebar-header .btn-outline:hover { background: rgba(255,255,255,.12); }
.sidebar-header .avatar { box-shadow: 0 0 0 2px rgba(255,255,255,.35); }

/* Baris judul yang bisa diklik buat lipat/buka daftar status tim -- default
   terlipat (lihat dashboard.js) supaya daftar chat (yang jauh lebih sering
   dipakai, apalagi kalau chat masuk banyak) dapat ruang lebih lega tanpa
   perlu scroll. */
.team-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  border: none;
  border-bottom: 1px solid var(--border);
  background: var(--panel-soft);
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
.team-toggle:hover { color: var(--primary-dark); }
.team-toggle-chevron { transition: transform .15s; }
.team-toggle-chevron.open { transform: rotate(180deg); }

.team-list {
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--panel-soft);
}
/* Sama seperti .chat-search-bar/.note-panel/.file-preview -- "display: flex"
   di atas menang atas default browser untuk [hidden], jadi butuh guard ini
   supaya toggle beneran menyembunyikan, bukan cuma keliatan kosong. */
.team-list[hidden] { display: none; }
.team-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
}
.team-row .name { font-weight: 600; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.team-row .avatar { opacity: .45; }
.team-row.online-free .avatar,
.team-row.online-busy .avatar { opacity: 1; }
.team-row.me .name::after { content: " (Anda)"; font-weight: 400; color: var(--muted); }

.status-pill {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  background: #eef0f2;
  color: var(--muted-soft);
  white-space: nowrap;
}
.team-row.online-free .status-pill { background: var(--primary-soft); color: var(--primary-dark); }
.team-row.online-busy .status-pill { background: #fef3e2; color: var(--warning); }

/* Tab Aktif/Riwayat + chip Semua/Belum Dibaca digabung SATU baris (space-between)
   supaya lebih ringkas -- chip cuma nyala saat tab Aktif (lihat switchTab() di JS). */
.sidebar-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 10px;
  border-bottom: 1px solid var(--border);
}
.sidebar-tabs { display: flex; flex-shrink: 0; }
.tab-btn {
  border: none;
  background: transparent;
  padding: 11px 9px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color .15s, border-color .15s;
  white-space: nowrap;
}
.tab-btn:hover { color: var(--primary-dark); }
.tab-btn.active { color: var(--primary); border-bottom-color: var(--primary); }

.history-search { padding: 10px 16px; border-bottom: 1px solid var(--border); }
.history-search input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 12.5px;
  background: var(--panel-soft);
  transition: border-color .15s, background .15s;
}
.history-search input:focus {
  outline: none;
  border-color: var(--primary);
  background: var(--panel);
}

/* --- Filter "per CS" di tab Riwayat -- lihat riwayat chat CS tertentu saja --- */
.history-cs-filter { padding: 0 16px 10px; }
.history-cs-filter select {
  width: 100%;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 12.5px;
  background: var(--panel);
  color: var(--text);
}
.history-cs-filter select:focus { outline: none; border-color: var(--primary); }

/* --- Chip "Semua / Belum Dibaca", digabung satu baris dengan tab Aktif/Riwayat --- */
.filter-chips { display: flex; gap: 6px; flex-shrink: 0; }
.filter-chips[hidden] { display: none; }
.chip {
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--muted);
  border-radius: 999px;
  padding: 5px 11px;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background .12s, color .12s, border-color .12s;
}
.chip:hover { background: var(--panel-soft); }
.chip.active { background: var(--primary-soft); color: var(--primary-dark); border-color: var(--primary-soft); }

.sidebar-list { overflow-y: auto; flex: 1; }
.sidebar-empty-all { padding: 24px 16px; color: var(--muted-soft); font-size: 12.5px; text-align: center; }
.sidebar-group-title {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted-soft);
  padding: 14px 16px 6px;
  margin: 0;
}

.conv-item {
  padding: 6px 16px;
  border-bottom: 1px solid #f2f3f5;
  cursor: pointer;
  display: flex;
  gap: 8px;
  align-items: center;
  border-left: 3px solid transparent;
  transition: background .12s;
}
.conv-item:hover { background: var(--panel-soft); }
.conv-item.active { background: var(--primary-soft); border-left-color: var(--primary); }
.conv-item-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.conv-item-top { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; }
.conv-item .name { font-weight: 700; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conv-item .time-inline { font-size: 10px; color: var(--muted-soft); flex-shrink: 0; }
.conv-item .preview { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conv-item .meta { font-size: 10.5px; color: var(--muted); display: flex; align-items: center; gap: 6px; margin-top: 1px; }

/* Badge angka "pesan belum dibaca" -- di ujung kanan baris preview, hilang begitu chat dibuka. */
.preview-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.preview-row .preview { flex: 1; min-width: 0; }
.unread-badge {
  flex-shrink: 0;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.conv-item.has-unread { background: #f0fbfa; }
.conv-item.has-unread .preview { color: var(--text); font-weight: 600; }
.conv-item.has-unread:hover { background: #e3f7f4; }

.badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  letter-spacing: .01em;
}
.badge-unassigned { background: #fef3e2; color: var(--warning); }
.badge-open { background: #dbeafe; color: var(--accent); }
.badge-closed { background: #eef0f2; color: var(--muted-soft); }

/* Badge kategori (tag) di daftar chat -- warna beda tiap kategori biar
   gampang dibedakan sekilas tanpa perlu buka chat-nya satu-satu. */
.tag-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  letter-spacing: .01em;
}
.tag-komplain { background: var(--danger-soft); color: var(--danger); }
.tag-order { background: #dbeafe; color: var(--accent); }
.tag-tanya-produk { background: var(--primary-soft); color: var(--primary-dark); }
.tag-lainnya { background: #eef0f2; color: var(--muted-soft); }
/* Chat "nyangkut" -- pemiliknya offline, ada pesan pelanggan belum dibaca. */
.tag-attention { background: var(--danger-soft); color: var(--danger); }

.handled-by {
  font-size: 10.5px;
  color: var(--muted-soft);
  margin-top: 2px;
}

.claim-btn {
  margin-top: 6px;
  align-self: flex-start;
  font-size: 11.5px;
  padding: 5px 12px;
}

/* --- Chat panel --- */
.chat-panel { display: flex; flex-direction: column; min-height: 0; background: var(--panel); position: relative; }

/* Tombol melayang "Pesan baru" -- muncul cuma pas CS lagi scroll ke atas baca
   histori lama DAN ada pesan masuk baru, biar ga kelewat. Diposisikan
   relatif ke .chat-panel (bukan .chat-body) supaya tetap "ngambang" pas
   halaman di-scroll, bukan ikut ke-scroll bareng isi chat. */
.chat-jump-btn {
  position: absolute;
  left: 50%;
  bottom: 78px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: none;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  box-shadow: var(--shadow-md);
  cursor: pointer;
  z-index: 5;
}
.chat-jump-btn[hidden] { display: none; }
.chat-jump-btn:hover { background: var(--primary-dark); }
.chat-jump-btn #chat-jump-count { opacity: .85; }
.chat-header {
  padding: 12px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--panel);
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: var(--shadow-sm);
  z-index: 1;
}
.chat-header-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
/* Cuma kepakai di layar sempit (lihat @media di bawah) -- di desktop selalu disembunyikan. */
.mobile-back-btn {
  display: none;
  border: none;
  background: transparent;
  font-size: 20px;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
  padding: 4px 2px;
  flex-shrink: 0;
}
.chat-header .title { font-weight: 700; font-size: 14.5px; }
.chat-header .subtitle { font-size: 11.5px; color: var(--muted); display: flex; align-items: center; gap: 6px; margin-top: 2px; }

.chat-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  background-color: #e7e9ec;
  background-image:
    radial-gradient(circle, rgba(0,0,0,.035) 1px, transparent 1px);
  background-size: 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bubble {
  max-width: 62%;
  padding: 8px 12px;
  border-radius: 12px;
  font-size: 13.5px;
  line-height: 1.45;
  box-shadow: var(--shadow-sm);
  position: relative;
}
.bubble-text { white-space: pre-wrap; word-break: break-word; }
.bubble .time {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  color: var(--muted-soft);
  margin-top: 4px;
  justify-content: flex-end;
}
.bubble.in { align-self: flex-start; background: var(--bubble-in); border-top-left-radius: 3px; }
.bubble.out { align-self: flex-end; background: var(--bubble-out); border-top-right-radius: 3px; }
.bubble.out.failed { background: var(--danger-soft); }

.tick { font-size: 11px; }
.tick-sent { color: var(--accent); }
.tick-pending { color: var(--muted-soft); }
.tick-failed { color: var(--danger); }

.retry-btn {
  border: none;
  background: none;
  color: var(--danger);
  font-size: 10px;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
  margin-left: 2px;
  font-family: inherit;
}
.retry-btn:hover { color: #b91c1c; }
.retry-btn:disabled { opacity: .6; cursor: default; text-decoration: none; }

/* --- Bubble "pesan telah dihapus" -- placeholder abu-abu, bukan hilang tanpa jejak --- */
.bubble.deleted { background: var(--panel-soft); box-shadow: none; }
.bubble-deleted-text {
  color: var(--muted);
  font-size: 12.5px;
  font-style: italic;
}
.edited-tag { color: var(--muted-soft); font-style: italic; }

/* --- Tombol aksi edit/hapus, muncul di pojok bubble milik sendiri saat hover --- */
.msg-actions {
  position: absolute;
  top: -12px;
  right: 6px;
  display: flex;
  gap: 3px;
  opacity: 0;
  transition: opacity .12s ease;
}
.bubble.out:hover .msg-actions,
.bubble.out .msg-actions:focus-within { opacity: 1; }
.msg-action-btn {
  border: 1px solid var(--border);
  background: var(--panel);
  border-radius: 999px;
  width: 22px;
  height: 22px;
  font-size: 11px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  padding: 0;
}
.msg-action-btn:hover { background: var(--panel-soft); }

/* --- Bar "Mengedit pesan" di atas composer -- muncul saat CS klik ✏️ di bubble sendiri --- */
.composer-editing-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 10px;
  margin-bottom: 6px;
  background: var(--panel-soft);
  border-left: 3px solid var(--primary);
  border-radius: 6px;
  font-size: 11.5px;
  color: var(--text);
}
.composer-editing-bar[hidden] { display: none; }
.composer-editing-bar button {
  border: none;
  background: none;
  color: var(--primary);
  font-weight: 700;
  font-size: 11.5px;
  cursor: pointer;
  padding: 0;
  font-family: inherit;
}
.composer-editing-bar button:hover { color: var(--primary-dark); }

.chat-empty, .chat-composer-disabled {
  color: var(--muted);
  font-size: 13px;
  text-align: center;
  margin: auto;
}

/* --- Ilustrasi saat belum ada chat yang dipilih (tampilan awal / setelah tutup chat) --- */
.chat-empty-state {
  margin: auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  max-width: 320px;
}
.chat-empty-state svg { display: block; }
.chat-empty-state h2 { margin: 0; font-size: 17px; font-weight: 700; color: var(--text); }
.chat-empty-state p { margin: 0; font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.chat-composer-disabled { background: var(--panel-soft); border-top: 1px solid var(--border); }

.chat-composer {
  border-top: 1px solid var(--border);
  padding: 12px 16px;
  background: var(--panel);
  display: flex;
  align-items: flex-end;
  gap: 8px;
}
.chat-composer .composer-input-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.chat-composer textarea {
  width: 100%;
  resize: none;
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 10px 16px;
  font-size: 13.5px;
  font-family: inherit;
  height: 42px;
  background: var(--panel-soft);
  transition: border-color .15s, background .15s;
}
.chat-composer textarea:focus {
  outline: none;
  border-color: var(--primary);
  background: var(--panel);
}
.chat-composer .attach-btn {
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 50%;
  font-size: 16px;
  line-height: 1;
  flex-shrink: 0;
}
.chat-composer button[type="submit"] {
  border-radius: 20px;
  padding: 10px 20px;
  flex-shrink: 0;
}

.file-preview { display: flex; }
.file-preview[hidden] { display: none; }
.file-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--panel-soft);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px 8px 4px 12px;
  font-size: 12px;
  color: var(--text);
  max-width: 100%;
}
.file-chip button {
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  color: var(--muted);
  padding: 2px 4px;
  border-radius: 50%;
}
.file-chip button:hover { color: #fff; background: var(--danger); }

/* Lampiran di dalam bubble chat */
.bubble-media-img {
  display: block;
  max-width: 240px;
  max-height: 240px;
  border-radius: 8px;
  margin-bottom: 4px;
  object-fit: cover;
}
.bubble-media-video {
  display: block;
  max-width: 260px;
  max-height: 260px;
  border-radius: 8px;
  margin-bottom: 4px;
}
.bubble-media-audio { display: block; max-width: 240px; margin-bottom: 4px; }
.bubble-doc {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(0,0,0,.045);
  border-radius: 9px;
  padding: 9px 11px;
  margin-bottom: 4px;
  font-size: 12.5px;
  color: var(--text);
  text-decoration: none;
  word-break: break-all;
  transition: background .15s;
}
.bubble-doc:hover { background: rgba(0,0,0,.09); }

.top-actions { display: flex; gap: 8px; align-items: center; }

/* --- Cari di dalam percakapan yang lagi dibuka --- */
.chat-search-bar {
  padding: 8px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--panel-soft);
  display: flex;
  align-items: center;
  gap: 8px;
}
/* "display: flex" di atas menang atas default browser untuk atribut [hidden]
   (sama-sama satu selector, tapi ini CSS milik kita) -- tanpa baris ini,
   toggle sembunyikan/tampilkan baris cari (tombol kaca pembesar / silang)
   tidak akan pernah benar-benar menyembunyikannya. */
.chat-search-bar[hidden] { display: none; }
.chat-search-bar input {
  flex: 1;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 12.5px;
  background: var(--panel);
}
.chat-search-bar input:focus { outline: none; border-color: var(--primary); }
.chat-search-count { font-size: 11.5px; color: var(--muted); min-width: 34px; text-align: center; }
mark.chat-search-hit { background: #ffe58f; color: inherit; border-radius: 2px; padding: 0 1px; }
.bubble.chat-search-current { box-shadow: 0 0 0 2px var(--primary); }

/* --- Status koneksi WA (badge di bawah header sidebar, latar PUTIH -- jadi
   warnanya kebalikan dari badge di dalam header hijau: teks gelap, bukan putih) --- */
.wa-status-badge {
  margin: 10px 16px;
  padding: 5px 10px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  background: var(--panel-soft);
  color: var(--muted);
}
.wa-status-badge.wa-connected { background: var(--primary-soft); color: var(--primary-dark); }
.wa-status-badge.wa-disconnected { background: var(--danger-soft); color: var(--danger); }

/* --- Toolbar tag + catatan internal di header chat --- */
.chat-toolbar {
  padding: 8px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--panel-soft);
  display: flex;
  align-items: center;
  gap: 8px;
}
.tag-select, .transfer-select {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 5px 8px;
  font-size: 12px;
  background: var(--panel);
  color: var(--text);
}
.note-panel {
  padding: 10px 20px;
  border-bottom: 1px solid var(--border);
  background: #fffbe8;
  display: flex;
  gap: 8px;
  align-items: flex-start;
}
.note-panel[hidden] { display: none; }
.note-panel textarea {
  flex: 1;
  min-height: 54px;
  resize: vertical;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 12.5px;
  font-family: inherit;
}
.note-panel textarea:focus { outline: none; border-color: var(--primary); }

/* --- Panel "Media & Dokumen" (overlay tengah layar), dipicu tombol 🗂 di header chat --- */
.media-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(16, 24, 40, .45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 20;
  padding: 24px;
}
.media-modal {
  background: var(--panel);
  border-radius: var(--radius);
  width: 420px;
  max-width: 100%;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.media-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  font-weight: 700;
  font-size: 14px;
}
.media-modal-close {
  border: none;
  background: transparent;
  font-size: 20px;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
  padding: 2px 4px;
}
.media-modal-close:hover { color: var(--text); }
.media-modal-body { padding: 16px 18px; overflow-y: auto; }
.media-empty { color: var(--muted-soft); font-size: 12.5px; text-align: center; margin: 20px 0; }
.media-section-title {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted-soft);
  margin: 0 0 8px;
}
.media-section-title:not(:first-child) { margin-top: 18px; }

.media-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-bottom: 2px;
}
.media-thumb {
  position: relative;
  display: block;
  aspect-ratio: 1;
  border-radius: 8px;
  overflow: hidden;
  background: var(--panel-soft);
}
.media-thumb img, .media-thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.media-thumb-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 18px;
  background: rgba(0,0,0,.25);
}

.media-doc-list { display: flex; flex-direction: column; gap: 4px; }
.media-doc-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: 8px;
  text-decoration: none;
  color: var(--text);
  transition: background .12s;
}
.media-doc-row:hover { background: var(--panel-soft); }
.media-doc-icon { font-size: 18px; flex-shrink: 0; }
.media-doc-info { display: flex; flex-direction: column; min-width: 0; }
.media-doc-name { font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; }
.media-doc-date { font-size: 11px; color: var(--muted-soft); }

/* --- Popup template balasan cepat, mengambang di atas textarea composer --- */
.qr-popup {
  position: absolute;
  bottom: 52px;
  left: 0;
  right: 0;
  max-height: 220px;
  overflow-y: auto;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow-md);
  padding: 6px;
  z-index: 5;
}
.composer-input-wrap { position: relative; }
.qr-popup-item {
  display: block;
  width: 100%;
  text-align: left;
  border: none;
  background: transparent;
  padding: 8px 10px;
  font-size: 12.5px;
  border-radius: 6px;
  cursor: pointer;
  color: var(--text);
}
.qr-popup-item:hover { background: var(--primary-soft); }
.qr-popup-empty { font-size: 12px; color: var(--muted); padding: 8px; margin: 0; }

/* --- Halaman kelola (Kelola Tim / Template Balasan / Laporan) --- */
.manage-wrap { max-width: 760px; margin: 32px auto; padding: 0 20px 60px; }
/* Halaman Kelola Tim butuh lebih lebar -- tabelnya sekarang 6 kolom (nama,
   nama ke pelanggan, email, status, reset password, aksi), kalau dipaksa
   di lebar manage-wrap biasa nama CS jadi kepotong/turun baris. */
.manage-wrap-wide { max-width: 1040px; }
.manage-table-scroll { overflow-x: auto; }
.manage-table td:first-child, .manage-table th:first-child { white-space: nowrap; }
.manage-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.manage-header h1 { font-size: 20px; margin: 0; }
.manage-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 22px;
  margin-bottom: 20px;
  box-shadow: var(--shadow-sm);
}
.manage-card h2 { font-size: 14.5px; margin: 0 0 14px; }
.manage-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.manage-table th {
  text-align: left;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted-soft);
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
}
.manage-table td { padding: 8px; border-bottom: 1px solid #f2f3f5; vertical-align: middle; }
.manage-table tr.row-inactive { opacity: .55; }
.pill { font-size: 10.5px; font-weight: 700; padding: 2px 9px; border-radius: 999px; }
.pill-green { background: var(--primary-soft); color: var(--primary-dark); }
.pill-gray { background: #eef0f2; color: var(--muted-soft); }
.inline-form { display: flex; gap: 6px; }
.team-actions-cell { display: flex; gap: 6px; }
.inline-form input { border: 1px solid var(--border); border-radius: 7px; padding: 5px 8px; font-size: 12px; width: 130px; }
.manage-form { display: flex; flex-direction: column; gap: 12px; max-width: 360px; }
.manage-form label { font-size: 12.5px; color: var(--muted); font-weight: 500; display: flex; flex-direction: column; gap: 5px; }
.manage-form input, .manage-form textarea {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 9px 11px;
  font-size: 13.5px;
  font-family: inherit;
  color: var(--text);
}
.manage-form input:focus, .manage-form textarea:focus { outline: none; border-color: var(--primary); }
.field-error { color: var(--danger); font-size: 12px; }
.alert { border-radius: 9px; padding: 10px 14px; font-size: 13px; margin-bottom: 16px; }
.alert-success { background: var(--primary-soft); color: var(--primary-dark); }
.alert-error { background: var(--danger-soft); color: var(--danger); }
.muted { color: var(--muted); font-size: 12.5px; }
.log-time { white-space: nowrap; color: var(--muted-soft); font-size: 12px; }

.quick-reply-row { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 6px; }
.quick-reply-row .qr-title { width: 180px; border: 1px solid var(--border); border-radius: 7px; padding: 7px 9px; font-size: 12.5px; }
.quick-reply-row .qr-body { flex: 1; min-height: 48px; border: 1px solid var(--border); border-radius: 7px; padding: 7px 9px; font-size: 12.5px; font-family: inherit; resize: vertical; }
.qr-delete-form { margin: 0 0 14px; }
.btn-danger-text { color: var(--danger); border-color: var(--danger); }
.btn-danger-text:hover { background: var(--danger-soft); }

.report-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; }
.report-custom-form { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); }
.report-custom-form input { border: 1px solid var(--border); border-radius: 7px; padding: 5px 8px; font-size: 12px; }
.report-note { margin-top: 12px; }

/* =========================================================================
   Tampilan sempit (tablet/HP) -- dashboard.
   Sebelumnya grid 3 kolom tetap (64px rail + 390px sidebar + sisanya chat)
   cuma cocok buat layar lebar, jadi di layar sempit bakal kepotong/overflow.
   Solusinya: sidebar & panel chat gantian tampil PENUH satu layar (kayak
   WA di HP) -- diatur lewat class "chat-open" di .app-shell yang di-toggle
   dari dashboard.js (selectConversation / tombol kembali / tutup chat).
   ========================================================================= */
@media (max-width: 860px) {
  .app-shell { grid-template-columns: 60px 1fr; }
  .icon-rail { grid-column: 1; grid-row: 1; width: 60px; }
  .sidebar { grid-column: 2; grid-row: 1; }
  .chat-panel { grid-column: 2; grid-row: 1; display: none; }

  .app-shell.chat-open .sidebar { display: none; }
  .app-shell.chat-open .chat-panel { display: flex; }

  .mobile-back-btn { display: inline-flex; align-items: center; justify-content: center; }
}

@media (max-width: 520px) {
  /* Di HP, begitu chat dibuka rail-nya ikut disembunyikan juga -- biar layar
     penuh buat baca pesan, bukan cuma dikit lebih lega. Menu di rail (Laporan,
     dst.) tetap bisa diakses lewat tab Aktif/Riwayat sebelum buka chat. */
  .app-shell.chat-open { grid-template-columns: 1fr; }
  .app-shell.chat-open .icon-rail { display: none; }
}