/* AI chatbot pages (แชท AI, ฐานความรู้, ทดลองบอท, ตั้งค่า > แชทบอท AI) in the CRM's look.
   Colours, type and spacing are the tokens in app.css, so light and dark follow the CRM.
   Only the chatbot's own sizes are added here; components only read var(). */

:root {
  --bt-list-w: 340px;
  --bt-inbox-h: 680px;
  --bt-bubble-w: 520px;
  --bt-composer-max: 160px;
  --bt-try-h: 560px;
  --bt-bars-h: 160px;
  --bt-imp-h: 384px;
  --bt-hit-h: 128px;
  --bt-kpi-min: 168px;
  --bt-dlg-wide: 880px;
}

/* tabs of แชท AI are links (each is its own address), drawn like the CRM's .tabs buttons;
   the underline's -1px overlap must not make the strip scroll vertically */
.bt-tabs { overflow-y: hidden; }
.tabs .bt-tab { padding: var(--s-2-5) var(--s-3-5); font-size: var(--fs-base); color: var(--text-2); border-bottom: var(--bar-2) solid transparent; margin-bottom: calc(var(--hairline) * -1); white-space: nowrap; text-decoration: none; }
.tabs .bt-tab:hover { color: var(--text-1); }
.tabs .bt-tab[aria-current="page"] { color: var(--text-1); font-weight: 600; border-bottom-color: var(--accent-ink); }

/* ------------------------------------------------------------ chat inbox */
.bt-inbox { display: grid; grid-template-columns: var(--bt-list-w) minmax(0, 1fr); height: var(--bt-inbox-h); padding: 0; overflow: hidden; }
.bt-list { display: flex; flex-direction: column; min-height: 0; border-right: var(--hairline) solid var(--line); }
.bt-list-head { display: grid; gap: var(--s-3); padding: var(--s-4); border-bottom: var(--hairline) solid var(--line); }
.bt-list-head .row-between { display: flex; justify-content: space-between; align-items: center; gap: var(--s-2); }
.bt-list ul { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; }
.bt-list li a { display: flex; gap: var(--s-3); padding: var(--s-3) var(--s-4); color: var(--text-1); border-bottom: var(--hairline) solid var(--line); text-decoration: none; }
.bt-list li a:hover { background: var(--surface-2); }
.bt-list li a[aria-current="true"] { background: var(--accent-tint); }
.bt-list .bt-grow { flex: 1; min-width: 0; display: grid; gap: var(--s-0-5); }
.bt-list .bt-name { display: flex; justify-content: space-between; gap: var(--s-2); font-size: var(--fs-base); }
.bt-list .bt-name b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bt-list .bt-name span { font-size: var(--fs-xs); color: var(--text-3); white-space: nowrap; }
.bt-list .bt-last { font-size: var(--fs-md); color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bt-chips { display: flex; flex-wrap: wrap; gap: var(--s-1); }
.bt-unread { width: var(--dot-lg); height: var(--dot-lg); border-radius: 50%; background: var(--bad); flex: 0 0 auto; margin-top: var(--s-2); }
.bt-list .empty { padding: var(--s-6) var(--s-4); }

.bt-convo { display: flex; flex-direction: column; min-height: 0; background: var(--surface-2); }
.bt-convo > .empty { margin: auto; text-align: center; padding: var(--s-6); }
.bt-convo-head { display: flex; align-items: flex-start; flex-wrap: wrap; gap: var(--s-3); padding: var(--s-3) var(--s-5); background: var(--surface); border-bottom: var(--hairline) solid var(--line); }
.bt-convo-head .bt-grow { flex: 1; min-width: 0; display: grid; gap: var(--s-0-5); }
.bt-convo-head .bt-title { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); font-weight: 600; }
.bt-convo-head .bt-sub { font-size: var(--fs-sm); color: var(--text-3); overflow-wrap: anywhere; }
.bt-convo-head .bt-crm { font-size: var(--fs-sm); color: var(--text-2); }
.bt-convo-head .bt-acts { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.bt-convo-head details { flex-basis: 100%; font-size: var(--fs-md); }
.bt-convo-head summary { cursor: pointer; color: var(--text-2); }
.bt-convo-body { flex: 1; overflow-y: auto; padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-2-5); min-height: 0; }
.bt-composer { display: flex; gap: var(--s-2); align-items: flex-end; padding: var(--s-3) var(--s-5) var(--s-4); background: var(--surface); border-top: var(--hairline) solid var(--line); }
.bt-composer .field { flex: 1; }
.bt-composer .textarea { min-height: var(--h-lg); max-height: var(--bt-composer-max); }

.bt-msg { max-width: var(--bt-bubble-w); display: grid; gap: var(--s-1); align-self: flex-start; }
.bt-msg.is-bot, .bt-msg.is-staff { align-self: flex-end; }
.bt-msg .bt-b { padding: var(--s-2) var(--s-3); border-radius: var(--r-bubble-oa); background: var(--surface); border: var(--hairline) solid var(--line); color: var(--text-1); font-size: var(--fs-base); white-space: pre-wrap; overflow-wrap: anywhere; }
.bt-msg.is-bot .bt-b { border-radius: var(--r-bubble-me); background: var(--accent-tint); border-color: transparent; }
.bt-msg.is-staff .bt-b { border-radius: var(--r-bubble-me); background: var(--info-tint); border-color: transparent; }
.bt-msg.is-wait .bt-b { color: var(--text-3); }
.bt-msg .bt-b a { color: var(--accent-ink); text-decoration: underline; }
.bt-msg .bt-by { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1-5); font-size: var(--fs-xs); color: var(--text-3); }
.bt-msg.is-bot .bt-by, .bt-msg.is-staff .bt-by { justify-content: flex-end; }
.bt-sys { align-self: center; max-width: 90%; text-align: center; font-size: var(--fs-xs); color: var(--text-2); background: var(--surface-3); border-radius: var(--r-pill); padding: var(--s-0-5) var(--s-3); }

.bt-lead { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--s-1) var(--s-3); margin: var(--s-2) 0; font-size: var(--fs-md); }
.bt-lead dt { color: var(--text-3); }
.bt-lead dd { margin: 0; overflow-wrap: anywhere; }

/* ---------------------------------------------------------- summary page */
.bt-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--bt-kpi-min), 1fr)); gap: var(--s-3); margin-bottom: var(--s-4); }
.bt-kpi { display: grid; gap: var(--s-0-5); padding: var(--s-4); border: var(--hairline) solid var(--line); border-radius: var(--r-lg); background: var(--surface); color: var(--text-1); text-decoration: none; }
.bt-kpi span { font-size: var(--fs-md); color: var(--text-2); }
.bt-kpi b { font-size: var(--fs-3xl); font-weight: 600; line-height: 1.2; font-variant-numeric: tabular-nums; }
.bt-kpi small { font-size: var(--fs-sm); color: var(--text-3); }
a.bt-kpi:hover { border-color: var(--line-strong); }
.bt-kpi.is-alert { border-color: var(--warn); background: var(--warn-tint); }
.bt-bars { display: flex; align-items: flex-end; gap: var(--s-1); height: var(--bt-bars-h); }
.bt-bars div { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: var(--s-1); }
.bt-bars i { display: block; width: 100%; min-height: var(--s-px); border-radius: var(--r-xs) var(--r-xs) 0 0; background: var(--chart-1); }
.bt-bars small { font-size: var(--fs-2xs); color: var(--text-3); white-space: nowrap; }
.bt-check { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2-5); }
.bt-check li { display: flex; gap: var(--s-2); align-items: flex-start; font-size: var(--fs-base); }
.bt-check li > svg { flex: 0 0 auto; margin-top: var(--s-1); }
.bt-check .is-done { color: var(--ok); }
.bt-check .is-todo { color: var(--text-3); }
.bt-check a.is-done-link { color: var(--text-3); }
.bt-check .bt-meta { font-size: var(--fs-sm); color: var(--text-3); }

/* --------------------------------------------------------- knowledge base */
.bt-kb { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--s-4); align-items: start; }
.bt-nowrap { white-space: nowrap; }
.bt-clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bt-hits { display: grid; gap: var(--s-2); margin-top: var(--s-3); }
.bt-hit { border: var(--hairline) solid var(--line); border-radius: var(--r); padding: var(--s-3); background: var(--surface); }
.bt-hit pre { margin: var(--s-2) 0 0; white-space: pre-wrap; font: inherit; font-size: var(--fs-sm); color: var(--text-2); max-height: var(--bt-hit-h); overflow: auto; }
.bt-imp { max-height: var(--bt-imp-h); overflow-y: auto; border: var(--hairline) solid var(--line); border-radius: var(--r); }
.bt-imp thead th { position: sticky; top: 0; z-index: 1; }
.bt-steps { margin: 0; padding-left: var(--s-5); display: grid; gap: var(--s-1); font-size: var(--fs-md); color: var(--text-2); }
.bt-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3) var(--s-4); }
.bt-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3) var(--s-4); }
.bt-span2 { grid-column: span 2; }
.bt-file { font: inherit; font-size: var(--fs-md); color: var(--text-2); }
.bt-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
dialog.dlg.is-wide { width: min(var(--bt-dlg-wide), calc(100vw - var(--s-7))); }
.dlg-body .notice { margin-top: 0; }

/* -------------------------------------------------------------- try the bot */
.bt-try { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--s-4); align-items: start; }
.bt-try .bt-convo { height: var(--bt-try-h); border: var(--hairline) solid var(--line); border-radius: var(--r-lg); overflow: hidden; }

/* -------------------------------------------------------------- rich menu */
.bt-menu canvas { display: block; width: 100%; height: auto; border-radius: var(--r); border: var(--hairline) solid var(--line); }
.bt-menu fieldset { border: var(--hairline) solid var(--line); border-radius: var(--r); padding: var(--s-3) var(--s-4) var(--s-4); margin: 0; min-width: 0; display: grid; gap: var(--s-3); }
.bt-menu legend { padding: 0 var(--s-1); font-size: var(--fs-md); font-weight: 600; color: var(--text-2); }
.bt-color { display: flex; gap: var(--s-2); align-items: center; }
.bt-color input[type="color"] { width: var(--h-md); height: var(--h-md); padding: 0; border: var(--hairline) solid var(--line-strong); border-radius: var(--r-sm); background: var(--surface); }

@media (max-width: 1000px) {
  .bt-kb, .bt-try { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
  .bt-inbox { grid-template-columns: minmax(0, 1fr); height: auto; }
  .bt-list { border-right: 0; border-bottom: var(--hairline) solid var(--line); }
  .bt-list ul { max-height: 40vh; }
  .bt-convo-body { max-height: 60vh; }
}
@media (max-width: 640px) {
  .bt-grid2, .bt-grid3 { grid-template-columns: minmax(0, 1fr); }
  .bt-span2 { grid-column: auto; }
}

/* LINE CRM and the chatbot together make ten menu items: too many for one bar, so the menu takes
   its own row at every width (the same layout app.css uses below 1160px) */
.bt-nav-wide .topbar-in { flex-wrap: wrap; gap: 0 var(--s-3); padding-top: var(--s-2); }
.bt-nav-wide .topbar-tools { margin-left: auto; }
.bt-nav-wide .mainnav { order: 3; width: 100%; margin: 0; padding: var(--s-2) 0; overflow-x: auto; scrollbar-width: none; }
.bt-nav-wide .mainnav::-webkit-scrollbar { display: none; }

/* settings sections: a long code line scrolls inside its box instead of widening the page,
   and the choice groups wrap on a phone */
[id^="s-bot"] .stack > * { min-width: 0; }
[id^="s-bot"] .seg { flex-wrap: wrap; max-width: 100%; border-radius: var(--r-lg); }