/* ============================================================
   Text the Particle — chat UI
   ============================================================ */

#chatPage { display: none; }
#chatPage.active { display: block; }

.chat-wrap {
  max-width: 520px;
  margin: 0 auto;
  height: calc(100vh - 96px);
  display: flex;
  flex-direction: column;
  position: relative;
}
/* dim the classroom video behind the chat for readability */
.chat-wrap::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(6,8,14,0.68), rgba(6,8,14,0.88));
}

/* top bar */
.chat-topbar {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-light, #2A2B34);
  background: rgba(20,21,30,0.7);
  backdrop-filter: blur(8px);
  flex-shrink: 0;
}
.chat-back {
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--border-light, #2A2B34); background: transparent;
  color: var(--text-secondary, #A8A5A0); font-size: 1.2rem; cursor: pointer;
  flex-shrink: 0; transition: transform 140ms cubic-bezier(0.23,1,0.32,1);
}
.chat-back:active { transform: scale(0.92); }

/* avatar (superposition → collapse) */
.chat-avatar { width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0; position: relative; }
.chat-avatar::before, .chat-avatar::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%); line-height: 1;
}
.chat-avatar.superposed {
  background: radial-gradient(circle at 50% 40%, rgba(212,165,116,0.3), rgba(139,107,174,0.2) 60%, transparent 72%);
  box-shadow: 0 0 18px rgba(139,107,174,0.4);
}
.chat-avatar.superposed::before, .chat-avatar.superposed::after {
  font-size: 22px; animation: chat-flick 1.1s ease-in-out infinite;
}
.chat-avatar.superposed::before { content: '⬆'; color: var(--gold, #D4A574); }
.chat-avatar.superposed::after  { content: '⬇'; color: var(--purple, #A991C9); animation-delay: -0.55s; }
.chat-avatar.collapsing { animation: chat-spin 0.72s cubic-bezier(0.23,1,0.32,1); }
.chat-avatar.up   { background: radial-gradient(circle, rgba(212,165,116,0.4), transparent 70%); box-shadow: 0 0 22px rgba(212,165,116,0.5); }
.chat-avatar.up::after   { content: '⬆'; font-size: 22px; color: var(--gold, #D4A574); }
.chat-avatar.down { background: radial-gradient(circle, rgba(139,107,174,0.45), transparent 70%); box-shadow: 0 0 22px rgba(139,107,174,0.5); }
.chat-avatar.down::after { content: '⬇'; font-size: 22px; color: var(--purple, #A991C9); }

@keyframes chat-flick { 0%,100% { opacity: 0.9; } 50% { opacity: 0.08; } }
@keyframes chat-spin { 0% { transform: rotateY(0) scale(1); } 60% { transform: rotateY(540deg) scale(0.6); } 100% { transform: rotateY(1080deg) scale(1); } }

.chat-who { flex: 1; min-width: 0; }
.chat-name { font-weight: 700; color: var(--text-primary, #E6E2DC); font-size: 1rem; }
.chat-badge { color: var(--gold, #D4A574); }
.chat-status { font-size: 0.75rem; color: var(--text-tertiary, #6B6966); }

/* thread */
.chat-thread {
  flex: 1; overflow-y: auto;
  padding: 18px 14px 10px;
  display: flex; flex-direction: column; gap: 8px;
}
.chat-bubble {
  max-width: 82%; padding: 10px 14px; border-radius: 18px;
  font-size: 0.98rem; line-height: 1.45; overflow-wrap: anywhere;
  opacity: 0; transform: translateY(8px) scale(0.97);
  transition: opacity 220ms cubic-bezier(0.23,1,0.32,1), transform 220ms cubic-bezier(0.23,1,0.32,1);
}
.chat-bubble.in-view { opacity: 1; transform: translateY(0) scale(1); }
.chat-bubble.in {
  align-self: flex-start;
  background: #232530; color: var(--text-primary, #E6E2DC);
  border-bottom-left-radius: 6px;
}
.chat-bubble.out {
  align-self: flex-end;
  background: linear-gradient(135deg, var(--coral, #E87979), var(--gold, #D4A574));
  color: #17130f; font-weight: 600;
  border-bottom-right-radius: 6px;
}
.chat-typing { display: flex; gap: 5px; align-items: center; }
.chat-typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--text-tertiary, #6B6966); animation: chat-dot 1s infinite; }
.chat-typing span:nth-child(2) { animation-delay: 0.15s; }
.chat-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes chat-dot { 0%,60%,100% { opacity: 0.25; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

/* the dramatic collapse "state card" */
.chat-state {
  align-self: center; display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 16px 34px; border-radius: 18px; margin: 6px 0;
  font-family: var(--font-display, sans-serif); font-weight: 800; letter-spacing: 1px;
  opacity: 0; transform: scale(0.9);
  transition: opacity 300ms cubic-bezier(0.23,1,0.32,1), transform 300ms cubic-bezier(0.23,1,0.32,1);
}
.chat-state.in-view { opacity: 1; transform: scale(1); }
.chat-state-glyph { font-size: 3rem; line-height: 1; }
.chat-state.up { color: var(--gold, #D4A574); background: radial-gradient(circle, rgba(212,165,116,0.18), transparent 75%); }
.chat-state.down { color: var(--purple, #A991C9); background: radial-gradient(circle, rgba(139,107,174,0.2), transparent 75%); }

/* reply chips */
.chat-replies {
  display: flex; flex-direction: column; gap: 8px;
  padding: 10px 14px 18px;
  border-top: 1px solid var(--border-light, #2A2B34);
  background: rgba(20,21,30,0.6);
  flex-shrink: 0;
}
.chat-reply {
  padding: 13px 18px; border-radius: 14px;
  border: 1px solid rgba(212,165,116,0.4);
  background: rgba(212,165,116,0.08);
  color: var(--text-primary, #E6E2DC);
  font-size: 1rem; font-weight: 600; cursor: pointer; text-align: left;
  transition: transform 140ms cubic-bezier(0.23,1,0.32,1), background 140ms ease;
}
.chat-reply:active { transform: scale(0.98); }
@media (hover: hover) { .chat-reply:hover { background: rgba(212,165,116,0.16); } }

@media (prefers-reduced-motion: reduce) {
  .chat-avatar.superposed::before, .chat-avatar.superposed::after,
  .chat-avatar.collapsing, .chat-typing span { animation: none; }
  .chat-bubble, .chat-state { transition: none; opacity: 1; transform: none; }
}

/* second front-door hero (chat) — purple/cyan variant of .aura-hero */
.chat-hero { border-color: rgba(139,107,174,0.4); }
.chat-hero .aura-hero-orb {
  background: linear-gradient(135deg, var(--purple, #8B6BAE), #35e0ff);
  box-shadow: 0 0 24px rgba(139,107,174,0.5);
}
.chat-hero .aura-hero-label,
.chat-hero .aura-hero-arrow { color: var(--purple-soft, #A991C9); }