:root {
  color-scheme: dark;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #08111f;
  color: #e8edf5;
  font-synthesis: none;
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

html, body { margin: 0; min-height: 100%; }

body {
  background:
    radial-gradient(circle at 20% 0%, rgba(99, 102, 241, 0.14), transparent 34rem),
    linear-gradient(180deg, #0d172a 0%, #08111f 100%);
}

button, textarea, input { font: inherit; }
button { cursor: pointer; }

.app-shell {
  width: min(100%, 760px);
  min-height: 100dvh;
  margin: 0 auto;
}

.login-card {
  width: min(calc(100% - 2rem), 420px);
  margin: clamp(4rem, 15vh, 9rem) auto 2rem;
  padding: 2rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 1.25rem;
  background: rgba(15, 27, 49, 0.92);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.25);
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 1rem;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  font-size: 1.35rem;
  font-weight: 800;
}

.login-card h1 { margin: 1rem 0 0.4rem; font-size: 1.7rem; }
.login-card > p { margin: 0 0 1.5rem; color: #aab5c7; line-height: 1.55; }
.login-card label { display: block; margin-bottom: 0.45rem; color: #cbd5e1; font-size: 0.85rem; }
.login-card input {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 0.75rem;
  padding: 0.8rem 0.9rem;
  color: #fff;
  background: rgba(255, 255, 255, 0.05);
  outline: none;
}
.login-card input:focus { border-color: #818cf8; box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.14); }

.primary-button {
  width: 100%;
  margin-top: 0.8rem;
  padding: 0.85rem 1rem;
  border: 0;
  border-radius: 0.75rem;
  color: white;
  background: #6366f1;
  font-weight: 700;
}

.error { min-height: 1.2rem; color: #fca5a5; font-size: 0.8rem; margin: 0.65rem 0 0; }

.chat {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: rgba(8, 17, 31, 0.56);
  border-inline: 1px solid rgba(255, 255, 255, 0.05);
}

.chat-header {
  position: sticky;
  z-index: 4;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 4.6rem;
  padding: calc(0.75rem + env(safe-area-inset-top)) 1rem 0.75rem;
  background: rgba(13, 23, 42, 0.94);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(14px);
}

.chat-header h1 { margin: 0.08rem 0 0; font-size: 1.15rem; }
.eyebrow { color: #8f9bb0; font-size: 0.66rem; letter-spacing: 0.09em; text-transform: uppercase; }
.icon-button {
  width: 2.7rem;
  height: 2.7rem;
  border: 0;
  border-radius: 50%;
  color: #cbd5e1;
  background: rgba(255, 255, 255, 0.06);
  letter-spacing: 0.08em;
}

.menu {
  position: absolute;
  top: calc(100% - 0.35rem);
  right: 0.8rem;
  overflow: hidden;
  min-width: 11.5rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.75rem;
  background: #142039;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.32);
}
.menu button { display: block; width: 100%; padding: 0.8rem 1rem; border: 0; color: #e2e8f0; background: transparent; text-align: left; }
.menu button + button { border-top: 1px solid rgba(255, 255, 255, 0.07); }
.menu button:hover { background: rgba(255, 255, 255, 0.06); }

.system-warning {
  margin: 0.85rem 1rem 0;
  padding: 0.8rem 0.9rem;
  border: 1px solid rgba(245, 166, 35, 0.25);
  border-radius: 0.75rem;
  color: #fcd9a1;
  background: rgba(245, 166, 35, 0.08);
  font-size: 0.78rem;
  line-height: 1.45;
}

.welcome { padding: 1.6rem 1rem 0.75rem; }
.welcome h2 { margin: 0 0 0.35rem; font-size: clamp(1.25rem, 5vw, 1.6rem); }
.welcome > p { margin: 0 0 1.1rem; color: #9ca9bc; font-size: 0.88rem; }
.entry-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.55rem; }
.entry-grid button {
  min-height: 3.3rem;
  padding: 0.75rem;
  border: 1px solid rgba(129, 140, 248, 0.2);
  border-radius: 0.85rem;
  color: #dce2ff;
  background: rgba(99, 102, 241, 0.08);
  text-align: left;
  line-height: 1.3;
  font-size: 0.82rem;
}
.entry-grid button:hover { border-color: rgba(129, 140, 248, 0.42); background: rgba(99, 102, 241, 0.13); }

.messages { flex: 1; display: flex; flex-direction: column; gap: 0.75rem; padding: 1rem; }
.message { max-width: min(88%, 610px); padding: 0.8rem 0.95rem; border-radius: 1rem; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 0.93rem; }
.message.user { align-self: flex-end; color: #fff; background: #4f52cc; border-bottom-right-radius: 0.3rem; }
.message.assistant { align-self: flex-start; color: #e2e8f0; background: #17243d; border: 1px solid rgba(255, 255, 255, 0.06); border-bottom-left-radius: 0.3rem; }
.message.safety { border-color: rgba(245, 166, 35, 0.3); background: rgba(245, 166, 35, 0.09); }

.typing { padding: 0 1rem 0.65rem; color: #8f9bb0; font-size: 0.78rem; }

.composer {
  position: sticky;
  bottom: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 2.75rem 2.75rem;
  gap: 0.45rem;
  align-items: end;
  padding: 0.8rem 0.8rem calc(0.8rem + env(safe-area-inset-bottom));
  background: rgba(13, 23, 42, 0.96);
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(14px);
}
.composer textarea {
  width: 100%;
  max-height: 9rem;
  resize: none;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 1rem;
  padding: 0.78rem 0.9rem;
  color: #fff;
  background: rgba(255, 255, 255, 0.055);
  line-height: 1.4;
  outline: none;
}
.composer textarea:focus { border-color: #818cf8; }
.mic-button, .send-button {
  width: 2.75rem;
  height: 2.75rem;
  border: 0;
  border-radius: 50%;
  color: white;
}
.mic-button { background: rgba(255, 255, 255, 0.08); }
.mic-button.recording { background: #dc2626; animation: pulse 1.2s infinite; }
.send-button { background: #6366f1; font-size: 1.35rem; font-weight: 700; }
.composer button:disabled, .primary-button:disabled { opacity: 0.45; cursor: wait; }
.composer-error { min-height: 1.1rem; margin: -0.35rem 1rem 0.4rem; color: #fca5a5; font-size: 0.75rem; }
.privacy-note { padding: 0.35rem 1rem 1rem; color: #64748b; text-align: center; font-size: 0.67rem; line-height: 1.45; }

@keyframes pulse { 50% { transform: scale(0.92); opacity: 0.78; } }

@media (max-width: 520px) {
  .entry-grid { grid-template-columns: 1fr; }
  .welcome { padding-top: 1.25rem; }
  .message { max-width: 92%; }
}

@media (min-width: 761px) {
  .chat { box-shadow: 0 0 80px rgba(0, 0, 0, 0.28); }
}