:root {
  --bg1: #0b1020;
  --card: #121833;
  --soft: rgba(255,255,255,0.08);
  --txt: #e6e9ff;
  --muted: #9aa4d6;
  --accent: #4f46e5;
  --shadow: 0 10px 30px rgba(0,0,0,0.35);
}

* { box-sizing: border-box; }
html,body { margin:0; padding:0; font-family: system-ui, -apple-system, Segoe UI, Roboto; color: var(--txt); background: var(--bg1); }
.bg {
  background:
    radial-gradient(60vw 60vw at -10% -10%, rgba(79,70,229,0.25), transparent 60%),
    radial-gradient(60vw 60vw at 110% 10%, rgba(16,185,129,0.2), transparent 60%),
    radial-gradient(60vw 60vw at 50% 120%, rgba(14,165,233,0.15), transparent 60%),
    var(--bg1);
  min-height: 100vh;
}

.card { background: var(--card); border-radius: 16px; padding: 14px; box-shadow: var(--shadow); margin: 12px; }
.btn { background: var(--accent); color:white; border:none; padding:10px 16px; border-radius:12px; box-shadow: var(--shadow); }
.btn.small { padding:8px 12px; border-radius:10px; }
.muted { color: var(--muted); font-size: 0.9em; }

.auth-card { max-width: 360px; margin: 10vh auto; }
.auth-card input { width: 100%; margin: 8px 0; padding: 10px; border-radius: 10px; border: 1px solid var(--soft); background: #0e1430; color: var(--txt); }

.topbar { position: sticky; top: 0; display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; backdrop-filter: blur(8px); background: rgba(18,24,51,0.7); z-index: 5; }
.topbar .logo { font-weight: 700; }
.topbar .icons button, .topbar .icons a { background: none; border: none; color: var(--txt); font-size: 1.2em; margin-left: 10px; }

.app-shell { display: flex; flex-direction: column; min-height: 100vh; }
.view { display: none; padding-bottom: 70px; }
.view.active { display: block; }

.bottombar {
  position: fixed; bottom: 0; left:0; right:0; height: 60px;
  display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  align-items: center; justify-items: center;
  background: rgba(18,24,51,0.9); backdrop-filter: blur(10px);
  box-shadow: 0 -10px 30px rgba(0,0,0,0.35);
}
.bottombar .fab {
  width: 52px; height: 52px; border-radius: 50%; background: var(--accent); color:white;
  display:flex; align-items:center; justify-content:center; margin-top: -28px; box-shadow: var(--shadow);
}

.composer textarea { width:100%; height: 80px; border-radius:10px; border:1px solid var(--soft); background:#0e1430; color:var(--txt); padding:10px; }
.composer .row { display:flex; gap:10px; align-items:center; margin-top:8px; }
.fileBtn { display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border:1px dashed var(--soft); border-radius: 10px; cursor: pointer; }
.fileBtn input { display:none; }

.list .item { display:flex; gap:10px; padding:10px 0; border-bottom: 1px solid var(--soft); }
.list .item:last-child { border-bottom: none; }

.chat { display:flex; flex-direction: column; height: calc(100vh - 210px); }
#msgs { flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:8px; padding-right:4px; }
.bubble { max-width: 80%; padding: 10px 12px; border-radius: 14px; box-shadow: var(--shadow); }
.bubble.me { background: #233067; align-self: flex-end; }
.bubble.peer { background: #1a2147; align-self: flex-start; }
.chatInput { display:flex; gap:8px; }
.chatInput input { flex:1; padding:10px; border-radius:10px; border:1px solid var(--soft); background:#0e1430; color: var(--txt); }

.setup label { display:block; margin:8px 0; }
.setup input { width:100%; padding:10px; border-radius:10px; border:1px solid var(--soft); background:#0e1430; color:var(--txt); }