/* public/css/styles.css */
:root{
  --bg:#0f1115;
  --card:#171923;
  --text:#e5e7eb;
  --muted:#a1a1aa;
  --accent:#8b5cf6;
  --bubble-ai:#1f2433;
  --bubble-user:#23283a;
  --good:#22c55e;
  --bad:#ef4444;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--bg);
  color:var(--text); line-height:1.5;
}
.app{
  max-width:760px; margin:0 auto; padding:24px 16px 80px;
}
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  background:var(--card); padding:12px 16px; border-radius:16px;
  box-shadow:0 10px 30px rgba(0,0,0,0.25);
}
.brand{font-weight:700}
.toggle{font-size:14px; color:var(--muted)}
.chat{margin:18px 0; display:flex; flex-direction:column; gap:12px}
.bubble{
  max-width:90%; padding:12px 14px; border-radius:16px;
  box-shadow:0 4px 16px rgba(0,0,0,.2); word-wrap:break-word;
  opacity:0; transform:translateY(8px); animation:pop .2s ease forwards;
}
.bubble.user{align-self:flex-end;background:var(--bubble-user)}
.bubble.ai{align-self:flex-start;background:var(--bubble-ai)}
.bubble.intro{opacity:1; transform:none}
.ask{
  position:sticky; bottom:16px; display:flex; gap:8px; padding:10px;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,0.4) 40%);
  backdrop-filter: blur(6px);
}
.ask input{
  flex:1; background:var(--card); border:1px solid #23263a; color:var(--text);
  border-radius:14px; padding:12px 14px; outline:none;
}
.ask button{
  background:var(--accent); color:white; border:none; padding:0 16px;
  border-radius:12px; cursor:pointer;
}
.footer{display:flex; gap:12px; align-items:center; margin-top:10px}
.footer .share{background:#2d3142; color:#e5e7eb; border:none; padding:8px 12px; border-radius:10px}
.hint{color:var(--muted); font-size:12px}
.tiny-legal{margin-left:auto; color:var(--muted); font-size:12px}

/* Typing indicator */
.typing{display:flex; gap:4px; align-items:center; padding:10px 12px; background:var(--bubble-ai); border-radius:14px; width:70px}
.dot{width:8px; height:8px; border-radius:50%; background:#a5b4fc; opacity:.3; animation:blink 1s infinite}
.dot:nth-child(2){animation-delay:.2s}
.dot:nth-child(3){animation-delay:.4s}

@keyframes blink{0%,100%{opacity:.3}50%{opacity:1}}
@keyframes pop{to{opacity:1; transform:translateY(0)}}

/* Mood styles */
.mood-existential{border-left:4px solid #64748b}
.mood-corporate{border-left:4px solid #22d3ee}
.mood-mystic{border-left:4px solid #f59e0b}
.mood-sassy{border-left:4px solid #ef4444}
.mood-wholesome{border-left:4px solid #22c55e}

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