/* ══════════════════════════════════════════════════════════════════════════
   CK Slack - a full Slack client inside the admin CRM.
   Pairs with ck-slack.js.

   Deliberately NOT on the Capital Kings gold palette. This surface IS Slack and
   should feel like you tabbed into the desktop app, so it uses Slack's own
   colors, chrome and proportions:
     top bar / rails   #3F0E40      workspace rail   #350D36
     active channel    #1164A3      main surface     #1A1D21
     body text         #D1D2D3      muted            #ABABAD
     send green        #007A5A      link blue        #1D9BD1

   Two modes:
     .cks-fullscreen  the standalone app (App Launcher > Slack). Fixed, covers
                      the viewport, own top bar, own workspace rail.
     .cks-embed       one channel inside a deal record tab. No rails, no top bar.
   ══════════════════════════════════════════════════════════════════════════ */

.cks-wrap {
  --sl-aubergine:  #3F0E40;
  --sl-aubergine-d:#350D36;
  --sl-active:     #1164A3;
  --sl-bg:         #1A1D21;
  --sl-text:       #D1D2D3;
  --sl-muted:      #ABABAD;
  --sl-border:     #35373B;
  --sl-hover:      #222529;
  --sl-green:      #007A5A;
  --sl-blue:       #1D9BD1;

  display: grid;
  grid-template-columns: minmax(0, 1fr);
  background: var(--sl-bg);
  color: var(--sl-text);
  font-size: 15px;
  line-height: 1.46668;
  -webkit-font-smoothing: antialiased;
}

/* ── Fullscreen app mode ──────────────────────────────────────────────── */
.cks-wrap.cks-fullscreen {
  position: fixed;
  /* Runs edge to edge from y=0 so the aubergine reaches the top of the window
     and the floating OASYS pill sits ON it rather than above a seam. z-index
     stays under the portal chrome (topbar 100, app panel 102, full launcher
     300) so the nav, waffle and every dropdown still work while Slack is open.
     Content is pushed clear of the pill by padding, not by offsetting the whole
     surface, which is what keeps the colour continuous. */
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 40;
  margin: 0;
  border: none;
  border-radius: 0;
  /* rail | sidebar | conversation. minmax(0,·) or the conversation column
     refuses to shrink and long unbroken strings blow the whole grid out. */
  grid-template-columns: 68px 260px minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
}
/* --cks-top is measured at runtime from the OASYS pill, which condenses on
   scroll and reflows at narrow widths, so it can never be a fixed number. */
.cks-wrap.cks-fullscreen > .cks-wsrail,
.cks-wrap.cks-fullscreen > .cks-rail,
.cks-wrap.cks-fullscreen > .cks-main { padding-top: var(--cks-top, 0px); }
/* While the app is up the portal chrome is hidden by JS; this keeps the page
   itself from scrolling behind the fixed layer. */
html.cks-noscroll, body.cks-noscroll { overflow: hidden !important; }

/* ── Top bar ──────────────────────────────────────────────────────────── */
.cks-topbar {
  grid-column: 1 / -1;
  background: var(--sl-aubergine-d);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0 0.75rem;
  -webkit-app-region: drag;
}
.cks-topbar-left, .cks-topbar-right {
  display: flex; align-items: center; gap: 0.15rem;
  flex: 1; min-width: 0;
}
.cks-topbar-right { justify-content: flex-end; }
.cks-hist {
  background: transparent; border: none; cursor: pointer;
  color: rgba(255,255,255,0.7); width: 26px; height: 26px; border-radius: 4px;
  font-size: 15px; line-height: 1; display: flex; align-items: center; justify-content: center;
}
.cks-hist:hover { background: rgba(255,255,255,0.1); color: #FFF; }
.cks-topbar-search {
  flex: 0 1 640px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 6px;
  color: rgba(255,255,255,0.8);
  font-size: 13px;
  height: 26px;
  display: flex; align-items: center; gap: 0.4rem;
  padding: 0 0.6rem;
  cursor: text;
}
.cks-topbar-search:hover { background: rgba(255,255,255,0.16); }
.cks-topbar-search input {
  background: transparent; border: none; color: #FFF;
  font-family: inherit; font-size: 13px; width: 100%; outline: none;
}
.cks-topbar-search input::placeholder { color: rgba(255,255,255,0.65); }
.cks-exit {
  background: rgba(255,255,255,0.12); border: none; color: #FFF;
  font-size: 12px; font-weight: 700; border-radius: 4px;
  padding: 0.25rem 0.6rem; cursor: pointer; white-space: nowrap;
}
.cks-exit:hover { background: rgba(255,255,255,0.22); }

/* ── Workspace rail (far left, icon strip) ────────────────────────────── */
.cks-wsrail {
  background: var(--sl-aubergine-d);
  border-right: 1px solid rgba(255,255,255,0.1);
  display: flex; flex-direction: column; align-items: center;
  padding: 0.6rem 0; gap: 0.15rem; min-height: 0;
}
.cks-ws-icon {
  width: 36px; height: 36px; border-radius: 8px;
  background: #FFFFFF; color: var(--sl-aubergine);
  font-weight: 900; font-size: 15px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 0.7rem; flex-shrink: 0;
}
.cks-ws-btn {
  background: transparent; border: none; cursor: pointer;
  color: rgba(255,255,255,0.75);
  width: 52px; padding: 0.35rem 0 0.2rem;
  border-radius: 8px; display: flex; flex-direction: column; align-items: center; gap: 0.15rem;
  font-size: 11px; font-weight: 700; font-family: inherit;
}
.cks-ws-btn .cks-ws-glyph {
  width: 26px; height: 26px; border-radius: 8px;
  background: rgba(255,255,255,0.12);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px;
}
.cks-ws-btn:hover { color: #FFF; }
.cks-ws-btn:hover .cks-ws-glyph { background: rgba(255,255,255,0.2); }
.cks-ws-btn.active { color: #FFF; }
.cks-ws-btn.active .cks-ws-glyph { background: rgba(255,255,255,0.3); }
.cks-ws-spacer { flex: 1; }
.cks-ws-btn.cks-ws-exit .cks-ws-glyph { background: rgba(255,255,255,0.08); }

/* ── Channel sidebar ──────────────────────────────────────────────────── */
.cks-rail {
  background: var(--sl-aubergine);
  display: flex; flex-direction: column; min-height: 0;
}
.cks-rail-head {
  padding: 0.6rem 0.75rem 0.5rem;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  flex-shrink: 0;
}
.cks-workspace { display: flex; align-items: center; gap: 0.4rem; }
.cks-logo { width: 18px; height: 18px; flex-shrink: 0; }
.cks-rail-title {
  font-size: 16px; font-weight: 900; color: #FFFFFF; letter-spacing: -0.01em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cks-search {
  width: 100%; margin-top: 0.5rem;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 6px; color: #FFFFFF;
  padding: 0.28rem 0.5rem; font-size: 13px; font-family: inherit;
}
.cks-search::placeholder { color: rgba(255,255,255,0.55); }
.cks-search:focus { outline: none; border-color: rgba(255,255,255,0.5); background: rgba(255,255,255,0.15); }

.cks-list { overflow-y: auto; flex: 1; padding: 0.4rem 0 1.5rem; min-height: 0; }
.cks-list::-webkit-scrollbar { width: 8px; }
.cks-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.22); border-radius: 4px; }
.cks-list::-webkit-scrollbar-track { background: transparent; }

.cks-rail-group {
  display: flex; align-items: center; gap: 0.35rem;
  font-size: 13px; font-weight: 700; color: rgba(255,255,255,0.7);
  padding: 0.7rem 0.75rem 0.2rem; cursor: pointer; user-select: none;
}
.cks-rail-group:hover { color: #FFFFFF; }
.cks-rail-caret {
  font-size: 10px; opacity: 0.85; flex-shrink: 0;
  transition: transform 0.12s ease;
}
/* Collapsed rotates the caret and hides the rows, same as Slack. */
.cks-rail-sec.collapsed .cks-rail-caret { transform: rotate(-90deg); }
.cks-rail-sec.collapsed .cks-rail-rows { display: none; }
/* A collapsed section still reports its unreads, or collapsing would hide the
   one thing you needed to see. */
.cks-sec-unread {
  margin-left: auto; background: #E01E5A; color: #FFFFFF;
  border-radius: 9px; min-width: 17px; height: 17px; padding: 0 5px;
  font-size: 10px; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center;
}
/* Unread badge on the CRM's Slack nav tab. Lives outside .cks-wrap, so it uses
   the Capital Kings palette rather than Slack's. */
.cks-nav-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 17px; height: 17px; padding: 0 5px; margin-left: 6px;
  border-radius: 9px; background: #E01E5A; color: #FFFFFF;
  font-size: 10px; font-weight: 800; line-height: 1; vertical-align: middle;
  box-shadow: 0 0 0 2px rgba(0,0,0,0.35);
}

/* Star: only shown on hover or when already starred, like Slack. */
.cks-star {
  margin-left: auto; background: transparent; border: none; cursor: pointer;
  color: rgba(255,255,255,0.45); font-size: 13px; line-height: 1;
  padding: 0 0.15rem; flex-shrink: 0; opacity: 0; font-family: inherit;
}
.cks-chan:hover .cks-star { opacity: 1; }
.cks-star.on { opacity: 1; color: #ECB22E; }
.cks-star:hover { color: #ECB22E; }
.cks-chan.unread .cks-star { margin-left: 0.35rem; }

/* Unread: Slack bolds the channel and shows a dot. */
.cks-chan.unread { color: #FFFFFF; font-weight: 900; }
.cks-unread-dot {
  margin-left: auto; width: 8px; height: 8px; border-radius: 50%;
  background: #FFFFFF; flex-shrink: 0;
}
.cks-chan.active .cks-unread-dot { background: #FFFFFF; }

/* Reactions: display only, no hover affordance, because adding one needs a
   scope this app does not have and a dead button reads as broken. */
.cks-reactions { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.35rem; align-items: center; position: relative; }
.cks-reaction {
  display: inline-flex; align-items: center; gap: 0.25rem;
  background: rgba(255,255,255,0.06); border: 1px solid var(--sl-border);
  border-radius: 12px; padding: 0.05rem 0.45rem;
  font-size: 12px; font-weight: 700; color: var(--sl-text);
  cursor: pointer; font-family: inherit;
}
.cks-reaction:hover { border-color: var(--sl-blue); background: rgba(29,155,209,0.12); }
.cks-reaction-emoji { font-size: 13px; }
/* The + only appears on hover when there are no reactions yet, so an untouched
   message stays clean, exactly like Slack. */
.cks-react-add {
  background: rgba(255,255,255,0.06); border: 1px solid var(--sl-border);
  border-radius: 12px; color: var(--sl-muted); cursor: pointer;
  font-size: 13px; line-height: 1; padding: 0.1rem 0.5rem; font-family: inherit;
}
.cks-react-add:hover { border-color: var(--sl-blue); color: var(--sl-text); }
.cks-reactions-empty { margin-top: 0.15rem; }
.cks-reactions-empty .cks-react-add { opacity: 0; }
.cks-msg:hover .cks-reactions-empty .cks-react-add { opacity: 1; }
.cks-react-picker {
  display: none; position: absolute; bottom: 100%; left: 0; z-index: 5;
  background: #222529; border: 1px solid var(--sl-border); border-radius: 8px;
  padding: 0.3rem; gap: 0.15rem; margin-bottom: 0.25rem;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}
.cks-react-picker.open { display: flex; }
.cks-react-pick {
  background: transparent; border: none; cursor: pointer;
  font-size: 17px; line-height: 1; padding: 0.2rem 0.25rem; border-radius: 5px;
}
.cks-react-pick:hover { background: rgba(255,255,255,0.12); }
.cks-edited { font-size: 12px; color: var(--sl-muted); }

.cks-rail-note {
  font-size: 12px; color: rgba(255,255,255,0.55);
  padding: 0.5rem 0.75rem 0.3rem; font-style: italic;
}
.cks-chan {
  display: flex; align-items: center; gap: 0.4rem;
  padding: 0.1rem 0.75rem; min-height: 28px; cursor: pointer;
  font-size: 15px; color: rgba(255,255,255,0.72);
}
.cks-chan:hover { background: rgba(255,255,255,0.08); }
.cks-chan[draggable="true"] { cursor: grab; }
.cks-chan.dragging { opacity: 0.45; cursor: grabbing; }
.cks-chan.is-hidden { opacity: 0.72; }
.cks-drop-sec.cks-drop-over .cks-rail-rows { outline: 1px dashed rgba(236,178,46,0.75); outline-offset: -2px; background: rgba(236,178,46,0.08); }
.cks-hide-empty { color: rgba(255,255,255,0.56); font-size: 0.78rem; line-height: 1.35; padding: 0.55rem 0.9rem 0.7rem 1.45rem; }
.cks-chan.active { background: var(--sl-active); color: #FFFFFF; font-weight: 700; }
.cks-chan-hash { color: rgba(255,255,255,0.55); flex-shrink: 0; font-weight: 400; }
/* DM and app rows show a face / app icon where a channel shows its hash. */
/* Capital Kings crown marks a deal channel, where a plain channel shows #. */
.cks-crown { width: 15px; height: 15px; flex-shrink: 0; display: inline-block; vertical-align: -2px; object-fit: contain; }
.cks-main-title .cks-crown { width: 17px; height: 17px; vertical-align: -3px; }
.cks-intro-title .cks-crown { width: 28px; height: 28px; vertical-align: -4px; }
.cks-chan-av {
  width: 18px; height: 18px; border-radius: 3px; flex-shrink: 0;
  object-fit: cover; display: block;
}
.cks-chan-av-ini {
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.2); color: #FFFFFF;
  font-size: 9px; font-weight: 700;
}
.cks-app-tag {
  font-size: 10px; font-weight: 700; letter-spacing: 0.04em;
  background: rgba(255,255,255,0.12); color: var(--sl-muted);
  border-radius: 3px; padding: 0.05rem 0.25rem; vertical-align: middle;
}
.cks-chan.active .cks-chan-hash { color: #FFFFFF; }
.cks-chan-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cks-chan-join {
  margin-left: auto; background: rgba(255,255,255,0.14); border: none; color: #FFFFFF;
  border-radius: 4px; font-size: 11px; font-weight: 700;
  padding: 0.1rem 0.4rem; cursor: pointer; flex-shrink: 0; font-family: inherit;
}
.cks-chan-join:hover { background: var(--sl-green); }

/* ── Conversation column ──────────────────────────────────────────────── */
.cks-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--sl-bg); }
.cks-main-head {
  padding: 0 1.25rem; height: 49px;
  border-bottom: 1px solid var(--sl-border);
  display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0;
}
.cks-main-title { font-size: 15px; font-weight: 900; color: #FFFFFF; white-space: nowrap; }
.cks-members {
  display: inline-flex; align-items: center; gap: 0.25rem;
  border: 1px solid var(--sl-border); border-radius: 12px;
  padding: 0.1rem 0.45rem; font-size: 12px; color: var(--sl-muted);
  flex-shrink: 0;
}
.cks-main-purpose {
  font-size: 13px; color: var(--sl-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
  padding-left: 0.55rem; border-left: 1px solid var(--sl-border);
}
.cks-refresh {
  margin-left: auto; background: transparent; border: 1px solid var(--sl-border);
  color: var(--sl-muted); border-radius: 4px; font-size: 12px;
  padding: 0.2rem 0.5rem; cursor: pointer; flex-shrink: 0; font-family: inherit;
}
.cks-refresh:hover { border-color: var(--sl-muted); color: var(--sl-text); }
.cks-refresh.cks-danger:hover { border-color: #E01E5A; color: #F2849E; }

.cks-msgs { flex: 1; overflow-y: auto; padding: 1.2rem 0 1rem; min-height: 0; }
.cks-msgs::-webkit-scrollbar { width: 10px; }
.cks-msgs::-webkit-scrollbar-thumb { background: #3B3D42; border-radius: 5px; }
.cks-msgs::-webkit-scrollbar-track { background: transparent; }

/* Channel intro, the block Slack shows above the first message */
.cks-intro { padding: 1rem 1.25rem 0.5rem; }
.cks-intro-title { font-size: 26px; font-weight: 900; color: #FFFFFF; margin-bottom: 0.4rem; letter-spacing: -0.02em; }
.cks-intro-sub { font-size: 15px; color: var(--sl-muted); line-height: 1.5; }

.cks-day { text-align: center; margin: 1.1rem 0 0.7rem; position: relative; }
.cks-day::before {
  content: ''; position: absolute; left: 1.25rem; right: 1.25rem; top: 50%;
  height: 1px; background: var(--sl-border); z-index: 0;
}
.cks-day span {
  background: var(--sl-bg); border: 1px solid var(--sl-border); border-radius: 12px;
  padding: 0.15rem 0.8rem; position: relative; z-index: 1;
  font-size: 13px; font-weight: 700; color: var(--sl-text);
}

.cks-msg { display: flex; gap: 0.6rem; padding: 0.4rem 1.25rem; position: relative; }
.cks-msg:hover { background: var(--sl-hover); }
.cks-msg-av {
  width: 36px; height: 36px; border-radius: 4px;
  background: #4A154B; color: #FFFFFF;
  font-size: 13px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
/* Real profile pictures / app icons fill the avatar square. */
.cks-msg-av { overflow: hidden; }
.cks-msg-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Slack rounds app icons the same as people, but tags them visually. */
.cks-msg-av.is-app { background: #1A1D21; border: 1px solid var(--sl-border); }
.cks-ws-icon { overflow: hidden; }
.cks-ws-icon img { width: 100%; height: 100%; object-fit: cover; display: block; }

.cks-msg.cont { padding-top: 0.05rem; padding-bottom: 0.05rem; }
.cks-msg.cont .cks-msg-av { visibility: hidden; height: 0; }
/* Slack shows the timestamp in the gutter on hover for grouped messages */
.cks-msg.cont .cks-gutter-time {
  position: absolute; left: 1.25rem; width: 36px;
  font-size: 11px; color: var(--sl-muted); opacity: 0; text-align: center; line-height: 22px;
}
.cks-msg.cont:hover .cks-gutter-time { opacity: 1; }
.cks-msg-body { min-width: 0; flex: 1; }
.cks-msg-meta { display: flex; align-items: baseline; gap: 0.5rem; }
.cks-msg-author { font-size: 15px; font-weight: 900; color: #FFFFFF; }
.cks-msg-time { font-size: 12px; color: var(--sl-muted); }
.cks-msg-text {
  font-size: 15px; color: var(--sl-text); line-height: 1.46668;
  white-space: pre-wrap; word-wrap: break-word; overflow-wrap: anywhere;
}
.cks-mention { color: var(--sl-blue); background: rgba(29,155,209,0.12); border-radius: 3px; padding: 0 2px; }
.cks-hit { background: #F2C744; color: #1A1D21; border-radius: 2px; padding: 0 1px; }
.cks-searchbar {
  font-size: 13px; font-weight: 700; color: var(--sl-muted);
  padding: 0 1.25rem 0.5rem; border-bottom: 1px solid var(--sl-border); margin-bottom: 0.6rem;
}
.cks-trunc { font-weight: 400; opacity: 0.8; }

/* ── Cross-channel search results ─────────────────────────────────────── */
.cks-result { padding: 0.6rem 1.25rem; cursor: pointer; border-left: 3px solid transparent; }
.cks-result:hover { background: var(--sl-hover); border-left-color: var(--sl-blue); }
.cks-result-head { display: flex; align-items: baseline; gap: 0.5rem; margin-bottom: 0.15rem; flex-wrap: wrap; }
.cks-result-chan {
  font-size: 12px; font-weight: 700; color: var(--sl-blue);
  background: rgba(29,155,209,0.1); border-radius: 4px; padding: 0.05rem 0.35rem;
}

/* ── Thread view ──────────────────────────────────────────────────────── */
.cks-thread-head {
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0 1.25rem 0.6rem; margin-bottom: 0.6rem;
  border-bottom: 1px solid var(--sl-border);
}
.cks-thread-back {
  background: transparent; border: 1px solid var(--sl-border); color: var(--sl-text);
  border-radius: 4px; font-size: 12px; font-weight: 700; padding: 0.25rem 0.55rem;
  cursor: pointer; font-family: inherit;
}
.cks-thread-back:hover { background: var(--sl-hover); border-color: var(--sl-muted); }
.cks-thread-count { font-size: 13px; color: var(--sl-muted); font-weight: 700; }
.cks-thread-parent { border-bottom: 1px solid var(--sl-border); padding-bottom: 0.7rem; margin-bottom: 0.4rem; }
.cks-thread { font-size: 13px; font-weight: 700; color: var(--sl-blue); cursor: pointer; margin-top: 0.15rem; display: inline-block; }
.cks-thread:hover { text-decoration: underline; }

/* ── Attachments ──────────────────────────────────────────────────────── */
.cks-files { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.4rem; }
.cks-file-img { max-width: 380px; max-height: 280px; border-radius: 8px; border: 1px solid var(--sl-border); cursor: pointer; display: block; }
/* Reserve space while the bytes come through the worker, so the message list
   does not collapse and shove the scroll position around mid-load. */
.cks-file-img:not([src]) { min-width: 200px; min-height: 130px; background: rgba(255,255,255,0.04); }
.cks-file-chip {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: transparent; border: 1px solid var(--sl-border); border-radius: 8px;
  padding: 0.5rem 0.7rem; font-size: 13px; font-weight: 700; color: var(--sl-text);
  cursor: pointer; text-decoration: none; max-width: 380px;
}
.cks-file-chip:hover { background: var(--sl-hover); }
.cks-file-chip-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cks-file-chip-size { color: var(--sl-muted); font-size: 12px; font-weight: 400; flex-shrink: 0; }

/* ── Composer, with Slack's formatting toolbar ────────────────────────── */
.cks-composer { padding: 0 1.25rem 1.5rem; flex-shrink: 0; background: var(--sl-bg); }
.cks-composer-box {
  border: 1px solid #565856; border-radius: 8px; overflow: hidden; background: var(--sl-bg);
}
.cks-composer-box:focus-within { box-shadow: 0 0 0 1px #565856; }
.cks-fmtbar {
  display: flex; align-items: center; gap: 0.1rem;
  padding: 0.3rem 0.4rem; background: rgba(255,255,255,0.04);
  border-bottom: 1px solid var(--sl-border);
}
.cks-fmt {
  background: transparent; border: none; color: var(--sl-muted); cursor: pointer;
  width: 26px; height: 26px; border-radius: 4px; font-size: 13px; font-family: inherit;
  display: flex; align-items: center; justify-content: center;
}
.cks-fmt:hover { background: rgba(255,255,255,0.1); color: var(--sl-text); }
.cks-fmt-sep { width: 1px; height: 18px; background: var(--sl-border); margin: 0 0.25rem; }
.cks-composer-row { display: flex; gap: 0.4rem; align-items: flex-end; padding: 0.5rem 0.6rem; }
.cks-input {
  flex: 1; background: transparent; border: none; color: var(--sl-text);
  font-family: inherit; font-size: 15px; line-height: 1.46668;
  resize: none; max-height: 200px; min-height: 22px;
}
.cks-input:focus { outline: none; }
.cks-input::placeholder { color: var(--sl-muted); }
.cks-icon-btn {
  background: transparent; border: none; color: var(--sl-muted); cursor: pointer;
  font-size: 15px; padding: 0.1rem 0.3rem; flex-shrink: 0; line-height: 1; font-family: inherit;
}
.cks-icon-btn:hover { color: var(--sl-text); }
.cks-send {
  background: var(--sl-green); border: none; color: #FFFFFF;
  font-weight: 700; font-size: 13px; border-radius: 4px;
  padding: 0.35rem 0.7rem; cursor: pointer; flex-shrink: 0; font-family: inherit;
}
.cks-send:hover { background: #148567; }
.cks-send:disabled { opacity: 0.5; cursor: default; }
.cks-hint { font-size: 12px; color: var(--sl-muted); margin-top: 0.3rem; }
.cks-pending { display: flex; align-items: center; gap: 0.4rem; font-size: 13px; color: var(--sl-text); padding: 0.4rem 0.6rem 0; }
.cks-pending button { background: none; border: none; color: var(--sl-muted); cursor: pointer; }

/* ── States ───────────────────────────────────────────────────────────── */
.cks-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  height: 100%; text-align: center; color: var(--sl-muted); padding: 2rem 1.5rem;
}
.cks-empty-logo { width: 44px; height: 44px; margin-bottom: 0.8rem; opacity: 0.9; }
.cks-empty-icon { font-size: 2rem; margin-bottom: 0.5rem; opacity: 0.6; }
.cks-empty-title { font-size: 18px; font-weight: 900; color: #FFFFFF; margin-bottom: 0.4rem; }
.cks-empty-sub { font-size: 15px; max-width: 460px; line-height: 1.5; }
.cks-empty-sub code {
  background: rgba(255,255,255,0.08); border: 1px solid var(--sl-border);
  border-radius: 4px; padding: 0.05rem 0.35rem; font-size: 13px; color: #E8912D;
  font-family: Monaco, Consolas, monospace;
}
.cks-err {
  background: rgba(224,30,90,0.1); border: 1px solid rgba(224,30,90,0.4);
  color: #F2849E; border-radius: 6px; padding: 0.6rem 0.8rem;
  font-size: 13px; margin: 0.75rem 1.25rem;
}
.cks-skel { padding: 1.25rem; }
.cks-skel-row {
  height: 14px; border-radius: 4px; margin-bottom: 0.7rem;
  background: linear-gradient(90deg, #23262A 25%, #2B2F34 37%, #23262A 63%);
  background-size: 400% 100%;
  animation: cksShimmer 1.2s ease-in-out infinite;
}
@keyframes cksShimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* ── Message hover actions + inline edit ──────────────────────────────── */
.cks-msg-acts {
  position: absolute; top: -14px; right: 16px;
  display: none; align-items: center; gap: 2px;
  background: var(--sl-bg); border: 1px solid var(--sl-border);
  border-radius: 8px; padding: 2px 4px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
  z-index: 5;
}
.cks-msg:hover .cks-msg-acts { display: inline-flex; }
/* The first message sits at the top of the scroller, where -14px would clip. */
.cks-msg:first-child .cks-msg-acts { top: 2px; }
.cks-act {
  background: none; border: none; cursor: pointer;
  font-size: 15px; line-height: 1; padding: 5px 6px; border-radius: 5px;
  color: var(--sl-text);
}
.cks-act:hover { background: var(--sl-hover); }
.cks-act-danger:hover { background: rgba(224,30,90,0.22); }

.cks-editbox { margin-top: 0.2rem; }
.cks-edit-ta {
  width: 100%; box-sizing: border-box; resize: none;
  background: var(--sl-bg); color: var(--sl-text);
  border: 1px solid var(--sl-blue); border-radius: 8px;
  font: inherit; font-size: 15px; line-height: 1.4;
  padding: 0.5rem 0.6rem; outline: none; min-height: 40px;
}
.cks-edit-btns { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.35rem; }
.cks-edit-cancel {
  background: none; border: 1px solid var(--sl-border); color: var(--sl-text);
  border-radius: 6px; padding: 0.3rem 0.7rem; cursor: pointer;
  font-size: 13px; font-weight: 700; font-family: inherit;
}
.cks-edit-cancel:hover { background: var(--sl-hover); }
.cks-edit-hint { font-size: 12px; color: var(--sl-muted); }

/* ── Slack mrkdwn rendering ───────────────────────────────────────────── */
.cks-pre {
  background: rgba(0,0,0,0.35); border: 1px solid var(--sl-border);
  border-radius: 6px; padding: 0.5rem 0.65rem; margin: 0.25rem 0;
  font-family: Monaco, Menlo, Consolas, monospace; font-size: 12.5px;
  overflow-x: auto; white-space: pre;
}
.cks-code {
  background: rgba(0,0,0,0.35); border: 1px solid var(--sl-border);
  border-radius: 4px; padding: 0 4px;
  font-family: Monaco, Menlo, Consolas, monospace; font-size: 12.5px;
  color: #E8912D;
}
.cks-quote {
  display: inline-block; border-left: 4px solid #565856;
  padding-left: 0.6rem; color: rgba(255,255,255,0.78);
}
.cks-link { color: var(--sl-blue); text-decoration: none; }
.cks-link:hover { text-decoration: underline; }

/* ── Red NEW divider ──────────────────────────────────────────────────── */
.cks-new { position: relative; height: 1px; background: #E01E5A; margin: 0.55rem 1.25rem; }
.cks-new span {
  position: absolute; right: 0; top: -9px;
  background: var(--sl-bg); color: #E01E5A;
  font-size: 11px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 0 6px;
}

/* ── Show older messages ──────────────────────────────────────────────── */
.cks-load-older-wrap { text-align: center; padding: 0.6rem 0 0.2rem; }
.cks-load-older {
  background: none; border: 1px solid var(--sl-border); color: var(--sl-blue);
  border-radius: 999px; padding: 0.3rem 0.9rem;
  font-size: 12.5px; font-weight: 700; cursor: pointer; font-family: inherit;
}
.cks-load-older:hover { background: var(--sl-hover); }

/* ── Composer autocomplete (@people, :emoji:) ─────────────────────────── */
.cks-composer { position: relative; }
.cks-ac {
  position: absolute; left: 1.25rem; right: 1.25rem; bottom: calc(100% + 2px);
  background: #232529; border: 1px solid var(--sl-border); border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  z-index: 30; max-height: 300px; overflow-y: auto;
}
.cks-ac-row {
  display: flex; align-items: center; gap: 0.55rem;
  padding: 0.45rem 0.7rem; cursor: pointer; font-size: 14px; color: var(--sl-text);
}
.cks-ac-row.active, .cks-ac-row:hover { background: var(--sl-active); color: #FFFFFF; }
.cks-ac-av { width: 20px; height: 20px; border-radius: 4px; object-fit: cover; flex: 0 0 auto; }
.cks-ac-ini {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--sl-aubergine); color: #FFFFFF; font-size: 9px; font-weight: 800;
}
.cks-ac-label { font-weight: 700; }
.cks-ac-sub {
  color: var(--sl-muted); font-size: 12px; margin-left: auto;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cks-ac-row.active .cks-ac-sub { color: rgba(255,255,255,0.8); }

/* ── Ctrl+K quick switcher ────────────────────────────────────────────── */
.cks-swover {
  position: absolute; inset: 0; z-index: 60;
  background: rgba(0,0,0,0.55);
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 10vh;
}
.cks-sw {
  width: min(560px, 92vw);
  background: var(--sl-bg); border: 1px solid var(--sl-border); border-radius: 12px;
  box-shadow: 0 16px 48px rgba(0,0,0,0.6); overflow: hidden;
}
.cks-sw input {
  width: 100%; box-sizing: border-box; background: transparent; border: none;
  border-bottom: 1px solid var(--sl-border); outline: none;
  color: #FFFFFF; font: inherit; font-size: 17px; padding: 0.85rem 1rem;
}
.cks-sw-list { max-height: 46vh; overflow-y: auto; padding: 0.35rem 0; }
.cks-sw-row {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.45rem 1rem; cursor: pointer; font-size: 14.5px; color: var(--sl-text);
}
.cks-sw-row.active, .cks-sw-row:hover { background: var(--sl-active); color: #FFFFFF; }
.cks-sw-hint {
  padding: 0.5rem 1rem; border-top: 1px solid var(--sl-border);
  color: var(--sl-muted); font-size: 11.5px;
}

/* ── File dropzone highlight ──────────────────────────────────────────── */
.cks-main.cks-dropzone { outline: 2px dashed var(--sl-blue); outline-offset: -6px; }

/* ── Profile card ─────────────────────────────────────────────────────── */
[data-uid] { cursor: pointer; }
.cks-msg-author[data-uid]:hover { text-decoration: underline; }
.cks-profile {
  position: absolute; z-index: 70; width: 270px;
  background: #232529; border: 1px solid var(--sl-border); border-radius: 12px;
  box-shadow: 0 16px 48px rgba(0,0,0,0.6);
  padding: 1rem; color: var(--sl-text);
}
.cks-profile-x {
  position: absolute; top: 8px; right: 8px;
  background: none; border: none; color: var(--sl-muted);
  cursor: pointer; font-size: 12px; padding: 4px;
}
.cks-profile-x:hover { color: #FFFFFF; }
.cks-profile-photo {
  width: 84px; height: 84px; border-radius: 12px; object-fit: cover; display: block;
  margin-bottom: 0.6rem; border: 1px solid var(--sl-border);
}
.cks-profile-ini {
  display: flex; align-items: center; justify-content: center;
  background: var(--sl-aubergine); color: #FFFFFF; font-size: 26px; font-weight: 900;
}
.cks-profile-name { font-size: 16px; font-weight: 900; color: #FFFFFF; }
.cks-profile-real { font-size: 12.5px; color: var(--sl-muted); }
.cks-profile-title { font-size: 13px; color: var(--sl-text); margin-top: 0.3rem; }
.cks-profile-status { font-size: 12.5px; color: var(--sl-muted); margin-top: 0.2rem; }
.cks-profile-row { font-size: 12.5px; margin-top: 0.45rem; color: var(--sl-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cks-profile-row a { color: var(--sl-blue); text-decoration: none; }
.cks-profile-row a:hover { text-decoration: underline; }
.cks-profile-mention { margin-top: 0.75rem; width: 100%; }

/* ── Pinned messages ──────────────────────────────────────────────────── */
.cks-pins-btn {
  background: rgba(255,255,255,0.06); border: 1px solid var(--sl-border); color: var(--sl-text);
  font-size: 12px; font-weight: 700; border-radius: 999px;
  padding: 0.2rem 0.55rem; cursor: pointer; white-space: nowrap;
}
.cks-pins-btn:hover { background: var(--sl-hover); }
.cks-pinmark { font-size: 11px; color: #E8912D; font-weight: 700; margin-bottom: 0.1rem; }
.cks-pins-panel {
  position: absolute; top: 52px; right: 12px; z-index: 40; width: min(360px, 92%);
  background: #232529; border: 1px solid var(--sl-border); border-radius: 12px;
  box-shadow: 0 16px 48px rgba(0,0,0,0.6);
  max-height: 55%; overflow-y: auto; padding-bottom: 0.3rem;
}
.cks-pins-head {
  font-size: 12px; font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase;
  color: var(--sl-muted); padding: 0.7rem 0.85rem 0.4rem;
}
.cks-pins-row { padding: 0.45rem 0.85rem; cursor: pointer; }
.cks-pins-row:hover { background: var(--sl-hover); }
.cks-pins-row .cks-msg-time { margin-left: 0.4rem; }
.cks-pins-snippet { font-size: 13px; color: rgba(255,255,255,0.75); margin-top: 0.1rem; word-break: break-word; }
.cks-main { position: relative; }
.cks-msg.cks-flash { background: rgba(232,145,45,0.18); transition: background 1.2s; }

/* ── Mark all read, jump to date, Block Kit ───────────────────────────── */
.cks-markall {
  margin-left: auto; flex-shrink: 0;
  background: rgba(255,255,255,0.1); border: none; color: #FFFFFF;
  width: 22px; height: 22px; border-radius: 6px; cursor: pointer;
  font-size: 12px; line-height: 1;
}
.cks-markall:hover { background: rgba(255,255,255,0.22); }
.cks-jump-pop {
  position: absolute; top: 52px; right: 12px; z-index: 46;
  display: flex; align-items: center; gap: 0.5rem;
  background: #232529; border: 1px solid var(--sl-border); border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.5); padding: 0.6rem 0.7rem;
}
.cks-jump-pop input[type="date"] {
  background: var(--sl-bg); border: 1px solid var(--sl-border); border-radius: 6px;
  color: var(--sl-text); font: inherit; font-size: 13px; padding: 0.3rem 0.4rem;
  color-scheme: dark;
}
.cks-jump-banner { display: flex; align-items: center; justify-content: center; gap: 0.3rem; }
.cks-blocks { margin-top: 0.15rem; }
.cks-blk-header {
  font-size: 16.5px; font-weight: 900; color: #FFFFFF; line-height: 1.3;
  margin: 0.35rem 0 0.2rem;
}
.cks-blk-divider { height: 1px; background: var(--sl-border); margin: 0.55rem 0; }
.cks-blk-section { margin: 0.15rem 0; }
.cks-blk-fields {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0.25rem 1rem;
  margin-top: 0.35rem; max-width: 560px;
}
.cks-blk-field { font-size: 13.5px; color: var(--sl-text); line-height: 1.45; word-break: break-word; }
.cks-blk-context {
  display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap;
  font-size: 12px; color: var(--sl-muted); margin-top: 0.35rem;
}
.cks-blk-context .cks-mention { font-size: inherit; }
.cks-blk-ctximg { width: 16px; height: 16px; border-radius: 3px; object-fit: cover; }

/* ── Presence, drafts, custom emoji ───────────────────────────────────── */
.cks-chan-avwrap { position: relative; display: inline-flex; flex-shrink: 0; }
.cks-presence {
  position: absolute; right: -2px; bottom: -2px;
  width: 9px; height: 9px; border-radius: 50%;
  background: transparent; border: 2px solid var(--sl-aubergine);
  box-shadow: inset 0 0 0 1.5px var(--sl-muted);
}
.cks-presence.on { background: var(--sl-green, #2BAC76); box-shadow: none; }
.cks-profile .cks-presence { position: static; display: inline-block; margin-right: 4px; border-color: #232529; vertical-align: middle; }
.cks-draft-pen { color: rgba(255,255,255,0.55); font-size: 11px; flex-shrink: 0; }
.cks-emoji-img { width: 18px; height: 18px; vertical-align: text-bottom; object-fit: contain; }
.cks-reaction-emoji .cks-emoji-img { width: 15px; height: 15px; }
.cks-ac .cks-ac-av[src$=".gif"], .cks-ac img.cks-ac-av { object-fit: contain; background: transparent; }

/* ── Thread broadcast checkbox ────────────────────────────────────────── */
.cks-broadcast {
  display: flex; align-items: center; gap: 0.4rem;
  padding: 0.35rem 0.75rem 0; font-size: 12.5px; color: var(--sl-muted);
  cursor: pointer; user-select: none;
}
.cks-broadcast input { accent-color: var(--sl-green, #2BAC76); }

/* ── Channel details panel ────────────────────────────────────────────── */
#cksChanTitle { cursor: pointer; border-radius: 6px; padding: 2px 6px; margin-left: -6px; }
#cksChanTitle:hover { background: var(--sl-hover); }
.cks-chan-panel {
  position: absolute; top: 52px; right: 12px; z-index: 45;
  width: min(340px, 92%);
  background: #232529; border: 1px solid var(--sl-border); border-radius: 12px;
  box-shadow: 0 16px 48px rgba(0,0,0,0.6);
  max-height: 72%; overflow-y: auto; padding-bottom: 0.4rem;
}
.cks-chanp-head {
  display: flex; align-items: center; justify-content: space-between; gap: 0.6rem;
  padding: 0.8rem 0.85rem 0.55rem; border-bottom: 1px solid var(--sl-border);
}
.cks-chanp-head .cks-profile-x { position: static; }
.cks-chanp-title { font-size: 15px; font-weight: 900; color: #FFFFFF; overflow: hidden; text-overflow: ellipsis; }
.cks-chanp-row {
  display: flex; align-items: baseline; gap: 0.5rem;
  padding: 0.5rem 0.85rem 0; font-size: 13px;
}
.cks-chanp-lbl { font-size: 11px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--sl-muted); flex: 0 0 76px; }
.cks-chanp-val { color: var(--sl-text); min-width: 0; flex: 1; word-break: break-word; }
.cks-chanp-val i { color: var(--sl-muted); }
.cks-chanp-edit {
  background: none; border: none; color: var(--sl-blue); cursor: pointer;
  font-size: 12px; font-weight: 700; padding: 0 0.2rem; flex-shrink: 0; font-family: inherit;
}
.cks-chanp-edit:hover { text-decoration: underline; }
.cks-chanp-actions { display: flex; gap: 0.5rem; padding: 0.7rem 0.85rem 0.2rem; }
.cks-chanp-members { padding: 0.2rem 0.35rem; }
.cks-chanp-member {
  display: flex; align-items: center; gap: 0.55rem;
  padding: 0.35rem 0.5rem; border-radius: 8px; cursor: pointer;
  font-size: 14px; color: var(--sl-text);
}
.cks-chanp-member:hover { background: var(--sl-hover); }
.cks-chanp-member .cks-ac-sub { margin-left: auto; max-width: 45%; }

/* ── Link unfurls ─────────────────────────────────────────────────────── */
.cks-unfurl {
  display: flex; gap: 0.7rem; align-items: flex-start;
  border-left: 4px solid #565856; border-radius: 4px;
  padding: 0.4rem 0.6rem; margin-top: 0.4rem;
  background: rgba(255,255,255,0.03);
  text-decoration: none; max-width: 480px;
}
.cks-unfurl:hover { background: rgba(255,255,255,0.06); }
.cks-unfurl-body { min-width: 0; flex: 1; display: block; }
.cks-unfurl-svc { display: block; font-size: 11.5px; color: var(--sl-muted); font-weight: 700; }
.cks-unfurl-title { display: block; font-size: 14px; font-weight: 800; color: var(--sl-blue); margin-top: 1px; }
.cks-unfurl:hover .cks-unfurl-title { text-decoration: underline; }
.cks-unfurl-text {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  font-size: 12.5px; color: rgba(255,255,255,0.75); margin-top: 2px;
}
.cks-unfurl-thumb { width: 48px; height: 48px; border-radius: 6px; object-fit: cover; flex-shrink: 0; }
.cks-unfurl-img { max-width: 200px; max-height: 130px; border-radius: 6px; object-fit: cover; flex-shrink: 0; }

/* ── Phone layout: one column, list <-> conversation, like Slack mobile ── */
.cks-mob-back {
  display: none;
  background: rgba(255,255,255,0.08); border: none; color: var(--sl-text);
  width: 30px; height: 30px; border-radius: 8px; cursor: pointer;
  font-size: 16px; line-height: 1; flex-shrink: 0;
}
@media (max-width: 768px) {
  .cks-wrap.cks-fullscreen {
    grid-template-columns: minmax(0, 1fr);
  }
  .cks-wrap.cks-fullscreen .cks-wsrail { display: none; }
  /* List OR conversation, never squeezed side by side. */
  .cks-wrap.cks-fullscreen .cks-main { display: none; }
  .cks-wrap.cks-fullscreen.cks-onchat .cks-rail { display: none; }
  .cks-wrap.cks-fullscreen.cks-onchat .cks-main { display: flex; }
  .cks-wrap.cks-fullscreen.cks-onchat .cks-mob-back { display: inline-flex; align-items: center; justify-content: center; }
  .cks-main-head { flex-wrap: wrap; row-gap: 0.3rem; height: auto; min-height: 49px; padding-top: 0.35rem; padding-bottom: 0.35rem; }
  .cks-main-purpose { display: none; }
  .cks-profile { width: min(270px, calc(100vw - 24px)); }
  .cks-chan-panel, .cks-pins-panel { width: calc(100% - 24px); }
}

/* ── Deal-record embed: one channel, no chrome ────────────────────────── */
.cks-wrap.cks-embed {
  grid-template-columns: minmax(0, 1fr);
  height: 560px;
  border: 1px solid var(--sl-border);
  border-radius: 8px;
  overflow: hidden;
}
.cks-wrap.cks-embed .cks-rail,
.cks-wrap.cks-embed .cks-wsrail,
.cks-wrap.cks-embed .cks-topbar { display: none; }

@media (max-width: 900px) {
  .cks-wrap.cks-fullscreen { grid-template-columns: 0 200px minmax(0, 1fr); }
  .cks-wsrail { display: none; }
  .cks-topbar-search { flex: 1; }
}
/* The list <-> conversation swap lives in the 768px block above (cks-onchat
   + the back button). This block keeps only the tight-padding tweaks; its old
   rail-hiding scheme (cks-mobile-rail, never toggled by JS) is retired. */
@media (max-width: 640px) {
  .cks-msg, .cks-main-head, .cks-intro { padding-left: 0.9rem; padding-right: 0.9rem; }
  .cks-composer { padding: 0 0.9rem 0.9rem; }
}