:root {
  --bg: var(--tg-theme-bg-color, #f4f4f5);
  --fg: var(--tg-theme-text-color, #1c1c1e);
  --hint: var(--tg-theme-hint-color, #8e8e93);
  --link: var(--tg-theme-link-color, #2481cc);
  --btn: var(--tg-theme-button-color, #2481cc);
  --btn-fg: var(--tg-theme-button-text-color, #ffffff);
  --sec: var(--tg-theme-secondary-bg-color, #ffffff);
  --border: color-mix(in srgb, var(--hint) 35%, transparent);
  --user-bg: color-mix(in srgb, var(--btn) 18%, var(--sec));
  --asst-bg: var(--sec);
  --danger: #d94c4c;
  --radius: 12px;
  --sidebar-w: min(320px, 86vw);
  font-family: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; background: var(--bg); color: var(--fg); }
button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; border: none; border-radius: 10px; padding: 0.55rem 0.85rem; }
button:disabled { opacity: 0.5; cursor: not-allowed; }
button.primary { background: var(--btn); color: var(--btn-fg); font-weight: 600; }
button.ghost { background: transparent; color: var(--link); }
button.danger { background: color-mix(in srgb, var(--danger) 15%, var(--sec)); color: var(--danger); }
.hidden { display: none !important; }
.mobile-only { display: none; }

#app {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  height: 100%;
  max-height: 100dvh;
}

#sidebar {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  background: var(--sec);
  border-right: 1px solid var(--border);
  padding: 0.75rem;
  min-height: 0;
}
.sidebar-top { display: flex; gap: 0.4rem; }
.sidebar-top .primary { flex: 1; }
#chat-list {
  flex: 1;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-height: 0;
}
.chat-item {
  text-align: left;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 0.65rem 0.7rem;
  width: 100%;
}
.chat-item:hover, .chat-item.active {
  background: color-mix(in srgb, var(--btn) 12%, var(--bg));
  border-color: var(--border);
}
.chat-item .t { font-weight: 600; font-size: 0.92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-item .m { color: var(--hint); font-size: 0.75rem; margin-top: 0.15rem; }
.sidebar-bottom { display: flex; flex-direction: column; gap: 0.45rem; border-top: 1px solid var(--border); padding-top: 0.55rem; }
.field { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.78rem; color: var(--hint); }
.field select {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.4rem 0.5rem;
  color: var(--fg);
}
#status-line { font-size: 0.72rem; color: var(--hint); }

#main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
#topbar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 0.85rem;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--sec) 88%, transparent);
  backdrop-filter: blur(8px);
}
#chat-title { flex: 1; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

#messages {
  flex: 1;
  overflow: auto;
  padding: 1rem 0.9rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  min-height: 0;
}
.bubble {
  max-width: min(720px, 94%);
  padding: 0.75rem 0.9rem;
  border-radius: var(--radius);
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
  border: 1px solid var(--border);
}
.bubble.user { align-self: flex-end; background: var(--user-bg); }
.bubble.assistant { align-self: flex-start; background: var(--asst-bg); }
.bubble .role { font-size: 0.7rem; color: var(--hint); margin-bottom: 0.25rem; text-transform: uppercase; letter-spacing: 0.04em; }
.bubble.error { border-color: color-mix(in srgb, var(--danger) 50%, var(--border)); }
.tool-line, .thinking-line {
  align-self: flex-start;
  font-size: 0.78rem;
  color: var(--hint);
  padding: 0.15rem 0.35rem;
}

#composer {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.5rem;
  padding: 0.7rem 0.85rem calc(0.7rem + env(safe-area-inset-bottom));
  border-top: 1px solid var(--border);
  background: var(--sec);
}
#input {
  resize: none;
  max-height: 140px;
  min-height: 44px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--bg);
  padding: 0.7rem 0.8rem;
  outline: none;
}
#input:focus { border-color: color-mix(in srgb, var(--btn) 55%, var(--border)); }

@media (max-width: 760px) {
  .mobile-only { display: inline-flex; }
  #app { grid-template-columns: 1fr; }
  #sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--sidebar-w);
    z-index: 20;
    transform: translateX(-105%);
    transition: transform 0.18s ease;
    box-shadow: 8px 0 30px color-mix(in srgb, #000 20%, transparent);
  }
  #sidebar.open { transform: translateX(0); }
}