: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; }

.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; }