:root{
  --bg:#0f1a1a;           /* dark teal variant */
  --panel:#132023;
  --panel-2:#0b1416;
  --text:#d7e5e5;
  --muted:#9bb6b6;
  --accent:#20b2aa;       /* teal-ish */
}
*{box-sizing:border-box}
html,body{height:100%;}
body{margin:0;background:var(--bg);color:var(--text);font:14px/1.4 system-ui,Segoe UI,Roboto,Ubuntu,sans-serif}
#app{display:grid;grid-template-columns:72px 1fr;height:100vh}
.sidebar{background:var(--panel-2);display:flex;flex-direction:column;align-items:center;padding:10px 0;gap:10px}
.server-pill{width:48px;height:48px;border-radius:50%;background:#0f6d6d;display:grid;place-items:center;font-size:20px}
.channels{margin-top:10px;width:100%;}
.channel{padding:10px 12px;color:var(--muted);display:flex;justify-content:space-between;align-items:center;text-decoration:none}
.channel:hover{background:#0e191b}
.channel.active{background:var(--panel);color:var(--text);border-left:3px solid var(--accent)}
.chat{display:grid;grid-template-rows:auto 1fr auto;background:var(--panel)}
.chat-header{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border-bottom:1px solid #0e1719}
.user-area{display:flex;align-items:center;gap:8px}
.user{color:var(--muted)}
.messages{overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:12px}
.msg{display:flex;gap:12px}
.avatar{width:40px;height:40px;border-radius:50%;object-fit:cover;background:#134044;color:#fff;font-weight:700;border:1px solid #153c3f}
.avatar.sm{width:28px;height:28px;border-radius:50%;object-fit:cover;margin-right:6px;border:1px solid #17565a}
.bubble{background:transparent;}
.meta{display:flex;gap:8px;align-items:baseline}
.meta .name{font-weight:600;cursor:pointer}
.meta .name:hover{text-decoration:underline}
.meta .time{font-size:12px;color:var(--muted)}
.text{white-space:pre-wrap}
.composer{padding:12px;border-top:1px solid #0e1719}
#sendForm{display:flex;gap:8px}
#messageInput{flex:1;background:#0e191c;border:1px solid #0e1719;border-radius:9999px;padding:12px 16px;color:var(--text)}
.btn{background:linear-gradient(135deg, var(--accent), #2bd4cf);border:none;color:#081112;border-radius:9999px;padding:10px 16px;cursor:pointer;box-shadow:0 4px 16px rgba(32,178,170,.35);transition:transform .15s ease, box-shadow .15s ease}
.btn:hover{transform:translateY(-1px);box-shadow:0 6px 22px rgba(32,178,170,.5)}
.btn.small{padding:6px 10px;border-radius:9999px}
.btn.ghost{background:transparent;border:1px solid #134044;color:var(--text)}
.login-hint{color:var(--muted);padding:0 12px 12px}

.vip-pill{display:inline-block;background:#d4af37;color:#1e1f22;font-weight:700;font-size:11px;padding:2px 6px;border-radius:999px;margin-left:6px}
.badges{display:inline-flex;gap:4px;margin-left:6px}
.badge{display:inline-flex;align-items:center;gap:4px;background:#123136;border-radius:999px;padding:2px 6px;font-size:12px;border:1px solid #0f2a2e}
.badge .emoji{font-size:14px}

dialog{border:none;border-radius:10px;padding:20px;background:var(--panel);color:var(--text);width:320px}
dialog form{display:flex;flex-direction:column;gap:8px;margin:0 0 12px}
dialog input{background:#0e191c;border:1px solid #0e1719;border-radius:8px;padding:10px;color:var(--text)}
.or{color:var(--muted);text-align:center;margin:8px 0}

/* subtle animated teal wave background */
body::before{
  content:''; position:fixed; inset:0; pointer-events:none;
  background:
    radial-gradient(50% 50% at 0 100%, rgba(32,178,170,.07), transparent 60%),
    radial-gradient(40% 40% at 100% 0, rgba(32,178,170,.06), transparent 60%);
  animation: sway 10s ease-in-out infinite alternate;
}
@keyframes sway {
  from { transform: translateY(0px); }
  to   { transform: translateY(8px); }
}