:root {
  --bg: var(--tg-theme-bg-color, #ffffff);
  --text: var(--tg-theme-text-color, #111111);
  --hint: var(--tg-theme-hint-color, #9aa0a6);
  --link: var(--tg-theme-link-color, #6ab3f3);
  --button: var(--tg-theme-button-color, #2ea6ff);
  --button-text: var(--tg-theme-button-text-color, #ffffff);
  --secondary-bg: var(--tg-theme-secondary-bg-color, #2b2b2b);
  --border: color-mix(in srgb, var(--text) 12%, transparent);
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
}

.hidden { display: none !important; }
.muted { color: var(--hint); }
.result { min-height: 1.25rem; }

.gate, .offline {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  text-align: center;
}

.app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.nav {
  display: flex;
  gap: 0.25rem;
  padding: 0.5rem;
  background: var(--secondary-bg);
  border-top: 1px solid var(--border);
  order: 2;
}

.tab {
  flex: 1;
  border: 0;
  background: transparent;
  color: var(--hint);
  padding: 0.65rem 0.35rem;
  border-radius: 0.5rem;
  font: inherit;
  cursor: pointer;
}

.tab.active {
  color: var(--text);
  background: color-mix(in srgb, var(--button) 18%, transparent);
}

.main {
  flex: 1;
  overflow: auto;
  padding: 1rem;
  order: 1;
}

.panel { display: none; }
.panel.active { display: block; }

.stack { display: grid; gap: 0.75rem; }
label { display: grid; gap: 0.35rem; font-size: 0.95rem; }

input, select, textarea {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  padding: 0.6rem 0.75rem;
  background: var(--secondary-bg);
  color: var(--text);
  font: inherit;
}

.primary {
  border: 0;
  border-radius: 0.6rem;
  padding: 0.75rem 1rem;
  background: var(--button);
  color: var(--button-text);
  font: inherit;
  cursor: pointer;
}

.list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.queue-item {
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  padding: 0.75rem;
  background: var(--secondary-bg);
}
.queue-item header { display: flex; justify-content: space-between; gap: 0.5rem; align-items: baseline; }
.queue-item .meta { color: var(--hint); font-size: 0.9rem; }

.gallery { display: grid; gap: 1rem; }
.gallery-card {
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  overflow: hidden;
  background: var(--secondary-bg);
}
.gallery-card .media { width: 100%; display: block; background: #000; }
.gallery-card .body { padding: 0.75rem; display: grid; gap: 0.5rem; }
.gallery-card .prompt { font-size: 0.9rem; color: var(--hint); }

.chat-messages {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-height: 40vh;
  margin-bottom: 0.75rem;
}
.bubble {
  max-width: 85%;
  padding: 0.6rem 0.75rem;
  border-radius: 0.75rem;
  white-space: pre-wrap;
  word-break: break-word;
}
.bubble.user { align-self: flex-end; background: var(--button); color: var(--button-text); }
.bubble.assistant { align-self: flex-start; background: var(--secondary-bg); border: 1px solid var(--border); }
.chat-form { display: grid; grid-template-columns: 1fr auto; gap: 0.5rem; }

@media (min-width: 720px) {
  .app {
    flex-direction: row;
  }
  .nav {
    flex-direction: column;
    width: 12rem;
    order: 0;
    border-top: 0;
    border-right: 1px solid var(--border);
    padding: 1rem 0.75rem;
  }
  .tab { text-align: left; }
  .main { order: 1; }
}