@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Zen+Kaku+Gothic+New:wght@500;700;900&display=swap');

:root{
  --bg:#0a0c12;
  --bg-glow1:#1a1440;
  --bg-glow2:#062a38;
  --panel:rgba(20,24,36,.78);
  --panel-solid:#141824;
  --panel2:#1a2030;
  --card:#202740;
  --line:rgba(255,255,255,.08);
  --line-soft:rgba(255,255,255,.05);
  --text:#eef1f8;
  --muted:#8b93a9;
  --accent:#7c5cff;
  --accent2:#00d9ff;
  --grad:linear-gradient(135deg,#7c5cff,#00d9ff);
  --danger:#ff5d6c;
  --ok:#34e39a;
  --warn:#ffb020;
  --r:16px;
  --shadow:0 12px 40px rgba(0,0,0,.45);
  --font:'Inter','Zen Kaku Gothic New',system-ui,-apple-system,'Hiragino Kaku Gothic ProN',Meiryo,sans-serif;
}
*{box-sizing:border-box}
*::-webkit-scrollbar{width:9px;height:9px}
*::-webkit-scrollbar-thumb{background:#2c3450;border-radius:99px;border:2px solid transparent;background-clip:content-box}
*::-webkit-scrollbar-thumb:hover{background:#3d4a70;background-clip:content-box;border:2px solid transparent}
*::-webkit-scrollbar-track{background:transparent}
html,body{height:100%}
body{
  margin:0;color:var(--text);font-family:var(--font);height:100vh;height:100dvh;overflow:hidden;
  overflow-x:hidden;
  background:
    radial-gradient(900px 500px at 12% -5%,var(--bg-glow1),transparent 60%),
    radial-gradient(800px 500px at 95% 110%,var(--bg-glow2),transparent 60%),
    var(--bg);
}
.hidden{display:none!important}
button{
  border:1px solid transparent;border-radius:12px;padding:9px 15px;cursor:pointer;
  font-size:13.5px;font-weight:600;color:var(--text);background:var(--card);
  font-family:var(--font);transition:transform .08s ease,filter .15s ease,background .15s ease,box-shadow .15s ease;
}
button:hover{filter:brightness(1.15)}
button:active{transform:scale(.96)}
button.primary{background:var(--grad);color:#fff;box-shadow:0 4px 18px rgba(124,92,255,.4)}
button.ghost{background:rgba(255,255,255,.05);border-color:var(--line)}
button.danger{background:linear-gradient(135deg,#ff5d6c,#ff2e63);color:#fff;box-shadow:0 4px 18px rgba(255,45,99,.35)}
button.sm{padding:6px 12px;font-size:12.5px;border-radius:9px}
button.wide{width:100%;margin-top:8px}
button.icon-btn{width:30px;height:30px;padding:0;border-radius:10px;font-size:17px;background:rgba(255,255,255,.06);border-color:var(--line)}
input{
  background:rgba(255,255,255,.05);border:1px solid var(--line);color:var(--text);
  border-radius:12px;padding:10px 13px;font-size:13.5px;width:100%;font-family:var(--font);
  transition:border-color .15s ease,box-shadow .15s ease;
}
input::placeholder{color:#5d6579}
input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(124,92,255,.22)}
.row{display:flex;gap:8px}.row input{flex:1}

/* ---------- auth ---------- */
.auth-wrap{position:relative;display:flex;height:100vh;align-items:center;justify-content:center;overflow:hidden}
.auth-wrap::before,.auth-wrap::after{content:'';position:absolute;border-radius:50%;filter:blur(90px);opacity:.5;pointer-events:none}
.auth-wrap::before{width:480px;height:480px;left:-120px;top:-120px;background:#4b2fff}
.auth-wrap::after{width:520px;height:520px;right:-140px;bottom:-160px;background:#00b8d9}
.auth-card{
  position:relative;z-index:1;background:rgba(18,22,34,.85);backdrop-filter:blur(20px);
  border:1px solid var(--line);padding:38px 34px;border-radius:24px;width:min(360px,92vw);box-shadow:var(--shadow);
  animation:rise .5s cubic-bezier(.2,.9,.3,1.2);
}
@media(max-width:760px){.auth-card{padding:28px 22px}}
@keyframes rise{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:none}}
.logo{
  font-size:32px;font-weight:800;letter-spacing:-.02em;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 22px rgba(124,92,255,.45));
}
.logo.small{font-size:21px}
.sub{color:var(--muted);margin:6px 0 20px;font-size:13.5px}
.auth-card input{margin:7px 0;padding:12px 14px}
.auth-card .row{margin-top:12px}
.msg{color:var(--warn);min-height:1.4em;font-size:13px}

/* ---------- frame ---------- */
#app{display:flex;flex-direction:column;height:100vh;height:100dvh}
.topbar{
  display:flex;align-items:center;gap:18px;padding:10px 20px;z-index:5;
  background:rgba(12,15,24,.75);backdrop-filter:blur(16px);border-bottom:1px solid var(--line);
}
.tabs{display:flex;gap:4px;background:rgba(255,255,255,.05);padding:4px;border-radius:14px;border:1px solid var(--line-soft)}
.tab{background:transparent;color:var(--muted);border-radius:10px;padding:8px 20px;font-weight:700}
.tab.active{background:linear-gradient(135deg,rgba(124,92,255,.35),rgba(0,217,255,.25));color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.me{margin-left:auto;display:flex;align-items:center;gap:10px;color:var(--muted);font-size:13px}
.me .who{display:flex;align-items:center;gap:8px;font-weight:700;color:var(--text)}
.body{flex:1;display:flex;min-height:0}
.servers{width:252px;padding:16px 14px;overflow-y:auto;flex-shrink:0;background:rgba(255,255,255,.015);border-right:1px solid var(--line-soft)}
.side{width:292px;background:var(--panel);backdrop-filter:blur(14px);border-right:1px solid var(--line);padding:16px 14px;overflow-y:auto;flex-shrink:0}
.pane-head{display:flex;justify-content:space-between;align-items:center;font-weight:800;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:4px 2px 10px}
.sec{font-size:11px;font-weight:800;color:#626b84;margin:16px 2px 8px;letter-spacing:.12em;text-transform:uppercase}
.invite-box{margin-top:16px;padding:12px;background:rgba(124,92,255,.07);border:1px dashed rgba(124,92,255,.4);border-radius:var(--r)}
.empty{color:var(--muted);font-size:13px;margin-top:28px;text-align:center;line-height:2}

/* server cards */
.server-card{
  display:flex;gap:11px;align-items:center;padding:10px;border-radius:var(--r);cursor:pointer;
  margin-bottom:6px;border:1px solid transparent;transition:background .15s ease,border-color .15s ease,transform .1s ease;
}
.server-card:hover{background:rgba(255,255,255,.045)}
.server-card.active{background:rgba(124,92,255,.12);border-color:rgba(124,92,255,.4)}
.server-card:active{transform:scale(.98)}
.s-icon{
  width:42px;height:42px;border-radius:14px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:16px;color:#fff;box-shadow:0 4px 14px rgba(0,0,0,.4);
}
.server-card .nm{font-weight:700;font-size:14px;line-height:1.25}
.server-card .cd{display:inline-block;margin-top:3px;font-size:11px;font-weight:700;color:#c9bfff;background:rgba(124,92,255,.16);border:1px solid rgba(124,92,255,.35);padding:2px 8px;border-radius:99px;letter-spacing:.05em}

/* avatar */
.av{
  width:34px;height:34px;border-radius:12px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:14px;color:#fff;
}
.av.sm{width:24px;height:24px;border-radius:8px;font-size:11px}

/* channels / dm / users */
.ch-row,.dm-card,.user-row{
  padding:9px 12px;border-radius:12px;cursor:pointer;margin-bottom:3px;
  border:1px solid transparent;transition:background .13s ease,border-color .13s ease;
  font-size:13.5px;font-weight:600;
}
.ch-row{display:flex;justify-content:space-between;align-items:center}
.ch-row .hash{color:var(--muted);font-weight:800;margin-right:7px}
.ch-row:hover,.dm-card:hover,.user-row:hover{background:rgba(255,255,255,.05)}
.ch-row.active,.dm-card.active{background:rgba(0,217,255,.1);border-color:rgba(0,217,255,.3)}
.dm-card,.user-row{display:flex;align-items:center;gap:10px}
.join-btn{font-size:12px;padding:5px 13px;box-shadow:0 2px 10px rgba(124,92,255,.35)}
#user-search{margin-bottom:8px}

/* voice presence */
.v-participants{margin:1px 0 9px 12px;padding-left:12px;border-left:2px solid rgba(52,227,154,.35);display:flex;flex-direction:column;gap:5px}
.v-user{display:flex;align-items:center;gap:8px;font-size:12.5px;color:#c6cddd;font-weight:600}
.v-user .none{color:#5d6579;font-weight:500}
.v-user .mute{font-size:10.5px;font-weight:800;color:var(--warn);background:rgba(255,176,32,.12);padding:1px 7px;border-radius:99px}

/* pulsing dot */
.dot{width:9px;height:9px;border-radius:50%;background:var(--ok);flex-shrink:0;position:relative}
.dot::after{content:'';position:absolute;inset:-4px;border-radius:50%;border:2px solid var(--ok);opacity:.6;animation:ping 1.6s ease-out infinite}
@keyframes ping{0%{transform:scale(.5);opacity:.8}100%{transform:scale(1.15);opacity:0}}

/* ---------- main ---------- */
.main{flex:1;display:flex;flex-direction:column;min-width:0;position:relative}
.chat-header{
  padding:15px 22px;font-weight:800;font-size:16px;display:flex;align-items:center;gap:12px;
  background:rgba(12,15,24,.6);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);z-index:2;
}
.chat-header .call-btn{margin-left:auto;box-shadow:0 4px 16px rgba(124,92,255,.4)}
.dm-call-state{font-size:12px;font-weight:700;color:var(--ok);background:rgba(52,227,154,.12);border:1px solid rgba(52,227,154,.35);padding:3px 11px;border-radius:99px}

/* call panel */
.call-panel{
  margin:14px 20px 0;padding:14px 16px;border-radius:18px;position:relative;
  background:linear-gradient(rgba(26,32,48,.92),rgba(26,32,48,.92)) padding-box,
    var(--grad) border-box;
  border:1px solid transparent;box-shadow:var(--shadow);
  animation:rise .3s ease;
}
.call-info{display:flex;align-items:center;gap:9px;font-weight:800}
.call-members{color:var(--muted);font-size:12.5px;margin:7px 0 10px;font-weight:600}
.call-controls{display:flex;gap:8px;align-items:center}
.mic-meter{flex:1;height:9px;background:rgba(0,0,0,.5);border-radius:99px;overflow:hidden;border:1px solid var(--line-soft)}
#mic-level{height:100%;width:0%;background:var(--grad);border-radius:99px;transition:width .12s linear;box-shadow:0 0 12px rgba(0,217,255,.7)}

/* messages */
.messages{flex:1;overflow-y:auto;padding:22px;display:flex;flex-direction:column;gap:4px}
.day-line{display:flex;align-items:center;gap:12px;color:#5d6579;font-size:11.5px;font-weight:700;margin:14px 0 8px}
.day-line::before,.day-line::after{content:'';flex:1;height:1px;background:var(--line-soft)}
.msg-row{display:flex;gap:11px;padding:7px 10px;border-radius:14px;animation:msgin .25s ease;max-width:100%}
.msg-row:hover{background:rgba(255,255,255,.028)}
@keyframes msgin{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
.msg-body{min-width:0;flex:1}
.msg-head{display:flex;align-items:baseline;gap:8px;margin-bottom:2px}
.msg-name{font-weight:800;font-size:13.5px}
.msg-time{font-size:11px;color:#5d6579;font-weight:600}
.msg-text{font-size:14px;line-height:1.65;word-break:break-word;color:#dfe4f0}
.msg-row.mine .msg-name{color:#c9bfff}

/* composer */
.composer{display:flex;gap:10px;padding:16px 22px 20px}
.composer input{flex:1;padding:13px 17px;border-radius:15px;background:rgba(255,255,255,.055);font-size:14px}
.composer button{padding:12px 22px;border-radius:15px}
#remote-audios{position:fixed;width:2px;height:2px;opacity:0;pointer-events:none;bottom:0;left:0;overflow:hidden}

/* modal */
.modal-bg{position:fixed;inset:0;background:rgba(5,7,12,.7);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;z-index:50;animation:fadein .2s ease}
@keyframes fadein{from{opacity:0}to{opacity:1}}
.modal{background:var(--panel-solid);border:1px solid var(--line);border-radius:20px;padding:24px;width:min(360px,90vw);box-shadow:var(--shadow);animation:rise .25s ease}
.modal-title{font-weight:800;font-size:17px;margin-bottom:14px}
.modal input{margin-bottom:12px}
.type-row{display:flex;gap:10px;margin-bottom:6px}
.type-card{flex:1;cursor:pointer}
.type-card input{display:none}
.type-card span{display:block;text-align:center;font-size:22px;font-weight:800;padding:14px 8px;border-radius:14px;background:rgba(255,255,255,.045);border:2px solid var(--line);transition:border-color .15s ease,background .15s ease;line-height:1.5}
.type-card input:checked+span{border-color:var(--accent);background:rgba(124,92,255,.14);box-shadow:0 0 0 3px rgba(124,92,255,.18)}
.modal .row button{flex:1}

/* mobile */
.m-only{display:none!important}
.mobile-bar{display:flex;align-items:center;gap:10px;font-weight:800;margin-bottom:8px;color:var(--muted);font-size:13px}
@media(max-width:760px){
  .m-only{display:inline-flex!important}
  .servers,.side,.main{width:100%;border-right:0;border-bottom:0}
  body[data-mview="servers"] .side,body[data-mview="servers"] .main{display:none}
  body[data-mview="detail"] .servers,body[data-mview="detail"] .main{display:none}
  body[data-mview="chat"] .servers,body[data-mview="chat"] .side{display:none}
  body[data-mview="dmlist"] .servers,body[data-mview="dmlist"] .main{display:none}
  body:not([data-mview]) .side,body:not([data-mview]) .main{display:none}
  .topbar{gap:8px;padding:10px 12px}
  .logo.small{font-size:17px}
  .tab{padding:8px 13px;font-size:13px}
  .me{font-size:12px;gap:7px}
  .messages{padding:13px 12px}
  .msg-text{font-size:13.5px}
  .chat-header{padding:11px 13px;font-size:14.5px;flex-wrap:wrap;row-gap:8px}
  .composer{padding:10px 12px calc(12px + env(safe-area-inset-bottom))}
  .composer button{padding:12px 16px}
  .call-panel{margin:10px 12px 0;padding:11px 12px}
  .call-controls{flex-wrap:wrap}
  .mic-meter{flex:1 1 100%;order:-1;margin-bottom:2px}
  .call-controls button{flex:1;white-space:nowrap;padding:9px 6px;font-size:12.5px}
  .video-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:7px}
  .v-tile.pinned{min-height:220px;aspect-ratio:16/10}
  .servers,.side{padding:12px 10px}
}

@media(max-width:900px){
  .servers{width:190px}.side{width:220px}
  .me .who span{display:none}
}

/* moderation + deletes */
.member-row{display:flex;align-items:center;gap:9px;padding:7px 9px;border-radius:11px;margin-bottom:3px;flex-wrap:wrap}
.member-row:hover{background:rgba(255,255,255,.04)}
.m-name{font-weight:700;font-size:13px;flex:1}
.role-badge{font-size:10px;font-weight:800;padding:2px 9px;border-radius:99px;letter-spacing:.04em}
.role-badge.owner{background:linear-gradient(135deg,#ffb020,#ff5d6c);color:#fff}
.role-badge.admin{background:rgba(0,217,255,.15);color:var(--accent2);border:1px solid rgba(0,217,255,.4)}
.role-badge.member{background:rgba(255,255,255,.07);color:var(--muted)}
.mod-ops{display:flex;gap:5px;flex-wrap:wrap;flex-basis:100%}
.mod-ops button{font-size:11px;padding:4px 9px}
.msg-del{margin-left:auto;font-size:10.5px;padding:2px 9px;background:transparent;border:1px solid var(--line);color:var(--muted);opacity:0;transition:opacity .15s}
.msg-row:hover .msg-del{opacity:1}
.msg-del:hover{color:var(--danger);border-color:var(--danger)}
.del-btn{padding:3px 9px;font-size:12px}
/* video grid (SFU) */
.call-note{font-size:11.5px;color:var(--muted);margin:5px 0 8px}
.video-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:9px;margin:4px 0 10px}
.video-grid:empty{display:none}
.v-tile{position:relative;aspect-ratio:16/10;border-radius:13px;overflow:hidden;background:#0a0d16;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;transition:box-shadow .2s,border-color .2s}
.v-tile.speaking{border-color:var(--ok);box-shadow:0 0 0 2px rgba(52,227,154,.5),0 0 18px rgba(52,227,154,.3)}
.v-tile.pinned{grid-column:1/-1;aspect-ratio:16/8;min-height:320px;cursor:zoom-out;border-color:var(--accent);box-shadow:0 0 0 2px rgba(124,92,255,.55),0 0 26px rgba(124,92,255,.35)}
.v-tile{cursor:zoom-in}
.v-tile.pinned .v-avatar{width:84px;height:84px;font-size:32px;border-radius:26px}
.v-video{width:100%;height:100%;object-fit:cover;background:#000}
.v-avatar{width:52px;height:52px;border-radius:17px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:21px;color:#fff}
.v-tag{position:absolute;left:7px;bottom:7px;font-size:10.5px;font-weight:700;background:rgba(0,0,0,.62);padding:2px 9px;border-radius:99px;max-width:calc(100% - 14px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}