/* Pilot 1:1 -- one clinic, four executives, phones inside LINE.
   Calm, modern, trustworthy: generous spacing, one accent colour, and
   status is always colour + icon + Thai word together, never colour alone. */

:root {
  --bg: #f4f5f7;
  --card: #ffffff;
  --line: #e3e6ea;
  --ink: #1b1f24;
  --muted: #667085;
  --accent: #3457d5;
  --accent-ink: #ffffff;
  --accent-soft: #eaeeff;

  --st-queued-bg: #eef0f3;   --st-queued-ink: #57606f;
  --st-working-bg: #e8edfd;  --st-working-ink: #3457d5;
  --st-answer-bg: #fff4e0;   --st-answer-ink: #96650a;
  --st-review-bg: #f1e9ff;   --st-review-ink: #6c3fc7;
  --st-done-bg: #e5f6ec;     --st-done-ink: #1c7c45;
  --st-stuck-bg: #fdeaea;    --st-stuck-ink: #c62828;

  --shadow: 0 1px 2px rgba(20, 24, 30, .06), 0 1px 8px rgba(20, 24, 30, .04);
  --radius: 14px;
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans Thai",
    "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-tap-highlight-color: transparent;
}
h1, h2, h3, p { margin: 0; }
button { font: inherit; }

/* ------------------------------------------------------------- ribbon */

.demo-ribbon, .dev-ribbon {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 40;
  color: #fff;
  text-align: center;
  font-size: .78rem;
  padding: 6px 10px calc(6px);
  padding-top: calc(6px + env(safe-area-inset-top, 0px));
}
.demo-ribbon { background: #1b1f24; }
/* Amber, not the demo ribbon's near-black: a developer testing on their own
   Mac (real data, real writes once the back end wires them up) must never
   read the same at-a-glance colour as "this is fake sample data". */
.dev-ribbon { background: #b45309; }

body.demo-mode, body.dev-mode { padding-top: 30px; }
body.demo-mode .overlay, body.dev-mode .overlay { top: 30px; }

/* ------------------------------------------------------------- overlays */

.overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--bg);
  z-index: 20;
  padding: 24px;
}
.overlay.active { display: flex; align-items: center; justify-content: center; }
.overlay-inner { max-width: 26rem; text-align: center; }
.overlay h1 { font-size: 1.2rem; margin-bottom: .6rem; }
.overlay .muted { display: block; margin-bottom: 1rem; }
.overlay .next-line { margin-top: 1rem; font-size: .85rem; color: var(--muted); }

.spinner {
  width: 28px; height: 28px;
  margin: 0 auto 12px;
  border: 3px solid var(--line);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin .9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* --------------------------------------------------------------- shell */

#app {
  max-width: 640px;
  margin: 0 auto;
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

.topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px calc(10px);
  background: var(--card);
  border-bottom: 1px solid var(--line);
}
.topbar h1 { font-size: 1.05rem; font-weight: 700; flex: 1; min-width: 0; }
.back-btn {
  border: 0;
  background: none;
  color: var(--ink);
  font-size: 1.3rem;
  line-height: 1;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 10px;
  margin: -8px 0 -8px -10px;
}
.back-btn:active { background: var(--bg); }

.screen-body {
  flex: 1;
  padding: 16px 16px calc(24px + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.next-line {
  margin-top: auto;
  padding: 12px 14px;
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: var(--radius);
  font-size: .88rem;
  font-weight: 600;
}

/* ----------------------------------------------------------- home hdr */

/* app.js gives this element both classes ("home-header screen-body"); this
   rule only needs to override screen-body's padding, not remove it -- an
   earlier version dropped the sides to 0 and the header sat flush against
   the screen edge while every card below kept its 16px. */
.home-header { padding: 4px 16px 0; }
.home-title { font-size: 1.2rem; font-weight: 700; }
.home-greeting { color: var(--muted); margin-top: 2px; font-size: .92rem; }

/* ----------------------------------------------------------------- ⓘ */

.section-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}
.section-head h2 { font-size: 1rem; font-weight: 700; }
.field-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .9rem;
  font-weight: 600;
  margin-bottom: 6px;
}

.help-btn {
  flex: none;
  width: 22px; height: 22px;
  min-height: 0;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--muted);
  font-size: .78rem;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
}
.help-btn::before { content: "i"; font-style: italic; }
.help-btn:active { background: var(--bg); }

/* ------------------------------------------------------------- cards */

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px;
}
.card-title { font-weight: 700; font-size: .96rem; }
.card-sub { color: var(--muted); font-size: .86rem; margin-top: 4px; }
.card-tap {
  display: block;
  width: 100%;
  text-align: left;
  border: 1px solid var(--line);
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px;
  min-height: 44px;
}
.card-tap:active { background: var(--bg); }
.card-tap.disabled { opacity: .55; }
.card-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.card-row .grow { flex: 1; min-width: 0; }
.chevron-right {
  flex: none;
  color: var(--muted);
  font-size: 1.1rem;
}

/* --------------------------------------------------------- "todo" list */

.todo-list { display: flex; flex-direction: column; gap: 8px; }
.todo-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 12px;
  min-height: 44px;
}
.todo-row:active { background: var(--bg); }
.todo-row .title { flex: 1; min-width: 0; font-size: .92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.calm-line { color: var(--muted); font-size: .9rem; padding: 6px 2px; }

/* ------------------------------------------------------------- chips */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 700;
  white-space: nowrap;
}
.chip-icon { font-size: .9em; }
.chip-queued  { background: var(--st-queued-bg);  color: var(--st-queued-ink); }
.chip-working { background: var(--st-working-bg); color: var(--st-working-ink); }
.chip-needs_answer { background: var(--st-answer-bg); color: var(--st-answer-ink); }
.chip-needs_review { background: var(--st-review-bg); color: var(--st-review-ink); }
.chip-done   { background: var(--st-done-bg);   color: var(--st-done-ink); }
.chip-stuck  { background: var(--st-stuck-bg);  color: var(--st-stuck-ink); }
.chip-sample { background: var(--st-queued-bg); color: var(--st-queued-ink); }

/* ------------------------------------------------------------- tiles */

.tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.tile {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 14px;
  box-shadow: var(--shadow);
}
.tile .n { font-size: 1.5rem; font-weight: 800; }
.tile .label { color: var(--muted); font-size: .8rem; margin-top: 2px; }

/* ------------------------------------------------------------ buttons */

.btn {
  min-height: 44px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink);
  padding: 10px 16px;
  font-weight: 600;
  font-size: .95rem;
  cursor: pointer;
}
.btn:active { background: var(--bg); }
.btn:disabled { opacity: .5; cursor: default; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn-secondary { background: var(--card); border-color: var(--accent); color: var(--accent); }
.btn-tertiary { background: none; border-color: transparent; color: var(--muted); text-decoration: underline; }
.btn-danger { background: var(--card); border-color: #c62828; color: #c62828; }
.btn-block { width: 100%; }
.btn-row { display: flex; flex-direction: column; gap: 10px; }

.link-btn {
  background: none; border: 0; color: var(--accent); font-weight: 600;
  padding: 4px 0; text-decoration: underline; min-height: 44px; text-align: left;
}

/* ------------------------------------------------------------- forms */

.field { display: flex; flex-direction: column; }
textarea, input[type=text] {
  font: inherit;
  color: inherit;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  resize: vertical;
  width: 100%;
}
textarea:focus, input[type=text]:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.hint { font-size: .8rem; color: var(--muted); margin-top: 4px; }
.required-mark { color: #c62828; }

.chip-choice-row { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-choice {
  border: 1px solid var(--line);
  background: var(--card);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: .88rem;
  min-height: 40px;
}
.chip-choice.selected { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 700; }

.inline-note {
  background: var(--st-answer-bg);
  color: var(--st-answer-ink);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: .85rem;
}
.inline-note .link-btn { color: var(--st-answer-ink); }

/* --------------------------------------------------------------- job */

.job-banner {
  border-radius: var(--radius);
  padding: 14px;
}
.job-banner .status-line {
  display: flex; align-items: center; gap: 8px;
  font-weight: 800; font-size: 1.02rem;
}
.job-banner .status-icon { font-size: 1.1rem; }
.job-banner .sub-line { margin-top: 6px; font-size: .88rem; }
.job-banner .revisions-line { margin-top: 8px; font-size: .85rem; font-weight: 700; }
.job-banner.bg-queued  { background: var(--st-queued-bg);  color: var(--st-queued-ink); }
.job-banner.bg-working { background: var(--st-working-bg); color: var(--st-working-ink); }
.job-banner.bg-needs_answer { background: var(--st-answer-bg); color: var(--st-answer-ink); }
.job-banner.bg-needs_review { background: var(--st-review-bg); color: var(--st-review-ink); }
.job-banner.bg-done   { background: var(--st-done-bg);   color: var(--st-done-ink); }
.job-banner.bg-stuck  { background: var(--st-stuck-bg);  color: var(--st-stuck-ink); }

.job-actions { display: flex; flex-direction: column; gap: 10px; }
/* The revise/close rows pair a full-width action button with a small (i)
   button. Without this rule the two are just two inline-block buttons with
   no shared row model, so the (i) wraps onto its own line underneath --
   exactly the "orphaned ⓘ" bug this fixes. flex:1 on the button leaves the
   fixed-size (i) pinned to the row's right edge. */
.job-action-help-row { display: flex; align-items: center; gap: 8px; }
.job-action-help-row .btn { flex: 1; }

.brief-box summary {
  cursor: pointer; font-weight: 600; font-size: .9rem; padding: 4px 0; color: var(--muted);
}
.brief-grid { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; font-size: .88rem; }
.brief-grid .k { color: var(--muted); font-size: .78rem; }
.brief-grid .v { white-space: pre-wrap; word-break: break-word; }
.brief-brand-line { margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--line); color: var(--muted); font-size: .8rem; }

.messages { display: flex; flex-direction: column; gap: 12px; }
.msg { max-width: 86%; }
.msg-human { align-self: flex-end; }
.msg-ai { align-self: flex-start; }
.msg-system { align-self: center; max-width: 96%; }
.msg-who { font-size: .72rem; color: var(--muted); margin-bottom: 3px; }
.msg-human .msg-who { text-align: right; }
.msg-bubble {
  border-radius: 14px;
  padding: 10px 13px;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: .92rem;
}
.msg-human .msg-bubble { background: var(--accent); color: var(--accent-ink); border-bottom-right-radius: 4px; }
.msg-ai .msg-bubble { background: var(--card); border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.msg-system .msg-bubble {
  background: none; border: 0; color: var(--muted); font-size: .8rem; text-align: center; padding: 2px 8px;
}
.msg-bubble p { margin: 0 0 .5em; }
.msg-bubble p:last-child { margin-bottom: 0; }
.msg-bubble ul, .msg-bubble ol { margin: .3em 0; padding-left: 1.3em; }

.reply-box {
  display: flex;
  gap: 8px;
  padding: 10px 0 0;
  border-top: 1px solid var(--line);
  margin-top: 4px;
}
/* .reply-box{display:flex} and the browser's [hidden]{display:none} have
   equal specificity; without this, source order (ours loads after the
   UA sheet) would make the reply box ignore its own `hidden` attribute
   and stay visible in queued/working/stuck/done -- exactly the states
   where nothing should be typed into it. */
.reply-box[hidden] { display: none; }
.reply-box textarea { flex: 1; min-height: 44px; max-height: 8rem; }
.reply-box .btn { flex: none; }

/* ------------------------------------------------------- test cards card */

.test-card-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 2px;
  border-top: 1px solid var(--line);
}
.test-card-row:first-child { border-top: 0; }
.test-card-icon {
  flex: none;
  width: 22px; height: 22px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .8rem;
  font-weight: 700;
}
.test-card-icon.ok   { background: var(--st-done-bg);  color: var(--st-done-ink); }
.test-card-icon.fail { background: var(--st-stuck-bg); color: var(--st-stuck-ink); }

/* -------------------------------------------------------------- brand */

.status-line-plain { font-size: .9rem; padding: 10px 12px; border-radius: 10px; background: var(--card); border: 1px solid var(--line); }
.history-list { display: flex; flex-direction: column; gap: 6px; font-size: .82rem; color: var(--muted); }
.history-row { display: flex; justify-content: space-between; gap: 8px; }

/* ------------------------------------------------------------- sheets */

.sheet-backdrop {
  position: fixed; inset: 0; background: rgba(20, 24, 30, .45);
  z-index: 50;
  display: flex; align-items: flex-end; justify-content: center;
}
.sheet-panel {
  width: 100%;
  max-width: 560px;
  background: var(--card);
  border-radius: 18px 18px 0 0;
  padding: 18px 18px calc(18px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -4px 24px rgba(0,0,0,.18);
  max-height: 82vh;
  overflow-y: auto;
}
.sheet-panel h2 { font-size: 1.05rem; margin-bottom: 8px; }
.sheet-panel .sheet-body { font-size: .92rem; color: var(--ink); line-height: 1.65; margin-bottom: 16px; white-space: pre-wrap; }
.sheet-panel .btn-row { gap: 10px; }

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

/* Top, phone-notification style -- not bottom. A bottom-center toast sat
   directly over the "ต่อไปทำอะไร" line and the primary action button below
   it, i.e. exactly what someone is about to press next. Anchored under the
   ribbon instead (or under the safe area when there is no ribbon), it can
   only ever cover the topbar, never a screen's main action. */
.toast {
  position: fixed;
  left: 50%;
  top: calc(10px + env(safe-area-inset-top, 0px));
  transform: translate(-50%, -16px);
  opacity: 0;
  pointer-events: none;
  transition: transform .22s ease, opacity .22s ease;
  background: #1b1f24;
  color: #fff;
  padding: 10px 18px;
  border-radius: 999px;
  font-size: .85rem;
  z-index: 60;
  max-width: 90vw;
  text-align: center;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .22);
  cursor: pointer;
}
.toast.show { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
body.demo-mode .toast, body.dev-mode .toast { top: calc(40px + env(safe-area-inset-top, 0px)); }
.toast.line-toast { background: #06c755; } /* LINE brand green, demo notification look only */

/* --------------------------------------------------------- fake doc */

.fake-doc {
  border: 1px dashed var(--line);
  border-radius: 12px;
  padding: 14px;
  background: var(--bg);
  font-size: .85rem;
  color: var(--muted);
}

/* --------------------------------------------------------- misc utils */

.muted { color: var(--muted); }
.center { text-align: center; }
.stack { display: flex; flex-direction: column; gap: 16px; }
.hidden-node { display: none !important; }

/* ------------------------------------------------------- wide screens */

@media (min-width: 900px) {
  #app { max-width: 720px; box-shadow: var(--shadow); min-height: 0; margin-top: 24px; margin-bottom: 24px; border-radius: 18px; overflow: hidden; }
  body { display: flex; justify-content: center; }
  .topbar { border-radius: 18px 18px 0 0; }
}

/* ------------------------------------------------------------ no-scroll */

body { overflow-x: hidden; }

/* -------------------------------------------------------------- dark */

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #101317;
    --card: #1a1e23;
    --line: #2b3138;
    --ink: #e9ecef;
    --muted: #98a2b3;
    --accent: #7891ff;
    --accent-ink: #0d1224;
    --accent-soft: #202546;

    --st-queued-bg: #262b31;   --st-queued-ink: #aab3c0;
    --st-working-bg: #202a4a;  --st-working-ink: #97a8ff;
    --st-answer-bg: #3a2c10;   --st-answer-ink: #f2b84f;
    --st-review-bg: #2c2140;  --st-review-ink: #c6a6ff;
    --st-done-bg: #17301f;    --st-done-ink: #6fd897;
    --st-stuck-bg: #3a1c1c;   --st-stuck-ink: #ff8a8a;
  }
  .toast { background: #e9ecef; color: #14171a; }
}