:root {
  --bg: var(--tg-theme-bg-color, #17212b);
  --sec: var(--tg-theme-secondary-bg-color, #232e3c);
  --text: var(--tg-theme-text-color, #f5f5f5);
  --hint: var(--tg-theme-hint-color, #7d8b99);
  --btn: var(--tg-theme-button-color, #5288c1);
  --btn-text: var(--tg-theme-button-text-color, #fff);
  --green: #4caf50; --red: #e25555;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg); color: var(--text);
  font: 15px/1.4 -apple-system, "Segoe UI", Roboto, sans-serif;
  display: flex; flex-direction: column; height: 100vh; overflow: hidden;
}
#appbar { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; background: var(--sec); flex: 0 0 auto; }
.tabs { display: flex; gap: 6px; }
.tab { background: transparent; border: 0; color: var(--hint); font-size: 15px; padding: 6px 10px; border-radius: 8px; cursor: pointer; }
.tab.active { background: var(--btn); color: var(--btn-text); }
.ver { color: var(--hint); font-size: 11px; }
.presence { margin-left: auto; margin-right: 8px; font-size: 15px; opacity: 0.4; filter: grayscale(1);
  transition: opacity .2s, filter .2s; }
.presence sup { font-size: 10px; font-weight: 700; }
.presence.online { opacity: 1; filter: none; }
.presence.online sup { color: #2ecc71; }

.tab-pane { display: none; flex: 1 1 auto; min-height: 0; flex-direction: column; overflow-y: auto; }
.tab-pane.active { display: flex; }

.cards { display: flex; gap: 8px; padding: 8px 12px 0; }
.card { flex: 1; background: var(--sec); border-radius: 12px; padding: 12px; text-align: center; }
.card-t { color: var(--hint); font-size: 12px; }
.card-v { font-size: 22px; font-weight: 600; margin-top: 4px; }
.metrics { padding: 10px 12px; }
.metrics .row { display: flex; justify-content: space-between; padding: 3px 0; border-bottom: 1px solid rgba(255,255,255,.06); }
.metrics .row span:first-child { color: var(--hint); }
.pos { color: var(--green); } .neg { color: var(--red); }
.h { margin: 8px 12px 4px; color: var(--hint); font-weight: 600; font-size: 13px; }
.list { padding: 0 12px; }
.list .item { background: var(--sec); border-radius: 10px; padding: 8px 12px; margin-bottom: 6px; display: flex; justify-content: space-between; }
.list .item .sym { font-weight: 600; }
.list .item .px { color: var(--hint); font-size: 13px; }
.refresh { margin: 12px; border: 0; border-radius: 10px; padding: 12px; background: var(--btn); color: var(--btn-text); font-size: 15px; cursor: pointer; }

/* чат */
.messages { flex: 1 1 auto; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.msg { max-width: 85%; padding: 8px 12px; border-radius: 14px; white-space: pre-wrap; word-wrap: break-word; }
.msg.me { align-self: flex-end; background: var(--btn); color: var(--btn-text); border-bottom-right-radius: 4px; }
.msg.bot { align-self: flex-start; background: var(--sec); border-bottom-left-radius: 4px; }
.msg.pending { opacity: .6; font-style: italic; }
.composer { display: flex; gap: 8px; padding: 10px 12px; background: var(--sec); flex: 0 0 auto; }
.composer textarea { flex: 1; resize: none; border: 0; border-radius: 18px; padding: 9px 14px; background: var(--bg); color: var(--text); font-size: 15px; max-height: 120px; }
.composer button { border: 0; border-radius: 50%; width: 40px; height: 40px; background: var(--btn); color: var(--btn-text); font-size: 18px; cursor: pointer; }
.composer button:disabled { opacity: .5; }

/* время сообщений */
.msg-time { font-size: 10px; color: var(--hint); margin: -4px 6px 8px; line-height: 1.2; }
.msg-time.me { text-align: right; }
.msg-time.bot { text-align: left; }
.msg-time:empty { display: none; }

/* настройки (LLM-роутер) */
.settings { padding: 14px; overflow-y: auto; }
.set-block { margin-bottom: 20px; }
.set-label { font-size: 14px; margin-bottom: 8px; }
.set-hint { color: var(--hint); font-size: 12px; margin-top: 6px; }
.seg { display: flex; gap: 6px; }
.seg-btn { flex: 1; padding: 10px 0; border: 0; border-radius: 10px;
  background: var(--sec); color: var(--text); font-size: 14px; cursor: pointer; }
.seg-btn.active { background: var(--btn, #2ea6ff); color: var(--btn-text, #fff); font-weight: 600; }
.settings input[type=range] { width: 100%; }
.set-saved { color: var(--hint); font-size: 12px; margin-top: 10px; text-align: center; min-height: 1em; }

/* график-картинка в ответе */
.msg-chart { max-width: 100%; border-radius: 8px; margin-top: 6px; display: block; }

/* бегунок масштаба графика + зум картинки */
.tf-bar { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--sec); flex: 0 0 auto; font-size: 13px; }
.tf-bar .tf-lbl { color: var(--hint); }
.tf-bar input[type=range] { flex: 1; }
.tf-bar #tf-val { min-width: 32px; text-align: center; }
.tf-bar #tf-go { border: 0; border-radius: 8px; width: 32px; height: 32px; background: var(--btn); color: var(--btn-text); cursor: pointer; }
.msg-chart.zoomed { position: fixed; top: 2%; left: 2%; width: 96%; height: auto; max-width: 96%; z-index: 50; box-shadow: 0 0 0 9999px rgba(0,0,0,.7); }

/* кнопки масштаба графика */
.tf-btns { display: flex; align-items: center; gap: 6px; padding: 6px 12px; background: var(--sec); flex: 0 0 auto; font-size: 13px; }
.tf-btns .tf-lbl { color: var(--hint); margin-right: 4px; }
.tf-btn { border: 0; border-radius: 8px; padding: 5px 12px; background: var(--bg); color: var(--text); cursor: pointer; font-size: 13px; }
.tf-btn:active { background: var(--btn); color: var(--btn-text); }

/* ── вкладка «📉 Шорт» ── */
.ds-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:8px 0}
.ds-badge{font-size:13px;padding:3px 9px;border-radius:10px;background:#222;color:#bbb}
.ds-badge.on{background:#143d2a;color:#5fd39a}
.ds-badge.off{background:#3a2020;color:#e08c8c}
.ds-toggle{font-size:13px;color:#cfcfcf;display:flex;align-items:center;gap:6px;cursor:pointer}
.ds-toggle input{width:16px;height:16px}
.muted{color:#888;font-size:.92em}

/* ── вкладка «❓ Помощь» ── */
.help{padding:6px 4px 24px;line-height:1.5}
.help-h{margin:14px 0 6px;color:#cfd6e4}
.help-p{color:#aeb6c4;margin:6px 0}
.help-ul{margin:6px 0 6px 2px;padding-left:18px;color:#bcc4d2}
.help-ul li{margin:5px 0}
.help-ul b{color:#dde3ee}
.help-foot{margin-top:16px;color:#8b93a3;font-size:.92em;border-top:1px solid #2a2f3a;padding-top:10px}