/* able-runtime.css — bundled blueprint chrome CSS for SSR first-paint. */

/* able-app-header */

able-app-header { display: block; }
.aah-bar {
  display: grid;
  grid-template-columns: auto auto 1fr auto auto auto auto;
  gap: 16px;
  align-items: center;
  padding: 12px 20px;
  height: 60px;
  box-sizing: border-box;
  background-color: var(--aah-fill, var(--accent, #0f172a));
  /* Use --on-accent (always white, semantically pinned to accent bg) — NOT
     --text-inverse (which flips to dark in dark mode per the inverse-
     surface semantic). The masthead bg is always --accent, so the text
     must always be white-on-accent regardless of theme. */
  color: var(--on-accent, #fff);
}
.aah-area { display: flex; align-items: center; gap: 8px; min-width: 0; }
.aah-area--logo { justify-content: flex-start; }
.aah-area--title { padding-left: 4px; }
/* Logo + title are anchor tags (home link) — strip default link chrome
 * but keep them cursor:pointer + focusable. */
a.aah-home-link {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  border-radius: 6px;
}
a.aah-home-link:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.6);
  outline-offset: 2px;
}
a.aah-home-link:hover { opacity: 0.9; }
.aah-area--nav { gap: 16px; flex: 0 1 auto; }
.aah-area--extra { gap: 8px; }
.aah-area--ask-able { justify-content: flex-end; }
.aah-area--user { position: relative; }
.aah-logo-img { height: 36px; max-height: 40px; width: auto; display: block; }
.aah-logo-fallback {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 8px;
  background: rgba(255, 255, 255, 0.1); color: inherit;
  font-weight: 700; font-size: 14px;
}
.aah-title { margin: 0; font-size: 17px; font-weight: 700; color: inherit; white-space: nowrap; }
.aah-ask-able {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255, 255, 255, 0.08); color: inherit;
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 6px 14px; border-radius: 9999px; font-size: 13px;
  cursor: pointer; transition: background-color 120ms;
}
.aah-ask-able:hover { background: rgba(255, 255, 255, 0.16); }
.aah-ask-icon { font-size: 14px; }
.aah-theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 9999px;
  background: rgba(255, 255, 255, 0.06); color: inherit;
  border: 0; cursor: pointer; transition: background-color 120ms;
}
.aah-theme-toggle:hover { background: rgba(255, 255, 255, 0.14); }
/* The account dropdown is the nested <able-user-menu> blueprint — it ships its
 * own styles (.aum-*) tuned for a dark navbar + the impersonation treatment.
 * The header only positions the cell (.aah-area--user is position:relative). */
/* Burger button — hidden by default, shown only on mobile via @media.
   The CELL must hide too: the desktop grid declares 7 columns for 8 emitted
   areas — an empty participating burger cell shifts every later area one
   column and wraps .aah-area--user onto a second row (the 2026-06-11
   build-admin "user menu fell out of the header" bug). */
.aah-area--burger {
  display: none;
}
.aah-burger {
  display: none;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  padding: 8px;
}
.aah-burger span {
  display: block;
  width: 24px;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
  transition: transform 200ms, opacity 200ms;
}
/* Hamburger → X animation */
.aah-burger[aria-expanded="true"] span:first-child {
  transform: rotate(45deg) translate(7px, 7px);
}
.aah-burger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.aah-burger[aria-expanded="true"] span:last-child {
  transform: rotate(-45deg) translate(7px, -7px);
}
/* iOS HIG / Android material — 44×44 minimum touch target on coarse pointers.
   Keeps the desktop (fine pointer) dense; expands hit area on phones/tablets. */
@media (pointer: coarse) {
  .aah-theme-toggle, .aah-area--logo, .aah-area--user, .aah-ask-able {
    min-width: 44px; min-height: 44px;
  }
  .aah-area--logo { padding: 0 6px; }
}
/* Safe-area-inset for iPhone notch / dynamic island */
.aah-bar {
  padding-top: max(12px, env(safe-area-inset-top));
  padding-left: max(20px, env(safe-area-inset-left));
  padding-right: max(20px, env(safe-area-inset-right));
}
@media (max-width: 600px) {
  .aah-bar {
    grid-template-columns: auto 1fr auto auto auto auto;
    padding: 8px 12px;
    gap: 8px;
    position: relative;
  }
  .aah-area--nav, .aah-area--extra { display: none; }
  .aah-area--burger { display: flex; }
  .aah-burger { display: flex; }
  /* When burger toggled open, show nav + extra as overlay below header */
  able-app-header.aah-mobile-nav-open .aah-area--nav,
  able-app-header.aah-mobile-nav-open .aah-area--extra {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--aah-fill, var(--accent, #0f172a));
    border-bottom: 1px solid var(--border-default, rgba(255, 255, 255, 0.08));
    padding: 12px 16px;
    z-index: 50;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  }
  .aah-title { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .aah-ask-label { display: none; }
}


/* able-cart-drawer */

able-cart-drawer {
  position: fixed; top: 0; bottom: 0; right: 0;
  width: 420px; max-width: 100vw;
  z-index: 901;
  background: var(--surface-card, #ffffff);
  color: var(--text-primary, #1d1c17);
  box-shadow: -12px 0 36px rgba(0, 0, 0, 0.18);
  transform: translateX(100%);
  transition: transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
  display: flex; flex-direction: column;
  overflow: hidden;
}
able-cart-drawer[data-open="true"] { transform: translateX(0); }
@media (max-width: 479px) {
  able-cart-drawer {
    width: 100%;
    top: auto; right: 0; left: 0; bottom: 0;
    height: 90dvh; max-height: 90dvh;
    transform: translateY(100%);
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    box-shadow: 0 -12px 36px rgba(0, 0, 0, 0.18);
  }
  able-cart-drawer[data-open="true"] { transform: translateY(0); }
  able-cart-drawer::before {
    content: '';
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 4px;
    background: rgba(0, 0, 0, 0.18);
    border-radius: 2px;
    pointer-events: none;
  }
}
.acd-backdrop {
  position: fixed; inset: 0; z-index: 900;
  background: rgba(11, 15, 26, 0.45);
  opacity: 0; pointer-events: none;
  transition: opacity 220ms ease;
}
.acd-backdrop--open { opacity: 1; pointer-events: auto; }
.acd-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-subtle, #f1f5f9);
  flex-shrink: 0;
  padding-top: max(16px, env(safe-area-inset-top));
}
.acd-title {
  font-size: 16px; font-weight: 600;
  display: flex; align-items: center; gap: 8px;
  margin: 0;
}
.acd-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px; padding: 0 6px;
  background: var(--accent, #1b2a4a); color: var(--on-accent, #fff);
  border-radius: 11px;
  font-size: 12px; font-weight: 600;
}
.acd-close {
  width: 44px; height: 44px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; color: inherit; border: 0; cursor: pointer;
  font-size: 24px; line-height: 1;
}
.acd-close:hover { background: rgba(0, 0, 0, 0.05); }
.acd-body {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 8px 0;
}
.acd-empty {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center;
  padding: 48px 24px;
  color: var(--text-muted, #6b7280);
  text-align: center;
  gap: 12px;
}
.acd-empty-icon {
  font-size: 48px;
  opacity: 0.4;
}
.acd-empty-text {
  font-size: 14px;
  margin: 0;
}
.acd-footer {
  flex-shrink: 0;
  border-top: 1px solid var(--border-subtle, #f1f5f9);
  padding: 16px 20px;
  padding-bottom: max(16px, env(safe-area-inset-bottom));
  background: var(--surface-base, #ffffff);
  display: flex; flex-direction: column; gap: 14px;
}
.acd-checkout {
  min-height: 48px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent, #1b2a4a); color: var(--on-accent, #fff);
  border: 0; border-radius: 8px;
  font-size: 15px; font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  padding: 0 20px;
  transition: background 160ms ease;
}
.acd-checkout:hover { background: var(--accent-hover, #16223d); }
.acd-checkout:active { background: var(--accent-active, #111a2e); }
.acd-checkout[aria-disabled="true"] {
  background: var(--surface-active, #e5e7eb);
  color: var(--text-muted, #6b7280);
  pointer-events: none;
  cursor: not-allowed;
}


/* able-cart-line */

able-cart-line {
  display: block;
  border-bottom: 1px solid var(--border-subtle, #f1f5f9);
}
able-cart-line:last-child { border-bottom: 0; }
.acl-line {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  grid-template-rows: auto auto;
  grid-template-areas:
    "image body remove"
    "image qty   price";
  gap: 4px 12px;
  align-items: start;
  padding: 14px 20px;
}
.acl-image {
  grid-area: image;
  width: 64px; height: 64px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--surface-subtle, #f1f5f9);
}
.acl-image img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.acl-body {
  grid-area: body;
  min-width: 0;
}
.acl-name {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary, #1d1c17);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.acl-name:hover { text-decoration: underline; }
.acl-variant {
  font-size: 12px;
  color: var(--text-secondary, #3f3f46);
  margin: 2px 0 0;
}
.acl-sku {
  font-size: 11px;
  color: var(--text-muted, #6b7280);
  margin: 2px 0 0;
  letter-spacing: 0.02em;
}
.acl-qty {
  grid-area: qty;
  display: flex; align-items: center;
}
.acl-price {
  grid-area: price;
  display: flex; align-items: center; justify-content: flex-end;
  font-size: 14px; font-weight: 600;
  color: var(--text-primary, #1d1c17);
  font-variant-numeric: tabular-nums;
}
.acl-remove {
  grid-area: remove;
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 0; cursor: pointer;
  font-size: 20px; color: var(--text-muted, #6b7280);
  border-radius: 6px;
  align-self: flex-start;
  justify-self: end;
}
.acl-remove:hover {
  background: var(--danger-soft, #fee2e2);
  color: var(--danger, #b91c1c);
}
.acl-line--empty { display: none; }


/* able-cart-summary */

able-cart-summary { display: block; }
.acs {
  display: flex; flex-direction: column;
  gap: 8px;
  width: 100%;
}
.acs-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-size: 14px;
  color: var(--text-secondary, #3f3f46);
  font-variant-numeric: tabular-nums;
}
.acs-label { font-weight: 400; }
.acs-discount-row { color: var(--success, #15803d); }
.acs-savings {
  color: var(--success, #15803d);
  font-weight: 500;
}
.acs-shipping-free {
  color: var(--success, #15803d);
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: none;
}
.acs-total-row {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary, #1d1c17);
  border-top: 1px solid var(--border-default, #e5e7eb);
  padding-top: 12px;
  margin-top: 4px;
}
.acs-total-row .acs-label { font-weight: 700; }
.acs-total-row able-price { font-size: 18px; }


/* able-checkout-stepper */

able-checkout-stepper { display: block; }
.achs-wrap { width: 100%; }
.achs--desktop {
  display: flex;
  list-style: none;
  padding: 0; margin: 0;
  gap: 12px;
  align-items: center;
  justify-content: center;
}
.achs--mobile { display: none; }
@media (max-width: 639px) {
  .achs--desktop { display: none; }
  .achs--mobile { display: block; }
}
.achs-step {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  position: relative;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted, #6b7280);
  user-select: none;
}
.achs-step + .achs-step::before {
  content: '';
  display: inline-block;
  width: 32px; height: 1px;
  background: var(--border-default, #e5e7eb);
  margin-right: 8px;
  vertical-align: middle;
}
.achs-step[data-state="completed"] + .achs-step::before {
  background: var(--accent, #1b2a4a);
}
.achs-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--surface-subtle, #f1f5f9);
  color: var(--text-muted, #6b7280);
  font-size: 12px; font-weight: 600;
  border: 1px solid var(--border-default, #e5e7eb);
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}
.achs-step[data-state="completed"] .achs-num {
  background: var(--accent, #1b2a4a);
  color: var(--on-accent, #fff);
  border-color: var(--accent, #1b2a4a);
}
.achs-step[data-state="current"] .achs-num {
  background: var(--surface-base, #ffffff);
  color: var(--accent, #1b2a4a);
  border-color: var(--accent, #1b2a4a);
  font-weight: 700;
}
.achs-step[data-state="current"] {
  color: var(--text-primary, #1d1c17);
}
.achs-step[data-state="completed"] {
  color: var(--text-secondary, #3f3f46);
}
.achs-step[data-clickable="true"] {
  cursor: pointer;
}
.achs-step[data-clickable="true"]:hover .achs-num {
  background: var(--accent-hover, #16223d);
  border-color: var(--accent-hover, #16223d);
}
.achs-label { white-space: nowrap; }
.achs--mobile {
  display: none;
  padding: 12px 4px;
}
@media (max-width: 639px) { .achs--mobile { display: block; } }
.achs-mobile-text {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary, #1d1c17);
  margin-bottom: 8px;
}
.achs-progress {
  width: 100%;
  height: 4px;
  background: var(--surface-subtle, #f1f5f9);
  border-radius: 2px;
  overflow: hidden;
}
.achs-progress-fill {
  height: 100%;
  background: var(--accent, #1b2a4a);
  transition: width 280ms ease;
}


/* able-claw */

able-claw {
  /* Layout knobs */
  --ableclaw-sidebar-width:      240px;
  --ableclaw-artifact-width:     360px;
  --ableclaw-mobile-breakpoint:  720px;
  --ableclaw-radius:             12px;
  --ableclaw-radius-sm:          8px;

  /* Surfaces — every var resolves through theme tokens first; fallback is
     the dark default that ships with the legacy scanner/asuite themes. To
     opt into light mode in your theme, set --surface-card and friends
     to light values under your [data-theme='light'] block; the blueprint
     will follow automatically. */
  --ableclaw-bg:                 var(--surface-card, #141415);
  --ableclaw-fg:                 var(--text-primary, #e2e8f0);
  --ableclaw-sidebar-bg:         var(--surface-subtle, var(--surface-card, rgba(0, 0, 0, 0.18)));
  --ableclaw-sidebar-fg:         var(--text-primary, #e2e8f0);
  --ableclaw-sidebar-active-bg:  var(--surface-hover, var(--surface-subtle, rgba(127, 127, 127, 0.18)));
  --ableclaw-sidebar-hover-bg:   var(--surface-hover, rgba(127, 127, 127, 0.10));
  --ableclaw-artifact-bg:        var(--surface-subtle, rgba(0, 0, 0, 0.18));
  --ableclaw-border:             var(--border-default, rgba(127, 127, 127, 0.20));
  --ableclaw-border-soft:        var(--border-default, rgba(127, 127, 127, 0.12));

  /* Chat bubbles */
  --ableclaw-bubble-user-bg:     var(--accent-secondary, #3b82f6);
  --ableclaw-bubble-user-fg:     var(--on-accent-secondary, #ffffff);
  --ableclaw-bubble-agent-bg:    var(--surface-subtle, rgba(127, 127, 127, 0.10));
  --ableclaw-bubble-agent-fg:    var(--text-primary, #e2e8f0);

  /* Input bar */
  --ableclaw-input-bg:           var(--surface-card, #141415);
  --ableclaw-input-fg:           var(--text-primary, #e2e8f0);
  --ableclaw-input-border:       var(--border-default, rgba(127, 127, 127, 0.20));
  --ableclaw-input-bar-bg:       var(--surface-subtle, rgba(0, 0, 0, 0.12));

  /* Code + tables (the bug-D surface) */
  --ableclaw-code-bg:            rgba(0, 0, 0, 0.4);
  --ableclaw-code-fg:            inherit;
  --ableclaw-table-header-bg:    rgba(99, 102, 241, 0.18);
  --ableclaw-table-header-fg:    var(--text-primary, #f1f5f9);
  --ableclaw-table-row-bg:       transparent;
  --ableclaw-table-border:       var(--border-default, rgba(255, 255, 255, 0.18));

  /* Buttons + accents */
  --ableclaw-link:               #93c5fd;
  --ableclaw-accent:             var(--accent-secondary, #3b82f6);
  --ableclaw-accent-fg:          #ffffff;
  --ableclaw-stop-bg:            #dc2626;
  --ableclaw-stop-bg-hover:      #b91c1c;

  /* Conversation channel badges (dot to the left of each row title).
     Host pages rebrand by overriding any of these. Channel keys map to
     ai.conversations.channel_type values (case-insensitive — ABLEUI and
     ableui both resolve to the default). */
  --ableclaw-channel-default:    #6366f1;   /* ABLEUI / ableui — indigo */
  --ableclaw-channel-telegram:   #38bdf8;   /* cyan */
  --ableclaw-channel-email:      #94a3b8;   /* slate */
  --ableclaw-channel-slack:      #c026d3;   /* magenta */
  --ableclaw-channel-sms:        #22c55e;   /* green (also whatsapp) */
  --ableclaw-channel-web:        #64748b;   /* gray */

  /* Host height clamp.
     ============================================================================
     <able-claw> MUST have a bounded height for its internal grid to lay out
     correctly. Without this, an unbounded parent (height:auto, min-height:100vh)
     lets the sidebar's conversation list inflate the host past the viewport,
     pushing the chat input row BELOW the fold.
     Strategy: clamp the host to 100dvh minus an optional offset for chrome
     above us (a sticky page header, an outer padding, etc). Host pages
     calibrate the offset via the --ableclaw-viewport-offset custom property:
         <style>able-claw { --ableclaw-viewport-offset: 60px; }</style>
     Default 0 → host fills the full dynamic viewport (correct for pages with
     no chrome above <able-claw>).
     100dvh tracks the dynamic viewport (mobile address bar collapse) better
     than 100vh. contain: size tells the browser our intrinsic height is
     independent of content — internal grid scrolls instead of inflating us. */
  --ableclaw-viewport-offset:    0px;

  display: block;
  width: 100%;
  height: calc(100dvh - var(--ableclaw-viewport-offset));
  max-height: calc(100dvh - var(--ableclaw-viewport-offset));
  min-height: 480px;
  color: var(--ableclaw-fg);
  box-sizing: border-box;
  /* contain: layout only — NOT size or style. size caused grid-snap
     glitches when toggling data-sidebar-collapsed (chat column went 0-width
     during the grid-template-columns transition). overflow: hidden is
     what actually prevents content from inflating the host. */
  contain: layout;
  overflow: hidden;
}
/* When the host explicitly opts out by setting --ableclaw-viewport-offset
   to a non-zero value AND the parent has its own definite height, the
   100dvh clamp still wins. Host pages with a SHORTER definite container
   (e.g. a 600px-tall card) should use height:100% on a wrapper and pass
   the offset that accounts for the shell + their wrapper math. */
.aclaw-grid {
  display: grid;
  grid-template-columns: var(--ableclaw-sidebar-width) 1fr 0fr;
  width: 100%;
  height: 100%;
  min-height: 0;
  min-width: 0;
  background: var(--ableclaw-bg);
  border: 1px solid var(--ableclaw-border-soft);
  border-radius: var(--ableclaw-radius);
  overflow: hidden;
  /* Anchor point for the floating Agent Thinking overlay used in
     helper/launcher modes (it positions: absolute against this box). */
  position: relative;
  /* NO grid-template-columns transition — Chrome's interpolation between
     "var(--w) 1fr 0fr" and "0 1fr 0fr" left the chat column at 0 width
     mid-flight, presenting as a blank screen. Snap is fine; the visual
     change is intentional and instant. */
  box-sizing: border-box;
}
.aclaw-grid:has(.aclaw-artifact:not([hidden])) { grid-template-columns: var(--ableclaw-sidebar-width) 1fr var(--ableclaw-artifact-width); }
/* Collapsed state — driven by the data-sidebar-collapsed attribute on the
   host element. We deliberately use ONLY this single selector path (the
   older .aclaw-grid--sidebar-collapsed class is no longer toggled by JS;
   see _setSidebarCollapsed). Rules are tightly scoped: hide ONLY the
   .aclaw-sidebar element. .aclaw-chat (the main content column) and
   .aclaw-artifact (when visible) MUST remain rendered — the chat column
   expands to fill the freed grid track. */
able-claw[data-sidebar-collapsed="true"] > .aclaw-grid {
  grid-template-columns: 0 1fr 0fr;
}
able-claw[data-sidebar-collapsed="true"] > .aclaw-grid:has(.aclaw-artifact:not([hidden])) {
  grid-template-columns: 0 1fr var(--ableclaw-artifact-width);
}
/* When collapsed, the sidebar's grid column is 0px (see grid-template-columns
   above), but we MUST NOT use display:none — that removes the element from
   the grid placement entirely, which shifts the .aclaw-chat element into
   the now-empty column 1 (also 0px). Result: chat width collapses to 0 and
   the page renders empty. visibility:hidden + pointer-events:none keeps the
   sidebar element in flow so the chat stays anchored in grid column 2. */
able-claw[data-sidebar-collapsed="true"] > .aclaw-grid > .aclaw-sidebar {
  visibility: hidden;
  pointer-events: none;
  overflow: hidden;
}
/* Bug #6 (desktop) — when the sidebar is collapsed, the floating expand
   (hamburger) button sits absolutely at the chat's top-left over the message
   stream. Without clearance, the agent greeting's ONLINE row collides with it
   (and the brain toggle at top-right). The mobile @media already pads the
   stream; this collapsed-state rule extends the same clearance to DESKTOP
   (where the user collapsed the sidebar). Specificity (0,2,1) beats the later
   Liquid-Glass able-claw .aclaw-messages rule; only fires while collapsed so
   the expanded desktop layout is untouched. */
able-claw[data-sidebar-collapsed="true"] .aclaw-messages { padding-top: 60px; }
able-claw[data-sidebar-collapsed="true"] .aclaw-welcome  { padding-top: 60px; }

.aclaw-sidebar {
  display: flex; flex-direction: column;
  background: var(--ableclaw-sidebar-bg);
  color: var(--ableclaw-sidebar-fg);
  border-right: 1px solid var(--ableclaw-border-soft);
  min-height: 0;
  min-width: 0;
  /* No overflow:hidden — agent-popover (absolute in header) needs to extend
     below the header. The conversation list inside has its own overflow-y. */
}
.aclaw-sidebar-header {
  padding: 12px;
  border-bottom: 1px solid var(--ableclaw-border-soft);
  display: flex; flex-direction: column; gap: 8px;
  position: relative;
  flex-shrink: 0;
}
.aclaw-sidebar-header-row {
  display: flex; align-items: center; gap: 6px;
}
.aclaw-new-chat {
  flex: 1;
  padding: 8px 12px;
  background: var(--ableclaw-accent); color: var(--ableclaw-accent-fg);
  border: 0; border-radius: var(--ableclaw-radius-sm); cursor: pointer; font-size: 13px; font-weight: 600;
  transition: opacity 120ms;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-width: 0;
}
.aclaw-new-chat:hover { opacity: 0.92; }
.aclaw-kbd-hint {
  display: inline-flex; align-items: center;
  padding: 2px 6px;
  font-size: 11px; font-weight: 500;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 4px;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}

/* Sidebar brand header — small AbleClaw label + agent welcome title that
   sits above the New Conversation button. Mirrors the target design. */
.aclaw-sidebar-brand {
  display: flex; align-items: center; gap: 10px;
  padding: 4px 4px 8px 4px;
  border-bottom: 1px dashed var(--border-default, rgba(255, 255, 255, 0.06));
  margin-bottom: 4px;
}
.aclaw-sidebar-brand-icon {
  width: 28px; height: 28px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #a78bfa, #7c3aed);
  color: #fff; font-size: 14px;
  flex: 0 0 auto;
}
.aclaw-sidebar-brand-text {
  display: flex; flex-direction: column; min-width: 0; line-height: 1.2;
}
.aclaw-sidebar-brand-text strong {
  font-size: 12px; font-weight: 700; letter-spacing: 0.02em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.aclaw-sidebar-brand-text span {
  font-size: 11px; opacity: 0.65;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.aclaw-sidebar-collapse {
  flex: 0 0 auto;
  width: 32px; height: 32px;
  background: transparent; color: inherit;
  border: 1px solid var(--ableclaw-border);
  border-radius: var(--ableclaw-radius-sm); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; line-height: 1;
  opacity: 0.7;
  transition: opacity 120ms, background-color 120ms;
}
.aclaw-sidebar-collapse:hover { opacity: 1; background: var(--ableclaw-sidebar-hover-bg); }
.aclaw-sidebar-expand {
  position: absolute; top: 12px; left: 12px;
  width: 32px; height: 32px;
  background: var(--surface-subtle, var(--ableclaw-sidebar-bg));
  color: var(--text-primary, inherit);
  border: 1px solid var(--border-default, var(--ableclaw-border));
  border-radius: var(--ableclaw-radius-sm); cursor: pointer;
  /* Hidden by default; flipped to inline-flex when the host carries
     data-sidebar-collapsed="true". !important guards against page-level
     CSS that might otherwise overdetermine the display property. */
  display: none; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 600; line-height: 1;
  opacity: 0.95; z-index: 50;
  pointer-events: auto;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
  transition: opacity 120ms, background-color 120ms, transform 120ms;
}
able-claw[data-sidebar-collapsed="true"] .aclaw-sidebar-expand { display: inline-flex !important; }
.aclaw-sidebar-expand:hover {
  opacity: 1;
  background: var(--surface-card, var(--ableclaw-sidebar-active-bg));
  transform: translateX(1px);
}
.aclaw-search {
  width: 100%;
  padding: 6px 10px;
  background: var(--surface-card, #141415); color: inherit;
  border: 1px solid var(--border-default, rgba(255, 255, 255, 0.10));
  border-radius: 6px;
  font: inherit; font-size: 12px;
  box-sizing: border-box;
}
.aclaw-search:focus {
  outline: none;
  border-color: var(--accent-secondary, #3b82f6);
}

/* TALKING TO — agent-selector dropdown trigger in sidebar header. */
.aclaw-talking-to {
  display: flex; flex-direction: column; gap: 6px;
}
.aclaw-talking-to-label {
  font-size: 10px; font-weight: 600; letter-spacing: 0.10em;
  text-transform: uppercase;
  opacity: 0.55;
  padding: 0 2px;
}
.aclaw-agent-selector {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  background: var(--surface-card, rgba(255, 255, 255, 0.04));
  color: inherit;
  border: 1px solid var(--border-default, rgba(255, 255, 255, 0.10));
  border-radius: 8px; cursor: pointer;
  text-align: left;
  transition: background-color 120ms, border-color 120ms;
}
.aclaw-agent-selector:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: var(--accent-secondary, #3b82f6);
}
.aclaw-agent-selector .aclaw-agent-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: #fff;
  background: var(--accent-secondary, #3b82f6);
  flex: 0 0 auto;
}
.aclaw-agent-selector .aclaw-agent-meta {
  min-width: 0;
  display: flex; flex-direction: column; gap: 1px;
}
.aclaw-agent-selector .aclaw-agent-name {
  font-size: 13px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.aclaw-agent-selector .aclaw-agent-tagline {
  font-size: 11px; opacity: 0.6;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.aclaw-agent-selector .aclaw-agent-chevron {
  flex: 0 0 auto;
  font-size: 14px; opacity: 0.5;
}

/* Agent-selector popover — positioned below the trigger inside the sidebar
   header. Listed agents click-select; the trigger toggles open/closed. */
.aclaw-agent-popover {
  position: absolute;
  background: var(--surface-card, #1a1a1c);
  border: 1px solid var(--border-default, rgba(255, 255, 255, 0.12));
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.40);
  padding: 6px;
  z-index: 10;
  display: flex; flex-direction: column; gap: 2px;
  max-height: 320px; overflow-y: auto;
  min-width: 220px;
}
.aclaw-agent-popover[hidden] { display: none !important; }
.aclaw-agent-option {
  display: grid; grid-template-columns: auto 1fr; align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: transparent; color: inherit; border: 0; cursor: pointer;
  text-align: left;
  border-radius: 6px;
  transition: background-color 120ms;
}
.aclaw-agent-option:hover { background: var(--ableclaw-sidebar-hover-bg, rgba(127, 127, 127, 0.10)); }
.aclaw-agent-option.is-active { background: var(--ableclaw-sidebar-active-bg, rgba(127, 127, 127, 0.18)); }
.aclaw-agent-option .aclaw-agent-avatar {
  width: 26px; height: 26px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: #fff;
  background: var(--accent-secondary, #3b82f6);
  flex: 0 0 auto;
}
.aclaw-agent-option .aclaw-agent-meta {
  min-width: 0;
  display: flex; flex-direction: column; gap: 1px;
}
.aclaw-agent-option .aclaw-agent-name {
  font-size: 13px; font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.aclaw-agent-option .aclaw-agent-tagline {
  font-size: 11px; opacity: 0.6;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* YOUR CHATS group header + day-bucket sub-headers. Static labels rendered
   inside the conversation list; bucket headers are emitted between rows
   when conversations span multiple recency windows. */
.aclaw-conversation-group-header {
  font-size: 10px; font-weight: 600; letter-spacing: 0.10em;
  text-transform: uppercase;
  opacity: 0.55;
  padding: 8px 10px 4px 10px;
}
.aclaw-conversation-bucket-header {
  font-size: 11px; font-weight: 500;
  opacity: 0.45;
  padding: 8px 10px 2px 10px;
  text-transform: uppercase; letter-spacing: 0.05em;
}

.aclaw-conversation-row[hidden] { display: none !important; }
.aclaw-conversation-list {
  flex: 1; min-height: 0;
  overflow-y: auto;
  padding: 8px;
  display: flex; flex-direction: column; gap: 4px;
  /* Bug #119 — thin overlay scrollbar that blends with the sidebar
     surface. Default browser scrollbars render as a chunky dark column on
     light themes, which looks heavier than the content. scrollbar-width
     drives Firefox + modern Chromium; webkit-scrollbar rules tune
     Chrome/Safari directly. Thumb fades in on hover so the bar mostly
     disappears at rest, ChatGPT/Claude-style. */
  scrollbar-width: thin;
  scrollbar-color: var(--ableclaw-scrollbar-thumb, rgba(120, 120, 130, 0.32)) transparent;
}
.aclaw-conversation-list::-webkit-scrollbar { width: 8px; background: transparent; }
.aclaw-conversation-list::-webkit-scrollbar-track { background: transparent; }
.aclaw-conversation-list::-webkit-scrollbar-thumb {
  background: var(--ableclaw-scrollbar-thumb, rgba(120, 120, 130, 0.22));
  border-radius: 4px;
  border: 2px solid transparent;
  background-clip: padding-box;
  transition: background-color 140ms ease;
}
.aclaw-conversation-list:hover::-webkit-scrollbar-thumb {
  background: var(--ableclaw-scrollbar-thumb-hover, rgba(120, 120, 130, 0.45));
  background-clip: padding-box;
}
.aclaw-conversation-list::-webkit-scrollbar-thumb:hover {
  background: var(--ableclaw-scrollbar-thumb-active, rgba(120, 120, 130, 0.6));
  background-clip: padding-box;
}
.aclaw-empty-conversations {
  padding: 12px; font-size: 12px; opacity: 0.6; text-align: center;
}
.aclaw-conversation-row {
  display: flex; align-items: stretch; gap: 4px;
  border-radius: 6px;
  transition: background-color 120ms;
  position: relative;
}
.aclaw-conversation-row:hover { background: var(--ableclaw-sidebar-hover-bg, rgba(127, 127, 127, 0.10)); }
.aclaw-conversation-row.is-active { background: var(--ableclaw-sidebar-active-bg, rgba(127, 127, 127, 0.18)); }
/* Bug #101 — streaming-in-progress indicator. Pulsing dot on rows whose
   conversation has an in-flight stream. Shown for background streams
   (when the user has navigated away from a conv that's still receiving
   deltas) AND for the active conv (subtle reinforcement of the in-bar
   indicator). The :before is anchored bottom-right of the row so it
   doesn't push other content; pulses with a 1.4s cycle. */
.aclaw-conversation-row[data-streaming="true"]::after,
.aclaw-conversation[data-streaming="true"]::after {
  content: "";
  position: absolute;
  right: 8px; top: 50%; transform: translateY(-50%);
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ableclaw-accent, #6366f1);
  box-shadow: 0 0 0 0 var(--ableclaw-accent, #6366f1);
  animation: aclaw-conv-stream-pulse 1.4s ease-out infinite;
  pointer-events: none;
}
@keyframes aclaw-conv-stream-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.5); opacity: 1; }
  100% { box-shadow: 0 0 0 8px rgba(99, 102, 241, 0);   opacity: 0.6; }
}
.aclaw-conversation {
  flex: 1; min-width: 0;
  display: block; text-align: left;
  padding: 8px 10px;
  background: transparent; color: inherit; border: 0; cursor: pointer;
  font-size: 13px; line-height: 1.3;
  border-radius: 6px;
}
.aclaw-conversation.is-active { background: var(--ableclaw-sidebar-active-bg, rgba(127, 127, 127, 0.18)); }
.aclaw-conversation-title-row {
  display: flex; align-items: center; gap: 6px; min-width: 0;
}
.aclaw-conv-badge {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 999px;
  flex-shrink: 0;
  background: var(--ableclaw-channel-default);
}
.aclaw-conv-badge[data-channel="telegram"]  { background: var(--ableclaw-channel-telegram); }
.aclaw-conv-badge[data-channel="email"]     { background: var(--ableclaw-channel-email); }
.aclaw-conv-badge[data-channel="slack"]     { background: var(--ableclaw-channel-slack); }
.aclaw-conv-badge[data-channel="sms"]       { background: var(--ableclaw-channel-sms); }
.aclaw-conv-badge[data-channel="whatsapp"]  { background: var(--ableclaw-channel-sms); }
.aclaw-conv-badge[data-channel="web"]       { background: var(--ableclaw-channel-web); }

/* Conversation row icons — one round, brand-colored badge per channel
   that participated in the conversation. Inside each badge sits a
   FontAwesome glyph (loaded via the theme's vendorLibraries declaration).
   Hosts without FA still get the colored badge (just no glyph inside),
   which still signals channel origin via color + the title attribute. */
.aclaw-conv-icons {
  display: inline-flex; align-items: center; gap: 4px;
  flex-shrink: 0;
}
.aclaw-conv-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px;
  border-radius: 50%;
  color: #ffffff;
  background: var(--ableclaw-channel-default);
  font-size: 9px; line-height: 1;
  flex-shrink: 0;
}
.aclaw-conv-icon i { color: inherit; line-height: 1; }
.aclaw-conv-icon[data-channel="telegram"]  { background: var(--ableclaw-channel-telegram); }
.aclaw-conv-icon[data-channel="email"]     { background: var(--ableclaw-channel-email); }
.aclaw-conv-icon[data-channel="slack"]     { background: var(--ableclaw-channel-slack); }
.aclaw-conv-icon[data-channel="sms"]       { background: var(--ableclaw-channel-sms); }
.aclaw-conv-icon[data-channel="whatsapp"]  { background: var(--ableclaw-channel-sms); }
.aclaw-conv-icon[data-channel="web"]       { background: var(--ableclaw-channel-web); }
.aclaw-conv-icon[data-channel="ableui"]    { background: var(--ableclaw-channel-default); }

/* Main-chat channel separator — hair-thin line gradient with a soft tinted
   pill centered. Modern minimal aesthetic: the pill background uses
   color-mix() with the channel color at 8% opacity, falling back to a
   neutral tint for older browsers. */
.aclaw-channel-divider {
  display: flex; align-items: center; gap: 14px;
  width: 100%; margin: 20px 0 14px;
  color: var(--text-muted, var(--ableclaw-sidebar-fg));
  user-select: none;
}
.aclaw-channel-divider::before,
.aclaw-channel-divider::after {
  content: '';
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent 0%,
    var(--border-default, var(--ableclaw-border, rgba(127,127,127,0.20))) 30%,
    var(--border-default, var(--ableclaw-border, rgba(127,127,127,0.20))) 70%,
    transparent 100%
  );
}
.aclaw-channel-divider-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 10px; font-weight: 600; letter-spacing: 0.10em; text-transform: uppercase;
  line-height: 1;
  background: color-mix(in srgb, currentColor 8%, transparent);
}
.aclaw-channel-divider-pill svg { width: 11px; height: 11px; flex-shrink: 0; }
.aclaw-channel-divider-pill i { font-size: 10px; line-height: 1; flex-shrink: 0; }
.aclaw-channel-divider[data-channel="telegram"] .aclaw-channel-divider-pill { color: var(--ableclaw-channel-telegram); }
.aclaw-channel-divider[data-channel="email"]    .aclaw-channel-divider-pill { color: var(--ableclaw-channel-email); }
.aclaw-channel-divider[data-channel="slack"]    .aclaw-channel-divider-pill { color: var(--ableclaw-channel-slack); }
.aclaw-channel-divider[data-channel="sms"]      .aclaw-channel-divider-pill { color: var(--ableclaw-channel-sms); }
.aclaw-channel-divider[data-channel="whatsapp"] .aclaw-channel-divider-pill { color: var(--ableclaw-channel-sms); }
.aclaw-channel-divider[data-channel="web"]      .aclaw-channel-divider-pill { color: var(--ableclaw-channel-web); }
.aclaw-channel-divider[data-channel="ableui"]   .aclaw-channel-divider-pill { color: var(--ableclaw-channel-default); }
.aclaw-conversation-title {
  font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  flex: 1; min-width: 0;
}
.aclaw-conversation-meta { font-size: 11px; opacity: 0.5; margin-top: 2px; }
/* Bug #119 — copy + delete buttons OVERLAY the row from the right edge so
   they never compress the title. Title gets 100% width always; the buttons
   fade in on row :hover with a gradient mask underneath that hides the
   tail of the title under the buttons (ChatGPT / Claude sidebar pattern).
   Pre-fix the buttons were flex 0/0/24px reserving ~48px of horizontal
   space at all times even when opacity:0, which forced titles like
   "Image Analysi…" to truncate on a 240px sidebar. */
/* Bug #119 — buttons OVERLAY at the bottom-right of the row, aligned
   with the meta row baseline (the "Yesterday 14:04" timestamp). They
   sit on row 2 instead of dead-centering on row 1's title, which made
   them look like they were colliding with the title text on hover. */
.aclaw-conversation-delete,
.aclaw-conversation-copy-id {
  position: absolute;
  bottom: 6px;
  width: 20px; height: 20px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; color: inherit; border: 0;
  cursor: pointer; opacity: 0;
  font-size: 12px; line-height: 1;
  border-radius: 4px;
  transition: opacity 120ms, background-color 120ms;
  z-index: 2;
  pointer-events: none;  /* don't intercept clicks while hidden */
}
.aclaw-conversation-delete { right: 6px; font-size: 14px; }
.aclaw-conversation-copy-id { right: 30px; }
.aclaw-conversation-row:hover .aclaw-conversation-delete,
.aclaw-conversation-row:hover .aclaw-conversation-copy-id {
  opacity: 0.7;
  pointer-events: auto;
}
.aclaw-conversation-delete:hover,
.aclaw-conversation-copy-id:hover {
  opacity: 1; background: var(--ableclaw-sidebar-hover-bg, rgba(127, 127, 127, 0.20));
}
.aclaw-conversation-copy-id.is-copied {
  opacity: 1 !important;
  pointer-events: auto;
  color: var(--success, #16a34a);
  background: rgba(22, 163, 74, 0.10);
}

.aclaw-chat {
  display: grid;
  /* Welcome AND messages share row 1 (only one visible at a time via [hidden]);
     attachments + input + footer stay fixed at the bottom regardless of
     conversation list length in the sidebar. min-height: 0 propagates through
     the grid so the middle row scrolls instead of pushing the input off-screen. */
  grid-template-rows: minmax(0, 1fr) auto auto auto;
  grid-template-areas:
    "stream"
    "attachments"
    "input"
    "footer";
  min-width: 0; min-height: 0;
  position: relative;
  overflow: hidden;
}
.aclaw-welcome,
.aclaw-messages    { grid-area: stream; }
.aclaw-attachments { grid-area: attachments; }
.aclaw-input-bar   { grid-area: input; }
.aclaw-input-footer { grid-area: footer; }
.aclaw-welcome {
  min-height: 0; min-width: 0;
  overflow-y: auto; overflow-x: hidden;
  padding: 24px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 18px;
  /* Ensures narrow viewports never cause inner inline flow to break into
     single-character columns — children get a width budget, not the
     intrinsic content width. */
  box-sizing: border-box;
}
/* Welcome text always reflows as a paragraph, even at very narrow widths.
   Without these, the inline children of .aclaw-welcome shrink to fit the
   smallest word and overflow vertically one-character-per-line. */
.aclaw-welcome > * { max-width: 100%; box-sizing: border-box; }
.aclaw-welcome p, .aclaw-welcome h1, .aclaw-welcome .aclaw-welcome-subtitle,
.aclaw-welcome .aclaw-welcome-helper {
  word-wrap: break-word; overflow-wrap: break-word;
}
/* Explicit hide — author-level [hidden] beats the implicit user-agent rule
   that the explicit display:flex above otherwise overrides. Without this
   the welcome panel + shortcut grid stay visible above the message stream
   when the conversation transitions from welcome state to messages. */
.aclaw-welcome[hidden] { display: none !important; }
.aclaw-welcome-identity {
  display: flex; align-items: center; gap: 12px;
}
.aclaw-welcome-avatar {
  width: 44px; height: 44px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 700; color: #fff;
  background: var(--accent-secondary, #3b82f6);
}
.aclaw-welcome-name-block { display: flex; flex-direction: column; gap: 2px; }
.aclaw-welcome-name { font-size: 16px; font-weight: 600; }
.aclaw-welcome-tagline { font-size: 12px; opacity: 0.6; }
.aclaw-welcome-headline { text-align: center; max-width: 720px; }
.aclaw-welcome-title { font-size: 22px; font-weight: 600; margin: 0 0 6px 0; }
.aclaw-welcome-subtitle { font-size: 14px; opacity: 0.7; margin: 0; line-height: 1.5; }
.aclaw-shortcut-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
  width: 100%; max-width: 720px;
}
.aclaw-shortcut {
  display: flex; flex-direction: column; gap: 6px; align-items: flex-start;
  padding: 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-default, rgba(255, 255, 255, 0.08));
  border-radius: 10px; color: inherit; cursor: pointer;
  text-align: left;
  transition: background-color 120ms, border-color 120ms;
}
.aclaw-shortcut:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--accent-secondary, #3b82f6);
}
.aclaw-shortcut-icon { font-size: 18px; opacity: 0.85; }
.aclaw-shortcut-category {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em;
  opacity: 0.6;
}
.aclaw-shortcut-text { font-size: 13px; line-height: 1.4; }

/* WELCOME REDESIGN — large sparkle icon + headline + 4-category shortcut
   grid (ANALYZE / MONITOR / ACT / REPORT). Each column has a colored
   header and stacked bordered cards. */
.aclaw-welcome-icon {
  width: 96px; height: 96px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #a78bfa, #7c3aed);
  color: #fff;
  box-shadow: 0 12px 32px rgba(124, 58, 237, 0.35);
  margin-bottom: 6px;
}
.aclaw-welcome-icon svg {
  width: 48px; height: 48px;
  fill: currentColor;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}
.aclaw-welcome-headline-h1 {
  font-size: 28px; font-weight: 700;
  text-align: center;
  margin: 0;
  letter-spacing: -0.01em;
}
.aclaw-welcome-categories {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  width: 100%; max-width: 960px;
  margin-top: 8px;
}
@media (max-width: 1100px) {
  .aclaw-welcome-categories { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .aclaw-welcome-categories { grid-template-columns: 1fr; }
}
.aclaw-welcome-category {
  display: flex; flex-direction: column; gap: 8px;
}
.aclaw-welcome-category-header {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.10em;
  text-transform: uppercase;
  padding: 4px 0;
}
.aclaw-welcome-category-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 6px;
  font-size: 13px;
  flex: 0 0 auto;
}
.aclaw-welcome-category-items {
  display: flex; flex-direction: column; gap: 8px;
}
.aclaw-welcome-category-items .aclaw-shortcut {
  flex-direction: column; gap: 4px; align-items: flex-start;
}
/* Per-category accent — header label color + card border accent on hover. */
.aclaw-welcome-category--analyze .aclaw-welcome-category-header { color: #10b981; }
.aclaw-welcome-category--analyze .aclaw-welcome-category-icon  { background: rgba(16, 185, 129, 0.18); color: #10b981; }
.aclaw-welcome-category--analyze .aclaw-shortcut:hover         { border-color: #10b981; }

.aclaw-welcome-category--monitor .aclaw-welcome-category-header { color: #3b82f6; }
.aclaw-welcome-category--monitor .aclaw-welcome-category-icon  { background: rgba(59, 130, 246, 0.18); color: #3b82f6; }
.aclaw-welcome-category--monitor .aclaw-shortcut:hover         { border-color: #3b82f6; }

.aclaw-welcome-category--act .aclaw-welcome-category-header { color: #eab308; }
.aclaw-welcome-category--act .aclaw-welcome-category-icon  { background: rgba(234, 179, 8, 0.18); color: #eab308; }
.aclaw-welcome-category--act .aclaw-shortcut:hover         { border-color: #eab308; }

.aclaw-welcome-category--report .aclaw-welcome-category-header { color: #ef4444; }
.aclaw-welcome-category--report .aclaw-welcome-category-icon  { background: rgba(239, 68, 68, 0.18); color: #ef4444; }
.aclaw-welcome-category--report .aclaw-shortcut:hover         { border-color: #ef4444; }

.aclaw-welcome-helper {
  font-size: 13px; opacity: 0.55;
  text-align: center;
  margin: 4px 0 0 0;
}
.aclaw-welcome-helper em { font-style: italic; }

.aclaw-messages {
  min-height: 0; min-width: 0;
  overflow-y: auto; overflow-x: hidden;
  padding: 16px 24px;
  display: flex; flex-direction: column; gap: 12px;
  box-sizing: border-box;
}
.aclaw-messages[hidden] { display: none !important; }
.aclaw-message { display: flex; flex-direction: column; gap: 4px; }
.aclaw-message--user { align-items: flex-end; }
.aclaw-message--assistant { align-items: flex-start; }

/* Greeting bubble — assistant intro shown when the conversation is fresh
   (no real messages yet) or has just been started via "+ New chat".
   ONLINE pill above the bubble matches the agent-online affordance. */
.aclaw-greeting-status {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #10b981;
}
.aclaw-greeting-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4);
  animation: aclaw-greeting-pulse 2s infinite;
}
@keyframes aclaw-greeting-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4); }
  70%  { box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); }
  100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}
.aclaw-message-bubble {
  max-width: 80%;
  padding: 11px 16px;
  /* Asymmetric radius — assistant bubble has flat bottom-left ("speaking
     from the left"); user bubble has flat bottom-right ("speaking from
     the right"). Modern chat-bubble convention. */
  border-radius: 16px 16px 16px 4px;
  background: var(--ableclaw-bubble-agent-bg);
  color: var(--ableclaw-bubble-agent-fg);
  font-size: 14px; line-height: 1.55;
  word-wrap: break-word;
  overflow-wrap: break-word;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.aclaw-message--user .aclaw-message-bubble {
  background: var(--ableclaw-bubble-user-bg); color: var(--ableclaw-bubble-user-fg);
  border-radius: 16px 16px 4px 16px;
}
.aclaw-message-time {
  font-size: 10px; opacity: 0.45;
  padding: 0 4px;
  font-variant-numeric: tabular-nums;
  display: inline-flex; align-items: center; gap: 6px;
  flex-wrap: wrap;
}
/* Partial-turn badge — surfaces on assistant bubbles whose underlying
   conversation_messages.metadata.partial=true (server-side marker written
   when the agent runtime crashed mid-stream). Subtle, muted-gray, sits
   inline with the timestamp; wraps below on narrow viewports. */
.aclaw-message-interrupted {
  /* Bug #93 — raise contrast to WCAG AA 4.5:1 on a typical white background.
     Old: rgba(120,120,120,0.95) text on rgba(120,120,120,0.10) bg ≈ 2.5:1.
     New: #475569 text on #e2e8f0 bg ≈ 4.7:1. */
  display: inline-flex; align-items: center; gap: 4px;
  padding: 1px 6px;
  border-radius: 8px;
  background: #e2e8f0;
  color: #475569;
  font-size: 9.5px; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase;
  font-style: italic;
  cursor: help;
  opacity: 1;
}
.aclaw-message-interrupted i { font-size: 9px; opacity: 0.85; }
.aclaw-code {
  position: relative;
  margin: 8px 0; padding: 8px 12px;
  background: var(--ableclaw-code-bg);
  color: var(--ableclaw-code-fg);
  border-radius: 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 12px;
  overflow-x: auto;
}
.aclaw-code-copy {
  position: absolute; top: 6px; right: 6px;
  padding: 2px 8px;
  background: rgba(255, 255, 255, 0.1);
  color: inherit;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 4px;
  font-size: 11px; line-height: 1.4; cursor: pointer;
  opacity: 0; transition: opacity 120ms;
}
.aclaw-code:hover .aclaw-code-copy { opacity: 1; }
.aclaw-code-copy:hover { background: rgba(255, 255, 255, 0.18); }

.aclaw-table {
  width: 100%; border-collapse: collapse;
  margin: 10px 0;
  font-size: 13px;
  color: inherit;
}
.aclaw-table th, .aclaw-table td {
  padding: 6px 10px;
  border: 1px solid var(--ableclaw-table-border);
  text-align: left;
  color: inherit;
  background: var(--ableclaw-table-row-bg);
}
.aclaw-table th {
  background: var(--ableclaw-table-header-bg);
  color: var(--ableclaw-table-header-fg);
  font-weight: 600;
}
/* Bare <th> / <td> emitted in dark contexts without an .aclaw-table wrapper
   (e.g. sanitized agent output that loses the class). Inherit color and
   apply a subtle tinted header so text is always readable on dark surfaces. */
.aclaw-messages table, .aclaw-artifact-body table {
  width: 100%; border-collapse: collapse;
  margin: 10px 0; font-size: 13px;
  color: inherit;
}
.aclaw-messages table th, .aclaw-artifact-body table th {
  background: var(--ableclaw-table-header-bg);
  color: var(--ableclaw-table-header-fg);
  font-weight: 600;
  padding: 6px 10px;
  border: 1px solid var(--ableclaw-table-border);
  text-align: left;
}
.aclaw-messages table td, .aclaw-artifact-body table td {
  background: var(--ableclaw-table-row-bg);
  color: inherit;
  padding: 6px 10px;
  border: 1px solid var(--ableclaw-table-border);
  text-align: left;
}

.aclaw-attachments {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 8px 16px 0 16px;
  background: var(--surface-subtle, rgba(0, 0, 0, 0.12));
}
.aclaw-attachments[hidden] { display: none !important; }
.aclaw-attachment {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 8px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border-default, rgba(255, 255, 255, 0.10));
  border-radius: 14px;
  font-size: 12px; line-height: 1.2;
  max-width: 240px;
}
.aclaw-attachment.is-loading { opacity: 0.7; }
.aclaw-attachment.is-error {
  border-color: #b91c1c;
  background: rgba(185, 28, 28, 0.12);
}
.aclaw-attachment-icon { font-size: 12px; opacity: 0.85; }
.aclaw-attachment-name {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 160px;
}
.aclaw-attachment-remove {
  background: transparent; color: inherit; border: 0;
  cursor: pointer; opacity: 0.6; font-size: 14px; line-height: 1;
  padding: 0 2px;
}
.aclaw-attachment-remove:hover { opacity: 1; }
.aclaw-attachment-retry {
  background: transparent; color: inherit; border: 0;
  cursor: pointer; opacity: 0.7; font-size: 11px; padding: 0 4px;
  text-decoration: underline;
}
.aclaw-attachment-retry:hover { opacity: 1; }

/* Bug #107 — image attachment chip becomes a real thumbnail card.
   Wraps tighter than the text-chip layout, lifts the filename to a
   bottom hover-only label, and gives the thumbnail click affordance. */
.aclaw-attachment.is-image {
  padding: 0;
  border-radius: 10px;
  overflow: hidden;
  border-color: var(--border-default, rgba(255, 255, 255, 0.18));
  position: relative;
  background: rgba(255, 255, 255, 0.03);
}
.aclaw-attachment-thumb {
  display: block;
  width: 56px; height: 56px;
  object-fit: cover;
  cursor: zoom-in;
  background: rgba(0, 0, 0, 0.15);
  transition: filter 120ms ease-out;
}
.aclaw-attachment-thumb:hover { filter: brightness(0.85); }
.aclaw-attachment.is-image .aclaw-attachment-name { display: none; }
.aclaw-attachment.is-image .aclaw-attachment-remove {
  position: absolute;
  top: 2px; right: 2px;
  width: 18px; height: 18px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  border-radius: 50%;
  font-size: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  opacity: 0.9;
}
.aclaw-attachment.is-image .aclaw-attachment-remove:hover {
  background: rgba(220, 38, 38, 0.85);
}

/* Bug #108 — attachment block hanging below user message text. */
.aclaw-message-attachments {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 6px;
}
.aclaw-message-attachment-thumb {
  display: block;
  width: 200px; max-width: 100%;
  max-height: 240px;
  object-fit: cover;
  border-radius: 10px;
  cursor: zoom-in;
  border: 1px solid var(--border-default, rgba(255, 255, 255, 0.08));
  background: rgba(0, 0, 0, 0.15);
  transition: filter 120ms ease-out;
}
.aclaw-message-attachment-thumb:hover { filter: brightness(0.92); }
.aclaw-message-attachment-file {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-default, rgba(255, 255, 255, 0.10));
  border-radius: 14px;
  font-size: 13px; line-height: 1.2;
  max-width: 240px;
  color: inherit; text-decoration: none;
  transition: background 120ms;
}
.aclaw-message-attachment-file:hover {
  background: rgba(255, 255, 255, 0.10);
}
.aclaw-message-attachment-icon { font-size: 14px; opacity: 0.85; }
.aclaw-message-attachment-name {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 200px;
}

/* Bug #109 — full-screen image lightbox. Backdrop click + close button
   + Esc all dismiss. Uses fixed positioning to escape blueprint scroll. */
.aclaw-lightbox {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.85);
  z-index: 10000;
  display: flex; align-items: center; justify-content: center;
  padding: 32px;
  cursor: zoom-out;
  animation: aclaw-lightbox-fade 140ms ease-out;
}
.aclaw-lightbox[hidden] { display: none !important; }
.aclaw-lightbox-img {
  max-width: 100%; max-height: calc(100vh - 120px);
  border-radius: 6px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  cursor: default;
}
.aclaw-lightbox-close {
  position: absolute; top: 16px; right: 20px;
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 0;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  font-size: 22px; line-height: 1;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.aclaw-lightbox-close:hover { background: rgba(255, 255, 255, 0.30); }
.aclaw-lightbox-close:focus-visible {
  outline: 2px solid #fff; outline-offset: 2px;
}
.aclaw-lightbox-caption {
  position: absolute; bottom: 24px; left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.85);
  font-size: 13px;
  background: rgba(0, 0, 0, 0.45);
  padding: 6px 12px;
  border-radius: 12px;
  max-width: 60%;
  text-align: center;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
@keyframes aclaw-lightbox-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Bug #112 — drag-over visual cue. The dropzone is the .aclaw-chat
   container; we set data-dragging="true" on it during a drag with files. */
.aclaw-chat[data-dragging="true"]::after {
  content: "Drop file to attach";
  position: absolute; inset: 0;
  background: rgba(99, 102, 241, 0.18);
  border: 2px dashed var(--ableclaw-accent, #6366f1);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  color: var(--ableclaw-accent, #6366f1);
  font-size: 16px; font-weight: 600;
  pointer-events: none;
  z-index: 1000;
}

.aclaw-input-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  border-top: 1px solid var(--ableclaw-border-soft);
  background: var(--ableclaw-input-bar-bg);
  flex-shrink: 0;
  box-sizing: border-box;
  /* Encapsulate the row in a soft pill — gives the input a modern
     "command bar" feel rather than the dated chat-form look. */
  border-radius: 18px;
  margin: 10px 16px 0;
  border-top: 0;
  border: 1px solid var(--ableclaw-border-soft);
  background: var(--ableclaw-input-bg);
  transition: border-color 120ms, box-shadow 120ms;
}
.aclaw-input-bar:focus-within {
  border-color: var(--ableclaw-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ableclaw-accent) 18%, transparent);
}
.aclaw-input-footer {
  /* Bug #93 — opacity 0.55 on 11px text was below WCAG AA. Raised to
     0.78 which puts contrast close to 4.5:1 against typical bg, and
     pin a deliberate color instead of inheriting near-black. */
  display: flex; align-items: center; justify-content: space-between;
  padding: 4px 16px 8px 16px;
  background: var(--ableclaw-input-bar-bg);
  font-size: 11px; opacity: 0.78;
  color: var(--ableclaw-text-muted, #475569);
  flex-shrink: 0;
  box-sizing: border-box;
}
.aclaw-input-footer-shortcut {
  font-variant-numeric: tabular-nums;
}
.aclaw-upload {
  width: 32px; height: 32px; border-radius: 999px;
  background: transparent; color: inherit; border: 0;
  cursor: pointer; opacity: 0.55;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
  transition: opacity 120ms, background-color 120ms, transform 120ms;
}
.aclaw-upload:hover:not(:disabled) {
  opacity: 1;
  background: var(--ableclaw-sidebar-hover-bg, rgba(127, 127, 127, 0.10));
}
.aclaw-upload:disabled { cursor: not-allowed; opacity: 0.4; }
.aclaw-upload i { font-size: 14px; line-height: 1; }
.aclaw-input {
  flex: 1;
  padding: 8px 4px;
  background: transparent; color: var(--ableclaw-input-fg);
  border: 0;
  border-radius: 0;
  font: inherit; font-size: 14px; line-height: 1.5;
  resize: none;
  min-height: 28px; max-height: 160px;
  min-width: 0;
  box-sizing: border-box;
}
.aclaw-input:focus {
  outline: none;
}
.aclaw-input::placeholder {
  opacity: 0.55;
}
.aclaw-send {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px;
  background: var(--ableclaw-accent); color: var(--ableclaw-accent-fg);
  border: 0; border-radius: 999px; cursor: pointer;
  font-size: 13px; font-weight: 600;
  transition: opacity 120ms, transform 120ms, box-shadow 120ms;
  flex-shrink: 0;
}
.aclaw-send:hover:not(:disabled) {
  opacity: 0.95;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--ableclaw-accent) 30%, transparent);
}
.aclaw-send:active:not(:disabled) { transform: scale(0.97); }
.aclaw-send:disabled { opacity: 0.5; cursor: not-allowed; }
.aclaw-send i { font-size: 11px; }
.aclaw-stop {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px;
  background: var(--ableclaw-stop-bg); color: var(--ableclaw-accent-fg);
  border: 0; border-radius: 999px; cursor: pointer;
  font-size: 13px; font-weight: 600; line-height: 1;
  transition: opacity 120ms, background-color 120ms;
  flex-shrink: 0;
}
.aclaw-stop:hover { opacity: 0.95; background: var(--ableclaw-stop-bg-hover); }
.aclaw-stop i { font-size: 11px; }
/* In-flight: hide Send, show Stop. */
.aclaw-input-bar--in-flight .aclaw-send { display: none; }
.aclaw-stop[hidden] { display: none !important; }
.aclaw-input-bar--in-flight .aclaw-stop { display: inline-flex; align-items: center; }

/* Drag-and-drop overlay — covers the chat surface with a soft frosted
   panel + drop-target card when files are being dragged in. Hidden by
   default; .aclaw-chat[data-dragging="true"] flips visibility. */
.aclaw-dropzone {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
  opacity: 0;
  background: color-mix(in srgb, var(--ableclaw-bg) 70%, transparent);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 60;
  transition: opacity 140ms;
}
.aclaw-chat[data-dragging="true"] .aclaw-dropzone {
  opacity: 1;
  pointer-events: auto;
}
.aclaw-dropzone-card {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 32px 40px;
  border-radius: 18px;
  background: var(--ableclaw-bg);
  border: 2px dashed var(--ableclaw-accent);
  color: var(--ableclaw-fg);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
  pointer-events: none;
  text-align: center;
}
.aclaw-dropzone-icon {
  font-size: 36px;
  color: var(--ableclaw-accent);
  margin-bottom: 2px;
}
.aclaw-dropzone-title {
  font-size: 16px; font-weight: 700;
  letter-spacing: 0.01em;
}
.aclaw-dropzone-sub {
  font-size: 12px; opacity: 0.6;
  letter-spacing: 0.04em;
}

.aclaw-artifact {
  display: flex; flex-direction: column;
  min-width: 0; min-height: 0;
  border-left: 1px solid var(--ableclaw-border-soft);
  background: var(--ableclaw-artifact-bg);
  color: var(--ableclaw-fg);
  overflow: hidden;
}
.aclaw-artifact[hidden] { display: none !important; }
.aclaw-artifact-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--ableclaw-border-soft);
  font-size: 13px; font-weight: 600;
  flex-shrink: 0;
}
.aclaw-artifact-type { opacity: 0.85; }
.aclaw-artifact-actions {
  display: inline-flex; align-items: center; gap: 4px;
}
.aclaw-artifact-close, .aclaw-artifact-clear {
  background: transparent; color: inherit; border: 0; cursor: pointer;
  font-size: 16px; line-height: 1; opacity: 0.7;
  padding: 2px 6px; border-radius: 4px;
  transition: opacity 120ms, background-color 120ms;
}
.aclaw-artifact-close:hover, .aclaw-artifact-clear:hover {
  opacity: 1; background: rgba(255, 255, 255, 0.06);
}
.aclaw-artifact-body {
  flex: 1; min-height: 0;
  overflow-y: auto;
  padding: 14px;
  font-size: 13px; line-height: 1.5;
}

/* Brand mark in the Agent Thinking header (purple rounded square w/ white
   brain icon). Matches legacy <askAble> visual where the brain logo sits
   next to the title. */
.aclaw-artifact-brand {
  width: 24px; height: 24px;
  border-radius: 6px;
  background: linear-gradient(135deg, #7c3aed 0%, #6366f1 100%);
  color: #ffffff;
  display: inline-flex; align-items: center; justify-content: center;
  margin-right: 8px;
  flex-shrink: 0;
  box-shadow: 0 1px 3px rgba(124, 58, 237, 0.25);
}
.aclaw-artifact-brand i { font-size: 12px; }
.aclaw-artifact-header > .aclaw-artifact-type {
  flex: 1; min-width: 0;
}

/* Subtle footer hint at the bottom of the panel — matches the legacy
   "Agent reasoning log" placeholder strip. */
.aclaw-artifact-footer {
  flex-shrink: 0;
  padding: 10px 14px;
  border-top: 1px solid var(--ableclaw-border-soft);
  font-size: 12px;
  color: var(--grey-500, #94a3b8);
  font-style: italic;
}

/* Brain TOGGLE button — always-visible floating control in the top-right
   of .aclaw-chat. Clicking it shows/hides the Agent Thinking panel.
   Closed state: white background with purple brain. Open state (host
   carries data-thinking-open): purple background with white brain.
   Matches the visual swap in legacy askAble image 1 -> image 2. */
.aclaw-thinking-toggle {
  position: absolute;
  top: 12px; right: 12px;
  z-index: 25;
  width: 36px; height: 36px;
  border-radius: 10px;
  border: 1px solid var(--ableclaw-border-soft);
  background: var(--ableclaw-bg, #ffffff);
  color: #7c3aed;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease,
              transform 120ms ease, box-shadow 160ms ease;
  box-shadow: 0 1px 3px rgba(15, 17, 23, 0.06);
}
/* Active-conversation copy chip — bug #4: relocated OUT of the chat chrome
   (where it floated top-right and overlapped message content, always on)
   and INTO the sidebar header (the conversation-selection menu, below the
   search). It now appears ONLY when that menu is displayed — on desktop the
   sidebar is always present; on mobile the sidebar is a slide-in drawer, so
   the chip is hidden until the user opens conversation history. In normal
   flow, full-width, shown only when an active conversation exists (.hidden
   attr toggled via _setActiveConvChip). Click copies the full UUID; the
   visible id shows the first 8 chars so users can verify which conversation. */
.aclaw-active-conv-chip {
  margin-top: 2px;
  width: 100%;
  min-height: 30px;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid var(--ableclaw-border-soft);
  background: var(--ableclaw-sidebar-hover-bg, rgba(127, 127, 127, 0.10));
  color: var(--ableclaw-sidebar-fg, var(--text-primary, #1e293b));
  display: flex; align-items: center; gap: 6px;
  font-size: 11px;
  font-family: var(--font-mono, ui-monospace, monospace);
  cursor: pointer;
  text-align: left;
  transition: background-color 160ms ease, transform 120ms ease,
              box-shadow 160ms ease, opacity 160ms ease;
  box-shadow: 0 1px 2px rgba(15, 17, 23, 0.04);
}
.aclaw-active-conv-chip[hidden] { display: none; }
.aclaw-active-conv-chip:hover {
  background: color-mix(in srgb, #7c3aed 8%, var(--ableclaw-bg, #ffffff));
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(124, 58, 237, 0.18);
}
.aclaw-active-conv-chip:active { transform: translateY(0); }
.aclaw-active-conv-chip.is-copied {
  color: var(--success, #16a34a);
  border-color: var(--success, #16a34a);
  background: color-mix(in srgb, var(--success, #16a34a) 10%, var(--ableclaw-bg, #ffffff));
}
.aclaw-active-conv-chip-label {
  /* Bug #93 — opacity 0.65 on 10px text dipped under WCAG AA.
     Raised to 0.85 and made the color deliberate. */
  opacity: 0.85;
  color: var(--ableclaw-text-muted, #475569);
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.aclaw-active-conv-chip-id { font-weight: 600; }
.aclaw-active-conv-chip-glyph { opacity: 0.6; font-size: 12px; margin-left: auto; }
.aclaw-thinking-toggle:hover {
  background: color-mix(in srgb, #7c3aed 8%, var(--ableclaw-bg, #ffffff));
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(124, 58, 237, 0.18);
}
.aclaw-thinking-toggle:active { transform: translateY(0); }
.aclaw-thinking-toggle i { font-size: 16px; }
able-claw[data-thinking-open="true"] .aclaw-thinking-toggle {
  background: linear-gradient(135deg, #7c3aed 0%, #6366f1 100%);
  color: #ffffff;
  border-color: transparent;
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.32);
}

/* Unread-activity dot — small accent on the brain button when tool / reasoning
   / lifecycle events have landed since the panel was last closed. Reset when
   the user opens the panel (see _openArtifactPane). The dot mirrors the
   notification-bell pattern used elsewhere in the platform. */
.aclaw-thinking-toggle { position: absolute; }
.aclaw-thinking-toggle::after {
  content: '';
  position: absolute;
  top: 4px; right: 4px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #f59e0b;
  border: 2px solid var(--ableclaw-bg, #ffffff);
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 160ms ease, transform 160ms ease;
}
able-claw[data-thinking-unread="true"] .aclaw-thinking-toggle::after {
  opacity: 1;
  transform: scale(1);
}
/* Hide the unread dot when the panel is open — opening clears the marker
   but this rule prevents a flash mid-transition. */
able-claw[data-thinking-open="true"] .aclaw-thinking-toggle::after {
  opacity: 0 !important;
}

/* When toggled OPEN in helper / launcher modes (where the artifact pane is
   normally hidden because the grid only has 1 column), surface the pane
   as a right-edge floating slide-in overlay. Full mode keeps the existing
   3-col grid layout — the pane is just an additional column there. */
able-claw[data-mode="helper"][data-thinking-open="true"] > .aclaw-grid > .aclaw-artifact,
able-claw[data-mode="launcher"][data-thinking-open="true"] > .aclaw-grid > .aclaw-artifact {
  display: flex !important;
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: min(360px, 92%);
  z-index: 30;
  border-left: 1px solid var(--ableclaw-border-soft);
  box-shadow: -8px 0 24px rgba(15, 17, 23, 0.18);
  background: var(--ableclaw-artifact-bg, var(--ableclaw-bg, #ffffff));
  animation: aclaw-thinking-slide-in 200ms ease-out;
}
@keyframes aclaw-thinking-slide-in {
  from { transform: translateX(8px); opacity: 0; }
  to   { transform: translateX(0);   opacity: 1; }
}

/* Tool-progress timeline (mounted by _appendToolEvent) */
.aclaw-timeline {
  display: flex; flex-direction: column; gap: 8px;
  max-height: 100%; overflow-y: auto;
}
.aclaw-tool-row {
  display: flex; gap: 8px; align-items: flex-start;
  font-size: 13px; line-height: 1.4;
}
.aclaw-tool-row::before {
  content: '';
  width: 8px; height: 8px; border-radius: 50%;
  margin-top: 5px;
  flex-shrink: 0;
}
.aclaw-tool-tool_call::before    { background: #3b82f6; }
.aclaw-tool-tool_result::before  { background: #10b981; }
.aclaw-tool-reasoning::before {
  background: transparent;
  border: 2px solid var(--grey-500, #94a3b8);
  width: 6px; height: 6px;
}
/* Lifecycle rows: neutral, slightly transparent. Subtle gradient dot so
   they read as "scaffolding" — visible but not competing with real tool
   events for attention. The subkind-driven arrow lives inside the body. */
.aclaw-tool-lifecycle::before {
  background: var(--grey-400, #cbd5e1);
  opacity: 0.7;
}
.aclaw-tool-lifecycle {
  color: var(--grey-600, #64748b);
  font-size: 12px;
  white-space: pre-wrap; word-break: break-word;
}
.aclaw-tool-lifecycle-arrow {
  display: inline-block;
  font-weight: 600;
  margin-right: 4px;
  color: var(--grey-700, #475569);
}
.aclaw-tool-name { font-weight: 600; }
.aclaw-tool-args, .aclaw-tool-result-content {
  color: var(--grey-700, #64748b);
  white-space: pre-wrap; word-break: break-word;
  max-width: 100%;
}
.aclaw-tool-reasoning {
  font-style: italic;
  color: var(--grey-600, #94a3b8);
  white-space: pre-wrap; word-break: break-word;
}
/* Per-row glyph + kind label — visual cue for "this row is a reasoning
   block / tool invocation / tool result". Mirrors the prod UX where each
   row in the Agent Thinking panel starts with an icon + short uppercase
   tag so users can scan the timeline at a glance. */
.aclaw-tool-glyph {
  display: inline-block;
  margin-right: 6px;
  font-size: 13px;
  line-height: 1;
  vertical-align: -1px;
  opacity: 0.85;
}
.aclaw-tool-kind-label {
  display: inline-block;
  margin-right: 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grey-600, #94a3b8);
  vertical-align: 1px;
}
.aclaw-tool-time {
  font-size: 10px; opacity: 0.5;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
  align-self: flex-start;
  margin-top: 3px;
  min-width: 36px; text-align: right;
}
.aclaw-tool-body {
  flex: 1; min-width: 0;
}

/* Per-tool latency badge (2026-05-20).
   Server tags tool_result with data-duration-ms; renderer adds a colored
   pill so the user can scan for slow rows at a glance.
   Tiers chosen to match the operator's mental model of "snappy / normal /
   slow / problematic" rather than absolute milliseconds. */
.aclaw-tool-duration {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  border-radius: 8px;
  font-weight: 600;
  vertical-align: 1px;
}
.aclaw-tool-duration--snappy      { background: rgba(34, 197, 94, 0.15);  color: #16a34a; }
.aclaw-tool-duration--normal      { background: rgba(234, 179, 8, 0.15);  color: #ca8a04; }
.aclaw-tool-duration--slow        { background: rgba(249, 115, 22, 0.18); color: #ea580c; }
.aclaw-tool-duration--problematic { background: rgba(220, 38, 38, 0.20);  color: #dc2626; }

/* Recurring-failure warning row — surfaces inside the tool_result body
   when the SAME (tool, entity) pair has failed N>1 times in the turn.
   Operator-visible signal of broken accessor / missing MV / migration debt. */
.aclaw-tool-recurring {
  margin-top: 4px;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 500;
  background: rgba(220, 38, 38, 0.08);
  border-left: 3px solid #dc2626;
  border-radius: 0 4px 4px 0;
  color: #991b1b;
  line-height: 1.4;
}
.aclaw-tool-recurring code {
  font-family: var(--font-mono, ui-monospace, Menlo, monospace);
  font-size: 10px;
  padding: 0 4px;
  background: rgba(220, 38, 38, 0.10);
  border-radius: 3px;
}

/* End-of-turn summary box — closes the Thinking panel timeline with the
   wall-clock breakdown so the user can answer "why was this turn slow?"
   without inspecting individual rows. */
.aclaw-turn-summary {
  margin: 8px 0 4px 0;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--grey-50, #f8fafc);
  border: 1px solid var(--grey-200, #e2e8f0);
  font-size: 12px;
  line-height: 1.5;
}
.aclaw-turn-summary--error {
  border-color: #fca5a5;
  background: rgba(254, 226, 226, 0.4);
}
.aclaw-turn-summary-headline {
  font-size: 13px;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.aclaw-turn-summary-glyph { font-size: 14px; }
.aclaw-turn-summary-status {
  margin-left: auto;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--grey-600, #64748b);
}
.aclaw-turn-summary--error .aclaw-turn-summary-status {
  color: #dc2626;
}
.aclaw-turn-summary-row {
  color: var(--grey-700, #475569);
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}
.aclaw-turn-summary-row--waste {
  color: #b91c1c;
  font-weight: 500;
}
.aclaw-turn-summary-failed {
  color: #dc2626;
  font-weight: 500;
}
.aclaw-turn-summary-pct {
  color: #6b7280;
  font-weight: 400;
  font-size: 11px;
}
.aclaw-turn-summary-where {
  margin-bottom: 6px;
}
/* Section blocks — slowest calls, per-tool, failing entities */
.aclaw-turn-summary-section {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed rgba(15, 23, 42, 0.12);
}
.aclaw-turn-summary-section--action {
  background: rgba(220, 38, 38, 0.05);
  margin-left: -10px;
  margin-right: -10px;
  padding: 8px 10px 6px;
  border-radius: 4px;
  border-top: none;
}
.aclaw-turn-summary-section-title {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #6b7280;
  margin-bottom: 4px;
}
.aclaw-turn-summary-section--action .aclaw-turn-summary-section-title {
  color: #b91c1c;
}
/* Slowest-call row */
.aclaw-turn-summary-call {
  display: grid;
  grid-template-columns: 18px 50px 1fr auto;
  gap: 6px;
  align-items: baseline;
  padding: 2px 0;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
}
.aclaw-turn-summary-call-glyph { font-size: 12px; }
.aclaw-turn-summary-call-ms {
  font-weight: 600;
  color: #0f172a;
}
.aclaw-turn-summary-call-tool {
  color: #1e3a8a;
  overflow: hidden;
  text-overflow: ellipsis;
}
.aclaw-turn-summary-call-entity {
  color: #475569;
  font-style: italic;
}
.aclaw-turn-summary-call-err {
  color: #b91c1c;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.aclaw-turn-summary-call--error .aclaw-turn-summary-call-ms { color: #b91c1c; }
/* Per-tool row */
.aclaw-turn-summary-tool {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 8px;
  align-items: baseline;
  padding: 2px 0;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.aclaw-turn-summary-tool-name {
  color: #1e3a8a;
  font-weight: 500;
}
.aclaw-turn-summary-tool-count { color: #6b7280; }
.aclaw-turn-summary-tool-failed { color: #dc2626; }
.aclaw-turn-summary-tool-ms {
  color: #0f172a;
  font-weight: 600;
}
/* Failing entity row */
.aclaw-turn-summary-entity {
  padding: 2px 0;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.aclaw-turn-summary-entity-name {
  color: #0f172a;
  font-weight: 600;
}
.aclaw-turn-summary-entity-count {
  color: #b91c1c;
  font-weight: 600;
}
.aclaw-turn-summary-entity-err {
  color: #b91c1c;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
/* LLM round-trip breakdown rows (v3) */
.aclaw-turn-summary-llm-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: baseline;
  padding: 2px 0;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.aclaw-turn-summary-llm-label {
  color: #475569;
}
.aclaw-turn-summary-llm-value {
  color: #0f172a;
  text-align: right;
}
.aclaw-turn-summary-llm-warn {
  color: #b91c1c;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-left: 6px;
}
/* Per-round-trip drill-down table (v4) */
.aclaw-turn-summary-rt-details {
  margin-top: 8px;
}
.aclaw-turn-summary-rt-summary {
  cursor: pointer;
  font-size: 11px;
  color: #1e3a8a;
  user-select: none;
  padding: 2px 0;
}
.aclaw-turn-summary-rt-summary:hover {
  color: #1d4ed8;
}
.aclaw-turn-summary-rt-table {
  margin-top: 6px;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.aclaw-turn-summary-rt-head,
.aclaw-turn-summary-rt-row {
  display: grid;
  grid-template-columns: 26px 50px 50px 50px 36px 1fr;
  gap: 6px;
  padding: 2px 0;
  align-items: baseline;
}
.aclaw-turn-summary-rt-head {
  font-weight: 600;
  color: #6b7280;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  padding-bottom: 4px;
  margin-bottom: 2px;
}
.aclaw-turn-summary-rt-row { color: #475569; }
.aclaw-turn-summary-rt-idx { color: #6b7280; }
.aclaw-turn-summary-rt-ms  { color: #0f172a; font-weight: 600; }
.aclaw-turn-summary-rt-row--slow {
  background: rgba(245, 158, 11, 0.1);
  margin-left: -6px;
  margin-right: -6px;
  padding-left: 6px;
  padding-right: 6px;
  border-radius: 3px;
}
.aclaw-turn-summary-rt-row--slow .aclaw-turn-summary-rt-ms { color: #b45309; }
/* stop_reason badges */
.aclaw-turn-summary-rt-stop {
  display: inline-block;
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 1px 4px;
  border-radius: 2px;
  line-height: 1.4;
}
.aclaw-turn-summary-rt-stop--end {
  background: rgba(34, 197, 94, 0.12);
  color: #15803d;
}
.aclaw-turn-summary-rt-stop--tool {
  background: rgba(59, 130, 246, 0.12);
  color: #1e40af;
}
.aclaw-turn-summary-rt-stop--truncated {
  background: rgba(220, 38, 38, 0.12);
  color: #b91c1c;
}
.aclaw-turn-summary-rt-stop--other {
  background: rgba(107, 114, 128, 0.12);
  color: #4b5563;
}
.aclaw-turn-summary-rt-stop-empty { color: #9ca3af; }

/* Dark-theme overrides for the end-of-turn summary box. The whole
   .aclaw-turn-summary-* family was authored in light-mode hex (slate labels,
   near-black values, dark-blue tool names, light-pink error surface, dark
   hairline borders) and none of it flips with the theme, so on the dark
   Thinking panel the labels + section headers render near-invisible. Re-color
   to dark-appropriate values. (Box bg/border already flip via var(--grey-*).) */
[data-theme="dark"] able-claw .aclaw-turn-summary-llm-label,
[data-theme="dark"] able-claw .aclaw-turn-summary-call-entity,
[data-theme="dark"] able-claw .aclaw-turn-summary-rt-row { color: #cbd5e1; }
[data-theme="dark"] able-claw .aclaw-turn-summary-status,
[data-theme="dark"] able-claw .aclaw-turn-summary-section-title,
[data-theme="dark"] able-claw .aclaw-turn-summary-pct,
[data-theme="dark"] able-claw .aclaw-turn-summary-tool-count,
[data-theme="dark"] able-claw .aclaw-turn-summary-rt-head,
[data-theme="dark"] able-claw .aclaw-turn-summary-rt-idx,
[data-theme="dark"] able-claw .aclaw-turn-summary-rt-stop-empty { color: #94a3b8; }
[data-theme="dark"] able-claw .aclaw-turn-summary-llm-value,
[data-theme="dark"] able-claw .aclaw-turn-summary-call-ms,
[data-theme="dark"] able-claw .aclaw-turn-summary-tool-ms,
[data-theme="dark"] able-claw .aclaw-turn-summary-entity-name,
[data-theme="dark"] able-claw .aclaw-turn-summary-rt-ms { color: #f1f5f9; }
[data-theme="dark"] able-claw .aclaw-turn-summary-call-tool,
[data-theme="dark"] able-claw .aclaw-turn-summary-tool-name,
[data-theme="dark"] able-claw .aclaw-turn-summary-rt-summary { color: #93c5fd; }
[data-theme="dark"] able-claw .aclaw-turn-summary-rt-summary:hover { color: #bfdbfe; }
/* error / warning reds run a touch dark on the panel — lighten for contrast */
[data-theme="dark"] able-claw .aclaw-turn-summary-row--waste,
[data-theme="dark"] able-claw .aclaw-turn-summary-failed,
[data-theme="dark"] able-claw .aclaw-turn-summary-tool-failed,
[data-theme="dark"] able-claw .aclaw-turn-summary-call-err,
[data-theme="dark"] able-claw .aclaw-turn-summary-entity-count,
[data-theme="dark"] able-claw .aclaw-turn-summary-entity-err,
[data-theme="dark"] able-claw .aclaw-turn-summary-llm-warn,
[data-theme="dark"] able-claw .aclaw-turn-summary--error .aclaw-turn-summary-status,
[data-theme="dark"] able-claw .aclaw-turn-summary-section--action .aclaw-turn-summary-section-title { color: #fca5a5; }
/* hairline dividers + the error surface tint */
[data-theme="dark"] able-claw .aclaw-turn-summary-section { border-top-color: rgba(255, 255, 255, 0.12); }
[data-theme="dark"] able-claw .aclaw-turn-summary-rt-head { border-bottom-color: rgba(255, 255, 255, 0.10); }
[data-theme="dark"] able-claw .aclaw-turn-summary--error {
  background: rgba(127, 29, 29, 0.22);
  border-color: rgba(248, 113, 113, 0.5);
}
/* per-round-trip stop badges — light text on their translucent tints */
[data-theme="dark"] able-claw .aclaw-turn-summary-rt-stop--end       { color: #86efac; }
[data-theme="dark"] able-claw .aclaw-turn-summary-rt-stop--tool      { color: #93c5fd; }
[data-theme="dark"] able-claw .aclaw-turn-summary-rt-stop--truncated { color: #fca5a5; }
[data-theme="dark"] able-claw .aclaw-turn-summary-rt-stop--other     { color: #cbd5e1; }

/* Narrow viewports — sidebar becomes a slide-in DRAWER overlay (legacy
   askAble pattern: hamburger toggle reveals it). Chat takes the full
   width; tapping outside the drawer or the chevron toggles it closed.

   Sidebar is rendered as a fixed-position overlay sliding in from the
   left, with a translucent backdrop behind it. The collapse / expand
   buttons toggle the same data-sidebar-collapsed attribute on the host
   — keeping ONE source of truth for both desktop and mobile state. */
@media (max-width: 720px) {
  .aclaw-grid { grid-template-columns: 1fr !important; }
  .aclaw-grid:has(.aclaw-artifact:not([hidden])) { grid-template-columns: 1fr !important; }
  .aclaw-artifact { display: none; }

  /* Sidebar becomes a slide-in drawer, hidden by default, slides in when
     data-sidebar-collapsed="false" (the default attribute state at boot
     should be data-sidebar-collapsed="true" on mobile — the runtime now
     forces this on first paint when matchMedia(720px) matches). */
  .aclaw-sidebar {
    position: fixed;
    top: 0; bottom: 0; left: 0;
    width: min(86vw, 320px);
    z-index: 200;
    border-right: 1px solid var(--ableclaw-border-soft);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
    transform: translateX(-100%);
    transition: transform 220ms cubic-bezier(0.32, 0.72, 0.32, 1);
    visibility: visible !important;
    pointer-events: auto !important;
    /* When data-sidebar-collapsed="false" on the host, slide IN */
  }
  able-claw:not([data-sidebar-collapsed="true"]) > .aclaw-grid > .aclaw-sidebar {
    transform: translateX(0);
  }
  /* Translucent backdrop behind the drawer — taps dismiss the drawer.
     Rendered as a ::before on the chat column so we don't need new DOM. */
  able-claw:not([data-sidebar-collapsed="true"]) .aclaw-chat::before {
    content: '';
    position: fixed;
    inset: 0;
    background: oklch(0% 0 0 / 0.40);
    z-index: 150;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    animation: aclaw-fade-in 200ms ease;
  }
  @keyframes aclaw-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
  }

  /* Expand chevron — hamburger affordance at top-left.
     Reduced size (32px) and bumped close to the corner so it doesn't
     compete with content. Content (welcome, messages) gets padding-top
     to clear it. The text content uses a proper "bars" icon set via
     JS (data-mobile-bars="true" on this element) — falls back to "›"
     if FA didn't load yet. */
  .aclaw-sidebar-expand {
    display: inline-flex !important;
    top: 8px; left: 8px;
    width: 32px; height: 32px;
    font-size: 14px;
    z-index: 100;
  }
  /* Fade-out strip at the top of the chat — content fades into the
     hamburger area instead of getting clipped/half-overlapping. Uses
     the design-file pattern (linear gradient + backdrop-filter blur).
     Z-index 50 sits above messages (which default to 1) but below
     the hamburger (z-index 100). pointer-events:none lets taps go
     through to scroll/select. */
  .aclaw-chat::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 48px;
    background: linear-gradient(
      to bottom,
      var(--lg-wp-1) 30%,
      color-mix(in oklch, var(--lg-wp-1) 60%, transparent) 70%,
      transparent 100%
    );
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 50;
    pointer-events: none;
    /* Mask matches the fade so the blur transitions out cleanly */
    mask-image: linear-gradient(to bottom, black 50%, transparent);
    -webkit-mask-image: linear-gradient(to bottom, black 50%, transparent);
  }

  /* Welcome screen — tighter padding + smaller avatar + smaller headlines.
     The padding-top clears the hamburger (top:8 + 44px tap-target = 52px
     bottom) so the agent brief isn't hidden underneath. !important beats the
     Liquid-Glass able-claw .aclaw-welcome padding:32px rule (0,1,1) that
     appears later in source and would otherwise win on specificity.
     (No backticks in this CSS string — they close the JS template literal.) */
  .aclaw-welcome { padding: 60px 14px 14px !important; gap: 8px; }
  .aclaw-welcome-icon { width: 56px !important; height: 56px !important; }
  .aclaw-welcome-icon svg { width: 26px !important; height: 26px !important; }
  .aclaw-welcome-headline-h1 { font-size: 22px !important; }
  .aclaw-welcome-subtitle { font-size: 13px !important; line-height: 1.4; }
  .aclaw-welcome-categories {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    margin-top: 8px;
  }
  /* Welcome shortcut cards: horizontal layout (icon-side-text instead of
     icon-above-text) saves vertical space on phone */
  .aclaw-welcome-category-items .aclaw-shortcut {
    flex-direction: row !important;
    align-items: center !important;
    padding: 10px 12px !important;
    gap: 10px !important;
    min-height: 0;
  }
  .aclaw-welcome-category-items .aclaw-shortcut .aclaw-shortcut-icon {
    width: 28px !important; height: 28px !important;
  }
  .aclaw-welcome-category-items .aclaw-shortcut .aclaw-shortcut-text {
    font-size: 13px !important;
  }
  /* Category header smaller on mobile */
  .aclaw-welcome-category-header { font-size: 10px !important; padding: 2px 0 6px !important; }
  .aclaw-welcome-category-icon { width: 20px !important; height: 20px !important; font-size: 11px; }

  /* Main chat — tighter padding + larger bubbles, smaller divider.
     padding-top clears the hamburger (52px bottom) so neither the first
     message NOR the agent greeting (the ONLINE status row, bug #6) renders
     underneath / "mixed with" the conversation-history menu button. */
  .aclaw-messages { padding: 60px 14px 12px !important; }
  .aclaw-message-bubble { max-width: 90%; padding: 9px 13px; font-size: 14px; }
  .aclaw-channel-divider { margin: 12px 0 8px; gap: 10px; }
  .aclaw-channel-divider-pill { padding: 2px 8px; font-size: 9px; }

  /* Input bar — edge-to-edge pill, smaller padding, hide footer shortcut hint */
  .aclaw-input-bar {
    margin: 8px 10px 0;
    padding: 8px 10px;
    border-radius: 16px;
  }
  .aclaw-input-footer { padding: 4px 12px 6px 12px; font-size: 10px; }
  .aclaw-input-footer-shortcut { display: none; }
  .aclaw-upload { width: 30px; height: 30px; }
  .aclaw-send { padding: 6px 12px; font-size: 12px; }
  .aclaw-send span { display: none; } /* show icon only on mobile to save room */
  .aclaw-stop span { display: none; }

  /* Drop zone — smaller card on mobile so it fits viewport */
  .aclaw-dropzone-card { padding: 24px 28px; }
  .aclaw-dropzone-icon { font-size: 28px; }
  .aclaw-dropzone-title { font-size: 14px; }
  .aclaw-dropzone-sub { font-size: 11px; }

  /* iOS anti-zoom — textarea below 16px triggers iPhone auto-zoom on focus.
     The base .aclaw-input is 14px and the Liquid-Glass override pins it to
     15px (able-claw .aclaw-input) — BOTH zoom-trigger. Re-pin to 16px with
     the able-claw prefix so we out-specify the Liquid-Glass rule and keep
     iOS at 1.0x while the user types. */
  /* The .aclaw-input-bar qualifier raises specificity to (0,2,1) so this
     beats the Liquid-Glass able-claw-.aclaw-input font-size:15px rule
     (0,1,1) that appears LATER in source: a bare able-claw .aclaw-input
     selector here would tie and lose on source order.
     NOTE: never put backticks in this CSS string — it lives inside a JS
     template literal and a stray backtick closes it, breaking the bundle. */
  able-claw .aclaw-input-bar .aclaw-input { font-size: 16px; }
  /* Bug-#2 — the typed text must stay 16px (anti-zoom) but the PLACEHOLDER
     ("Ask about a customer, proposal, or cat-class…") is too wide for the
     narrow mobile input and wraps to a clipped 2nd line. Shrinking ONLY the
     placeholder font keeps the typed text at 16px (no zoom) while letting
     the hint fit. ::placeholder font-size is independent of the input's. */
  able-claw .aclaw-input-bar .aclaw-input::placeholder { font-size: 10px; }

  /* Bug #5 — Agent Thinking panel on mobile in FULL mode.
     At <=720px the grid collapses to 1fr and .aclaw-artifact is display:none
     (above), so clicking the brain toggle (which DOES set data-thinking-open)
     produced no visible panel — the helper/launcher slide-in overlay rule
     only targets those two modes. Surface the artifact as a right-edge
     slide-in overlay in full mode too, sized to fit the phone and stacked
     above the sidebar drawer (z 200) + backdrop (z 150). The panel's own
     header X (.aclaw-artifact-close) is the close affordance since the
     overlay covers the brain toggle. */
  able-claw[data-mode="full"][data-thinking-open="true"] > .aclaw-grid > .aclaw-artifact {
    display: flex !important;
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: min(440px, 100%);
    z-index: 210;
    border-left: 1px solid var(--ableclaw-border-soft);
    box-shadow: -8px 0 28px rgba(15, 17, 23, 0.32);
    /* OPAQUE background — the panel sits ON TOP of the chat, so it must fully
       cover the greeting + message stream behind it. --ableclaw-artifact-bg is
       a translucent frosted material (correct as a 3rd grid COLUMN, but it
       bleeds the chat through when used as an overlay). --ableclaw-bg resolves
       to the solid wallpaper (--lg-wp-1) in both light + dark. */
    background: var(--ableclaw-bg, #141415);
    animation: aclaw-thinking-slide-in 200ms ease-out;
  }
  /* When that overlay is open it fully covers the brain toggle (top-right),
     so hide the toggle to avoid it sitting behind / peeking around the panel.
     The panel's own header X is the close affordance. Mobile full-mode only —
     on desktop the panel is a 3rd grid column and the brain stays a real
     toggle. */
  able-claw[data-mode="full"][data-thinking-open="true"] .aclaw-thinking-toggle {
    display: none;
  }

  /* Safe-area inset — iPhone notch / home indicator clearance.
     env(safe-area-inset-bottom) resolves to non-zero ONLY on iOS notched
     devices (and Android edge-to-edge in PWA mode); 0px everywhere else,
     so this is a no-op on desktop / non-notched phones. Applied to the
     grid so the input bar doesn't sit under the home indicator. */
  able-claw[mode="full"] > .aclaw-grid,
  able-claw[data-mode="full"] > .aclaw-grid {
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
}

/* Very narrow viewports (<= 380px) — push to absolute minimal */
@media (max-width: 380px) {
  .aclaw-message-bubble { max-width: 92%; padding: 8px 11px; font-size: 13px; }
  .aclaw-input-bar { margin: 6px 6px 0; padding: 6px 8px; }
  .aclaw-messages { padding: 10px 10px; }
  .aclaw-welcome-headline-h1 { font-size: 20px; }
  .aclaw-channel-divider { margin: 10px 0 8px; }
}

/* Touch / coarse-pointer devices — iOS HIG + Android Material 44x44 minimum
   tap target on EVERY interactive chrome button. Desktop (fine pointer)
   stays dense; phones/tablets get the proper hit area. */
@media (pointer: coarse) {
  .aclaw-new-chat,
  .aclaw-sidebar-collapse,
  .aclaw-sidebar-expand,
  .aclaw-thinking-toggle,
  .aclaw-active-conv-chip,
  .aclaw-send,
  .aclaw-stop,
  .aclaw-upload-btn,
  .aclaw-message-bubble .claw-chip,
  .aclaw-shortcut {
    min-width: 44px;
    min-height: 44px;
  }
  /* Shortcut cards already have ample padding — only enforce min-height. */
  .aclaw-shortcut { min-height: 56px; }
  /* Chip buttons are inline; bump padding so 44px height is reached without
     forcing block layout. */
  .aclaw-message-bubble .claw-chip {
    padding-top: 11px;
    padding-bottom: 11px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * HELPER MODE — <able-claw mode="helper">
 *
 * Embeds the chat as a compact sidebar/drawer inside admin pages.
 * Hides the conversation list + artifact pane (single chat column),
 * renders tool events INLINE in the message stream (instead of pushing
 * them to the artifact pane), and adds a compact agent header at the
 * top of the chat column with a "+ new chat" button.
 *
 * Host pages mount it like a right-rail and drive context + prompts via
 * the public API (setContext, sendPrompt, newConversation, focus).
 * ═══════════════════════════════════════════════════════════════════════ */

able-claw[data-mode="helper"] > .aclaw-grid {
  grid-template-columns: 1fr;
}
able-claw[data-mode="helper"] > .aclaw-grid > .aclaw-sidebar,
able-claw[data-mode="helper"] > .aclaw-grid > .aclaw-artifact {
  display: none;
}
able-claw[data-mode="helper"] .aclaw-chat {
  /* Re-arrange the row track: helper-header (auto) + stream (1fr) + attachments + input + footer */
  grid-template-rows: auto minmax(0, 1fr) auto auto auto;
  grid-template-areas:
    "helper"
    "stream"
    "attachments"
    "input"
    "footer";
}
able-claw[data-mode="helper"] .aclaw-helper-header {
  grid-area: helper;
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--ableclaw-border-soft);
}
able-claw[data-mode="full"] .aclaw-helper-header,
able-claw:not([data-mode="helper"]) .aclaw-helper-header {
  display: none;
}
.aclaw-helper-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--ableclaw-accent); color: var(--ableclaw-accent-fg);
  font-weight: 700; font-size: 13px;
  flex-shrink: 0;
}
.aclaw-helper-meta {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 2px;
}
.aclaw-helper-name {
  font-size: 13px; font-weight: 700; letter-spacing: 0.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.aclaw-helper-sub {
  font-size: 11px; opacity: 0.60;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.aclaw-helper-actions {
  display: inline-flex; align-items: center; gap: 4px;
  flex-shrink: 0;
}
.aclaw-helper-action {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 999px;
  background: transparent; color: inherit; border: 0;
  cursor: pointer; opacity: 0.65;
  transition: opacity 120ms, background-color 120ms;
}
.aclaw-helper-action:hover {
  opacity: 1;
  background: var(--ableclaw-sidebar-hover-bg, rgba(127, 127, 127, 0.10));
}
.aclaw-helper-action i { font-size: 12px; }

/* In helper mode, hide the big welcome screen — agent's greeting bubble
   replaces it (see _renderGreetingHtml). Conversation list is also hidden;
   the sidebar-expand chevron stays hidden since there's no sidebar to
   reopen. */
able-claw[data-mode="helper"] .aclaw-welcome { display: none !important; }
able-claw[data-mode="helper"] .aclaw-sidebar-expand { display: none !important; }
able-claw[data-mode="helper"] .aclaw-messages {
  padding: 14px 16px 8px;
}
able-claw[data-mode="helper"] .aclaw-input-bar {
  margin: 0 12px 8px;
}

/* Inline tool-call bubble — renders in the message stream when in helper
   mode. Looks like an editor diff: arrow + function name + monospace
   args. Distinct from the assistant chat bubble (no background tint,
   monospace font, condensed). */
.aclaw-message-tool {
  align-self: flex-start;
  max-width: 92%;
  padding: 6px 12px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--ableclaw-accent) 8%, transparent);
  color: var(--text-muted, var(--ableclaw-fg));
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 12px; line-height: 1.5;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
.aclaw-message-tool-head {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 600;
  color: var(--ableclaw-accent);
}
.aclaw-message-tool-head::before {
  content: '→';
  opacity: 0.7;
}
.aclaw-message-tool-args {
  color: inherit;
  word-break: break-all;
}
.aclaw-message-tool-result {
  margin-top: 4px;
  opacity: 0.65;
  font-style: italic;
}
.aclaw-message-reasoning {
  align-self: flex-start;
  max-width: 92%;
  padding: 4px 10px;
  font-size: 11px;
  font-style: italic;
  opacity: 0.55;
  color: var(--ableclaw-fg);
}

/* ═══════════════════════════════════════════════════════════════════════════
 * LAUNCHER MODE — <able-claw mode="launcher">
 *
 * Floating bottom-right pill (collapsed) that expands into a chat panel
 * (~380x580 by default) on click. The pill renders the agent's display
 * name + online dot; the expanded panel uses helper-mode internals
 * (compact header, single column, inline tool calls).
 *
 * Position knobs (override via CSS on host page if needed):
 *   --ableclaw-launcher-bottom: 20px;
 *   --ableclaw-launcher-right:  20px;
 *   --ableclaw-launcher-width:  380px;
 *   --ableclaw-launcher-height: 580px;
 * ═══════════════════════════════════════════════════════════════════════ */

able-claw[data-mode="launcher"] {
  --ableclaw-launcher-bottom: 20px;
  --ableclaw-launcher-right:  20px;
  --ableclaw-launcher-width:  380px;
  --ableclaw-launcher-height: 580px;
  /* Override the page-clamping height knob — launcher floats freely. */
  height: auto !important;
  min-height: 0 !important;
  /* The host element itself is invisible — only the FAB + panel render. */
  display: contents;
}

/* Floating pill (collapsed state) — always rendered, click-to-toggle.
   Colors are HARDCODED dark-on-white (intentional brand identity for the
   floating helper — Intercom/Drift style) so the pill stays legible
   regardless of the host tenant's theme. Themes that need a different
   pill color can override via --ableclaw-launcher-pill-bg / -text on
   the able-claw element. */
.aclaw-launcher-pill {
  position: fixed;
  bottom: var(--ableclaw-launcher-bottom, 20px);
  right:  var(--ableclaw-launcher-right, 20px);
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--ableclaw-launcher-pill-bg, #1a2236);
  color: var(--ableclaw-launcher-pill-text, #f8fafc);
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 13px; font-weight: 600;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18), 0 2px 6px rgba(0, 0, 0, 0.12);
  z-index: 9000;
  transition: transform 140ms, box-shadow 140ms, opacity 140ms;
}
.aclaw-launcher-pill:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22), 0 3px 8px rgba(0, 0, 0, 0.14);
}
.aclaw-launcher-pill:active { transform: translateY(0); }
.aclaw-launcher-pill-icon {
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ableclaw-accent, #f59e0b);
  font-size: 14px;
}
.aclaw-launcher-pill-text {
  white-space: nowrap;
}
.aclaw-launcher-pill-status {
  display: inline-block;
  width: 8px; height: 8px; border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 0 2px color-mix(in srgb, #10b981 30%, transparent);
  flex-shrink: 0;
}

/* Hide the grid (the chat surface) when launcher is collapsed; show it
   inside a fixed panel when expanded. */
able-claw[data-mode="launcher"] > .aclaw-grid {
  position: fixed;
  bottom: calc(var(--ableclaw-launcher-bottom, 20px) + 60px);
  right:  var(--ableclaw-launcher-right, 20px);
  width:  var(--ableclaw-launcher-width, 380px);
  height: var(--ableclaw-launcher-height, 580px);
  max-height: calc(100dvh - 100px);
  max-width:  calc(100vw - 40px);
  border-radius: 16px;
  border: 1px solid var(--ableclaw-border, rgba(127, 127, 127, 0.20));
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25), 0 8px 20px rgba(0, 0, 0, 0.15);
  background: var(--ableclaw-bg);
  z-index: 8999;
  transform-origin: bottom right;
  transition: opacity 160ms, transform 160ms;
}
able-claw[data-mode="launcher"][data-launcher-open="false"] > .aclaw-grid {
  opacity: 0;
  transform: scale(0.92) translateY(8px);
  pointer-events: none;
}
able-claw[data-mode="launcher"][data-launcher-open="true"] > .aclaw-grid {
  opacity: 1;
  transform: scale(1) translateY(0);
}
/* PRE-HYDRATION GUARD — launcher mode.
 *
 * The host element is in the DOM as <able-claw mode="launcher"> before
 * able-claw.js hydrates. data-mode + data-launcher-open are added by JS
 * in connectedCallback. Without this rule, the .aclaw-grid would paint
 * in-flow (no fixed-position rule yet), then JS adds data-mode → panel
 * jumps to fixed-position visible, then data-launcher-open="false" →
 * 160ms opacity+scale transition kicks in and the user sees a flash of
 * "open then collapse" on every page reload.
 *
 * Matches the HTML attribute mode="launcher" (always present from the
 * source) AND the absence of data-launcher-open (added post-hydration).
 * Forces the closed state without a transition so first paint is silent.
 * After hydration, data-launcher-open exists and this rule stops matching;
 * the standard open/close rules above resume control.
 */
able-claw[mode="launcher"]:not([data-launcher-open]) > .aclaw-grid {
  opacity: 0 !important;
  pointer-events: none !important;
  transition: none !important;
}
/* In launcher mode the chat surface is always single-column (helper-like) */
able-claw[data-mode="launcher"] > .aclaw-grid {
  grid-template-columns: 1fr;
}
able-claw[data-mode="launcher"] > .aclaw-grid > .aclaw-sidebar,
able-claw[data-mode="launcher"] > .aclaw-grid > .aclaw-artifact {
  display: none;
}
able-claw[data-mode="launcher"] .aclaw-chat {
  grid-template-rows: auto minmax(0, 1fr) auto auto auto;
  grid-template-areas:
    "helper"
    "stream"
    "attachments"
    "input"
    "footer";
}
able-claw[data-mode="launcher"] .aclaw-welcome {
  display: none !important;
}
able-claw[data-mode="launcher"] .aclaw-input-bar {
  margin: 0 12px 8px;
}
able-claw[data-mode="launcher"] .aclaw-messages {
  padding: 12px 16px 8px;
}
able-claw[data-mode="launcher"] .aclaw-helper-header {
  grid-area: helper;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--ableclaw-border-soft);
}
/* Close button inside the panel header (launcher-only) */
.aclaw-launcher-close {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 999px;
  background: transparent; color: inherit; border: 0;
  cursor: pointer; opacity: 0.65;
  transition: opacity 120ms, background-color 120ms;
}
.aclaw-launcher-close:hover {
  opacity: 1;
  background: var(--ableclaw-sidebar-hover-bg, rgba(127, 127, 127, 0.10));
}
.aclaw-launcher-close i { font-size: 12px; }

/* Mobile launcher — full-screen panel instead of floating card */
@media (max-width: 640px) {
  .aclaw-launcher-pill {
    padding: 8px 12px;
    font-size: 12px;
    bottom: 16px; right: 16px;
  }
  .aclaw-launcher-pill-text { display: none; }  /* icon only on phone */
  able-claw[data-mode="launcher"] > .aclaw-grid {
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    border-radius: 0;
    border: 0;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * iOS 2026 LIQUID GLASS — design overlay (from Anthropic design file
 * AbleClaw Chat.html, rBaa5XHjVDHCyLdc1As3tw).
 *
 * Translucent materials with backdrop-filter, oklch color tokens, vibrant
 * blue/purple user gradient + frosted agent bubbles, big radii (22px chat
 * bubbles, 26px composer + sidebar), green online-dot, channel chips
 * with mini colored icon squares.
 *
 * This block LAYERS OVER the structural rules above — no existing rule
 * is removed. Layout/grid/dataflow stays the same; only colors, radii,
 * shadows, and surface materials change.
 * ═══════════════════════════════════════════════════════════════════════ */

able-claw {
  /* Liquid Glass tokens — LIGHT defaults */
  --lg-wp-1: oklch(97% 0.012 250);
  --lg-wp-2: oklch(94% 0.020 245);
  --lg-wp-3: oklch(95% 0.018 260);
  --lg-ink-1: oklch(20% 0.014 255);
  --lg-ink-2: oklch(38% 0.012 255);
  --lg-ink-3: oklch(56% 0.010 255);
  --lg-ink-4: oklch(72% 0.008 255);
  --lg-mat-thick:   color-mix(in oklch, white 75%, transparent);
  --lg-mat-regular: color-mix(in oklch, white 60%, transparent);
  --lg-mat-thin:    color-mix(in oklch, white 40%, transparent);
  --lg-mat-ultra:   color-mix(in oklch, white 22%, transparent);
  --lg-mat-hover:   color-mix(in oklch, white 85%, transparent);
  --lg-line:        color-mix(in oklch, var(--lg-ink-1) 9%, transparent);
  --lg-line-soft:   color-mix(in oklch, var(--lg-ink-1) 5%, transparent);
  --lg-line-strong: color-mix(in oklch, var(--lg-ink-1) 18%, transparent);
  --lg-sys-blue:   oklch(56% 0.16 255);
  --lg-sys-blue-2: oklch(50% 0.18 258);
  --lg-sys-green:  oklch(64% 0.16 145);
  --lg-sys-purple: oklch(58% 0.14 268);
  --lg-grad-user: linear-gradient(135deg, oklch(60% 0.17 255), oklch(52% 0.18 260));
  --lg-grad-agent-avatar: linear-gradient(135deg, var(--lg-sys-purple), var(--lg-sys-blue-2));
  --lg-user-ink: oklch(99% 0.01 255);
  --lg-shadow-sm: 0 1px 0 oklch(0% 0 0 / 0.04), 0 2px 8px -4px oklch(0% 0 0 / 0.10);
  --lg-shadow:    0 2px 4px -2px oklch(0% 0 0 / 0.08), 0 12px 32px -12px oklch(0% 0 0 / 0.18);
  --lg-shadow-lg: 0 8px 16px -8px oklch(0% 0 0 / 0.16), 0 32px 80px -16px oklch(0% 0 0 / 0.28);
  /* Radii */
  --lg-r-xs: 8px; --lg-r-sm: 12px; --lg-r: 16px; --lg-r-md: 20px;
  --lg-r-lg: 26px; --lg-r-xl: 32px; --lg-r-pill: 999px;

  /* Re-point existing --ableclaw-* surfaces to the new tokens so any
     descendant rule that reads them inherits the Liquid Glass look. */
  --ableclaw-bg:                 var(--lg-wp-1);
  --ableclaw-fg:                 var(--lg-ink-1);
  --ableclaw-sidebar-bg:         var(--lg-mat-regular);
  --ableclaw-sidebar-fg:         var(--lg-ink-1);
  --ableclaw-sidebar-active-bg:  var(--lg-mat-thick);
  --ableclaw-sidebar-hover-bg:   var(--lg-mat-thin);
  --ableclaw-artifact-bg:        var(--lg-mat-regular);
  --ableclaw-border:             var(--lg-line);
  --ableclaw-border-soft:        var(--lg-line-soft);
  --ableclaw-bubble-user-bg:     var(--lg-grad-user);
  --ableclaw-bubble-user-fg:     var(--lg-user-ink);
  --ableclaw-bubble-agent-bg:    var(--lg-mat-thick);
  --ableclaw-bubble-agent-fg:    var(--lg-ink-1);
  --ableclaw-input-bg:           var(--lg-mat-regular);
  --ableclaw-input-fg:           var(--lg-ink-1);
  --ableclaw-input-border:       var(--lg-line-soft);
  --ableclaw-input-bar-bg:       transparent;
  --ableclaw-accent:             var(--lg-sys-blue);
  --ableclaw-accent-fg:          var(--lg-user-ink);
}

[data-theme="dark"] able-claw {
  --lg-wp-1: oklch(18% 0.018 255);
  --lg-wp-2: oklch(22% 0.024 260);
  --lg-wp-3: oklch(20% 0.020 245);
  --lg-ink-1: oklch(97% 0.008 255);
  --lg-ink-2: oklch(82% 0.010 255);
  --lg-ink-3: oklch(60% 0.010 255);
  --lg-ink-4: oklch(46% 0.010 255);
  --lg-mat-thick:   color-mix(in oklch, oklch(28% 0.014 255) 75%, transparent);
  --lg-mat-regular: color-mix(in oklch, oklch(30% 0.014 255) 60%, transparent);
  --lg-mat-thin:    color-mix(in oklch, oklch(34% 0.014 255) 42%, transparent);
  --lg-mat-ultra:   color-mix(in oklch, oklch(38% 0.014 255) 24%, transparent);
  --lg-mat-hover:   color-mix(in oklch, oklch(36% 0.014 255) 75%, transparent);
  --lg-line:        color-mix(in oklch, white 10%, transparent);
  --lg-line-soft:   color-mix(in oklch, white 6%, transparent);
  --lg-line-strong: color-mix(in oklch, white 22%, transparent);
  --lg-sys-blue:   oklch(66% 0.16 255);
  --lg-sys-blue-2: oklch(60% 0.18 260);
  --lg-sys-green:  oklch(70% 0.16 145);
  --lg-sys-purple: oklch(66% 0.14 268);
  --lg-grad-user: linear-gradient(135deg, oklch(66% 0.16 255), oklch(58% 0.18 262));
  --lg-shadow-sm: 0 1px 0 oklch(0% 0 0 / 0.3), 0 2px 8px -4px oklch(0% 0 0 / 0.4);
  --lg-shadow:    0 2px 4px -2px oklch(0% 0 0 / 0.35), 0 12px 32px -12px oklch(0% 0 0 / 0.5);
  --lg-shadow-lg: 0 8px 16px -8px oklch(0% 0 0 / 0.5), 0 32px 80px -16px oklch(0% 0 0 / 0.7);

  /* Invert the system-base grey scale within able-claw in dark mode.
     The ABLEUI Chat Output Classes (.claw-h1 / .claw-body--editorial /
     .claw-sidebar / .claw-code / .claw-table / etc.) reference these
     primitives directly. Without this flip:
       .claw-h1 { color: var(--grey-900) }  →  #18191b on dark bg → invisible
       .claw-code { background: var(--grey-0) }  →  #fff on dark bg → white block
     We override INSIDE able-claw only, so other blueprints that use the
     greys as fixed primitives (icons, badges) are untouched. */
  --grey-0:    #0c0d0e;
  --grey-50:   #18191b;
  --grey-100:  #1d1c17;
  --grey-200:  #303236;
  --grey-300:  #3f3f46;
  --grey-400:  #505151;
  --grey-500:  #94a3b8;  /* muted body — slate-400, readable on dark bg */
  --grey-600:  #cbd5e1;
  --grey-700:  #e2e8f0;
  --grey-800:  #f0f1f2;
  --grey-900:  #f8fafc;  /* "darkest text" → flipped → near-white in dark */
  --grey-1000: #ffffff;
}

/* ─── Liquid Glass component overrides ─────────────────────────────── */

/* Grid container — wallpaper background + soft tinted border + bigger radius */
able-claw .aclaw-grid {
  background: var(--lg-wp-1);
  border: 1px solid var(--lg-line-soft);
  border-radius: var(--lg-r-md);
  box-shadow: var(--lg-shadow-sm);
}

/* Sidebar — frosted glass material */
able-claw .aclaw-sidebar {
  background: var(--lg-mat-regular);
  backdrop-filter: saturate(180%) blur(28px);
  -webkit-backdrop-filter: saturate(180%) blur(28px);
  border-right: 1px solid var(--lg-line-soft);
}

/* New conversation button — grad-user gradient with inner highlight */
able-claw .aclaw-new-chat {
  background: var(--lg-grad-user);
  color: var(--lg-user-ink);
  border-radius: var(--lg-r);
  font-weight: 600;
  box-shadow:
    inset 0 1px 0 oklch(100% 0 0 / 0.22),
    0 2px 6px -2px oklch(52% 0.18 260 / 0.4),
    0 8px 20px -8px oklch(52% 0.18 260 / 0.4);
  transition: transform 0.08s, filter 0.15s;
}
able-claw .aclaw-new-chat:hover { filter: brightness(1.05); }
able-claw .aclaw-new-chat:active { transform: scale(0.98); }

/* Sidebar collapse / expand chevron — sq glass btn */
able-claw .aclaw-sidebar-collapse,
able-claw .aclaw-sidebar-expand {
  background: var(--lg-mat-thin);
  border: 1px solid var(--lg-line-soft);
  border-radius: var(--lg-r);
  color: var(--lg-ink-2);
}
able-claw .aclaw-sidebar-collapse:hover,
able-claw .aclaw-sidebar-expand:hover {
  background: var(--lg-mat-hover);
  color: var(--lg-ink-1);
}

/* Search input — frosted */
able-claw .aclaw-search {
  background: var(--lg-mat-thin);
  border: 1px solid var(--lg-line-soft);
  border-radius: var(--lg-r);
  color: var(--lg-ink-1);
}
able-claw .aclaw-search:focus {
  background: var(--lg-mat-thick);
  border-color: color-mix(in oklch, var(--lg-sys-blue) 50%, transparent);
  box-shadow: 0 0 0 4px color-mix(in oklch, var(--lg-sys-blue) 16%, transparent);
}

/* Agent selector / TALKING TO card */
able-claw .aclaw-agent-selector {
  background: var(--lg-mat-thick);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--lg-line-soft);
  border-radius: var(--lg-r);
  box-shadow: var(--lg-shadow-sm);
}
able-claw .aclaw-agent-selector:hover { background: var(--lg-mat-hover); }
able-claw .aclaw-agent-selector .aclaw-agent-avatar {
  background: var(--lg-grad-agent-avatar);
  box-shadow: inset 0 1px 0 oklch(100% 0 0 / 0.25), 0 2px 4px oklch(0% 0 0 / 0.12);
}

/* Conversation row in sidebar — active state is clearly distinct:
   accent-tinted background + 3px gradient left strip + accent ring +
   bold title color. Works in both light and dark because the accent
   (sys-blue → sys-purple) reads against both wallpapers.

   NOTE: NO outer box-shadow — the sidebar deliberately doesn't have
   overflow:hidden (agent popover needs to extend below the header),
   so an outer shadow would bleed past the sidebar border. We rely on
   bg tint + inset ring + left accent strip for visual distinction. */
able-claw .aclaw-conversation-row {
  border-radius: 12px;
  position: relative;
  transition: background 140ms, box-shadow 160ms;
}
able-claw .aclaw-conversation-row:hover { background: var(--lg-mat-thin); }
able-claw .aclaw-conversation-row.is-active {
  background: color-mix(in oklch, var(--lg-sys-blue) 14%, var(--lg-mat-thick));
  box-shadow:
    inset 0 0 0 1px color-mix(in oklch, var(--lg-sys-blue) 35%, transparent);
}
/* Left accent strip — subtle gradient bar that reads as the "selected
   indicator" without competing with the chat content. Contained within
   the row's bounds so no bleed past the sidebar edge. */
able-claw .aclaw-conversation-row.is-active::before {
  content: '';
  position: absolute;
  left: 4px; top: 50%;
  transform: translateY(-50%);
  width: 3px; height: 60%;
  border-radius: 999px;
  background: var(--lg-grad-user);
}
able-claw .aclaw-conversation-row.is-active .aclaw-conversation-title {
  color: var(--lg-ink-1);
  font-weight: 600;
}
able-claw .aclaw-conversation-row.is-active .aclaw-conversation-meta {
  color: color-mix(in oklch, var(--lg-sys-blue) 60%, var(--lg-ink-3));
}

/* Conversation channel icons in sidebar */
able-claw .aclaw-conv-icon {
  box-shadow: inset 0 1px 0 oklch(100% 0 0 / 0.25), 0 2px 4px oklch(0% 0 0 / 0.10);
}

/* Welcome surface — frosted intro card */
able-claw .aclaw-welcome {
  background: transparent;
}

/* Message bubbles — modernized: 22px radius, user gradient with glow,
   agent frosted glass */
able-claw .aclaw-message-bubble {
  border-radius: 22px;
  padding: 10px 14px;
  font-size: 15px;
  line-height: 1.45;
  letter-spacing: -0.012em;
  box-shadow: var(--lg-shadow-sm);
}
able-claw .aclaw-message--assistant .aclaw-message-bubble {
  background: var(--lg-mat-thick);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  color: var(--lg-ink-1);
  border: 1px solid var(--lg-line-soft);
}
able-claw .aclaw-message--user .aclaw-message-bubble {
  background: var(--lg-grad-user);
  color: var(--lg-user-ink);
  font-weight: 500;
  border: 0;
  box-shadow:
    inset 0 1px 0 oklch(100% 0 0 / 0.18),
    0 2px 4px -2px oklch(52% 0.18 260 / 0.35),
    0 12px 28px -10px oklch(52% 0.18 260 / 0.3);
}

/* Channel divider — chip with mini colored icon square */
able-claw .aclaw-channel-divider {
  color: var(--lg-ink-3);
  margin: 16px 0 8px;
}
able-claw .aclaw-channel-divider::before,
able-claw .aclaw-channel-divider::after {
  background: linear-gradient(to right, transparent, var(--lg-line), transparent);
}
able-claw .aclaw-channel-divider-pill {
  background: var(--lg-mat-thick);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--lg-line-soft);
  border-radius: var(--lg-r-pill);
  padding: 5px 12px 5px 6px;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--lg-ink-2);
  gap: 7px;
}
able-claw .aclaw-channel-divider-pill i {
  color: white;
  font-size: 9px;
  width: 18px; height: 18px;
  display: inline-grid; place-items: center;
  border-radius: 6px;
  background: var(--ableclaw-channel-default);
  box-shadow: inset 0 1px 0 oklch(100% 0 0 / 0.25);
}
able-claw .aclaw-channel-divider[data-channel="telegram"]  .aclaw-channel-divider-pill i { background: linear-gradient(135deg, oklch(74% 0.14 230), oklch(58% 0.18 240)); }
able-claw .aclaw-channel-divider[data-channel="slack"]     .aclaw-channel-divider-pill i { background: linear-gradient(135deg, oklch(70% 0.20 320), oklch(54% 0.22 330)); }
able-claw .aclaw-channel-divider[data-channel="email"]     .aclaw-channel-divider-pill i { background: linear-gradient(135deg, oklch(72% 0.06 250), oklch(50% 0.04 250)); }
able-claw .aclaw-channel-divider[data-channel="sms"]       .aclaw-channel-divider-pill i { background: linear-gradient(135deg, oklch(72% 0.18 145), oklch(54% 0.16 145)); }
able-claw .aclaw-channel-divider[data-channel="whatsapp"]  .aclaw-channel-divider-pill i { background: linear-gradient(135deg, oklch(72% 0.18 145), oklch(54% 0.16 145)); }
able-claw .aclaw-channel-divider[data-channel="web"]       .aclaw-channel-divider-pill i { background: linear-gradient(135deg, oklch(70% 0.04 230), oklch(48% 0.04 250)); }
able-claw .aclaw-channel-divider[data-channel="ableui"]    .aclaw-channel-divider-pill i { background: linear-gradient(135deg, oklch(40% 0.04 260), oklch(15% 0.02 260)); }

/* Composer — frosted glass, big radius, blue focus glow */
able-claw .aclaw-input-bar {
  margin: 8px 16px 12px;
  padding: 6px;
  background: var(--lg-mat-regular);
  backdrop-filter: saturate(180%) blur(28px);
  -webkit-backdrop-filter: saturate(180%) blur(28px);
  border: 1px solid var(--lg-line-soft);
  border-radius: var(--lg-r-lg);
  box-shadow: var(--lg-shadow);
  transition: border-color 0.18s, box-shadow 0.18s;
}
able-claw .aclaw-input-bar:focus-within {
  border-color: color-mix(in oklch, var(--lg-sys-blue) 50%, transparent);
  box-shadow: var(--lg-shadow), 0 0 0 4px color-mix(in oklch, var(--lg-sys-blue) 16%, transparent);
}
able-claw .aclaw-upload {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: transparent;
  color: var(--lg-ink-2);
}
able-claw .aclaw-upload:hover:not(:disabled) {
  background: var(--lg-mat-thin);
  color: var(--lg-ink-1);
}
able-claw .aclaw-input {
  background: transparent;
  color: var(--lg-ink-1);
  border: 0;
  padding: 10px 4px;
  font-size: 15px;
}
able-claw .aclaw-input::placeholder { color: var(--lg-ink-3); }
able-claw .aclaw-send {
  width: 38px; height: 38px; padding: 0;
  border-radius: 50%;
  background: var(--lg-grad-user);
  color: var(--lg-user-ink);
  display: grid; place-items: center;
  box-shadow:
    inset 0 1px 0 oklch(100% 0 0 / 0.22),
    0 2px 6px -2px oklch(52% 0.18 260 / 0.4);
}
able-claw .aclaw-send:hover:not(:disabled) {
  filter: brightness(1.05);
  box-shadow:
    inset 0 1px 0 oklch(100% 0 0 / 0.22),
    0 4px 10px -2px oklch(52% 0.18 260 / 0.5);
}
able-claw .aclaw-send:active:not(:disabled) { transform: scale(0.94); }
able-claw .aclaw-send span { display: none; }
able-claw .aclaw-send i { font-size: 14px; }
able-claw .aclaw-stop span { display: none; }
able-claw .aclaw-stop { width: 38px; height: 38px; padding: 0; border-radius: 50%; }

/* Bug #92 — global :focus-visible for every interactive control inside
   able-claw. Many of our specific button rules set outline:none or
   border:none for visual polish, which kills keyboard focus indication.
   This rule reintroduces a single consistent focus ring (only when
   keyboard navigation triggers it, not on mouse-click) so keyboard
   users can always see where they are. */
able-claw button:focus-visible,
able-claw [role="button"]:focus-visible,
able-claw a:focus-visible,
able-claw [data-conversation-id]:focus-visible {
  outline: 2px solid var(--ableclaw-accent, #6366f1);
  outline-offset: 2px;
  border-radius: 6px;
}
able-claw textarea:focus-visible,
able-claw input:focus-visible {
  /* Native inputs already get a focus ring; align with the same accent. */
  outline: 2px solid var(--ableclaw-accent, #6366f1);
  outline-offset: 1px;
}

/* Footer meta */
able-claw .aclaw-input-footer {
  color: var(--lg-ink-3);
  font-size: 11.5px;
}

/* Helper / launcher compact header */
able-claw[data-mode="helper"] .aclaw-helper-header,
able-claw[data-mode="launcher"] .aclaw-helper-header {
  border-bottom: 1px solid var(--lg-line-soft);
}
able-claw .aclaw-helper-avatar {
  background: var(--lg-grad-agent-avatar);
  box-shadow: inset 0 1px 0 oklch(100% 0 0 / 0.25), 0 2px 4px oklch(0% 0 0 / 0.12);
}
able-claw .aclaw-helper-name { color: var(--lg-ink-1); }
able-claw .aclaw-helper-sub  { color: var(--lg-ink-3); }
able-claw .aclaw-helper-action:hover {
  background: var(--lg-mat-thin);
}

/* Online dot mimic in agent selector header (decorative) */
able-claw .aclaw-helper-avatar::after {
  content: '';
  position: relative;
  display: block;
  width: 0; height: 0;
}

/* Launcher pill — keep the dark pill from the previous design as it
   matches the user mock; only refine shadow + status dot color. */
able-claw[data-mode="launcher"] .aclaw-launcher-pill {
  box-shadow: var(--lg-shadow);
}
able-claw[data-mode="launcher"] .aclaw-launcher-pill-status {
  background: var(--lg-sys-green);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--lg-sys-green) 22%, transparent);
}
able-claw[data-mode="launcher"] > .aclaw-grid {
  border-radius: var(--lg-r-md);
  box-shadow: var(--lg-shadow-lg);
}

/* Sidebar conversation badge (legacy dot) — sized down */
able-claw .aclaw-conv-badge { width: 8px; height: 8px; }

/* Channel chip in main-chat divider — bigger spacing on top */
able-claw .aclaw-messages { padding: 20px 32px 16px; }
able-claw[data-mode="helper"] .aclaw-messages,
able-claw[data-mode="launcher"] .aclaw-messages { padding: 14px 18px 8px; }

/* ─── Welcome screen + shortcuts (Liquid Glass) ─────────────────────── */

able-claw .aclaw-welcome {
  padding: 32px 24px 16px;
}
able-claw .aclaw-welcome-icon {
  width: 84px; height: 84px;
  background: var(--lg-grad-agent-avatar);
  box-shadow:
    inset 0 1px 0 oklch(100% 0 0 / 0.25),
    0 12px 32px -8px color-mix(in oklch, var(--lg-sys-purple) 50%, transparent);
}
able-claw .aclaw-welcome-icon svg {
  width: 38px; height: 38px;
  filter: drop-shadow(0 2px 4px oklch(0% 0 0 / 0.18));
}
able-claw .aclaw-welcome-headline-h1 {
  font-size: 32px; font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--lg-ink-1);
}
able-claw .aclaw-welcome-subtitle {
  font-size: 14.5px;
  color: var(--lg-ink-3);
  letter-spacing: -0.008em;
  opacity: 1;
  margin-top: 4px;
}

/* Categorized shortcut grid */
able-claw .aclaw-welcome-categories {
  gap: 20px;
  margin-top: 16px;
}
able-claw .aclaw-welcome-category-header {
  font-size: 11px;
  letter-spacing: 0.10em;
  font-weight: 700;
  gap: 8px;
  padding: 4px 4px 10px;
}
able-claw .aclaw-welcome-category-icon {
  width: 24px; height: 24px;
  border-radius: 7px;
  font-size: 13px;
  box-shadow: inset 0 1px 0 oklch(100% 0 0 / 0.25), 0 2px 6px -2px oklch(0% 0 0 / 0.12);
}

/* The shortcut card — frosted glass, line-soft border, 14px radius,
   soft shadow, hover lift + category-colored accent ring. */
able-claw .aclaw-shortcut {
  background: var(--lg-mat-thick);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--lg-line-soft);
  border-radius: 14px;
  color: var(--lg-ink-1);
  padding: 14px;
  gap: 8px;
  box-shadow: var(--lg-shadow-sm);
  transition: transform 120ms, background 140ms, border-color 140ms, box-shadow 160ms;
  position: relative;
}
able-claw .aclaw-shortcut:hover {
  transform: translateY(-1px);
  background: var(--lg-mat-hover);
  border-color: var(--lg-line);
  box-shadow: var(--lg-shadow);
}
able-claw .aclaw-shortcut:active { transform: translateY(0); }
able-claw .aclaw-shortcut-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  border-radius: 9px;
  background: var(--lg-mat-thin);
  border: 1px solid var(--lg-line-soft);
  font-size: 13px;
  opacity: 1;
  color: var(--lg-ink-2);
  flex-shrink: 0;
  box-shadow: inset 0 1px 0 oklch(100% 0 0 / 0.12);
}
able-claw .aclaw-shortcut-icon i { line-height: 1; }
able-claw .aclaw-shortcut-category {
  display: none;  /* category is in the column header already; redundant per card */
}
able-claw .aclaw-shortcut-text {
  font-size: 13.5px;
  line-height: 1.4;
  letter-spacing: -0.008em;
  color: var(--lg-ink-1);
}

/* Category accent palettes — color tints injected into card hover state +
   category header. Each category overrides its own --cat-accent so the
   shortcut icon backplate, header color, and hover shadow all align. */
able-claw .aclaw-welcome-category--analyze {
  --cat-accent: oklch(64% 0.16 145);            /* green */
  --cat-accent-tint: color-mix(in oklch, oklch(64% 0.16 145) 12%, transparent);
}
able-claw .aclaw-welcome-category--monitor {
  --cat-accent: oklch(60% 0.18 245);            /* blue */
  --cat-accent-tint: color-mix(in oklch, oklch(60% 0.18 245) 12%, transparent);
}
able-claw .aclaw-welcome-category--act {
  --cat-accent: oklch(72% 0.18 75);             /* amber */
  --cat-accent-tint: color-mix(in oklch, oklch(72% 0.18 75) 14%, transparent);
}
able-claw .aclaw-welcome-category--report {
  --cat-accent: oklch(64% 0.20 25);             /* red-orange */
  --cat-accent-tint: color-mix(in oklch, oklch(64% 0.20 25) 12%, transparent);
}

/* Apply per-category accent to header + shortcut icon + hover state */
able-claw .aclaw-welcome-category .aclaw-welcome-category-header {
  color: var(--cat-accent, var(--lg-ink-2));
}
able-claw .aclaw-welcome-category .aclaw-welcome-category-icon {
  background: var(--cat-accent-tint, var(--lg-mat-thin));
  color: var(--cat-accent, var(--lg-ink-2));
  border: 1px solid color-mix(in oklch, var(--cat-accent, var(--lg-ink-3)) 18%, transparent);
}
able-claw .aclaw-welcome-category .aclaw-shortcut .aclaw-shortcut-icon {
  background: var(--cat-accent-tint, var(--lg-mat-thin));
  color: var(--cat-accent, var(--lg-ink-2));
  border-color: color-mix(in oklch, var(--cat-accent, var(--lg-ink-3)) 14%, transparent);
}
able-claw .aclaw-welcome-category .aclaw-shortcut:hover {
  border-color: color-mix(in oklch, var(--cat-accent, var(--lg-line)) 40%, transparent);
  box-shadow: var(--lg-shadow-sm),
              0 0 0 3px color-mix(in oklch, var(--cat-accent, var(--lg-sys-blue)) 10%, transparent);
}

/* "or What can I help you with?" helper text */
able-claw .aclaw-welcome-helper {
  font-size: 13px;
  color: var(--lg-ink-3);
  margin-top: 12px;
  font-style: italic;
}

/* ─── Agent selector popover (dropdown) ─────────────────────────────── */
able-claw .aclaw-agent-popover {
  background: var(--lg-mat-thick);
  backdrop-filter: saturate(180%) blur(28px);
  -webkit-backdrop-filter: saturate(180%) blur(28px);
  border: 1px solid var(--lg-line-soft);
  border-radius: var(--lg-r);
  box-shadow: var(--lg-shadow);
  padding: 6px;
  z-index: 50;
  min-width: 240px;
}
able-claw .aclaw-agent-option {
  border-radius: 10px;
  padding: 8px 10px;
}
able-claw .aclaw-agent-option:hover {
  background: var(--lg-mat-hover);
}
able-claw .aclaw-agent-option.is-active {
  background: var(--lg-mat-thick);
  box-shadow: inset 0 0 0 1px var(--lg-line);
}
able-claw .aclaw-agent-option .aclaw-agent-avatar {
  background: var(--lg-grad-agent-avatar);
  box-shadow: inset 0 1px 0 oklch(100% 0 0 / 0.20);
}
able-claw .aclaw-agent-option .aclaw-agent-name { color: var(--lg-ink-1); }
able-claw .aclaw-agent-option .aclaw-agent-tagline { color: var(--lg-ink-3); }

/* ─── Stop button — visible square icon on red circle ──────────────── */
able-claw .aclaw-stop {
  /* Center the icon explicitly — inline-flex inherits justify-content
     flex-start by default, which left-justified the FA glyph inside the
     38px circle. align-items already covers vertical centering. */
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 0;
  background: oklch(60% 0.20 25);  /* sys-red */
  color: white;
  box-shadow:
    inset 0 1px 0 oklch(100% 0 0 / 0.18),
    0 2px 6px -2px oklch(60% 0.20 25 / 0.4);
}
able-claw .aclaw-stop:hover {
  background: oklch(54% 0.22 25);
}
able-claw .aclaw-stop i {
  font-size: 12px;
  color: white;
  display: inline-block;
  line-height: 1;
}

/* ─── Typing indicator (3 animated dots) for empty assistant bubble ── */
able-claw .aclaw-message-bubble--pending {
  display: inline-flex;
  align-items: center;
  min-width: 56px;
  padding: 12px 16px;
}
able-claw .aclaw-typing {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  line-height: 1;
}
able-claw .aclaw-typing > span {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--lg-ink-3);
  opacity: 0.5;
  animation: aclaw-typing-bounce 1.2s infinite ease-in-out;
}
able-claw .aclaw-typing > span:nth-child(2) { animation-delay: 0.15s; }
able-claw .aclaw-typing > span:nth-child(3) { animation-delay: 0.30s; }
@keyframes aclaw-typing-bounce {
  0%, 80%, 100% { transform: translateY(0); opacity: 0.4; }
  40%           { transform: translateY(-3px); opacity: 0.95; }
}

/* Error bubble (stream / HTTP failure) — danger-tinted card with retry
   affordance. Replaces the failed assistant turn in-place. */
able-claw .aclaw-message-bubble--error {
  background: color-mix(in srgb, #b91c1c 8%, var(--lg-mat-thick));
  border: 1px solid color-mix(in srgb, #b91c1c 28%, transparent);
  color: var(--lg-ink-1);
}
able-claw .aclaw-error {
  display: flex; align-items: flex-start; gap: 10px;
}
able-claw .aclaw-error > .fa-circle-exclamation {
  color: #b91c1c;
  font-size: 16px;
  margin-top: 1px;
  flex-shrink: 0;
}
able-claw .aclaw-error-body { flex: 1; min-width: 0; }
able-claw .aclaw-error-title {
  font-weight: 600; font-size: 13px;
  color: #b91c1c;
  margin-bottom: 2px;
}
able-claw .aclaw-error-msg {
  font-size: 13px;
  color: var(--lg-ink-2);
  line-height: 1.45;
  margin-bottom: 8px;
  word-wrap: break-word;
}
able-claw .aclaw-error-retry {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--lg-grad-user);
  color: var(--lg-user-ink);
  border: 0;
  font-size: 12px; font-weight: 600;
  cursor: pointer;
  transition: filter 120ms, transform 120ms;
}
able-claw .aclaw-error-retry:hover { filter: brightness(1.05); }
able-claw .aclaw-error-retry:active { transform: scale(0.97); }
able-claw .aclaw-error-retry i { font-size: 11px; }

/* ═══════════════════════════════════════════════════════════════════════════
 * Browser compat fallbacks
 *
 * oklch() and color-mix() are Chrome 111+ / Safari 15.4+ / Firefox 113+
 * (May 2023). For older browsers, fall back to neutral hex tokens that
 * approximate the iOS Liquid Glass palette. Without these fallbacks the
 * page renders with "unset" values — flash of unstyled content + broken
 * layout colors.
 *
 * The @supports query reverses the logic: if the browser does NOT
 * understand oklch(), apply hex overrides. Modern browsers ignore the
 * block; older ones use the hex defaults.
 * ═══════════════════════════════════════════════════════════════════════ */

@supports not (color: oklch(0% 0 0)) {
  able-claw {
    /* Light defaults — hex approximations of the oklch tokens */
    --lg-wp-1: #f3f5f9;
    --lg-wp-2: #e6ebf3;
    --lg-wp-3: #ebeef5;
    --lg-ink-1: #1f2937;
    --lg-ink-2: #475569;
    --lg-ink-3: #6b7280;
    --lg-ink-4: #9ca3af;
    --lg-mat-thick:   rgba(255, 255, 255, 0.75);
    --lg-mat-regular: rgba(255, 255, 255, 0.60);
    --lg-mat-thin:    rgba(255, 255, 255, 0.40);
    --lg-mat-ultra:   rgba(255, 255, 255, 0.22);
    --lg-mat-hover:   rgba(255, 255, 255, 0.85);
    --lg-line:        rgba(31, 41, 55, 0.09);
    --lg-line-soft:   rgba(31, 41, 55, 0.05);
    --lg-line-strong: rgba(31, 41, 55, 0.18);
    --lg-sys-blue:    #3b82f6;
    --lg-sys-blue-2:  #2563eb;
    --lg-sys-green:   #10b981;
    --lg-sys-purple:  #8b5cf6;
    --lg-grad-user: linear-gradient(135deg, #3b82f6, #6366f1);
    --lg-grad-agent-avatar: linear-gradient(135deg, #8b5cf6, #2563eb);
    --lg-user-ink: #ffffff;
  }
  [data-theme="dark"] able-claw {
    --lg-wp-1: #1a202f;
    --lg-wp-2: #1f2937;
    --lg-wp-3: #1e293b;
    --lg-ink-1: #f8fafc;
    --lg-ink-2: #cbd5e1;
    --lg-ink-3: #94a3b8;
    --lg-ink-4: #64748b;
    --lg-mat-thick:   rgba(40, 48, 60, 0.75);
    --lg-mat-regular: rgba(43, 51, 65, 0.60);
    --lg-mat-thin:    rgba(49, 58, 73, 0.42);
    --lg-mat-ultra:   rgba(55, 65, 81, 0.24);
    --lg-mat-hover:   rgba(52, 61, 76, 0.75);
    --lg-line:        rgba(255, 255, 255, 0.10);
    --lg-line-soft:   rgba(255, 255, 255, 0.06);
    --lg-line-strong: rgba(255, 255, 255, 0.22);
    --lg-sys-blue:    #60a5fa;
    --lg-sys-blue-2:  #3b82f6;
    --lg-sys-green:   #34d399;
    --lg-sys-purple:  #a78bfa;
    --lg-grad-user: linear-gradient(135deg, #60a5fa, #6366f1);
  }
}

/* =================================================================
 * ABLEUI Chat Output Classes — Token-efficient HTML for chat bubbles.
 * Scoped under .aclaw-message-bubble so they only apply to LLM output.
 * Sanitizer strips inline style="..."; classes survive.
 * Semantic accents inline (sign convention):
 *   #10b981 success · #3b82f6 info · #f59e0b warning
 *   #ef4444 danger  · #6366f1 brand · #0f172a editorial-dark
 * Tones via data-tone="s|i|w|d|b|n" — short attrs save tokens on
 * multiplied components (pills, cells).
 * ================================================================= */

.aclaw-message-bubble .claw-root {
  display: grid; gap: 14px;
  font-family: var(--font-sans, system-ui, sans-serif);
  color: var(--text-primary, inherit);
  line-height: 1.55; font-size: 14px;
  animation: claw-fade-in 0.3s ease-out;
}
.aclaw-message-bubble .claw-root--editorial {
  display: grid; gap: 24px;
  font-family: var(--font-serif, Georgia, serif);
  color: var(--text-primary, inherit);
  line-height: 1.7; font-size: 15px;
  animation: claw-fade-in 0.4s ease-out;
}

.aclaw-message-bubble .claw-h1 {
  margin: 0;
  font-family: var(--font-serif, Georgia, serif);
  font-size: 36px; font-weight: 800;
  color: var(--grey-900, inherit);
  letter-spacing: -1px; line-height: 1.05;
}
.aclaw-message-bubble .claw-h2 {
  margin: 0;
  font-size: 22px; font-weight: 700;
  color: var(--grey-900, inherit);
  letter-spacing: -0.4px; line-height: 1.15;
}
.aclaw-message-bubble .claw-h3 {
  margin: 0;
  font-size: 16px; font-weight: 600;
  color: var(--grey-900, inherit);
  line-height: 1.3;
}
.aclaw-message-bubble .claw-h4 {
  margin: 0;
  font-size: 14px; font-weight: 600;
  color: var(--grey-900, inherit);
}

.aclaw-message-bubble .claw-eyebrow {
  margin: 0;
  font-size: 11px; font-weight: 700;
  letter-spacing: 1.6px; text-transform: uppercase;
  color: #6366f1;
}
.aclaw-message-bubble .claw-eyebrow[data-tone="s"] { color: #10b981; }
.aclaw-message-bubble .claw-eyebrow[data-tone="i"] { color: #3b82f6; }
.aclaw-message-bubble .claw-eyebrow[data-tone="w"] { color: #f59e0b; }
.aclaw-message-bubble .claw-eyebrow[data-tone="d"] { color: #ef4444; }
.aclaw-message-bubble .claw-eyebrow[data-tone="n"] { color: var(--grey-500, #66686b); }
.aclaw-message-bubble .claw-eyebrow--live::before {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  margin-right: 6px;
  vertical-align: 1px;
  animation: claw-pulse 2s infinite;
}

.aclaw-message-bubble .claw-body {
  margin: 0;
  color: var(--text-primary, inherit);
  line-height: 1.55;
}
.aclaw-message-bubble .claw-body--editorial {
  margin: 0;
  font-family: var(--font-serif, Georgia, serif);
  font-size: 15px; line-height: 1.7;
  color: var(--grey-800, inherit);
}
.aclaw-message-bubble .claw-body--muted {
  margin: 0;
  font-size: 13px;
  color: var(--grey-500, #66686b);
}

.aclaw-message-bubble .claw-dropcap {
  float: left;
  font-family: var(--font-serif, Georgia, serif);
  font-size: 56px; font-weight: 900;
  line-height: 0.9;
  padding: 6px 10px 0 0;
  color: #6366f1;
}

.aclaw-message-bubble .claw-pullquote {
  margin: 8px 0;
  padding: 16px 24px;
  border-left: 3px solid #6366f1;
  background: linear-gradient(90deg, rgba(99,102,241,0.06), transparent);
  font-family: var(--font-serif, Georgia, serif);
  font-style: italic;
  font-size: 18px; line-height: 1.5;
  color: var(--grey-900, inherit);
}
.aclaw-message-bubble .claw-pullquote cite {
  display: block; margin-top: 8px;
  font-family: var(--font-sans, system-ui, sans-serif);
  font-style: normal;
  font-size: 12px;
  color: var(--grey-500, #66686b);
  letter-spacing: 0.5px;
}

.aclaw-message-bubble .claw-ul {
  margin: 0; padding-left: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.aclaw-message-bubble .claw-ul > li {
  position: relative;
  padding-left: 26px;
  line-height: 1.55;
}
.aclaw-message-bubble .claw-ul > li::before {
  content: "→";
  position: absolute;
  left: 0; top: 0;
  color: #6366f1;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.55;
}
.aclaw-message-bubble .claw-ol {
  margin: 0; padding-left: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  counter-reset: step;
}
.aclaw-message-bubble .claw-ol > li {
  position: relative;
  padding-left: 40px;
  min-height: 26px;
  counter-increment: step;
  line-height: 1.55;
}
.aclaw-message-bubble .claw-ol > li::before {
  content: counter(step);
  position: absolute;
  left: 0; top: 0;
  display: grid; place-items: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff;
  font-size: 12px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.aclaw-message-bubble .claw-2col {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 24px;
  align-items: start;
}
.aclaw-message-bubble .claw-sidebar {
  display: grid; gap: 8px;
  padding: 16px;
  background: var(--grey-100, rgba(127,127,127,0.06));
  border-radius: 8px;
  border: 1px solid var(--grey-200, rgba(127,127,127,0.16));
}
.aclaw-message-bubble .claw-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}
.aclaw-message-bubble .claw-hr {
  border: 0;
  border-top: 1px solid var(--grey-300, rgba(127,127,127,0.20));
  margin: 4px 0;
}
.aclaw-message-bubble .claw-hr--gradient {
  border: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--grey-300, rgba(127,127,127,0.32)) 20%, var(--grey-300, rgba(127,127,127,0.32)) 80%, transparent);
  margin: 16px 0;
}
.aclaw-message-bubble .claw-section { display: grid; gap: 14px; }

.aclaw-message-bubble .claw-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}
.aclaw-message-bubble .claw-kpi {
  display: grid; gap: 4px;
  padding: 16px 18px;
  background: var(--grey-0, #fff);
  border: 1px solid var(--grey-300, rgba(127,127,127,0.20));
  border-radius: 10px;
  border-top: 3px solid #6366f1;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.aclaw-message-bubble .claw-kpi[data-tone="s"] { border-top-color: #10b981; }
.aclaw-message-bubble .claw-kpi[data-tone="i"] { border-top-color: #3b82f6; }
.aclaw-message-bubble .claw-kpi[data-tone="w"] { border-top-color: #f59e0b; }
.aclaw-message-bubble .claw-kpi[data-tone="d"] { border-top-color: #ef4444; }
.aclaw-message-bubble .claw-kpi[data-tone="b"] { border-top-color: #6366f1; }
/* When the KPI itself is a danger/success metric, the VALUE inherits the tone color.
   The label stays muted (it's a label, not the metric).
   For neutral tone with semantic value coloring, use claw-kpi__value[data-tone=...] directly. */
.aclaw-message-bubble .claw-kpi[data-tone="d"] .claw-kpi__value { color: #ef4444; }
.aclaw-message-bubble .claw-kpi[data-tone="s"] .claw-kpi__value { color: #10b981; }
.aclaw-message-bubble .claw-kpi[data-tone="w"] .claw-kpi__value { color: #b45309; }
.aclaw-message-bubble .claw-kpi__value[data-tone="d"] { color: #ef4444; }
.aclaw-message-bubble .claw-kpi__value[data-tone="s"] { color: #10b981; }
.aclaw-message-bubble .claw-kpi__value[data-tone="w"] { color: #b45309; }
.aclaw-message-bubble .claw-kpi__label {
  font-size: 10px; font-weight: 700;
  letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--grey-500, #66686b);
}
.aclaw-message-bubble .claw-kpi__value {
  font-size: 26px; font-weight: 800;
  color: var(--grey-900, inherit);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.5px; line-height: 1.1;
}
.aclaw-message-bubble .claw-kpi__delta {
  font-size: 11px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--grey-500, #66686b);
}
.aclaw-message-bubble .claw-kpi__delta[data-dir="up"]   { color: #10b981; }
.aclaw-message-bubble .claw-kpi__delta[data-dir="down"] { color: #ef4444; }
.aclaw-message-bubble .claw-kpi__delta[data-dir="up"]::before   { content: "↑ "; font-size: 14px; line-height: 1; }
.aclaw-message-bubble .claw-kpi__delta[data-dir="down"]::before { content: "↓ "; font-size: 14px; line-height: 1; }

.aclaw-message-bubble .claw-hero {
  display: grid; gap: 6px;
  padding: 28px 32px;
  background: linear-gradient(135deg, #0f172a 0%, #1e3a8a 100%);
  border-radius: 16px;
  color: #fff;
  position: relative; overflow: hidden;
}
.aclaw-message-bubble .claw-hero .claw-kpi__label { color: rgba(255,255,255,0.6); }
.aclaw-message-bubble .claw-hero__value {
  font-family: var(--font-serif, Georgia, serif);
  font-size: 48px; font-weight: 800;
  color: #fff;
  font-variant-numeric: tabular-nums;
  letter-spacing: -1.4px; line-height: 1;
}
.aclaw-message-bubble .claw-hero .claw-kpi__delta { color: rgba(255,255,255,0.75); }
.aclaw-message-bubble .claw-hero .claw-kpi__delta[data-dir="up"]   { color: #6ee7b7; }
.aclaw-message-bubble .claw-hero .claw-kpi__delta[data-dir="down"] { color: #fca5a5; }

.aclaw-message-bubble .claw-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px;
  font-size: 11px; font-weight: 600;
  line-height: 1.4;
  border-radius: 12px;
  background: var(--grey-200, rgba(127,127,127,0.12));
  color: var(--grey-700, inherit);
  border: 1px solid var(--grey-300, rgba(127,127,127,0.20));
}
.aclaw-message-bubble .claw-pill[data-tone="s"] { background: #ecfdf5; color: #065f46; border-color: #a7f3d0; }
.aclaw-message-bubble .claw-pill[data-tone="i"] { background: #eff6ff; color: #1e40af; border-color: #bfdbfe; }
.aclaw-message-bubble .claw-pill[data-tone="w"] { background: #fffbeb; color: #92400e; border-color: #fde68a; }
.aclaw-message-bubble .claw-pill[data-tone="d"] { background: #fef2f2; color: #991b1b; border-color: #fca5a5; }
.aclaw-message-bubble .claw-pill[data-tone="b"] { background: #f5f3ff; color: #5b21b6; border-color: #c4b5fd; }
.aclaw-message-bubble .claw-pill__dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--grey-500, #66686b);
}
.aclaw-message-bubble .claw-pill[data-tone="s"] .claw-pill__dot { background: #10b981; }
.aclaw-message-bubble .claw-pill[data-tone="i"] .claw-pill__dot { background: #3b82f6; }
.aclaw-message-bubble .claw-pill[data-tone="w"] .claw-pill__dot { background: #f59e0b; }
.aclaw-message-bubble .claw-pill[data-tone="d"] .claw-pill__dot { background: #ef4444; }
.aclaw-message-bubble .claw-pill[data-tone="b"] .claw-pill__dot { background: #6366f1; }
.aclaw-message-bubble .claw-pill[data-live] .claw-pill__dot { animation: claw-pulse 2s infinite; }

.aclaw-message-bubble .claw-tbl {
  overflow-x: auto;
  border: 1px solid var(--grey-300, rgba(127,127,127,0.20));
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.aclaw-message-bubble .claw-tbl table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.aclaw-message-bubble .claw-tbl thead tr {
  background: var(--grey-100, rgba(127,127,127,0.06));
}
.aclaw-message-bubble .claw-th {
  padding: 11px 14px;
  text-align: left;
  font-size: 10px; font-weight: 700;
  letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--grey-700, inherit);
  border-bottom: 1px solid var(--grey-300, rgba(127,127,127,0.20));
}
.aclaw-message-bubble .claw-th[data-num] { text-align: right; font-variant-numeric: tabular-nums; }
.aclaw-message-bubble .claw-td {
  padding: 11px 14px;
  color: var(--grey-900, inherit);
  border-bottom: 1px solid var(--grey-200, rgba(127,127,127,0.12));
  vertical-align: middle;
}
.aclaw-message-bubble .claw-tbl tbody tr:last-child .claw-td { border-bottom: 0; }
.aclaw-message-bubble .claw-td[data-c="num"]     { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.aclaw-message-bubble .claw-td[data-c="money"]   { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.aclaw-message-bubble .claw-td[data-c="muted"]   { color: var(--grey-500, #66686b); }
.aclaw-message-bubble .claw-td[data-c="loss"]    { color: #ef4444; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.aclaw-message-bubble .claw-td[data-c="benefit"] { color: #10b981; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.aclaw-message-bubble .claw-td[data-c="id"] {
  font-family: var(--font-mono, Menlo, monospace);
  font-size: 11px;
  color: var(--grey-500, #66686b);
}

.aclaw-message-bubble .claw-card {
  display: grid; gap: 8px;
  padding: 16px;
  background: var(--grey-0, #fff);
  border: 1px solid var(--grey-300, rgba(127,127,127,0.20));
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.aclaw-message-bubble .claw-card__head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 8px;
}
.aclaw-message-bubble .claw-card--accent {
  position: relative; overflow: hidden;
  padding-top: 19px;
  border-top: 3px solid #6366f1;
}
.aclaw-message-bubble .claw-card--accent[data-tone="s"] { border-top-color: #10b981; }
.aclaw-message-bubble .claw-card--accent[data-tone="i"] { border-top-color: #3b82f6; }
.aclaw-message-bubble .claw-card--accent[data-tone="w"] { border-top-color: #f59e0b; }
.aclaw-message-bubble .claw-card--accent[data-tone="d"] { border-top-color: #ef4444; }
.aclaw-message-bubble .claw-card--accent[data-tone="b"] { border-top-color: #6366f1; }
.aclaw-message-bubble .claw-card--dark {
  display: grid; gap: 12px;
  padding: 24px;
  background: linear-gradient(135deg, #0a0f1e 0%, #1e3a8a 100%);
  border-radius: 14px;
  color: #fff;
  position: relative; overflow: hidden;
}
.aclaw-message-bubble .claw-card--dark .claw-eyebrow { color: rgba(255,255,255,0.6); }
.aclaw-message-bubble .claw-card--dark .claw-h3,
.aclaw-message-bubble .claw-card--dark .claw-h4 { color: #fff; }
.aclaw-message-bubble .claw-card--dark .claw-kpi__label { color: rgba(255,255,255,0.5); }
.aclaw-message-bubble .claw-card--dark .claw-kpi__value { color: #fff; font-size: 18px; }
.aclaw-message-bubble .claw-card--dark .claw-body,
.aclaw-message-bubble .claw-card--dark .claw-body--muted { color: rgba(255,255,255,0.85); }

.aclaw-message-bubble .claw-ring {
  position: relative;
  width: 140px; height: 140px;
  border-radius: 50%;
  background: conic-gradient(#6366f1 0% calc(var(--p, 0) * 1%), var(--grey-200, rgba(127,127,127,0.16)) calc(var(--p, 0) * 1%) 100%);
  display: grid; place-items: center;
}
.aclaw-message-bubble .claw-ring[data-tone="s"] { background: conic-gradient(#10b981 0% calc(var(--p, 0) * 1%), var(--grey-200, rgba(127,127,127,0.16)) calc(var(--p, 0) * 1%) 100%); }
.aclaw-message-bubble .claw-ring[data-tone="w"] { background: conic-gradient(#f59e0b 0% calc(var(--p, 0) * 1%), var(--grey-200, rgba(127,127,127,0.16)) calc(var(--p, 0) * 1%) 100%); }
.aclaw-message-bubble .claw-ring[data-tone="d"] { background: conic-gradient(#ef4444 0% calc(var(--p, 0) * 1%), var(--grey-200, rgba(127,127,127,0.16)) calc(var(--p, 0) * 1%) 100%); }
.aclaw-message-bubble .claw-ring__c {
  position: absolute;
  inset: 12px;
  background: var(--grey-0, #fff);
  border-radius: 50%;
  display: grid; place-items: center;
  text-align: center;
}

.aclaw-message-bubble .claw-bar {
  height: 8px;
  background: var(--grey-200, rgba(127,127,127,0.16));
  border-radius: 4px;
  overflow: hidden;
}
.aclaw-message-bubble .claw-bar__fill {
  height: 100%;
  background: linear-gradient(90deg, #10b981, #6ee7b7);
  border-radius: 4px;
}
.aclaw-message-bubble .claw-bar__fill[data-tone="i"] { background: linear-gradient(90deg, #3b82f6, #93c5fd); }
.aclaw-message-bubble .claw-bar__fill[data-tone="w"] { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.aclaw-message-bubble .claw-bar__fill[data-tone="d"] { background: linear-gradient(90deg, #ef4444, #fca5a5); }
.aclaw-message-bubble .claw-bar__fill[data-tone="b"] { background: linear-gradient(90deg, #6366f1, #8b5cf6); }

.aclaw-message-bubble .claw-stages {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 4px;
}
.aclaw-message-bubble .claw-stage {
  height: 6px;
  border-radius: 3px;
  background: var(--grey-200, rgba(127,127,127,0.16));
  border: 1px solid var(--grey-300, rgba(127,127,127,0.20));
  font-size: 0;
}
.aclaw-message-bubble .claw-stage[data-state="done"]    { background: #22c55e; border-color: transparent; }
.aclaw-message-bubble .claw-stage[data-state="active"]  { background: linear-gradient(90deg, #f59e0b, #fbbf24); border-color: transparent; animation: claw-shimmer 2s infinite; }
.aclaw-message-bubble .claw-stage[data-state="pending"] { background: var(--grey-200, rgba(127,127,127,0.16)); }

.aclaw-message-bubble .claw-spark { width: 100%; height: 32px; display: block; }
.aclaw-message-bubble .claw-donut { width: 120px; height: 120px; display: block; }

.aclaw-message-bubble .claw-tl {
  position: relative;
  padding-left: 32px;
  display: grid;
  gap: 18px;
}
.aclaw-message-bubble .claw-tl__line {
  position: absolute;
  left: 9px; top: 8px; bottom: 8px;
  width: 2px;
  background: linear-gradient(180deg, #10b981 0%, #6366f1 50%, var(--grey-300, rgba(127,127,127,0.32)) 100%);
  border-radius: 1px;
}
.aclaw-message-bubble .claw-tl > div { position: relative; display: grid; gap: 4px; }
.aclaw-message-bubble .claw-tl__dot {
  position: absolute;
  left: -29px; top: 4px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--grey-0, #fff);
  border: 3px solid var(--grey-400, #bbbec3);
}
.aclaw-message-bubble .claw-tl__dot[data-state="done"]   { border-color: #10b981; box-shadow: 0 0 0 4px rgba(16,185,129,0.12); }
.aclaw-message-bubble .claw-tl__dot[data-state="next"]   { border-color: #f59e0b; box-shadow: 0 0 0 4px rgba(245,158,11,0.12); animation: claw-pulse 2s infinite; }
.aclaw-message-bubble .claw-tl__dot[data-state="active"] { border-color: #6366f1; box-shadow: 0 0 0 4px rgba(99,102,241,0.12); }

.aclaw-message-bubble .claw-callout {
  padding: 14px 18px;
  border-left: 3px solid #3b82f6;
  border-radius: 6px;
  background: linear-gradient(90deg, #eff6ff, transparent);
}
.aclaw-message-bubble .claw-callout > p { margin: 0; font-size: 13px; line-height: 1.55; color: #1e3a8a; }
.aclaw-message-bubble .claw-callout[data-tone="s"]      { border-left-color: #10b981; background: linear-gradient(90deg, #ecfdf5, transparent); }
.aclaw-message-bubble .claw-callout[data-tone="s"] > p  { color: #065f46; }
.aclaw-message-bubble .claw-callout[data-tone="w"]      { border-left-color: #f59e0b; background: linear-gradient(90deg, #fffbeb, transparent); }
.aclaw-message-bubble .claw-callout[data-tone="w"] > p  { color: #92400e; }
.aclaw-message-bubble .claw-callout[data-tone="d"]      { border-left-color: #ef4444; background: linear-gradient(90deg, #fef2f2, transparent); }
.aclaw-message-bubble .claw-callout[data-tone="d"] > p  { color: #991b1b; }

/* ─── Dark-theme catalog overrides (bug-D readability) ──────────────────
 * The ABLEUI prompt promises "the catalog handles contrast automatically".
 * Most claw-* classes honor that by reading var(--grey-*) (flipped inside
 * [data-theme="dark"] able-claw above). But pills + callouts carry HARDCODED
 * pastel-light backgrounds + dark text — in dark mode they paint a light box
 * on the dark bubble with low-contrast (faded-gradient) text. Re-tone them to
 * translucent tone-tinted surfaces with light tone-colored ink so they read
 * on-theme. Specificity ([data-theme] + able-claw + 2 classes + attr) beats
 * the light rules above, so this wins regardless of source order. */
[data-theme="dark"] able-claw .aclaw-message-bubble .claw-pill[data-tone="s"] { background: color-mix(in srgb, #10b981 20%, transparent); color: #6ee7b7; border-color: color-mix(in srgb, #10b981 42%, transparent); }
[data-theme="dark"] able-claw .aclaw-message-bubble .claw-pill[data-tone="i"] { background: color-mix(in srgb, #3b82f6 20%, transparent); color: #93c5fd; border-color: color-mix(in srgb, #3b82f6 42%, transparent); }
[data-theme="dark"] able-claw .aclaw-message-bubble .claw-pill[data-tone="w"] { background: color-mix(in srgb, #f59e0b 20%, transparent); color: #fcd34d; border-color: color-mix(in srgb, #f59e0b 42%, transparent); }
[data-theme="dark"] able-claw .aclaw-message-bubble .claw-pill[data-tone="d"] { background: color-mix(in srgb, #ef4444 20%, transparent); color: #fca5a5; border-color: color-mix(in srgb, #ef4444 42%, transparent); }
[data-theme="dark"] able-claw .aclaw-message-bubble .claw-pill[data-tone="b"] { background: color-mix(in srgb, #6366f1 22%, transparent); color: #c4b5fd; border-color: color-mix(in srgb, #6366f1 44%, transparent); }

[data-theme="dark"] able-claw .aclaw-message-bubble .claw-callout                 { background: color-mix(in srgb, #3b82f6 13%, transparent); }
[data-theme="dark"] able-claw .aclaw-message-bubble .claw-callout > p             { color: #cfe0fb; }
[data-theme="dark"] able-claw .aclaw-message-bubble .claw-callout[data-tone="s"]     { background: color-mix(in srgb, #10b981 13%, transparent); }
[data-theme="dark"] able-claw .aclaw-message-bubble .claw-callout[data-tone="s"] > p { color: #baf0d4; }
[data-theme="dark"] able-claw .aclaw-message-bubble .claw-callout[data-tone="w"]     { background: color-mix(in srgb, #f59e0b 13%, transparent); }
[data-theme="dark"] able-claw .aclaw-message-bubble .claw-callout[data-tone="w"] > p { color: #fcd34d; }
[data-theme="dark"] able-claw .aclaw-message-bubble .claw-callout[data-tone="d"]     { background: color-mix(in srgb, #ef4444 13%, transparent); }
[data-theme="dark"] able-claw .aclaw-message-bubble .claw-callout[data-tone="d"] > p { color: #fdb4b4; }

.aclaw-message-bubble .claw-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}
.aclaw-message-bubble .claw-chip {
  padding: 7px 14px;
  font-size: 12px; font-weight: 600;
  color: var(--grey-900, inherit);
  background: var(--grey-0, #fff);
  border: 1px solid var(--grey-300, rgba(127,127,127,0.20));
  border-radius: 18px;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  font-family: inherit;
}
.aclaw-message-bubble .claw-chip:hover {
  background: var(--grey-100, rgba(127,127,127,0.06));
}

.aclaw-message-bubble .claw-person {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 14px;
  align-items: center;
  padding: 14px;
  background: var(--grey-0, #fff);
  border: 1px solid var(--grey-300, rgba(127,127,127,0.20));
  border-radius: 10px;
}
.aclaw-message-bubble .claw-avatar {
  width: 48px; height: 48px;
  border-radius: 50%;
  display: grid; place-items: center;
  color: #fff;
  font-size: 16px; font-weight: 700;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
}
.aclaw-message-bubble .claw-avatar[data-tone="teal"]  { background: linear-gradient(135deg, #06b6d4, #0891b2); }
.aclaw-message-bubble .claw-avatar[data-tone="pink"]  { background: linear-gradient(135deg, #ec4899, #f43f5e); }
.aclaw-message-bubble .claw-avatar[data-tone="amber"] { background: linear-gradient(135deg, #f59e0b, #f97316); }
.aclaw-message-bubble .claw-avatar[data-tone="green"] { background: linear-gradient(135deg, #10b981, #059669); }
.aclaw-message-bubble .claw-avatar[data-tone="slate"] { background: linear-gradient(135deg, #64748b, #94a3b8); }

.aclaw-message-bubble .claw-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.aclaw-message-bubble .claw-link {
  color: #2563eb;
  text-decoration: none;
  font-weight: 500;
  border-bottom: 1px solid rgba(37,99,235,0.3);
}
.aclaw-message-bubble .claw-link:hover { border-bottom-color: #2563eb; }
.aclaw-message-bubble .claw-btn {
  display: inline-block;
  padding: 10px 20px;
  font-size: 13px; font-weight: 600;
  border-radius: 8px;
  text-decoration: none;
  font-family: inherit;
  color: #fff;
  background: linear-gradient(135deg, #6366f1, #4f46e5);
  box-shadow: 0 2px 4px rgba(99,102,241,0.25);
  border: 0;
}
.aclaw-message-bubble .claw-btn--sec {
  color: var(--grey-900, inherit);
  background: var(--grey-0, #fff);
  border: 1px solid var(--grey-300, rgba(127,127,127,0.20));
  box-shadow: none;
}

.aclaw-message-bubble .claw-code {
  font-family: var(--font-mono, Menlo, monospace);
  font-size: 12px;
  padding: 2px 7px;
  background: var(--grey-200, rgba(127,127,127,0.16));
  border-radius: 4px;
  color: var(--grey-800, inherit);
  font-variant-numeric: tabular-nums;
}

/* Universal inline tone — paint any <strong>/<em>/<span>/<code> with semantic color
   by setting data-tone="s|i|w|d|b". Use for in-prose loss/gain values, callout-able
   inline text, anywhere the agent used to inline-style color hex. The blueprint
   sanitizer strips inline style="color:...", so this attribute is the supported path. */
.aclaw-message-bubble strong[data-tone="s"],
.aclaw-message-bubble em[data-tone="s"],
.aclaw-message-bubble span[data-tone="s"],
.aclaw-message-bubble code[data-tone="s"] { color: #10b981; }
.aclaw-message-bubble strong[data-tone="i"],
.aclaw-message-bubble em[data-tone="i"],
.aclaw-message-bubble span[data-tone="i"],
.aclaw-message-bubble code[data-tone="i"] { color: #3b82f6; }
.aclaw-message-bubble strong[data-tone="w"],
.aclaw-message-bubble em[data-tone="w"],
.aclaw-message-bubble span[data-tone="w"],
.aclaw-message-bubble code[data-tone="w"] { color: #b45309; }
.aclaw-message-bubble strong[data-tone="d"],
.aclaw-message-bubble em[data-tone="d"],
.aclaw-message-bubble span[data-tone="d"],
.aclaw-message-bubble code[data-tone="d"] { color: #ef4444; }
.aclaw-message-bubble strong[data-tone="b"],
.aclaw-message-bubble em[data-tone="b"],
.aclaw-message-bubble span[data-tone="b"],
.aclaw-message-bubble code[data-tone="b"] { color: #6366f1; }
.aclaw-message-bubble strong[data-tone="n"],
.aclaw-message-bubble em[data-tone="n"],
.aclaw-message-bubble span[data-tone="n"],
.aclaw-message-bubble code[data-tone="n"] { color: var(--grey-500, #66686b); }

/* Tone modifier on body paragraphs — same shape as KPI/pill */
.aclaw-message-bubble .claw-body[data-tone="d"],
.aclaw-message-bubble .claw-body--muted[data-tone="d"] { color: #ef4444; }
.aclaw-message-bubble .claw-body[data-tone="s"],
.aclaw-message-bubble .claw-body--muted[data-tone="s"] { color: #10b981; }
.aclaw-message-bubble .claw-body[data-tone="w"],
.aclaw-message-bubble .claw-body--muted[data-tone="w"] { color: #b45309; }


/* able-login */

able-login {
  display: block;
  width: 100%;
  justify-self: stretch;
  min-height: 100vh;
  background: var(--login-bg, var(--surface-base, #f5f7fa));
  color: var(--text-primary, #0f172a);
}
.alogin-shell {
  width: 100%;            /* explicit; was implicit-inherited */
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  box-sizing: border-box;
}
.alogin-card {
  width: 100%;
  /* clamp to keep mobile gap + cap desktop width; was 420px fixed */
  max-width: var(--login-card-max-width, min(440px, calc(100vw - 32px)));
  padding: var(--login-card-padding, clamp(20px, 4vw, 32px));
  background: var(--login-card-bg, var(--surface-card, #ffffff));
  border-radius: var(--login-card-radius, 12px);
  box-shadow: var(--login-card-shadow, 0 10px 40px rgba(0, 0, 0, 0.08));
  box-sizing: border-box;
}
.alogin-brand {
  display: flex;
  justify-content: center;
  margin-bottom: 16px;
}
.alogin-brand-img {
  /* viewport-aware logo sizing — was fixed 56px */
  max-height: clamp(48px, 8vw, 72px);
  max-width: 240px;
  height: auto;
  width: auto;
  display: block;
  object-fit: contain;
}
.alogin-title {
  margin: 0 0 24px 0;
  font-size: 20px;
  font-weight: 700;
  text-align: center;
  letter-spacing: 0.04em;
  color: var(--text-primary, #0f172a);
}
.alogin-form { display: flex; flex-direction: column; gap: 14px; }
.alogin-form.is-hidden { display: none; }
.alogin-label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
}
.alogin-label-text {
  font-weight: 600;
  color: var(--text-primary, #0f172a);
  opacity: 0.85;
}
.alogin-input {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  min-height: 44px;       /* WCAG 2.2 AA touch target — was 39px */
  border: 1px solid var(--login-input-border, var(--border-default, #cbd5e1));
  border-radius: var(--login-input-radius, 8px);
  /* 16px MINIMUM — anything smaller triggers iOS Safari's auto-zoom on focus,
   * which causes a jarring viewport jump on every login. */
  font-size: 16px;
  line-height: 1.4;
  background: var(--surface-card, #ffffff);
  color: var(--text-primary, #0f172a);
  transition: border-color 120ms, box-shadow 120ms;
}
.alogin-input:focus {
  outline: none;
  border-color: var(--login-button-bg, var(--accent, #2563eb));
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}
.alogin-input-otp {
  font-family: 'SF Mono', Menlo, Consolas, monospace;
  font-size: 24px;
  letter-spacing: 8px;
  text-align: center;
}
.alogin-passkey-prompt {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  margin-top: 8px;
  background: var(--surface-card, #ffffff);
  border: 1px solid var(--border-default, #e2e8f0);
  border-radius: var(--login-input-radius, 8px);
}
.alogin-passkey-prompt.is-hidden { display: none; }
.alogin-passkey-prompt-title {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary, #0f172a);
}
.alogin-passkey-prompt-body {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-primary, #0f172a);
  opacity: 0.75;
}
.alogin-passkey-prompt-actions {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}
.alogin-passkey-prompt-actions .alogin-submit { flex: 1; margin: 0; }
.alogin-passkey-prompt-actions .alogin-back { flex: 1; margin: 0; min-height: 44px; }
.alogin-passkey {
  margin-top: 4px;
  padding: 12px 16px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--border-default, #cbd5e1);
  border-radius: var(--login-input-radius, 8px);
  background: var(--surface-card, #ffffff);
  color: var(--text-primary, #0f172a);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 120ms, border-color 120ms;
}
.alogin-passkey:hover:not(:disabled) {
  background: rgba(0, 0, 0, 0.03);
  border-color: var(--text-primary, #94a3b8);
}
.alogin-passkey:disabled { opacity: 0.6; cursor: not-allowed; }
.alogin-passkey.is-primary {
  background: var(--login-button-bg, var(--accent, #2563eb));
  color: var(--login-button-color, #ffffff);
  border-color: transparent;
}
.alogin-passkey.is-primary:hover:not(:disabled) {
  background: var(--login-button-bg-hover, var(--accent-hover, #1d4ed8));
  border-color: transparent;
}
.alogin-passkey-fallback {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  text-align: center;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--login-link-color, var(--accent, #2563eb));
}
.alogin-passkey-fallback:hover { text-decoration: underline; }
.alogin-remember {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  user-select: none;
  cursor: pointer;
}
.alogin-remember input[type="checkbox"] {
  margin: 0;
  cursor: pointer;
}
.alogin-submit {
  margin-top: 4px;
  padding: 12px 16px;
  min-height: 48px;       /* 48px on mobile feels right for thumb taps */
  border: 0;
  border-radius: var(--login-input-radius, 8px);
  background: var(--login-button-bg, var(--accent, #2563eb));
  color: var(--login-button-color, #ffffff);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 120ms, transform 80ms;
}
.alogin-submit:hover:not(:disabled) {
  background: var(--login-button-bg-hover, var(--accent-hover, #1d4ed8));
}
.alogin-submit:active:not(:disabled) { transform: translateY(1px); }
.alogin-submit:disabled { opacity: 0.6; cursor: not-allowed; }
.alogin-back {
  margin-top: 4px;
  padding: 8px 12px;
  background: transparent;
  color: var(--login-link-color, var(--accent, #2563eb));
  border: 0;
  font-size: 13px;
  cursor: pointer;
  text-align: center;
}
.alogin-back:hover { text-decoration: underline; }
.alogin-hint {
  margin: 0 0 6px 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-primary, #0f172a);
  opacity: 0.8;
}
.alogin-hint.is-hidden { display: none; }
.alogin-qr {
  display: flex;
  justify-content: center;
  padding: 12px;
  background: #ffffff;
  border-radius: 8px;
  border: 1px solid var(--border-default, #e2e8f0);
}
.alogin-qr.is-hidden { display: none; }
.alogin-qr-img { width: 200px; height: 200px; display: block; }
.alogin-error {
  margin: 12px 0 0 0;
  padding: 8px 12px;
  font-size: 13px;
  border-radius: 6px;
  background: rgba(220, 38, 38, 0.08);
  color: var(--login-error-color, #dc2626);
  border: 1px solid rgba(220, 38, 38, 0.2);
  display: none;
}
.alogin-error.is-visible { display: block; }
.alogin-forgot {
  display: block;
  margin-top: 14px;
  font-size: 13px;
  text-align: center;
  color: var(--login-link-color, var(--accent, #2563eb));
  text-decoration: none;
}
.alogin-forgot:hover { text-decoration: underline; }
.alogin-divider {
  display: flex;
  align-items: center;
  margin: 20px 0 16px 0;
  font-size: 12px;
  color: var(--text-primary, #0f172a);
  opacity: 0.6;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.alogin-divider::before, .alogin-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border-default, #e2e8f0);
}
.alogin-divider::before { margin-right: 12px; }
.alogin-divider::after  { margin-left: 12px; }
.alogin-alternatives { display: flex; flex-direction: column; gap: 8px; }
.alogin-alt-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 14px;
  min-height: 44px;       /* WCAG 2.2 AA touch target */
  border: 1px solid var(--border-default, #cbd5e1);
  border-radius: var(--login-input-radius, 8px);
  background: var(--surface-card, #ffffff);
  color: var(--text-primary, #0f172a);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 120ms, border-color 120ms;
  text-decoration: none;
}
.alogin-alt-button:hover {
  background: rgba(0, 0, 0, 0.03);
  border-color: var(--text-primary, #94a3b8);
}
.alogin-alt-icon {
  display: inline-flex;
  width: 18px;
  height: 18px;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}
.alogin-footer {
  margin-top: 20px;
  text-align: center;
  font-size: 12px;
  color: var(--text-primary, #64748b);
  opacity: 0.75;
}
.alogin-footer a {
  color: var(--login-link-color, var(--accent, #2563eb));
  text-decoration: none;
}
.alogin-footer a:hover { text-decoration: underline; }

/* Theme variant: dark */
able-login[theme-variant="dark"] {
  background: var(--login-bg, #0f172a);
  color: #e2e8f0;
}
able-login[theme-variant="dark"] .alogin-card {
  background: var(--login-card-bg, #1e293b);
}
able-login[theme-variant="dark"] .alogin-input {
  background: #0f172a;
  color: #e2e8f0;
  border-color: var(--login-input-border, #334155);
}
able-login[theme-variant="dark"] .alogin-alt-button {
  background: #1e293b;
  color: #e2e8f0;
  border-color: #334155;
}
able-login[theme-variant="dark"] .alogin-alt-button:hover {
  background: #283549;
}

/* Theme variant: brand-purple */
able-login[theme-variant="brand-purple"] {
  --login-button-bg: #7c3aed;
  --login-button-bg-hover: #6d28d9;
  --login-link-color: #7c3aed;
}

@media (max-width: 480px) {
  /* Mobile shell: hug the top with a comfortable gutter, let the card take
   * the available width minus 16px each side. */
  .alogin-shell { padding: 16px; align-items: flex-start; padding-top: 32px; }
  .alogin-card  {
    padding: 28px 20px;
    /* Override the desktop clamp so we always size to viewport-minus-gutter
     * on small phones (overrides the min(440px, calc(100vw - 32px)) above). */
    max-width: var(--login-card-max-width, calc(100vw - 32px));
  }
  .alogin-title { font-size: 18px; margin-bottom: 20px; }
}


/* able-offcanvas */

able-offcanvas {
  position: fixed; top: 0; bottom: 0;
  z-index: 201;
  background: var(--surface-card, #141415);
  color: var(--text-primary, #e2e8f0);
  box-shadow: -10px 0 30px rgba(0, 0, 0, 0.4);
  transform: translateX(100%);
  transition: transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
  overflow: hidden;
  flex-direction: column;
}
able-offcanvas[data-position="right"] { right: 0; transform: translateX(100%); }
able-offcanvas[data-position="left"]  { left: 0;  transform: translateX(-100%); }
able-offcanvas[data-position="top"] {
  top: 0; left: 0; right: 0; bottom: auto;
  transform: translateY(-100%);
  height: auto; max-height: 80vh;
}
able-offcanvas[data-position="bottom"] {
  top: auto; left: 0; right: 0; bottom: 0;
  transform: translateY(100%);
  height: auto; max-height: 80vh;
}
able-offcanvas.aoff--open[data-position="right"],
able-offcanvas.aoff--open[data-position="left"]   { transform: translateX(0); }
able-offcanvas.aoff--open[data-position="top"],
able-offcanvas.aoff--open[data-position="bottom"] { transform: translateY(0); }
.aoff-backdrop {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(11, 15, 26, 0.55);
  opacity: 0; pointer-events: none;
  transition: opacity 220ms ease;
}
.aoff-backdrop--open { opacity: 1; pointer-events: auto; }
/* Close: red rounded-square with a bold white X, top-LEFT (restyled
   2026-06-10 to match the app's modal close buttons — was a Mac-style
   traffic-light dot). */
.aoff-close {
  position: absolute; top: 14px; left: 14px;
  width: 30px; height: 30px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #ef4444; color: #ffffff;
  border: none;
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.35); cursor: pointer; padding: 0;
  font-size: 14px; font-weight: 700; line-height: 1;
  z-index: 10;
  transition: background 120ms ease, transform 120ms ease;
}
.aoff-close:hover { background: #dc2626; transform: scale(1.05); }
.aoff-close:active { background: #b91c1c; transform: scale(0.95); }
.aoff-close:focus-visible { outline: 2px solid #ef4444; outline-offset: 2px; }
/* Touch: expand the hit area to 44px (30 + 7 + 7) without enlarging the button. */
@media (pointer: coarse) {
  .aoff-close::after { content: ''; position: absolute; inset: -7px; }
}
/* Breadcrumb bar — visible ONLY when the panel holds stacked levels. Flow
   child above the content slot (the host flexes column when open). The
   left padding clears the absolute close button. */
.aoff-crumbs {
  display: none;
  flex: 0 0 auto;
  align-items: center;
  gap: 2px;
  padding: 13px 16px 11px 56px;
  border-bottom: 1px solid var(--border-default, rgba(127, 127, 127, 0.25));
  background: var(--surface-raised, rgba(127, 127, 127, 0.06));
  font-size: 12.5px;
  line-height: 1.2;
  overflow-x: auto;
  white-space: nowrap;
  scrollbar-width: thin;
}
.aoff-crumbs--visible { display: flex; }
.aoff-crumb {
  flex: 0 0 auto;
  background: none; border: none;
  padding: 4px 6px; border-radius: 6px;
  font: inherit; color: var(--text-muted, #94a3b8);
  cursor: pointer;
  max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: background 120ms ease, color 120ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .aoff-crumb:hover {
    color: var(--text-primary, #e2e8f0);
    background: var(--surface-hover, rgba(127, 127, 127, 0.15));
  }
}
.aoff-crumb:focus-visible { outline: 2px solid var(--accent, #3b82f6); outline-offset: 1px; }
.aoff-crumb--current {
  color: var(--text-primary, #e2e8f0);
  font-weight: 600;
  cursor: default;
  max-width: 280px;
}
.aoff-crumb-sep { flex: 0 0 auto; color: var(--text-subtle, #64748b); opacity: 0.65; padding: 0 2px; }
@media (pointer: coarse) {
  .aoff-crumb { min-height: 44px; display: inline-flex; align-items: center; }
}
.aoff-content {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 16px;
  box-sizing: border-box;
}
/* Stashed layers stay in the document (so reactive bindings + SSR state
   survive) but are fully hidden and inert. */
.aoff-layer[data-aoff-stashed] { display: none !important; }
/* Responsive: mobile bottom-sheet flip (responsive="auto" opt-in) */
able-offcanvas[data-position="bottom"].aoff-responsive-flipped {
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  max-height: 90dvh;
  padding-bottom: max(0px, env(safe-area-inset-bottom));
}
able-offcanvas[data-position="bottom"].aoff-responsive-flipped .aoff-close {
  width: 44px;
  height: 44px;
  font-size: 22px;
}
/* Bottom-sheet: the enlarged 44px close button + the grab handle need more
   clearance than the desktop 56px. */
able-offcanvas[data-position="bottom"].aoff-responsive-flipped .aoff-crumbs {
  padding-left: 72px;
  padding-top: 16px;
}
able-offcanvas[data-position="bottom"].aoff-responsive-flipped::before {
  content: '';
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 4px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 2px;
}
able-offcanvas[data-position="bottom"].aoff-responsive-flipped .aoff-content {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}


/* able-payment-method */

able-payment-method { display: block; }
.apm {
  border: 0; padding: 0; margin: 0;
  display: flex; flex-direction: column;
  gap: 10px;
}
.apm-legend {
  padding: 0; margin: 0 0 12px;
  font-size: 13px; font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary, #3f3f46);
}
.apm-option {
  display: grid;
  grid-template-columns: auto 48px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1.5px solid var(--border-default, #e5e7eb);
  border-radius: 10px;
  cursor: pointer;
  background: var(--surface-base, #ffffff);
  transition: border-color 160ms ease, background 160ms ease;
  min-height: 64px;
}
.apm-option:hover {
  border-color: var(--accent, #1b2a4a);
  background: var(--surface-hover, #f8f8f9);
}
.apm-option[data-selected="true"] {
  border-color: var(--accent, #1b2a4a);
  background: var(--accent-soft, #dbeafe);
}
.apm-radio {
  appearance: none;
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 2px solid var(--border-strong, #d6d8db);
  background: var(--surface-base, #ffffff);
  margin: 0;
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
}
.apm-radio:checked {
  border-color: var(--accent, #1b2a4a);
}
.apm-radio:checked::after {
  content: '';
  position: absolute;
  inset: 3px;
  background: var(--accent, #1b2a4a);
  border-radius: 50%;
}
.apm-logo {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 48px; height: 32px;
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.04em;
  background: var(--surface-subtle, #f1f5f9);
  color: var(--text-secondary, #3f3f46);
  border-radius: 6px;
  text-transform: uppercase;
  overflow: hidden;
}
.apm-logo--img { background: transparent; padding: 0; }
.apm-logo--img img, .apm-logo.apm-logo--img {
  object-fit: contain;
  max-width: 100%; max-height: 100%;
}
.apm-logo--mp { background: #009ee3; color: #fff; }
.apm-logo--oxxo { background: #e30613; color: #fff; }
.apm-logo--spei { background: #006341; color: #fff; }
.apm-logo--stripe { background: #635bff; color: #fff; }
.apm-logo--cc { background: #1d1d1f; color: #fff; }
.apm-logo--bank { background: #475569; color: #fff; }
.apm-logo--cash { background: #15803d; color: #fff; }
.apm-logo--apartado { background: #b45309; color: #fff; }
.apm-text {
  display: flex; flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.apm-label {
  font-size: 14px; font-weight: 600;
  color: var(--text-primary, #1d1c17);
}
.apm-desc {
  font-size: 12px;
  color: var(--text-muted, #6b7280);
  overflow: hidden; text-overflow: ellipsis;
}
.apm-badge {
  display: inline-flex;
  align-items: center;
  background: var(--success-soft, #dcfce7);
  color: var(--success, #15803d);
  font-size: 11px; font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
}
@media (max-width: 479px) {
  .apm-option {
    grid-template-columns: auto 40px 1fr;
    grid-template-areas:
      "radio logo text"
      ".     .    badge";
    padding: 12px;
    min-height: 56px;
  }
  .apm-radio { grid-area: radio; }
  .apm-logo { grid-area: logo; width: 40px; height: 28px; }
  .apm-text { grid-area: text; }
  .apm-badge {
    grid-area: badge;
    justify-self: end;
    margin-top: 4px;
  }
}


/* able-shipping-rate */

able-shipping-rate { display: block; }
.ashr {
  border: 0; padding: 0; margin: 0;
  display: flex; flex-direction: column;
  gap: 10px;
}
.ashr-legend {
  padding: 0; margin: 0 0 12px;
  font-size: 13px; font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary, #3f3f46);
}
.ashr-option {
  display: grid;
  grid-template-columns: auto 48px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1.5px solid var(--border-default, #e5e7eb);
  border-radius: 10px;
  cursor: pointer;
  background: var(--surface-base, #ffffff);
  transition: border-color 160ms ease, background 160ms ease;
  min-height: 64px;
}
.ashr-option:hover {
  border-color: var(--accent, #1b2a4a);
  background: var(--surface-hover, #f8f8f9);
}
.ashr-option[data-selected="true"] {
  border-color: var(--accent, #1b2a4a);
  background: var(--accent-soft, #dbeafe);
}
.ashr-radio {
  appearance: none;
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 2px solid var(--border-strong, #d6d8db);
  background: var(--surface-base, #ffffff);
  margin: 0;
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
}
.ashr-radio:checked { border-color: var(--accent, #1b2a4a); }
.ashr-radio:checked::after {
  content: '';
  position: absolute; inset: 3px;
  background: var(--accent, #1b2a4a);
  border-radius: 50%;
}
.ashr-logo {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 48px; height: 32px;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.04em;
  background: var(--surface-subtle, #f1f5f9);
  color: var(--text-secondary, #3f3f46);
  border-radius: 6px;
  text-transform: uppercase;
}
.ashr-logo--img { background: transparent; padding: 0; }
.ashr-logo--estafeta { background: #ea0029; color: #fff; }
.ashr-logo--dhl { background: #fc0; color: #d40511; }
.ashr-logo--fedex { background: #4d148c; color: #ff6200; }
.ashr-logo--paquetexpress { background: #003e7e; color: #fff; }
.ashr-logo--99min { background: #ff5e2a; color: #fff; }
.ashr-logo--ups { background: #351c15; color: #ffb500; }
.ashr-logo--redpack { background: #c8102e; color: #fff; }
.ashr-logo--sendex { background: #173f5f; color: #fff; }
.ashr-logo--pickup { background: #15803d; color: #fff; }
.ashr-logo--correos { background: #006847; color: #fff; }
.ashr-text {
  display: flex; flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.ashr-carrier {
  font-size: 14px; font-weight: 600;
  color: var(--text-primary, #1d1c17);
}
.ashr-eta {
  font-size: 12px;
  color: var(--text-muted, #6b7280);
}
.ashr-badge {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  margin-top: 2px;
  background: var(--info-soft, #dbeafe);
  color: var(--info, #1d4ed8);
  font-size: 11px; font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.ashr-price {
  font-size: 15px; font-weight: 600;
  color: var(--text-primary, #1d1c17);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ashr-price--free {
  color: var(--success, #15803d);
  text-transform: none;
  font-weight: 700;
}
.ashr-empty {
  padding: 16px;
  text-align: center;
  color: var(--text-muted, #6b7280);
  font-size: 14px;
  margin: 0;
}
@media (max-width: 479px) {
  .ashr-option {
    grid-template-columns: auto 40px 1fr;
    grid-template-areas:
      "radio logo text"
      ".     .    price";
    padding: 12px;
    min-height: 56px;
  }
  .ashr-radio { grid-area: radio; }
  .ashr-logo { grid-area: logo; width: 40px; height: 28px; }
  .ashr-text { grid-area: text; }
  .ashr-price {
    grid-area: price;
    justify-self: end;
    margin-top: 4px;
  }
}


/* able-spinner */

able-spinner { display: contents; }
.asp-bar {
  position: fixed; top: 0; left: 0; right: 0; height: 3px;
  z-index: 1000; pointer-events: none;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
.asp-bar[hidden] { display: none !important; }
.asp-bar-fill {
  height: 100%; width: 30%;
  background: linear-gradient(90deg, transparent 0%, var(--accent-secondary, #3b82f6) 50%, transparent 100%);
  transform: translateX(-100%);
  animation: asp-slide 1.2s linear infinite;
}
@keyframes asp-slide {
  from { transform: translateX(-100%); }
  to   { transform: translateX(400%); }
}
.asp-overlay {
  position: fixed; inset: 0;
  background: rgba(11, 15, 26, 0.45);
  display: flex; align-items: center; justify-content: center;
  z-index: 999;
}
.asp-overlay[hidden] { display: none !important; }
.asp-spinner {
  width: 36px; height: 36px;
  border: 3px solid rgba(255, 255, 255, 0.16);
  border-top-color: var(--accent-secondary, #3b82f6);
  border-radius: 50%;
  animation: asp-spin 800ms linear infinite;
}
@keyframes asp-spin { to { transform: rotate(360deg); } }


/* able-tabs */

able-tabs { display: block; }
.atabs[data-orientation="horizontal"] {
  display: block;
}
.atabs-bar {
  display: flex;
  gap: 8px;
  padding: 0 16px;
  border-bottom: 1px solid var(--border-default, #e5e7eb);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}
.atabs-bar[data-orientation="vertical"] {
  flex-direction: column;
  border-bottom: 0;
  border-right: 1px solid var(--border-default, #e5e7eb);
  overflow-x: visible;
  scroll-snap-type: none;
}
.atabs-tab {
  flex: 0 0 auto;
  padding: 12px 16px;
  min-height: 44px;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  scroll-snap-align: start;
  font-size: 14px;
  font-weight: 500;
  transition: border-color 200ms, color 200ms, background-color 120ms;
}
.atabs-tab:focus-visible {
  outline: 2px solid var(--accent-secondary, #1d4ed8);
  outline-offset: -2px;
}
.atabs-tab.is-active {
  border-bottom-color: var(--accent-secondary, #1d4ed8);
  color: var(--accent-secondary, #1d4ed8);
}
.atabs-bar[data-orientation="vertical"] .atabs-tab {
  border-bottom: 0;
  border-right: 2px solid transparent;
  text-align: left;
}
.atabs-bar[data-orientation="vertical"] .atabs-tab.is-active {
  border-right-color: var(--accent-secondary, #1d4ed8);
  border-bottom-color: transparent;
}
.atabs-panel { padding: 16px; }
@media (hover: hover) {
  .atabs-tab:hover {
    background: rgba(0, 0, 0, 0.04);
  }
}
@media (max-width: 479px) {
  .atabs-bar { gap: 4px; padding: 0 12px; }
  .atabs-tab { padding: 10px 14px; font-size: 13px; }
}


/* able-toast-stack */

able-toast-stack { display: contents; }
.atst-stack {
  position: fixed; z-index: 500;
  display: flex; flex-direction: column; gap: 8px;
  padding: 16px;
  pointer-events: none;
  max-width: 360px;
}
.atst-stack[data-corner="top-right"]    { top: 0;    right: 0; }
.atst-stack[data-corner="top-left"]     { top: 0;    left: 0; }
.atst-stack[data-corner="bottom-right"] { bottom: 0; right: 0; }
.atst-stack[data-corner="bottom-left"]  { bottom: 0; left: 0; }
.atst-toast {
  pointer-events: auto;
  display: flex; gap: 8px; align-items: flex-start;
  padding: 10px 14px;
  /* Bug — toast must own its own contrast pair. Previously we read
     --text-primary which in light-themed tenants resolves to a dark
     ink colour (correct for body text on light backgrounds) but rendered
     dark-on-dark inside this toast's deliberately dark surface. Use
     dedicated --theme_toast_* tokens with explicit dark/light fallbacks
     so the toast is always readable regardless of the tenant theme,
     and themes can still rebrand via the dedicated tokens. */
  background: var(--surface-inverse, #1f2937);
  color: var(--text-inverse, #f8fafc);
  border: 1px solid var(--border-default, rgba(255, 255, 255, 0.12));
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  font-size: 13px;
  max-width: 360px;
  transition: opacity 180ms ease-out, transform 180ms ease-out;
}
.atst-toast[data-kind="success"] { border-left: 3px solid var(--success, #267e3d); }
.atst-toast[data-kind="warning"] { border-left: 3px solid var(--warning, #f9a006); }
.atst-toast[data-kind="error"]   { border-left: 3px solid var(--danger,  #BF3C00); }
.atst-toast[data-kind="info"]    { border-left: 3px solid var(--info,    #4B6D7A); }
.atst-toast.atst-enter { opacity: 0; transform: translateX(20px); }
.atst-toast.atst-exit  { opacity: 0; transform: translateX(20px); }
.atst-body { flex: 1; min-width: 0; line-height: 1.4; }
.atst-close {
  background: transparent; color: inherit; border: 0; cursor: pointer;
  font-size: 16px; line-height: 1; opacity: 0.7;
  padding: 0 4px;
}
.atst-close:hover { opacity: 1; }