/* Closo Help Sheet — adapted from Claude Design handoff (2026-05-05).
   Keeps .hc-* prefix used by closo-help-sheet.js + the in-platform integration.
   Original design used .hs-*; merged here so a future re-render swap is one
   global find-replace. */

:root {
  /* Brand */
  --hc-closo-purple: #452B90;
  --hc-closo-purple-600: #5A3DAB;
  --hc-closo-purple-700: #3B2580;
  --hc-closo-purple-50: #F4F0FB;
  --hc-closo-purple-100: #E8E0F5;
  --hc-closo-purple-200: #D4C7EC;

  /* Neutrals */
  --hc-ink-900: #0F0B1F;
  --hc-ink-700: #2A2440;
  --hc-ink-600: #4A4458;
  --hc-ink-500: #6B6580;
  --hc-ink-400: #9A95AB;
  --hc-ink-300: #C8C3D4;
  --hc-ink-200: #E5E1ED;
  --hc-ink-100: #F2EFF6;
  --hc-ink-50:  #FAF9FC;
  --hc-bg:      #FBFAFD;
  --hc-surface: #FFFFFF;
  --hc-border:  #ECE8F2;
  --hc-border-strong: #D9D3E2;

  /* Status */
  --hc-info-50:   #EEF4FF; --hc-info-500:   #3B61E0; --hc-info-700:   #1E3A8A;
  --hc-warn-50:   #FFF6E5; --hc-warn-500:   #B07000; --hc-warn-700:   #8A5500;
  --hc-danger-50: #FDECEC; --hc-danger-500: #C02E2E; --hc-danger-700: #8E1F1F;
  --hc-tip-50:    #F4F0FB; --hc-tip-500:    #5A3DAB; --hc-tip-700:    #3B2580;
  --hc-success-500: #1F8A4C;

  /* Sheet */
  --hc-sheet-w: 460px;
  --hc-sheet-z: 9990;

  /* Type */
  --hc-font-display: "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --hc-font-body:    "Inter",   "Helvetica Neue", Helvetica, Arial, sans-serif;
  --hc-font-mono:    "JetBrains Mono", "SF Mono", ui-monospace, Menlo, monospace;

  /* Radii / shadow */
  --hc-r-sm: 6px; --hc-r-md: 10px; --hc-r-lg: 14px; --hc-r-xl: 20px;
  --hc-shadow-sm: 0 1px 2px rgba(15,11,31,0.04);
  --hc-shadow-md: 0 8px 24px rgba(15,11,31,0.08);
  --hc-shadow-lg: 0 24px 60px rgba(15,11,31,0.18);
}

/* ── Trigger button (shared base) ─────────────────────────────────
   The trigger ships in two variants: --menu (sidebar entry) and
   --fab (floating pill on surfaces without a sidebar). The base
   class stays minimal so each variant defines its own metrics. */
.hc-trigger {
  background: transparent; border: 0; cursor: pointer;
  font-family: var(--hc-font-body, poppins, sans-serif);
  text-align: left;
}

/* ── Sidebar standalone block ─────────────────────────────────────
   Pinned to the divider line at the bottom of .deznav-scroll, just
   above the "Free Actions / Refills" widget. Not part of metismenu
   — sits as its own block so it's clearly an auxiliary tool, not a
   navigation entry. Layout-aware: inherits Closo seller-chrome
   metrics (poppins, 0.875rem nav-text, .85rem 1.5rem padding,
   text-gray default → secondary on hover). */
.deznav .deznav-scroll .hc-sidebar-block {
  flex: 0 0 auto;
  margin: 0;
  padding: 8px 0;
}
.deznav .deznav-scroll .hc-sidebar-block .hc-trigger.hc-trigger--menu {
  display: flex; align-items: center; gap: 0.3125rem;
  width: 100%;
  padding: 0.7rem 1.5rem;
  font-family: poppins, sans-serif;
  font-size: 0.875rem; font-weight: 500;
  color: var(--text-gray, #737B8B);
  text-decoration: none; cursor: pointer;
  background: transparent; border: 0;
  text-align: left;
  transition: color 120ms;
}
.deznav .deznav-scroll .hc-sidebar-block .hc-trigger.hc-trigger--menu:hover,
.deznav .deznav-scroll .hc-sidebar-block .hc-trigger.hc-trigger--menu:focus-visible {
  color: var(--secondary, #F8B940);
  outline: none;
}
.deznav .deznav-scroll .hc-sidebar-block .hc-trigger.hc-trigger--menu[aria-expanded="true"] {
  color: var(--secondary, #F8B940);
}
.deznav .deznav-scroll .hc-sidebar-block .menu-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: auto; height: auto; margin-right: 0.3125rem;
}
.deznav .deznav-scroll .hc-sidebar-block .menu-icon svg {
  width: 1.25rem; height: 1.25rem;
  color: var(--primary, #452B90);
  margin: 0;
}
.deznav .deznav-scroll .hc-sidebar-block .hc-trigger:hover .menu-icon svg,
.deznav .deznav-scroll .hc-sidebar-block .hc-trigger:focus-visible .menu-icon svg {
  color: var(--secondary, #F8B940);
}
/* Two-line layout: title on top, subtitle "X articles" underneath
   with a deliberate gap so the entry breathes against the divider. */
.hc-trigger__body {
  display: flex; flex-direction: column;
  gap: 4px; line-height: 1.2; min-width: 0;
}
.hc-trigger__title {
  font-size: 0.875rem; font-weight: 500;
  color: inherit;
}
.hc-trigger__sub {
  font-size: 0.6875rem; font-weight: 400;
  color: var(--text-gray, #737B8B);
  opacity: 0.85;
  letter-spacing: 0.01em;
}
/* Hide the body when DlabNav collapses to icon-mode; the menu-toggle
   wrapper hides nav-text everywhere else, keep parity. The icon
   stays visible so the trigger remains accessible in collapsed mode. */
.menu-toggle .deznav .deznav-scroll .hc-sidebar-block .hc-trigger__body { display: none; }
.menu-toggle .deznav .deznav-scroll .hc-sidebar-block .hc-trigger.hc-trigger--menu {
  justify-content: center;
}

/* Floating action button — used when no sidebar slot exists
   (admin SPA, public pages, narrow viewports). */
.hc-trigger.hc-trigger--fab {
  position: fixed; right: 20px; bottom: 20px;
  width: auto; min-width: 52px; height: 52px;
  padding: 0 18px 0 16px; border-radius: 26px;
  background: var(--primary, var(--hc-closo-purple)); color: #fff;
  box-shadow: 0 6px 20px rgba(69,43,144,0.35);
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 14px; font-weight: 600;
  font-family: poppins, var(--hc-font-body), sans-serif;
  z-index: calc(var(--hc-sheet-z) - 1);
  transition: transform 120ms, box-shadow 120ms;
}
.hc-trigger.hc-trigger--fab:hover,
.hc-trigger.hc-trigger--fab:focus-visible {
  background: var(--primary-hover, #321f69); color: #fff;
  box-shadow: 0 10px 26px rgba(69,43,144,0.45);
  transform: translateY(-1px);
  outline: none;
}
.hc-trigger.hc-trigger--fab .hc-trigger__fab-icon svg { width: 20px; height: 20px; }
.hc-trigger.hc-trigger--fab .hc-trigger__fab-label { line-height: 1; }

@media (max-width: 768px) {
  .hc-trigger.hc-trigger--fab {
    right: 16px; bottom: 16px;
    width: 52px; min-width: 52px; padding: 0;
    justify-content: center;
  }
  .hc-trigger.hc-trigger--fab .hc-trigger__fab-label { display: none; }
  .hc-trigger.hc-trigger--fab .hc-trigger__fab-icon svg { width: 22px; height: 22px; }
}

/* ── Backdrop + sheet container ──────────────────────────────────────
   The root is a top-level fixed overlay above ALL page chrome (DlabNav
   header z-3, .footer, sticky widgets). Both backdrop and panel use
   position:fixed so they escape any stacking-context their parent
   might create (transformed ancestors break z-index in some browsers).
   Body scroll-lock (added via JS) prevents the page from scrolling
   behind the sheet and prevents the layout-shift from scrollbar
   removal on Windows/Chromium. */
.hc-sheet-root { position: fixed; inset: 0; z-index: var(--hc-sheet-z); pointer-events: none; }
.hc-sheet-root[data-state="closed"] { display: none; }
.hc-sheet-root:not([data-state="closed"]) { pointer-events: auto; }

.hc-sheet-backdrop {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  width: 100vw; height: 100vh; height: 100dvh;
  background: rgba(15,11,31,0); backdrop-filter: blur(0);
  transition: background 200ms cubic-bezier(0.32, 0.72, 0, 1), backdrop-filter 200ms;
  z-index: var(--hc-sheet-z);
  pointer-events: none;
}
.hc-sheet-root.hc-sheet--open .hc-sheet-backdrop {
  background: rgba(15,11,31,0.32); backdrop-filter: blur(2px);
  pointer-events: auto;
}

.hc-sheet {
  position: fixed; right: 0; top: 0;
  width: var(--hc-sheet-w); max-width: 100vw;
  height: 100vh; height: 100dvh;
  background: var(--hc-surface); border-left: 1px solid var(--hc-border);
  display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform 220ms cubic-bezier(0.32, 0.72, 0, 1);
  box-shadow: var(--hc-shadow-lg);
  font-family: var(--hc-font-body); color: var(--hc-ink-900);
  z-index: calc(var(--hc-sheet-z) + 1);
}
.hc-sheet-root.hc-sheet--open .hc-sheet { transform: translateX(0); }

@media (max-width: 768px) {
  .hc-sheet {
    width: 100vw; height: 92vh; height: 92dvh; top: auto; bottom: 0;
    border-left: 0; border-top: 1px solid var(--hc-border);
    border-radius: 16px 16px 0 0;
    transform: translateY(100%);
  }
  .hc-sheet-root.hc-sheet--open .hc-sheet { transform: translateY(0); }
}

/* Body scroll-lock applied while sheet is open (paired with JS that
   stamps padding-right = scrollbar width to prevent page shift). */
body.hc-no-scroll {
  overflow: hidden !important;
  /* the JS sets a CSS var with the actual scrollbar width measured
     before locking — we read it back as padding-right to compensate. */
  padding-right: var(--hc-scrollbar-pad, 0px) !important;
}

/* ── Header ──────────────────────────────────────────────────────── */
.hc-sheet__header {
  flex-shrink: 0;
  padding: 14px 14px 12px;
  border-bottom: 1px solid var(--hc-border);
  background: white;
  position: relative; z-index: 2;
}
.hc-header-top {
  display: grid; grid-template-columns: 32px 1fr 32px;
  gap: 8px; align-items: center; margin-bottom: 12px;
}
.hc-header-pad { width: 32px; height: 32px; }
.hc-sheet__back, .hc-sheet__close {
  width: 32px; height: 32px; border-radius: var(--hc-r-sm);
  display: grid; place-items: center;
  background: transparent; border: 0; cursor: pointer;
  color: var(--hc-ink-600); transition: background 120ms;
}
.hc-sheet__back:hover, .hc-sheet__close:hover { background: var(--hc-ink-100); color: var(--hc-ink-900); }
.hc-header-titles { min-width: 0; text-align: center; }
.hc-sheet__crumb {
  font-size: 11.5px; font-weight: 500;
  color: var(--hc-closo-purple); letter-spacing: 0.02em; text-transform: uppercase;
  margin-bottom: 2px;
}
.hc-sheet__title {
  font-family: var(--hc-font-display);
  font-size: 15px; font-weight: 600;
  margin: 0; letter-spacing: -0.01em; color: var(--hc-ink-900);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Search input row */
.hc-search {
  display: flex; align-items: center; gap: 8px;
  background: var(--hc-ink-50); border: 1px solid var(--hc-border);
  border-radius: var(--hc-r-md); padding: 0 10px; height: 38px;
  transition: border-color 120ms, background 120ms;
}
.hc-search:focus-within {
  background: white; border-color: var(--hc-closo-purple-200);
  box-shadow: 0 0 0 3px var(--hc-closo-purple-50);
}
.hc-search svg { color: var(--hc-ink-400); flex-shrink: 0; }
.hc-search__input {
  flex: 1; border: 0; outline: 0; background: transparent;
  font-family: var(--hc-font-body); font-size: 13.5px; color: var(--hc-ink-900);
}
.hc-search__input::placeholder { color: var(--hc-ink-400); }
.hc-search__clear {
  width: 22px; height: 22px; border-radius: 4px;
  display: grid; place-items: center;
  color: var(--hc-ink-400); background: transparent; border: 0; cursor: pointer;
}
.hc-search__clear:hover { background: var(--hc-ink-100); color: var(--hc-ink-700); }

/* ── Body / scroll ───────────────────────────────────────────────── */
.hc-sheet__body { flex: 1; overflow: hidden; position: relative; }
.hc-scroll {
  position: absolute; inset: 0; overflow-y: auto;
  padding: 16px 16px 24px;
}
.hc-section { margin-bottom: 22px; }
.hc-section:last-child { margin-bottom: 8px; }
.hc-section__h {
  font-family: var(--hc-font-display);
  font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--hc-ink-500); margin: 0 0 10px; padding: 0 2px;
}
.hc-section-context {
  font-family: var(--hc-font-mono); font-size: 10.5px; color: var(--hc-ink-400);
  background: var(--hc-ink-50); padding: 2px 6px; border-radius: 4px;
  border: 1px solid var(--hc-border);
}

/* ── Recent error banner ─────────────────────────────────────────── */
.hc-error-banner {
  width: 100%;
  display: grid; grid-template-columns: 32px 1fr auto;
  gap: 10px; align-items: center;
  background: var(--hc-danger-50); border: 1px solid #F4C9C9;
  border-radius: var(--hc-r-md); padding: 10px 12px;
  margin-bottom: 16px; text-align: left; cursor: pointer;
  transition: transform 120ms;
  font-family: inherit;
}
.hc-error-banner:hover { transform: translateY(-1px); }
.hc-error-icon {
  width: 32px; height: 32px; border-radius: 8px;
  background: white; color: var(--hc-danger-500);
  display: grid; place-items: center;
}
.hc-error-label {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--hc-danger-700); font-weight: 600;
}
.hc-error-msg { font-size: 13px; color: var(--hc-ink-900); font-weight: 500; }
.hc-error-link {
  font-size: 12px; font-weight: 500; color: var(--hc-danger-700);
  display: flex; align-items: center; gap: 4px;
}

/* ── Suggested cards ─────────────────────────────────────────────── */
.hc-suggested { display: flex; flex-direction: column; gap: 8px; }
.hc-tile {
  display: block; width: 100%; text-align: left;
  background: white; border: 1px solid var(--hc-border);
  border-radius: var(--hc-r-md); padding: 12px 14px;
  transition: border-color 120ms, transform 120ms, box-shadow 120ms;
  position: relative; cursor: pointer; color: inherit; text-decoration: none;
  font-family: inherit;
}
.hc-tile::before {
  content: ""; position: absolute; left: 0; top: 12px; bottom: 12px;
  width: 2px; background: var(--hc-closo-purple);
  border-radius: 0 2px 2px 0;
  opacity: 0; transition: opacity 120ms;
}
.hc-tile:hover {
  border-color: var(--hc-closo-purple-200);
  box-shadow: var(--hc-shadow-sm); transform: translateY(-1px);
}
.hc-tile:hover::before { opacity: 1; }
.hc-tile__title {
  font-family: var(--hc-font-display); font-size: 14px; font-weight: 600;
  color: var(--hc-ink-900); margin-bottom: 4px; letter-spacing: -0.005em;
}
.hc-tile__sub {
  font-size: 12.5px; color: var(--hc-ink-500); line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.hc-tile__meta { margin-top: 8px; display: flex; gap: 6px; flex-wrap: wrap; }
.hc-tile__crumb {
  font-size: 11px; background: var(--hc-closo-purple-50); color: var(--hc-closo-purple);
  padding: 2px 8px; border-radius: 999px; font-weight: 500;
}
.hc-tile__pct {
  font-size: 11px; color: var(--hc-ink-500);
  padding: 2px 8px; border-radius: 999px; background: var(--hc-ink-50); font-weight: 500;
}

/* ── Collection grid (list view) ─────────────────────────────────── */
.hc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.hc-grid-item {
  background: white; border: 1px solid var(--hc-border);
  border-radius: var(--hc-r-md); padding: 12px;
  text-align: left; cursor: pointer; color: inherit; text-decoration: none;
  font-family: inherit;
  transition: border-color 120ms, transform 120ms, box-shadow 120ms, background 120ms;
}
.hc-grid-item:hover {
  border-color: var(--hc-closo-purple-200); background: var(--hc-closo-purple-50);
  transform: translateY(-1px);
}
.hc-grid-item__icon {
  width: 32px; height: 32px; border-radius: 8px;
  background: var(--hc-closo-purple-50); color: var(--hc-closo-purple);
  display: grid; place-items: center; margin-bottom: 8px;
}
.hc-grid-item:hover .hc-grid-item__icon { background: white; }
.hc-grid-item__title {
  font-family: var(--hc-font-display); font-size: 13px; font-weight: 600;
  color: var(--hc-ink-900); margin-bottom: 6px; letter-spacing: -0.005em;
  line-height: 1.3;
}
.hc-grid-item__count {
  font-size: 11.5px; color: var(--hc-ink-500);
  line-height: 1.2;
}

/* ── Popular rows ───────────────────────────────────────────────── */
.hc-popular { display: flex; flex-direction: column; gap: 1px; }
.hc-pop-row {
  display: grid; grid-template-columns: 28px 1fr 16px; gap: 10px; align-items: center;
  padding: 10px 12px; border-radius: var(--hc-r-sm); text-align: left;
  background: transparent; border: 0; cursor: pointer; color: inherit;
  font-family: inherit; transition: background 120ms;
}
.hc-pop-row:hover { background: var(--hc-ink-50); }
.hc-pop-row__num { font-family: var(--hc-font-mono); font-size: 11px; color: var(--hc-ink-400); font-weight: 500; }
.hc-pop-row__title { font-size: 13px; color: var(--hc-ink-700); font-weight: 500; }
.hc-pop-row:hover .hc-pop-row__title { color: var(--hc-closo-purple); }
.hc-pop-row svg { color: var(--hc-ink-400); }

/* ── Search results ─────────────────────────────────────────────── */
.hc-results-meta { font-size: 12px; color: var(--hc-ink-500); padding: 0 2px 12px; }
.hc-results { display: flex; flex-direction: column; gap: 4px; }
.hc-result {
  display: block; width: 100%; text-align: left;
  background: white; border: 1px solid var(--hc-border);
  border-radius: var(--hc-r-md); padding: 12px 14px;
  transition: border-color 120ms, background 120ms; cursor: pointer;
  color: inherit; font-family: inherit;
}
.hc-result:hover {
  border-color: var(--hc-closo-purple-200); background: var(--hc-closo-purple-50);
}
.hc-result__title {
  font-family: var(--hc-font-display); font-size: 14px; font-weight: 600;
  color: var(--hc-ink-900); margin-bottom: 4px; letter-spacing: -0.005em;
}
.hc-result__snippet {
  font-size: 12.5px; color: var(--hc-ink-500); line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.hc-result__meta { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
.hc-result__crumb { font-size: 11px; color: var(--hc-ink-500); font-weight: 500; }
.hc-result__snippet mark { background: #FFF1A8; color: inherit; padding: 0 2px; border-radius: 2px; }

/* ── Empty / feedback ───────────────────────────────────────────── */
.hc-no-result {
  text-align: center; padding: 32px 16px;
  display: flex; flex-direction: column; align-items: center;
}
.hc-no-result__icon {
  width: 56px; height: 56px; border-radius: 14px;
  background: var(--hc-closo-purple-50); color: var(--hc-closo-purple);
  display: grid; place-items: center; margin-bottom: 12px;
}
.hc-no-result__icon--ok {
  background: #E8F5EE; color: var(--hc-success-500);
  font-size: 26px; font-weight: 600;
}
.hc-no-result__title {
  font-family: var(--hc-font-display); font-size: 16px; font-weight: 600;
  margin: 0 0 6px; color: var(--hc-ink-900); letter-spacing: -0.01em;
}
.hc-no-result__hint {
  font-size: 13px; color: var(--hc-ink-500); margin: 0 0 16px; max-width: 320px;
}
.hc-no-result textarea {
  width: 100%; min-height: 84px; padding: 10px 12px;
  border: 1px solid var(--hc-border); border-radius: var(--hc-r-md);
  background: white; font-size: 13px; font-family: var(--hc-font-body);
  resize: vertical; margin-bottom: 12px; outline: 0;
  transition: border-color 120ms, box-shadow 120ms;
}
.hc-no-result textarea:focus {
  border-color: var(--hc-closo-purple-200);
  box-shadow: 0 0 0 3px var(--hc-closo-purple-50);
}
.hc-btn-primary, .hc-helpful__btn[data-variant="primary"] {
  background: var(--hc-closo-purple); color: white;
  font-weight: 600; font-size: 13px; padding: 9px 18px;
  border-radius: var(--hc-r-md); border: 0; cursor: pointer;
  transition: background 120ms; font-family: inherit;
}
.hc-btn-primary:hover { background: var(--hc-closo-purple-700); }
.hc-btn-primary:disabled { opacity: 0.4; cursor: not-allowed; }

/* ── Footer ──────────────────────────────────────────────────────── */
.hc-sheet__footer {
  flex-shrink: 0;
  display: flex; border-top: 1px solid var(--hc-border);
  background: var(--hc-ink-50);
}
.hc-sheet__footer a {
  flex: 1;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 12px;
  font-size: 12.5px; font-weight: 500;
  color: var(--hc-closo-purple); text-decoration: none;
  transition: background 120ms;
}
.hc-sheet__footer a:hover { background: var(--hc-closo-purple-50); }
.hc-sheet__footer a + a {
  color: var(--hc-ink-600); border-left: 1px solid var(--hc-border);
}
.hc-sheet__footer a + a:hover { background: var(--hc-ink-100); }

/* ── Collection sub-route inside sheet ──────────────────────────── */
.hc-coll-header {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 4px 2px 16px; margin-bottom: 8px;
  border-bottom: 1px solid var(--hc-border);
}
.hc-coll-header__icon {
  width: 44px; height: 44px; border-radius: 10px;
  background: var(--hc-closo-purple-50); color: var(--hc-closo-purple);
  display: grid; place-items: center; flex-shrink: 0;
}
.hc-coll-header__title {
  font-family: var(--hc-font-display); font-size: 18px; font-weight: 600;
  margin: 0 0 4px; letter-spacing: -0.01em;
}
.hc-coll-header__desc { font-size: 13px; color: var(--hc-ink-500); margin: 0; }

/* ── Article body ────────────────────────────────────────────────── */
.hc-article { max-width: 100%; line-height: 1.7; padding: 0; }
.hc-article__crumb {
  font-size: 11.5px; font-weight: 500;
  color: var(--hc-closo-purple); letter-spacing: 0.02em; text-transform: uppercase;
  margin-bottom: 6px;
}
.hc-article__title {
  font-family: var(--hc-font-display); font-size: 22px; font-weight: 600;
  letter-spacing: -0.02em; color: var(--hc-ink-900);
  margin: 0 0 8px; line-height: 1.25;
}
.hc-article__lede {
  font-size: 14.5px; color: var(--hc-ink-600); line-height: 1.55;
  margin: 0 0 14px;
}
.hc-article__meta {
  display: flex; gap: 12px; flex-wrap: wrap;
  font-size: 11.5px; color: var(--hc-ink-500);
  padding-bottom: 14px; margin-bottom: 16px;
  border-bottom: 1px solid var(--hc-border);
  align-items: center;
}
.hc-version-chip {
  font-family: var(--hc-font-mono); font-size: 10.5px;
  background: var(--hc-closo-purple-50); color: var(--hc-closo-purple);
  padding: 2px 7px; border-radius: 4px; font-weight: 500;
}

.hc-article__body { font-size: 14px; }
.hc-p { margin: 0 0 14px; color: var(--hc-ink-700); }
.hc-h, .hc-h-2 {
  font-family: var(--hc-font-display); font-size: 17px; font-weight: 600;
  margin: 24px 0 10px; letter-spacing: -0.01em; color: var(--hc-ink-900);
}
.hc-h-3 {
  font-family: var(--hc-font-display); font-size: 15px; font-weight: 600;
  margin: 18px 0 8px; color: var(--hc-ink-900);
}

/* Callouts */
.hc-callout {
  display: grid; grid-template-columns: 28px 1fr; gap: 10px;
  padding: 12px 14px; border-radius: var(--hc-r-md);
  margin: 12px 0 16px; border: 1px solid;
}
.hc-callout__icon {
  width: 24px; height: 24px;
  display: grid; place-items: center; border-radius: 6px;
}
.hc-callout__title { font-weight: 600; font-size: 13.5px; margin-bottom: 2px; }
.hc-callout__body  { font-size: 13px; line-height: 1.55; }
.hc-callout--info   { background: var(--hc-info-50);   border-color: #C7D5F5; color: var(--hc-info-700); }
.hc-callout--info   .hc-callout__icon { background: white; color: var(--hc-info-500); }
.hc-callout--warn   { background: var(--hc-warn-50);   border-color: #F5DCA8; color: var(--hc-warn-700); }
.hc-callout--warn   .hc-callout__icon { background: white; color: var(--hc-warn-500); }
.hc-callout--danger { background: var(--hc-danger-50); border-color: #F4C9C9; color: var(--hc-danger-700); }
.hc-callout--danger .hc-callout__icon { background: white; color: var(--hc-danger-500); }
.hc-callout--tip    { background: var(--hc-tip-50);    border-color: var(--hc-closo-purple-200); color: var(--hc-tip-700); }
.hc-callout--tip    .hc-callout__icon { background: white; color: var(--hc-closo-purple); }

/* Code */
.hc-code {
  background: #0F172A; border-radius: var(--hc-r-md);
  margin: 14px 0; overflow: hidden;
}
.hc-code__bar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 10px 6px 14px; background: rgba(255,255,255,0.04);
}
.hc-code__lang {
  font-family: var(--hc-font-mono); font-size: 11px;
  color: #8B95B7; text-transform: uppercase; letter-spacing: 0.05em;
}
.hc-code__copy {
  display: flex; align-items: center; gap: 4px;
  font-family: var(--hc-font-mono); font-size: 11px; color: #C7CDE0;
  padding: 4px 8px; border-radius: 4px;
  background: transparent; border: 0; cursor: pointer;
  transition: background 120ms;
}
.hc-code__copy:hover { background: rgba(255,255,255,0.08); }
.hc-code pre {
  margin: 0; padding: 12px 14px;
  font-family: var(--hc-font-mono); font-size: 12px; line-height: 1.65;
  color: #C7CDE0; overflow-x: auto; white-space: pre;
}

/* Image */
.hc-img { margin: 14px 0; }
.hc-img img { max-width: 100%; border-radius: var(--hc-r-md); display: block; border: 1px solid var(--hc-border); }
.hc-img__caption { font-size: 12px; color: var(--hc-ink-500); text-align: center; margin-top: 6px; }

/* Video */
.hc-video {
  display: flex; gap: 12px; background: var(--hc-ink-900);
  border-radius: var(--hc-r-md); padding: 12px; margin: 14px 0;
  align-items: center; cursor: pointer;
}
.hc-video__frame {
  width: 90px; height: 60px; border-radius: 6px;
  background: linear-gradient(135deg, #2A2440, #5A3DAB);
  position: relative; flex-shrink: 0;
  display: grid; place-items: center; color: white;
}
.hc-video__frame iframe {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border: 0; border-radius: 6px;
}
.hc-video__caption { color: white; font-size: 13px; font-weight: 500; }

/* Accordion */
.hc-accordion {
  border: 1px solid var(--hc-border); border-radius: var(--hc-r-md);
  overflow: hidden; margin: 14px 0;
}
.hc-accordion__item { border-bottom: 1px solid var(--hc-border); }
.hc-accordion__item:last-child { border-bottom: 0; }
.hc-accordion__item summary {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 12px 14px; font-size: 13.5px; font-weight: 500;
  color: var(--hc-ink-900); background: white; cursor: pointer;
  list-style: none; transition: background 120ms;
}
.hc-accordion__item summary::-webkit-details-marker { display: none; }
.hc-accordion__item summary:hover { background: var(--hc-ink-50); }
.hc-accordion__item summary::after {
  content: ""; flex-shrink: 0; width: 12px; height: 12px;
  border-right: 1.5px solid var(--hc-ink-400);
  border-bottom: 1.5px solid var(--hc-ink-400);
  transform: rotate(45deg); transition: transform 180ms;
  margin-right: 4px;
}
.hc-accordion__item[open] summary::after { transform: rotate(225deg); }
.hc-accordion__item .hc-accordion__a {
  padding: 0 14px 14px; font-size: 13px; color: var(--hc-ink-600); line-height: 1.6;
}

/* Action button (deep link pill) */
.hc-action {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--hc-closo-purple); color: white;
  font-weight: 600; font-size: 13px; padding: 10px 18px;
  border-radius: 999px; margin: 12px 0;
  transition: background 120ms, transform 120ms; text-decoration: none;
}
.hc-action:hover {
  background: var(--hc-closo-purple-700); transform: translateY(-1px); color: white;
}
.hc-action__arrow { transition: transform 120ms; }
.hc-action:hover .hc-action__arrow { transform: translateX(2px); }

/* Helpful widget */
.hc-helpful {
  margin: 28px 0 0; padding: 20px;
  background: var(--hc-ink-50); border-radius: var(--hc-r-md);
  text-align: center;
}
.hc-helpful__q {
  font-family: var(--hc-font-display); font-size: 14px; font-weight: 600;
  margin-bottom: 12px; color: var(--hc-ink-900);
}
.hc-helpful__buttons { display: flex; gap: 8px; justify-content: center; }
.hc-helpful__btn {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 18px; border-radius: 999px;
  background: white; border: 1px solid var(--hc-border);
  font-size: 13px; font-weight: 500; color: var(--hc-ink-700);
  cursor: pointer; transition: all 120ms; font-family: inherit;
}
.hc-helpful__btn:hover { border-color: var(--hc-closo-purple-200); color: var(--hc-closo-purple); }
.hc-helpful__btn.is-yes { background: #E8F5EE; border-color: #B8DEC8; color: var(--hc-success-500); }
.hc-helpful__btn.is-no  { background: var(--hc-danger-50); border-color: #F4C9C9; color: var(--hc-danger-700); }
.hc-helpful__btn:disabled { cursor: default; }
.hc-helpful__thanks { margin-top: 10px; font-size: 12.5px; color: var(--hc-success-500); }

/* Related */
.hc-related { margin-top: 24px; padding: 0; border-top: 0; }
.hc-related__h {
  font-family: var(--hc-font-display); font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--hc-ink-500); margin: 0 0 10px;
}
.hc-related__row {
  display: flex; justify-content: space-between; align-items: center;
  width: 100%; padding: 10px 12px; border-radius: var(--hc-r-sm);
  text-align: left; font-size: 13px; font-weight: 500; color: var(--hc-ink-700);
  transition: background 120ms; cursor: pointer;
  background: transparent; border: 0; font-family: inherit;
}
.hc-related__row:hover { background: var(--hc-ink-50); color: var(--hc-closo-purple); }
.hc-related__row svg { color: var(--hc-ink-400); }

/* Loading skeleton */
.hc-skeleton {
  background: linear-gradient(90deg, var(--hc-ink-100), var(--hc-ink-200), var(--hc-ink-100));
  background-size: 200% 100%; animation: hc-shimmer 1.4s linear infinite;
  border-radius: 6px;
}
@keyframes hc-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* Scrollbars */
.hc-scroll::-webkit-scrollbar { width: 8px; }
.hc-scroll::-webkit-scrollbar-thumb { background: var(--hc-ink-200); border-radius: 4px; }
.hc-scroll::-webkit-scrollbar-thumb:hover { background: var(--hc-ink-300); }

/* ── Action rows (Report a problem / My reports on list view) ───── */
.hc-actions { display: flex; flex-direction: column; gap: 6px; padding: 0 4px; }
.hc-action-row {
  display: grid; grid-template-columns: 28px 1fr 16px;
  gap: 12px; align-items: center;
  background: var(--hc-surface); border: 1px solid var(--hc-border);
  border-radius: var(--hc-r-md); padding: 12px 14px;
  cursor: pointer; text-align: left; font-family: inherit;
  transition: background 120ms, border-color 120ms;
}
.hc-action-row:hover { background: var(--hc-closo-purple-50); border-color: var(--hc-closo-purple-200); }
.hc-action-row__icon {
  width: 28px; height: 28px; border-radius: 8px;
  background: var(--hc-closo-purple-50); color: var(--hc-closo-purple);
  display: grid; place-items: center;
}
.hc-action-row__icon svg { width: 16px; height: 16px; }
.hc-action-row__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hc-action-row__title { font-size: 13.5px; font-weight: 600; color: var(--hc-ink-900); }
.hc-action-row__sub   { font-size: 12px;   color: var(--hc-ink-500); line-height: 1.4; }

/* ── Report form ─────────────────────────────────────────────────── */
.hc-report { padding: 4px 4px 16px; }
.hc-form { display: flex; flex-direction: column; gap: 14px; margin-top: 16px; }
.hc-form__row { display: flex; flex-direction: column; gap: 6px; }
.hc-form__label {
  font-size: 12.5px; font-weight: 600; color: var(--hc-ink-700);
  letter-spacing: 0.01em;
}
.hc-form__radios { display: flex; flex-direction: column; gap: 4px; }
.hc-form__radio {
  display: flex; align-items: center; gap: 10px;
  background: var(--hc-surface); border: 1px solid var(--hc-border);
  border-radius: var(--hc-r-sm); padding: 9px 12px;
  cursor: pointer; text-align: left; font: 500 13px var(--hc-font-body);
  color: var(--hc-ink-900); transition: border-color 120ms, background 120ms;
}
.hc-form__radio:hover { border-color: var(--hc-closo-purple-200); }
.hc-form__radio.is-active {
  border-color: var(--hc-closo-purple); background: var(--hc-closo-purple-50);
  color: var(--hc-closo-purple);
}
.hc-form__radio-dot {
  width: 14px; height: 14px; border-radius: 50%;
  border: 1.5px solid var(--hc-ink-300);
  flex: 0 0 auto; transition: border-color 120ms;
}
.hc-form__radio.is-active .hc-form__radio-dot {
  border: 4px solid var(--hc-closo-purple);
}
.hc-form__input,
.hc-form__textarea,
.hc-form__select {
  width: 100%; box-sizing: border-box;
  background: var(--hc-surface); border: 1px solid var(--hc-border);
  border-radius: var(--hc-r-sm); padding: 10px 12px;
  font: 400 13.5px var(--hc-font-body); color: var(--hc-ink-900);
  resize: vertical;
}
.hc-form__select { appearance: auto; cursor: pointer; }
.hc-form__select:focus {
  outline: 2px solid var(--hc-closo-purple); outline-offset: -1px;
  border-color: transparent;
}
.hc-form__textarea { min-height: 96px; max-height: 280px; }
.hc-form__input:focus,
.hc-form__textarea:focus {
  outline: 2px solid var(--hc-closo-purple); outline-offset: -1px;
  border-color: transparent;
}
.hc-form__error {
  background: var(--hc-warn-50); border: 1px solid #F5DCA8;
  color: var(--hc-warn-700); padding: 8px 12px; border-radius: var(--hc-r-sm);
  font-size: 12.5px;
}
.hc-form__actions {
  display: flex; gap: 8px; margin-top: 4px;
}
.hc-form__btn {
  flex: 1; padding: 10px 14px; border-radius: var(--hc-r-sm);
  font: 600 13.5px var(--hc-font-body); cursor: pointer;
  border: 1px solid transparent; transition: background 120ms, transform 60ms;
}
.hc-form__btn:active { transform: translateY(1px); }
.hc-form__btn:disabled { opacity: 0.55; cursor: progress; }
.hc-form__btn--primary {
  background: var(--hc-closo-purple); color: #fff;
}
.hc-form__btn--primary:hover { background: var(--hc-closo-purple-hover, #321f69); }
.hc-form__btn--ghost {
  background: var(--hc-surface); color: var(--hc-ink-700);
  border-color: var(--hc-border);
}
.hc-form__btn--ghost:hover { background: var(--hc-ink-100); }

/* ── Report sent confirmation ────────────────────────────────────── */
.hc-report-sent {
  text-align: center; padding: 32px 16px 24px;
  display: flex; flex-direction: column; gap: 14px; align-items: center;
}
.hc-report-sent__check {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--hc-closo-purple-50); color: var(--hc-closo-purple);
  display: grid; place-items: center; font: 700 28px var(--hc-font-body);
}
.hc-report-sent__h { margin: 0; font: 600 18px var(--hc-font-display); color: var(--hc-ink-900); }
.hc-report-sent__ref {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--hc-ink-100); padding: 8px 14px; border-radius: 999px;
  font-size: 13px; color: var(--hc-ink-700);
}
.hc-report-sent__ref code {
  background: transparent; color: var(--hc-closo-purple);
  font: 600 13px monospace; letter-spacing: 0.04em;
}
.hc-report-sent__sla { color: var(--hc-ink-500); font-size: 12.5px; line-height: 1.5; max-width: 360px; margin: 0; }
/* Override the column-centered parent so the action row can stretch
   to full width — without this, flex:1 on each button collapses to
   content width and the two buttons sit side-by-side narrowly. */
.hc-report-sent .hc-form__actions { width: 100%; max-width: 360px; }

/* ── My Reports list + detail ────────────────────────────────────── */
.hc-reports { padding: 4px 4px 16px; }
.hc-report-row {
  display: flex; flex-direction: column; gap: 4px;
  padding: 12px 14px; text-align: left; cursor: pointer;
  background: var(--hc-surface); border: 1px solid var(--hc-border);
  border-radius: var(--hc-r-sm); margin-bottom: 6px;
  font-family: inherit;
}
.hc-report-row:hover { border-color: var(--hc-closo-purple-200); background: var(--hc-closo-purple-50); }
.hc-report-row__head { display: flex; align-items: center; gap: 8px; }
.hc-report-row__ref {
  font: 600 11.5px monospace; color: var(--hc-closo-purple);
  letter-spacing: 0.04em;
}
.hc-report-row__time { font-size: 11.5px; color: var(--hc-ink-500); margin-left: auto; }
.hc-report-row__title { font-size: 13px; font-weight: 500; color: var(--hc-ink-900); }
.hc-report-row__status { font-size: 12px; color: var(--hc-ink-500); }

.hc-status-dot {
  width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto;
  background: var(--hc-ink-300);
}
.hc-status-dot--new      { background: #3B82F6; }
.hc-status-dot--triaged  { background: #F59E0B; }
.hc-status-dot--prog     { background: var(--hc-closo-purple); }
.hc-status-dot--ok       { background: #10B981; }
.hc-status-dot--mute     { background: var(--hc-ink-300); }

.hc-report-detail { padding: 4px 4px 16px; }
.hc-report-detail__top {
  display: flex; align-items: center; gap: 8px; padding-bottom: 8px;
}
.hc-report-detail__top code {
  font: 600 12px monospace; color: var(--hc-closo-purple);
  letter-spacing: 0.04em;
}
.hc-report-thread { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.hc-report-msg {
  background: var(--hc-surface); border: 1px solid var(--hc-border);
  border-radius: var(--hc-r-md); padding: 10px 12px;
}
/* Chat-bubble distinction so seller can scan thread at a glance.
   - Seller's own messages: right-aligned gray bubble.
   - Support replies: left-aligned purple bubble with accent border.
   - System (status changes): centered, smaller, subtle. */
.hc-report-thread { align-items: stretch; }
.hc-report-msg--seller  {
  background: var(--hc-ink-100); border-color: transparent;
  margin-left: 28px; align-self: stretch;
}
.hc-report-msg--support {
  background: var(--hc-closo-purple-50);
  border: 1px solid var(--hc-closo-purple-200);
  border-left: 3px solid var(--hc-closo-purple);
  margin-right: 28px; align-self: stretch;
}
.hc-report-msg--system  {
  background: var(--hc-warn-50); border-color: transparent;
  margin: 0 auto; padding: 6px 12px;
  font-size: 12px; opacity: 0.9; text-align: center; max-width: 80%;
}
.hc-report-msg__author { font-size: 11.5px; font-weight: 600; color: var(--hc-ink-700); margin-bottom: 4px; }
.hc-report-msg--support .hc-report-msg__author { color: var(--hc-closo-purple); }
.hc-report-msg__body   { font-size: 13px; color: var(--hc-ink-900); line-height: 1.55; white-space: pre-wrap; }
.hc-report-msg__time   { font-size: 11px; color: var(--hc-ink-500); margin-top: 4px; }

/* ── Unread badge on Get Help trigger ──────────────────────────────
   Right-aligned red pill on the sidebar trigger when there are unread
   admin replies in any of the seller's reports. Clears the moment
   they open the report (server stamps last_seller_seen_at on fetch). */
.hc-trigger__badge {
  display: inline-flex; align-items: center; justify-content: center;
  margin-left: auto;
  min-width: 18px; height: 18px; padding: 0 6px;
  background: #DC2626; color: #fff;
  border-radius: 9px;
  font: 600 10.5px var(--hc-font-body, system-ui, sans-serif);
  letter-spacing: 0.02em;
  flex: 0 0 auto;
}
.hc-trigger.hc-trigger--fab .hc-trigger__badge {
  position: absolute; top: -4px; right: -4px;
  margin-left: 0;
}

/* "(N new)" pill on My Reports list row */
.hc-report-row__unread {
  background: #DC2626; color: #fff;
  font: 600 10.5px var(--hc-font-body, system-ui, sans-serif);
  padding: 2px 6px; border-radius: 8px; letter-spacing: 0.02em;
}

/* ── Reply composer in seller's report detail view ──────────────────
   Sticky-feeling textarea + Send button at the bottom of the thread.
   Persists draft in state so the 15s polling re-render doesn't erase
   the typed text. */
.hc-report-composer {
  display: flex; flex-direction: column; gap: 8px;
  margin-top: 16px; padding-top: 14px;
  border-top: 1px solid var(--hc-border);
}
.hc-report-composer__input {
  min-height: 72px; max-height: 200px;
}
.hc-report-composer__actions {
  display: flex; justify-content: flex-end; gap: 8px;
}
.hc-report-composer__actions .hc-form__btn { flex: 0 0 auto; min-width: 120px; }

/* ── Toast notifications (Closo Support reply pop-up) ─────────────
   Bottom-right stack, slides in from the right, auto-dismiss after
   6 seconds. Click "View" jumps straight to My Reports. Sits above
   the floating FAB but below the open sheet (z = sheet - 2). */
.hc-toast-root {
  position: fixed; right: 20px; bottom: 84px;
  display: flex; flex-direction: column; gap: 8px;
  z-index: calc(var(--hc-sheet-z) - 2);
  pointer-events: none;
}
.hc-toast {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--hc-ink-900); color: #fff;
  padding: 10px 12px 10px 14px;
  border-radius: 10px;
  box-shadow: 0 8px 28px rgba(15,11,31,0.28);
  font: 500 13px var(--hc-font-body);
  min-width: 280px; max-width: 380px;
  transform: translateX(120%); transition: transform 220ms cubic-bezier(0.32, 0.72, 0, 1);
  pointer-events: auto;
}
.hc-toast--in  { transform: translateX(0); }
.hc-toast--out { transform: translateX(120%); }
.hc-toast__icon {
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
  width: 24px; height: 24px;
  border-radius: 50%; background: var(--hc-closo-purple);
}
.hc-toast__body {
  flex: 1 1 auto; line-height: 1.35;
}
.hc-toast__action {
  background: rgba(255,255,255,0.14); color: #fff;
  border: 0; border-radius: 6px;
  padding: 6px 10px; cursor: pointer;
  font: 600 12px var(--hc-font-body);
  flex: 0 0 auto;
}
.hc-toast__action:hover { background: rgba(255,255,255,0.22); }
.hc-toast__close {
  background: transparent; border: 0; color: rgba(255,255,255,0.6);
  cursor: pointer; font-size: 18px; line-height: 1;
  padding: 0 4px; flex: 0 0 auto;
}
.hc-toast__close:hover { color: #fff; }

@media (max-width: 768px) {
  .hc-toast-root { right: 12px; bottom: 80px; left: 12px; }
  .hc-toast      { max-width: none; }
}

/* Badge on the My reports action row inside the Get Help sheet —
   mirrors the red trigger badge so unread state is visible from
   inside the sheet too, not only on the sidebar trigger. */
.hc-action-row__title-row {
  display: inline-flex; align-items: center; gap: 8px;
}
.hc-action-row__badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 6px;
  background: #DC2626; color: #fff;
  border-radius: 9px;
  font: 600 10.5px var(--hc-font-body, system-ui, sans-serif);
  letter-spacing: 0.02em;
}

/* Closed-report banner — replaces the reply composer when status is
   resolved or wontfix. Communication sealed; CTA is "Report a new
   problem" so seller has a clear next step. */
.hc-report-closed {
  margin-top: 16px; padding: 16px;
  background: var(--hc-ink-50, #FAF9FC);
  border: 1px solid var(--hc-border);
  border-radius: var(--hc-r-md);
  display: flex; flex-direction: column; gap: 10px; align-items: flex-start;
}
.hc-report-closed__title {
  font: 600 13.5px var(--hc-font-body);
  color: var(--hc-ink-900);
}
.hc-report-closed__sub {
  font-size: 12.5px; color: var(--hc-ink-500);
  line-height: 1.5;
}
.hc-report-closed .hc-form__btn { align-self: flex-start; min-width: 180px; }

/* AI-suggested articles inside a report's My Reports detail view.
   Sits above the composer / closed banner so the seller sees the
   self-serve path first. Borderless cards on a soft background to
   feel like "context", not "ad". */
.hc-ai-suggest {
  margin-top: 14px; padding: 12px;
  background: var(--hc-info-50, #EEF4FF);
  border: 1px solid color-mix(in oklab, var(--hc-info-500, #3B61E0) 18%, transparent);
  border-radius: var(--hc-r-md);
  display: flex; flex-direction: column; gap: 8px;
}
.hc-ai-suggest__title {
  font: 600 12.5px var(--hc-font-body);
  color: var(--hc-info-700, #1E3A8A);
}
.hc-ai-suggest__list {
  display: flex; flex-direction: column; gap: 6px;
}
.hc-ai-suggest__item {
  background: var(--hc-surface); border: 1px solid var(--hc-border);
  border-radius: var(--hc-r-sm); padding: 10px 12px;
  cursor: pointer; text-align: left;
  display: flex; flex-direction: column; gap: 3px;
  font-family: inherit;
  transition: border-color 120ms, background 120ms;
}
.hc-ai-suggest__item:hover {
  border-color: var(--hc-info-500, #3B61E0);
  background: color-mix(in oklab, var(--hc-info-50, #EEF4FF) 60%, white);
}
.hc-ai-suggest__item-title {
  font-size: 13px; font-weight: 600; color: var(--hc-ink-900);
}
.hc-ai-suggest__item-sub {
  font-size: 12px; color: var(--hc-ink-500); line-height: 1.4;
}
.hc-ai-suggest__sub {
  font-size: 11.5px; color: var(--hc-ink-500); font-style: italic;
}

/* CSAT widget inside the closed-report banner. */
.hc-report-csat {
  margin: 6px 0;
  padding: 12px;
  background: var(--hc-surface);
  border: 1px solid var(--hc-border);
  border-radius: var(--hc-r-sm);
  display: flex; flex-direction: column; gap: 10px;
}
.hc-report-csat__q {
  font: 600 13px var(--hc-font-body);
  color: var(--hc-ink-900);
}
.hc-report-csat__thanks {
  font: 500 12.5px var(--hc-font-body);
  color: var(--hc-closo-purple);
  font-style: italic;
}
.hc-report-csat__btns {
  display: flex; gap: 8px;
}
.hc-report-csat__btn {
  flex: 1; padding: 10px 14px;
  background: var(--hc-ink-100); color: var(--hc-ink-900);
  border: 1px solid transparent; border-radius: var(--hc-r-sm);
  font: 500 13px var(--hc-font-body); cursor: pointer;
  transition: background 120ms, border-color 120ms;
}
.hc-report-csat__btn:hover {
  background: var(--hc-closo-purple-50);
  border-color: var(--hc-closo-purple-200);
}

/* ── Report attachments (Phase 1: image screenshots) ─────────────────── */
.hc-attach { display: flex; flex-direction: column; gap: 8px; }
.hc-attach__btn { align-self: flex-start; }
.hc-attach__strip { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.hc-attach__chip { position: relative; display: inline-block; line-height: 0; }
.hc-attach__thumb {
  width: 64px; height: 64px; object-fit: cover; display: block;
  border-radius: 8px; border: 1px solid var(--hc-closo-purple-200, #e5e7eb);
  background: #f3f4f6;
}
.hc-attach__rm {
  position: absolute; top: -7px; right: -7px; width: 18px; height: 18px;
  border: none; border-radius: 50%; background: rgba(17, 19, 48, 0.75); color: #fff;
  font-size: 13px; line-height: 1; cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center;
}
.hc-attach__strip--thread { margin: 4px 0 2px; }
.hc-attach__strip--thread .hc-attach__thumb { width: 88px; height: 88px; cursor: zoom-in; }

/* ── Reply-attached help articles (tappable cards) ───────────────────── */
.hc-reply-articles { display: flex; flex-direction: column; gap: 6px; margin: 6px 0 2px; }
.hc-reply-article {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  padding: 8px 10px; border-radius: 8px; cursor: pointer; font: inherit; color: inherit;
  background: var(--hc-closo-purple-50, #f5f3fb);
  border: 1px solid var(--hc-closo-purple-200, #e5e7eb);
}
.hc-reply-article:hover { border-color: var(--hc-closo-purple-400, #a78bfa); }
.hc-reply-article__ic { flex: 0 0 auto; }
.hc-reply-article__t { flex: 1 1 auto; font-size: 13px; font-weight: 600; color: #1c1330; }
.hc-reply-article__go { flex: 0 0 auto; color: #7c3aed; font-weight: 700; }