:root {
  /* ธีมมืดเดียวทั้งแดชบอร์ด (2026-08-13) — spec dark palette (เดียวกับ .dark-ui ใน spec-dark.css) */
  --side: #16211c;
  --bg: #0d1119;
  --card: #141a24;
  --card2: #1a2130;
  --border: #232b3a;
  --ink: #e6e9ee;
  --muted: #8b95a5;
  --green: #06C755;
  --on-green: #06210f;
  --red: #e5484d;
  --red-ink: #ff8a8d;
  --gold: #f2b134;
  --cust: #5aa2ff;
  --chat: #0b0f16;
  --cust-bub: #1e2634;
  --adm-bub: #123a24;

  /* Compatibility aliases — หน้าเดิมใช้ชื่อ token คนละชุด map ให้เป็นค่าโทนมืดที่อ่านออก */
  --text: var(--ink);
  --text-muted: var(--muted);
  --amber: var(--gold);
  --green-dark: #05a648;
  --green-light: rgba(6,199,85,.14);
  --red-light: rgba(229,72,77,.16);
  --amber-light: rgba(242,177,52,.16);
  /* หน้าเดิมอ้าง token เหล่านี้แบบมี fallback สีอ่อน — กำหนดค่ามืดไว้ไม่ให้ขึ้นพื้นขาว */
  --bg-subtle: var(--card2);
  --accent: var(--cust);
  --accent-subtle: rgba(90,162,255,.16);
  --danger: var(--red);

  --radius: 10px;
  --shadow: 0 1px 3px rgba(0,0,0,.4);
}

* { box-sizing: border-box; }

[x-cloak] { display: none !important; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Sarabun", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 15px;
  line-height: 1.5;
}

a { color: inherit; }

button {
  font-family: inherit;
  cursor: pointer;
}

/* ---------- Login ---------- */

.login-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.login-card {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 36px 32px;
  width: 100%;
  max-width: 380px;
}

.login-card h1 {
  font-size: 20px;
  margin: 0 0 4px;
}

.login-card p {
  color: var(--text-muted);
  margin: 0 0 24px;
  font-size: 13px;
}

.field {
  margin-bottom: 16px;
}

.field label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--text-muted);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  background: var(--card2);
  color: var(--text);
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: 2px solid var(--green);
  outline-offset: -1px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 18px;
  border-radius: 8px;
  border: none;
  font-size: 14px;
  font-weight: 600;
  background: var(--green);
  color: #fff;
  transition: background 0.15s;
}

.btn:hover { background: var(--green-dark); }
.btn:disabled { opacity: 0.6; cursor: not-allowed; }
.btn.btn-full { width: 100%; }
.btn.btn-secondary { background: var(--card2); color: var(--text); }
.btn.btn-secondary:hover { background: var(--border); }
.btn.btn-danger { background: var(--red); }
.btn.btn-danger:hover { background: #c92a2a; }
.btn.btn-sm { padding: 6px 12px; font-size: 13px; }

.error-text {
  color: var(--red);
  font-size: 13px;
  margin-top: 10px;
}

/* ---------- App shell ---------- */

.app-shell {
  display: flex;
  min-height: 100vh;
}

.sidebar {
  width: 220px;
  flex-shrink: 0;
  background: #16211c;
  color: #cdd6d0;
  padding: 20px 12px;
  display: flex;
  flex-direction: column;
}

.sidebar .brand {
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  padding: 0 10px 20px;
}

.sidebar .brand span { color: var(--green); }

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 14px;
  margin-bottom: 2px;
  background: transparent;
  border: none;
  color: #cdd6d0;
  width: 100%;
  text-align: left;
}

.nav-item:hover { background: rgba(255,255,255,0.06); }
.nav-item.active { background: var(--green); color: #fff; }
/* ★ #MENU-1: เมนูย่อยเยื้องใต้แม่ + หัวกลุ่ม (ป้ายจาก data-group) — คลาสเดียวกับ side-nav.js */
.nav-item.nav-sub { padding-top: 7px; padding-bottom: 7px; padding-left: 30px; font-size: 13px; opacity: .9; }
.nav-item.nav-group-start { margin-top: 18px; position: relative; }
.nav-item.nav-group-start::before {
  content: attr(data-group); position: absolute; top: -15px; left: 12px;
  font-size: 11px; letter-spacing: .3px; color: var(--muted, #8b949e); font-weight: 500; pointer-events: none;
}

.sidebar-footer {
  margin-top: auto;
  padding: 12px 10px 0;
  border-top: 1px solid rgba(255,255,255,0.08);
  font-size: 13px;
}

.sidebar-footer .who { color: #fff; margin-bottom: 8px; }

.main {
  flex: 1;
  min-width: 0;
  padding: 24px 28px 60px;
}

.topbar {
  display: none;
}

.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 12px;
}

.page-header h2 {
  margin: 0;
  font-size: 20px;
}

/* ---------- Cards / grid ---------- */

.card {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px 20px;
}

.grid {
  display: grid;
  gap: 16px;
}

.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }

@media (max-width: 900px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-2 { grid-template-columns: 1fr; }
}

.stat-tile .label {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.stat-tile .value {
  font-size: 28px;
  font-weight: 700;
}

.stat-tile.tile-red { border-left: 4px solid var(--red); }
.stat-tile.tile-green { border-left: 4px solid var(--green); }
.stat-tile.tile-amber { border-left: 4px solid var(--amber); }

.section-title {
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 12px;
}

/* ---------- Chat list ---------- */

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}

.filters .field { margin-bottom: 0; min-width: 140px; }

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

th, td {
  text-align: left;
  padding: 10px 8px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

th {
  color: var(--text-muted);
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

tr.row-clickable { cursor: pointer; }
tr.row-clickable:hover { background: var(--card2); }

.table-scroll { overflow-x: auto; }

.badge {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}

.badge-problem { background: var(--red-light); color: var(--red); }
.badge-excellent { background: var(--green-light); color: var(--green-dark); }
.badge-normal { background: var(--card2); color: var(--text-muted); }

.highlight-red { background: var(--red-light); border-radius: 8px; padding: 10px 12px; margin-bottom: 8px; }
.highlight-green { background: var(--green-light); border-radius: 8px; padding: 10px 12px; margin-bottom: 8px; }

.chat-name { font-weight: 600; }
.chat-reason { color: var(--text-muted); font-size: 13px; }

.pagination {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  font-size: 13px;
  color: var(--text-muted);
}

/* ---------- Modal ---------- */

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(20, 25, 30, 0.5);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 16px;
  z-index: 50;
  overflow-y: auto;
}

.modal {
  background: var(--card);
  border-radius: var(--radius);
  width: 100%;
  max-width: 560px;
  padding: 24px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.5);
}

/* After .modal on purpose -- same specificity, source order decides, and this must win over
   the base max-width when both classes are applied together. */
.modal-lg { max-width: 820px; }

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.modal-header h3 { margin: 0; font-size: 17px; }
.modal-close { background: none; border: none; font-size: 20px; color: var(--text-muted); }

.msg-bubble {
  background: var(--card2);
  border-radius: 8px;
  padding: 8px 12px;
  margin-bottom: 8px;
  font-size: 14px;
}

.msg-meta { font-size: 11px; color: var(--text-muted); margin-top: 4px; }

.msg-bubble.msg-flag-problem { background: var(--red-light); border: 1px solid var(--red); }
.msg-bubble.msg-flag-excellent { background: var(--green-light); border: 1px solid var(--green); }

.gap-divider { display: flex; align-items: center; gap: 8px; margin: 6px 0; font-size: 11px; color: var(--text-muted); }
.gap-divider::before, .gap-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.gap-divider.gap-ok { color: var(--green-dark); }
.gap-divider.gap-warn { color: #a06a00; }
.gap-divider.gap-bad { color: var(--red); font-weight: 600; }

.msg-image-btn { display: inline-block; margin-top: 4px; font-size: 12px; }
.msg-image-preview { max-width: 220px; border-radius: 8px; margin-top: 6px; display: block; }

/* ---------- Admin Scorecard (dark theme, LINE green accent -- approved mockup 2026-08-11) ---------- */

.scorecard-dark { background: #0b0f17; border-radius: var(--radius); padding: 20px; color: #e6e9ef; }
.scorecard-dark .muted { color: #8b93a7; }
.scorecard-dark .section-title { color: #e6e9ef; }

.scorecard-dark .toggle-pill { background: #141a24; border: 1px solid #232b3a; }
.scorecard-dark .toggle-pill button { color: #8b93a7; }
.scorecard-dark .toggle-pill button.active { background: var(--green); color: #06150c; font-weight: 700; }

.sc-date-range { display: flex; align-items: center; gap: 8px; }
.sc-date-range input[type="date"] {
  background: #141a24; border: 1px solid #232b3a; color: #e6e9ef;
  border-radius: 6px; padding: 5px 8px; font-size: 13px;
}

.scorecard-summary-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 900px) { .scorecard-summary-grid { grid-template-columns: 1fr; } }
.scorecard-summary-card { background: #141a24; border: 1px solid #232b3a; border-radius: var(--radius); padding: 16px 18px; }
.scorecard-summary-card .sc-label { font-size: 12.5px; color: #8b93a7; margin-bottom: 6px; }
.scorecard-summary-card .sc-value { font-size: 26px; font-weight: 700; color: var(--green); line-height: 1.2; white-space: nowrap; }
.scorecard-summary-card .sc-sub { font-size: 12px; color: #8b93a7; margin-top: 4px; }

.scorecard-table-card { background: #141a24; border: 1px solid #232b3a; border-radius: var(--radius); padding: 16px 18px; }
.scorecard-table-card table { color: #e6e9ef; }
.scorecard-table-card thead th {
  color: #8b93a7; border-bottom: 1px solid #232b3a; font-weight: 600;
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.02em; white-space: nowrap;
}
.scorecard-table-card tbody tr { border-bottom: 1px solid #1a212e; }
.scorecard-table-card tbody tr:hover { background: #182030; }
.scorecard-table-card td { padding-top: 12px; padding-bottom: 12px; }

.sc-rank-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%; font-weight: 700; font-size: 13px;
  background: #1c2433; color: #8b93a7; border: 1px solid #2a3345;
}
.sc-rank-badge.sc-rank-1 { background: #3a2c0e; color: #f2b134; border-color: #f2b134; }
.sc-rank-badge.sc-rank-2 { background: #262b33; color: #c0c5ce; border-color: #c0c5ce; }
.sc-rank-badge.sc-rank-3 { background: #33220f; color: #cd7f32; border-color: #cd7f32; }

.sc-admin-cell { display: flex; align-items: center; gap: 10px; }
.sc-avatar {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  background: #1c2433; border: 1px solid #2a3345; color: var(--green);
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px;
}
.sc-admin-name { font-weight: 600; }
.sc-admin-sites { font-size: 12px; color: #8b93a7; margin-top: 1px; }

.sc-count-clickable { cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }
.sc-count-resolved { color: var(--green); font-weight: 700; }
.sc-count-unresolved { color: #ef4444; font-weight: 700; }
.sc-count-dash { color: #4a5468; }

.sc-score-cell { display: flex; align-items: center; gap: 8px; min-width: 110px; }
.sc-score-bar-track { flex: 1; height: 6px; border-radius: 3px; background: #1c2433; overflow: hidden; }
.sc-score-bar-fill { height: 100%; background: var(--green); border-radius: 3px; }
.sc-score-num { font-weight: 700; color: var(--green); min-width: 26px; text-align: right; }

.sc-status-line { display: flex; align-items: center; font-size: 12.5px; white-space: nowrap; }
.sc-status-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; flex-shrink: 0; }
.sc-status-dot.sc-dot-green { background: var(--green); }
.sc-status-dot.sc-dot-red { background: #ef4444; }
.sc-status-working { color: var(--green); font-weight: 600; }
.sc-status-pending { color: #ef4444; font-weight: 600; }
.sc-confirm-btn {
  background: transparent; border: 1px solid #2a3345; color: #8b93a7;
  border-radius: 6px; padding: 3px 8px; font-size: 11.5px; margin-left: 8px; cursor: pointer;
}
.sc-confirm-btn:hover { border-color: var(--green); color: var(--green); }

/* Case-list / case-detail modals reuse .modal but need dark contents on this page */
.scorecard-modal { background: #141a24; color: #e6e9ef; border: 1px solid #232b3a; }
.scorecard-modal .modal-close { color: #8b93a7; }
.scorecard-modal .muted { color: #8b93a7; }
.scorecard-modal .screenshot-scroll-box { border-color: #232b3a; }
/* Transcript fallback (shown only until a screenshot exists) -- the light message-bubble
   badges elsewhere in the app read fine here too, but on this page's dark modal they need
   their own contrast pass rather than inheriting the light-mode defaults. */
.scorecard-modal .badge { background: #1c2433; color: #c7cddb; border: 1px solid #2a3345; }
.scorecard-modal .badge-excellent { background: rgba(6,199,85,0.15); color: var(--green); border-color: var(--green); }
.sc-case-row {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 10px 0; border-bottom: 1px solid #1a212e; cursor: pointer;
}
.sc-case-row:hover { background: #182030; }
.sc-case-row:last-child { border-bottom: none; }
.sc-case-category { font-size: 12px; color: #8b93a7; }

/* ---------- Customer timeline (line168 backbone + LINE OA interleaved) ---------- */

.timeline-scroll-box { max-height: 50vh; overflow-y: auto; border: 1px solid var(--border); border-radius: 8px; padding: 12px; }
.timeline-msg-row { display: flex; margin-bottom: 8px; }
.timeline-msg-row.side-customer { justify-content: flex-start; }
.timeline-msg-row.side-admin { justify-content: flex-end; }
.timeline-msg-bubble { max-width: 72%; border-radius: 8px; padding: 8px 12px; font-size: 13px; white-space: pre-wrap; word-break: break-word; }
.timeline-msg-bubble.source-line168.side-customer { background: var(--cust-bub); }
.timeline-msg-bubble.source-line168.side-admin { background: var(--green-light); }
/* LINE OA bubbles get a dashed border regardless of side -- this codebase's own `messages`
   table only ever stores the customer's inbound side (see customerTimeline.js header
   comment), so side is always 'customer' here in practice; the visual is still distinct
   from a line168 customer bubble so it's obvious which pipe each message came through. */
.timeline-msg-bubble.source-line_oa { background: var(--amber-light); border: 1px dashed var(--amber); }
.timeline-msg-sender { font-size: 11px; font-weight: 600; color: var(--text-muted); margin-bottom: 3px; display: flex; align-items: center; gap: 5px; }
.timeline-msg-time { font-size: 10px; color: var(--text-muted); margin-top: 4px; }
.timeline-source-badge { font-size: 9px; font-weight: 600; padding: 1px 6px; border-radius: 8px; text-transform: uppercase; }
.timeline-source-badge.badge-source-line168 { background: var(--green-light); color: var(--green-dark); }
.timeline-source-badge.badge-source-line_oa { background: var(--amber-light); color: #a06a00; }

/* ---------- Misc ---------- */

.muted { color: var(--text-muted); }
.mt-16 { margin-top: 16px; }
.mb-16 { margin-bottom: 16px; }
.flex-between { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.flex-gap { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.text-right { text-align: right; }
.empty-state { text-align: center; padding: 40px 10px; color: var(--text-muted); }
.toggle-pill {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 999px;
  overflow: hidden;
}
.toggle-pill button {
  border: none;
  background: var(--card2);
  padding: 6px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
}
.toggle-pill button.active { background: var(--green); color: #fff; }

.oa-card { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.oa-card .oa-meta { font-size: 13px; color: var(--text-muted); margin-top: 4px; }
.switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 22px;
}
.switch input { opacity: 0; width: 0; height: 0; }
.switch .slider {
  position: absolute; inset: 0; background: #d3d9dd; border-radius: 999px; transition: 0.15s;
}
.switch .slider:before {
  content: ""; position: absolute; width: 16px; height: 16px; left: 3px; top: 3px;
  background: #fff; border-radius: 50%; transition: 0.15s;
}
.switch input:checked + .slider { background: var(--green); }
.switch input:checked + .slider:before { transform: translateX(18px); }

.rank-1 { color: #d4a017; font-weight: 700; }
.rank-2 { color: #8a8f98; font-weight: 700; }
.rank-3 { color: #b5651d; font-weight: 700; }

.toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: #1c2226;
  color: #fff;
  padding: 12px 18px;
  border-radius: 8px;
  font-size: 14px;
  box-shadow: var(--shadow);
  z-index: 100;
}

/* ---------- Mobile ---------- */

/* ============================================================
   MOBILE NAVIGATION (bottom tab bar + slide-in drawer, CSS-only)
   ------------------------------------------------------------
   วิเคราะห์: หน้านี้เป็น "เครื่องมือทำงานทั้งวัน" ไม่ใช่เว็บอ่าน — คนสลับ
   รายงาน↔คิวงาน↔แชท ตลอด. รูปแบบที่ดีสุดบนมือถือคือ bottom tab bar
   (โซนล่างจอ = นิ้วโป้งเอื้อมง่ายสุด · เมนูหลักเห็นตลอด แตะเดียวสลับ)
   เมนูหลัก 4 อันอยู่แถบล่าง + ปุ่ม ☰ เปิด drawer สำหรับเมนูที่เหลือ.
   เดสก์ท็อปไม่เปลี่ยนเลย (ทุกอย่างอยู่ใน @media max-width:760px) */
.m-nav-cbx, .m-hamburger, .m-nav-overlay, .m-bottombar { display: none; }

@media (max-width: 760px) {
  .app-shell { flex-direction: column; }

  /* ---- Drawer (sidebar เต็ม สำหรับเมนูทั้งหมด) ---- */
  .sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 90;
    width: 80%; max-width: 310px;
    flex-direction: column; align-items: stretch;
    padding: 16px 12px calc(16px + env(safe-area-inset-bottom, 0px));
    overflow-y: auto; overflow-x: hidden;
    transform: translateX(-104%); transition: transform .26s cubic-bezier(.4,0,.2,1); /* pii-ok: ค่า CSS transform ไม่ใช่รหัส */
    box-shadow: 2px 0 22px rgba(0,0,0,.6);
  }
  .sidebar .brand { white-space: nowrap; margin-bottom: 12px; font-size: 17px; }
  .sidebar-footer { display: block; margin-top: 14px; }
  .nav-item { white-space: nowrap; width: 100%; text-align: left; padding: 11px 12px; }

  #mobileNavToggle:checked ~ .app-shell .sidebar { transform: translateX(0); }
  #mobileNavToggle:checked ~ .m-nav-overlay {
    display: block; position: fixed; inset: 0; z-index: 85;
    background: rgba(0,0,0,.58); backdrop-filter: blur(1px);
  }

  /* ★ #MENU-1 ข้อ 4: ☰ ย้ายจากแถบล่างมามุมบนซ้าย (แถบล่างเป็น 5 ปุ่มปลายทางแล้ว) */
  .m-hamburger {
    display: flex; align-items: center; justify-content: center;
    position: fixed; top: 8px; left: 8px; z-index: 87;
    width: 40px; height: 40px; border-radius: 10px; font-size: 20px; cursor: pointer;
    background: var(--card, #0f141b); color: var(--text, #e6edf3);
    border: 1px solid var(--border, #30363d); box-shadow: 0 2px 10px rgba(0,0,0,.35);
  }

  /* ---- Bottom tab bar (เมนูหลัก เห็นตลอด) ---- */
  .m-bottombar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 88;
    background: var(--card, #0f141b);
    border-top: 1px solid var(--border, #30363d);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    box-shadow: 0 -2px 12px rgba(0,0,0,.4);
  }
  .m-tab {
    flex: 1 1 0; min-width: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; padding: 8px 2px 7px; border: 0; background: transparent;
    color: var(--text-muted, #8b949e); font-size: 10.5px; font-weight: 600;
    cursor: pointer; position: relative; text-decoration: none;
    -webkit-tap-highlight-color: transparent;
  }
  .m-tab .m-ico { font-size: 20px; line-height: 1; }
  .m-tab.active { color: var(--green, #3fb950); }
  .m-tab.active::before {
    content: ""; position: absolute; top: 0; left: 22%; right: 22%; height: 3px;
    border-radius: 0 0 3px 3px; background: var(--green, #3fb950);
  }
  .m-tab .m-tab-badge {
    position: absolute; top: 4px; left: 54%;
    min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px;
    background: #f85149; color: #fff; font-size: 10px; line-height: 16px;
    text-align: center; font-weight: 700;
  }

  /* ---- เนื้อหาหลัก: เว้นที่แถบล่าง + ไม่ล้นแนวนอน ---- */
  .main { padding: 60px 12px calc(74px + env(safe-area-inset-bottom, 0px)) !important; } /* ★ #MENU-1: บน 60px = ที่ของปุ่ม ☰ มุมบนซ้าย */
  .card { padding: 12px !important; }
  .main table { display: block; width: 100%; overflow-x: auto; white-space: nowrap; font-size: 13px; -webkit-overflow-scrolling: touch; }
  /* แถวปุ่มเลือก (toggle-pill) ที่ปุ่มเยอะ เช่น เลือกเว็บในอันดับแอดมิน → เลื่อนในแถวตัวเอง ไม่ดันทั้งหน้า */
  .main .toggle-pill { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .main .toggle-pill button { flex: 0 0 auto; white-space: nowrap; }

  /* iframe หน้ารายงาน (report-dashboard) ให้เต็มความสูงจอลบแถบล่าง */
  section[x-show] iframe { min-height: calc(100vh - 90px); }
}

/* ---------- AI Assistant page ---------- */

.spinner {
  width: 22px;
  height: 22px;
  border: 3px solid var(--green-light);
  border-top-color: var(--green);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  display: inline-block;
}

@keyframes spin { to { transform: rotate(360deg); } }

.loading-row {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-muted);
  padding: 24px 0;
  justify-content: center;
}

.suggestion-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 14px;
  background: var(--card2);
}

.suggestion-card .suggestion-text {
  white-space: pre-wrap;
  font-size: 14px;
  margin: 10px 0 12px;
  line-height: 1.6;
}

.badge-style {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}

.badge-style.short { background: var(--accent-subtle); color: var(--accent); }
.badge-style.medium { background: var(--amber-light); color: var(--amber); }
.badge-style.long { background: var(--green-light); color: var(--green-dark); }

.similar-example {
  border-left: 3px solid var(--border);
  padding: 8px 12px;
  margin-bottom: 10px;
  font-size: 13px;
}

.similar-example .q { color: var(--text-muted); }
.similar-example .a { font-weight: 600; margin-top: 2px; }

.eval-focused {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}

.permission-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin: 10px 0 16px;
}

.permission-grid label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 400;
}

/* ---------- Team stats / customer directory / OA verification ---------- */

.team-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

@media (max-width: 900px) {
  .team-stats-grid { grid-template-columns: repeat(2, 1fr); }
}

.team-stat-tile {
  background: var(--card2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
}

.badge-ai { background: var(--accent-subtle); color: var(--accent); }
.badge-manual { background: var(--card2); color: var(--text-muted); }

.verify-result {
  border-radius: 8px;
  padding: 14px 16px;
  margin-top: 12px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.verify-result.ok { background: var(--green-light); }
.verify-result.error { background: var(--red-light); }

.verify-result img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* line168 screenshot viewer (case browser + chatDetail/followupDetail on-demand view) --
   the default thin/near-invisible scrollbar made a genuinely scrollable box look truncated
   ("ภาพไม่ครบ"), so this makes it unmistakably visible + always-shown, not just on hover. */
.screenshot-scroll-box {
  position: relative;
  max-height: 75vh;
  overflow-y: scroll;
  border: 1px solid var(--border);
  border-radius: 8px;
  scrollbar-width: auto;
  scrollbar-color: var(--green-dark) var(--border);
}
.screenshot-scroll-box::-webkit-scrollbar { width: 14px; }
.screenshot-scroll-box::-webkit-scrollbar-track { background: var(--border); }
.screenshot-scroll-box::-webkit-scrollbar-thumb {
  background: var(--green-dark);
  border-radius: 7px;
  border: 3px solid var(--border);
}
.screenshot-scroll-hint {
  font-size: 12px;
  color: var(--text-muted);
  margin: 0 0 6px;
}

/* Case detail modal (2026-08-11 urgent fix) -- the transcript-fallback box (shown when a case
   has no screenshot yet) never got the same "make the scrollbar impossible to miss" treatment
   the screenshot box got earlier, and a fixed max-height that just shrinks to fit whatever
   content there is (instead of claiming real screen space) made it look permanently cut off
   even though it was technically scrollable. Reproduced live and confirmed: the box rendered
   well under 200px tall with most of the modal empty around it. Fixed by making the WHOLE
   modal a fixed 85vh flex column, so the conversation area (screenshot OR transcript,
   whichever applies) is forced to fill essentially all of the remaining space rather than
   just wrapping its content. */
.modal-case-detail { height: 85vh; max-height: 85vh; display: flex; flex-direction: column; }
.modal-case-detail .modal-header { flex-shrink: 0; }
.case-detail-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.case-detail-scroll-box {
  flex: 1;
  min-height: 500px;
  overflow-y: scroll;
  border: 1px solid var(--border);
  border-radius: 8px;
  scrollbar-width: auto;
  scrollbar-color: var(--green-dark) var(--border);
}
.case-detail-scroll-box::-webkit-scrollbar { width: 14px; }
.case-detail-scroll-box::-webkit-scrollbar-track { background: var(--border); }
.case-detail-scroll-box::-webkit-scrollbar-thumb {
  background: var(--green-dark); border-radius: 7px; border: 3px solid var(--border);
}
.scorecard-modal .case-detail-scroll-box { border-color: #232b3a; scrollbar-color: var(--green) #1c2433; }
.scorecard-modal .case-detail-scroll-box::-webkit-scrollbar-track { background: #1c2433; }
.scorecard-modal .case-detail-scroll-box::-webkit-scrollbar-thumb { background: var(--green); border-color: #1c2433; }

/* ============ Universal chat bubble viewer (2026-08-11, Task 3) ============
   Built to become the standard chat display across every chat-viewing menu (scorecard case
   detail first, then chat list / QA review / churn follow-up / customer 360). The 3-tier fixed
   flex layout (header/footer flex-shrink:0, body flex:1 + min-height:0) is what actually fixes
   the "small unscrollable box" bug class for good -- min-height:0 on the flex-1 body is the
   part that's easy to leave out and looks fine until content is long enough to expose it. */
/* The room-based entry points (chatDetail/qaReview/followupDetail/customerTimeline) open the
   viewer from WITHIN their own already-open modal -- both .modal-backdrop siblings then share
   the same z-index:50, so whichever comes LATER in the HTML source wins the stack regardless
   of open order. Forcing a higher z-index here guarantees the viewer is always on top, however
   it was reached. Also covers the lightbox opening on top of the viewer itself. */
.modal-backdrop:has(.chat-viewer) { z-index: 60; }

.chat-viewer { background: #171d29; color: #e6e9ef; height: 88vh; max-height: 88vh; max-width: 1000px; width: 100%; display: flex; flex-direction: column; border: 1px solid #232b3a; }
.chat-viewer .modal-close { color: #8b93a7; }
.chat-viewer-header { flex-shrink: 0; background: #1f2735; padding: 16px 20px 12px; border-bottom: 1px solid #232b3a; }
.chat-viewer-header h3 { margin: 0; font-size: 17px; }
.chat-viewer-meta { flex-shrink: 0; color: #8b93a7; font-size: 13px; margin-top: 4px; }
.chat-viewer-badges { flex-shrink: 0; display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.chat-badge { font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 10px; border: 1px solid; }
.chat-badge-category { background: rgba(240,169,44,.15); color: #f0a92c; border-color: #f0a92c; }
.chat-badge-resolved { background: rgba(6,199,85,.15); color: var(--green); border-color: var(--green); }
.chat-badge-unresolved { background: rgba(242,106,106,.15); color: #f26a6a; border-color: #f26a6a; }
.chat-badge-admins { background: #1c2433; color: #c7cddb; border-color: #2a3345; }

.chat-viewer-body {
  flex: 1; min-height: 0; overflow-y: auto; background: #0b0f17; padding: 16px 20px;
  scrollbar-width: auto; scrollbar-color: var(--green) #0b0f17;
}
.chat-viewer-body::-webkit-scrollbar { width: 11px; }
.chat-viewer-body::-webkit-scrollbar-track { background: #0b0f17; }
.chat-viewer-body::-webkit-scrollbar-thumb { background: var(--green); border-radius: 6px; border: 2px solid #0b0f17; }

.chat-date-sep { text-align: center; margin: 16px 0 12px; }
.chat-date-pill { display: inline-block; background: #1f2735; color: #8b93a7; font-size: 12px; padding: 4px 14px; border-radius: 12px; }
.chat-system-event { display: flex; align-items: center; gap: 10px; margin: 12px 0; color: #8b93a7; font-size: 12px; }
.chat-system-event::before, .chat-system-event::after { content: ''; flex: 1; border-top: 1px dashed #2a3345; }

.chat-row { display: flex; margin-bottom: 3px; }
.chat-row.side-left { justify-content: flex-start; }
.chat-row.side-right { justify-content: flex-end; }
.chat-group { max-width: 72%; display: flex; flex-direction: column; }
.chat-row.side-right .chat-group { align-items: flex-end; }
.chat-sender-label { font-size: 11px; color: #8b93a7; margin-bottom: 3px; padding: 0 2px; }
.chat-sender-label.label-admin { color: var(--green); }
.chat-bubble { padding: 8px 12px; border-radius: 12px; font-size: 14px; line-height: 1.55; word-break: break-word; }
.chat-bubble.side-left { background: #28313f; border: 1px solid #465264; border-bottom-left-radius: 4px; }
.chat-bubble.side-right { background: rgba(6,199,85,.13); border: 1px solid var(--green); border-bottom-right-radius: 4px; }
.chat-bubble.flagged { border-color: #f26a6a; border-width: 2px; }
.chat-flag-badge { display: block; width: fit-content; margin-top: 6px; font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 6px; background: rgba(242,106,106,.15); color: #f26a6a; border: 1px solid #f26a6a; }
.chat-bubble.side-right .chat-flag-badge { margin-left: auto; }
.chat-timestamp { font-size: 10px; color: #5b6472; margin-top: 3px; padding: 0 2px; }
.chat-row.side-right .chat-timestamp { text-align: right; }
.chat-image-thumb { max-width: 220px; max-height: 220px; border-radius: 8px; cursor: zoom-in; display: block; }
.chat-search-hidden { display: none !important; }

.chat-viewer-footer { flex-shrink: 0; background: #1f2735; border-top: 1px solid #232b3a; padding: 10px 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.chat-footer-count { color: #8b93a7; font-size: 12px; }
.chat-footer-actions { display: flex; gap: 8px; align-items: center; }
.chat-footer-btn { background: #1c2433; color: #c7cddb; border: 1px solid #2a3345; border-radius: 8px; padding: 6px 12px; font-size: 12px; cursor: pointer; }
.chat-footer-btn:hover { border-color: var(--green); color: var(--green); }
.chat-search-input { background: #0b0f17; color: #e6e9ef; border: 1px solid #2a3345; border-radius: 8px; padding: 6px 10px; font-size: 12px; width: 200px; }

.image-lightbox-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.85); display: flex; align-items: center; justify-content: center; z-index: 200; cursor: zoom-out; }
.image-lightbox-backdrop img { max-width: 92vw; max-height: 92vh; border-radius: 6px; }

/* Review queue: two candidate values side by side so the eye can compare them directly --
   the decision is almost always "which of these two", and stacking them made that harder. */
.review-row-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.review-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.review-side { background: var(--bg-subtle, #f7f7f8); border-radius: 8px; padding: 12px; min-width: 0; word-break: break-word; }
.review-side-label { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted, #888); margin-bottom: 6px; }
.review-username-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.review-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
@media (max-width: 640px) { .review-compare { grid-template-columns: 1fr; } }
.nav-badge { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 10px; font-size: 11px; font-weight: 600; background: var(--danger, #e5484d); color: #fff; }
.review-username-btn { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; }
.review-username-count { font-size: 11px; color: var(--text-muted, #888); }

/* Gold set: the labeller reads a full transcript, so it needs room and clear turn separation. */
.gold-transcript { white-space: pre-wrap; font-size: 14px; line-height: 1.7; max-height: 420px; overflow-y: auto; background: var(--bg-subtle, #f7f7f8); border-radius: 8px; padding: 14px; }
.gold-field { margin-bottom: 14px; }
.gold-field > label { display: block; font-weight: 600; margin-bottom: 6px; }
.gold-choices { display: flex; gap: 8px; flex-wrap: wrap; }
.gold-select { padding: 6px 10px; border-radius: 6px; border: 1px solid var(--border, #ddd); min-width: 220px; }
.gold-reveal { border-collapse: collapse; width: 100%; max-width: 420px; }
.gold-reveal td { padding: 6px 10px; border-bottom: 1px solid var(--border, #eee); }
.gold-reveal td:first-child { font-weight: 600; width: 40%; }
.gold-match { color: var(--success, #2a9d4a); }
.gold-miss { color: var(--danger, #e5484d); }
.mt-8 { margin-top: 8px; }
.gold-note-input { display: block; width: 100%; max-width: 480px; margin-top: 8px; padding: 8px 10px; border-radius: 6px; border: 1px solid var(--border, #ddd); font-size: 14px; }
.gold-window-note { font-size: 12px; color: var(--text-muted, #888); margin: 8px 0; }
.gold-note-area { width: 100%; max-width: 620px; padding: 8px 10px; border-radius: 6px; border: 1px solid var(--border, #ddd); font-size: 14px; font-family: inherit; resize: vertical; }
.gold-file-input { display: block; margin-top: 4px; }
.gold-thumbs { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.gold-thumb { width: 90px; height: 90px; object-fit: cover; border-radius: 6px; border: 1px solid var(--border, #ddd); }
.chat-time { font-size: 12px; color: var(--accent, #2563eb); background: var(--accent-subtle, #eef2ff); padding: 2px 8px; border-radius: 10px; white-space: nowrap; }
.gold-msg { padding: 3px 0; line-height: 1.6; }
.gold-msg-time { font-size: 11px; color: var(--text-muted, #999); margin-right: 8px; font-variant-numeric: tabular-nums; }
.gold-msg-who { font-weight: 600; margin-right: 4px; }
.gold-msg-cust .gold-msg-who { color: var(--accent, #2563eb); }
.gold-msg-admin .gold-msg-who { color: #2a9d4a; }
.chat-focus-hit .chat-bubble { box-shadow: 0 0 0 2px var(--accent, #2563eb); }
.gold-review-row { cursor: pointer; transition: background .1s; }
.gold-review-row:hover { background: var(--bg-subtle, #f7f7f8); }
.gold-review-main { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.gold-review-note { font-size: 13px; color: var(--text-muted, #777); margin-top: 6px; white-space: pre-wrap; }
.gold-review-edit { font-size: 12px; color: var(--accent, #2563eb); margin-top: 4px; }
.badge-warn { background: var(--red-light); color: var(--red-ink); }
.badge-ok { background: var(--green-light); color: var(--green); }
.gold-why { font-size: 12px; color: var(--text-muted, #888); margin-top: 3px; font-weight: normal; white-space: pre-wrap; }
.gold-reveal td { vertical-align: top; }
/* Churn flag on a case row: a first-time "I'm quitting" about something on our side is the one an
   admin cannot fix alone, so it reads louder than a habitual complaint. */
.churn-flag { font-size: 11px; color: #b8860b; margin-top: 4px; line-height: 1.5; }
.churn-flag.churn-urgent { color: var(--danger, #e5484d); font-weight: 600; }
.churn-hint { display: block; color: var(--text-muted, #999); font-weight: normal; }
.word-note-input { width: 100%; min-width: 180px; padding: 5px 8px; border-radius: 6px; border: 1px solid var(--border, #ddd); font-size: 12px; }
.word-kind-select { padding: 4px 6px; border-radius: 6px; border: 1px solid var(--border, #ddd); font-size: 12px; max-width: 170px; }

/* ---------------- ไฟล์แนบช่องหมายเหตุ (ทุกเมนู) ----------------
   Thumbnails under a note box: paste (Ctrl+V) or 📎 แนบไฟล์. max-height 90px, click opens
   the full file in a new tab (the <img>/<a> src carries ?token= like the gold-set images). */
.note-att-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.note-att-hint { font-size: 12px; color: var(--text-muted, #888); }
.note-att-btn { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; padding: 5px 10px; border: 1px solid var(--border, #ccc); border-radius: 6px; background: transparent; color: inherit; cursor: pointer; }
.note-att-btn:hover { border-color: var(--accent, #2563eb); }
.note-att-thumbs { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.note-att-item { position: relative; display: inline-block; }
.note-att-thumb { max-height: 90px; max-width: 160px; border-radius: 6px; border: 1px solid var(--border, #ccc); display: block; }
.note-att-doc { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; padding: 8px 10px; border: 1px solid var(--border, #ccc); border-radius: 6px; text-decoration: none; color: inherit; max-width: 220px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.note-att-del { position: absolute; top: -7px; right: -7px; width: 20px; height: 20px; line-height: 18px; text-align: center; border-radius: 50%; border: 1px solid var(--border, #ccc); background: var(--bg, #fff); color: var(--danger, #e5484d); font-size: 12px; cursor: pointer; padding: 0; }

/* ---------------- ป้ายเตือน token API หลังบ้าน (หน้าภาพรวมวันนี้ เฉพาะเจ้าของ) ----------------
   token อายุ 24 ชม. และต่ออายุอัตโนมัติไม่ได้ (ตรวจแล้ว: ไม่มี refresh endpoint) แผนคือเจ้าของ
   ใส่ใบใหม่เองทุกวันอาทิตย์ — ป้ายนี้คือสิ่งเดียวที่ทำให้ "ลืมเปลี่ยน" กลายเป็นเรื่องที่เห็นก่อน
   ข้อมูลจะหาย ไม่ใช่หลังจากหายแล้ว สีจึงต้องอ่านออกในครึ่งวินาที ไม่ต้องอ่านตัวเลข */
.token-health { border: 1px solid var(--border); border-radius: var(--radius, 10px); padding: 12px 14px; background: var(--card); }
.token-health-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.badge-warn-amber { background: var(--amber-light); color: var(--amber); }
.badge-sunday { background: var(--accent-subtle); color: var(--accent); }
.token-health-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.token-chip { border-left: 4px solid var(--border); border-radius: 8px; padding: 8px 10px; background: var(--card2); }
.token-chip.lv-ok { border-left-color: var(--green); }
.token-chip.lv-yellow { border-left-color: var(--amber); }
.token-chip.lv-red { border-left-color: var(--red); }
.token-chip.lv-gray { border-left-color: var(--muted); }
.token-chip-site { font-size: 12px; color: var(--text-muted); font-weight: 600; }
.token-chip-main { font-size: 16px; font-weight: 700; margin-top: 2px; font-variant-numeric: tabular-nums; }
.token-chip-why { font-size: 11px; color: var(--text-muted); margin-top: 3px; line-height: 1.4; }

/* ---------------- หน้ารายงาน / สถิติ (2026-08-17) ----------------
   ตัวเลขเงินเรียงเป็นคอลัมน์ ต้องใช้ tabular-nums ไม่งั้นหลักไม่ตรงกันแล้วอ่านเทียบยาก
   ส่วน .delta คือป้าย ▲▼ ใต้การ์ด — เล็กและเงียบ เพราะตัวเลขหลักต้องเด่นกว่า */
.section-title { font-size: 15px; font-weight: 700; margin: 18px 0 10px; }
.stat-tile .delta { font-size: 12px; font-weight: 600; margin-top: 2px; font-variant-numeric: tabular-nums; }
.text-green { color: var(--green); }
.text-red { color: var(--red); }
.text-amber { color: var(--amber); }
.highlight-amber { background: var(--amber-light); border-radius: 8px; padding: 10px 12px; }
table td, table th { font-variant-numeric: tabular-nums; }