/* Dark, modern chat styles for the AI chat page */
:root{
  --bg-1: #0f1724;
  --bg-2: #071226;
  --panel: rgba(255,255,255,0.03);
  --glass: rgba(255,255,255,0.04);
  --accent: #7c3aed; /* purple */
  --accent-2: #06b6d4; /* cyan */
  --muted: rgba(255,255,255,0.55);
  --user-bg: linear-gradient(135deg,#0ea5a4 0%, #06b6d4 100%);
  --ai-bg: linear-gradient(135deg,#111827 0%, #0b1220 100%);
  --radius: 14px;
  --max-width: 900px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  background: radial-gradient(1000px 500px at 10% 10%, rgba(124,58,237,0.12), transparent),
              radial-gradient(800px 400px at 90% 90%, rgba(6,182,212,0.06), transparent),
              linear-gradient(180deg,var(--bg-1), var(--bg-2));
  color: #e6eef8;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  padding:32px;
}

.app{
  max-width:var(--max-width);
  margin:0 auto;
  height:calc(100vh - 64px);
  display:flex;
  flex-direction:column;
  gap:16px;
}

.header{
  display:flex;
  align-items:center;
  gap:16px;
  padding:16px 20px;
  border-radius:12px;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  box-shadow: 0 6px 18px rgba(2,6,23,0.6);
  backdrop-filter: blur(6px);
}
.header .logo{
  font-size:28px;
  width:56px;height:56px;
  display:flex;align-items:center;justify-content:center;
  border-radius:12px;
  background: linear-gradient(135deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
}
.header h1{margin:0;font-size:18px}
.header .subtitle{margin:0;font-size:12px;color:var(--muted)}

.chat{
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  padding:18px;
  border-radius:16px;
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  box-shadow: 0 20px 40px rgba(2,6,23,0.6);
}

.messages{
  overflow:auto;
  padding:8px;
  display:flex;
  flex-direction:column;
  gap:12px;
  scrollbar-width: thin;
}

/* Message bubble */
.message{
  max-width:85%;
  display:inline-block;
  padding:12px 14px;
  border-radius:12px;
  color: #e6eef8;
  line-height:1.4;
  box-shadow: 0 6px 18px rgba(2,6,23,0.45);
}
.message.user{
  margin-left:auto;
  background: var(--user-bg);
  border-radius: 16px 16px 6px 16px;
  text-align:left;
}
.message.ai{
  margin-right:auto;
  background: linear-gradient(135deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border: 1px solid rgba(255,255,255,0.03);
  color: #cfe6ff;
  border-radius: 16px 16px 16px 6px;
}
.message small{display:block;color:var(--muted);font-size:11px;margin-top:6px}

/* Typing indicator (dots) */
.typing{
  display:inline-flex;gap:6px;align-items:center;padding:8px 12px;border-radius:10px;background:rgba(255,255,255,0.02)
}
.typing .dot{width:8px;height:8px;border-radius:50%;background:var(--muted);opacity:0.9}
@keyframes blink{0%{transform:translateY(0);opacity:0.25}50%{transform:translateY(-4px);opacity:1}100%{transform:translateY(0);opacity:0.25}}
.typing .dot:nth-child(1){animation:blink 1s infinite 0s}
.typing .dot:nth-child(2){animation:blink 1s infinite 0.15s}
.typing .dot:nth-child(3){animation:blink 1s infinite 0.3s}

/* Composer */
.composer{
  display:flex;
  gap:12px;
  align-items:center;
  padding-top:12px;
  border-top:1px dashed rgba(255,255,255,0.02);
}
.composer textarea{
  resize:none;
  min-height:44px;
  max-height:160px;
  padding:12px 14px;
  border-radius:12px;
  border: none;
  outline: none;
  background: rgba(255,255,255,0.02);
  color: #e6eef8;
  flex:1 1 auto;
  font-size:14px;
}
.composer button{
  background: linear-gradient(135deg,var(--accent),var(--accent-2));
  color:white;
  border:none;
  padding:12px 16px;
  border-radius:12px;
  cursor:pointer;
  font-weight:600;
  box-shadow: 0 8px 24px rgba(12,6,40,0.5);
  transition: transform .12s ease, box-shadow .12s ease;
}
.composer button:active{transform:translateY(1px)}

.footer{color:var(--muted);font-size:12px;text-align:center}

/* small screens */
@media (max-width:640px){
  body{padding:16px}
  .app{height:calc(100vh - 32px)}
  .header h1{font-size:16px}
}