/* ===========================
   AeroAssist — minimal dark theme
   =========================== */

:root {
  --bg:     #0e1014;
  --panel:  #16181f;
  --text:   #eaecef;
  --dim:    #8a8f97;
  --muted:  #5a6068;
  --border: #1f2128;
  --accent: #4d8aff;
  --error:  #d36d6d;
  --code-bg:     rgba(255,255,255,0.04);
  --code-border: rgba(255,255,255,0.06);
  --hover-bg:    rgba(77,138,255,0.10);

  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, system-ui,
          Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "JetBrains Mono", Menlo, Consolas, monospace;

  color-scheme: dark;
}

[data-theme="light"] {
  --bg:     #fafafa;
  --panel:  #ffffff;
  --text:   #1a1d23;
  --dim:    #5a6068;
  --muted:  #8a8f97;
  --border: #e5e7eb;
  --accent: #2563eb;
  --error:  #b3403a;
  --code-bg:     rgba(0,0,0,0.05);
  --code-border: rgba(0,0,0,0.08);
  --hover-bg:    rgba(37,99,235,0.10);

  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.app {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100dvh;
  max-width: 760px;
  margin: 0 auto;
}

/* -------- Top bar -------- */
.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}

.brand {
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.2px;
  color: var(--text);
}

.ghost {
  background: transparent;
  color: var(--dim);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 5px 11px;
  font: 12px var(--sans);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.ghost:hover  { color: var(--text); border-color: var(--dim); }
.ghost:active { transform: scale(0.97); }

.icon-btn { padding: 5px 6px; }
.icon-btn svg { width: 14px; height: 14px; display: block; }

/* Theme toggle: show the icon for the theme you can switch INTO.
   Dark mode shows the moon (click to go to light); light shows the sun. */
.theme-icon { display: none; }
[data-theme="dark"]  .theme-icon-moon { display: block; }
[data-theme="light"] .theme-icon-sun  { display: block; }

.topbar-actions { display: flex; gap: 8px; }

/* -------- Messages -------- */
.chat {
  overflow-y: auto;
  padding: 24px 20px 12px;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
.chat::-webkit-scrollbar { width: 6px; }
.chat::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
.chat::-webkit-scrollbar-track { background: transparent; }

.welcome {
  text-align: center;
  margin: 22vh auto 0;
  max-width: 420px;
}
.welcome h1 {
  margin: 0 0 6px;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.2px;
  color: var(--text);
}
.welcome p {
  margin: 0;
  font-size: 14px;
  color: var(--dim);
}

/* Message row */
.msg {
  margin: 18px 0;
  animation: msgIn 0.2s ease both;
}
@keyframes msgIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* User message: right-aligned via flexbox (alignment fix kept) */
.msg-user { display: flex; flex-direction: column; align-items: flex-end; }
.msg-user .msg-meta { text-align: right; }
.msg-user .msg-body { text-align: right; max-width: 75%; }

/* Assistant message: left-aligned, normal text flow */
.msg-assistant .msg-body { max-width: 88%; }

.msg-meta {
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 3px;
  letter-spacing: 0.2px;
}
.msg-author {
  font-weight: 500;
  color: var(--dim);
}
.msg-user .msg-author { color: var(--accent); }
.msg-time {
  margin-left: 6px;
  font-family: var(--mono);
  font-size: 10.5px;
  opacity: 0.7;
}

.msg-body {
  font-size: 15px;
  line-height: 1.6;
  word-wrap: break-word;
  overflow-wrap: break-word;
  color: var(--text);
}
.msg-body p { margin: 0.4em 0; }
.msg-body p:first-child { margin-top: 0; }
.msg-body p:last-child  { margin-bottom: 0; }
.msg-body h1, .msg-body h2, .msg-body h3, .msg-body h4 {
  margin: 0.7em 0 0.3em;
  font-weight: 600;
  color: var(--text);
}
.msg-body h1 { font-size: 1.25em; }
.msg-body h2 { font-size: 1.1em; }
.msg-body h3 { font-size: 1.02em; }
.msg-body ul, .msg-body ol { margin: 0.4em 0; padding-left: 1.4em; }
.msg-body li { margin: 0.15em 0; }
.msg-body strong { font-weight: 600; color: var(--text); }
.msg-body em     { color: var(--dim); }
.msg-body a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
.msg-body code {
  background: var(--code-bg);
  border: 1px solid var(--code-border);
  padding: 0.1em 0.34em;
  border-radius: 3px;
  font-family: var(--mono);
  font-size: 0.9em;
}
.msg-body pre {
  background: var(--panel);
  border: 1px solid var(--border);
  padding: 10px 12px;
  border-radius: 8px;
  overflow-x: auto;
  font-size: 13px;
  text-align: left;
}
.msg-body pre code {
  background: transparent;
  border: 0;
  padding: 0;
}
.msg-body blockquote {
  margin: 0.4em 0;
  padding: 0 0 0 0.8em;
  border-left: 2px solid var(--border);
  color: var(--dim);
}
.msg-body table { border-collapse: collapse; margin: 0.5em 0; font-size: 0.94em; }
.msg-body th, .msg-body td { border: 1px solid var(--border); padding: 6px 10px; text-align: left; }
.msg-body th { background: var(--panel); color: var(--dim); font-weight: 600; }
.msg-body hr { border: 0; border-top: 1px solid var(--border); margin: 0.8em 0; }

/* Streaming caret (subtle) */
.msg-streaming .msg-body::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 13px;
  vertical-align: text-bottom;
  background: var(--accent);
  margin-left: 2px;
  opacity: 0.85;
  animation: caret 1.05s steps(1) infinite;
}
@keyframes caret { 50% { opacity: 0; } }

/* Thinking dots (gentle, no glow) */
.thinking {
  display: inline-flex;
  gap: 4px;
  padding: 4px 0;
  align-items: center;
}
.thinking .dot {
  width: 5px;
  height: 5px;
  background: var(--dim);
  border-radius: 50%;
  animation: pulse 1.2s infinite ease-in-out;
}
.thinking .dot:nth-child(2) { animation-delay: 0.15s; }
.thinking .dot:nth-child(3) { animation-delay: 0.3s; }
@keyframes pulse {
  0%, 80%, 100% { opacity: 0.3; transform: scale(0.9); }
  40%          { opacity: 1;   transform: scale(1); }
}

/* Error / aborted / empty (subtle, no heavy borders) */
.msg-error   .msg-author { color: var(--error); }
.msg-error   .msg-body   { color: var(--error); }
.msg-error   .msg-body code,
.msg-error   .msg-body em,
.msg-error   .msg-body strong { color: var(--text); }
.msg-aborted .msg-author { color: var(--dim); }
.msg-aborted .msg-body   { color: var(--dim); font-style: italic; }
.msg-empty   .msg-body   { color: var(--muted); font-style: italic; }

/* -------- Composer -------- */
.composer {
  border-top: 1px solid var(--border);
  padding: 10px 12px 14px;
  background: var(--bg);
}

.composer-inner {
  display: flex;
  align-items: flex-end;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 4px 4px 4px 12px;
  transition: border-color 0.15s;
}
.composer-inner:focus-within {
  border-color: var(--accent);
}

#input {
  flex: 1;
  background: transparent;
  border: 0;
  outline: 0;
  color: var(--text);
  font: inherit;
  font-size: 15px;
  line-height: 1.5;
  padding: 8px 4px;
  resize: none;
  max-height: 200px;
  min-height: 24px;
  width: 100%;
}
#input::placeholder { color: var(--muted); }

#send-btn {
  background: transparent;
  border: 0;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  color: var(--dim);
  cursor: pointer;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  transition: color 0.15s, background 0.15s;
}
#send-btn:hover  { color: var(--accent); background: var(--hover-bg); }
#send-btn:active { transform: scale(0.95); }

#send-btn .icon-stop { display: none; }
#send-btn.is-stop   { color: var(--accent); background: var(--hover-bg); }
#send-btn.is-stop .icon-send { display: none; }
#send-btn.is-stop .icon-stop { display: block; }

/* -------- Responsive -------- */
@media (max-width: 720px) {
  body { font-size: 14.5px; }
  .app { max-width: 100%; }
  .topbar   { padding: 10px 14px; }
  .chat     { padding: 18px 14px 8px; }
  .composer { padding: 8px 10px 12px; }
  .welcome  { margin-top: 14vh; }
  .welcome h1 { font-size: 17px; }
  #input    { font-size: 16px; } /* avoid iOS zoom */
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}