/* ============================================================================
   LINE CRM — ธีมมืด (design spec 2026-08-12)
   ----------------------------------------------------------------------------
   The three redesigned pages (เรียนรู้คำ / ตรวจแชท / รายการแชท) live inside
   `.dark-ui`. The rest of the dashboard is still the original light theme, and
   its :root already owns --bg/--card/--border/--red with light values — so the
   spec palette is declared ONCE here, on .dark-ui, using the spec's own token
   names. Everything below reads those variables and nothing hard-codes a colour
   outside the palette, so a page physically cannot fall out of tone. When the
   remaining 10 pages are converted, this block moves up to :root unchanged.
   ========================================================================== */

.dark-ui {
  --side:      #16211c;
  --side-hover:#1f2d26;
  --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;

  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Sarabun, Roboto, sans-serif;
  margin: -20px;      /* bleed over the light .main padding so the page is fully dark */
  padding: 20px;
  min-height: calc(100vh - 40px);
}

.dark-ui *, .dark-ui *::before, .dark-ui *::after { box-sizing: border-box; }
.dark-ui h1, .dark-ui h2, .dark-ui h3, .dark-ui h4 { color: var(--ink); margin: 0; }
.dark-ui a { color: var(--green); }
.dark-ui .muted { color: var(--muted); }
.dark-ui .num-red { color: var(--red-ink); font-weight: 700; }
.dark-ui .num-green { color: var(--green); font-weight: 700; }
.dark-ui .num-gold { color: var(--gold); font-weight: 700; }

/* ---------- หัวหน้า ---------- */
.spec-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 4px; }
.spec-head h2 { font-size: 20px; font-weight: 700; }
.spec-head-stats { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; }
.spec-head-stat { text-align: right; }
.spec-head-stat .k { font-size: 11px; color: var(--muted); display: block; }
.spec-head-stat .v { font-size: 18px; font-weight: 700; }
.spec-sub { color: var(--muted); font-size: 13px; margin: 4px 0 14px; }

/* ---------- 3.2 KPI tile ---------- */
.spec-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 16px; }
.spec-kpi { background: var(--card); border: 1px solid var(--border); border-left: 4px solid var(--muted); border-radius: 10px; padding: 12px 14px; }
.spec-kpi.k-green { border-left-color: var(--green); }
.spec-kpi.k-red   { border-left-color: var(--red); }
.spec-kpi.k-gold  { border-left-color: var(--gold); }
.spec-kpi .k { font-size: 11px; color: var(--muted); }
.spec-kpi .v { font-size: 24px; font-weight: 700; line-height: 1.2; }

/* ---------- 3.3 Pills / ตัวกรอง ---------- */
.spec-filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.spec-pill {
  background: transparent; color: var(--muted); border: 1px solid var(--border);
  border-radius: 999px; padding: 6px 16px; font-size: 13px; font-family: inherit; cursor: pointer;
}
.spec-pill:hover { background: var(--card2); color: var(--ink); }
.spec-pill.active { background: var(--green); border-color: var(--green); color: var(--on-green); font-weight: 700; }
.spec-pill.active.pill-red { background: var(--red); border-color: var(--red); color: #fff; }
.spec-select, .spec-input {
  background: var(--bg); color: var(--ink); border: 1px solid var(--border);
  border-radius: 8px; padding: 7px 10px; font-size: 13px; font-family: inherit;
}
.spec-input::placeholder { color: var(--muted); }
.spec-select:focus, .spec-input:focus { outline: none; border-color: var(--green); }
.spec-field-label { font-size: 11px; color: var(--muted); display: block; margin-bottom: 3px; }

/* ---------- ปุ่ม ---------- */
.spec-btn {
  border-radius: 8px; padding: 8px 16px; font-size: 13px; font-family: inherit; font-weight: 600;
  cursor: pointer; border: 1px solid var(--border); background: var(--card2); color: var(--ink);
}
.spec-btn:hover { border-color: var(--green); }
.spec-btn:disabled { opacity: .5; cursor: not-allowed; }
.spec-btn.btn-green { background: var(--green); border-color: var(--green); color: var(--on-green); }
.spec-btn.btn-red { background: var(--red); border-color: var(--red); color: #fff; }
.spec-btn.btn-ghost { background: transparent; color: var(--muted); }
.spec-btn.btn-purple { background: #241633; border-color: #a371f7; color: #d2a8ff; }
.spec-btn.btn-purple:hover { border-color: #c297ff; }
.camp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; margin-top: 12px; }
.camp-grid > * { min-width: 0; }
@media (max-width: 820px) { .camp-grid { grid-template-columns: 1fr; } }
.spec-btn.btn-sm { padding: 5px 11px; font-size: 12px; }

/* ---------- 3.4 Master-detail ---------- */
.spec-md { display: grid; grid-template-columns: minmax(280px, 360px) 1fr; gap: 16px; align-items: start; }
@media (max-width: 1080px) { .spec-md { grid-template-columns: 1fr; } }
.spec-list { display: flex; flex-direction: column; gap: 8px; max-height: calc(100vh - 230px); overflow-y: auto; padding-right: 4px; }
.spec-list-item {
  background: var(--card); border: 1px solid var(--border); border-left: 3px solid transparent;
  border-radius: 10px; padding: 11px 13px; cursor: pointer; text-align: left; width: 100%;
  font-family: inherit; color: var(--ink); display: block;
}
.spec-list-item:hover { background: var(--card2); }
.spec-list-item.selected { border-left-color: var(--green); background: var(--card2); }
.spec-list-title { font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.spec-list-sub { font-size: 12px; color: var(--muted); margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spec-list-meta { font-size: 11px; color: var(--muted); margin-top: 5px; display: flex; gap: 8px; flex-wrap: wrap; }
.spec-empty { color: var(--muted); font-size: 13px; text-align: center; padding: 26px 10px; }

/* ---------- การ์ด ---------- */
.spec-card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 16px 18px; }
.spec-card + .spec-card { margin-top: 14px; }
.spec-card-title { font-size: 14px; font-weight: 700; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ---------- 3.5 ตาราง ---------- */
.spec-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.spec-table th { color: var(--muted); font-weight: 500; font-size: 12px; text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border); }
.spec-table td { padding: 9px 10px; border-bottom: 1px solid var(--border); vertical-align: top; }
.spec-table tbody tr:hover { background: var(--card2); }
.spec-avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--card2); border: 1px solid var(--border); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; }

/* ---------- แถบคะแนน (progress) ---------- */
.spec-bar { height: 8px; border-radius: 4px; background: var(--chat); overflow: hidden; }
.spec-bar > i { display: block; height: 100%; background: var(--green); border-radius: 4px; }
.spec-bar.bar-red > i { background: var(--red); }
.spec-bar.bar-gold > i { background: var(--gold); }
.spec-score-row { display: grid; grid-template-columns: 150px 1fr 54px; gap: 10px; align-items: center; font-size: 12px; margin-bottom: 7px; }
.spec-score-row .lbl { color: var(--muted); }
.spec-score-row .val { text-align: right; color: var(--ink); font-variant-numeric: tabular-nums; }

/* ---------- ป้าย ---------- */
.spec-badge { display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 10px; border: 1px solid var(--border); color: var(--muted); background: var(--card2); white-space: nowrap; }
.spec-badge.b-green { color: var(--green); border-color: var(--green); background: rgba(6,199,85,.13); }
.spec-badge.b-red   { color: var(--red-ink); border-color: var(--red); background: rgba(229,72,77,.14); }
.spec-badge.b-gold  { color: var(--gold); border-color: var(--gold); background: rgba(242,177,52,.13); }
.spec-badge.b-cust  { color: var(--cust); border-color: var(--cust); background: rgba(90,162,255,.13); }

/* ============================================================================
   3.1 ⭐ กล่องแชท — the one chat component every page reuses.
   Markup is produced by specChatHTML() in app.js (one implementation, three
   pages). .spec-chat-body must stay position:relative so the auto-scroll can
   use flag.offsetTop against it.
   ========================================================================== */
.spec-chat { background: var(--chat); border: 1px solid var(--border); border-radius: 12px; display: flex; flex-direction: column; overflow: hidden; }
/* The height lives on the flex CONTAINER, never on the scrolling body: the body is `flex:1`
   (i.e. flex-basis 0), and a flex item's `height` is ignored by the flex algorithm — putting it
   there makes the box grow to fit its content, scrollHeight === clientHeight, and the
   auto-scroll-to-the-problem silently does nothing. */
.spec-chat.chat-lg { height: 640px; }
.spec-chat.chat-md { height: 520px; }
.spec-chat-head { flex-shrink: 0; background: var(--card); border-bottom: 1px solid var(--border); padding: 11px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.spec-chat-who { font-size: 14px; font-weight: 700; }
.spec-chat-meta { font-size: 12px; color: var(--muted); margin-top: 2px; }
.spec-chat-body { position: relative; flex: 1; min-height: 0; overflow-y: auto; padding: 14px 18px; scrollbar-width: thin; scrollbar-color: var(--border) var(--chat); }
.spec-chat-body::-webkit-scrollbar { width: 10px; }
.spec-chat-body::-webkit-scrollbar-track { background: var(--chat); }
.spec-chat-body::-webkit-scrollbar-thumb { background: var(--border); border-radius: 5px; }



.spec-chat-date { text-align: center; margin: 14px 0 10px; }
.spec-chat-date span { display: inline-block; background: var(--card2); color: var(--muted); font-size: 11px; padding: 3px 13px; border-radius: 11px; }
.spec-chat-system { display: flex; align-items: center; gap: 10px; margin: 12px 0; color: var(--muted); font-size: 11px; }
.spec-chat-system::before, .spec-chat-system::after { content: ''; flex: 1; border-top: 1px dashed var(--border); }

/* ช่วงเงียบ */
.spec-chat-gap { display: flex; align-items: center; gap: 10px; margin: 10px 0; color: var(--muted); font-size: 11px; }
.spec-chat-gap::before, .spec-chat-gap::after { content: ''; flex: 1; border-top: 1px solid var(--border); }
.spec-chat-gap b { color: var(--muted); font-weight: 700; }
.spec-chat-gap.gap-long b { color: var(--red-ink); }

/* ⚡ ช่วงที่เป็นประเด็น */
.spec-chat-flag { display: flex; align-items: center; gap: 10px; margin: 16px 0 12px; color: var(--red-ink); font-size: 12px; font-weight: 700; }
.spec-chat-flag::before, .spec-chat-flag::after { content: ''; flex: 1; border-top: 1px solid var(--red); opacity: .55; }

.spec-row { display: flex; margin-bottom: 8px; }
.spec-row.side-left { justify-content: flex-start; }
.spec-row.side-right { justify-content: flex-end; }
.spec-turn { max-width: 74%; display: flex; flex-direction: column; }
.spec-row.side-right .spec-turn { align-items: flex-end; }
.spec-who { font-size: 11px; margin-bottom: 3px; padding: 0 3px; }
.spec-who.who-cust { color: var(--cust); }
.spec-who.who-adm { color: var(--green); }
.spec-bub { padding: 8px 13px; border-radius: 13px; font-size: 14px; line-height: 1.55; word-break: break-word; white-space: pre-wrap; color: var(--ink); }
.spec-row.side-left .spec-bub { background: var(--cust-bub); border-bottom-left-radius: 4px; }
.spec-row.side-right .spec-bub { background: var(--adm-bub); border-bottom-right-radius: 4px; }
.spec-bub.in-problem { box-shadow: 0 0 0 2px var(--red); }
.spec-bub mark { background: var(--gold); color: var(--on-green); border-radius: 3px; padding: 0 2px; }
.spec-bub img { max-width: 210px; max-height: 210px; border-radius: 8px; display: block; }

/* ---------- กรอบรูปในแชท (grading-live 2026-08-13) ----------
   Every media message renders inside one of these frames: a real image sits on the dark --chat
   backing (object-fit contain, click = full size in a new tab), a missing one shows the same-
   sized placeholder with the "ดึงรูปนี้" heal button. Both share the rounded-10px border so a
   chat with mixed states still reads as one tidy column. */
.spec-img-frame {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  background: var(--chat); border: 1px solid var(--border); border-radius: 10px;
  max-width: 320px; overflow: hidden; text-decoration: none; padding: 4px;
}
a.spec-img-frame { cursor: zoom-in; }
a.spec-img-frame:hover img { filter: brightness(1.12); }
.spec-img-frame img {
  max-width: 100%; max-height: 260px; object-fit: contain; display: block;
  border-radius: 7px; margin: 0;
}
/* the generic .spec-bub img sizing must not fight the frame */
.spec-bub .spec-img-frame img { max-width: 100%; max-height: 260px; }
.spec-img-frame.spec-img-empty { min-width: 210px; min-height: 110px; padding: 14px 16px; text-align: center; }
.spec-img-note { color: var(--muted); font-size: 11.5px; line-height: 1.5; }

/* ปุ่มขยายไทม์ไลน์ หัว/ท้ายกล่องแชท */
.spec-chat-extend { display: flex; justify-content: center; padding: 4px 0 10px; }
.spec-chat-extend:last-child { padding: 10px 0 4px; }
.spec-time { font-size: 10px; color: var(--muted); margin-top: 3px; padding: 0 3px; }
.spec-chat-foot { flex-shrink: 0; background: var(--card); border-top: 1px solid var(--border); padding: 8px 16px; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 12px; color: var(--muted); }

/* ---------- 3.6 แถวเทียบ AI ---------- */
.spec-verdict { display: grid; grid-template-columns: 210px auto 1fr; gap: 12px; align-items: start; padding: 9px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.spec-verdict:last-child { border-bottom: 0; }
.spec-verdict .judge { color: var(--ink); font-weight: 600; }
.spec-verdict .why { color: var(--muted); font-size: 12px; line-height: 1.5; }
@media (max-width: 720px) { .spec-verdict { grid-template-columns: 1fr; } }

/* ---------- 3.7 กล่องตัดสินใจ 2 คอลัมน์ ---------- */
.spec-decision { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 860px) { .spec-decision { grid-template-columns: 1fr; } }
.spec-decision-col { background: var(--card2); border: 1px solid var(--border); border-radius: 10px; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.spec-decision-col.col-bad { border-color: rgba(229,72,77,.5); }
.spec-decision-col.col-good { border-color: rgba(6,199,85,.5); }
.spec-decision-col h4 { font-size: 14px; }
.spec-decision-col .hint { font-size: 12px; color: var(--muted); }
.spec-textarea { background: var(--bg); color: var(--ink); border: 1px solid var(--border); border-radius: 8px; padding: 9px 11px; font-size: 13px; font-family: inherit; resize: vertical; min-height: 84px; width: 100%; }
.spec-textarea:focus { outline: none; border-color: var(--green); }
.spec-check { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink); cursor: pointer; }
.spec-check input { accent-color: var(--red); width: 15px; height: 15px; }

/* ---------- เรียนรู้คำ: หลักฐาน ---------- */
.spec-evidence { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
.spec-evidence > div { background: var(--card2); border: 1px solid var(--border); border-radius: 9px; padding: 10px 12px; }
.spec-evidence .k { font-size: 11px; color: var(--muted); }
.spec-evidence .v { font-size: 19px; font-weight: 700; }
.spec-excerpt { background: var(--chat); border: 1px solid var(--border); border-left: 3px solid var(--border); border-radius: 9px; padding: 10px 12px; margin-bottom: 9px; }
.spec-excerpt.from-problem { border-left-color: var(--red); }
.spec-excerpt.from-normal { border-left-color: var(--muted); }
.spec-excerpt .txt { font-size: 13px; line-height: 1.6; white-space: pre-wrap; word-break: break-word; }
.spec-excerpt .txt mark { background: var(--gold); color: var(--on-green); border-radius: 3px; padding: 0 3px; font-weight: 700; }
.spec-excerpt .src { font-size: 11px; color: var(--muted); margin-top: 6px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.spec-pagi { display: flex; gap: 10px; align-items: center; justify-content: flex-end; margin-top: 12px; font-size: 12px; color: var(--muted); }

/* ตารางกว้างเลื่อนแนวนอนในกรอบตัวเอง ไม่ดันทั้งหน้าให้เลื่อน (ใช้กับตารางลีก AI) */
.dark-ui .spec-tablebox { overflow-x: auto; }

/* การ์ดตัวตนลูกค้า — appears in the chat viewer header on every page that opens
   a room. Compact grid so it never pushes the conversation out of view. */
.id-card { margin-top: 10px; background: #0d1420; border: 1px solid #21262d; border-radius: 10px; padding: 10px 12px; }
.id-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 16px; }
.id-field { min-width: 0; }
.id-label { font-size: 10.5px; color: #7d8590; margin-bottom: 2px; }
.id-value { font-size: 13px; font-weight: 700; color: #e6edf3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.id-src { font-size: 9.5px; color: #6e7681; margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 720px) { .id-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ===== มาตรฐานกลาง "หน้าที่มีแชทและต้องตรวจ" (Jeed 2026-08-15) =====
   ใช้ร่วมกันทุกหน้า สร้างจาก app.js:stdPanelHTML() แหล่งเดียว
   ห้ามก๊อป style ไปเขียนซ้ำในหน้าใดหน้าหนึ่ง — ที่ผ่านมาการก๊อปคือสาเหตุที่
   เรื่องเดียวกันกลายเป็น 3 หน้าตาใน 12 หน้า */
.std-head { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.std-chip { font-size: 11.5px; color: #adbac7; background: #11161d; border: 1px solid #21262d;
            border-radius: 6px; padding: 2px 8px; white-space: nowrap; }
.std-chip b { color: #e6edf3; font-weight: 700; }
.std-chip.dim { color: #6e7681; }
.std-chip.adm { border-color: #2d5a3d; background: #12241a; color: #7ee2a8; }
.std-link { font-size: 11.5px; font-weight: 700; text-decoration: none; border-radius: 6px;
            padding: 3px 9px; border: 1px solid #1f6feb55; background: #1f6feb1a; color: #79c0ff; }
.std-link:hover { background: #1f6feb33; border-color: #1f6feb; }
.std-link.oa { border-color: #3fb95055; background: #3fb9501a; color: #7ee2a8; }
.std-link.oa:hover { background: #3fb95033; border-color: #3fb950; }

.std-agree { margin-top: 8px; font-size: 12.5px; font-weight: 700; color: #7ee2a8;
             background: #12241a; border: 1px solid #2d5a3d; border-radius: 8px; padding: 7px 11px; }
.std-agree.bad { color: #ff7b72; background: #2a1416; border-color: #6e2b2b; }
.std-agree.split { color: #e3b341; background: #241c0c; border-color: #6b5312; }
.std-agree-note { display: block; font-size: 10.5px; font-weight: 500; color: #8b949e; margin-top: 2px; }

.std-verdicts { margin-top: 6px; display: flex; flex-direction: column; gap: 4px; }
.std-verdict { background: #0d1117; border: 1px solid #21262d; border-left: 3px solid #30363d;
               border-radius: 7px; padding: 6px 10px; }
.std-verdict.bad { border-left-color: #f85149; }
.std-verdict-top { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-size: 12px; color: #e6edf3; }
.std-vd { font-size: 11px; color: #8b949e; }
.std-verdict.bad .std-vd { color: #ff7b72; font-weight: 700; }
.std-src { margin-left: auto; font-size: 10px; color: #6e7681; }
.std-verdict-why { font-size: 11.5px; color: #8b949e; margin-top: 3px; line-height: 1.5; }
.std-hm { font-size: 10px; font-weight: 700; border-radius: 5px; padding: 1px 6px; }
.std-hm.ok { background: #12241a; color: #7ee2a8; border: 1px solid #2d5a3d; }
.std-hm.no { background: #2a1416; color: #ff7b72; border: 1px solid #6e2b2b; }

/* มือถือ (≤760px): .main ใน style.css ลด padding เหลือ 16px 12px แต่ .dark-ui ยังดึงขอบ -20px
   → ล้นขวา 8px ทั้งหน้า (เลื่อนแนวนอน). ดึงขอบเท่ากับ padding จริงของ .main บนมือถือ · จอคอมไม่เปลี่ยน */
@media (max-width: 760px) {
  .dark-ui { margin: -16px -12px -20px; padding: 16px 12px 20px; }
}