:root{
  --bg:#050505;
  --bg2:#0a0a0b;
  --panel:#0f0f11;
  --panel2:#151518;
  --panel3:#1c1c20;
  --line:#26262b;
  --line2:#33333a;
  --text:#f3f3f3;
  --muted:#8f8f99;
  --muted2:#62626c;
  --white:#ffffff;
  --danger:#f15b73;
  --ok:#d7d7d7;
  --shadow:0 28px 90px rgba(0,0,0,.55);
  --radius:18px;
}

*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden}
body{
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
}
button,input,textarea,select{font:inherit}
button{
  border:1px solid var(--line2);
  background:#f4f4f4;
  color:#050505;
  border-radius:12px;
  padding:10px 14px;
  cursor:pointer;
  font-weight:700;
  transition:background .16s ease,color .16s ease,border-color .16s ease,transform .16s ease;
}
button:hover{background:#fff;transform:translateY(-1px)}
button:active{transform:translateY(0)}
input,textarea,select{
  width:100%;
  border:1px solid var(--line);
  background:#09090a;
  color:var(--text);
  border-radius:12px;
  padding:12px 13px;
  outline:none;
}
input::placeholder,textarea::placeholder{color:#5f5f68}
input:focus,textarea:focus,select:focus{
  border-color:#e8e8e8;
  box-shadow:0 0 0 3px rgba(255,255,255,.08);
}
textarea{min-height:105px;resize:vertical}
img,video{display:block}
.hidden{display:none!important}
.tiny{font-size:12px}.muted{color:var(--muted)}
.kicker{
  margin:0;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.16em;
  font-size:11px;
  font-weight:800;
}
.primary-btn{background:#f2f2f2;color:#050505}
.primary-btn.small{padding:10px 15px}
.ghost{background:var(--panel2);color:var(--text)}
.danger{background:transparent;color:#fff;border-color:#69313c}
.danger:hover{background:#261116;border-color:#f15b73}
.icon-btn{
  width:44px;
  height:44px;
  min-width:44px;
  padding:0;
  display:grid;
  place-items:center;
}

/* AUTH */
.auth-shell{
  height:100dvh;
  width:100vw;
  display:grid;
  place-items:center;
  padding:32px;
  background:
    radial-gradient(circle at 20% 0%, rgba(255,255,255,.055), transparent 32%),
    linear-gradient(135deg,#050505,#0b0b0d 52%,#050505);
}
.auth-card{
  width:min(1040px,100%);
  height:min(680px,calc(100dvh - 64px));
  min-height:560px;
  display:grid;
  grid-template-columns:minmax(0,1fr) 390px;
  background:rgba(12,12,14,.96);
  border:1px solid var(--line);
  border-radius:28px;
  overflow:hidden;
  box-shadow:var(--shadow);
}
.auth-left{
  min-width:0;
  padding:48px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  border-right:1px solid var(--line);
  background:
    linear-gradient(180deg,rgba(255,255,255,.035),transparent),
    var(--panel);
}
.auth-logo{
  width:320px;
  max-width:100%;
  height:auto;
}
.auth-copy{
  max-width:560px;
  display:grid;
  gap:16px;
}
.auth-copy h1{
  margin:0;
  font-size:clamp(42px,5vw,72px);
  line-height:.95;
  letter-spacing:-.065em;
  max-width:620px;
}
.auth-copy p:not(.kicker){
  margin:0;
  color:var(--muted);
  font-size:17px;
  line-height:1.65;
  max-width:520px;
}
.auth-panel{
  padding:36px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:20px;
  background:#080809;
}
.auth-panel-head{
  display:flex;
  gap:14px;
  align-items:center;
}
.auth-panel-head img{
  width:54px;
  height:54px;
  border-radius:16px;
}
.auth-panel-head h2{
  margin:0;
  font-size:24px;
  letter-spacing:-.03em;
}
.auth-panel-head p{
  margin:3px 0 0;
  color:var(--muted);
}
.auth-switch{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  padding:4px;
  border:1px solid var(--line);
  background:#050505;
  border-radius:14px;
}
.auth-switch button{
  background:transparent;
  color:var(--muted);
  border:0;
  box-shadow:none;
}
.auth-switch button.active{
  background:#f3f3f3;
  color:#050505;
}
.auth-form{
  display:grid;
  gap:14px;
}
.auth-form label,.modal-card label{
  display:grid;
  gap:8px;
}
.auth-form span,.modal-card label span{
  font-size:12px;
  color:#cfcfd3;
  font-weight:800;
}
.error-text{
  min-height:19px;
  margin:0;
  color:#ff8fa2;
  font-size:13px;
}

/* APP FULL SCREEN */
.app-shell{
  width:100vw;
  height:100dvh;
  display:grid;
  grid-template-columns:72px 300px minmax(0,1fr);
  background:#050505;
}
.spaces-rail{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  padding:14px 9px;
  background:#050505;
  border-right:1px solid var(--line);
}
.rail-brand{
  width:48px;
  height:48px;
  border-radius:15px;
}
.rail-action,.space-pill{
  width:48px;
  height:48px;
  padding:0;
  display:grid;
  place-items:center;
  border-radius:15px;
  background:var(--panel);
  color:var(--text);
  border:1px solid var(--line);
  box-shadow:none;
}
.rail-action:hover,.space-pill:hover{
  background:#f2f2f2;
  color:#050505;
}
.space-list{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  overflow:auto;
}
.space-pill img{
  width:30px;
  height:30px;
  border-radius:10px;
}
.space-pill.active{
  background:#f2f2f2;
  color:#050505;
}
.rail-action.bottom{margin-top:auto}

.sidebar{
  min-height:0;
  display:flex;
  flex-direction:column;
  gap:16px;
  padding:16px;
  background:#09090a;
  border-right:1px solid var(--line);
  overflow:hidden;
}
.sidebar-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-bottom:14px;
  border-bottom:1px solid var(--line);
}
.sidebar-header h2{
  margin:3px 0 0;
  font-size:22px;
  letter-spacing:-.04em;
}
.header-actions{
  display:flex;
  gap:8px;
}
.header-actions button{
  width:38px;
  height:38px;
  padding:0;
  background:var(--panel2);
  color:var(--text);
  border-color:var(--line);
}
.sidebar-section{
  min-height:0;
  display:flex;
  flex-direction:column;
  gap:9px;
}
.friends-section{flex:1}
.section-head h3{
  margin:0;
  color:var(--muted2);
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:11px;
}
.list,.requests,.mini-list,.search-results{
  min-height:0;
  display:grid;
  align-content:start;
  gap:6px;
  overflow:auto;
}
.row-btn,.self-card,.member-chip,.pin-card,.request-card{
  width:100%;
  display:flex;
  align-items:center;
  gap:11px;
  text-align:left;
  background:transparent;
  border:1px solid transparent;
  color:var(--text);
  border-radius:14px;
  padding:10px;
  box-shadow:none;
}
.row-btn:hover,.row-btn.active,.self-card:hover,.member-chip:hover,.pin-card:hover{
  background:var(--panel2);
  border-color:var(--line);
  transform:none;
}
.row-btn img,.self-card img,.member-chip img{
  width:38px;
  height:38px;
  border-radius:12px;
  object-fit:cover;
  flex-shrink:0;
}
.row-meta,.self-meta{
  min-width:0;
  display:grid;
  gap:2px;
  flex:1;
}
.row-meta b,.row-meta small,.self-meta b,.self-meta small{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.row-meta small,.self-meta small{color:var(--muted)}
.add-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:8px;
}
.add-row button{
  background:var(--panel2);
  color:var(--text);
}
.request-card{
  background:var(--panel2);
  border-color:var(--line);
}
.request-card button{
  padding:7px 10px;
  font-size:12px;
}
.self-card{
  margin-top:auto;
  background:var(--panel);
  border-color:var(--line);
}
.status-chip{
  font-size:11px;
  color:#050505;
  background:#f3f3f3;
  border-radius:999px;
  padding:5px 8px;
  flex-shrink:0;
}

/* MAIN */
.main-panel{
  min-width:0;
  min-height:0;
  display:grid;
  grid-template-rows:68px minmax(0,1fr);
  background:#070707;
}
.topbar{
  min-width:0;
  display:flex;
  align-items:center;
  gap:12px;
  padding:0 16px;
  background:#09090a;
  border-bottom:1px solid var(--line);
}
.topbar img{
  width:40px;
  height:40px;
  border-radius:12px;
  object-fit:cover;
}
.room-lockup{
  min-width:0;
  flex:1;
}
.room-lockup h2{
  margin:0;
  font-size:19px;
  letter-spacing:-.03em;
}
.room-lockup p{
  margin:2px 0 0;
  color:var(--muted);
  font-size:12px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.search{
  width:260px;
  height:42px;
}
.topbar-actions{
  display:flex;
  gap:8px;
}
.topbar-actions button{
  background:var(--panel2);
  color:var(--text);
  border-color:var(--line);
}
.topbar-actions button:hover{
  background:#f3f3f3;
  color:#050505;
}
.content-grid{
  min-height:0;
  display:grid;
  grid-template-columns:minmax(0,1fr) 260px;
}
.message-panel{
  min-width:0;
  min-height:0;
  display:grid;
  grid-template-rows:auto auto minmax(0,1fr) 72px;
}
.reply-banner,.typing-line{
  min-height:0;
  padding:8px 18px;
  color:var(--muted);
  font-size:12px;
}
.reply-banner{
  border-bottom:1px solid var(--line);
  background:#0c0c0d;
}
.messages{
  overflow:auto;
  padding:18px;
  background:
    radial-gradient(circle at top, rgba(255,255,255,.025), transparent 36%),
    #070707;
}
.msg{
  display:flex;
  gap:12px;
  margin-bottom:14px;
}
.msg>.avatar{
  width:40px;
  height:40px;
  border-radius:12px;
  object-fit:cover;
  flex-shrink:0;
}
.bubble{
  max-width:880px;
  background:#0d0d0f;
  border:1px solid var(--line);
  border-radius:17px;
  padding:12px 13px;
}
.bubble p{
  margin:8px 0 0;
  white-space:pre-wrap;
  line-height:1.5;
  color:#f2f2f2;
}
.bubble small{color:var(--muted)}
.reply-preview{
  margin-top:8px;
  padding:8px 10px;
  border-radius:12px;
  background:#070707;
  border:1px solid var(--line);
  color:var(--muted);
  font-size:12px;
}
.message-actions{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:10px;
}
.message-actions button{
  padding:5px 8px;
  border-radius:999px;
  font-size:12px;
  background:#121214;
  color:var(--muted);
  border-color:var(--line);
}
.message-actions button:hover{
  background:#f3f3f3;
  color:#050505;
}
.composer{
  display:grid;
  grid-template-columns:44px minmax(0,1fr) auto;
  gap:10px;
  padding:13px 16px;
  background:#09090a;
  border-top:1px solid var(--line);
}
.composer input{
  height:44px;
}
.composer .icon-btn{
  background:var(--panel2);
  color:var(--text);
  border-color:var(--line);
}

.right-rail{
  min-height:0;
  overflow:auto;
  background:#09090a;
  border-left:1px solid var(--line);
  padding:14px;
  display:grid;
  align-content:start;
  gap:12px;
}
.right-card{
  background:#0d0d0f;
  border:1px solid var(--line);
  border-radius:17px;
  padding:13px;
}
.right-card h3{
  margin:0 0 10px;
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:var(--muted);
}
.pin-card,.member-chip{
  background:#121214;
  border-color:var(--line);
}
.member-chip .status-dot{
  width:9px;
  height:9px;
  border-radius:50%;
  margin-left:auto;
}

/* MODALS */
.modal,.call-modal{
  position:fixed;
  inset:0;
  z-index:70;
  display:grid;
  place-items:center;
  padding:20px;
  background:rgba(0,0,0,.72);
}
.modal-card,.call-card{
  width:min(560px,100%);
  max-height:90dvh;
  overflow:auto;
  position:relative;
  display:grid;
  gap:13px;
  background:#0b0b0d;
  border:1px solid var(--line2);
  border-radius:22px;
  padding:24px;
  box-shadow:var(--shadow);
}
.modal-card h2,.call-card h2{margin:0}
.closeModal{
  position:absolute;
  top:12px;
  right:12px;
  width:38px;
  height:38px;
  padding:0;
  background:#151518;
  color:var(--text);
  border-color:var(--line);
}
.pretty-upload{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--line2);
  border-radius:12px;
  padding:11px 14px;
  color:#050505;
  background:#f2f2f2;
  font-weight:800;
  cursor:pointer;
}
.pretty-upload input{display:none}
.big-avatar{
  width:104px;
  height:104px;
  border-radius:24px;
  object-fit:cover;
}
.check-list{
  display:grid;
  gap:8px;
}
.check-list label{
  display:flex;
  gap:10px;
  align-items:center;
  background:#121214;
  border:1px solid var(--line);
  padding:10px;
  border-radius:12px;
}

/* CALL */
.call-card{width:min(980px,100%)}
.call-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.call-top p{
  margin:3px 0 0;
  color:var(--muted);
}
.call-body{display:grid;gap:12px}
.video-stack{
  display:grid;
  grid-template-columns:minmax(0,1fr) 240px;
  gap:12px;
}
.video-stack video{
  width:100%;
  height:320px;
  background:#000;
  border:1px solid var(--line);
  border-radius:18px;
  object-fit:cover;
}
.call-controls,.incoming{
  display:flex;
  justify-content:center;
  gap:10px;
}

/* TOASTS */
#toasts{
  position:fixed;
  right:18px;
  bottom:18px;
  display:grid;
  gap:10px;
  z-index:90;
}
.toast{
  background:#111113;
  border:1px solid var(--line2);
  color:var(--text);
  padding:12px 14px;
  border-radius:14px;
  box-shadow:0 18px 45px rgba(0,0,0,.35);
}

.mobile-only{display:none}

@media (max-width:1180px){
  .content-grid{grid-template-columns:minmax(0,1fr)}
  .right-rail{display:none}
}
@media (max-width:900px){
  .auth-shell{padding:18px}
  .auth-card{
    height:auto;
    min-height:0;
    grid-template-columns:1fr;
  }
  .auth-left{
    padding:28px;
    gap:36px;
    border-right:0;
    border-bottom:1px solid var(--line);
  }
  .auth-panel{padding:28px}
  .auth-copy h1{font-size:42px}
  .app-shell{
    grid-template-columns:1fr;
    grid-template-rows:minmax(0,1fr) 70px;
  }
  .spaces-rail{
    grid-row:2;
    flex-direction:row;
    padding:10px;
  }
  .space-list{
    flex-direction:row;
    width:auto;
    flex:1;
  }
  .rail-action.bottom{margin-top:0}
  .sidebar{
    position:fixed;
    inset:0 0 70px 0;
    width:min(340px,100%);
    z-index:60;
    transform:translateX(-105%);
    transition:transform .18s ease;
    box-shadow:var(--shadow);
  }
  .sidebar.open{transform:translateX(0)}
  .main-panel{height:calc(100dvh - 70px)}
  .mobile-only{display:grid}
  .topbar{padding:0 12px}
  .topbar img{display:none}
  .search{display:none}
}
@media (max-width:640px){
  .auth-left,.auth-panel{padding:22px}
  .auth-logo{width:230px}
  .auth-copy h1{font-size:34px}
  .topbar-actions button{
    padding:9px 10px;
    font-size:12px;
  }
  .composer{
    grid-template-columns:44px minmax(0,1fr) 66px;
    padding:11px;
  }
  .messages{padding:12px}
  .video-stack{grid-template-columns:1fr}
  .video-stack video{height:220px}
}


/* GLASS / FLOATING REFRESH */
body{
  background:
    radial-gradient(circle at 12% 8%, rgba(255,255,255,.075), transparent 28%),
    radial-gradient(circle at 85% 12%, rgba(255,255,255,.045), transparent 26%),
    radial-gradient(circle at 50% 105%, rgba(255,255,255,.055), transparent 34%),
    #030304;
}
.auth-card,.sidebar,.topbar,.right-rail,.spaces-rail,.modal-card,.call-card{
  background:rgba(12,12,14,.68);
  backdrop-filter:blur(22px);
  -webkit-backdrop-filter:blur(22px);
  box-shadow:0 24px 80px rgba(0,0,0,.44);
}
.auth-card,.modal-card,.call-card{
  border:1px solid rgba(255,255,255,.10);
}
.auth-left,.auth-panel{
  background:rgba(10,10,12,.34);
}
.app-shell{
  padding:14px;
  gap:12px;
  background:transparent;
  grid-template-columns:72px 310px minmax(0,1fr);
}
.spaces-rail,.sidebar,.main-panel{
  border:1px solid rgba(255,255,255,.09);
  border-radius:24px;
  overflow:hidden;
}
.main-panel{
  background:rgba(8,8,10,.56);
  box-shadow:0 24px 80px rgba(0,0,0,.36);
}
.topbar{
  background:rgba(13,13,15,.56);
}
.messages{
  background:
    linear-gradient(180deg, rgba(255,255,255,.025), transparent 28%),
    rgba(5,5,6,.18);
}
.bubble,.right-card,.self-card,.row-btn:hover,.row-btn.active,.member-chip,.pin-card,.request-card,.soft-empty,.empty-state{
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.09);
  box-shadow:0 14px 34px rgba(0,0,0,.20);
  backdrop-filter:blur(12px);
}
.row-btn,.self-card,.member-chip,.pin-card{
  color:var(--text);
}
.rail-action,.space-pill,.header-actions button,.topbar-actions button,.composer .icon-btn,.add-row button{
  background:rgba(255,255,255,.055);
  color:var(--text);
  border-color:rgba(255,255,255,.10);
  box-shadow:0 12px 30px rgba(0,0,0,.16);
}
.rail-action:hover,.space-pill:hover,.topbar-actions button:hover,.header-actions button:hover,.add-row button:hover,.composer .icon-btn:hover{
  background:rgba(255,255,255,.90);
  color:#050505;
}
.space-pill.active{
  background:rgba(255,255,255,.92);
  color:#050505;
  box-shadow:0 0 0 6px rgba(255,255,255,.08), 0 18px 35px rgba(0,0,0,.24);
}
.dm-home-section{
  flex:1.15;
  min-height:150px;
}
.friends-section{
  flex:.95;
}
.soft-empty{
  padding:14px;
  border-radius:14px;
  color:var(--muted);
  font-size:13px;
}
.empty-state{
  width:min(460px,90%);
  margin:9vh auto 0;
  display:grid;
  justify-items:center;
  text-align:center;
  gap:12px;
  padding:34px;
  border-radius:28px;
}
.empty-state img{
  width:86px;
  height:86px;
  border-radius:24px;
}
.empty-state h2{
  margin:0;
  font-size:28px;
  letter-spacing:-.04em;
}
.empty-state p{
  margin:0;
  color:var(--muted);
  line-height:1.6;
}
.settings-card{
  width:min(720px,100%);
  gap:16px;
}
.settings-head h2{
  margin:2px 0 0;
  font-size:30px;
  letter-spacing:-.05em;
}
.settings-tabs{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
  padding:5px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:16px;
  background:rgba(255,255,255,.035);
}
.settings-tab{
  background:transparent;
  color:var(--muted);
  border:0;
  box-shadow:none;
}
.settings-tab.active{
  background:rgba(255,255,255,.92);
  color:#050505;
}
.settings-page{
  display:none;
  gap:12px;
}
.settings-page.active{
  display:grid;
}
.setting-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(180px,260px);
  gap:18px;
  align-items:center;
  padding:16px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:18px;
  background:rgba(255,255,255,.045);
}
.setting-row b,.setting-row small{
  display:block;
}
.setting-row small{
  color:var(--muted);
  margin-top:4px;
}
input[type="range"]{
  accent-color:#f2f2f2;
}
@media (max-width:900px){
  .app-shell{
    padding:10px;
    gap:10px;
  }
  .spaces-rail{
    border-radius:20px;
  }
  .setting-row{
    grid-template-columns:1fr;
  }
}


/* NORMAL COMPOSER + DM/SERVER VIEW FIX */
.content-grid,
.message-panel{
  min-height:0 !important;
  height:100% !important;
}

.message-panel{
  display:flex !important;
  flex-direction:column !important;
}

.reply-banner,
.typing-line{
  flex:0 0 auto !important;
}

.messages{
  flex:1 1 auto !important;
  min-height:0 !important;
  overflow:auto !important;
}

.composer{
  flex:0 0 auto !important;
  height:74px !important;
  min-height:74px !important;
  max-height:74px !important;
  display:grid !important;
  grid-template-columns:44px minmax(0,1fr) 82px !important;
  align-items:center !important;
  gap:10px !important;
  padding:12px 16px !important;
}

.composer input{
  height:46px !important;
  min-height:46px !important;
}

.composer button{
  height:46px !important;
  min-height:46px !important;
  max-height:46px !important;
  align-self:center !important;
}

.composer .primary-btn.small{
  width:82px !important;
  padding:0 !important;
  display:grid !important;
  place-items:center !important;
}

.composer .icon-btn{
  width:46px !important;
  min-width:46px !important;
  height:46px !important;
}

.soft-empty{
  box-shadow:none;
}

@media (max-width:640px){
  .composer{
    height:70px !important;
    min-height:70px !important;
    max-height:70px !important;
    grid-template-columns:42px minmax(0,1fr) 68px !important;
    padding:10px !important;
  }
  .composer .primary-btn.small{
    width:68px !important;
  }
}


/* DM home / server visibility / default profile fixes */
.brand-button{
  width:48px;
  height:48px;
  padding:0;
  display:grid;
  place-items:center;
  background:transparent;
  border:0;
  box-shadow:none;
}
.brand-button:hover{
  background:rgba(255,255,255,.08);
  border-radius:16px;
}
.brand-button .rail-brand{
  width:48px;
  height:48px;
}
.topbar-actions.hidden,
#serverChannelsSection.hidden,
#composer.hidden,
#newChannelBtn.hidden{
  display:none !important;
}
#chatActions{
  flex:0 0 auto;
}
#chatActions button{
  min-width:68px;
}
.self-card img[src="/user-default.svg"],
.row-btn img[src="/user-default.svg"],
.big-avatar[src="/user-default.svg"]{
  background:#09090a;
  border:1px solid rgba(255,255,255,.10);
}


/* ---- UI refresh: cleaner chat list + discord-like structure without exact copy ---- */
:root{
  --bg0:#0b0c10;
  --bg1:#101116;
  --bg2:#151821;
  --bg3:#1c212c;
  --line:rgba(255,255,255,.08);
  --line2:rgba(255,255,255,.05);
  --text:#eef1f7;
  --muted:#8b90a1;
  --accent:#5865f2;
  --accent2:#6976ff;
  --danger:#ed4245;
}
body{background:#0a0b0f !important;color:var(--text) !important;}
.app-shell{background:#0a0b0f !important;grid-template-columns:72px 290px minmax(0,1fr) !important;height:100vh !important;}
.spaces-rail{background:#111216 !important;border-right:1px solid var(--line) !important;padding:12px 10px !important;gap:10px !important;}
.space-pill,.rail-action,.brand-button{background:#1a1d25 !important;border:1px solid var(--line2) !important;transition:.18s ease !important;}
.space-pill:hover,.rail-action:hover,.brand-button:hover{transform:translateY(-1px);background:#202431 !important;}
.space-pill.active{background:var(--accent) !important;box-shadow:0 0 0 1px rgba(255,255,255,.08) inset,0 10px 30px rgba(88,101,242,.25) !important;}
.sidebar{background:#111216 !important;border-right:1px solid var(--line) !important;}
.sidebar-header{padding:14px 16px !important;border-bottom:1px solid var(--line) !important;box-shadow:none !important;}
.kicker{color:#707791 !important;letter-spacing:.08em;text-transform:uppercase;font-size:11px !important;}
.sidebar-section{padding:12px 10px !important;gap:8px !important;}
.section-head h3{font-size:12px !important;text-transform:uppercase;letter-spacing:.08em;color:#7f8698 !important;}
.list{gap:2px !important;}
.row-btn{background:transparent !important;border:0 !important;border-radius:8px !important;padding:8px 10px !important;min-height:44px !important;}
.row-btn:hover{background:#191c24 !important;}
.row-btn.active{background:#242935 !important;}
.row-btn img{width:36px !important;height:36px !important;border-radius:50% !important;}
.row-meta b{font-size:14px !important;font-weight:600 !important;color:#f2f4fa !important;}
.row-meta small{font-size:12px !important;color:#8c93a6 !important;}
.self-card{background:#111216 !important;border-top:1px solid var(--line) !important;border-radius:0 !important;}
.self-card:hover{background:#191c24 !important;}
.topbar{background:#111216 !important;border-bottom:1px solid var(--line) !important;min-height:56px !important;padding:0 16px !important;gap:12px !important;}
.topbar #roomAvatar{width:34px !important;height:34px !important;border-radius:50% !important;}
.room-lockup h2{font-size:16px !important;font-weight:700 !important;}
.room-lockup p{font-size:12px !important;color:#8c93a6 !important;}
.search{background:#0b0c10 !important;border:1px solid var(--line) !important;border-radius:8px !important;height:36px !important;min-width:220px;}
.topbar-actions button{height:34px !important;padding:0 12px !important;border-radius:8px !important;background:#1a1d25 !important;border:1px solid var(--line2) !important;color:#f5f7fb !important;}
.topbar-actions .danger{background:#2a1719 !important;border-color:rgba(237,66,69,.25) !important;color:#ffb8bc !important;}
.content-grid{grid-template-columns:minmax(0,1fr) !important;background:#0f1117 !important;}
.right-rail{display:none !important;}
.message-panel{background:#0f1117 !important;}
.messages{padding:10px 0 24px !important;background:#0f1117 !important;}
.empty-chat,.empty-state{margin:auto !important;max-width:420px !important;text-align:center !important;color:#9ca3b4 !important;}
.empty-chat h3,.empty-state h2{font-size:22px !important;color:#f4f6fb !important;margin-bottom:8px !important;}
.msg{display:grid !important;grid-template-columns:40px minmax(0,1fr) !important;gap:12px !important;padding:2px 20px 2px 18px !important;border-radius:0 !important;position:relative !important;align-items:start !important;}
.msg:hover{background:rgba(255,255,255,.03) !important;}
.msg.system{display:block !important;padding:10px 22px !important;background:transparent !important;}
.system-line{display:flex;align-items:center;gap:10px;color:#8f96a9;font-size:14px;}
.system-icon{font-size:14px;opacity:.8;}
.msg .avatar{width:40px !important;height:40px !important;border-radius:50% !important;margin-top:2px !important;}
.msg-main{min-width:0;}
.msg-head{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px;margin-bottom:2px;}
.msg-name{font-size:15px;font-weight:700;color:#f2f4fa;}
.msg-time{color:#868da0;font-size:12px;}
.msg-edited,.msg-badge{font-size:11px;color:#9097aa;background:#1a1e28;border:1px solid var(--line2);border-radius:999px;padding:1px 7px;}
.reply-inline{display:flex;align-items:center;gap:6px;font-size:12px;color:#9097aa;margin-bottom:3px;min-width:0;}
.reply-inline small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.msg-body{font-size:15px;line-height:1.45;color:#d7dbea;white-space:normal;word-break:break-word;}
.msg.deleted .msg-body{opacity:.55;font-style:italic;}
.msg-reactions{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px;}
.reaction-chip{background:#171a22;border:1px solid var(--line);border-radius:999px;color:#d9deee;padding:2px 8px;font-size:12px;}
.message-actions{position:absolute;top:-10px;right:16px;display:none;gap:6px;padding:6px;background:#111216;border:1px solid var(--line);border-radius:10px;box-shadow:0 12px 30px rgba(0,0,0,.35);}
.msg:hover .message-actions{display:flex;}
.message-actions button{background:#1b1e27;border:1px solid var(--line2);border-radius:8px;color:#e7ebf7;padding:5px 8px;font-size:12px;}
.message-actions button:hover,.reaction-chip:hover{background:#242937;}
.reply-banner,.typing-line{padding-left:18px !important;padding-right:18px !important;background:#10131a !important;border-bottom:1px solid var(--line2) !important;color:#8f96a9 !important;}
.composer{background:#0f1117 !important;border-top:1px solid var(--line) !important;padding:14px 16px !important;grid-template-columns:44px minmax(0,1fr) 84px !important;height:76px !important;}
.composer input{background:#151821 !important;border:1px solid var(--line) !important;border-radius:8px !important;height:46px !important;padding:0 14px !important;color:#f1f3f9 !important;}
.composer .icon-btn,.composer .primary-btn.small{height:46px !important;border-radius:8px !important;}
.composer .icon-btn{background:#1a1d25 !important;border:1px solid var(--line2) !important;color:#cfd5e8 !important;}
.composer .primary-btn.small{background:var(--accent) !important;border:0 !important;color:#fff !important;font-weight:700 !important;}
.call-modal{background:rgba(0,0,0,.72) !important;backdrop-filter:blur(8px);}
.call-card{background:#111216 !important;border:1px solid var(--line) !important;border-radius:16px !important;max-width:840px !important;}
.call-top,.call-controls{background:#141821 !important;border-color:var(--line2) !important;}
.call-controls button{background:#1a1d25 !important;border:1px solid var(--line2) !important;color:#eff2fa !important;border-radius:10px !important;}
#endCallBtn{background:var(--danger) !important;color:#fff !important;border:0 !important;}
.video-stack{background:#0b0c10 !important;border-radius:14px !important;min-height:360px !important;}
#remoteVideo{background:#0b0c10 !important;}
#localVideo{background:#141821 !important;}
@media (max-width: 980px){
  .app-shell{grid-template-columns:64px minmax(0,1fr) !important;}
  .sidebar{position:fixed !important;left:64px;top:0;bottom:0;width:280px;transform:translateX(-120%);z-index:20;}
  .sidebar.open{transform:translateX(0);}
}

.inline-editor{display:flex;gap:8px;align-items:center;margin-top:6px}.inline-editor input{flex:1;background:#111217;border:1px solid rgba(255,255,255,.18);border-radius:10px;color:#fff;padding:9px 10px}.inline-editor button{border:1px solid rgba(255,255,255,.18);border-radius:10px;background:#1b1c22;color:#fff;padding:8px 10px;font-weight:800}


/* Final call/edit fixes */
#screenShareBtn.hidden{display:none !important;}
.call-modal{
  inset:auto 18px 18px auto !important;
  width:min(420px, calc(100vw - 36px)) !important;
  display:block !important;
  padding:0 !important;
  background:transparent !important;
  backdrop-filter:none !important;
  pointer-events:none !important;
}
.call-modal.hidden{display:none !important;}
.call-card{
  width:100% !important;
  max-width:none !important;
  padding:14px !important;
  border-radius:18px !important;
  background:#111216 !important;
  box-shadow:0 18px 50px rgba(0,0,0,.45) !important;
  pointer-events:auto !important;
}
.call-body{display:none !important;}
.call-top{padding:0 !important;background:transparent !important;border:0 !important;}
.call-controls,.incoming{justify-content:flex-start !important;flex-wrap:wrap !important;}
.inline-editor{display:flex;gap:8px;align-items:flex-start;margin-top:6px}
.inline-editor textarea{flex:1;min-height:42px;resize:vertical;background:#111217;border:1px solid rgba(255,255,255,.18);border-radius:10px;color:#fff;padding:9px 10px;font:inherit}
.inline-editor button{border:1px solid rgba(255,255,255,.18);border-radius:10px;background:#1b1c22;color:#fff;padding:8px 10px;font-weight:800}