/* ===========================================================================
   Omnichannel AI Agent — the mocked journey run inside the Mity thread.
   Rendered by js/omni.js. Loaded after css/mity.css, so it can lean on the
   --eko-* tokens defined there.

   Two house rules this file has to respect:
   · css/tokens.css resets `ul, ol { list-style: none }`, so nothing here uses a
     list — every row is a div, marks are text glyphs (✓ ✗ ⚠).
   · Thai needs air. The 12px/18px used by .connector-desc is too tight for Thai
     tone marks, so body copy here runs 13px/20px or looser.
   =========================================================================== */

:root {
  /* the green wash already used by .src-chip--skill, named for reuse */
  --oc-tint: #EEF6F3;
  --oc-deep: #4E7A6C;
  --oc-warn-bg: #FFF8E6;
  --oc-warn-fg: #8A6410;
  --oc-warn-bd: #F0C24B;
  --oc-drop: #9CA3AF;
  --oc-line: #ECECEC;
}

/* one bot message holds the whole run */
.omni {
  display: grid;
  gap: 10px;
}

/* ===== One-tap suggested prompt (sits where .mity-hint does, pre-chat) ===== */
.omni-suggest {
  margin: 0 auto;
  padding: 7px 14px;
  border: 1px solid var(--oc-line);
  border-radius: 20px;
  background: var(--eko-white);
  font-family: inherit;
  font-size: 13px;
  line-height: 20px;
  color: var(--oc-deep);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
}

.omni-suggest:hover { background: var(--oc-tint); }
.omni-suggest .icon { flex: 0 0 13px; width: 13px; height: 13px; }
.omni-suggest-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* pre-chat only — same rule the hint uses */
.mity-main[data-state="chat"] .omni-suggest { display: none; }

/* ===== Opening plan card ===== */
.omni-intro {
  padding: 14px 16px;
  background: var(--eko-white);
  border: 1px solid var(--oc-line);
  border-radius: 12px;
}

.omni-intro-lead {
  margin: 0 0 10px;
  font-size: 15px;
  line-height: 24px;
  font-weight: 600;
  color: var(--eko-ink);
}

.omni-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.omni-pill {
  padding: 5px 12px 5px 8px;
  border-radius: 20px;
  background: var(--oc-tint);
  color: var(--oc-deep);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 18px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.omni-pill i {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--eko-green);
  color: #fff;
  font-style: normal;
  font-size: 10px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.omni-intro-tail {
  margin: 10px 0 0;
  font-size: 13px;
  line-height: 20px;
  color: var(--eko-green);
}

/* ===== Step card ===== */
.step {
  padding: 14px 16px;
  background: var(--eko-white);
  border: 1px solid var(--oc-line);
  border-radius: 12px;
  animation: msg-in .25s ease-out;
}

.step.is-running { cursor: pointer; }

.step-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* a numbered disc rather than a per-agent icon — keeps the sprite untouched
   and echoes the numbered pills in the opening card */
.step-num {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--eko-green);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.step-title {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: var(--eko-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.step-bar {
  flex: 1;
  min-width: 24px;
  display: flex;
  gap: 4px;
  align-items: center;
}

.step-bar i {
  flex: 1;
  height: 3px;
  border-radius: 2px;
  background: var(--oc-line);
}

.step-bar i.is-full { background: var(--eko-green); }

.step-bar i.is-now {
  background: #9BDCC8;
  animation: oc-pulse 1.2s ease-in-out infinite;
}

@keyframes oc-pulse {
  0%, 100% { opacity: .45; }
  50%      { opacity: 1; }
}

.step-count {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--eko-ink-25);
}

.step-sub {
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 21px;
  color: var(--eko-ink-65);
}

/* ===== Sub-task checklist ===== */
.step-tasks {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--oc-line);
  display: grid;
  gap: 7px;
}

.step-task {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  line-height: 20px;
}

.step-tick {
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1.5px solid var(--oc-line);
  position: relative;
}

.step-task.is-wait { color: var(--eko-ink-25); }

.step-task.is-run { color: var(--eko-ink-65); }

.step-task.is-run .step-tick {
  border-color: #9BDCC8;
  border-top-color: var(--eko-green);
  animation: oc-spin .7s linear infinite;
}

@keyframes oc-spin { to { transform: rotate(360deg); } }

.step-task.is-done { color: var(--eko-ink); }

.step-task.is-done .step-tick {
  border-color: var(--eko-green);
  background: var(--eko-green);
}

/* the tick glyph, drawn rather than shipped as an icon */
.step-task.is-done .step-tick::after {
  content: '';
  position: absolute;
  left: 3.5px;
  top: 1px;
  width: 4px;
  height: 7px;
  border: solid #fff;
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(40deg);
}

/* ===== Step footer bits ===== */
.step-note {
  margin: 12px 0 0;
  padding-left: 10px;
  border-left: 3px solid var(--eko-green);
  font-size: 14px;
  line-height: 22px;
  font-weight: 600;
  color: var(--eko-ink);
}

.step-next {
  margin: 10px 0 0;
  font-size: 13px;
  line-height: 20px;
  color: var(--eko-green);
}

.step-skip {
  display: none;
  margin-top: 8px;
  font-size: 11px;
  line-height: 17px;
  color: var(--eko-ink-25);
}

.step.is-running .step-skip { display: block; }

/* ===== Shared row + mark primitives ===== */
.oc-mark {
  flex: 0 0 auto;
  font-size: 12px;
  line-height: 20px;
}

.oc-row {
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 13px;
  line-height: 20px;
  display: flex;
  align-items: baseline;
  gap: 9px;
}

.oc-row-label { flex: 1; min-width: 0; }

/* ===== 1 · context-builder ===== */
.oc-profile {
  margin-top: 12px;
  padding: 12px;
  background: var(--eko-pane);
  border: 1px solid var(--oc-line);
  border-radius: 10px;
}

.oc-p-top {
  display: flex;
  align-items: center;
  gap: 12px;
}

.oc-p-avatar {
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: #2F5F52;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.oc-p-id { flex: 1; min-width: 0; }

.oc-p-name {
  display: block;
  font-size: 15px;
  font-weight: 600;
  line-height: 23px;
  color: var(--eko-ink);
}

.oc-p-meta {
  display: block;
  font-size: 13px;
  line-height: 21px;
  color: var(--eko-muted-3);
}

.oc-p-scores {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.oc-score {
  padding: 3px 10px;
  border-radius: 6px;
  font-size: 12px;
  line-height: 19px;
  font-weight: 600;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}

.oc-score em {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .3px;
  text-transform: uppercase;
  opacity: .75;
}

.oc-score.is-good { background: var(--oc-tint); color: var(--oc-deep); }
.oc-score.is-warn { background: var(--oc-warn-bg); color: var(--oc-warn-fg); }
.oc-score.is-bad  { background: #FDECEC; color: #B4322F; }

.oc-p-week {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--oc-line);
  font-size: 13px;
  line-height: 20px;
  color: var(--eko-ink-65);
  display: flex;
  align-items: baseline;
  gap: 9px;
  flex-wrap: wrap;
}

.oc-p-tag {
  flex: 0 0 auto;
  padding: 1px 7px;
  border-radius: 4px;
  background: var(--oc-tint);
  color: var(--oc-deep);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .4px;
}

/* ===== 2 · eligibility-guard ===== */
.oc-rules {
  margin-top: 12px;
  display: grid;
  gap: 6px;
}

.oc-row.is-pass { background: var(--eko-pane); }
.oc-row.is-pass .oc-mark { color: var(--eko-green); }

.oc-row-detail {
  flex: 0 0 auto;
  color: var(--eko-muted-3);
  font-size: 13px;
}

.oc-warn {
  margin-top: 4px;
  padding: 9px 11px;
  border-left: 3px solid var(--oc-warn-bd);
  border-radius: 0 8px 8px 0;
  background: var(--oc-warn-bg);
  color: var(--oc-warn-fg);
  font-size: 13px;
  line-height: 21px;
  font-weight: 600;
  display: flex;
  align-items: baseline;
  gap: 9px;
}

/* ===== 3 · offer-composer ===== */
.oc-picks {
  margin-top: 12px;
  display: grid;
  gap: 6px;
}

.oc-row.is-pick {
  background: var(--oc-tint);
  color: var(--eko-ink);
}

.oc-row.is-pick .oc-mark { color: var(--oc-deep); }

.oc-row.is-drop {
  background: var(--eko-module);
  color: var(--oc-drop);
}

.oc-row-score {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .3px;
  opacity: .8;
}

/* ===== 4 · journey-builder ===== */
.oc-channels { margin-top: 12px; }

.oc-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.oc-chip {
  padding: 5px 11px;
  border-radius: 20px;
  font-size: 13px;
  line-height: 20px;
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
}

/* the hints carry Thai now ("ตอบรับ 62%", "นัดเข้าพื้นที่"), so sans and big
   enough to read — 10px mono was fine for a bare "62%" and is not fine here */
.oc-chip em {
  font-style: normal;
  font-size: 12px;
  line-height: 19px;
  opacity: .8;
}

.oc-chip.is-on { background: var(--oc-tint); color: var(--oc-deep); }
.oc-chip.is-off { background: var(--eko-module); color: var(--oc-drop); }

/* the touchpoint sequence — its rows are what the summary's "4 ทัชพอยต์" counts */
.oc-seq {
  margin-top: 12px;
  padding: 10px 12px;
  background: var(--eko-pane);
  border: 1px solid var(--oc-line);
  border-radius: 10px;
}

/* Thai label, so --font-sans and no uppercase — Thai has no case to transform */
.oc-seq-head {
  font-size: 12px;
  line-height: 19px;
  color: var(--eko-ink-25);
}

.oc-seq-row {
  margin-top: 8px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.oc-seq-n {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  border-radius: 50%;
  background: var(--oc-tint);
  color: var(--oc-deep);
  font-size: 10px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.oc-seq-body { flex: 1; min-width: 0; }

.oc-seq-top {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

.oc-seq-top b {
  font-size: 13px;
  font-weight: 600;
  line-height: 21px;
  color: var(--eko-ink);
}

.oc-seq-top em {
  font-style: normal;
  font-size: 12px;
  line-height: 19px;
  color: var(--oc-deep);
}

.oc-seq-what {
  display: block;
  font-size: 13px;
  line-height: 20px;
  color: var(--eko-muted-3);
}

.oc-msg {
  margin-top: 10px;
  border: 1px solid var(--oc-line);
  border-radius: 10px;
  overflow: hidden;
}

.oc-msg-head {
  padding: 6px 12px;
  background: var(--oc-tint);
  color: var(--oc-deep);
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

/* mono is Latin-only: the tag gets it, the Thai meta stays on --font-sans */
.oc-msg-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .4px;
}

.oc-msg-meta {
  font-size: 13px;
  line-height: 20px;
}

.oc-msg-body {
  margin: 0;
  padding: 12px;
  background: var(--eko-white);
  font-size: 14px;
  line-height: 24px;
  color: var(--eko-ink);
}

/* ===== 5 · journey-simulator ===== */
.oc-verdicts {
  margin-top: 12px;
  display: grid;
  gap: 8px;
}

.oc-verdict {
  padding: 10px 12px;
  background: var(--eko-pane);
  border: 1px solid var(--oc-line);
  border-radius: 10px;
}

.oc-v-top {
  display: flex;
  align-items: center;
  gap: 12px;
}

.oc-v-label {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 22px;
  color: var(--eko-ink);
}

.oc-v-pill {
  flex: 0 0 auto;
  padding: 3px 12px;
  border-radius: 20px;
  border: 1px solid;
  background: var(--eko-white);
  font-size: 12px;
  line-height: 19px;
  font-weight: 600;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}

.oc-v-pill.is-go { border-color: var(--eko-green); color: var(--oc-deep); }
.oc-v-pill.is-hold { border-color: #E9A3A1; color: #B4322F; }

.oc-v-metric {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  line-height: 21px;
  color: var(--eko-muted-3);
}

/* ===== Final summary ===== */
.oc-final {
  padding: 16px;
  background: var(--eko-white);
  border: 1px solid var(--oc-line);
  border-radius: 12px;
  animation: msg-in .25s ease-out;
}

.oc-f-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.oc-f-title {
  font-size: 16px;
  font-weight: 700;
  line-height: 25px;
  color: var(--eko-ink);
}

.oc-f-who {
  font-size: 13px;
  line-height: 21px;
  color: var(--eko-muted-3);
}

.oc-f-rows {
  margin-top: 10px;
  display: grid;
  gap: 6px;
}

.oc-f-row {
  padding: 7px 10px;
  border-radius: 8px;
  background: var(--eko-pane);
  font-size: 13px;
  line-height: 21px;
  color: var(--eko-ink-65);
  display: flex;
  align-items: baseline;
  gap: 12px;
  justify-content: space-between;
}

.oc-f-row b {
  color: var(--eko-ink);
  font-weight: 600;
  text-align: right;
}

/* the line the demo is actually for */
.oc-f-scale {
  margin-top: 12px;
  padding: 11px 12px;
  border-radius: 10px;
  background: var(--oc-tint);
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: space-between;
}

.oc-f-scale-lead {
  flex: 1;
  min-width: 200px;
  font-size: 13px;
  line-height: 21px;
  color: var(--oc-deep);
}

.oc-f-scale-value {
  font-size: 16px;
  font-weight: 700;
  line-height: 25px;
  color: #2F5F52;
  white-space: nowrap;
}

.oc-f-actions {
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.oc-btn {
  height: 36px;
  padding: 0 14px;
  border: 1px solid var(--oc-line);
  border-radius: 8px;
  background: var(--eko-white);
  font-family: inherit;
  font-size: 13px;
  color: var(--eko-ink);
  cursor: pointer;
  white-space: nowrap;
}

.oc-btn:hover { background: var(--eko-module); }

.oc-btn.is-primary {
  background: #111827;
  border-color: #111827;
  color: #fff;
}

.oc-btn.is-primary:hover { background: #1F2937; }

.oc-btn.is-used {
  opacity: .5;
  cursor: default;
}

.oc-f-log {
  display: grid;
  gap: 6px;
}

.oc-f-log:not(:empty) { margin-top: 10px; }

.oc-f-done {
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--oc-tint);
  color: var(--oc-deep);
  font-size: 13px;
  line-height: 20px;
  font-weight: 600;
  display: flex;
  align-items: baseline;
  gap: 9px;
  animation: msg-in .2s ease-out;
}

.oc-f-done.is-plain {
  background: var(--eko-module);
  color: var(--eko-ink-65);
  font-weight: 400;
}

/* ===== Narrow ===== */
@media (max-width: 720px) {
  .step, .omni-intro, .oc-final { padding: 12px; }
  /* the mono title is the first thing to give up room */
  .step-title { font-size: 11px; }
  .step-bar { display: none; }
  .oc-row { flex-wrap: wrap; }
  .oc-row-detail { flex-basis: 100%; padding-left: 21px; }
  .oc-btn { flex: 1 1 auto; }
}

/* Someone who asked for less motion gets the finished run, not the theatre.
   js/omni.js already collapses every wait; this kills the loops. */
@media (prefers-reduced-motion: reduce) {
  .step, .oc-final, .oc-f-done { animation: none; }
  .step-bar i.is-now,
  .step-task.is-run .step-tick { animation: none; }
}