/* ============================================================
   slack-kit.css — the Slack client, once, for every demo

   This is the only place a Slack surface is styled. Every demo
   that renders Slack links this file and adds nothing of its own
   for the client chrome, so the four stories cannot drift into
   four different-looking Slacks.

   The values are Priya's demo, which was the one measured against
   Slack Kit + the Cursor canvas: aubergine rail and sidebar, white
   message pane, 18px channel title, 15px message text.

   Colors are Slack Kit Foundations tokens (Light · Default) in
   Figma WEB syntax --dt_color-*, declared here with fallbacks so
   a demo that defines none of them still renders correctly.

   Two class vocabularies are supported on purpose. Priya's demo
   uses .slack/.rail/.side/.main/.mhead/.msgs/.nm/.tm; the demos
   built later use .sl/.slrail/.slside/.slmain/.slhd/.chan/.who/.ts.
   Both are bound to the same declarations rather than renamed in
   markup, which keeps each demo's JS templates untouched.
   ============================================================ */

:root{
  --dt_color-constants-white:#FFFFFF;
  --dt_color-plt-gray-0:#F8F8F8;
  --dt_color-plt-gray-5:#EAEAEA;
  --dt_color-plt-gray-10:#D7D7DA;
  --dt_color-plt-gray-50:#77757A;
  --dt_color-plt-gray-60:#5E5D60;
  --dt_color-plt-gray-100:#1D1C1D;
  --dt_color-plt-aubergine-80:#611F69;
  --dt_color-plt-aubergine-90:#4A154B;
  --dt_color-plt-aubergine-100:#39063A;
  --dt_color-plt-ocean-0:#E6F5FE;
  --dt_color-plt-ocean-70:#1264A3;
  --dt_color-otl-hgl-2:#007A5A;
  --dt_color-otl-hgl-3:#C79600;
  --dt_color-otl-imp:#E01E5A;
  --dt_color-content-pry:#1D1C1D;
  --sk-sidebar:#39063A;
  --sk-sidebar-sel:#1264A3;
  --sk-sidebar-fg:#F4DAFF;
  --sk-sidebar-dim:#cbb9cb;
}

/* ---------- client shell ------------------------------------
   Rail and sidebar are one aubergine field; the message pane is
   the only white surface. */

.slack, .sl{flex:1; display:flex; min-height:0; background:#fff;}

.rail, .slrail{
  width:70px; background:var(--sk-sidebar); flex:0 0 auto;
  display:flex; flex-direction:column; align-items:center;
  padding-top:12px; gap:14px; color:var(--sk-sidebar-fg);
}
.wsico, .slrail .w{
  width:38px; height:38px; border-radius:9px; background:#fff;
  color:var(--dt_color-plt-aubergine-80);
  font:900 15px Lato,sans-serif;
  display:flex; align-items:center; justify-content:center; flex:0 0 auto;
}
.ri, .slrail .ic{
  width:40px; display:flex; flex-direction:column; align-items:center; gap:3px;
  font:400 10px Lato,sans-serif; color:var(--sk-sidebar-dim); flex:0 0 auto;
}
.ri .rc{width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center;}
.ri.on{color:#fff;}
.ri.on .rc{background:rgba(255,255,255,.18); color:#fff;}
.ri svg{width:20px; height:20px;}
/* the later demos use a bare glyph in the rail rather than icon + caption */
.slrail .ic{width:36px; height:36px; border-radius:10px; justify-content:center; font-size:15px; background:rgba(255,255,255,.10);}

.side, .slside{
  width:250px; flex:0 0 auto; background:var(--sk-sidebar);
  color:var(--sk-sidebar-dim); display:flex; flex-direction:column;
  border-right:0; padding:0; font-size:15px;
}
.side .ws, .slside h4{
  color:#fff; font:900 18px Lato,sans-serif; padding:13px 16px 12px;
  border-bottom:1px solid rgba(255,255,255,.13);
  display:flex; align-items:center; gap:6px;
}
.sbar{
  margin:10px 12px 6px; background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.16); border-radius:8px; height:32px;
  display:flex; align-items:center; padding:0 10px; gap:8px;
  font-size:13.5px; color:var(--sk-sidebar-dim);
}
.grp{
  padding:10px 16px 3px; font:700 13px Lato,sans-serif;
  color:var(--sk-sidebar-dim); display:flex; align-items:center; gap:6px;
}
.it, .ch{
  padding:5px 16px 5px 18px; font-size:15px; color:var(--sk-sidebar-dim);
  display:flex; align-items:center; gap:8px; cursor:default;
}
.it.on, .ch.on{background:var(--sk-sidebar-sel); color:#fff; font-weight:700;}
.it .pre{width:16px; text-align:center; opacity:.85;}
.it .av{margin-right:0;}
.badge-n{
  margin-left:auto; background:var(--dt_color-otl-imp); color:#fff;
  font:900 11px Lato,sans-serif; min-width:18px; height:18px; border-radius:9px;
  display:none; align-items:center; justify-content:center; padding:0 5px;
}
.it.on .badge-n, .it.has-unseen .badge-n{display:inline-flex;}

.main, .slmain{flex:1; min-width:0; display:flex; flex-direction:column; background:#fff;}
.mhead, .slhd{
  height:49px; flex:0 0 auto; border-bottom:1px solid var(--dt_color-plt-gray-5);
  display:flex; align-items:center; padding:0 16px 0 20px; gap:6px;
}
.mhead .cn, .slhd .cn, .slhd b{font:900 18px Lato,sans-serif; display:flex; align-items:center; gap:5px;}
.mhead .hash{color:var(--dt_color-plt-gray-60); font-weight:400;}
.mm, .slhd .mem{
  display:flex; align-items:center; gap:4px; font:400 13px Lato,sans-serif;
  color:var(--dt_color-plt-gray-60); border:1px solid var(--dt_color-plt-gray-5);
  border-radius:20px; padding:3px 9px; margin-left:8px;
}
.rightic{margin-left:auto; display:flex; gap:14px; color:var(--dt_color-plt-gray-60);}
.rightic svg{width:18px; height:18px;}

.split, .slsplit, .slbody{flex:1; min-height:0; display:flex;}
.slcol{flex:1; min-width:0; display:flex; flex-direction:column;}
.msgs, .chan{flex:1; min-height:0; overflow:auto; padding:16px 20px 8px;}

.stamp{
  text-align:center; font:400 13px Lato,sans-serif;
  color:var(--dt_color-plt-gray-60); margin:8px 0 18px; position:relative;
  border-top:0;
}
.stamp:before, .stamp:after{
  content:""; position:absolute; top:50%;
  width:calc(50% - 80px); height:1px; background:var(--dt_color-plt-gray-5);
}
.stamp:before{left:0;}
.stamp:after{right:0;}
.stamp span{position:relative; z-index:1; background:#fff; padding:0 12px;}

/* ---------- message rows ------------------------------------ */

.msg{display:flex; gap:10px; margin-bottom:16px; padding:0; animation:sk-in .6s ease;}
@keyframes sk-in{from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;}}
.av{
  width:36px; height:36px; border-radius:8px; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font:900 14px Lato,sans-serif;
}
.av.bot{background:transparent; padding:0; overflow:hidden;}
.av img{width:100%; height:100%; object-fit:cover; display:block;}
.nm, .who{font:900 15px Lato,sans-serif;}
.app, .tag{
  font:700 10px Lato,sans-serif; background:var(--dt_color-plt-gray-5);
  color:var(--dt_color-plt-gray-60); border-radius:3px; padding:1px 5px;
  margin-left:6px; vertical-align:1px;
}
.tm, .ts{font:400 12px Lato,sans-serif; color:var(--dt_color-plt-gray-60); margin-left:7px;}
.txt{font-size:15px; line-height:1.46; margin-top:2px; max-width:660px;}
.mention{
  color:var(--dt_color-plt-ocean-70); background:var(--dt_color-plt-ocean-0);
  border-radius:3px; padding:0 3px; font-weight:700;
}

/* ---------- Block Kit card ----------------------------------
   Chrome only. Each demo still owns what goes inside it. */

.card{
  border:1px solid #e0e0e0; border-left:4px solid var(--dt_color-otl-imp);
  border-radius:8px; padding:12px 15px; margin-top:8px; max-width:560px; background:#fff;
}
.card.blue{border-left-color:var(--dt_color-plt-ocean-70);}
.card.green, .card.ok{border-left-color:var(--dt_color-otl-hgl-2);}
.card.amber, .card.warn{border-left-color:var(--dt_color-otl-hgl-3);}
.card h5{font:900 15px Lato,sans-serif; margin-bottom:6px; display:flex; align-items:center; gap:7px;}

.btns{display:flex; gap:8px; margin-top:11px; flex-wrap:wrap;}
.btn{
  font:700 14px Lato,sans-serif; padding:9px 14px; border-radius:4px;
  border:1px solid #ddd; background:#fff; color:var(--dt_color-content-pry);
  cursor:pointer; text-align:left;
}
.btn:hover, .btn.hovering{background:var(--dt_color-plt-gray-0);}
.btn.primary{background:var(--dt_color-otl-hgl-2); color:#fff; border-color:var(--dt_color-otl-hgl-2);}
.btn.primary:hover, .btn.primary.hovering{filter:brightness(1.08);}
.btn.pressing{transform:scale(.97); filter:brightness(.92);}
.btn.primary.pressing{filter:brightness(.88);}
.btn:disabled{opacity:.45; cursor:default;}

/* suggestion chips sit in a bar under the channel; when a demo puts them
   inside a message instead, they tuck under that message's text */
.sugs{display:flex; gap:8px; padding:0 20px 10px; flex-wrap:wrap;}
.msg .sugs{padding:8px 0 0;}
.sug{
  font:700 12.5px Lato,sans-serif; padding:5px 10px; border-radius:16px; cursor:pointer;
  border:1px solid var(--dt_color-plt-gray-10); background:#fff; color:var(--dt_color-plt-ocean-70);
}

.typing{
  display:flex; gap:10px; margin-bottom:12px; align-items:center;
  font-size:13px; color:var(--dt_color-plt-gray-60);
}
.dots{display:flex; gap:4px;}
.dots i{width:6px; height:6px; border-radius:50%; background:#9A9A9F; animation:sk-b 1.4s infinite;}
.dots i:nth-child(2){animation-delay:.15s;}
.dots i:nth-child(3){animation-delay:.3s;}
@keyframes sk-b{0%,80%,100%{opacity:.25; transform:translateY(0);} 40%{opacity:1; transform:translateY(-3px);}}

/* ---------- composer ----------------------------------------
   Slack's composer is a bordered card inside the message pane
   with 20px gutters, not flush to the edge. Formatting bar on
   top, action row underneath, and the send button only turns
   green once there is something to send. */

.sk-composer{
  flex:0 0 auto; margin:0 20px 20px;
  border:1px solid rgba(29,28,29,.3); border-radius:8px;
  background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.04);
  font-family:inherit;
}
.sk-composer:focus-within{border-color:rgba(29,28,29,.5); box-shadow:0 0 0 1px rgba(29,28,29,.15);}

.sk-fmt{
  display:flex; align-items:center; gap:2px; padding:5px 8px;
  border-bottom:1px solid var(--dt_color-plt-gray-5,#EAEAEA);
}
.sk-ic{
  width:28px; height:28px; border:0; background:transparent; cursor:pointer;
  border-radius:4px; color:var(--dt_color-plt-gray-60,#5E5D60);
  display:flex; align-items:center; justify-content:center;
  font:400 13.5px/1 Lato,-apple-system,sans-serif;
}
.sk-ic:hover{background:var(--dt_color-plt-gray-0,#F8F8F8); color:var(--dt_color-content-pry,#1D1C1D);}
.sk-ic.b{font-weight:900;}
.sk-ic.i{font-style:italic;}
.sk-ic.s{text-decoration:line-through;}
.sk-ic.code{font-family:ui-monospace,Menlo,monospace; font-size:12px;}
.sk-div{width:1px; height:18px; background:var(--dt_color-plt-gray-5,#EAEAEA); margin:0 5px;}

.sk-composer textarea{
  display:block; width:100%; border:0; resize:none; outline:none;
  padding:9px 12px; min-height:40px; max-height:120px;
  font:15px/1.46 Lato,-apple-system,BlinkMacSystemFont,sans-serif;
  color:var(--dt_color-content-pry,#1D1C1D); background:transparent;
}
.sk-composer textarea::placeholder{color:var(--dt_color-plt-gray-50,#77757A);}

.sk-tools{display:flex; align-items:center; gap:2px; padding:5px 8px 7px;}
.sk-tools .sk-spacer{flex:1;}
.sk-send{
  min-width:32px; height:28px; padding:0 8px; border:0; border-radius:4px; cursor:default;
  background:transparent; color:var(--dt_color-plt-gray-50,#77757A);
  display:flex; align-items:center; justify-content:center; gap:4px;
  font:400 13px Lato,sans-serif;
}
.sk-send svg{width:16px; height:16px;}
.sk-send.on{background:var(--dt_color-otl-hgl-2,#007A5A); color:#fff; cursor:pointer;}
.sk-send.on:hover{filter:brightness(1.1);}

/* ---------- reply affordance under a channel message --------
   Overlapping avatar stack, reply count as a blue link, and the
   recency of the last reply. "View thread" replaces the recency
   on hover — which is why threads read as quiet until you go
   looking for them. */

.sk-replies{
  display:flex; align-items:center; gap:8px; margin-top:7px;
  padding:3px 6px 3px 3px; border:1px solid transparent; border-radius:6px;
  cursor:pointer; max-width:520px;
}
.sk-replies:hover{background:#fff; border-color:var(--dt_color-plt-gray-5,#EAEAEA); box-shadow:0 1px 2px rgba(0,0,0,.05);}
.sk-ravs{display:flex; align-items:center;}
.sk-rav{
  width:24px; height:24px; border-radius:6px; margin-right:-3px;
  border:2px solid #fff; overflow:hidden; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font:900 10px Lato,sans-serif;
}
.sk-rav img{width:100%; height:100%; object-fit:cover; display:block;}
.sk-rn{font:700 13px Lato,sans-serif; color:var(--dt_color-plt-ocean-70,#1264A3);}
.sk-replies:hover .sk-rn{text-decoration:underline;}
.sk-rlast{font:400 12.5px Lato,sans-serif; color:var(--dt_color-plt-gray-60,#5E5D60);}
.sk-replies:hover .sk-rlast{display:none;}
.sk-rview{display:none; font:400 12.5px Lato,sans-serif; color:var(--dt_color-plt-gray-60,#5E5D60);}
.sk-replies:hover .sk-rview{display:inline;}

/* ---------- thread pane ------------------------------------- */

.sk-thread{
  width:0; flex:0 0 auto; overflow:hidden; background:#fff; border-left:0;
  display:flex; flex-direction:column; min-height:0;
  transition:width .42s cubic-bezier(.2,.7,.3,1);
}
.sk-thread.open{width:400px; border-left:1px solid var(--dt_color-plt-gray-5,#EAEAEA);}
.sk-thh{
  flex:0 0 auto; height:50px; border-bottom:1px solid var(--dt_color-plt-gray-5,#EAEAEA);
  display:flex; align-items:center; padding:0 8px 0 18px; gap:8px;
}
.sk-tht{font:900 17px Lato,sans-serif; color:var(--dt_color-content-pry,#1D1C1D);}
.sk-thc{font:400 13px Lato,sans-serif; color:var(--dt_color-plt-gray-60,#5E5D60);}
.sk-thx{
  margin-left:auto; width:30px; height:30px; border:0; background:transparent;
  border-radius:6px; cursor:pointer; color:var(--dt_color-plt-gray-60,#5E5D60);
  font-size:17px; line-height:1;
}
.sk-thx:hover{background:var(--dt_color-plt-gray-0,#F8F8F8); color:var(--dt_color-content-pry,#1D1C1D);}
.sk-tbody{flex:1; min-height:0; overflow:auto; padding:14px 18px 8px;}

/* the "N replies" divider Slack draws between parent and replies */
.sk-tdiv{
  display:flex; align-items:center; gap:10px; margin:6px 0 12px;
  font:400 13px Lato,sans-serif; color:var(--dt_color-plt-gray-60,#5E5D60);
}
.sk-tdiv:after{content:''; flex:1; height:1px; background:var(--dt_color-plt-gray-5,#EAEAEA);}

/* thread composer, including the broadcast checkbox that exists
   only in threads — the detail that makes a thread read as one */
.sk-tfoot{flex:0 0 auto; padding:0 16px 14px;}
.sk-tfoot .sk-composer{margin:0;}
.sk-broadcast{
  display:flex; align-items:center; gap:7px; margin-top:9px;
  font:400 12.5px Lato,sans-serif; color:var(--dt_color-plt-gray-60,#5E5D60); cursor:pointer;
}
.sk-broadcast input{width:14px; height:14px; accent-color:var(--dt_color-plt-ocean-70,#1264A3); cursor:pointer;}

.sk-tnote{
  flex:0 0 auto; margin:0 16px 14px; padding:8px 10px; border-radius:6px;
  background:var(--dt_color-plt-gray-0,#F8F8F8); color:var(--dt_color-plt-gray-60,#5E5D60);
  font:400 12px/1.45 Lato,sans-serif;
}