/* Chat UI premium styles — served from 'self', CSP-compliant */
.avatar-circle {
  width: 44px; height: 44px;
  font-size: 18px; color: #fff;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; flex-shrink: 0;
}
.avatar-circle.active { background: #198754; }
.avatar-circle.closed { background: #6c757d; }

.ts { font-size: 11px; }
.ts-sm { font-size: 12px; }
.ts-xs { font-size: 10px; }

.badge-premium { font-size: 10px; font-weight: 500; }

/* Send button: swap text to "Sending to Telegram..." during HTMX request */
/* Default: show "Send", hide "Sending..." */
#send-btn .btn-text { display: inline; }
#send-btn .btn-indicator { display: none; }
/* hx-indicator="#send-btn" adds .htmx-request to the button itself */
#send-btn.htmx-request .btn-text { display: none; }
#send-btn.htmx-request .btn-indicator { display: inline-flex !important; }

/* Telegram-like chat layout: scrollable messages only, no outer scrollbar */
html.chat-page, html.chat-page body { overflow: hidden; height: 100%; }
.chat-layout { display: flex; flex-direction: column; height: calc(100vh - 148px); }
.chat-messages { flex: 1 1 auto; overflow-y: auto; min-height: 0; }
.chat-input { flex: 0 0 auto; margin-top: 0 !important; }