/* ─────────────────────────────────────────────────────────────────────
   Titi PWA — voice-first dark canvas. Centered orb, log below, status
   above. Designed for iPad portrait/landscape standalone.
   ───────────────────────────────────────────────────────────────────── */

:root {
  --bg: #0a0a0c;
  --fg: #f3f1ec;
  --muted: rgba(243, 241, 236, 0.5);
  --muted-strong: rgba(243, 241, 236, 0.72);
  --divider: rgba(243, 241, 236, 0.12);
  --accent: #5fdca0;
  --rim: #6bb8ff;
  --rim-glow: rgba(58, 158, 255, 0.55);
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
  --serif: "Fraunces", Georgia, serif;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  min-height: 100vh;
  min-height: 100svh;
  overscroll-behavior: none;
  user-select: none;
}
body {
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
           env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/* ─── Header ────────────────────────────────────────────────────────── */
.top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 22px 8px;
}
.mark {
  font-family: var(--serif); font-style: italic;
  font-size: 22px; letter-spacing: -0.01em;
  color: var(--fg);
}
.status {
  font-family: var(--mono);
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted);
  transition: color 0.3s ease;
}
.status.listening { color: var(--rim); }
.status.thinking { color: #a78bff; }
.status.speaking { color: var(--accent); }
.status.error { color: #ff8b8b; }

/* ─── Orb stage ─────────────────────────────────────────────────────── */
.stage {
  display: grid;
  place-items: center;
  padding: 24px;
  min-height: 0;
}

/* ─── The orb — reuses the design from the ask-titi widget ────────── */
.orb {
  width: clamp(180px, 38vmin, 280px);
  height: clamp(180px, 38vmin, 280px);
  padding: 0; margin: 0; border: none; outline: none;
  background: transparent;
  border-radius: 50%;
  position: relative;
  cursor: pointer;
  display: block;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.orb:active { transform: scale(0.96); }

/* Outer chromatic rim — thin, with bloom */
.orb-rim {
  position: absolute; inset: 0; border-radius: 50%;
  background: #050510;
  box-shadow:
    inset 0 0 0 1.5px var(--rim),
    inset 0 0 18px rgba(70, 170, 255, 0.45),
    0 0 32px var(--rim-glow),
    0 0 80px rgba(58, 158, 255, 0.28),
    0 0 140px rgba(58, 158, 255, 0.12);
  transition: box-shadow 0.4s ease;
}
.orb.listening .orb-rim {
  box-shadow:
    inset 0 0 0 2px #8ac8ff,
    inset 0 0 24px rgba(120, 200, 255, 0.7),
    0 0 48px rgba(95, 182, 255, 0.7),
    0 0 110px rgba(95, 182, 255, 0.4),
    0 0 200px rgba(95, 182, 255, 0.2);
}
.orb.thinking .orb-rim {
  box-shadow:
    inset 0 0 0 1.5px #b89cff,
    inset 0 0 22px rgba(167, 139, 255, 0.5),
    0 0 40px rgba(167, 139, 255, 0.55),
    0 0 100px rgba(167, 139, 255, 0.3),
    0 0 180px rgba(167, 139, 255, 0.15);
}
.orb.speaking .orb-rim {
  box-shadow:
    inset 0 0 0 1.5px var(--accent),
    inset 0 0 22px rgba(95, 220, 160, 0.45),
    0 0 40px rgba(95, 220, 160, 0.6),
    0 0 100px rgba(95, 220, 160, 0.3),
    0 0 180px rgba(95, 220, 160, 0.15);
}

/* Inner plasma core — two rotating colored blobs with screen blend */
.orb-core {
  position: absolute; inset: 8%; border-radius: 50%;
  overflow: hidden;
  pointer-events: none;
}
.orb-blob {
  position: absolute; inset: -10%;
  border-radius: 50%;
  filter: blur(8px);
  mix-blend-mode: screen;
}
.orb-blob.a {
  background:
    radial-gradient(circle at 30% 35%, rgba(255, 126, 182, 0.95), transparent 45%),
    radial-gradient(circle at 70% 60%, rgba(126, 200, 255, 0.9), transparent 50%),
    radial-gradient(circle at 50% 80%, rgba(255, 178, 128, 0.75), transparent 45%);
  animation: orb-a 9s ease-in-out infinite;
}
.orb-blob.b {
  background:
    radial-gradient(circle at 60% 40%, rgba(154, 120, 255, 0.9), transparent 50%),
    radial-gradient(circle at 35% 65%, rgba(255, 255, 255, 0.6), transparent 35%);
  animation: orb-b 7s ease-in-out infinite reverse;
}
.orb.thinking .orb-blob {
  animation-duration: 3.5s, 2.8s;
}
.orb.speaking .orb-blob {
  animation-duration: 5s, 4s;
}
@keyframes orb-a {
  0%, 100% { transform: rotate(0deg) scale(1); }
  33% { transform: rotate(120deg) scale(1.1); }
  66% { transform: rotate(240deg) scale(0.92); }
}
@keyframes orb-b {
  0%, 100% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(180deg) scale(1.15); }
}

/* ─── Log ───────────────────────────────────────────────────────────── */
.log {
  display: flex; flex-direction: column; gap: 12px;
  padding: 12px 24px;
  max-height: 30vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.msg {
  font-size: 16px; line-height: 1.5;
  max-width: 92%;
  opacity: 0; transform: translateY(6px);
  animation: msg-rise 0.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes msg-rise { to { opacity: 1; transform: translateY(0); } }
.msg.you {
  align-self: flex-end;
  color: var(--fg);
  background: rgba(243, 241, 236, 0.06);
  padding: 8px 14px;
  border-radius: 14px 14px 4px 14px;
}
.msg.titi {
  align-self: flex-start;
  color: var(--muted-strong);
  border-left: 2px solid rgba(95, 220, 160, 0.5);
  padding-left: 14px;
}

/* ─── Footer ────────────────────────────────────────────────────────── */
.foot {
  padding: 10px 22px 14px;
  text-align: center;
}
.meta {
  font-family: var(--mono);
  font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted);
}

/* ─── Reduced motion ────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .orb-blob { animation: none; }
  .msg { animation: none; opacity: 1; transform: none; }
}