/* ─── Reset & base ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:          #0c1220;
  --surface:     #131c2e;
  --surface-2:   #1a2540;
  --border:      #1e2d45;
  --border-2:    #263550;
  --text-1:      #f0f4ff;
  --text-2:      #8899b8;
  --text-3:      #4d6080;
  --sage:        #5c8a5c;
  --sage-light:  #7ab87a;
  --sage-dim:    rgba(92,138,92,.15);
  --amber:       #d97706;
  --amber-dim:   rgba(217,119,6,.15);
  --red:         #dc2626;
  --font-body:   'Outfit', system-ui, sans-serif;
  --font-display:'Playfair Display', Georgia, serif;
  --radius:      12px;
  --topbar-h:    52px;
  --dock-h:      auto;
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
}

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--text-1);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

/* ─── App shell ────────────────────────────────────────────── */
.app {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  opacity: 0;
  transform: translateY(8px);
  animation: appIn 500ms var(--ease-out) 80ms forwards;
}

@keyframes appIn {
  to { opacity: 1; transform: translateY(0); }
}

.app--exiting {
  animation: appOut 450ms var(--ease-out) forwards !important;
}

@keyframes appOut {
  to { opacity: 0; transform: scale(0.98); }
}

/* ─── Top bar ──────────────────────────────────────────────── */
.topbar {
  height: var(--topbar-h);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.5rem;
  border-bottom: 1px solid var(--border);
  background: rgba(12,18,32,.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.topbar-brand {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.01em;
}

.topbar-gpm {
  color: var(--text-1);
  font-weight: 600;
}

.topbar-sep {
  color: var(--text-3);
}

.topbar-name {
  color: var(--sage-light);
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 500;
}

.topbar-date {
  font-size: 0.78rem;
  color: var(--text-3);
  font-weight: 400;
}

/* ─── Conversation ─────────────────────────────────────────── */
.conversation {
  flex: 1;
  overflow-y: auto;
  padding: 2rem 1rem 1rem;
  scroll-behavior: smooth;
}

.conversation::-webkit-scrollbar { width: 4px; }
.conversation::-webkit-scrollbar-track { background: transparent; }
.conversation::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 99px; }

.messages {
  max-width: 680px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* ─── Message bubbles ──────────────────────────────────────── */
.msg {
  display: flex;
  flex-direction: column;
  animation: msgIn 320ms var(--ease-out);
}

@keyframes msgIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* AI / assistant messages */
.msg--ai {
  align-items: flex-start;
}

.msg--ai .msg-body {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--sage);
  border-radius: 0 var(--radius) var(--radius) var(--radius);
  padding: 1.1rem 1.25rem;
  font-size: 1rem;
  line-height: 1.75;
  color: var(--text-1);
  max-width: 100%;
  position: relative;
}

.msg--ai .msg-body p + p { margin-top: 0.75em; }

/* User messages */
.msg--user {
  align-items: flex-end;
}

.msg--user .msg-body {
  background: var(--surface-2);
  border: 1px solid var(--border-2);
  border-radius: var(--radius) var(--radius) 0 var(--radius);
  padding: 0.75rem 1rem;
  font-size: 0.9rem;
  color: var(--text-2);
  max-width: 80%;
}

/* System / status messages */
.msg--system .msg-body {
  font-size: 0.8rem;
  color: var(--text-3);
  text-align: center;
  padding: 0.5rem 0;
  border: none;
  background: none;
  font-style: italic;
}

/* Streaming cursor */
.cursor {
  display: inline-block;
  width: 2px;
  height: 1em;
  background: var(--sage-light);
  margin-left: 2px;
  vertical-align: text-bottom;
  animation: blink 1s step-end infinite;
  border-radius: 1px;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* ─── Loading dots ─────────────────────────────────────────── */
.loading-dots {
  display: flex;
  gap: 5px;
  padding: 1.1rem 1.25rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--sage);
  border-radius: 0 var(--radius) var(--radius) var(--radius);
  width: fit-content;
}

.loading-dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--sage);
  animation: dotPulse 1.2s ease-in-out infinite;
}

.loading-dots span:nth-child(2) { animation-delay: 0.2s; }
.loading-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes dotPulse {
  0%, 80%, 100% { opacity: 0.25; transform: scale(0.8); }
  40%           { opacity: 1;    transform: scale(1); }
}

/* ─── Input dock ───────────────────────────────────────────── */
.dock {
  flex-shrink: 0;
  border-top: 1px solid var(--border);
  background: rgba(12,18,32,.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  padding: 0.75rem 1rem 1rem;
  transform: translateY(0);
  transition: opacity 300ms, transform 300ms var(--ease-out);
}

.dock--hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
}

.dock-inner {
  max-width: 680px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

/* Context strip */
.context-strip {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 20px;
}

.context-property {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--sage-light);
  background: var(--sage-dim);
  border: 1px solid rgba(122,184,122,.2);
  padding: 0.2rem 0.55rem;
  border-radius: 99px;
}

.context-progress {
  font-size: 0.72rem;
  color: var(--text-3);
  font-weight: 500;
}

/* Quick taps */
.quick-taps {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  min-height: 0;
}

.quick-taps:empty { display: none; }

.qtap {
  padding: 0.35rem 0.85rem;
  border-radius: 99px;
  border: 1px solid var(--border-2);
  background: var(--surface-2);
  color: var(--text-2);
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 150ms, background 150ms, color 150ms;
  white-space: nowrap;
}

.qtap:hover {
  border-color: var(--sage);
  background: var(--sage-dim);
  color: var(--sage-light);
}

.qtap--skip {
  border-color: var(--amber);
  color: var(--amber);
  background: var(--amber-dim);
}

.qtap--skip:hover {
  background: rgba(217,119,6,.25);
}

/* Input row */
.input-row {
  display: flex;
  gap: 0.5rem;
  align-items: flex-end;
}

.input-field {
  flex: 1;
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: var(--radius);
  color: var(--text-1);
  font-family: var(--font-body);
  font-size: 0.9rem;
  line-height: 1.5;
  padding: 0.6rem 0.85rem;
  resize: none;
  outline: none;
  max-height: 120px;
  overflow-y: auto;
  transition: border-color 150ms;
}

.input-field::placeholder { color: var(--text-3); }
.input-field:focus { border-color: var(--sage); }

.btn-send {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: none;
  background: var(--sage);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 150ms, opacity 150ms, transform 100ms;
}

.btn-send:hover:not(:disabled) { background: var(--sage-light); }
.btn-send:active:not(:disabled) { transform: scale(0.93); }
.btn-send:disabled { opacity: 0.35; cursor: not-allowed; }

/* Dock footer */
.dock-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 18px;
}

.btn-exit {
  font-family: var(--font-body);
  font-size: 0.75rem;
  color: var(--text-3);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: color 150ms;
}

.btn-exit:hover { color: var(--text-2); }

.item-counter {
  font-size: 0.72rem;
  color: var(--text-3);
  font-weight: 500;
}

/* ─── Enter portal CTA ─────────────────────────────────────── */
.complete-cta {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  padding: 1.25rem 1rem 1.5rem;
  background: linear-gradient(to top, var(--bg) 60%, transparent);
  transition: opacity 400ms var(--ease-out), transform 400ms var(--ease-out);
  z-index: 20;
}

.complete-cta--hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateY(16px);
}

.btn-complete {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 2rem;
  background: var(--sage);
  color: #fff;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  border: none;
  border-radius: 99px;
  cursor: pointer;
  box-shadow: 0 0 28px rgba(92,138,92,.35);
  transition: background 150ms, box-shadow 150ms, transform 100ms;
}

.btn-complete:hover {
  background: var(--sage-light);
  box-shadow: 0 0 38px rgba(122,184,122,.45);
}

.btn-complete:active { transform: scale(0.97); }

/* ─── Error bar ────────────────────────────────────────────── */
.error-bar {
  position: fixed;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(220,38,38,.9);
  color: #fff;
  font-size: 0.85rem;
  padding: 0.5rem 1.25rem;
  border-radius: 99px;
  max-width: 90vw;
  text-align: center;
  z-index: 50;
  backdrop-filter: blur(8px);
  transition: opacity 300ms;
}

.error-bar--hidden { opacity: 0; pointer-events: none; }

/* ─── Degraded mode banner ─────────────────────────────────── */
.degraded-banner {
  max-width: 680px;
  margin: 0 auto;
  background: var(--amber-dim);
  border: 1px solid rgba(217,119,6,.35);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  font-size: 0.9rem;
  color: #fbbf24;
  line-height: 1.6;
}

/* ─── Splash overlay ──────────────────────────────────────── */
.splash {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 700ms var(--ease-out);
}

.splash--out {
  opacity: 0;
  pointer-events: none;
}

.splash-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
  animation: splashIn 600ms var(--ease-out) both;
}

@keyframes splashIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.splash-globe {
  animation: globeSpin 8s linear infinite;
  filter: drop-shadow(0 0 18px rgba(122,184,122,.3));
}

@keyframes globeSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.splash-title {
  font-family: var(--font-display);
  font-size: 1.55rem;
  font-weight: 500;
  color: var(--text-1);
  letter-spacing: 0.01em;
}

.splash-sub {
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sage-light);
  margin-top: -0.7rem;
}

.splash-dots {
  display: flex;
  gap: 6px;
  margin-top: 0.25rem;
}

.splash-dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--sage);
  animation: dotPulse 1.2s ease-in-out infinite;
}

.splash-dots span:nth-child(2) { animation-delay: 0.2s; }
.splash-dots span:nth-child(3) { animation-delay: 0.4s; }

/* ─── Responsive ───────────────────────────────────────────── */
@media (max-width: 600px) {
  .conversation { padding: 1.25rem 0.75rem 0.5rem; }
  .topbar { padding: 0 1rem; }
  .dock { padding: 0.65rem 0.75rem 0.85rem; }
}