/* console.css — Operator Console design v2 (2026-08-10)
   Light work surface is the default; the instance scope supplies the branded
   light/dark token values. Layout/interaction rules below only consume tokens.
   สี segment ยังสื่อความหมายจริง (🔥 ส้มแดง / 🌤 เหลือง / ❄️ เทาฟ้า)
   ทุกคู่สีตัวหนังสือผ่าน WCAG AA >= 4.5:1 (ตรวจด้วยสคริปต์ก่อนเลือกค่า)
   ไม่มี asset ภายนอก (CSP self) — ธีมทั้งหมดคุมด้วย custom properties ด้านล่าง */

:root {
  /* Safe neutral fallback when an instance scope has not mounted yet. */
  --bg: #f4f7fc;
  --surface: #ffffff;
  --surface-2: #eef3fa;
  --ink: #142038;
  --ink-2: #5b6784;
  --ink-3: #66718a;
  --muted: #66718a;
  --line: #e2e8f3;
  --line-2: #cbd5e5;

  --brand: #2d8cff;
  --brand-600: #1478e8;
  --brand-700: #0b5fc4;
  --brand-50: #eaf3ff;
  --brand-100: #cfe4ff;
  --brand-ink: #0b5fc4;
  --on-brand: #ffffff;
  --grad-brand: linear-gradient(120deg, #2d8cff, #62b8ff);

  --green: #14724f; --green-soft: #e5f7ef; --green-line: #bfe3d2;
  --red: #b42337; --red-soft: #fff0f1; --red-line: #eec3c3;
  --danger: var(--red); --danger-soft: var(--red-soft); --danger-line: var(--red-line);
  --orange: #9a5a05; --orange-soft: #fff5df; --orange-line: #ecd9a0;
  --purple: #6848b8; --purple-soft: #f3efff; --purple-line: #ddd0ff;

  --hot: #dc5b36; --hot-ink: #a83a1d; --hot-soft: #fff0ea; --hot-track: #f6d7cc;
  --warm: #d59a14; --warm-ink: #765400; --warm-soft: #fff6dc; --warm-track: #f2e1b0;
  --cold: #7596bd; --cold-ink: #45617f; --cold-soft: #edf3fa; --cold-track: #d9e4f0;
  --neutral-soft: #edf3fa;
  --neutral-strong: #142038;
  --chart-inbound: var(--brand);
  --chart-inbound-fill: color-mix(in srgb, var(--brand) 14%, transparent);
  --chart-revenue: var(--purple);
  --chart-revenue-muted: color-mix(in srgb, var(--purple) 22%, transparent);

  --radius: 14px;
  --radius-lg: 20px;
  --shadow-1: 0 1px 3px rgba(20, 32, 56, 0.08);
  --shadow-2: 0 4px 8px rgba(20, 32, 56, 0.12);
  --shadow-sheet: -8px 0 24px rgba(20, 32, 56, 0.18);
  --tap: 44px;
  --tabbar-h: calc(58px + env(safe-area-inset-bottom));
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* z-scale: sticky < jump < sheet < toast */
  --z-sticky: 10; --z-jump: 15; --z-sheet: 30; --z-toast: 50;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Noto Sans Thai", "Sukhumvit Set", "Sarabun", sans-serif;
  background: var(--bg);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.55;
}
#app { height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }
.loading, .empty { text-align: center; color: var(--ink-2); padding: 40px 16px; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 6px; }

/* ---------------------------------- topbar --------------------------------- */

.topbar {
  flex-shrink: 0; display: flex; align-items: center; gap: 12px;
  background: var(--surface); border-bottom: 1px solid var(--line);
  padding: max(8px, env(safe-area-inset-top)) 14px 8px;
  min-height: 54px;
}
.console-header { flex-shrink: 0; }
.console-notice { margin: 0; padding: 7px 14px; background: var(--brand-50); color: var(--brand-700); border-bottom: 1px solid var(--brand-100); font-size: 13px; font-weight: 700; text-align: center; }
.brand { display: flex; align-items: center; gap: 8px; text-decoration: none; color: inherit; }
/* v1.4.33 (พี่ง้วงสั่ง 2026-08-19): โลโก้แบบ liquid glass — โปร่ง มีความลึก ไม่แบนเชย
   ทำด้วย layer เดียวจริง ๆ: ผิวโปร่งแสง + ขอบสว่างบาง ๆ + ไฮไลต์วิ่งด้านบน
   ไม่ใช้รูปหรือ blur หนัก ๆ เพราะหัวเว็บ re-render ทุกครั้งที่เปลี่ยนหน้า */
.brand-mark {
  position: relative; overflow: hidden;
  width: 32px; height: 32px; border-radius: 11px; flex-shrink: 0;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0.06) 46%, rgba(255, 255, 255, 0) 58%),
    var(--grad-brand);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    inset 0 -1px 2px rgba(0, 0, 0, 0.18),
    0 2px 10px -2px rgba(37, 99, 235, 0.45);
  color: var(--on-brand); font-weight: 800; font-size: 12.5px;
  display: flex; align-items: center; justify-content: center;
  letter-spacing: 0.04em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.28);
}
/* ไฮไลต์โค้งด้านบน = ผิวแก้ว; ไม่รับ pointer เพื่อไม่บังการคลิกลิงก์แบรนด์ */
.brand-mark::after {
  content: ""; position: absolute; inset: -35% -20% auto -20%; height: 78%;
  background: radial-gradient(60% 100% at 50% 0%, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 70%);
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .brand:hover .brand-mark { transform: translateY(-1px); transition: transform 180ms cubic-bezier(0.16, 1, 0.3, 1); }
}
.brand-name { font-weight: 800; font-size: 15px; letter-spacing: -0.01em; }
.page-title { font-size: 16.5px; font-weight: 700; margin: 0; flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-right { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.topbar .me { color: var(--ink-2); font-size: 13px; max-width: 130px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.btn-logout { color: var(--ink-2); font-size: 13.5px; min-height: 36px; padding: 6px 10px; }

/* เมนูบน (เดสก์ท็อป) — มือถือซ่อน ใช้ tabbar ล่างแทน */
.topnav { display: none; align-items: center; gap: 2px; }
.topnav-link {
  padding: 7px 14px; border-radius: 999px; text-decoration: none;
  font-size: 14px; font-weight: 600; color: var(--ink-2);
  transition: background-color 0.15s var(--ease), color 0.15s var(--ease);
}
.topnav-link:hover { background: var(--surface-2); color: var(--ink); }
.topnav-link.is-active { background: var(--brand-50); color: var(--brand-700); }

/* ---------------------------------- tabbar --------------------------------- */
/* มือถือ: แถบล่าง 5 ปุ่มระยะนิ้วโป้ง — เดสก์ท็อปซ่อน (เมนูอยู่ topbar) */

.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-sticky);
  display: flex; background: var(--surface);
  border-top: 1px solid var(--line);
  padding: 4px 6px calc(4px + env(safe-area-inset-bottom));
  box-shadow: var(--shadow-1);
}
.tab {
  flex: 1; min-height: 50px; border-radius: 12px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  text-decoration: none; color: var(--ink-2);
  transition: background-color 0.15s var(--ease), color 0.15s var(--ease);
}
.tab-icon { font-size: 19px; line-height: 1.2; filter: grayscale(1) opacity(0.72); transition: filter 0.15s var(--ease); }
.tab-label { font-size: 11px; font-weight: 600; }
.tab:active { background: var(--brand-50); }
.tab.is-active { color: var(--brand-700); }
.tab.is-active .tab-icon { filter: none; }
.tab.is-active .tab-label { font-weight: 800; }

/* ----------------------------- โครงหน้า + ปุ่ม ----------------------------- */

.page-scroll { flex: 1; min-height: 0; overflow-y: auto; padding-bottom: var(--tabbar-h); }
.page-inner { max-width: 640px; margin: 0 auto; padding-bottom: 24px; }

.btn {
  min-height: var(--tap); border: none; border-radius: 10px;
  font-size: 15px; font-weight: 600; cursor: pointer; padding: 9px 16px; font-family: inherit;
  transition: transform 0.08s var(--ease), box-shadow 0.15s var(--ease),
    background-color 0.15s var(--ease), border-color 0.15s var(--ease), color 0.15s var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--brand); color: var(--on-brand); box-shadow: var(--shadow-1); }
.btn-primary:hover { background: var(--brand-600); box-shadow: var(--shadow-2); }
.btn-primary:active { background: var(--brand-700); }
.btn-primary:disabled { opacity: 0.55; box-shadow: none; }
.btn-ghost { background: transparent; color: var(--ink-2); }
.btn-ghost:hover { background: var(--surface-2); color: var(--ink); }
.btn-outline { background: var(--surface); color: var(--ink-2); border: 1px solid var(--line-2); }
.btn-outline:hover { border-color: var(--brand); color: var(--brand); }
.btn-outline:active { background: var(--brand-50); }
.btn-danger { background: var(--surface); color: var(--danger); border: 1px solid var(--danger-line); }
.btn-danger:hover { border-color: var(--danger); }
.btn-danger:active { background: var(--danger-soft); }
.btn-block { width: 100%; margin-top: 18px; }
.btn-mini { min-height: 36px; padding: 6px 12px; font-size: 13.5px; border-radius: 9px; }

/* --------------------------- training review queue ------------------------ */

.training-list { padding: 18px 14px 32px; display: grid; gap: 12px; }
.training-notice { background: var(--purple-soft); border: 1px solid var(--purple-line); border-radius: var(--radius); padding: 14px 16px; color: var(--purple); }
.training-notice p { margin: 4px 0 0; font-size: 13.5px; line-height: 1.5; }
.training-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 15px; box-shadow: var(--shadow-1); }
.training-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.training-card-head time { color: var(--ink-3); font-size: 12.5px; white-space: nowrap; }
.training-meta { margin: 4px 0 10px; color: var(--ink-2); font-size: 13.5px; }
.training-ack { margin: 6px 0 10px; font-size: 13px; }
.training-ack-ok { color: var(--green); }
.training-ack-pending { color: var(--warm-ink); }
.training-ack-warn { color: var(--danger); font-weight: 650; }
.training-detail { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 8px 0; }
.training-detail summary { cursor: pointer; color: var(--brand-700); font-weight: 650; font-size: 13.5px; }
.training-detail-loading, .training-detail-error { color: var(--ink-2); font-size: 13px; margin: 8px 0 0; }
.training-detail-error { color: var(--red); }
.training-transcript { display: grid; gap: 7px; margin-top: 10px; max-height: 360px; overflow-y: auto; }
.training-turn { margin: 0; border-radius: 10px; padding: 8px 10px; font-size: 13.5px; white-space: pre-wrap; overflow-wrap: anywhere; }
.training-turn-in { background: var(--surface-2); }
.training-turn-out { background: var(--brand-50); }
.training-turn-label { display: block; font-size: 11.5px; font-weight: 750; color: var(--ink-3); margin-bottom: 2px; }
.training-turn-text { color: var(--ink); }
.training-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

.icon-btn {
  width: 38px; height: 38px; border: none; border-radius: 10px; flex-shrink: 0;
  background: transparent; color: var(--ink-2); font-size: 18px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; text-decoration: none;
  font-family: inherit;
  transition: background-color 0.15s var(--ease), color 0.15s var(--ease);
}
.icon-btn:hover { background: var(--surface-2); color: var(--ink); }
.icon-btn.is-active { background: var(--brand-50); color: var(--brand-700); }
.icon-del {
  flex-shrink: 0; border: none; background: transparent; color: var(--ink-3);
  font-size: 15px; font-weight: 700; cursor: pointer;
  min-width: 32px; min-height: 32px; border-radius: 8px; font-family: inherit;
  transition: background-color 0.15s var(--ease), color 0.15s var(--ease);
}
.icon-del:hover { background: var(--red-soft); color: var(--red); }

.ai-toggle {
  min-height: 38px; border-radius: 999px; border: none; font-family: inherit;
  font-size: 13.5px; font-weight: 700; padding: 6px 14px; cursor: pointer; white-space: nowrap;
  box-shadow: inset 0 0 0 1.5px currentColor;
  transition: background-color 0.15s var(--ease);
}
.ai-toggle.is-on { background: var(--green-soft); color: var(--green); }
.ai-toggle.is-off { background: var(--red-soft); color: var(--red); }
.ai-toggle:hover { filter: brightness(0.97); }

/* สวิตช์ (ลูกกลิ้งจริง) */
.switch {
  width: 44px; height: 25px; border-radius: 999px; flex-shrink: 0;
  background: var(--line-2); position: relative;
  transition: background-color 0.18s var(--ease);
}
.switch::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 19px; height: 19px;
  border-radius: 50%; background: var(--surface); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.28);
  transition: transform 0.18s var(--ease);
}
.switch.is-on { background: var(--green); }
.switch.is-on::after { transform: translateX(19px); }
.switch-row { display: flex; align-items: center; gap: 10px; padding: 3px 0; }
.switch-state { font-size: 17px; font-weight: 800; }
.is-on-text { color: var(--green); }
.is-off-text { color: var(--ink-2); }
.switch-line {
  display: flex; align-items: center; gap: 10px;
  min-height: var(--tap); padding: 8px 12px; width: 100%;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px;
  font-family: inherit; font-size: 14.5px; cursor: pointer; text-align: left;
  transition: border-color 0.15s var(--ease), background-color 0.15s var(--ease);
}
.switch-line:hover { border-color: var(--line-2); }
.switch-line:active { background: var(--brand-50); }
.switch-line .switch-state { font-size: 14.5px; }
.switch-line-hint { margin-left: auto; font-size: 12px; color: var(--ink-3); }
.switch-line-mini { width: auto; min-height: 38px; padding: 5px 10px; }

/* ช่องกรอกร่วม */
/* v1.4.33c (feedback พี่ง้วง 2026-08-19): ตัวเลขในช่องกรอกกลืนกับพื้น
   เหตุ: ธีมของ instance เป็นน้ำเงินเข้ม (--ink เกือบขาว) แต่ช่อง input ที่ไม่ได้ตั้ง
   background เองจะได้พื้น "ขาว" จาก UA stylesheet -> ตัวหนังสือขาวบนพื้นขาว = หายไปเลย
   (เจอจริงที่ช่องที่นั่ง: bg rgb(255,255,255) กับ color rgb(245,248,255))
   แก้ที่ระดับ element เพื่อให้ครอบทุกช่องทั้งที่มีอยู่และที่จะเพิ่มในอนาคต —
   คลาสไหนตั้งสีเองอยู่แล้วยังชนะตามลำดับความจำเพาะ ไม่กระทบของเดิม */
textarea, input, select {
  font-family: inherit;
  color: var(--ink);
  background-color: var(--surface);
}
textarea::placeholder, input::placeholder { color: var(--ink-3); opacity: 1; }
.fix-input, .kn-title, .kn-content, .ack-input, .note-input, .fu-note, .fu-when,
.name-input, .time-input, .model-select, .export-month, .export-custom,
.pw-input, .price-amount, .price-new-label {
  border: 1px solid var(--line-2); border-radius: 10px; background: var(--surface);
  padding: 9px 12px; font-size: 14.5px;
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.fix-input:focus, .kn-title:focus, .kn-content:focus, .ack-input:focus, .note-input:focus,
.fu-note:focus, .fu-when:focus, .name-input:focus, .time-input:focus, .model-select:focus,
.export-month:focus, .export-custom:focus,
.pw-input:focus, .price-amount:focus, .price-new-label:focus {
  outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-100);
}
.kn-title, .ack-input { width: 100%; min-height: var(--tap); font-size: 16px; }
.kn-content { width: 100%; resize: vertical; min-height: 96px; }
.fix-input { width: 100%; margin-top: 10px; resize: vertical; min-height: var(--tap); }
.ack-input { resize: vertical; }
.note-input { flex: 1; min-width: 150px; min-height: 38px; }
.fu-note, .fu-when { flex: 1; min-width: 150px; min-height: 36px; }
.name-input { flex: 1; min-width: 90px; min-height: 36px; }
.time-input, .model-select { min-height: var(--tap); width: 100%; font-size: 16px; }
.export-month, .export-custom { min-height: 40px; }

/* --------------------------- avatar + วงแหวน score -------------------------- */

.avatar {
  --ring: 0%;
  width: 44px; height: 44px; border-radius: 50%; padding: 2.5px; flex-shrink: 0;
  background: conic-gradient(var(--seg-c) var(--ring), var(--seg-track) 0);
}
.avatar-core {
  display: flex; width: 100%; height: 100%; border-radius: 50%; overflow: hidden;
  align-items: center; justify-content: center;
  background: var(--seg-soft); color: var(--seg-ink);
  font-weight: 700; font-size: 16px; border: 2px solid var(--surface);
}
.avatar-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar-sm { width: 36px; height: 36px; padding: 2px; }
.avatar-sm .avatar-core { font-size: 14px; }
.avatar-lg { width: 54px; height: 54px; padding: 3px; }
.avatar-lg .avatar-core { font-size: 20px; }
.avatar.is-off .avatar-core { filter: grayscale(0.65); }
.seg-hot { --seg-c: var(--hot); --seg-soft: var(--hot-soft); --seg-ink: var(--hot-ink); --seg-track: var(--hot-track); }
.seg-warm { --seg-c: var(--warm); --seg-soft: var(--warm-soft); --seg-ink: var(--warm-ink); --seg-track: var(--warm-track); }
.seg-cold { --seg-c: var(--cold); --seg-soft: var(--cold-soft); --seg-ink: var(--cold-ink); --seg-track: var(--cold-track); }
/* ห้องที่ติดป้ายเงียบ — เทากลาง ไม่ใช่สีของกลุ่มความสนใจ เพราะไม่ได้อยู่ในเส้นทางขาย */
.seg-null { --seg-c: var(--ink-3); --seg-soft: var(--surface-2); --seg-ink: var(--ink-2); --seg-track: var(--line); }

.seg-chip {
  font-size: 12px; font-weight: 800; border-radius: 999px; padding: 3px 10px; white-space: nowrap;
}
.seg-chip-null { background: var(--surface-2); color: var(--ink-2); }
.seg-chip-hot { background: var(--hot-soft); color: var(--hot-ink); }
.seg-chip-warm { background: var(--warm-soft); color: var(--warm-ink); }
.seg-chip-cold { background: var(--cold-soft); color: var(--cold-ink); }

/* --------------------------------- overview -------------------------------- */

.stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 14px; }
.stat-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  padding: 12px 14px; min-height: var(--tap);
  display: flex; flex-direction: column; gap: 3px;
  text-decoration: none; color: inherit;
}
a.stat-card, .stat-card.is-tappable, button.stat-toggle {
  cursor: pointer;
  transition: transform 0.12s var(--ease), box-shadow 0.15s var(--ease), border-color 0.15s var(--ease);
}
a.stat-card:hover, .stat-card.is-tappable:hover, button.stat-toggle:hover {
  box-shadow: var(--shadow-2); transform: translateY(-1px); border-color: var(--line-2);
}
a.stat-card:active, .stat-card.is-tappable:active, button.stat-toggle:active {
  transform: translateY(0); box-shadow: var(--shadow-1);
}
.stat-card.is-urgent { border-color: var(--danger-line); background: var(--danger-soft); }
.stat-card.is-urgent .stat-value { color: var(--danger); }
.stat-card.is-warn { border-color: var(--orange-line); background: var(--warm-soft); }
.stat-card.is-warn .stat-value { color: var(--warm-ink); }
.stat-card.is-good { border-color: var(--green-line); background: var(--green-soft); }
.stat-card.is-good .stat-value { color: var(--green); }
.stat-label { font-size: 13px; font-weight: 700; color: var(--ink); line-height: 1.35; }
.stat-explain { font-size: 11.5px; color: var(--ink-2); line-height: 1.4; }
.stat-value { font-size: 28px; font-weight: 800; line-height: 1.15; word-break: break-word; letter-spacing: -0.01em; }
.stat-sub { font-size: 12px; color: var(--ink-2); }
button.stat-toggle { font-family: inherit; text-align: left; font-size: inherit; }
.ai-cost-card { grid-column: 1 / -1; }
.ai-cost-card small { font-size: 11px; color: var(--ink-2); font-weight: 400; }
.fx-line { color: var(--ink-2); }
.cost-breakdown summary { font-size: 12px; font-weight: 700; color: var(--brand-700); cursor: pointer; padding: 4px 0; }
.cost-row { display: flex; gap: 8px; font-size: 12px; padding: 2px 0; align-items: baseline; }
.cost-row-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cost-row-tokens { color: var(--ink-2); flex-shrink: 0; }
.cost-row-thb { font-weight: 700; flex-shrink: 0; min-width: 56px; text-align: right; }

.model-line {
  display: flex; align-items: center; gap: 10px;
  margin: 0 14px 14px; padding: 12px 14px; min-height: var(--tap);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-1); text-decoration: none; color: inherit;
  transition: box-shadow 0.15s var(--ease), border-color 0.15s var(--ease);
}
.model-line:hover { box-shadow: var(--shadow-2); border-color: var(--line-2); }
.model-line:active { background: var(--brand-50); }
.model-line-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.model-line-label { font-size: 12px; color: var(--ink-3); font-weight: 600; }
.model-line-value { font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.model-line-cta { flex-shrink: 0; color: var(--brand); font-weight: 700; font-size: 14px; }

/* ----------------------- บล็อกเนื้อหา (ตั้งค่า/ความรู้/export) ----------------------- */

.block {
  margin: 0 14px 14px; padding: 14px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  display: flex; flex-direction: column; gap: 10px;
}
.block:first-of-type { margin-top: 14px; }
.block-title { margin: 0; font-size: 15px; font-weight: 800; }
.block-hint { margin: 0; font-size: 12px; color: var(--ink-2); line-height: 1.5; }
.block-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.push-status { margin: 0; font-size: 13.5px; font-weight: 700; color: var(--ink); }

.model-pick { display: flex; flex-direction: column; gap: 4px; }
.model-pick-label { font-size: 13px; color: var(--ink-2); font-weight: 600; }
.model-pick-price { font-size: 12px; color: var(--ink-2); }
.model-pick-price small { font-size: 11px; }
/* M5: ตารางราคา (guard) + M1: ฟอร์มเปลี่ยนรหัสผ่าน — หน้า "ตั้งค่า" */
.price-list { display: flex; flex-direction: column; gap: 8px; }
.price-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.price-label { flex: 1; min-width: 140px; font-size: 14px; font-weight: 600; word-break: break-word; }
.price-amount { width: 120px; min-height: 38px; }
.price-add { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.price-new-label { flex: 1; min-width: 160px; min-height: 38px; }
.pw-form { display: flex; flex-direction: column; gap: 8px; max-width: 360px; }
.pw-input { min-height: var(--tap); font-size: 16px; }
.settings-user-create {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px;
}
.settings-user-create .btn { grid-column: 1 / -1; justify-self: start; }
.settings-user-list { display: flex; flex-direction: column; gap: 10px; }
.settings-user-row {
  display: flex; flex-direction: column; gap: 8px; padding: 12px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2);
}
.settings-user-row.is-disabled { opacity: 0.65; }
.settings-user-row.is-owner { flex-direction: row; align-items: center; justify-content: space-between; }
.settings-user-summary { display: flex; flex-direction: column; gap: 2px; }
.settings-user-controls { display: grid; grid-template-columns: minmax(140px, 1fr) 130px auto auto; gap: 8px; align-items: center; }
.settings-user-disabled { white-space: nowrap; font-size: 13px; color: var(--ink-2); }
.settings-user-reset { display: flex; gap: 8px; align-items: center; }
.settings-user-reset .pw-input { flex: 1; }
@media (max-width: 700px) {
  .settings-user-create, .settings-user-controls { grid-template-columns: 1fr; }
  .settings-user-reset { align-items: stretch; flex-direction: column; }
}

.sched-times { display: flex; gap: 12px; flex-wrap: wrap; }
.sched-time { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 130px; }
.sched-time span { font-size: 13px; color: var(--ink-2); font-weight: 600; }
.sched-status { margin: 0; font-size: 13.5px; font-weight: 700; }

.export-controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.export-link { text-decoration: none; display: inline-flex; align-items: center; }
.export-panel .export-controls { padding: 0 0 4px; }

/* ----------------------------- correction queue ----------------------------- */

.correction-list { display: flex; flex-direction: column; gap: 12px; padding: 14px; }
.learning-control {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 18px 20px; border: 1px solid color-mix(in srgb, var(--brand) 24%, var(--line));
  border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-1);
}
.learning-control-copy { min-width: 0; }
.learning-control-title { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.learning-control-title h2 { margin: 0; font-size: 18px; line-height: 1.35; }
.learning-control-copy > p { margin: 5px 0 0; max-width: 760px; color: var(--ink-2); }
.learning-control-copy .learning-meta { font-size: 12.5px; color: var(--ink-3); }
.learning-status {
  display: inline-flex; align-items: center; min-height: 26px; padding: 3px 9px;
  border-radius: 999px; font-size: 12px; font-weight: 800;
}
.learning-status.is-on { color: var(--green); background: var(--green-soft); }
.learning-status.is-off { color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--line); }
.learning-control-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; flex-shrink: 0; }
.learning-rollback { color: var(--red); }
.learning-section-head {
  display: flex; align-items: end; justify-content: space-between; gap: 12px;
  padding: 8px 2px 0;
}
.learning-section-head h2 { margin: 0; font-size: 16px; }
.learning-section-head p { margin: 2px 0 0; color: var(--ink-2); font-size: 13px; }
.correction-queue-head { margin-top: 8px; padding-top: 16px; border-top: 1px solid var(--line); }
.learning-empty {
  padding: 18px; border: 1px dashed var(--line-2); border-radius: var(--radius);
  background: var(--surface-2); color: var(--ink-2); text-align: center;
}
.learning-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1); padding: 14px;
}
.learning-card.is-risky { border-color: color-mix(in srgb, var(--orange) 38%, var(--line)); }
.learning-card-head { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; margin-bottom: 8px; }
.learning-kicker { color: var(--brand-700); font-size: 12.5px; font-weight: 800; }
.learning-card-head time { color: var(--ink-2); font-size: 12.5px; }
.learning-title, .learning-content {
  width: 100%; border: 1px solid var(--line-2); border-radius: 10px;
  background: var(--surface); color: var(--ink); font: inherit;
}
.learning-title { min-height: var(--tap); padding: 8px 10px; font-weight: 750; }
.learning-content { min-height: 110px; margin-top: 8px; padding: 10px; resize: vertical; }
.learning-title:focus, .learning-content:focus { border-color: var(--brand); outline: none; box-shadow: 0 0 0 3px var(--brand-100); }
.learning-evidence { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; margin-top: 9px; color: var(--ink-2); font-size: 12px; }
.learning-chip { padding: 2px 7px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); }
.learning-chip.is-warn { color: var(--orange); background: var(--orange-soft); }
.learning-risk {
  display: flex; flex-direction: column; gap: 2px; margin-top: 10px; padding: 9px 11px;
  border-radius: 10px; background: var(--orange-soft); color: var(--orange); font-size: 12.5px;
}
.learning-safe { margin: 9px 0 0; color: var(--green); font-size: 12.5px; }
.learning-actions .btn-primary { flex: 1.4; }
.correction-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-1); padding: 12px 14px;
}
.correction-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.correction-customer { color: var(--brand-700); font-weight: 700; font-size: 14px; text-decoration: none; }
.correction-customer:hover { text-decoration: underline; }
.correction-head time { color: var(--ink-2); font-size: 13px; flex-shrink: 0; }
.correction-label { margin: 6px 0 2px; font-size: 12px; font-weight: 700; color: var(--red); }
.correction-draft {
  margin: 0; padding: 8px 10px; border-radius: 10px; background: var(--red-soft);
  font-size: 14px; white-space: pre-wrap; word-break: break-word;
}
.correction-actions { display: flex; gap: 10px; margin-top: 10px; }
.correction-actions .btn { flex: 1; }

@media (max-width: 760px) {
  .learning-control { align-items: stretch; flex-direction: column; padding: 14px; }
  .learning-control-actions { justify-content: stretch; }
  .learning-control-actions .btn { flex: 1; }
  .learning-actions { flex-wrap: wrap; }
  .learning-actions .btn { min-width: 44%; }
}

.empty-state { text-align: center; padding: 48px 20px; }
.empty-icon { font-size: 38px; display: block; margin-bottom: 10px; }
.empty-title { margin: 0 0 4px; font-weight: 800; font-size: 16px; }
.empty-sub { margin: 0; color: var(--ink-2); font-size: 13.5px; }

/* ภาพประกอบ empty state (inline SVG เป็น data URI — ดู emptyArt ใน ui.mjs)
   ลอยเบา ๆ ให้มีชีวิต — คนที่ตั้ง reduced motion ได้ภาพนิ่ง (กฎ global ท้ายไฟล์) */
.empty-art { width: 116px; height: 96px; display: block; margin: 0 auto 12px; animation: art-bob 3.4s var(--ease) infinite; }
@keyframes art-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* -------------------- W3: สาขา / multi-OA (badge + settings) -------------------- */

.badge-branch { background: var(--purple-soft); color: var(--purple); }
.badge-green { background: var(--green-soft); color: var(--green); }
/* chip เลือกสาขาบนหน้า "ภาพรวม" (ตัว chip เองอยู่ใน workspace.css — โหลดคู่กันเสมอ) */
.overview-branches { padding: 12px 14px 0; border-bottom: none; }
.channel-list { display: flex; flex-direction: column; gap: 8px; }
.channel-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px;
  background: var(--surface-2);
}
.channel-row.is-off { opacity: 0.6; }
.channel-name { font-weight: 700; font-size: 14.5px; }
.channel-meta { flex: 1; min-width: 120px; font-size: 12px; color: var(--ink-2); word-break: break-all; }

/* ------------------------- คลังความรู้ + สมอง AI (G4) ------------------------- */

.kb-lede { margin: 14px 14px 0; font-size: 13.5px; color: var(--ink-2); }
.kb-block { padding: 4px 0; gap: 0; }
.kb-sec { border-bottom: 1px solid var(--line); }
.kb-sec:last-child { border-bottom: none; }
.kb-sec > summary {
  display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none;
  padding: 13px 14px; min-height: var(--tap); font-weight: 700; font-size: 14px;
  transition: background-color 0.12s var(--ease);
}
.kb-sec > summary::-webkit-details-marker { display: none; }
.kb-sec > summary::before {
  content: "›"; color: var(--ink-3); font-size: 16px; font-weight: 700; width: 14px;
  transition: transform 0.15s var(--ease);
}
.kb-sec[open] > summary::before { transform: rotate(90deg); }
.kb-sec > summary:hover { background: var(--surface-2); }
.kb-sec-title { flex: 1; min-width: 0; }
.kb-count {
  font-size: 11.5px; font-weight: 800; border-radius: 999px; padding: 2px 9px;
  background: var(--brand-50); color: var(--brand-700); white-space: nowrap;
}
.kb-ro {
  font-size: 10.5px; font-weight: 700; border-radius: 999px; padding: 2px 8px;
  background: var(--neutral-soft); color: var(--ink-2); white-space: nowrap;
}
.kb-ro.kb-editable { background: var(--green-soft); color: var(--green); }
.kb-sec > .block-hint { padding: 0 14px 10px; }
.kb-pre {
  margin: 0 14px 14px; padding: 12px; border-radius: 10px;
  background: var(--surface-2); border: 1px solid var(--line);
  font-size: 13px; line-height: 1.6; white-space: pre-wrap; word-break: break-word;
  max-height: 320px; overflow-y: auto;
}
.kb-empty { margin: 0; padding: 4px 14px 14px; font-size: 13px; color: var(--ink-3); }
.kb-price-list { display: flex; flex-direction: column; padding: 0 14px 14px; }
.kb-price-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 8px 2px; border-bottom: 1px dashed var(--line); font-size: 14px;
}
.kb-price-row:last-child { border-bottom: none; }
.kb-price-label { min-width: 0; word-break: break-word; }
.kb-price-amount { font-weight: 800; white-space: nowrap; }
.kb-img-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 10px; padding: 0 14px 14px;
}
.kb-img-card { margin: 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--surface-2); }
.kb-img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; background: var(--line); }
.kb-img-cap { padding: 7px 9px; display: flex; flex-direction: column; gap: 3px; }
.kb-img-key { font-size: 11.5px; font-weight: 700; word-break: break-all; color: var(--brand-700); }
.kb-img-desc { font-size: 11.5px; color: var(--ink-2); }
.kb-rule-list { display: flex; flex-direction: column; gap: 10px; padding: 0 14px 14px; }
.kb-rule { border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); padding: 10px 0 2px; }
.kb-rule-reason { font-size: 11px; font-weight: 800; color: var(--red); text-transform: none; padding: 3px 0; }
.kb-rule-template { margin: 0; padding: 0 14px 10px; font-size: 13px; color: var(--ink-2); white-space: pre-wrap; }
.kb-status { display: flex; flex-direction: column; padding: 0 14px 14px; }
.kb-status-row {
  display: flex; justify-content: space-between; gap: 12px; align-items: baseline;
  padding: 7px 2px; border-bottom: 1px dashed var(--line); font-size: 13.5px;
}
.kb-status-row:last-child { border-bottom: none; }
.kb-status-label { color: var(--ink-2); }
.kb-status-value { text-align: right; word-break: break-word; }

.kn-add { display: flex; flex-direction: column; gap: 10px; padding: 0 14px 14px; }
.kn-list { display: flex; flex-direction: column; gap: 10px; padding: 0 14px 14px; }
.kn-card {
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px;
  padding: 12px 14px; display: flex; flex-direction: column; gap: 8px;
}
.kn-card.is-off { opacity: 0.72; }
.kn-head { display: flex; align-items: flex-start; gap: 8px; }
.kn-name { flex: 1; min-width: 0; font-size: 14.5px; word-break: break-word; }
.kn-preview { margin: 0; font-size: 13px; color: var(--ink-2); white-space: pre-wrap; word-break: break-word; }
.kn-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.kn-meta { flex: 1; min-width: 120px; font-size: 11.5px; color: var(--ink-3); }
.kn-file { display: none; }

/* ------------------------- G3: การ์ดผลตรวจสลิป ------------------------- */

.slip-card {
  display: flex; flex-direction: column; gap: 3px;
  border-radius: 12px; padding: 9px 12px; max-width: 100%;
  border: 1px solid var(--line); background: var(--surface); font-size: 13px;
}
.slip-title { font-size: 13px; }
.slip-meta { font-weight: 600; word-break: break-word; }
.slip-note { font-size: 11.5px; color: var(--ink-2); }
.slip-valid { background: var(--green-soft); border-color: var(--green-line); }
.slip-valid .slip-title { color: var(--green); }
.slip-suspect { background: var(--danger-soft); border-color: var(--danger-line); }
.slip-suspect .slip-title, .slip-suspect .slip-meta { color: var(--red); }
.slip-pending, .slip-error { color: var(--ink-2); }

/* ------------------------------ ออเดอร์ (G6 P2) ------------------------------ */
/* chip กรองสถานะใช้ .fchip เดิมจาก workspace.css (โหลดคู่กันเสมอ) */

.order-filters { padding: 12px 14px 4px; }
.order-list { display: flex; flex-direction: column; gap: 12px; padding: 10px 14px 14px; }
.order-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-1); padding: 12px 14px;
  display: flex; flex-direction: column; gap: 8px;
}
.order-card-draft { border-color: var(--brand-100); }
.order-card-cancelled { opacity: 0.62; }
.order-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.order-no { font-weight: 800; font-size: 15px; color: var(--ink-2); }
.order-customer {
  flex: 1; min-width: 120px; font-weight: 700; font-size: 14.5px;
  color: var(--brand-700); text-decoration: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.order-customer:hover { text-decoration: underline; }
.order-meta { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; font-size: 12px; color: var(--ink-3); }
.order-slip { margin-left: 4px; }

/* ป้ายสถานะ — สีสื่อขั้นของ flow: ร่างชมพู, ยืนยันม่วง, จ่ายเขียว, ส่งส้ม, จบเทาเข้ม, ยกเลิกแดง */
.order-st { font-size: 11.5px; }
.order-st-draft { background: var(--brand-50); color: var(--brand-700); }
.order-st-confirmed { background: var(--purple-soft); color: var(--purple); }
.order-st-paid { background: var(--green-soft); color: var(--green); }
.order-st-shipped { background: var(--orange-soft); color: var(--orange); }
.order-st-done { background: var(--neutral-soft); color: var(--ink); }
.order-st-cancelled { background: var(--danger-soft); color: var(--danger); }

/* รายการสินค้า (อ่านอย่างเดียว — สถานะยืนยันแล้วขึ้นไป) */
.order-items { display: flex; flex-direction: column; }
.order-item {
  display: flex; align-items: baseline; gap: 10px; font-size: 14px;
  padding: 6px 2px; border-bottom: 1px dashed var(--line);
}
.order-item:last-child { border-bottom: none; }
.order-item-name { flex: 1; min-width: 0; word-break: break-word; }
.order-item-qty { color: var(--ink-2); flex-shrink: 0; }
.order-item-price { font-weight: 700; flex-shrink: 0; }
.order-empty-items { margin: 0; font-size: 13px; color: var(--ink-3); }
.order-total { margin: 0; font-size: 14.5px; }
.order-total strong { font-size: 16px; }
.order-note { margin: 0; font-size: 13px; color: var(--ink-2); white-space: pre-wrap; word-break: break-word; }
.order-ai-hint {
  margin: 0; padding: 7px 10px; border-radius: 10px; font-size: 12.5px; font-weight: 600;
  background: var(--warm-soft); color: var(--warm-ink);
}
.order-actions { display: flex; gap: 8px; flex-wrap: wrap; padding-top: 2px; }

/* ฟอร์มแก้รายการ (เฉพาะร่าง) */
.order-edit { display: flex; flex-direction: column; gap: 8px; }
.order-items-edit { display: flex; flex-direction: column; gap: 6px; }
.order-item-row { display: flex; gap: 6px; align-items: center; }
.order-in {
  border: 1px solid var(--line-2); border-radius: 10px; background: var(--surface);
  padding: 8px 10px; font-size: 14.5px; min-height: 38px;
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.order-in:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-100); }
.order-in-name { flex: 1; min-width: 90px; }
.order-in-qty { width: 62px; }
.order-in-price { width: 96px; }
.order-in-total { width: 130px; }
.order-in-note { width: 100%; }
.order-edit-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.order-total-label { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--ink-2); font-weight: 600; }

/* v1.1: ข้อมูลจัดส่ง + ป้ายเตือนตัวตรวจ (เบอร์/ปณ./จังหวัด/อีเมล) */
.order-section-label { font-size: 13px; font-weight: 700; color: var(--ink-2); margin: 4px 0 0; }
.order-shipping-edit { display: flex; flex-direction: column; gap: 6px; }
.order-in-address { width: 100%; resize: vertical; font-family: inherit; }
.order-shipping-view { display: flex; flex-direction: column; gap: 2px; }
.order-shipping-view p { margin: 0; font-size: 13.5px; color: var(--ink-2); }
.order-shipping-wrap { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.ship-warnings {
  border: 1px solid var(--orange-line); background: var(--orange-soft); border-radius: 10px;
  padding: 8px 12px; display: flex; flex-direction: column; gap: 3px;
}
.ship-warning { margin: 0; font-size: 13px; color: var(--warm-ink); font-weight: 600; }
.order-mini-warn { font-size: 12px; color: var(--warm-ink); font-weight: 700; }
.order-mini-warn-soft { color: var(--ink-3); font-weight: 600; }

/* v1.1 (item 7): chat tags — ชิป 3 สีตามที่มา (rfm/ai/human) */
.tag-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px 8px; }
.tag-chip {
  display: inline-flex; align-items: center; gap: 4px;
  border-radius: 999px; padding: 3px 6px 3px 12px; font-size: 12.5px; font-weight: 600;
}
.tag-rfm { background: var(--brand-50); color: var(--brand-700); }
.tag-ai { background: var(--purple-soft); color: var(--purple); }
.tag-human { background: var(--green-soft); color: var(--green); }
.tag-del {
  border: none; background: transparent; color: inherit; opacity: 0.55;
  cursor: pointer; font-size: 11px; padding: 2px 4px; border-radius: 50%;
}
.tag-del:hover { opacity: 1; }
.tag-add-row { display: flex; gap: 6px; }
.tag-input { flex: 1; min-width: 0; }
.tag-legend { font-size: 11.5px; }
.notify-row { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.notify-ids-input, .product-rules-input { width: 100%; resize: vertical; font-family: inherit; }
.notify-cost-hint { color: var(--warm-ink); }

/* v1.2: ผู้รับแจ้งเตือนแบบชิป (Enter = 1 คน) + วิธีหา user id */
.notify-chip-list { display: flex; flex-wrap: wrap; gap: 6px; }
.notify-chip {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--brand-50); color: var(--brand-700);
  border: 1px solid var(--brand-100); border-radius: 999px;
  padding: 4px 8px 4px 12px; font-size: 13px; font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.notify-add-row { display: flex; gap: 8px; align-items: center; }
.notify-id-input { flex: 1; min-width: 0; }
.notify-howto { border: 1px dashed var(--line-2); border-radius: 10px; padding: 8px 14px; margin: 4px 0 6px; }
.notify-howto summary { cursor: pointer; font-size: 13.5px; font-weight: 600; color: var(--brand-700); }
.notify-howto-steps { margin: 8px 0 4px; padding-left: 20px; font-size: 13.5px; color: var(--ink-2); }
.notify-howto-steps li { margin-bottom: 4px; }
.ctx-copy-id { min-height: 26px; padding: 2px 10px; font-size: 11.5px; margin-left: 4px; }

/* ---------------- v1.2: หน้าภาพรวมโฉมใหม่ — กราฟ + โควตา progress ---------------- */
.trend-grid { display: grid; grid-template-columns: 1fr; gap: 14px; margin-bottom: 14px; }
@media (min-width: 900px) { .trend-grid { grid-template-columns: 1fr 1fr; } }
.chart-card { overflow: hidden; }
.chart-svg { width: 100%; height: 150px; display: block; margin-top: 6px; }
.chart-tick { font-size: 11px; fill: var(--ink-3); font-family: inherit; }
.quota-track {
  display: block; height: 8px; border-radius: 999px; overflow: hidden;
  background: var(--brand-100); margin: 6px 0 2px;
}
.quota-fill {
  display: block; width: 100%; height: 100%; border-radius: 999px;
  transform: scaleX(0); transform-origin: left center; transition: transform 0.4s var(--ease);
}
.quota-good { background: linear-gradient(90deg, var(--green), color-mix(in srgb, var(--green) 75%, var(--surface))); }
.quota-warn { background: linear-gradient(90deg, var(--warm), var(--orange)); }
.quota-bad { background: linear-gradient(90deg, var(--danger), color-mix(in srgb, var(--danger) 75%, var(--surface))); }

/* ออเดอร์ย่อในแผงข้อมูลลูกค้า (context pane) */
.order-mini-list { display: flex; flex-direction: column; gap: 6px; padding: 0 14px 10px; }
.order-mini {
  display: flex; align-items: center; gap: 8px;
  border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px;
  background: var(--surface-2); text-decoration: none; color: inherit;
  transition: border-color 0.15s var(--ease), background-color 0.15s var(--ease);
}
.order-mini:hover { border-color: var(--line-2); background: var(--brand-50); }
.order-mini-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.order-mini-title { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.order-mini-sub { font-size: 12px; color: var(--ink-2); }
.order-mini-cta { color: var(--ink-3); font-weight: 700; }
.orders-panel summary { color: var(--brand-700); }

/* A-18: lifecycle trail is informational; only an explicitly authorized human
   control can record payment confirmation. */
.deal-panel { border-top: 1px solid var(--line); padding-top: 10px; }
.deal-panel .panel-title { margin: 0; padding: 0 14px 8px; font-size: 14px; color: var(--ink); }
.deal-steps { display: flex; flex-wrap: wrap; gap: 5px; padding: 0 14px 7px; }
.deal-step { display: inline-flex; align-items: center; gap: 4px; color: var(--ink-3); font-size: 12px; font-weight: 600; }
.deal-step-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--line-2); }
.deal-step.is-done { color: var(--green); }
.deal-step.is-done .deal-step-dot { background: var(--green); }
.deal-step.is-active { color: var(--warm-ink); }
.deal-step.is-active .deal-step-dot { background: var(--warm); }
.deal-note { padding: 0 14px 8px; }

/* ------------------------ สมอง AI ต่อสาขา (G6 P1) ------------------------ */

.brain-list { display: flex; flex-direction: column; gap: 10px; }
.brain-row {
  border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px;
  background: var(--surface-2); display: flex; flex-direction: column; gap: 8px;
}
.brain-row.is-separate { border-color: var(--brand-100); background: var(--brand-50); }
.brain-row-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.brain-row-head .channel-name { flex-shrink: 0; min-width: 110px; }
.brain-row-head .model-select { flex: 1; min-width: 200px; width: auto; }
.brain-addendum { display: flex; flex-direction: column; gap: 8px; }

/* chip เลือก scope บนหน้าคลังความรู้ (G6) — ใช้ .fchip เดิม */
.kn-scope { padding: 4px 14px 2px; }
.kn-scope-explain { border-bottom: none; padding-bottom: 4px; }

/* ---------------------------------- login ---------------------------------- */

/* พื้นหลัง login อุ่นแบบ ads-commander: แสงชมพู/ม่วงนุ่ม ๆ สองดวง (ไม่มี asset ภายนอก) */
.login-body {
  display: flex; min-height: 100dvh; align-items: flex-start; justify-content: center;
  background-image:
    radial-gradient(420px 300px at 12% -4%, color-mix(in srgb, var(--brand) 24%, transparent), transparent 70%),
    radial-gradient(380px 300px at 96% 30%, color-mix(in srgb, var(--purple) 20%, transparent), transparent 70%);
  background-repeat: no-repeat;
}
.login-wrap { width: 100%; max-width: 380px; padding: 13vh 20px 20px; }
.login-hero { text-align: center; margin-bottom: 20px; }
.login-mark {
  width: 56px; height: 56px; border-radius: 18px; margin: 0 auto 10px;
  background: var(--grad-brand); color: var(--on-brand); font-weight: 800; font-size: 19px;
  display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-2);
}
.login-hero h1 { font-size: 20px; margin: 0; }
.login-hero .sub { color: var(--ink-2); margin: 4px 0 0; font-size: 14px; }
.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1); padding: 20px;
}
.login-card label { display: block; font-size: 13px; color: var(--ink-2); margin: 12px 0 6px; }
.login-card label:first-child { margin-top: 0; }
.login-card input {
  width: 100%; min-height: var(--tap); border: 1px solid var(--line-2); border-radius: 10px;
  padding: 10px 14px; font-size: 16px; background: var(--surface-2);
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.login-card input:focus { outline: none; border-color: var(--brand); background: var(--surface); box-shadow: 0 0 0 3px var(--brand-100); }
.banner-error {
  margin: 14px 0 0; padding: 10px 12px; border-radius: 10px;
  background: var(--red-soft); color: var(--red); font-size: 14px;
}

/* ---------------------------------- toast ---------------------------------- */

.toast {
  position: fixed; left: 50%; bottom: calc(var(--tabbar-h) + 14px); z-index: var(--z-toast);
  transform: translateX(-50%) translateY(8px);
  background: var(--ink); color: var(--surface); border-radius: 999px; padding: 10px 18px;
  font-size: 14px; opacity: 0; pointer-events: none;
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
  max-width: 88vw; text-align: center; box-shadow: var(--shadow-2);
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* -------------------------------- responsive -------------------------------- */
/* NOTE (BUGFIX 2026-08-10): กฎ responsive ของ chat workspace (.chat-workspace /
   .convo-pane / .chat-pane / .context-pane) ต้องอยู่ใน workspace.css เท่านั้น —
   ห้ามย้ายกลับมาไฟล์นี้ ไฟล์นี้โหลดก่อน workspace.css และ media query ไม่เพิ่ม
   specificity ดังนั้นกฎ base `.chat-workspace { grid-template-columns: ... }`
   ใน workspace.css (โหลดทีหลัง) จะชนะกฎ desktop ในไฟล์นี้เสมอ ทำให้ split view
   ยุบเป็นคอลัมน์เดียว (ห้องแชทไปกองใต้รายการแชท) — ดูรายละเอียดใน workspace.css
   + regression test: test/console-layout.test.mjs */

/* มือถือ (<1024): ทีละหน้า — ซ่อน topbar/tabbar ตอนอยู่ในห้อง (เต็มจอเหมือนแอปแชท) */
@media (max-width: 1023.98px) {
  .brand-name { display: none; } /* ชื่อหน้าบอกอยู่แล้ว — เหลือโลโก้พอ */
  #app[data-view="room"] .topbar, #app[data-view="room"] .tabbar { display: none; }
}

/* เดสก์ท็อป (>=1024): เมนูขึ้น topbar, ซ่อน tabbar — โครง shell เท่านั้น */
@media (min-width: 1024px) {
  .tabbar { display: none; }
  :root { --tabbar-h: 0px; }
  .topnav { display: flex; }
  .page-title { display: none; }
  .topbar { padding: 8px 18px; }
  .page-scroll { padding-bottom: 0; }
  .page-inner { max-width: 1080px; padding: 0 10px 32px; }
  .stat-grid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
  .ai-cost-card { grid-column: span 2; }
  .toast { bottom: 28px; }
}

/* ลดโมชั่นตามระบบ — ทุก transition/animation เหลือทันทีทันใด */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ที่นั่งคงเหลือ (#/rounds) — ตารางเดียวจบ กรอกแล้วบันทึกได้จากช่องนั้นเลย */
.seat-table { width: 100%; border-collapse: collapse; margin-top: 12px; }
/* v1.4.34 (พี่ง้วงสั่ง 2026-08-19): ตัวใหญ่ขึ้น 15% ทั้งหน้า — ทีมงานอ่านจากระยะห่างจอ
   ระหว่างคุยกับลูกค้าอยู่อีกจอ ตัวเล็กแปลว่าต้องโน้มตัวเข้าไปอ่านทุกครั้ง
   ทำที่ตารางชั้นเดียวด้วย em เพื่อให้ทุกอย่างข้างในขยายตามพร้อมกัน ไม่ต้องไล่ทีละคลาส */
.seat-table { font-size: 1.15em; }
.seat-table th, .seat-table td { padding: 12px 9px; text-align: left; border-bottom: 1px solid var(--line); }
.seat-table th { font-size: 0.82em; opacity: .7; font-weight: 600; letter-spacing: .01em; }
.seat-date { white-space: nowrap; font-weight: 700; }
.seat-class { opacity: 1; }

/* ป้ายคลาส — สองคลาสต้องแยกออกจากกันตั้งแต่เหลือบตา เพราะทีมงานสแกนหาแถวที่ใช่
   ก่อนอ่านวันที่เสมอ · ผูกสีกับ classKey ไม่ใช่ชื่อ เปลี่ยนชื่อคลาสแล้วสีไม่หลุด */
.class-badge {
  display: inline-block; padding: 5px 12px; border-radius: 999px;
  font-size: 0.88em; font-weight: 700; letter-spacing: .01em; white-space: nowrap;
  border: 1px solid transparent;
}
.class-basic {
  color: var(--brand-700);
  background: color-mix(in srgb, var(--brand) 14%, var(--surface));
  border-color: color-mix(in srgb, var(--brand) 45%, var(--line));
}
.class-advance {
  color: var(--purple);
  background: color-mix(in srgb, var(--purple) 14%, var(--surface));
  border-color: color-mix(in srgb, var(--purple) 45%, var(--line));
}

/* หลอดพลังแบบตู้เกม — ไล่ เขียว > เหลือง > ส้ม > แดง > ดำ(เต็ม)
   เลือกทำด้วย CSS ไม่ใช่รูป เพราะหลอดต้องเปลี่ยนตามเลขที่พิมพ์แบบสด ๆ
   และต้องคมทุกความละเอียดจอ */
.gauge {
  position: relative; height: 13px; border-radius: 4px; overflow: hidden;
  background: var(--surface-2);
  border: 1px solid var(--line-2);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .5);
  margin-bottom: 5px; min-width: 128px; max-width: 190px;
}
.gauge-fill {
  display: block; height: 100%; width: 100%;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35);
  transform-origin: left center;
  transition: transform .25s var(--ease, ease-out);
}
/* ความยาวหลอดเป็นคลาส เพราะ CSP บล็อก inline style (style-src 'self') */
.gw-1 { transform: scaleX(.1); } .gw-2 { transform: scaleX(.2); } .gw-3 { transform: scaleX(.3); } .gw-4 { transform: scaleX(.4); }
.gw-5 { transform: scaleX(.5); } .gw-6 { transform: scaleX(.6); } .gw-7 { transform: scaleX(.7); } .gw-8 { transform: scaleX(.8); }
.gw-9 { transform: scaleX(.9); } .gw-10 { transform: scaleX(1); }
.is-safe   .gauge-fill { background: linear-gradient(90deg, var(--green), color-mix(in srgb, var(--green) 62%, var(--surface))); }
.is-mid    .gauge-fill { background: linear-gradient(90deg, var(--warm-ink), var(--warm)); }
.is-warn   .gauge-fill { background: linear-gradient(90deg, var(--orange), color-mix(in srgb, var(--orange) 62%, var(--surface))); }
.is-danger .gauge-fill { background: linear-gradient(90deg, var(--danger), color-mix(in srgb, var(--danger) 62%, var(--surface))); }
/* ยังไม่กรอก = หลอดจาง ๆ บอกว่า "ไม่รู้" ไม่ใช่ "เต็ม" หรือ "ว่าง" */
.is-unknown .gauge-fill { background: repeating-linear-gradient(45deg, rgba(255,255,255,.10) 0 6px, rgba(255,255,255,.03) 6px 12px); }
.is-soldout { border-color: var(--danger-line); }
.is-soldout .gauge-fill { background: linear-gradient(90deg, var(--danger), var(--ink)); }

/* SOLD OUT ทรงตู้เกม: ตัวเอียง ขอบเข้ม เงาซ้อน — อ่านออกทันทีแม้เหลือบผ่าน */
.gauge-soldout {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 9.5px; font-weight: 900; letter-spacing: .16em;
  color: var(--on-brand); transform: skewX(-12deg);
  text-shadow: 1px 1px 0 var(--danger), 2px 2px 0 rgba(0, 0, 0, .85);
}
.seat-word { font-size: 0.9em; opacity: .9; }
.seat-table tr.is-full .seat-word { color: var(--danger); font-weight: 700; }
.seat-input {
  width: 84px; padding: 8px; font-size: 17px; font-weight: 700; text-align: center;
  color: var(--ink); background: var(--surface);
  border: 1px solid var(--line-2); border-radius: 10px;
}
.seat-input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-100); }
.seat-state { white-space: nowrap; }
.seat-help { margin-top: 18px; padding-left: 18px; font-size: 14.5px; opacity: .78; line-height: 2; }

/* หน้าที่นั่งบนมือถือ (เคสจริง 2026-08-27: พี่ง้วงเปิดแล้วล้นจอ กดอะไรไม่ได้เลย)
   ตารางนี้มี 5 คอลัมน์ และสามคอลัมน์ตั้ง white-space:nowrap ไว้ (วันที่ / สถานะ / ปุ่ม)
   บวกช่องกรอกกว้างตายตัว 84px — ความกว้างขั้นต่ำจึงเกิน 375px ไปมาก ดันทั้งหน้าให้เลื่อน
   ออกนอกจอ จนปุ่ม "บันทึก" กับปุ่มลบหลุดไปอยู่นอกพื้นที่แตะ

   แก้ด้วยการเปลี่ยนแต่ละแถวเป็นการ์ดเมื่อจอแคบ — ไม่แตะ markup เลย จึงไม่มีความเสี่ยง
   ฝั่ง JS และปุ่มกลายเป็นเต็มความกว้าง นิ้วโป้งกดได้จริง */
@media (max-width: 720px) {
  .seat-table, .seat-table tbody, .seat-table tr, .seat-table td { display: block; width: auto; }
  .seat-table thead { display: none; }
  .seat-table tr {
    border: 1px solid var(--line-2); border-radius: 12px;
    padding: 12px 14px; margin-bottom: 10px; background: var(--surface);
  }
  .seat-table tr.is-full { border-color: var(--danger-line); }
  .seat-table td { border-bottom: none; padding: 4px 0; }
  .seat-date { font-size: 1.05em; }
  /* ปล่อยให้ตัดบรรทัดได้ — nowrap คือต้นเหตุที่ดันตารางจนล้นจอ */
  .seat-state { white-space: normal; }
  .seat-actions { white-space: normal; gap: 8px; padding-top: 10px; }
  .seat-actions .btn { flex: 1; min-height: 42px; }
  .seat-input { width: 100%; }
  .seat-help { padding-left: 16px; }
}


/* ---- v1.4.33: แชทเป็นเมนูหลักของแอดมิน จึงเด่นกว่าปุ่มอื่นอย่างตั้งใจ ---- */
.topnav-link.is-accent {
  color: var(--brand); font-weight: 800;
}
.topnav-link.is-accent::before {
  content: ""; position: absolute; inset: auto 8px -2px 8px; height: 2px; border-radius: 2px;
  background: var(--grad-brand); opacity: 0.35;
}
.topnav-link.is-accent { position: relative; }
.topnav-link.is-accent.is-active::before { opacity: 1; }
.tab.is-accent .tab-icon {
  background: var(--grad-brand);
  border-radius: 10px; color: var(--on-brand); padding: 3px 9px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 2px 8px -3px rgba(37, 99, 235, 0.6);
}
.tab.is-accent { font-weight: 700; }

/* ---- v1.4.33: ตัวกรอง Customer ---- */
.chip[data-tone="customer"].is-active,
.inbox-filters .is-active[data-tone="customer"] { background: var(--purple); color: var(--on-brand); }

/* ---- v1.4.33: ร่างที่ถูกบล็อก — ยุบเหลือชิปเล็ก ๆ ตอนปิด ----
   พี่ง้วง: "ซ่อนให้เกือบหายไปหมดเลย จะได้สบายตา"
   แต่ยังต้องเห็นว่ามีอยู่ ไม่งั้นร่างที่ถูกบล็อกจะถูกลืมทั้งที่เป็นสิ่งที่ต้องตัดสินใจ */
.draft-card.is-collapsed { border: 0; background: none; padding: 0; margin: 2px 0 6px; }
.draft-card.is-collapsed .draft-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: 999px; width: auto;
  background: var(--surface-2); border: 1px solid var(--line);
  font-size: 12px; opacity: 0.72; cursor: pointer;
}
.draft-card.is-collapsed .draft-toggle:hover { opacity: 1; }
.draft-card.is-collapsed .draft-preview,
.draft-card.is-collapsed .draft-text,
.draft-card.is-collapsed .draft-actions { display: none; }
/* v1.4.33b: ทางออกสองทางของการอ่านร่างจบ อยู่คู่กันท้ายร่าง — บนมือถือจะได้ไม่ต้อง
   เลื่อนกลับขึ้นไปบนสุดเพื่อกดปิด (ร่างยาวเต็มจอ นิ้วโป้งอยู่ล่างอยู่แล้ว) */
.draft-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; }
.draft-collapse-btn { opacity: 0.75; }
.draft-collapse-btn:hover { opacity: 1; }
.draft-caret { font-size: 10px; opacity: 0.7; }
.draft-card:not(.is-collapsed) .draft-caret { transform: rotate(180deg); }

/* v1.4.50: รายการคีย์เวิร์ดธุรกิจในหน้า Settings (ใต้สวิตช์ #) */
.block-sub { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.block-sub .note-input { width: 100%; font: inherit; font-size: 12px; font-family: ui-monospace, Menlo, monospace; }
.btn-row { display: flex; flex-wrap: wrap; gap: 6px; }

/* v1.4.52: ตั้งค่า #hashtag ทีละคำ — แยกช่อง "ลูกค้าต้องการอะไร" ออกจาก "โน้ตกิจกรรม"
   เพราะสองอย่างนี้ทำหน้าที่ต่างกันและสลับกันไม่ได้ */
.ht-list { display: grid; gap: 12px; margin: 10px 0; }
.ht-row {
  display: grid; gap: 6px;
  border: 1px solid var(--line); border-radius: 12px;
  padding: 12px 14px; background: var(--surface);
}
.ht-row-head { display: flex; gap: 10px; align-items: center; }
.ht-tag { flex: 0 0 auto; width: min(220px, 100%); font-weight: 700; }
.ht-row-head .btn { margin-left: auto; }
.ht-label { font-size: 12px; color: var(--ink-3); margin-top: 4px; }

/* v1.4.49: ลิงก์ห้องในแบนเนอร์แจ้งเตือน — กดเข้าห้องแชทได้เลย */
.stat-links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.stat-room-link { display: inline-block; padding: 3px 10px; border-radius: 999px;
  background: rgba(0,0,0,.06); text-decoration: none; font-size: 12.5px; color: inherit; }
.stat-room-link:hover { background: rgba(0,0,0,.12); }

/* ---- คลังรีวิว (1 ก.ย. 2026): ฟอร์มให้ชมพู่เพิ่มรีวิวโดยไม่ต้องแตะข้อความดิบ ---- */
.rv-wrap { display: grid; gap: 12px; }
.rv-body { display: grid; gap: 14px; }
.rv-group { border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; background: var(--surface); }
.rv-group-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.rv-group-name { font-weight: 650; color: var(--ink-2); }
.rv-rows { display: grid; gap: 8px; }
.rv-row { display: grid; grid-template-columns: 26px 1fr auto; gap: 8px; align-items: start; }
.rv-no { color: var(--muted); font-size: 13px; line-height: 34px; text-align: right; font-variant-numeric: tabular-nums; }
.rv-fields { display: grid; gap: 4px; min-width: 0; }
.rv-fields input { width: 100%; padding: 7px 9px; border: 1px solid var(--line-2); border-radius: 8px; font: inherit; }
.rv-fields input:focus { outline: 2px solid var(--accent, #3b6ef5); outline-offset: -1px; }
.rv-url { font-size: 13px; color: var(--muted); }
.rv-del { color: var(--danger); }
.rv-add { margin-top: 10px; }
.rv-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; position: sticky; bottom: 0;
  background: var(--surface); padding: 10px 0; border-top: 1px solid var(--line); }
.rv-status { font-size: 13px; color: var(--muted); }
.rv-status.rv-dirty { color: var(--ink-2); font-weight: 650; }
.rv-status.rv-ok { color: var(--green, #1a7f4b); }
.rv-status.rv-bad { color: var(--danger); font-weight: 650; }
@media (max-width: 640px) {
  .rv-row { grid-template-columns: 22px 1fr; }
  .rv-del { grid-column: 2; justify-self: end; }
}

/* ---- หน้าผลงาน KPI (1 ก.ย. 2026) ---- */
.kpi-page { display: grid; gap: 16px; }
.kpi-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.kpi-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; margin: 10px 0; }
.kpi-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; background: var(--surface); }
.kpi-card.kpi-warn { border-color: var(--line-2); }
.kpi-card.kpi-bad { border-color: var(--danger-line, var(--line-2)); }
.kpi-card.kpi-thin { border-style: dashed; }
.kpi-label { font-size: 13px; color: var(--muted); }
.kpi-value { font-size: 28px; font-weight: 700; line-height: 1.2; margin-top: 2px; font-variant-numeric: tabular-nums; }
.kpi-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
.kpi-block { margin: 14px 0; }
.kpi-block h3 { font-size: 15px; margin: 0 0 6px; color: var(--ink-2); }
.kpi-scroll { overflow-x: auto; }
.kpi-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.kpi-table th, .kpi-table td { text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.kpi-table thead th { font-size: 12px; color: var(--muted); font-weight: 600; }
.kpi-table td { font-variant-numeric: tabular-nums; }
.kpi-caveat { border-left: 3px solid var(--line-2); padding-left: 10px; }
.kpi-thin-note { font-weight: 650; }
.kpi-details { margin-top: 10px; }
.kpi-list { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 4px; font-size: 14px; }
.kpi-holidays { width: 100%; padding: 8px 10px; border: 1px solid var(--line-2); border-radius: 8px;
  font: inherit; font-variant-numeric: tabular-nums; margin-top: 8px; }

/* ---- แผงผลงานบนหน้าภาพรวม (1 ก.ย. 2026) — ตั้งใจให้เด่นกว่าการ์ดอื่นทั้งหน้า ---- */
.kpi-hero {
  border: 1px solid transparent; border-radius: 14px; padding: 14px 16px; margin-bottom: 14px;
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(115deg, #3b6ef5, #7b3ff2 45%, #d94fa8) border-box;
  box-shadow: 0 6px 22px -12px rgba(59, 110, 245, .55);
}
.kpi-hero-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.kpi-hero-title { font-weight: 700; font-size: 15px; letter-spacing: .01em; color: #3b6ef5; }
.kpi-hero-link { font-size: 13px; font-weight: 600; color: #3b6ef5; text-decoration: none; white-space: nowrap; }
.kpi-hero-link:hover { text-decoration: underline; }
.kpi-hero-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 10px; }
.kpi-hero-cell { display: grid; gap: 1px; padding: 10px 12px; border-radius: 10px; background: var(--surface-2, rgba(127,127,127,.06)); }
.kpi-hero-cell.is-ai { box-shadow: inset 3px 0 0 #3b6ef5; }
.kpi-hero-cell.is-human { box-shadow: inset 3px 0 0 #12a45c; }
.kpi-hero-cell.is-alert { box-shadow: inset 3px 0 0 #e0483c; }
.kpi-hero-label { font-size: 12px; color: var(--muted); }
.kpi-hero-value { font-size: 26px; font-weight: 750; line-height: 1.15; font-variant-numeric: tabular-nums; }
.kpi-hero-sub { font-size: 12px; color: var(--muted); }
.kpi-hero-note { margin: 10px 0 0; font-size: 12px; color: var(--muted); }

/* ---- แผง ROAS (1 ก.ย. 2026) ---- */
.roas-hero { background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(115deg, #12a45c, #3b6ef5 60%, #7b3ff2) border-box;
  box-shadow: 0 6px 22px -12px rgba(18, 164, 92, .5); }
.roas-hero .kpi-hero-title { color: #0e8a4d; }
.roas-top { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; margin-bottom: 10px; }
.roas-big, .roas-rev { display: grid; gap: 1px; padding: 12px 14px; border-radius: 10px; background: var(--surface-2, rgba(127,127,127,.06)); }
.roas-big.is-good { box-shadow: inset 3px 0 0 #12a45c; }
.roas-big.is-bad { box-shadow: inset 3px 0 0 #e0483c; }
.roas-big.is-unknown { box-shadow: inset 3px 0 0 var(--line-2); }
.roas-big-value { font-size: 34px; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.roas-costs { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 8px; }
.roas-cost { display: grid; gap: 0; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; }
.roas-cost-label { font-size: 11px; color: var(--muted); }
.roas-cost-value { font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }
.roas-cost-sub { font-size: 11px; color: var(--muted); }
.roas-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin-top: 8px; }
.roas-field { display: grid; gap: 3px; font-size: 13px; }
.roas-field small { color: var(--muted); font-size: 11px; }
.roas-input { padding: 7px 9px; border: 1px solid var(--line-2); border-radius: 8px; font: inherit; font-variant-numeric: tabular-nums; }

/* ---- ตัวเลือกช่วงเวลา + การแยกโควตา LINE (1 ก.ย. 2026) ---- */
.roas-range { padding: 5px 8px; border: 1px solid var(--line-2); border-radius: 8px;
  background: var(--surface); color: var(--ink-2); font: inherit; font-size: 13px; max-width: 190px; }
.roas-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; margin: 8px 0; }
.roas-split-cell { display: grid; gap: 0; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; }
.roas-split-cell.is-broadcast { box-shadow: inset 3px 0 0 #d94fa8; }
.roas-split-cell.is-ai { box-shadow: inset 3px 0 0 #3b6ef5; }
.roas-key { display: block; padding: 8px 10px; margin: 6px 0; border: 1px solid var(--line-2);
  border-radius: 8px; background: var(--surface-2, rgba(127,127,127,.06)); font-size: 12px;
  word-break: break-all; user-select: all; }
.roas-key-out { margin-top: 8px; }

/* การ์ดภาพรวมที่โหลดข้อมูลไม่สำเร็จ — ต้องเห็นชัดว่า "พัง" ไม่ใช่ "ไม่มีฟีเจอร์" */
.kpi-hero-broken { border: 1px solid #e0483c; background: rgba(224, 72, 60, .06); }

/* --- สิทธิ์เผยแพร่ (คำสั่งพี่ง้วง 2 ก.ย. 2026) — ของที่ทีมอ่านได้แต่กดไม่ได้ ---
   ช่องที่หน้าตาเหมือนพิมพ์ได้แต่พิมพ์ไม่ได้ = ทีมจะคิดว่าระบบพัง จึงต้องเห็นด้วยตาทันที
   ว่านี่คือของที่อ่านอย่างเดียว ไม่ใช่บั๊ก (คู่กับบรรทัด .publish-locked ใต้กล่อง) */
.is-locked { opacity: 0.72; cursor: not-allowed; background: var(--surface-2); }
.publish-locked { font-style: italic; }

/* ---------- Package K: แผงคำขออนุมัติเผยแพร่ (publishQueue.mjs) ---------- */
/* วางท้ายไฟล์ตามลำดับที่ของใหม่เข้ามา — ไม่มี selector ตัวไหนทับของเดิม */
.pq-block .block-title { display: flex; align-items: center; gap: 8px; }
.pq-count { font-variant-numeric: tabular-nums; }
.pq-card { gap: 6px; }
.pq-meta { padding: 0; }
.pq-detail > summary {
  cursor: pointer; font-size: 12px; color: var(--ink-2); padding: 2px 0; list-style: none;
}
.pq-detail > summary::-webkit-details-marker { display: none; }
.pq-detail > summary::before { content: "▸ "; }
.pq-detail[open] > summary::before { content: "▾ "; }
.pq-pre { max-height: 220px; }
.pq-actions { gap: 8px; }
.pq-note { flex: 1; min-width: 160px; }
/* บรรทัดบอกว่า "กดแล้วจะกลายเป็นคำขอ" — โทนเดียวกับ .publish-locked ของ Package C */
.publish-request-hint { color: var(--orange); font-weight: 600; }

/* ---------- K2: ผลการตัดสินล่าสุด (publishQueue.mjs, 2 ก.ย. 2026) ---------- */
/* ยุบไว้เป็นค่าเริ่มต้นด้วย <details> ที่ไม่มี open — ของที่ยังต้องตัดสินต้องมาก่อนประวัติ
   ใช้ .pq-detail คู่กันเพื่อยืมหัวลูกศร ▸/▾ ของเดิม ไม่มีสีใหม่เกินชุดสถานะที่มีอยู่ */
.pq-decided { margin-top: 4px; }
.pq-decided > summary { font-size: 13px; font-weight: 600; color: var(--ink); }
.pq-decided-list { margin-top: 6px; }
.pq-decided-card { gap: 4px; }
/* เหตุผลจากคนตัดสินเป็นข้อความที่คนพิมพ์เอง ยาวแค่ไหนก็ต้องไม่ดันจอมือถือให้เลื่อนซ้ายขวา */
.pq-decision-note, .pq-retry-hint { overflow-wrap: anywhere; white-space: normal; }
.pq-retry-hint { font-style: italic; }

/* ---------- เฟส 1b: แผงรุ่นสมองลูกแพร (brainVersions.mjs) ---------- */
/* ยืมโครงเดียวกับแผงคำขออนุมัติทั้งหมด — ไม่มีสีใหม่นอกชุดสถานะที่มีอยู่แล้ว
   เหตุผล: สองแผงนี้อยู่ติดกันบนหน้าตั้งค่าและตอบคำถามคนละครึ่งของเรื่องเดียวกัน
   ("ใครขออะไรค้างอยู่" กับ "ตอนนี้ลูกแพรใช้สมองรุ่นไหน") ถ้าหน้าตาไม่เหมือนกัน
   จะอ่านเป็นสองระบบทั้งที่เป็นเรื่องเดียวกัน */
.bv-block .block-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bv-count { font-variant-numeric: tabular-nums; }
.bv-card { gap: 6px; }
.bv-meta { padding: 0; }
.bv-actions { gap: 8px; flex-wrap: wrap; }
.bv-delegation { color: var(--orange); font-weight: 600; }
.bv-detail > summary {
  cursor: pointer; font-size: 12px; color: var(--ink-2); padding: 2px 0; list-style: none;
}
.bv-detail > summary::-webkit-details-marker { display: none; }
.bv-detail > summary::before { content: "▸ "; }
.bv-detail[open] > summary::before { content: "▾ "; }
/* ข้อความของ lint เป็นภาษาคนและยาวได้ — ห้ามดันจอมือถือให้เลื่อนซ้ายขวา (แบบแปลน 375 px) */
.bv-findings { gap: 4px; margin: 6px 0 0; padding-left: 0; list-style: none; }
.bv-finding { overflow-wrap: anywhere; white-space: normal; padding: 0; }

/* ---------- เฟส 3: บทสนทนาที่จะพัง (evalFailures.mjs) ---------- */
/* 375 px ก่อนเสมอ: คอลัมน์เดียว ปุ่มเต็มความกว้าง ไม่มีอะไรต้องเลื่อนซ้ายขวา
   ข้อความในนี้เป็นคำพูดของลูกค้ากับของลูกแพร ซึ่งยาวเท่าไรก็ได้ */
.ef-block { margin-top: 8px; }
.ef-list { gap: 10px; margin-top: 8px; }
.ef-card { gap: 6px; }
.ef-broke { gap: 4px; margin: 4px 0 0; padding-left: 0; list-style: none; }
.ef-break { overflow-wrap: anywhere; white-space: normal; padding: 0; color: var(--red); font-weight: 600; }
.ef-retired { overflow-wrap: anywhere; color: var(--ink-2); font-style: italic; padding: 0; }
.ef-none { color: var(--ink-2); }
.ef-scope { color: var(--ink-2); overflow-wrap: anywhere; }
.ef-turn { border-left: 2px solid var(--line); padding: 4px 0 4px 8px; margin-top: 6px; }
.ef-said { overflow-wrap: anywhere; white-space: pre-wrap; padding: 0; }
.ef-expects { gap: 2px; margin: 4px 0 0; padding-left: 14px; }
.ef-actions { gap: 8px; flex-wrap: wrap; }
@media (max-width: 420px) {
  .ef-actions .btn { width: 100%; }
}

/* ---------- เฟส 3: กล่องตรวจ (review.mjs) + จอสอน (teach.mjs) ---------- */
/* ออกแบบที่ 375 px ก่อน: ทุกอย่างเป็นการ์ดซ้อนแนวตั้ง ไม่มีตารางแนวนอน และทุกข้อความ
   ที่คนพิมพ์เอง (คำแก้ ผลตรวจ เหตุผล) ตัดบรรทัดด้วย overflow-wrap: anywhere เสมอ —
   จอมือถือที่เลื่อนซ้ายขวาได้ คือจอที่พี่ง้วงจะเลิกใช้ภายในสองวัน */
.ri-page, .tc-page { padding-bottom: 24px; }
.ri-count { font-variant-numeric: tabular-nums; }
.ri-filters { display: flex; gap: 8px; flex-wrap: wrap; }
.ri-list { gap: 10px; }
.ri-card { gap: 6px; border-left: 3px solid var(--line); }
.ri-red { border-left-color: var(--red); }
.ri-yellow { border-left-color: var(--orange); }
.ri-green { border-left-color: var(--green); }
.ri-head { flex-wrap: wrap; gap: 6px; align-items: center; }
.ri-source { font-size: 12px; color: var(--ink-2); font-weight: 700; }
.ri-time { margin-left: auto; font-size: 11.5px; color: var(--ink-3); }
.ri-title { margin: 0; font-size: 14.5px; font-weight: 700; overflow-wrap: anywhere; }
.ri-amounts { margin: 0; font-size: 13px; font-weight: 700; color: var(--red); overflow-wrap: anywhere; }
.ri-blocked { margin: 0; font-size: 12.5px; color: var(--ink-2); overflow-wrap: anywhere; }
.ri-detail > summary {
  cursor: pointer; font-size: 12px; color: var(--ink-2); padding: 2px 0; list-style: none;
}
.ri-detail > summary::-webkit-details-marker { display: none; }
.ri-detail > summary::before { content: "▸ "; }
.ri-detail[open] > summary::before { content: "▾ "; }
.ri-before, .ri-after { margin: 4px 0 0; font-size: 13px; overflow-wrap: anywhere; white-space: pre-wrap; }
.ri-before { color: var(--ink-3); }
/* ช่วงที่ร่างของบอทกับคำตอบของคนต่างกันจริง — 52% ของคำแก้บนของจริงต่างกันหลังตัวที่ 240
   ถ้าไม่ทำเครื่องหมาย คนตรวจจะเห็นสองก้อนที่ดูเหมือนกันแล้วสรุปว่าจอมั่ว
   สีมาจาก token คู่ soft/เข้ม ที่มีค่าอยู่แล้วทั้งธีมสว่างและธีมมืด ไม่ฝังค่าสีตรง ๆ
   และ color: var(--ink) ทับสีจาง ๆ ของ .ri-before ไว้ ไม่งั้นตัวที่ต่างจะจางกว่าบริบท */
.ri-diff {
  border-radius: 4px; padding: 0 2px; font-weight: 700;
  background: var(--warm-soft); color: var(--ink);
  box-shadow: inset 0 -2px 0 var(--warm);
  overflow-wrap: anywhere;
}
.ri-before .ri-diff { background: var(--red-soft); box-shadow: inset 0 -2px 0 var(--red); }
.ri-after .ri-diff { background: var(--green-soft); box-shadow: inset 0 -2px 0 var(--green); }
.ri-actions { gap: 8px; flex-wrap: wrap; }
.ri-pending { margin: 0; font-size: 12.5px; font-weight: 700; color: var(--orange); overflow-wrap: anywhere; }
.ri-owner-only { margin: 0; font-size: 12px; color: var(--ink-2); overflow-wrap: anywhere; }
.ri-shown { font-variant-numeric: tabular-nums; }
/* width:100% + margin ซ้ายขวา = ล้นจอ 28px (เจอตอนเรนเดอร์จริงที่ 375 px) */
.ri-more { display: block; width: calc(100% - 28px); margin: 4px 14px 14px; }
/* ช่องกรอกเหตุผล "ไม่ต้องสอน" — อยู่ในหน้า ไม่ใช่ prompt ของเบราว์เซอร์ (ปัดทิ้งง่ายบนมือถือ) */
.ri-dismiss-form { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.ri-dismiss-reason {
  flex: 1 1 100%; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: 10px;
  font: inherit; background: var(--surface); color: var(--ink); min-height: var(--tap);
}
/* ปุ่มบางตัวเป็นลิงก์ (พาไปอีกหน้า) — เบราว์เซอร์ขีดเส้นใต้ให้เอง ซึ่งอ่านเป็นลิงก์ในข้อความ
   ไม่ใช่ปุ่ม ต้องปิดเส้นใต้และจัดกลางเหมือนปุ่มจริง ไม่งั้นสองอย่างนี้ดูเป็นคนละระบบ */
a.btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
/* ปุ่มบนมือถือต้องกดโดนด้วยนิ้วโป้ง — เต็มความกว้างเมื่อจอแคบกว่า 400 px */
@media (max-width: 400px) {
  .ri-actions > .btn, .tc-actions > .btn { flex: 1 1 100%; text-align: center; }
}

.tc-block { gap: 10px; }
.tc-draft { margin: 0; font-size: 13px; color: var(--ink-2); overflow-wrap: anywhere; }
.tc-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.tc-proposal { display: flex; flex-direction: column; gap: 4px; }
.tc-risk { margin: 0; font-size: 13px; font-weight: 700; overflow-wrap: anywhere; }
.tc-risk-green { color: var(--green); }
.tc-risk-yellow { color: var(--orange); }
.tc-risk-red { color: var(--red); }
.tc-escalate, .tc-split { margin: 0; font-size: 12.5px; color: var(--orange); overflow-wrap: anywhere; }
.tc-blocked { margin: 0; font-size: 12.5px; color: var(--red); font-weight: 600; overflow-wrap: anywhere; }
.tc-related { display: flex; flex-direction: column; gap: 8px; }
.tc-pick {
  text-align: start; cursor: pointer; gap: 4px; width: 100%;
  font: inherit; color: inherit;
}
.tc-pick.is-picked { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.tc-pick-title { font-size: 14px; font-weight: 700; overflow-wrap: anywhere; }
.tc-pick-hint { font-size: 12px; color: var(--ink-2); overflow-wrap: anywhere; }
/* ช่องกรอกของจอสอนที่ไม่ใช่หัวข้อ (ตัวเลือกราคา / ยอดเงิน) — หน้าตาเดียวกับช่องอื่น
   แต่คนละคลาสโดยเจตนา: ใช้ .kn-title ซ้ำแล้ว querySelector(".kn-title") จะไปโดนตัวแรก
   ในลำดับ DOM ซึ่งไม่ใช่ช่องหัวข้อ (เจอจริงตอนเขียนเทสต์รอบสอง) */
.tc-input {
  width: 100%; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: 10px;
  font: inherit; background: var(--surface); color: var(--ink); min-height: var(--tap);
}
.tc-replace-note { margin: 0; font-size: 12.5px; font-weight: 700; color: var(--orange); overflow-wrap: anywhere; }
.tc-weak { margin: 0 0 6px; font-size: 12.5px; color: var(--ink-2); overflow-wrap: anywhere; }
.tc-draft-restored { margin: 0; font-size: 12.5px; color: var(--green); font-weight: 600; }
.tc-actions { margin: 0 14px 14px; gap: 8px; flex-wrap: wrap; }
.tc-send { margin-left: auto; }

/* ---------- เฟส 3 Step 0: "ทำไมตอบแบบนี้" ใต้ฟองของ AI (teach.mjs) ---------- */
/* อยู่ในสายฟองแชท จึงต้องแคบกว่าฟองเสมอและไม่ทำให้ห้องแชทกว้างขึ้นแม้แต่พิกเซลเดียว */
.why { max-width: 100%; margin-top: 2px; }
.why-summary {
  cursor: pointer; font-size: 11.5px; color: var(--ink-3); list-style: none; padding: 2px 0;
}
.why-summary::-webkit-details-marker { display: none; }
.why-summary::before { content: "▸ "; }
.why[open] .why-summary::before { content: "▾ "; }
.why-body {
  display: flex; flex-direction: column; gap: 4px;
  border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px;
  background: var(--surface-2);
}
.why-line, .why-sub { margin: 0; font-size: 12px; overflow-wrap: anywhere; }
.why-sub { color: var(--ink-2); }
.why-key { color: var(--ink-3); }
.why-known { color: var(--green); }
/* "อ่านจากตารางเดิม" ต้องอ่านออกว่าเป็นสถานะ ไม่ใช่ข้อผิดพลาด — โทนเดียวกับข้อความรอง */
.why-legacy { color: var(--ink-2); }
.why-unknown-head { margin-top: 6px; display: block; }
.why-unknown { margin: 2px 0 0; padding-left: 16px; font-size: 11.5px; color: var(--ink-3); }
.why-unknown li { overflow-wrap: anywhere; }
.why-teach { align-self: flex-start; }
/* Photo preparation is a local preview; the normal composer still owns sending. */
.photo-editor { width:min(940px,94vw); max-height:92dvh; padding:24px; border:1px solid #d7dce5; border-radius:20px; background:#fff; color:#1c2637; overflow:auto; }
.photo-editor::backdrop { background:rgba(12,20,35,.7); }
.photo-editor h2 { font-size:1.2rem; margin:0 0 8px; }
.photo-editor p { line-height:1.6; }
.photo-editor-compare { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.photo-editor-compare figure { margin:0; min-width:0; text-align:center; }
.photo-editor-compare canvas { display:block; width:100%; max-height:360px; object-fit:contain; background:#eef0f3; border-radius:10px; }
.photo-editor-compare figcaption { padding:6px; font-weight:600; }
.photo-editor-check { display:flex; align-items:flex-start; gap:10px; margin:14px 0 8px; line-height:1.6; }
.photo-editor-check input { width:20px; height:20px; flex-shrink:0; margin-top:3px; }
.photo-editor-controls { border:1px solid #d7dce5; border-radius:12px; padding:12px; min-width:0; }
.photo-editor-presets,.photo-editor-actions { display:flex; flex-wrap:wrap; gap:8px; }
.photo-editor-controls:disabled { opacity:.5; }
.photo-editor-slider { display:grid; grid-template-columns:130px 1fr 40px; align-items:center; gap:10px; margin:10px 0; }
.photo-editor-slider input { width:100%; min-width:0; min-height:32px; }
.photo-editor-slider output { text-align:right; font-variant-numeric:tabular-nums; }
.photo-editor-status { min-height:2em; font-size:.9rem; }
.photo-editor-actions { justify-content:flex-end; position:sticky; bottom:-24px; background:#fff; padding:12px 0; }
.photo-studio h2 { font-size:1.1rem; }
@media (max-width:520px) {
  .photo-editor { padding:14px; width:96vw; }
  .photo-editor-slider { grid-template-columns:105px 1fr 32px; gap:6px; }
  .photo-editor-actions { bottom:-14px; }
  .photo-editor-actions .btn { flex:1 1 auto; min-height:44px; }
}