: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);
  --link: var(--tg-theme-link-color, #6ab3f3);
  --btn: var(--tg-theme-button-color, #5288c1);
  --btn-text: var(--tg-theme-button-text-color, #fff);
}
* { 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; }
.tab-pane.active { display: flex; }

/* чат */
.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; }

/* статус */
.cards { display: flex; gap: 8px; padding: 12px; flex: 0 0 auto; }
.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: 26px; font-weight: 600; margin-top: 4px; }
.list { flex: 1 1 auto; overflow-y: auto; padding: 0 12px; }
.list .item { background: var(--sec); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; }
.list .item .due { color: var(--hint); font-size: 12px; }
.refresh {
  margin: 12px; border: 0; border-radius: 10px; padding: 12px;
  background: var(--btn); color: var(--btn-text); font-size: 15px; cursor: pointer; flex: 0 0 auto;
}