:root{
  --bg:#f7f8fa;
  --card:#ffffff;
  --accent:#0b84ff;
  --muted:#6b7280;
  --bubble-other:#e6f0ff;
  --bubble-me:#dcf8c6;
  --shadow: 0 6px 18px rgba(13, 17, 23, 0.08);
  --safe-padding: env(safe-area-inset-bottom, 12px);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

* { box-sizing: border-box; }
html,body,#app { height:100%; margin:0; background:var(--bg); }
#app {
  width:100%;
  max-width:700px;
  height:100vh;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  background:linear-gradient(180deg, #fff 0%, #fbfdff 100%);
  border-left:1px solid rgba(0,0,0,0.03);
  border-right:1px solid rgba(0,0,0,0.03);
}

/* Top bar */
.topbar{
  height:64px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 14px;
  background:var(--card);
  box-shadow:var(--shadow);
}
.group-info{display:flex;align-items:center;gap:10px}
.group-avatar{
  width:44px;height:44px;border-radius:10px;background:linear-gradient(135deg,#ffd166,#06d6a0);
  display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:18px;
}
.group-name{font-weight:600}
.group-sub{font-size:12px;color:var(--muted)}
.remix{background:transparent;border:1px solid rgba(11,132,255,0.18);color:var(--accent);padding:8px 10px;border-radius:8px;font-weight:600}

/* Chat area */
.chat{
  padding:12px;
  flex:1;
  display:flex;
  flex-direction:column;
  gap:8px;
  overflow:hidden;
}
.notice{
  align-self:center;
  background:#fff6e6;
  color:#a05a00;
  padding:8px 12px;border-radius:999px;font-weight:600;font-size:13px;
  box-shadow:0 4px 14px rgba(160,90,0,0.06)
}

/* Messages list */
.messages{
  margin-top:6px;
  display:flex;
  flex-direction:column;
  gap:12px;
  overflow:auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom:10px;
}

/* Optional light scrollbar for desktop */
.messages::-webkit-scrollbar{ width:10px }
.messages::-webkit-scrollbar-track{ background:transparent }
.messages::-webkit-scrollbar-thumb{ background:rgba(11,132,255,0.12); border-radius:999px }

/* Message */
.message{
  display:flex;
  gap:10px;
  align-items:flex-end;
  max-width:92%;
}
.from-other{align-self:flex-start}
.from-me{align-self:flex-end;flex-direction:row-reverse}

.avatar{
  width:44px;height:44px;border-radius:10px;object-fit:cover;border:2px solid #fff;box-shadow:0 3px 8px rgba(2,6,23,0.08)
}
.bubble{
  background:var(--bubble-other);
  padding:10px 12px;border-radius:12px;
  box-shadow:var(--shadow);
}
.from-me .bubble{background:var(--bubble-me)}
.meta{font-size:12px;color:var(--muted);margin-bottom:6px}
.text{font-weight:600;color:#0f172a;white-space:pre-wrap}



/* Make sure everything fits one screen height on mobile */
@media (max-height:640px){
  .group-sub{display:none}
  .notice{font-size:12px;padding:6px 10px}
  .composer{height:72px}
}