/* app.css (modular entrypoint)
   This file now composes modular styles. Import order preserves original cascade.
   - utilities.css (variables, scrollbar, helpers)
   - typography.css (base body font/colors)
   - layout.css (page structure)
   - buttons.css (button primitives)
   - forms.css (form controls)
   - components.css (feature components)
*/
/*
  utilities.css
  Purpose: Reusable helper classes and cross-cutting globals (e.g., scrollbar theme, small utilities).
*/
/* Theme tokens */
:root { 
  /* Colors */
  --color-bg: #0a0a0a;                 /* app background */
  --color-bg-elevated: #0f0f0f;        /* elevated panels */
  --color-bg-muted: #1a1a1a;           /* muted headers/strips */
  --color-surface: #2d2d2d;            /* surfaces/cards */
  --color-surface-hover: #404040;      /* hover on surfaces */
  --color-border: #404040;             /* default border */
  --color-border-strong: #2a2a2a;      /* strong outline */
  --color-text: #e0e0e0;               /* primary text */
  --color-text-strong: #ffffff;        /* strong/white text */
  --color-text-muted: #cccccc;         /* muted text */
  --color-text-subtle: #aaaaaa;        /* subtle text */
  --color-text-dim: #999999;           /* dim text */
  --color-text-inverse: #000000;       /* on-accent text */

  --color-accent: #00ff99;             /* primary accent */
  --color-accent-hover: #00dd88;       /* accent hover */
  --green-rgb: 0,255,153;              /* keep RGB for glows */

  --color-danger: #ff4444;
  --color-danger-hover: #ff6666;
  --color-danger-deep: #cc3333;
  --color-danger-soft: #ff8b8b;        /* exact tint used for delete affordances */
  --danger-rgb: 227, 75, 75;

  --color-warning: #facc15;            /* unified amber */
  --warning-rgb: 250, 204, 21;

  --color-blue: #4285F4;               /* provider blue */
  --color-blue-hover: #357ae9;

  /* Google brand palette (for logo segments/buttons) */
  --google-blue: #4285F4;
  --google-green: #34A853;
  --google-yellow: #FBBC05;
  --google-red: #EA4335;

  /* Green token aliases (Phase 5 hygiene)
     Rationale: reduce palette fragmentation by aliasing variant greens to the
     primary accent green. If a distinct shade is needed later, reintroduce it
     with a semantic name. */
  --green-neon-rgb: var(--green-rgb);
  --green-emerald-rgb: var(--green-rgb);
  --green-spring-rgb: var(--green-rgb);
  --green-stroke-dark-rgb: var(--green-rgb);
  --green-forest-1-rgb: var(--green-rgb);
  --green-forest-2-rgb: var(--green-rgb);
  --green-forest-3-rgb: var(--green-rgb);
  --green-leaf-deep-rgb: var(--green-rgb);
  --green-forest-4-rgb: var(--green-rgb);

  /* Neutral bases */
  --black-rgb: 0, 0, 0;
  --white-rgb: 255, 255, 255;
  --dark-18-rgb: 18, 18, 18;
  --dark-10-rgb: 10, 10, 10;
  /* Aliases for legacy component gradients */
  --dark-18-26-22-rgb: var(--dark-18-rgb);
  --dark-12-18-16-rgb: var(--dark-10-rgb);
  --overlay-deep-rgb: 12, 20, 16;

  /* Brand and auxiliary accents */
  --blue-muted-rgb: 43, 98, 197;
  --blue-azure-rgb: 77, 166, 255;
  --danger-strong-rgb: 255, 82, 82;
  --danger-bright-rgb: 255, 68, 68;
  --danger-x-bright-rgb: 255, 34, 34;
  --orange-accent-rgb: 255, 102, 0;
  --red-61-rgb: 255, 61, 61;
  --danger-90-rgb: 255, 90, 90;        /* legacy danger tint used in modals */
  --mint-ice-rgb: 200, 255, 230;
  --mint-snow-rgb: 230, 255, 243;
  --mint-soft-rgb: 205, 255, 235;
  --mint-dim-rgb: 190, 230, 210;

  /* Mentions / badges */
  --color-mention: #a855f7;
  --mention-rgb: 168, 85, 247;

  /* Success/danger intensity steps (watchlist, indicators) */
  --success-100: #8dffd4;
  --success-200: #4dffc0;
  --success-300: #18f296;
  --success-400: #00d67f;
  --success-500: #00ff99;
  --danger-100: #ffb3b3;
  --danger-200: #ff9999;
  --danger-300: #ff7373;
  --danger-400: #ff5252;
  --danger-500: #ff3333;
  /* Common input backgrounds */
  --input-bg: #0d0d0d;
  --input-bg-focus: #101f16;
  /* Spacing scale (8px base) */
  --space-0: 0;
  --space-0-5: 0.0625rem;       /* 1px */
  --space-1: 0.125rem;           /* 2px */
  --space-1-5: 0.1875rem;        /* 3px */
  --space-2: 0.25rem;            /* 4px */
  --space-2-5: 0.3125rem;        /* 5px */
  --space-3: 0.375rem;           /* 6px */
  --space-4: 0.5rem;             /* 8px */
  --space-4-5: 0.5625rem;        /* 9px */
  --space-5: 0.625rem;           /* 10px */
  --space-5-5: 0.6875rem;        /* 11px */
  --space-6: 0.75rem;            /* 12px */
  --space-6-5: 0.8125rem;        /* 13px */
  --space-7: 0.875rem;           /* 14px */
  --space-7-5: 0.9375rem;        /* 15px */
  --space-8: 1rem;               /* 16px */
  --space-9: 1.125rem;           /* 18px */
  --space-10: 1.25rem;           /* 20px */
  --space-12: 1.5rem;            /* 24px */
  --space-14: 1.75rem;           /* 28px */
  --space-16: 2rem;              /* 32px */
  --space-18: 2.25rem;           /* 36px */
  --space-19: 2.375rem;          /* 38px */
  --space-20: 2.5rem;            /* 40px */
  --space-24: 3rem;              /* 48px */
  --space-32: 4rem;              /* 64px */
  --space-48: 6rem;              /* 96px */
  --space-50: 6.25rem;           /* 100px */
  --space-25: 1.5625rem;         /* 25px */
  --space-35: 2.1875rem;         /* 35px */
  --space-30: 3.75rem;           /* 60px */
  --space-40: 5rem;              /* 80px */

  /* Font sizes */
  --font-10: 0.625rem;           /* 10px */
  --font-9: 0.5625rem;           /* 9px */
  --font-11: 0.6875rem;          /* 11px */
  --font-12: 0.75rem;            /* 12px */
  --font-13: 0.8125rem;          /* 13px */
  --font-14: 0.875rem;           /* 14px */
  --font-16: 1rem;               /* 16px */
  --font-18: 1.125rem;           /* 18px */
  --font-20: 1.25rem;            /* 20px */
  --font-24: 1.5rem;             /* 24px */
  --font-28: 1.75rem;            /* 28px */
  --font-32: 2rem;               /* 32px */
  --font-36: 2.25rem;            /* 36px */
  --font-40: 2.5rem;             /* 40px */
  --font-44: 2.75rem;            /* 44px */
  --font-48: 3rem;               /* 48px */
  --font-22: 1.375rem;           /* 22px */

  /* Fluid body scale */
  --font-body-min: 0.9375rem;    /* 15px */
  --font-body-base: 0.875rem;    /* 14px */
  --font-body-max: 1rem;         /* 16px */
  --font-body-slope: 0.2vw;

  /* Radii */
  --radius-xs: 0.25rem;          /* 4px */
  --radius-sm: 0.375rem;         /* 6px */
  --radius-md: 0.5rem;           /* 8px */
  --radius-md-plus: 0.625rem;    /* 10px */
  --radius-lg: 0.75rem;          /* 12px */
  --radius-xl: 0.875rem;         /* 14px */
  --radius-2xl: 1rem;            /* 16px */
  --radius-full: 9999px;         /* pill/full */

  /* Letter-spacing refinement */
  --ls-xxxs: 0.0125rem;          /* 0.2px */

  /* Layout constants */
  --layout-header-height: 5.3125rem; /* 85px */
  --header-row-height: 3.875rem;     /* 62px */
  --stock-min-w: 18.75rem;           /* 300px */
  --search-min-w: 15.625rem;         /* 250px */
  --form-col-min: 10rem;             /* 160px */
  --max-w-modal: 31.25rem;           /* 500px */
  --popover-max-w: 26rem;            /* 416px */
  --menu-max-w: 20rem;               /* 320px */
  --menu-max-h: 20rem;               /* 320px */
  --menu-min-w: 12rem;               /* 192px */
  --max-w-input-lg: 32.5rem;         /* 520px */
  --chart-min-h: 18.75rem;           /* 300px */
  --detail-box-min-h: 4.375rem;      /* 70px */
  --reorder-panel-max-w: 53.75rem;   /* 860px */
  --max-w-xl: 37.5rem;               /* 600px */
  --max-w-home: 47.5rem;             /* 760px */
  --max-w-home-search: 43.75rem;     /* 700px */
  --container-wide-max: 80rem;       /* 1280px */
  --price-display-min-w: 11.25rem;   /* 180px */
  --reply-preview-max-w: 18.75rem;   /* 300px */
  --min-w-btn-lg: 6.25rem;           /* 100px */
  --border-1: 1px;                   /* 1px line */
  --bio-min-h: 8rem;                 /* 128px */
  --bio-h: 10rem;                    /* 160px */
  --bio-max-h: 18rem;                /* 288px */
  /* Sidebar watchlist: compact but sufficient for price, arrow, bolt, badges */
  --watchlist-w-sm: 11rem;            /* 176px */
  --watchlist-w-lg: 14.5rem;          /* 232px */
  --watchlist-drawer-min: 18rem;      /* 288px */
  --watchlist-drawer-max: 32rem;      /* 512px */
  --watchlist-drawer-fluid: 72vw;     /* default mobile drawer width */
  --dm-convo-col-w: 20rem;             /* 320px - DM conversation column width */
  --btn-icon: 1.75rem;                /* 28px */
  --btn-icon-sm: 1.5rem;              /* 24px */
  --spinner: 1.375rem;                /* 22px */
  --reorder-toggle-size: 1.9375rem;   /* 31px */
  --reorder-col-min: 8.125rem;        /* 130px */
  --banner-height: 5.5rem;            /* 88px */
  --ls-xxs: 0.0375rem;                /* 0.6px */
  --ls-xs: 0.01875rem;                /* 0.3px */
  /* Watchlist component sizes */
  --wlq-min-w: 2.1875rem;       /* 35px */
  --wlq-max-w: 2.625rem;        /* 42px */
  --wlq-price-min-w: 1.75rem;   /* 28px */
  --wlq-change-min-w: 0.625rem; /* 10px */
  --wlq-bolt-min-w: 0.75rem;    /* 12px */
  --wl-delete-size: 1.125rem;   /* 18px */

  /* Layout small widths (tokens added to remove hard-coded rems) */
  --stats-min-w: 7.5rem;             /* 120px */
  --detail-box-min-w: 5.625rem;      /* 90px */
  --filings-company-min-w: 12rem;    /* 192px */
  --filings-live-company-min-w: 10rem; /* 160px */
  --search-grid-basis: 12rem;        /* 192px */
  --search-grid-min-w: 10rem;        /* 160px */
  --table-col-min: 12rem;            /* 192px */

  /* Scrollbar */
  --scrollbar-track: #121212; --scrollbar-track-hover: #161d19; --scrollbar-thumb: #00ff99; --scrollbar-thumb-hover: #1fff9f; --scrollbar-thumb-active: #0ccf75; --scrollbar-corner: #0d0d0d; --scrollbar-size: 0.5rem; /* 8px */
  /* Scrollbar accessory borders (previously inline hex) */
  --scrollbar-thumb-border: #052e1d;
  --scrollbar-thumb-border-hover: #084228;
  --scrollbar-thumb-border-active: #06311f;
  /* Theme & shadow scale (reuse --green-rgb defined above) */
  --shadow-modal: 0 0.75rem 1.5rem rgba(0,0,0,0.5);
  --shadow-raised: 0 1rem 2.125rem rgba(0, 255, 153, 0.32);
  --shadow-green-xs: 0 0.25rem 0.75rem rgba(var(--green-rgb), 0.2);
  --shadow-green-sm: 0 0.375rem 1rem rgba(var(--green-rgb), 0.14);
  --shadow-green-md: 0 0.75rem 1.75rem rgba(var(--green-rgb), 0.25);
  --shadow-green-lg: 0 1.5rem 3.5rem rgba(var(--green-rgb), 0.18);
  /* Glow scales (ambient + inset) */
  --glow-green-xs: 0 0 0.25rem rgba(var(--green-rgb), 0.25);
  --glow-green-sm: 0 0 0.375rem rgba(var(--green-rgb), 0.35);
  --glow-green-md: 0 0 0.5rem rgba(var(--green-rgb), 0.55);
  --glow-green-lg: 0 0 0.875rem rgba(var(--green-rgb), 0.25);
  --glow-green-inset-sm: 0 0 0.125rem rgba(var(--green-rgb), 0.15) inset;
  --glow-green-inset-md: 0 0 0.1875rem rgba(var(--green-rgb), 0.25) inset;
  --glow-green-inset-lg: 0 0 0.25rem rgba(var(--green-rgb), 0.35) inset;
  --outline-weak: 0 0 0 0.1875rem rgba(var(--green-rgb), 0.18);
  --outline-strong: 0 0 0 0.1875rem rgba(var(--green-rgb), 0.25);
  /* Text glow stacks for green */
  --text-glow-green-xs: 0 0 0.25rem rgba(var(--green-rgb), 0.45);
  --text-glow-green-sm: 0 0 0.375rem rgba(var(--green-rgb), 0.55), 0 0 0.875rem rgba(var(--green-rgb), 0.38);
  --text-glow-green-md: 0 0 0.5rem rgba(var(--green-rgb), 0.7), 0 0 1rem rgba(var(--green-rgb), 0.48), 0 0 1.875rem rgba(var(--green-rgb), 0.3);
  --text-glow-green-lg: 0 0 0.625rem rgba(var(--green-rgb), 0.8), 0 0 1.25rem rgba(var(--green-rgb), 0.55), 0 0 2.25rem rgba(var(--green-rgb), 0.35);
  /* Warning / Danger text glows */
  --amber-rgb: 255, 235, 59;
  --red-rgb: 255, 51, 51;
  --text-glow-amber-xs: 0 0 0.25rem rgba(var(--amber-rgb), 0.6);
  --text-glow-amber-sm: 0 0 0.375rem rgba(var(--amber-rgb), 0.7), 0 0 0.875rem rgba(var(--amber-rgb), 0.5);
  --text-glow-red-xs: 0 0 0.25rem rgba(var(--red-rgb), 0.6);
  --text-glow-red-sm: 0 0 0.375rem rgba(var(--red-rgb), 0.7), 0 0 0.875rem rgba(var(--red-rgb), 0.5);
  /* Blue shadows for provider buttons */
  --blue-rgb: 66, 133, 244;
  --shadow-blue-sm: 0 0.5rem 1.25rem rgba(var(--blue-rgb), 0.22);
  --shadow-blue-md: 0 0.625rem 1.375rem rgba(var(--blue-rgb), 0.22);
  /* Neutral text shadows */
  --text-shadow-dark-sm: 0 0.0625rem 0.125rem rgba(0,0,0,0.2);
  --text-shadow-dark-md: 0 0.0625rem 0.1875rem rgba(0,0,0,0.4);
  --text-glow-white-sm: 0 0 0.375rem rgba(255,255,255,0.7);
  --text-glow-white-md: 0 0 0.5rem rgba(255,255,255,0.8);
  /* Utility color alphas to avoid raw rgba in component CSS */
  --white-12a: rgba(var(--white-rgb), 0.12);
  --white-20a: rgba(var(--white-rgb), 0.2);
  --white-75a: rgba(var(--white-rgb), 0.75);
  /* Composite field glows */
  --glow-green-field: 0 0 0.375rem rgba(var(--green-rgb), 0.35), 0 0 0.75rem rgba(var(--green-rgb), 0.15) inset;
  --glow-green-field-focus: 0 0 0.4375rem rgba(var(--green-rgb), 0.55), 0 0 0.875rem rgba(var(--green-rgb), 0.25) inset;

  /* Modal + Directory shadows (exact-match tokens to preserve current visuals) */
  --shadow-modal-md-black-50: 0 0.625rem 1.875rem rgba(var(--black-rgb), 0.5);
  --shadow-green-sm-22: 0 0.375rem 1.25rem rgba(var(--green-rgb), 0.22);
  --shadow-green-md-30: 0 0.625rem 1.75rem rgba(var(--green-rgb), 0.3);
  --shadow-modal-xl-black-emerald-ring: 0 24px 64px rgba(var(--black-rgb), 0.65), 0 0 0 1px rgba(var(--green-emerald-rgb), 0.25);
  --outline-emerald-2-15: 0 0 0 2px rgba(var(--green-emerald-rgb), 0.15);
  --outline-emerald-2-18: 0 0 0 2px rgba(var(--green-emerald-rgb), 0.18);
  --outline-emerald-2-25-inset-glow: 0 0 0 2px rgba(var(--green-emerald-rgb), 0.25), inset 0 0 1.5rem rgba(var(--green-emerald-rgb), 0.25);
  --shadow-elevated-sm-black-25: 0 10px 24px rgba(var(--black-rgb), 0.25);
  --shadow-elevated-md-black-35: 0 12px 24px rgba(var(--black-rgb), 0.35);
  --shadow-directory-card: 0 20px 40px rgba(var(--black-rgb), 0.45), 0 0 32px rgba(var(--green-emerald-rgb), 0.25);
  --shadow-inset-bottom-dark-35: inset 0 -1px 0 rgba(var(--black-rgb), 0.35);
  --shadow-search-shell: inset 0 0 0 1px rgba(var(--green-emerald-rgb), 0.2), 0 12px 22px rgba(var(--black-rgb), 0.35);
  --glow-emerald-inset-xl-08: inset 0 0 0.75rem rgba(var(--green-emerald-rgb), 0.08);
  --glow-emerald-inset-lg-10: inset 0 0 0.5rem rgba(var(--green-emerald-rgb), 0.10);
  --shadow-directory-list-item: 0 12px 24px rgba(var(--black-rgb), 0.25), 0 0 14px rgba(var(--green-emerald-rgb), 0.45);

  /* M1 additions: exact-size tokens to replace rem literals while preserving visuals */
  --min-w-btn-md: 7rem;              /* 112px */
  --radius-md-tight: 0.65rem;        /* ~10.4px */
  --scrollbar-size-md: 0.6rem;       /* 9.6px */
  /* Z-layer tokens (reserved; not yet used) */
  --z-toast: 1000;
  --z-dropdown: 1100;
  --z-modal: 1200;
  /* Extended z-index tokens */
  --z-sticky: 100;                 /* local sticky headers / search shells */
  --z-backdrop: 1400;
  --z-drawer: 1500;
  --z-menu: 2100;
  --z-popover: 2200;
  --z-lightbox: 3000;
  --z-splash: 9999;

  /* Radii */
  /* duplicate removed: --radius-full declared earlier with tokens */

  /* Screen-reader offscreen helpers */
  --sr-offscreen-x: -9999px;
  --icon-xs: 1.1rem;                  /* ~17.6px */
  --outline-offset-0-06: 0.06rem;     /* ~1px */

  /* Custom breakpoint tokens (documentation only; CSS variables are not usable in media queries) */
  --bp-watchlist-wide: 81.25rem;      /* 1300px: watchlist expansion */
}
/* Global overflow guardrails to prevent stray horizontal scroll
   while allowing inner containers to scroll horizontally when needed */
html, body { max-width: 100%; overflow-x: hidden; }
/* A11y: ensure chart aria-live region stays invisible to sighted users */
#chartAriaLive, .chart-aria-live {
  position: absolute !important;
  width: var(--border-1) !important;
  height: var(--border-1) !important;
  padding: 0 !important;
  margin: calc(var(--space-1) * -1) !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
  display: block !important;
}
/* Responsive header search min-width to keep top bar on one row */
/* Canonical breakpoints: mdDown (<= 56.25rem), smDown (<= 47.99rem) */
@media (max-width: 56.25rem) {
  :root { --search-min-w: 10rem; }  /* 160px */
}
@media (max-width: 47.99rem) {
  :root { --search-min-w: 8rem; }   /* 128px */
}
/* Firefox */
/* Use platform-default thickness (not thin) for consistency with sidebar/chat */
html { scrollbar-width: auto; scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); }
/* WebKit Scrollbars */
::-webkit-scrollbar { width: var(--scrollbar-size); height: var(--scrollbar-size); background: transparent; }
::-webkit-scrollbar-track { background: linear-gradient(180deg, var(--input-bg), var(--scrollbar-track)); border-radius: 24px; box-shadow: inset 0 0 0.25rem rgba(0, 255, 153, 0.04), 0 0 0 0.0625rem rgba(0,255,153,0.08); }
::-webkit-scrollbar-track:hover { background: linear-gradient(180deg, var(--input-bg-focus), var(--scrollbar-track-hover)); }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, rgba(0,255,153,0.85), rgba(0,255,153,0.55)); border-radius: 24px; box-shadow: 0 0 0.375rem rgba(0,255,153,0.45), 0 0 0 0.0625rem var(--scrollbar-thumb-border) inset; border: 2px solid var(--input-bg); }
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, var(--scrollbar-thumb-hover), rgba(0,255,153,0.65)); box-shadow: 0 0 0.5rem rgba(0,255,153,0.65), 0 0 0 0.0625rem var(--scrollbar-thumb-border-hover) inset; }
::-webkit-scrollbar-thumb:active { background: linear-gradient(180deg, var(--scrollbar-thumb-active), rgba(0,180,108,0.65)); box-shadow: 0 0 0.25rem rgba(0,255,153,0.35), 0 0 0 0.0625rem var(--scrollbar-thumb-border-active) inset; }
::-webkit-scrollbar-corner { background: var(--scrollbar-corner); }
::-webkit-scrollbar:horizontal { height: var(--scrollbar-size); }
/* Fluid media: prevent overflow and distortion */
img, video, canvas, svg, iframe, embed, object {
  max-width: 100%;
  height: auto;
}
iframe { display: block; }
/* Ensure media within flex/grid can shrink properly */
img, video { flex-shrink: 1; min-width: 0; }
/* Global: enforce no horizontal scroll on mobile and prevent layout shifts */
/* duplicate removed: html/body overflow-x hidden already declared above */
#appContainer, #contentWrap, #pagesWrap, .app-container, .content-wrap, .pages-wrap, main, section, aside { min-width: 0; }
/* Safe viewport height helpers (prefer classes over inline styles) */
.min-h-screen-safe { min-height: 100svh; min-height: 100dvh; }
.min-h-1\/2-screen-safe { min-height: 50svh; min-height: 50dvh; }
/* Utilities for responsive visibility: prefer Tailwind responsive classes.
   Legacy `.mobile-only` / `.desktop-only` removed in favor of `hidden`, `block`,
   and custom screens `sm-down`/`md-down` configured in tailwind.config.js. */
/* Compact scrollable regions */
.scroll-thin-compact::-webkit-scrollbar { width: calc(var(--scrollbar-size) - 0.125rem); height: calc(var(--scrollbar-size) - 0.125rem); }
html.scroll-thin-compact { scrollbar-width: thin; }
/* Keyboard focus within scroll containers */
[tabindex][data-scrollable]:focus-visible { outline: var(--space-2) solid var(--color-accent); outline-offset: var(--space-2); }
/* Simple utilities */
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.hidden { display: none !important; }
/* Color shorthand helpers */
.text-green-400, .up { color: var(--color-accent) !important; }
.text-red-400, .down { color: var(--danger-300) !important; }
/* Flash/attention utility */
@keyframes flashPulseOutline { 0% { box-shadow: 0 0 0 0 rgba(var(--blue-rgb), 0.6); } 40% { box-shadow: 0 0 0 0.375rem rgba(var(--blue-rgb), 0.3); } 70% { box-shadow: 0 0 0 0.125rem rgba(var(--blue-rgb), 0.35); } 100% { box-shadow: 0 0 0 0.1875rem rgba(var(--blue-rgb), 0.28); } }
.flash-highlight { animation: flashPulseOutline 1200ms ease-out 1; }
/* Notification animations used globally */
@keyframes fadeIn { from { opacity: 0; transform: translateX(var(--space-10)); } to { opacity: 1; transform: translateX(0); } }
@keyframes fadeOut { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(var(--space-10)); } }
/* Overrides for legacy arbitrary px utility classes */
.text-\[10px\] { font-size: var(--font-10) !important; }
.text-\[11px\] { font-size: var(--font-11) !important; }
.min-w-\[18px\] { min-width: var(--space-9) !important; }
.h-\[18px\] { height: var(--space-9) !important; }
/* Pseudo-class helpers (mirror Tailwind-like patterns) */
.hover\:text-accent:hover { color: var(--color-accent) !important; }
/* Reduced motion preference: minimize animations and transitions globally */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}
/* Deprecated: prefer Tailwind hover: utilities; retained here previously for gaps. */
/* Removed custom hover utilities to reduce duplication with Tailwind. */
/* Semantic utility helpers mapping tokens */
/* Prefer Tailwind colors; keep aliases without !important during transition. */
.bg-app { background-color: var(--color-bg); }
.bg-elevated { background-color: var(--color-bg-elevated); }
.bg-muted { background-color: var(--color-bg-muted); }
.bg-surface { background-color: var(--color-surface); }
.bg-accent { background-color: var(--color-accent); }
.text-app { color: var(--color-text); }
.text-strong { color: var(--color-text-strong); }
.text-muted { color: var(--color-text-muted); }
.text-subtle { color: var(--color-text-subtle); }
.text-dim { color: var(--color-text-dim); }
.text-inverse { color: var(--color-text-inverse); }
.text-accent { color: var(--color-accent); }
.border-accent { border-color: var(--color-accent); }
.border-muted { border-color: var(--color-border); }
.border-strong { border-color: var(--color-border-strong); }
/* Divider helpers (emulate Tailwind divide-*) */
.divide-muted.divide-y > :not([hidden]) ~ :not([hidden]) { border-top-width: 1px; border-color: var(--color-border); }
.divide-muted.divide-x > :not([hidden]) ~ :not([hidden]) { border-left-width: 1px; border-color: var(--color-border); }
/* Soft accent shadow that composes with existing shadows */
.shadow-accent-soft { filter: drop-shadow(0 0 0.75rem rgba(var(--green-rgb), 0.1)); }
/* Z-index utilities mapped to token values */
.z-toast { z-index: var(--z-toast); }
.z-dropdown { z-index: var(--z-dropdown); }
.z-modal { z-index: var(--z-modal); }
.z-backdrop { z-index: var(--z-backdrop); }
.z-drawer { z-index: var(--z-drawer); }
.z-menu { z-index: var(--z-menu); }
.z-popover { z-index: var(--z-popover); }
.z-lightbox { z-index: var(--z-lightbox); }
.z-sticky { z-index: var(--z-sticky); }
/*
  typography.css
  Purpose: Type-related rules: fonts, text colors, headings, paragraphs, links.
  Notes:
  - Do not rename classes/ids; preserve specificity.
*/
/* Body font and smoothing */
body {
  font-family: 'Inter', sans-serif;
  background: var(--color-bg);
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: clamp(var(--font-body-min), var(--font-body-base) + var(--font-body-slope), var(--font-body-max));
}
/*
  layout.css
  Purpose: Global layout primitives and page structure. Includes containers, sections, and page wrappers.
  Notes:
  - Mobile-first: base styles target small screens; enhance via min-width breakpoints.
  - Structure-only rules (display, grid/flex, sizing, spacing, borders) go here.
  - Preserve existing class and ID names to avoid HTML changes.
*/
/* Base reset handled by Tailwind preflight; avoid duplicating universal resets */
/* App shell layout (mobile-first) */
/* Convert main frame to CSS Grid using existing IDs to avoid HTML changes. */
#appContainer { height: auto; min-height: 100dvh; }
#contentWrap, .content-wrap { display: grid; grid-template-columns: 1fr; grid-template-areas: 'main'; gap: 0; min-height: 0; scrollbar-gutter: stable both-edges; }
#pagesWrap, .pages-wrap { display: block; min-height: 0; grid-area: main; scrollbar-gutter: stable both-edges; }
/* Primary sections (mobile defaults) */
.stock-section { grid-area: stock; display: none; background: var(--color-bg-elevated); padding: var(--space-10); border-right: var(--space-1) solid var(--color-accent); flex-direction: column; position: relative; /* avoid unnecessary layering */ overflow-y: auto; min-width: var(--stock-min-w); width: auto; }
.chat-section { grid-area: chat; background: var(--color-bg-elevated); display: flex; flex-direction: column; border-right: 0; min-width: 0; width: auto; }
/* Watchlist aside (default hidden on mobile). Do not show divider unless the layout opts in. */
.watchlist-section { grid-area: watch; display: none; background: var(--color-bg); border-left: 0; padding: var(--space-4) var(--space-2); overflow-y: auto; flex-direction: column; gap: var(--space-3); scrollbar-gutter: stable both-edges; }
/* Activate the divider only when the main chatboard layout is active */
#contentWrap.with-watchlist .watchlist-section { border-left: var(--space-1) solid var(--color-accent); }
/* Page containers (generic neon frame) */
.page-container, .page-container-wide { border: var(--space-1) solid var(--color-accent); border-radius: var(--radius-xs); padding: var(--space-6); }
/* Scrollable page wrappers */
.page-container { padding: var(--space-12); height: 100%; overflow-y: auto; }
.page-container-wide { padding: var(--space-10); height: 100%; overflow-y: auto; max-width: var(--container-wide-max); margin: 0 auto; }
#profilePage.page-container-wide, .profile-page.page-container-wide { padding: var(--space-6) var(--space-8); max-width: none; margin: 0; }
#directMessagesPage { padding: 0; max-width: none; margin: 0; }
/* Remove padding that interferes with flex layout */
#secBotPage.page-container-wide { max-width: none; margin: 0; width: 100%; }
/* Content-visibility hints to reduce initial rendering cost for below-the-fold sections */
#watchlistSection,
#directMessagesPage,
#profilePage,
#secBotPage,
#bookmarksPage,
.page-container,
.page-container-wide {
  content-visibility: auto;
  contain-intrinsic-size: 600px 800px; /* reasonable fallback to avoid jumpy layout */
}
/* Sidebar watchlist should use its explicit grid width immediately to avoid
   off-canvas empty state on first paint. */
#watchlistSection { content-visibility: visible; contain-intrinsic-size: auto; }
/* Direct Messages page: participate in normal app flow (no viewport binding) */
#directMessagesPage {
  /* Live inside #contentWrap/#pagesWrap like other pages */
  position: static;
  /* Two-column 30/70 grid that fills the page */
  display: grid;
  grid-template-columns: 30% 70%;
  grid-template-rows: 1fr;
  align-items: stretch;
  gap: 0;
  width: 100%;
  /* Vertically bind the page to the viewport area under the header */
  height: calc(100dvh - var(--header-row-height));
  max-height: calc(100dvh - var(--header-row-height));
  max-width: none;
  min-height: 0; /* enable inner scroll regions */
  overflow: hidden;
  /* Act as a container for layout queries if needed */
  container-type: inline-size;
  /* Render immediately to avoid measuring with fallback intrinsic size */
  content-visibility: visible;
  contain-intrinsic-size: none;
}
/* Flatten any internal wrapper so grid items are columns directly */
#directMessagesPage > .dm-layout { display: contents; }
/* Also handle builds where the wrapper lacks the .dm-layout class */
#directMessagesPage > div:not([id]) { display: contents; }
/* Profile page full width override */
#profilePage.page-container-wide {
  width: 100%;
  max-width: none;
}
/* (reverted: do not force viewport binding for profile page on desktop) */
/* Quick grids */
.detail-box-grid { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-5); }
.detail-box-grid > * { flex: 1 1 var(--detail-box-min-w); min-width: var(--detail-box-min-w); }
/* Responsive metrics grid using CSS Grid */
.metrics-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: var(--space-3); width: 100%; align-items: stretch; }
/* Two-column region in stock header */
.main-content-area { display: flex; gap: var(--space-12); align-items: flex-start; flex-direction: column; }
/* Inner main layout: stock | chat grid (mobile-first) */
#mainPage { container-type: inline-size; }
#mainPage > .main-grid { display: grid; grid-template-columns: 1fr; grid-template-areas: 'chat'; gap: 0; min-height: 0; }
/* Container query: switch to two columns when the main page container is wide enough.
   Rationale: prefer container queries when supported for component-scoped
   responsiveness; retain @media fallback below for broader compatibility. */
@container (min-width: 48rem) {
  #mainPage > .main-grid {
    grid-template-columns: minmax(var(--stock-min-w), 0.8fr) minmax(0, 1fr);
    grid-template-areas: 'stock chat';
  }
}
@media (min-width: 48rem) {
  #mainPage > .main-grid {
    grid-template-columns: minmax(var(--stock-min-w), 0.8fr) minmax(0, 1fr);
    grid-template-areas: 'stock chat';
  }
}
/* ---------------------------------------------
   Enhancements via min-width breakpoints
   --------------------------------------------- */
/* Tablet: two columns (stock ~40% / chat ~60%), watchlist hidden */
@media (min-width: 48rem) {
  /* Leave inner layout to the existing flex wrapper inside #mainPage */
  .stock-section { display: flex; }
  .chat-section { border-right: 0; }
  .watchlist-section { display: none; }
  .main-content-area { flex-direction: column; gap: var(--space-8); }
}
/* Desktop: show watchlist and rebalance columns only when requested */
@media (min-width: 64.0625rem) {
  #contentWrap.with-watchlist {
    /* Allow watchlist column to grow to its content when needed */
    grid-template-columns: 1fr minmax(var(--watchlist-w-sm), max-content);
    grid-template-areas: 'main watch';
  }

  #contentWrap:not(.with-watchlist) {
    grid-template-columns: 1fr;
    grid-template-areas: 'main';
  }

  /* Leave inner layout to the existing flex wrapper inside #mainPage */
  .chat-section { border-right: var(--space-1) solid var(--color-accent); }
  /* Let the grid track size the sidebar; ensure a sensible floor */
  #contentWrap.with-watchlist .watchlist-section { display: flex; width: auto; min-width: var(--watchlist-w-sm); }
}
/* Large desktops: widen watchlist */
@media (min-width: 100rem) {
  /* Prefer wider floor but still allow content to dictate max as needed */
  #contentWrap.with-watchlist {
    grid-template-columns: 1fr minmax(var(--watchlist-w-lg), max-content);
  }
}
/* Mobile view toggle: show stock details panel instead of chat when explicitly requested */
/* Applies only on narrow screens (default mobile layout) */
@media (max-width: 47.99rem) {
  /* When the main container signals stock view, reveal stock panel at full width */
  #mainPage.view-stock .stock-section { display: flex; width: 100%; min-width: 0; border-right: 0; }
  #mainPage.view-stock .chat-section { display: none; }
}
/* ---------------------------------------------
   Layout primitives
   --------------------------------------------- */
/* Vertical stack: evenly spaced column layout */
.stack { display: flex; flex-direction: column; gap: var(--space-4); }
/* Cluster: row layout with wrapping and gaps */
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }
/* Split: two-column minmax with gap */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-6); }
/* Sidebar: content area with fixed-width aside on the end */
.sidebar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-6); }
/* ---------------------------------------------
   Viewport Height Management for Sections
   Bind primary sections to the viewport area under the header row.
   High-level container sizing belongs here to avoid duplication.
   --------------------------------------------- */
@media (min-width: 48rem) {
  .chat-section {
    height: calc(100svh - var(--header-row-height));
    height: calc(100dvh - var(--header-row-height));
    max-height: calc(100svh - var(--header-row-height));
    max-height: calc(100dvh - var(--header-row-height));
    overflow: hidden;
  }
  .watchlist-section {
    height: calc(100svh - var(--header-row-height));
    height: calc(100dvh - var(--header-row-height));
    max-height: calc(100svh - var(--header-row-height));
    max-height: calc(100dvh - var(--header-row-height));
    overflow-y: auto;
    overflow-x: hidden;
    /* Reserve space for scrollbars on both edges for consistent inline-end measurements */
    scrollbar-gutter: stable both-edges;
  }
  .stock-section {
    height: calc(100svh - var(--header-row-height));
    height: calc(100dvh - var(--header-row-height));
    max-height: calc(100svh - var(--header-row-height));
    max-height: calc(100dvh - var(--header-row-height));
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-gutter: stable;
  }
}
@media (max-width: 47.99rem) {
  .chat-section {
    /* Bind chat to the viewport area under the header on mobile too. */
    height: calc(100svh - var(--header-row-height));
    height: calc(100dvh - var(--header-row-height));
    max-height: calc(100svh - var(--header-row-height));
    max-height: calc(100dvh - var(--header-row-height));
    overflow: hidden;
  }
  .watchlist-section {
    max-height: calc(100svh - var(--header-row-height));
    max-height: calc(100dvh - var(--header-row-height));
    overflow-y: auto;
    scrollbar-gutter: stable;
  }
  .stock-section {
    /* Bind stock panel to viewport area under header so inner flex can fill */
    height: calc(100svh - var(--header-row-height));
    height: calc(100dvh - var(--header-row-height));
    max-height: calc(100svh - var(--header-row-height));
    max-height: calc(100dvh - var(--header-row-height));
    overflow-y: auto;
    scrollbar-gutter: stable;
  }

  /* Ensure the stock info container participates fully in the column layout */
  #mainPage.view-stock #stockInfoContainer {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
  }
  #mainPage.view-stock #stockMetrics { flex: 0 0 auto; }
  #mainPage.view-stock .chart-container { flex: 1 1 auto; min-height: 0; }
  #mainPage.view-stock .chart-timeline-buttons { flex: 0 0 auto; }
}
/*
  buttons.css
  Purpose: All button styles including generic .btn and custom button-like components.
  Mobile-first, using relative units and fluid-friendly paddings.
*/
/* Generic buttons */
.btn { padding: var(--space-5) var(--space-10); border-radius: var(--radius-sm); font-weight: 700; cursor: pointer; transition: background 160ms ease; border: none; }
.btn-primary { background: var(--color-accent); color: var(--color-text-inverse); }
.btn-primary:hover { background: var(--color-accent-hover); }
.btn-secondary { background: var(--color-surface-hover); color: var(--color-text-strong); }
.btn-secondary:hover { background: var(--color-surface-hover); }
.btn-danger { background: var(--color-danger); color: var(--color-text-strong); }
.btn-danger:hover { background: var(--color-danger-deep); }
.btn-outline { background:transparent; color:var(--color-accent); border:var(--border-1) solid var(--color-accent); font-weight:700; padding:var(--space-4) var(--space-7); border-radius:var(--radius-md); }
.btn-outline:hover { background:var(--color-accent); color:var(--color-text-inverse); }
.btn-outline[disabled], .btn[disabled], button[disabled] { opacity: 0.6; cursor: not-allowed; }
/* Generic bordered action button */
.action-btn { background: transparent; border: var(--border-1) solid var(--color-accent); color: var(--color-accent); cursor: pointer; font-size: var(--font-12); font-weight: 700; padding: var(--space-2) var(--space-5); border-radius: var(--radius-xs); transition: background 160ms ease, color 160ms ease, border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease; }
.action-btn:hover { background: var(--color-accent); color: var(--color-text-inverse); }
/* Custom navigation button */
.btn-nav {
  background: transparent;
  color: var(--color-accent);
  border: var(--border-1) solid var(--color-accent);
  font-weight: 600;
  padding: var(--space-6) var(--space-6);
  line-height: 1;
  height: auto;
  border-radius: var(--radius-sm);
  font-size: var(--font-14);
}
.btn-nav:hover {
  background: var(--color-accent);
  color: var(--color-text-inverse);
}
/* Suppress hover glow temporarily after navigation */
body.no-hover .btn-nav:hover {
  background: transparent;
  color: var(--color-accent);
}
/* Go button: only flash green on active press; don't stay green on hover/focus */
.btn-go:hover,
.btn-go:focus,
.btn-go:focus-visible {
  background: transparent;
  color: var(--color-accent);
}
.btn-go:active {
  background: var(--color-accent);
  color: var(--color-text-inverse);
}
/* Mobile: make the top-right Go button larger and easier to tap */
@media (max-width: 56.25rem) {
  .btn-go {
    padding: var(--space-7) var(--space-10);
    font-size: calc(var(--font-14) * 1.15);
    border-radius: var(--radius-md);
  }
}
/* Mobile: prevent sticky hover and use green only while actively pressing
   Applies broadly to major button variants across the app. Desktop remains unchanged. */
@media (hover: none) and (pointer: coarse) {
  /* Neutralize hover/focus styling that would otherwise stick on touch (target non-primary variants) */
  .btn-nav:hover,
  .btn-nav:focus,
  .btn-nav:focus-visible,
  .action-btn:hover,
  .btn-outline:hover,
  .chart-action-btn:hover,
  .chart-action-btn-icon:hover,
  .search-btn:hover,
  .search-toggle-btn:hover,
  .uk-filings-search-btn:hover,
  .df-clear-btn:hover,
  .btn-report-bug:hover,
  .home-search-btn:hover,
  .timeline-btn:hover {
    background: transparent;
    color: var(--color-accent);
    box-shadow: none;
    transform: none;
  }

  /* While finger is down, show the green flash; release reverts instantly */
  .btn-nav:active,
  .action-btn:active,
  .btn-outline:active,
  .chart-action-btn:active,
  .chart-action-btn-icon:active,
  .search-btn:active,
  .search-toggle-btn:active,
  .uk-filings-search-btn:active,
  .df-clear-btn:active,
  .btn-report-bug:active,
  .home-search-btn:active,
  .timeline-btn:active {
    background: var(--color-accent);
    color: var(--color-text-inverse);
    border-color: var(--color-accent);
  }

  /* Respect destructive/danger variants */
  .danger-action-btn:hover,
  .danger-action-btn:active { background: var(--color-danger); color: var(--color-text-strong); }
}
/* Report bug button */
.btn-report-bug {
  background: rgba(var(--warning-rgb), 0.10);
  color: var(--color-warning);
  border: var(--border-1) solid var(--color-warning);
  font-weight: 600;
  padding: var(--space-6) var(--space-5);
  line-height: 1;
  height: auto;
  border-radius: var(--radius-sm);
  font-size: var(--font-12);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2-5);
}
.btn-report-bug:hover {
  background: var(--color-warning);
  color: var(--color-text-inverse);
}
.btn-report-bug svg { width: var(--space-7); height: var(--space-7); }
/* Header full-height nav sizing handled here (class-first) */
/* Auth specific provider button */
.btn-google { width:100%; background:var(--color-blue); color:var(--color-text-strong); border:var(--border-1) solid var(--color-blue-hover); border-radius:var(--radius-md); padding:var(--space-5) var(--space-7); display:flex; align-items:center; justify-content:center; gap:var(--space-5); font-weight:700; text-shadow: var(--text-shadow-dark-sm); }
.btn-google:hover{ background:var(--color-blue-hover); }
/* Compact Action Buttons */
.chart-action-btn { background: var(--color-surface); color: var(--color-text-muted); border: var(--border-1) solid var(--color-border); border-radius: var(--radius-xs); padding: var(--space-3) var(--space-5); font-size: var(--font-12); font-weight: 500; cursor: pointer; transition: background 160ms ease, color 160ms ease, border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease; text-decoration: none; display: inline-flex; align-items: center; gap: var(--space-2); white-space: nowrap; }
.chart-action-btn:hover { background: var(--color-accent); color: var(--color-text-inverse); border-color: var(--color-accent); }
.chart-action-btn:active { transform: none; }
.chart-action-btn:focus-visible { outline: var(--space-2) solid var(--color-accent); outline-offset: var(--space-2); }
/* Icon-only variant */
.chart-action-btn-icon { background: var(--color-surface); color: var(--color-text-muted); border: var(--border-1) solid var(--color-border); border-radius: 50%; width: var(--btn-icon); height: var(--btn-icon); padding: 0; font-size: var(--font-12); line-height: var(--btn-icon); font-weight: 700; font-family: system-ui, sans-serif; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background 160ms ease, color 160ms ease, border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease; }
.chart-action-btn-icon--sm { width: var(--btn-icon-sm); height: var(--btn-icon-sm); font-size: var(--font-11); line-height: var(--btn-icon-sm); font-weight: 700; padding: 0; }
.chart-action-btn-icon:hover { background: var(--color-accent); color: var(--color-text-inverse); border-color: var(--color-accent); }
/* Simplified compact watchlist button */
#addToWatchlistBtn, .btn-add-to-watchlist { width: var(--btn-icon); height: var(--btn-icon); line-height: var(--btn-icon); font-size: var(--font-12); font-weight: 700; text-align: center; }
/* Refresh stock price control */
#refresh-stock-price, .btn-refresh-stock-price { font-size: clamp(var(--font-28), 1.25rem + 1.5vw, var(--font-36)); line-height: 1; color: var(--color-accent); background: transparent; border: none; border-radius: var(--radius-sm); padding: 0; display: flex; align-items: center; justify-content: center; transition: color 160ms ease, transform 160ms ease, filter 160ms ease; cursor: pointer; }
#refresh-stock-price:hover, .btn-refresh-stock-price:hover { color: var(--color-accent-hover); transform: scale(1.1); filter: drop-shadow(0 0 0.375rem rgba(var(--green-rgb), 0.35)); }
#refresh-stock-price:focus-visible, .btn-refresh-stock-price:focus-visible { outline: var(--space-2) solid var(--color-accent); outline-offset: var(--space-2); }
/* Timeline buttons (chart period controls) */
.timeline-btn { background: var(--color-bg); color: var(--color-text-strong); border: var(--border-1) solid var(--color-border-strong); border-radius: var(--radius-md); padding: var(--space-3) var(--space-5); font-size: var(--font-12); cursor: pointer; transition: background 160ms ease-in-out, color 160ms ease-in-out, border-color 160ms ease-in-out, transform 160ms ease-in-out, box-shadow 160ms ease-in-out; text-align: center; min-width: 0; }
.timeline-btn:hover { background: var(--color-bg-elevated); border-color: var(--color-border); }
.timeline-btn.active { background: var(--color-accent); color: var(--color-text-inverse); border-color: var(--color-accent); }
.timeline-btn.loading { opacity: .6; cursor: not-allowed; }
.timeline-btn:focus-visible { outline: var(--space-2) solid var(--color-accent); outline-offset: var(--space-2); }
/* Desktop (pointer: fine): green hover like top nav buttons */
@media (hover: hover) and (pointer: fine) {
  .timeline-btn:hover,
  .timeline-btn:focus,
  .timeline-btn:focus-visible {
    background: var(--color-accent);
    color: var(--color-text-inverse);
    border-color: var(--color-accent);
  }
}
/* Danger Action Button */
.danger-action-btn { background: var(--color-danger); color: var(--color-text-strong); border: var(--border-1) solid rgba(var(--danger-rgb), 0.25); border-radius: var(--radius-sm); padding: var(--space-3) var(--space-5); font-size: var(--font-16); font-weight: 700; cursor: pointer; transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease, border-color 160ms ease; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; line-height: 1; }
.danger-action-btn:hover { background: var(--color-danger-hover); transform: translateY(-2px) scale(1.03); border-color: rgba(var(--danger-rgb), 0.55); box-shadow: 0 0.625rem 1.5rem rgba(var(--danger-rgb), 0.35), 0 0 0 0.1875rem rgba(var(--danger-rgb), 0.22) inset; }
.danger-action-btn:active { transform: translateY(-1px) scale(0.99); box-shadow: 0 0.375rem 0.875rem rgba(var(--danger-rgb), 0.18) inset; }
.danger-action-btn:focus-visible { outline: var(--space-1-5) solid var(--color-danger-hover); outline-offset: var(--space-1-5); }
/* Profile CTA button */
.profile-button { background: var(--color-accent); color: var(--color-text-inverse); border: none; border-radius: var(--radius-md); padding: var(--space-6); font-weight: 700; cursor: pointer; transition: background 160ms ease, transform 160ms ease, box-shadow 160ms ease, color 160ms ease; text-align: center; margin-bottom: var(--space-7-5); }
.profile-button:hover { background: var(--color-accent-hover); transform: translateY(-1px); }
/* Search buttons */
.search-btn { background: var(--color-surface-hover); color: var(--color-text); border: var(--border-1) solid var(--color-border); border-radius: var(--radius-sm); padding: var(--space-4) var(--space-8); font-weight: 600; cursor: pointer; transition: background 160ms ease, color 160ms ease, border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease; }
.search-btn:hover { background: var(--color-surface-hover); border-color: var(--color-accent); }
.search-clear-btn { background: var(--color-surface); }
.search-toggle-btn { background: transparent; border: var(--border-1) solid var(--color-accent); color: var(--color-accent); font-size: var(--font-18); cursor: pointer; padding: var(--space-2) var(--space-4); border-radius: var(--radius-sm); display: inline-flex; align-items: center; justify-content: center; line-height: 1; transition: background .18s ease, box-shadow .18s ease, color .18s ease; }
.search-toggle-btn:hover { background: var(--color-accent); color: var(--color-text-inverse); box-shadow: 0 0 0.375rem rgba(var(--green-rgb), 0.55), 0 0 0.75rem rgba(var(--green-rgb), 0.25) inset; }
.icon-magnify { width: var(--space-10); height: var(--space-10); stroke: var(--color-accent); stroke-width: 2.2; fill: none; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.search-toggle-btn:hover .icon-magnify { stroke: var(--color-text-inverse); }
/* Bookmark active state */
.msg-bookmark.bookmarked { background: var(--color-accent); color: var(--color-text-inverse); border: var(--border-1) solid var(--color-accent); }
/* Form Types button (unified across pages) */
.form-types-btn { padding: var(--space-4) var(--space-6); font-size: var(--font-13); line-height: 1; border-radius: var(--radius-lg); font-weight: 700; }
/* Home page prominent search CTA */
.home-search-btn { background: var(--color-accent); color: var(--color-text-inverse); border: none; border-radius: var(--radius-md); padding: var(--space-8) var(--space-12); font-size: var(--font-16); font-weight: 700; cursor: pointer; transition: background 160ms ease; }
.home-search-btn:hover { background: var(--color-accent-hover); }
/* UK filings search button */
.uk-filings-search-btn { background: transparent; color: var(--color-accent); border: var(--border-1) solid var(--color-accent); border-radius: var(--radius-sm); padding: var(--space-6) var(--space-6); font-size: var(--font-14); font-weight: 600; line-height: 1; height: auto; cursor: pointer; transition: background 160ms ease, color 160ms ease, border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease; min-width: var(--min-w-btn-lg); }
.uk-filings-search-btn:hover,
.uk-filings-search-btn:focus-visible { background: var(--color-accent-hover); color: var(--color-text-inverse); outline: none; }
.uk-filings-search-container .uk-filings-search-btn:hover,
.uk-filings-search-container .uk-filings-search-btn:focus-visible {
  /* Increase specificity to override Tailwind utilities like .text-accent */
  color: var(--color-text-inverse);
}
.uk-filings-search-btn:disabled { background: var(--color-surface-hover); cursor: not-allowed; opacity: 0.7; }
/* Cool Profile Button */
#profilePageBtn, .btn-profile-page {
  background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-hover) 50%, var(--color-accent) 100%);
  background-size: 200% 200%;
  color: var(--color-text-inverse);
  border: none;
  border-radius: var(--radius-lg);
  font-weight: 700;
  padding: var(--space-6) var(--space-8);
  line-height: 1;
  height: auto;
  position: relative;
  overflow: hidden;
  transition: transform 160ms cubic-bezier(0.175, 0.885, 0.32, 1.275), background 160ms ease, color 160ms ease, box-shadow 160ms ease;
  box-shadow: 0 0.25rem 0.9375rem rgba(var(--green-rgb), 0.2);
  animation: profilePulse 4s ease-in-out infinite;
}
/* Responsive trimming for compact headers */
@media (max-width: 80rem) {
  .btn-nav,
  #profilePageBtn, .btn-profile-page,
  .btn-report-bug {
    padding-left: var(--space-5);
    padding-right: var(--space-5);
    font-size: var(--font-12);
  }
}
@media (max-width: 64rem) {
  .btn-nav,
  #profilePageBtn, .btn-profile-page,
  .btn-report-bug {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }
  .btn-report-bug span { display: none; }
}
#profilePageBtn::before, .btn-profile-page::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(var(--white-rgb),  0.3), transparent);
  transform: translateX(-100%);
  transition: transform 160ms ease;
}
#profilePageBtn:hover, .btn-profile-page:hover {
  background-position: 100% 0;
  transform: translateY(-0.125rem) scale(1.05);
  box-shadow: 0 0.5rem 1.5625rem rgba(var(--green-rgb), 0.4), 0 0 1.25rem rgba(var(--green-rgb), 0.2);
  border: var(--border-1) solid rgba(var(--green-rgb), 0.5);
  animation: profileGlow 2s ease-in-out infinite alternate;
}
#profilePageBtn:hover::before, .btn-profile-page:hover::before {
  transform: translateX(100%);
}
#profilePageBtn:active, .btn-profile-page:active {
  transform: translateY(-0.0625rem) scale(1.02);
  box-shadow: 0 0.25rem 0.9375rem rgba(var(--green-rgb), 0.3);
}
#profilePageBtn span:first-child, .btn-profile-page span:first-child {
  font-size: var(--font-16);
  display: inline-flex;
  transition: transform 0.3s ease;
}
#profilePageBtn:hover span:first-child, .btn-profile-page:hover span:first-child {
  transform: rotate(360deg) scale(1.2);
}
#profilePageBtn span:last-child, .btn-profile-page span:last-child {
  font-weight: 800;
  text-shadow: var(--text-shadow-dark-sm);
}
@keyframes profileGlow {
  0% { box-shadow: var(--shadow-green-md); }
  100% { box-shadow: var(--shadow-green-lg); }
}
@keyframes profilePulse {
  0%, 100% {
    background-position: 0% 0%;
    box-shadow: 
      0 0.25rem 0.9375rem rgba(var(--green-rgb), 0.2),
      0 0 0.625rem rgba(var(--green-rgb), 0.1);
  }
  50% {
    background-position: 100% 100%;
    box-shadow: 
      0 0.375rem 1.25rem rgba(var(--green-rgb), 0.3),
      0 0 0.9375rem rgba(var(--green-rgb), 0.2);
  }
}
/* (profileGreenFlow removed; reverted to static idle state) */
/*
  forms.css
  Purpose: All styles related to form elements (input, select, textarea, label) and focused states.
  Mobile-first, relative units, and wrapping search controls to avoid overflow.
*/
/* Neon search bar */
.ticker-input { border: var(--space-1-5) solid var(--color-accent); box-shadow: var(--glow-green-field); background: var(--input-bg); }
.ticker-input:focus { outline: none; box-shadow: var(--glow-green-field-focus); background: var(--input-bg-focus); }
/* Reusable neon input style */
.neon-input, #newSubgroupInput, .watchlist-add-input, #secFilingsSearchInput, #ukFilingsSearchInput, #ukCompanyInput, #dmStartInput, #dmGroupName, #dmGroupMemberInput, #dmAddMemberInput, #dmInput, #messageInput, #profileBioInput, textarea#profileBioInput, textarea#notesModalTextarea, .input-new-subgroup, .input-sec-filings-search, .input-uk-filings-search, .input-uk-company, .input-dm-start, .input-dm-group-name, .input-dm-group-member, .input-dm-add-member, .input-dm, .input-message, .input-profile-bio, textarea.input-profile-bio, textarea.input-notes-modal { border: var(--space-1) solid var(--color-accent); background: var(--input-bg); box-shadow: var(--glow-green-field); transition: box-shadow .18s ease, background .18s ease; }
.neon-input:focus, #newSubgroupInput:focus, .watchlist-add-input:focus, #secFilingsSearchInput:focus, #ukFilingsSearchInput:focus, #ukCompanyInput:focus, #dmStartInput:focus, #dmGroupName:focus, #dmGroupMemberInput:focus, #dmAddMemberInput:focus, #dmInput:focus, #messageInput:focus, #profileBioInput:focus, textarea#profileBioInput:focus, textarea#notesModalTextarea:focus, .input-new-subgroup:focus, .input-sec-filings-search:focus, .input-uk-filings-search:focus, .input-uk-company:focus, .input-dm-start:focus, .input-dm-group-name:focus, .input-dm-group-member:focus, .input-dm-add-member:focus, .input-dm:focus, .input-message:focus, .input-profile-bio:focus, textarea.input-profile-bio:focus, textarea.input-notes-modal:focus { outline: none; background: var(--input-bg-focus); box-shadow: var(--glow-green-field-focus); }
/* Moderation + generic forms */
.form-input, .form-textarea { width: 100%; padding: var(--space-4) var(--space-6); background-color: var(--color-bg); border: var(--border-1) solid var(--color-border); border-radius: var(--radius-sm); color: var(--color-text); font-family: inherit; }
.form-textarea { resize: vertical; }
.form-label { display: block; margin-bottom: var(--space-2-5); font-weight: 500; color: var(--color-text-muted); }
.form-select, .form-textarea { width: 100%; background: var(--color-bg); border: var(--border-1) solid var(--color-border); border-radius: var(--radius-sm); padding: var(--space-5); color: var(--color-text-strong); }
/* Search inputs */
.search-input,
input.search-input { background: var(--color-bg); border-width: var(--space-1-5); border-style: solid; border-color: var(--color-accent); border-radius: var(--radius-sm); padding: var(--space-4) var(--space-6); color: var(--color-text-strong); font-size: var(--font-14); box-shadow: var(--glow-green-field); }
.search-input:focus,
input.search-input:focus { outline: none; border-color: var(--color-accent); border-width: var(--space-1-5); box-shadow: var(--glow-green-field-focus); }
/* Ensure neon-styled search inputs also get thicker borders */
.search-input.neon-input { border-width: var(--space-1-5); border-color: var(--color-accent); box-shadow: var(--glow-green-field); }
/* Inline chat search specifics */
.chat-inline-search .search-input { margin: 0; }
.chat-inline-search input[type=date]::-webkit-calendar-picker-indicator { filter: invert(65%) sepia(95%) saturate(800%) hue-rotate(90deg) brightness(135%) contrast(90%); cursor: pointer; }
.chat-inline-search input[type=date]:hover::-webkit-calendar-picker-indicator, .chat-inline-search input[type=date]:focus::-webkit-calendar-picker-indicator { filter: invert(80%) sepia(60%) saturate(1200%) hue-rotate(90deg) brightness(155%) contrast(95%); }
.chat-inline-search input[type=date].search-input, .chat-inline-search input[type=date].neon-input { padding: var(--space-4) var(--space-3); font-size: var(--font-13); line-height: 1.25; }
.chat-inline-search input[type=date]::-webkit-calendar-picker-indicator { margin: 0; }
/* Make chat search controls wrap and scale on small screens */
.chat-inline-search { flex-wrap: wrap; }
.chat-inline-search input[type="text"],
.chat-inline-search input[type="date"] {
  width: auto;
  flex: 1 1 var(--form-col-min);
  min-width: var(--form-col-min);
}
.chat-inline-search > .ml-auto { flex: 0 0 auto; }
/* Ensure the nested ticker wrapper columns act like proper flex columns
   in search bars (used in Bookmarks and Profile). This avoids the ticker
   field visually overlapping the following date input on some zoom/layouts. */
.chat-inline-search > .relative { flex: 1 1 var(--form-col-min); min-width: var(--form-col-min); }
/* Keep date inputs above neighbors if borders/glow touch at tight widths */
.chat-inline-search input[type="date"] { position: relative; z-index: 1; }
.chat-inline-search .btn-outline { flex: 0 0 auto; }
/* Mobile: adopt DM layout — stable two-column grid with full-width actions row */
@media (max-width: 47.99rem) {
  .chat-inline-search {
    display: grid;
    grid-template-columns: repeat(2, minmax(var(--form-col-min), 1fr));
    -moz-column-gap: var(--space-2);
         column-gap: var(--space-2);
    row-gap: var(--space-2);
    align-items: end;
  }
  .chat-inline-search > .relative { min-width: 0; }
  .chat-inline-search .search-input { width: 100% !important; min-width: 0; }
  .chat-inline-search .actions {
    grid-column: 1 / -1;
    margin-left: 0;
    justify-content: flex-end;
  }
  /* SEC Bot: put pill row on its own full-width line above inputs */
  #secBotSearchForm .secbot-pill-row {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
  }
  /* Mobile column base width */
  .chat-search-container, .bookmarks-search-container, .profile-search-container { --form-col-min: 9.5rem; }
}
/* Desktop compact: keep all fields on one row without overlap */
@media (min-width: 56.25rem) {
  /* Desktop: uniform column size for all fields, using calendar box as the standard */
  .chat-search-container, .bookmarks-search-container, .profile-search-container { --form-col-min: 10rem; }
  .chat-inline-search { -moz-column-gap: var(--space-2); column-gap: var(--space-2); }
  .chat-inline-search > .relative { flex: 0 0 var(--form-col-min); min-width: var(--form-col-min); }
  .chat-inline-search > .relative > .search-input { width: 100%; min-width: 0; }
  .chat-inline-search .actions { margin-left: 0; flex: 0 0 auto; order: 0; }
  /* Keep pill row spanning full width on desktop as well to avoid cramping */
  #secBotSearchForm .secbot-pill-row {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
  }
}
/* Suggestion menu should respect container padding on search bars */
.chat-search-container .suggestion-menu,
.bookmarks-search-container .suggestion-menu,
.profile-search-container .suggestion-menu {
  left: var(--space-2);
  right: var(--space-2);
  max-width: calc(100% - (var(--space-2) * 2));
}
/* File upload input/button */
#fileUploadLabel,
#dmFileUploadLabel,
.file-upload-label,
.dm-file-upload-label { padding: var(--space-4) var(--space-6); font-size: var(--font-16); border: var(--space-1) solid var(--color-accent); border-radius: var(--radius-sm); background: var(--input-bg); color: var(--color-accent); box-shadow: 0 0 0.375rem rgba(var(--green-rgb), 0.35), 0 0 0.625rem rgba(var(--green-rgb), 0.18) inset; transition: background .18s ease, box-shadow .18s ease, color .18s ease; }
/* Paperclip icon */
#fileUploadLabel .paperclip-icon, #dmFileUploadLabel .paperclip-icon, .file-upload-label .paperclip-icon, .dm-file-upload-label .paperclip-icon { width: var(--space-10); height: var(--space-10); stroke: var(--color-accent); stroke-width: 2.1; filter: drop-shadow(0 0 0.25rem rgba(var(--green-rgb), 0.6)); transition: stroke 160ms ease, filter 160ms ease; }
/* DM uses same inline SVG as chat; no background hacks needed */
#fileUploadLabel:hover,
#dmFileUploadLabel:hover,
.file-upload-label:hover,
.dm-file-upload-label:hover { background: var(--input-bg-focus); box-shadow: 0 0 0.5rem rgba(var(--green-rgb), 0.55), 0 0 0.875rem rgba(var(--green-rgb), 0.25) inset; color: var(--success-100); }
#fileUploadLabel:hover .paperclip-icon, #dmFileUploadLabel:hover .paperclip-icon, .file-upload-label:hover .paperclip-icon, .dm-file-upload-label:hover .paperclip-icon { stroke: var(--success-100); filter: drop-shadow(0 0 0.375rem rgba(var(--green-rgb), 0.8)); }
/* Hover icon color handled above */
/* Persistent upload size hint next to attach buttons */
.upload-hint { align-self: center; font-size: var(--font-11); color: var(--color-text-subtle); letter-spacing: var(--ls-xxxs); }
/* Base components (legacy, will be overridden below where extracted) */
/*
  components.css
  Purpose: Styles for reusable UI components and feature pages (auth, header, chat, watchlist, modals, charts, profile, filings, etc.).
  Notes:
  - Complex selectors keep comments from original for clarity.
  - Some animations are defined alongside their components to maintain readability.
*/
/* Auth: background and banner */
#authContainer, .auth-container { position: relative; background-image: radial-gradient(rgba(var(--white-rgb), 0.03) var(--space-1), transparent var(--space-1)), linear-gradient(rgba(var(--black-rgb), 0.35), rgba(var(--black-rgb), 0.65)), url('/images/gorilla.png'); background-position: center, center, left center; background-repeat: repeat, no-repeat, no-repeat; background-size: 1rem 1rem, cover, contain; min-height: 100svh; min-height: 100dvh; flex-direction: column; align-items: center; justify-content: center; padding: var(--space-48) var(--space-8) var(--space-10); overflow: hidden; }
/* Avoid forcing display on the ID selector so Tailwind `.hidden` can control visibility */
.auth-container { display: flex; }
#authContainer::before, .auth-container::before { content: 'Tribal Trading'; position: absolute; top: 0; left: 0; right: 0; height: var(--banner-height); display: flex; align-items: center; justify-content: center; color: var(--color-accent); font-weight: 900; font-size: var(--font-40); letter-spacing: var(--ls-xxs); text-shadow: var(--text-glow-green-sm); -webkit-text-stroke: var(--space-1) rgba(var(--green-stroke-dark-rgb), 0.65); background: linear-gradient(120deg, rgba(var(--green-rgb), 0.16) 10%, rgba(var(--white-rgb), 0) 22%, rgba(var(--green-rgb), 0.16) 34%) 0 0 / 220% 100% no-repeat, linear-gradient(180deg, rgba(var(--dark-10-rgb), 0.92), rgba(var(--dark-10-rgb), 0.66)); border-bottom: var(--space-1) solid var(--color-accent); box-shadow: 0 0.625rem 1.5rem rgba(var(--green-rgb), 0.18), 0 var(--space-1) 0 rgba(var(--green-rgb), 0.25) inset; animation: bannerSheen 7.2s linear infinite, bannerGlow 5.5s ease-in-out infinite alternate; z-index: 2; }
@keyframes bannerSheen { 0% { background-position: -220% 0, 0 0; } 100% { background-position: 220% 0, 0 0; } }
@keyframes bannerGlow { 0% { box-shadow: 0 0.625rem 1.375rem rgba(var(--green-rgb), 0.15), 0 0.0625rem 0 rgba(var(--green-rgb), 0.22) inset; text-shadow: var(--text-glow-green-sm); } 100% { box-shadow: 0 0.75rem 1.75rem rgba(var(--green-rgb), 0.22), 0 0.0625rem 0 rgba(var(--green-rgb), 0.28) inset; text-shadow: var(--text-glow-green-md); } }
/* Auth card */
@keyframes breathingScale { 0%, 100% { transform: scale(1) translateY(0); } 25% { transform: scale(1.02) translateY(-2px); } 37.5% { transform: scale(1.02) translateY(-2px); } 87.5% { transform: scale(1) translateY(0); } }
@keyframes breathingGlow { 0%, 100% { filter: drop-shadow(0 0 0.9375rem rgba(var(--green-rgb), 0.4)) drop-shadow(0 0 1.875rem rgba(var(--green-rgb), 0.3)) drop-shadow(0 0 2.8125rem rgba(var(--green-rgb), 0.2)); border-color: rgba(var(--green-rgb), 0.6); } 25% { filter: drop-shadow(0 0 2.5rem rgba(var(--green-rgb), 0.8)) drop-shadow(0 0 5rem rgba(var(--green-rgb), 0.6)) drop-shadow(0 0 7.5rem rgba(var(--green-rgb), 0.4)); border-color: rgba(var(--green-rgb), 0.9); } 37.5% { filter: drop-shadow(0 0 2.5rem rgba(var(--green-rgb), 0.8)) drop-shadow(0 0 5rem rgba(var(--green-rgb), 0.6)) drop-shadow(0 0 7.5rem rgba(var(--green-rgb), 0.4)); border-color: rgba(var(--green-rgb), 0.9); } 87.5% { filter: drop-shadow(0 0 0.9375rem rgba(var(--green-rgb), 0.4)) drop-shadow(0 0 1.875rem rgba(var(--green-rgb), 0.3)) drop-shadow(0 0 2.8125rem rgba(var(--green-rgb), 0.2)); border-color: rgba(var(--green-rgb), 0.6); } }
#authContent, .auth-content { margin-top: 0; align-self: center; width: min(var(--max-w-xl), 98%); margin-right: 0; background: linear-gradient(180deg, rgba(var(--dark-18-26-22-rgb), 0.95), rgba(var(--dark-12-18-16-rgb), 0.95)); border: var(--border-1) solid rgba(var(--green-rgb), 0.35); border-radius: var(--radius-xl); padding: var(--space-9) var(--space-8) var(--space-8); box-shadow: 0 1.125rem 2.625rem rgba(var(--green-rgb), 0.14), 0 0.375rem 1.25rem rgba(var(--black-rgb),  0.6), 0 0 0 var(--space-3) rgba(var(--green-rgb), 0.10) inset; backdrop-filter: blur(6px) saturate(1.02); -webkit-backdrop-filter: blur(6px) saturate(1.02); transition: box-shadow 180ms ease, transform 180ms ease, border-color 180ms ease; animation: breathingScale 8s ease-in-out infinite, breathingGlow 8s ease-in-out infinite; }
#authContent:hover, .auth-content:hover { box-shadow: 0 1.5rem 3.5rem rgba(var(--green-rgb), 0.18), 0 0.5rem 1.75rem rgba(var(--black-rgb),  0.65), 0 0 0 0.1875rem rgba(var(--green-rgb), 0.16) inset; border-color: rgba(var(--green-rgb), 0.55); transform: translateY(-1px); }
#authContent .auth-input, .auth-content .auth-input { background: var(--input-bg); border: var(--border-1) solid var(--color-border-strong); color: var(--color-text-strong); }
#authContent .auth-input:focus, .auth-content .auth-input:focus { border-color: var(--color-accent); box-shadow: var(--outline-weak); }
#authContent .btn-google, .auth-content .btn-google { border-color: rgba(var(--blue-muted-rgb), 0.6); box-shadow: var(--shadow-blue-md); }
#authContent .auth-submit, .auth-content .auth-submit { background: var(--color-accent); color: var(--color-text-inverse); border: var(--border-1) solid rgba(var(--green-rgb), 0.45); box-shadow: var(--shadow-green-md), var(--outline-weak) inset; transition: transform 150ms ease, box-shadow 150ms ease, background 150ms ease; }
#authContent .auth-submit:hover, .auth-content .auth-submit:hover { background: var(--color-accent-hover); transform: translateY(-1px); box-shadow: 0 1rem 2.125rem rgba(var(--green-rgb), 0.32), 0 0 0 0.1875rem rgba(var(--green-rgb), 0.25) inset; }
#authContent .auth-submit:active, .auth-content .auth-submit:active { transform: translateY(0); box-shadow: 0 0.375rem 1rem rgba(var(--green-rgb), 0.22) inset; }
#authContainer::after, .auth-container::after { content: ''; position: absolute; inset: 0; background-image: url('/images/gorilla.png'); background-repeat: no-repeat; background-position: left center; background-size: cover; filter: blur(18px) saturate(1.05) brightness(0.9); transform: scale(1.04); opacity: 0.9; pointer-events: none; z-index: 0; -webkit-mask-image: linear-gradient(to right, rgba(var(--black-rgb), 0) 0%, rgba(var(--black-rgb), 0) 58%, rgba(var(--black-rgb), 1) 78%, rgba(var(--black-rgb), 1) 100%); mask-image: linear-gradient(to right, rgba(var(--black-rgb), 0) 0%, rgba(var(--black-rgb), 0) 58%, rgba(var(--black-rgb), 1) 78%, rgba(var(--black-rgb), 1) 100%); }
#authContainer > *, .auth-container > * { position: relative; z-index: 1; }
@media (min-width: 56.25rem) { #authContainer, .auth-container { flex-direction: row; background-position: center, center, left center; padding: var(--space-50) var(--space-24) var(--space-10); } #authContent, .auth-content { width: min(var(--max-w-xl), 94%); margin-left: auto; margin-right: min(8vw, 6rem); padding: var(--space-10) var(--space-10) var(--space-9); } }
/* Auth callback static shell */
.auth-callback-screen {
  min-height: 100svh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-10);
  background: var(--color-bg-muted);
}
.auth-callback-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
  text-align: center;
  padding: var(--space-8);
  max-width: var(--max-w-modal);
  width: 100%;
  border-radius: var(--radius-md);
  border: var(--border-1) solid var(--color-border-strong);
  background: var(--color-bg-elevated);
  color: var(--color-text-strong);
  box-shadow: 0 1.25rem 2.5rem rgba(var(--black-rgb),  0.35);
}
.auth-callback-card .spinner {
  width: var(--space-20);
  height: var(--space-20);
  border-width: var(--space-2);
  border-color: var(--color-border);
  border-top-color: var(--color-accent);
}
/* Badge on Messages button */
.message-count-badge{ 
  position: absolute; 
  top: calc(var(--space-4) * -1); 
  right: calc(var(--space-4) * -1); 
  background: var(--color-accent); 
  color: var(--color-text-inverse); 
  border-radius: var(--radius-full); 
  min-width: var(--space-10); 
  height: var(--space-10); 
  font-size: var(--font-12); 
  font-weight: 700; 
  display: inline-flex; 
  align-items: center; 
  justify-content: center; 
  transition: transform 160ms ease, box-shadow 160ms ease;
  box-shadow: 
    0 0.125rem 0.5rem rgba(var(--green-neon-rgb), 0.3),
    0 0 0.75rem rgba(var(--green-neon-rgb), 0.2);
}
.message-count-badge.new-message {
  animation: messageNotificationPulse 4s ease-in-out, messageNotificationBounce 1.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.message-count-badge.active-notifications {
  animation: messageNotificationBreathing 4s ease-in-out infinite;
}
#directMessagesBtn.has-notifications:hover .message-count-badge, .btn-direct-messages.has-notifications:hover .message-count-badge {
  transform: scale(1.1) rotate(5deg);
  animation: messageNotificationHover 0.6s ease-in-out infinite alternate;
}
@keyframes messageNotificationHover {
  0% {
    box-shadow: 
      0 0.1875rem 0.75rem rgba(var(--green-neon-rgb), 0.5),
      0 0 1.125rem rgba(var(--green-neon-rgb), 0.3),
      0 0 0 0.125rem rgba(var(--green-neon-rgb), 0.15);
  }
  100% {
    box-shadow: 
      0 0.25rem 1rem rgba(var(--green-neon-rgb), 0.7),
      0 0 1.5rem rgba(var(--green-neon-rgb), 0.5),
      0 0 0 0.1875rem rgba(var(--green-neon-rgb), 0.25);
  }
}
/* Direct Messages (Messages) nav button: reduce horizontal padding so total visual width (including badge) matches siblings */
#directMessagesBtn, .btn-direct-messages { position: relative; padding-left: var(--space-4); padding-right: var(--space-4); flex: 0 0 auto; width: auto; }
/* Place badge just inside the top-right corner instead of far outside to preserve uniform flex gap */
#directMessagesBtn .message-count-badge, .btn-direct-messages .message-count-badge { right: var(--space-1); top: calc(var(--space-4) * -1); }
/* Status inline banner in header */
.status-banner { margin-left: var(--space-12); padding: var(--space-3) var(--space-8); border-radius: var(--radius-sm); font-size: var(--font-14); font-weight: 700; }
.status-banner.error { background: var(--color-danger); color: var(--color-text-strong); }
.status-banner.warn { background: var(--color-warning); color: var(--color-text-inverse); }
.status-banner.success { background: var(--color-accent); color: var(--color-text-inverse); }
.status-banner.info { background: var(--color-bg-muted); color: var(--color-text-strong); }
/* Moderation Dashboard */
.status-open { background-color: var(--color-warning); color: var(--color-text-inverse); }
.status-in_review { background-color: var(--color-blue); color: var(--color-text-strong); }
.status-closed { background-color: var(--color-surface-hover); color: var(--color-text); }
.action-warn { background-color: var(--color-warning); color: var(--color-text-inverse); }
.action-suspend { background-color: var(--color-warning); color: var(--color-text-inverse); }
.action-ban { background-color: var(--color-danger); color: var(--color-text-strong); }
.action-reinstate { background-color: var(--color-accent); color: var(--color-text-inverse); }
/* (modal base colors consolidated into full modal block below) */
/* Auth screens (component fields) */
.auth-title { text-align:center; font-size: clamp(1.5rem, 1.25rem + 1vw, 1.75rem); font-weight: 800; color:var(--color-accent); margin-bottom: var(--space-7); }
.auth-form { display:flex; flex-direction:column; gap:var(--space-6); }
.auth-input { width:100%; background:var(--input-bg); border:var(--border-1) solid var(--color-border-strong); border-radius:var(--radius-md); padding:var(--space-6) var(--space-7); color:var(--color-text-strong); }
.auth-input:focus{ outline:none; border-color:var(--color-accent); }
.auth-submit { width:100%; margin-top: var(--space-2); padding:var(--space-6) var(--space-7); border-radius:var(--radius-md); font-weight:800; }
.auth-divider { display:flex; align-items:center; gap:var(--space-7); margin: var(--space-9) 0; }
.auth-divider .line { flex:1; height:var(--space-0-5); background:var(--color-border-strong); }
.auth-divider .auth-or { color:var(--color-text-subtle); font-weight:600; font-size:var(--font-12); letter-spacing:.1em; }
.auth-links-row { display:flex; align-items:center; justify-content:space-between; margin-top:var(--space-7); color:var(--color-text-muted); font-size:var(--font-14); }
.auth-link { background:transparent; border:none; color:var(--color-text-muted); cursor:pointer; padding:0; }
.auth-link:hover { color:var(--color-accent); }
.auth-guest { text-align:center; margin-top: var(--space-5); }
.auth-guest-link { background:transparent; border:none; color:var(--color-accent-hover); font-weight:600; cursor:pointer; }
.auth-guest-link:hover{ color:var(--color-text-strong); }
/* Chart Components */
.chart-container { position: relative; height: clamp(16rem, 42svh, 28rem); min-height: var(--chart-min-h); background: var(--color-bg); border: var(--border-1) solid var(--color-border-strong); border-radius: var(--radius-md-plus); padding: var(--space-4); flex-grow: 1; }
.chart-timeline-buttons {
  /* Neutralize the wrapper visuals and make it a pure layout row */
  border: 0;
  background: transparent;
  border-radius: 0;
  /* Full width row aligned with chart */
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: stretch;
  gap: var(--space-2);
  padding: 0;
  width: 100%;
}
/* A11y: ensure chart aria-live region stays invisible to sighted users even if Tailwind styles are missing */
/* moved to utilities.css: #chartAriaLive rules (a11y) */
/* moved to watchlist.css: Watchlist Drawer (mobile) */
@keyframes wlBoltPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.12); } }
/* SEC Bot header scaling (title + magnifier) */
#secBotPage .sec-bot-header h3 { font-size: var(--font-28); line-height: 1.1; }
#secBotPage .sec-bot-header .icon-magnify { width: var(--space-14); height: var(--space-14); }
/* New filings chip beneath header */
#secBotPage .sec-bot-new-chip { margin: var(--space-4) auto var(--space-2); background: rgba(var(--green-rgb), 0.12); border: var(--border-1) solid rgba(var(--green-rgb), 0.35); color: var(--color-text-strong); }
#secBotPage .sec-bot-new-chip:hover { box-shadow: var(--shadow-green-sm); transform: translateY(-1px); }
@media (max-width: 47.99rem) {
  /* Stock chart: on mobile, allow the chart to flex and fill remaining space */
  #mainPage.view-stock .stock-section { display: flex; flex-direction: column; min-height: 0; }
  #mainPage.view-stock .stock-section .chart-container {
    height: auto;           /* remove fixed clamp height */
    min-height: 0;          /* allow to shrink if needed */
    flex: 1 1 auto;         /* fill the column between header/metrics and timeline */
  }
  #mainPage.view-stock .stock-section .chart-container canvas,
  #mainPage.view-stock .stock-section #stockChart {
    width: 100% !important;
    height: 100% !important;
    display: block;
  }
}
/* Detail Box */
.detail-box { background: var(--color-bg-muted); border: var(--border-1) solid var(--color-border); border-radius: var(--radius-sm); padding: var(--space-4) var(--space-5); text-align: center; min-height: var(--detail-box-min-h); display: flex; flex-direction: column; justify-content: center; }
.detail-box:hover { border-color: var(--color-accent); }
.detail-box .label { font-size: var(--font-11); color: var(--color-text-dim); display: block; margin-bottom: var(--space-1); text-transform: uppercase; font-weight: 600; }
.detail-box .value { font-size: var(--font-14); font-weight: 600; color: var(--color-text-strong); display: block; margin-bottom: var(--space-0-5); }
.detail-box .value.is-na { color: var(--color-text-subtle); }
.detail-box .value-secondary { display: block; font-size: var(--font-11); color: var(--color-text-dim); font-weight: 400; }
/* Stock section-only overrides to match original tiles */
.stock-section .detail-box { background: var(--color-bg); border: var(--border-1) solid var(--color-border-strong); border-radius: var(--radius-md); }
.stock-section .detail-box .label { color: var(--color-text-muted); }
/* Stock Header */
#stockHeader, .stock-header { background: linear-gradient(180deg, rgba(var(--dark-18-rgb), 0.92), rgba(var(--dark-10-rgb), 0.82)); border: var(--border-1) solid var(--color-border-strong); border-radius: var(--radius-md-plus); padding: var(--space-8) var(--space-8) var(--space-4); box-shadow: 0 0.625rem 1.875rem rgba(var(--black-rgb), 0.3), inset 0 var(--space-1) 0 rgba(var(--white-rgb), 0.06); }
.header-top-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-8); padding-bottom: var(--space-8); border-bottom: var(--border-1) solid var(--color-border); }
.stock-identity h2 { font-size: var(--font-28); font-weight: 700; color: var(--color-accent); margin: 0; line-height: 1; }
.stock-identity .company-name { font-size: var(--font-13); color: var(--color-text-subtle); margin-top: var(--space-2); }
.stock-actions { display: flex; gap: var(--space-3); }
.price-display-area { display: flex; flex-direction: column; align-items: flex-start; flex-shrink: 0; min-width: var(--price-display-min-w); }
.price-display-area .price { font-size: var(--font-44); font-weight: 700; color: var(--color-text-strong); line-height: 1; }
.price-display-area .delta { font-size: var(--font-16); font-weight: 600; margin-top: var(--space-4); }
.price-display-area .delta.up { color: var(--success-400); }
.price-display-area .delta.down { color: var(--danger-400); }
.stats-grid { display: flex; flex-wrap: wrap; gap: var(--space-6) var(--space-10); width: 100%; }
.stats-grid > * { flex: 1 1 var(--stats-min-w); min-width: var(--stats-min-w); }
.stat { display: flex; justify-content: space-between; font-size: var(--font-12); line-height: 1.4; }
.stat-label { color: var(--color-text-subtle); }
.stat-value { color: var(--color-text-strong); font-weight: 600; }
.stat-value.high { color: var(--success-400); }
.stat-value.low { color: var(--danger-400); }
.stat-value.volume { color: var(--color-blue); }
.stat-value.neutral { color: var(--color-text-muted); }
/* Other Pages (DM, Filings, Home) */
#homePage:not(.hidden) { display: flex; height: 100%; flex-direction: column; justify-content: center; align-items: center; padding: var(--space-10); }
.home-search-center { display: flex; align-items: center; justify-content: center; width: 100%; max-width: var(--max-w-home); margin: 0 auto; }
.home-title { font-size: clamp(2rem, 1.2rem + 4vw, 3rem); font-weight: bold; color: var(--color-accent); margin-bottom: var(--space-20); text-align: center; }
.home-search-container { display: flex; gap: var(--space-6); align-items: center; max-width: var(--max-w-home-search); width: 100%; position: relative; }
.home-search-container #homeSearchSuggestions { position: absolute; top: calc(100% + var(--space-3)); left: 0; width: 100%; }
.home-search-input { width: 100%; flex: 1; background: var(--color-bg-elevated); border: var(--space-1) solid var(--color-accent); border-radius: var(--radius-md); padding: var(--space-8) var(--space-10); color: var(--color-text-strong); font-size: var(--font-16); transition: box-shadow .18s ease, background .18s ease; box-shadow: 0 0 0.25rem rgba(var(--green-rgb), 0.25), 0 0 0.625rem rgba(var(--green-rgb), 0.15) inset; }
.home-search-input:focus { outline: none; background:var(--input-bg-focus); box-shadow: 0 0 0.4375rem rgba(var(--green-rgb), 0.55), 0 0 0.875rem rgba(var(--green-rgb), 0.25) inset; }
/* moved to buttons.css: .home-search-btn */
/* Notification containers */
#notificationContainer { position: fixed; top: calc(var(--layout-header-height) + var(--space-2-5)); right: var(--space-10); z-index: var(--z-toast); display: flex; flex-direction: column; gap: var(--space-5); }
#notificationContainer .notification { padding: var(--space-7-5); border-radius: var(--radius-md); margin: var(--space-4); color: var(--color-text-strong); font-weight: 700; box-shadow: var(--shadow-modal); border: var(--border-1) solid currentColor; animation: fadeIn 0.3s ease-out, fadeOut 0.3s ease-in 4.7s forwards; }
.notification.error { background: var(--color-danger); border-color: var(--color-danger-hover); }
.notification.success { background: var(--color-accent); color: var(--color-text-inverse); border-color: var(--color-accent); }
/* Search suggestions menu */
.suggestions { background: var(--color-surface); border: var(--border-1) solid var(--color-border); border-radius: 0 0 var(--radius-md) var(--radius-md); margin-top: calc(var(--space-1) * -1); max-height: var(--bio-max-h); overflow-y: auto; }
.suggestion-item { padding: var(--space-6) var(--space-8); cursor: pointer; border-bottom: var(--border-1) solid var(--color-border); display: flex; justify-content: space-between; align-items: center; }
.suggestion-item:last-child { border-bottom: none; }
.suggestion-item:hover { background: var(--color-surface-hover); }
.suggestion-item.selected { background: var(--color-accent); color: var(--color-text-inverse); }
.suggestion-ticker { font-weight: bold; }
.suggestion-name { color: var(--color-text-muted); }
.suggestion-item.selected .suggestion-name { color: var(--color-border-strong); }
/* Status popover */
.status-popover { position: fixed; z-index: var(--z-popover); background: var(--color-bg-elevated); border: var(--border-1) solid var(--color-accent); border-radius: var(--radius-md); width: min(92vw, var(--popover-max-w)); padding: var(--space-6) var(--space-7); box-shadow: 0 0.75rem 1.75rem rgba(var(--black-rgb), 0.6); color: var(--color-text-strong); }
.status-popover .sp-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.status-popover .sp-note { color: var(--color-warning); font-size: var(--font-12); }
.status-popover .sp-title { font-weight: 700; color: var(--color-accent); font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem); }
.status-popover .sp-close { background: transparent; border: none; color: var(--color-text-muted); font-size: var(--font-22); cursor: pointer; }
.status-popover .sp-row { display: flex; gap: var(--space-4); font-size: var(--font-13); margin-top: var(--space-4); }
.status-popover .sp-row > :first-child { flex: 0 0 12rem; }
.status-popover .sp-row > :nth-child(2) { flex: 1 1 auto; min-width: 0; }
.status-popover .sp-label { color: var(--color-text-muted); font-weight: 600; font-size: var(--font-11); text-transform: uppercase; letter-spacing: .02em; }
.status-popover .sp-actions { display: flex; justify-content: flex-end; gap: var(--space-4); margin-top: var(--space-5); flex-wrap: wrap; }
.status-popover .sp-actions .btn-primary, .status-popover .sp-actions .btn-outline { padding: var(--space-3) var(--space-5); border-radius: var(--radius-sm); border: var(--border-1) solid currentColor; }
@media (max-width: 30rem) { .status-popover .sp-row { flex-wrap: wrap; } }
/* Ensure message overlays (timestamps, actions) aren't clipped */
.message { overflow: visible; }
.spinner { width: var(--spinner); height: var(--spinner); border: var(--space-3) solid var(--color-surface); border-top-color: var(--color-accent); border-radius: 50%; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
/* Watchlist management */
/* moved to watchlist.css: subgroup & table UI */
.suggestion-menu { background: var(--color-bg); 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); z-index: var(--z-popover); max-height: var(--menu-max-h); overflow-y: auto; overflow-x: hidden; scrollbar-width: auto; }
.suggestion-menu .suggestion-item { padding: var(--space-4) var(--space-5); cursor: pointer; display: flex; -moz-column-gap: var(--space-5); column-gap: var(--space-5); align-items: baseline; }
.suggestion-menu .suggestion-item > :first-child { flex: 0 0 auto; }
.suggestion-menu .suggestion-item > :nth-child(2) { flex: 1 1 auto; min-width: 0; }
.suggestion-menu .suggestion-item .symbol { color: var(--color-accent); font-weight: 700; }
.suggestion-menu .suggestion-item .name { color: var(--color-text-muted); font-size: var(--font-12); }
.suggestion-menu .suggestion-item:hover { background: rgba(var(--green-rgb), 0.08); }
.suggestion-menu .suggestion-item.active { background: rgba(var(--green-rgb), 0.15); border-left: var(--space-3) solid var(--color-accent); }
/* Mention suggestions belong to chat module (components.chat.css) */
/* moved: .watchlist-empty-group to watchlist.css */
/* UK Filings Page */
.uk-filings-search-container { display: flex; gap: var(--space-8); align-items: center; justify-content: center; margin-bottom: var(--space-16); }
.uk-filings-input { background: var(--color-bg-muted); border: var(--border-1) solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-6) var(--space-8); color: var(--color-text-strong); font-size: var(--font-16); /* min-width removed for mobile friendliness */ transition: border-color 160ms ease; width: 100%; max-width: var(--max-w-xl); }
.uk-filings-input:focus { outline: none; border-color: var(--color-accent); }
.uk-filings-input::-moz-placeholder { color: var(--color-text-subtle); }
.uk-filings-input::placeholder { color: var(--color-text-subtle); }
/* moved to buttons.css: .uk-filings-search-btn */
.uk-filings-results { margin-top: var(--space-16); }
.uk-filings-table { background: var(--color-bg-muted); border: var(--border-1) solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; box-shadow: 0 0.25rem 0.75rem rgba(var(--black-rgb),  0.3); }
.uk-filings-table th { background: var(--color-surface); color: var(--color-accent); padding: var(--space-8); text-align: left; font-size: var(--font-14); font-weight: 600; border-bottom: var(--border-1) solid var(--color-border); }
.uk-filings-table td { padding: var(--space-8); border-bottom: var(--border-1) solid var(--color-border-strong); font-size: var(--font-14); }
.uk-filings-table tr:hover { background: var(--color-surface-hover); }
.uk-filings-table tr:last-child td { border-bottom: none; }
/* moved: watchlist unread badge styles to watchlist.css */
.sub-badge-wrap { display: inline-flex; gap: var(--space-2); margin-left: var(--space-2); }
.sub-badge { position: relative; top: 0; background:var(--color-surface); color:var(--color-text-muted); font-size:var(--font-9); padding:0 var(--space-2); border-radius:var(--radius-md-plus); line-height:var(--space-7); height:var(--space-7); display:inline-flex; align-items:center; gap:var(--space-2); }
.sub-badge.secbot-sub { background:var(--color-warning); color:var(--color-text-inverse); box-shadow:0 0 0.25rem -0.0625rem rgba(var(--amber-rgb), 0.6); }
/* Stock View Section - header area helpers already in layout/detail-box above */
.stock-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-5); }
/* Search forms grid + z-index tweaks */
.search-form-grid { display: flex; flex-wrap: wrap; gap: var(--space-4); padding: var(--space-6); background-color: var(--color-bg-muted); border-bottom: var(--border-1) solid var(--color-border); width: 100%; max-width: 100%; }
.search-form-grid > * { flex: 1 1 var(--search-grid-basis); min-width: var(--search-grid-min-w); }
.search-actions { margin-left: auto; display: flex; gap: var(--space-4); }
/* Profile page: mobile overflow protection and optional action menu */
#profileMobileMenuToggle { display: none; align-items: center; justify-content: center; width: var(--space-20); height: var(--space-20); border-radius: var(--radius-md); border: var(--border-1) solid var(--color-border-strong); background: var(--color-bg); color: var(--color-text-strong); }
#profileMobileMenuToggle svg { width: var(--btn-icon); height: var(--btn-icon); }
#profileMobileMenu { display:none; position:absolute; right: var(--space-4); top: 100%; background: var(--color-bg-elevated); border: var(--border-1) solid var(--color-accent); border-radius: var(--radius-md); box-shadow: var(--shadow-modal); z-index: var(--z-menu); min-width: var(--menu-min-w); }
#profileMobileMenu.open { display:block; }
#profileMobileMenu .menu-list { display:flex; flex-direction:column; padding: var(--space-3); gap: var(--space-2); }
@media (max-width: 47.99rem) {
  #profileMobileMenuToggle { display: inline-flex; }
}
/* Responsive tables: stack rows on small screens (no horizontal scroll) */
@media (max-width: 47.99rem) {
  table.watchlist-stock-table,
  table.min-w-full,
  table.w-full { display: block; width: 100%; }
  table.watchlist-stock-table thead,
  table.min-w-full thead,
  table.w-full thead { display: none; }
  table.watchlist-stock-table tbody tr,
  table.min-w-full tbody tr,
  table.w-full tbody tr { display: block; border-top: var(--border-1) solid var(--color-border); }
  table.watchlist-stock-table td,
  table.min-w-full td,
  table.w-full td { display: block; width: 100%; padding: var(--space-4) var(--space-5); box-sizing: border-box; }
  .overflow-x-auto { overflow-x: visible; }
}
/* Watchlist Manage toolbar wraps on mobile */
@media (max-width: 47.99rem) {
  #wlManageToolbar .flex { flex-wrap: wrap; gap: var(--space-3); }
}
.search-actions { display: flex; gap: var(--space-4); justify-content: flex-end; }
.chat-search-container, .dm-search-container, .profile-search-container, .bookmarks-search-container { position: relative; display: none; }
.chat-search-container.visible, .dm-search-container.visible, .profile-search-container.visible, .bookmarks-search-container.visible { display: block; }
/* Status chips and popover */
.status-chip { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-4); border-radius: var(--radius-sm); font-size: var(--font-13); font-weight: 700; letter-spacing: 0.02em; transition: transform 0.15s ease, box-shadow 0.15s ease; white-space: nowrap; }
.status-chip:hover { transform: translateY(-1px) scale(1.02); }
.status-chip--warning { background: var(--color-warning); color: var(--color-text-inverse); box-shadow: 0 0 0 0.125rem rgba(var(--amber-rgb), 0.45); text-shadow: var(--text-glow-amber-xs); }
.status-chip--danger { background: var(--color-danger); color: var(--color-text-strong); box-shadow: 0 0 0 0.125rem rgba(var(--danger-strong-rgb), 0.35); text-shadow: var(--text-glow-red-xs); }
.status-chip--warning:hover { box-shadow: 0 0 0 0.1875rem rgba(var(--amber-rgb), 0.65), 0 0 1.25rem rgba(var(--amber-rgb), 0.45); }
.status-chip--danger:hover { box-shadow: 0 0 0 0.1875rem rgba(var(--danger-strong-rgb), 0.6), 0 0 1.25rem rgba(var(--danger-strong-rgb), 0.4); }
.profile-status-chip { letter-spacing: 0.04em; text-transform: uppercase; }
/* ---------------------------------------------
   Responsive component refinements
   --------------------------------------------- */
/* Mobile: make grids auto-fit and inputs/buttons wrap without overflow */
@media (max-width: 47.99rem) {
  /* Stock stats grid becomes responsive to available width */
  .stats-grid > * { flex: 1 1 7.5rem; }

  /* Detail boxes already use auto-fit in layout.css; ensure consistency here too if used */
  .detail-box-grid > * { flex: 1 1 5.625rem; }

  /* UK filings search: stack controls for narrow screens */
  .uk-filings-search-container { flex-direction: column; align-items: stretch; gap: var(--space-5); }
  .uk-filings-input { width: 100%; max-width: 100%; }
  .uk-filings-search-btn { width: 100%; }
}
/* Tablet: allow 2-3 columns depending on space; keep inputs fluid */
@media (min-width: 48rem) and (max-width: 64rem) {
  .stats-grid > * { flex: 1 1 calc(33.333% - var(--space-10)); }
  .uk-filings-input { width: 100%; max-width: var(--max-w-xl); }
}
/* ---------------------------------------------------------
   Fluid / proportional sizing overrides
   Goal: prevent cramped or broken layouts when users zoom.
   Strategy:
   - Introduce a light scaling variable (--tt-scale) based on vw.
   - Convert key fixed pixel widths/heights to clamp() or relative units.
   - Allow wrapping in tight horizontal regions (.header-top-bar, timeline buttons).
   - Use auto-fit grids so cards reflow instead of overflow.
   These overrides are additive and sit at end of file for cascade priority.
---------------------------------------------------------- */
:root {
  /* Scale gently with viewport width (between ~0.85x and ~1.05x root size) */
  --tt-scale: clamp(0.85, 0.25vw + 0.8, 1.05);
  --tt-space-1: calc(0.25rem * var(--tt-scale));
  --tt-space-2: calc(0.5rem * var(--tt-scale));
  --tt-space-3: calc(0.75rem * var(--tt-scale));
  --tt-space-4: calc(1rem * var(--tt-scale));
}
/* Stock header top bar: allow wrapping instead of overflow when zoomed */
.header-top-bar {
  flex-wrap: wrap;
  gap: var(--tt-space-3) var(--tt-space-4);
}
/* Make identity + price text fluid */
.stock-identity h2 {
  font-size: clamp(1.25rem, 1rem + 1.2vw, 1.9rem);
}
.price-display-area {
  min-width: clamp(8.75rem, 18vw, 12.5rem);
}
.price-display-area .price {
  font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem);
}
/* Stats grid auto-fits instead of staying rigid at 3 columns */
.stats-grid {
  gap: var(--tt-space-3) var(--tt-space-4);
}
/* Timeline buttons scale text & allow wrap without horizontal scroll */
.chart-timeline-buttons {
  flex-wrap: nowrap;
  row-gap: 0;
}
.timeline-btn {
  font-size: clamp(0.65rem, 0.55rem + 0.5vw, 0.8rem);
  /* Increase vertical padding by an additional ~20% */
  padding: calc(0.81em + 0.18vw) calc(0.55em + 0.35vw);
  line-height: 1.1;
  /* Expand to share available width equally */
  flex: 1 1 0;
  min-width: 0;
}
/* Action button groups in stock header can wrap gracefully */
.stock-actions {
  flex-wrap: wrap;
  row-gap: var(--tt-space-2);
}
/* Very narrow widths (e.g., user zooms to 170% making section tight) */
@media (max-width: 76.25rem) { /* ~1220px (unit normalized) */
  .price-display-area { min-width: clamp(120px, 24vw, 190px); }
}
@media (max-width: 56.25rem) { /* mdDown canonical */
  .header-top-bar { flex-direction: column; align-items: flex-start; }
  .stock-actions { width: 100%; }
  .price-display-area { order: 2; }
}
/* Reduce padding on nested components when space is tight (mdDown canonical) */
@media (max-width: 56.25rem) {
  #stockHeader, .stock-header { padding: var(--space-6) var(--space-6) 0.4rem; }
  .detail-box { padding: var(--space-3) var(--space-4); }
}
/* When user zoom pushes effective viewport < smDown (desktop zoom scenario) */
@media (max-width: 47.99rem) {
  .detail-box .label { font-size: var(--font-11); }
  .detail-box .value { font-size: var(--font-12); }
  .detail-box .value-secondary { font-size: var(--font-10); }
}
/* � Epic Bug Report Button - Unique & Impressive Design � */
#reportBugBtn, .report-bug-btn {
  background: linear-gradient(45deg,
    var(--color-danger) 0%,
    var(--color-warning) 25%,
    var(--color-danger) 50%,
    var(--color-warning) 75%,
    var(--color-danger) 100%);
  background-size: 300% 300%;
  color: var(--color-text-strong);
  border: var(--space-1) solid transparent;
  border-radius: var(--radius-2xl);
  font-weight: 800;
  padding: var(--space-4) var(--space-8);
  position: relative;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  box-shadow: 
    0 0.25rem 1.25rem rgba(var(--danger-bright-rgb), 0.3),
    0 0 0.9375rem rgba(var(--orange-accent-rgb), 0.2),
    inset 0 0.0625rem 0 rgba(var(--white-rgb),  0.2);
  text-shadow: var(--text-shadow-dark-md);
  animation: bugReportPulse 4s ease-in-out infinite;
}
#reportBugBtn::before, .report-bug-btn::before {
  content: '🪲';
  position: absolute;
  top: 50%;
  left: calc(100% + var(--space-10));
  transform: translateY(-50%) scale(1.3) rotate(-90deg);
  font-size: var(--font-24);
  transition: none;
  opacity: 0;
  z-index: 3;
  filter: brightness(0.3) contrast(2);
}
#reportBugBtn::after, .report-bug-btn::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(var(--white-rgb),  0.4),
    transparent
  );
  transform: translateX(-100%);
  transition: transform 160ms ease;
}
#reportBugBtn:hover, .report-bug-btn:hover {
  background-position: 100% 0;
  transform: translateY(-3px) scale(1.08) rotate(1deg);
  box-shadow: 
    0 0.75rem 2.1875rem rgba(var(--danger-bright-rgb), 0.5),
    0 0 1.875rem rgba(var(--orange-accent-rgb), 0.4),
    inset 0 0.0625rem 0 rgba(var(--white-rgb),  0.3),
    0 0 0 0.1875rem rgba(var(--danger-bright-rgb), 0.2);
  border-color: rgba(var(--white-rgb),  0.3);
  animation: bugReportGlow 1.5s ease-in-out infinite alternate;
}
#reportBugBtn:hover::before, .report-bug-btn:hover::before {
  opacity: 1;
  animation: bugCrawl 3s ease-in-out forwards;
}
#reportBugBtn:hover::after, .report-bug-btn:hover::after {
  transform: translateX(100%);
}
#reportBugBtn:hover span, .report-bug-btn:hover span {
  color: var(--color-text-strong);
  text-shadow: var(--text-glow-white-md);
}
@media (hover: none) and (pointer: coarse) {
  #reportBugBtn:hover, .report-bug-btn:hover {
    transform: none; box-shadow: none; animation: none; border-color: rgba(var(--danger-bright-rgb), 0.5);
  }
  #reportBugBtn:hover::before, .report-bug-btn:hover::before { opacity: 0; animation: none; }
  #reportBugBtn:hover::after, .report-bug-btn:hover::after { left: -100%; }
  #reportBugBtn:hover span, .report-bug-btn:hover span { color: inherit; text-shadow: none; }
}
#reportBugBtn:active, .report-bug-btn:active {
  transform: translateY(-1px) scale(1.05) rotate(0deg);
  box-shadow: 
    0 0.375rem 1.25rem rgba(var(--danger-bright-rgb), 0.4),
    inset 0 0.1875rem 0.625rem rgba(var(--black-rgb),  0.3);
}
#reportBugBtn span, .report-bug-btn span {
  display: inline-flex;
  transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  font-weight: 900;
  letter-spacing: var(--ls-xxs);
  position: relative;
  z-index: 2;
}
@keyframes bugReportPulse {
  0%, 100% {
    background-position: 0% 0%;
    box-shadow: 
      0 0.25rem 1.25rem rgba(var(--danger-bright-rgb), 0.3),
      0 0 0.9375rem rgba(var(--orange-accent-rgb), 0.2),
      inset 0 0.0625rem 0 rgba(var(--white-rgb),  0.2);
  }
  50% {
    background-position: 100% 100%;
    box-shadow: 
      0 0.375rem 1.5625rem rgba(var(--danger-bright-rgb), 0.4),
      0 0 1.25rem rgba(var(--orange-accent-rgb), 0.3),
      inset 0 0.0625rem 0 rgba(var(--white-rgb),  0.3);
  }
}
@keyframes bugReportGlow {
  0% {
    box-shadow: 
      0 0.75rem 2.1875rem rgba(var(--danger-bright-rgb), 0.5),
      0 0 1.875rem rgba(var(--orange-accent-rgb), 0.4),
      inset 0 0.0625rem 0 rgba(var(--white-rgb),  0.3),
      0 0 0 0.1875rem rgba(var(--danger-bright-rgb), 0.2);
  }
  100% {
    box-shadow: 
      0 1rem 2.8125rem rgba(var(--danger-bright-rgb), 0.7),
      0 0 2.5rem rgba(var(--orange-accent-rgb), 0.6),
      inset 0 0.0625rem 0 rgba(var(--white-rgb),  0.4),
      0 0 0 0.3125rem rgba(var(--danger-bright-rgb), 0.3);
  }
}
@keyframes bugCrawl {
  0% {
    left: calc(100% + 20px);
    transform: translateY(-50%) scale(1.3) rotate(-90deg);
  }
  10% {
    transform: translateY(-50%) scale(1.35) rotate(-88deg);
  }
  20% {
    transform: translateY(-50%) scale(1.25) rotate(-92deg);
  }
  30% {
    transform: translateY(-50%) scale(1.4) rotate(-87deg);
  }
  40% {
    transform: translateY(-50%) scale(1.2) rotate(-93deg);
  }
  50% {
    transform: translateY(-50%) scale(1.35) rotate(-89deg);
  }
  60% {
    transform: translateY(-50%) scale(1.25) rotate(-91deg);
  }
  70% {
    transform: translateY(-50%) scale(1.4) rotate(-88deg);
  }
  80% {
    transform: translateY(-50%) scale(1.2) rotate(-92deg);
  }
  90% {
    transform: translateY(-50%) scale(1.3) rotate(-90deg);
  }
  100% {
  left: calc(var(--space-20) * -1);
    transform: translateY(-50%) scale(1.3) rotate(-90deg);
  }
}
/* Message notification animations */
@keyframes messageNotificationPulse {
  0%, 100% {
    box-shadow: 
      0 0.125rem 0.5rem rgba(var(--green-neon-rgb), 0.3),
      0 0 0.75rem rgba(var(--green-neon-rgb), 0.2);
    background: var(--color-accent);
  }
  25%, 75% {
    box-shadow: 
      0 0.25rem 1rem rgba(var(--green-neon-rgb), 0.6),
      0 0 1.5rem rgba(var(--green-neon-rgb), 0.4),
      0 0 0 0.25rem rgba(var(--green-neon-rgb), 0.2);
    background: var(--color-accent-hover);
  }
  50% {
    box-shadow: 
      0 0.375rem 1.5rem rgba(var(--green-neon-rgb), 0.8),
      0 0 2rem rgba(var(--green-neon-rgb), 0.6),
      0 0 0 0.375rem rgba(var(--green-neon-rgb), 0.3);
    background: var(--color-accent);
  }
}
@keyframes messageNotificationBounce {
  0% {
    transform: scale(1);
  }
  15% {
    transform: scale(1.4) rotate(15deg);
  }
  30% {
    transform: scale(1.1) rotate(-10deg);
  }
  45% {
    transform: scale(1.3) rotate(8deg);
  }
  60% {
    transform: scale(1.05) rotate(-5deg);
  }
  75% {
    transform: scale(1.2) rotate(3deg);
  }
  90% {
    transform: scale(1.02) rotate(-1deg);
  }
  100% {
    transform: scale(1) rotate(0deg);
  }
}
@keyframes messageNotificationBreathing {
  0%, 100% {
    transform: scale(1);
    box-shadow: 
      0 0.125rem 0.5rem rgba(var(--green-neon-rgb), 0.4),
      0 0 0.75rem rgba(var(--green-neon-rgb), 0.3);
    background: var(--color-accent);
  }
  50% {
    transform: scale(1.1);
    box-shadow: 
      0 0.25rem 1rem rgba(var(--green-neon-rgb), 0.7),
      0 0 1.5rem rgba(var(--green-neon-rgb), 0.5),
      0 0 0 0.1875rem rgba(var(--green-neon-rgb), 0.2);
    background: var(--color-accent-hover);
  }
}
/* Message button special effects when notifications are active */
#directMessagesBtn.has-notifications, .btn-direct-messages.has-notifications {
  animation: messageButtonBreathing 5s ease-in-out infinite;
}
#directMessagesBtn.has-notifications:hover, .btn-direct-messages.has-notifications:hover {
  transform: scale(1.05);
  box-shadow: 
    0 0 1.25rem rgba(var(--green-neon-rgb), 0.4),
    inset 0 0 0.9375rem rgba(var(--green-neon-rgb), 0.15);
}
#directMessagesBtn.has-notifications:active, .btn-direct-messages.has-notifications:active {
  transform: scale(0.98);
  animation: messageButtonClick 0.3s ease-out;
}
@keyframes messageButtonBreathing {
  0%, 100% {
    box-shadow: 
      0 0 0.3125rem rgba(var(--green-neon-rgb), 0.2),
      inset 0 0 0.3125rem rgba(var(--green-neon-rgb), 0.1);
    border-color: rgba(var(--green-neon-rgb), 0.2);
  }
  50% {
    box-shadow: 
      0 0 1.25rem rgba(var(--green-neon-rgb), 0.4),
      inset 0 0 0.9375rem rgba(var(--green-neon-rgb), 0.2);
    border-color: rgba(var(--green-neon-rgb), 0.4);
  }
}
@keyframes messageButtonClick {
  0% {
    box-shadow: 
      0 0 1.5625rem rgba(var(--green-neon-rgb), 0.6),
      inset 0 0 1.25rem rgba(var(--green-neon-rgb), 0.2);
  }
  100% {
    box-shadow: 
      0 0 0.3125rem rgba(var(--green-neon-rgb), 0.2),
      inset 0 0 0.3125rem rgba(var(--green-neon-rgb), 0.1);
  }
}
/* SEC Directory modal extracted to modals.css */
/* Header compactness + autoscale anchors to prevent wrapping */
.message-with-reaction {
  position: relative;
  padding-right: calc(var(--space-6) + 1.75rem);
}
.message-reaction {
  position: absolute;
  top: 50%;
  right: var(--space-3);
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  opacity: 0;
  transition: opacity 0.18s ease, transform 0.18s ease;
  pointer-events: auto;
}
.message-with-reaction:hover .message-reaction,
.message-reaction:focus-within {
  opacity: 1;
}
.message-reaction--has-count {
  opacity: 1;
}
.message-reaction__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--btn-icon);
  height: var(--btn-icon);
  border-radius: var(--radius-full);
  border: none;
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: color 0.18s ease, transform 0.18s ease;
}
.message-reaction__button:hover,
.message-reaction__button:focus-visible {
  color: var(--color-accent);
}
.message-reaction__button:focus-visible {
  outline: 0.125rem solid var(--color-accent);
  outline-offset: var(--space-1);
}
.message-reaction__button--active {
  color: var(--color-accent);
}
.message-reaction__icon {
  width: var(--icon-xs);
  height: var(--icon-xs);
  pointer-events: none;
}
.message-reaction__count {
  font-size: var(--font-12);
  font-weight: 600;
  color: var(--color-text-muted);
  pointer-events: none;
}
.message-reaction--active .message-reaction__count {
  color: var(--color-accent);
}
.message-reaction--mine .message-reaction__button {
  cursor: default;
  opacity: 0.4;
}
.message-reaction--mine.message-reaction--has-count .message-reaction__button {
  opacity: 1;
}
.message-reaction--pending .message-reaction__button {
  cursor: wait;
  opacity: 0.7;
}
@media (max-width: 40rem) {
  .message-with-reaction {
    padding-right: calc(var(--space-5) + 1.5rem);
  }
  .message-reaction {
    right: var(--space-2);
  }
}
/* Chat cross-post styling */
.chat-ticker-link { color: var(--color-blue); cursor: pointer; transition: color 0.18s ease; font-weight: 600; }
.chat-ticker-link:hover, .chat-ticker-link:focus { color: var(--color-blue-hover); }
.chat-crosspost-banner {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  border: var(--border-1) solid rgba(var(--blue-rgb), 0.35);
  border-radius: var(--radius-sm);
  background: rgba(var(--blue-rgb), 0.08);
  transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.chat-crosspost-banner:hover, .chat-crosspost-banner:focus {
  background: rgba(var(--blue-rgb), 0.12);
  border-color: rgba(var(--blue-rgb), 0.55);
  box-shadow: 0 0 0 0.125rem rgba(var(--blue-rgb), 0.2);


/* Removed: Mobile chat stock-info drawer and trigger */

/* Login page background on mobile: visible and scaled */
@media (max-width: 47.99rem) {
  #authContainer, .auth-container { background-size: cover; background-position: center; min-height: 100svh; min-height: 100dvh; }
}

/* DM thread height is governed by grid rows; avoid max-height caps */

/* Moderator reports flex table */
.reports-list { display: flex; flex-direction: column; }
.reports-row { display: flex; align-items: stretch; border-bottom: var(--border-1) solid var(--color-border); }
.reports-cell { padding: var(--space-6); min-width: 0; }
.reports-cell--details { flex: 1 1 28rem; }
.reports-cell--appeal { flex: 1 1 20rem; }
.reports-cell--content { flex: 1 1 20rem; }
.reports-cell--actions { flex: 0 0 14rem; display: flex; flex-direction: column; gap: var(--space-2); }

/* Guide tables (in-modal) forced to flex layout */
.guide-flex-list { display: flex; flex-direction: column; width: 100%; }
.guide-flex-row { display: flex; align-items: flex-start; gap: var(--space-4); border-bottom: var(--border-1) solid var(--color-border); padding: var(--space-2) 0; flex-wrap: nowrap; }
.guide-flex-code { flex: 0 0 5.5rem; font-weight: 700; color: var(--color-accent); padding: var(--space-3) var(--space-4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.guide-flex-desc { flex: 1 1 auto; padding: var(--space-3) var(--space-4); min-width: 0; }

/* Filings: mobile filters compact grid and condensed single-row list feel */
@media (max-width: 47.99rem) {
  .daily-filters-grid { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: center; }
  /* legacy table overrides removed in favor of flex list */
  .filings-form { font-weight: 700; font-size: var(--font-14); }
  .filings-company { font-size: var(--font-13); color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .filings-date { display: inline-flex; align-items: center; gap: var(--space-2); white-space: nowrap; }
  .filings-date__day { font-size: var(--font-12); color: var(--color-text-subtle); }
  .filings-date__time { font-size: var(--font-11); color: var(--color-text-muted); border: none; padding: 0; }
  .filings-date__chevron { opacity: 0.5; }

  /* SEC Filings page: ensure each entry remains a single table row on mobile.
     Override generic mobile table-stacking for this page and permit horizontal scroll if needed. */
  #secFilingsPage .filings-card__table { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  /* no special overrides for flex list on SEC page */
}

/* Bookmarks & Profile: clamp message text to 2 lines on mobile */
@media (max-width: 47.99rem) {
  .bookmark-open,
  .profile-msg-text,
  .profile-msg-content { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; max-height: 3em; }
  #bookmarksList > div { padding: var(--space-3) var(--space-4); }
}
}
.chat-crosspost-banner:focus-visible {
  outline: 0.125rem solid var(--color-blue);
  outline-offset: var(--space-1);
}
/* Mobile-only segmented view toggle (Chat | Details) inside chat header */
@media (max-width: 47.99rem) {
  /* Force the mobile toggle visible on small screens even if a generic
     `.hidden { display:none !important; }` class is present. */
  /* moved: mobile view toggle styles extracted to components.chat.css */
}
/* Chatboard height management and scrolling */
@media (min-width: 48rem) {
  /* Chat section height management moved to layout.css */
  
  /* Messages container with proper scrolling */
  #messagesContainer,
  .messages-container {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-gutter: stable;
  }
  
  /* Chat input area should not grow */
  #chatInputArea {
    flex: 0 0 auto;
  }
  
  /* Chat header should not grow */
  .chat-header {
    flex: 0 0 auto;
  }
  
  
  /* No fixed caps; flex layout handles visible search height naturally */
}
/* Mobile chatboard height management */
@media (max-width: 47.99rem) {
  /* Let flexbox size the message list to fill available space.
     Avoid fixed max-heights which can leave unused gaps on devices
     with dynamic viewport units (address bars, safe areas). */
  #messagesContainer,
  .messages-container {
    height: auto;
    max-height: none;
    overflow-y: auto;
    scrollbar-gutter: stable;
    flex: 1 1 auto;
    min-height: 0;
  }

  /* When the inline search panel is visible, its natural height will
     reduce the flex space for #messagesContainer; no explicit cap needed. */
  .chat-search-container.visible ~ #messagesContainer { max-height: none; }
}
/* Stock price delayed-data badge (high-contrast pill under price) */
.data-delay-badge { 
  margin-top: var(--space-1);
  background: var(--color-accent);
  color: var(--color-text-inverse);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  font-size: var(--font-10);
  font-weight: 700;
  letter-spacing: .02em;
  white-space: nowrap;
}
/* Feature-scoped components (override legacy where duplicated) */
/* Header & Navigation (extracted from components.css) */
.main-header {
  background: linear-gradient(135deg, var(--color-bg-muted), var(--color-surface));
  padding: 0 var(--space-8) 0 var(--space-5); /* tighter left padding to shift logo left */
  box-shadow: 0 0.125rem 0.625rem rgba(var(--black-rgb), 0.5);
  border-bottom: var(--space-1) solid var(--color-accent);
  position: relative;
  z-index: var(--z-dropdown); /* elevate above main content so header suggestions overlay; stay below modals */
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-7-5);
  height: var(--header-row-height); /* further reduced to tighten gap below buttons */
}
/* Mobile header hamburger toggle */
#mobileMenuToggle, .mobile-menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: var(--space-20);
  height: var(--space-20);
  border-radius: var(--radius-md);
  border: var(--border-1) solid var(--color-border-strong);
  background: var(--color-bg);
  color: var(--color-text-strong);
}
#mobileMenuToggle svg, .mobile-menu-toggle svg { width: var(--btn-icon); height: var(--btn-icon); }
@media (max-width: 56.25rem) {
  #mobileMenuToggle svg { width: calc(var(--btn-icon) + 2px); height: calc(var(--btn-icon) + 2px); }
}
/* (removed legacy #mobileMenuPanel pattern in favor of #mobileMainPanel drawer) */
/* On small screens, show left and right toggles and collapse header actions into panels */
@media (max-width: 56.25rem) {
  .mobile-menu-toggle, #mobileMenuToggle { display: inline-flex; }
  /* Keep search visible on mobile: show nav but hide non-search items */
  .header-nav { display: grid; grid-template-columns: 1fr; }
  .header-nav > :not(.header-search) { display: none; }
  /* Reduce header gap so search sits closer to the gorilla image */
  .main-header { gap: var(--space-2); }
  #logo { margin: 0; }
  /* Left watchlist toggle */
  #watchlistToggle { display: inline-flex; align-items: center; justify-content: center; width: var(--space-20); height: var(--space-20); border-radius: var(--radius-md); border: var(--border-1) solid var(--color-border-strong); background: var(--color-bg); color: var(--color-text-strong); }
  #watchlistToggle svg { width: var(--btn-icon); height: var(--btn-icon); }
  /* (removed unused .mobile-center-search styles; header CSS keeps search visible) */
}
/* Right-side main menu sliding drawer (mobile only) */
@media (max-width: 56.25rem) {
  /* Further reduce panel width by ~20% (was ~60vw) */
  #mobileMainPanel, .drawer-panel { display: none; position: fixed; inset: 0 0 0 auto; width: min(48vw, var(--menu-max-w)); max-width: 56vw; background: var(--color-bg-elevated); border-left: var(--border-1) solid var(--color-accent); z-index: var(--z-drawer); box-shadow: var(--shadow-modal); padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); }
  #mobileMainPanel.open, .drawer-panel.open { display: flex; flex-direction: column; }
  #mobileMainPanel .menu-list, .drawer-panel .menu-list { display: flex; flex-direction: column; padding: var(--space-3) var(--space-5); gap: 0; flex: 1 1 auto; min-height: 0; overflow-y: auto; align-items: stretch; }
  /* Remove outer framing lines; per-item separators instead */
  #mobileMainPanel .menu-list::before,
  #mobileMainPanel .menu-list::after { content: none !important; display: none !important; }
  #mobileMainPanel #mobileMenuGorilla, .drawer-panel #mobileMenuGorilla { display: block; width: 100%; height: auto; -o-object-fit: cover; object-fit: cover; margin-top: auto; border-top: var(--border-1) solid var(--color-border); }

  /* Enlarge menu buttons by ~30% inside the right drawer only */
  #mobileMainPanel .menu-list button,
  #mobileMainPanel .menu-list a {
    font-size: calc(var(--font-14) * 1.3);
    padding: var(--space-4) 0;
    width: 100%;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    color: var(--color-accent) !important; /* green text */
    text-align: center;
    justify-content: center;
  }
  /* Horizontal separators between items, plus underline for last item (e.g., Logout) */
  #mobileMainPanel .menu-list > * { border-top: var(--border-1) solid var(--color-accent); }
  #mobileMainPanel .menu-list > *:first-child { border-top: none; }
  #mobileMainPanel .menu-list > *:last-child { border-bottom: var(--border-1) solid var(--color-accent); }

  /* First top item ('Tribal Trading') should not be boxed */
  #mobileMainPanel #menuHomeBtn {
    background: transparent;
    border: none;
    padding: var(--space-3) 0;
    color: var(--color-accent);
    font-weight: 800;
    text-align: center;
    /* Make it 40% larger than standard menu items (which are 1.3x base) → 1.3 * 1.4 ≈ 1.82 */
    font-size: calc(var(--font-14) * 1.82);
  }
  #mobileMainPanel #menuHomeBtn:hover { background: transparent; color: var(--color-accent); }
}
/* Extra small device polish */
@media (max-width: 30rem) {
  .main-header { padding-left: var(--space-4); padding-right: var(--space-4); }
  .main-header h1 { font-size: var(--font-20); }
  #mobileMenuToggle, .mobile-menu-toggle { width: var(--space-16); height: var(--space-16); }
  #mobileMenuPanel .menu-list button, .mobile-menu-panel .menu-list button { padding: var(--space-3) var(--space-4); }
}
/* Header logo: hide image on mobile to remove gorilla icon */
#logoImg { display: none; width: var(--space-10); height: var(--space-10); -o-object-fit: contain; object-fit: contain; }
@media (max-width: 56.25rem) {
  /* Keep logo image hidden on small screens */
  #logoImg { display: none; }
  /* Visually hide the logo text on mobile */
  #logoText {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
}
/* Left button becomes green $ icon on mobile; right menu matches size */
@media (max-width: 56.25rem) {
  #watchlistToggle {
    color: var(--color-accent);
    background: transparent;
    border: none;
    box-shadow: none;
    width: calc(var(--header-row-height) - var(--space-6));
    height: calc(var(--header-row-height) - var(--space-6));
    border-radius: 0;
    padding: 0;
    align-self: flex-start; /* push to top */
    margin-left: calc(-1 * var(--space-5)); /* pull into far left corner */
  }
  #watchlistToggle svg { display: none; }
  #watchlistToggle::before {
    content: '$';
    font-weight: 800;
    /* Keep large but proportional to reduced button size */
    font-size: calc(var(--header-row-height) - var(--space-10));
    line-height: 1;
  }
  /* match sizes between left and right toggles */
  #mobileMenuToggle {
    width: var(--space-20);
    height: var(--space-20);
  }
}
/* Keep nav items on a single row; search input will shrink responsively */
.header-nav { flex-wrap: nowrap; row-gap: 0; overflow-x: auto; overflow-y: visible; container-type: inline-size; scrollbar-gutter: stable both-edges; -webkit-overflow-scrolling: touch; }
.header-nav .relative {
  flex-grow: 1;
  min-width: var(--search-min-w); /* Give search more base width */
  flex-shrink: 1; /* Allow search to shrink */
}
/* Add a small gap between the search input and the Go button */
.header-search {
  gap: var(--space-2);
}
.header-nav button, .header-nav a {
  flex-shrink: 0; /* Prevent buttons from shrinking */
  white-space: nowrap; /* Keep button text on one line */
}
/* Base: keep buttons inline; shift right only on wider viewports */
.header-nav > .btn-go { margin-left: 0; }
/* Let the search container truly dominate available width */
.header-nav > .relative { flex: 1 1 auto; max-width: none; }
/* Container query: when header nav is tight, reduce minimums locally without global breakpoints */
@container (max-width: 36rem) {
  .header-nav > .relative { min-width: 0; }
}
/* On wider screens, push the button group to the right */
@media (min-width: 56.25rem) {
  .header-nav > .btn-go { margin-left: auto; }
}
/* Header nav sizing: uniform vertical inset (4px) instead of stretch */
.main-header .header-left, .main-header .header-nav { flex-wrap: nowrap; row-gap: 0; overflow: visible; }
/* Apply same top/bottom margin to every immediate child for consistent height */
/* Keep header-left children aligned universally */
.main-header .header-left > * { margin-top:var(--space-1); margin-bottom:0; display:flex; align-items:center; }
/* For nav children, only assert display on desktop so we don't override
   the mobile rule that hides non-search items. */
@media (min-width: 56.25rem) {
  .main-header .header-nav > * { margin-top:var(--space-1); margin-bottom:0; display:flex; align-items:center; }
}
/* Normalize buttons: now handled in buttons.css via class-first selectors */
/* Search input: keep internal padding but align with siblings */
.main-header .ticker-input { height:auto; padding-top:var(--space-5); padding-bottom:var(--space-5); align-self:center; }
/* Strong mobile safeguard: never show full nav on small screens.
   This reinforces the earlier rule inside the mobile block in case any
   later declarations (from utilities or Tailwind resets) attempt to
   force a display value on header nav children. */
@media (max-width: 56.25rem) {
  .main-header .header-nav > :not(.header-search) { display: none !important; }
  /* Explicitly cover common direct child types in case of future class changes */
  .main-header .header-nav > a,
  .main-header .header-nav > button,
  .main-header .header-nav > [role="link"] { display: none !important; }

  /* Enlarge the Go button inside the header search on mobile for better tap target */
  .header-search .btn-go {
    /* Match search input height by stretching; center content */
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    height: auto;
    /* Reduce width ~40% vs earlier by trimming horizontal padding */
    padding: 0 var(--space-10);
    font-size: var(--font-14);
    border-radius: var(--radius-md);
    min-width: 0;
  }
}
/* Profile Page Tweaks (extracted from components.css) */
.profile-grid { align-items: start; margin-top: 0; }
.profile-grid > *:first-child { margin-top: 0; }
/* Mobile: ensure stacked columns use full width */
@media (max-width: 47.99rem) {
  .profile-grid { align-items: stretch; }
  .profile-left, .profile-main { width: 100%; max-width: none; }

  /* Mobile: make the profile filter bar behave like DM search */
  #profilePage .profile-search-container { position: sticky; top: 0; z-index: var(--z-sticky); background: var(--color-bg); display: block; }
  #profilePage .profile-search-container:not(.visible) { height: 0; max-height: 0; padding-top: 0 !important; padding-bottom: 0 !important; overflow: hidden; }
  #profileChatSearchContainer { position: relative; padding-top: var(--space-5); padding-bottom: var(--space-5); }
  #profileChatSearchContainer::before, #profileChatSearchContainer::after { content: ''; position: absolute; left: 0; right: 0; height: var(--space-1); background: var(--color-accent); box-shadow: 0 0 0.375rem rgba(var(--green-rgb), 0.6), 0 0 0.75rem rgba(var(--green-rgb), 0.3); pointer-events: none; }
  #profileChatSearchContainer::before { top: 0; }
  #profileChatSearchContainer::after { bottom: 0; }
  #profileChatSearchContainer:not(.visible)::before,
  #profileChatSearchContainer:not(.visible)::after { display: none !important; content: none !important; }
}
/* Profile page layout: proper column width distribution */
@media (min-width: 48rem) {
  /* Ensure profile grid takes full width */
  .profile-grid {
    width: 100%;
    display: flex;
    flex-direction: row;
  }
  
  .profile-left { 
    flex: 0 1 30%; 
    width: 30%;
    max-width: 30%;
    min-width: 0;
  }  /* Fixed width left column (30%) */
  .profile-main { 
    flex: 0 1 70%; 
    width: 70%;
    max-width: 70%;
    min-width: 0; 
  }             /* Remaining space for right column (70%) */
}
.profile-new-msg-highlight { position: relative; animation: profileNewMsgFlash 1800ms ease-out 1; }
@keyframes profileNewMsgFlash { 0% { box-shadow: 0 0 0 0 rgba(var(--green-rgb), 0.55); background-color: rgba(var(--green-rgb), 0.12); } 40% { box-shadow: 0 0 0 0.375rem rgba(var(--green-rgb), 0.25); } 70% { box-shadow: 0 0 0 0.125rem rgba(var(--green-rgb), 0.30); } 100% { box-shadow: 0 0 0 0 rgba(var(--green-rgb), 0); background-color:transparent; } }
#bioTextarea { min-height: var(--bio-min-h); height: var(--bio-h); max-height: var(--bio-max-h); resize: vertical; }
.profile-messages { display: flex; flex-direction: column; gap: var(--space-2); }
/* (reverted: do not force local vertical scroll on desktop) */
.profile-messages .profile-message { padding: var(--space-4) var(--space-6); margin-bottom: var(--space-2); border-radius: var(--radius-md); border: var(--border-1) solid var(--color-border); background: var(--color-surface); transition: border-color 0.2s ease, box-shadow 0.2s ease; }
.profile-messages .profile-message:hover { border-color: var(--color-accent); box-shadow: var(--shadow-green-xs); }
.profile-messages .profile-message > div:first-child { margin-bottom: var(--space-1); font-size: var(--font-14); line-height: 1.3; }
.profile-messages .profile-msg-content { font-size: var(--font-16); padding: var(--space-3) var(--space-6); line-height: 1.4; min-height: var(--space-18); display: flex; align-items: center; gap: var(--space-4); border-radius: var(--radius-sm); background: rgba(var(--green-rgb), 0.12); color: var(--color-text-strong); border: var(--border-1) solid rgba(var(--green-rgb), 0.35); transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease; }
.profile-messages .profile-message:hover .profile-msg-content { background: rgba(var(--green-rgb), 0.15); border-color: rgba(var(--green-rgb), 0.6); box-shadow: 0 0 0 0.125rem rgba(var(--green-rgb), 0.35) inset, var(--shadow-green-xs); transform: translateY(-2px); }
.profile-messages .profile-message:active .profile-msg-content { background: rgba(var(--green-rgb), 0.08); transform: translateY(-1px); box-shadow: 0 0 0 0.0625rem rgba(var(--green-rgb), 0.35) inset; }
.profile-messages .profile-msg-ticker, .profile-messages .profile-msg-username { font-size: var(--font-18); font-weight: 700; line-height: 1.2; }
.profile-messages .msg-actions button { font-size: var(--font-16); padding: var(--space-3) var(--space-5); line-height: 1.2; font-weight: 600; }
.profile-messages .profile-msg-list { display: flex; flex-direction: column; gap: var(--space-2); }
.profile-messages .profile-msg-ts { font-size: var(--font-12); opacity: 0.7; }
.profile-message .profile-msg-content--profile { align-items: flex-start; }
.profile-message .profile-msg-reaction-anchor { display: inline-flex; align-items: center; }
.profile-message .profile-msg-text { display: block; flex: 1; }
.profile-message .message-with-reaction { position: static; padding-right: 0; }
.profile-message .message-reaction { position: static; transform: none; opacity: 1; margin: 0; display: inline-flex; align-items: center; gap: var(--space-1); transition: color 0.18s ease; }
.profile-message .message-reaction__button { width: var(--btn-icon-sm); height: var(--btn-icon-sm); }
.profile-message .message-reaction__count { margin-left: var(--space-1); }
/* SEC Bot filings hover/focus states for cards in profile feed */
.profile-messages .profile-message.is-clickable { transition: background 0.2s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease; }
.profile-messages .profile-message.is-clickable:hover {
  background: rgba(var(--green-rgb), 0.06);
  border-color: rgba(var(--green-rgb), 0.55);
  box-shadow: var(--shadow-green-xs);
  transform: translateY(-1px);
}
.profile-messages .profile-message.is-clickable:focus,
.profile-messages .profile-message.is-clickable:focus-visible {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: var(--outline-strong);
}
/* Filings UI (extracted from components.css) */
/* Daily Filings: filter pills */
.df-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-md-plus);
  border: var(--border-1) solid var(--color-border-strong);
  background: radial-gradient(120% 120% at 50% 0%, rgba(var(--green-rgb), 0.12) 0%, rgba(var(--green-rgb), 0.06) 28%, rgba(var(--black-rgb), 0) 60%), var(--color-bg-elevated);
  color: var(--color-accent);
  font-size: var(--font-12);
  font-weight: 800;
  letter-spacing: var(--ls-xs);
  cursor: pointer;
  transition: transform 120ms ease, box-shadow 160ms ease, background 160ms ease, color 160ms ease, border-color 160ms ease;
  /* Reserve space for the largest box-shadow to prevent layout shift */
  box-shadow: 0 0 1.25rem rgba(var(--green-rgb), 0); 
  will-change: transform, box-shadow;
}
.df-pill::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(110deg, rgba(var(--white-rgb), 0) 35%, rgba(var(--white-rgb), 0.35) 50%, rgba(var(--white-rgb), 0) 65%);
  transform: translateX(-140%);
  opacity: 0; pointer-events: none;
}
.df-pill:hover::after { animation: dfSheen 900ms ease forwards; }
.df-pill:hover { transform: translateY(-1px); box-shadow: 0 0.375rem 1rem rgba(var(--green-rgb), 0.14); border-color: var(--color-accent); }
.df-pill:focus { outline: none; box-shadow: var(--outline-strong); }
.df-pill:active { transform: translateY(0); }
.df-pill.is-selected {
  background: linear-gradient(180deg, var(--color-accent), var(--color-accent-hover));
  color: var(--color-text-inverse);
  border-color: var(--color-accent);
  /* The animation will take over the box-shadow property */
  animation: dfPulseBoxShadow 2000ms ease-in-out infinite;
}
.df-pill.is-selected:hover { transform: translateY(-1px); }
.df-pill.df-pressed { transform: translateY(0); }
@keyframes dfSheen { 0% { opacity: 0; transform: translateX(-140%); } 10% { opacity: 1; } 100% { opacity: 0; transform: translateX(140%); } }
/* This animation now smoothly transitions the color and size of the pre-allocated shadow space */
@keyframes dfPulseBoxShadow { 
  0%,100% { box-shadow: 0 0 0.75rem rgba(var(--green-rgb), 0.2); } 
  50% { box-shadow: 0 0 1.25rem rgba(var(--green-rgb), 0.45); } 
}
@media (prefers-reduced-motion: reduce) {
.df-pill, .df-pill:hover, .df-pill:focus, .df-pill:active { transition: none; }
.df-pill::after, .df-pill:hover::after { animation: none; }

/* Touch devices: avoid sticky hover on pills */
@media (hover: none) and (pointer: coarse) {
  .df-pill:hover { 
    transform: none; 
    box-shadow: 0 0 1.25rem rgba(var(--green-rgb), 0); 
    border-color: var(--color-border-strong);
  }
  .df-pill:hover::after { animation: none; }
}
}
/* Daily Filings header minor tweaks */
.daily-filings-header { box-shadow: 0 0.375rem 1.125rem rgba(var(--black-rgb), 0.25); overflow: visible; }
.daily-filings-header h2 { text-shadow: var(--text-glow-green-sm); }
/* Daily Filings: filters aligned right in two tight rows */
.daily-filters-grid { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-3); overflow-x: hidden; overflow-y: visible; white-space: nowrap; padding-top: var(--space-1); padding-bottom: var(--space-1); scrollbar-width: auto; }
.daily-filters-grid::-webkit-scrollbar { height: var(--space-4); }
.daily-filters-grid::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: var(--radius-md); }
.daily-filters-grid .df-pill { margin: 0; padding: var(--space-4) var(--space-6); border-radius: var(--radius-lg); font-size: var(--font-13); }
/* Ensure 'Form Types:' button height matches df-pill across pages */
.daily-filters-grid .form-types-btn { padding: var(--space-4) var(--space-6); font-size: var(--font-13); line-height: 1; }
/* SEC Filings page: center Form Types and Clear on mobile */
@media (max-width: 56.25rem) {
  /* Center the top row that contains the Form Types button and the pills */
  .filings-filters .filters-top-row { justify-content: center; }
  /* Ensure the pills block (which contains Clear when date range is hidden) is also centered */
  .filings-filters .daily-filters-grid { justify-content: center; }
}
/* Daily (New) Filings page — mobile layout cleanup: make filters wrap & center */
@media (max-width: 56.25rem) {
  /* Move the right filters block under the heading and center it */
  #dailyFiltersRight { 
    margin-left: 0; 
    flex: 0 0 100%; 
    justify-content: center; 
    flex-wrap: wrap; 
    gap: var(--space-2) var(--space-3);
  }
  /* Row 1: Keep the heading on a single line and centered */
  .filings-card--live .daily-filings-header .h-8 { width: 100%; justify-content: center; }
  .filings-card--live .daily-filings-header h2 { white-space: nowrap; text-align: center; font-size: var(--font-18); }

  /* Children of #dailyFiltersRight stack into rows using flex order */
  .filings-card--live #dailyFormFilters { order: 1; flex: 0 0 100%; }
  .filings-card--live #dailyClearFilters { order: 2; flex: 0 0 100%; display: flex; justify-content: center; }

  /* Let all filter pills wrap to multiple lines, remove clipping */
  .filings-card--live .daily-filters-grid { 
    justify-content: center; 
    white-space: normal; 
    overflow: visible; 
    flex-wrap: wrap; 
    row-gap: var(--space-2); 
    -moz-column-gap: var(--space-2); 
         column-gap: var(--space-2);
    padding-top: var(--space-1);
    padding-bottom: var(--space-1);
  }
  /* Row 2: Put Form Types on its own centered row inside the grid */
  .filings-card--live .daily-filters-grid .form-types-btn { 
    flex: 0 0 100%; 
    display: flex; 
    justify-content: center; 
    order: 0; 
  }
  /* Row 3+: Pills follow after the Form Types row */
  .filings-card--live .daily-filters-grid .df-pill { order: 1; }
  /* Nudge Clear to its own line when space is tight and center it */
  #dailyClearFilters { 
    width: auto; 
    align-self: center; 
    margin-top: var(--space-2);
  }
}
/* Better looking Clear button for Daily Filings */
.df-clear-btn {
  background: rgba(var(--green-rgb), 0.12);
  color: var(--color-accent);
  border: var(--border-1) solid rgba(var(--green-rgb), 0.5);
  border-radius: var(--radius-md-plus);
  padding: var(--space-4) var(--space-6);
  font-size: var(--font-12);
  font-weight: 800;
  letter-spacing: .02em;
  transition: background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .12s ease;
}
.df-clear-btn:hover { background: var(--color-accent); color: var(--color-text-inverse); border-color: var(--color-accent); box-shadow: 0 0.625rem 1.5rem rgba(var(--green-rgb), 0.25); transform: translateY(-1px); }
.df-clear-btn:active { transform: translateY(0); box-shadow: none; }
/* Mobile: prevent sticky green after tap; flash green only while pressed */
@media (hover: none) and (pointer: coarse) {
  .df-clear-btn:hover,
  .df-clear-btn:focus,
  .df-clear-btn:focus-visible {
    background: rgba(var(--green-rgb), 0.12);
    color: var(--color-accent);
    border-color: rgba(var(--green-rgb), 0.5);
    box-shadow: none;
    transform: none;
  }
  .df-clear-btn:active {
    background: var(--color-accent);
    color: var(--color-text-inverse);
    border-color: var(--color-accent);
  }
}
/* Generic filings search and lists (migrated) */
.filings-search { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-4); }
.filings-search__input { flex: 1 1 12rem; width: min(var(--menu-max-w), 100%); background: var(--color-bg-muted); border: var(--border-1) solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-4) var(--space-6); color: var(--color-text-strong); transition: border-color 0.2s ease, box-shadow 0.2s ease; }
.filings-search__input:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 0.125rem rgba(var(--green-rgb), 0.35); }
.filings-search__button { background: var(--color-surface); color: var(--color-text-strong); border: var(--border-1) solid var(--color-accent); border-radius: var(--radius-md); padding: var(--space-3) var(--space-6); font-weight: 600; flex-shrink: 0; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; }
.filings-search__button:hover,
.filings-search__button:focus-visible { background: var(--color-accent); color: var(--color-bg); border-color: var(--color-accent); box-shadow: 0 0.375rem 1.25rem rgba(var(--green-rgb), 0.22); outline: none; }
.filings-search__latest { background: var(--color-surface); color: var(--color-accent); border: var(--border-1) solid var(--color-accent); border-radius: var(--radius-md); padding: var(--space-3) var(--space-6); font-weight: 600; flex-shrink: 0; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease; }
.filings-search__latest:hover,
.filings-search__latest:focus-visible { background: var(--color-accent); color: var(--color-text-inverse); border-color: var(--color-accent); outline: none; }
.filings-filters { background: var(--color-bg-muted); border: var(--border-1) solid var(--color-border); border-radius: var(--radius-md); }
.filings-filters--compact { display: block; width: -moz-fit-content; width: fit-content; max-width: 100%; margin: 0 auto var(--space-6); text-align: center; }
@supports not ((width: -moz-fit-content) or (width: fit-content)) {
  /* fallback: allow full width on legacy engines */
  .filings-filters--compact { width: auto; }
}
@media (min-width: 40.0625rem) {
  .filings-filters--compact { text-align: left; }
}
@media (max-width: 40rem) {
  .filings-filters--compact { display: block; width: 100%; }
}
.filings-results { margin-top: var(--space-6); }
.filings-controls-row { display:flex; flex-direction: column; align-items: stretch; gap: var(--space-4); }
/* Keep actions next to date inputs (not far right) on medium+ screens */
@media (min-width: 48rem) {
  .filings-controls-row { flex-direction: row; align-items: center; justify-content: flex-start; }
  .filings-controls-row > .filings-controls-actions { margin-left: var(--space-6); display: flex; align-items: center; flex-wrap: nowrap; white-space: nowrap; }
}
.filings-card { position: relative; }
/* Flex-based filings list (replaces tables) */
.filings-list { width: 100%; display: flex; flex-direction: column; }
.filings-list__head { display: flex; align-items: center; gap: var(--space-2); background: var(--color-surface); color: var(--color-accent); padding: var(--space-5) var(--space-6); border-bottom: var(--border-1) solid var(--color-border-strong); font-size: var(--font-13); font-weight: 600; }
.filings-list__row { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-6); border-bottom: var(--border-1) solid var(--color-border-strong); cursor: pointer; }
.filings-list__row:hover { background: rgba(var(--white-rgb), 0.04); }
.filings-list__col { min-width: 0; }
.filings-list__col--form { flex: 0 0 5rem; font-weight: 700; }
.filings-list__col--company { flex: 1 1 auto; min-width: var(--filings-company-min-w); }
.filings-list__col--date { flex: 0 0 auto; white-space: nowrap; margin-left: auto; display: flex; align-items: center; gap: var(--space-3); }
.filings-list__date-day { font-weight: 600; }
.filings-list__date-time { color: var(--color-text-muted); font-size: var(--font-12); }
.filings-list__chevron { color: var(--color-text-muted); }
/* Live filings (5-column compact layout) */
.filings-live-list { width: 100%; display: flex; flex-direction: column; }
.filings-live-row { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-bottom: var(--border-1) solid var(--color-border-strong); }
.filings-live-cell { min-width: 0; }
.filings-live-cell--index { flex: 0 0 3rem; text-align: left; padding-right: 0; }
.filings-live-cell--ticker { flex: 0 0 6rem; font-weight: 700; color: var(--color-accent); }
.filings-live-cell--company { flex: 1 1 auto; min-width: var(--filings-live-company-min-w); }
.filings-live-cell--form { flex: 0 0 5.5rem; font-weight: 600; }
.filings-live-cell--filed { flex: 0 0 12rem; white-space: nowrap; text-align: right; margin-left: 0; }
@media (max-width: 47.99rem) {
  #dailyFilingsPage .filings-live-cell--filed { white-space: normal; }
  #dailyFilingsPage .filings-live-row { gap: 0; justify-content: flex-start; }
  #dailyFilingsPage .filings-list__head { gap: 0; justify-content: flex-start; }
  /* Ensure no inner padding adds space between Form and Filed columns */
  #dailyFilingsPage .filings-live-cell--ticker,
  #dailyFilingsPage .filings-live-cell--form { padding-left: 0; padding-right: 0; }
  /* Keep cells tight; no extra inner spacing on Filed (gap managed by fixed Form width) */
  #dailyFilingsPage .filings-live-cell--filed { padding-left: 0 !important; margin-left: 0 !important; }
  /* Mobile: allow Form and Filed to size to content and align left
     to avoid a large visual gap when Company column is hidden. */
  #dailyFilingsPage .filings-live-cell--index { flex: 0 0 2.5rem; }
  #dailyFilingsPage .filings-live-cell--ticker { flex: 0 0 4.75rem; }
  /* Keep a fixed base so Filed column starts at a consistent X across rows */
  /* Increased to 9rem for more separation from Filed */
  #dailyFilingsPage .filings-live-cell--form { flex: 0 0 9rem; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #dailyFilingsPage .filings-live-cell--filed { flex: 0 1 auto; text-align: left; }
  /* Two-line stack within Filed should align to the left on mobile */
  #dailyFilingsPage .filings-live-filed { align-items: flex-start; }
}
/* Desktop/web: even spacing for SEC Filings columns and larger Form boundary */
@media (min-width: 56.25rem) {
  /* Use a shared grid for header and rows: [Form] [Company] [Date] */
  :root {
    --filings-form-col: 9rem;   /* increased boundary for longer form labels */
    --filings-date-col: 14rem;  /* keeps date/time stable */
  }

  #secFilingsPage .filings-list__head,
  #secFilingsPage .filings-list__row {
    display: grid;
    grid-template-columns: var(--filings-form-col) 1fr var(--filings-date-col);
    align-items: center;
    gap: var(--space-2);
  }
  #secFilingsPage .filings-list__col--form { flex: 0 0 auto; }
  #secFilingsPage .filings-list__col--date { margin-left: 0; justify-content: flex-end; }

  /* Pointer devices: green hover highlight for filings rows */
  @media (hover: hover) and (pointer: fine) {
    #secFilingsPage .filings-list__row:hover {
      background: var(--color-accent);
      color: var(--color-text-inverse);
    }
    #secFilingsPage .filings-list__row:hover .filings-form,
    #secFilingsPage .filings-list__row:hover .filings-company,
    #secFilingsPage .filings-list__row:hover .filings-list__date-day,
    #secFilingsPage .filings-list__row:hover .filings-list__date-time,
    #secFilingsPage .filings-list__row:hover .filings-list__chevron { color: var(--color-text-inverse); }
  }
}
/* Desktop/web: apply same spacing + hover for Daily (New) Filings */
@media (min-width: 56.25rem) {
  :root {
    --filings-live-index-col: 3.5rem;
    --filings-live-ticker-col: 6rem;
    --filings-live-form-col: 9rem;  /* increased boundary */
    --filings-live-filed-col: 14rem;
  }

  #dailyFilingsPage .filings-list__head {
    display: grid;
    grid-template-columns: var(--filings-live-index-col) var(--filings-live-ticker-col) 1fr var(--filings-live-form-col) var(--filings-live-filed-col);
    align-items: center;
    gap: var(--space-2);
  }
  #dailyFilingsPage .filings-live-row {
    display: grid;
    grid-template-columns: var(--filings-live-index-col) var(--filings-live-ticker-col) 1fr var(--filings-live-form-col) var(--filings-live-filed-col);
    align-items: center;
    gap: var(--space-2);
  }
  #dailyFilingsPage .filings-live-cell--filed { margin-left: 0; text-align: right; }

  /* Pointer devices: green hover highlight for live filings rows */
  @media (hover: hover) and (pointer: fine) {
    #dailyFilingsPage .filings-live-row:hover {
      background: var(--color-accent);
      color: var(--color-text-inverse);
    }
    /* Ensure ticker text switches to inverse on hover for contrast */
    #dailyFilingsPage .filings-live-row:hover .filings-live-cell--ticker {
      color: var(--color-text-inverse);
    }
    #dailyFilingsPage .filings-live-row:hover .filings-list__date-day,
    #dailyFilingsPage .filings-live-row:hover .filings-list__date-time { color: var(--color-text-inverse); }
  }
}
/* Two-line filed (date/time) stack for daily stream */
.filings-live-filed { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; }
/* Time top: larger & bolder; Date bottom: smaller & muted */
.filings-live-filed .filings-list__date-time { font-size: var(--font-14); font-weight: 700; color: var(--color-text-strong); }
.filings-live-filed .filings-list__date-day { font-size: var(--font-11); color: var(--color-text-muted); font-weight: 500; }
.filings-row { border-bottom: var(--border-1) solid var(--color-border-strong); background: var(--color-bg); transition: background 0.2s ease, color 0.2s ease; }
.filings-row:last-child { border-bottom: none; }
.filings-row:hover { background: var(--color-accent); color: var(--color-text-inverse); }
.filings-cell { padding: var(--space-6) var(--space-5); }
.filings-form { color: var(--color-accent); font-weight: 600; }
.filings-company { color: var(--color-text-muted); font-weight: 600; }
.filings-row:hover .filings-form,
.filings-row:hover .filings-company,
.filings-row:hover .filings-cell--company { color: var(--color-text-inverse); }
.filings-date { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.filings-date__day { font-weight: 600; color: var(--color-text-muted); }
.filings-row:hover .filings-date__day { color: var(--color-text-inverse); }
.filings-date__time { font-size: var(--font-11); color: var(--color-text-subtle); border: var(--border-1) solid transparent; border-radius: var(--radius-xs); padding: var(--space-1) var(--space-2); text-transform: uppercase; letter-spacing: 0.06em; }
.filings-row:hover .filings-date__time { color: var(--color-text-inverse); border-color: rgba(var(--black-rgb), 0.4); }
.filings-date__chevron { display: flex; align-items: center; opacity: 0; transition: opacity 0.2s ease, color 0.2s ease; color: var(--color-accent); }
.filings-row:hover .filings-date__chevron { opacity: 1; color: var(--color-text-inverse); }
.filings-date__icon { width: var(--space-7); height: var(--space-7); }
.filings-row a { color: inherit; text-decoration: none; }
.filings-row a:hover { text-decoration: underline; }
.filings-row a:focus-visible { outline: var(--space-2) solid var(--color-accent); outline-offset: var(--space-2); }
.filings-empty { text-align: center; color: var(--color-text-subtle); font-size: var(--font-14); }
.filings-cell--index { width: var(--space-16); text-align: center; font-family: var(--font-mono); color: var(--color-text-subtle); }
.filings-cell--ticker { font-family: var(--font-mono); font-weight: 600; letter-spacing: 0.04em; }
.filings-cell--company { color: var(--color-text-muted); }
.filings-cell--form { font-weight: 600; }
.filings-cell--filed { font-family: var(--font-mono); font-size: var(--font-12); letter-spacing: 0.04em; }
/* SEC Filings (search page): hide Company column on mobile to improve fit */
@media (max-width: 47.99rem) {
  #secFilingsPage .filings-list__col--company { display: none; }
}
/* Daily Filings (live stream): hide Company column on mobile to improve fit */
@media (max-width: 47.99rem) {
  #dailyFilingsPage .filings-live-cell--company { display: none; }
}
/* Inline info icon in ticker cell for Daily Filings */
/* Hidden by default; only show when Company column is hidden (mobile) */
.ticker-company-btn { display: none; margin-left: var(--space-2); }
@media (max-width: 47.99rem) {
  #dailyFilingsPage .ticker-company-btn { display: inline-flex; }
}
/* Chat UI (extracted from components.css) */
/* Highlight a chat message (e.g., when linked from search) */
.message.is-highlighted {
  outline: var(--space-3) solid var(--color-accent);
  background-color: rgba(var(--green-rgb), 0.08);
  box-shadow: var(--outline-strong) inset, 0 0 0.75rem rgba(var(--green-rgb), 0.2);
}
/* Reply preview (inline composer context) */
.reply-preview-container {
  padding: var(--space-5);
  background: var(--color-bg-muted);
  border-top: var(--border-1) solid var(--color-border);
  display: flex; justify-content: space-between; align-items: center;
  font-size: var(--font-13);
}
.reply-preview-content { border-left: var(--space-3) solid var(--color-warning); padding-left: var(--space-5); }
.reply-preview-header { font-weight: bold; color: var(--color-warning); }
.reply-preview-body { color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: var(--reply-preview-max-w); }
.reply-preview-cancel { background: transparent; color: var(--color-text-dim); border: none; font-size: var(--font-24); cursor: pointer; padding: 0 var(--space-5); line-height: 1; }
.reply-preview-cancel:hover { color: var(--color-text-strong); }
#replyPreviewContainer, .reply-preview-container {
  background: rgba(var(--warning-rgb), 0.08);
  border-left: var(--space-3) solid var(--color-warning);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
}
#replyPreviewContainer .reply-context, .reply-preview-container .reply-context { border-left: 0; background: transparent; padding: 0; }
.reply-close { background: transparent; border: none; color: var(--color-text-muted); font-size: var(--font-18); line-height: 1; padding: 0 var(--space-4); cursor: pointer; }
.reply-close:hover { color: var(--color-text-strong); }
/* File uploads and attachments */
#fileUploadPreview, #dmFilePreview { display: flex; gap: var(--space-4); margin-top: var(--space-4); flex-wrap: wrap; }
.file-preview-item {
  background: var(--color-surface);
  border: var(--border-1) solid var(--color-border-strong);
  border-radius: var(--radius-xs);
  padding: var(--space-3) var(--space-4);
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  box-shadow: var(--shadow-green-xs);
}
.file-preview-item .file-name { max-width: 12rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.file-preview-item .file-meta { color: var(--color-text-muted); }
.file-preview-item button { background: transparent; border: none; color: var(--color-text-dim); cursor: pointer; font-size: var(--font-14); }
.file-preview-item button:hover { color: var(--color-text-strong); }
.message-attachment { background: var(--color-bg-muted); border: var(--border-1) solid var(--color-border); border-radius: var(--radius-sm); padding: var(--space-4); margin-top: var(--space-4); display: inline-flex; align-items: center; gap: var(--space-3); max-width: 100%; }
.msg-image { display: inline-flex; margin: 0 0 var(--space-2) 0; }
.message-attachment a { color: var(--color-accent); text-decoration: none; display: flex; align-items: center; gap: var(--space-3); }
.message-attachment a:hover { text-decoration: underline; }
.message-attachment img { max-width: 100%; max-height: 60svh; border-radius: var(--radius-xs); margin-top: var(--space-4); cursor: pointer; }
/* Show X on blocked upload (guest/restricted) */
.upload-blocked { position: relative; }
.upload-blocked:hover .paperclip-icon { opacity: 0; }
.upload-blocked::after {
  content: '';
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
}
.upload-blocked:hover::after {
  content: '×';
  display: flex;
  color: var(--color-danger);
  font-weight: 900;
  font-size: 1.25rem;
  text-shadow: var(--text-shadow-dark-md);
}
.action-blocked,
.guest-restricted,
.guest-disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.guest-restricted * {
  pointer-events: auto;
}
/* Guest click denial feedback */
.guest-block-flash::after {
  content: '×';
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--color-danger);
  font-weight: 900;
  font-size: 1.25rem;
  text-shadow: var(--text-shadow-dark-md);
  animation: guest-flash-fade 480ms ease;
  pointer-events: none;
}
.guest-block-flash::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-md);
  box-shadow: 0 0 0 0.25rem rgba(var(--red-rgb), 0.25);
  animation: guest-flash-pulse 480ms ease;
  pointer-events: none;
}
.guest-block-flash {
  position: relative;
  animation: guest-flash-shake 240ms ease;
}
@keyframes guest-flash-fade {
  0% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.15); }
}
@keyframes guest-flash-pulse {
  0% { opacity: 0.6; transform: scale(0.95); }
  100% { opacity: 0; transform: scale(1.15); }
}
@keyframes guest-flash-shake {
  0% { transform: translateX(0); }
  25% { transform: translateX(-3px); }
  50% { transform: translateX(3px); }
  75% { transform: translateX(-2px); }
  100% { transform: translateX(0); }
}
/* Ensure overlays (timestamps/actions) are visible */
.message { overflow: visible; }
/* Chat header and containers */
.chat-header { background: var(--color-bg-muted); padding: var(--space-3) var(--space-10); border-bottom: var(--border-1) solid var(--color-border); display: flex; justify-content: space-between; align-items: center; font-size: var(--font-16); color: var(--color-accent); }
#onlineUsersCount, .online-users-count { min-width: var(--space-9); height: var(--space-9); font-size: var(--font-11); }
.chat-header #chatTitle { font-weight: bold; color: inherit; }
.messages-container { flex: 1; overflow-y: auto; padding: var(--space-10) var(--space-10) var(--space-10) var(--space-1); background: var(--color-bg); }
/* Guard against long tokens/URLs causing horizontal overflow */
#messagesContainer,
.messages-container { word-wrap: break-word; overflow-wrap: anywhere; }
.empty-chat { text-align: center; color: var(--color-text-strong); font-size: var(--font-18); padding: var(--space-30) var(--space-10); }
.empty-chat::before { content:"💬"; display:block; font-size: var(--font-48); margin-bottom: var(--space-10); }
#messagesContainer .message, .messages-container .message { border-radius: var(--radius-md-plus); padding-left: var(--space-3); padding-right: var(--space-9); }
/* Base chat message bubble */
.message { background: var(--color-surface); border: var(--border-1) solid var(--color-border); border-left: var(--space-3) solid var(--color-accent); border-radius: var(--radius-xs); padding: var(--space-4) var(--space-6); margin-bottom: var(--space-3); position: relative; cursor: pointer; }
/* Message actions visibility */
.message-actions { display: none; gap: var(--space-4); margin-top: var(--space-5); justify-content: flex-start; }
.message.is-selected .message-actions { display: flex; }
/* Message row layout */
.message-row { align-items: stretch; position: relative; display: flex; gap: 0; }
/* Mobile: ensure chat messages use flex layout and wrap within the viewport */
@media (max-width: 47.99rem) {
  #messagesContainer .message,
  .messages-container .message {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    max-width: 100%;
    overflow: hidden;
  }
  .message-row { flex-wrap: wrap; }
  #messagesContainer .message *,
  .messages-container .message * { max-width: 100%; box-sizing: border-box; }
  #messagesContainer .message .message-content,
  .messages-container .message .message-content {
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
  }
}
/* Username outline button within messages */
#messagesContainer .message .msg-username.btn-outline.chat-username-outline,
.messages-container .message .msg-username.btn-outline.chat-username-outline,
#dmThread .message .msg-username.btn-outline.chat-username-outline {
  padding: var(--space-2) var(--space-2);
  font-size: var(--font-12);
  line-height: 1.1;
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-md);
}
#messagesContainer .message .msg-username.btn-outline.chat-username-outline:hover,
.messages-container .message .msg-username.btn-outline.chat-username-outline:hover,
#dmThread .message .msg-username.btn-outline.chat-username-outline:hover {
  background: var(--color-accent);
  color: var(--color-text-inverse);
}
.message-header { display:flex; justify-content:space-between; align-items: center; margin-bottom:var(--space-2); font-size:var(--font-12); }
.message-user { color: var(--color-accent); font-weight: 600; cursor: pointer; }
.message-user:hover { color: var(--color-accent-hover); text-decoration: underline; }
.message-time { font-size:var(--font-10); color:var(--color-text-muted); }
.edited-indicator { font-style: italic; color: var(--color-text-subtle); margin-left: var(--space-2-5); font-size: var(--font-10); }
.message-content { font-size:var(--font-14); line-height:1.4; color:var(--color-text-strong); white-space: pre-wrap; word-wrap: break-word; }
.chat-mention { color: var(--color-blue); cursor: pointer; text-decoration: underline; font-weight: 600; }
.chat-mention:hover, .chat-mention:focus { color: var(--color-blue-hover); }
/* Inline mention highlight and ticker links */
.mention { background-color: rgba(var(--green-rgb), 0.2); color: var(--color-accent); padding: var(--space-1) var(--space-3); border-radius: var(--space-3); font-weight: 500; }
.ticker-link { cursor: pointer; text-decoration: underline; }
.ticker-link:hover { color: var(--color-accent-hover); }
#messagesContainer .message .timestamp, .messages-container .message .timestamp { position: absolute; top: var(--space-3); right: var(--space-5); font-size: var(--font-11); color: var(--color-text-subtle); }
/* SEC Bot header contains an inline filing chip; avoid overlap with timestamp */
#messagesContainer .message[data-secbot="1"] .timestamp { position: static !important; margin-left: var(--space-3); flex-shrink: 0; }
#messagesContainer .message[data-secbot="1"] .secbot-inline { display: inline-flex; flex: 1 1 auto; min-width: 0; overflow: hidden; }
/* Presence dropdown layering and safety */
.chat-header { position: relative; z-index: var(--z-sticky); }
#onlineUsersMenu { z-index: var(--z-menu); }
@media (max-width: 40rem) {
  #onlineUsersWrap { position: relative; overflow: visible; }
  #onlineUsersMenu { left: 0; right: auto; width: auto; min-width: var(--menu-min-w); max-width: calc(100vw - 1.5rem); }
}
/* Mention suggestions in composer */
.mention-suggestions { position: absolute; max-height: var(--menu-max-h, 16rem); overflow-y: auto; overflow-x: hidden; scrollbar-width: auto; left: 0; z-index: var(--z-popover); }
.mention-suggestions .suggestion-item { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-5); }
.mention-suggestions .suggestion-item .symbol { color: var(--color-accent); font-weight: 600; }
.mention-suggestions .suggestion-item.active { background: rgba(var(--green-rgb), 0.15); }
/* Chat search boundary lines */
#stockChatSearchContainer { position: relative; padding-top: var(--space-5); padding-bottom: var(--space-5); }
#stockChatSearchContainer::before, #stockChatSearchContainer::after { content: ''; position: absolute; left: var(--space-2); right: var(--space-2); height: var(--space-1); background: var(--color-accent); box-shadow: 0 0 0.375rem rgba(var(--green-rgb), 0.6), 0 0 0.75rem rgba(var(--green-rgb), 0.3); pointer-events: none; }
@media (max-width: 47.99rem) {
  #stockChatSearchContainer::before, #stockChatSearchContainer::after { left: var(--space-4); right: var(--space-4); box-shadow: 0 0 0.25rem rgba(var(--green-rgb), 0.5), 0 0 0.5rem rgba(var(--green-rgb), 0.25); }
}
#stockChatSearchContainer::before { top: 0; }
#stockChatSearchContainer::after { bottom: 0; }
/* Collapse chat search row when not visible (mirrors DM behavior) */
.chat-search-container { display: block; }
.chat-search-container:not(.visible) {
  height: 0;
  max-height: 0;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  overflow: hidden;
}
/* Hide decorative boundaries when collapsed */
#stockChatSearchContainer:not(.visible)::before,
#stockChatSearchContainer:not(.visible)::after { display: none !important; content: none !important; }
/* Make chatboard filter bar sticky (mirror DM sticky behavior) */
.chat-search-container { position: sticky; top: 0; z-index: var(--z-sticky); background: var(--color-bg); }
/* Reply context within messages */
.reply-context { background: rgba(var(--warning-rgb), 0.08); border-left: var(--space-3) solid var(--color-warning); border-radius: var(--radius-sm); padding: var(--space-3) var(--space-4); margin: calc(var(--space-1) * -1) calc(var(--space-3) * -1) var(--space-8) calc(var(--space-3) * -1); font-size: var(--font-13); cursor: pointer; transition: background-color 0.2s; }
.reply-context:hover { background: rgba(var(--warning-rgb), 0.14); }
.reply-context-header, .reply-context .reply-author { color: var(--color-warning); font-weight: 600; font-size: var(--font-11); margin-bottom: var(--space-1); }
.reply-context-body, .reply-context .reply-snippet { color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 95%; }
.reply-context .reply-deleted { color: var(--color-text-muted); font-style: italic; }
/* Mobile Chat | Details toggle */
.mobile-view-toggle { align-items: center; gap: var(--space-1); background: var(--color-bg); border: var(--border-1) solid var(--color-border); border-radius: var(--radius-md-plus); padding: var(--space-1); }
.mobile-view-toggle [role="tab"] { -webkit-appearance: none; -moz-appearance: none; appearance: none; background: transparent; color: var(--color-text); border: none; border-radius: var(--radius-sm); padding: var(--space-2) var(--space-4); font-size: var(--font-12); font-weight: 700; letter-spacing: var(--ls-xxs); cursor: pointer; }
.mobile-view-toggle [role="tab"][aria-selected="true"] { background: var(--color-accent); color: var(--color-text-inverse); box-shadow: var(--shadow-green-xs); }
.mobile-view-toggle [role="tab"][aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
#stockHeader .mobile-view-toggle { margin-bottom: var(--space-3); }
/* Default: hide the mobile row container on desktop */
.mobile-view-toggle-row { display: none; }
/* Actions moved beside the mobile toggle (mobile only) */
@media (max-width: 47.99rem) {
  /* Row container holds the segmented toggle and the actions as siblings */
  .mobile-view-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); width: 100%; }
  .mobile-view-toggle { display: inline-flex; }
  .mobile-view-toggle.hidden { display: inline-flex !important; }
  .mobile-view-toggle-row .mobile-view-actions { display: inline-flex; gap: var(--space-2); flex-shrink: 0; }
}
/* Ensure the Chat | Details segmented control is actually visible on mobile
   even if a generic `.hidden` utility is present in the class list.
   This avoids relying on Tailwind's `sm-down:inline-flex` variant at runtime. */
@media (max-width: 47.99rem) {
  .mobile-view-toggle { display: inline-flex; }
  .mobile-view-toggle.hidden { display: inline-flex !important; }
}
/* Bookmarks UI (extracted from components.css) */
/* Header text */
.bookmark-title { font-size: var(--font-16); line-height: var(--space-14); font-weight: 600; color: var(--color-text-muted); }
.bookmark-time { font-size: var(--font-14); line-height: var(--space-14); color: var(--color-text-subtle); }
/* Cleaner card layout */
#bookmarksPage .bookmark-card .bookmark-open { display: block; width: 100%; text-align: left; margin-top: var(--space-3); }
#bookmarksPage .bookmark-attachments { margin-top: var(--space-3); }
@media (max-width: 47.99rem) {
  #bookmarksPage .bookmark-header { flex-wrap: wrap; row-gap: var(--space-2); }
  #bookmarksPage .bookmark-actions { flex: 1 1 100%; display: flex; justify-content: flex-end; margin-top: var(--space-2); }

  /* Mobile: make the bookmarks filter bar behave like DM search */
  #bookmarksPage .bookmarks-search-container { position: sticky; top: 0; z-index: var(--z-sticky); background: var(--color-bg); display: block; }
  #bookmarksPage .bookmarks-search-container:not(.visible) { height: 0; max-height: 0; padding-top: 0 !important; padding-bottom: 0 !important; overflow: hidden; }
  #bookmarksSearchContainer { position: relative; padding-top: var(--space-5); padding-bottom: var(--space-5); }
  #bookmarksSearchContainer::before, #bookmarksSearchContainer::after { content: ''; position: absolute; left: 0; right: 0; height: var(--space-1); background: var(--color-accent); box-shadow: 0 0 0.375rem rgba(var(--green-rgb), 0.6), 0 0 0.75rem rgba(var(--green-rgb), 0.3); pointer-events: none; }
  #bookmarksSearchContainer::before { top: 0; }
  #bookmarksSearchContainer::after { bottom: 0; }
  #bookmarksSearchContainer:not(.visible)::before,
  #bookmarksSearchContainer:not(.visible)::after { display: none !important; content: none !important; }
}
/* Direct Messages UI (extracted from components.css) */
/* Presence dropdown above other content */
#dmPresenceMenu { z-index: var(--z-menu); }
/* DM mobile menu removed in JS; legacy styles deleted */
/* DM layout adjustments inside #directMessagesPage */
#directMessagesPage #dmConvoColumn { display: flex; flex-direction: column; height: 100%; min-height: 0; overflow: hidden; }
#directMessagesPage #dmConvoList { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; scrollbar-gutter: stable; }
#directMessagesPage #dmThreadColumn { display: grid; grid-template-rows: auto auto 1fr auto; height: 100%; min-height: 0; overflow: hidden; align-content: stretch; align-items: stretch; }
#directMessagesPage #dmThread { min-height: 0; height: 100%; overflow-y: auto; overflow-x: hidden; scrollbar-gutter: stable; word-wrap: break-word; overflow-wrap: break-word; box-sizing: border-box; }
#directMessagesPage #dmThreadColumn > header,
#directMessagesPage #dmThreadColumn > footer,
#directMessagesPage .chat-search-container { position: sticky; top: 0; z-index: var(--z-sticky); background: var(--color-bg); }
/* Ensure the search row participates in the grid even when hidden, so the
   grid track layout (auto auto 1fr auto) is stable without requiring a click. */
#directMessagesPage .chat-search-container { display: block; }
#directMessagesPage .chat-search-container:not(.visible) {
  height: 0;
  max-height: 0;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  overflow: hidden;
}
/* Hide decorative boundary lines when collapsed */
#dmChatSearchContainer:not(.visible)::before,
#dmChatSearchContainer:not(.visible)::after { display: none !important; content: none !important; }
#directMessagesPage #dmThread { align-self: stretch; }
#directMessagesPage #dmThread.messages-container { max-height: none; }
#directMessagesPage #dmThreadColumn > header,
#directMessagesPage #dmThreadColumn > footer,
#directMessagesPage .chat-search-container {
  overflow: hidden;
  width: 100%;
  max-width: 100%;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
#directMessagesPage .message,
#directMessagesPage .dm-message {
  flex-shrink: 0;
  word-wrap: break-word;
  overflow-wrap: break-word;
  max-width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}
#directMessagesPage .message-content,
#directMessagesPage .dm-message .message-content {
  max-width: 100%;
  overflow: hidden;
  word-wrap: break-word;
  overflow-wrap: break-word;
  white-space: pre-wrap;
}
#directMessagesPage .message-attachment,
#directMessagesPage .dm-message .message-attachment,
#directMessagesPage #dmForm,
#directMessagesPage #dmChatSearchForm,
#directMessagesPage input,
#directMessagesPage textarea {
  max-width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}
#directMessagesPage .dm-message { position: relative; padding: var(--space-4) var(--space-6); margin-bottom: var(--space-2); border-radius: var(--radius-sm); background: var(--color-surface); border: var(--border-1) solid var(--color-border); }
#directMessagesPage .dm-message .message-content { white-space: pre-wrap; word-wrap: break-word; }
#directMessagesPage .dm-message .message-attachment,
#directMessagesPage #dmForm,
#directMessagesPage #dmChatSearchForm { max-width: 100%; }
/* DM search boundary lines (mirrors chatboard styling) */
#dmChatSearchContainer { position: relative; padding-top: var(--space-5); padding-bottom: var(--space-5); }
#dmChatSearchContainer::before, #dmChatSearchContainer::after { content: ''; position: absolute; left: 0; right: 0; height: var(--space-1); background: var(--color-accent); box-shadow: 0 0 0.375rem rgba(var(--green-rgb), 0.6), 0 0 0.75rem rgba(var(--green-rgb), 0.3); pointer-events: none; }
#dmChatSearchContainer::before { top: 0; }
#dmChatSearchContainer::after { bottom: 0; }
/* ------------------------------
   Mobile layout (WhatsApp-style)
   ------------------------------ */
@media (max-width: 47.99rem) {
  /* Collapse DM grid to a single column so the visible pane uses the full width */
  #directMessagesPage { grid-template-columns: 100% !important; }
  /* Default mobile: show conversations list only */
  /* Do not override wrapper display; keep layout.css flattening (display: contents)
     to preserve grid/flex behavior and avoid conflicts. We control visibility by
     toggling the columns below. */
  /* Keep the list column as flex (defined above) for proper scrolling */
  #directMessagesPage .dm-layout #dmThreadColumn { display: none; }
  /* Thread-open state: show thread, hide list */
  #directMessagesPage .dm-layout.dm--thread-open #dmConvoColumn { display: none; }
  #directMessagesPage .dm-layout.dm--thread-open #dmThreadColumn { display: grid; }
  /* Back button visible only when a thread is open */
  #directMessagesPage #dmBackBtn { display: none !important; }
  #directMessagesPage .dm-layout.dm--thread-open #dmBackBtn { display: inline-flex !important; }
  /* Ensure the visible column spans full width */
  #directMessagesPage .dm-layout:not(.dm--thread-open) #dmConvoColumn { width: 100%; }
  #directMessagesPage .dm-layout.dm--thread-open #dmThreadColumn { width: 100%; }
  /* Subtle slide-in animations when switching views */
  #directMessagesPage .dm-layout.dm--thread-open #dmThreadColumn { animation: dmSlideInRight 180ms ease-out; }
  #directMessagesPage .dm-layout:not(.dm--thread-open) #dmConvoColumn { animation: dmSlideInLeft 180ms ease-out; }
  /* Back button micro-interaction */
  #directMessagesPage #dmBackBtn { transition: transform 140ms ease, box-shadow 140ms ease, background 140ms ease; }
  #directMessagesPage #dmBackBtn:active { transform: translateX(-2px) scale(0.98); }
  /* Subtle header shadow when thread is open */
  #directMessagesPage .dm-layout.dm--thread-open #dmThreadColumn > header { box-shadow: 0 0.125rem 0.5rem rgba(var(--black-rgb), 0.35); }

  /* Reflow thread header actions to a second row so everything fits */
  #directMessagesPage #dmThreadColumn > header { flex-wrap: wrap; align-items: flex-start; gap: var(--space-2); }
  #directMessagesPage #dmTitleWrap { flex: 1 1 auto; min-width: 0; }
  #directMessagesPage #dmHeaderActions { order: 2; flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-1); }
  #directMessagesPage #dmMembersWrap { order: 1; }
  #directMessagesPage #dmAddMemberForm { order: 2; display: flex !important; flex: 1 1 100%; max-width: 100%; }
  #directMessagesPage #dmAddMemberForm input { flex: 1 1 auto; min-width: 0; }
  #directMessagesPage #dmAddMemberForm button[type="submit"] { flex: 0 0 auto; }
}
/* Desktop override: always hide back button */
@media (min-width: 48rem) {
  #directMessagesPage #dmBackBtn { display: none !important; }
}
/* Keyframes + reduced-motion guard */
@keyframes dmSlideInRight { from { opacity: 0; transform: translateX(8%); } to { opacity: 1; transform: translateX(0); } }
@keyframes dmSlideInLeft  { from { opacity: 0; transform: translateX(-8%); } to { opacity: 1; transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) {
  #directMessagesPage .dm-layout.dm--thread-open #dmThreadColumn,
  #directMessagesPage .dm-layout:not(.dm--thread-open) #dmConvoColumn { animation: none !important; }
}
/*
  modals.css
  Purpose: Dedicated modal styles extracted from components.css to improve isolation.
  Note: Initially duplicated from components.css to preserve visuals. Original rules remain until full extraction is verified.
*/
/* Image Modal */
#imageModal { display: none; position: fixed; z-index: var(--z-lightbox); left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(var(--black-rgb), 0.9); justify-content: center; align-items: center; }
#imageModal img { margin: auto; display: block; max-width: 90%; max-height: 90%; }
#imageModal .close-btn { position: absolute; top: var(--space-10); right: var(--space-35); color: var(--color-text-strong); font-size: var(--font-40); font-weight: bold; cursor: pointer; }
/* Base Modal */
.modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(var(--black-rgb),  0.8); display: flex; align-items: center; justify-content: center; z-index: var(--z-lightbox); }
.modal-content { background: var(--color-bg-muted); border: var(--border-1) solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-25); width: 90%; max-width: var(--max-w-modal); box-shadow: var(--shadow-modal-md-black-50); }
.modal-header { display: flex; justify-content: space-between; align-items: center; border-bottom: var(--border-1) solid var(--color-border); padding-bottom: var(--space-7-5); margin-bottom: var(--space-10); }
.modal-title { color: var(--color-accent); font-size: 1.8em; font-weight: 600; }
.modal-close-btn { background: transparent; border: none; color: var(--color-text-muted); font-size: var(--font-28); cursor: pointer; }
.modal-body { overflow-y: auto; }
.modal-content .btn-primary {
  background: var(--color-accent);
  color: var(--color-bg);
  border: var(--border-1) solid rgba(var(--green-rgb), 0.55);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-8);
  font-weight: 700;
  letter-spacing: var(--ls-xxs);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  min-width: var(--min-w-btn-md);
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  box-shadow: var(--shadow-green-sm-22);
}
.modal-content .btn-primary:hover,
.modal-content .btn-primary:focus-visible {
  background: var(--color-accent-hover);
  border-color: rgba(var(--green-rgb), 0.75);
  box-shadow: var(--shadow-green-md-30);
  transform: translateY(-1px);
  outline: none;
}
.modal-content .btn-primary:active {
  transform: translateY(0);
}
/* Reorder Modal */
#reorderModal, .reorder-modal {
  /* Overlay */
  --reorder-panel-max-w: 980px;
  --reorder-toggle-size: 2rem;
  --reorder-chip-h: 34px;
  --reorder-chip-gap: var(--space-4);
  position: fixed; inset:0; display:none; justify-content:center; align-items:flex-start;
  padding:4svh var(--space-8) var(--space-16);
  background: linear-gradient(180deg, rgba(var(--black-rgb), 0.7), rgba(var(--black-rgb), 0.9));
  z-index: var(--z-lightbox); overflow-y:auto; -webkit-overflow-scrolling:touch;
}
#reorderModal.flex, .reorder-modal.flex { display:flex; }
#reorderModal .reorder-modal-panel, .reorder-modal .reorder-modal-panel {
  width:min(100%, var(--reorder-panel-max-w));
  background: linear-gradient(180deg, rgba(var(--green-emerald-rgb), 0.06), rgba(var(--green-emerald-rgb), 0.02) 14%, transparent 60%), var(--color-bg-muted);
  border:var(--border-1) solid rgba(var(--green-emerald-rgb), 0.45);
  border-radius:var(--radius-xl);
  box-shadow: var(--shadow-modal-xl-black-emerald-ring);
  display:flex; flex-direction:column; max-height:90svh; overflow:hidden;
}
#reorderModal .reorder-modal-header, .reorder-modal .reorder-modal-header {
  display:flex; align-items:center; justify-content: space-between;
  gap: var(--space-6);
  padding:var(--space-9) var(--space-12);
  border-bottom:1px solid rgba(var(--green-emerald-rgb), 0.35);
  background: linear-gradient(180deg, rgba(var(--green-emerald-rgb), 0.12), rgba(var(--green-emerald-rgb), 0.04));
}
#reorderModal .reorder-modal-header h2, .reorder-modal .reorder-modal-header h2 {
  color: var(--color-accent); font-weight:800; letter-spacing:0.015em;
}
#reorderModal .reorder-modal-header button, .reorder-modal .reorder-modal-header button {
  color: var(--color-accent); opacity:0.9; transition: transform .14s ease, opacity .14s ease;
}
#reorderModal .reorder-modal-header button:hover,
.reorder-modal .reorder-modal-header button:hover { opacity:1; transform: scale(1.05); }
#reorderModal .reorder-modal-body, .reorder-modal .reorder-modal-body {
  overflow-y:auto; padding:var(--space-10); flex:1; scrollbar-width:auto;
  scrollbar-color:var(--color-accent) var(--color-bg-muted);
}
#reorderModal .reorder-modal-body::-webkit-scrollbar, .reorder-modal .reorder-modal-body::-webkit-scrollbar { width: var(--scrollbar-size); }
#reorderModal .reorder-modal-body::-webkit-scrollbar-track, .reorder-modal .reorder-modal-body::-webkit-scrollbar-track { background:var(--color-bg-elevated); }
#reorderModal .reorder-modal-body::-webkit-scrollbar-thumb, .reorder-modal .reorder-modal-body::-webkit-scrollbar-thumb { background:var(--color-accent); border-radius:var(--radius-sm); }
#reorderModal .reorder-modal-footer, .reorder-modal .reorder-modal-footer {
  display:flex; justify-content:flex-end; gap:var(--space-6);
  padding:var(--space-8) var(--space-10);
  border-top:1px solid rgba(var(--green-emerald-rgb), 0.35);
  background: linear-gradient(180deg, transparent, rgba(var(--green-emerald-rgb), 0.06));
  border-radius:0 0 var(--radius-xl) var(--radius-xl);
}
#reorderModal[aria-hidden="true"], .reorder-modal[aria-hidden="true"] { visibility:hidden; }
#reorderModal[aria-hidden="false"], .reorder-modal[aria-hidden="false"] { visibility:visible; }
/* Primary/Outline buttons scoped to reorder modal */
#reorderModal .btn-primary, .reorder-modal .btn-primary {
  background: var(--color-accent);
  color: var(--color-bg);
  border: var(--border-1) solid rgba(var(--green-rgb), 0.55);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-8);
  font-weight: 700; letter-spacing: var(--ls-xxs);
  display:inline-flex; align-items:center; justify-content:center; gap:var(--space-3);
  min-width: var(--min-w-btn-md);
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  box-shadow: 0 0.375rem 1.25rem rgba(var(--green-rgb), 0.22);
}
#reorderModal .btn-primary:hover, .reorder-modal .btn-primary:hover { background: var(--color-accent-hover); border-color: rgba(var(--green-rgb), 0.75); box-shadow: var(--shadow-green-md-30); transform: translateY(-1px); }
#reorderModal .btn-outline, .reorder-modal .btn-outline {
  color: var(--color-accent);
  border: 1px solid rgba(var(--green-emerald-rgb), 0.35);
  background: transparent; border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-7);
  font-weight: 600; letter-spacing: 0.01em;
}
#reorderModal .btn-outline:hover, .reorder-modal .btn-outline:hover { background: rgba(var(--green-emerald-rgb), 0.1); }
/* New group row */
#reorderModal .new-group-section, .reorder-modal .new-group-section {
  display:flex; flex-wrap: wrap; gap: var(--space-5); align-items:center;
  margin-bottom: var(--space-8); padding: var(--space-5) var(--space-8);
  border: 1px dashed rgba(var(--green-emerald-rgb), 0.45);
  border-radius: var(--radius-lg);
  background: rgba(var(--green-emerald-rgb), 0.06);
}
#reorderModal .group-input, .reorder-modal .group-input {
  flex:1; background: rgba(var(--black-rgb), 0.25); border: 1px solid rgba(var(--green-emerald-rgb), 0.35);
  color: var(--color-text-strong); border-radius: var(--radius-md); padding: var(--space-5) var(--space-8); font-size: var(--font-16);
}
#reorderModal .group-input:focus, .reorder-modal .group-input:focus { outline:none; background: rgba(var(--green-emerald-rgb), 0.12); border-color: var(--color-accent); box-shadow: var(--outline-emerald-2-15); }
#reorderModal .status-message, .reorder-modal .status-message { color: var(--color-accent); font-size: var(--font-14); font-weight: 500; }
/* Subgroup item card */
#reorderModal .subgroup-item, .reorder-modal .subgroup-item {
  list-style:none; background: linear-gradient(180deg, rgba(var(--black-rgb), 0.25), rgba(var(--black-rgb), 0.15));
  border: 1px solid rgba(var(--green-emerald-rgb), 0.25);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-8); margin-bottom: var(--space-5);
  transition: border-color 0.2s ease, box-shadow .2s ease;
}
#reorderModal .subgroup-item:hover, .reorder-modal .subgroup-item:hover { border-color: rgba(var(--green-emerald-rgb), 0.55); box-shadow: var(--shadow-elevated-sm-black-25); }
#reorderModal .subgroup-item.dragging, .reorder-modal .subgroup-item.dragging { opacity: 0.6; }
/* Subgroup header layout */
#reorderModal .subgroup-header, .reorder-modal .subgroup-header {
  display:flex; align-items:center; justify-content: space-between;
  gap: var(--space-6);
  margin-bottom: var(--space-5);
}
#reorderModal .subgroup-name, .reorder-modal .subgroup-name { font-weight: 700; color: var(--color-text-strong); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#reorderModal .subgroup-actions, .reorder-modal .subgroup-actions { display:flex; align-items:center; gap: var(--space-4); }
#reorderModal .visibility-badge, .reorder-modal .visibility-badge { border:1px solid rgba(var(--white-rgb), 0.15); border-radius: var(--radius-full); padding: var(--space-1) var(--space-4); text-transform:uppercase; font-weight:700; letter-spacing:.04em; }
#reorderModal .vis-toggle-btn, .reorder-modal .vis-toggle-btn { color: var(--color-accent); background: transparent; border: 1px solid rgba(var(--green-emerald-rgb), 0.35); border-radius: var(--radius-md); padding: var(--space-3) var(--space-5); font-weight: 600; }
#reorderModal .vis-toggle-btn:hover, .reorder-modal .vis-toggle-btn:hover { background: rgba(var(--green-emerald-rgb), 0.1); }
#reorderModal .delete-btn, .reorder-modal .delete-btn { color: var(--color-danger-soft); background: transparent; border: 1px solid rgba(var(--danger-90-rgb), 0.25); border-radius: var(--radius-md); padding: var(--space-3) var(--space-5); font-weight: 600; }
#reorderModal .delete-btn:hover, .reorder-modal .delete-btn:hover { background: rgba(var(--danger-90-rgb), 0.12); }
#reorderModal .drag-handle, .reorder-modal .drag-handle { cursor: grab; -webkit-user-select:none; -moz-user-select:none; user-select:none; color: rgba(var(--mint-soft-rgb), 0.85); padding: var(--space-1) var(--space-3); border-radius: var(--radius-sm); }
#reorderModal .drag-handle:hover, .reorder-modal .drag-handle:hover { background: rgba(var(--white-rgb), 0.06); }
/* Ticker list pills */
#reorderModal .ticker-list, .reorder-modal .ticker-list {
  display:flex; flex-wrap: wrap; gap: var(--reorder-chip-gap); padding: var(--space-2) 0 var(--space-4);
}
#reorderModal .ticker-item, .reorder-modal .ticker-item {
  display:inline-flex; align-items:center; gap: var(--space-3);
  height: var(--reorder-chip-h);
  padding: 0 var(--space-4);
  background: rgba(var(--mint-ice-rgb), 0.1);
  color: var(--color-text-strong);
  border: 1px solid rgba(var(--mint-ice-rgb), 0.25);
  border-radius: var(--radius-full); cursor: grab; -webkit-user-select:none; -moz-user-select:none; user-select:none;
}
#reorderModal .ticker-item:hover, .reorder-modal .ticker-item:hover { border-color: rgba(var(--mint-ice-rgb), 0.45); background: rgba(var(--mint-ice-rgb), 0.16); }
#reorderModal .ticker-item.dragging, .reorder-modal .ticker-item.dragging { opacity: .7; }
#reorderModal .ticker-symbol, .reorder-modal .ticker-symbol { font-weight:800; letter-spacing: .03em; }
#reorderModal .remove-btn, .reorder-modal .remove-btn { width: var(--space-12); height: var(--space-12); border-radius: var(--radius-full); border: var(--border-1) solid var(--white-20a); background: transparent; color: var(--white-75a); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; }
#reorderModal .remove-btn:hover, .reorder-modal .remove-btn:hover { background: var(--white-12a); }
/* Add ticker row */
#reorderModal .add-ticker-section, .reorder-modal .add-ticker-section {
  display:flex; gap: var(--space-4);
  margin-top: var(--space-4);
}
#reorderModal .add-ticker-section .ticker-input, .reorder-modal .add-ticker-section .ticker-input { flex: 1 1 auto; min-width: 0; }
#reorderModal .add-ticker-section .add-btn, .reorder-modal .add-ticker-section .add-btn { flex: 0 0 auto; }
#reorderModal .ticker-input, .reorder-modal .ticker-input {
  background: rgba(var(--black-rgb), 0.3);
  border: 1px solid rgba(var(--green-emerald-rgb), 0.3);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-6);
  color: var(--color-text-strong);
}
#reorderModal .ticker-input:focus, .reorder-modal .ticker-input:focus { outline:none; border-color: var(--color-accent); background: rgba(var(--green-emerald-rgb), 0.12); box-shadow: var(--outline-emerald-2-18); }
#reorderModal .add-btn, .reorder-modal .add-btn { border:1px solid rgba(var(--green-emerald-rgb), 0.35); color: var(--color-accent); background: transparent; border-radius: var(--radius-md); padding: var(--space-3) var(--space-6); font-weight: 700; }
#reorderModal .add-btn:hover, .reorder-modal .add-btn:hover { background: rgba(var(--green-emerald-rgb), 0.1); }
/* Suggestions dropdown (reuses search widget, but scoped here for safe defaults) */
#reorderModal .suggestion-menu, .reorder-modal .suggestion-menu {
  position: relative;
}
#reorderModal .suggestion-menu:not(.hidden) > *, .reorder-modal .suggestion-menu:not(.hidden) > * { position:absolute; z-index: var(--z-menu); top: calc(100% + 6px); left:0; right:0; background: var(--color-bg-elevated); border: 1px solid rgba(var(--green-emerald-rgb), 0.25); border-radius: var(--radius-md); box-shadow: var(--shadow-elevated-md-black-35); }
/* Responsive */
@media (max-width: 40rem) {
  #reorderModal .reorder-modal-panel, .reorder-modal .reorder-modal-panel { border-radius: var(--radius-lg); }
  #reorderModal .reorder-modal-header, .reorder-modal .reorder-modal-header { padding: var(--space-8) var(--space-8); flex-wrap: wrap; }
  #reorderModal .reorder-modal-body, .reorder-modal .reorder-modal-body { padding: var(--space-8); }

  /* Make subgroup header breathe and avoid crammed actions */
  #reorderModal .subgroup-header, .reorder-modal .subgroup-header { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
  #reorderModal .subgroup-header .subgroup-actions, .reorder-modal .subgroup-header .subgroup-actions { flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: var(--space-3); }

  /* New group row: keep status on its own line to prevent crowding */
  #reorderModal .new-group-section, .reorder-modal .new-group-section { display: flex; gap: var(--space-4); flex-wrap: wrap; }
  #reorderModal .new-group-section .status-message, .reorder-modal .new-group-section .status-message { flex: 1 0 100%; }

  /* Footer: permit wrapping controls gracefully on small screens */
  #reorderModal .reorder-modal-footer, .reorder-modal .reorder-modal-footer { flex-wrap: wrap; row-gap: var(--space-4); }
}
/* SEC Directory Modal */
/* stylelint-disable declaration-property-value-disallowed-list */
#secDirectoryModal, .sec-directory-modal {
  --directory-green-950: #031610;
  --directory-green-900: #05271b;
  --directory-green-800: #073926;
  --directory-green-700: #0b5034;
  --directory-green-500: #15c979;
  --directory-green-400: #38e298;
  --directory-green-glow: 0 0 2rem rgba(var(--green-emerald-rgb), 0.35);
}
#secDirectoryModal .sticky, .sec-directory-modal .sticky { position: sticky; }
#secDirectoryModal .min-h-0, .sec-directory-modal .min-h-0 { min-height: 0; }
#secDirectoryModal .directory-modal-card, .sec-directory-modal .directory-modal-card {
  background: radial-gradient(circle at top, rgba(var(--green-emerald-rgb), 0.15), transparent 55%),
    linear-gradient(140deg, var(--directory-green-950) 0%, var(--directory-green-900) 35%, var(--directory-green-800) 100%);
  /* Minimal contrast bump via border only (surgical fix) */
  border-color: rgba(var(--green-emerald-rgb), 0.5);
  box-shadow: var(--shadow-directory-card);
  backdrop-filter: blur(10px);
}
#secDirectoryModal .directory-modal-header, .sec-directory-modal .directory-modal-header {
  background: linear-gradient(135deg, rgba(var(--green-emerald-rgb), 0.12) 0%, rgba(var(--green-spring-rgb), 0.08) 100%);
  /* Slightly stronger divider for clarity */
  border-bottom-color: rgba(var(--green-emerald-rgb), 0.45);
  box-shadow: var(--shadow-inset-bottom-dark-35);
}
#secDirectoryModal .directory-modal-close, .sec-directory-modal .directory-modal-close {
  color: rgba(var(--white-rgb),  0.6);
  transition: color 160ms ease, transform 160ms ease, text-shadow 160ms ease;
}
#secDirectoryModal .directory-modal-close:hover,
#secDirectoryModal .directory-modal-close:focus-visible,
.sec-directory-modal .directory-modal-close:hover,
.sec-directory-modal .directory-modal-close:focus-visible {
  color: var(--directory-green-400);
  text-shadow: 0 0 12px rgba(var(--green-emerald-rgb), 0.75);
  transform: scale(1.08);
}
#secDirectoryModal .directory-modal-body, .sec-directory-modal .directory-modal-body {
  background: linear-gradient(135deg, rgba(var(--green-forest-4-rgb), 0.75) 0%, rgba(var(--green-forest-3-rgb), 0.9) 65%),
    radial-gradient(circle at bottom, rgba(var(--green-spring-rgb), 0.12), transparent 60%);
}
#secDirectoryModal .directory-modal-search-shell, .sec-directory-modal .directory-modal-search-shell {
  background: rgba(var(--green-forest-3-rgb), 0.8);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-search-shell);
  padding: var(--space-3);
}
#secDirectoryModal .directory-modal-search, .sec-directory-modal .directory-modal-search {
  background: rgba(var(--black-rgb),  0.4);
  border: 1px solid rgba(var(--green-emerald-rgb), 0.35);
  box-shadow: var(--glow-emerald-inset-xl-08);
  color: rgba(var(--white-rgb),  0.88);
  transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}
#secDirectoryModal .directory-modal-search::-moz-placeholder, .sec-directory-modal .directory-modal-search::-moz-placeholder {
  color: rgba(var(--mint-ice-rgb), 0.45);
  letter-spacing: 0.04em;
}
#secDirectoryModal .directory-modal-search::placeholder, .sec-directory-modal .directory-modal-search::placeholder {
  color: rgba(var(--mint-ice-rgb), 0.45);
  letter-spacing: 0.04em;
}
#secDirectoryModal .directory-modal-search:focus, .sec-directory-modal .directory-modal-search:focus {
  outline: none;
  background: rgba(var(--green-leaf-deep-rgb), 0.75);
  border-color: var(--directory-green-400);
  box-shadow: var(--outline-emerald-2-25-inset-glow);
}
#secDirectoryModal .directory-modal-list, .sec-directory-modal .directory-modal-list {
  background: rgba(var(--green-forest-3-rgb), 0.6);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(var(--green-emerald-rgb), 0.18);
  box-shadow: var(--glow-emerald-inset-lg-10);
}
#secDirectoryModal .directory-modal-list > div,
#secDirectoryModal .directory-modal-list > button,
#secDirectoryModal .directory-modal-list button[data-sym],
.sec-directory-modal .directory-modal-list > div,
.sec-directory-modal .directory-modal-list > button,
.sec-directory-modal .directory-modal-list button[data-sym] {
  border-color: rgba(var(--green-emerald-rgb), 0.1);
}
#secDirectoryModal .directory-modal-list button[data-sym], .sec-directory-modal .directory-modal-list button[data-sym] {
  background: linear-gradient(90deg, rgba(var(--green-forest-1-rgb), 0.5) 0%, rgba(var(--green-forest-2-rgb), 0.2) 100%);
  color: rgba(var(--mint-snow-rgb), 0.92);
  border-radius: var(--radius-md-tight);
  border: var(--border-1) solid transparent;
  transition: transform 160ms ease, background 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}
#secDirectoryModal .directory-modal-list button[data-sym]:hover,
#secDirectoryModal .directory-modal-list button[data-sym]:focus-visible,
.sec-directory-modal .directory-modal-list button[data-sym]:hover,
.sec-directory-modal .directory-modal-list button[data-sym]:focus-visible {
  background: linear-gradient(95deg, rgba(var(--green-spring-rgb), 0.35) 0%, rgba(var(--green-emerald-rgb), 0.2) 100%);
  border-color: rgba(var(--green-emerald-rgb), 0.4);
  transform: translateY(-1px) scale(1.01);
  box-shadow: var(--shadow-directory-list-item);
  outline: none;
}
#secDirectoryModal .directory-modal-list button[data-sym] span.font-semibold, .sec-directory-modal .directory-modal-list button[data-sym] span.font-semibold {
  color: var(--directory-green-400);
  text-shadow: 0 0 6px rgba(var(--green-emerald-rgb), 0.55);
}
#secDirectoryModal .directory-modal-list button[data-sym] span.text-xs, .sec-directory-modal .directory-modal-list button[data-sym] span.text-xs {
  color: rgba(var(--mint-soft-rgb), 0.65);
}
#secDirectoryModal .directory-modal-list .text-gray-400, .sec-directory-modal .directory-modal-list .text-gray-400 {
  color: rgba(var(--mint-dim-rgb), 0.7);
}
#secDirectoryModal .directory-modal-body::-webkit-scrollbar, .sec-directory-modal .directory-modal-body::-webkit-scrollbar {
  width: var(--scrollbar-size);
}
#secDirectoryModal .directory-modal-body::-webkit-scrollbar-thumb, .sec-directory-modal .directory-modal-body::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(var(--green-emerald-rgb), 0.5), rgba(var(--green-forest-1-rgb), 0.6));
  border-radius: var(--radius-full);
}
#secDirectoryModal .directory-modal-body::-webkit-scrollbar-track, .sec-directory-modal .directory-modal-body::-webkit-scrollbar-track {
  background: rgba(var(--green-forest-2-rgb), 0.5);
}
/* stylelint-enable declaration-property-value-disallowed-list */
/* Status Details Modal: use modal token layer */
#statusDetailsModal { z-index: var(--z-modal); }
/* -----------------------------------------------------
   SEC Directory Modal — Plain Black & White overrides
   Scope: #secDirectoryModal only (no other modals).
   Intent: maximize contrast using base tokens; avoid theme greens.
   Minimal, surgical overrides; no layout changes.
   ----------------------------------------------------- */
#secDirectoryModal .directory-modal-card {
  background: var(--color-bg);
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-modal-md-black-50);
  color: var(--color-text-strong);
}
#secDirectoryModal .directory-modal-header {
  background: var(--color-bg-muted);
  border-bottom-color: var(--color-border-strong);
  box-shadow: none;
}
#secDirectoryModal .directory-modal-header h2,
#secDirectoryModal .text-accent { color: var(--color-text-strong); text-shadow: none; }
#secDirectoryModal .directory-modal-search-shell { background: var(--color-bg); box-shadow: none; }
#secDirectoryModal .directory-modal-search {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  color: var(--color-text-strong);
  box-shadow: none;
}
#secDirectoryModal .directory-modal-search::-moz-placeholder { color: var(--color-text-muted); }
#secDirectoryModal .directory-modal-search::placeholder { color: var(--color-text-muted); }
#secDirectoryModal .directory-modal-list { background: var(--color-bg); border: 1px solid var(--color-border); box-shadow: none; }
#secDirectoryModal .directory-modal-list > div,
#secDirectoryModal .directory-modal-list > button,
#secDirectoryModal .directory-modal-list button[data-sym] { border-color: var(--color-border); }
#secDirectoryModal .directory-modal-list button[data-sym] {
  background: var(--color-surface);
  color: var(--color-text-strong);
  border: var(--border-1) solid var(--color-border);
  transform: none;
  box-shadow: none;
}
#secDirectoryModal .directory-modal-list button[data-sym]:hover,
#secDirectoryModal .directory-modal-list button[data-sym]:focus-visible {
  background: var(--color-surface-hover);
  border-color: var(--color-border-strong);
}
#secDirectoryModal .directory-modal-list button[data-sym] span.font-semibold,
#secDirectoryModal .directory-modal-list button[data-sym] span.text-xs,
#secDirectoryModal .directory-modal-list .text-gray-400 { color: var(--color-text-strong); text-shadow: none; }
/* Neutralize green-tinted body gradient and scrollbar inside directory modal */
#secDirectoryModal .directory-modal-body { background: var(--color-bg); }
#secDirectoryModal .directory-modal-body::-webkit-scrollbar-thumb { background: var(--color-border); }
#secDirectoryModal .directory-modal-body::-webkit-scrollbar-track { background: var(--color-bg-muted); }
/* SEC Form Types Guide: increase modal width by ~30% (from ~56rem to ~72.8rem).
   Keep responsive via viewport cap. Targets both legacy .modal-content and
   the direct child used in the sanitized markup. */
#formTypesModal .modal-content,
#formTypesModal > div { max-width: min(72.8rem, 96vw); }
/* Profile Terms & Privacy: increase modal width by ~30% (from ~48rem to ~62.4rem) */
#tosPrivacyModal .modal-content,
#tosPrivacyModal > div { max-width: min(62.4rem, 96vw); }
/* drawer.css
   Purpose: Generic drawer/backdrop attribute hooks to enable unified JS control.
   Note: Panel positioning and full visuals remain in component-specific CSS for now. */
/* Backdrop base: positioned and safe-area aware */
[data-drawer-backdrop] {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(var(--black-rgb), 0.5);
  z-index: var(--z-backdrop);
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}
[data-drawer-backdrop].open { display: block; }
/* Drawer panel visibility (feature CSS defines placement/sizing) */
[data-drawer] { display: none; }
[data-drawer].open { display: block; }
/* Panels opt-in to visibility via their own rules. This file intentionally
   avoids positioning so it does not conflict with existing ID-specific CSS. */