:root {
  --bg: var(--tg-theme-bg-color, #ffffff);
  --text: var(--tg-theme-text-color, #111111);
  --hint: var(--tg-theme-hint-color, #707579);
  --link: var(--tg-theme-link-color, #2481cc);
  --button: var(--tg-theme-button-color, #2481cc);
  --button-text: var(--tg-theme-button-text-color, #ffffff);
  --secondary-bg: var(--tg-theme-secondary-bg-color, #f0f0f0);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.4 -apple-system, system-ui, sans-serif;
}

#app {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
}

#topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--secondary-bg);
  flex: none;
}

#menuButton {
  border: 0;
  background: none;
  color: var(--text);
  font-size: 20px;
  padding: 4px 8px;
  cursor: pointer;
}

#topbarMain {
  flex: 1;
  min-width: 0;
}

#chatTitle {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#contextBar {
  margin-top: 4px;
  height: 4px;
  border-radius: 2px;
  background: rgba(127, 127, 127, 0.25);
  overflow: hidden;
}

#contextBarFill {
  height: 100%;
  width: 0;
  background: var(--button);
  transition: width 0.4s ease;
}

#compactButton {
  border: 0;
  background: none;
  font-size: 18px;
  padding: 4px 8px;
  cursor: pointer;
  flex: none;
}

#compactButton:disabled {
  opacity: 0.4;
  cursor: default;
}

#drawerOverlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 5;
}

/* #drawer's own display:flex below is an author rule, which always beats
   the browser's UA-stylesheet [hidden]{display:none} regardless of
   specificity — so closing the drawer (el.hidden = true) needs an
   explicit override here, or it stays visually open. */
#drawer[hidden],
#drawerOverlay[hidden] {
  display: none;
}

#drawer {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: min(84vw, 320px);
  background: var(--bg);
  z-index: 6;
  display: flex;
  flex-direction: column;
  box-shadow: 2px 0 12px rgba(0, 0, 0, 0.2);
}

#chatList {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
}

.chat-row {
  display: flex;
  align-items: center;
  border-radius: 10px;
  margin-bottom: 4px;
}

.chat-row.active {
  background: var(--secondary-bg);
  font-weight: 600;
}

.chat-row-info {
  flex: 1;
  min-width: 0;
  padding: 12px 10px;
  cursor: pointer;
}

.chat-row-info .chat-row-meta {
  font-size: 12px;
  color: var(--hint);
  font-weight: 400;
}

.chat-row-delete {
  flex: none;
  border: 0;
  background: none;
  color: #e0473f;
  font-size: 16px;
  padding: 8px 12px;
  cursor: pointer;
}

#newChatForm {
  display: flex;
  gap: 6px;
  padding: 10px;
  border-top: 1px solid var(--secondary-bg);
}

#newChatName {
  flex: 1;
  min-width: 0;
  padding: 8px;
  border-radius: 8px;
  border: 1px solid var(--secondary-bg);
  background: var(--bg);
  color: var(--text);
}

#newChatForm button, #composer button {
  border: 0;
  border-radius: 8px;
  background: var(--button);
  color: var(--button-text);
  padding: 8px 12px;
  cursor: pointer;
}

#messages {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bubble {
  max-width: 80%;
  padding: 8px 12px;
  border-radius: 14px;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.bubble.user {
  align-self: flex-end;
  background: var(--button);
  color: var(--button-text);
}

.bubble.agent {
  align-self: flex-start;
  background: var(--secondary-bg);
  color: var(--text);
}

.bubble.pending {
  opacity: 0.6;
}

.system-note {
  align-self: center;
  max-width: 90%;
  padding: 4px 12px;
  border-radius: 10px;
  background: rgba(127, 127, 127, 0.12);
  color: var(--hint);
  font-size: 12.5px;
  text-align: center;
  white-space: pre-wrap;
}

#statusIndicator {
  align-self: flex-start;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 14px;
  background: var(--secondary-bg);
  color: var(--hint);
}

#statusIndicator.queued {
  font-size: 13px;
  animation: statusPulse 1.6s ease-in-out infinite;
}

#statusIndicator.running .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--hint);
  animation: statusBounce 1.1s ease-in-out infinite;
}

#statusIndicator.running .dot:nth-child(2) {
  animation-delay: 0.15s;
}

#statusIndicator.running .dot:nth-child(3) {
  animation-delay: 0.3s;
}

@keyframes statusBounce {
  0%, 60%, 100% {
    transform: translateY(0);
    opacity: 0.5;
  }
  30% {
    transform: translateY(-4px);
    opacity: 1;
  }
}

@keyframes statusPulse {
  0%, 100% {
    opacity: 0.55;
  }
  50% {
    opacity: 1;
  }
}

#scrollDownButton {
  position: fixed;
  right: 16px;
  bottom: 76px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 0;
  background: color-mix(in srgb, var(--secondary-bg) 85%, transparent);
  color: var(--text);
  font-size: 18px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  z-index: 4;
}

#scrollDownButton[hidden] {
  display: none;
}

/* Markdown rendered server-side by markdown_to_telegram_html() (same
   tag whitelist Telegram itself uses: b/i/s/code/pre/a/blockquote/•). */
.bubble b {
  font-weight: 700;
}

.bubble i {
  font-style: italic;
}

.bubble s {
  text-decoration: line-through;
}

.bubble a {
  color: inherit;
  text-decoration: underline;
}

.bubble code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.92em;
  background: rgba(127, 127, 127, 0.18);
  padding: 1px 4px;
  border-radius: 4px;
}

.bubble pre {
  margin: 6px 0;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(127, 127, 127, 0.18);
  overflow-x: auto;
  overflow-wrap: normal;
}

.bubble pre code {
  background: none;
  padding: 0;
  border-radius: 0;
  white-space: pre;
}

.bubble blockquote {
  margin: 6px 0;
  padding-left: 10px;
  border-left: 3px solid currentColor;
  opacity: 0.85;
}

#empty-hint {
  color: var(--hint);
  text-align: center;
  margin-top: 24px;
}

#composer {
  display: flex;
  gap: 8px;
  padding: 10px;
  border-top: 1px solid var(--secondary-bg);
  flex: none;
}

#composerInput {
  flex: 1;
  resize: none;
  max-height: 120px;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid var(--secondary-bg);
  background: var(--bg);
  color: var(--text);
  font: inherit;
}

#sendButton {
  align-self: flex-end;
  padding: 10px 14px;
}

#sendButton:disabled,
#attachButton:disabled {
  opacity: 0.5;
  cursor: default;
}

/* #composer prefix (not just #attachButton) needed to outrank the more
   specific "#composer button" background rule above — a bare ID selector
   here would lose to that compound selector regardless of source order. */
#composer #attachButton {
  align-self: flex-end;
  border: 0;
  background: none;
  color: var(--text);
  font-size: 20px;
  padding: 8px 6px;
  cursor: pointer;
}