/* Slack2 — palette sampled directly from the reference screenshots.
   topbar #5e3360 · rail #3f0e40 · sidebar #532855 · active pill #f9edff
   main #fff · ink #1d1c1d · muted #616061 · link #1264a3 · green #007a5a   */

:root{
  --topbar:#5e3360;
  --rail-top:#46164a; --rail-bottom:#390a3a;
  --aubergine:#3f0e40;
  --sidebar:#532855;
  --side-text:rgba(255,255,255,.78);
  --side-label:#b79bbb;
  --active-pill:#f9edff;
  --ink:#1d1c1d; --muted:#616061;
  --link:#1264a3; --green:#007a5a; --green-h:#148567;
  --border:#e4e4e4; --hover:#0000000d;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; display:flex; flex-direction:column; overflow:hidden; background:#fff;
  font-family:'Lato','Helvetica Neue',Helvetica,Arial,sans-serif; font-size:15px; color:var(--ink);
  -webkit-font-smoothing:antialiased;
}
button{font-family:inherit; cursor:pointer; border:none; background:none; color:inherit}
a{color:inherit; text-decoration:none}
img.av,img.dm-av,img.mem-av,img.reply-av{object-fit:cover; display:block}

/* ---- Top bar ---- */
.topbar{
  height:40px; flex:0 0 40px; background:var(--topbar); color:#fff;
  display:flex; align-items:center; gap:12px; padding:0 12px;
}
.tb-nav{display:flex; gap:2px}
.tb-nav button{width:26px; height:26px; border-radius:6px; color:#e3d4e4; font-size:15px}
.tb-nav button:hover{background:rgba(255,255,255,.12)}
.tb-search{
  flex:0 1 720px; margin:0 auto; height:28px; background:rgba(255,255,255,.12);
  border-radius:8px; display:flex; align-items:center; padding:0 12px;
  color:#e8dcea; font-size:13px;
}
.tb-right{display:flex; align-items:center}
.tb-right>*+*{margin-left:8px}
.tb-me{width:26px; height:26px; border-radius:7px; background:#1d8a5c; color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px}
.tb-right button{color:#e3d4e4}

/* ---- Workspace row ---- */
.workspace{flex:1; min-height:0; display:flex}

/* ---- Narrow rail ---- */
.rail{
  width:68px; flex:0 0 68px; background:linear-gradient(180deg,var(--rail-top),var(--rail-bottom));
  display:flex; flex-direction:column; align-items:center; gap:2px; padding:10px 0; color:#fff;
}
.rail-badge{width:38px; height:38px; border-radius:11px; background:#fff; color:#3f0e40;
  font-weight:900; font-size:14px; display:flex; align-items:center; justify-content:center; margin-bottom:8px}
.rail-icon{display:flex; flex-direction:column; align-items:center; width:52px; padding:7px 0;
  border-radius:9px; color:#e6d8e7; font-size:11px; font-weight:700}
.rail-icon .ri{font-size:17px; line-height:1; margin-bottom:3px}
.rail-icon:hover{background:rgba(255,255,255,.1); color:#fff}
.rail-icon.is-active{background:rgba(255,255,255,.22); color:#fff}
.rail-add{width:34px; height:34px; border-radius:50%; border:1.5px solid rgba(255,255,255,.35);
  color:#fff; font-size:16px; margin-top:6px}
.rail-me{margin-top:auto; width:32px; height:32px; border-radius:9px; background:#1d8a5c; color:#fff;
  font-weight:700; display:flex; align-items:center; justify-content:center; cursor:pointer}

/* ---- Sidebar ---- */
.sidebar{width:260px; flex:0 0 260px; background:var(--sidebar); display:flex; flex-direction:column}
.sidebar-head{height:50px; flex:0 0 50px; display:flex; align-items:center; padding:0 8px 0 16px;
  border-bottom:1px solid rgba(0,0,0,.18)}
.sidebar-head h1{font-size:18px; font-weight:900; color:#fff; margin:0; flex:1; cursor:pointer}
.sidebar-head .chev{font-size:13px}
.compose{width:30px; height:30px; border-radius:50%; background:#fff; color:#3f0e40; font-size:14px}
.sidebar-scroll{flex:1; overflow-y:auto; padding:8px 8px 24px}
.side-group{margin-bottom:14px}
.side-label{font-size:13px; color:var(--side-label); padding:4px 12px; font-weight:700}
.side-item{display:flex; align-items:center; padding:6px 12px; border-radius:6px;
  color:var(--side-text); font-size:15px; line-height:1.3; cursor:pointer}
.side-item:hover{background:rgba(255,255,255,.08)}
.side-item .ic{width:16px; text-align:center; opacity:.85; margin-right:8px}
.side-item.muted{color:var(--side-label)}
.side-name{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.side-item.is-active{background:var(--active-pill); color:var(--ink); font-weight:700}
.pill-num{margin-left:auto; background:rgba(255,255,255,.16); color:#fff; font-size:11px;
  padding:0 6px; border-radius:9px; font-weight:700}
.dm-av{width:20px; height:20px; border-radius:5px; flex:0 0 20px; font-size:9px; margin-right:8px}
.dm-emoji{font-size:13px}

/* ---- Main ---- */
.main{flex:1; min-width:0; display:flex; flex-direction:column; background:#fff; border-left:1px solid var(--border)}
.ch-head{height:50px; flex:0 0 50px; display:flex; align-items:center; justify-content:space-between;
  padding:0 16px; border-bottom:1px solid var(--border)}
.ch-title{display:flex; align-items:center; cursor:pointer}
.ch-hash{font-size:15px; margin-right:6px}
.ch-title h2{font-size:18px; font-weight:900; margin:0 6px 0 0}
.ch-chev{color:var(--muted); font-size:13px}
.ch-actions{display:flex; align-items:center}
.ch-actions>*+*{margin-left:6px}
.members{display:flex; align-items:center; background:#f4f4f4; border:1px solid var(--border); border-radius:8px; padding:2px 8px 2px 4px}
.mem-av{width:24px; height:24px; border-radius:6px; margin-left:-4px; border:2px solid #f4f4f4; font-size:10px}
.mem-av:first-child{margin-left:0}
.members-count{font-size:13px; font-weight:700; margin-left:6px}
.ch-btn{border:1px solid var(--border); border-radius:8px; padding:4px 10px; font-size:13px; font-weight:700}
.ch-ico{width:32px; height:32px; border-radius:8px; font-size:15px; color:#454447}
.ch-ico:hover,.ch-btn:hover{background:var(--hover)}
.ch-tabs{display:flex; gap:2px; padding:4px 12px; border-bottom:1px solid var(--border)}
.tab{padding:5px 10px; border-radius:7px; font-size:13px; color:var(--muted); font-weight:700}
.tab:hover{background:var(--hover)}
.tab.is-active{color:var(--ink)}

/* ---- Messages ---- */
.messages{flex:1; overflow-y:auto; padding:14px 0 8px}
.day-divider{display:flex; align-items:center; justify-content:center; margin:14px 16px; position:relative}
.day-divider::before{content:""; position:absolute; left:0; right:0; top:50%; height:1px; background:var(--border)}
.day-divider span{position:relative; background:#fff; border:1px solid var(--border); border-radius:999px;
  padding:3px 14px; font-size:13px; font-weight:700; color:#454447}
.msg{display:flex; padding:7px 20px}
.msg:hover{background:#f8f8f8}
.msg.grouped{padding-top:1px; padding-bottom:1px}
.av{width:36px; height:36px; flex:0 0 36px; border-radius:9px; font-weight:700; font-size:14px; color:#fff; margin-right:10px}
.av-letter{display:flex; align-items:center; justify-content:center}
.gutter-time{width:36px; flex:0 0 36px; font-size:11px; color:#9a9a9a; text-align:right; padding:3px 0 0; margin-right:10px; opacity:0}
.msg.grouped:hover .gutter-time{opacity:1}
.msg-body{min-width:0; flex:1}
.msg-head{display:flex; align-items:baseline; flex-wrap:wrap; margin-bottom:2px}
.msg-author{font-weight:900; font-size:15px; margin-right:8px}
.msg-author:hover{text-decoration:underline; cursor:pointer}
.msg-time{font-size:12px; color:var(--muted)}
.badge-ai{background:#4a154b; color:#fff; font-size:10px; font-weight:700; padding:1px 5px; border-radius:3px; margin-right:8px}
.badge-bot{width:16px; height:16px; border-radius:4px; vertical-align:middle; margin:-2px 8px 0 0}
.badge-app{background:#e8e8e8; color:#555; font-size:10px; font-weight:700; padding:1px 5px; border-radius:3px; margin-right:8px}
.msg-text{font-size:15px; line-height:1.5; white-space:pre-wrap; word-wrap:break-word}

/* reply / thread bar under a message */
.reply-bar{display:inline-flex; align-items:center; margin-top:6px; padding:4px 10px 4px 5px;
  border:1px solid transparent; border-radius:10px; cursor:pointer}
.reply-bar:hover{background:#fff; border-color:var(--border); box-shadow:var(--dt_static_shadow-sm,0 1px 2px #0000000c)}
.reply-avs{display:flex; margin-right:8px}
.reply-av{width:22px; height:22px; border-radius:6px; margin-left:-3px; border:2px solid #fff; font-size:9px}
.reply-av:first-child{margin-left:0}
.reply-count{color:var(--link); font-size:13px; font-weight:700; margin-right:8px}
.reply-last{color:var(--muted); font-size:12px}

/* ---- Composer: liquid glass ---- */
:root{
  --glass-spring:cubic-bezier(.34,1.56,.64,1);
}
.composer-wrap{padding:0 20px 24px; flex:0 0 auto}

.composer{
  position:relative; border-radius:18px; padding:2px;
  background:rgba(255,255,255,.55);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  backdrop-filter:blur(20px) saturate(180%);
  border:1px solid rgba(255,255,255,.7);
  box-shadow:0 14px 40px -14px rgba(63,16,64,.35), inset 0 1px 0 rgba(255,255,255,.9),
             inset 0 -1px 0 rgba(63,16,64,.05);
  overflow:hidden;
  transition:transform .45s var(--glass-spring), box-shadow .45s var(--glass-spring), background .35s ease;
}
.composer::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:radial-gradient(220px circle at var(--mx,50%) var(--my,0%),
    rgba(255,255,255,.65), rgba(255,255,255,0) 60%);
  opacity:var(--glow,.4); transition:opacity .4s ease; mix-blend-mode:screen;
}
.composer.focused, .composer:focus-within{
  transform:translateY(-3px);
  background:rgba(255,255,255,.68);
  box-shadow:0 22px 56px -14px rgba(63,16,64,.45), inset 0 1px 0 rgba(255,255,255,1);
  border-color:rgba(255,255,255,.85);
}

.composer-toolbar{position:relative; z-index:1; display:flex; align-items:center; gap:2px; padding:8px 10px 6px}
.tb-group{display:flex; align-items:center; gap:1px}
.tb-div{width:1px; height:18px; background:rgba(63,16,64,.14); margin:0 6px}
.tb-btn{width:28px; height:28px; border-radius:8px; color:#5a4a5c; display:flex; align-items:center; justify-content:center; font-size:14px;
  transition:transform .3s var(--glass-spring), background .2s ease, color .2s ease}
.tb-btn:hover{background:rgba(63,16,64,.08); color:var(--rail-top); transform:scale(1.12)}
.tb-btn:active{transform:scale(.88)}
.tb-b{font-weight:900} .tb-i{font-style:italic; font-weight:700} .tb-s{text-decoration:line-through; font-weight:700}
.cs{width:17px; height:17px; display:block}

.composer-input{position:relative; z-index:1; width:100%; border:none; outline:none; resize:none; padding:6px 12px 8px;
  background:transparent;
  font-family:inherit; font-size:15px; line-height:1.46; color:var(--ink); max-height:240px}
.composer-input::placeholder{color:#8d7a8f}

.composer-foot{position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; padding:4px 8px 8px}
.foot-left{display:flex; align-items:center; gap:1px}
.foot-plus{width:26px; height:26px; border-radius:50%; border:1px solid rgba(63,16,64,.2); color:#454447;
  display:flex; align-items:center; justify-content:center; margin-right:3px;
  transition:transform .3s var(--glass-spring), background .2s ease}
.foot-plus:hover{background:rgba(63,16,64,.08); transform:scale(1.15) rotate(90deg)}
.foot-div{width:1px; height:20px; background:rgba(63,16,64,.14); margin:0 5px}
.foot-btn{width:30px; height:30px; border-radius:9px; color:#5a4a5c; display:flex; align-items:center; justify-content:center;
  transition:transform .3s var(--glass-spring), background .2s ease, color .2s ease}
.foot-btn:hover{background:rgba(63,16,64,.08); color:var(--rail-top); transform:scale(1.18)}
.foot-btn:active{transform:scale(.86)}
.foot-btn .aa{font-weight:700; font-size:14px}

.send-group{position:relative; display:flex; align-items:center; border-radius:12px; overflow:hidden;
  background:linear-gradient(145deg,#b7aebb,#9c8fa0); box-shadow:0 4px 12px -4px rgba(63,16,64,.35);
  transition:transform .45s var(--glass-spring), background .35s ease, box-shadow .35s ease}
.send{width:34px; height:32px; display:flex; align-items:center; justify-content:center; color:#fff; position:relative; overflow:hidden}
.send .cs{width:18px; height:18px; transition:transform .4s var(--glass-spring)}
.send-sep{width:1px; height:20px; background:rgba(255,255,255,.45)}
.send-opt{width:22px; height:32px; display:flex; align-items:center; justify-content:center; color:#fff}
.send-opt .cs{width:15px; height:15px}
.send-group:not(.ready) .send-sep,.send-group:not(.ready) .send-opt{display:none}
.send-group.ready{background:linear-gradient(145deg,#16c79a,var(--green))}
.send-group.ready:hover{transform:scale(1.06); box-shadow:0 10px 22px -6px rgba(0,122,90,.55)}
.send-group.ready:active{transform:scale(.94)}
.send-group.pop{animation:sendPop .5s var(--glass-spring)}
@keyframes sendPop{0%{transform:scale(1)}40%{transform:scale(1.22) rotate(6deg)}100%{transform:scale(1)}}
.send-ripple{position:absolute; border-radius:50%; width:34px; height:34px; left:0; top:-1px;
  background:rgba(255,255,255,.55); transform:scale(0); pointer-events:none; animation:sendRipple .6s ease-out forwards}
@keyframes sendRipple{to{transform:scale(2.6); opacity:0}}

@media (prefers-reduced-motion:reduce){
  .composer,.composer::before,.tb-btn,.foot-btn,.foot-plus,.send-group,.send .cs{transition:none!important; animation:none!important}
}

/* ---- Thread panel ---- */
.thread{width:380px; flex:0 0 380px; background:#fff; border-left:1px solid var(--border); display:flex; flex-direction:column}
.thread[hidden]{display:none}
.thread-head{height:50px; flex:0 0 50px; display:flex; align-items:center; justify-content:space-between;
  padding:0 12px 0 16px; border-bottom:1px solid var(--border)}
.thread-head h3{font-size:17px; font-weight:900; margin:0}
.thread-body{flex:1; overflow-y:auto; padding:8px 0}
.thread-divider{display:flex; align-items:center; color:var(--muted); font-size:13px; padding:8px 20px}
.thread-divider::after{margin-left:10px}
.thread-divider::after{content:""; flex:1; height:1px; background:var(--border)}
.thread-composer{padding:8px 16px 16px}

/* ---- Mobile chrome: hidden on desktop ---- */
.m-header,.m-tabs,.m-fab,.m-jump,.m-stub{display:none}
.tb-fs{color:#e3d4e4}
.tb-fs .cs{width:16px;height:16px}

@media (max-width:900px) and (min-width:761px){ .thread{display:none} }

/* ============================ MOBILE ============================ */
@media (max-width:760px){
  body{flex-direction:column; background:var(--aubergine)}
  .topbar{display:none}

  /* --- top header (aubergine) --- */
  .m-header{display:block; background:var(--aubergine); color:#fff;
    padding-top:env(safe-area-inset-top); flex:0 0 auto}
  .mh-home,.mh-channel{display:none; align-items:center; height:52px; padding:0 12px}
  body.m-home .mh-home{display:flex}
  body.m-channel .mh-channel{display:flex}
  body.m-stub .mh-home{display:flex}
  .mh-badge{width:30px;height:30px;border-radius:8px;background:#fff;color:#3f0e40;font-weight:900;margin-right:10px;
    font-size:12px;display:flex;align-items:center;justify-content:center}
  .mh-title{flex:1;font-size:19px;font-weight:900;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .mh-ico{width:36px;height:36px;border-radius:8px;color:#fff;display:flex;align-items:center;justify-content:center}
  .mh-ico .cs{width:20px;height:20px}
  .mh-ico:active{background:rgba(255,255,255,.12)}
  .mh-back{width:30px;height:40px;color:#fff;font-size:30px;line-height:1;display:flex;align-items:center}
  .mh-ch{flex:1;text-align:center;line-height:1.15;overflow:hidden}
  .mh-ch-name{font-size:16px;font-weight:900;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .mh-ch-sub{font-size:12px;color:#e0cfe2}

  /* --- white rounded content sheet --- */
  .workspace{flex:1; min-height:0; display:block; position:relative; background:#fff;
    border-radius:16px 16px 0 0; margin-top:-2px; overflow:hidden}
  .rail{display:none}
  .sidebar,.main{position:absolute; inset:0; width:100%; flex:none; border:none; display:none}
  .sidebar{background:#fff; flex-direction:column}
  .main{flex-direction:column}
  body.m-home .sidebar{display:flex}
  body.m-channel .main{display:flex}
  body.m-stub .m-stub{display:flex}

  /* --- sidebar becomes a white channel list --- */
  .sidebar-head{display:none}
  .sidebar-scroll{padding:12px 8px 90px}
  .m-jump{display:flex; align-items:center; margin:4px 8px 14px; padding:10px 12px;
    background:#f4f3f4; border-radius:9px; color:#616061; font-size:15px}
  .m-jump .cs{width:17px;height:17px;margin-right:8px}
  .side-label{color:#616061; font-size:13px; padding:6px 14px 4px; font-weight:800}
  .side-item{color:#1d1c1d; font-size:16px; padding:10px 14px}
  .side-item .ic{opacity:1; color:#454447; width:18px; margin-right:12px}
  .side-item:active{background:#0000000d}
  .side-item.is-active{background:#f3eef4; color:#1d1c1d; font-weight:800}
  .side-item.muted{color:#616061}
  .pill-num{background:#e01e5a; color:#fff; min-width:18px; text-align:center}
  .dm-av{width:26px;height:26px;border-radius:7px;flex:0 0 26px;margin-right:12px}
  .dm-emoji{font-size:15px}

  /* --- channel view: drop desktop header/tabs (mobile header replaces them) --- */
  .ch-head,.ch-tabs{display:none}
  .messages{padding:10px 0 6px}
  .msg{padding:6px 14px}
  .av{width:38px;height:38px;flex:0 0 38px}
  .reply-bar{margin-left:0}

  /* --- mobile composer: glass, flush to the bottom edge --- */
  .composer-wrap,.thread-composer{padding:8px 10px calc(8px + env(safe-area-inset-bottom))}
  .composer{border-radius:16px; border:1px solid rgba(255,255,255,.7)}
  .composer.focused, .composer:focus-within{transform:translateY(-2px)}
  .composer-toolbar{display:none}
  .composer-input{padding:10px 12px 6px; font-size:16px}
  .composer-foot{padding:2px 8px 8px}
  .foot-plus,.foot-div,.foot-btn[title="Formatting"],.foot-btn[title="Emoji"]{display:none}
  .send-group.ready{background:linear-gradient(145deg,#16c79a,var(--green))}

  /* --- thread as full-screen overlay --- */
  .thread{position:fixed; inset:0; width:100%; flex:none; z-index:60;
    padding-top:env(safe-area-inset-top)}
  .thread-head{background:var(--aubergine)}
  .thread-head h3{color:#fff}
  .thread-head .ch-ico{color:#fff}

  /* --- compose FAB --- */
  body.m-home .m-fab{display:flex; position:fixed; right:16px; bottom:78px; z-index:40;
    width:52px;height:52px;border-radius:16px;background:var(--aubergine);color:#fff;
    align-items:center;justify-content:center;box-shadow:0 6px 16px #0005}

  /* --- bottom tab bar --- */
  .m-tabs{display:flex; flex:0 0 auto; background:#fff; border-top:1px solid var(--border);
    padding-bottom:env(safe-area-inset-bottom)}
  .m-tab{flex:1; display:flex; flex-direction:column; align-items:center;
    padding:8px 0 6px; color:#8b8b8b; font-size:11px; font-weight:600}
  .m-tab .cs{width:23px;height:23px;margin-bottom:3px}
  .m-tab.is-active{color:#1d1c1d; font-weight:800}
  .m-tab.is-active .cs{stroke-width:2}

  /* --- stub panel --- */
  .m-stub{position:absolute; inset:0; flex-direction:column; align-items:center; justify-content:center;
    color:#616061; text-align:center; padding:24px}
  .m-stub-ico{width:54px;height:54px;border-radius:50%;background:#f3eef4;display:flex;margin-bottom:8px;
    align-items:center;justify-content:center;color:#3f0e40}
  .m-stub-ico .cs{width:26px;height:26px}
  .m-stub-label{font-size:18px;font-weight:900;color:#1d1c1d}
  .m-stub-sub{font-size:14px}
}