/* ============================================================
   ChatBot — omnichannel chatbot page (layered on style.css + callbot.css,
   which provides the sequence diagram and demo console)
   ============================================================ */

/* ---------- Hero ---------- */
.ch-hero::before {
  background:
    radial-gradient(900px 600px at 78% 40%, rgba(47, 107, 255, 0.24), transparent 60%),
    radial-gradient(520px 380px at 64% 88%, rgba(37, 211, 102, 0.08), transparent 70%),
    radial-gradient(600px 400px at 10% 10%, rgba(60, 211, 255, 0.10), transparent 70%),
    linear-gradient(180deg, #050d26 0%, var(--ink) 100%);
}
.ch-hero__inner { display: grid; grid-template-columns: 1fr 0.86fr; gap: 64px; align-items: center; min-height: 640px; padding-bottom: 24px; }
.ch-hero__title { font-size: clamp(34px, 3.8vw, 54px); }
.ch-mark { display: flex; width: fit-content; align-items: center; gap: 12px; margin: 4px 0 18px; font: 600 24px/1 var(--f-display); color: var(--ice); letter-spacing: -0.02em; }
.ch-mark__glyph { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: linear-gradient(135deg, var(--blue), #1f8bff 60%, var(--cyan) 140%); box-shadow: 0 8px 24px -8px rgba(47, 107, 255, 0.8); }
.ch-mark__glyph svg { width: 22px; height: 22px; fill: #fff; }
.ch-mark__glyph circle { fill: var(--blue); }

.ch-chans { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.ch-chans i { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 99px; border: 1px solid var(--line-strong); background: rgba(47, 107, 255, 0.07); font-style: normal; font-size: 13.5px; font-weight: 600; color: var(--ice); }
.ch-chans i::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); }
.ch-chans .is-wa::before { background: #25d366; }
.ch-chans .is-vb::before { background: #7360f2; }
.ch-chans .is-sms::before { background: #3cd3ff; }
.ch-chans .is-im::before { background: #ffc65c; }
.ch-chans .is-voice::before { background: #ff8a5c; }
.ch-hero .hero__ctas { margin-top: 28px; }
.ch-hero .hero__stats { margin-top: 40px; }

.ch-hero__visual { position: relative; padding: 10px 0 30px; }
.ch-phone { width: min(100%, 420px); margin: 0 auto 0 0; border-radius: 26px; border: 1px solid var(--line-strong); background: #061024; overflow: hidden; box-shadow: 0 50px 90px -40px rgba(47, 107, 255, 0.7), 0 0 0 6px rgba(255, 255, 255, 0.03); }
.ch-phone__bar { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: #0b1b3a; border-bottom: 1px solid var(--line); }
.ch-phone__bar b { display: block; font-size: 14px; color: var(--ice); }
.ch-phone__bar b em { font-style: normal; display: inline-grid; place-items: center; width: 15px; height: 15px; margin-left: 4px; border-radius: 50%; background: #25d366; color: #032; font-size: 9px; vertical-align: 1px; }
.ch-phone__bar small { font-size: 11.5px; color: var(--mute); }
.ch-phone__ava { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg, #25d366, #128c7e); color: #fff; font: 600 13px/1 var(--f-display); }
.ch-phone__body { display: flex; flex-direction: column; gap: 10px; min-height: 330px; padding: 18px 16px 44px; background: radial-gradient(400px 300px at 80% 0%, rgba(37, 211, 102, 0.06), transparent 70%), #050c1f; }
.ch-msg { max-width: 82%; padding: 10px 13px; border-radius: 14px; font-size: 13.5px; line-height: 1.5; animation: lineIn .45s var(--ease) both; }
.ch-msg b { color: var(--cyan); font-weight: 600; }
.ch-msg--bot { align-self: flex-start; border-top-left-radius: 4px; background: rgba(255, 255, 255, 0.06); border: 1px solid var(--line); color: var(--text); }
.ch-msg--user { align-self: flex-end; border-top-right-radius: 4px; background: linear-gradient(120deg, #1a7f5a, #136b4c); color: #eafff4; }
.ch-phone__body .ch-msg:nth-child(2) { animation-delay: .5s; }
.ch-phone__body .ch-msg:nth-child(3) { animation-delay: 1s; }
.ch-phone__body .ch-msg:nth-child(4) { animation-delay: 1.5s; }
.ch-phone__typing { padding: 4px 0 0; }
.ch-tagcard { position: relative; width: 260px; margin: -34px -8px 0 auto; padding: 14px 16px; border-radius: 14px; border: 1px solid rgba(60, 211, 255, 0.45); background: rgba(8, 16, 44, 0.95); backdrop-filter: blur(14px); box-shadow: 0 24px 50px -16px rgba(0, 0, 0, 0.8); }
.ch-tagcard > small { font-size: 10.5px; letter-spacing: .12em; color: var(--cyan); }
.ch-tagcard ol { display: grid; gap: 4px; margin: 8px 0 12px; padding-left: 12px; border-left: 1px solid var(--line-strong); font-size: 11.5px; color: var(--mute); }
.ch-tagcard li.is-on { color: #fff; }
.ch-tagcard li.is-on::before { content: "▸ "; color: var(--cyan); }
.ch-tagcard__tags { display: flex; flex-wrap: wrap; gap: 5px; }
.ch-tagcard__tags span { padding: 3px 7px; border-radius: 6px; font-size: 10.5px; color: var(--ok); background: rgba(92, 242, 176, 0.08); border: 1px solid rgba(92, 242, 176, 0.3); }

/* ---------- Responsibilities ---------- */
.ch-roles { display: grid; grid-template-columns: 1fr 260px 1fr; gap: 0; align-items: stretch; }
.ch-role { padding: 26px; border-radius: var(--r-lg); border: 1px solid var(--line); background: linear-gradient(180deg, rgba(16, 32, 78, 0.55), rgba(4, 10, 28, 0.3)); }
.ch-role--ai { border-color: rgba(60, 211, 255, 0.45); background: linear-gradient(160deg, rgba(47, 107, 255, 0.3), rgba(4, 10, 28, 0.3)); }
.ch-role__k { display: block; margin-bottom: 10px; font-size: 11px; letter-spacing: .14em; color: var(--cyan); }
.ch-role h3 { font-size: 20px; margin-bottom: 16px; }
.ch-role .ticks li { font-size: 14px; }
.ch-api { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 12px; padding: 0 18px; }
.ch-api__k { text-align: center; font-size: 10.5px; letter-spacing: .12em; color: var(--mute); }
.ch-api__row { position: relative; z-index: 1; display: grid; gap: 3px; padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(156, 140, 255, 0.5); background: #0d1640; text-align: center; }
.ch-api__row b { font-size: 14px; color: var(--ice); }
.ch-api__row small { font-size: 12px; color: var(--mute); line-height: 1.4; }
.ch-api__flow { position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: repeating-linear-gradient(90deg, #b8acff 0 4px, transparent 4px 8px); background-size: 16px 2px; animation: flowRight .8s linear infinite; }
html.is-local .ch-api__k, html.is-local .ch-role__k, html.is-local .fw__lbl { font-family: var(--f-body); letter-spacing: .05em; font-size: 12px; }
.ch-biz { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 14px; margin-top: 18px; padding: 14px 18px; border-radius: var(--r-lg); border: 1px dashed rgba(255, 198, 92, 0.45); background: rgba(255, 198, 92, 0.05); }
.ch-biz .mono { font-size: 11px; letter-spacing: .12em; color: var(--warn); margin-right: 6px; }
.ch-biz span:not(.mono) { padding: 6px 12px; border-radius: 8px; border: 1px solid rgba(255, 198, 92, 0.3); font-size: 13.5px; color: var(--ice); }

/* ---------- Framework ---------- */
.ch-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ch-chips i { font-style: normal; font-size: 12.5px; line-height: 1.3; padding: 5px 10px; border-radius: 8px; border: 1px solid var(--line-strong); background: rgba(16, 32, 78, 0.6); color: var(--text); }
.fw { display: grid; grid-template-columns: 1fr 230px; gap: 50px; }
.fw__sys { display: grid; gap: 14px; padding: 18px; border-radius: var(--r-lg); border: 1px solid rgba(60, 211, 255, 0.35); background: rgba(47, 107, 255, 0.05); }
.fw__lbl { font-size: 10.5px; letter-spacing: .14em; color: var(--cyan); }
.fw__mods { display: grid; grid-template-columns: 1fr 40px 1fr; align-items: stretch; }
.fw__mod { display: grid; gap: 12px; align-content: start; padding: 18px; border-radius: var(--r-lg); border: 1px solid rgba(92, 242, 176, 0.45); background: linear-gradient(180deg, rgba(92, 242, 176, 0.08), rgba(4, 10, 28, 0.4)); }
.fw__mod--st { border-color: rgba(255, 198, 92, 0.5); background: linear-gradient(180deg, rgba(255, 198, 92, 0.08), rgba(4, 10, 28, 0.4)); }
.fw__mod h4 { display: flex; align-items: baseline; gap: 10px; font-size: 16px; }
.fw__mod h4 .mono { font-size: 11px; color: var(--ok); }
.fw__mod--st h4 .mono { color: var(--warn); }
.fw__duty { margin-top: -6px; font-size: 13px; color: var(--mute); }
.fw__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fw__box { display: grid; gap: 4px; align-content: start; padding: 12px; border-radius: 12px; border: 1px solid var(--line-strong); background: rgba(8, 18, 54, 0.75); text-align: center; }
.fw__box b { font-size: 13.5px; color: var(--ice); }
.fw__box small { font-size: 12px; color: var(--mute); line-height: 1.45; }
.fw__box small.mono { font-size: 10px; letter-spacing: .1em; color: var(--warn); }
.fw__box--engine, .fw__box--future { border-color: rgba(156, 140, 255, 0.55); background: linear-gradient(110deg, rgba(120, 100, 255, 0.3), rgba(47, 107, 255, 0.08)); }
.fw__box--future small.mono { color: #c8beff; }
.fw__arrow { position: relative; }
.fw__arrow::before { content: ""; position: absolute; left: 6px; right: 8px; top: 50%; height: 2px; background: repeating-linear-gradient(90deg, var(--cyan) 0 4px, transparent 4px 8px); background-size: 16px 2px; animation: flowRight .8s linear infinite; }
.fw__arrow::after { content: ""; position: absolute; right: 2px; top: 50%; margin-top: -5px; border-block: 5px solid transparent; border-left: 8px solid var(--cyan); }
.fw__layer { padding: 16px 18px; border-radius: var(--r-lg); border: 1px solid var(--line); background: rgba(4, 10, 28, 0.55); }
.fw__layer h4 { margin-bottom: 12px; font-size: 15px; }
.fw__layer--llm { position: relative; border-color: rgba(156, 140, 255, 0.5); background: linear-gradient(180deg, rgba(120, 100, 255, 0.12), rgba(4, 10, 28, 0.4)); }
.fw__layer--llm::before { content: ""; position: absolute; left: 25%; right: 25%; top: -15px; height: 14px; border-inline: 2px dashed rgba(156, 140, 255, 0.6); }
.fw__side { display: grid; gap: 40px; align-content: start; padding-top: 70px; }
.fw__ext { position: relative; padding: 18px; border-radius: var(--r-lg); border: 1px solid rgba(92, 242, 176, 0.5); background: rgba(92, 242, 176, 0.06); }
.fw__ext h4 { margin-bottom: 10px; font-size: 16px; text-align: center; }
.fw__ext li { padding: 6px 0; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--text); }
.fw__ext::before { content: ""; position: absolute; top: 50%; left: -50px; width: 48px; height: 2px; background: repeating-linear-gradient(90deg, var(--ok) 0 4px, transparent 4px 8px); background-size: 16px 2px; animation: flowRight .8s linear infinite; }
.fw__ext--biz { border-color: rgba(255, 198, 92, 0.5); background: rgba(255, 198, 92, 0.05); }
.fw__ext--biz::before { background: repeating-linear-gradient(90deg, var(--warn) 0 4px, transparent 4px 8px); background-size: 16px 2px; animation-name: cbFlowLeft; }

/* ---------- Sequence: 3 lanes ---------- */
.seq--3 .seq__grid { grid-template-columns: repeat(3, minmax(170px, 1fr)); min-width: 640px; }
.seq--3 .seq__grid::before { background: repeating-linear-gradient(90deg, transparent 0 calc(100% / 6 - .5px), rgba(120, 160, 255, 0.22) calc(100% / 6 - .5px) calc(100% / 6 + .5px), transparent calc(100% / 6 + .5px) calc(100% / 3)); }
.seq--3 .seq__who { margin-inline: 18%; }
.seq--3 .seq__note { max-width: 86%; }
.seq__note.is-strategy { border-color: rgba(156, 140, 255, 0.65); background: #1c1840; color: #ddd6ff; }
.seq__note.is-strategy em { color: #b8acff; }
.ch-toggle { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--text); cursor: pointer; white-space: nowrap; }
.ch-toggle input { width: 16px; height: 16px; accent-color: #7a64ff; }

/* ---------- Playbook ---------- */
.pb { display: grid; grid-template-columns: 1.25fr 1fr; gap: 22px; align-items: start; }
.pb__canvas { border-radius: var(--r-lg); border: 1px solid var(--line-strong); background: #050b22; overflow: hidden; box-shadow: 0 40px 80px -30px rgba(47, 107, 255, 0.45); }
.pb__head { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--line); font-size: 11.5px; color: var(--mute); }
.pb__graph { display: flex; flex-direction: column; align-items: center; gap: 24px; padding: 26px 20px 30px; background-image: radial-gradient(rgba(120, 160, 255, 0.14) 1px, transparent 1px); background-size: 18px 18px; }
.pb__n { position: relative; width: min(100%, 240px); padding: 9px 12px; border-radius: 11px; border: 1px solid var(--line-strong); background: rgba(16, 32, 78, 0.9); text-align: center; transition: border-color .3s, box-shadow .3s, background .3s; }
.pb__n small { display: block; font-size: 10px; letter-spacing: .08em; color: var(--mute); }
.pb__n b { font-size: 13px; color: var(--ice); font-weight: 500; }
.pb__graph > .pb__n + .pb__n::before, .pb__row + .pb__n::before { content: ""; position: absolute; left: 50%; top: -25px; height: 24px; width: 2px; background: var(--line-strong); }
.pb__row { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; width: 100%; }
.pb__row::before { content: ""; position: absolute; left: 12.5%; right: 12.5%; top: -12px; height: 1px; background: var(--line-strong); }
.pb__row::after { content: ""; position: absolute; left: 50%; top: -24px; height: 12px; width: 2px; background: var(--line-strong); }
.pb__row .pb__n { width: auto; padding: 9px 6px; }
.pb__row .pb__n::before { content: ""; position: absolute; left: 50%; top: -12px; width: 1px; height: 12px; background: var(--line-strong); }
.pb__n--start { border-color: rgba(60, 211, 255, 0.6); }
.pb__n--end { border-color: rgba(92, 242, 176, 0.55); }
.pb__n--faq { border-color: rgba(156, 140, 255, 0.55); }
.pb__n--warn { border-color: rgba(255, 198, 92, 0.5); }
.pb__n.is-on { border-color: var(--cyan); background: linear-gradient(120deg, rgba(47, 107, 255, 0.75), rgba(47, 107, 255, 0.35)); box-shadow: 0 0 0 1px var(--cyan), 0 12px 30px -10px rgba(60, 211, 255, 0.8); }
.pb__n.is-on small { color: #cfe0ff; }
.pb__feats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pb__feats li { padding: 16px; border-radius: 14px; border: 1px solid var(--line); background: rgba(4, 10, 28, 0.55); }
.pb__feats b { display: block; margin-bottom: 4px; font-size: 14.5px; color: var(--ice); }
.pb__feats span { font-size: 13px; color: var(--mute); line-height: 1.5; }

/* ---------- Strategy canvas ---------- */
.stc { display: grid; grid-template-columns: 1fr 40px 1.1fr 40px 1.3fr 40px 1fr; align-items: center; padding: 28px 22px; border-radius: var(--r-lg); border: 1px solid var(--line); background: radial-gradient(rgba(120, 160, 255, 0.12) 1px, transparent 1px) 0 0 / 18px 18px, rgba(4, 10, 28, 0.6); }
.stc__col { display: grid; gap: 10px; }
.stc__n { display: grid; gap: 4px; padding: 14px; border-radius: 12px; border: 1px solid var(--line-strong); background: rgba(16, 32, 78, 0.85); text-align: center; }
.stc__n small { font-size: 10.5px; letter-spacing: .08em; color: var(--mute); }
.stc__n b { font-size: 14px; color: var(--ice); font-weight: 600; }
.stc__n span { font-size: 12px; color: var(--mute); line-height: 1.4; }
.stc__n--in { border-color: rgba(60, 211, 255, 0.55); }
.stc__n--cond { border-color: rgba(255, 198, 92, 0.55); transform: none; }
.stc__n--cond small { color: var(--warn); }
.stc__n--out { border-color: rgba(92, 242, 176, 0.55); }
.stc__n--out small { color: var(--ok); }
.stc__col--split .stc__n { padding: 10px 12px; }
.stc__col--split .stc__n b { font-size: 12.5px; font-weight: 500; }
.stc__arrow { position: relative; height: 2px; margin: 0 4px; background: repeating-linear-gradient(90deg, var(--cyan) 0 4px, transparent 4px 8px); background-size: 16px 2px; animation: flowRight .8s linear infinite; }
.stc__arrow::after { content: ""; position: absolute; right: -2px; top: -4px; border-block: 5px solid transparent; border-left: 8px solid var(--cyan); }
.stc__road { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 18px; }
.stc__road li { display: grid; gap: 4px; padding: 16px 18px; border-radius: 14px; border: 1px solid var(--line); border-top: 2px solid var(--warn); background: rgba(4, 10, 28, 0.55); }
.stc__road li.is-next { border-top-color: #9c8cff; background: linear-gradient(180deg, rgba(120, 100, 255, 0.14), rgba(4, 10, 28, 0.4)); }
.stc__road .mono { font-size: 10.5px; letter-spacing: .1em; color: var(--warn); }
.stc__road li.is-next .mono { color: #c8beff; }
.stc__road b { font-size: 15px; color: var(--ice); }
.stc__road small { font-size: 13px; color: var(--mute); line-height: 1.45; }

/* ---------- Demo tweaks ---------- */
#ch-demo .cb-turn--user { background: linear-gradient(120deg, rgba(26, 127, 90, 0.55), rgba(19, 107, 76, 0.4)); border-color: rgba(37, 211, 102, 0.35); color: #eafff4; }

/* ---------- Goals ---------- */
.ch-goals { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-bottom: 20px; }
.ch-goals li { padding: 22px 20px; border-radius: var(--r-lg); border: 1px solid var(--line); background: linear-gradient(180deg, rgba(16, 32, 78, 0.55), rgba(4, 10, 28, 0.25)); }
.ch-goals .mono { display: block; margin-bottom: 18px; font-size: 12px; color: var(--cyan); }
.ch-goals h3 { font-size: 16.5px; line-height: 1.3; margin-bottom: 8px; }
.ch-goals p { font-size: 13.5px; color: var(--mute); }
.ch-feats { margin-top: 0; }

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  .ch-goals { grid-template-columns: repeat(3, 1fr); }
  .fw { grid-template-columns: 1fr; gap: 20px; }
  .fw__side { grid-template-columns: 1fr 1fr; padding-top: 0; gap: 14px; }
  .fw__ext::before { display: none; }
  .stc { grid-template-columns: 1fr 1fr; gap: 14px; }
  .stc__arrow { display: none; }
}
@media (max-width: 1024px) {
  .ch-hero__inner { grid-template-columns: 1fr; min-height: 0; gap: 48px; }
  .ch-hero__visual { max-width: 560px; width: 100%; justify-self: center; }
  .ch-roles { grid-template-columns: 1fr; gap: 14px; }
  .ch-api { padding: 0; flex-direction: row; flex-wrap: wrap; justify-content: center; }
  .ch-api__k { flex-basis: 100%; }
  .ch-api__row { flex: 1 1 220px; }
  .ch-api__flow { display: none; }
  .fw__mods { grid-template-columns: 1fr; gap: 14px; }
  .fw__arrow { display: none; }
  .pb { grid-template-columns: 1fr; }
  .stc__road { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .ch-mark { font-size: 20px; }
  .ch-tagcard { width: auto; margin: -24px 10px 0; }
  .ch-phone { width: 100%; }
  .fw__pair, .fw__side { grid-template-columns: 1fr; }
  .fw__layer--llm::before { display: none; }
  .pb__row { grid-template-columns: 1fr 1fr; }
  .pb__row::before, .pb__row::after, .pb__row .pb__n::before { display: none; }
  .pb__feats { grid-template-columns: 1fr; }
  .stc { grid-template-columns: 1fr; padding: 18px; }
  .ch-goals { grid-template-columns: 1fr; }
  .seq__foot { flex-wrap: wrap; }
}