/* ============================================================================
   HERO APP SHOWCASE — STYLES
   Prefix: .hs-   ·   Skin scopes: .hs--slack / .hs--whatsapp

   RULE OF THE FILE
   ----------------
   OUTSIDE the two skin scopes there are NO hex literals. The frame, the
   header bar chrome, the platform toggle, the channel menu and the lab
   controls draw only from DESIGN-SYSTEM.md tokens (--card, --card2, --border,
   --border2, --ink, --secondary, --tertiary, --yellow, --chipshadow) and from
   ink-derived rgba() values that the handoff specifies verbatim.

   INSIDE a skin scope the colours are the real app's own (Slack's Lato and its
   #1264a3 mention blue, WhatsApp's wallpaper, greens and link blue).
   They are written once, as custom properties, at the top of each scope. Those
   values are frozen light values on purpose: the window is an app screenshot,
   so its interior does NOT flip in dark mode (DESIGN-SYSTEM §8 / handoff §2.8.5).
   ============================================================================ */

/* ========================================================== 1 · HOST + FRAME */
.hs-host {
  position: relative;
  width: min(1120px, calc(100vw - 48px));
  margin-left: 50%;
  transform: translateX(-50%);
  text-align: left;
}

.hs-window {
  position: relative;
  isolation: isolate;
  display: block;
  width: 100%;
  height: 633px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--chipshadow);
  overflow: hidden;
  contain: paint;
  color-scheme: light;
  --showcase-scale: 1;
  --hs-tabs: 2;
  --hs-toggle-index: 0;
  --hs-tab-w: 158px;
  --hs-toggle-track-w: calc(var(--hs-tabs) * 158px + 16px);
}

.hs-frame {
  display: flex;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* ---- rail ---------------------------------------------------------------- */
.hs-rail {
  position: relative;
  z-index: 0;
  flex: none;
  align-self: stretch;
  overflow: hidden;
  border-right: 1px solid var(--sk-divider);
  background: var(--sk-rail-bg);
}
.hs-window.hs--norail .hs-rail { display: none; }

.hs-rail-scale {
  display: flex;
  flex-direction: column;
  width: 324px;
  height: 633px;
  transform-origin: top left;
  overflow: hidden;
}

.hs-rail-head {
  display: flex;
  flex: none;
  height: 73px;
  border-bottom: 1px solid var(--sk-divider);
  overflow: hidden;
}

.hs-rail-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}
.hs-rail-body > .hs-slot { height: 100%; min-height: 0; overflow: hidden; }
.hs-rail-body > .hs-slot > .hs-slot-child { height: 100%; min-height: 0; overflow: hidden; }

/* ---- panel --------------------------------------------------------------- */
.hs-panel {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  overflow: hidden;
  background: var(--sk-panel-bg);
}

.hs-scroll {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
}
.hs-scroll::-webkit-scrollbar { width: 0; height: 0; }
.hs-scroll[data-scrollbar-visible] { scrollbar-width: thin; scrollbar-color: rgba(22, 21, 17, .24) transparent; }
.hs-scroll[data-scrollbar-visible]::-webkit-scrollbar { width: 6px; height: 6px; }
.hs-scroll[data-scrollbar-visible]::-webkit-scrollbar-track { background: transparent; }
.hs-scroll[data-scrollbar-visible]::-webkit-scrollbar-thumb { background: rgba(22, 21, 17, .24); border-radius: 999px; }

.hs-scroll-content {
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* ---- composer ------------------------------------------------------------
   The message box, pinned to the bottom of the panel the way both apps pin
   theirs. It is decorative (aria-hidden in the JS) and never takes a click.

   --hs-composer-h is the composer's height in the skin's OWN pixels, declared
   once per skin below. The host multiplies it by --showcase-scale; the inner
   .hs-composer-scale layer is written in those same skin pixels and scaled from
   its bottom-left corner, the way .hs-header-title-scale is. That keeps every
   value inside the composer a real Slack / WhatsApp measurement.

   .hs-composer carries an explicit height so a platform switch — which parks
   the outgoing copy at position:absolute; top:0 — still fills the host exactly.
   -------------------------------------------------------------------------- */
.hs-scroll-content { padding-bottom: calc(var(--hs-composer-h, 0px) * var(--showcase-scale, 1)); }

.hs-composer-host {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 18;
  height: calc(var(--hs-composer-h, 0px) * var(--showcase-scale, 1));
  pointer-events: none;
}
.hs-composer-host > .hs-slot { height: 100%; }

.hs-composer {
  position: relative;
  width: 100%;
  height: calc(var(--hs-composer-h, 0px) * var(--showcase-scale, 1));
  overflow: hidden;
}
.hs-composer-scale {
  position: absolute;
  left: 0; bottom: 0;
  width: calc(100% / var(--showcase-scale, 1));
  height: var(--hs-composer-h, 0px);
  transform: scale(var(--showcase-scale, 1));
  transform-origin: bottom left;
}

/* ---- slots (PlatformSwitchSlot) ------------------------------------------ */
.hs-slot { position: relative; width: 100%; }
.hs-slot--fill { height: 100%; overflow: hidden; }
.hs-slot-child { width: 100%; }
.hs-slot-child--fill { position: absolute; inset: 0; display: flex; align-items: center; min-width: 0; min-height: 0; }

/* ---- header bar ---------------------------------------------------------- */
.hs-header {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 8px;
  height: calc(73px * var(--showcase-scale, 1));
  padding-right: 12px;
  border-bottom: 1px solid var(--sk-divider);
  /* Opaque, flat, no blur. Neither app frosts its header, and a translucent one
     let the thread show through as it scrolled under the bar. */
  background: var(--sk-header-bg);
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
}

.hs-header-title { position: relative; flex: 1 1 auto; min-width: 0; height: 100%; overflow: hidden; }
.hs-header-title-scale {
  position: relative;
  height: 73px;
  width: calc(100% / var(--showcase-scale, 1));
  transform: scale(var(--showcase-scale, 1));
  transform-origin: top left;
}

.hs-toggle-holder {
  position: relative;
  flex: none;
  width: calc(var(--hs-toggle-track-w) * var(--showcase-scale, 1));
  height: calc(48px * var(--showcase-scale, 1));
}
.hs-toggle-scale {
  position: absolute;
  top: 50%;
  right: 0;
  width: var(--hs-toggle-track-w);
  height: 48px;
  transform: translateY(-50%) scale(var(--showcase-scale, 1));
  transform-origin: right center;
}

/* ======================================= 2 · PLATFORM TOGGLE (our chrome) */
.hs-toggle {
  position: relative;
  display: flex;
  align-items: center;
  height: 48px;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--card2);
  overflow: clip;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

.hs-toggle-knob {
  position: absolute;
  top: 4px;
  left: 8px;
  z-index: 0;
  width: var(--hs-tab-w);
  height: 40px;
  border-radius: 999px;
  background: var(--card);
  border: 1px solid rgba(22, 21, 17, .10);
  box-shadow: 0 0 8px rgba(22, 21, 17, .04);
  transform: translateX(calc(var(--hs-toggle-index) * var(--hs-tab-w)));
  transition: transform 280ms cubic-bezier(0.645, 0.045, 0.355, 1);
  pointer-events: none;
}

.hs-toggle-tab {
  position: relative;
  z-index: 1;
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: var(--hs-tab-w);
  height: 40px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  color: var(--secondary);
  font: inherit;
  font-size: 11.5px;
  letter-spacing: .10em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  transition: color 280ms ease-in-out;
  outline: none;
}
.hs-toggle-tab.is-active { color: var(--ink); }
.hs-toggle-tab:focus-visible { box-shadow: 0 0 0 2px rgba(254, 237, 1, .9); }
.hs-toggle-icon { display: block; flex: none; width: 20px; height: 20px; object-fit: contain; }
.hs-toggle-label { display: inline-flex; align-items: center; }

@media (max-width: 639px) {
  .hs-window { --hs-tab-w: 68px; --hs-toggle-track-w: calc(var(--hs-tabs) * 68px + 16px); }
  .hs-toggle-tab { padding: 0; }
  .hs-toggle-label { display: none; }
}

/* ============================================= 3 · CHANNEL MENU (our chrome) */
.hs-menu-overlay {
  position: absolute;
  inset: 0;
  z-index: 30;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: default;
}
.hs-menu {
  position: absolute;
  z-index: 40;
  padding: 6px;
  border-radius: 12px;
  border: 1px solid var(--border2);
  background: var(--card);
  box-shadow: 0 24px 48px -16px rgba(22, 21, 17, .35);
  font-family: 'Inter', system-ui, sans-serif;
}
.hs-menu-label {
  padding: 4px 8px 6px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  line-height: 1;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tertiary);
}
.hs-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}
.hs-menu-item:hover { background: var(--card2); }
.hs-menu-item.is-active { background: var(--card2); font-weight: 600; }
.hs-menu-item:focus-visible { outline: 2px solid rgba(254, 237, 1, .9); outline-offset: -2px; }
.hs-menu-hash { font-weight: 700; color: var(--tertiary); }
.hs-menu-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%;
  font-size: 12px; font-weight: 700; color: var(--ink);
}

/* ================================================== 4 · THREAD SCAFFOLDING */
.hs-thread { width: 100%; }
.hs-thread--exit { position: absolute; top: 0; left: 0; width: 100%; }
.hs-thread-inner { display: flex; flex-direction: column; width: 100%; }

.hs-attach-host, .hs-react-host { width: 100%; min-width: 0; }
.hs-attach {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  min-width: 0;
  transform-origin: bottom left;
}
.hs-textblock { display: flex; flex-direction: column; gap: 4px; }

/* the working row (spinner + label + tool chips) — identical in all skins */
.hs-working { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-top: 2px; }
.hs-working-left { display: flex; align-items: center; gap: 6px; }
.hs-spinner {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.1em; flex: none;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 14px; line-height: 1;
  color: var(--sk-spinner);
}
.hs-working-label { font-size: 13px; line-height: 1; font-style: italic; color: var(--sk-working-label); }
.hs-working-tools { display: flex; align-items: center; gap: 6px; }
.hs-toolchip {
  display: flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; flex: none;
  border-radius: 6px;
  border: 1px solid var(--sk-chip-border);
  background: var(--sk-chip-bg);
  box-shadow: 0 2px 6px -2px var(--sk-chip-shadow);
  transform-origin: bottom left;
}
.hs-toolchip img { display: block; width: 14px; height: 14px; object-fit: contain; }

/* reaction pill shells */
.hs-pill-emoji { line-height: 1; }
.hs-pill-count { font-variant-numeric: tabular-nums; }

/* skeleton bars (shared shape, skin colour) */
.hs-skel-bar { display: block; height: 17px; border-radius: 4px; background: var(--sk-skeleton); }
.hs-skel-square { display: block; width: 17px; height: 17px; flex: none; border-radius: 4px; background: var(--sk-skeleton); }

/* generic chevron */
.hs-chev { width: 14px; height: 14px; flex: none; }
.hs-chev--muted { color: var(--sk-chev-muted); }
.hs-chev--section { width: 18px; height: 18px; color: var(--sk-chev-section); }
.hs-chev.is-open { transform: rotate(180deg); }

/* ================================================ 5 · SHARED ATTACHMENTS */
/* checklist ---------------------------------------------------------------- */
.hs-checklist { display: flex; flex-direction: column; gap: 16px; }
.hs-checklist-list { display: flex; flex-direction: column; gap: 8px; list-style: none; margin: 0; padding: 0; }
.hs-checklist-item { white-space: pre-wrap; color: var(--sk-text); }
.hs-checklist-note { white-space: pre-wrap; color: var(--sk-text); }
.hs-link { color: var(--sk-link); word-break: break-word; }
.hs-closing-note { white-space: pre-wrap; color: var(--sk-text); }
.hs-closing-insight { display: flex; align-items: flex-start; gap: 16px; }
.hs-closing-badge {
  flex: none; padding: 0 4px; border-radius: 2px;
  font-size: 12px; line-height: 1.4; font-weight: 500;
  color: var(--sk-good); background: var(--sk-good-bg);
}
.hs-closing-text { flex: 1 1 auto; min-width: 0; font-size: 12px; line-height: 1.4; color: var(--sk-muted); }

/* code fix ----------------------------------------------------------------- */
.hs-codefix { display: flex; flex-direction: column; gap: 16px; width: 100%; max-width: 416px; }
.hs-codefix-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; width: 100%; }
.hs-codefix-title { flex: none; white-space: nowrap; font-size: 14px; line-height: 1.4; color: var(--sk-card-ink); }
.hs-codefix-headright { display: flex; min-width: 0; align-items: center; gap: 8px; }
.hs-codefix-file { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; line-height: 1.4; color: var(--sk-card-ink); }
.hs-codefix-pr {
  display: inline-flex; flex: none; align-items: center; justify-content: center;
  padding: 2px 3px; border-radius: 4px;
  background: var(--sk-tag-bg); color: var(--sk-tag-fg);
  font-size: 12px; line-height: 1.4; white-space: nowrap;
}
.hs-codefix-lines {
  width: 100%; overflow: hidden;
  border-radius: 8px; border: 1px solid var(--sk-code-border);
  background: var(--sk-code-bg); padding: 1px 0;
  font-family: 'SF Mono', SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
}
.hs-codefix-line { display: flex; align-items: center; width: 100%; height: 32px; border-bottom: 1px solid var(--sk-code-border); }
.hs-codefix-line:last-child { border-bottom: 0; }
.hs-codefix-num { width: 28px; flex: none; text-align: center; font-size: 14px; line-height: 1.4; font-weight: 500; color: var(--sk-card-ink); }
.hs-codefix-cell { display: flex; align-items: center; height: 100%; min-width: 0; flex: 1 1 auto; padding: 4px; }
.hs-codefix-cell--remove { background: var(--sk-diff-remove-bg); }
.hs-codefix-cell--add { background: var(--sk-diff-add-bg); }
.hs-codefix-code { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; line-height: 1.4; font-weight: 500; }
.hs-codefix-cell--remove .hs-codefix-code { color: var(--sk-diff-remove-fg); }
.hs-codefix-cell--add .hs-codefix-code { color: var(--sk-diff-add-fg); }
.hs-codefix-actions { display: flex; align-items: flex-start; gap: 12px; }
.hs-btn-primary, .hs-btn-secondary { display: inline-flex; align-items: center; justify-content: center; height: 40px; }
.hs-codefix-actions.is-slack .hs-btn-primary {
  padding: 0 24px; border-radius: 10px; background: var(--sk-approve-bg); color: var(--sk-approve-fg);
  font-size: 15.783px; line-height: 1; font-weight: 700;
}
.hs-codefix-actions.is-slack .hs-btn-secondary {
  padding: 0 24px; border-radius: 10px; border: 1px solid var(--sk-btn-border); color: var(--sk-card-ink);
  font-size: 15.783px; line-height: 1; font-weight: 700;
}
.hs-codefix-actions.is-flat .hs-btn-primary,
.hs-codefix-actions.is-flat .hs-btn-secondary {
  padding: 0 16px; border-radius: 8px; border: 1px solid var(--sk-btn-border);
  background: var(--sk-card-bg); color: var(--sk-card-ink);
  font-size: 14px; line-height: 20px;
}

/* onboarding summary ------------------------------------------------------- */
.hs-onboard {
  display: flex; flex-direction: column; gap: 20px;
  width: 286px; max-width: 100%;
  padding: 16px 15px;
  border-radius: 18.71px;
  border: 1px solid var(--sk-card-border);
  background: var(--sk-card-bg);
  overflow: clip;
}
.hs-onboard-title { font-size: 18px; line-height: 1.1; font-weight: 700; letter-spacing: -.6px; color: var(--sk-card-ink); }
.hs-onboard-list { display: flex; flex-direction: column; gap: 8px; list-style: none; margin: 0; padding: 0; width: 100%; }
.hs-onboard-rule { height: 1px; width: 100%; background: var(--sk-card-rule); list-style: none; }
.hs-onboard-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; list-style: none; }
.hs-onboard-left { display: flex; min-width: 0; align-items: center; gap: 9.7px; }
.hs-onboard-icon {
  position: relative; display: flex; flex: none; align-items: center; justify-content: center;
  width: 27.87px; height: 27.87px; border-radius: 9.85px;
  border: 1px solid var(--sk-card-rule); background: var(--sk-card-bg);
  box-shadow: 0 1px 4px var(--sk-card-shadow);
}
.hs-onboard-icon img { width: 17px; height: 17px; object-fit: contain; }
.hs-onboard-labels { display: flex; min-width: 0; flex-direction: column; font-size: 12.666px; line-height: 1.4; font-weight: 500; }
.hs-onboard-label { color: var(--sk-card-ink); }
.hs-onboard-sub { color: var(--sk-muted); }
.hs-onboard-tick { width: 15.1px; height: 15.1px; flex: none; color: var(--sk-done); }

/* status table (the payroll-status card, renamed) -------------------------- */
.hs-statustable {
  display: flex; flex-direction: column; gap: 14px;
  width: 320px; max-width: 100%;
  padding: 16px 15px;
  border-radius: 18.71px;
  border: 1px solid var(--sk-card-border);
  background: var(--sk-card-bg);
}
.hs-statustable-title { font-size: 14px; line-height: 1.1; font-weight: 700; letter-spacing: -.3px; color: var(--sk-card-ink); }
.hs-statustable-list { display: flex; flex-direction: column; gap: 8px; list-style: none; margin: 0; padding: 0; }
.hs-statustable-rule { height: 1px; width: 100%; background: var(--sk-card-rule); list-style: none; }
.hs-statustable-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; list-style: none; }
.hs-statustable-left { display: flex; align-items: center; gap: 8px; min-width: 0; }
.hs-statustable-tick { width: 16px; height: 16px; flex: none; color: var(--sk-done); }
.hs-statustable-tick.is-flag { color: var(--sk-muted); }
.hs-statustable-label { font-size: 12.7px; line-height: 1.4; font-weight: 500; color: var(--sk-card-ink); }
.hs-statustable-value { font-size: 12.7px; line-height: 1.4; font-weight: 700; color: var(--sk-card-ink); font-variant-numeric: tabular-nums; }

/* performance dashboard ---------------------------------------------------- */
.hs-dash {
  display: flex; align-items: center; justify-content: center; gap: 21px;
  width: min(546px, 100%);
  padding: 20px 24px;
  border-radius: 18.71px;
  border: 1px solid var(--sk-card-border);
  background: var(--sk-card-bg);
}
.hs-dash-chartcol { display: flex; flex: none; flex-direction: column; align-items: center; gap: 10px; }
.hs-dash-chart { position: relative; width: 275px; height: 140px; }
.hs-dash-svg { position: absolute; top: 17px; left: 36px; width: 231px; height: 92px; overflow: visible; }
.hs-dash-y { position: absolute; top: 0; left: 0; width: 34px; height: 100%; }
.hs-dash-y span { position: absolute; right: 4px; font-size: 8.635px; line-height: 1.4; color: var(--sk-card-ink); }
.hs-dash-y span:nth-child(1) { top: 13px; }
.hs-dash-y span:nth-child(2) { top: 51px; }
.hs-dash-y span:nth-child(3) { top: 88px; }
.hs-dash-x span { position: absolute; top: 110px; font-size: 8.635px; line-height: 1.4; color: var(--sk-card-ink); }
.hs-dash-xtitle { position: absolute; top: 128px; left: 119px; font-size: 8.635px; line-height: 1.4; color: var(--sk-muted); }
.hs-dash-grid { stroke: var(--sk-ink); stroke-width: .86; stroke-dasharray: 2.23 2.23; }
.hs-dash-axis { stroke: var(--sk-ink); stroke-width: .86; }
.hs-dash-stop-top { stop-color: var(--sk-ink); stop-opacity: .16; }
.hs-dash-stop-bottom { stop-color: var(--sk-ink); stop-opacity: 0; }
.hs-dash-secondary { fill: none; stroke: var(--sk-ink); stroke-width: .744; opacity: .45; stroke-dasharray: 2.5 2.5; }
.hs-dash-primary { fill: none; stroke: var(--sk-ink); stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; }
.hs-dash-peak { fill: var(--sk-accent); }
.hs-dash-peak-ring { fill: none; stroke: var(--sk-ink); stroke-width: .8; }

.hs-dash-primary.is-drawn, .hs-dash-secondary.is-drawn { stroke-dashoffset: 1px; }
.hs-dash-primary.is-drawn { stroke-dasharray: 1; animation: hs-dash-draw 1.05s cubic-bezier(.55, .055, .675, 1) .28s forwards; }
.hs-dash-secondary.is-drawn { stroke-dasharray: 1; animation: hs-dash-draw .8s cubic-bezier(.55, .055, .675, 1) .46s forwards; }
.hs-dash-area.is-drawn { opacity: 0; animation: hs-dash-fade .5s cubic-bezier(.215, .61, .355, 1) .86s forwards; }
.hs-dash-peak.is-drawn, .hs-dash-peak-ring.is-drawn { opacity: 0; animation: hs-dash-dot .22s cubic-bezier(.215, .61, .355, 1) 1.15s forwards; }
.hs-dash-tile.is-drawn { opacity: 0; transform: translateY(10px); animation: hs-dash-tile .45s cubic-bezier(.23, 1, .32, 1) forwards; animation-delay: calc(.98s + var(--hs-tile-i, 0) * .06s); }

@keyframes hs-dash-draw { from { stroke-dashoffset: 1px; } to { stroke-dashoffset: 0; } }
@keyframes hs-dash-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes hs-dash-dot { from { opacity: 0; } to { opacity: 1; } }
@keyframes hs-dash-tile { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

.hs-dash-legend { display: flex; align-items: center; gap: 16px; padding: 4px 10px; border-radius: 10.94px; background: var(--sk-card-tint); }
.hs-dash-legenditem { display: flex; align-items: center; gap: 4px; font-size: 7.944px; line-height: 1.4; color: var(--sk-card-ink); }
.hs-dash-legendline { display: block; width: 12px; height: 0; border-top: 1.5px solid var(--sk-ink); }
.hs-dash-legendline.is-dashed { border-top-style: dashed; opacity: .5; }

.hs-dash-tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 5px; flex: none; }
.hs-dash-tile {
  display: flex; flex-direction: column; gap: 2px; justify-content: center;
  width: 102.75px; height: 74px;
  padding: 8px 10.8px;
  border-radius: 9.465px;
  border: 1px solid var(--sk-card-rule);
  background: var(--sk-card-tint);
}
.hs-dash-tile-label { font-size: 8px; line-height: 1.3; font-weight: 500; color: var(--sk-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hs-dash-tile-value { font-size: 16px; line-height: 1.15; font-weight: 700; letter-spacing: -.7px; color: var(--sk-card-ink); }
.hs-dash-tile-footer { font-size: 8px; line-height: 1.3; font-weight: 500; white-space: nowrap; }
.hs-tone-up { color: var(--sk-good); }
.hs-tone-down { color: var(--sk-bad); }
.hs-tone-muted { color: var(--sk-muted); }

/* file card ---------------------------------------------------------------- */
.hs-filecard {
  display: flex; flex-direction: column; gap: 12px;
  width: 299px; max-width: 100%;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid var(--sk-card-border);
  background: var(--sk-card-bg);
  box-shadow: 0 16px 32px -12px var(--sk-card-shadow);
}
.hs-filecard-head { display: flex; align-items: center; gap: 10px; }
.hs-filecard-icon { display: flex; flex: none; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 8px; background: var(--sk-card-tint); color: var(--sk-card-ink); }
.hs-doc-icon { width: 20px; height: 20px; }
.hs-filecard-meta { display: flex; min-width: 0; flex-direction: column; }
.hs-filecard-title { font-size: 13px; line-height: 1.3; font-weight: 700; letter-spacing: -.1px; color: var(--sk-card-ink); }
.hs-filecard-sub { font-size: 11px; line-height: 1.3; color: var(--sk-muted); }
.hs-filecard-preview { display: flex; flex-direction: column; gap: 7px; padding-top: 10px; border-top: 1px solid var(--sk-card-rule); }
.hs-filecard-line { display: flex; align-items: center; gap: 8px; font-size: 11px; line-height: 1.35; color: var(--sk-muted); }
.hs-filecard-rule { flex: 1 1 auto; height: 1px; background: var(--sk-card-rule); }

/* ticket merge ------------------------------------------------------------- */
.hs-mergecard {
  display: flex; align-items: center; gap: 12px;
  width: 300px; max-width: 100%;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid var(--sk-card-border);
  background: var(--sk-card-bg);
}
.hs-mergecard-icon { flex: none; color: var(--sk-card-ink); }
.hs-merge-icon { width: 40px; height: 24px; }
.hs-mergecard-col { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
.hs-mergecard-line { display: flex; align-items: baseline; gap: 6px; font-size: 14px; line-height: 1.2; font-weight: 700; color: var(--sk-card-ink); }
.hs-mergecard-arrow { color: var(--sk-muted); font-weight: 400; }
.hs-mergecard-sub { font-size: 11px; line-height: 1.3; color: var(--sk-muted); }

/* ==========================================================================
   6 · SKIN — SLACK   (an exact port; colours are Slack's own)

   NOTE ON THE ODD NUMBERS. Every dimension here was measured off a real Slack
   window at 109.8% zoom, so it carries that factor: 16.47 = 15 x 1.098,
   30.753 = 28 x 1.098, 8.786 = 8 x 1.098, 13.18 = 12 x 1.098. They are not
   arbitrary and they are not typos. Divide by 1.098 before comparing one to a
   figure quoted from Slack's own CSS, and keep the factor if you add a value.
   ========================================================================== */
.hs--slack {
  --sk-font: 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --sk-ink: #161511;
  --sk-text: #1D1C1D;
  --sk-muted: #716f7e;
  --sk-divider: #cccccc;
  --sk-rail-bg: #ffffff;
  --sk-panel-bg: #ffffff;
  --sk-header-bg: #ffffff;
  --sk-skeleton: #9693a3;
  --sk-chev-muted: rgba(0, 0, 0, .5);
  --sk-chev-section: rgba(0, 0, 0, .7);
  --sk-mention-bg: #e8f5fa;
  --sk-mention-fg: #1264a3;
  --sk-link: #1264a3;
  --sk-pill-bg: #eeeeed;
  --sk-pill-fg: #0d061e;
  --sk-addreact-fg: rgba(13, 6, 30, .6);
  --sk-spinner: #9a93ad;
  --sk-working-label: #6b6577;
  --sk-chip-bg: #ffffff;
  --sk-chip-border: rgba(0, 0, 0, .05);
  --sk-chip-shadow: rgba(26, 24, 41, .18);
  --sk-card-bg: #ffffff;
  --sk-card-tint: #FDFCF8;
  --sk-card-ink: #161511;
  --sk-card-border: rgba(22, 21, 17, .10);
  --sk-card-rule: rgba(22, 21, 17, .10);
  --sk-card-shadow: rgba(26, 24, 41, .14);
  --sk-code-bg: rgba(230, 230, 230, .2);
  --sk-code-border: #dad9da;
  --sk-diff-remove-bg: #fef3f2;
  --sk-diff-remove-fg: #b7302d;
  --sk-diff-add-bg: #f5fef2;
  --sk-diff-add-fg: #146f2e;
  --sk-approve-bg: #007c58;
  --sk-approve-fg: #ffffff;
  --sk-btn-border: #cecece;
  --sk-tag-bg: rgba(0, 0, 0, .10);
  --sk-tag-fg: #4a4a4a;
  --sk-good: #22a06b;
  --sk-good-bg: rgba(34, 160, 107, .1);
  --sk-bad: #c42323;
  --sk-done: #22a06b;
  --sk-accent: #FEED01;
  --sk-tint1: #FDFCF8;
  --sk-tint2: #E9E6DA;
  --sk-tint3: #E7E4D9;
  --sk-tint4: #D8D4C6;
  --sk-avatar-backdrop: #FDFCF8;
  --sk-rail-active: linear-gradient(90deg, rgba(254, 237, 1, 0), rgba(254, 237, 1, .38));
  --sk-rail-hover: rgba(0, 0, 0, .05);
  /* 17.6 region padding + 121.5 box + 17.6, in this skin's 1.098x pixels */
  --hs-composer-h: 157px;
  font-family: var(--sk-font);
}

/* rail */
.hs-slackrail-head { display: flex; align-items: center; gap: 10.5px; width: 100%; height: 100%; padding: 0 15.75px 0 24px; }
.hs-slackrail-title { font-size: 19.4px; line-height: 1.1; font-weight: 700; letter-spacing: -.58px; color: var(--sk-ink); }
.hs-slackrail { display: flex; flex-direction: column; padding: 13.18px 8.786px 0; }
.hs-slackrail-section { display: flex; align-items: center; gap: 4px; padding: 4px 17.573px 4px 8.786px; }
.hs-slackrail-sectiontext { font-size: 16.47px; line-height: 1; color: rgba(0, 0, 0, .7); }
.hs-slackrail-item {
  display: flex; align-items: center; gap: 8.786px;
  height: 30.753px; padding: 0 10.983px 0 13.18px;
  border: 0; border-radius: 6.59px; background: transparent;
  font: inherit; font-size: 16.47px; line-height: 1; text-align: left;
  color: rgba(0, 0, 0, .7); cursor: pointer;
  transition: background-color 140ms ease-out;
}
.hs-slackrail-item:hover { background: var(--sk-rail-hover); }
.hs-slackrail-item.is-active { background: var(--sk-rail-active); font-weight: 600; color: var(--sk-ink); }
.hs-slackrail-item:focus-visible { outline: 2px solid rgba(254, 237, 1, .9); outline-offset: -2px; }
.hs-slackrail-hash { font-weight: 700; }
.hs-slackrail-skel { display: flex; align-items: center; gap: 8.786px; height: 30.753px; padding: 0 10.983px 0 13.18px; }

/* panel header */
.hs-panelhead {
  display: flex; align-items: center; width: 100%; height: 100%;
  border: 0; background: transparent; font: inherit; text-align: left; cursor: pointer;
}
.hs-panelhead--slack { gap: 10.23px; padding: 0 15.209px 0 20px; }
.hs-panelhead-hash, .hs-panelhead-name { font-size: 19.4px; line-height: 1.1; font-weight: 700; letter-spacing: -.58px; color: var(--sk-ink); }
.hs-panelhead:focus-visible { outline: 2px solid rgba(254, 237, 1, .9); outline-offset: -2px; }

/* messages */
.hs-thread--slack .hs-thread-inner { padding-bottom: 12px; }
.hs-slackmsg { display: flex; width: 100%; min-width: 0; gap: 10.519px; padding: 10px 15.789px; }
.hs-slack-avatar {
  position: relative; display: block; width: 39.528px; height: 39.528px; flex: none;
  border-radius: 10.78px; overflow: hidden; background: var(--sk-avatar-backdrop);
  transform: translateZ(0);
}
.hs-slack-avatar.is-sketch { background: var(--sk-accent); }
.hs-slack-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hs-slackmsg-col { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; gap: 3.825px; }
.hs-slack-meta { display: flex; align-items: center; gap: 9.141px; min-height: 16px; }
.hs-slack-name { font-size: 16.443px; line-height: 1; font-weight: 700; color: var(--sk-ink); }
.hs-slack-appbadge {
  padding: 1.098px 3.294px; border-radius: 2.196px;
  background: #1D1C1D0F; color: #454447;
  font-size: 10.98px; line-height: 1; font-weight: 700; text-transform: uppercase;
}
.hs-slack-time { font-size: 13.703px; line-height: 1; color: #616061; }
.hs-slack-text {
  width: 100%;
  font-size: clamp(12px, calc(16px * var(--showcase-scale, 1)), 16px);
  line-height: 1.4;
  color: var(--sk-text);
  word-break: break-word;
}
.hs--slack .hs-mention {
  display: inline-block; padding: 1.098px 2.196px; border-radius: 3.294px;
  background: var(--sk-mention-bg); color: var(--sk-mention-fg);
  font-weight: 600; white-space: nowrap;
}
.hs--slack .hs-attach-host { padding-top: 8.224px; }
.hs--slack .hs-react-host { padding-top: 8.224px; }
.hs--slack .hs-checklist-item,
.hs--slack .hs-checklist-note,
.hs--slack .hs-closing-note,
.hs--slack .hs-link { font-size: clamp(12px, calc(16px * var(--showcase-scale, 1)), 16px); line-height: 1.4; }

/* ---- Slack composer -------------------------------------------------------
   Slack's own measurements, multiplied by the 1.098 zoom this skin is drawn at
   (see the skin note above): region padding 16/24, box hairline + radius 8,
   round 24px icon buttons on a 6% ink wash, placeholder ink at 70%.
   The send button stays in Slack's EMPTY state — grey, not green. Slack only
   turns it green once the box has text in it, and this box never does.
   -------------------------------------------------------------------------- */
.hs-composer--slack { background: var(--sk-panel-bg); }
.hs-composer--slack .hs-composer-scale {
  padding: 17.568px 26.352px;
  border-top: 1px solid #1D1C1D21;
}
.hs-sc-box {
  display: flex; flex-direction: column;
  height: 100%;
  border: 1px solid #1D1C1D21;
  border-radius: 8.784px;
  background: #FFFFFF;
  overflow: hidden;
}
.hs-sc-tools {
  display: flex; align-items: center; gap: 2.196px;
  height: 37.3px; flex: none;
  padding: 0 8.784px;
  border-bottom: 1px solid #1D1C1D21;
  background: #F8F8F8;
}
.hs-sc-fmt {
  display: flex; align-items: center; justify-content: center;
  width: 26.352px; height: 26.352px; flex: none;
  border-radius: 50%;
  font-size: 14.274px; line-height: 1; color: #454447;
}
.hs-sc-fmt--b { font-weight: 700; }
.hs-sc-fmt--i { font-style: italic; font-family: Georgia, 'Times New Roman', serif; }
.hs-sc-fmt--s { text-decoration: line-through; }
.hs-sc-fmtrule { width: 1px; height: 17.568px; flex: none; margin: 0 4.392px; background: #1D1C1D21; }
.hs-sc-fmt-ico { width: 21.96px; height: 21.96px; flex: none; color: #454447; }
.hs-sc-input {
  flex: 1 1 auto; min-height: 0;
  padding: 8.784px 13.176px;
  font-size: 16.47px; line-height: 1.46668; color: #1D1C1DB3;
}
.hs-sc-foot {
  display: flex; align-items: center; justify-content: space-between;
  height: 39.528px; flex: none;
  padding: 0 8.784px;
}
.hs-sc-icons { display: flex; align-items: center; gap: 4.392px; }
.hs-sc-btn, .hs-sc-send {
  display: flex; align-items: center; justify-content: center;
  width: 26.352px; height: 26.352px; flex: none;
  border-radius: 50%; background: #1D1C1D0F;
}
.hs-sc-ico { width: 17.568px; height: 17.568px; color: #454447; }
.hs-sc-send-ico { width: 17.568px; height: 17.568px; color: #1D1C1DB3; }

/* mini drops the formatting rail, the way a narrow Slack window does */
.hs-window--mini.hs--slack { --hs-composer-h: 119px; }
.hs-window--mini.hs--slack .hs-sc-tools { display: none; }

.hs-slack-reactions { display: flex; flex-wrap: wrap; align-items: stretch; gap: 5px; }
.hs-slack-pill {
  display: inline-flex; align-items: center; gap: 4.389px;
  padding: 4.389px 6.584px; border-radius: 999px;
  background: var(--sk-pill-bg); color: var(--sk-pill-fg);
  font-size: 13.168px; line-height: 17.557px;
  transform-origin: bottom left;
}
.hs-addreact { justify-content: center; color: var(--sk-addreact-fg); }
.hs-addreact-glyph { width: 15px; height: 15px; }

/* ==========================================================================
   7 · SKIN — WHATSAPP   (WhatsApp Web, light, group chats — handoff §2.5)
   ========================================================================== */
.hs--whatsapp {
  --sk-font: -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --sk-ink: #161511;
  --sk-text: #111b21;
  --sk-muted: #667781;
  --sk-divider: #e9edef;
  --sk-rail-bg: #ffffff;
  --sk-panel-bg: #efeae2;
  --sk-header-bg: #f0f2f5;
  --sk-skeleton: #d1d7db;
  --sk-chev-muted: #54656f;
  --sk-chev-section: #54656f;
  --sk-mention-fg: #027eb5;
  --sk-link: #027eb5;
  --sk-bubble-bg: #ffffff;
  --sk-bubble-out: #d9fdd3;
  --sk-tick: #53bdeb;
  --sk-bubble-shadow: rgba(11, 20, 26, .13);
  --sk-icon: #54656f;
  --sk-green: #00a884;
  --sk-unread: #25d366;
  --sk-row-active: #f0f2f5;
  --sk-row-hover: #f5f6f6;
  --sk-spinner: #9a93ad;
  --sk-working-label: #667781;
  --sk-chip-bg: #ffffff;
  --sk-chip-border: rgba(11, 20, 26, .08);
  --sk-chip-shadow: rgba(11, 20, 26, .18);
  --sk-card-bg: #f5f6f6;
  --sk-card-tint: #ffffff;
  --sk-card-ink: #111b21;
  --sk-card-border: rgba(11, 20, 26, .09);
  --sk-card-rule: rgba(11, 20, 26, .09);
  --sk-card-shadow: rgba(11, 20, 26, .13);
  --sk-code-bg: rgba(11, 20, 26, .03);
  --sk-code-border: #dfe5e7;
  --sk-diff-remove-bg: #fef3f2;
  --sk-diff-remove-fg: #b7302d;
  --sk-diff-add-bg: #f5fef2;
  --sk-diff-add-fg: #146f2e;
  --sk-btn-border: #dfe5e7;
  --sk-approve-bg: #00a884;
  --sk-approve-fg: #ffffff;
  --sk-tag-bg: rgba(11, 20, 26, .08);
  --sk-tag-fg: #54656f;
  --sk-good: #1fa855;
  --sk-good-bg: rgba(31, 168, 85, .1);
  --sk-bad: #c42323;
  --sk-done: #00a884;
  --sk-accent: #FEED01;
  --sk-tint1: #FDFCF8;
  --sk-tint2: #E9E6DA;
  --sk-tint3: #E7E4D9;
  --sk-tint4: #D8D4C6;
  --sk-name-a: #00a884;
  --sk-name-b: #e542a3;
  --sk-name-c: #1f7aec;
  --sk-name-d: #d69e2e;
  --sk-name-e: #7f66ff;
  /* 5 + 42 pill + 5. The WhatsApp skin is drawn at 1x, so these are real px. */
  --hs-composer-h: 52px;
  font-family: var(--sk-font);
}

/* The wallpaper. WhatsApp's doodle artwork is theirs, so wa-wallpaper.svg is our own
   drawing in the same language: line-art objects, one thin stroke, mixed angles, sunk
   into the ground. A dot grid sat here before and read as a spreadsheet, not a chat. */
.hs--whatsapp .hs-panel {
  background-color: var(--sk-panel-bg);
  background-image: url(wa-wallpaper.svg);
  background-size: 300px 300px;
  background-repeat: repeat;
}
.hs--whatsapp .hs-scroll { background: transparent; }

/* rail */
.hs-warail-head { display: flex; align-items: center; width: 100%; height: 100%; padding: 0 16px 0 20px; }
.hs-warail-title { flex: 1 1 auto; font-size: 22px; line-height: 1.2; font-weight: 600; color: var(--sk-text); }
.hs-warail-actions { display: flex; align-items: center; gap: 6px; }
.hs-wa-iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; color: var(--sk-icon); }
.hs-wa-icon { width: 20px; height: 20px; }
.hs-warail { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.hs-wa-search {
  display: flex; align-items: center; gap: 8px; flex: none;
  height: 35px; margin: 8px 12px; padding: 0 12px;
  border-radius: 8px; background: var(--sk-row-active);
  font-size: 14px; color: var(--sk-muted);
}
.hs-wa-search .hs-wa-icon { width: 16px; height: 16px; }
.hs-wa-list { flex: 1 1 auto; min-height: 0; overflow: hidden; }
.hs-wa-row {
  position: relative; display: flex; align-items: center; gap: 14px;
  width: 100%; height: 72px; padding: 0 14px;
  border: 0; background: transparent; font: inherit; text-align: left; cursor: pointer;
}
.hs-wa-row::after { content: ''; position: absolute; left: 77px; right: 0; bottom: 0; height: 1px; background: var(--sk-divider); }
.hs-wa-row:hover { background: var(--sk-row-hover); }
.hs-wa-row.is-active { background: var(--sk-row-active); }
.hs-wa-row:focus-visible { outline: 2px solid rgba(254, 237, 1, .9); outline-offset: -2px; }
.hs-wa-avatar {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 49px; height: 49px; border-radius: 50%;
  font-size: 18px; font-weight: 700; color: var(--sk-ink);
}
.hs-wa-rowmid { display: flex; min-width: 0; flex: 1 1 auto; flex-direction: column; gap: 2px; }
.hs-wa-rowname { font-size: 17px; line-height: 1.2; color: var(--sk-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hs-wa-rowprev { font-size: 14px; line-height: 1.3; color: var(--sk-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hs-wa-rowright { display: flex; flex: none; flex-direction: column; align-items: flex-end; gap: 6px; }
.hs-wa-rowtime { font-size: 12px; line-height: 1; color: var(--sk-muted); }
.hs-wa-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
  background: var(--sk-unread); color: var(--sk-bubble-bg);
  font-size: 12px; font-weight: 600;
}
.hs-wa-skel { display: flex; align-items: center; gap: 14px; height: 72px; padding: 0 14px; }
.hs-wa-skel-circle { display: block; width: 49px; height: 49px; flex: none; border-radius: 50%; background: var(--sk-skeleton); }
.hs-wa-skel-mid { display: flex; flex-direction: column; gap: 8px; }

/* panel header */
.hs-panelhead--wa { gap: 12px; padding: 0 12px 0 16px; }
.hs-wa-groupavatar {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 40px; height: 40px; border-radius: 50%;
  font-size: 15px; font-weight: 700; color: var(--sk-ink);
}
.hs-wa-headmid { display: flex; min-width: 0; flex: 1 1 auto; flex-direction: column; }
.hs-wa-headtitle { font-size: 16px; line-height: 1.3; color: var(--sk-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hs-wa-headsub { font-size: 13px; line-height: 1.3; color: var(--sk-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hs-wa-headsub.is-typing { color: var(--sk-green); }
.hs-wa-headacts { display: flex; flex: none; align-items: center; gap: 10px; color: var(--sk-icon); }

/* messages */
.hs-thread--whatsapp { padding: 23px 16px 12px; }
.hs-thread--whatsapp .hs-thread-inner { gap: 2px; }
.hs-wa-datepill-row { display: flex; justify-content: center; padding-bottom: 12px; }
.hs-wa-datepill {
  padding: 5px 12px; border-radius: 8px;
  background: var(--sk-bubble-bg); color: var(--sk-icon);
  box-shadow: 0 1px .5px var(--sk-bubble-shadow);
  font-size: 12.5px; letter-spacing: .04em;
}
.hs-wamsg { position: relative; display: flex; align-items: flex-start; gap: 8px; padding-bottom: 10px; }
.hs-wa-msgavatar {
  display: block; flex: none; width: 32px; height: 32px; margin-top: 2px;
  border-radius: 50%; overflow: hidden; background: var(--sk-tint1); transform: translateZ(0);
}
.hs-wa-msgavatar.is-sketch { background: var(--sk-accent); }
.hs-wa-msgavatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hs-wamsg-col { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; flex: 1 1 auto; }
.hs-wabubble {
  position: relative;
  display: flex; flex-direction: column; gap: 2px;
  max-width: min(65%, 560px); min-width: 0;
  padding: 6px 7px 8px 9px;
  border-radius: 7.5px;
  background: var(--sk-bubble-bg);
  box-shadow: 0 1px .5px var(--sk-bubble-shadow);
}
.hs-wa-tail { position: absolute; top: 0; left: -8px; width: 8px; height: 13px; color: var(--sk-bubble-bg); }
.hs-wa-tail-shadow { fill: #0b141a; opacity: .13; }
.hs-wa-tail-fill { fill: currentColor; }
/* the corner the tail grows out of is square, the other three are round */
.hs-wabubble--tail { border-top-left-radius: 0; }
.hs-wabubble--tail.hs-wabubble--out { border-top-left-radius: 7.5px; border-top-right-radius: 0; }
.hs-wa-sender { font-size: 12.8px; line-height: 1.4; font-weight: 600; }
.hs-waname-a { color: var(--sk-name-a); }
.hs-waname-b { color: var(--sk-name-b); }
.hs-waname-c { color: var(--sk-name-c); }
.hs-waname-d { color: var(--sk-name-d); }
.hs-waname-e { color: var(--sk-name-e); }
.hs-wa-text { font-size: clamp(11px, calc(14.2px * var(--showcase-scale, 1)), 14.2px); line-height: 19px; color: var(--sk-text); word-break: break-word; }
.hs--whatsapp .hs-mention { color: var(--sk-mention-fg); font-weight: 500; }
.hs--whatsapp .hs-attach-host { padding-top: 6px; }
.hs--whatsapp .hs-attach { max-width: 100%; }
.hs--whatsapp .hs-checklist-item,
.hs--whatsapp .hs-checklist-note,
.hs--whatsapp .hs-closing-note,
.hs--whatsapp .hs-link { font-size: clamp(11px, calc(14.2px * var(--showcase-scale, 1)), 14.2px); line-height: 19px; }
.hs--whatsapp .hs-onboard,
.hs--whatsapp .hs-statustable,
.hs--whatsapp .hs-filecard,
.hs--whatsapp .hs-mergecard,
.hs--whatsapp .hs-dash { border-radius: 6px; width: 100%; }
.hs--whatsapp .hs-dash { flex-wrap: wrap; justify-content: flex-start; gap: 12px; padding: 12px; }
.hs-wa-footer { display: flex; align-items: center; justify-content: flex-end; margin-top: -2px; }
.hs-wa-time { font-size: 11px; line-height: 1.3; color: var(--sk-muted); }
.hs-wa-reacthost { display: flex; gap: 4px; margin: -10px 0 0 8px; }

/* ---- outgoing bubble (side:'out') — the line Sketch sends ---- */
.hs-wamsg--out { justify-content: flex-end; }
.hs-wamsg--out .hs-wamsg-col { align-items: flex-end; }
.hs-wabubble--out { background: var(--sk-bubble-out); }
.hs-wabubble--out .hs-wa-tail { left: auto; right: -8px; color: var(--sk-bubble-out); transform: scaleX(-1); }
.hs-wa-ticks { flex: none; width: 15px; height: 11px; margin-left: 4px; color: var(--sk-tick); }
.hs-wamsg--out .hs-wa-reacthost { margin: -10px 8px 0 0; }
.hs-wa-pill {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 6px; border-radius: 999px;
  border: 1px solid var(--sk-divider); background: var(--sk-bubble-bg);
  box-shadow: 0 1px 2px var(--sk-bubble-shadow);
  font-size: 12px; color: var(--sk-muted);
  transform-origin: bottom left;
}

/* ---- WhatsApp composer ----------------------------------------------------
   The footer tray: 5px/16px padding, a 12px gap either side of the input, and
   a fully round white pill. Drawn at 1x, like the rest of this skin.
   The glyphs use this skin's own icon grey (#54656f). Today's WhatsApp Web puts
   a filled green circle behind the mic; that belongs to the newer palette, and
   this window is the classic one throughout, so the mic stays a flat glyph.
   -------------------------------------------------------------------------- */
.hs-composer--wa { background: var(--sk-header-bg); }
.hs-wc-bar {
  display: flex; align-items: center; gap: 12px;
  padding: 5px 16px;
  background: var(--sk-header-bg);
}
.hs-wc-ico {
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; flex: none;
  color: var(--sk-icon);
}
.hs-wc-ico .hs-wa-icon { width: 24px; height: 24px; }
.hs-wc-ico + .hs-wc-ico { margin-left: -4px; }
.hs-wc-input {
  flex: 1 1 auto; min-width: 0;
  min-height: 42px;
  padding: 11px 12px;
  border-radius: 9999px;
  background: var(--sk-bubble-bg);
  font-size: 15px; line-height: 20px; color: var(--sk-muted);
}

.hs-wa-pill .hs-pill-emoji { font-size: 14px; }

/* ======================================== 8 · AVATAR + GROUP TINTS (ink-derived) */
/* The four tints are the light values of --card2 / --dot2 / --border / --border2.
   They are declared inside each skin scope (see --sk-tint1..4) so the window
   interior never flips with the page theme — it is an app screenshot. */
.hs-tint-t1 { background: var(--sk-tint1); }
.hs-tint-t2 { background: var(--sk-tint2); }
.hs-tint-t3 { background: var(--sk-tint3); }
.hs-tint-t4 { background: var(--sk-tint4); }

/* ==================================================== 9 · MOTION PREFERENCES */
@media (prefers-reduced-motion: reduce) {
  .hs-toggle-knob { transition: none; }
  .hs-dash-primary.is-drawn,
  .hs-dash-secondary.is-drawn,
  .hs-dash-area.is-drawn,
  .hs-dash-peak.is-drawn,
  .hs-dash-peak-ring.is-drawn,
  .hs-dash-tile.is-drawn { animation: none; opacity: 1; transform: none; stroke-dashoffset: 0; stroke-dasharray: none; }
  .hs-dash-secondary.is-drawn { stroke-dasharray: 2.5 2.5; }
}
.hs-window.hs--coarse .hs-slackrail-item { transition: none; }
.hs-window.hs--coarse * { backface-visibility: visible; }

/* ============================================ 10 · MINI MODE (mode:'mini')
   A mini fills the body of a page frame (`.still` on the homepage: --card,
   1px --border2, radius 18, --chipshadow). It therefore draws no frame of its
   own — the page's frame is the frame. Rail hidden, no toggle, no dropdown,
   fixed height (633 × scale, capped by maxHeight), so nothing it does can
   change document layout.
   ========================================================================== */
.hs-host--mini { width: 100%; margin-left: 0; transform: none; }
.hs-window--mini { border: 0; border-radius: 0; box-shadow: none; }
.hs-window--mini .hs-header { border-top-left-radius: 16px; border-top-right-radius: 16px; }
.hs-window--mini .hs-slackmsg { gap: 9px; padding: 8px 14px; }
.hs-window--mini .hs-slack-avatar { width: 34px; height: 34px; border-radius: 9px; }
.hs-window--mini .hs-slack-name { font-size: 14.4px; }
.hs-window--mini .hs-slack-time { font-size: 12px; }
.hs-window--mini .hs-slack-text,
.hs-window--mini .hs--slack .hs-checklist-item,
.hs-window--mini .hs--slack .hs-closing-note,
.hs-window--mini .hs--slack .hs-link { font-size: clamp(11px, calc(16px * var(--showcase-scale, 1)), 16px); }
.hs-window--mini .hs-thread--whatsapp { padding: 18px 14px 10px; }
.hs-window--mini .hs-wa-msgavatar { width: 28px; height: 28px; }
.hs-window--mini .hs-wabubble { max-width: min(74%, 420px); }
.hs-window--mini .hs-wa-headtitle { font-size: 15px; }
.hs-window--mini .hs-wa-groupavatar { width: 36px; height: 36px; font-size: 14px; }
/* both classes sit on the same element (showcase.js:896), so this is one selector */
.hs-window--mini.hs--whatsapp .hs-panel { background-size: 200px 200px; }

/* ================================================== 11 · NARROW / MOBILE */
@media (max-width: 767px) {
  .hs-host { width: calc(100vw - 32px); }
  .hs-host--mini { width: 100%; }
  .hs-thread--whatsapp { padding: 20px 10px 12px; }
  .hs-wabubble { max-width: 86%; }
  .hs-slackmsg { padding: 10px 12px; }
}

/* ============================================ 12 · PHONE MODE (mode:'phone')
   The widget at a phone's own size. No 772×633 canvas scaled down: the scale
   stays 1, so Slack's and WhatsApp's own type sizes survive. The rail is never
   rendered; a snap-scrolling channel strip sits under the header. The frame is
   the page's `.still` look (--card, 1px --border2, radius 18, --chipshadow).
   ========================================================================== */
.hs-host--phone { width: 100%; margin-left: 0; transform: none; }
.hs-window--phone {
  border: 1px solid var(--border2);
  border-radius: 18px;
  box-shadow: var(--chipshadow);
  --hs-phone-head: 56px;
  --hs-phone-strip: 44px;
  --hs-tab-w: 104px;
  --hs-toggle-track-w: calc(var(--hs-tabs) * 104px + 12px);
}
.hs-window--phone .hs-rail { display: none; }
/* a phone shows the wallpaper at phone scale, the way the app does */
.hs-window--phone.hs--whatsapp .hs-panel { background-size: 190px 190px; }
.hs-window--phone .hs-header {
  height: var(--hs-phone-head);
  padding-right: 8px;
  border-top-left-radius: 17px;
  border-top-right-radius: 17px;
}
.hs-window--phone .hs-header-title-scale { height: var(--hs-phone-head); width: 100%; transform: none; }
.hs-window--phone .hs-toggle-holder { height: 36px; }
.hs-window--phone .hs-toggle-scale { transform: translateY(-50%); }
.hs-window--phone .hs-toggle { height: 36px; padding: 3px 6px; }
.hs-window--phone .hs-toggle-knob { height: 30px; }
.hs-window--phone .hs-toggle-tab { height: 30px; gap: 5px; font-size: 11px; }
.hs-window--phone .hs-toggle-icon { width: 15px; height: 15px; }

/* ---- the channel strip --------------------------------------------------- */
.hs-strip {
  position: absolute;
  top: var(--hs-phone-head); left: 0; right: 0;
  z-index: 15;
  display: flex;
  align-items: center;
  gap: 6px;
  height: var(--hs-phone-strip);
  padding: 0 10px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  border-bottom: 1px solid var(--sk-divider);
  background: var(--sk-header-bg);
}
.hs-strip::-webkit-scrollbar { width: 0; height: 0; }
.hs-strip-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: none;
  height: 30px;
  padding: 0 12px;
  border: 1px solid var(--border2);
  border-radius: 999px;
  background: var(--card);
  color: var(--secondary);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12.5px;
  line-height: 1;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  scroll-snap-align: center;
  -webkit-tap-highlight-color: transparent;
}
.hs-strip-item.is-active {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--card);
  font-weight: 600;
}
.hs-strip-item:focus-visible { outline: 2px solid rgba(254, 237, 1, .9); outline-offset: 1px; }
.hs-strip-hash { font-weight: 700; opacity: .55; }
.hs-strip-dot {
  width: 6px; height: 6px; flex: none;
  border-radius: 50%;
  background: var(--yellow);
  box-shadow: 0 0 0 1px rgba(22, 21, 17, .18);
}

/* ---- native type: no clamp follows --showcase-scale in this mode ---------- */
.hs-window--phone .hs-slackmsg { gap: 9px; padding: 9px 14px; }
.hs-window--phone .hs-slack-avatar { width: 36px; height: 36px; border-radius: 10px; }
.hs-window--phone .hs-slack-name { font-size: 14.5px; }
.hs-window--phone .hs-slack-time { font-size: 11px; }
.hs-window--phone .hs-slack-appbadge { font-size: 9.5px; }
.hs-window--phone .hs-slack-text,
.hs-window--phone .hs--slack .hs-checklist-item,
.hs-window--phone .hs--slack .hs-checklist-note,
.hs-window--phone .hs--slack .hs-closing-note,
.hs-window--phone .hs--slack .hs-link { font-size: 15px; line-height: 1.46; }
.hs-window--phone .hs-slack-pill { font-size: 12px; line-height: 16px; }

.hs-window--phone.hs--slack { --hs-composer-h: 94px; }
.hs-window--phone.hs--slack .hs-sc-tools { display: none; }
.hs-window--phone.hs--slack .hs-composer-scale { padding: 8px 10px; }
.hs-window--phone.hs--slack .hs-sc-input { padding: 8px 12px; font-size: 15px; }
.hs-window--phone.hs--slack .hs-sc-foot { height: 36px; }
.hs-window--phone .hs-thread--whatsapp { padding: 16px 10px 12px; }
.hs-window--phone .hs-wa-msgavatar { width: 28px; height: 28px; }
.hs-window--phone .hs-wabubble { max-width: min(84%, 460px); }
.hs-window--phone .hs-wa-text,
.hs-window--phone .hs--whatsapp .hs-checklist-item,
.hs-window--phone .hs--whatsapp .hs-checklist-note,
.hs-window--phone .hs--whatsapp .hs-closing-note,
.hs-window--phone .hs--whatsapp .hs-link { font-size: 14.2px; line-height: 19px; }
.hs-window--phone .hs-wa-sender { font-size: 12.4px; }
.hs-window--phone .hs-wa-time { font-size: 11px; }
.hs-window--phone .hs-wa-headtitle { font-size: 15px; }
.hs-window--phone .hs-wa-headsub { font-size: 11.5px; }
.hs-window--phone .hs-wa-groupavatar { width: 32px; height: 32px; font-size: 13px; }
.hs-window--phone .hs-wa-headacts { display: none; }

/* attachment titles read at 13px on a phone */
.hs-window--phone .hs-onboard-title,
.hs-window--phone .hs-statustable-title,
.hs-window--phone .hs-filecard-title,
.hs-window--phone .hs-codefix-title,
.hs-window--phone .hs-codefix-file { font-size: 13px; }
.hs-window--phone .hs-attach { max-width: 100%; }
.hs-window--phone .hs-codefix { max-width: 100%; }