/* ============ Slack panel ============ */
#screen-slack{background:#1a1d21;}
#slack-frame{flex:1; min-height:0; display:flex; flex-direction:column; width:min(760px,100%);
  margin:0 auto; background:#fff;}
#slack-top{background:var(--aubergine); color:#fff; padding:10px 16px; display:flex; align-items:center; gap:10px;
  border-bottom:3px solid #2a082b; flex-wrap:wrap;}
#slack-chan{font-weight:bold; font-size:16px;}
#slack-chan::before{content:'#'; opacity:.6; margin-right:2px;}
#slack-frame #slack-chan.dm::before{content:'@'; opacity:.7;} /* DMs get @, and it outranks the Teams ⌂ */
#slack-topic{font-size:12px; opacity:.75; flex:1; min-width:120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}

/* ============ the left bar: channels & DMs ============ */
#slack-body{flex:1; min-height:0; display:flex; position:relative;}
#slack-main{flex:1; min-width:0; display:flex; flex-direction:column;}
#slack-burger{display:none; background:none; border:none; color:#fff; font-size:19px; line-height:1; padding:2px 8px 4px 2px;}
#slack-side{width:188px; flex:none; background:var(--aubergine); border-right:3px solid #2a082b;
  color:#cfc3cf; overflow-y:auto; padding:10px 0 16px; font-size:13.5px;}
.ss-ws{font-weight:900; color:#fff; font-size:14px; padding:2px 14px 10px; border-bottom:1px solid rgba(255,255,255,.14); margin-bottom:8px;}
.ss-sec{font-size:10.5px; letter-spacing:.09em; opacity:.6; padding:8px 14px 4px; font-weight:bold;}
.ss-item{display:flex; align-items:center; gap:7px; padding:5px 14px; cursor:pointer; color:#cfc3cf; position:relative;}
.ss-item:hover{background:rgba(255,255,255,.08);}
.ss-item .ss-pre{opacity:.6; font-weight:bold;}
.ss-item .ss-dot{width:9px; height:9px; border-radius:50%; flex:none; border:1.5px solid rgba(0,0,0,.3);}
.ss-item .ss-n{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.ss-item .ss-badge{font-size:10.5px; font-weight:900; background:#b3234b; color:#fff; border-radius:999px; padding:1px 7px;}
.ss-item.active{background:#1164a3; color:#fff; font-weight:bold;}
.ss-item.story .ss-n{color:#fff; font-weight:900;}
.ss-item.story::after{content:'⭐'; font-size:11px; animation:sspulse 1.4s infinite;}
@keyframes sspulse{0%,100%{opacity:.55; transform:scale(1);} 50%{opacity:1; transform:scale(1.25);}}
#slack-sidedim{display:none;}
/* portrait / narrow: the bar tucks behind the ☰ like the real app */
@media (orientation:portrait),(max-width:660px){
  #slack-burger{display:block;}
  #slack-side{position:absolute; left:0; top:0; bottom:0; z-index:6; transform:translateX(-103%);
    transition:transform .22s ease; box-shadow:6px 0 22px rgba(0,0,0,.35); width:min(228px,78vw);}
  #slack-side.open{transform:none;}
  #slack-sidedim.open{display:block; position:absolute; inset:0; z-index:5; background:rgba(0,0,0,.38);}
}
/* browsing another channel: the live thread hides but keeps playing underneath */
#slack-main.browsing #slack-msgs,#slack-main.browsing #slack-choices,
#slack-main.browsing #slack-skip,#slack-main.browsing #slack-next{display:none;}
#slack-static{flex:1; min-height:0; overflow-y:auto; padding:14px 14px 8px; background:#fff;
  display:flex; flex-direction:column; gap:2px;}
#slack-static.hidden{display:none;}
.ss-begin{color:#9a9a9a; font-size:12.5px; font-style:italic; padding:4px 8px 10px; border-bottom:1.5px dashed #e4e4e4; margin-bottom:8px;}
.ss-return{margin-top:10px; color:#8a6d1f; background:#fff6dd; border:1.5px solid #ecd9a0; border-radius:8px;
  padding:8px 12px; font-size:12.5px; font-weight:bold;}

#slack-msgs{flex:1; min-height:0; overflow-y:auto; padding:14px 14px 8px; display:flex; flex-direction:column; gap:2px;
  background:#fff;}
.smsg{display:flex; gap:10px; padding:6px 8px; border-radius:8px; animation:msgin .25s ease;}
.smsg:hover{background:#f8f8f8;}
@keyframes msgin{from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;}}
.savatar{width:38px; height:38px; border-radius:9px; flex:none; display:flex; align-items:center; justify-content:center;
  font-size:20px; border:2px solid rgba(0,0,0,.25); box-shadow:inset 0 -3px 0 rgba(0,0,0,.15);}
.sbody{flex:1; min-width:0;}
.shead{display:flex; align-items:baseline; gap:8px; flex-wrap:wrap;}
.sname{font-weight:900; font-size:14.5px; color:#1d1c1d;}
.srole{font-size:10.5px; color:#fff; background:#8a8a8a; padding:1px 6px; border-radius:4px; letter-spacing:.04em;}
.stime{font-size:11px; color:#9a9a9a;}
.stext{font-size:14.5px; line-height:1.45; color:#232323; overflow-wrap:break-word;}
.stext .mention{color:#1264a3; background:#e8f5fa; border-radius:3px; padding:0 3px; font-weight:bold;}
.stext code{font-family:var(--mono); font-size:12.5px; background:#f6f3f6; border:1px solid #e0dce0; border-radius:4px; padding:1px 4px; color:#c22f4d;}
.sreacts{display:flex; gap:6px; margin-top:5px; flex-wrap:wrap;}
.sreact{display:inline-flex; align-items:center; gap:5px; font-size:12px; background:#eef3f8; border:1.5px solid #cfe0ee;
  color:#1264a3; font-weight:bold; border-radius:999px; padding:2px 9px; animation:reactin .3s cubic-bezier(.5,1.8,.6,1);}
@keyframes reactin{from{transform:scale(.3); opacity:0;} to{transform:scale(1); opacity:1;}}
.simg{margin-top:6px; width:min(240px,70%); height:130px; border-radius:8px; border:1.5px solid #ddd; position:relative; overflow:hidden;}
.simg .blur{position:absolute; inset:-12px; filter:blur(7px) saturate(1.2);}
.simg .cap{position:absolute; left:6px; bottom:5px; background:rgba(0,0,0,.6); color:#fff; font-size:10px;
  font-family:var(--mono); padding:2px 6px; border-radius:4px;}
.styping{display:flex; gap:10px; padding:6px 8px; align-items:center; color:#9a9a9a; font-size:13px; font-style:italic;}
.tdots{display:inline-flex; gap:3px; margin-left:4px;}
.tdots i{width:6px; height:6px; border-radius:50%; background:#b9b9b9; animation:tb 1s infinite;}
.tdots i:nth-child(2){animation-delay:.15s;} .tdots i:nth-child(3){animation-delay:.3s;}
@keyframes tb{0%,60%,100%{transform:none; opacity:.5;} 30%{transform:translateY(-4px); opacity:1;}}
#slack-choices{padding:10px 14px 4px; background:#fff; border-top:1.5px dashed #e0e0e0; display:flex; flex-direction:column; gap:8px;}
#slack-choices .sc-label{font-size:10.5px; color:#9a9a9a; letter-spacing:.08em; font-weight:bold;}
.schoice{text-align:left; background:#fff; border:1.5px solid #007a5a; color:#007a5a; font-weight:bold;
  font-size:13.5px; border-radius:10px; padding:10px 13px; animation:msgin .25s; line-height:1.35;}
.schoice:hover{background:#e9f6f1;}
.schoice:active{transform:translateY(1px);}
#slack-foot{padding:10px 14px; background:#fff; border-top:1.5px solid #e8e8e8; display:flex; gap:10px; align-items:center;}
#slack-fake-input{flex:1; border:1.5px solid #d0d0d0; border-radius:8px; padding:9px 12px; color:#aaa; font-size:13.5px;
  overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
#slack-next{background:#007a5a; color:#fff; border:none; border-radius:8px; font-weight:bold; font-size:14px;
  padding:10px 18px; animation:nudge 1.6s infinite;}
#slack-next:active{transform:translateY(1px);}
@keyframes nudge{0%,100%{transform:none;} 50%{transform:translateY(-2px);}}
#slack-skip{background:none; border:none; color:#9a9a9a; font-size:12px; text-decoration:underline; padding:8px;}

/* ============ Teams era (day 15+) — everything is purple now ============ */
#slack-frame.teams #slack-top{background:#464775; border-bottom-color:#33345a;}
#slack-frame.teams #slack-side{background:#33344a; border-right-color:#262738;}
#slack-frame.teams .ss-item.active{background:#5b5fc7;}
#slack-frame.teams .ss-item .ss-badge{background:#c4314b;}
#slack-frame.teams #slack-chan::before{content:'⌂'; opacity:.7; margin-right:5px;}
#slack-frame.teams .savatar{border-radius:50%;}
#slack-frame.teams .sreact{background:#f0f0fa; border-color:#c7c7e8; color:#5b5fc7;}
#slack-frame.teams #slack-next{background:#5b5fc7;}
#slack-frame.teams .schoice{border-color:#5b5fc7; color:#5b5fc7;}
#slack-frame.teams .schoice:hover{background:#f0f0fa;}
#slack-frame.teams .stext .mention{color:#5b5fc7; background:#f0f0fa;}