/* Дизайн-система «Бизнес-помощника»: токены, типографика и геометрия — из UI-спецификации
   продукта (палитра § 1.1, шрифт § 1.2, радиусы § 1.3, анимации § 1.4). Взят экран диалога:
   лента, строка прогресса с журналом действий и композер. Остального у стенда нет данных.

   Тёмная тема — те же токены с другими значениями; `data-theme` ставит скрипт: внутри
   Telegram по теме клиента, снаружи по системной. Часть токенов поверх этого перекрывают
   цвета клиента (themeParams), чтобы страница не спорила с окном, в котором открыта. */

:root {
  --bg: #F2F5F4; --surface: #FFFFFF; --surface2: #F6F9F8;
  --line: #E3EAE7; --line2: #D3DFDA;
  --ink: #17211E; --ink2: #54655F; --ink3: #8CA09A;
  --accent: #0B9E7D; --accent-deep: #087F64; --accent-soft: #E4F5EF;
  --mint: #DFF3EC; --mint-line: #BFE6D9;
  --amber: #E9A63C;
  --danger: #D4483E; --danger-deep: #B4372E; --danger-bg: #FBECEA; --danger-line: #F0CDC9;
  --warn-bg: #FFF6E2; --warn-line: #F0DCB0; --warn-ink: #8A6612;
  --grad: linear-gradient(135deg, #2BD886 0%, #12AFC9 55%, #3E7BE8 100%);
  --hover: rgba(23, 33, 30, .06);
  --send-off: #C9D8D2;
  --sh: 0 1px 2px rgba(23, 33, 30, .04), 0 4px 14px rgba(23, 33, 30, .05);
  --sh-lg: 0 10px 44px rgba(23, 33, 30, .20);
  --col: 768px;
}

:root[data-theme="dark"] {
  --bg: #0E1412; --surface: #151C19; --surface2: #1B2420;
  --line: #243029; --line2: #31413A;
  --ink: #E6EEE9; --ink2: #9FB2AA; --ink3: #6E837B;
  --accent: #1FB58E; --accent-deep: #2FCBA1; --accent-soft: #16302A;
  --mint: #1C3A2F; --mint-line: #2A5342;
  --danger: #DE6058; --danger-deep: #E97C74; --danger-bg: #38201D; --danger-line: #57302B;
  --warn-bg: #33290F; --warn-line: #54431A; --warn-ink: #E3B84F;
  --hover: rgba(230, 238, 233, .07);
  --send-off: #33413B;
  --sh: 0 1px 2px rgba(0, 0, 0, .35), 0 4px 14px rgba(0, 0, 0, .28);
  --sh-lg: 0 12px 48px rgba(0, 0, 0, .55);
}

* { box-sizing: border-box; margin: 0; padding: 0 }

html, body { height: 100% }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: "Golos Text", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
  transition: background .25s, color .25s;
}

button { font: inherit; color: inherit; background: none; border: none; cursor: pointer }
textarea, input { font: inherit; color: inherit }
[hidden] { display: none !important }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px }
.num { font-variant-numeric: tabular-nums }

@keyframes rise { from { opacity: 0; transform: translateY(8px) } }
@keyframes pulse { 0%, 100% { transform: scale(1); opacity: 1 } 50% { transform: scale(.82); opacity: .65 } }
@keyframes dotrun { 0%, 60%, 100% { transform: translateY(0); opacity: .4 } 30% { transform: translateY(-4px); opacity: 1 } }

/* ============ каркас ============ */
#app { display: flex; flex-direction: column; height: 100%; min-height: 0 }

#top {
  height: 56px; flex: none; display: flex; align-items: center; gap: 10px;
  padding: 0 14px; border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 9px; min-width: 0 }
.orb { width: 26px; height: 26px; border-radius: 50%; background: var(--grad); flex: none }
#title { font-size: 15px; font-weight: 650; overflow: hidden; white-space: nowrap; text-overflow: ellipsis }
#subtitle { font-size: 12px; color: var(--ink3); overflow: hidden; white-space: nowrap; text-overflow: ellipsis }
.iconbtn {
  width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center;
  color: var(--ink2); flex: none; transition: background .12s, color .12s;
}
.iconbtn:hover { background: var(--hover); color: var(--ink) }
.grow { flex: 1; min-width: 0 }

#warn {
  margin: 8px 16px 0; border-radius: 12px; background: var(--warn-bg);
  border: 1px solid var(--warn-line); color: var(--warn-ink); padding: 9px 12px; font-size: 13px;
}

/* ============ лента ============ */
#feedwrap { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain }
#feed { max-width: var(--col); margin: 0 auto; padding: 16px 16px 8px; display: flex; flex-direction: column }

#hero { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 18px 4px 8px }
.hero-orb { width: 62px; height: 62px; border-radius: 50%; background: var(--grad); box-shadow: 0 12px 34px rgba(18, 175, 150, .32) }
#hero h1 { font-size: 24px; font-weight: 700; letter-spacing: -.4px; text-wrap: balance }
.hero-sub { color: var(--ink2); font-size: 14.5px; max-width: 44ch; text-wrap: balance }

.card {
  border: 1px solid var(--line); border-radius: 16px; background: var(--surface);
  padding: 14px 16px; box-shadow: var(--sh); text-align: left; width: 100%; max-width: 520px;
}
.card-t { font-weight: 650; font-size: 15px; margin-bottom: 6px }
.card-row { display: flex; gap: 10px; padding: 5px 0; font-size: 13.5px; border-bottom: 1px dashed var(--line) }
.card-row:last-child { border-bottom: none }
.card-row span:first-child { color: var(--ink2); flex: none; min-width: 92px }
.card-row span:last-child { overflow-wrap: anywhere }

.turn-u { display: flex; flex-direction: column; align-items: flex-end; margin: 12px 0 2px }
.bubble {
  max-width: min(85%, 560px); background: var(--mint); border: 1px solid var(--mint-line);
  border-radius: 16px 16px 4px 16px; padding: 10px 14px; white-space: pre-wrap;
  overflow-wrap: anywhere; font-size: 15px;
}

.msg-a { margin: 10px 0 2px; font-size: 15px; line-height: 1.62 }
.a-body { white-space: pre-wrap; overflow-wrap: anywhere }
.a-mark { color: var(--ink3); font-size: 12.5px; font-style: italic; margin-top: 6px }
.a-links { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; align-items: flex-start }
.a-link {
  display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px;
  border-radius: 9px; background: var(--accent-soft); color: var(--accent-deep);
  font-size: 13px; font-weight: 600; text-decoration: none; max-width: 100%;
}
.a-link:hover { background: var(--mint) }

.step-err {
  display: flex; gap: 10px; align-items: center; border: 1px solid var(--danger-line);
  background: var(--danger-bg); color: var(--danger-deep); border-radius: 12px;
  padding: 10px 12px; font-size: 13.5px; margin: 8px 0;
}

/* итог хода: тихая строка под ответом, по клику — снимок журнала (UX § 5.4) */
.wsum {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 4px; padding: 5px 9px 5px 7px;
  border-radius: 9px; color: var(--ink3); font-size: 12.5px; align-self: flex-start;
}
.wsum:hover { background: var(--hover); color: var(--ink2) }
.wsum .w-orb { width: 12px; height: 12px; border-radius: 50%; background: var(--grad); opacity: .75; flex: none }
.work-plan { border-left: 2px solid var(--line2); margin: 6px 0 2px 14px; padding: 2px 0 2px 14px }

/* ============ журнал действий ============ */
.pi { display: flex; gap: 10px; padding: 5px 0; align-items: flex-start; font-size: 13.5px }
.pi-ic {
  width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line2); flex: none;
  margin-top: 1px; display: grid; place-items: center; color: #fff; transition: all .15s;
}
.pi.done .pi-ic { background: var(--accent); border-color: var(--accent) }
.pi.doing .pi-ic { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft) }
.pi-t { color: var(--ink2) }
.pi.done .pi-t { color: var(--ink3) }
.pi.doing .pi-t { color: var(--ink); font-weight: 600 }
.pi.ghost .pi-ic { border-style: dashed; opacity: .6 }
.pi.ghost .pi-t { display: inline-flex; gap: 4px; align-items: center; padding-top: 7px }
.pi.ghost .pi-t i { width: 4.5px; height: 4.5px; border-radius: 50%; background: var(--ink3); animation: dotrun 1.15s ease-in-out infinite }
.pi.ghost .pi-t i:nth-child(2) { animation-delay: .15s }
.pi.ghost .pi-t i:nth-child(3) { animation-delay: .3s }

/* ============ док: прогресс и композер ============ */
#dock {
  width: 100%; max-width: var(--col); margin: 0 auto; flex: none; position: relative;
  padding: 6px 16px calc(12px + env(safe-area-inset-bottom)); display: flex;
  flex-direction: column; gap: 8px;
}
#fabdown {
  position: absolute; top: -46px; left: 50%; transform: translateX(-50%); width: 40px; height: 40px;
  border-radius: 50%; background: var(--surface); border: 1px solid var(--line);
  box-shadow: var(--sh); display: grid; place-items: center; color: var(--ink2); z-index: 5;
}
#plan {
  border: 1px solid var(--line); border-radius: 14px; background: var(--surface);
  box-shadow: var(--sh); max-height: 168px; overflow-y: auto; padding: 10px 14px; animation: rise .15s;
}
#progress {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px; border: 1px solid var(--line);
  border-radius: 14px; background: var(--surface); box-shadow: var(--sh); animation: rise .18s;
  width: 100%; text-align: left;
}
.p-orb { width: 20px; height: 20px; border-radius: 50%; background: var(--grad); animation: pulse 1.5s ease-in-out infinite; flex: none }
.p-time { font-variant-numeric: tabular-nums; color: var(--ink2); font-weight: 600; font-size: 13.5px; flex: none }
.p-thought { flex: 1; min-width: 0; color: var(--ink2); font-size: 13.5px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis }
.p-chev { color: var(--ink3); flex: none; transition: transform .15s }
#progress.open .p-chev { transform: rotate(180deg) }

#composer {
  display: flex; gap: 6px; align-items: flex-end; background: var(--surface);
  border: 1.5px solid var(--line2); border-radius: 18px; padding: 8px 10px;
  box-shadow: var(--sh); transition: border-color .15s;
}
#composer:focus-within { border-color: var(--accent) }
#ta {
  flex: 1; min-width: 0; border: none; outline: none; resize: none; background: transparent;
  line-height: 24px; max-height: 288px; overflow-y: auto; overflow-wrap: anywhere; padding: 7px 2px;
}
#send {
  width: 38px; height: 38px; border-radius: 50%; background: var(--accent); color: #fff;
  display: grid; place-items: center; flex: none; transition: background .12s, transform .05s;
}
#send:hover:not(:disabled) { background: var(--accent-deep) }
#send:active:not(:disabled) { transform: scale(.94) }
#send:disabled { background: var(--send-off); cursor: default }

/* ============ настройки: клиент и режим хода ============ */
#veil { position: fixed; inset: 0; background: rgba(10, 16, 14, .5); z-index: 20 }
#sheet {
  position: fixed; inset: auto 0 0 0; z-index: 21; display: flex; flex-direction: column;
  max-height: 88vh; background: var(--bg); border-radius: 18px 18px 0 0;
  box-shadow: var(--sh-lg); animation: rise .18s;
}
.sheet-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px 8px; flex: none }
.sheet-t { font-size: 17px; font-weight: 700 }
.sheet-body { overflow-y: auto; padding: 0 14px calc(14px + env(safe-area-inset-bottom)) }
.sheet-sec { font-size: 11px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--ink3); margin: 14px 2px 8px }

#search {
  width: 100%; border: 1px solid var(--line2); border-radius: 10px; padding: 9px 11px;
  background: var(--surface); outline: none; transition: border-color .12s;
}
#search:focus { border-color: var(--accent) }

.chips { display: flex; flex-wrap: wrap; gap: 6px }
.chip {
  padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; font-size: 13px;
  color: var(--ink2); background: var(--surface); transition: background .12s, border-color .12s;
}
.chip:hover { border-color: var(--line2) }
.chip.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-deep); font-weight: 600 }

.group-h { font-size: 12.5px; font-weight: 650; color: var(--ink2); margin: 12px 2px 6px }
.group-h b { color: var(--ink3); font-weight: 500 }
.row {
  display: flex; gap: 10px; align-items: flex-start; width: 100%; text-align: left;
  border: 1px solid var(--line); border-radius: 12px; background: var(--surface);
  padding: 9px 12px; margin-bottom: 6px; transition: border-color .1s, background .1s;
}
.row:hover { border-color: var(--line2) }
.row.on { background: var(--mint); border-color: var(--accent) }
.row-id { font-size: 13px; font-weight: 650; font-variant-numeric: tabular-nums }
.row-d { font-size: 13px; color: var(--ink2) }
.row-g { font-size: 12.5px; color: var(--ink3); margin-top: 2px }
.row-no-epk { color: var(--amber) }
.row-mark { color: var(--accent); flex: none; margin-left: auto; opacity: 0 }
.row.on .row-mark { opacity: 1 }
.empty { color: var(--ink3); font-size: 13.5px; padding: 10px 2px }

.btn {
  height: 38px; padding: 0 16px; border-radius: 11px; font-weight: 600; font-size: 14px;
  border: 1px solid var(--line2); background: var(--surface); color: var(--ink);
  display: inline-flex; align-items: center; gap: 7px; transition: background .12s;
}
.btn:hover { background: var(--surface2) }
.btn-acc { background: var(--accent); border-color: var(--accent); color: #fff }
.btn-acc:hover { background: var(--accent-deep) }

/* Узкий экран — основной: мини-апп открывают с телефона (UI-спецификация § 5). */
@media (max-width: 560px) {
  #feed { padding: 12px 12px 6px }
  #dock { padding: 6px 12px calc(10px + env(safe-area-inset-bottom)) }
  .bubble { max-width: 88% }
  #hero h1 { font-size: 22px }
}

/* ================= пометка исхода и переходы ================= */
/* Пометка исхода была курсивной строкой и терялась в тексте. Теперь это бейдж:
   видно с одного взгляда, ответил агент или отказался. */
.a-mark {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding: 3px 11px 4px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: 1.4;
}
.a-mark::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.a-mark-ask,
.a-mark-warn {
  color: #d18b2c;
  background: rgba(209, 139, 44, .13);
  border-color: rgba(209, 139, 44, .32);
}
.a-mark-stop {
  color: #d95f52;
  background: rgba(217, 95, 82, .13);
  border-color: rgba(217, 95, 82, .32);
}
.a-mark-mute {
  color: var(--ink3);
  background: rgba(128, 128, 128, .12);
  border-color: rgba(128, 128, 128, .26);
}

/* Переход на форму — призыв к действию, а не сноска под текстом. */
.a-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.a-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 15px;
  border-radius: 11px;
  background: var(--accent);
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
}
.a-link:hover { filter: brightness(1.07); }
.a-link:active { transform: translateY(1px); }

/* ================= список диалогов ================= */
#chatsheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-radius: 18px 18px 0 0;
  box-shadow: 0 -8px 40px rgba(0, 0, 0, .28);
}
#chatnew {
  width: 100%;
  margin-bottom: 12px;
}
.chat-row {
  display: flex;
  align-items: stretch;
  gap: 6px;
  margin-bottom: 6px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: var(--surface2);
}
.chat-row.on {
  border-color: var(--accent);
}
.chat-main {
  flex: 1;
  padding: 10px 12px;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.chat-t {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
}
.chat-s {
  margin-top: 2px;
  color: var(--ink3);
  font-size: 12px;
}
.chat-x {
  flex: 0 0 auto;
  width: 40px;
  border: 0;
  border-radius: 0 12px 12px 0;
  background: none;
  color: var(--ink3);
  cursor: pointer;
}
.chat-x:hover { color: #d95f52; }

/* ================= диалоги слева ================= */
/* Панель, а не нижний лист: диалоги листают глазами сверху вниз, и привычное место
   для них — левый край, как в любом мессенджере. */
#chatsheet {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: auto;
  z-index: 40;
  width: min(300px, 82vw);
  max-height: none;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-radius: 0 16px 16px 0;
  box-shadow: 8px 0 40px rgba(0, 0, 0, .3);
  animation: chatsIn .18s ease-out;
}
@keyframes chatsIn {
  from { transform: translateX(-100%); }
  to   { transform: translateX(0); }
}
#chatsheet .sheet-body {
  flex: 1;
  overflow-y: auto;
}

/* ================= подсказки на стартовом экране ================= */
/* Человек открывает мини-апп впервые и не знает ни про вымышленные данные, ни про то,
   где менять клиента и диалог. Три строки на входе снимают все три вопроса. */
.hero-tips {
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  text-align: left;
}
.hero-tips li {
  position: relative;
  margin-bottom: 10px;
  padding-left: 18px;
  color: var(--ink2);
  font-size: 13px;
  line-height: 1.5;
}
.hero-tips li::before {
  content: '';
  position: absolute;
  top: 8px;
  left: 4px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
}
.hero-tips b {
  color: var(--ink);
  font-weight: 600;
}

/* ================= разметка в ответе ================= */
.a-body .md-p { margin: 0 0 8px; }
.a-body .md-p:last-child { margin-bottom: 0; }
.a-body .md-h {
  margin: 12px 0 6px;
  font-weight: 600;
  font-size: 15px;
}
.a-body .md-h:first-child { margin-top: 0; }
.a-body .md-l {
  margin: 0 0 8px;
  padding-left: 20px;
}
.a-body .md-l li { margin-bottom: 4px; }
.a-body .md-l li:last-child { margin-bottom: 0; }
.a-body code {
  padding: 1px 5px;
  border-radius: 5px;
  background: rgba(128, 128, 128, .16);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .92em;
}
.a-body .md-a {
  color: var(--accent-deep);
  text-decoration: underline;
}

/* ================= кнопка остановки и подсказка в настройках ================= */
#stop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 10px;
  background: rgba(217, 95, 82, .16);
  color: #d95f52;
  cursor: pointer;
}
#stop:hover { background: rgba(217, 95, 82, .24); }
.sheet-note {
  margin: 0 0 10px;
  color: var(--ink3);
  font-size: 12px;
  line-height: 1.45;
}

/* Атрибут hidden — правило display:none со слабой специфичностью, и селектор по
   идентификатору его перебивает. Без этих двух строк кнопка «Стоп» видна всегда,
   стоит рядом с отправкой и перехватывает нажатия, а отменять ей нечего. */
#send[hidden],
#stop[hidden] { display: none; }


/* ================= карточка клиента ================= */
.card-data {
  margin-top: 6px;
  color: var(--ink2);
  font-size: 13px;
  line-height: 1.5;
}
.card-warn {
  margin-top: 8px;
  color: #d18b2c;
  font-size: 12px;
}