/* Support Desk — โทนกระดาษ หมึกดำ เขียวสน เน้นอ่านง่ายและใช้งานทั้งวัน */

:root {
  --paper: #f5f3ee;
  --paper-2: #ece9e1;
  --surface: #ffffff;
  --surface-2: #faf9f6;
  --line: #e3dfd5;
  --line-2: #cdc8bb;
  --ink: #1c1b19;
  --ink-2: #44423d;
  --muted: #7d7970;
  --pine: #0b7d52;
  --pine-2: #08663f;
  --pine-tint: #e2f8ee;
  --mint: #38e291;
  --red: #b42318;
  --red-tint: #fbeae8;
  --amber: #a15c07;
  --amber-tint: #fbf0dc;
  --blue: #1d4ed8;
  --blue-tint: #e8eefc;
  --grey-tint: #efede8;
  --focus: 0 0 0 3px rgba(56, 226, 145, 0.35);
  --r: 6px;
  --r-lg: 8px;
  --sidebar: 236px;
  --mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--paper);
  color: var(--ink);
  /* ฟอนต์หนังสือราชการ: Sarabun (TH Sarabun เวอร์ชันเว็บ) / TH Sarabun PSK ที่ติดตั้งในเครื่อง */
  font-family: "Sarabun", "TH Sarabun PSK", "TH SarabunPSK", "TH Sarabun New", system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--pine); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
h1, h2, h3 { margin: 0; color: var(--ink); }
h1 { font-size: 1.45rem; font-weight: 600; letter-spacing: -0.01em; }
h2 { font-size: 0.98rem; font-weight: 600; }
h3 { font-size: 0.92rem; font-weight: 600; margin: 22px 0 10px; }
code, .mono { font-family: var(--mono); font-size: 0.86em; }
code { background: var(--grey-tint); padding: 1px 5px; border-radius: 4px; }
.ic { flex-shrink: 0; }
::selection { background: #c4f5dc; }
hr.divider { border: 0; border-top: 1px solid var(--line); margin: 16px 0; }

/* ---------- layout ---------- */
.sidebar {
  position: fixed; inset: 0 auto 0 0; width: var(--sidebar); z-index: 30;
  background: var(--paper-2); border-right: 1px solid var(--line);
  display: flex; flex-direction: column; padding: 18px 12px 14px;
  transition: transform .25s ease;
}
.shell { margin-left: var(--sidebar); min-height: 100vh; }
.content { width: 100%; min-width: 0; padding: 28px 36px 64px; }

.brand { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; color: var(--ink); padding: 2px 8px 18px; }
.brand-logo { display: block; width: 186px; height: auto; }
.brand-logo.sm { width: 127px; }
.brand-sub { font-size: 0.74rem; color: var(--muted); padding-left: 2px; }
.brand:hover { text-decoration: none; }
.brand-mark {
  width: 30px; height: 30px; border-radius: 5px; background: var(--ink); color: var(--paper);
  display: grid; place-items: center; font-weight: 700; font-size: 0.95rem; letter-spacing: -0.02em;
}
.brand-text { display: flex; flex-direction: column; line-height: 1.2; }
.brand-text strong { font-size: 0.98rem; font-weight: 700; }
.brand-text small { font-size: 0.74rem; color: var(--muted); }

.nav { display: flex; flex-direction: column; gap: 1px; flex: 1; }
.nav-label { font-size: 0.72rem; color: var(--muted); padding: 14px 10px 6px; }
.nav-item {
  display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: var(--r);
  color: var(--ink-2); font-size: 0.92rem; border: 1px solid transparent;
}
.nav-item:hover { background: rgba(0, 0, 0, 0.035); text-decoration: none; color: var(--ink); }
.nav-item.active { background: var(--surface); border-color: var(--line); color: var(--ink); font-weight: 600; box-shadow: inset 3px 0 0 var(--mint), 0 1px 0 rgba(0, 0, 0, 0.03); }
.nav-item .ic { color: var(--muted); }
.nav-item.active .ic { color: var(--pine); }
.nav-item .cicon { width: 20px; height: 20px; opacity: 0.85; filter: saturate(0.85); transition: transform .2s ease, opacity .15s, filter .15s; }
.nav-item:hover .cicon { opacity: 1; filter: none; transform: translateY(-1px) scale(1.08); }
.nav-item.active .cicon { opacity: 1; filter: none; }
.nav-badge {
  margin-left: auto; font-family: var(--mono); font-size: 0.74rem; font-weight: 500;
  padding: 0 6px; border-radius: 4px; background: var(--grey-tint); color: var(--ink-2); line-height: 1.6;
}
.nav-badge.hot { background: var(--red); color: #fff; }
.nav-badge:empty { display: none; }

.sidebar-foot { border-top: 1px solid var(--line); padding-top: 12px; display: flex; align-items: center; gap: 6px; }
.user-chip { display: flex; align-items: center; gap: 9px; flex: 1; min-width: 0; color: var(--ink); padding: 4px; border-radius: var(--r); }
.user-chip:hover { background: rgba(0, 0, 0, 0.035); text-decoration: none; }
.user-meta { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.user-meta strong { font-size: 0.88rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-meta small { font-size: 0.74rem; color: var(--muted); }
.avatar {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center;
  background: #d9d4c7; color: var(--ink); font-weight: 600; font-size: 0.82rem;
}
.avatar.lg { width: 44px; height: 44px; font-size: 1.05rem; }
.icon-btn {
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--r); cursor: pointer;
  border: 1px solid transparent; background: transparent; color: var(--muted);
}
.icon-btn:hover { background: rgba(0, 0, 0, 0.05); color: var(--ink); }

.mobilebar { display: none; }
.scrim { display: none; }
@media (max-width: 900px) {
  .sidebar { transform: translateX(-100%); box-shadow: 8px 0 30px rgba(0, 0, 0, 0.12); }
  body.menu-open .sidebar { transform: none; }
  body.menu-open .scrim { display: block; position: fixed; inset: 0; background: rgba(28, 27, 25, 0.3); z-index: 25; }
  .shell { margin-left: 0; }
  .mobilebar {
    display: flex; align-items: center; gap: 10px; position: sticky; top: 0; z-index: 20;
    padding: 8px 12px; background: rgba(245, 243, 238, 0.92); border-bottom: 1px solid var(--line);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  }
  .mobilebar .brand { padding: 0; flex: 1; }
  .mobilebar .brand-sub { display: none; }
  .content { padding: 20px 16px 56px; }
}

/* ---------- page header ---------- */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.page-head .sub { color: var(--muted); margin: 3px 0 0; font-size: 0.9rem; max-width: 680px; }
.crumb { display: inline-flex; align-items: center; gap: 5px; font-size: 0.85rem; color: var(--muted); margin-bottom: 10px; }
.crumb:hover { color: var(--ink); }

/* ---------- panels ---------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px 20px; margin-bottom: 16px; }
.card.flush { padding: 0; overflow: hidden; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.card-head h2 { display: flex; align-items: center; gap: 8px; }
.card-head .ic { color: var(--muted); }
.section-title { font-size: 0.8rem; font-weight: 600; color: var(--muted); margin: 0 0 8px; }

/* ---------- buttons ---------- */
.btn, button:where(:not(.toast-x, .icon-btn, .switch)) {
  font: inherit; font-size: 0.88rem; font-weight: 500; cursor: pointer; white-space: nowrap;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 6px 12px; border-radius: var(--r); line-height: 1.5;
  background: var(--surface); color: var(--ink); border: 1px solid var(--line-2);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
  transition: background .12s, border-color .12s;
}
.btn:hover, button:where(:not(.toast-x, .icon-btn, .switch)):hover { background: var(--surface-2); border-color: #b9b3a4; text-decoration: none; }
button:focus-visible, .btn:focus-visible, a:focus-visible { outline: none; box-shadow: var(--focus); }
button:disabled, .btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn.primary, button.primary { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn.primary:hover, button.primary:hover { background: #33312d; border-color: #33312d; }
.btn.go, button.go { background: var(--pine); color: #fff; border-color: var(--pine-2); }
.btn.go:hover, button.go:hover { background: var(--pine-2); }
.btn.danger, button.danger { color: var(--red); }
.btn.danger:hover, button.danger:hover { background: var(--red-tint); border-color: #e3b1ab; }
.btn.ghost, button.ghost { border-color: transparent; box-shadow: none; background: transparent; color: var(--ink-2); }
.btn.ghost:hover, button.ghost:hover { background: rgba(0, 0, 0, 0.05); }
.btn.block, button.block { width: 100%; }
.btn.sm, button.sm { padding: 3px 9px; font-size: 0.82rem; }
.btn.lg, button.lg { padding: 9px 16px; font-size: 0.95rem; }

/* ---------- forms ---------- */
.stack { display: flex; flex-direction: column; gap: 14px; }
.row { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.row > .field { flex: 1; min-width: 180px; }
.grow { flex: 1; min-width: 0; }
.field { display: flex; flex-direction: column; gap: 5px; font-size: 0.84rem; font-weight: 500; color: var(--ink-2); }
.hint { font-size: 0.8rem; color: var(--muted); font-weight: 400; }
input, textarea, select {
  font: inherit; font-size: 0.92rem; color: var(--ink); width: 100%;
  background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r); padding: 7px 10px;
  transition: border-color .12s, box-shadow .12s;
}
input::placeholder, textarea::placeholder { color: #a8a397; }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--pine); box-shadow: var(--focus); }
textarea { resize: vertical; line-height: 1.6; }
select {
  appearance: none; padding-right: 30px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%237d7970' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 9px center;
}
.key-status { display: flex; flex-direction: column; gap: 4px; font-size: 0.82rem; color: var(--muted); margin-top: -6px; }
.key-status .dot { margin-right: 2px; }
.check-row { display: flex; gap: 10px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--line); cursor: pointer; font-size: 0.92rem; }
.check-row:last-child { border-bottom: 0; }
.check-row input { width: 16px; height: 16px; margin-top: 4px; accent-color: var(--pine); flex-shrink: 0; }
.check-row .hint { display: block; }

/* toggle (ติดตามแชท) */
.switch { display: inline-flex; align-items: center; gap: 8px; background: none; border: 0; padding: 2px 0; cursor: pointer; font: inherit; font-size: 0.85rem; color: var(--muted); }
.switch .track { width: 30px; height: 17px; border-radius: 999px; background: #d3cec2; position: relative; transition: background .15s; }
.switch .track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 13px; height: 13px; border-radius: 50%; background: #fff; transition: transform .15s; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); }
.switch.on { color: var(--ink); }
.switch.on .track { background: var(--pine); }
.switch.on .track::after { transform: translateX(13px); }

/* ---------- toasts ---------- */
.toasts { position: fixed; bottom: 18px; right: 18px; z-index: 100; display: flex; flex-direction: column; gap: 8px; max-width: min(400px, calc(100vw - 32px)); }
.toast {
  display: flex; align-items: flex-start; gap: 10px; padding: 10px 10px 10px 12px; border-radius: var(--r);
  background: var(--ink); color: #f3f1ea; font-size: 0.9rem; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
  animation: toastIn .2s ease-out;
}
.toast.error { background: var(--red); color: #fff; }
.toast.leaving { opacity: 0; transform: translateY(6px); transition: all .2s; }
.toast-ic { display: grid; padding-top: 2px; opacity: 0.85; }
.toast-msg { flex: 1; }
.toast-x { background: none; border: 0; color: inherit; opacity: 0.6; cursor: pointer; padding: 3px; display: grid; border-radius: 4px; }
.toast-x:hover { opacity: 1; }
@keyframes toastIn { from { opacity: 0; transform: translateY(8px); } }

/* ---------- notes ---------- */
.note { border-left: 3px solid var(--line-2); background: var(--surface-2); padding: 9px 12px; font-size: 0.9rem; color: var(--ink-2); border-radius: 0 var(--r) var(--r) 0; }
.note strong { color: var(--ink); font-weight: 600; }
.note.error { border-color: var(--red); background: var(--red-tint); color: #7a1a12; }
.note.warn { border-color: var(--amber); background: var(--amber-tint); color: #6b3d05; }
.note ul { margin: 4px 0 0; padding-left: 18px; }
.storage-warn { margin-bottom: 18px; }

.muted { color: var(--muted); }
.small { font-size: 0.84rem; }
.error-text { color: var(--red); }
.ok-text { color: var(--pine); }

/* ---------- dashboard ---------- */
.ledger { display: grid; grid-template-columns: repeat(4, 1fr); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); margin-bottom: 16px; overflow: hidden; }
.ledger a { padding: 16px 18px; color: var(--ink); border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 2px; }
.ledger a:last-child { border-right: 0; }
.ledger a:hover { background: var(--surface-2); text-decoration: none; }
.ledger .label { font-size: 0.82rem; color: var(--muted); }
.ledger .value { font-family: var(--mono); font-size: 1.75rem; font-weight: 500; line-height: 1.25; letter-spacing: -0.02em; }
.ledger .value.attention { color: var(--red); }
.ledger .value.text { font-family: inherit; font-size: 1rem; font-weight: 600; display: flex; align-items: center; gap: 7px; padding: 8px 0 5px; }
.ledger .foot { font-size: 0.78rem; color: var(--muted); }
@media (max-width: 900px) { .ledger { grid-template-columns: 1fr 1fr; } .ledger a:nth-child(2) { border-right: 0; } .ledger a:nth-child(-n+2) { border-bottom: 1px solid var(--line); } }
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.dot.live { background: #12a150; }
.dot.off { background: var(--red); }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.grid-2 > .card, .grid-2 > .panel { margin-bottom: 0; }
.grid-2 + * { margin-top: 16px; }
.grid-2.wide-left { grid-template-columns: minmax(0, 1.75fr) minmax(270px, 1fr); align-items: start; }
@media (max-width: 1000px) { .grid-2, .grid-2.wide-left { grid-template-columns: 1fr; } }
.sticky { position: sticky; top: 20px; }

.cat-table td { padding: 9px 0; border-bottom: 1px solid var(--line); }
.cat-table tr:hover { background: none; }
.cat-table .meter { width: 38%; padding-left: 14px; }
.meter-track { height: 6px; background: var(--grey-tint); border-radius: 3px; overflow: hidden; }
.meter-fill { display: block; height: 100%; background: var(--ink-2); border-radius: 3px; }

/* ---------- lists & tables ---------- */
.list { display: flex; flex-direction: column; }
.list-item { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); color: var(--ink); }
.list-item:last-child { border-bottom: 0; }
.list-item:hover { text-decoration: none; }
a.list-item:hover .li-title { text-decoration: underline; text-underline-offset: 3px; }
.li-main { flex: 1; min-width: 0; }
.li-title { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.li-sub { font-size: 0.8rem; color: var(--muted); }

.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
th, td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
th { font-weight: 500; color: var(--muted); font-size: 0.8rem; background: var(--surface-2); white-space: nowrap; }
tbody tr:hover { background: var(--surface-2); }
tr:last-child td { border-bottom: 0; }
td.num, th.num { text-align: right; font-family: var(--mono); font-size: 0.85rem; }
tr.dim td { color: var(--muted); }
td .title-link { color: var(--ink); font-weight: 500; }
.col-title { min-width: 220px; }
.nowrap { white-space: nowrap; }
@media (max-width: 1240px) { .col-opt { display: none; } }
.id { font-family: var(--mono); color: var(--muted); font-size: 0.82rem; white-space: nowrap; }
.when { font-family: var(--mono); color: var(--muted); font-size: 0.8rem; white-space: nowrap; }

/* ---------- tags ---------- */
.tag {
  display: inline-block; font-size: 0.76rem; font-weight: 500; padding: 1px 7px; border-radius: 4px; white-space: nowrap; line-height: 1.6;
  background: var(--grey-tint); color: var(--ink-2); border: 1px solid transparent;
}
a.tag:hover { text-decoration: none; border-color: var(--line-2); }
.sev-low { background: var(--grey-tint); color: var(--muted); }
.sev-medium { background: var(--blue-tint); color: var(--blue); }
.sev-high { background: var(--amber-tint); color: var(--amber); }
.sev-critical { background: var(--red); color: #fff; }
.st-open { background: var(--amber-tint); color: var(--amber); }
.st-in_progress { background: var(--blue-tint); color: var(--blue); }
.st-resolved { background: var(--pine-tint); color: var(--pine); }
.st-closed { background: var(--grey-tint); color: var(--muted); }
.rs-pending { background: var(--amber-tint); color: var(--amber); }
.rs-sending { background: var(--blue-tint); color: var(--blue); }
.rs-sent { background: var(--pine-tint); color: var(--pine); }
.rs-rejected, .rs-failed { background: var(--red-tint); color: var(--red); }
.rs-superseded { background: var(--grey-tint); color: var(--muted); text-decoration: line-through; }

/* ---------- tabs & filters ---------- */
.tabs { display: flex; gap: 18px; border-bottom: 1px solid var(--line); margin: -4px 0 18px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs a { padding: 8px 0 7px; color: var(--muted); font-size: 0.9rem; border-bottom: 2px solid transparent; white-space: nowrap; }
.tabs a:hover { color: var(--ink); text-decoration: none; }
.tabs a.active { color: var(--ink); border-bottom-color: var(--ink); font-weight: 600; }
.filters { display: flex; gap: 8px; flex-wrap: wrap; }
.filters select { width: auto; min-width: 160px; }

/* ---------- approval queue ---------- */
.reply { padding: 0; overflow: hidden; }
.reply-head { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 11px 18px; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.reply-head .who { font-weight: 600; flex: 1; min-width: 140px; }
.reply-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
.reply-body > div { padding: 16px 18px; }
.reply-body > div + div { border-left: 1px solid var(--line); }
.reply-body.single { display: block; }
@media (max-width: 900px) { .reply-body { grid-template-columns: 1fr; } .reply-body > div + div { border-left: 0; border-top: 1px solid var(--line); } }
.composer textarea { min-height: 120px; }
.reply-head .who { display: flex; align-items: center; gap: 7px; }

/* ---------- กล่องรออนุมัติ: ตอบลูกค้า / ส่งเข้ากลุ่มโปรแกรมเมอร์ ---------- */
.boxtabs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.boxtab {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px;
  padding: 12px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); color: var(--ink);
}
.boxtab:hover { text-decoration: none; border-color: var(--line-2); }
.boxtab.active { border-color: var(--pine); box-shadow: inset 0 0 0 1px var(--pine); background: #fbfefc; }
.boxtab.dev.active { border-color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue); background: #fbfcff; }
.boxtab-ic { width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center; background: var(--surface-2); border: 1px solid var(--line); }
.boxtab-text { display: flex; flex-direction: column; min-width: 0; }
.boxtab-text strong { font-weight: 600; }
.boxtab-text small { color: var(--muted); font-size: 0.8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.boxtab-count { font-family: var(--mono); font-size: 1.3rem; min-width: 36px; text-align: center; padding: 2px 8px; border-radius: 99px; background: var(--grey-tint); color: var(--muted); }
.boxtab-count.hot { background: var(--red-tint); color: var(--red); }
@media (max-width: 700px) { .boxtabs { grid-template-columns: 1fr; } }

.dticket { padding: 0; overflow: hidden; border-left: 3px solid var(--blue); }
.dt-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 18px; border-bottom: 1px solid var(--line); }
.dt-id { font-family: var(--mono); font-weight: 600; font-size: 0.95rem; color: var(--blue); background: var(--blue-tint); border-radius: var(--r); padding: 4px 9px; }
.dt-title { flex: 1; min-width: 200px; display: flex; flex-direction: column; }
.dt-title strong { font-size: 1.02rem; font-weight: 600; line-height: 1.35; }
.dt-title span { color: var(--muted); font-size: 0.8rem; }
.dt-body { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
.dt-body > div { padding: 16px 18px; min-width: 0; }
.dt-msg { border-left: 1px solid var(--line); background: var(--surface-2); }
.dt-msg-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.dt-summary { margin: 0 0 14px; font-size: 0.9rem; line-height: 1.6; color: var(--ink-2); }
.tg-bubble {
  white-space: pre-wrap; word-break: break-word; font-size: 0.88rem; line-height: 1.6;
  background: var(--surface); border: 1px solid var(--line); border-radius: 4px 12px 12px 12px; padding: 12px 14px;
}
.dt-msg textarea { width: 100%; font-size: 0.86rem; line-height: 1.55; }
.dt-foot { display: flex; align-items: center; gap: 12px; padding: 10px 18px; border-top: 1px solid var(--line); background: var(--surface-2); flex-wrap: wrap; }
.dt-hint { flex: 1; min-width: 180px; }
.site-pill { display: inline-flex; align-items: center; gap: 5px; margin-left: 6px; font-size: 0.78rem; padding: 1px 8px; border-radius: 99px; background: var(--grey-tint); }
.site-pill.up { background: var(--pine-tint); color: var(--pine); }
.site-pill.moved { background: var(--amber-tint); color: var(--amber); }
.site-pill.down { background: var(--red-tint); color: var(--red); }
@media (max-width: 900px) { .dt-body { grid-template-columns: 1fr; } .dt-msg { border-left: 0; border-top: 1px solid var(--line); } }
.actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.actions.end { justify-content: flex-end; }
.tools { display: flex; gap: 10px; padding: 10px 18px; border-top: 1px solid var(--line); background: var(--surface-2); flex-wrap: wrap; }
.tools form { display: flex; gap: 6px; min-width: 0; }
.tools form:first-child { flex: 1; min-width: 260px; }
.tools input { min-width: 0; }
.sent-text { white-space: pre-wrap; }
.decided { font-size: 0.82rem; color: var(--muted); margin-top: 8px; }

/* ---------- chat ---------- */
.chatlog { display: flex; flex-direction: column; gap: 8px; }
.chatlog.compact { max-height: 330px; overflow-y: auto; padding-right: 4px; }
.chatlog.full { padding: 20px; background: var(--surface-2); }
.msg { max-width: 80%; align-self: flex-start; padding: 7px 11px; border-radius: 10px 10px 10px 3px; background: var(--surface); border: 1px solid var(--line); }
.msg.out { align-self: flex-end; border-radius: 10px 10px 3px 10px; background: var(--pine-tint); border-color: #bdeed5; }
.msg.target { border-color: var(--amber); box-shadow: inset 3px 0 0 var(--amber); }
.msg .meta { font-size: 0.75rem; color: var(--muted); display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.msg .body { white-space: pre-wrap; word-break: break-word; font-size: 0.92rem; }
.thumb { max-width: 240px; max-height: 240px; border-radius: var(--r); margin-top: 6px; display: block; border: 1px solid var(--line); }
.thumb.small { max-width: 140px; max-height: 140px; }
@media (max-width: 640px) { .msg { max-width: 94%; } }

/* ---------- ticket ---------- */
.facts { display: grid; grid-template-columns: 110px 1fr; gap: 7px 14px; margin: 0 0 14px; font-size: 0.9rem; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; word-break: break-word; }
.summary { white-space: pre-wrap; line-height: 1.75; padding-top: 12px; border-top: 1px solid var(--line); }
.facts + .section-title { border-top: 1px solid var(--line); padding-top: 12px; }
.section-title + .summary { border-top: 0; padding-top: 0; }
.site-status { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.site-status .state { font-weight: 600; display: flex; align-items: center; gap: 7px; }
.site-status.down .state { color: var(--red); }
.site-status.up .state { color: var(--pine); }
.site-status.moved .state { color: var(--amber); }
.site-edit { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--line); display: flex; flex-direction: column; gap: 6px; }
.card.site-edit { border-top: 1px solid var(--line); margin-top: 0; }
.site-edit .row input { flex: 1; }
.check-inline { display: flex; flex-direction: row; align-items: center; gap: 8px; font-size: 0.84rem; font-weight: 400; color: var(--ink-2); cursor: pointer; }
.check-inline input { width: 15px; height: 15px; accent-color: var(--pine); flex-shrink: 0; }
.tl-pics { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.tl-pics img { width: 96px; height: 72px; object-fit: cover; border-radius: var(--r); border: 1px solid var(--line); display: block; }
.tl-pics a:hover img { border-color: var(--line-2); }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.gallery a { display: block; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.gallery img { width: 100%; height: 140px; object-fit: cover; display: block; }
.timeline { list-style: none; padding: 0; margin: 0 0 16px; }
.timeline li { display: grid; grid-template-columns: 128px 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px dashed var(--line); }
.timeline li:last-child { border-bottom: 0; }
.timeline .tl-when { font-family: var(--mono); font-size: 0.76rem; color: var(--muted); padding-top: 2px; white-space: nowrap; }
.timeline .tl-who { font-size: 0.8rem; color: var(--muted); }
.timeline .tl-who strong { color: var(--ink); font-weight: 600; }
.timeline .body { white-space: pre-wrap; word-break: break-word; font-size: 0.92rem; }
.ev-customer_message .tl-who strong { color: var(--amber); }
.ev-note .tl-who strong { color: var(--pine); }
@media (max-width: 640px) { .timeline li { grid-template-columns: 1fr; gap: 2px; } }
.mini-reply { padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 0.88rem; white-space: pre-wrap; }
.mini-reply:last-child { border-bottom: 0; }
.mini-reply .tag { margin-bottom: 4px; }

/* ---------- telegram steps ---------- */
.step { display: grid; grid-template-columns: 30px 1fr; gap: 14px; }
.step-num {
  width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-family: var(--mono); font-size: 0.82rem; font-weight: 500;
  border: 1px solid var(--line-2); background: var(--surface); color: var(--muted); margin-top: 16px;
}
.step.current .step-num { background: var(--ink); color: #fff; border-color: var(--ink); }
.step.done .step-num { background: var(--pine); color: #fff; border-color: var(--pine); }
.step.locked .card { opacity: 0.55; }
.step.locked .card form { pointer-events: none; }
.account-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

/* ---------- empty ---------- */
.empty { padding: 22px 20px; color: var(--muted); font-size: 0.92rem; }
.empty strong { display: block; color: var(--ink); font-weight: 600; margin-bottom: 2px; }
.card.empty { border-style: dashed; background: transparent; }

/* ---------- strips (แถบตัวเลขแบ่งช่อง) ---------- */
.strip {
  --cols: 4;
  display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; margin-bottom: 16px;
}
.strip-cell {
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 0 12px;
  padding: 14px 16px; border-right: 1px solid var(--line); color: var(--ink); min-width: 0; position: relative;
}
.strip-cell:last-child { border-right: 0; }
a.strip-cell:hover { background: var(--surface-2); text-decoration: none; }
.strip-cell.active { background: var(--surface-2); box-shadow: inset 0 -3px 0 var(--mint); }
.strip-ic {
  grid-row: span 2; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
  background: var(--surface-2); border: 1px solid var(--line); color: var(--ink-2);
}
.cicon { display: block; transition: transform .2s ease; }
a.strip-cell:hover .cicon { transform: translateY(-2px) scale(1.08); }
.strip-ic.alive { background: var(--amber-tint); border-color: #f1d9a9; }
.strip-ic.alive .cicon { animation: nudge 2.6s ease-in-out infinite; }
.strip-ic.dim .cicon { filter: grayscale(1); opacity: 0.55; }
@keyframes nudge { 0%, 70%, 100% { transform: rotate(0); } 76% { transform: rotate(-10deg); } 84% { transform: rotate(8deg); } 92% { transform: rotate(-4deg); } }
@media (prefers-reduced-motion: reduce) { .strip-ic.alive .cicon { animation: none; } }
.strip-label { font-size: 0.8rem; color: var(--muted); align-self: end; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.strip-value { font-family: var(--mono); font-size: 1.45rem; font-weight: 500; line-height: 1.2; align-self: start; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.strip-value.text { font-family: inherit; font-size: 0.98rem; font-weight: 600; padding-top: 3px; display: flex; align-items: center; gap: 6px; }
.strip.compact .strip-cell { padding: 11px 14px; }
.strip.compact .strip-ic { width: 38px; height: 38px; border-radius: 10px; }
.strip.compact .strip-value { font-size: 1.15rem; }
.tone-red { --tint: var(--red-tint); --tone: var(--red); }
.tone-amber { --tint: var(--amber-tint); --tone: var(--amber); }
.tone-blue { --tint: var(--blue-tint); --tone: var(--blue); }
.tone-green { --tint: var(--pine-tint); --tone: var(--pine); }
.tone-grey { --tint: var(--grey-tint); --tone: var(--ink-2); }
.strip-value.hot { color: var(--red); }
@media (max-width: 1100px) { .strip { --cols: 2 !important; } .strip-cell:nth-child(2n) { border-right: 0; } .strip-cell { border-bottom: 1px solid var(--line); } }
.section-label { font-size: 0.78rem; font-weight: 600; color: var(--muted); margin: 4px 0 8px; display: flex; align-items: center; gap: 6px; }

/* ---------- panels (กล่องตารางมีหัว) ---------- */
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; margin-bottom: 16px; }
.grid-2 > .panel { margin-bottom: 0; }
.panel-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  padding: 11px 16px; border-bottom: 1px solid var(--line); background: var(--surface-2);
}
.panel-head h2 { font-size: 0.95rem; display: flex; align-items: center; gap: 8px; }
.panel-head h2 .ic { color: var(--pine); }
.panel-head .count { font-family: var(--mono); font-size: 0.78rem; color: var(--muted); font-weight: 400; }
.panel-foot { padding: 10px 16px; border-top: 1px solid var(--line); background: var(--surface-2); font-size: 0.82rem; color: var(--muted); display: flex; gap: 14px; flex-wrap: wrap; }
.panel-foot b { color: var(--ink); font-weight: 600; font-family: var(--mono); }

.grid-table th, .grid-table td { border-right: 1px solid var(--line); }
.grid-table th:last-child, .grid-table td:last-child { border-right: 0; }
.grid-table th { position: sticky; top: 0; z-index: 1; }
.grid-table td.center, .grid-table th.center { text-align: center; }
.grid-table td.shrink, .grid-table th.shrink { width: 1%; white-space: nowrap; }
.grid-table .empty-row td { text-align: center; padding: 30px 16px; color: var(--muted); border-right: 0; }
.grid-table .empty-row:hover { background: none; }
.empty-row .ic { display: block; margin: 0 auto 8px; color: var(--line-2); }
.empty-row strong { display: block; color: var(--ink-2); font-weight: 600; margin-bottom: 2px; }
.truncate { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.grid-table td.fill { width: 100%; max-width: 0; }
.zero { color: var(--line-2); }
.mini-bar { height: 6px; min-width: 80px; background: var(--grey-tint); border-radius: 3px; overflow: hidden; }
.mini-bar span { display: block; height: 100%; background: var(--pine); border-radius: 3px; }
.state { display: inline-flex; align-items: center; gap: 6px; font-size: 0.85rem; font-weight: 500; white-space: nowrap; }
.state.ok { color: var(--pine); }
.state.bad { color: var(--red); }
.state.off { color: var(--muted); }
.state.warn { color: var(--amber); }
.dot.wait { background: var(--amber); animation: blink 1.4s ease-in-out infinite; }
@keyframes blink { 50% { opacity: 0.3; } }
.ai-cell { display: flex; align-items: center; gap: 6px; }
.icon-btn.sm { width: 26px; height: 26px; border: 1px solid var(--line-2); background: var(--surface); }
.icon-btn.del:hover { color: var(--red); border-color: #e3b1ab; background: var(--red-tint); }
.icon-btn.del:hover .cicon, button.danger:hover .cicon { transform: translateY(-1px) scale(1.1); }
.bulk-bar { display: flex; align-items: center; gap: 10px; padding: 8px 16px; background: var(--red-tint); border-bottom: 1px solid #f1c5bf; font-size: 0.88rem; }
.bulk-bar[hidden] { display: none; }
.bulk-bar span { margin-right: auto; }
.grid-table input[type="checkbox"] { width: 16px; height: 16px; padding: 0; accent-color: var(--pine); cursor: pointer; }
.delete-zone { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--line); }

/* ---------- หลอดโควตา ---------- */
.qbar { display: block; height: 8px; min-width: 120px; border-radius: 4px; background: var(--grey-tint); overflow: hidden; }
.qbar span { display: block; height: 100%; border-radius: 4px; background: #12a150; transition: width .4s ease; }
.qbar.mid span { background: #d9a400; }
.qbar.high span { background: #e8590c; }
.qbar.full span { background: var(--red); width: 100% !important; }
.quota-table .qbar { margin-bottom: 3px; }
.quota-table tr.is-current td { background: #f6fbf8; }
.limits-table { margin-top: 4px; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.limits-table td, .limits-table th { padding: 6px 10px; }
.limits-table input { width: 90px; padding: 4px 8px; }
.quota-mini {
  display: block; margin: 0 4px 12px; padding: 10px 12px; border-radius: var(--r-lg);
  background: var(--surface); border: 1px solid var(--line); color: var(--ink);
}
.quota-mini:hover { text-decoration: none; border-color: var(--line-2); }
.quota-mini-head { display: flex; justify-content: space-between; align-items: baseline; font-size: 0.78rem; color: var(--muted); margin-bottom: 6px; }
.quota-mini-head b { font-family: var(--mono); color: var(--ink); font-size: 0.85rem; font-weight: 500; }
.quota-mini .qbar { min-width: 0; height: 6px; }
.quota-mini-foot { display: block; margin-top: 5px; font-size: 0.72rem; color: var(--muted); }

/* ---------- toolbar / checklist ---------- */
.toolbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; padding: 10px 16px; border-bottom: 1px solid var(--line); }
.toolbar .search { position: relative; flex: 1; min-width: 220px; }
.toolbar .search .ic { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--muted); }
.toolbar .search input { padding-left: 34px; }
.toolbar select { width: auto; min-width: 170px; }
.checklist td:first-child { width: 44px; text-align: center; }
.checklist .done { color: var(--pine); }
.checklist .todo { color: var(--line-2); }
.checklist tr.is-done .task { color: var(--muted); text-decoration: line-through; }
.progress { font-family: var(--mono); font-size: 0.8rem; color: var(--muted); }

/* ---------- หน้าเข้าสู่ระบบ ----------
   จอแคบ: แถบเขียวอ่อน + การ์ดฟอร์ม มาสคอตโผล่หลังการ์ด
   จอกว้าง (>= 1000px): ซ้ายฟอร์มบนพื้นขาว ขวาเป็นแผงสีแบรนด์ลอยเป็นกรอบมน มีหัวข้อ ตัวอย่างหน้ารออนุมัติ เหรียญ และมาสคอต */
.lgn { --lg-top: clamp(36px, 8vh, 96px); --lg-band: #d6f2e4; min-height: 100vh; min-height: 100svh; background: var(--paper); }
[data-theme="dark"] .lgn { --lg-band: #15291f; }
.lg-side {
  position: relative; isolation: isolate; overflow-x: clip; min-height: 100vh; min-height: 100svh;
  display: grid; grid-template-rows: auto 1fr auto;
}
.lg-side::before {
  content: ""; position: absolute; inset: 0 0 auto 0; z-index: -1;
  height: calc(var(--lg-top) + 318px); background: var(--lg-band);
}
.lg-top { padding: 26px clamp(20px, 4vw, 44px) 0; }
/* โลโก้ไฟล์เดิมมีมาสคอตติดอยู่ทางซ้าย: ครอบให้เห็นแต่ตัวอักษร เพราะมาสคอตตัวใหญ่แสดงแยกอยู่แล้ว */
.lg-logo { --w: 148px; display: block; width: var(--w); height: calc(var(--w) * .272); overflow: hidden; }
.lg-logo img { width: calc(var(--w) * 1.306); height: auto; max-width: none; margin-left: calc(var(--w) * -.306); }
.lg-main { display: flex; justify-content: center; padding: var(--lg-top) 20px 32px; }
.lg-stage { position: relative; width: 100%; max-width: 408px; padding-top: 150px; }
.lg-mascot {
  position: absolute; top: 0; left: 50%; width: 168px; height: 168px; margin-left: -84px; z-index: 0;
  animation: lg-bob 4.2s ease-in-out infinite;
}
@keyframes lg-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes lg-float { 0%, 100% { transform: translateY(0) rotate(var(--r, 0deg)); } 50% { transform: translateY(-8px) rotate(calc(var(--r, 0deg) + 4deg)); } }
@keyframes lg-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .lg-mascot, .lg-show-mascot, .coin, .lg-card, .lg-show-in { animation: none !important; }
}

.lg-card {
  position: relative; z-index: 1; padding: 30px 30px 28px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 18px;
  box-shadow: 0 1px 2px rgba(28, 27, 25, .05), 0 22px 44px -22px rgba(28, 27, 25, .28);
  animation: lg-rise .45s var(--ease, ease-out) both;
}
[data-theme="dark"] .lg-card { box-shadow: 0 22px 44px -22px rgba(0, 0, 0, .75); }
.lg-hello { margin: 0 0 6px; font-size: .84rem; font-weight: 600; color: var(--pine); }
.lg-hello[hidden] { display: none; }
.lg-card h1 { font-size: 1.7rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.25; }
.lg-sub { margin: 4px 0 24px; color: var(--muted); font-size: .94rem; }

.lg-alert {
  display: flex; gap: 10px; align-items: flex-start; margin: 0 0 16px; padding: 10px 12px;
  border-radius: 10px; border: 1px solid #f1c5bf; background: var(--red-tint); color: #8a1c13; font-size: .9rem;
}
.lg-alert .ic { margin-top: 3px; color: var(--red); }
[data-theme="dark"] .lg-alert { color: #ffb9ae; border-color: #5a2a24; }

.lg-form { display: grid; gap: 16px; }
.lg-field { display: grid; gap: 7px; font-size: .88rem; font-weight: 600; color: var(--ink-2); }
.lg-box { position: relative; display: block; }
.lgn .lg-form input {
  width: 100%; height: 50px; padding: 0 15px; border: 1px solid var(--line-2); border-radius: 12px;
  background: var(--surface-2); color: var(--ink); font: inherit; font-size: 1.02rem; font-weight: 400; box-shadow: none;
  transition: border-color .15s, box-shadow .15s, background-color .15s;
}
.lgn .lg-form input:hover { border-color: var(--muted); }
.lgn .lg-form input:focus { outline: none; border-color: var(--pine); background: var(--surface); box-shadow: var(--focus); }
.lgn .lg-form input#password { padding-right: 70px; }
.lgn .lg-reveal {
  position: absolute; right: 7px; top: 50%; transform: translateY(-50%); height: 34px; padding: 0 10px;
  border: 0; border-radius: 8px; background: transparent; box-shadow: none; cursor: pointer;
  font: inherit; font-size: .86rem; font-weight: 600; color: var(--pine);
}
.lgn .lg-reveal:hover { background: var(--pine-tint); }
.lgn .lg-reveal:focus-visible { outline: none; box-shadow: var(--focus); }
.lg-caps { margin: -6px 0 0; display: flex; align-items: center; gap: 6px; font-size: .82rem; color: var(--amber); }
.lg-caps[hidden] { display: none; }
.lgn .lg-submit {
  margin-top: 6px; width: 100%; height: 52px; border: 0; border-radius: 12px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--pine); color: #fff; font: inherit; font-size: 1.05rem; font-weight: 650; box-shadow: 0 8px 18px -10px rgba(8, 102, 63, .7);
  transition: background .15s, transform .12s, box-shadow .15s;
}
.lgn .lg-submit svg { transition: transform .15s; }
.lgn .lg-submit:hover { background: var(--pine-2); box-shadow: 0 12px 22px -12px rgba(8, 102, 63, .8); }
.lgn .lg-submit:hover svg { transform: translateX(3px); }
.lgn .lg-submit:active { transform: translateY(1px); }
.lgn .lg-submit:focus-visible { outline: none; box-shadow: var(--focus); }
.lgn .lg-submit:disabled { opacity: .7; cursor: progress; }
.lgn .lg-submit:disabled svg { display: none; }
[data-theme="dark"] .lgn .lg-submit { background: #178a5d; box-shadow: none; }
[data-theme="dark"] .lgn .lg-submit:hover { background: #1c9d6a; }
.lg-help { margin: 18px 0 0; text-align: center; font-size: .86rem; color: var(--muted); }
.lg-foot { padding: 18px 24px 26px; text-align: center; font-size: .8rem; color: var(--muted); }

@media (max-width: 480px) {
  .lgn { --lg-top: 28px; }
  .lg-top { padding-top: 20px; }
  .lg-logo { --w: 128px; }
  .lg-main { padding-inline: 16px; }
  .lg-stage { padding-top: 122px; }
  .lg-mascot { width: 148px; height: 148px; margin-left: -74px; }
  .lg-card { padding: 24px 20px 22px; border-radius: 16px; }
  .lg-card h1 { font-size: 1.5rem; }
  .lg-form { gap: 14px; }
  .lgn .lg-form input { height: 48px; }
  .lgn .lg-submit { height: 50px; }
}

/* ---- จอกว้าง: ฟอร์มซ้าย + แผงสีแบรนด์ขวา ---- */
.lg-show { display: none; }
@media (min-width: 1000px) {
  .lgn { display: grid; grid-template-columns: minmax(440px, 5fr) 6fr; gap: 0; padding: 14px; background: var(--surface); }
  .lg-side { min-height: calc(100vh - 28px); min-height: calc(100svh - 28px); background: var(--surface); }
  .lg-side::before { display: none; }
  .lg-top { padding: 30px clamp(30px, 4.4vw, 72px) 0; }
  .lg-logo { --w: 170px; }
  .lg-main { padding: 28px clamp(30px, 4.4vw, 72px); align-items: center; justify-content: center; }
  .lg-stage { max-width: 392px; padding-top: 0; }
  .lg-mascot { display: none; }
  .lg-card { padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; }
  .lg-hello { font-size: .9rem; margin-bottom: 10px; }
  .lg-card h1 { font-size: 2.35rem; letter-spacing: -.03em; }
  .lg-sub { margin: 8px 0 32px; font-size: 1.04rem; }
  .lg-form { gap: 18px; }
  .lg-help { text-align: left; margin-top: 24px; }
  .lg-foot { padding: 0 clamp(30px, 4.4vw, 72px) 26px; }

  .lg-show {
    position: relative; overflow: hidden; isolation: isolate; display: grid; place-items: center;
    padding: 56px clamp(40px, 5vw, 92px); border-radius: 30px; color: #04281a;
    background:
      radial-gradient(760px 460px at 8% -6%, rgba(255, 255, 255, .42), transparent 62%),
      radial-gradient(circle at 80% 84%, transparent 0 210px, rgba(255, 255, 255, .26) 210px 211px, transparent 211px 330px, rgba(255, 255, 255, .2) 330px 331px, transparent 331px 470px, rgba(255, 255, 255, .15) 470px 471px, transparent 471px),
      linear-gradient(150deg, #22cdb4 0%, #2fdc9d 46%, #59e98c 100%);
  }
  [data-theme="dark"] .lg-show {
    color: #e6fff2;
    background:
      radial-gradient(760px 460px at 8% -6%, rgba(56, 226, 145, .16), transparent 62%),
      radial-gradient(circle at 80% 84%, transparent 0 210px, rgba(56, 226, 145, .2) 210px 211px, transparent 211px 330px, rgba(56, 226, 145, .14) 330px 331px, transparent 331px 470px, rgba(56, 226, 145, .1) 470px 471px, transparent 471px),
      linear-gradient(150deg, #0c2f26 0%, #0e3a2a 55%, #124a31 100%);
  }
  .lg-show-in { position: relative; z-index: 1; width: min(640px, 100%); animation: lg-rise .6s .08s var(--ease, ease-out) both; }
  .lg-show h2 { margin: 0; color: inherit; font-size: clamp(2.3rem, 3.3vw, 3.5rem); font-weight: 700; line-height: 1.18; letter-spacing: -.025em; }
  .lg-show-sub { margin: 16px 0 0; max-width: 31em; font-size: 1.1rem; line-height: 1.7; opacity: .84; }
  .lg-demo { position: relative; margin-top: 46px; padding: 22px 0 26px; }
  .lg-show-mascot {
    position: absolute; right: -44px; bottom: -40px; width: 236px; height: 236px; z-index: 3;
    animation: lg-bob 4.2s ease-in-out infinite;
    filter: drop-shadow(0 18px 20px rgba(3, 58, 36, .28));
  }
}
@media (min-width: 1000px) and (max-width: 1239px) {
  .lg-show-mascot { width: 168px; height: 168px; right: -24px; bottom: -30px; }
  .coin.c2, .coin.c4 { display: none; }
}
/* โน้ตบุ๊กจอเตี้ย: บีบแผงขวาให้พอดีหนึ่งจอ ไม่ต้องเลื่อน */
@media (min-width: 1000px) and (max-height: 780px) {
  .lg-show { padding-block: 26px; }
  .lg-show h2 { font-size: clamp(2rem, 2.7vw, 2.6rem); }
  .lg-show-sub { margin-top: 10px; font-size: 1rem; line-height: 1.55; }
  .lg-demo { margin-top: 24px; padding: 18px 0 20px; }
  .demo-card { padding: 16px 16px 14px; font-size: .92rem; }
  .demo-msg { margin-top: 10px; padding: 8px 12px; }
  .demo-actions { margin-top: 12px; }
  .lg-show-mascot { width: 176px; height: 176px; bottom: -26px; }
  .coin.c1 { --s: 70px; }
  .lg-top { padding-top: 22px; }
  .lg-main { padding-block: 10px; }
  .lg-hello { margin-bottom: 6px; }
  .lg-card h1 { font-size: 2rem; }
  .lg-sub { margin: 4px 0 20px; font-size: 1rem; }
  .lg-form { gap: 14px; }
  .lgn .lg-form input { height: 46px; }
  .lgn .lg-submit { height: 48px; }
  .lg-help { margin-top: 16px; }
  .lg-foot { padding-bottom: 16px; }
}
@media (min-width: 1000px) and (max-height: 640px) {
  .lg-show-sub { display: none; }
  .lg-demo { margin-top: 20px; }
}

/* เหรียญลอยเป็นของตกแต่ง (ธีมเดียวกับเหรียญในมือมาสคอต) */
.coin {
  position: absolute; z-index: 0; width: var(--s); height: var(--s); border-radius: 50%;
  display: grid; place-items: center; font-style: normal; font-weight: 800; line-height: 1;
  font-size: calc(var(--s) * .52); color: #a35a05; text-shadow: 0 1px 0 rgba(255, 255, 255, .55);
  background: radial-gradient(circle at 32% 26%, #fff6c4 0 9%, #ffdc66 34%, #f4b32c 66%, #dc8c14 100%);
  box-shadow:
    inset 0 0 0 calc(var(--s) * .055) rgba(255, 246, 196, .95),
    inset 0 0 0 calc(var(--s) * .1) rgba(184, 108, 8, .32),
    0 calc(var(--s) * .2) calc(var(--s) * .32) rgba(3, 58, 36, .28);
  --r: 0deg; transform: rotate(var(--r));
  animation: lg-float var(--d, 6s) ease-in-out infinite;
}
.coin.c1 { --s: 92px; --r: 14deg; --d: 7s; top: 7%; right: 6%; }
.coin.c2 { --s: 46px; --r: -12deg; --d: 5.4s; top: 36%; right: 3.5%; }
.coin.c3 { --s: 30px; --r: 20deg; --d: 6.2s; top: 15%; right: 29%; }
.coin.c4 { --s: 62px; --r: -18deg; --d: 6.8s; bottom: 9%; left: 5%; }
.coin.c5 { --s: 26px; --r: 8deg; --d: 5.8s; bottom: 21%; left: 21%; }
[data-theme="dark"] .coin { filter: saturate(.85) brightness(.92); }

/* ตัวอย่างหน้า "รออนุมัติ" (ภาพประกอบ ไม่ใช่ข้อมูลจริง) */
.demo-card {
  position: relative; z-index: 1; width: min(520px, 100%); padding: 20px 20px 18px; font-size: .96rem; line-height: 1.55;
  background: var(--surface); color: var(--ink); border-radius: 20px;
  box-shadow: 0 2px 4px rgba(3, 58, 36, .08), 0 34px 60px -26px rgba(3, 58, 36, .55);
}
[data-theme="dark"] .demo-card { box-shadow: 0 34px 60px -26px rgba(0, 0, 0, .7); }
.demo-head { display: flex; align-items: center; gap: 11px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.demo-av { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--pine-tint); color: var(--pine); font-weight: 700; font-size: .92rem; }
.demo-head strong { font-weight: 650; }
.demo-pill { margin-left: auto; padding: 2px 11px; border-radius: 99px; background: var(--amber-tint); color: var(--amber); font-size: .8rem; font-weight: 600; }
.demo-msg { margin-top: 14px; padding: 10px 14px; border-radius: 14px; }
.demo-msg.in { max-width: 88%; background: var(--grey-tint); border-top-left-radius: 4px; }
.demo-msg.ai { max-width: 92%; margin-left: auto; background: var(--pine-tint); border: 1px solid var(--ring); border-top-right-radius: 4px; }
.demo-who { display: block; margin-bottom: 1px; font-size: .76rem; font-weight: 600; color: var(--muted); }
.demo-msg.ai .demo-who { color: var(--pine); }
.demo-actions { display: flex; gap: 9px; margin-top: 16px; }
.demo-btn { padding: 7px 16px; border: 1px solid var(--line-2); border-radius: 10px; font-size: .9rem; font-weight: 600; }
.demo-btn.go { background: var(--pine); border-color: var(--pine); color: #fff; }
[data-theme="dark"] .demo-btn.go { background: #178a5d; border-color: #178a5d; }
.demo-chip {
  position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: 9px;
  padding: 8px 15px; border-radius: 99px; background: var(--surface); color: var(--ink); font-size: .88rem; font-weight: 600;
  box-shadow: 0 12px 26px -12px rgba(3, 58, 36, .55);
}
.demo-chip i { font-style: normal; padding: 0 9px; border-radius: 99px; background: var(--red-tint); color: var(--red); font-size: .76rem; }
.demo-chip .dot { width: 9px; height: 9px; border-radius: 50%; background: #06c755; box-shadow: 0 0 0 4px rgba(6, 199, 85, .18); }
.demo-chip.line { top: -8px; right: 30px; }
.demo-chip.ticket { left: 26px; bottom: 0; }

/* ---------- คู่มือตอบคำถาม ---------- */
.guide-answer { white-space: pre-wrap; color: var(--ink-2); font-size: 0.86rem; line-height: 1.55;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin-top: 3px; }
.kw-cell { min-width: 200px; max-width: 280px; white-space: normal; }
.kw { display: inline-block; max-width: 100%; white-space: normal; overflow-wrap: anywhere; font-size: 0.74rem; line-height: 1.5; padding: 1px 8px; border-radius: 10px; background: var(--grey-tint); color: var(--ink-2); margin: 3px 4px 0 0; }
.q-row td { vertical-align: middle; }
.guide-form textarea[name=answer] { min-height: 260px; font-size: 0.92rem; line-height: 1.6; }
.guide-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
@media (max-width: 1000px) { .guide-layout { grid-template-columns: 1fr; } }

/* ---------- popup ยืนยัน ---------- */
.cdialog {
  border: 0; padding: 0; border-radius: 14px; width: min(440px, calc(100vw - 32px)); max-height: calc(100vh - 32px);
  background: var(--surface); color: var(--ink); box-shadow: 0 24px 64px rgba(28, 27, 25, 0.28); overflow: hidden;
}
.cdialog::backdrop { background: rgba(28, 27, 25, 0.42); backdrop-filter: blur(2px); }
.cdialog[open] { animation: cd-pop .16s ease-out; }
.cdialog[open]::backdrop { animation: cd-fade .16s ease-out; }
@keyframes cd-pop { from { opacity: 0; transform: translateY(10px) scale(0.97); } }
@keyframes cd-fade { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .cdialog[open], .cdialog[open]::backdrop { animation: none; } }
.cd-body { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; padding: 22px 22px 18px; }
.cd-ic { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: var(--amber-tint); border: 1px solid #f1d9a9; }
.cdialog.danger .cd-ic { background: var(--red-tint); border-color: #f0c9c4; }
.cdialog.send .cd-ic { background: var(--pine-tint); border-color: #bfe9d3; }
.cd-title { margin: 3px 0 5px; font-size: 1.06rem; font-weight: 600; line-height: 1.4; word-break: break-word; }
.cd-msg { margin: 0; color: var(--ink-2); font-size: 0.9rem; line-height: 1.6; word-break: break-word; }
.cd-preview {
  grid-column: 1 / -1; white-space: pre-wrap; word-break: break-word; font-size: 0.86rem; line-height: 1.55;
  max-height: 220px; overflow: auto; padding: 10px 12px; background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 4px 10px 10px 10px;
}
.cdialog.wide { width: min(720px, calc(100vw - 32px)); }
.cdialog.wide .cd-body { padding: 24px 26px 20px; }
.cdialog.wide .cd-preview { max-height: min(58vh, 560px); font-size: 0.95rem; line-height: 1.65; padding: 14px 16px; }
.cd-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 22px; background: var(--surface-2); border-top: 1px solid var(--line); }
.cd-actions button { min-width: 96px; }
button.danger-solid { background: var(--red); color: #fff; border-color: #96200f; }
button.danger-solid:hover { background: #96200f; border-color: #96200f; }

/* ---------- โควตาแยกตามคีย์ ---------- */
.qkey { display: grid; grid-template-columns: 88px minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.qkey + .qkey { margin-top: 6px; }
.qkey .qbar { margin: 0; }
.qkey-state + .qkey-state { margin-top: 6px; }

/* ---------- popup ฟอร์ม (เพิ่ม/แก้ไขคู่มือ) ---------- */
.mdialog {
  border: 0; padding: 0; border-radius: 14px; width: min(760px, calc(100vw - 32px)); max-height: calc(100vh - 32px);
  background: var(--surface); color: var(--ink); box-shadow: 0 24px 64px rgba(28, 27, 25, 0.28); overflow: hidden;
}
.mdialog[open] { display: flex; flex-direction: column; animation: cd-pop .16s ease-out; }
.mdialog::backdrop { background: rgba(28, 27, 25, 0.42); backdrop-filter: blur(2px); }
.mdialog form { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.md-head { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.md-head h3 { margin: 0; font-size: 1.08rem; font-weight: 600; }
.md-ic { width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center; background: var(--pine-tint); border: 1px solid #bfe9d3; }
.md-body { padding: 18px 20px; overflow: auto; display: flex; flex-direction: column; gap: 14px; min-height: 0; }
.md-body textarea[name=answer] { min-height: 170px; font-size: 0.92rem; line-height: 1.6; }
.md-foot { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--line); background: var(--surface-2); }
.md-foot > span:first-child { margin-right: auto; }
.dropzone { border: 1.5px dashed var(--line-2); border-radius: 10px; padding: 10px; background: var(--surface-2); display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; transition: border-color .15s, background .15s; }
.dropzone.over { border-color: var(--pine); background: var(--pine-tint); }
.up-thumbs { display: contents; }
.up-thumb { position: relative; width: 104px; height: 78px; border-radius: 8px; overflow: hidden; border: 1px solid var(--line); background: var(--surface); }
.up-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.up-thumb.removed img { opacity: .3; filter: grayscale(1); }
.thumb-x { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(28, 27, 25, .72); color: #fff; font-size: 15px; line-height: 22px; padding: 0; display: grid; place-items: center; }
.thumb-x:hover { background: var(--red); }
.thumb-tag { position: absolute; left: 4px; bottom: 4px; font-size: 0.68rem; padding: 0 6px; border-radius: 99px; background: rgba(255, 255, 255, .92); color: var(--ink-2); }
.drop-add { flex: 1; min-width: 200px; min-height: 78px; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 8px 14px;
  border-radius: 8px; cursor: pointer; color: var(--ink-2); font-size: 0.86rem; font-weight: 400; text-align: left; }
.drop-add:hover { background: var(--surface); }
.drop-add[hidden] { display: none; }
.drop-add input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.guide-pics { display: flex; align-items: center; gap: 4px; }
.guide-pics img { width: 40px; height: 30px; object-fit: cover; border-radius: 4px; border: 1px solid var(--line); }
.guide-pics .more { font-size: 0.74rem; color: var(--muted); }
.reply-pics { display: flex; flex-wrap: wrap; gap: 8px; }
.pick-pic { position: relative; width: 96px; height: 72px; border-radius: 8px; overflow: hidden; border: 2px solid var(--pine); cursor: pointer; display: block; }
.pick-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pick-pic input { position: absolute; opacity: 0; pointer-events: none; }
.pick-mark { position: absolute; top: 4px; right: 4px; width: 20px; height: 20px; border-radius: 50%; background: var(--pine); color: #fff; display: grid; place-items: center; }
.pick-pic:has(input:not(:checked)) { border-color: var(--line-2); }
.pick-pic:has(input:not(:checked)) img { opacity: .35; filter: grayscale(1); }
.pick-pic:has(input:not(:checked)) .pick-mark { background: var(--surface); color: var(--muted); border: 1px solid var(--line-2); }
.pick-pic:has(input:focus-visible) { box-shadow: var(--focus); }

/* โลโก้แทนตัวอักษรในวงกลม (ผู้ใช้ / บัญชี Telegram) */
img.avatar.logo { object-fit: cover; background: #fff; border: 1px solid var(--line); padding: 0; flex-shrink: 0; }

/* ---------- หน้าแชท (แบบแอปแชท) ---------- */
.chat-panel .panel-head { flex-wrap: wrap; gap: 8px 16px; }
.chat-legend { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 0.82rem; color: var(--ink-2); }
.chat-legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -1px; margin-right: 3px; }
.lg-in { background: var(--surface); border: 1px solid var(--line-2); }
.lg-out { background: #d9f5e7; border: 1px solid #a9e3c5; }
.chatview {
  display: flex; flex-direction: column; gap: 2px; padding: 16px 20px 20px; max-height: 72vh; overflow-y: auto;
  background: #efece4 radial-gradient(rgba(28, 27, 25, .045) 1px, transparent 1px) 0 0 / 16px 16px;
}
.day-sep { display: flex; justify-content: center; margin: 14px 0 8px; position: sticky; top: 0; z-index: 1; }
.day-sep span { font-size: 0.76rem; font-weight: 500; color: var(--ink-2); background: rgba(255, 255, 255, .92); border: 1px solid var(--line);
  padding: 2px 12px; border-radius: 99px; box-shadow: 0 1px 2px rgba(0, 0, 0, .04); }
.cm { display: flex; align-items: flex-end; gap: 8px; max-width: min(720px, 82%); }
.cm.first { margin-top: 8px; }
.cm.in { align-self: flex-start; }
.cm.out { align-self: flex-end; flex-direction: row-reverse; }
.cm-av, .cm-av-gap { width: 30px; height: 30px; flex-shrink: 0; }
.cm-av { border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 600; font-size: 0.8rem; }
.cm-bubble {
  position: relative; min-width: 120px; padding: 6px 10px 5px; background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px; box-shadow: 0 1px 1px rgba(0, 0, 0, .04); word-break: break-word;
}
.cm.in.last .cm-bubble { border-bottom-left-radius: 4px; }
.cm.out .cm-bubble { background: #d9f5e7; border-color: #a9e3c5; }
.cm.out.last .cm-bubble { border-bottom-right-radius: 4px; }
.cm-name { font-size: 0.8rem; font-weight: 600; margin-bottom: 2px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cm.out .cm-name { color: var(--pine-2); }
.cm-user { font-weight: 400; color: var(--muted); }
.cm-badge { font-size: 0.68rem; font-weight: 500; padding: 0 6px; border-radius: 99px; background: rgba(11, 125, 82, .14); color: var(--pine-2); }
.cm-text { white-space: pre-wrap; font-size: 0.93rem; line-height: 1.5; }
.cm-text a { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; word-break: break-all; }
.cm-note { font-size: 0.84rem; font-style: italic; color: var(--muted); }
.cm-photo img { display: block; max-width: min(320px, 100%); max-height: 320px; border-radius: 8px; margin: 2px 0 4px; }
.cm-foot { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin-top: 2px; font-size: 0.7rem; color: var(--muted); }
.cm-id { font-family: var(--mono); opacity: 0; transition: opacity .15s; }
.cm-bubble:hover .cm-id { opacity: 1; }
.cm-wait { color: var(--amber); font-weight: 500; }
.cm-wait::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--amber); margin-right: 4px; vertical-align: 1px; }
.cm-bubble.sticker { background: transparent; border-style: dashed; box-shadow: none; }
@media (max-width: 640px) { .cm { max-width: 94%; } .chatview { padding: 12px; } }

/* ---------- เสียงแจ้งเตือน ---------- */
.sound-btn .off { display: none; }
.sound-btn.muted .on { display: none; }
.sound-btn.muted .off { display: inline; }
.sound-btn.muted { color: var(--muted); }
.sound-btn:not(.muted) { color: var(--pine); }
.sound-btn.blocked { position: relative; }
.sound-btn.blocked::after { content: ""; position: absolute; top: 5px; right: 5px; width: 7px; height: 7px; border-radius: 50%; background: var(--amber); }
.account-grid { align-items: start; }
.range { width: 100%; accent-color: var(--pine); padding: 0; border: 0; background: none; box-shadow: none; }
@media (max-width: 1000px) { .account-grid { grid-template-columns: 1fr; } }
.account-single { max-width: 480px; }

/* แถบบันทึกการตั้งค่า (ติดขอบล่างจอ) */
.save-bar {
  grid-column: 1 / -1; position: sticky; bottom: 12px; z-index: 5; display: flex; align-items: center; justify-content: flex-end; gap: 14px;
  padding: 10px 14px; background: rgba(255, 255, 255, .94); backdrop-filter: blur(6px); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: 0 8px 24px rgba(28, 27, 25, .1);
}
.save-bar button { min-width: 180px; }

/* =====================================================================
   โหมดมืด  (html[data-theme="dark"] ตั้งจากสคริปต์ใน <head>)
   ===================================================================== */
.logo-dark { display: none; }
[data-theme="dark"] .logo-light { display: none; }
[data-theme="dark"] .logo-dark { display: inline-block; }
.theme-btn .to-light { display: none; }
[data-theme="dark"] .theme-btn .to-dark { display: none; }
[data-theme="dark"] .theme-btn .to-light { display: inline; }
.theme-btn { color: var(--ink-2); }

[data-theme="dark"] {
  --paper: #121311;
  --paper-2: #191a18;
  --surface: #1c1e1b;
  --surface-2: #222420;
  --line: #31342e;
  --line-2: #454940;
  --ink: #ebeae4;
  --ink-2: #c6c4bb;
  --muted: #98958b;
  --pine: #35c08a;
  --pine-2: #2aa877;
  --pine-tint: #142a1f;
  --red: #f26b5b;
  --red-tint: #33191a;
  --amber: #e7a948;
  --amber-tint: #2f2513;
  --blue: #86a8ff;
  --blue-tint: #19213a;
  --grey-tint: #272924;
  --focus: 0 0 0 3px rgba(56, 226, 145, 0.28);
  color-scheme: dark;
}
[data-theme="dark"] ::selection { background: #1f5a3d; }
[data-theme="dark"] .nav-item:hover, [data-theme="dark"] .user-chip:hover,
[data-theme="dark"] .icon-btn:hover, [data-theme="dark"] .btn.ghost:hover, [data-theme="dark"] button.ghost:hover { background: rgba(255, 255, 255, 0.06); }
[data-theme="dark"] .nav-item.active { box-shadow: inset 3px 0 0 var(--mint), 0 1px 0 rgba(0, 0, 0, 0.3); }
[data-theme="dark"] .avatar { background: #393c35; }
[data-theme="dark"] .mobilebar { background: rgba(18, 19, 17, 0.92); }
[data-theme="dark"] .btn, [data-theme="dark"] button:where(:not(.toast-x, .icon-btn, .switch)) { box-shadow: none; }
[data-theme="dark"] .btn:hover, [data-theme="dark"] button:where(:not(.toast-x, .icon-btn, .switch)):hover { border-color: #5d6157; }
[data-theme="dark"] .btn.primary, [data-theme="dark"] button.primary { background: #e9e8e2; color: #141513; border-color: #e9e8e2; }
[data-theme="dark"] .btn.primary:hover, [data-theme="dark"] button.primary:hover { background: #d3d1c9; border-color: #d3d1c9; }
[data-theme="dark"] .btn.go, [data-theme="dark"] button.go { background: #178a5d; border-color: #127350; color: #fff; }
[data-theme="dark"] .btn.go:hover, [data-theme="dark"] button.go:hover { background: #1c9d6a; }
[data-theme="dark"] .btn.danger:hover, [data-theme="dark"] button.danger:hover { border-color: #6e2f28; }
[data-theme="dark"] input::placeholder, [data-theme="dark"] textarea::placeholder { color: #6d6a62; }
[data-theme="dark"] .switch .track { background: #4a4d45; }
[data-theme="dark"] .toast { background: #2b2d29; color: var(--ink); border: 1px solid var(--line-2); box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5); }
[data-theme="dark"] .toast.error { background: #7c2219; color: #fff; }
[data-theme="dark"] .note.error { color: #ffb9ae; }
[data-theme="dark"] .note.warn { color: #f2d08f; }
[data-theme="dark"] .step.current .step-num { color: #141513; }
[data-theme="dark"] .boxtab.active { background: #16271e; }
[data-theme="dark"] .boxtab.dev.active { background: #181f33; }
[data-theme="dark"] .msg.out { border-color: #24543b; }
[data-theme="dark"] .strip-ic.alive, [data-theme="dark"] .cd-ic { border-color: #5a4419; }
[data-theme="dark"] .bulk-bar { border-bottom-color: #5a2a24; }
[data-theme="dark"] .icon-btn.del:hover { border-color: #6e2f28; }
[data-theme="dark"] .quota-table tr.is-current td { background: #18261e; }
[data-theme="dark"] .cdialog.danger .cd-ic { border-color: #6e2f28; }
[data-theme="dark"] .cdialog.send .cd-ic, [data-theme="dark"] .md-ic { border-color: #24543b; }
[data-theme="dark"] .cdialog, [data-theme="dark"] .mdialog { box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6); border: 1px solid var(--line); }
[data-theme="dark"] .cdialog::backdrop, [data-theme="dark"] .mdialog::backdrop { background: rgba(0, 0, 0, 0.6); }
[data-theme="dark"] .thumb-tag { background: rgba(28, 30, 27, .92); }
[data-theme="dark"] .lg-out, [data-theme="dark"] .cm.out .cm-bubble { background: #173526; border-color: #25543c; }
[data-theme="dark"] .chatview { background: #151614 radial-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px) 0 0 / 16px 16px; }
[data-theme="dark"] .day-sep span { background: rgba(34, 36, 32, .94); }
[data-theme="dark"] .cm-badge { background: rgba(53, 192, 138, .16); color: var(--pine); }
[data-theme="dark"] .cm.out .cm-name { color: var(--pine); }

/* =====================================================================
   ปรับโฉม v2 — มิติและเงานุ่ม มุมโค้งมากขึ้น ตารางโปร่งขึ้น (ทับกฎด้านบน ไม่เปลี่ยนโครงสร้าง)
   ===================================================================== */
:root {
  --r: 8px;
  --r-lg: 14px;
  --shadow-sm: 0 1px 2px rgba(28, 27, 25, .05), 0 1px 1px rgba(28, 27, 25, .03);
  --shadow-md: 0 6px 18px rgba(28, 27, 25, .08), 0 2px 4px rgba(28, 27, 25, .04);
  --row-hover: #f5faf7;
  --ring: rgba(11, 125, 82, .16);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --glow: rgba(56, 226, 145, .11);
}
[data-theme="dark"] {
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-md: 0 8px 22px rgba(0, 0, 0, .45);
  --row-hover: #20271f;
  --ring: rgba(53, 192, 138, .2);
  --glow: rgba(56, 226, 145, .06);
}

html { font-size: 16.5px; scroll-behavior: smooth; }
* { scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
body {
  background: var(--paper) radial-gradient(900px 360px at 14% -90px, var(--glow), transparent 70%) no-repeat;
  background-attachment: fixed;
}
h1 { font-size: 1.6rem; font-weight: 700; letter-spacing: -.015em; }
h2 { font-weight: 650; }

/* ---------- เมนูข้าง ---------- */
.sidebar { padding: 20px 14px 14px; box-shadow: 1px 0 0 var(--line), 6px 0 24px rgba(28, 27, 25, .02); }
.nav { gap: 2px; }
.nav-label { font-weight: 600; letter-spacing: .05em; padding: 20px 12px 6px; }
.nav-item {
  position: relative; padding: 8px 12px; border-radius: 10px; border-color: transparent;
  transition: background .15s, color .15s, box-shadow .15s;
}
.nav-item.active { background: var(--surface); border-color: transparent; box-shadow: var(--shadow-sm); }
[data-theme="dark"] .nav-item.active { box-shadow: var(--shadow-sm); }
.nav-item.active::before {
  content: ""; position: absolute; left: 0; top: 9px; bottom: 9px; width: 3px; border-radius: 0 3px 3px 0; background: var(--mint);
}
.nav-badge { border-radius: 99px; padding: 0 8px; font-weight: 600; }
.quota-mini { box-shadow: var(--shadow-sm); border-radius: var(--r-lg); transition: border-color .15s, box-shadow .15s; }
.quota-mini:hover { box-shadow: var(--shadow-md); }
.sidebar-foot { padding-top: 14px; }
.user-chip { border-radius: 10px; }

/* ---------- เนื้อหา & หัวหน้า ---------- */
.content { max-width: 1600px; margin-inline: auto; padding: 32px 40px 72px; }
.page-head { border-bottom: 0; padding-bottom: 0; margin-bottom: 22px; align-items: center; }
.page-head .sub { font-size: .93rem; margin-top: 4px; }
/* เนื้อหาแสดงทันที (เดิมเฟดเข้า 0.4 วินาทีทุกครั้งที่เปลี่ยนหน้า ทำให้รู้สึกหน่วง) */
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* แถบโหลดด้านบน: ขึ้นทันทีที่กดลิงก์/ส่งฟอร์ม ให้รู้ว่าระบบรับคำสั่งแล้วระหว่างรอเซิร์ฟเวอร์ */
.navbar { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 100; background: var(--pine, #0b7d52); opacity: 0; pointer-events: none; }
body.navigating .navbar { opacity: 1; width: 85%; transition: width 6s cubic-bezier(.1, .7, .2, 1); }
body.navigating .content { opacity: .55; transition: opacity .2s .08s; }
body.navigating { cursor: progress; }
@media (max-width: 900px) { .content { padding: 22px 16px 60px; } }

/* ---------- การ์ด / กล่อง ---------- */
.card, .panel, .reply, .dticket { border-radius: var(--r-lg); box-shadow: var(--shadow-sm); }
.card { padding: 20px 22px; }
.card.empty { box-shadow: none; }
.panel-head { background: transparent; padding: 15px 20px; }
.panel-head h2 { font-size: 1rem; }
.panel-head h2 .ic { color: var(--pine); }
.panel-foot, .reply-head, .dt-foot, .tools { background: var(--surface-2); }
.boxtab { border-radius: var(--r-lg); box-shadow: var(--shadow-sm); transition: border-color .15s, box-shadow .15s, transform .15s var(--ease); }
.boxtab:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }

/* ---------- การ์ดตัวเลข (แยกเป็นใบ แทนแถบติดกัน) ---------- */
.strip { background: transparent; border: 0; box-shadow: none; overflow: visible; gap: 14px; border-radius: 0; }
.strip-cell, .strip-cell:last-child, .strip-cell:nth-child(2n) {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm);
  padding: 16px 18px; transition: transform .18s var(--ease), box-shadow .18s, border-color .18s;
}
a.strip-cell:hover { background: var(--surface); transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--line-2); }
.strip-cell.active { box-shadow: inset 0 -3px 0 var(--mint), var(--shadow-sm); }
.strip-ic {
  width: 46px; height: 46px; border-radius: 14px; border-color: transparent;
  background: linear-gradient(145deg, var(--pine-tint), var(--surface-2));
}
.strip-ic.alive { background: linear-gradient(145deg, var(--amber-tint), var(--surface-2)); }
.strip-label { font-size: .82rem; font-weight: 500; }
.strip-value { font-size: 1.65rem; font-weight: 600; letter-spacing: -.02em; }
.strip.compact .strip-cell { padding: 13px 16px; }
.strip.compact .strip-ic { width: 42px; height: 42px; border-radius: 12px; }
.strip.compact .strip-value { font-size: 1.35rem; }
@media (max-width: 1100px) { .strip { gap: 10px; } }
@media (max-width: 640px) {
  .strip-cell, .strip-cell:last-child, .strip-cell:nth-child(2n) { padding: 13px 14px; }
  .strip-label { white-space: normal; line-height: 1.3; }
}

/* ---------- ตาราง ---------- */
.grid-table th, .grid-table td { border-right: 0; }
th {
  background: var(--surface-2); font-size: .74rem; font-weight: 600; letter-spacing: .03em; color: var(--muted);
  padding: 11px 16px; border-bottom: 1px solid var(--line);
}
td { padding: 13px 16px; border-bottom: 1px solid var(--line); }
tbody tr { transition: background .12s; }
tbody tr:hover { background: var(--row-hover); }
td .title-link { font-weight: 600; transition: color .12s; }
td .title-link:hover { color: var(--pine); text-decoration: none; }
tr.dim td { color: var(--muted); }
tr.dim .title-link { color: var(--ink-2); font-weight: 500; }
.when { font-size: .78rem; }
.zero { color: var(--line-2); }

/* ---------- ป้ายสถานะ (แคปซูล) ---------- */
.tag { border-radius: 99px; padding: 1px 10px; font-weight: 600; font-size: .74rem; letter-spacing: .01em; }
a.tag { transition: filter .12s, border-color .12s; }
a.tag:hover { filter: brightness(.97); }
.grid-table .state { padding: 2px 11px 2px 9px; border-radius: 99px; background: var(--grey-tint); font-size: .8rem; font-weight: 600; }
.grid-table .state.ok { background: var(--pine-tint); }
.grid-table .state.bad { background: var(--red-tint); }
.grid-table .state.warn { background: var(--amber-tint); }
.grid-table .state.off { background: var(--grey-tint); }
.dot.live { box-shadow: 0 0 0 3px rgba(18, 161, 80, .18); }
.dot.off { box-shadow: 0 0 0 3px rgba(180, 35, 24, .14); }

/* ---------- ปุ่ม & ฟอร์ม ---------- */
.btn, button:where(:not(.toast-x, .icon-btn, .switch)) {
  border-radius: var(--r); padding: 7px 14px; border-color: var(--line-2);
  transition: background .15s, border-color .15s, box-shadow .15s, transform .08s;
}
.btn:active, button:where(:not(.toast-x, .icon-btn, .switch)):active { transform: translateY(1px); }
.btn.sm, button.sm { padding: 4px 10px; }
.btn.primary, button.primary { box-shadow: 0 1px 2px rgba(28, 27, 25, .28), inset 0 1px 0 rgba(255, 255, 255, .12); }
.btn.go, button.go { box-shadow: 0 1px 2px rgba(8, 102, 63, .35), inset 0 1px 0 rgba(255, 255, 255, .16); }
.icon-btn { border-radius: 9px; transition: background .12s, color .12s; }
input, textarea, select { border-radius: var(--r); padding: 8px 12px; border-color: var(--line-2); }
input:hover, textarea:hover, select:hover { border-color: #b9b3a4; }
[data-theme="dark"] input:hover, [data-theme="dark"] textarea:hover, [data-theme="dark"] select:hover { border-color: #5d6157; }
input:focus, textarea:focus, select:focus { box-shadow: 0 0 0 4px var(--ring); }
.check-row { padding: 12px 0; }

/* ---------- สวิตช์เปิด/ปิด ---------- */
.switch { gap: 9px; font-weight: 500; }
.switch .track { width: 38px; height: 22px; background: #cdc8bb; transition: background .2s var(--ease); }
.switch .track::after {
  top: 3px; left: 3px; width: 16px; height: 16px; transition: transform .22s var(--ease);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .28);
}
.switch.on .track::after { transform: translateX(16px); }
[data-theme="dark"] .switch.on .track { background: var(--pine); }
.switch:hover .track { filter: brightness(.96); }
.switch:focus-visible { outline: none; }
.switch:focus-visible .track { box-shadow: 0 0 0 4px var(--ring); }

/* ---------- หน้าแชทลูกค้า: ช่องค้นหา ตัวกรอง ไอคอนแชท ---------- */
.chat-cell { display: flex; align-items: center; gap: 12px; min-width: 0; }
.chat-av {
  width: 38px; height: 38px; border-radius: 12px; flex-shrink: 0; display: grid; place-items: center;
  color: #fff; font-weight: 700; font-size: .92rem; background: hsl(var(--h, 160) 42% 40%);
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .12);
}
tr.dim .chat-av { filter: grayscale(.75); opacity: .6; }
.chat-meta { min-width: 0; }
.seg { display: inline-flex; padding: 3px; gap: 2px; background: var(--grey-tint); border-radius: 11px; }
.seg button {
  border: 0; background: transparent; box-shadow: none; color: var(--muted); font-weight: 500;
  padding: 5px 13px; border-radius: 8px;
}
.seg button:hover { background: transparent; color: var(--ink); }
.seg button.on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); font-weight: 600; }
.seg button .n { font-family: var(--mono); font-size: .74rem; opacity: .65; margin-left: 5px; }
.toolbar { padding: 12px 20px; gap: 10px; }
.toolbar .search input { padding-left: 36px; border-radius: 10px; background: var(--surface-2); }
.toolbar .search input:focus { background: var(--surface); }
.no-match { text-align: center; padding: 34px 16px; color: var(--muted); font-size: .92rem; }
.no-match[hidden] { display: none; }
.no-match strong { display: block; color: var(--ink-2); margin-bottom: 2px; }
tr[hidden] { display: none; }

/* ---------- หน้า LINE: ปุ่มส่งข้อความทดสอบ ---------- */
.line-test { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--line); }
.line-test .hint { flex: 1; min-width: 220px; }

/* ---------- หน้า LINE: รายชื่อผู้อนุมัติ + รหัสเชื่อม ---------- */
.allow-box { margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--line); }
.allow-box h3 { margin: 0 0 4px; }
.allow-box .note { margin-top: 10px; }
.allow-box .list { margin-top: 8px; }
.pair-box {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 14px;
  padding: 14px 16px; background: var(--pine-tint); border: 1px solid var(--line); border-radius: var(--r-lg);
}
.pair-code { font-family: var(--mono); font-size: 2.1rem; font-weight: 500; letter-spacing: .28em; line-height: 1.3; color: var(--pine-2); user-select: all; }

/* ---------- หน้า สมอง AI ---------- */
.seg { flex-wrap: wrap; }
.seg a.seg-link { color: var(--muted); font-weight: 500; font-size: .88rem; padding: 5px 13px; border-radius: 8px; white-space: nowrap; }
.seg a.seg-link:hover { color: var(--ink); text-decoration: none; }
.seg a.seg-link.on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); font-weight: 600; }
.seg a.seg-link .n { font-family: var(--mono); font-size: .74rem; opacity: .65; margin-left: 5px; }
/* ตารางโน้ตของ AI */
.notes-tbl td { vertical-align: top; }
.notes-tbl td.note-main { min-width: 320px; max-width: 560px; }
.notes-tbl .bn-body { margin: 4px 0 0; color: var(--ink-2); font-size: .9rem; line-height: 1.6; white-space: pre-wrap; }
.notes-tbl .bn-evidence { margin: 6px 0 0; }
.notes-tbl tr.note-off td { opacity: .55; }
.notes-tbl tr.note-off td:last-child { opacity: 1; }
.notes-tbl tr.note-pin td:first-child { box-shadow: inset 3px 0 0 var(--mint); }
.notes-tbl .tagcol { max-width: 210px; }
.notes-tbl .tagcol .tag { display: block; width: fit-content; margin: 0 0 5px; }
.notes-tbl .tagcol .tag:last-child { margin-bottom: 0; }
.notes-tbl td:last-child .actions { flex-wrap: nowrap; gap: 6px; }
.bn-conf { font-size: .72rem; letter-spacing: .12em; color: var(--pine); white-space: nowrap; }
.check-inline { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: .92rem; font-weight: 500; color: var(--ink); }
.check-inline input, .kv td .check-inline input[type="checkbox"] { width: 16px; height: 16px; padding: 0; flex: 0 0 16px; accent-color: var(--pine); }
.panel-foot.foot-actions { justify-content: flex-end; background: var(--surface-2); }
.k-lesson { background: var(--pine-tint); color: var(--pine); }
.k-style { background: var(--blue-tint); color: var(--blue); }
.k-fact { background: var(--grey-tint); color: var(--ink-2); }
.k-pattern { background: var(--amber-tint); color: var(--amber); }
.k-warning { background: var(--red-tint); color: var(--red); }

/* ---------- ตารางตั้งค่า (ใช้ร่วมกัน) ---------- */
/* ตารางตั้งค่า: หัวข้อ | ค่า | คำอธิบาย (เส้นกริดทุกช่อง ช่องกรอกเรียงตรงกันทุกแถว) */
.kv { width: 100%; border-collapse: collapse; table-layout: fixed; }
.kv .kv-k { width: 215px; }
.kv .kv-d { width: 34%; }
.kv th, .kv td { padding: 13px 16px; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); vertical-align: top; text-align: left; }
.kv tr > :last-child { border-right: 0; }
.kv th { background: var(--surface-2); color: var(--ink); font-weight: 600; font-size: .9rem; white-space: normal; }
.kv td.desc { color: var(--muted); font-size: .84rem; line-height: 1.6; background: var(--surface-2); }
.kv td input, .kv td select, .kv td textarea { width: 100%; }
.kv td code { font-size: .82em; }
.sub-title { padding: 10px 16px; background: var(--surface-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: .86rem; font-weight: 600; color: var(--ink); }
.panel > .panel-foot { border-top: 1px solid var(--line); }
.form-actions { display: flex; gap: 16px; align-items: center; margin: 0 0 18px; }
.form-actions .note { flex: 1; margin: 0; }
.form-actions button { flex-shrink: 0; }
@media (max-width: 800px) {
  .kv, .kv tbody, .kv tr, .kv th, .kv td { display: block; width: auto; }
  .kv colgroup { display: none; }
  .kv th, .kv td { border-right: 0; border-bottom: 0; padding: 10px 14px; }
  .kv th { padding-bottom: 4px; background: transparent; }
  .kv td.desc { background: transparent; padding-top: 4px; border-bottom: 1px solid var(--line); }
  .form-actions { flex-direction: column; align-items: stretch; }
}

/* ---------- อื่นๆ ---------- */
.save-bar { border-radius: var(--r-lg); box-shadow: var(--shadow-md); }
.toast { border-radius: 12px; }
.cdialog, .mdialog { border-radius: 18px; }
.note { border-radius: 0 var(--r) var(--r) 0; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 99px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: var(--muted); background-clip: padding-box; border: 2px solid transparent; }
[data-theme="dark"] .save-bar { background: rgba(28, 30, 27, .94); box-shadow: 0 8px 24px rgba(0, 0, 0, .45); }
[data-theme="dark"] .qbar span { background: #22b066; }
[data-theme="dark"] img.cicon { filter: saturate(1.05) brightness(1.05); }
/* แถบล่าง sidebar: ชื่อผู้ใช้ + ปุ่มเสียง / ธีม / ออกจากระบบ */
.sidebar-foot { gap: 2px; }
.sidebar-foot .user-chip { flex: 1; min-width: 0; }
.sidebar-foot .user-meta small, .sidebar-foot .user-meta strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-foot .icon-btn { width: 28px; height: 28px; flex-shrink: 0; }

/* ---------- ทรัพยากรเครื่อง ---------- */
.resrows { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; padding: 16px 2px 4px; }
.resrow-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 6px; font-size: 0.9rem; }
.resrow-head b { font-family: var(--mono); font-weight: 600; white-space: nowrap; }
.resrow .qbar { margin: 0 0 5px; }
.qbar.warn span { background: #e8590c; }
.qbar.bad span { background: var(--red); }
.resmeta .facts { grid-template-columns: 150px 1fr; margin: 0; }
@media (max-width: 760px) { .resrows { grid-template-columns: 1fr; gap: 14px; } }

/* ฟอนต์หน้าทรัพยากรเครื่องให้ใหญ่อ่านง่ายขึ้น */
#resmon .resrows { gap: 24px; padding: 18px 2px 6px; }
#resmon .resrow-head { font-size: 1.02rem; margin-bottom: 8px; }
#resmon .resrow-head b { font-size: 1.1rem; }
#resmon .qbar { height: 10px; }
#resmon .resrow .small { font-size: 0.92rem; margin-top: 6px; }
#resmon .resmeta .facts { font-size: 1rem; grid-template-columns: 180px 1fr; gap: 12px 16px; }
#resmon .resmeta .facts dt { font-size: 0.98rem; }
#resmon .strip-label { font-size: 0.88rem; }
@media (max-width: 760px) { #resmon .resmeta .facts { grid-template-columns: 130px 1fr; } }

/* ---------- Log ระบบ ---------- */
.logbar { flex-wrap: wrap; gap: 10px 16px; }
.logtools { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.logview {
  font-family: inherit; font-size: 0.98rem; line-height: 1.7; max-height: 68vh; overflow-y: auto;
  background: #14160f; color: #eef0e8; border-radius: var(--r); padding: 14px 16px; margin: 4px 0 2px;
}
.logline { display: grid; grid-template-columns: auto 72px minmax(120px, auto) 1fr; gap: 12px; padding: 2px 0; white-space: pre-wrap; word-break: break-word; }
.logline > time { color: #9aa08c; font-variant-numeric: tabular-nums; }
.logline .lv { font-weight: 600; }
.logline .nm { color: #7fa7d4; }
.logline .lmsg { color: #f3f4ee; }
.lv-INFO .lv { color: #6fcf8e; }
.lv-WARNING .lv, .lv-WARNING .lmsg { color: #e6b24a; }
.lv-ERROR .lv, .lv-ERROR .lmsg, .lv-CRITICAL .lv, .lv-CRITICAL .lmsg { color: #f08a7a; }
.lv-DEBUG .lv, .lv-DEBUG .nm, .lv-DEBUG .lmsg { color: #8a8f7a; }
.lv-CRITICAL .lv { text-decoration: underline; }
@media (max-width: 760px) { .logline { grid-template-columns: auto auto 1fr; } .logline .nm { display: none; } }

/* =====================================================================
   โทนทางการ (ทั้งระบบ): ไอคอนเส้นสีเดียว · ตารางตัวเลขติดกัน · ลดความหวือหวา · เข้าถึงง่าย
   ===================================================================== */
a.strip-cell:hover, .boxtab:hover { transform: none; }

/* แถบตัวเลขสรุปทุกหน้า: เป็นกรอบเดียวมีเส้นแบ่งช่อง (แบบตาราง) ไม่ใช่การ์ดแยกใบ · ยังมีรูปไอคอนสีประจำช่อง */
.strip { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); overflow: hidden; gap: 0; margin-bottom: 18px; }
.strip-cell, .strip-cell:last-child, .strip-cell:nth-child(2n) {
  background: transparent; border: 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); border-radius: 0; box-shadow: none;
  margin: 0 -1px -1px 0; padding: 14px 20px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 14px; align-items: center; transform: none;
}
a.strip-cell:hover { background: var(--surface-2); box-shadow: none; transform: none; border-color: var(--line); }
.strip-cell.active, a.strip-cell.active { background: var(--surface-2); box-shadow: inset 0 -3px 0 var(--pine); }
.strip-ic { grid-row: span 2; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); }
.strip-label { font-size: .84rem; font-weight: 500; color: var(--muted); align-self: end; }
.strip-value { align-self: start; }
.strip-value { font-family: inherit; font-size: 1.65rem; font-weight: 650; letter-spacing: -.02em; line-height: 1.25; font-variant-numeric: tabular-nums; }
.strip-value.text { font-size: 1.02rem; font-weight: 600; padding-top: 6px; letter-spacing: 0; }
.strip.compact .strip-cell { padding: 11px 20px; }
.strip.compact .strip-value { font-size: 1.3rem; }
@media (max-width: 1100px) { .strip { --cols: 3 !important; } }

/* เมนูข้าง: ไอคอนเส้นสีเดียว */
.nav-item { font-weight: 500; gap: 11px; }
.nav-item .ic { stroke-width: 1.7; }
.nav-item.active { font-weight: 650; }
.panel-head h2 .ic, .card-head h2 .ic { color: var(--ink-2); }
.panel-head h2 { display: flex; align-items: center; gap: 8px; }

/* เมนูข้างบนจอเตี้ย (โน้ตบุ๊ก): เลื่อนได้ และแถบผู้ใช้ (รูปประจำตัว ปุ่มเสียง/โหมดมืด/ออกจากระบบ) ติดขอบล่างเสมอ ไม่ถูกตัดหาย */
.sidebar { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.sidebar-foot { position: sticky; bottom: 0; z-index: 2; margin-top: auto; background: var(--paper-2); padding-bottom: 8px; }
@media (min-width: 901px) and (max-height: 840px) {
  .sidebar { padding-top: 12px; }
  .sidebar .brand { padding: 2px 8px 8px; gap: 2px; }
  .sidebar .brand-logo { width: 164px; }
  .sidebar .brand-sub { display: none; }
  .nav { gap: 0; }
  .nav-item { padding-top: 5px; padding-bottom: 5px; }
  .nav-label { padding: 10px 12px 4px; }
  .quota-mini { padding: 8px 10px; margin-bottom: 6px; }
  .quota-mini-foot { display: none; }
}

/* ปุ่มข้ามไปเนื้อหา (คีย์บอร์ด/โปรแกรมอ่านหน้าจอ) */
.skip-link { position: absolute; left: 12px; top: -64px; z-index: 200; padding: 10px 16px; background: #1c1b19; color: #fff; border-radius: 8px; font-weight: 600; transition: top .15s; }
.skip-link:focus { top: 12px; text-decoration: none; }
.content:focus { outline: none; }
a:focus-visible, summary:focus-visible, .kpi-cell:focus-visible { outline: 2px solid var(--pine); outline-offset: 2px; border-radius: 4px; }

/* สรุปงาน: ตารางตัวเลข 2 แถว (ตอนนี้ / วันนี้) */
.kpi-panel { margin-bottom: 18px; }
.kpi { display: grid; grid-template-columns: 96px repeat(4, minmax(0, 1fr)); }
.kpi > * { border-right: 1px solid var(--line); }
.kpi > :nth-child(5n) { border-right: 0; }
.kpi > :nth-child(n+6) { border-top: 1px solid var(--line); }
.kpi-row-label { display: flex; align-items: center; padding: 0 16px; background: var(--surface-2); color: var(--muted); font-size: .8rem; font-weight: 600; letter-spacing: .04em; }
.kpi-cell { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; align-items: center; padding: 14px 20px; color: var(--ink); min-width: 0; transition: background .12s; }
.kpi-ic { grid-row: span 2; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); }
.kpi-ic.alive { background: var(--amber-tint); border-color: #f1d9a9; }
.kpi-ic.dim .cicon { filter: grayscale(1); opacity: .55; }
.kpi > :nth-child(n+7) .kpi-ic { width: 36px; height: 36px; }
.kpi-label { align-self: end; }
.kpi-value { align-self: start; }
a.kpi-cell:hover { background: var(--surface-2); text-decoration: none; }
.kpi-label { font-size: .84rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi-value { font-size: 1.75rem; font-weight: 650; letter-spacing: -.02em; line-height: 1.25; font-variant-numeric: tabular-nums; }
.kpi-value.hot { color: var(--red); }
.kpi-value.text { display: flex; align-items: center; gap: 8px; font-size: 1.05rem; padding-top: 7px; letter-spacing: 0; }
.kpi > :nth-child(n+7) { padding-top: 11px; padding-bottom: 11px; }
.kpi > :nth-child(n+7) .kpi-value { font-size: 1.35rem; font-weight: 600; }

td.chat-cell { max-width: 280px; overflow: hidden; text-overflow: ellipsis; }

/* เริ่มต้นใช้งาน: แสดงเฉพาะข้อที่ยังไม่เสร็จ */
.setup-bar { margin-bottom: 18px; border-left: 3px solid var(--amber); }
.setup-head { display: flex; align-items: center; gap: 14px; padding: 12px 18px; }
.setup-head h2 { font-size: .98rem; }
.setup-head .count { margin-left: auto; }
.setup-progress { flex: 0 0 160px; height: 6px; border-radius: 99px; background: var(--grey-tint); overflow: hidden; }
.setup-progress span { display: block; height: 100%; background: var(--pine); border-radius: inherit; }
.setup-todo { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.setup-todo li { display: flex; align-items: center; gap: 12px; padding: 10px 18px; }
.setup-todo li + li { border-top: 1px solid var(--line); }
.setup-n { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--amber-tint); color: var(--amber); font-size: .78rem; font-weight: 700; flex-shrink: 0; }
.setup-t { flex: 1; min-width: 0; }

/* โควตา Gemini: สรุปบรรทัดเดียว กดขยายดูรายรุ่น */
.quota-fold summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px 18px; flex-wrap: wrap; transition: background .12s; }
.quota-fold summary::-webkit-details-marker { display: none; }
.quota-fold summary:hover { background: var(--surface-2); }
.quota-fold details[open] > summary { border-bottom: 1px solid var(--line); }
.quota-sum { flex: 1; display: flex; align-items: center; gap: 10px; font-size: .9rem; color: var(--ink-2); min-width: 220px; }
.quota-sum .qbar { width: 180px; flex: 0 0 180px; }
.quota-fold .chev { color: var(--muted); transition: transform .15s; display: grid; }
.quota-fold details[open] .chev { transform: rotate(90deg); }

@media (max-width: 1360px) { .grid-2.dash { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 1300px) { .resrows { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .resrows { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 900px) {
  .kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi > * { border-right: 0; }
  .kpi-row-label { grid-column: 1 / -1; padding: 8px 16px; border-top: 1px solid var(--line); }
  .kpi > :nth-child(1) { border-top: 0; }
  .kpi > :nth-child(n+6) { border-top: 0; }
  .kpi > :nth-child(6) { border-top: 1px solid var(--line); }
  .kpi > :nth-child(2), .kpi > :nth-child(4), .kpi > :nth-child(7), .kpi > :nth-child(9) { border-right: 1px solid var(--line); }
  .kpi-cell { padding: 10px 14px; column-gap: 10px; }
  .kpi-ic, .kpi > :nth-child(n+7) .kpi-ic { width: 36px; height: 36px; }
  .kpi-value { font-size: 1.4rem; }
  .kpi > :nth-child(n+7) .kpi-value { font-size: 1.25rem; }
  .setup-progress { flex-basis: 90px; }
  .quota-sum .qbar { width: 120px; flex-basis: 120px; }
}

/* =====================================================================
   มือถือ / แท็บเล็ตเล็ก
   - ช่องกรอก 16px (iPhone ไม่ซูมเอง) · ปุ่มและลิงก์ที่นิ้วกดสะดวก (>= 40px)
   - ตารางข้อมูลเปลี่ยนเป็นการ์ดต่อแถว · แถบสรุปตัวเลขเลื่อนข้างได้ · เมนูเป็นลิ้นชัก
   - เว้นขอบสำหรับติ่ง/แถบระบบของมือถือ (safe-area)
   ===================================================================== */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
a, button, input, select, textarea, label, summary { touch-action: manipulation; -webkit-tap-highlight-color: rgba(11, 125, 82, .14); }

@media (max-width: 900px) {
  /* ขอบจอ (ติ่ง iPhone / แถบล่าง) */
  .mobilebar { padding: calc(8px + env(safe-area-inset-top)) calc(12px + env(safe-area-inset-right)) 8px calc(12px + env(safe-area-inset-left)); gap: 6px; }
  .content { padding-left: calc(16px + env(safe-area-inset-left)); padding-right: calc(16px + env(safe-area-inset-right)); padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  .sidebar { width: min(86vw, 320px); overflow-y: auto; overscroll-behavior: contain;
    padding-top: calc(18px + env(safe-area-inset-top)); padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
  body.menu-open { overflow: hidden; }
  .shell { min-height: 100dvh; }

  /* ช่องกรอก 16px: iPhone จะไม่ซูมหน้าเองตอนแตะช่อง */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea, input.mono, textarea.mono { font-size: 16px; }
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select { min-height: 44px; }

  /* ขนาดจุดกด */
  .icon-btn { min-width: 44px; min-height: 44px; }
  .icon-btn.sm { min-width: 40px; min-height: 40px; }
  .sidebar-foot .icon-btn { width: 40px; height: 40px; }
  button:not(.icon-btn):not(.switch):not(.toast-x):not(.chip):not(.seg-link), .btn { min-height: 42px; }
  button.sm:not(.icon-btn), .btn.sm { min-height: 40px; padding-left: 14px; padding-right: 14px; }
  .nav-item { min-height: 46px; }
  .seg a.seg-link, .seg button { min-height: 40px; display: inline-flex; align-items: center; }
  a.tag { padding-top: 8px; padding-bottom: 8px; }
  a.title-link, td a:not(.btn):not(.tag), a.small { display: inline-block; padding-top: 7px; padding-bottom: 7px; }
  .crumb { display: inline-flex; align-items: center; min-height: 40px; }
  .switch { position: relative; }
  .switch::after { content: ""; position: absolute; inset: -9px -6px; }
  input[type="checkbox"] { width: 20px; height: 20px; }
  input[type="range"] { height: 32px; }
  .check-row, .check-inline { min-height: 44px; }
  .brand { min-height: 40px; justify-content: center; }

  /* หัวหน้า / หัวกล่อง */
  h1 { font-size: 1.4rem; }
  .page-head { flex-direction: column; align-items: stretch; gap: 12px; }
  .page-head .actions { width: 100%; }
  .page-head .actions > *, .page-head .actions form { flex: 1 1 auto; }
  .page-head .actions button, .page-head .actions .btn { width: 100%; justify-content: center; }
  .panel-head, .card-head { flex-wrap: wrap; gap: 8px 12px; }
  .panel-head form.row { flex-wrap: wrap !important; width: 100%; }
  .panel-head form.row input { min-width: 0 !important; flex: 1 1 160px; }
  .toolbar { padding: 10px 12px; }
  .toolbar select { width: 100%; }
  .grid-2 > *, .grid-2.wide-left > *, .stack > *, .row > * { min-width: 0; }
  .save-bar { bottom: calc(10px + env(safe-area-inset-bottom)); flex-wrap: wrap; justify-content: stretch; }
  .save-bar > span { flex: 1 1 100%; }
  .save-bar button { min-width: 0; flex: 1 1 100%; }
  .table-wrap table.keep-table { min-width: 100%; }
  .form-actions button { width: 100%; }
  /* ปุ่มบันทึกของฟอร์มยาว: ลอยเหนือแถบเมนูล่าง กดได้ทุกจุดที่เลื่อนอยู่ */
  .form-actions { position: sticky; bottom: calc(66px + env(safe-area-inset-bottom)); z-index: 6; padding: 10px; margin: 0 -4px 14px;
    background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 8px 24px rgba(28, 27, 25, .12); }
  .form-actions .note { display: none; }
  [data-theme="dark"] .form-actions { box-shadow: 0 8px 24px rgba(0, 0, 0, .45); }

  /* หน้าต่างยืนยัน/ฟอร์ม: เต็มความกว้าง ชิดล่างแบบ bottom sheet */
  .cdialog, .mdialog { width: calc(100vw - 20px); max-width: 560px; max-height: calc(100dvh - 24px); margin: auto auto calc(10px + env(safe-area-inset-bottom)); }
  .mdialog .md-body { max-height: calc(100dvh - 190px); overflow-y: auto; }
  .cd-actions, .md-foot { gap: 10px; padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
  .cd-actions button, .md-foot button { flex: 1; min-height: 48px; justify-content: center; }
  .cd-preview { max-height: 38dvh; }

  /* แจ้งเตือนมุมจอ -> เต็มความกว้างด้านล่าง */
  .toasts { left: calc(10px + env(safe-area-inset-left)); right: calc(10px + env(safe-area-inset-right)); bottom: calc(12px + env(safe-area-inset-bottom)); max-width: none; }
  .toast { font-size: .95rem; padding: 12px 12px 12px 14px; }
  .toast-x { padding: 8px; }

  /* log / กล่องข้อความ */
  .logview { max-height: 62dvh; font-size: .9rem; }
  .table-wrap { -webkit-overflow-scrolling: touch; }
}

/* แถบสรุปตัวเลข: แถวเลื่อนข้างได้ แทนการ์ดใหญ่ซ้อนกันหลายแถว (หน้าแรกของจอจะได้เห็นเนื้อหาเลย) */
@media (max-width: 640px) {
  .strip { display: flex !important; gap: 8px; overflow-x: auto; overflow-y: hidden; margin: 0 -16px 14px; padding: 2px 16px 8px;
    background: transparent; border: 0; border-radius: 0; box-shadow: none;
    scroll-snap-type: x proximity; scroll-padding: 0 16px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .strip::-webkit-scrollbar { display: none; }
  .strip-cell, .strip-cell:last-child, .strip-cell:nth-child(2n) {
    flex: 0 0 auto; min-width: 150px; scroll-snap-align: start; grid-template-columns: auto 1fr; gap: 0 10px; padding: 8px 14px 8px 10px; margin: 0;
    background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-sm); }
  .strip-cell.active, a.strip-cell.active { box-shadow: inset 0 -3px 0 var(--pine), var(--shadow-sm); }
  .strip-ic { width: 34px; height: 34px; border-radius: 10px; }
  .strip-ic .cicon { width: 22px; height: 22px; }
  .strip-label { white-space: nowrap; font-size: .78rem; align-self: end; }
  .strip-value { font-size: 1.35rem; }
  .strip-value.text { font-size: .95rem; }
  a.strip-cell:hover { transform: none; }
}

/* ตารางข้อมูล -> การ์ดต่อแถว (JS ใน base.html ใส่ .m-cards + ป้ายกำกับให้) */
@media (max-width: 700px) {
  .grid-table.m-cards, .grid-table.m-cards tbody { display: block; width: 100%; }
  .grid-table.m-cards thead { display: none; }
  .grid-table.m-cards tbody tr { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 13px 14px; border-bottom: 1px solid var(--line); }
  .grid-table.m-cards tbody tr:last-child { border-bottom: 0; }
  .grid-table.m-cards td, .grid-table.m-cards td.shrink, .grid-table.m-cards td.fill, .grid-table.m-cards td.center {
    display: block; width: auto !important; max-width: 100%; padding: 0; border: 0; text-align: left; white-space: normal; }
  .grid-table.m-cards td.m-main { flex: 1 1 100%; }
  .grid-table.m-cards td[data-label] { display: inline-flex; align-items: center; gap: 6px; }
  .grid-table.m-cards td[data-label]::before { content: attr(data-label); color: var(--muted); font-size: .76rem; white-space: nowrap; }
  .grid-table.m-cards td.m-hide, .grid-table.m-cards td.col-opt, .grid-table.m-cards td:empty { display: none; }
  .grid-table.m-cards tr.empty-row { display: block; text-align: center; }
  .grid-table.m-cards tr.empty-row td { display: block; padding: 22px 10px; }
  .grid-table.m-cards td .actions { flex-wrap: wrap; }
  .notes-tbl td.note-main { min-width: 0; max-width: 100%; }
  .notes-tbl .tagcol { max-width: 100%; }
  .notes-tbl .tagcol .tag { display: inline-flex; margin: 0 6px 4px 0; }
  .notes-tbl td:last-child .actions { flex-wrap: wrap; }
}

/* =====================================================================
   มือถือแบบแอป: แถบบน (ชื่อหน้า) + แถบเมนูล่าง + จัดลำดับเนื้อหาให้ปุ่มหลักอยู่ใกล้นิ้ว
   ===================================================================== */
.tabbar, .tools-sum { display: none; }
.mb-brand, .mb-title { display: none; }

@media (max-width: 900px) {
  /* แถบบน: โลโก้ + ชื่อหน้า + ปุ่มเมนู */
  .mobilebar { min-height: 54px; }
  .mb-brand { display: flex; align-items: center; justify-content: center; flex-shrink: 0; min-width: 44px; min-height: 44px; margin-left: -6px; }
  .mb-brand img { width: 32px; height: 32px; border-radius: 9px; display: block; }
  .mb-title { display: block; flex: 1; min-width: 0; font-weight: 650; font-size: 1.08rem; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .dup-title { display: none; }
  .page-head.m-empty { display: none; }
  .page-head { margin-bottom: 12px; }
  .page-head .sub { display: none; }

  /* แถบเมนูล่าง */
  .tabbar {
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; position: fixed; left: 0; right: 0; bottom: 0; z-index: 24;
    padding: 4px calc(4px + env(safe-area-inset-right)) calc(4px + env(safe-area-inset-bottom)) calc(4px + env(safe-area-inset-left));
    background: rgba(255, 255, 255, .96); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border-top: 1px solid var(--line); box-shadow: 0 -4px 18px rgba(28, 27, 25, .06);
  }
  .tab {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    min-height: 54px; padding: 4px 2px; color: var(--muted); font: inherit; font-size: .72rem; font-weight: 500; line-height: 1.15;
    background: none; border: 0; border-radius: 12px; box-shadow: none; text-decoration: none; cursor: pointer;
  }
  .tab:hover { background: none; text-decoration: none; }
  .tab:active { background: var(--grey-tint); }
  .tab .ic { width: 22px; height: 22px; }
  .tab.active { color: var(--pine); font-weight: 650; }
  .tab.active::before { content: ""; position: absolute; top: -5px; left: 26%; right: 26%; height: 3px; border-radius: 0 0 4px 4px; background: var(--pine); }
  .tab-badge {
    position: absolute; top: 3px; left: calc(50% + 6px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
    display: grid; place-items: center; background: var(--red); color: #fff; font-size: .68rem; font-weight: 700; line-height: 1;
  }
  .tab-badge:empty { display: none; }
  .content { padding-bottom: calc(88px + env(safe-area-inset-bottom)); }
  .toasts { bottom: calc(74px + env(safe-area-inset-bottom)); }
  .save-bar { bottom: calc(68px + env(safe-area-inset-bottom)); }
  .sidebar { z-index: 40; }
  body.menu-open .scrim { z-index: 35; }
  [data-theme="dark"] .tabbar { background: rgba(24, 25, 22, .96); box-shadow: 0 -4px 18px rgba(0, 0, 0, .4); }
  [data-theme="dark"] .tab:active { background: rgba(255, 255, 255, .06); }

  /* หน้าละเอียด ticket: รายละเอียด -> จัดการ (สถานะ) -> กลุ่มโปรแกรมเมอร์ -> ที่เหลือ */
  .grid-2.wide-left { display: flex; flex-direction: column; gap: 14px; }
  .grid-2.wide-left > div, .grid-2.wide-left > aside { display: contents; }
  .grid-2.wide-left section.card { order: 5; margin: 0; }
  .grid-2.wide-left section.card.sec-detail { order: 1; }
  .grid-2.wide-left section.card.sec-manage { order: 2; }
  .grid-2.wide-left section.card.sec-dev { order: 3; }
  .grid-2.wide-left section.card.sec-reply { order: 6; }
}

/* ตัวหนังสือใหญ่ขึ้นเล็กน้อยบนมือถือ (ภาษาไทยอ่านยากกว่าที่ขนาดเท่ากัน) */
@media (max-width: 640px) {
  html { font-size: 16.5px; }
  .hint, .small { font-size: .86rem; }
  .card, .panel { border-radius: 16px; }
  .card { padding: 16px; }
}

/* หน้า รออนุมัติ: เห็นข้อความและปุ่มส่งโดยเร็ว */
@media (max-width: 700px) {
  .boxtabs { grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
  .boxtab { padding: 10px 12px; gap: 8px; min-height: 56px; }
  .boxtab-ic { width: 34px; height: 34px; border-radius: 10px; }
  .boxtab-text small { display: none; }
  .boxtab-text strong { font-size: .92rem; line-height: 1.25; }
  .boxtab-count { font-size: 1.05rem; min-width: 30px; padding: 1px 6px; }

  .reply, .dticket { border-radius: 16px; margin-bottom: 14px; }
  .reply-head, .dt-head { padding: 12px 14px; gap: 6px 10px; }
  .reply-head .who { flex: 1 1 100%; min-width: 0; font-size: 1.02rem; }
  .reply-body > div, .dt-body > div { padding: 12px 14px; }
  .reply .chatlog.compact { max-height: 34vh; padding-right: 2px; }
  .reply .msg { max-width: 92%; }
  .composer textarea { min-height: 140px; font-size: 16px; line-height: 1.6; }
  .composer .actions.end { flex-direction: column; align-items: stretch; }
  .composer .actions.end button { width: 100%; min-height: 52px; font-size: 1.02rem; justify-content: center; }

  /* เครื่องมือรอง (ให้ AI เขียนใหม่ / ไม่ส่ง) พับไว้ กดเปิดเมื่อต้องใช้ */
  .tools { display: block; padding: 0; }
  .tools-fold { width: 100%; }
  .tools-sum { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 14px; font-size: .92rem; font-weight: 600; color: var(--ink-2);
    cursor: pointer; list-style: none; }
  .tools-sum::-webkit-details-marker { display: none; }
  .tools-sum::after { content: "▾"; margin-left: auto; color: var(--muted); transition: transform .15s; }
  .tools-fold[open] .tools-sum::after { transform: rotate(180deg); }
  .tools-in { display: flex; flex-direction: column; gap: 10px; padding: 0 14px 14px; }
  .tools-in form, .tools .tools-in form:first-child { min-width: 0; flex-direction: column; align-items: stretch; width: 100%; }
  .tools-in form button { width: 100%; }

  /* ticket ที่รอส่งเข้ากลุ่มโปรแกรมเมอร์ */
  .dt-foot { flex-direction: column; align-items: stretch; gap: 10px; padding: 12px 14px; }
  .dt-foot form, .dt-foot button { width: 100%; }
  .dt-foot form:last-of-type { order: 1; }
  .dt-foot form:first-of-type { order: 2; }
  .dt-foot .dt-hint { order: 3; }
  .dt-foot button { min-height: 50px; justify-content: center; }
}
/* แถบ "มีรายการรออนุมัติใหม่" (หน้ารออนุมัติ) */
.newbar {
  position: fixed; top: 14px; left: 50%; transform: translateX(-50%); z-index: 45; max-width: calc(100vw - 24px);
  display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 18px; border: 0; border-radius: 99px;
  background: #1c1b19; color: #fff; font-size: .92rem; font-weight: 600; box-shadow: 0 8px 28px rgba(28, 27, 25, .3); cursor: pointer;
  animation: newbarIn .25s ease-out;
}
.newbar:hover { background: #2b2a27; }
.newbar b { color: #7be0ae; font-family: var(--mono); }
.newbar[hidden] { display: none; }
@keyframes newbarIn { from { opacity: 0; transform: translate(-50%, -10px); } }
@media (max-width: 900px) { .newbar { top: calc(62px + env(safe-area-inset-top)); } }
body.kb-open .tabbar { display: none; }
body.kb-open .content { padding-bottom: 24px; }
body.kb-open .form-actions, body.kb-open .save-bar { bottom: 10px; }
.tools-fold { width: 100%; }
.tools-in { display: flex; gap: 10px; flex-wrap: wrap; width: 100%; }
.tools-in form { display: flex; gap: 6px; min-width: 0; }
.tools-in form:first-child { flex: 1; min-width: 260px; }
.tools-in input { min-width: 0; }


/* =====================================================================
   หน้า รออนุมัติ — กล่องจดหมาย: คิวทางซ้าย + บทสนทนา/ร่างคำตอบทางขวา (มือถือ: รายการ -> เต็มจอ)
   ===================================================================== */
.rv-tabs { display: flex; gap: 2px; margin: 0 0 18px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.rv-tabs::-webkit-scrollbar { display: none; }
.rv-tab {
  position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 11px 16px; margin-bottom: -1px; flex-shrink: 0;
  color: var(--muted); font-weight: 600; font-size: .95rem; border-bottom: 2px solid transparent; white-space: nowrap;
}
.rv-tab:hover { color: var(--ink); text-decoration: none; }
.rv-tab.on { color: var(--ink); border-bottom-color: var(--pine); }
.rv-tab b { min-width: 24px; padding: 0 7px; border-radius: 99px; background: var(--grey-tint); color: var(--muted); font-size: .78rem; font-weight: 700; line-height: 1.7; text-align: center; font-variant-numeric: tabular-nums; }
.rv-tab.on b { background: var(--ink); color: var(--surface); }
.rv-tab b.hot { background: var(--red-tint); color: var(--red); }
.rv-tab.on b.hot { background: var(--red); color: #fff; }

.rv {
  --rv-h: calc(100vh - 232px); --rv-h: calc(100svh - 232px);
  display: grid; grid-template-columns: minmax(300px, 380px) minmax(0, 1fr);
  height: max(var(--rv-h), 560px); background: var(--surface); border: 1px solid var(--line);
  border-radius: 18px; box-shadow: var(--shadow-sm); overflow: hidden;
}
.rv-queue { display: flex; flex-direction: column; min-height: 0; background: var(--surface-2); border-right: 1px solid var(--line); }
.rv-seg { display: flex; gap: 4px; margin: 14px; padding: 4px; background: var(--grey-tint); border-radius: 13px; flex-shrink: 0; }
.rv-seg a {
  flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 7px; padding: 8px 8px;
  border-radius: 10px; color: var(--muted); font-size: .88rem; font-weight: 600; white-space: nowrap;
}
.rv-seg a:hover { color: var(--ink); text-decoration: none; }
.rv-seg a.on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }
.rv-seg .cicon { width: 20px; height: 20px; flex-shrink: 0; }
.rv-seg span { overflow: hidden; text-overflow: ellipsis; }
.rv-seg b { padding: 0 7px; border-radius: 99px; background: rgba(0, 0, 0, .06); font-size: .76rem; font-weight: 700; line-height: 1.65; font-variant-numeric: tabular-nums; }
.rv-seg b.hot { background: var(--red-tint); color: var(--red); }

.rv-list { list-style: none; margin: 0; padding: 0; flex: 1; min-height: 0; overflow-y: auto; border-top: 1px solid var(--line); }
.rv-item {
  position: relative; display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px 13px; color: var(--ink);
  border-bottom: 1px solid var(--line); transition: background .12s;
}
.rv-item:hover { background: var(--surface); text-decoration: none; }
.rv-item.on { background: var(--surface); }
.rv-item.on::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--pine); }
.rv-item:focus-visible { box-shadow: inset 0 0 0 2px var(--pine); }
.rv-it-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.rv-it-top { display: flex; align-items: baseline; gap: 10px; }
.rv-it-top strong { flex: 1; min-width: 0; font-weight: 650; font-size: .96rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rv-it-top time { flex-shrink: 0; color: var(--muted); font-size: .76rem; }
.rv-it-snip { color: var(--ink-2); font-size: .88rem; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; }
.rv-it-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 3px; }

.rv-av {
  --avb: #e2f8ee; --avf: #0b7d52;
  flex-shrink: 0; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  background: var(--avb); color: var(--avf); font-weight: 700; font-size: 1.05rem; line-height: 1;
}
.rv-av.big { width: 48px; height: 48px; font-size: 1.15rem; }
.rv-av.av-1 { --avb: #e8eefc; --avf: #1d4ed8; }
.rv-av.av-2 { --avb: #fbf0dc; --avf: #a15c07; }
.rv-av.av-3 { --avb: #f6e8f6; --avf: #8b2a8b; }
.rv-av.av-4 { --avb: #fde8e4; --avf: #b4361f; }
.rv-av.av-5 { --avb: #e1f4f6; --avf: #0e7490; }
.rv-av.dev { --avb: var(--blue-tint); --avf: var(--blue); font-family: var(--mono); font-size: .8rem; font-weight: 600; }
.rv-av.dev.big { font-size: .9rem; }
[data-theme="dark"] .rv-av { --avb: rgba(53, 192, 138, .16); --avf: #5fd6a6; }
[data-theme="dark"] .rv-av.av-1 { --avb: rgba(134, 168, 255, .16); --avf: #9db8ff; }
[data-theme="dark"] .rv-av.av-2 { --avb: rgba(231, 169, 72, .16); --avf: #efc272; }
[data-theme="dark"] .rv-av.av-3 { --avb: rgba(214, 140, 214, .16); --avf: #e3a6e3; }
[data-theme="dark"] .rv-av.av-4 { --avb: rgba(242, 107, 91, .16); --avf: #f59a8d; }
[data-theme="dark"] .rv-av.av-5 { --avb: rgba(86, 196, 214, .16); --avf: #7fd3e0; }
[data-theme="dark"] .rv-av.dev { --avb: rgba(134, 168, 255, .16); --avf: #9db8ff; }

.rv-chip {
  display: inline-flex; align-items: center; gap: 4px; padding: 0 8px; border-radius: 99px; background: var(--grey-tint); color: var(--ink-2);
  font-style: normal; font-size: .72rem; font-weight: 600; line-height: 1.7;
}
.rv-chip.ok { background: var(--pine-tint); color: var(--pine); }
.rv-chip.info { background: var(--blue-tint); color: var(--blue); }
.rv-chip.bad { background: var(--red-tint); color: var(--red); }
.rv-chip.sev-high, .rv-chip.sev-critical { background: var(--red-tint); color: var(--red); }
.rv-chip.sev-medium { background: var(--amber-tint); color: var(--amber); }
.rv-chip.sev-low { background: var(--pine-tint); color: var(--pine); }

/* ---- รายละเอียด ---- */
.rv-detail { position: relative; min-width: 0; min-height: 0; display: flex; flex-direction: column; container: rvd / inline-size; }
.rv-pane { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.rv.js .rv-pane { display: none; }
.rv.js .rv-pane.on { display: flex; }
.rv-ph { display: flex; align-items: center; gap: 14px; padding: 16px 24px; border-bottom: 1px solid var(--line); background: var(--surface); flex-shrink: 0; }
.rv-ph-text { flex: 1; min-width: 0; }
.rv-ph-text h2 { font-size: 1.12rem; font-weight: 700; letter-spacing: -.01em; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rv-ph-text p { margin: 2px 0 0; color: var(--muted); font-size: .84rem; display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
.rv-link {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border: 1px solid var(--line-2); border-radius: 10px;
  color: var(--ink-2); font-size: .85rem; font-weight: 600; background: var(--surface);
}
.rv-link:hover { background: var(--surface-2); text-decoration: none; }
.rv-back { display: none; }

.rv-body { --rv-px: 24px; flex: 1; min-height: 0; overflow-y: auto; padding: 18px var(--rv-px) 24px; display: flex; flex-direction: column; }
.rv-label { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; color: var(--muted); font-size: .8rem; font-weight: 650; }
.rv-label-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.rv-label-row label { color: var(--ink); font-size: .95rem; font-weight: 650; }
.rv-muted { color: var(--muted); font-weight: 400; }
.rv-aitag { display: inline-flex; align-items: center; gap: 5px; padding: 2px 10px; border-radius: 99px; background: var(--pine-tint); color: var(--pine); font-size: .76rem; font-weight: 650; }

.rv-convo {
  display: flex; flex-direction: column; gap: 9px; padding: 14px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line);
  max-height: min(30vh, 320px); min-height: 90px; overflow-y: auto; flex-shrink: 0;
}
.rv-msg {
  max-width: 82%; align-self: flex-start; padding: 8px 13px 9px; border-radius: 16px 16px 16px 5px;
  background: var(--surface); border: 1px solid var(--line);
}
.rv-msg.out { align-self: flex-end; border-radius: 16px 16px 5px 16px; background: var(--pine-tint); border-color: var(--ring); }
.rv-msg.target { border-color: var(--amber); box-shadow: 0 0 0 3px rgba(161, 92, 7, .12); }
.rv-meta { display: flex; align-items: baseline; flex-wrap: wrap; gap: 3px 8px; font-size: .76rem; color: var(--muted); }
.rv-meta b { color: var(--ink-2); font-weight: 650; }
.rv-meta em { font-style: normal; padding: 0 7px; border-radius: 99px; background: var(--amber-tint); color: var(--amber); font-weight: 650; font-size: .7rem; }
.rv-text { margin-top: 2px; font-size: .96rem; line-height: 1.6; white-space: pre-wrap; word-break: break-word; }
.rv-text a { word-break: break-all; }
.rv-img { display: block; max-width: 220px; max-height: 160px; margin-top: 6px; border-radius: 10px; border: 1px solid var(--line); }

.rv-compose { margin-top: 18px; display: flex; flex-direction: column; }
.rv-compose textarea {
  width: 100%; min-height: 138px; padding: 14px 16px; border: 1px solid var(--line-2); border-radius: 14px;
  background: var(--surface); font-size: 1.02rem; line-height: 1.7; resize: vertical;
}
.rv-note { margin: 10px 0 0; padding: 9px 13px; border-radius: 12px; background: var(--amber-tint); color: var(--ink-2); font-size: .86rem; line-height: 1.55; }
.rv-note b { display: flex; align-items: center; gap: 6px; margin-bottom: 2px; color: var(--amber); font-size: .78rem; }
.rv-pics { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.rv-send {
  position: sticky; bottom: 0; z-index: 3; display: flex; align-items: center; gap: 14px; margin: 14px calc(var(--rv-px) * -1) 0; padding: 12px var(--rv-px);
  background: var(--surface); border-top: 1px solid var(--line);
}
.rv-hint { flex: 1; min-width: 0; color: var(--muted); font-size: .82rem; }

.rv .rv-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 11px;
  border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); font: inherit; font-size: .9rem; font-weight: 650;
  box-shadow: none; cursor: pointer; white-space: nowrap; transition: background .15s, border-color .15s, box-shadow .15s, transform .08s;
}
.rv .rv-btn:hover { background: var(--surface-2); border-color: var(--muted); text-decoration: none; }
.rv .rv-btn:active { transform: translateY(1px); }
.rv .rv-btn.primary { height: 46px; padding: 0 22px; border-color: var(--pine-2); background: var(--pine); color: #fff; font-size: .98rem; box-shadow: 0 8px 18px -10px rgba(8, 102, 63, .8); }
.rv .rv-btn.primary:hover { background: var(--pine-2); }
.rv .rv-btn.soft { border-color: transparent; background: var(--pine-tint); color: var(--pine); }
.rv .rv-btn.soft:hover { background: var(--pine-tint); border-color: var(--pine); }
.rv .rv-btn.danger { color: var(--red); }
.rv .rv-btn.danger:hover { background: var(--red-tint); border-color: #e3b1ab; }
.rv .rv-btn:focus-visible, .rv-chipbtn:focus-visible, .rv-link:focus-visible { outline: none; box-shadow: var(--focus); }
[data-theme="dark"] .rv .rv-btn.primary { background: #178a5d; border-color: #127350; box-shadow: none; }
[data-theme="dark"] .rv .rv-btn.primary:hover { background: #1c9d6a; }
.rv .rv-mini { height: 30px; padding: 0 10px; border: 1px solid var(--line-2); border-radius: 9px; background: var(--surface); color: var(--ink-2); font: inherit; font-size: .8rem; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; box-shadow: none; }

.rv-tools { margin-top: 20px; padding-top: 18px; border-top: 1px dashed var(--line-2); display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 20px 28px; }
.rv-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.rv-chips form { display: block; margin: 0; }
.rv .rv-chipbtn {
  height: 34px; padding: 0 14px; border: 1px solid var(--line-2); border-radius: 99px; background: var(--surface); color: var(--ink-2);
  font: inherit; font-size: .86rem; font-weight: 600; cursor: pointer; box-shadow: none; transition: background .15s, border-color .15s, color .15s;
}
.rv .rv-chipbtn:hover { background: var(--pine-tint); border-color: var(--pine); color: var(--pine); }
.rv-inline { display: flex; gap: 8px; margin: 0; }
.rv-inline input { flex: 1; min-width: 0; height: 40px; padding: 0 12px; border-radius: 11px; font-size: .9rem; }

/* ticket ที่รอส่งเข้ากลุ่มโปรแกรมเมอร์ */
.rv-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px 20px; margin: 0 0 18px; padding: 14px 16px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line); }
.rv-facts dt { margin: 0 0 2px; color: var(--muted); font-size: .76rem; font-weight: 650; }
.rv-facts dd { margin: 0; font-size: .92rem; word-break: break-word; }
.rv-summary { margin: 0 0 18px; font-size: .95rem; line-height: 1.7; color: var(--ink-2); }
.rv-photos { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.rv-photos img { width: 110px; height: 80px; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); display: block; }
.rv .rv-tg.dt-msg { padding: 0; border: 0; background: none; }
.rv .rv-tg .tg-bubble { margin: 0; padding: 14px 16px; border-radius: 14px; background: var(--pine-tint); border: 1px solid var(--ring); max-height: none; font-size: .92rem; line-height: 1.65; white-space: pre-wrap; word-break: break-word; }
.rv .rv-tg textarea { min-height: 220px; padding: 14px 16px; border-radius: 14px; font-size: .92rem; line-height: 1.65; }
.rv-foot { display: flex; align-items: center; gap: 14px; padding: 14px 24px; border-top: 1px solid var(--line); background: var(--surface); flex-shrink: 0; }
.rv-foot form { margin: 0; }

/* ว่าง */
.rv-hero { display: none; flex: 1; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 40px 24px; text-align: center; }
.rv.empty .rv-hero { display: flex; }
.rv-hero img { margin-bottom: 8px; }
.rv-hero h3 { margin: 0; font-size: 1.15rem; font-weight: 700; }
.rv-hero p { margin: 0 0 12px; color: var(--muted); }
.rv.empty { display: block; height: auto; border-radius: 18px; }
.rv.empty .rv-list { display: none; }
.rv.empty .rv-queue { background: none; border: 0; }
.rv.empty .rv-seg { max-width: 420px; margin: 22px auto 0; }
.rv.empty .rv-detail { min-height: 280px; }

/* ---- แท็บเล็ตแคบ / มือถือ: รายการเต็มจอ แตะแล้วรายละเอียดเต็มจอ ---- */
@media (max-width: 900px) {
  .rv { display: block; height: auto; background: none; border: 0; border-radius: 0; box-shadow: none; overflow: visible; }
  .rv-queue { background: none; border: 0; }
  .rv-seg { margin: 0 0 12px; }
  .rv-list { border: 1px solid var(--line); border-radius: 16px; background: var(--surface); overflow: hidden; box-shadow: var(--shadow-sm); }
  .rv-item { padding: 14px; min-height: 64px; }
  .rv-item:last-child { border-bottom: 0; }
  .rv-item.on::before { display: none; }
  .rv-detail { display: none; }
  .rv.open .rv-detail {
    display: flex; position: fixed; inset: 0; z-index: 60; background: var(--paper);
    padding-top: env(safe-area-inset-top); overflow: hidden;
  }
  .rv.empty .rv-detail { display: flex; position: static; background: none; }
  .rv-pane.on { height: 100%; }
  .rv-ph { padding: 10px 14px 10px 6px; gap: 10px; }
  .rv-back { display: grid; place-items: center; width: 44px; height: 44px; border: 0; background: none; color: var(--ink); border-radius: 12px; box-shadow: none; padding: 0; }
  .rv-ph .rv-av { width: 38px; height: 38px; font-size: 1rem; }
  .rv-link { display: none; }
  .rv-body { --rv-px: 14px; padding: 14px var(--rv-px) calc(24px + env(safe-area-inset-bottom)); }
  .rv-convo { max-height: 30vh; }
  .rv-msg { max-width: 92%; }
  .rv-compose textarea { min-height: 150px; font-size: 16px; }
  .rv-send { padding-bottom: calc(10px + env(safe-area-inset-bottom)); background: var(--paper); }
  .rv-send .rv-hint { display: none; }
  .rv .rv-send .rv-btn.primary { flex: 1; height: 52px; font-size: 1.02rem; }
  .rv-tools { grid-template-columns: 1fr; gap: 16px; }
  .rv-inline { flex-direction: column; }
  .rv-inline input { height: 44px; font-size: 16px; }
  .rv .rv-btn { height: 44px; }
  .rv-foot { flex-wrap: wrap; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); background: var(--paper); }
  .rv-foot .rv-hint { display: none; }
  .rv-foot form:last-child { flex: 1; order: -1; }
  .rv .rv-foot .rv-btn { width: 100%; }
  .rv .rv-foot .rv-btn.primary { height: 52px; }
  .rv-hero { padding: 36px 16px; }
  body.rv-lock { overflow: hidden; }
}
/* แผงรายละเอียดกว้างพอ (จอใหญ่): บทสนทนาซ้าย / ร่างคำตอบ + เครื่องมือขวา เห็นครบโดยไม่ต้องเลื่อน */
@container rvd (min-width: 940px) {
  .rv-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); grid-template-rows: auto minmax(0, 1fr) auto; column-gap: 28px; overflow: hidden; }
  .rv-cols > .rv-label { grid-column: 1; grid-row: 1; }
  .rv-cols > .rv-chat { grid-column: 1; grid-row: 2 / span 2; height: 100%; min-height: 0; }
  .rv-cols .rv-chat .rv-convo { flex: 1 1 auto; max-height: none; min-height: 0; }
  .rv-cols > .rv-side { grid-column: 2; grid-row: 1 / span 3; min-width: 0; min-height: 0; overflow-y: auto; }
  .rv-cols > .rv-side .rv-compose { margin-top: 0; }
  .rv-cols > .rv-side { overflow-x: hidden; }
  .rv-cols > .rv-side .rv-send { margin-inline: 0; padding-inline: 0; }
  .rv-cols .rv-compose textarea { min-height: 170px; }
}
@media (min-width: 901px) and (max-width: 1180px) {
  .rv { grid-template-columns: 300px minmax(0, 1fr); }
  .rv-tools { grid-template-columns: 1fr; }
  .rv-ph { padding-left: 18px; padding-right: 18px; }
  .rv-body { --rv-px: 18px; }
}
@media (prefers-reduced-motion: reduce) { .rv-item, .rv .rv-btn { transition: none; } }

/* ---- แชทสด + ช่องพิมพ์ตอบในบทสนทนา ---- */
.rv-chat { position: relative; display: flex; flex-direction: column; min-width: 0; }
.rv-live {
  display: inline-flex; align-items: center; gap: 6px; margin-left: 8px; padding: 0 9px; border-radius: 99px;
  background: var(--pine-tint); color: var(--pine); font-size: .7rem; font-weight: 700; line-height: 1.7; letter-spacing: .02em;
}
.rv-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--pine); animation: rv-pulse 1.8s ease-out infinite; }
.rv-live.off { background: var(--amber-tint); color: var(--amber); }
.rv-live.off i { background: var(--amber); animation: none; }
@keyframes rv-pulse { 0% { box-shadow: 0 0 0 0 rgba(11, 125, 82, .5); } 70%, 100% { box-shadow: 0 0 0 7px rgba(11, 125, 82, 0); } }
@keyframes rv-pop { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
.rv-msg.fresh { animation: rv-pop .22s ease-out; }
.rv-msg:not(.out) { cursor: pointer; }
.rv-msg.picked { border-color: var(--pine); box-shadow: 0 0 0 3px var(--ring); }
.rv-item.ping { animation: rv-ping 1.6s ease-out; }
@keyframes rv-ping { 0% { background: var(--pine-tint); } 100% { background: transparent; } }
.rv-item.on.ping { animation-name: rv-ping-on; }
@keyframes rv-ping-on { 0% { background: var(--pine-tint); } 100% { background: var(--surface); } }

.rv-newmsg {
  position: absolute; left: 50%; bottom: 76px; transform: translateX(-50%); z-index: 4;
  padding: 6px 14px; border: 0; border-radius: 99px; background: var(--ink); color: var(--surface);
  font: inherit; font-size: .82rem; font-weight: 650; box-shadow: var(--shadow-md); cursor: pointer;
}
.rv-newmsg[hidden] { display: none; }
.rv-say { margin-top: 10px; flex-shrink: 0; }
.rv-replying {
  display: flex; align-items: center; gap: 8px; margin-bottom: 6px; padding: 5px 6px 5px 12px; border-radius: 10px;
  background: var(--pine-tint); color: var(--pine); font-size: .8rem; font-weight: 600;
}
.rv-replying[hidden] { display: none; }
.rv-replying q { flex: 1; min-width: 0; quotes: none; color: var(--ink-2); font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rv .rv-replying button { display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--pine); box-shadow: none; cursor: pointer; }
.rv-say-row {
  display: flex; align-items: flex-end; gap: 8px; padding: 6px 6px 6px 14px; border: 1px solid var(--line-2); border-radius: 16px; background: var(--surface);
  transition: border-color .15s, box-shadow .15s;
}
.rv-say-row:focus-within { border-color: var(--pine); box-shadow: var(--focus); }
.rv .rv-say-row textarea {
  flex: 1; min-width: 0; min-height: 34px; max-height: 140px; padding: 7px 0; border: 0; border-radius: 0; background: transparent;
  box-shadow: none; font-size: .96rem; line-height: 1.5; resize: none; overflow-y: auto;
}
.rv .rv-say-row textarea:focus { box-shadow: none; border: 0; }
.rv .rv-say-btn {
  flex-shrink: 0; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 12px;
  background: var(--pine); color: #fff; box-shadow: none; cursor: pointer; transition: background .15s, transform .08s;
}
.rv .rv-say-btn:hover { background: var(--pine-2); }
.rv .rv-say-btn:active { transform: translateY(1px); }
.rv .rv-say-btn:disabled { opacity: .5; cursor: progress; }
[data-theme="dark"] .rv .rv-say-btn { background: #178a5d; }
.rv-say-err { margin: 6px 4px 0; color: var(--red); font-size: .82rem; font-weight: 600; }
.rv-say-err[hidden] { display: none; }
@media (max-width: 900px) {
  .rv .rv-say-row textarea { font-size: 16px; }
  .rv-newmsg { bottom: 70px; }
}
@media (prefers-reduced-motion: reduce) { .rv-live i, .rv-msg.fresh, .rv-item.ping { animation: none; } }

/* ---- รออนุมัติ: ทำให้อ่านง่ายขึ้น (แชทซ้าย=ลูกค้า ขวา=ทีมงาน ชัดเจน, ชุดปุ่มเหลือน้อย) ---- */
.rv-label .rv-legend { margin-left: auto; display: flex; gap: 12px; font-size: .74rem; font-weight: 650; }
.rv-legend .l { color: var(--muted); }
.rv-legend .r { color: var(--pine); }

.rv-convo { gap: 4px; padding: 16px 16px 12px; background: var(--surface-2); }
.rv-msg {
  position: relative; max-width: 78%; padding: 8px 14px 6px; margin-top: 8px; border-radius: 18px 18px 18px 5px;
  background: var(--surface); border: 1px solid var(--line);
}
.rv-msg:first-child { margin-top: 0; }
.rv-msg.out { border-radius: 18px 18px 5px 18px; background: var(--pine-tint); border-color: var(--ring); }
.rv-msg.cont { margin-top: 0; border-top-left-radius: 6px; }
.rv-msg.out.cont { border-top-left-radius: 18px; border-top-right-radius: 6px; }
.rv-msg.cont .rv-meta:not(:has(em)) { display: none; }
.rv-meta { margin-bottom: 1px; }
.rv-meta b { font-size: .8rem; color: var(--muted); font-weight: 650; }
.rv-msg.out .rv-meta b { color: var(--pine); }
.rv-text { font-size: 1.02rem; line-height: 1.55; }
.rv-msg time { display: block; margin-top: 1px; text-align: right; font-size: .7rem; color: var(--muted); }
.rv-msg.target { box-shadow: 0 0 0 3px rgba(161, 92, 7, .14); }

.rv-compose textarea { font-size: 1.04rem; }
.rv-label-row label { display: inline-flex; align-items: center; gap: 7px; }
.rv-label-row label .ic { color: var(--pine); }
.rv-note {
  display: flex; align-items: flex-start; gap: 8px; margin: 10px 0 0; padding: 8px 12px; border-radius: 12px;
  background: var(--surface-2); border: 1px solid var(--line); color: var(--ink-2); font-size: .84rem; line-height: 1.5;
}
.rv-note .ic { flex-shrink: 0; margin-top: 3px; color: var(--amber); }
.rv .rv-send { padding: 12px var(--rv-px); }
.rv .rv-send .rv-btn.primary { width: 100%; height: 50px; font-size: 1.04rem; }

.rv-tools { display: block; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.rv-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }
.rv-tl { display: inline-flex; align-items: center; gap: 6px; margin-right: 2px; color: var(--muted); font-size: .8rem; font-weight: 650; }
.rv .rv-chipbtn.ghost { border-style: dashed; }
.rv .rv-chipbtn.no { margin-left: auto; color: var(--red); border-color: transparent; background: transparent; }
.rv .rv-chipbtn.no:hover { background: var(--red-tint); border-color: #e3b1ab; color: var(--red); }
.rv .rv-chipbtn.on { background: var(--pine-tint); border-color: var(--pine); color: var(--pine); }
.rv .rv-chipbtn.no.on { background: var(--red-tint); border-color: #e3b1ab; color: var(--red); }
.rv-inline[hidden] { display: none; }
.rv-tools .rv-inline { margin-top: 10px; }
@media (max-width: 900px) {
  .rv-msg { max-width: 88%; }
  .rv-label .rv-legend { display: none; }
  .rv .rv-send { padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
}

/* สถานะตอน AI กำลังเขียนใหม่ (ไม่โหลดหน้าใหม่) */
.rv-ai-status { display: flex; align-items: center; gap: 9px; margin: 8px 0 0; font-size: .86rem; font-weight: 650; color: var(--pine); }
.rv-ai-status[hidden] { display: none; }
.rv-ai-status.err { color: var(--red); }
.rv-spin { width: 15px; height: 15px; flex-shrink: 0; border-radius: 50%; border: 2px solid var(--ring); border-top-color: var(--pine); animation: rv-turn .8s linear infinite; }
@keyframes rv-turn { to { transform: rotate(360deg); } }
.rv-compose.busy textarea { background: var(--surface-2); color: var(--muted); }
.rv-tools button:disabled { opacity: .5; cursor: progress; }
@media (prefers-reduced-motion: reduce) { .rv-spin { animation-duration: 2s; } }

/* ร่างคำตอบ + เครื่องมือเขียนใหม่ อยู่คอลัมน์เดียวกัน ต่อกันทันที (ช่องสั่ง AI เองแสดงตลอด) */
.rv-side { display: flex; flex-direction: column; min-width: 0; }
.rv-tools .rv-tl { margin: 0 0 8px; font-size: .84rem; }
.rv-tools .rv-chips { margin-top: 12px; }
.rv-tools .rv-chips .rv-tl { margin: 0 2px 0 0; font-weight: 600; }
.rv-tools .rv-inline.rv-own { margin-top: 0; }
.rv-tools .rv-inline.rv-own input { height: 44px; font-size: .95rem; }
.rv .rv-tools .rv-inline.rv-own .rv-btn { height: 44px; padding: 0 18px; }

/* ---- ข้อความลูกค้าที่ยังไม่ได้อ่าน + เอารูปโปรไฟล์ (วงกลมตัวอักษร) ออก ---- */
.rv-it-row { display: flex; align-items: flex-start; gap: 8px; }
.rv-it-row .rv-it-snip { flex: 1; min-width: 0; }
.rv-un {
  flex-shrink: 0; display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 7px; margin-top: 1px;
  border-radius: 99px; background: var(--pine); color: #fff; font-size: .76rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums;
}
.rv-un[hidden] { display: none; }
.rv-item.unread .rv-it-top strong { font-weight: 800; }
.rv-item.unread .rv-it-snip { color: var(--ink); font-weight: 600; }
.rv-item.unread .rv-it-top time { color: var(--pine); font-weight: 700; }
.rv-tid { font-family: var(--mono); font-size: .86em; font-weight: 600; color: var(--blue); }
.nav-badge.unread { background: var(--pine); color: #fff; }
.unread-pill {
  display: inline-flex; align-items: center; margin-left: 8px; padding: 0 9px; border-radius: 99px; vertical-align: 1px;
  background: var(--pine); color: #fff; font-size: .74rem; font-weight: 700; line-height: 1.7;
}
.title-link.is-unread { font-weight: 800; }
[data-theme="dark"] .rv-un, [data-theme="dark"] .nav-badge.unread, [data-theme="dark"] .unread-pill { background: #178a5d; }

/* ---- แชทใหญ่ขึ้น (จอกว้าง): ตัวหนังสือใหญ่ ฟองกว้าง คอลัมน์แชทกว้างกว่าฝั่งร่างคำตอบ ซ่อนรายการได้ ---- */
@media (min-width: 901px) {
  .rv-text { font-size: 1.1rem; line-height: 1.6; }
  .rv-meta b { font-size: .88rem; }
  .rv-msg time { font-size: .76rem; }
  .rv-msg { max-width: 86%; padding: 10px 16px 8px; }
  .rv-img { max-width: 340px; max-height: 280px; }
  .rv-convo { padding: 18px 18px 14px; max-height: min(56vh, 620px); }
  .rv-say-row textarea, .rv .rv-say-row textarea { font-size: 1.04rem; }
}
@container rvd (min-width: 940px) {
  .rv-cols { grid-template-columns: minmax(0, 1.6fr) minmax(340px, 1fr); column-gap: 24px; }
  .rv-cols > .rv-chat .rv-convo { max-height: none; }
}
.rv.collapsed { grid-template-columns: minmax(0, 1fr); }
.rv.collapsed .rv-queue { display: none; }
.rv .rv-collapse {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border: 1px solid var(--line-2);
  border-radius: 10px; background: var(--surface); color: var(--ink-2); font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer; box-shadow: none;
}
.rv .rv-collapse:hover { background: var(--surface-2); }
.rv .rv-collapse .ic { transition: transform .15s; }
.rv.collapsed .rv-collapse .ic { transform: rotate(180deg); }
@media (max-width: 900px) { .rv .rv-collapse { display: none; } }

/* ---- LINE Chat Bot ---- */
.rv-chip.line { background: #e6f9ec; color: #06853c; }
[data-theme="dark"] .rv-chip.line { background: rgba(6, 199, 85, .16); color: #5be08b; }
.tag.ch-line { background: #e6f9ec; color: #06853c; margin-left: 6px; }
[data-theme="dark"] .tag.ch-line { background: rgba(6, 199, 85, .16); color: #5be08b; }
.stat-line { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 14px 0; padding: 12px 16px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); color: var(--ink-2); font-size: .92rem; }
.stat-line strong { font-size: 1.15rem; color: var(--ink); font-variant-numeric: tabular-nums; margin-right: 4px; }
.steps-list { margin: 0 0 14px; padding-left: 22px; display: grid; gap: 8px; line-height: 1.7; color: var(--ink-2); }

/* ---- LINE Chat Bot: กลุ่มเมนูแยกท้ายแถบข้าง (ไม่ปนกับระบบ Telegram) ---- */
.nav-group-line { margin-top: 8px; padding-top: 6px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 2px; }
.nav-group-line .nav-label { display: flex; align-items: center; gap: 7px; padding: 12px 12px 6px; text-transform: none; }
.nav-group-line .nav-label::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #06c755; flex-shrink: 0; }
.nav-group-line .nav-item.active::before { background: #06c755; }
@media (min-width: 901px) and (max-height: 840px) {
  .nav-group-line .nav-label { padding: 8px 12px 4px; }
}

/* ---- เมนูข้าง: พับเป็นแถบไอคอน (จอกว้าง) · มือถือใช้ลิ้นชักเหมือนเดิม ---- */
.sb-toggle, .sb-tip, .brand-rail { display: none; }
@media (min-width: 901px) {
  :root { --sb-ease: cubic-bezier(.22, .8, .24, 1); }
  :root.nav-collapsed { --sidebar: 72px; }
  .sidebar { overflow-x: hidden; transition: transform .25s ease, width .26s var(--sb-ease); }
  .shell { transition: margin-left .26s var(--sb-ease); }
  .nav-item > span:not(.nav-badge) { max-width: 180px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; transition: max-width .26s var(--sb-ease), opacity .16s; }
  .nav-item { transition: background .15s, color .15s, box-shadow .15s, gap .26s var(--sb-ease); }

  /* ปุ่มจับที่ขอบเมนู */
  .icon-btn.sb-toggle {
    display: grid; position: fixed; z-index: 41; top: 26px; left: calc(var(--sidebar) - 13px);
    width: 26px; height: 26px; min-width: 0; min-height: 0; padding: 0; border-radius: 50%;
    background: var(--surface); color: var(--muted); border: 1px solid var(--line-2);
    box-shadow: 0 1px 2px rgba(28, 27, 25, .08), 0 3px 10px rgba(28, 27, 25, .07);
    transition: left .26s var(--sb-ease), color .15s, border-color .15s, box-shadow .15s, transform .15s;
  }
  .icon-btn.sb-toggle:hover { background: var(--surface); color: var(--ink); border-color: var(--muted); box-shadow: 0 1px 2px rgba(28, 27, 25, .1), 0 5px 14px rgba(28, 27, 25, .12); transform: scale(1.08); }
  .icon-btn.sb-toggle:focus-visible { outline: none; box-shadow: var(--focus), 0 1px 2px rgba(28, 27, 25, .1); }
  .sb-toggle .ic { transition: transform .26s var(--sb-ease); }
  :root.nav-collapsed .sb-toggle .ic { transform: rotate(180deg); }

  /* ป้ายชื่อเมนูตอนพับ */
  .sb-tip {
    display: flex; align-items: center; gap: 8px; position: fixed; z-index: 60; pointer-events: none;
    padding: 6px 12px; border-radius: 9px; background: var(--ink); color: var(--paper);
    font-size: .88rem; font-weight: 600; line-height: 1.5; white-space: nowrap; box-shadow: 0 8px 24px rgba(28, 27, 25, .24);
    opacity: 0; transform: translate(-6px, -50%); transition: opacity .12s, transform .14s var(--sb-ease);
  }
  .sb-tip::before { content: ""; position: absolute; left: -4px; top: 50%; width: 9px; height: 9px; border-radius: 2px; background: inherit; transform: translateY(-50%) rotate(45deg); }
  .sb-tip.show { opacity: 1; transform: translate(0, -50%); }
  .sb-tip b { font-family: var(--mono); font-size: .74rem; font-weight: 600; line-height: 1.6; padding: 0 7px; border-radius: 99px; background: rgba(128, 128, 128, .32); }

  /* แถบไอคอน */
  :root.nav-collapsed .sidebar { padding-left: 14px; padding-right: 14px; }
  :root.nav-collapsed .brand { align-items: center; padding: 0 0 16px; }
  :root.nav-collapsed .brand-logo, :root.nav-collapsed .brand-sub { display: none; }
  :root.nav-collapsed .brand-rail { display: block; border-radius: 11px; animation: sb-pop .32s var(--sb-ease) both; }
  @keyframes sb-pop { from { opacity: 0; transform: scale(.82); } }

  :root.nav-collapsed .nav, :root.nav-collapsed .nav-group-line { align-items: center; }
  :root.nav-collapsed .nav-item { position: relative; width: 44px; height: 44px; padding: 0; gap: 0; justify-content: center; border-radius: 12px; }
  :root.nav-collapsed .nav-item > span:not(.nav-badge) { max-width: 0; opacity: 0; }
  :root.nav-collapsed .nav-item .cicon { width: 22px; height: 22px; }
  :root.nav-collapsed .nav-item.active::before { left: -14px; top: 11px; bottom: 11px; }
  :root.nav-collapsed .nav-badge {
    position: absolute; top: 1px; right: -3px; margin: 0; min-width: 19px; height: 19px; padding: 0 5px;
    font-size: .66rem; line-height: 19px; text-align: center; box-shadow: 0 0 0 2px var(--paper-2);
  }
  :root.nav-collapsed .nav-label { width: 26px; height: 2px; margin: 14px auto 12px; padding: 0; font-size: 0; border-radius: 2px; background: var(--line-2); overflow: hidden; }
  :root.nav-collapsed .nav-group-line { padding-top: 10px; }
  :root.nav-collapsed .nav-group-line .nav-label { display: none; }

  /* แถบไอคอน: ไม่แสดงการ์ดโควตา AI (ตัวเลขลอยๆ ไม่มีบริบท) · ตอนขยายเมนูยังแสดงตามเดิม */
  :root.nav-collapsed .quota-mini { display: none; }

  :root.nav-collapsed .sidebar-foot { flex-direction: column; align-items: center; gap: 4px; }
  :root.nav-collapsed .sidebar-foot .user-chip { flex: none; padding: 3px; }
  :root.nav-collapsed .user-meta { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  :root.nav-collapsed .sidebar-foot .icon-btn { width: 36px; height: 36px; }
}
@media (min-width: 901px) and (max-height: 840px) {
  .icon-btn.sb-toggle { top: 20px; }
  :root.nav-collapsed .brand { padding-bottom: 8px; }
  :root.nav-collapsed .nav-item { height: 40px; }
  :root.nav-collapsed .nav-label { margin: 8px auto 6px; }
  :root.nav-collapsed .sidebar-foot { gap: 2px; padding-top: 8px; }
  :root.nav-collapsed .sidebar-foot .icon-btn { width: 32px; height: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .sidebar, .shell, .icon-btn.sb-toggle, .sb-toggle .ic, .nav-item, .nav-item > span, .sb-tip { transition: none !important; }
  .brand-rail { animation: none !important; }
}

/* ---- เนื้อหาบอท LINE (แยกจากคู่มือของ Telegram) ---- */
.check-row.sub-opt { margin-left: 30px; }
.content-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 4px; }
.ask-row { display: flex; gap: 8px; align-items: stretch; }
.ask-row input { flex: 1; min-width: 0; width: auto; }
.ask-row button { flex-shrink: 0; }
.ask-result { margin-top: 14px; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface-2); }
.ask-result.ok { border-color: #bfe5cf; background: var(--pine-tint); }
.ask-result.miss { border-color: #f0d9a8; background: var(--amber-tint); }
[data-theme="dark"] .ask-result.ok { border-color: #1f5a41; background: rgba(23, 138, 93, .14); }
[data-theme="dark"] .ask-result.miss { border-color: #6b5320; background: rgba(217, 164, 0, .12); }
.ask-meta { font-size: .88rem; color: var(--ink-2); line-height: 1.9; }
.ask-answer { margin-top: 8px; padding: 12px 14px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); white-space: pre-wrap; word-break: break-word; line-height: 1.7; }
@media (max-width: 700px) { .ask-row { flex-direction: column; } .check-row.sub-opt { margin-left: 8px; } }

/* ---- แถบบอกโหมดบอท LINE ในหน้ารออนุมัติ LINE ---- */
.mode-note { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.mode-note > div { flex: 1 1 320px; min-width: 0; }
.mode-note form { flex-shrink: 0; }
.note.mode-note.ok { border-color: var(--pine); background: var(--pine-tint); color: #0a4d33; }
[data-theme="dark"] .note.mode-note.ok { color: #9fe3c2; background: rgba(23, 138, 93, .14); }

/* ---- เมนูข้าง: กลุ่ม "ระบบ" พับเก็บได้ ---- */
.nav-group-sys { display: flex; flex-direction: column; }
.nav-fold { display: flex; align-items: center; justify-content: space-between; cursor: pointer; user-select: none; border-radius: 8px; transition: color .15s, background .15s; }
.nav-fold:hover { color: var(--ink); background: rgba(0, 0, 0, .035); }
[data-theme="dark"] .nav-fold:hover { background: rgba(255, 255, 255, .06); }
.nav-fold:focus-visible { outline: none; box-shadow: var(--focus); }
.nav-fold-ic { display: grid; place-items: center; margin-right: 4px; transition: transform .24s cubic-bezier(.22, .8, .24, 1); }
.nav-group-sys.is-folded .nav-fold-ic { transform: rotate(-90deg); }
.nav-fold-body { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .24s cubic-bezier(.22, .8, .24, 1); }
.nav-fold-inner { display: flex; flex-direction: column; gap: 2px; overflow: hidden; min-height: 0; }
.nav-group-sys.is-folded .nav-fold-body { grid-template-rows: 0fr; }
.nav-group-sys.is-folded .nav-fold-inner { visibility: hidden; transition: visibility 0s .24s; }
@media (min-width: 901px) and (max-height: 840px) { .nav-fold-inner { gap: 0; } }
@media (min-width: 901px) {
  /* แถบไอคอน: กลุ่มระบบแสดงเสมอ (หัวข้อเหลือเป็นเส้นคั่น) */
  :root.nav-collapsed .nav-fold { pointer-events: none; cursor: default; }
  :root.nav-collapsed .nav-fold-ic { display: none; }
  :root.nav-collapsed .nav-fold-inner { align-items: center; }
  :root.nav-collapsed .nav-group-sys.is-folded .nav-fold-body { grid-template-rows: 1fr; }
  :root.nav-collapsed .nav-group-sys.is-folded .nav-fold-inner { visibility: visible; }
}
@media (prefers-reduced-motion: reduce) {
  .nav-fold-body, .nav-fold-ic, .nav-fold-inner { transition: none !important; }
}

/* ตัวดันกลุ่ม LINE ลงล่างสุด: พับเมนูระบบ -> หดเป็น 0 แล้วกลุ่ม LINE เลื่อนขึ้นมาต่อท้ายอย่างนุ่มนวล */
.nav-spacer { flex: 1 1 0; min-height: 0; transition: flex-grow .24s cubic-bezier(.22, .8, .24, 1); }
.nav-group-sys.is-folded ~ .nav-spacer { flex-grow: 0; }
@media (min-width: 901px) {
  :root.nav-collapsed .nav-group-sys.is-folded ~ .nav-spacer { flex-grow: 1; }  /* แถบไอคอนแสดงกลุ่มระบบเสมอ: LINE อยู่ล่างสุดตามเดิม */
}
@media (prefers-reduced-motion: reduce) { .nav-spacer { transition: none !important; } }

/* ---- ปุ่ม "วิเคราะห์แชทนี้ใหม่" ในหน้ารออนุมัติ ---- */
.rv-reanalyze { display: flex; align-items: center; gap: 10px 12px; flex-wrap: wrap; margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--line-2); }
.rv-reanalyze .rv-muted { flex: 1 1 200px; font-size: .84rem; line-height: 1.5; }

.rv-mini-row { display: inline-flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.dt-msg .rv-ai-status { margin: 0 0 10px; }

/* =====================================================================
   หน้า รออนุมัติ — ชุดตกแต่งแบบทางการ (ทับกฎด้านบน ไม่เปลี่ยนโครงสร้างหรือสคริปต์)
   หลักการ: คงโทนกระดาษ-หมึก-เขียวสนเดิม · มุมโค้งน้อย · เส้นบางละเอียด · สีเขียวเข้มใช้กับปุ่มหลักปุ่มเดียว
   ไม่มีไอคอนประกาย/ป้ายพาสเทลทรงแคปซูล/เงาเรืองแสง · หัวข้อส่วนเป็นแบบฟอร์มเอกสาร (ตัวหนา + เส้นใต้)
   ===================================================================== */
.rv {
  --rv-in: #f6f5f1;
  --rv-out-bg: #ecf2ee;
  --rv-out-line: #cfddd4;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(28, 27, 25, .04), 0 18px 40px -26px rgba(28, 27, 25, .3);
}
[data-theme="dark"] .rv { --rv-in: #171815; --rv-out-bg: #16281f; --rv-out-line: #25402f; box-shadow: 0 1px 2px rgba(0, 0, 0, .4); }

/* แท็บสถานะ */
.rv-tabs { margin-bottom: 20px; }
.rv-tab { padding: 12px 18px; font-size: .96rem; font-weight: 600; }
.rv-tab b { min-width: 22px; padding: 0 6px; border-radius: 4px; font-size: .74rem; line-height: 1.65; }

/* คิวทางซ้าย: แท็บแบบเส้นใต้แทนปุ่มแคปซูล · ไม่มีไอคอนสี */
.rv-seg { margin: 0; padding: 0 8px; gap: 0; background: var(--surface); border-radius: 0; border-bottom: 1px solid var(--line); }
.rv-seg a { padding: 15px 8px 13px; margin-bottom: -1px; border-radius: 0; border-bottom: 2px solid transparent; font-size: .92rem; font-weight: 650; color: var(--muted); }
.rv-seg a:hover { color: var(--ink); }
.rv-seg a.on { background: none; box-shadow: none; color: var(--ink); border-bottom-color: var(--pine); }
.rv-seg .cicon { display: none; }
.rv-seg b { padding: 0 6px; border-radius: 4px; background: var(--grey-tint); font-size: .72rem; line-height: 1.7; }
.rv-seg b.hot { background: var(--red-tint); color: var(--red); }
.rv-list { border-top: 0; }
.rv.empty .rv-seg { width: min(420px, 100%); padding: 0 8px; background: none; }
.rv-it-top strong { font-size: 1rem; font-weight: 650; letter-spacing: -.005em; }
.rv-it-snip { color: var(--muted); font-size: .9rem; line-height: 1.5; }
.rv-it-tags { margin-top: 5px; }
.rv-chip { padding: 0 7px; border-radius: 4px; background: var(--grey-tint); color: var(--ink-2); font-size: .72rem; font-weight: 600; letter-spacing: .01em; line-height: 1.75; }
.rv-un { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; font-size: .72rem; }

/* หัวแผงรายละเอียด */
.rv-ph-text h2 { font-size: 1.22rem; font-weight: 700; letter-spacing: -.012em; }
.rv-ph-text p { margin-top: 3px; gap: 2px 10px; font-size: .84rem; }
.rv-ph-text p a { font-weight: 600; }
.rv-link, .rv .rv-collapse {
  align-items: center; height: 36px; padding: 0 14px; border: 1px solid var(--line-2); border-radius: 6px;
  background: var(--surface); color: var(--ink); font-size: .85rem; font-weight: 600; box-shadow: none;
}
.rv-link:hover, .rv .rv-collapse:hover { background: var(--surface-2); border-color: var(--ink-2); text-decoration: none; }

/* หัวข้อส่วน: ตัวหนา + เส้นใต้บางๆ เหมือนแบบฟอร์มเอกสาร */
.rv-label { min-height: 38px; margin: 0 0 12px; padding-bottom: 10px; border-bottom: 1px solid var(--line); color: var(--ink); font-size: .9rem; font-weight: 700; letter-spacing: .005em; }
.rv-label-row { min-height: 38px; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.rv-label-row .rv-label, .rv-pics > .rv-label { min-height: 0; margin: 0; padding: 0; border: 0; }
.rv-label-row label { font-size: .9rem; font-weight: 700; }
.rv-label .rv-muted, .rv-pics .rv-muted { font-size: .8rem; font-weight: 400; }
.rv-live { margin-left: 10px; padding: 0; background: none; color: var(--pine-2); font-size: .72rem; font-weight: 650; letter-spacing: .02em; }
.rv-live i { width: 6px; height: 6px; }
.rv-live.off { background: none; }
.rv-label .rv-legend { gap: 14px; font-size: .74rem; font-weight: 600; }
.rv-legend .r { color: var(--pine-2); }
.rv-aitag { padding: 1px 9px; border: 1px solid var(--line); border-radius: 4px; background: var(--grey-tint); color: var(--ink-2); font-size: .72rem; font-weight: 650; letter-spacing: .01em; }

/* บทสนทนา: พื้นกระดาษอ่อน ฟองมุมโค้งน้อย ลูกค้า = ขาว / ทีมงาน = เขียวหม่นอ่อนมาก */
.rv-convo { padding: 20px 20px 16px; gap: 3px; background: var(--rv-in); border: 1px solid var(--line); border-radius: 8px; }
.rv-msg { padding: 9px 14px 6px; margin-top: 10px; border-radius: 10px 10px 10px 3px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 1px 0 rgba(28, 27, 25, .03); }
.rv-msg:first-child { margin-top: 0; }
.rv-msg.out { border-radius: 10px 10px 3px 10px; background: var(--rv-out-bg); border-color: var(--rv-out-line); }
.rv-msg.cont { margin-top: 0; border-top-left-radius: 3px; }
.rv-msg.out.cont { border-top-left-radius: 10px; border-top-right-radius: 3px; }
.rv-meta b { font-size: .82rem; font-weight: 700; color: var(--ink-2); letter-spacing: .005em; }
.rv-msg.out .rv-meta b { color: var(--pine-2); }
.rv-meta em { padding: 0 6px; border-radius: 4px; font-size: .7rem; }
.rv-text { font-size: 1.07rem; line-height: 1.6; }
.rv-msg time { margin-top: 2px; font-size: .72rem; }
.rv-msg.target { border-color: #d9b46e; box-shadow: 0 0 0 3px rgba(161, 92, 7, .1); }
.rv-msg.picked { border-color: var(--pine); box-shadow: 0 0 0 3px var(--ring); }
.rv-img, .rv-photos img { border-radius: 6px; }
.rv-say { margin-top: 12px; }
.rv-say-row { padding: 6px 6px 6px 16px; border-radius: 8px; }
.rv .rv-say-btn { width: 38px; height: 38px; border-radius: 6px; }
.rv-replying { border: 1px solid var(--line); border-left: 3px solid var(--pine); border-radius: 6px; background: var(--surface-2); }
.rv-newmsg { border-radius: 6px; }

/* ร่างข้อความตอบกลับ */
.rv-compose textarea { padding: 16px 18px; border: 1px solid var(--line-2); border-radius: 8px; font-size: 1.07rem; line-height: 1.75; }
.rv-compose textarea:focus { outline: none; border-color: var(--pine); box-shadow: var(--focus); }
.rv-note { display: block; margin: 14px 0 0; padding: 11px 14px 12px; border: 1px solid var(--line); border-left: 3px solid var(--amber); border-radius: 6px; background: var(--surface-2); color: var(--ink-2); font-size: .88rem; line-height: 1.6; }
.rv-note b { display: block; margin: 0 0 3px; color: var(--amber); font-size: .76rem; font-weight: 700; letter-spacing: .02em; }

/* ปุ่ม: เหลี่ยมมนน้อย · ปุ่มเขียวมีปุ่มเดียว (อนุมัติและส่ง) · ปุ่มรองเป็นเส้นขอบ */
.rv .rv-btn { border-radius: 6px; font-weight: 600; }
.rv .rv-btn:hover { background: var(--surface-2); border-color: var(--ink-2); }
.rv .rv-btn.primary { border-radius: 6px; border-color: var(--pine-2); background: var(--pine); box-shadow: none; font-weight: 650; letter-spacing: .005em; }
.rv .rv-btn.primary:hover { background: var(--pine-2); border-color: var(--pine-2); }
.rv .rv-btn.soft { border-color: var(--line-2); background: var(--surface); color: var(--ink); }
.rv .rv-btn.soft:hover { background: var(--surface-2); border-color: var(--ink-2); }
.rv .rv-btn.danger { color: var(--red); }
.rv .rv-btn.danger:hover { background: var(--red-tint); border-color: #e3b1ab; }
.rv .rv-mini { border-radius: 6px; }
.rv .rv-chipbtn { border-radius: 6px; font-size: .84rem; }
.rv .rv-chipbtn:hover { background: var(--surface-2); border-color: var(--ink-2); color: var(--ink); }
.rv .rv-chipbtn.on { background: var(--surface-2); border-color: var(--ink-2); color: var(--ink); }
.rv .rv-chipbtn.no { color: var(--red); border-color: transparent; background: none; }
.rv .rv-chipbtn.no:hover, .rv .rv-chipbtn.no.on { background: var(--red-tint); border-color: #e3b1ab; color: var(--red); }

/* เครื่องมือปรับข้อความ */
.rv-tools { margin-top: 22px; padding-top: 0; border-top: 0; }
.rv-tools > .rv-tl:first-child { display: flex; margin: 0 0 12px; padding-bottom: 10px; border-bottom: 1px solid var(--line); color: var(--ink); font-size: .9rem; font-weight: 700; }
.rv-tools .rv-chips { margin-top: 14px; row-gap: 8px; }
.rv-tools .rv-chips .rv-tl { flex: 0 0 100%; margin: 0 0 -2px; color: var(--muted); font-size: .8rem; font-weight: 600; }
.rv-inline input { border-radius: 6px; }
.rv-tools .rv-inline.rv-own input { height: 42px; }
.rv .rv-tools .rv-inline.rv-own .rv-btn { height: 42px; }
.rv-reanalyze { flex-direction: column; align-items: flex-start; gap: 10px; margin-top: 20px; padding: 13px 16px 15px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); }
.rv-ra-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rv-ra-text b { color: var(--ink); font-size: .9rem; font-weight: 700; }
.rv-reanalyze .rv-ra-text .rv-muted { flex: none; font-size: .84rem; line-height: 1.6; }

/* ticket ที่รอส่งเข้ากลุ่มโปรแกรมเมอร์ */
.rv-facts { gap: 1px; padding: 0; border-radius: 8px; overflow: hidden; background: var(--line); }
.rv-facts > div { padding: 12px 16px; background: var(--surface-2); }
.rv-facts dt { margin-bottom: 3px; font-size: .74rem; font-weight: 700; letter-spacing: .02em; }
.rv-summary { font-size: 1rem; line-height: 1.75; }
.rv .rv-tg .tg-bubble { padding: 16px 20px; border: 1px solid var(--line); border-left: 3px solid var(--pine); border-radius: 8px; background: var(--surface-2); font-size: .96rem; line-height: 1.75; }
.rv .rv-tg textarea { padding: 16px 20px; border-radius: 8px; }

/* จอกว้าง: ระยะขอบแน่นแบบเอกสาร + เส้นแบ่งสองคอลัมน์ */
@media (min-width: 901px) {
  .rv-item { padding: 15px 20px 14px; }
  .rv-seg { padding: 0 10px; }
}
@media (min-width: 1181px) {
  .rv-ph { padding: 18px 28px 16px; }
  .rv-body { --rv-px: 28px; padding-top: 22px; padding-bottom: 26px; }
  .rv-foot { padding-left: 28px; padding-right: 28px; }
}
@container rvd (min-width: 940px) {
  .rv-cols { column-gap: 28px; }
  .rv-cols > .rv-side { padding-left: 28px; border-left: 1px solid var(--line); }
}

/* มือถือ/แท็บเล็ตแคบ: รายการเป็นการ์ดเหมือนเดิม */
@media (max-width: 900px) {
  .rv-seg { margin: 0 0 12px; padding: 0 6px; border: 1px solid var(--line); border-radius: 10px; }
  .rv-list { border-radius: 10px; box-shadow: none; }
  .rv-reanalyze .rv-btn { width: 100%; }
}

/* =====================================================================
   หน้าแชท (รายชื่อแชท + บันทึกการสนทนา) — ชุดตกแต่งแบบเรียบหรู
   คงโทนกระดาษ-หมึก-เขียวสนเดิม · หน้าแชทเป็นเอกสารบันทึกการสนทนา: คอลัมน์ข้อความกว้างพอดีอ่าน อยู่กลางพื้นที่
   ไม่มีวงกลมตัวอักษร/สีสุ่มของชื่อ/พื้นลายจุด/ป้ายแคปซูล · ข้อมูลแชทและเว็บไซต์อยู่แผงด้านข้าง
   ===================================================================== */
:root { --cd-in: #f7f6f2; --cd-out: #ecf2ee; --cd-out-line: #cfddd4; }
[data-theme="dark"] { --cd-in: #171815; --cd-out: #16281f; --cd-out-line: #25402f; }

/* หัวเรื่อง */
.cd-head { margin: 4px 0 26px; }
.cd-eyebrow { display: flex; align-items: center; gap: 12px; margin: 0 0 8px; color: var(--pine-2); font-size: .74rem; font-weight: 700; letter-spacing: .06em; }
.cd-eyebrow::before { content: ""; width: 24px; height: 2px; background: var(--pine); }
.cd-head h1 { font-size: 1.9rem; font-weight: 650; letter-spacing: -.015em; line-height: 1.25; overflow-wrap: anywhere; }
.cd-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; margin: 10px 0 0; color: var(--muted); font-size: .9rem; }
.cd-sub > span { display: inline-flex; align-items: center; gap: 7px; }
.cd-sub > span + span::before { content: ""; width: 1px; height: 12px; margin-right: 14px; margin-left: 14px; background: var(--line-2); }
.cd-state i, .cd-wait i { width: 7px; height: 7px; border-radius: 50%; background: var(--line-2); flex-shrink: 0; }
.cd-state.on { color: var(--pine-2); font-weight: 600; }
.cd-state.on i { background: var(--pine); box-shadow: 0 0 0 3px var(--ring); }
.cd-wait { color: var(--amber); font-weight: 600; }
.cd-wait i { width: 6px; height: 6px; background: var(--amber); }

/* โครงหน้า: บทสนทนา + แผงข้อมูลด้านข้าง */
.cd-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 28px; align-items: start; }
.cd-main { margin-bottom: 0; }
.cd-rail { position: sticky; top: 20px; display: flex; flex-direction: column; gap: 18px; }
.cd-card { padding: 20px 22px 22px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 1px 2px rgba(28, 27, 25, .04); }
.cd-card h2, .cd-card-title { display: block; margin: 0 0 14px; padding-bottom: 12px; border-bottom: 1px solid var(--line); color: var(--ink); font-size: .9rem; font-weight: 700; }
.cd-facts { display: grid; margin: 0; }
.cd-facts > div { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.cd-facts > div:first-child { padding-top: 0; }
.cd-facts > div:last-child { padding-bottom: 0; border-bottom: 0; }
.cd-facts dt { margin: 0; color: var(--muted); font-size: .84rem; }
.cd-facts dd { margin: 0; color: var(--ink); font-size: .9rem; font-weight: 600; text-align: right; }
.cd-facts dd.num { font-variant-numeric: tabular-nums; }
.cd-card.site-edit { display: block; margin: 0; padding: 20px 22px 22px; border: 1px solid var(--line); }
.cd-card.site-edit .field { gap: 0; }
.cd-card.site-edit .row { gap: 8px; }
.cd-card.site-edit .row input { height: 40px; min-width: 0; font-size: .84rem; }
.cd-card.site-edit .row button { height: 40px; }
.cd-card.site-edit .hint { margin-top: 10px; line-height: 1.6; }

/* แผงบทสนทนา */
.chat-panel { border-radius: 12px; box-shadow: 0 1px 2px rgba(28, 27, 25, .04), 0 18px 40px -28px rgba(28, 27, 25, .3); }
.chat-panel .panel-head { padding: 16px 28px; background: var(--surface); border-bottom: 1px solid var(--line); }
.chat-panel .panel-head h2 { font-size: .95rem; font-weight: 700; }
.chat-legend { gap: 20px; font-size: .78rem; font-weight: 600; color: var(--muted); }
.chat-legend i { width: 14px; height: 10px; margin-right: 8px; border-radius: 3px; vertical-align: 0; }
.lg-in { background: var(--surface); border: 1px solid var(--line-2); }
.lg-out { background: var(--cd-out); border: 1px solid var(--cd-out-line); }
[data-theme="dark"] .lg-out { background: var(--cd-out); border-color: var(--cd-out-line); }
.chat-panel .chatview {
  gap: 3px; min-height: 320px; max-height: calc(100vh - 330px); max-height: calc(100svh - 330px); padding: 28px max(24px, calc((100% - 860px) / 2)) 36px;
  background: var(--cd-in);
}
.chat-panel .day-sep { position: static; justify-content: stretch; align-items: center; gap: 18px; margin: 20px 0 12px; padding: 6px 0; background: var(--cd-in); }
.chat-panel .day-sep:first-child { margin-top: 0; }
.chat-panel .day-sep::before, .chat-panel .day-sep::after { content: ""; flex: 1; height: 1px; background: var(--line-2); opacity: .7; }
.chat-panel .day-sep span { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; color: var(--muted); font-size: .74rem; font-weight: 700; letter-spacing: .04em; }

/* ข้อความ: การ์ดมุมโค้งน้อย ลูกค้า = ขาว / ทีมงาน = เขียวหม่นอ่อนมาก */
.chat-panel .cm { gap: 0; max-width: min(640px, 86%); }
.chat-panel .cm.first { margin-top: 14px; }
.chat-panel .cm:first-child, .chat-panel .day-sep + .cm { margin-top: 0; }
.chat-panel .cm .cm-bubble { min-width: 0; padding: 9px 15px 7px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); box-shadow: 0 1px 0 rgba(28, 27, 25, .03); }
.chat-panel .cm.out .cm-bubble { border-color: var(--cd-out-line); background: var(--cd-out); }
.chat-panel .cm.in.last .cm-bubble { border-bottom-left-radius: 10px; }
.chat-panel .cm.out.last .cm-bubble { border-bottom-right-radius: 10px; }
.chat-panel .cm.in:not(.first) .cm-bubble { border-top-left-radius: 3px; }
.chat-panel .cm.in:not(.last) .cm-bubble { border-bottom-left-radius: 3px; }
.chat-panel .cm.out:not(.first) .cm-bubble { border-top-right-radius: 3px; }
.chat-panel .cm.out:not(.last) .cm-bubble { border-bottom-right-radius: 3px; }
.chat-panel .cm-name { gap: 8px; margin-bottom: 3px; font-size: .78rem; }
.chat-panel .cm-who { color: var(--ink-2); font-weight: 700; letter-spacing: .005em; }
.chat-panel .cm.out .cm-who { color: var(--pine-2); }
.chat-panel .cm-user { color: var(--muted); font-size: .74rem; font-weight: 400; }
.chat-panel .cm-badge { padding: 0 6px; border: 1px solid var(--cd-out-line); border-radius: 3px; background: transparent; color: var(--pine-2); font-size: .66rem; font-weight: 700; letter-spacing: .02em; line-height: 1.6; }
.chat-panel .cm-text { font-size: 1.02rem; line-height: 1.65; }
.chat-panel .cm-text a { color: var(--pine-2); text-decoration: underline; text-decoration-color: rgba(8, 102, 63, .35); text-underline-offset: 3px; }
.chat-panel .cm-note { color: var(--muted); font-size: .86rem; font-style: normal; }
.chat-panel .cm-bubble.sticker { border: 1px dashed var(--line-2); background: transparent; box-shadow: none; }
.chat-panel .cm-photo img { border-radius: 6px; }
.chat-panel .cm-foot { gap: 10px; margin-top: 3px; font-variant-numeric: tabular-nums; }
.chat-panel .cm-wait { color: var(--amber); font-weight: 600; }

/* รายชื่อแชท */
.strip-quiet { gap: 12px; }
.strip-quiet .strip-cell, .strip-quiet .strip-cell:last-child, .strip-quiet .strip-cell:nth-child(2n) { padding: 16px 20px; border-radius: 10px; box-shadow: none; }
.strip-quiet .strip-ic { width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); }
.strip-quiet .strip-ic .cicon { filter: grayscale(1) contrast(.9); opacity: .72; }
.strip-quiet .strip-label { color: var(--muted); font-size: .78rem; font-weight: 600; letter-spacing: .02em; }
.strip-quiet .strip-value { font-family: inherit; font-size: 1.55rem; font-weight: 600; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.chat-list { border-radius: 12px; box-shadow: 0 1px 2px rgba(28, 27, 25, .04), 0 18px 40px -30px rgba(28, 27, 25, .28); }
.chat-list .panel-head { padding: 18px 24px; background: var(--surface); }
.chat-list .panel-head h2 { font-size: .95rem; font-weight: 700; }
.chat-list .panel-head .count { font-family: inherit; font-size: .8rem; }
.chat-list .toolbar { padding: 14px 24px; background: var(--surface); }
.chat-list .toolbar .search input { height: 40px; border-radius: 6px; background: var(--surface-2); }
.chat-list .seg { padding: 3px; border-radius: 8px; }
.chat-list .seg button { border-radius: 6px; }
.chat-table th { padding: 12px 18px; background: var(--surface-2); color: var(--muted); font-size: .72rem; font-weight: 700; letter-spacing: .04em; }
.chat-table td { padding: 16px 18px; }
.chat-table th:first-child, .chat-table td:first-child { padding-left: 24px; }
.chat-table th:last-child, .chat-table td:last-child { padding-right: 24px; }
.chat-table tbody tr:hover { background: var(--surface-2); }
.chat-table td .title-link { font-size: 1rem; font-weight: 650; letter-spacing: -.005em; }
.chat-table .state, .chat-table .state.ok, .chat-table .state.bad, .chat-table .state.warn, .chat-table .state.off { padding: 0; border-radius: 0; background: none; font-size: .84rem; font-weight: 600; }
.chat-table .tag { padding: 1px 8px; border-radius: 4px; }
.chat-table .unread-pill { padding: 0 7px; border-radius: 4px; }

@media (max-width: 1100px) {
  .cd-layout { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .cd-rail { position: static; }
}
@media (max-width: 640px) {
  .cd-head { margin-bottom: 18px; }
  .cd-head h1 { font-size: 1.5rem; }
  .cd-sub { gap: 4px 16px; }
  .cd-sub > span + span::before { display: none; }
  .chat-panel .panel-head { padding: 13px 16px; }
  .chat-panel .chatview { padding: 18px 14px 24px; max-height: 70vh; max-height: 70svh; }
  .chat-panel .cm { max-width: 94%; }
  .cd-card, .cd-card.site-edit { padding: 18px 18px 20px; }
  .chat-list .panel-head, .chat-list .toolbar { padding-left: 16px; padding-right: 16px; }
}

/* =====================================================================
   หน้ารออนุมัติ — ชุดเรียบหรู รอบ 2 (ต่อจากชุดทางการ)
   หัวเรื่องแบบจดหมาย (เส้นเขียวบางบนกรอบ + หัวเรื่องตัวใหญ่) · แท็บตัวเลขเงียบ · ป้าย ticket เป็นตัวอักษรเล็ก
   แถบตัดสินใจสองปุ่ม [ไม่ส่ง] [อนุมัติและส่ง] · ช่องเหตุผลที่ไม่ส่งอยู่ใต้ปุ่ม · เปลี่ยนรายการแบบเฟดนุ่มๆ
   ===================================================================== */

/* แท็บสถานะ: ตัวเลขเป็นตัวอักษรเงียบๆ มีเฉพาะรออนุมัติที่เป็นป้ายแดง */
.rv-tab { padding: 12px 20px 13px; }
.rv-tab b { min-width: 0; padding: 0; border-radius: 0; background: none; color: var(--muted); font-size: .8rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.rv-tab.on b { background: none; color: var(--ink-2); }
.rv-tab b.hot { min-width: 22px; padding: 0 7px; border-radius: 10px; background: var(--red-tint); color: var(--red); }
.rv-tab.on b.hot { background: var(--red); color: #fff; }

/* กรอบหลัก: เส้นเขียวบางด้านบนเหมือนหัวจดหมาย */
.rv { position: relative; }
.rv::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; background: var(--pine); z-index: 3; pointer-events: none; }
.rv.empty::before { display: none; }

/* คิวทางซ้าย */
.rv-item { transition: background .15s; }
.rv-it-top time { font-size: .74rem; font-variant-numeric: tabular-nums; }
.rv-chip:not(.line):not(.ok):not(.info):not(.bad):not([class*="sev-"]) {
  padding: 0; border-radius: 0; background: none; color: var(--muted); font-family: var(--mono); font-size: .72rem; font-weight: 500; letter-spacing: 0;
}

/* เปลี่ยนรายการ: เฟดเข้าเบาๆ */
@keyframes rv-fade { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
.rv.js .rv-pane.on { animation: rv-fade .24s ease-out; }
@media (prefers-reduced-motion: reduce) { .rv.js .rv-pane.on { animation: none; } }

/* แถบตัดสินใจ: [ไม่ส่ง] [อนุมัติและส่ง] */
.rv .rv-send { gap: 12px; }
.rv .rv-send .rv-btn.primary { width: auto; flex: 1 1 auto; }
.rv .rv-decline { height: 50px; padding: 0 26px; border-color: var(--line-2); background: var(--surface); color: var(--ink-2); font-size: 1rem; font-weight: 600; }
.rv .rv-decline:hover, .rv .rv-decline.on { border-color: #d49a92; background: var(--red-tint); color: var(--red); }
.rv-side > .rv-rej { margin: 12px 0 0; padding: 12px; border: 1px solid #e3b1ab; border-radius: 8px; background: var(--red-tint); }
.rv-side > .rv-rej input { background: var(--surface); }
[data-theme="dark"] .rv-side > .rv-rej { border-color: #6e2f28; }
[data-theme="dark"] .rv .rv-decline:hover, [data-theme="dark"] .rv .rv-decline.on { border-color: #6e2f28; }

@media (min-width: 901px) {
  .rv-ph { padding-top: 20px; padding-bottom: 18px; }
}
@container rvd (min-width: 940px) {
  .rv-cols .rv-compose textarea { min-height: 150px; }
}
@media (max-width: 900px) {
  .rv::before { display: none; }
  .rv .rv-decline { height: 52px; padding: 0 20px; }
  .rv-side > .rv-rej { margin-top: 10px; }
}

/* =====================================================================
   หน้ารออนุมัติ — ชุดหรูหรา รอบ 3 (เขียวป่าเข้ม + งาช้าง + ทองเหลืองบาง)
   คิวทางซ้ายเป็นแผงเขียวป่าเข้มตัวอักษรงาช้าง · เส้น/จุดเน้นเป็นสีทองเหลืองอ่อน (ใช้เฉพาะรายละเอียดเล็กๆ)
   พื้นที่อ่านและเขียนทางขวายังเป็นกระดาษงาช้างสว่าง เพื่ออ่านง่ายทั้งวัน · ปุ่มหลักเขียวป่าเข้มขอบทองบาง
   ===================================================================== */
.rv {
  --lux-ink: #0f2a21;
  --lux-ink-2: #173a2d;
  --lux-line: rgba(243, 238, 226, .1);
  --lux-text: #f3eee2;
  --lux-mute: #9fb4a8;
  --brass: #c4a062;
  --brass-d: #8f7236;
  --rv-in: #f6f3ec;
  --rv-out-bg: #e8efe9;
  --rv-out-line: #c9d9ce;
}
[data-theme="dark"] .rv { --lux-ink: #0b1c15; --lux-ink-2: #122a20; --brass-d: #d1b274; --rv-in: #171815; --rv-out-bg: #16281f; --rv-out-line: #25402f; }

/* หัวหน้า + แท็บ */
.rv-tab.on { border-bottom-color: #0f2a21; }
[data-theme="dark"] .rv-tab.on { border-bottom-color: #c4a062; }

/* เส้นหัวจดหมาย: ทองเหลืองบาง */
.rv::before { background: var(--brass); height: 2px; }

/* คิวทางซ้าย: แผงเขียวป่าเข้ม */
.rv-queue { background: var(--lux-ink); border-right: 0; color: var(--lux-text); }
.rv-seg { background: transparent; border-bottom: 1px solid var(--lux-line); }
.rv-seg a { color: var(--lux-mute); }
.rv-seg a:hover { color: var(--lux-text); }
.rv-seg a.on { background: none; color: var(--lux-text); border-bottom-color: var(--brass); }
.rv-seg b { background: rgba(243, 238, 226, .08); color: var(--lux-mute); }
.rv-seg b.hot { background: var(--brass); color: #1d1709; }
.rv-list { scrollbar-color: rgba(243, 238, 226, .22) transparent; }
.rv-item { border-bottom: 1px solid var(--lux-line); color: var(--lux-text); }
.rv-item:hover { background: rgba(243, 238, 226, .045); }
.rv-item.on { background: var(--lux-ink-2); }
.rv-item.on::before { background: var(--brass); }
.rv-item:focus-visible { box-shadow: inset 0 0 0 2px var(--brass); }
.rv-it-top strong { color: var(--lux-text); }
.rv-it-top time { color: var(--lux-mute); }
.rv-it-snip { color: #b6c6bb; }
.rv-item.unread .rv-it-top strong { color: #fff; }
.rv-item.unread .rv-it-snip { color: #fff; }
.rv-item.unread .rv-it-top time { color: var(--brass); }
.rv-un { background: var(--brass); color: #1d1709; }
.rv-queue .rv-tid { color: var(--brass); }
.rv-queue .rv-chip:not(.line):not(.ok):not(.info):not(.bad):not([class*="sev-"]) { color: var(--lux-mute); }
.rv-queue .rv-chip.line { background: rgba(6, 199, 85, .16); color: #78e7a2; }
.rv-queue .rv-chip.ok { background: rgba(56, 226, 145, .14); color: #86e6bd; }
.rv-queue .rv-chip.info { background: rgba(134, 168, 255, .16); color: #b0c5ff; }
.rv-queue .rv-chip.bad, .rv-queue .rv-chip.sev-high, .rv-queue .rv-chip.sev-critical { background: rgba(242, 107, 91, .17); color: #f7a498; }
.rv-queue .rv-chip.sev-medium { background: rgba(231, 169, 72, .17); color: #f0c77c; }
.rv-queue .rv-chip.sev-low { background: rgba(56, 226, 145, .13); color: #86e6bd; }

/* คิวว่าง: กลับเป็นพื้นสว่าง */
.rv.empty .rv-queue { color: var(--ink); }
.rv.empty .rv-seg { background: none; border-bottom-color: var(--line); }
.rv.empty .rv-seg a { color: var(--muted); }
.rv.empty .rv-seg a:hover { color: var(--ink); }
.rv.empty .rv-seg a.on { color: var(--ink); border-bottom-color: var(--lux-ink); }
.rv.empty .rv-seg b { background: var(--grey-tint); color: var(--muted); }
.rv.empty .rv-seg b.hot { background: var(--red-tint); color: var(--red); }

/* พื้นที่อ่าน/เขียนทางขวา */
.rv-convo { background: var(--rv-in); }
.rv-note { border-left-color: var(--brass); }
.rv-note b { color: var(--brass-d); }
.rv-replying { border-left-color: var(--brass); }
.rv-replying { color: var(--ink-2); }
.rv .rv-btn.primary { border-color: #0a1d16; background: var(--lux-ink); box-shadow: inset 0 0 0 1px rgba(196, 160, 98, .42); }
.rv .rv-btn.primary:hover { border-color: #0a1d16; background: var(--lux-ink-2); }
.rv .rv-say-btn { background: var(--lux-ink); box-shadow: inset 0 0 0 1px rgba(196, 160, 98, .42); }
.rv .rv-say-btn:hover { background: var(--lux-ink-2); }
[data-theme="dark"] .rv .rv-btn.primary { border-color: #127350; background: #178a5d; box-shadow: none; }
[data-theme="dark"] .rv .rv-btn.primary:hover { background: #1c9d6a; }
[data-theme="dark"] .rv .rv-say-btn { background: #178a5d; box-shadow: none; }
.rv-compose textarea:focus { border-color: var(--lux-ink); box-shadow: 0 0 0 3px rgba(196, 160, 98, .28); }
.rv-say-row:focus-within { border-color: var(--lux-ink); box-shadow: 0 0 0 3px rgba(196, 160, 98, .28); }
[data-theme="dark"] .rv-compose textarea:focus, [data-theme="dark"] .rv-say-row:focus-within { border-color: var(--brass); }
.rv .rv-tg .tg-bubble { border-left-color: var(--brass); }

/* มือถือ: รายการเป็นการ์ดเขียวป่าเข้ม */
@media (max-width: 900px) {
  .rv-seg { background: var(--lux-ink); border: 0; border-radius: 12px 12px 0 0; margin-bottom: 0; }
  .rv-list { background: var(--lux-ink); border: 0; border-radius: 0 0 12px 12px; box-shadow: none; }
  .rv.empty .rv-seg { background: none; border: 0; border-radius: 0; }
}

/* =====================================================================
   หน้ารออนุมัติ — รอบ 4: เปลี่ยนโทนเป็นน้ำเงินกรมท่าเข้ม + ทองเหลือง + งาช้าง (ไม่มีสีเขียวในหน้านี้) และขยายขนาดทั้งหน้า
   ค่าสีทั้งหมดอยู่ที่ตัวแปรของ .rvpage ด้านล่าง — เปลี่ยนโทนอีกครั้งแก้ที่นี่ที่เดียว
   (--pine/--pine-2/--pine-tint/--ring/--focus ถูกกำหนดใหม่เฉพาะในหน้านี้ จึงไม่กระทบหน้าอื่น)
   ===================================================================== */
.rvpage {
  --pine: #1e3a5f;
  --pine-2: #142a47;
  --pine-tint: #e8edf5;
  --ring: rgba(30, 58, 95, .16);
  --focus: 0 0 0 3px rgba(196, 160, 98, .38);
  --lux-ink: #121f36;
  --lux-ink-2: #1b2d4e;
  --lux-line: rgba(241, 237, 227, .11);
  --lux-text: #f1ede3;
  --lux-mute: #a3b0c6;
  --brass: #c4a062;
  --brass-d: #8f7236;
  --rv-in: #f5f3ee;
  --rv-out-bg: #e9edf4;
  --rv-out-line: #ccd5e3;
}
[data-theme="dark"] .rvpage {
  --pine: #9db9e6;
  --pine-2: #b9cdee;
  --pine-tint: #16233a;
  --ring: rgba(157, 185, 230, .22);
  --lux-ink: #0b1424;
  --lux-ink-2: #131f37;
  --brass-d: #d1b274;
  --rv-in: #171815;
  --rv-out-bg: #17233a;
  --rv-out-line: #2a3d5e;
}
/* ตัวแปรของชุดรอบ 3 ถูกกำหนดที่ .rv — ให้ค่าของ .rvpage ชนะ */
.rvpage .rv { --lux-ink: #121f36; --lux-ink-2: #1b2d4e; --lux-text: #f1ede3; --lux-mute: #a3b0c6; --rv-in: #f5f3ee; --rv-out-bg: #e9edf4; --rv-out-line: #ccd5e3; }
[data-theme="dark"] .rvpage .rv { --lux-ink: #0b1424; --lux-ink-2: #131f37; --rv-in: #171815; --rv-out-bg: #17233a; --rv-out-line: #2a3d5e; }

/* สีที่เคยฝังเป็นเขียวไว้ในชุดก่อนหน้า */
.rvpage .rv-tab.on { border-bottom-color: var(--lux-ink); }
[data-theme="dark"] .rvpage .rv-tab.on { border-bottom-color: var(--brass); }
.rvpage .rv .rv-btn.primary { border-color: #0a1220; background: var(--lux-ink); box-shadow: inset 0 0 0 1px rgba(196, 160, 98, .45); }
.rvpage .rv .rv-btn.primary:hover { border-color: #0a1220; background: var(--lux-ink-2); }
.rvpage .rv .rv-say-btn { background: var(--lux-ink); box-shadow: inset 0 0 0 1px rgba(196, 160, 98, .45); }
.rvpage .rv .rv-say-btn:hover { background: var(--lux-ink-2); }
[data-theme="dark"] .rvpage .rv .rv-btn.primary { border-color: #35598f; background: #2a4a7c; box-shadow: none; }
[data-theme="dark"] .rvpage .rv .rv-btn.primary:hover { background: #335a96; }
[data-theme="dark"] .rvpage .rv .rv-say-btn { background: #2a4a7c; box-shadow: none; }
[data-theme="dark"] .rvpage .rv .rv-say-btn:hover { background: #335a96; }
[data-theme="dark"] .rvpage .rv-un { background: var(--brass); color: #1d1709; }
@keyframes rv-pulse { 0% { box-shadow: 0 0 0 0 rgba(30, 58, 95, .5); } 70%, 100% { box-shadow: 0 0 0 7px rgba(30, 58, 95, 0); } }
[data-theme="dark"] .rvpage .rv-live i { animation-name: rv-pulse-dark; }
@keyframes rv-pulse-dark { 0% { box-shadow: 0 0 0 0 rgba(157, 185, 230, .5); } 70%, 100% { box-shadow: 0 0 0 7px rgba(157, 185, 230, 0); } }
.rvpage .rv-chip.line { background: var(--grey-tint); color: var(--ink-2); }
.rvpage .rv-queue .rv-chip.line { background: rgba(241, 237, 227, .1); color: #e4dfd2; }
.rvpage .rv-queue .rv-chip.ok { background: rgba(196, 160, 98, .2); color: #e8d3a4; }
.rvpage .rv-queue .rv-chip.sev-low { background: rgba(163, 176, 198, .17); color: #c8d3e6; }
.rvpage .rv-queue .rv-chip.info { background: rgba(134, 168, 255, .17); color: #b8caff; }
.rvpage .rv-compose textarea:focus, .rvpage .rv-say-row:focus-within { border-color: var(--lux-ink); box-shadow: 0 0 0 3px rgba(196, 160, 98, .3); }
[data-theme="dark"] .rvpage .rv-compose textarea:focus, [data-theme="dark"] .rvpage .rv-say-row:focus-within { border-color: var(--brass); }

/* =========== ขยายขนาดทั้งหน้า (จอกว้าง) =========== */
@media (min-width: 901px) {
  .rvpage .rv-tabs { margin-bottom: 24px; }
  .rvpage .rv-tab { padding: 15px 26px 16px; font-size: 1.08rem; }
  .rvpage .rv-tab b { font-size: .9rem; }
  .rvpage .rv-tab b.hot { min-width: 27px; padding: 0 9px; }

  .rvpage .rv-seg a { padding: 15px 8px 13px; font-size: .96rem; }
  .rvpage .rv-seg b { padding: 0 7px; font-size: .76rem; }
  .rvpage .rv-item { gap: 10px; padding: 14px 18px 13px; }
  .rvpage .rv-it-main { gap: 3px; }
  .rvpage .rv-it-top strong { font-size: 1.02rem; }
  .rvpage .rv-it-top time { font-size: .76rem; }
  .rvpage .rv-it-snip { font-size: .92rem; line-height: 1.5; }
  .rvpage .rv-it-tags { margin-top: 4px; }
  .rvpage .rv-chip { font-size: .72rem; }
  .rvpage .rv-un { min-width: 22px; height: 22px; font-size: .76rem; }

  .rvpage .rv-ph { padding: 24px 28px 22px; }
  .rvpage .rv-ph-text h2 { font-size: 1.55rem; }
  .rvpage .rv-ph-text p { margin-top: 5px; font-size: .98rem; }
  .rvpage .rv-link, .rvpage .rv .rv-collapse { height: 42px; padding: 0 18px; font-size: .98rem; }
  .rvpage .rv-body { --rv-px: 28px; padding-top: 26px; padding-bottom: 30px; }

  .rvpage .rv-label { min-height: 44px; font-size: 1.04rem; }
  .rvpage .rv-label-row { min-height: 44px; }
  .rvpage .rv-label-row label { font-size: 1.04rem; }
  .rvpage .rv-label .rv-legend { font-size: .86rem; }
  .rvpage .rv-live { font-size: .82rem; }
  .rvpage .rv-aitag { padding: 2px 11px; font-size: .82rem; }

  .rvpage .rv-convo { padding: 22px 18px 18px; }
  .rvpage .rv-msg { max-width: 92%; padding: 12px 19px 9px; }
  .rvpage .rv-text { font-size: 1.22rem; line-height: 1.68; }
  .rvpage .rv-meta b { font-size: .98rem; }
  .rvpage .rv-meta em { font-size: .8rem; }
  .rvpage .rv-msg time { font-size: .82rem; }
  .rvpage .rv-say { margin-top: 14px; }
  .rvpage .rv .rv-say-row textarea { font-size: 1.14rem; }
  .rvpage .rv-say-row { padding: 8px 8px 8px 18px; }
  .rvpage .rv .rv-say-btn { width: 46px; height: 46px; }

  .rvpage .rv-compose textarea { padding: 20px 24px; font-size: 1.22rem; line-height: 1.8; }
  .rvpage .rv-note { padding: 14px 18px 15px; font-size: 1rem; }
  .rvpage .rv-note b { font-size: .84rem; }
  .rvpage .rv-ai-status { font-size: .96rem; }

  .rvpage .rv .rv-btn { height: 46px; padding: 0 22px; font-size: 1.02rem; }
  .rvpage .rv .rv-btn.primary, .rvpage .rv .rv-send .rv-btn.primary { height: 58px; font-size: 1.14rem; }
  .rvpage .rv .rv-decline { height: 58px; padding: 0 32px; font-size: 1.08rem; }
  .rvpage .rv-send { padding-top: 16px; padding-bottom: 16px; }
  .rvpage .rv-side > .rv-rej input { height: 46px; font-size: 1rem; }
  .rvpage .rv .rv-mini { height: 36px; padding: 0 13px; font-size: .9rem; }

  .rvpage .rv-tools { margin-top: 26px; }
  .rvpage .rv-tools > .rv-tl:first-child { font-size: 1.04rem; }
  .rvpage .rv-tools .rv-inline.rv-own input { height: 48px; font-size: 1.02rem; }
  .rvpage .rv .rv-tools .rv-inline.rv-own .rv-btn { height: 48px; }
  .rvpage .rv .rv-chipbtn { height: 40px; padding: 0 17px; font-size: .98rem; }
  .rvpage .rv-tools .rv-chips .rv-tl { font-size: .9rem; }
  .rvpage .rv-reanalyze { padding: 16px 20px 18px; }
  .rvpage .rv-ra-text b { font-size: 1.02rem; }
  .rvpage .rv-reanalyze .rv-ra-text .rv-muted { font-size: .96rem; }

  .rvpage .rv-facts dt { font-size: .84rem; }
  .rvpage .rv-facts dd { font-size: 1.04rem; }
  .rvpage .rv-facts > div { padding: 15px 20px; }
  .rvpage .rv-summary { font-size: 1.12rem; }
  .rvpage .rv .rv-tg .tg-bubble { padding: 20px 26px; font-size: 1.08rem; }
  .rvpage .rv .rv-tg textarea { padding: 20px 26px; font-size: 1.08rem; }
  .rvpage .rv-foot { padding: 18px 28px; }
  .rvpage .rv-hint { font-size: .92rem; }
  .rvpage .rv-hero h3 { font-size: 1.35rem; }
  .rvpage .rv-hero p { font-size: 1.02rem; }
}
/* ให้ฝั่งแชทกว้างกว่าเดิม (สัดส่วน 2.2 : 1) — ฝั่งร่างคำตอบคงกว้างพอไม่ต่ำกว่า 380px */
@container rvd (min-width: 940px) {
  .rvpage .rv-cols { grid-template-columns: minmax(0, 2.2fr) minmax(380px, 1fr); column-gap: 24px; }
  .rvpage .rv-cols > .rv-side { padding-left: 24px; }
}
/* คิวแคบและกะทัดรัด (280–320px) เพื่อยกพื้นที่ให้ช่องแชท */
@media (min-width: 1181px) {
  .rvpage .rv:not(.collapsed):not(.empty) { grid-template-columns: minmax(280px, 320px) minmax(0, 1fr); }
}

/* หัวเรื่องหน้ารออนุมัติ: ซ่อนบนจอ (ให้กล่องสูงขึ้น) แต่คงไว้ให้โปรแกรมอ่านหน้าจอ */
.rv-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.rvpage .rv-tabs { margin-top: -8px; }
@media (max-width: 900px) { .rvpage .rv-tabs { margin-top: 0; } }

/* หน้ารออนุมัติใช้ความกว้างหน้าจอเต็มที่ (เดิมจำกัดที่ 1600px) — ช่องแชทจึงกว้างขึ้นบนจอใหญ่ */
@media (min-width: 901px) {
  .content.content-wide { max-width: none; padding-left: 28px; padding-right: 28px; }
}