/* console.css — the signed-in pages: templates, API keys, a place to try a document, and the docs.
   Colours and type come from styles.css; only layout lives here. */

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

/* .shared-note and .appbar live in styles.css — both pages load it, so the two bars match. */

/* ── top bar ─────────────────────────────────────────────────────────────────────────────────── */
.bar {
  display: flex; align-items: center; gap: 14px;
  padding: 0 20px; height: 56px;
  background: var(--surface); border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 10;
}
.bar .brand { font-weight: 700; font-size: 15px; letter-spacing: -0.01em; }
.bar .brand span { color: var(--accent); }
.bar .spacer { flex: 1; }
.bar .who { color: var(--muted); font-size: 12.5px; }

.tabs { display: flex; gap: 2px; }
.tabs button {
  border: 0; background: none; cursor: pointer;
  padding: 8px 13px; border-radius: 8px;
  color: var(--muted); font-weight: 550; font-size: 13.5px;
}
.tabs button:hover { background: var(--surface-2); color: var(--text); }
.tabs button[aria-selected="true"] { background: var(--info-bg); color: var(--info); }

/* ── page ────────────────────────────────────────────────────────────────────────────────────── */
main { flex: 1; width: 100%; max-width: 1080px; margin: 0 auto; padding: 26px 20px 60px; }
.panel[hidden] { display: none; }
.head { margin-bottom: 18px; }
.head h2 { font-size: 19px; letter-spacing: -0.01em; }
.head p { color: var(--muted); margin-top: 5px; max-width: 68ch; }

.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 18px; margin-bottom: 14px;
}
.card > h3 { font-size: 14.5px; margin-bottom: 3px; }
.card > h3 + p { color: var(--muted); font-size: 12.5px; margin-bottom: 14px; }

/* `flex-direction` said out loud: `label` sets `column` (styles.css), and a <label class="row">
   inherited it — `.row` won the `display` but never contradicted the direction, so a radio and
   its own text ended up stacked. A class called "row" has to say it is one. */
.row { display: flex; flex-direction: row; gap: 10px; align-items: center; flex-wrap: wrap; }
.grow { flex: 1; min-width: 0; }

/* ── controls ────────────────────────────────────────────────────────────────────────────────── */
input[type="text"], input[type="email"], input[type="password"], textarea {
  width: 100%; padding: 9px 11px;
  border: 1px solid var(--border); border-radius: 8px; background: var(--surface);
}
input:focus, textarea:focus { outline: 2px solid var(--info-bg); outline-offset: -1px; border-color: var(--accent); }
label { display: block; font-size: 12.5px; font-weight: 600; margin-bottom: 5px; }
label + .hint { margin-top: -2px; }
.hint { color: var(--muted); font-size: 12px; margin-bottom: 7px; }

.btn {
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
  padding: 9px 15px; border-radius: 8px; cursor: pointer; font-weight: 600; font-size: 13.5px;
  white-space: nowrap;
}
.btn:hover:not(:disabled) { background: var(--surface-2); }
.btn:disabled { opacity: 0.5; cursor: default; }
/* The hover rule above is `.btn:hover:not(:disabled)` — specificity 0,3,0, where a plain
   `.btn.primary` is 0,2,0 — so without the second selector here an accented button repaints itself
   in the neutral surface colour the moment the pointer touches it, and its white label vanishes
   into it. Matched at the same weight so the accent survives being hovered; brightness below is
   what the hover is actually supposed to do. */
.btn.primary,
.btn.primary:hover:not(:disabled) { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.primary:hover:not(:disabled) { filter: brightness(1.08); }
.btn.danger { color: var(--err); border-color: color-mix(in srgb, var(--err) 30%, var(--border)); }
.btn.danger:hover:not(:disabled) { background: var(--err-bg); }
.btn.small { padding: 6px 11px; font-size: 12.5px; }

/* ── notes ───────────────────────────────────────────────────────────────────────────────────── */
.note { padding: 11px 13px; border-radius: 8px; font-size: 13px; margin-bottom: 12px; }
.note.ok { background: var(--ok-bg); color: var(--ok); }
.note.warn { background: var(--warn-bg); color: var(--warn); }
.note.err { background: var(--err-bg); color: var(--err); }
.note.info { background: var(--info-bg); color: var(--info); }
.note code { background: rgba(0, 0, 0, 0.06); padding: 1px 5px; border-radius: 4px; }

/* ── lists ───────────────────────────────────────────────────────────────────────────────────── */
.list { display: flex; flex-direction: column; gap: 10px; }
.item { border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; background: var(--surface); }
.item .title { font-weight: 650; }
.item .sub { color: var(--muted); font-size: 12.5px; margin-top: 3px; }
.item.dim { opacity: 0.55; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 9px 0; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 999px; padding: 4px 6px 4px 11px; font-size: 12.5px;
}
.chip button { border: 0; background: none; cursor: pointer; color: var(--muted); font-size: 15px; line-height: 1; padding: 0 4px; border-radius: 999px; }
.chip button:hover { color: var(--err); background: var(--err-bg); }

.tag { display: inline-block; font-size: 11.5px; font-weight: 650; padding: 2px 8px; border-radius: 999px; }
.tag.ok { background: var(--ok-bg); color: var(--ok); }
.tag.warn { background: var(--warn-bg); color: var(--warn); }
.tag.err { background: var(--err-bg); color: var(--err); }
.tag.info { background: var(--info-bg); color: var(--info); }
.tag.mute { background: var(--surface-2); color: var(--muted); }

/* ── code ────────────────────────────────────────────────────────────────────────────────────── */
pre, code, .mono { font-family: var(--mono); }
pre {
  margin: 0; background: #10141c; color: #dbe3f0;
  padding: 14px 16px; border-radius: 9px; overflow-x: auto;
  font-size: 12.5px; line-height: 1.65;
}
pre .k { color: #8bd5ff; }
pre .s { color: #b8e6a1; }
pre .c { color: #7c8798; }
.copyable { position: relative; }
.copyable .btn { position: absolute; top: 9px; right: 9px; }

/* ── the reference's key/value tables ─────────────────────────────────────────────────────────── */
table.kv { width: 100%; border-collapse: collapse; }
table.kv th, table.kv td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border); vertical-align: top; }
table.kv th { width: 34%; font-weight: 600; font-size: 12.5px; color: var(--muted); }
table.kv tr:last-child th, table.kv tr:last-child td { border-bottom: 0; }

/* ── the sign-in page ────────────────────────────────────────────────────────────────────────── */
.signin { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.signin form { width: 100%; max-width: 360px; }
.signin .card { padding: 26px; margin: 0; }
.signin h1 { font-size: 21px; letter-spacing: -0.015em; margin-bottom: 4px; }
.signin .lede { color: var(--muted); font-size: 13px; margin-bottom: 20px; }
.signin .field { margin-bottom: 13px; }
.signin .btn { width: 100%; margin-top: 6px; padding: 11px; }

@media (max-width: 640px) {
  .bar { padding: 0 12px; gap: 8px; height: auto; flex-wrap: wrap; padding-bottom: 8px; }
  .tabs { order: 3; width: 100%; overflow-x: auto; }
  main { padding: 18px 12px 50px; }
}

/* ── the API reference tab ─────────────────────────────────────────────────────────────────────
   Two columns: a section list that stays put, and the reference itself. The list is what makes a
   long contract usable — an integrator arrives looking for one error code, not for prose. */
.doc { display: grid; grid-template-columns: 210px 1fr; gap: 28px; align-items: start; }

.doc-nav { position: sticky; top: 76px; }
.doc-nav a {
  display: block; padding: 6px 10px; border-radius: 7px;
  color: var(--muted); text-decoration: none; font-size: 13px; line-height: 1.4;
}
.doc-nav a:hover { background: var(--surface-2); color: var(--text); }
.doc-nav a.here { background: var(--info-bg); color: var(--info); font-weight: 600; }
.doc-nav .group { margin-top: 14px; padding: 0 10px 4px; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.doc-nav .group:first-child { margin-top: 0; }

.doc-body > section { scroll-margin-top: 76px; margin-bottom: 34px; }
.doc-body h2 {
  font-size: 20px; letter-spacing: -0.015em; margin-bottom: 6px;
  padding-bottom: 8px; border-bottom: 1px solid var(--border);
}
.doc-body h3 { font-size: 15px; margin: 20px 0 6px; }
.doc-body p { color: var(--muted); margin-bottom: 12px; max-width: 74ch; }
.doc-body p.lede { color: var(--text); }
.doc-body ol, .doc-body ul { color: var(--muted); margin: 0 0 12px; padding-left: 20px; }
.doc-body li { margin-bottom: 5px; }
.doc-body li > code, .doc-body p > code, table.kv code {
  background: var(--surface-2); border: 1px solid var(--border);
  padding: 1px 5px; border-radius: 5px; font-size: 12.5px;
}

/* an endpoint headline: METHOD /path */
.route { display: flex; align-items: center; gap: 10px; margin: 4px 0 12px; flex-wrap: wrap; }
.route .verb {
  font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: 0.04em;
  padding: 4px 9px; border-radius: 6px; background: var(--ok-bg); color: var(--ok);
}
.route .verb.get { background: var(--info-bg); color: var(--info); }
.route .path { font-family: var(--mono); font-size: 14.5px; font-weight: 600; }

/* language switcher over a code block */
.sample { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; margin-bottom: 14px; }
.sample .langs { display: flex; gap: 2px; padding: 7px 8px; background: var(--surface-2); border-bottom: 1px solid var(--border); }
.sample .langs button {
  border: 0; background: none; cursor: pointer; padding: 5px 11px; border-radius: 6px;
  font-size: 12.5px; font-weight: 600; color: var(--muted);
}
.sample .langs button:hover { background: var(--surface); color: var(--text); }
.sample .langs button[aria-selected="true"] { background: var(--surface); color: var(--accent); box-shadow: 0 1px 2px rgba(0,0,0,0.06); }
.sample .langs .spacer { flex: 1; }
.sample pre { border-radius: 0; }
.sample .copyable .btn { top: 8px; right: 8px; }

table.kv td code, table.kv th code { white-space: nowrap; }
table.kv .req { color: var(--err); font-weight: 700; }
tr.dim td, tr.dim th { color: var(--muted); }

@media (max-width: 860px) {
  .doc { grid-template-columns: 1fr; }
  .doc-nav { position: static; display: flex; gap: 4px; overflow-x: auto; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
  .doc-nav .group { display: none; }
  .doc-nav a { white-space: nowrap; }
}

/* ── the reference's export row ────────────────────────────────────────────────────────────────── */
.doc-head { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.doc-head .grow { flex: 1; min-width: 260px; }
.doc-export { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.doc-export .muted { font-size: 12px; }
.doc-export a.btn { text-decoration: none; display: inline-block; }

/* ── printing the reference ────────────────────────────────────────────────────────────────────
   "พิมพ์ / PDF" is the browser's own save-as-PDF, so the page has to be worth printing: drop the
   chrome, drop the section list (a table of contents with no page numbers helps nobody on paper),
   let the code blocks break across pages, and put ink back into the dark ones so they do not
   arrive as black rectangles. */
@media print {
  .appbar, .doc-nav, .doc-export, .qr-drop, .btn { display: none !important; }
  .panel[hidden] { display: none !important; }
  main { max-width: none; padding: 0; }
  .doc { display: block; }
  .doc-body > section { break-inside: auto; margin-bottom: 22px; }
  .doc-body h2 { break-after: avoid; }
  .doc-body h3, .route { break-after: avoid; }
  table.kv { break-inside: auto; }
  table.kv tr { break-inside: avoid; }
  pre {
    background: var(--surface-2) !important; color: var(--text) !important;
    border: 1px solid var(--border); white-space: pre-wrap; word-break: break-word;
  }
  pre .k { color: #1d4ed8 !important; }
  pre .s { color: #15803d !important; }
  pre .c { color: #6b7280 !important; }
  .note, .sample { break-inside: avoid; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 10px; color: #6b7280; }
}

/* ── ตั้งค่า AI ────────────────────────────────────────────────────────────────────────────────
   One endpoint = one bordered block, stacked in the order they will be tried. The order IS the
   meaning here, so the block leads with its rank and the reorder buttons sit on that same line —
   nothing else in this panel moves anything. */
.setrow {
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface-2); padding: 14px 15px;
  display: flex; flex-direction: column; gap: 11px;
}
.setrow > .row:first-child { gap: 7px; }
.setfield { min-width: 0; }
.setfield label { margin-bottom: 3px; }
.setfield .hint { margin-bottom: 5px; }
.probe { font-size: 12.5px; }
.probe-ok { color: var(--ok); }
.probe-err { color: var(--err); }
.savebar {
  position: sticky; bottom: 0; z-index: 2;
  margin-top: 18px; padding: 12px 0;
  background: linear-gradient(to top, var(--bg) 62%, transparent);
}

/* ── ประวัติการเรียก ───────────────────────────────────────────────────────────────────────────
   A timeline, not a table: two kinds of row (a call arriving, a model being called) share it, and
   they carry different facts. A grid would spend most of its columns empty. */
.stats { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.stat {
  flex: 1 1 130px; padding: 11px 13px; border-radius: 9px;
  background: var(--surface-2); border: 1px solid var(--border);
}
.stat.bad { background: var(--err-bg); border-color: color-mix(in srgb, var(--err) 25%, var(--border)); }
.stat.warn { background: var(--warn-bg); border-color: color-mix(in srgb, var(--warn) 25%, var(--border)); }
.statv { font-size: 21px; font-weight: 680; letter-spacing: -0.02em; }
.statl { color: var(--muted); font-size: 12px; margin-top: 2px; }

.filter {
  border: 1px solid var(--border); background: var(--surface); color: var(--muted);
  padding: 5px 11px; border-radius: 999px; font: inherit; font-size: 12.5px; cursor: pointer;
}
.filter:hover { background: var(--surface-2); color: var(--text); }
.filter.on { background: var(--info-bg); color: var(--info); border-color: transparent; font-weight: 600; }

.loglist { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.logrow {
  display: flex; gap: 13px; align-items: flex-start;
  padding: 10px 13px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface);
}
/* A failed row is findable by scrolling, not by reading every line. */
.logrow.bad { border-color: color-mix(in srgb, var(--err) 30%, var(--border)); background: var(--err-bg); }
.logwhen { flex: 0 0 148px; font-size: 12px; line-height: 1.5; }
.logwhen .muted { font-size: 11.5px; }
.logtitle { font-size: 12.5px; font-weight: 600; word-break: break-all; }
.logerr { color: var(--err); font-size: 12.5px; margin-top: 4px; word-break: break-word; }
/* The reply, under the row that was clicked. Capped in height: a 40-field extraction should not
   push the next twenty calls off the screen to be read. */
.logjsonwrap { margin-top: 9px; }
.logjson pre { max-height: 420px; overflow: auto; }

@media (max-width: 640px) {
  .logrow { flex-direction: column; gap: 5px; }
  .logwhen { flex: none; }
}

/* ── API key → รูปแบบคำตอบ → กำหนดเอง ─────────────────────────────────────────────────────────── */
.custom-fields { margin-top: 12px; border-top: 1px solid var(--border); padding-top: 10px; }
.custom-fields > summary { cursor: pointer; font-size: 13px; padding: 4px 0; }
.custom-fields > p { margin: 8px 0 12px; font-size: 12.5px; }
.custom-grid { display: grid; grid-template-columns: minmax(240px, 1fr) minmax(0, 1.4fr); gap: 16px; align-items: start; }
@media (max-width: 760px) { .custom-grid { grid-template-columns: 1fr; } }
.custom-grid pre { margin-top: 8px; max-height: 460px; overflow: auto; font-size: 12px; line-height: 1.55; }
.custom-tree { font-size: 12.5px; }
.custom-tree label { display: flex; flex-direction: row; gap: 6px; align-items: center; justify-content: flex-start; padding: 2px 0; margin: 0; font-weight: 400; cursor: pointer; }
.custom-tree label.locked { cursor: default; color: var(--muted); }
.custom-tree .kids { margin-left: 22px; }
.custom-tree .grp { margin-bottom: 4px; }
.custom-tree .hint { color: var(--muted); font-size: 11.5px; }
.custom-grid [aria-pressed="true"] { background: var(--surface-2); border-color: var(--accent); }
/* Below the sticky .appbar (80px tall), so the sample switch stays clickable while the tree scrolls. */
.custom-grid > div:last-child { position: sticky; top: 92px; }

/* ── ตั้งค่าค้นหาจากข้อความ (texttemplates.js) ──────────────────────────────────────────────────── */
.tt-toolbar { margin-bottom: 6px; }
.tt-toolbar h3 { font-size: 14.5px; }
.tt-modes { display: inline-flex; gap: 4px; }
.item.tt-editing { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.tt-import { margin-top: 14px; border-top: 1px dashed var(--border); padding-top: 12px; }
.tt-json { font-family: var(--mono); font-size: 12.5px; line-height: 1.55; tab-size: 2; }
.tt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px 14px; margin: 10px 0; }
.tt-cell { min-width: 0; }
.tt-cell.tt-wide { grid-column: 1 / -1; }
.tt-cell label { margin-bottom: 3px; }
.tt-cell .hint { margin-bottom: 4px; }
.tt-cell select, .tt-field select, .tt-editor select { padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); max-width: 100%; }
.tt-num { width: 100%; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
.tt-sub { font-size: 13.5px; margin: 16px 0 8px; }
.tt-fields { display: flex; flex-direction: column; gap: 12px; margin-bottom: 10px; }
.tt-field { border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; background: var(--surface-2); }
.tt-field input[type="text"], .tt-field textarea { background: var(--surface); }
.tt-field .tt-label { flex: 1 1 200px; width: auto; }
.tt-field .tt-key { flex: 0 1 170px; width: auto; }
.tt-idx { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 999px; background: var(--info-bg); color: var(--info); font-weight: 700; font-size: 12px; }
.tt-adv summary { cursor: pointer; color: var(--muted); font-size: 12.5px; font-weight: 600; }
.tt-result { margin-top: 12px; }
.tt-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.tt-table th { text-align: left; color: var(--muted); font-weight: 600; font-size: 12px; padding: 6px 8px; border-bottom: 1px solid var(--border); }
.tt-table td { padding: 7px 8px; border-bottom: 1px solid var(--border); vertical-align: top; }
.tt-table tr.tt-win td { background: var(--ok-bg); }
.tt-bar { display: inline-flex; align-items: center; gap: 8px; min-width: 150px; }
.tt-track { display: inline-block; height: 6px; width: 90px; border-radius: 999px; background: var(--border); overflow: hidden; }
.tt-track > span { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.tt-bar b { font-variant-numeric: tabular-nums; font-size: 12.5px; }
@media (max-width: 640px) { .tt-table { display: block; overflow-x: auto; } }
.tt-editor textarea:not(.mono), .tt-import textarea:not(.mono) { font: inherit; font-size: 13px; }
.tt-editor textarea { resize: vertical; }
.tt-field > .row { flex-wrap: nowrap; }
.tt-field > .row > select { width: auto; flex: 0 1 230px; }
.tt-field > .row > .btn { flex: none; }
@media (max-width: 760px) { .tt-field > .row { flex-wrap: wrap; } }
.tt-editor .row > select, .tt-card-row select { width: auto; }