/* /_share/annotations.css — AIR3 design system tokens.
 * Tokens from https://air3-design.figma.site/
 *   button-primary #000, surface-dim #E3E9EA, text-primary #181b1c,
 *   text-secondary #798b95, text-placeholder #b8cad4, status-success #17B26A,
 *   status-error #F3383B, status-pending #F99247, decorative-purple #B6B8F2
 *   radius-button 999px, corner-container 32px
 *   font-poppins (headings), font-dm-sans (body), font-fira-code (mono)
 */

:root {
  --share-ann-primary: #000;
  --share-ann-primary-hover: #464646;
  --share-ann-inverse: #fff;
  --share-ann-text: #181b1c;
  --share-ann-text-secondary: #798b95;
  --share-ann-text-placeholder: #b8cad4;
  --share-ann-text-disabled: #a8b4bb;
  --share-ann-surface: #fff;
  --share-ann-surface-dim: #e3e9ea;
  --share-ann-border: #d6e0e5;
  --share-ann-border-strong: #535353;
  --share-ann-accent: #00bec9;
  --share-ann-accent-soft: #cef0f3;
  --share-ann-success: #17b26a;
  --share-ann-error: #f3383b;
  --share-ann-pending: #f99247;
  --share-ann-resolved: #b8cad4;
  --share-ann-shadow-card: 0 12px 32px rgba(13, 28, 36, 0.08), 0 2px 6px rgba(13, 28, 36, 0.05);
  --share-ann-shadow-elev: 0 30px 60px rgba(13, 28, 36, 0.16), 0 8px 20px rgba(13, 28, 36, 0.08);
  --share-ann-font-display: "Poppins", ui-sans-serif, system-ui, sans-serif;
  --share-ann-font-body: "DM Sans", ui-sans-serif, system-ui, sans-serif;
  --share-ann-font-mono: "Fira Code", ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ---- Toolbar (bottom-right pill) -------------------------------------- */

.share-ann-toolbar {
  position: fixed;
  right: 12px;
  bottom: 12px;
  /* Never let the toolbar push past the left edge on narrow screens */
  left: auto;
  z-index: 2147483600;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  /* iOS-style frosted glass — soft dusty-blue tint over backdrop blur.
   * Kenneth 2026-05-20: "use the attached color but transparent like new
   * iOS style". Base color #BCCAD1 (dusty powder blue) at ~55% alpha,
   * blurred. Saturate boost prevents the blur from going muddy over
   * complex partner content. */
  background: rgba(188, 202, 209, 0.55);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 28px; /* slightly less than full pill so wrapped rows still look intentional */
  box-shadow: 0 8px 24px rgba(13, 28, 36, 0.10), 0 1px 2px rgba(13, 28, 36, 0.06);
  font-family: var(--share-ann-font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--share-ann-text);
  /* Hard width constraint — never overflow the viewport on any device. */
  max-width: calc(100vw - 24px);
  box-sizing: border-box;
  /* Allow contents to wrap if total intrinsic width exceeds the constraint
   * (e.g. small phones where the email + 3 buttons + count don't fit one line). */
  flex-wrap: wrap;
  justify-content: flex-end;
  /* iOS safe-area: lift above the home indicator strip */
  padding-bottom: max(6px, env(safe-area-inset-bottom));
  bottom: max(12px, env(safe-area-inset-bottom));
}
.share-ann-toolbar button {
  appearance: none;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 8px 14px;
  border-radius: 999px;
  font: inherit;
  color: var(--share-ann-text);
  white-space: nowrap;
}
.share-ann-toolbar button:hover { background: rgba(255, 255, 255, 0.45); }
.share-ann-toolbar button.active {
  background: var(--share-ann-primary);
  color: var(--share-ann-inverse);
}
.share-ann-toolbar button.active:hover { background: var(--share-ann-primary-hover); }
.share-ann-toolbar .share-ann-count {
  min-width: 24px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--share-ann-surface-dim);
  font-family: var(--share-ann-font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--share-ann-text);
  text-align: center;
}
.share-ann-toolbar .share-ann-me {
  font-family: var(--share-ann-font-mono);
  font-size: 11px;
  color: var(--share-ann-text-secondary);
  padding: 4px 8px 4px 10px;
  margin-left: 4px;
  border-left: 1px solid var(--share-ann-border);
  border-radius: 6px;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.share-ann-toolbar .share-ann-me:hover,
.share-ann-toolbar .share-ann-me:focus-visible {
  background: var(--share-ann-bg-subtle, rgba(0,0,0,0.05));
  color: var(--share-ann-text, #111);
  outline: none;
}

/* ---- Side panel (comment list) ---------------------------------------- */

.share-ann-panel {
  position: fixed;
  right: 12px;
  bottom: 80px;
  top: 20px;
  width: 400px;
  max-width: calc(100vw - 24px);
  max-height: calc(100vh - 100px);
  background: var(--share-ann-surface);
  border: 1px solid var(--share-ann-border);
  border-radius: 24px;
  box-shadow: var(--share-ann-shadow-elev);
  display: none;
  flex-direction: column;
  overflow: hidden;
  z-index: 2147483601;
  font-family: var(--share-ann-font-body);
  font-size: 14px;
  line-height: 1.5;
  color: var(--share-ann-text);
  box-sizing: border-box;
}
.share-ann-panel.open { display: flex; }

.share-ann-panel header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--share-ann-border);
  background: var(--share-ann-surface);
}
.share-ann-panel header h3 {
  margin: 0;
  font-family: var(--share-ann-font-display);
  font-size: 16px;
  font-weight: 600;
  color: var(--share-ann-text);
  letter-spacing: -0.01em;
}
.share-ann-panel header .share-ann-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}
.share-ann-panel header button {
  appearance: none;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 999px;
  font: inherit;
  font-size: 12px;
  color: var(--share-ann-text-secondary);
}
.share-ann-panel header button:hover {
  background: var(--share-ann-surface-dim);
  color: var(--share-ann-text);
}
.share-ann-panel header button.active {
  background: var(--share-ann-primary);
  color: var(--share-ann-inverse);
}

.share-ann-list {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 8px;
  min-height: 0; /* required for flex children that scroll */
}
.share-ann-empty {
  padding: 40px 24px;
  text-align: center;
  font-size: 13px;
  color: var(--share-ann-text-secondary);
}

/* ---- Annotation card -------------------------------------------------- */

.share-ann-item {
  padding: 14px 16px;
  margin: 6px 4px;
  border-radius: 18px;
  background: var(--share-ann-surface);
  border: 1px solid var(--share-ann-border);
  cursor: pointer;
  transition: box-shadow 0.16s ease, transform 0.16s ease;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}
.share-ann-item:hover { box-shadow: var(--share-ann-shadow-card); }
.share-ann-item.resolved { opacity: 0.6; }

.share-ann-item .share-ann-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 12px;
  color: var(--share-ann-text-secondary);
  flex-wrap: wrap;
}
.share-ann-item .share-ann-meta b {
  color: var(--share-ann-text);
  font-weight: 600;
  font-family: var(--share-ann-font-mono);
  font-size: 11.5px;
}
.share-ann-item .share-ann-meta .share-ann-pinnum {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--share-ann-primary);
  color: var(--share-ann-inverse);
  font-family: var(--share-ann-font-mono);
  font-size: 11px;
  font-weight: 700;
}
.share-ann-item.resolved .share-ann-pinnum { background: var(--share-ann-resolved); }

/* Sub-page scoping (2026-05-29):
 * Annotations made on a different sub-page (different #hash or path) get a
 * subtle dashed-left accent + a clickable ↗ badge in the meta row that
 * navigates the browser to that pagePath. Visible only when the user has
 * toggled the panel scope to "This page" off (showing all pages).
 */
.share-ann-item.share-ann-otherpage {
  border-left: 2px dashed var(--share-ann-border, rgba(0,0,0,0.18));
}
.share-ann-item .share-ann-meta .share-ann-gotopage {
  appearance: none;
  background: var(--share-ann-surface-dim, rgba(0,0,0,0.04));
  border: 1px solid var(--share-ann-border, rgba(0,0,0,0.12));
  color: var(--share-ann-text-secondary);
  font: inherit;
  font-family: var(--share-ann-font-mono);
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  cursor: pointer;
  margin-left: auto; /* push to far right of the meta row */
  white-space: nowrap;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.share-ann-item .share-ann-meta .share-ann-gotopage:hover {
  background: var(--share-ann-primary);
  color: var(--share-ann-inverse);
  border-color: var(--share-ann-primary);
}

.share-ann-item .share-ann-body {
  font-family: var(--share-ann-font-body);
  font-size: 14px;
  color: var(--share-ann-text);
  white-space: pre-wrap;
  word-break: break-word;
}
.share-ann-item .share-ann-quote {
  margin-top: 10px;
  padding: 8px 12px;
  font-size: 12px;
  color: var(--share-ann-text-secondary);
  background: var(--share-ann-surface-dim);
  border-left: 3px solid var(--share-ann-primary);
  border-radius: 0 8px 8px 0;
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* ---- Replies ---------------------------------------------------------- */

.share-ann-replies {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed var(--share-ann-border);
}
.share-ann-reply {
  padding: 8px 10px;
  margin: 6px 0;
  border-radius: 10px;
  background: var(--share-ann-surface-dim);
  font-size: 13px;
  color: var(--share-ann-text);
  word-break: break-word;
  overflow-wrap: anywhere;
  position: relative;
}
.share-ann-reply .share-ann-reply-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
  font-size: 11px;
  color: var(--share-ann-text-secondary);
}
.share-ann-reply .share-ann-reply-meta b {
  color: var(--share-ann-text);
  font-weight: 600;
  font-family: var(--share-ann-font-mono);
  font-size: 11px;
}
.share-ann-reply .share-ann-reply-body {
  font-family: var(--share-ann-font-body);
  white-space: pre-wrap;
}
.share-ann-reply .share-ann-reply-del {
  position: absolute;
  top: 6px;
  right: 8px;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--share-ann-text-secondary);
  font-size: 14px;
  line-height: 1;
  padding: 2px 6px;
  border-radius: 6px;
}
.share-ann-reply .share-ann-reply-del:hover {
  background: rgba(243, 56, 59, 0.08);
  color: var(--share-ann-error);
}

/* ---- Item action row -------------------------------------------------- */

.share-ann-item-actions {
  margin-top: 12px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.share-ann-item-actions button {
  appearance: none;
  cursor: pointer;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--share-ann-border);
  background: var(--share-ann-surface);
  font: 500 12px/1 var(--share-ann-font-body);
  color: var(--share-ann-text-secondary);
}
.share-ann-item-actions button:hover {
  background: var(--share-ann-surface-dim);
  color: var(--share-ann-text);
  border-color: var(--share-ann-text-secondary);
}
.share-ann-item-actions button.primary {
  background: var(--share-ann-primary);
  color: var(--share-ann-inverse);
  border-color: var(--share-ann-primary);
}
.share-ann-item-actions button.primary:hover { background: var(--share-ann-primary-hover); }
.share-ann-item-actions button.danger:hover {
  background: rgba(243, 56, 59, 0.08);
  color: var(--share-ann-error);
  border-color: rgba(243, 56, 59, 0.5);
}

/* ---- Inline reply composer (inside annotation card) ------------------- */

.share-ann-reply-composer {
  margin-top: 10px;
  display: none;
  gap: 6px;
}
.share-ann-reply-composer.open { display: flex; }
.share-ann-reply-composer input {
  flex: 1 1 auto;
  min-width: 0;
  border: 1px solid var(--share-ann-border);
  background: var(--share-ann-surface);
  border-radius: 999px;
  padding: 8px 14px;
  font: 13px/1.4 var(--share-ann-font-body);
  color: var(--share-ann-text);
  outline: none;
}
.share-ann-reply-composer input::placeholder { color: var(--share-ann-text-placeholder); }
.share-ann-reply-composer input:focus { border-color: var(--share-ann-primary); }
.share-ann-reply-composer button {
  flex-shrink: 0;
  appearance: none;
  border: 0;
  cursor: pointer;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--share-ann-primary);
  color: var(--share-ann-inverse);
  font: 600 13px/1 var(--share-ann-font-body);
}
.share-ann-reply-composer button:hover { background: var(--share-ann-primary-hover); }

/* ---- Pin (number marker on the page) ---------------------------------- */

.share-ann-pin {
  position: absolute;
  transform: translate(-50%, -50%);
  z-index: 2147483599;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: var(--share-ann-primary);
  color: var(--share-ann-inverse);
  border: 2px solid var(--share-ann-inverse);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  font-family: var(--share-ann-font-mono);
  font-size: 12px;
  font-weight: 700;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: transform 0.14s ease;
  padding: 0;
}
.share-ann-pin:hover { transform: translate(-50%, -50%) scale(1.12); }
.share-ann-pin.resolved { background: var(--share-ann-resolved); }

/* ---- Annotate button + mode menu ------------------------------------- */

.share-ann-annotate-wrap {
  position: relative;
  display: inline-flex;
}
#share-ann-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
#share-ann-toggle .share-ann-toggle-mode {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--share-ann-surface-dim);
  font-family: var(--share-ann-font-mono);
  font-size: 10px;
  font-weight: 700;
  color: var(--share-ann-text-secondary);
  text-transform: lowercase;
  letter-spacing: 0.03em;
}
#share-ann-toggle.active .share-ann-toggle-mode {
  background: rgba(255, 255, 255, 0.18);
  color: var(--share-ann-inverse);
}
#share-ann-toggle .share-ann-toggle-caret {
  font-size: 9px;
  opacity: 0.5;
  margin-left: -2px;
}

.share-ann-mode-menu {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  min-width: 240px;
  max-width: calc(100vw - 24px);
  background: var(--share-ann-surface);
  border: 1px solid var(--share-ann-border);
  border-radius: 18px;
  box-shadow: var(--share-ann-shadow-elev);
  padding: 6px;
  z-index: 2147483602;
  display: none;
  flex-direction: column;
  gap: 2px;
}
.share-ann-mode-menu.open { display: flex; }
.share-ann-mode-menu[hidden] { display: none; }
.share-ann-mode-menu button {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--share-ann-text);
  cursor: pointer;
  text-align: left;
  font: 500 13px/1.3 var(--share-ann-font-body);
}
.share-ann-mode-menu button:hover { background: var(--share-ann-surface-dim); }
.share-ann-mode-menu button.current {
  background: var(--share-ann-accent-soft);
  color: var(--share-ann-text);
}
.share-ann-mode-menu .share-ann-mode-icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--share-ann-surface-dim);
  font-family: var(--share-ann-font-mono);
  font-size: 14px;
  font-weight: 700;
  color: var(--share-ann-text);
}
.share-ann-mode-menu button.current .share-ann-mode-icon {
  background: var(--share-ann-primary);
  color: var(--share-ann-inverse);
}
.share-ann-mode-menu .share-ann-mode-text {
  display: flex;
  flex-direction: column;
}
.share-ann-mode-menu .share-ann-mode-text strong {
  font-size: 13px;
  font-weight: 600;
}
.share-ann-mode-menu .share-ann-mode-text small {
  font-size: 11px;
  color: var(--share-ann-text-secondary);
  font-weight: 400;
}

/* Component-mode outline (overrides the thin text outline so the whole
 * component is unambiguously highlighted on hover). */
body.share-ann-mode-component .share-ann-target {
  outline: 2.5px solid var(--share-ann-primary);
  outline-offset: 3px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.02);
}

/* Text-mode outline — thinner, more like a precise text selection. */
body.share-ann-mode * { cursor: crosshair; }
body.share-ann-mode-text .share-ann-target {
  outline: 2px solid var(--share-ann-primary);
  outline-offset: 2px;
  border-radius: 6px;
}
.share-ann-target {
  outline: 2px solid var(--share-ann-primary);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ---- Toast (transient) ------------------------------------------------ */

.share-ann-toast {
  position: fixed;
  left: 50%;
  bottom: 96px;
  transform: translateX(-50%);
  background: var(--share-ann-text);
  color: var(--share-ann-inverse);
  padding: 10px 18px;
  border-radius: 999px;
  font: 500 13px/1.4 var(--share-ann-font-body);
  z-index: 2147483640;
  display: none;
  box-shadow: var(--share-ann-shadow-card);
  max-width: calc(100vw - 40px);
}
.share-ann-toast.show { display: block; }

/* ---- New-annotation composer (modal-like) ----------------------------- */

.share-ann-composer {
  position: fixed;
  left: 50%;
  bottom: 96px;
  transform: translateX(-50%);
  width: min(440px, calc(100vw - 40px));
  max-width: calc(100vw - 40px);
  background: var(--share-ann-surface);
  border: 1px solid var(--share-ann-border);
  border-radius: 22px;
  padding: 16px;
  box-shadow: var(--share-ann-shadow-elev);
  z-index: 2147483641;
  display: none;
  box-sizing: border-box;
}
.share-ann-composer.open { display: block; }

.share-ann-composer .share-ann-composer-quote {
  font: 12px/1.45 var(--share-ann-font-body);
  color: var(--share-ann-text-secondary);
  background: var(--share-ann-surface-dim);
  padding: 8px 12px;
  border-radius: 10px;
  margin-bottom: 10px;
  max-height: 120px;
  overflow-y: auto;
  word-break: break-word;
  /* Subtle scrollbar styling so it looks intentional, not "broken" */
  scrollbar-width: thin;
  scrollbar-color: var(--share-ann-border) transparent;
}
.share-ann-composer .share-ann-composer-quote::-webkit-scrollbar { width: 6px; }
.share-ann-composer .share-ann-composer-quote::-webkit-scrollbar-thumb {
  background: var(--share-ann-border);
  border-radius: 999px;
}
.share-ann-composer textarea {
  width: 100%;
  min-height: 90px;
  border: 1px solid var(--share-ann-border);
  background: var(--share-ann-surface);
  border-radius: 14px;
  padding: 10px 12px;
  font: 14px/1.5 var(--share-ann-font-body);
  color: var(--share-ann-text);
  resize: vertical;
  outline: none;
  box-sizing: border-box;
}
.share-ann-composer textarea::placeholder { color: var(--share-ann-text-placeholder); }
.share-ann-composer textarea:focus { border-color: var(--share-ann-primary); }

.share-ann-composer .share-ann-composer-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 10px;
}
.share-ann-composer button {
  appearance: none;
  cursor: pointer;
  padding: 8px 18px;
  border-radius: 999px;
  border: 1px solid var(--share-ann-border);
  background: var(--share-ann-surface);
  font: 600 13px/1 var(--share-ann-font-body);
  color: var(--share-ann-text-secondary);
}
.share-ann-composer button:hover {
  background: var(--share-ann-surface-dim);
  color: var(--share-ann-text);
}
.share-ann-composer button.primary {
  background: var(--share-ann-primary);
  color: var(--share-ann-inverse);
  border-color: var(--share-ann-primary);
}
.share-ann-composer button.primary:hover { background: var(--share-ann-primary-hover); }
.share-ann-composer button[disabled] {
  background: var(--share-ann-text-disabled);
  color: var(--share-ann-inverse);
  border-color: var(--share-ann-text-disabled);
  cursor: wait;
}

/* =====================================================================
 *  MOBILE: bottom-sheet layout, larger tap targets, no auto-zoom inputs,
 *  no useless crosshair, keyboard-aware composer.
 *  Trigger: viewport <= 700px OR a touch-primary device.
 * ===================================================================== */

@media (max-width: 700px), (pointer: coarse), (hover: none) {
  /* Drop the global cursor:crosshair — meaningless on touch and expensive. */
  body.share-ann-mode * { cursor: auto !important; }

  /* Toolbar: compact centered pill at bottom (NOT edge-to-edge — Kenneth 2026-05-20). */
  .share-ann-toolbar {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    bottom: max(8px, env(safe-area-inset-bottom));
    padding-bottom: max(6px, env(safe-area-inset-bottom));
    width: auto;
    max-width: calc(100vw - 24px);
    justify-content: center;
    gap: 4px;
  }
  /* Note: mobile button sizing now handled by the icon-toolbar block near
   * the bottom of this file (search "Mobile app-style icon toolbar"). The
   * legacy padding/min-height rule was removed 2026-05-20 to stop fighting
   * with the icon-only layout. */
  .share-ann-toolbar .share-ann-count {
    min-height: 28px;
    display: inline-flex;
    align-items: center;
  }
  /* The "me" email is noise on mobile — kill it, the panel header already shows it. */
  .share-ann-toolbar .share-ann-me { display: none; }

  /* Side panel becomes a bottom sheet (~85vh tall). */
  .share-ann-panel {
    left: 0;
    right: 0;
    top: auto;
    bottom: 0;
    width: 100%;
    max-width: 100%;
    max-height: 88vh;
    border-radius: 24px 24px 0 0;
    /* Push above toolbar + safe area */
    padding-bottom: calc(72px + env(safe-area-inset-bottom));
  }
  .share-ann-panel header {
    padding: 14px 16px;
    /* Drag handle hint */
    position: relative;
  }
  .share-ann-panel header::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 6px;
    transform: translateX(-50%);
    width: 36px;
    height: 4px;
    border-radius: 999px;
    background: var(--share-ann-border);
  }
  .share-ann-panel header h3 { margin-top: 6px; }
  .share-ann-panel header button {
    min-width: 40px;
    min-height: 36px;
    padding: 8px 12px;
    font-size: 13px;
  }

  /* New-annotation composer: full-width sheet docked to bottom, keyboard-aware. */
  .share-ann-composer {
    left: 0;
    right: 0;
    bottom: 0;
    transform: none;
    width: 100%;
    max-width: 100%;
    border-radius: 20px 20px 0 0;
    padding: 16px 16px calc(16px + env(safe-area-inset-bottom));
    box-shadow: 0 -16px 40px rgba(13, 28, 36, 0.18);
  }
  .share-ann-composer textarea {
    font-size: 16px; /* >=16px stops iOS auto-zoom on focus */
    min-height: 100px;
  }
  .share-ann-composer .share-ann-composer-quote {
    max-height: 30vh; /* generous on tall phones */
    font-size: 13px;
  }
  .share-ann-composer button {
    min-height: 44px;
    padding: 10px 20px;
    font-size: 14px;
  }
  .share-ann-composer .share-ann-composer-actions {
    margin-top: 12px;
  }

  /* Annotation card and reply composer: 16px input, bigger tap targets. */
  .share-ann-item { padding: 16px; margin: 8px 4px; border-radius: 16px; }
  .share-ann-item-actions { gap: 8px; }
  .share-ann-item-actions button {
    min-height: 38px;
    padding: 8px 14px;
    font-size: 13px;
  }
  .share-ann-reply-composer { gap: 8px; flex-wrap: wrap; }
  .share-ann-reply-composer input {
    font-size: 16px; /* anti-zoom */
    padding: 10px 16px;
    min-height: 42px;
    flex: 1 1 100%;
  }
  .share-ann-reply-composer button {
    min-height: 42px;
    padding: 10px 20px;
    font-size: 14px;
    flex: 0 0 auto;
  }
  .share-ann-reply { padding: 10px 12px; }
  .share-ann-reply .share-ann-reply-del {
    /* Bigger tap target on touch */
    min-width: 32px;
    min-height: 32px;
    font-size: 18px;
    top: 4px;
    right: 6px;
  }

  /* Pins: 36px minimum tap target on touch. */
  .share-ann-pin {
    width: 36px;
    height: 36px;
    font-size: 13px;
  }

  /* Toast: stays clear of the toolbar at the bottom. */
  .share-ann-toast {
    bottom: calc(72px + env(safe-area-inset-bottom));
    max-width: calc(100vw - 24px);
    font-size: 14px;
  }
}

/* When the new-annotation composer is open on mobile, lock body scroll
 * (prevents the page scrolling under the sheet while the keyboard is up). */
body.share-ann-composer-locked {
  overflow: hidden;
  position: fixed;
  width: 100%;
}

/* =====================================================================
 *  TOUCH FALLBACK: belt-and-suspenders for browsers where the media
 *  queries above don't fire (Samsung Internet desktop-site toggle, some
 *  Android WebView builds report `pointer: fine` even on touch screens).
 *  annotations.js adds `body.share-ann-touch` when ontouchstart or
 *  maxTouchPoints > 0 is detected, OR matchMedia('(pointer:coarse)')
 *  matches at runtime. Duplicates the mobile block by class selector so
 *  these devices still get the correct layout.
 * ===================================================================== */

body.share-ann-touch.share-ann-mode * { cursor: auto !important; }

body.share-ann-touch .share-ann-toolbar {
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  bottom: max(8px, env(safe-area-inset-bottom));
  padding-bottom: max(6px, env(safe-area-inset-bottom));
  width: auto;
  max-width: calc(100vw - 24px);
  justify-content: center;
  gap: 4px;
}
body.share-ann-touch .share-ann-toolbar .share-ann-count {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
}
body.share-ann-touch .share-ann-toolbar .share-ann-me { display: none; }

body.share-ann-touch .share-ann-panel {
  left: 0;
  right: 0;
  top: auto;
  bottom: 0;
  width: 100%;
  max-width: 100%;
  max-height: 88vh;
  border-radius: 24px 24px 0 0;
  padding-bottom: calc(72px + env(safe-area-inset-bottom));
}
body.share-ann-touch .share-ann-panel header { padding: 14px 16px; position: relative; }
body.share-ann-touch .share-ann-panel header::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 6px;
  transform: translateX(-50%);
  width: 36px;
  height: 4px;
  border-radius: 999px;
  background: var(--share-ann-border);
}
body.share-ann-touch .share-ann-panel header h3 { margin-top: 6px; }
body.share-ann-touch .share-ann-panel header button {
  min-width: 40px;
  min-height: 36px;
  padding: 8px 12px;
  font-size: 13px;
}

body.share-ann-touch .share-ann-composer {
  left: 0;
  right: 0;
  bottom: 0;
  transform: none;
  width: 100%;
  max-width: 100%;
  border-radius: 20px 20px 0 0;
  padding: 16px 16px calc(16px + env(safe-area-inset-bottom));
  box-shadow: 0 -16px 40px rgba(13, 28, 36, 0.18);
}
body.share-ann-touch .share-ann-composer textarea {
  font-size: 16px;
  min-height: 100px;
}
body.share-ann-touch .share-ann-composer .share-ann-composer-quote {
  max-height: 30vh;
  font-size: 13px;
}
body.share-ann-touch .share-ann-composer button {
  min-height: 44px;
  padding: 10px 20px;
  font-size: 14px;
}
body.share-ann-touch .share-ann-composer .share-ann-composer-actions {
  margin-top: 12px;
}

body.share-ann-touch .share-ann-item { padding: 16px; margin: 8px 4px; border-radius: 16px; }
body.share-ann-touch .share-ann-item-actions { gap: 8px; }
body.share-ann-touch .share-ann-item-actions button {
  min-height: 38px;
  padding: 8px 14px;
  font-size: 13px;
}
body.share-ann-touch .share-ann-reply-composer { gap: 8px; flex-wrap: wrap; }
body.share-ann-touch .share-ann-reply-composer input {
  font-size: 16px;
  padding: 10px 16px;
  min-height: 42px;
  flex: 1 1 100%;
}
body.share-ann-touch .share-ann-reply-composer button {
  min-height: 42px;
  padding: 10px 20px;
  font-size: 14px;
  flex: 0 0 auto;
}
body.share-ann-touch .share-ann-reply { padding: 10px 12px; }
body.share-ann-touch .share-ann-reply .share-ann-reply-del {
  min-width: 32px;
  min-height: 32px;
  font-size: 18px;
  top: 4px;
  right: 6px;
}

body.share-ann-touch .share-ann-pin {
  width: 36px;
  height: 36px;
  font-size: 13px;
}

body.share-ann-touch .share-ann-toast {
  bottom: calc(72px + env(safe-area-inset-bottom));
  max-width: calc(100vw - 24px);
  font-size: 14px;
}

/* ---- Identity popover (hover/tap email pill) -------------------------- */

.share-ann-idpop {
  position: fixed;
  z-index: 2147483646;
  width: 320px;
  max-width: calc(100vw - 24px);
  /* Never grow taller than the viewport. Header + footer of popover stay
   * pinned; middle (wallet section) scrolls if needed. */
  max-height: calc(100vh - 40px);
  background: var(--share-ann-bg, #fff);
  color: var(--share-ann-text, #111);
  border: 1px solid var(--share-ann-border, #e5e7eb);
  border-radius: 14px;
  box-shadow: 0 10px 32px rgba(0,0,0,0.12), 0 2px 6px rgba(0,0,0,0.06);
  font-family: var(--share-ann-font, system-ui, -apple-system, sans-serif);
  font-size: 13px;
  line-height: 1.45;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  animation: shareAnnIdpopIn 0.16s ease-out;
  box-sizing: border-box;
}

/* Mobile / touch: popover transforms into a bottom-sheet so it never
 * overflows the viewport and is always reachable with one thumb. JS
 * still calls positionIdentityPopover() but CSS !important wins. */
@media (max-width: 700px), (pointer: coarse), (hover: none) {
  .share-ann-idpop {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: 80vh !important;
    border-radius: 16px 16px 0 0 !important;
    padding-bottom: env(safe-area-inset-bottom) !important;
    animation: shareAnnIdpopSlideUp 0.2s ease-out !important;
  }
}
body.share-ann-touch .share-ann-idpop {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  top: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  max-height: 80vh !important;
  border-radius: 16px 16px 0 0 !important;
  padding-bottom: env(safe-area-inset-bottom) !important;
  animation: shareAnnIdpopSlideUp 0.2s ease-out !important;
}
@keyframes shareAnnIdpopSlideUp {
  from { opacity: 0; transform: translateY(100%); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes shareAnnIdpopIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.share-ann-idpop-section {
  padding: 12px 14px;
}
.share-ann-idpop-section + .share-ann-idpop-section {
  border-top: 1px solid var(--share-ann-border, #e5e7eb);
}

.share-ann-idpop-label {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  color: var(--share-ann-text-secondary, #6b7280);
  margin-bottom: 6px;
}

.share-ann-idpop-email {
  font-family: var(--share-ann-font-mono, ui-monospace, monospace);
  font-size: 13px;
  color: var(--share-ann-text, #111);
  word-break: break-all;
}
.share-ann-idpop-sub {
  margin-top: 6px;
  font-size: 11px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.share-ann-idpop-sub code,
.share-ann-idpop-addr code {
  font-family: var(--share-ann-font-mono, ui-monospace, monospace);
  font-size: 11.5px;
  background: var(--share-ann-bg-subtle, rgba(0,0,0,0.05));
  padding: 2px 6px;
  border-radius: 4px;
  color: var(--share-ann-text, #111);
}

.share-ann-idpop-muted {
  color: var(--share-ann-text-secondary, #6b7280);
  font-size: 12px;
}

.share-ann-idpop-wallet-undeployed {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.share-ann-idpop-deploy {
  appearance: none;
  background: var(--share-ann-accent, #111);
  color: var(--share-ann-accent-fg, #fff);
  border: 0;
  border-radius: 8px;
  padding: 9px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s ease;
}
.share-ann-idpop-deploy:hover:not(:disabled) { opacity: 0.9; }
.share-ann-idpop-deploy:disabled { opacity: 0.55; cursor: default; }

.share-ann-idpop-wallet-deployed {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.share-ann-idpop-addr {
  display: flex;
  align-items: center;
  gap: 6px;
}
.share-ann-idpop-copy {
  appearance: none;
  background: transparent;
  border: 1px solid var(--share-ann-border, #e5e7eb);
  color: var(--share-ann-text-secondary, #6b7280);
  border-radius: 6px;
  width: 26px;
  height: 26px;
  cursor: pointer;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.share-ann-idpop-copy:hover {
  background: var(--share-ann-bg-subtle, rgba(0,0,0,0.05));
  color: var(--share-ann-text, #111);
}
.share-ann-idpop-balance {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-height: 22px;
  position: relative;
}
.share-ann-idpop-balance-val {
  font-family: var(--share-ann-font-mono, ui-monospace, monospace);
  font-size: 18px;
  font-weight: 600;
  color: var(--share-ann-text, #111);
}
.share-ann-idpop-balance-sym {
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--share-ann-text-secondary, #6b7280);
  font-weight: 600;
}

/* MOCA balance hover/tap reveal for reference USDC/ETH balances. */
.share-ann-idpop-balance-refs-toggle {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--share-ann-text-secondary, #6b7280);
  font-size: 12px;
  line-height: 1;
  padding: 2px 4px;
  margin-left: 2px;
  cursor: pointer;
  border-radius: 6px;
}
.share-ann-idpop-balance-refs-toggle:hover { background: rgba(0,0,0,0.06); color: var(--share-ann-text, #111); }
.share-ann-idpop-balance-refs {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 10;
  background: #fffaf2;
  border: 1px solid #e6ded2;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(24,19,13,.14);
  padding: 8px 10px;
  display: none;
  flex-direction: column;
  gap: 4px;
  min-width: 160px;
  font-family: var(--share-ann-font, ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif);
}
/* Show on hover (desktop) or when explicitly opened (touch). */
.share-ann-idpop-balance.has-refs:hover .share-ann-idpop-balance-refs,
.share-ann-idpop-balance.refs-open .share-ann-idpop-balance-refs {
  display: flex;
}
.share-ann-idpop-balance-refs-label {
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #a79f92;
  font-weight: 600;
  margin-bottom: 2px;
}
.share-ann-idpop-balance-ref {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #11100d;
  white-space: nowrap;
}
.share-ann-idpop-balance-ref img {
  border-radius: 50%;
  border: 1px solid #e6ded2;
  background: #fff;
  flex: 0 0 auto;
}
.share-ann-idpop-balance-ref-amt {
  font-family: var(--share-ann-font-mono, ui-monospace, monospace);
  font-weight: 600;
}
.share-ann-idpop-balance-ref-sym {
  font-size: 11px;
  color: #716a60;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.share-ann-idpop-actions { padding: 10px 14px; }
.share-ann-idpop-logout {
  appearance: none;
  background: transparent;
  color: var(--share-ann-danger, #b00020);
  border: 1px solid var(--share-ann-border, #e5e7eb);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  width: 100%;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.share-ann-idpop-logout:hover:not(:disabled) {
  background: rgba(176, 0, 32, 0.06);
  border-color: rgba(176, 0, 32, 0.4);
}
.share-ann-idpop-logout:disabled { opacity: 0.6; cursor: default; }

/* ── Wallet balance → spend on air.shop link ────────────────────────────── */
.share-ann-idpop-spend {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
  font-size: 12px;
  font-weight: 500;
  color: var(--share-ann-text, #111827);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(17, 24, 39, 0.35);
  opacity: 0.85;
  transition: opacity 0.15s ease, text-decoration-color 0.15s ease, color 0.15s ease;
  width: fit-content;
  -webkit-tap-highlight-color: transparent;
}
.share-ann-idpop-spend:hover {
  opacity: 1;
  text-decoration-color: currentColor;
}
.share-ann-idpop-spend span { font-size: 11px; opacity: 0.7; }

/* ── Floating WhatsApp CCO button (fixed bottom-left) ───────────────────── */
.share-ann-wa-fab {
  position: fixed;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  left: 16px;
  top: auto;
  right: auto;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #25D366;
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px rgba(37, 211, 102, 0.35), 0 2px 6px rgba(0, 0, 0, 0.12);
  z-index: 2147483645;
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
  -webkit-tap-highlight-color: transparent;
  animation: shareAnnWaPulse 2.4s ease-out 1.2s 3;
}
.share-ann-wa-fab:hover {
  background: #1ebc5c;
  transform: scale(1.06);
  box-shadow: 0 8px 24px rgba(37, 211, 102, 0.45), 0 3px 8px rgba(0, 0, 0, 0.15);
}
.share-ann-wa-fab:active { transform: scale(0.96); }
.share-ann-wa-fab svg { display: block; }

@keyframes shareAnnWaPulse {
  0%   { box-shadow: 0 6px 18px rgba(37, 211, 102, 0.35), 0 0 0 0   rgba(37, 211, 102, 0.55); }
  70%  { box-shadow: 0 6px 18px rgba(37, 211, 102, 0.35), 0 0 0 16px rgba(37, 211, 102, 0); }
  100% { box-shadow: 0 6px 18px rgba(37, 211, 102, 0.35), 0 0 0 0   rgba(37, 211, 102, 0); }
}

@media (max-width: 700px), (pointer: coarse), (hover: none) {
  .share-ann-wa-fab {
    width: 48px;
    height: 48px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    left: 12px;
  }
  .share-ann-wa-fab svg { width: 24px; height: 24px; }
}
body.share-ann-touch .share-ann-wa-fab {
  width: 48px !important;
  height: 48px !important;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
  left: 12px !important;
  top: auto !important;
  right: auto !important;
}

.share-ann-idpop-spinner {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 2px solid var(--share-ann-border, #e5e7eb);
  border-top-color: var(--share-ann-text-secondary, #6b7280);
  border-radius: 50%;
  animation: shareAnnIdpopSpin 0.7s linear infinite;
  vertical-align: -2px;
  margin-right: 6px;
}
@keyframes shareAnnIdpopSpin {
  to { transform: rotate(360deg); }
}

/* On touch / mobile, hide the toolbar email pill entirely — it would push
 * the toolbar to two rows. Account access on mobile is via the comments
 * panel header instead (wired in annotations.js). */

.share-ann-idpop-chain {
  font-size: 11px;
  color: var(--share-ann-text-secondary, #6b7280);
  margin-left: 2px;
  font-weight: 400;
}
.share-ann-idpop-usd {
  font-size: 12px;
  color: var(--share-ann-text-secondary, #6b7280);
  font-family: var(--share-ann-font-mono, ui-monospace, monospace);
  margin-top: -2px;
}

.share-ann-idpop-wallet-links {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}
.share-ann-idpop-link {
  appearance: none;
  flex: 1;
  background: var(--share-ann-bg-subtle, rgba(0,0,0,0.04));
  color: var(--share-ann-text, #111);
  border: 1px solid var(--share-ann-border, #e5e7eb);
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease;
}
.share-ann-idpop-link:hover {
  background: var(--share-ann-bg, #fff);
  border-color: var(--share-ann-text-secondary, #6b7280);
}

.share-ann-idpop-retry {
  display: inline-block;
  margin-left: 4px;
  color: var(--share-ann-text, #111);
  text-decoration: underline;
  font-weight: 600;
}

.share-ann-idpop-link:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  background: var(--share-ann-bg-subtle, rgba(0,0,0,0.03));
}
.share-ann-idpop-link:disabled:hover {
  background: var(--share-ann-bg-subtle, rgba(0,0,0,0.03));
  border-color: var(--share-ann-border, #e5e7eb);
}
.share-ann-idpop-note {
  margin-top: 8px;
  font-size: 11px;
  color: var(--share-ann-text-secondary, #6b7280);
  font-style: italic;
  line-height: 1.4;
}

/* Account button in the comments-panel header — small avatar pill with
 * the user's initial. Primary trigger for the identity popover on mobile,
 * supplementary on desktop. */
.share-ann-actions .share-ann-account-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  padding: 0;
  font-size: 12px;
  font-weight: 600;
  background: var(--share-ann-bg-subtle, rgba(0,0,0,0.05));
  color: var(--share-ann-text, #111);
  border: 1px solid var(--share-ann-border, #e5e7eb);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.share-ann-actions .share-ann-account-btn:hover {
  background: var(--share-ann-bg, #fff);
  border-color: var(--share-ann-text-secondary, #6b7280);
}

/* Slightly more compact wallet-section padding on mobile so the popover
 * fits even tall content (address + balance + USD + 3 buttons) without
 * forcing scroll on most phones. */
@media (max-width: 700px), (pointer: coarse), (hover: none) {
  .share-ann-idpop-section {
    padding: 10px 14px;
  }
  .share-ann-idpop-wallet-links {
    margin-top: 10px;
  }
  .share-ann-idpop-link {
    padding: 10px 8px;  /* taller tap target on mobile */
    font-size: 13px;
  }
}

/* ---- Toolbar redesign 2026-05-20 (icon Annotate + always-visible account) - */

/* Icon-only Annotate button (saves ~115px of toolbar width). The dropdown
 * still exists; the caret hints at it. State.annKind drives which icon. */
#share-ann-toggle.share-ann-icon-btn {
  padding: 6px 8px;
  gap: 2px;
  font-size: 14px;
  min-width: 36px;
  justify-content: center;
}
#share-ann-toggle .share-ann-toggle-icon {
  font-size: 15px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 14px;
}
#share-ann-toggle.active .share-ann-toggle-icon {
  color: var(--share-ann-inverse, #fff);
}

/* ---- Toolbar redesign 2026-05-20 (icon-only on mobile, labelled on desk) - */
/* Three buttons in the persistent toolbar, all visually consistent:
 *   1. Annotate  — icon + label on desktop, icon-only on mobile (40×40)
 *   2. Comments  — icon + label on desktop, icon-only on mobile (40×40)
 *      + red-dot badge when state.items has any unresolved entries
 *   3. Account   — human-figure SVG icon, same 40×40 on mobile, 32×32 desk
 * Kenneth's call (2026-05-20): "make 3 buttons icons only like apps on
 * mobile phone with nice icons". Consistent shape, size, and alignment. */

/* SVG icon holder used by all three buttons */
.share-ann-btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  line-height: 0;     /* prevent baseline drift */
}
.share-ann-btn-icon svg { display: block; }

/* Account button — base (desktop) styling. 32×32 squared pill matching
 * the visual rhythm of the comments-bubble icon. */
/* Account button — matches the other two toolbar icons exactly:
 * transparent bg, no border, just the SVG icon. Hover lifts to a
 * subtle translucent-white wash like the annotate/comments buttons.
 * Kenneth 2026-05-20: "make it consistent with the other 2 icons". */
.share-ann-toolbar .share-ann-account-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 10px;
  border: none;
  background: transparent;
  color: var(--share-ann-text, #111);
  cursor: pointer;
  flex-shrink: 0;
  margin-left: 2px;
  transition: background 0.15s ease;
}
.share-ann-toolbar .share-ann-account-btn:hover,
.share-ann-toolbar .share-ann-account-btn:focus-visible {
  background: rgba(255, 255, 255, 0.45);
  outline: none;
}
.share-ann-toolbar #share-ann-me { display: inline-flex !important; }

/* Red-dot live-comments badge on the Comments button. Top-right corner. */
#share-ann-panel-toggle { position: relative; }
.share-ann-dot {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ef4444;
  box-shadow: 0 0 0 2px var(--share-ann-surface, #fff);
  pointer-events: none;
}
.share-ann-dot[hidden] { display: none; }

/* Red-dot new-transaction badge on the Account button. Same visual language
   as .share-ann-dot but targets the Account/wallet pill. Visible when txFeed
   has unseen entries; cleared the moment the wallet popover opens. */
#share-ann-me { position: relative; }
.share-ann-me-dot {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ef4444;
  box-shadow: 0 0 0 2px var(--share-ann-surface, #fff);
  pointer-events: none;
}
.share-ann-me-dot[hidden] { display: none; }

/* Comments icon visible on desktop only when not on touch. The label is
 * the primary affordance on desktop. */
@media (hover: hover) and (pointer: fine) and (min-width: 701px) {
  body:not(.share-ann-touch) #share-ann-panel-toggle .share-ann-btn-icon {
    display: none;
  }
}

/* ---- Mobile / touch: all three buttons become equal 40×40 icon tiles --- */

.share-ann-toolbar-mobile-icons {
  /* Single applied rule-set for the mobile-icon mode. Keyed via either
   * media query OR body.share-ann-touch (belt-and-suspenders — Samsung
   * browsers lie about pointer/hover). */
}
@media (max-width: 700px), (pointer: coarse), (hover: none) {
  .share-ann-toolbar {
    gap: 10px !important;
    padding: 10px 16px !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
  }
  /* All three buttons identical box */
  #share-ann-toggle.share-ann-icon-btn,
  #share-ann-panel-toggle,
  .share-ann-toolbar .share-ann-account-btn {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    box-sizing: border-box !important;
    line-height: 0 !important;
  }
  /* Hide every text label so only the SVG icon shows */
  #share-ann-toggle .share-ann-btn-label,
  #share-ann-toggle .share-ann-toggle-caret,
  #share-ann-panel-toggle .share-ann-btn-label,
  #share-ann-panel-toggle .share-ann-count {
    display: none !important;
  }
}
/* Same rules keyed on JS-applied class for browsers that lie about media. */
body.share-ann-touch .share-ann-toolbar {
  gap: 10px !important;
  padding: 10px 16px !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
}
body.share-ann-touch #share-ann-toggle.share-ann-icon-btn,
body.share-ann-touch #share-ann-panel-toggle,
body.share-ann-touch .share-ann-toolbar .share-ann-account-btn {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  box-sizing: border-box !important;
  line-height: 0 !important;
}
body.share-ann-touch #share-ann-toggle .share-ann-btn-label,
body.share-ann-touch #share-ann-toggle .share-ann-toggle-caret,
body.share-ann-touch #share-ann-panel-toggle .share-ann-btn-label,
body.share-ann-touch #share-ann-panel-toggle .share-ann-count {
  display: none !important;
}

/* ─── Global modal-suppression hook ──────────────────────────────────────
 * When any modal in the AIR/carnegie stack opens, it adds
 * `body.has-modal-open`. While that's present we hide the annotations
 * toolbar, side panel, all existing pins, and the WhatsApp CCO FAB —
 * they sit at z-index 2147483600+ and would otherwise bleed through
 * any modal (which lives at z-index 1200ish).
 *
 * Per R1: this is NOT "moving the dock" — the dock stays where it is,
 * we just don't paint it during a transient modal. The modal takes
 * over the foreground; on close, everything reappears identically.
 *
 * Also scroll-locks the body to prevent rubber-band bleed-through on
 * iOS Safari. Modals must additionally set `position: fixed; top:
 * -scrollY` on body for the iOS-safe variant (web-designer-modal does
 * this on open/restores on close).
 */
body.has-modal-open .share-ann-toolbar,
body.has-modal-open .share-ann-panel,
body.has-modal-open .share-ann-wa-fab,
body.has-modal-open .share-ann-pin-layer,
body.has-modal-open .share-ann-pin,
body.has-modal-open .share-ann-pin-anchor,
body.has-modal-open .share-ann-composer,
body.has-modal-open .share-ann-mode-menu { display: none !important; }
body.has-modal-open {
  overflow: hidden !important;
  touch-action: none;
  position: fixed;
  width: 100%;
}