/* Watchlist-specific styles (mobile-first) */

/* Container for multiple badges on a ticker row */
/* Badge container (unread chat / filing) */
.wl-badges {
  display: inline-flex;
  align-items: center;
  gap: 0.15em;              /* tighter gap so badges hug content */
  /* Remove auto push so badges sit shoulder-to-shoulder with quote cluster */
  margin-left: 0;
  flex-shrink: 0;
  flex-wrap: nowrap;
}

/* Base badge style */
/* Compact badge */
.wl-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.08em;                   /* ultra-compact internal gap */
  font-size: 0.7em;             /* slightly smaller font */
  line-height: 1.2;
  padding: 0.15em 0.3em;        /* adjusted padding */
  border-radius: 0.3em;         /* smaller radius */
  font-weight: 600;
  white-space: nowrap;
  max-width: none;
  overflow: hidden;
  text-overflow: clip;
  min-height: 1.35em;           /* maintained height */
  border: none;
  cursor: default;
}

.wl-badge span {
  display: inline-flex;
}

/* Variants */
.wl-badge--chat {
  background-color: var(--color-blue); /* provider blue */
  color: var(--color-text-strong);
}

.wl-badge--filing {
  background-color: var(--color-warning); /* unified amber */
  color: var(--color-text-inverse); /* strong contrast */
}

.wl-badge--mention {
  background-color: var(--color-mention);
  color: var(--color-text-inverse);
  cursor: default;
}

/* Hover accent to make them feel clickable without looking like buttons */
.watchlist-item:hover .wl-badge--chat {
  filter: brightness(1.05);
}
.watchlist-item:hover .wl-badge--filing {
  filter: brightness(1.05);
}
.watchlist-item:hover .wl-badge--mention {
  filter: brightness(1.08);
}

.wl-badge--mention:focus-visible {
  outline: 0.1rem solid rgba(var(--mention-rgb), 0.8);
  outline-offset: var(--outline-offset-0-06);
}

/* --------------------------------------------------
   Sidebar layout overrides (ultra-compact fit in 165px)
   -------------------------------------------------- */
/* Sidebar-specific item compression */
.watchlist-item--sidebar {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0;                                   /* collapse inter-item gap entirely */
  padding: 0;                               /* remove inner padding */
  /* Reserve space for the delete affordance so content never sits under it */
  padding-right: calc(var(--wl-delete-size) + var(--space-8));
  line-height: 1.3;
  /* Keep inline content on one visual line, but allow internal shrink */
  white-space: nowrap;
  overflow: visible;            /* allow delete affordance to be fully visible */
  min-height: 0;                /* allow height to fit content */
  min-width: 0;                 /* allow flex item to actually shrink */
  text-align: left;
  justify-content: flex-start;  /* pack content to left, no space distribution */
}

.watchlist-section .watchlist-sidebar-group .watchlist-item--sidebar { margin: 0; }

.watchlist-item--sidebar > span.font-semibold,
.watchlist-item--sidebar > span:first-child {
  /* Allow ticker to shrink and ellipsize rather than push content off-screen */
  flex: 0 1 auto;
  min-width: 0;
  max-width: 45%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--font-14);
  font-weight: 600;
  margin-right: 0;  /* fully flush against quote cluster */
}

/* Allow the link body to shrink without forcing overlap */
.watchlist-item--sidebar.w-full,
.watchlist-item--sidebar.flex-1 {
  min-width: 0; /* critical for flex shrink to avoid badge overflow */
}

.watchlist-item--sidebar .wlq-wrap {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);                     /* compact gap */
  font-size: var(--font-10);
  line-height: 1.2;
  flex: 1 1 auto;               /* shrink to fit within row */
  min-width: 0;                 /* enable shrink for inner content */
  padding: 0 var(--space-1) 0 0;/* tiny right pad */
  border-radius: var(--radius-xs);
  background: rgba(var(--white-rgb), 0.05);
  white-space: nowrap;           /* prevent internal wrap */
  margin-left: 0;                /* flush with ticker */
}

/* Badge size must be independent of parent's font-size:0 */
.watchlist-item--sidebar .wl-badge { font-size: 0.68rem; }

.watchlist-item--sidebar .wlq-price {
  font-weight: 600;
  font-size: var(--font-11);            /* 11px */
}
.watchlist-item--sidebar .wlq-change {
  font-weight: 600;
  font-size: var(--font-12);              /* 12px */
  text-align: center;
}
.watchlist-item--sidebar .wlq-bolt {
  display: inline-flex;
}

.watchlist-item-row .watchlist-delete-btn {
  width: var(--wl-delete-size);                  /* 18px */
  height: var(--wl-delete-size);
  font-size: var(--font-12);               /* 12px */
  opacity: 0;
  transition: opacity 0.15s ease;
}
.watchlist-item-row:hover .watchlist-delete-btn,
.watchlist-item-row:focus-within .watchlist-delete-btn {
  opacity: 1;
}

/* Group headers also get increased height for consistency */
.watchlist-section .watchlist-sidebar-group .group-header {
  padding: var(--space-5) var(--space-2); /* 10px 4px */
  line-height: 1.3;
  font-size: var(--font-13);   /* 13px */
}

/* Expand sizing on wide viewports */
@media (min-width: 81.25rem) { /* 1300px */
  .watchlist-section .watchlist-item--sidebar {
    padding: var(--space-3) var(--space-1-5);  /* 6px 3px */
    gap: var(--space-3); /* 3px */
    font-size: var(--font-14);   /* 14px */
    min-height: var(--space-16);                 /* 32px */
  }
  .watchlist-section .watchlist-item--sidebar .wlq-wrap {
    font-size: var(--font-11);   /* 11px */
    padding: var(--space-1-5) var(--space-2); /* 3px 4px */
  }
  .watchlist-item--sidebar > span.font-semibold,
  .watchlist-item--sidebar > span:first-child {
    font-size: var(--font-14);   /* 14px */
  }
  .watchlist-section .watchlist-sidebar-group .group-header {
    font-size: var(--font-14);   /* 14px */
  }
  .wl-badges { max-width: none; }
}

/* Intensity / direction classes (existing may exist elsewhere; keep lightweight here) */
[class*="wlchg-up-"], [class*="wlchg-down-"] { transition: color .25s ease, text-shadow .25s ease; }
.wlchg-up-0 { color: var(--success-100); }
.wlchg-up-1 { color: var(--success-200); }
.wlchg-up-2 { color: var(--success-300); }
.wlchg-up-3 { color: var(--success-400); }
.wlchg-up-4 { color: var(--success-500); text-shadow: var(--text-glow-green-xs); }
.wlchg-down-0 { color: var(--danger-100); }
.wlchg-down-1 { color: var(--danger-200); }
.wlchg-down-2 { color: var(--danger-300); }
.wlchg-down-3 { color: var(--danger-400); }
.wlchg-down-4 { color: var(--danger-500); text-shadow: var(--text-glow-red-xs); }

/* Volume bolt intensity (reuse color scheme subtle) */
.wlv-up-1, .wlv-up-2, .wlv-up-3, .wlv-up-4,
.wlv-down-1, .wlv-down-2, .wlv-down-3, .wlv-down-4 { width: var(--space-7); height: var(--space-7); }  /* 14px */
.wlq-bolt-icon { width: var(--space-7); height: var(--space-7); display: block; }  /* 14px */

/* Expand sizing on wide viewports */
@media (min-width: 81.25rem) { /* 1300px */
  .watchlist-section .watchlist-item:not(.watchlist-item--sidebar) { 
    padding: var(--space-3) var(--space-1-5);  /* 6px 3px */
    gap: var(--space-3); /* 3px */
    font-size: var(--font-14);   /* 14px */
    min-height: var(--space-16);                 /* 32px */
  }
  .watchlist-section .watchlist-item:not(.watchlist-item--sidebar) .wlq-wrap { 
    font-size: var(--font-11);   /* 11px */
    min-width: var(--space-19); /* 38px */
    max-width: var(--space-24);    /* 48px */
    padding: var(--space-1-5) var(--space-2); /* 3px 4px */
  }
  .wl-badges { max-width: none; }
  .watchlist-section .watchlist-item > span.font-semibold,
  .watchlist-section .watchlist-item > span:first-child {
    max-width: none; /* allow full ticker visibility on wide viewports */
    font-size: var(--font-14);   /* 14px */
  }
  .watchlist-section .watchlist-sidebar-group .group-header {
    font-size: var(--font-14);   /* 14px */
  }
}



/* ----------------------------------------------
   Watchlist block moved from components.css
   Purpose: isolate watchlist styles in a single module
   Visual: NO CHANGE (selectors and values preserved)
----------------------------------------------- */

/* Watchlist header dropdown */
#addToWatchlistMenu, .add-to-watchlist-menu { background: var(--color-bg-elevated); border: var(--border-1) solid var(--color-border); border-radius: var(--radius-md); box-shadow: 0 0.75rem 1.5rem rgba(var(--black-rgb), 0.5); }
#addToWatchlistMenu button, .add-to-watchlist-menu button { font-size: var(--font-13); }
/* Add To Watchlist menu responsive cap */
#addToWatchlistMenu, .add-to-watchlist-menu { max-width: min(94vw, var(--menu-max-w)); }
#addToWatchlistMenu button, .add-to-watchlist-menu button { white-space: normal; word-break: break-word; }

/* Watchlist (Sidebar & Page) */
.watchlist-section { padding-left: 0; padding-right: var(--space-1); }
.watchlist-sidebar-group { margin-left: 0; }
.empty-watchlist { text-align: center; padding: var(--space-10) 0; color: var(--color-text-subtle); font-size: var(--font-14); }
.watchlist-sidebar-group .group-header { padding: var(--space-4) var(--space-2); font-weight: 700; color: var(--color-accent); }
.watchlist-sidebar-group .watchlist-item { font-size: var(--font-14); padding: var(--space-4); margin: var(--space-1) 0 var(--space-1) var(--space-5); text-align: left; }
.watchlist-item { background: var(--color-surface); color: var(--color-text); border: var(--border-1) solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-5); text-align: center; font-weight: bold; cursor: pointer; transition: background 160ms ease, color 160ms ease, border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease; position: relative; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-left: 0; }
.watchlist-item:not(.watchlist-item--sidebar) > span.font-semibold { margin-right: var(--space-2); }
.watchlist-item:hover { background: var(--color-surface-hover); border-color: var(--color-accent); }
.watchlist-item.active { border: var(--space-1) solid var(--color-accent); box-shadow: 0 0 0.5rem -0.125rem rgba(var(--green-rgb), 0.6); padding: var(--space-4-5); }
/* After the generic .watchlist-item sets overflow:hidden, explicitly allow
  the compact sidebar variant to show the circular delete control. */
.watchlist-item.watchlist-item--sidebar { overflow: visible; }
.watchlist-delete-btn, .remove-watchlist-btn { position: absolute; top: 50%; right: var(--space-8); transform: translateY(-50%); background: var(--color-danger); color: var(--color-text-strong); border: none; border-radius: var(--radius-full); font-size: var(--font-12); cursor: pointer; opacity: 0; transition: opacity 160ms ease, transform 160ms ease; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; z-index: var(--z-dropdown); box-shadow: 0 0 0.375rem rgba(var(--black-rgb), 0.45); width: var(--wl-delete-size); height: var(--wl-delete-size); line-height: var(--wl-delete-size); min-width: var(--wl-delete-size); pointer-events: auto; }
.remove-watchlist-btn { width: var(--wl-delete-size); height: var(--wl-delete-size); line-height: var(--wl-delete-size); }
.watchlist-delete-btn:hover, .remove-watchlist-btn:hover { background: var(--color-danger-hover); transform: translateY(-50%) scale(1.1); }
.watchlist-item:hover .watchlist-delete-btn, .watchlist-sidebar-group .watchlist-item:hover .remove-watchlist-btn { opacity: 1; }
/* Ensure the delete button remains circular and fully visible over the ticker pill */
.watchlist-item-row { position: relative; overflow: visible; max-width: 100%; }
.watchlist-item--sidebar { overflow: visible; }
.watchlist-delete-btn::before { content: ""; position: absolute; inset: 0; border-radius: var(--radius-full); box-shadow: 0 0 0 0.0625rem rgba(var(--danger-strong-rgb, 217,45,32), 0.55) inset; pointer-events: none; }
/* Ensure anchor doesn't reclaim reserved space; padding is applied above. */
.watchlist-item-row > .watchlist-item--sidebar { padding-right: calc(var(--wl-delete-size) + var(--space-8)); }
.watchlist-item:not(.watchlist-item--sidebar) .wlq-wrap { display: inline-flex; align-items: center; gap: var(--space-1); margin-left: var(--space-1); font-size: var(--font-10); font-variant-numeric: tabular-nums; }
.watchlist-item .wlq-price,
.watchlist-item .wlq-change { font-variant-numeric: tabular-nums; }
.wlchg-up-0 { color: var(--success-100); }
.wlchg-up-1 { color: var(--success-200); font-weight: 500; }
.wlchg-up-2 { color: var(--success-300); font-weight: 600; }
.wlchg-up-3 { color: var(--success-400); font-weight: 700; }
.wlchg-up-4 { color: var(--success-500); font-weight: 700; text-shadow: var(--text-glow-green-xs); }
.wlchg-down-0 { color: var(--danger-100); }
.wlchg-down-1 { color: var(--danger-200); font-weight: 500; }
.wlchg-down-2 { color: var(--danger-300); font-weight: 600; }
.wlchg-down-3 { color: var(--danger-400); font-weight: 700; }
.wlchg-down-4 { color: var(--danger-500); font-weight: 700; text-shadow: var(--text-glow-red-xs); }
.wlq-bolt { display: inline-flex; align-items: center; margin-left: var(--space-2); }
.wlq-bolt-icon { width: var(--space-7-5); height: var(--space-10); stroke: currentColor; stroke-width: 1.1; transition: transform 0.25s ease, filter 0.35s ease; }
.wlq-bolt-icon polygon { vector-effect: non-scaling-stroke; }
.wlq-bolt:hover .wlq-bolt-icon { transform: translateY(-1px) scale(1.05); }
.wlv-up-1 .wlq-bolt-icon { filter: drop-shadow(0 0 0.125rem rgba(var(--green-lime-rgb), 0.25)); }
.wlv-up-2 .wlq-bolt-icon { filter: drop-shadow(0 0 0.1875rem rgba(var(--green-lime-rgb), 0.35)); }
.wlv-up-3 .wlq-bolt-icon { filter: drop-shadow(0 0 0.25rem rgba(var(--green-lime-rgb), 0.45)) drop-shadow(0 0 0.4375rem rgba(var(--green-lime-rgb), 0.25)); }
.wlv-up-4 .wlq-bolt-icon { filter: drop-shadow(0 0 0.375rem rgba(var(--green-lime-rgb), 0.55)) drop-shadow(0 0 0.75rem rgba(var(--green-lime-rgb), 0.45)); }
.wlv-down-1 .wlq-bolt-icon { filter: drop-shadow(0 0 0.125rem rgba(var(--red-61-rgb), 0.25)); }
.wlv-down-2 .wlq-bolt-icon { filter: drop-shadow(0 0 0.1875rem rgba(var(--red-61-rgb), 0.35)); }
.wlv-down-3 .wlq-bolt-icon { filter: drop-shadow(0 0 0.25rem rgba(var(--red-61-rgb), 0.45)) drop-shadow(0 0 0.4375rem rgba(var(--red-61-rgb), 0.25)); }
.wlv-down-4 .wlq-bolt-icon { filter: drop-shadow(0 0 0.375rem rgba(var(--red-61-rgb), 0.55)) drop-shadow(0 0 0.75rem rgba(var(--red-61-rgb), 0.45)); }
.wlq-bolt-anim { animation: wlBoltPulse 1.9s ease-in-out infinite; }
.watchlist-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--space-9) 0; color: var(--color-text-muted); gap: var(--space-5); }
.watchlist-loading .label { font-size: var(--font-12); color: var(--success-100); font-weight: 600; }
.watchlist-subgroup { background: var(--color-surface); border: var(--border-1) solid var(--color-border); border-radius: var(--radius-md); margin-bottom: var(--space-10); overflow: visible; }
.watchlist-subgroup-header { background: var(--color-bg-muted); padding: var(--space-6) var(--space-8); display: flex; justify-content: space-between; align-items: center; border-bottom: var(--border-1) solid var(--color-border); }
.watchlist-subgroup-title { color: var(--color-accent); font-weight: 600; font-size: var(--font-16); }
.watchlist-subgroup-actions { display: flex; gap: var(--space-4); }
.watchlist-subgroup-btn { background: var(--color-surface-hover); color: var(--color-text-strong); border: none; border-radius: var(--radius-xs); padding: var(--space-2) var(--space-4); font-size: var(--font-12); cursor: pointer; transition: background 160ms ease, color 160ms ease, transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease; }
.watchlist-subgroup-btn:hover { background: var(--color-surface-hover); }
.watchlist-subgroup-content { padding: var(--space-8); }
/* Flex-based table for manage screen */
.watchlist-flex { display: flex; flex-direction: column; width: 100%; }
.watchlist-flex-head { display: flex; align-items: center; gap: var(--space-4); background: var(--color-bg-muted); color: var(--color-accent); padding: var(--space-4) var(--space-6); font-size: var(--font-12); font-weight: 600; border-bottom: var(--border-1) solid var(--color-border); }
.watchlist-flex-row { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-6); border-bottom: var(--border-1) solid var(--color-border-strong); }
.watchlist-flex-row:hover { background: var(--color-border-strong); }
.wl-cell { min-width: 0; }
.wl-cell--stock { flex: 1 1 18rem; min-width: var(--table-col-min); }
.wl-cell--price { flex: 0 0 9rem; }
.wl-cell--range { flex: 0 0 11rem; }
.wl-cell--volume { flex: 0 0 10rem; }
.wl-cell--cap { flex: 0 0 10rem; }
.wl-cell--action { flex: 0 0 7rem; display: flex; justify-content: flex-end; }

/* Manage page: keep one ticker per row on mobile. Override the generic mobile table-stacking rule
   defined in components.css so the watchlist manage table remains a real table with horizontal
   scrolling if needed. This is scoped to the manage page only to avoid impacting other tables. */
@media (max-width: 47.99rem) {
  #watchlistPage .watchlist-subgroup-content { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  /* Mobile UX: stack Reorder beneath create subgroup to free space for input/suggestions */
  #watchlistPage #wlManageToolbar .flex { flex-wrap: wrap; gap: var(--space-3); align-items: stretch; }
  /* First row (left group) should take full width */
  #watchlistPage #wlManageToolbar .flex > .flex { flex: 1 1 100%; min-width: 0; }
  /* Let subgroup input expand, but keep Create button on same row */
  #watchlistPage #newSubgroupInput { width: auto; flex: 1 1 auto; min-width: 0; }
  /* Second row: place Reorder button below (keep natural width) */
  #watchlistPage #reorderBtn { flex: 0 0 auto; order: 2; }
  /* Keep Create Subgroup button intrinsic */
  #watchlistPage #createSubgroupBtn { flex: 0 0 auto; }
}
.watchlist-stock-name { color: var(--color-accent); font-weight: 600; }
.watchlist-stock-company { color: var(--success-100); font-size: var(--font-13); margin-top: var(--space-1); font-weight: 600; letter-spacing: var(--ls-xxxs); }
.watchlist-stock-company.wl-company-strong { color: var(--success-100); font-weight: 650; }
.watchlist-stock-price { font-weight: 600; }
.watchlist-stock-price.positive { color: var(--color-accent); }
.watchlist-stock-price.negative { color: var(--color-danger); }
.watchlist-stock-change { font-size: var(--font-12); margin-top: var(--space-1); }
.watchlist-stock-change.positive { color: var(--color-accent); }
.watchlist-stock-change.negative { color: var(--color-danger); }
.watchlist-stock-range { font-size: var(--font-12); color: var(--color-text-dim); }
.watchlist-stock-volume { font-size: var(--font-12); }
.watchlist-stock-volume-avg { color: var(--color-text-dim); font-size: var(--font-11); margin-top: var(--space-1); }
.watchlist-stock-marketcap { color: var(--color-text); }
.watchlist-remove-btn { background: var(--color-danger); color: var(--color-text-strong); border: none; border-radius: var(--radius-xs); padding: var(--space-2) var(--space-4); font-size: var(--font-12); cursor: pointer; transition: background 160ms ease, color 160ms ease, transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease; }
.watchlist-remove-btn:hover { background: var(--color-danger-hover); }
.watchlist-remove-btn[disabled] { opacity: 0.6; cursor: not-allowed; }
.watchlist-add-section { display: flex; gap: var(--space-4); align-items: center; margin-top: var(--space-8); padding-top: var(--space-8); border-top: var(--border-1) solid var(--color-border); position: relative; }
.watchlist-add-input { flex: 1; background: var(--color-bg-muted); border: var(--border-1) solid var(--color-border); border-radius: var(--radius-xs); padding: var(--space-4) var(--space-6); color: var(--color-text-strong); font-size: var(--font-14); }
.watchlist-add-input:focus { outline: none; border-color: var(--color-accent); }
.watchlist-add-btn { background: var(--color-accent); color: var(--color-text-inverse); border: none; border-radius: var(--radius-xs); padding: var(--space-4) var(--space-8); font-size: var(--font-14); font-weight: 600; cursor: pointer; transition: background 160ms ease, color 160ms ease, transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease; }
.watchlist-add-btn:hover { background: var(--color-accent-hover); }
.watchlist-suggestions { position: absolute; z-index: var(--z-popover); background: var(--color-bg-elevated); border: var(--border-1) solid var(--color-accent); border-radius: var(--radius-md); box-shadow: 0 0.75rem 1.5rem rgba(var(--black-rgb), 0.5); max-height: var(--menu-max-h); overflow-y: auto; overflow-x: hidden; scrollbar-width: auto; max-width: calc(100vw - 1.5rem); }
.watchlist-empty-group { text-align: center; color: var(--color-text-dim); padding: var(--space-20) var(--space-10); font-style: italic; }
.watchlist-unread-badge { position: absolute; top: var(--space-3); right: var(--space-14); background-color: var(--color-accent); color: var(--color-text-inverse); border-radius: var(--radius-full); font-size: var(--font-10); font-weight: bold; min-width: var(--space-9); height: var(--space-9); padding: 0 var(--space-2-5); display: inline-flex; align-items: center; justify-content: center; line-height: 1; }
.watchlist-unread-badge.mixed-badge { background: linear-gradient(135deg,var(--color-accent) 0%,var(--color-blue) 100%); color: var(--color-text-inverse); box-shadow: 0 0 0.375rem -0.0625rem rgba(var(--green-neon-rgb), 0.5), 0 0 0.375rem -0.0625rem rgba(var(--blue-azure-rgb), 0.6); }
/* DM conversation list: render unread badge inline on the right cell */
.dm-convo-unread { position: relative; display: inline-flex; min-width: var(--spinner); text-align: right; }
.dm-convo-unread .watchlist-unread-badge { position: static; right: auto; top: auto; }
.dm-convo-selected { border-color: var(--color-success); box-shadow: 0 0 0 2px rgba(var(--green-neon-rgb), 0.6); background-color: var(--color-bg); }
.dm-convo-selected:hover { border-color: var(--color-success-hover); }
/* Watchlist Drawer (mobile) */
@media (max-width: 47.99rem) {
  [data-drawer="watchlist"].open {
    display: block;
    position: fixed;
    /* Match right drawer's full-viewport behavior */
    inset: 0 auto 0 0; /* top 0, bottom 0, left 0; right auto */
    /* Align drawer sizing with content rather than nav drawer */
    --wl-drawer-base-width: clamp(var(--watchlist-drawer-min, 18rem), var(--watchlist-drawer-fluid, 72vw), var(--watchlist-drawer-max, 32rem));
    width: min(var(--watchlist-drawer-width, var(--wl-drawer-base-width)), 95vw);
    max-width: min(var(--watchlist-drawer-width, var(--wl-drawer-base-width)), 95vw);
    background: var(--color-bg);
    border-right: var(--border-1) solid var(--color-accent);
    z-index: var(--z-drawer);
    padding: var(--space-4);
    padding-top: calc(var(--space-4) + env(safe-area-inset-top));
    padding-bottom: calc(var(--space-4) + env(safe-area-inset-bottom));
    /* Ensure full-viewport height overriding layout max-height rules */
    height: 100dvh;
    height: 100svh;
    max-height: none;
    box-sizing: border-box;
    overflow-y: auto;
    overscroll-behavior: contain;
    touch-action: pan-y;
    scrollbar-gutter: stable;
  }
  /* Keep drawer sizing consistent; avoid font inflation that causes overflow */
  [data-drawer="watchlist"].open .watchlist-sidebar-group .group-header { font-size: var(--font-13); }
  [data-drawer="watchlist"].open .watchlist-sidebar-group .watchlist-item {
    font-size: var(--font-14);
    padding: var(--space-4);
    line-height: 1.3;
    display: flex;
    align-items: center;
    justify-content: flex-start; /* no wide gap in drawer */
    gap: 0;                      /* collapse inter-item gap */
    width: 100%;
    margin-left: 0;        /* remove sidebar indent */
    text-align: left;      /* override default center */
  }
  [data-drawer="watchlist"].open .watchlist-item .wlq-wrap {
    font-size: var(--font-10);
    margin-left: 0;                 /* flush with ticker on mobile drawer */
  }
  /* Restore pre-change behavior for drawer rows: one line, compact spacing */
  [data-drawer="watchlist"].open .watchlist-item--sidebar {
    white-space: normal;
    padding-right: var(--space-2);
    font-size: inherit;
    overflow: visible;
    position: relative;
    padding-right: calc(var(--space-8) + var(--wl-delete-size));
  }
  [data-drawer="watchlist"].open .watchlist-item--sidebar > .wls-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    min-width: auto;
    max-width: 100%;
    gap: var(--space-2);
  }
  [data-drawer="watchlist"].open .watchlist-item--sidebar > .wls-inner > .wlq-wrap,
  [data-drawer="watchlist"].open .watchlist-item--sidebar > .wls-inner > .wl-badges {
    flex: 0 1 auto;
    min-width: auto;
  }
  [data-drawer="watchlist"].open .watchlist-item--sidebar > .wls-inner > .font-semibold,
  [data-drawer="watchlist"].open .watchlist-item--sidebar > .font-semibold {
    font-size: var(--font-14);
    font-weight: 600;
    white-space: nowrap;
    overflow: visible;
    text-overflow: clip;
    flex: 0 0 auto;
    margin-right: 0;
  }
  /* Ensure any sidebar-specific constraints don't cap widths in the drawer */
  [data-drawer="watchlist"].open .watchlist-item--sidebar .wlq-wrap { min-width: 0; max-width: none; }
  [data-drawer="watchlist"].open .watchlist-item--sidebar .wl-badges {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--space-1);
  }
  /* If any other stylesheet hides the sidebar on mobile, force visibility while open */
  .watchlist-section[data-drawer="watchlist"].open { display: block; }
  .watchlist-item-row .watchlist-delete-btn {
    opacity: 1;
    position: absolute;
    right: var(--space-2);
    top: 50%;
    transform: translateY(-50%);
    width: 2.5rem;
    height: 2.5rem;
    min-width: 2.5rem;
    min-height: 2.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    background: rgba(0,0,0,0.25);
  }
  .watchlist-item-row .watchlist-delete-btn:active {
    transform: translateY(-50%) scale(0.95);
  }
/* Backdrop base handled globally via drawer.css using [data-drawer-backdrop] */
}
.watchlist-item--sidebar .wls-inner { display: flex; align-items: center; gap: var(--space-1); min-width: 0; max-width: 100%; }

/* Mobile: avoid sticky :hover highlighting on tap */
@media (hover: none) {
  .watchlist-item:hover { background: var(--color-surface); border-color: var(--color-border); }
}