*{box-sizing:border-box}
:root{
  --bg:#fff7fb;
  --bg2:#f5efff;
  --panel:#fffafd;
  --panel2:#fff;
  --text:#49384e;
  --muted:#9b879f;
  --line:#eadceb;
  --pink:#f29ac2;
  --pink2:#ffd3e5;
  --lav:#cbb7f6;
  --lav2:#eee7ff;
}
html,body{margin:0;height:100%;font-family:Inter,ui-rounded,"Segoe UI",Arial,sans-serif;background:var(--bg);color:var(--text)}
body{display:flex;flex-direction:column;overflow:hidden;position:relative}
.sparkles{position:fixed;inset:0;pointer-events:none;z-index:0;color:#e5b9d2}
.sparkles span{position:absolute;font-size:22px;opacity:.5}
.sparkles span:nth-child(1){left:5%;top:10%}
.sparkles span:nth-child(2){left:18%;top:82%}
.sparkles span:nth-child(3){left:63%;top:8%}
.sparkles span:nth-child(4){left:77%;top:73%}
.sparkles span:nth-child(5){left:46%;top:89%}
.sparkles span:nth-child(6){left:91%;top:17%}

.layout{
  position:relative;z-index:1;
  display:grid;grid-template-columns:minmax(0,1fr) 350px;
  gap:14px;flex:1;min-height:0;padding:14px;
  background:linear-gradient(135deg,var(--bg),var(--bg2));
}
.player{
  display:grid;place-items:center;position:relative;overflow:hidden;
  border:1px solid var(--line);border-radius:28px;
  background:
    radial-gradient(circle at 25% 25%,rgba(255,255,255,.95),transparent 28%),
    radial-gradient(circle at 75% 35%,rgba(255,220,238,.65),transparent 24%),
    linear-gradient(135deg,#fffafd 0%,#f9efff 55%,#fff4fa 100%);
  box-shadow:0 18px 45px rgba(111,79,122,.10);
}
.player::before{
  content:"";
  position:absolute;inset:0;
  background-image:radial-gradient(circle,#e9c7dc 1.2px,transparent 1.2px);
  background-size:24px 24px;
  opacity:.35;
}
.offline-card{
  position:relative;z-index:2;text-align:center;padding:42px 34px;
  border:1px solid rgba(234,220,235,.9);border-radius:32px;
  background:rgba(255,255,255,.72);backdrop-filter:blur(12px);
  box-shadow:0 20px 55px rgba(124,89,134,.12);
  max-width:620px;
}
.avatar-bubble{
  width:76px;height:76px;border-radius:50%;display:grid;place-items:center;margin:0 auto 16px;
  font-size:34px;font-weight:800;color:white;
  background:linear-gradient(135deg,var(--pink),var(--lav));
  box-shadow:0 10px 28px rgba(215,145,190,.3);
  border:5px solid white;
}
.eyebrow{margin:0 0 10px;font-size:12px;letter-spacing:.28em;color:#a687a7;font-weight:800}
.offline-card h1{margin:0;font-size:clamp(58px,8vw,118px);line-height:.95;letter-spacing:-.04em;color:#5a3d62}
.subtitle{margin:20px auto 0;max-width:520px;color:var(--muted);font-size:17px;line-height:1.6}
.status{
  display:inline-flex;align-items:center;gap:8px;margin-top:24px;padding:9px 14px;
  border-radius:999px;background:#fff;border:1px solid var(--line);color:#8d7891;font-size:13px;
}
.status-dot{width:9px;height:9px;border-radius:50%;background:#c6b8ca;box-shadow:0 0 0 5px #f5edf6}
.chat{
  border:1px solid var(--line);border-radius:28px;background:rgba(255,255,255,.88);
  display:flex;flex-direction:column;overflow:hidden;
  box-shadow:0 18px 45px rgba(111,79,122,.08);
}
.chat header{
  padding:16px 18px;display:flex;justify-content:space-between;align-items:center;
  font-weight:800;border-bottom:1px solid var(--line);background:linear-gradient(90deg,#fff,#fff7fb);
}
.live-pill{
  font-size:11px;letter-spacing:.08em;color:#9d7a90;border:1px solid #edd7e4;border-radius:999px;
  padding:6px 9px;background:#fff5fa;text-transform:uppercase;
}
.placeholder{margin:auto;text-align:center;color:#9c889f;display:flex;flex-direction:column;gap:8px;padding:26px}
.placeholder strong{color:#5a455f}
.chat-icon{font-size:34px;margin-bottom:4px}
.chat-footer{padding:11px 14px;border-top:1px solid var(--line);text-align:center;color:#b39ab4;font-size:12px;background:#fff9fc}
footer{
  position:relative;z-index:1;display:flex;justify-content:space-between;padding:10px 18px;
  background:#fff;border-top:1px solid var(--line);color:#a08aa3;font-size:12px;
}
@media(max-width:850px){
  body{overflow:auto}
  .layout{grid-template-columns:1fr;grid-template-rows:minmax(58vh,1fr) 320px}
  .offline-card{margin:20px}
  footer{position:relative}
}