/* Chat page, round two: a channel sidebar with a voice channel, purple to
   match the windows, and nicer messages. Loaded only by /chat/. */

/* ---------- room ---------- */
/* Height leaves room for the dock and status bar under it. */
.dc-shell{width:min(1320px,96vw) !important;height:min(calc(100dvh - 215px),820px) !important;min-height:420px;margin-top:-1.5rem !important;border-radius:20px !important;
  border:1px solid rgba(206,170,255,.3) !important;
  background:radial-gradient(90% 70% at 0% 0%,rgba(168,85,247,.2),transparent 60%),radial-gradient(70% 60% at 100% 100%,rgba(236,72,153,.13),transparent 60%),rgba(14,6,30,.82) !important;
  box-shadow:0 30px 80px rgba(0,0,0,.55),0 0 60px rgba(168,85,247,.18) !important;position:relative}
.dc-head{background:rgba(20,8,40,.55) !important;border-bottom-color:rgba(206,170,255,.16) !important;min-height:52px}
.dc-tabs{display:none !important}
.cp-title{display:flex;align-items:center;gap:.55rem;min-width:0}
.cp-title b{font-size:.98rem;color:#fff;font-weight:700;letter-spacing:.01em}
.cp-title .hash{color:rgba(216,180,254,.6);font-size:1.25rem;line-height:1}
.cp-title .topic{font-size:.72rem;color:rgba(233,213,255,.5);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  padding-left:.7rem;border-left:1px solid rgba(206,170,255,.2)}
.dc-form,.dc-ai-bar{background:rgba(20,8,40,.55) !important;border-color:rgba(206,170,255,.16) !important}
.dc-input{background:rgba(24,8,48,.75) !important;border-color:rgba(206,170,255,.22) !important;border-radius:12px !important}
.dc-input:focus{border-color:rgba(232,121,249,.65) !important;box-shadow:0 0 0 3px rgba(192,132,252,.18)}
.dc-send{background:linear-gradient(135deg,#c084fc,#8b5cf6 55%,#ec4899) !important;color:#fff !important;border-radius:12px !important;
  box-shadow:0 6px 20px rgba(168,85,247,.35)}
.dc-row:hover{background:rgba(192,132,252,.06) !important}
.dc-tag{background:linear-gradient(135deg,#a855f7,#ec4899) !important;color:#fff !important}
.dc-side{background:rgba(18,6,36,.5) !important;border-left-color:rgba(206,170,255,.14) !important}
.dc-log::-webkit-scrollbar-thumb,.dc-ailog::-webkit-scrollbar-thumb{background:rgba(192,132,252,.3) !important}

/* ---------- channel sidebar ---------- */
.cp-nav{flex:0 0 236px;display:flex;flex-direction:column;min-height:0;background:rgba(10,3,24,.6);border-right:1px solid rgba(206,170,255,.14)}
.cp-server{display:flex;align-items:center;gap:.65rem;padding:.8rem .9rem;border-bottom:1px solid rgba(206,170,255,.14);
  background:linear-gradient(90deg,rgba(124,58,237,.35),rgba(236,72,153,.18))}
.cp-logo{width:34px;height:34px;flex:0 0 34px;border-radius:11px;display:grid;place-items:center;font-weight:800;color:#fff;
  background:linear-gradient(135deg,#c084fc,#7c3aed 55%,#ec4899);box-shadow:0 0 16px rgba(192,132,252,.5)}
.cp-server b{display:block;color:#fff;font-size:.9rem;line-height:1.1}
.cp-server small{display:block;color:rgba(233,213,255,.55);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase}
.cp-chans{flex:1 1 auto;overflow-y:auto;padding:.6rem .5rem}
.cp-cat{margin:.8rem .5rem .3rem;font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(233,213,255,.42);font-weight:700}
.cp-cat:first-child{margin-top:.2rem}
.cp-ch{display:flex;align-items:center;gap:.5rem;width:100%;padding:.45rem .6rem;margin:1px 0;border:0;border-radius:9px;background:none;
  color:rgba(233,213,255,.62);font:inherit;font-size:.85rem;font-weight:600;text-align:left;cursor:pointer;transition:background .12s,color .12s}
.cp-ch:hover{background:rgba(192,132,252,.1);color:#f3e8ff}
.cp-ch.on{background:rgba(192,132,252,.2);color:#fff}
.cp-ch .ic{width:18px;text-align:center;color:rgba(216,180,254,.7);font-size:.95rem}
.cp-ch .n{margin-left:auto;font-size:.62rem;color:rgba(233,213,255,.5);font-weight:600}
.cp-ch .badge{margin-left:auto;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:#ec4899;color:#fff;font-size:.62rem;display:none;align-items:center;justify-content:center}
.cp-ch .badge.on{display:inline-flex}
.cp-vc.live{color:#fff}
.cp-vc.live .ic{color:#4ade80}

/* who is in voice, under the channel */
.cp-vlist{padding:.1rem 0 .3rem 1.6rem}
.cp-vm{display:flex;align-items:center;gap:.5rem;padding:.25rem .45rem;border-radius:8px;cursor:default;position:relative}
.cp-vm:hover{background:rgba(192,132,252,.08)}
.cp-vm.other{cursor:pointer}
.cp-vm .xn-av{transition:box-shadow .12s}
.cp-vm.speaking .xn-av{box-shadow:0 0 0 2px #4ade80,0 0 12px rgba(74,222,128,.7);border-radius:50%}
.cp-vm .nm{font-size:.76rem;color:rgba(243,232,255,.82);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1 1 auto;min-width:0}
.cp-vm .st{font-size:.7rem;color:#f87171;flex:0 0 auto}
.cp-vm .st.cn{color:#fbbf24}

/* voice connected bar + me panel */
.cp-voicebar{margin:0 .5rem .5rem;padding:.55rem .65rem;border-radius:12px;background:rgba(74,222,128,.08);border:1px solid rgba(74,222,128,.22);display:flex;align-items:center;gap:.5rem}
.cp-voicebar[hidden]{display:none !important}
.cp-voicebar .t{flex:1 1 auto;min-width:0}
.cp-voicebar b{display:block;color:#4ade80;font-size:.74rem}
.cp-voicebar small{display:block;color:rgba(233,213,255,.55);font-size:.64rem}
.cp-me{display:flex;align-items:center;gap:.55rem;padding:.6rem .65rem;border-top:1px solid rgba(206,170,255,.14);background:rgba(8,2,20,.55)}
.cp-me .who{flex:1 1 auto;min-width:0}
.cp-me .who b{display:block;font-size:.8rem;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cp-me .who small{display:block;font-size:.62rem;color:rgba(233,213,255,.5)}
.cp-ib{width:32px;height:32px;flex:0 0 32px;display:grid;place-items:center;border:0;border-radius:9px;background:none;color:rgba(243,232,255,.75);cursor:pointer;transition:background .12s,color .12s}
.cp-ib:hover{background:rgba(192,132,252,.18);color:#fff}
.cp-ib.off{color:#f87171}
.cp-ib.hang{background:rgba(248,113,113,.14);color:#fca5a5}
.cp-ib.hang:hover{background:#ef4444;color:#fff}
.cp-ib svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

/* per-person volume */
.cp-vol{position:absolute;left:100%;top:0;z-index:30;margin-left:8px;width:200px;padding:.7rem .8rem;border-radius:12px;background:rgba(24,8,48,.97);
  border:1px solid rgba(206,170,255,.35);box-shadow:0 14px 34px rgba(0,0,0,.5);font-size:.72rem;color:#f3e8ff}
.cp-vol input{width:100%;accent-color:#c084fc}
.cp-vol button{margin-top:.4rem;width:100%;padding:.35rem;border-radius:8px;border:1px solid rgba(206,170,255,.3);background:none;color:#f3e8ff;font:inherit;cursor:pointer}

/* ---------- messages ---------- */
.dc-text a{color:#d8b4fe;text-decoration:underline;text-decoration-color:rgba(216,180,254,.4)}
.dc-text a:hover{color:#f0abfc}
.cp-at{padding:0 .2rem;border-radius:4px;background:rgba(192,132,252,.22);color:#f3e8ff;font-weight:600}
.dc-row.cp-mention{background:rgba(251,191,36,.08) !important;box-shadow:inset 3px 0 0 #fbbf24}
.cp-jump{position:absolute;left:50%;transform:translateX(-50%);bottom:86px;z-index:5;padding:.45rem 1rem;border:0;border-radius:999px;cursor:pointer;
  background:linear-gradient(135deg,#a855f7,#ec4899);color:#fff;font:700 .72rem system-ui,sans-serif;box-shadow:0 8px 24px rgba(168,85,247,.45);animation:cpup .2s ease-out}
.cp-jump[hidden]{display:none}
@keyframes cpup{from{opacity:0;transform:translate(-50%,8px)}}
.dc-main{position:relative}
.cp-emo-btn{flex:0 0 auto;width:44px;border-radius:12px;border:1px solid rgba(206,170,255,.22);background:rgba(24,8,48,.75);font-size:1.1rem;cursor:pointer}
.cp-emo-btn:hover{border-color:rgba(232,121,249,.6)}
.cp-emo{position:absolute;right:1.1rem;bottom:70px;z-index:6;display:grid;grid-template-columns:repeat(8,1fr);gap:2px;padding:.5rem;border-radius:14px;
  background:rgba(24,8,48,.97);border:1px solid rgba(206,170,255,.35);box-shadow:0 14px 34px rgba(0,0,0,.5)}
.cp-emo[hidden]{display:none}
.cp-emo button{width:34px;height:34px;border:0;border-radius:8px;background:none;font-size:1.15rem;cursor:pointer}
.cp-emo button:hover{background:rgba(192,132,252,.2)}

/* pinned line from the admin panel */
.cp-pin{display:flex;align-items:center;gap:.55rem;padding:.5rem 1.1rem;background:rgba(192,132,252,.1);border-bottom:1px solid rgba(206,170,255,.18);font-size:.8rem;color:#f3e8ff}
.cp-pin[hidden]{display:none}
.cp-pin .t{overflow-wrap:anywhere}
.dc-input:disabled{opacity:.55;cursor:not-allowed}

/* member list with frames */
.cp-pwrap{display:flex;flex-direction:column;min-width:0;line-height:1.2}
.cp-game{font-size:.62rem;color:#86efac;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dc-person .xn-av{flex:0 0 auto}
.cp-sec{margin:.9rem .6rem .4rem;font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(233,213,255,.4)}

@media (max-width:980px){.cp-nav{flex-basis:200px}}
@media (max-width:760px){
  .cp-nav{position:absolute;left:0;top:0;bottom:0;z-index:4;transform:translateX(-100%);transition:transform .18s ease;background:rgba(14,4,30,.98)}
  .cp-nav.open{transform:none}
  .cp-navbtn{display:block !important}
}
.cp-navbtn{display:none;background:none;border:0;color:rgba(233,213,255,.7);font-size:1.15rem;cursor:pointer;padding:0 .3rem}

/* framed avatars on messages (chat-plus.js frameRow) */
.dc-row > .cp-msg-av{flex:0 0 38px;margin-top:.15rem}