/* matheus-ai Mini Apps — Catppuccin Mocha base (overridable from Telegram themeParams). */

:root {
  --base:    #1e1e2e;
  --mantle:  #181825;
  --surface0:#313244;
  --surface1:#45475a;
  --overlay0:#6c7086;
  --text:    #cdd6f4;
  --subtext1:#bac2de;
  --mauve:   #cba6f7;
  --red:     #f38ba8;
  --green:   #a6e3a1;
  --yellow:  #f9e2af;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background-color: var(--base);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
               Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  font-size: 15px;
  line-height: 1.5;
}

header.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  background-color: var(--mantle);
  border-bottom: 1px solid var(--surface1);
  position: sticky;
  top: 0;
  z-index: 10;
}
header.app-header h1 { margin: 0; font-size: 1.05rem; color: var(--mauve); }
header.app-header .close-btn {
  background-color: var(--surface0);
  color: var(--subtext1);
  border: 1px solid var(--surface1);
  border-radius: 6px;
  padding: 0.3rem 0.6rem;
  cursor: pointer;
  font-size: 0.85rem;
}
header.app-header .close-btn:hover { background-color: var(--surface1); color: var(--text); }

main { padding: 1rem; }

.banner { padding: 0.6rem 0.9rem; border-radius: 6px; margin: 0.75rem 0; font-size: 0.9rem; }
.banner.error { background-color: var(--surface1); color: var(--red); }
.banner.success { background-color: var(--surface1); color: var(--green); }
.banner.info { background-color: var(--surface0); color: var(--subtext1); }

input, textarea, select, button {
  background-color: var(--surface0);
  color: var(--text);
  border: 1px solid var(--surface1);
  border-radius: 6px;
  padding: 0.4rem 0.6rem;
  font-family: inherit;
  font-size: 0.95rem;
}
input:focus, textarea:focus, select:focus {
  outline: 2px solid var(--mauve);
  outline-offset: 1px;
}
button { cursor: pointer; font-weight: 500; }
button.primary { background-color: var(--mauve); color: var(--base); border-color: var(--mauve); }
button.primary:hover { filter: brightness(1.08); }
button.danger { background-color: var(--red); color: var(--base); border-color: var(--red); }
button:disabled { opacity: 0.5; cursor: not-allowed; }

.card {
  background-color: var(--surface0);
  border: 1px solid var(--surface1);
  border-radius: 8px;
  padding: 0.85rem;
  margin-bottom: 0.6rem;
}
.card .meta {
  font-size: 0.78rem;
  color: var(--overlay0);
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.4rem;
}
.card .content {
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--text);
}
.card .actions {
  margin-top: 0.6rem;
  display: flex;
  gap: 0.5rem;
}

.empty { color: var(--overlay0); text-align: center; padding: 2rem 0; }

.compose {
  background-color: var(--surface0);
  border: 1px solid var(--surface1);
  border-radius: 8px;
  padding: 0.85rem;
  margin-bottom: 1rem;
}
.compose textarea {
  width: 100%;
  min-height: 70px;
  resize: vertical;
}
.compose .row { display: flex; gap: 0.5rem; margin-top: 0.5rem; justify-content: flex-end; }

.pager { display: flex; gap: 0.5rem; align-items: center; margin-top: 1rem; justify-content: center; color: var(--subtext1); font-size: 0.85rem; }

.chat-bubble { padding: 0.6rem 0.85rem; border-radius: 8px; margin-bottom: 0.5rem; max-width: 85%; }
.chat-bubble.user { background-color: var(--mauve); color: var(--base); margin-left: auto; }
.chat-bubble.bot  { background-color: var(--surface0); color: var(--text); }
.chat-meta { font-size: 0.72rem; color: var(--overlay0); margin-top: 0.15rem; }