/* Bot builder styles on top of design/days.css — tokens only */
.plain { list-style: none; padding: 0; margin: 0; }
.mono { font-family: var(--font-mono); }
.page-title { font-size: var(--step-3); line-height: var(--leading-tight); overflow-wrap: anywhere; }
.card-title { font-size: var(--step-1); line-height: var(--leading-tight); overflow-wrap: anywhere; }
.card-title a { color: var(--text); }
.card-title a:hover { color: var(--accent); }
.section-tight { padding-block: var(--space-6); }
.section-alt { background: var(--surface); border-block: var(--border-width) solid var(--border); }
.section-alt .card { background: var(--bg); }
.nav-form { display: contents; }
.nav-user { padding-inline: var(--space-3); max-width: 14rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 767.98px) { .nav-user { padding-block: var(--space-2); } .nav-form .btn { justify-content: flex-start; } }

/* ---------- Landing ---------- */
.hero { padding-block: var(--space-8); }
.hero h1 { font-size: var(--step-4); line-height: var(--leading-tight); max-width: 16ch; }
.lead { font-size: var(--step-1); max-width: 38rem; }
.hero-grid { display: grid; gap: var(--space-7); align-items: center; }
@media (min-width: 900px) { .hero-grid { grid-template-columns: 1.15fr 1fr; } }
.hero .phone { justify-self: center; width: 100%; max-width: 22rem; }
.step-num {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: var(--tap); height: var(--tap); border-radius: var(--radius-full);
  background: var(--accent-soft); color: var(--accent); font-weight: 800;
  border: var(--border-width) solid var(--accent);
}
.steps3 { grid-template-columns: 1fr; }
@media (min-width: 768px) { .steps3 { grid-template-columns: repeat(3, 1fr); } }
.steps3 h3, .grid h3 { font-size: var(--step-1); }
.features li { display: flex; flex-direction: column; gap: var(--space-1); padding-left: var(--space-4); border-left: 3px solid var(--accent); }

/* ---------- Phone + chat bubbles (landing sample and simulator) ---------- */
.phone {
  display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-3); border: var(--border-width) solid var(--border-strong); border-radius: var(--radius-3);
  background: var(--surface); box-shadow: var(--shadow);
}
.phone-head { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-1) var(--space-2); }
.phone-head > div { display: flex; flex-direction: column; min-width: 0; }
.phone-head b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.phone-ava {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 40px; height: 40px; border-radius: var(--radius-full);
  background: var(--accent); color: var(--accent-text); font-weight: 800; text-transform: uppercase;
}
.chat {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-3); border-radius: var(--radius-2); background: var(--bg);
  border: var(--border-width) solid var(--border);
}
.msg {
  max-width: 85%; padding: var(--space-2) var(--space-3); border-radius: var(--radius-3);
  overflow-wrap: anywhere; line-height: 1.45;
}
.msg-text { white-space: pre-line; }
.msg-bot { align-self: flex-start; background: var(--surface-2); color: var(--text); border-bottom-left-radius: var(--radius-1); }
.msg-me { align-self: flex-end; background: var(--accent); color: var(--accent-text); border-bottom-right-radius: var(--radius-1); }
.msg-buttons { display: flex; flex-direction: column; gap: var(--space-1); margin-top: var(--space-2); white-space: normal; }
.msg-row { display: flex; gap: var(--space-1); }
.msg-row > * { flex: 1 1 0; min-width: 0; }
.msg-row > * {
  display: flex; align-items: center; justify-content: center; min-height: 40px; padding: var(--space-1) var(--space-3);
  border: var(--border-width) solid var(--accent); border-radius: var(--radius-2);
  background: var(--bg); color: var(--accent); font: inherit; font-weight: 600; text-decoration: none; text-align: center;
}
.msg-row button, .msg-row a { cursor: pointer; }
.msg-row button:hover, .msg-row a:hover { background: var(--accent-soft); color: var(--accent); }

/* ---------- Bot list and connection ---------- */
.bot-stats { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); color: var(--muted); }
.connect { max-width: 48rem; }
.connect-steps, .login-steps { margin: 0; padding-left: 1.25rem; display: flex; flex-direction: column; gap: var(--space-2); }
.presets { border: 0; padding: 0; margin: 0; min-width: 0; }
.preset-grid { display: grid; gap: var(--space-2); grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
.preset {
  display: flex; gap: var(--space-3); align-items: flex-start; cursor: pointer;
  padding: var(--space-3); border: var(--border-width) solid var(--border-strong); border-radius: var(--radius-2); background: var(--bg);
}
.preset input { width: 1.25rem; height: 1.25rem; margin: 2px 0 0; accent-color: var(--accent); flex: none; }
.preset > span { display: flex; flex-direction: column; gap: var(--space-1); }
.preset:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.preset:has(input:focus-visible) { outline: var(--focus-width) solid var(--focus); outline-offset: 2px; }

/* ---------- Bot page head and tabs ---------- */
.back { width: fit-content; display: inline-flex; align-items: center; min-height: var(--tap); }
.brand { display: inline-flex; align-items: center; min-height: var(--tap); }
.tabs { display: flex; gap: var(--space-1); border-bottom: var(--border-width) solid var(--border); overflow-x: auto; }
.tabs a {
  display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--tap); padding-inline: var(--space-4);
  color: var(--text); text-decoration: none; border-bottom: 3px solid transparent; margin-bottom: -1px; white-space: nowrap;
}
.tabs a:hover { color: var(--accent); }
.tabs a[aria-current="page"] { color: var(--accent); font-weight: 600; border-bottom-color: var(--accent); }
.tab-count { font-size: var(--step--1); padding: 0 var(--space-2); border-radius: var(--radius-full); background: var(--accent-soft); color: var(--accent); }

/* ---------- Scenario editor ---------- */
.editor-grid { display: grid; gap: var(--space-6); align-items: start; }
@media (min-width: 1024px) {
  .editor-grid { grid-template-columns: minmax(0, 1fr) 22rem; }
  .sim-col { position: sticky; top: calc(64px + var(--space-4)); }
}
.step { gap: var(--space-4); }
.step-head { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.step-title { font-size: var(--step-1); }
.step-tools { display: flex; gap: var(--space-1); margin-left: auto; }
.step-question { border-left: 4px solid var(--accent); }
.step-submit { border-left: 4px solid var(--success); }
.step-grid { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.btn-row { display: grid; gap: var(--space-2); grid-template-columns: minmax(0, 1fr) var(--tap); align-items: center; }
.btn-row > .select, .btn-row > .btn-url { grid-column: 1; }
.btn-row > .btn { grid-column: 2; grid-row: 1; }
.btn-row + .btn-row { padding-top: var(--space-2); border-top: var(--border-width) dashed var(--border); }
@media (min-width: 640px) {
  .btn-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) var(--tap); }
  .btn-row > .select { grid-column: 2; grid-row: 1; }
  .btn-row > .btn-url { grid-column: 1 / 3; }
  .btn-row > .btn { grid-column: 3; }
}
.btn-url { display: none; }
.btn-row:has(option[value="url"]:checked) .btn-url { display: block; }
.item-row { display: grid; gap: var(--space-2); grid-template-columns: minmax(0, 1fr) 5.5rem 6rem var(--tap); align-items: center; }
.item-row > .item-descr { grid-column: 1 / 4; }
.item-row > .item-del { grid-column: 4; grid-row: 1; }
.item-price { text-align: right; }
.item-row + .item-row { padding-top: var(--space-2); border-top: var(--border-width) dashed var(--border); }
@media (max-width: 479.98px) {
  .item-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) var(--tap); }
  .item-row > .item-name { grid-column: 1 / 3; }
  .item-row > .item-price { grid-column: 1; grid-row: 2; }
  .item-row > .item-unit { grid-column: 2; grid-row: 2; }
  .item-row > .item-descr { grid-column: 1 / 3; }
}
.step-catalog { border-left: 4px solid var(--warning); }
.add-step { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); border: 2px dashed var(--border-strong); border-radius: var(--radius-3); }

/* ---------- Simulator ---------- */
.sim-jump { width: fit-content; }
@media (min-width: 1024px) { .sim-jump { display: none; } }
#sim { scroll-margin-top: calc(64px + var(--space-4)); }
.sim .chat-live { display: flex; flex-direction: column-reverse; height: min(28rem, 60dvh); overflow-y: auto; }
.chat-empty { margin: auto; text-align: center; max-width: 16rem; }
.sim-input { display: flex; gap: var(--space-2); }
.sim-input .input { flex: 1; min-width: 0; }

/* ---------- Leads and settings ---------- */
.lead-data { margin: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.lead-data dt { font-size: var(--step--1); color: var(--muted); }
.lead-data dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; white-space: pre-line; }
.empty { max-width: 40rem; }
.danger-zone { border-color: var(--danger); }