:root{
  --bg-1: #0f1724;   /* deep navy */
  --bg-2: #14121b;   /* slightly off */
  --glass: rgba(255,255,255,0.04);
  --accent: linear-gradient(135deg,#ff4d6d,#ff9a3c);
  --muted: rgba(255,255,255,0.62);
  --glass-2: rgba(255,255,255,0.03);
  --card-radius: 18px;
  --shadow: 0 10px 30px rgba(2,6,23,0.6), inset 0 1px 0 rgba(255,255,255,0.02);
  --glass-border: rgba(255,255,255,0.03);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

*{box-sizing: border-box}
html,body{height:100%}
body{
  margin:0;
  background: url("https://i.pinimg.com/1200x/af/02/a6/af02a6799fb3c9815e680976cf9d8043.jpg") no-repeat center center fixed;
  background-size: cover;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:28px;
  overflow:hidden;
}


/* Stage centers the content and provides soft glow */
.stage {
  width: 880px;
  max-width: calc(100% - 48px);
  margin: auto;
  transform: translateY(-10px);
  animation: floatUp 900ms cubic-bezier(.2,.9,.2,1);
}
@keyframes floatUp{
  from{transform: translateY(24px); opacity:0}
  to{transform: translateY(0); opacity:1}
}

/* Card */
.card{
  border-radius: var(--card-radius);
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  padding: 18px;
  box-shadow: var(--shadow);
  border: 1px solid var(--glass-border);
  overflow: hidden;
  display:flex;
  flex-direction:column;
  min-height: 600px;
  max-height: 85vh;
}

/* Header */
.card-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom: 12px;
}
.badge{display:flex;align-items:center;gap:12px}
.vinyl{
  width:54px;height:54px;border-radius:50%;
  background: conic-gradient(#111, #222 20%, #111 40%, #222 70%);
  box-shadow: 0 6px 18px rgba(0,0,0,0.6);
  position:relative;
  overflow:hidden;
  border: 2px solid rgba(255,255,255,0.03);
  animation: spin 6s linear infinite;
}
.vinyl::after{
  content:''; position:absolute; inset:20px;
  border-radius:50%; background: radial-gradient(circle at 35% 30%, rgba(255,255,255,0.06), transparent 30%);
}
@keyframes spin{to{transform:rotate(360deg)}}

.title .name{font-weight:700;letter-spacing:0.6px}
.title .sub{font-size:12px;color:var(--muted);margin-top:2px}

/* Chat area */
.chat{
  background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.00));
  border-radius: 12px;
  padding: 20px;
  flex:1 1 auto;
  overflow:auto;
  display:flex;
  flex-direction:column;
  gap:12px;
  scroll-behavior:smooth;
}

/* bubbles */
.msg { max-width:78%; padding:12px 14px; border-radius:12px; box-shadow: 0 6px 12px rgba(2,6,23,0.6); transform-origin: left bottom; animation: popIn .18s ease; }
.msg.user { margin-left:auto; background: linear-gradient(180deg,#0b84ff33, rgba(255,255,255,0.02)); border:1px solid rgba(11,132,255,0.12); color:#eaf4ff; text-align:right; }
.msg.bot  { margin-right:auto; background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); border:1px solid rgba(255,255,255,0.03); color:#fff; }
.msg .meta { font-size:11px; opacity:0.6; margin-bottom:6px; }
.msg .text { white-space:pre-wrap; line-height:1.35; font-weight:600; }

/* little pop animation */
@keyframes popIn { from{transform: scale(.96) translateY(6px); opacity:0} to{transform:scale(1) translateY(0); opacity:1} }

/* composer */
.composer { display:flex; gap:12px; align-items:center; padding-top:14px; }
.input {
  flex:1; padding:14px 16px; border-radius:12px; border:1px solid rgba(255,255,255,0.04);
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  color:#fff; outline:none; font-weight:600; box-shadow: 0 6px 20px rgba(2,6,23,0.45);
  transition: transform .15s ease, box-shadow .15s ease;
}
.input:focus{ transform: translateY(-2px); box-shadow: 0 18px 40px rgba(2,6,23,0.6); }
.send {
  width:56px;height:48px;border-radius:12px;border:0; cursor:pointer;
  background: var(--accent); font-weight:800; font-size:18px; color:white;
  box-shadow: 0 12px 30px rgba(255,77,109,0.18);
  transition: transform .12s cubic-bezier(.2,.9,.2,1), filter .12s;
}
.send:active{ transform: translateY(2px) scale(.98); filter:brightness(.98) }

/* typing indicator */
.typing {
  width:54px; height:28px; display:flex; align-items:center; gap:4px; margin-left:4px;
}
.dot {
  width:8px;height:8px;border-radius:50%; background:rgba(255,255,255,0.22);
  animation: bounce 900ms infinite ease-in-out;
}
.dot:nth-child(2){ animation-delay:120ms }
.dot:nth-child(3){ animation-delay:240ms }
@keyframes bounce{
  0%{transform: translateY(0); opacity:.5}
  50%{transform: translateY(-6px); opacity:1}
  100%{transform: translateY(0); opacity:.6}
}

/* floating decor animations */
.floaters { position: absolute; inset:0; pointer-events:none; }
.circle { position:absolute; filter: blur(28px) opacity(.25); transform: translateZ(0); }
.c1{ width:240px;height:240px;background:linear-gradient(180deg,#ff4d6d,#ff9a3c); left:-80px; top:-80px; border-radius:40%; animation: drift 14s linear infinite; }
.c2{ width:160px;height:160px;background:linear-gradient(180deg,#7effc7,#2ad0ff); right:-60px; bottom:-80px; border-radius:40%; animation: drift 18s linear infinite reverse; }
.c3{ width:100px;height:100px;background:linear-gradient(180deg,#ffd86b,#ff9a3c); left:60%; top:10%; border-radius:40%; animation: drift 22s linear infinite; }
@keyframes drift { from{transform: translateY(0) rotate(0)} to{transform: translateY(24px) rotate(360deg)} }

/* responsive */
@media (max-width:600px){
  .stage{ width:100%; padding:12px }
  .vinyl{ display:none }
  .card{ min-height:70vh }
}