/* ============================================================================
   Slack window — #win-slack
   2026-08-09: redesigned to a lavender "org chat" look (was the dark-aubergine
   Slack replica). Message/thread/reaction/composer DOM and class names are
   UNCHANGED from the previous version — slack.js depends on them — only the
   surrounding chrome (titlebar, sidebar → DM list, tabs) and the palette
   changed. Every selector is still prefixed .slack- / #win-slack.
   ========================================================================== */

#win-slack {
  height: min(60vh, var(--desk-band));
  min-height: 340px;
  cursor: default;      /* only the title bar is a drag handle */
  touch-action: auto;   /* the conversation must stay touch-scrollable */
}

.slack-chrome {
  --slack-line: #000000;
  --slack-titlebar: #CCCEFF;
  --slack-panel: #CCCEFF;
  --slack-panel-active: #BEC1F9;
  --slack-accent: #C519F0;
  --slack-accent-tint: #F3D1FF;
  --slack-cream: #FFFAF2;
  --slack-ink: #1D1C1D;
  --slack-muted: #68667A;
  --slack-hair: #D7D5F5;

  display: flex;
  flex-direction: column;
  height: 100%;
  /* Containing block for .slack-toast, centred against this box. */
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid var(--slack-line);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--slack-ink);
  -webkit-font-smoothing: antialiased;
}

/* ---------- Title bar (drag handle) ---------- */
.slack-titlebar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  padding: 10px 16px;
  background: var(--slack-titlebar);
  border-bottom: 1px solid var(--slack-line);
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.window.dragging .slack-titlebar { cursor: grabbing; }

.slack-logo-bubble { display: flex; flex: 0 0 auto; }
.slack-logo-bubble svg { width: 34px; height: 29px; display: block; }

.slack-titlebar-spacer { flex: 1 1 auto; }

.slack-org {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
}

.slack-org-label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--slack-ink);
}

.slack-org-logo { width: 44px; height: 14px; display: block; }

.slack-org-avatar {
  width: 22px;
  height: 22px;
  border-radius: 32%;
  border: 1px solid var(--slack-line);
  flex: 0 0 auto;
}

/* ---------- Body: DM list + main ---------- */
.slack-body {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  background: #ffffff;
}

/* ---------- Left pane: Direct Messages list ---------- */
.slack-sidebar {
  /* Window is conceptually a 13-column grid: DM list 4 / main 9 */
  flex: 0 0 30.7692%;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
  background: var(--slack-panel);
  border-right: 1px solid var(--slack-line);
  color: var(--slack-ink);
  scrollbar-width: none; /* Firefox */
}
.slack-sidebar::-webkit-scrollbar { display: none; } /* Chrome/Safari */

.slack-dm-heading {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  flex: 0 0 auto;
  /* Matches the combined height of .slack-convo-header + .slack-tabs on the
     right, measured in-browser, so the divider below lines up with the one
     under the Messages/Files/Notes tabs. */
  height: 77px;
  box-sizing: border-box;
  padding: 12px 14px 0;
  border-bottom: 1px solid var(--slack-line);
  font-size: 13.5px;
  font-weight: 800;
}

/* Collapse arrow + the "Unread" filter chip share a row under the heading,
   the way Slack's own DM list header reads. */
.slack-dm-heading-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.slack-dm-arrow { width: 12px; height: 12px; display: block; flex: none; }

.slack-dm-unread {
  flex: none;
  padding: 2px 9px;
  border: 1px solid var(--slack-line);
  border-radius: 6px;
  background: var(--slack-panel, #FFFFFF);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.5;
  color: #000;
}

.slack-dm-list { list-style: none; margin: 0; padding: 0; }

.slack-dm-item {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 9px 14px;
  border-top: 1px solid var(--slack-hair);
  cursor: default;
}

.slack-dm-item:hover { background: rgba(255, 255, 255, 0.5); }

.slack-dm-item.slack-dm-active { background: var(--slack-panel-active); }

.slack-dm-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 32%;
  border: 1px solid var(--slack-line);
  font-size: 10.5px;
  font-weight: 700;
  color: var(--slack-ink);
}

.slack-dm-avatar-cluster { display: flex; flex: 0 0 auto; width: 32px; }

.slack-dm-avatar-cluster i {
  width: 22px;
  height: 22px;
  border-radius: 32%;
  border: 1px solid var(--slack-panel);
  margin-left: -9px;
}

.slack-dm-avatar-cluster i:first-child { margin-left: 0; }

.slack-dm-text { min-width: 0; flex: 1 1 auto; }

.slack-dm-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
}

.slack-dm-name {
  font-size: 12.5px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.slack-dm-time {
  flex: 0 0 auto;
  font-size: 10.5px;
  font-weight: 500;
  color: var(--slack-muted);
}

.slack-dm-preview {
  margin: 2px 0 0;
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--slack-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------- Main column ---------- */
.slack-main {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  background: #ffffff;
}

.slack-convo-header {
  display: flex;
  align-items: center;
  gap: 9px;
  flex: 0 0 auto;
  padding: 12px 16px 8px;
  background: var(--slack-panel);
}

.slack-convo-star { width: 16px; height: 16px; flex: 0 0 auto; }

.slack-convo-name {
  font-size: 15px;
  font-weight: 800;
  color: var(--slack-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- Tabs: folder-tab boxes sitting on a shelf line. The active tab's
   own bottom edge is painted the same white as .slack-scroll and pulled down
   1px on top of the shelf line, erasing that segment so it reads as open/
   connected to the content below; inactive tabs keep their shelf-line
   segment, reading as separate closed boxes. ---------- */
.slack-tabs {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  flex: 0 0 auto;
  padding: 8px 10px 0;
  background: var(--slack-panel);
  border-bottom: 1px solid var(--slack-line);
}

.slack-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  margin-bottom: -1px;
  border: 1px solid var(--slack-line);
  border-radius: 8px 8px 0 0;
  background: #ffffff;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--slack-muted);
  cursor: pointer;
}

.slack-tab svg { width: 14px; height: 14px; display: block; }

.slack-tab:hover { color: var(--slack-ink); }

.slack-tab.is-active {
  color: var(--slack-ink);
  border-bottom-color: #ffffff;
  position: relative;
  z-index: 1;
}

/* ---------- Conversation scroller ---------- */
.slack-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  /* No top padding: it would offset where .slack-divider's top:0 sticks,
     leaving a permanent gap above the pinned pill while scrolling.
     .slack-intro already carries its own top padding for the initial inset. */
  padding: 0 0 16px;
  background: #ffffff;
  scrollbar-width: thin;
  scrollbar-color: var(--slack-hair) transparent;
}

.slack-scroll::-webkit-scrollbar { width: 9px; }
.slack-scroll::-webkit-scrollbar-thumb { background: var(--slack-hair); border-radius: 5px; }

/* ---------- Beginning-of-conversation intro ---------- */
.slack-intro { padding: 8px 18px 14px; }

.slack-intro-cluster {
  display: flex;
  margin-bottom: 12px;
}

.slack-intro-av {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 32%;
  border: 1px solid #ffffff;
  margin-left: -10px;
  font-size: 13px;
  font-weight: 700;
  color: var(--slack-ink);
}

.slack-intro-av:first-child { margin-left: 0; }

.slack-intro-name {
  font-size: 19px;
  font-weight: 800;
  line-height: 1.3;
  color: var(--slack-ink);
  margin-bottom: 6px;
}

.slack-intro-copy {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--slack-muted);
  margin-bottom: 3px;
}

.slack-intro-copy strong { color: var(--slack-accent); font-weight: 700; }

.slack-intro-muted { color: #8d8c8e; }

.slack-link {
  color: var(--slack-accent);
  text-decoration: none;
}

.slack-link:hover { text-decoration: underline; }

/* ---------- System messages ---------- */
.slack-system {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 6px 18px 6px 18px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--slack-muted);
}

.slack-system-glyph {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 26px;
  color: #8d8c8e;
}

.slack-system-glyph svg { width: 14px; height: 14px; display: block; }

.slack-system-text strong { color: var(--slack-ink); font-weight: 700; }

/* ---------- Date divider ---------- */
/* Sticky at the top of the scrollport, as in Slack. No top padding/margin —
   either would sit inside the sticky box and show as a blank gap between the
   scrollport's top edge and the pill while stuck. Bottom padding is safe
   since it's below the pinned box, not above it. */
.slack-divider {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 4px;
  padding: 0 18px 8px;
  background: #ffffff;
}

.slack-divider::before,
.slack-divider::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--slack-hair);
}

.slack-divider-pill {
  flex: 0 0 auto;
  margin: 0 10px;
  padding: 3px 13px;
  border: 1px solid var(--slack-line);
  border-radius: 999px;
  background: #ffffff;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.12);
  font-size: 11.5px;
  font-weight: 700;
  color: var(--slack-ink);
  white-space: nowrap;
}

/* ---------- Messages ---------- */
.slack-msg {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 6px 18px 7px;
}

.slack-msg:hover { background: #FAFAFF; }

.slack-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 32%;
  border: 1px solid var(--slack-line);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--slack-ink);
  user-select: none;
}

.slack-msg-body {
  flex: 1 1 auto;
  min-width: 0;
}

.slack-msg-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 1px;
}

.slack-msg-name {
  font-size: 13px;
  font-weight: 800;
  color: var(--slack-ink);
}

.slack-msg-time {
  font-size: 11px;
  font-weight: 400;
  color: #8d8c8e;
}

.slack-text {
  font-size: 12.8px;
  line-height: 1.55;
  color: var(--slack-ink);
  margin: 0 0 2px;
  overflow-wrap: anywhere;
}

.slack-text-strong { font-weight: 700; }

.slack-list {
  margin: 4px 0 4px 18px;
  padding: 0;
  font-size: 12.8px;
  line-height: 1.55;
  color: var(--slack-ink);
}

.slack-list li { margin-bottom: 2px; }

.slack-mention {
  padding: 0 2px;
  border-radius: 3px;
  background: var(--slack-accent-tint);
  color: var(--slack-accent);
  font-weight: 500;
}

.slack-mention-channel {
  background: #FDF0DC;
  color: #A85C00;
  font-weight: 700;
}

/* ---------- Reactions ---------- */
.slack-reactions {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 5px;
}

.slack-reaction {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 1px 8px;
  border: 1px solid var(--slack-hair);
  border-radius: 999px;
  background: #ffffff;
  font-family: inherit;
  font-size: 11px;
  line-height: 18px;
  color: var(--slack-muted);
  cursor: pointer;
}

.slack-reaction:hover { border-color: var(--slack-accent); }

.slack-reaction-emoji { font-size: 12px; line-height: 1; }

.slack-reaction-count { font-weight: 700; }

.slack-reaction.slack-reacted {
  border-color: var(--slack-accent);
  background: var(--slack-accent-tint);
  color: var(--slack-accent);
}

.slack-reaction-add {
  padding: 1px 7px;
  color: #8d8c8e;
}

.slack-reaction-add svg { width: 14px; height: 14px; display: block; }

/* ---------- Threads ---------- */
.slack-thread { margin-top: 4px; }

.slack-thread-toggle {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 3px 8px 3px 3px;
  margin-left: -3px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: none;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
}

.slack-thread-toggle:hover {
  border-color: var(--slack-hair);
  background: #ffffff;
}

.slack-thread-avs { display: flex; flex: 0 0 auto; }

.slack-thread-avs i {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 19px;
  height: 19px;
  border-radius: 32%;
  margin-right: 3px;
  font-size: 7.5px;
  font-weight: 700;
  font-style: normal;
  color: var(--slack-ink);
}

.slack-thread-count {
  font-size: 12px;
  font-weight: 700;
  color: var(--slack-accent);
}

.slack-thread-last {
  font-size: 11px;
  color: #8d8c8e;
}

/* Indented replies with a thread connector rail */
.slack-thread-replies {
  margin: 2px 0 0 8px;
  padding-left: 10px;
  border-left: 1px solid var(--slack-hair);
}

.slack-msg-reply {
  padding: 5px 0 5px 4px;
  border-radius: 6px;
}

.slack-msg-reply:hover { background: #FAFAFF; }

.slack-msg-reply .slack-avatar {
  width: 24px;
  height: 24px;
  font-size: 9px;
  border-radius: 32%;
}

.slack-msg-reply .slack-msg-name { font-size: 12.5px; }

.slack-thread.slack-thread-collapsed .slack-thread-replies { display: none; }

/* ---------- Trailing "no message yet" author row ---------- */
.slack-msg-pending .slack-msg-head { margin-bottom: 3px; }

.slack-typing {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 9px;
  border-radius: 999px;
  background: var(--slack-panel);
}

.slack-typing i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--slack-muted);
  animation: slack-typing-bounce 1.2s infinite ease-in-out;
}

.slack-typing i:nth-child(2) { animation-delay: 0.18s; }
.slack-typing i:nth-child(3) { animation-delay: 0.36s; }

@keyframes slack-typing-bounce {
  0%, 60%, 100% { opacity: 0.35; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-2px); }
}

/* ---------- Composer ---------- */
.slack-composer {
  flex: 0 0 auto;
  padding: 10px 16px 14px;
  background: #ffffff;
  border-top: 1px solid var(--slack-line);
}

.slack-composer-box {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 6px 6px 10px;
  border: 1px solid var(--slack-line);
  border-radius: 999px;
  background: var(--slack-cream);
}

.slack-composer-box:focus-within {
  border-color: var(--slack-accent);
  box-shadow: 0 0 0 1px var(--slack-accent);
}

.slack-composer-add {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border: 1px solid var(--slack-line);
  border-radius: 50%;
  background: #ffffff;
  color: var(--slack-ink);
  cursor: pointer;
}

.slack-composer-add svg { width: 13px; height: 13px; display: block; }

.slack-input {
  display: block;
  flex: 1 1 auto;
  width: 100%;
  max-height: 88px;
  padding: 5px 4px;
  border: none;
  outline: none;
  background: none;
  resize: none;
  font-family: inherit;
  font-size: 12.8px;
  line-height: 1.5;
  color: var(--slack-ink);
  overflow-y: auto;
}

.slack-input::placeholder { color: var(--slack-muted); }

.slack-send {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border: 1px solid var(--slack-line);
  border-radius: 50%;
  background: #ffffff;
  color: var(--slack-muted);
  cursor: default;
  font-family: inherit;
}

.slack-send svg { width: 15px; height: 15px; display: block; }

.slack-send.slack-send-ready {
  background: var(--slack-ink);
  border-color: var(--slack-ink);
  color: var(--slack-cream);
  cursor: pointer;
}

/* ---------- Narrow viewports: drop the DM list, keep the conversation ------ */
@media (max-width: 900px) {
  .slack-sidebar { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .slack-typing i { animation: none; opacity: 0.6; }
}

/* ==========================================================================
   Mobile (<=767px): #win-slack itself is already made full-screen by
   css/mobile.css (position/size on .window). Here we only handle the
   INTERIOR: the DM sidebar becomes an off-canvas drawer (wired up in
   slack.js via window.MobileShell.createDrawer) instead of being hidden
   outright the way the >=768px "@media (max-width: 900px)" rule above does.
   Appended last so it wins by source order over that rule for anything at
   or below 767px — the 768-900px desktop/resized-window behavior above is
   untouched since these two media queries never overlap.
   ========================================================================== */
@media (max-width: 767px) {
  #win-slack { min-height: 0; }

  /* Edge-to-edge app, not a floating card. */
  .slack-chrome { border-radius: 0; }

  /* Lights cluster is hidden globally by mobile.css; its spacer only
     existed to balance that cluster's width, so hide it too to re-center
     the title. */
  .slack-titlebar-spacer { display: none; }

  /* Re-enable the sidebar (overriding the max-width:900px rule above) so it
     can serve as the drawer panel; give its container the positioning
     context the drawer overlay needs. */
  .slack-body { position: relative; }
  .slack-sidebar { display: flex; }

  /* .slack-main fills 100% naturally once the sidebar is pulled out of flow
     into the absolutely-positioned drawer overlay (see .m-drawer in
     css/mobile.css) — no width rule needed here.
     Trim the conversation's horizontal padding modestly for 355px content
     width; nothing else about the conversation UI changes. */
  .slack-msg { padding: 6px 12px 7px; }

  /* Composer bottoms out above the dock's peeking band; the DM drawer's
     list gets the same clearance. */
  .slack-composer { padding: 8px 12px calc(12px + var(--m-bottom-inset)); }
  .slack-sidebar { padding-bottom: var(--m-bottom-inset); }
}

/* ============================================================================
   Send-attempt notice (slack.js's showToast)
   The composer never really posts; a send attempt gets this card, which holds
   ~1.5s and fades. Same geometry as .pllm-toast — the two mocks are the same
   card with different copy and triangle fill — but scoped to this component
   rather than shared, per the one-component-owns-its-selectors contract.
   ========================================================================== */
.slack-toast {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 30;
  width: min(320px, 84%);
  box-sizing: border-box;
  background: #ECECEC;
  border: 1px solid var(--slack-line);
  border-radius: 12px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .22);
  text-align: center;
  /* Inert in both states — a notice, never a control. */
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.96);
  transition: opacity .18s ease, transform .18s ease;
}
.slack-toast.is-shown {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.slack-toast-head {
  padding: 10px 12px;
  border-bottom: 1px solid var(--slack-line);
  font-size: 12.5px;
  font-weight: 500;
  color: #000;
}

.slack-toast-body { padding: 22px 26px 26px; }

.slack-toast-icon {
  display: block;
  width: 46px;
  height: auto;
  margin: 0 auto 18px;
}

.slack-toast-title {
  margin: 0 0 10px;
  font-family: "Newsreader", "Iowan Old Style", Georgia, "Times New Roman", serif;
  font-size: 22px;
  font-weight: 400;
  line-height: 1.2;
  color: #000;
}

.slack-toast-sub {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: #000;
}

@media (prefers-reduced-motion: reduce) {
  .slack-toast { transition: none; }
}