/* Mobile Optimizations for Native App Wrapper (WebView) */

/* ============================================
   iOS Safe Area Support (Notch / Dynamic Island)
   ============================================ */

/* Apply safe area padding when in webview/app mode */
html {
  /* Extend background color behind the notch */
  background-color: #0a0e27;
}

body {
  /* Extend background behind notch but don't add padding here */
  background-color: #0a0e27;
}

/* Safe area support for webview mode */
body.webview-mode {
  /* Remove padding-bottom that could cause menu to lift */
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

/* Navbar safe area - push content below notch */
body.webview-mode .navbar,
.webview-mode .navbar {
  /* Add safe area padding to top */
  padding-top: calc(env(safe-area-inset-top, 0px) + 0.5rem) !important;
  /* Extend background into the safe area */
  margin-top: calc(-1 * env(safe-area-inset-top, 0px));
  padding-left: calc(env(safe-area-inset-left, 0px) + 0.5rem);
  padding-right: calc(env(safe-area-inset-right, 0px) + 0.5rem);
}

/* For pages without navbar, add margin to main content to account for notch */
/* This is now handled in webview_hide_elements.css with margin-top */
/* Keeping this for backward compatibility but it will be overridden */
body.webview-mode #main-content:first-child,
.webview-mode .dashboard-container {
  padding-top: 0;
}

/* Ensure the status bar area has the correct background */
/* DISABLED: This ::before pseudo-element was causing visibility issues
body.webview-mode::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: env(safe-area-inset-top, 0);
  background-color: #0a0e27;
  z-index: 9999;
}
*/

/* Alternative: If navbar is not sticky, ensure top spacing */
@supports (padding-top: env(safe-area-inset-top)) {
  body.webview-mode {
    /* Safe area aware viewport - use dvh for better mobile support */
    min-height: 100dvh;
    min-height: -webkit-fill-available;
    /* Prevent initial scroll to bottom */
    overflow-anchor: none;
  }
}

/* ============================================
   Hide Footer in Webview Mode Only
   ============================================ */
/* Footer is hidden via Rails `unless webview_mode?` in layouts */
/* This CSS is just a fallback for webview mode */
.webview-mode footer.footer {
  display: none !important;
}

/* ============================================
   Touch Targets & Interactions
   ============================================ */

/* Minimum touch target size (44x44px recommended by Apple/Google) */
button,
.btn,
a.btn,
input[type="button"],
input[type="submit"],
.nav-link,
.tab-link,
.clickable {
  min-height: 44px;
  min-width: 44px;
  padding: 12px 16px;
  touch-action: manipulation; /* Prevents double-tap zoom */
  -webkit-tap-highlight-color: rgba(0, 212, 170, 0.2);
}

/* Remove tap highlight on iOS */
* {
  -webkit-tap-highlight-color: transparent;
}

button:active,
.btn:active,
a:active {
  -webkit-tap-highlight-color: rgba(0, 212, 170, 0.3);
}

/* ============================================
   Form Elements Mobile Optimization
   ============================================ */

/* Prevent zoom on input focus (iOS) */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
textarea,
select {
  font-size: 16px !important; /* Prevents iOS zoom on focus */
  min-height: 44px;
  padding: 12px 16px;
  touch-action: manipulation;
}

/* ============================================
   Scroll Behavior
   ============================================ */

html {
  -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
  scroll-behavior: smooth;
}

body {
  overflow-x: hidden; /* Prevent horizontal scroll */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ============================================
   Tables Mobile Optimization - SMART CARD LAYOUT
   ============================================ */

/* Mobile: Smart Card layout for DASHBOARD STOCKS TABLE */
@media (max-width: 767px) {

  /* ============================================================
     STOCK CARDS — CONCEPT B+ "GLOW CARD PREMIUM"
     Ticker + Name | Glow line | Signal + Confidence | Price + Sparkline
     Events + Vous | Actions (Analyse IA / Historique / Action)
     ============================================================ */

  .dashboard-container table.stocks-table {
    display: block !important;
    width: 100% !important;
    border: none !important;
    background: transparent !important;
  }

  .dashboard-container table.stocks-table thead {
    display: none !important;
  }

  .dashboard-container table.stocks-table tbody {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }

  /* ====== CARD CONTAINER ====== */
  .dashboard-container table.stocks-table tr.stock-row {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    grid-template-rows: auto auto auto auto auto auto !important;
    grid-template-areas:
      "stock    price"
      "glow     glow"
      "signal   position"
      "perso    position"
      "events   position"
      "details  details" !important;
    gap: 0 !important;
    row-gap: 8px !important;
    position: relative !important;
    margin-bottom: 0 !important;
    border: 1px solid rgba(255, 255, 255, 0.09) !important;
    border-radius: 18px !important;
    padding: 14px 14px 13px 14px !important;
    background: linear-gradient(160deg,
      rgba(18, 22, 46, 0.99) 0%,
      rgba(10, 13, 28, 1) 100%) !important;
    box-shadow: 0 6px 28px rgba(0, 0, 0, 0.5) !important;
    overflow: visible !important;
    transition: box-shadow 0.2s ease !important;
  }

  /* Signal-colored tint on card background */
  .dashboard-container table.stocks-table tr.stock-row.signal-buy {
    background: linear-gradient(160deg,
      rgba(14, 22, 40, 0.99) 0%,
      rgba(0, 24, 16, 0.98) 100%) !important;
    border-color: rgba(0, 212, 170, 0.18) !important;
  }

  .dashboard-container table.stocks-table tr.stock-row.signal-sell {
    background: linear-gradient(160deg,
      rgba(28, 14, 18, 0.99) 0%,
      rgba(30, 6, 10, 0.98) 100%) !important;
    border-color: rgba(220, 53, 69, 0.2) !important;
  }

  /* Only stock-row gets card styling; other rows (chart dropdowns, etc.) are plain */
  .dashboard-container table.stocks-table tr:not(.stock-row) {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
  }

  /* Hide all td by default */
  .dashboard-container table.stocks-table td {
    display: none !important;
    border: none !important;
    padding: 0 !important;
  }

  /* ====== ROW 1: TICKER + NAME (left) | PRICE (right) ====== */
  .dashboard-container table.stocks-table td.stock-cell {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    grid-area: stock !important;
    gap: 7px !important;
    padding: 0 !important;
    background: transparent !important;
  }

  .dashboard-container table.stocks-table .stock-info-compact {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 7px !important;
  }

  .dashboard-container table.stocks-table .stock-info-compact .stock-title-row {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
  }

  /* Ticker badge — bigger, bolder */
  .dashboard-container table.stocks-table .stock-info-compact .symbol-tag {
    font-size: 13px !important;
    font-weight: 800 !important;
    padding: 4px 9px !important;
    background: linear-gradient(135deg, rgba(0, 212, 170, 0.13) 0%, rgba(0, 168, 255, 0.07) 100%) !important;
    border: 1px solid rgba(0, 212, 170, 0.28) !important;
    border-radius: 7px !important;
    color: #00d4aa !important;
    letter-spacing: 0.5px !important;
  }

  /* Stock name */
  .dashboard-container table.stocks-table .stock-info-compact .stock-name-inline {
    font-size: 11px !important;
    color: rgba(255, 255, 255, 0.45) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    max-width: 115px !important;
    font-weight: 400 !important;
  }

  .dashboard-container table.stocks-table .stock-info-compact .stock-actions-row {
    display: none !important;
  }

  /* Asset type badge (CRYPTO etc) — icon only */
  .dashboard-container table.stocks-table td.stock-cell .asset-type-badge {
    font-size: 0 !important;
    padding: 3px !important;
    min-width: 18px !important;
    min-height: 18px !important;
  }

  .dashboard-container table.stocks-table td.stock-cell .asset-type-badge i,
  .dashboard-container table.stocks-table td.stock-cell .asset-type-badge svg {
    font-size: 10px !important;
    width: 10px !important;
    height: 10px !important;
  }

  /* Exchange status dot */
  .dashboard-container table.stocks-table .stock-info-compact .exchange-status {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 14px !important;
    height: 14px !important;
    min-width: 14px !important;
    border-radius: 50% !important;
    font-size: 7px !important;
  }

  /* ====== PRICE CELL (top right) ====== */
  .dashboard-container table.stocks-table td.price-cell {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    justify-content: flex-start !important;
    grid-area: price !important;
    padding: 0 !important;
    background: transparent !important;
    gap: 3px !important;
    min-width: 0 !important;
    white-space: nowrap !important;
  }

  .dashboard-container table.stocks-table td.price-cell::before {
    display: none !important;
  }

  .dashboard-container table.stocks-table td.price-cell .price-display-compact {
    font-size: 15px !important;
    font-weight: 800 !important;
    color: #fff !important;
    text-align: right !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
    letter-spacing: -0.3px !important;
  }

  .dashboard-container table.stocks-table td.price-cell .price-main {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    white-space: nowrap !important;
  }

  .dashboard-container table.stocks-table td.price-cell .price-live-dot {
    width: 5px !important;
    height: 5px !important;
    background: #00d4aa !important;
    border-radius: 50% !important;
    animation: pulse-live 2s infinite !important;
    flex-shrink: 0 !important;
    box-shadow: 0 0 4px rgba(0, 212, 170, 0.7) !important;
  }

  .dashboard-container table.stocks-table td.price-cell .price-display-compact .usd-conversion {
    font-size: 9px !important;
    color: rgba(255, 255, 255, 0.4) !important;
    display: block !important;
    text-align: right !important;
  }

  /* Sparkline — more prominent */
  .dashboard-container table.stocks-table td.price-cell .micro-sparkline-container {
    display: block !important;
    margin-top: 4px !important;
  }

  .dashboard-container table.stocks-table td.price-cell .micro-sparkline-container canvas {
    width: 68px !important;
    height: 22px !important;
  }

  /* ====== GLOW LINE ====== */
  .dashboard-container table.stocks-table tr.stock-row::before {
    content: "" !important;
    grid-area: glow !important;
    display: block !important;
    height: 1px !important;
    border-radius: 2px !important;
    background: linear-gradient(90deg,
      transparent 0%,
      rgba(0, 212, 170, 0.55) 25%,
      rgba(0, 168, 255, 0.45) 75%,
      transparent 100%) !important;
    margin: 2px 0 !important;
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    animation: glow-pulse 3s ease-in-out infinite !important;
  }

  .dashboard-container table.stocks-table tr.stock-row.signal-buy::before {
    background: linear-gradient(90deg,
      transparent 0%,
      rgba(0, 212, 170, 1) 35%,
      rgba(34, 197, 94, 0.7) 65%,
      transparent 100%) !important;
    box-shadow: 0 0 1px rgba(0, 212, 170, 0.6) !important;
  }

  .dashboard-container table.stocks-table tr.stock-row.signal-sell::before {
    background: linear-gradient(90deg,
      transparent 0%,
      rgba(239, 68, 68, 1) 35%,
      rgba(220, 53, 69, 0.7) 65%,
      transparent 100%) !important;
    box-shadow: 0 0 1px rgba(220, 53, 69, 0.6) !important;
  }

  @keyframes glow-pulse {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
  }

  /* ====== SIGNAL CELL ====== */
  .dashboard-container table.stocks-table td.signal-cell {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    grid-area: signal !important;
    padding: 0 2px !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    gap: 8px !important;
    min-height: 0 !important;
  }

  .dashboard-container table.stocks-table td.signal-cell::before {
    content: "SIGNAL" !important;
    font-size: 8px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    color: rgba(255, 255, 255, 0.3) !important;
    letter-spacing: 0.8px !important;
    flex-shrink: 0 !important;
  }

  .dashboard-container table.stocks-table td.signal-cell .signal-display {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 6px !important;
    flex-wrap: nowrap !important;
  }

  /* Main signal badge — prominent */
  .dashboard-container table.stocks-table td.signal-cell .action-badge.main-signal {
    font-size: 11px !important;
    padding: 5px 13px !important;
    font-weight: 800 !important;
    border-radius: 7px !important;
    letter-spacing: 0.4px !important;
  }

  /* Buy signal: green glow */
  .dashboard-container table.stocks-table td.signal-cell .action-badge.main-signal.buy {
    box-shadow: 0 0 14px rgba(0, 212, 170, 0.35) !important;
  }

  /* Sell signal: red glow */
  .dashboard-container table.stocks-table td.signal-cell .action-badge.main-signal.sell {
    box-shadow: 0 0 14px rgba(220, 53, 69, 0.35) !important;
  }

  /* Hold/Wait signal */
  .dashboard-container table.stocks-table td.signal-cell .action-badge.main-signal.hold,
  .dashboard-container table.stocks-table td.signal-cell .action-badge.main-signal.wait {
    box-shadow: 0 0 10px rgba(255, 167, 38, 0.2) !important;
  }

  .dashboard-container table.stocks-table td.signal-cell .action-badge.mini {
    font-size: 9px !important;
    padding: 3px 7px !important;
    opacity: 0.9 !important;
    border-radius: 4px !important;
  }

  .dashboard-container table.stocks-table td.signal-cell .ai-disagreement-warning {
    font-size: 11px !important;
  }

  /* Sub-row (today signal + disagreement) */
  .dashboard-container table.stocks-table td.signal-cell .signal-sub-row {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
  }

  /* ---- Today signal icon — ROUND ---- */
  .dashboard-container table.stocks-table td.signal-cell .today-signal-icon,
  .dashboard-container table.stocks-table td.signal-cell a.today-signal-icon,
  .dashboard-container table.stocks-table td.signal-cell .premium-locked-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    flex-shrink: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
  }

  .dashboard-container table.stocks-table td.signal-cell .today-signal-icon i,
  .dashboard-container table.stocks-table td.signal-cell a.today-signal-icon i,
  .dashboard-container table.stocks-table td.signal-cell .premium-locked-icon i {
    font-size: 8px !important;
    line-height: 1 !important;
    margin: 0 !important;
  }

  /* ---- AI confidence badge (mobile, inline with signal) ---- */
  .dashboard-container table.stocks-table td.signal-cell .mobile-conf-badge {
    display: inline-flex !important;
    align-items: center !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    padding: 2px 6px !important;
    border-radius: 5px !important;
    letter-spacing: 0.2px !important;
    white-space: nowrap !important;
  }

  .dashboard-container table.stocks-table td.signal-cell .mobile-conf-badge.conf-high {
    background: rgba(0, 212, 170, 0.12) !important;
    color: #00d4aa !important;
    border: 1px solid rgba(0, 212, 170, 0.25) !important;
  }

  .dashboard-container table.stocks-table td.signal-cell .mobile-conf-badge.conf-medium {
    background: rgba(245, 158, 11, 0.12) !important;
    color: #f59e0b !important;
    border: 1px solid rgba(245, 158, 11, 0.25) !important;
  }

  .dashboard-container table.stocks-table td.signal-cell .mobile-conf-badge.conf-low {
    background: rgba(255, 77, 106, 0.12) !important;
    color: #ff4d6a !important;
    border: 1px solid rgba(255, 77, 106, 0.25) !important;
  }

  /* ====== PERSO CELL (mobile only, between signal and events) ====== */
  .dashboard-container table.stocks-table td.mobile-perso-cell {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    grid-area: perso !important;
    padding: 0 2px !important;
    background: transparent !important;
    border: none !important;
    gap: 8px !important;
    min-height: 0 !important;
  }

  .dashboard-container table.stocks-table td.mobile-perso-cell::before {
    display: none !important;
  }

  .mobile-perso-label {
    font-size: 8px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    color: rgba(255, 255, 255, 0.3) !important;
    letter-spacing: 0.8px !important;
    flex-shrink: 0 !important;
  }

  .mobile-perso-badge {
    font-size: 10px !important;
    padding: 4px 10px !important;
    font-weight: 800 !important;
    border-radius: 6px !important;
  }

  .mobile-perso-locked {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    color: rgba(255, 255, 255, 0.3) !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 5px !important;
    padding: 3px 8px !important;
    text-decoration: none !important;
  }

  .mobile-perso-locked i {
    font-size: 8px !important;
  }

  .mobile-perso-locked:hover {
    color: #00d4aa !important;
    border-color: rgba(0, 212, 170, 0.3) !important;
  }

  .mobile-perso-pending {
    font-size: 9px !important;
    color: rgba(255, 255, 255, 0.3) !important;
  }

  /* ====== POSITION CELL (right, spans rows 3-4) — shows J+1 on mobile ====== */
  .dashboard-container table.stocks-table td.position-cell {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    grid-area: position !important;
    grid-row: 3 / 6 !important;
    padding: 10px 12px !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.07) !important;
    border-radius: 12px !important;
    gap: 5px !important;
    min-width: 78px !important;
    margin-left: 6px !important;
  }

  /* Tint J+1 cell border by signal */
  .dashboard-container table.stocks-table tr.stock-row.signal-buy td.position-cell {
    background: rgba(0, 212, 170, 0.06) !important;
    border-color: rgba(0, 212, 170, 0.18) !important;
  }

  .dashboard-container table.stocks-table tr.stock-row.signal-sell td.position-cell {
    background: rgba(220, 53, 69, 0.06) !important;
    border-color: rgba(220, 53, 69, 0.18) !important;
  }

  /* Watchlist PnL block - compact on mobile */
  .dashboard-container table.stocks-table td.position-cell .watchlist-pnl-block {
    gap: 2px !important;
    text-align: center !important;
  }

  .dashboard-container table.stocks-table td.position-cell .watchlist-pnl-block .watchlist-since {
    font-size: 0.65rem !important;
    gap: 0.2rem !important;
    justify-content: center !important;
  }

  .dashboard-container table.stocks-table td.position-cell .watchlist-pnl-block .watchlist-pnl {
    justify-content: center !important;
    gap: 0.25rem !important;
  }

  .dashboard-container table.stocks-table td.position-cell .watchlist-pnl-block .watchlist-pnl .wl-pnl-amount {
    font-size: 0.75rem !important;
  }

  .dashboard-container table.stocks-table td.position-cell .watchlist-pnl-block .watchlist-pnl .wl-pnl-pct {
    font-size: 0.65rem !important;
  }

  .dashboard-container table.stocks-table td.position-cell .watchlist-pnl-block .watchlist-ref-price {
    font-size: 0.6rem !important;
  }

  /* Hide desktop P&L content on mobile */
  .dashboard-container table.stocks-table td.position-cell .position-two-cols {
    display: none !important;
  }

  /* J+1 display block (mobile only) */
  .dashboard-container table.stocks-table td.position-cell .mobile-j1-display {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 5px !important;
  }

  .dashboard-container table.stocks-table td.position-cell .mobile-j1-label {
    font-size: 8px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    color: rgba(255, 255, 255, 0.35) !important;
    letter-spacing: 1.2px !important;
  }

  .dashboard-container table.stocks-table td.position-cell .mobile-j1-value {
    font-size: 16px !important;
    font-weight: 800 !important;
    letter-spacing: -0.5px !important;
    line-height: 1 !important;
    text-shadow: 0 0 12px currentColor !important;
  }

  .dashboard-container table.stocks-table td.position-cell .mobile-j1-value.positive {
    color: #00d4aa !important;
  }

  .dashboard-container table.stocks-table td.position-cell .mobile-j1-value.negative {
    color: #ff4d6a !important;
  }

  .dashboard-container table.stocks-table td.position-cell .mobile-j1-locked {
    opacity: 0.4 !important;
  }

  .dashboard-container table.stocks-table td.position-cell .mobile-j1-lock-icon {
    font-size: 12px !important;
    color: rgba(255, 255, 255, 0.35) !important;
  }

  /* Confidence label text under bar */
  .dashboard-container table.stocks-table td.position-cell .mobile-j1-conf-text {
    font-size: 8px !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    opacity: 0.6 !important;
    margin-top: 1px !important;
  }

  .dashboard-container table.stocks-table td.position-cell .mobile-j1-conf-text.conf-high {
    color: #00d4aa !important;
  }

  .dashboard-container table.stocks-table td.position-cell .mobile-j1-conf-text.conf-medium {
    color: #f59e0b !important;
  }

  .dashboard-container table.stocks-table td.position-cell .mobile-j1-conf-text.conf-low {
    color: #ff4d6a !important;
  }

  /* Confidence bar under Est. Close value */
  .dashboard-container table.stocks-table td.position-cell .mobile-j1-conf-bar {
    width: 100% !important;
    height: 3px !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border-radius: 2px !important;
    overflow: hidden !important;
    margin-top: 2px !important;
  }

  .dashboard-container table.stocks-table td.position-cell .mobile-j1-conf-fill {
    height: 100% !important;
    border-radius: 2px !important;
    transition: width 0.4s ease !important;
  }

  .dashboard-container table.stocks-table td.position-cell .mobile-j1-conf-fill.conf-high {
    background: #00d4aa !important;
    box-shadow: 0 0 4px rgba(0, 212, 170, 0.6) !important;
  }

  .dashboard-container table.stocks-table td.position-cell .mobile-j1-conf-fill.conf-medium {
    background: #f59e0b !important;
    box-shadow: 0 0 4px rgba(245, 158, 11, 0.5) !important;
  }

  .dashboard-container table.stocks-table td.position-cell .mobile-j1-conf-fill.conf-low {
    background: #ff4d6a !important;
    box-shadow: 0 0 4px rgba(255, 77, 106, 0.5) !important;
  }

  .dashboard-container table.stocks-table td.position-cell .pos-shares-inline {
    display: none !important;
  }

  /* ====== EVENTS CELL ====== */
  .dashboard-container table.stocks-table td.events-cell {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    grid-area: events !important;
    padding: 0 2px !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    gap: 6px !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
    width: 100% !important;
    justify-self: stretch !important;
  }

  .dashboard-container table.stocks-table td.events-cell::before {
    content: "EVENTS" !important;
    display: block !important;
    font-size: 8px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    color: rgba(255, 255, 255, 0.25) !important;
    letter-spacing: 0.8px !important;
    flex-shrink: 0 !important;
  }

  /* Hide "EVENTS" label when no events (only dash shown) */
  .dashboard-container table.stocks-table td.events-cell:not(:has(.event-icon))::before {
    display: none !important;
  }

  .dashboard-container table.stocks-table td.events-cell .events-icons {
    display: flex !important;
    flex-direction: row !important;
    gap: 5px !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
  }

  .dashboard-container table.stocks-table td.events-cell .event-icon {
    width: 22px !important;
    height: 22px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 9px !important;
  }

  /* Hide dash when no events */
  .dashboard-container table.stocks-table td.events-cell .text-muted {
    display: none !important;
  }

  /* ====== PERSONALIZED SIGNAL (VOUS) — hidden, merged into events row ====== */
  .dashboard-container table.stocks-table td.personalized-signal-cell,
  .dashboard-container table.stocks-table tr.stock-row td.personalized-signal-cell {
    display: none !important;
  }

  /* ====== DETAILS CELL — Action buttons ====== */
  .dashboard-container table.stocks-table td.details-cell {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    gap: 6px !important;
    grid-area: details !important;
    width: 100% !important;
    padding: 8px 0 0 0 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
    margin-top: 2px !important;
    height: auto !important;
    min-height: 44px !important;
  }

  .dashboard-container table.stocks-table td.details-cell::before {
    display: none !important;
  }

  /* ---- Historique button (chart, left icon) ---- */
  .dashboard-container table.stocks-table td.details-cell .btn-details-chart,
  .dashboard-container table.stocks-table td.details-cell .btn-details-chart.mobile-only {
    display: inline-flex !important;
    flex: 0 0 36px !important;
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(99, 102, 241, 0.1) !important;
    border: 1px solid rgba(99, 102, 241, 0.2) !important;
    border-radius: 10px !important;
    color: #a5b4fc !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
  }

  .dashboard-container table.stocks-table td.details-cell .btn-details-chart .fa-chart-line {
    font-size: 13px !important;
  }

  .dashboard-container table.stocks-table td.details-cell .btn-details-chart .chevron-icon,
  .dashboard-container table.stocks-table td.details-cell .btn-details-chart .btn-details-text {
    display: none !important;
  }

  .dashboard-container table.stocks-table td.details-cell .btn-details-chart[aria-expanded="true"] {
    background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
    border-color: transparent !important;
    color: #fff !important;
    box-shadow: 0 2px 10px rgba(99, 102, 241, 0.4) !important;
  }

  /* ---- P&L badge (compact, between chart btn and AI btn) ---- */
  .dashboard-container table.stocks-table td.details-cell .mobile-pnl-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    align-self: stretch !important;
    height: auto !important;
    min-height: 36px !important;
    padding: 0 8px !important;
    border-radius: 10px !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: -0.3px !important;
    white-space: nowrap !important;
    transition: all 0.2s ease !important;
  }

  .dashboard-container table.stocks-table td.details-cell .mobile-pnl-badge.positive {
    background: rgba(0, 212, 170, 0.09) !important;
    border: 1px solid rgba(0, 212, 170, 0.22) !important;
    color: #00d4aa !important;
  }

  .dashboard-container table.stocks-table td.details-cell .mobile-pnl-badge.negative {
    background: rgba(255, 77, 106, 0.09) !important;
    border: 1px solid rgba(255, 77, 106, 0.22) !important;
    color: #ff4d6a !important;
  }

  /* ---- Analyse IA button (main CTA, flex: 1) ---- */
  .dashboard-container table.stocks-table td.details-cell .btn-details-ai {
    flex: 1 1 auto !important;
    height: 36px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 0 10px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    background: linear-gradient(135deg,
      rgba(0, 168, 255, 0.12) 0%,
      rgba(0, 212, 170, 0.08) 100%) !important;
    border: 1px solid rgba(0, 168, 255, 0.22) !important;
    border-radius: 10px !important;
    color: #00a8ff !important;
    letter-spacing: 0.2px !important;
    transition: all 0.2s ease !important;
  }

  .dashboard-container table.stocks-table td.details-cell .btn-details-ai i {
    font-size: 12px !important;
  }

  .dashboard-container table.stocks-table td.details-cell .btn-details-ai .btn-details-text {
    display: inline !important;
  }

  .dashboard-container table.stocks-table td.details-cell .btn-details-ai .chevron-icon {
    display: none !important;
  }

  .dashboard-container table.stocks-table td.details-cell .btn-details-ai[aria-expanded="true"] {
    background: linear-gradient(135deg, #00a8ff, #00d4aa) !important;
    border-color: transparent !important;
    color: #fff !important;
    box-shadow: 0 2px 14px rgba(0, 168, 255, 0.4) !important;
  }

  /* ---- Transaction (Action) button — wrapper + button must both stretch ---- */
  .dashboard-container table.stocks-table td.details-cell .dashboard-transaction-dropdown {
    display: flex !important;
    align-items: stretch !important;
    flex: 0 0 36px !important;
    width: 36px !important;
  }

  .dashboard-container table.stocks-table td.details-cell .dashboard-transaction-dropdown .transaction-dropdown-component,
  .dashboard-container table.stocks-table td.details-cell .dashboard-transaction-dropdown .dropdown {
    display: flex !important;
    align-items: stretch !important;
    width: 100% !important;
    height: 100% !important;
  }

  .dashboard-container table.stocks-table td.details-cell .transaction-dropdown-component .btn,
  .dashboard-container table.stocks-table td.details-cell .dashboard-transaction-dropdown .btn {
    display: flex !important;
    width: 36px !important;
    height: 100% !important;
    min-height: 36px !important;
    padding: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(255, 167, 38, 0.1) !important;
    border: 1px solid rgba(255, 167, 38, 0.22) !important;
    border-radius: 10px !important;
    color: #ffb347 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    margin-bottom: 0 !important;
  }

  .dashboard-container table.stocks-table td.details-cell .transaction-dropdown-component .btn i,
  .dashboard-container table.stocks-table td.details-cell .dashboard-transaction-dropdown .btn i {
    font-size: 14px !important;
    margin: 0 !important;
  }

  .dashboard-container table.stocks-table td.details-cell .transaction-dropdown-component .btn::after,
  .dashboard-container table.stocks-table td.details-cell .dashboard-transaction-dropdown .btn::after {
    display: none !important;
  }

  /* ====== HIDE desktop-only cells ====== */
  .dashboard-container table.stocks-table td.chart-cell,
  .dashboard-container table.stocks-table td.prediction-cell {
    display: none !important;
  }

  /* ====== LIVE DOT ANIMATION ====== */
  .dashboard-container table.stocks-table td.price-cell .price-live-dot {
    display: inline-block !important;
    flex-shrink: 0 !important;
    width: 5px !important;
    height: 5px !important;
    border-radius: 50% !important;
    background: #00d4aa !important;
    margin-left: 0.15rem !important;
    vertical-align: middle !important;
    animation: pulse-live 2s infinite !important;
    box-shadow: 0 0 5px rgba(0, 212, 170, 0.6) !important;
  }

  /* ====== YOUR STOCK EVENTS - 2x2 Grid on Mobile ====== */
  .dashboard-container .stock-events-section .stock-events-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }

  .dashboard-container .stock-events-section .stock-event-card {
    padding: 8px 10px !important;
    border-radius: 10px !important;
    border-left-width: 3px !important;
  }

  .dashboard-container .stock-events-section .stock-event-header {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    align-items: center !important;
    margin-bottom: 4px !important;
  }

  .dashboard-container .stock-events-section .stock-event-header .event-emoji {
    font-size: 14px !important;
  }

  .dashboard-container .stock-events-section .stock-event-header .event-symbol {
    font-size: 11px !important;
    font-weight: 700 !important;
  }

  .dashboard-container .stock-events-section .stock-event-header .event-type-badge {
    font-size: 8px !important;
    padding: 2px 5px !important;
    border-radius: 4px !important;
  }

  .dashboard-container .stock-events-section .stock-event-body .stock-name {
    font-size: 10px !important;
    color: rgba(255, 255, 255, 0.7) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .dashboard-container .stock-events-section .stock-event-body .event-date,
  .dashboard-container .stock-events-section .stock-event-body .event-details {
    font-size: 9px !important;
    color: rgba(255, 255, 255, 0.5) !important;
  }

  .dashboard-container .stock-events-section .section-header-mini h5 {
    font-size: 13px !important;
  }

  /* ====== CHART DROPDOWN expanded row ====== */
  .dashboard-container table.stocks-table tr.chart-dropdown-row,
  .dashboard-container table.stocks-table tr.ai-analysis-row {
    border: none !important;
  }

  .dashboard-container table.stocks-table tr.chart-dropdown-row {
    display: block !important;
    margin-top: -0.35rem !important;
    /* border: 1px solid rgba(99, 102, 241, 0.25) !important; */
    border-top: none !important;
    border-radius: 0 0 10px 10px !important;
    background: linear-gradient(180deg, rgba(20, 25, 45, 0.98) 0%, rgba(26, 31, 58, 0.95) 100%) !important;
    padding: 0 !important;
    border: none !important;
  }

  .dashboard-container table.stocks-table tr.chart-dropdown-row td {
    display: block !important;
    padding: 0 !important;
    width: 100% !important;
  }

  .dashboard-container table.stocks-table tr.chart-dropdown-row td.chart-dropdown-cell {
    padding: 0 !important;
  }

  .dashboard-container table.stocks-table tr.chart-dropdown-row .collapse {
    padding: 0.5rem !important;
  }

  .dashboard-container table.stocks-table tr.chart-dropdown-row .chart-dropdown-card {
    padding: 0.4rem !important;
  }

  /* Period selector in chart dropdown - fit all buttons */
  .dashboard-container table.stocks-table tr.chart-dropdown-row .period-selector,
  .chart-dropdown-card .period-selector,
  .historical-chart-section .period-selector {
    gap: 0.15rem !important;
    padding: 0.15rem !important;
    flex-wrap: nowrap !important;
  }

  .dashboard-container table.stocks-table tr.chart-dropdown-row .period-selector .period-btn,
  .chart-dropdown-card .period-selector .period-btn,
  .historical-chart-section .period-selector .period-btn {
    font-size: 0.6rem !important;
    padding: 0.25rem 0.35rem !important;
    min-width: auto !important;
  }

  /* ====== AI Analysis expanded row ====== */
  .dashboard-container table.stocks-table tr.ai-analysis-row {
    display: block !important;
    margin-top: -0.35rem !important;
    /* border: 1px solid rgba(0, 212, 170, 0.15) !important; */
    border-top: none !important;
    border-radius: 0 0 10px 10px !important;
    background: linear-gradient(180deg, rgba(15, 20, 38, 0.98) 0%, rgba(20, 28, 50, 0.95) 100%) !important;
    padding: 0 !important;
    border: none !important;

  }

  .dashboard-container table.stocks-table tr.ai-analysis-row td {
    display: block !important;
    padding: 0 !important;
    width: 100% !important;
  }

  .dashboard-container table.stocks-table tr.ai-analysis-row td.ai-analysis-cell {
    padding: 0 !important;
  }

  .dashboard-container table.stocks-table tr.ai-analysis-row .collapse {
    padding: 0.5rem !important;
  }

  /* ====== FIX: AI Enhanced Badge - hide on mobile ====== */
  .dashboard-container table.stocks-table .stock-info-compact .stock-actions-row {
    display: none !important;
  }

  .dashboard-container table.stocks-table .stock-info-compact .ai-analysis-badge.mini {
    display: none !important;
  }

  /* Show asset type badge inline with symbol */
  .dashboard-container table.stocks-table .stock-info-compact .asset-type-badge {
    font-size: 0.4rem !important;
    padding: 0.12rem 0.3rem !important;
    border-radius: 4px !important;
  }

  /* ====== FIX: Stop Loss overflow - prevent text overflow ====== */
  .dashboard-container .ai-analysis-card .signal-trading-block {
    max-width: 100% !important;
    overflow: hidden !important;
  }

  .dashboard-container .ai-analysis-card .primary-trading-row {
    flex-wrap: wrap !important;
    gap: 0.4rem !important;
    max-width: 100% !important;
  }

  .dashboard-container .ai-analysis-card .key-levels-group {
    flex-wrap: wrap !important;
    gap: 0.3rem !important;
    max-width: 100% !important;
  }

  .dashboard-container .ai-analysis-card .level-chip {
    padding: 0.25rem 0.4rem !important;
    gap: 0.2rem !important;
    flex-shrink: 1 !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .dashboard-container .ai-analysis-card .level-chip .level-label {
    font-size: 0.45rem !important;
    white-space: nowrap !important;
  }

  .dashboard-container .ai-analysis-card .level-chip .level-value {
    font-size: 0.55rem !important;
    white-space: nowrap !important;
  }

  .dashboard-container .ai-analysis-card .level-chip .level-pct {
    font-size: 0.45rem !important;
    padding: 0.1rem 0.2rem !important;
    white-space: nowrap !important;
  }

  .dashboard-container .ai-analysis-card .secondary-trading-row {
    flex-wrap: wrap !important;
    gap: 0.3rem !important;
    max-width: 100% !important;
  }

  /* ====== FIX: Complementary Information title - smaller font ====== */
  .dashboard-container .ai-analysis-card .complementary-info-section {
    margin-top: 0.5rem !important;
    padding-top: 0.5rem !important;
  }

  .dashboard-container .ai-analysis-card .complementary-info-section .section-title {
    font-size: 0.55rem !important;
    gap: 0.3rem !important;
    margin-bottom: 0.5rem !important;
  }

  .dashboard-container .ai-analysis-card .complementary-info-section .section-title i {
    font-size: 0.5rem !important;
  }

  .dashboard-container .ai-analysis-card .complementary-info-section .info-blocks-grid {
    gap: 0.4rem !important;
  }

  .dashboard-container .ai-analysis-card .complementary-info-section .info-block {
    padding: 0.4rem !important;
  }

  .dashboard-container .ai-analysis-card .complementary-info-section .info-block .block-icon {
    font-size: 0.7rem !important;
    margin-right: 0.25rem !important;
  }

  .dashboard-container .ai-analysis-card .complementary-info-section .info-block .block-title {
    font-size: 0.5rem !important;
  }

  .dashboard-container .ai-analysis-card .complementary-info-section .info-block .block-content {
    font-size: 0.6rem !important;
    line-height: 1.4 !important;
    margin-top: 0.3rem !important;
  }

  /* ====== FIX: Exchange Status & Event Icons - force round (not oval) ====== */
  .dashboard-container table.stocks-table .stock-info-compact .exchange-status {
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    min-height: 16px !important;
    max-width: 16px !important;
    max-height: 16px !important;
    border-radius: 50% !important;
    padding: 0 !important;
    font-size: 0.5rem !important;
    flex-shrink: 0 !important;
  }

  .dashboard-container table.stocks-table .stock-info-compact .exchange-status i {
    font-size: 0.5rem !important;
  }

  .dashboard-container table.stocks-table td.events-cell .event-icon {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;
    max-width: 18px !important;
    max-height: 18px !important;
    border-radius: 50% !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
  }

  .dashboard-container table.stocks-table td.events-cell .event-icon i {
    font-size: 0.5rem !important;
  }

  .dashboard-container table.stocks-table .ai-analysis-card {
    padding: 0.5rem !important;
    margin: 0;
    border-radius: 0 0 10px 10px;
    border-top: none;
  }
  
  .dashboard-container table.stocks-table .growth-estimates-container {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.3rem !important;
  }
  
  .dashboard-container table.stocks-table .growth-estimates-container .metric-item {
    padding: 0.35rem !important;
  }
  
  .dashboard-container table.stocks-table .growth-estimates-container .metric-label {
    font-size: 0.5rem !important;
  }
  
  .dashboard-container table.stocks-table .growth-estimates-container .metric-value {
    font-size: 0.7rem !important;
  }
  
  /* Events in AI analysis */
  .dashboard-container table.stocks-table .events-analysis-container {
    margin-top: 0.4rem !important;
    margin-bottom: 0.4rem !important;
    padding: 0.5rem !important;
    border-radius: 8px !important;
  }
  
  .dashboard-container table.stocks-table .events-analysis-header {
    margin-bottom: 0.5rem !important;
  }
  
  .dashboard-container table.stocks-table .events-analysis-header h5 {
    font-size: 0.7rem !important;
    line-height: 1.3 !important;
  }
  
  .dashboard-container table.stocks-table .events-analysis-header h5 i {
    font-size: 0.65rem !important;
    margin-right: 0.3rem !important;
  }
  
  .dashboard-container table.stocks-table .events-analysis-content {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.4rem !important;
  }
  
  .dashboard-container table.stocks-table .event-analysis-item {
    padding: 0.5rem 0.4rem !important;
    gap: 0.35rem !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    font-size: 0.6rem !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
  
  .dashboard-container table.stocks-table .event-analysis-item i {
    font-size: 0.7rem !important;
    min-width: 14px !important;
    flex-shrink: 0 !important;
    margin-top: 0.05rem !important;
  }
  
  .dashboard-container table.stocks-table .event-analysis-item .event-analysis-text {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    gap: 0.2rem !important;
    overflow: visible !important;
    width: auto !important;
  }
  
  .dashboard-container table.stocks-table .event-analysis-item .event-analysis-text strong {
    font-size: 0.6rem !important;
    display: block !important;
    margin-bottom: 0.1rem !important;
  }
  
  .dashboard-container table.stocks-table .event-analysis-item .event-analysis-text span {
    font-size: 0.55rem !important;
    line-height: 1.4 !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
    -webkit-hyphens: auto !important;
    max-width: 100% !important;
    display: block !important;
    white-space: normal !important;
  }
  
  /* ====== AI Analysis Content - FORCE ALL TEXT WRAPPING ====== */
  .dashboard-container .ai-analysis-card {
    max-width: 100% !important;
    width: 100% !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }
  
  .dashboard-container .ai-analysis-card .ai-analysis-content {
    max-width: 100% !important;
    width: 100% !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }
  
  /* AI Reasoning text - exact class from HTML */
  .dashboard-container .ai-analysis-card .reasoning-text,
  .dashboard-container .ai-analysis-card .metric-value.reasoning-text {
    max-width: 100% !important;
    width: 100% !important;
    overflow: visible !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    white-space: normal !important;
    display: block !important;
    font-size: 0.65rem !important;
    line-height: 1.5 !important;
  }
  
  /* Card rationale - ANALYSIS text section */
  .dashboard-container .ai-analysis-card .card-rationale {
    max-width: 100% !important;
    width: 100% !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }
  
  .dashboard-container .ai-analysis-card .card-rationale p {
    max-width: 100% !important;
    width: 100% !important;
    overflow: visible !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    white-space: normal !important;
    font-size: 0.7rem !important;
    line-height: 1.5 !important;
    margin: 0 !important;
  }
  
  .dashboard-container .ai-analysis-card .rationale-header {
    font-size: 0.65rem !important;
    margin-bottom: 0.3rem !important;
  }
  
  .dashboard-container .ai-analysis-card .rationale-header span {
    font-size: 0.6rem !important;
  }
  
  /* Analysis grid - stack on mobile */
  .dashboard-container .ai-analysis-card .analysis-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.5rem !important;
  }
  
  /* Forecast cards in AI analysis */
  .dashboard-container .ai-analysis-card .forecast-card,
  .dashboard-container .ai-analysis-card .daily-forecast-card,
  .dashboard-container .ai-analysis-card .weekly-forecast-card {
    max-width: 100% !important;
    overflow: hidden !important;
    padding: 0.5rem !important;
  }
  
  /* Forecast card headers */
  .dashboard-container .ai-analysis-card .forecast-header,
  .dashboard-container .ai-analysis-card .card-header {
    font-size: 0.75rem !important;
    padding: 0.4rem !important;
    flex-wrap: wrap;
    gap: 0.3rem;
  }
  
  .dashboard-container .ai-analysis-card .forecast-header h4,
  .dashboard-container .ai-analysis-card .card-header h4 {
    font-size: 0.7rem !important;
  }
  
  /* Forecast metrics grid */
  .dashboard-container .ai-analysis-card .forecast-metrics,
  .dashboard-container .ai-analysis-card .metrics-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.3rem !important;
  }
  
  .dashboard-container .ai-analysis-card .metric-item {
    padding: 0.3rem !important;
  }
  
  .dashboard-container .ai-analysis-card .metric-label {
    font-size: 0.5rem !important;
  }
  
  .dashboard-container .ai-analysis-card .metric-value {
    font-size: 0.65rem !important;
  }
  
  /* AI Reasoning box - FORCE TEXT WRAPPING */
  .dashboard-container .ai-analysis-card .reasoning-box,
  .dashboard-container .ai-analysis-card .ai-reasoning,
  .dashboard-container .ai-analysis-card [class*="reasoning"] {
    max-width: 100% !important;
    width: 100% !important;
    overflow: visible !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    white-space: normal !important;
    padding: 0.5rem !important;
    box-sizing: border-box !important;
  }
  
  .dashboard-container .ai-analysis-card .reasoning-box p,
  .dashboard-container .ai-analysis-card .ai-reasoning p,
  .dashboard-container .ai-analysis-card [class*="reasoning"] p {
    font-size: 0.7rem !important;
    line-height: 1.5 !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    white-space: normal !important;
    max-width: 100% !important;
  }
  
  /* Analysis text sections - FORCE TEXT WRAPPING */
  .dashboard-container .ai-analysis-card .analysis-section,
  .dashboard-container .ai-analysis-card .analysis-text,
  .dashboard-container .ai-analysis-card .ai-analysis-text,
  .dashboard-container .ai-analysis-card .forecast-analysis-text,
  .dashboard-container .ai-analysis-card .analysis-content {
    max-width: 100% !important;
    width: 100% !important;
    overflow: visible !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    white-space: normal !important;
    box-sizing: border-box !important;
  }
  
  .dashboard-container .ai-analysis-card .analysis-section p,
  .dashboard-container .ai-analysis-card .analysis-text p,
  .dashboard-container .ai-analysis-card .ai-analysis-text p,
  .dashboard-container .ai-analysis-card .forecast-analysis-text p,
  .dashboard-container .ai-analysis-card .analysis-content p {
    font-size: 0.7rem !important;
    line-height: 1.5 !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    white-space: normal !important;
    max-width: 100% !important;
  }
  
  /* Full recommendation - FORCE TEXT WRAPPING */
  .dashboard-container .ai-analysis-card .full-recommendation,
  .dashboard-container .ai-analysis-card [class*="recommendation"] {
    font-size: 0.75rem !important;
    padding: 0.4rem !important;
    word-wrap: break-word !important;
    word-break: break-word !important;
    white-space: normal !important;
    max-width: 100% !important;
  }
  
  /* Complementary section - FORCE TEXT WRAPPING */
  .dashboard-container .ai-analysis-card .complementary-section {
    margin-top: 0.5rem !important;
    padding-top: 0.5rem !important;
    max-width: 100% !important;
    width: 100% !important;
    overflow: visible !important;
  }

  .dashboard-container .ai-analysis-card .complementary-header {
    font-size: 0.75rem !important;
    word-break: break-word !important;
    white-space: normal !important;
  }

  .dashboard-container .ai-analysis-card .complementary-header span {
    font-size: 0.7rem !important;
  }

  .dashboard-container .ai-analysis-card .complementary-content {
    padding: 0.5rem !important;
    font-size: 0.7rem !important;
    max-width: 100% !important;
    width: 100% !important;
    overflow: visible !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    white-space: normal !important;
    box-sizing: border-box !important;
  }

  .dashboard-container .ai-analysis-card .complementary-content p {
    font-size: 0.7rem !important;
    line-height: 1.5 !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    white-space: normal !important;
    margin-bottom: 0.4rem !important;
    max-width: 100% !important;
  }
  
  /* Complementary info box - dark background text container */
  .dashboard-container .ai-analysis-card .complementary-info-box,
  .dashboard-container .ai-analysis-card .info-box,
  .dashboard-container .ai-analysis-card .info-content,
  .dashboard-container .ai-analysis-card .markdown-content,
  .dashboard-container .ai-analysis-card pre,
  .dashboard-container .ai-analysis-card code {
    max-width: 100% !important;
    width: 100% !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    white-space: pre-wrap !important;
    box-sizing: border-box !important;
    font-size: 0.65rem !important;
    line-height: 1.4 !important;
  }
  
  /* Action badges in AI analysis */
  .dashboard-container .ai-analysis-card .action-badge {
    font-size: 0.55rem !important;
    padding: 0.2rem 0.4rem !important;
  }
  
  /* Confidence display */
  .dashboard-container .ai-analysis-card .confidence-display,
  .dashboard-container .ai-analysis-card .confidence-bar {
    height: 18px !important;
  }
  
  .dashboard-container .ai-analysis-card .confidence-text {
    font-size: 0.5rem !important;
  }
  
  /* ====== Today's Watch List - Compact on mobile ====== */
  .dashboard-container .watch-lists-container {
    margin-top: 0.75rem !important;
    margin-bottom: 0.75rem !important;
  }
  
  .dashboard-container .watch-list-section {
    margin-bottom: 0.5rem !important;
  }
  
  .dashboard-container .watch-list-card {
    padding: 0.5rem !important;
    border-radius: 8px !important;
  }
  
  .dashboard-container .watch-list-header {
    margin-bottom: 0.4rem !important;
  }
  
  .dashboard-container .watch-list-header .watch-title {
    font-size: 0.7rem !important;
    gap: 0.3rem !important;
    font-weight: 600 !important;
  }
  
  .dashboard-container .watch-list-header .watch-title i {
    font-size: 0.6rem !important;
  }
  
  .dashboard-container .watch-list-content {
    gap: 0.25rem !important;
  }
  
  .dashboard-container .watch-list-content .watch-item,
  .dashboard-container .watch-list-content .stock-watch-item {
    padding: 0.35rem 0 !important;
    border-radius: 6px !important;
  }
  
  .dashboard-container .watch-list-content .watch-icon {
    font-size: 0.65rem !important;
  }
  
  .dashboard-container .watch-list-content .watch-text {
    font-size: 0.5rem !important;
    line-height: 1.3 !important;
  }
  
  .dashboard-container .watch-list-content .watch-text strong {
    font-size: 0.45rem !important;
    margin-bottom: 0.1rem !important;
    letter-spacing: 0.3px !important;
  }
  
  .dashboard-container .watch-list-content .watch-text span {
    font-size: 0.45rem !important;
    line-height: 1.3 !important;
  }
  
  .dashboard-container .watch-list-content .watch-item {
    gap: 0.4rem !important;
  }
  
  .dashboard-container .watch-list-content .stock-symbol,
  .dashboard-container .watch-list-content .watch-symbol {
    font-size: 0.65rem !important;
  }
  
  .dashboard-container .watch-list-content .stock-name,
  .dashboard-container .watch-list-content .watch-name {
    font-size: 0.5rem !important;
  }
  
  .dashboard-container .watch-list-content .stock-price,
  .dashboard-container .watch-list-content .watch-price {
    font-size: 0.6rem !important;
  }
  
  .dashboard-container .watch-list-content .stock-change,
  .dashboard-container .watch-list-content .watch-change {
    font-size: 0.5rem !important;
  }
  
  .dashboard-container .watch-list-content .action-badge {
    font-size: 0.45rem !important;
    padding: 0.12rem 0.25rem !important;
  }

  /* ====================================================
     OPPORTUNITIES PAGE — Mobile optimizations
     ==================================================== */

  /* 1. Warning disclaimer — compact */
  .opportunities-section .disclaimer-box {
    padding: 8px 10px !important;
    margin-bottom: 10px !important;
    font-size: 0 !important;
    border-radius: 10px !important;
  }

  .opportunities-section .disclaimer-box .d-flex {
    gap: 8px !important;
    align-items: flex-start !important;
  }

  .opportunities-section .disclaimer-box > .d-flex > i {
    font-size: 13px !important;
    margin-top: 1px !important;
    flex-shrink: 0 !important;
  }

  .opportunities-section .disclaimer-box strong {
    font-size: 10px !important;
    display: block !important;
    margin-bottom: 3px !important;
  }

  .opportunities-section .disclaimer-box p,
  .opportunities-section .disclaimer-box small {
    font-size: 9px !important;
    line-height: 1.35 !important;
    margin-bottom: 2px !important;
    display: block !important;
  }

  .opportunities-section .disclaimer-box .text-danger {
    font-size: 9px !important;
  }

  /* 2. Section header — same as dashboard (80%/20%, icon-only square buttons) */
  .opportunities-section .section-header {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
    margin-bottom: 4px !important;
  }

  .opportunities-section .section-header .section-title {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    padding-left: 0.5rem !important;
    margin-top: 0 !important;
  }

  .opportunities-section .section-header .section-title h2 {
    font-size: 14px !important;
    font-weight: 700 !important;
    margin-bottom: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .opportunities-section .section-header .section-title h2 i {
    font-size: 13px !important;
    margin-right: 5px !important;
  }

  .opportunities-section .section-header .section-title p {
    display: none !important;
  }

  /* section-actions: flex row, right-aligned */
  .opportunities-section .section-header .section-actions {
    flex: 0 0 auto !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 6px !important;
  }

  .opportunities-section .section-header .section-actions .mobile-section-btns {
    display: flex !important;
    flex-direction: row !important;
    gap: 6px !important;
    align-items: center !important;
    margin-bottom: 0 !important;
  }

  .opportunities-section .section-header .section-actions .manage-portfolio-btn {
    margin-bottom: 8px !important;
  }


  /* 3. Opportunity cards — new design, mobile tweaks */
  .opportunities-section .opportunities-grid {
    gap: 10px !important;
  }

  .opportunities-section .opp-card-top {
    padding: 11px 13px 9px !important;
  }

  .opportunities-section .opp-return-hero {
    font-size: 1.2rem !important;
  }

  .opportunities-section .opp-card-identity {
    padding: 9px 13px !important;
    gap: 6px !important;
  }

  .opportunities-section .opp-tags {
    justify-content: flex-start !important;
  }

  .opportunities-section .opp-metrics-row {
    padding: 9px 13px !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
  }

  .opportunities-section .opp-metric-divider {
    display: none !important;
  }

  .opportunities-section .opp-metric-confidence {
    margin-left: auto !important;
  }

  .opportunities-section .opp-metric-label {
    font-size: 0.65rem !important;
  }

  .opportunities-section .opp-metric-value {
    font-size: 0.88rem !important;
  }

  .opportunities-section .opp-rationale {
    padding: 9px 13px 13px !important;
  }

  .opportunities-section .opp-rationale-text {
    font-size: 0.8rem !important;
    line-height: 1.45 !important;
  }

  .opportunities-section .opp-symbol {
    font-size: 1.1rem !important;
  }

  .opportunities-section .opp-name {
    max-width: 160px !important;
  }

  /* Card top — prevent overflow on narrow screens */
  .opportunities-section .opp-card-top {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }

  /* Return hero takes full second line if needed */
  .opportunities-section .opp-return-hero {
    order: 3 !important;
    flex: 1 1 auto !important;
  }

  /* Index number hidden on mobile (saves space) */
  .opportunities-section .opp-card-index {
    display: none !important;
  }

  /* Actions always on right of top bar */
  .opportunities-section .opp-card-actions {
    order: 4 !important;
    margin-left: auto !important;
  }

  /* Metrics row: hide arrow on mobile, wrap nicely */
  .opportunities-section .opp-metric-arrow {
    display: none !important;
  }

  .opportunities-section .opp-metrics-row {
    gap: 8px 0 !important;
  }

  .opportunities-section .opp-metric {
    min-width: 70px !important;
  }

  /* Header actions full width on mobile */
  .opportunities-section .opp-header-actions {
    flex-direction: column !important;
    width: 100% !important;
  }

  .opportunities-section .btn-opp-generate,
  .opportunities-section .btn-opp-configure {
    width: 100% !important;
    justify-content: center !important;
  }

  /* Track record: wrap items */
  .opportunities-section .opp-track-record {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 10px 20px !important;
  }

  .opportunities-section .opp-tr-badge {
    margin-left: 0 !important;
    width: 100% !important;
    justify-content: center !important;
  }

  .opportunities-section .opp-tr-divider {
    display: none !important;
  }

  /* ====================================================
     END OPPORTUNITIES — Mobile optimizations
     ==================================================== */

  /* Pricing page — hide hero on mobile */
  .page-hero-v2 {
    display: none !important;
  }

  /* ====== DASHBOARD TABS — Segment Control (mobile only) ====== */

  .dashboard-tabs {
    margin-bottom: 16px !important;
  }

  /* ── Unified tab container: both pages identical ── */
  .dashboard-tabs .nav-tabs,
  .dashboard-tabs .nav-tabs:has(.nav-item:nth-child(4)),
  #dashboardTabs,
  #accountTabs {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    position: relative !important;
    width: 100% !important;
    height: 52px !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border-radius: 10px !important;
    padding: 0 !important;
    gap: 0 !important;
    list-style: none !important;
    margin: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
    border: none !important;
  }

  /* Each tab item — equal width, full height */
  .dashboard-tabs .nav-tabs .nav-item,
  #dashboardTabs .nav-item,
  #accountTabs .nav-item {
    flex: 1 1 0 !important;
    max-width: none !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: stretch !important;
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 100% !important;
  }

  /* Thin separator between tabs */
  .dashboard-tabs .nav-tabs .nav-item + .nav-item,
  #dashboardTabs .nav-item + .nav-item,
  #accountTabs .nav-item + .nav-item {
    border-left: 1px solid rgba(255, 255, 255, 0.08) !important;
  }

  /* Hide separator next to active tab */
  .dashboard-tabs .nav-tabs .nav-item:has(.nav-link.active),
  .dashboard-tabs .nav-tabs .nav-item:has(.nav-link.active) + .nav-item,
  #dashboardTabs .nav-item:has(.nav-link.active),
  #dashboardTabs .nav-item:has(.nav-link.active) + .nav-item,
  #accountTabs .nav-item:has(.nav-link.active),
  #accountTabs .nav-item:has(.nav-link.active) + .nav-item {
    border-left-color: transparent !important;
  }

  /* The nav-link button — icon + label stacked, identical on both pages */
  .dashboard-tabs .nav-tabs .nav-link,
  .dashboard-tabs .nav-tabs .nav-link:focus,
  .dashboard-tabs .nav-tabs .nav-link:hover,
  #dashboardTabs .nav-link,
  #dashboardTabs .nav-link:focus,
  #dashboardTabs .nav-link:hover,
  #accountTabs .nav-link,
  #accountTabs .nav-link:focus,
  #accountTabs .nav-link:hover {
    flex: 1 1 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    width: 100% !important;
    height: 100% !important;
    padding: 8px 4px !important;
    margin: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: rgba(255, 255, 255, 0.38) !important;
    font-size: 0 !important;
    transition: color 0.18s ease !important;
    position: relative !important;
    z-index: 1 !important;
    outline: none !important;
    box-shadow: none !important;
  }

  /* Icon size — identical on both pages */
  .dashboard-tabs .nav-tabs .nav-link i,
  #dashboardTabs .nav-link i,
  #accountTabs .nav-link i {
    font-size: 15px !important;
    line-height: 1 !important;
    pointer-events: none !important;
    transition: color 0.18s ease !important;
    flex-shrink: 0 !important;
  }

  /* Hide legacy text spans */
  .dashboard-tabs .nav-tabs .nav-link span.tab-text-full,
  .dashboard-tabs .nav-tabs .nav-link span.tab-text-mobile,
  #dashboardTabs .nav-link span.tab-text-full,
  #dashboardTabs .nav-link span.tab-text-mobile,
  #accountTabs .nav-link span.tab-text-full,
  #accountTabs .nav-link span.tab-text-mobile {
    display: none !important;
  }

  /* Tab label — identical on both pages */
  .dashboard-tabs .nav-tabs .nav-link span.tab-label,
  #dashboardTabs .nav-link span.tab-label,
  #accountTabs .nav-link span.tab-label {
    display: block !important;
    visibility: visible !important;
    font-size: 0.46rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    opacity: 0.75;
    line-height: 1 !important;
    white-space: nowrap !important;
    color: inherit !important;
  }

  /* Active state — both pages */
  #dashboardTabs .nav-link.active,
  #dashboardTabs .nav-item.show .nav-link,
  #dashboardTabs .nav-link.active:focus,
  #dashboardTabs .nav-link.active:hover,
  #accountTabs .nav-link.active,
  #accountTabs .nav-item.show .nav-link,
  #accountTabs .nav-link.active:focus,
  #accountTabs .nav-link.active:hover {
    background: transparent !important;
    background-image: none !important;
    color: #00d4aa !important;
    border: none !important;
    border-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
  }

  #dashboardTabs .nav-link.active i,
  #dashboardTabs .nav-link.active:hover i,
  #accountTabs .nav-link.active i,
  #accountTabs .nav-link.active:hover i {
    color: #00d4aa !important;
    filter: none !important;
  }

  #dashboardTabs .nav-link.active span.tab-label,
  #accountTabs .nav-link.active span.tab-label {
    opacity: 1 !important;
    font-weight: 600 !important;
  }

  /* Notification dot */
  .dashboard-tabs .nav-tabs .nav-link .notification-badge,
  .dashboard-tabs .nav-tabs .nav-link .defcon-badge {
    position: absolute !important;
    top: 5px !important;
    right: calc(50% - 12px) !important;
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    font-size: 0 !important;
    padding: 0 !important;
    background: #ff4d6a !important;
    border: none !important;
    z-index: 2 !important;
  }
}

/* ============================================
   Hide mobile-only elements on tablet/desktop
   ============================================ */

@media (min-width: 768px) {
  .dashboard-container table.stocks-table td.position-cell .mobile-j1-display {
    display: none !important;
  }
  .dashboard-container table.stocks-table td.details-cell .mobile-pnl-badge {
    display: none !important;
  }
  .dashboard-container table.stocks-table td.mobile-perso-cell {
    display: none !important;
  }
}


/* ============================================
   iPad Tablet Optimizations (768px - 1024px)
   Slightly larger fonts than phone
   ============================================ */

@media (min-width: 768px) and (max-width: 1024px) {
  /* Full-width container on iPad — override Bootstrap's 720px max-width */
  .container {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }

  /* Global table font size increase for iPad - LARGER */
  .dashboard-container table.stocks-table {
    font-size: 1rem !important;
  }

  /* Stock symbol and name - LARGER on iPad */
  .dashboard-container table.stocks-table .stock-symbol {
    font-size: 1.1rem !important;
    font-weight: 700 !important;
  }

  .dashboard-container table.stocks-table .stock-name {
    font-size: 0.85rem !important;
  }

  /* Signal badge - LARGER on iPad */
  .dashboard-container table.stocks-table .action-badge {
    font-size: 0.75rem !important;
    padding: 0.4rem 0.7rem !important;
  }

  /* Price - MUCH LARGER on iPad (+15%) */
  .dashboard-container table.stocks-table .stock-price {
    font-size: 1.35rem !important;
    font-weight: 700 !important;
  }

  .dashboard-container table.stocks-table .price-change {
    font-size: 1.05rem !important;
    font-weight: 500 !important;
  }

  /* J+1 and J+7 predictions - iPad specific sizes */
  .stocks-table .prediction-cell .ml-prediction .pred-price {
    font-size: 0.7rem !important;
    font-weight: 600 !important;
  }

  .stocks-table .prediction-cell .ml-prediction .pred-change {
    font-size: 0.65rem !important;
    font-weight: 500 !important;
  }

  .stocks-table .prediction-cell .ml-prediction .pred-change.positive {
    font-size: 0.65rem !important;
  }

  .stocks-table .prediction-cell .ml-prediction .pred-change.negative {
    font-size: 0.65rem !important;
  }

  .stocks-table .prediction-cell .ml-prediction .pred-conf {
    font-size: 0.55rem !important;
  }

  /* Price container - iPad specific */
  .stocks-table .price-display-compact .price-container {
    font-size: 0.7rem !important;
  }

  /* Price main wrapper - keep price and live dot on same line on iPad */
  .stocks-table .price-display-compact .price-main {
    display: inline-flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    white-space: nowrap !important;
    gap: 0.2rem !important;
  }

  /* Live dot indicator for crypto prices on iPad */
  .stocks-table .price-display-compact .price-live-dot {
    display: inline-block !important;
    flex-shrink: 0 !important;
    width: 5px !important;
    height: 5px !important;
    border-radius: 50% !important;
    background: #00d4aa !important;
    margin-left: 0.2rem !important;
    vertical-align: middle !important;
    animation: pulse-live 2s infinite !important;
    box-shadow: 0 0 4px rgba(0, 212, 170, 0.5) !important;
  }

  /* Position values - iPad specific sizes */
  .stocks-table .position-cell .position-two-cols .pos-shares-inline {
    font-size: 0.65rem !important;
  }

  .stocks-table .position-cell .position-two-cols .pos-cols .pos-col.value-col .value-main {
    font-size: 0.60rem !important;
    font-weight: 700 !important;
  }

  .stocks-table .position-cell .position-two-cols .pos-cols .pos-col.pnl-col .pnl-pct {
    font-size: 0.60rem !important;
    font-weight: 600 !important;
  }

  .stocks-table .position-cell .position-two-cols .pos-cols .pos-col.pnl-col .pnl-pct.positive {
    font-size: 0.60rem !important;
  }

  .stocks-table .position-cell .position-two-cols .pos-cols .pos-col.pnl-col .pnl-pct.negative {
    font-size: 0.60rem !important;
  }

  .stocks-table .position-cell .position-two-cols .pos-cols .pos-col.value-col .usd-sub {
    font-size: 0.50rem !important;
  }

  .stocks-table .position-cell .position-two-cols .pos-cols .pos-col.pnl-col .pnl-val {
    font-size: 0.50rem !important;
  }

  .stocks-table .position-cell .position-two-cols .pos-cols .pos-col.pnl-col .pnl-val.positive {
    font-size: 0.50rem !important;
  }

  .stocks-table .position-cell .position-two-cols .pos-cols .pos-col.pnl-col .pnl-val.negative {
    font-size: 0.50rem !important;
  }

  /* USD conversions - iPad */
  .stocks-table .price-display-compact .usd-conversion {
    font-size: 0.5rem !important;
  }

  .stocks-table .prediction-cell .ml-prediction .usd-conversion {
    font-size: 0.50rem !important;
  }

  /* Detail button - MUCH SMALLER on iPad */
  .dashboard-container table.stocks-table .btn-details-ai {
    font-size: 0.7rem !important;
    padding: 0.1rem !important;
    width: 0.8rem;
    height: auto;
  }

  .dashboard-container table.stocks-table .btn-details-ai i {
    font-size: 0.6rem !important;
  }

  .dashboard-container table.stocks-table .btn-details-ai .btn-details-text {
    font-size: 0.6rem !important;
  }

  /* AI Enhanced badge - COMPACT like mobile, just with "enhanced" text */
  .dashboard-container table.stocks-table .stock-actions-row .ai-analysis-badge.mini,
  .dashboard-container .ai-analysis-badge.mini {
    font-size: 0.5rem !important;
    padding: 0.15rem 0.35rem !important;
    gap: 0.15rem !important;
    border-radius: 8px !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  .dashboard-container table.stocks-table .stock-actions-row .ai-analysis-badge.mini i,
  .dashboard-container .ai-analysis-badge.mini i {
    font-size: 0.5rem !important;
    margin-right: 0.1rem !important;
  }

  /* Show "enhanced" text on iPad - compact */
  .dashboard-container table.stocks-table .stock-actions-row .ai-analysis-badge.mini .badge-text-original,
  .dashboard-container .ai-analysis-badge.mini .badge-text-original {
    display: inline !important;
    font-size: 0.45rem !important;
  }

  /* Exchange status icon - force round */
  .dashboard-container table.stocks-table .exchange-status {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;
    max-width: 18px !important;
    max-height: 18px !important;
    border-radius: 50% !important;
    padding: 0 !important;
  }

  /* Event icons - force round */
  .dashboard-container table.stocks-table .event-icon {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    min-height: 22px !important;
    max-width: 22px !important;
    max-height: 22px !important;
    border-radius: 50% !important;
    padding: 0 !important;
  }

  /* AI Analysis Card content - larger fonts */
  .dashboard-container .ai-analysis-card .level-chip .level-label {
    font-size: 0.6rem !important;
  }

  .dashboard-container .ai-analysis-card .level-chip .level-value {
    font-size: 0.75rem !important;
  }

  .dashboard-container .ai-analysis-card .level-chip .level-pct {
    font-size: 0.6rem !important;
  }

  /* Complementary Information - smaller title for iPad */
  .dashboard-container .ai-analysis-card .complementary-info-section .section-title {
    font-size: 0.6rem !important;
    gap: 0.35rem !important;
  }

  .dashboard-container .ai-analysis-card .complementary-info-section .section-title i {
    font-size: 0.55rem !important;
  }

  .dashboard-container .ai-analysis-card .complementary-info-section .info-block .block-icon {
    font-size: 0.85rem !important;
  }

  .dashboard-container .ai-analysis-card .complementary-info-section .info-block .block-title {
    font-size: 0.6rem !important;
  }

  .dashboard-container .ai-analysis-card .complementary-info-section .info-block .block-content {
    font-size: 0.75rem !important;
    line-height: 1.5 !important;
  }

  /* Growth estimates - larger on iPad */
  .dashboard-container .ai-analysis-card .growth-estimates-container .metric-label {
    font-size: 0.6rem !important;
  }

  .dashboard-container .ai-analysis-card .growth-estimates-container .metric-value {
    font-size: 0.85rem !important;
  }

  /* AI reasoning - larger on iPad */
  .dashboard-container .ai-analysis-card .reasoning-block .reasoning-label {
    font-size: 0.65rem !important;
  }

  .dashboard-container .ai-analysis-card .reasoning-block .reasoning-text {
    font-size: 0.75rem !important;
  }

  /* Events analysis - larger on iPad */
  .dashboard-container .ai-analysis-card .events-analysis-header h5 {
    font-size: 0.8rem !important;
  }

  .dashboard-container .ai-analysis-card .event-analysis-item .event-text {
    font-size: 0.75rem !important;
  }

  /* Details button - larger on iPad */
  .dashboard-container table.stocks-table .btn-details-ai {
    font-size: 0.7rem !important;
    padding: 0.5rem 0.8rem !important;
  }
}

/* ============================================
   iPad Mini Optimizations (768px width)
   Reduce column widths for prediction columns
   ============================================ */

@media (min-width: 768px) and (max-width: 820px) {
  /* Reduce prediction columns width (EST close and J+7) */
  .dashboard-container table.stocks-table .prediction-cell {
    max-width: 55px !important;
    min-width: 45px !important;
    padding: 0.2rem 0.15rem !important;
  }

  .dashboard-container table.stocks-table th:nth-child(5),
  .dashboard-container table.stocks-table th:nth-child(6) {
    max-width: 55px !important;
    min-width: 45px !important;
    padding: 0.3rem 0.15rem !important;
  }

  /* Smaller prediction content */
  .stocks-table .prediction-cell .ml-prediction .pred-price {
    font-size: 0.55rem !important;
  }

  .stocks-table .prediction-cell .ml-prediction .pred-change {
    font-size: 0.5rem !important;
  }

  /* Details cell - fit AI and Trade buttons */
  .dashboard-container table.stocks-table .details-cell {
    padding: 0.15rem !important;
    min-width: 65px !important;
    max-width: 75px !important;
  }

  .dashboard-container table.stocks-table .details-cell .btn-details-ai {
    padding: 0.2rem 0.25rem !important;
    font-size: 0.55rem !important;
    min-width: unset !important;
  }

  .dashboard-container table.stocks-table .details-cell .btn-details-ai i {
    font-size: 0.5rem !important;
  }

  .dashboard-container table.stocks-table .details-cell .btn-details-ai .btn-details-text {
    display: none !important;
  }

  /* Transaction dropdown button - smaller on iPad Mini */
  .dashboard-container table.stocks-table .transaction-dropdown-component .btn,
  .dashboard-container table.stocks-table .dashboard-transaction-dropdown .btn {
    width: 28px !important;
    height: 26px !important;
    min-width: 28px !important;
    padding: 0 !important;
  }

  .dashboard-container table.stocks-table .transaction-dropdown-component .btn i,
  .dashboard-container table.stocks-table .dashboard-transaction-dropdown .btn i {
    font-size: 0.55rem !important;
  }

  /* Chart cell - reduce */
  .dashboard-container table.stocks-table .chart-cell {
    max-width: 28px !important;
    min-width: 24px !important;
    padding: 0.1rem !important;
  }

  /* Position cell - compact */
  .stocks-table .position-cell {
    max-width: 70px !important;
    padding: 0.2rem 0.15rem !important;
  }

  /* Events cell - compact */
  .stocks-table .events-cell {
    max-width: 45px !important;
    padding: 0.15rem !important;
  }
}

/* ============================================
   iPad ALL (768px - 1024px)
   Fix overlapping columns - DRASTICALLY reduce EST and J+7
   Force horizontal button layout WITHOUT breaking table
   ============================================ */

@media (min-width: 768px) and (max-width: 1024px) {
  /* HEADER for prediction columns - Hide text, show only ? icon */
  .dashboard-container table.stocks-table thead th:nth-child(5),
  .dashboard-container table.stocks-table thead th:nth-child(6),
  .dashboard-container table.stocks-table thead th:nth-child(7) {
    width: 45px !important;
    max-width: 45px !important;
    min-width: 40px !important;
    padding: 0.1rem !important;
    font-size: 0 !important; /* Hide main text */
    text-align: center !important;
  }

  /* Keep the ? tooltip visible */
  .dashboard-container table.stocks-table thead th .price-header-info {
    font-size: 0.6rem !important;
    display: inline-block !important;
  }

  /* PERSONALIZED SIGNAL BADGE - 30% smaller on iPad */
  .dashboard-container table.stocks-table .personalized-signal-badge {
    padding: 0.14rem 0.28rem !important;
    font-size: 0.42rem !important;
    gap: 0.15rem !important;
    border-radius: 4px !important;
  }

  .dashboard-container table.stocks-table .personalized-signal-badge i {
    font-size: 0.38rem !important;
  }

  /* Prediction columns - FORCE TINY WIDTH - NO MIN-WIDTH */
  .dashboard-container table.stocks-table td.prediction-cell,
  .dashboard-container table.stocks-table .prediction-cell {
    width: 35px !important;
    max-width: 35px !important;
    min-width: 0 !important;
    padding: 0.05rem !important;
  }

  /* Prediction content - increased */
  .dashboard-container table.stocks-table .prediction-cell .ml-prediction .pred-price {
    font-size: 0.63rem !important;
  }

  .dashboard-container table.stocks-table .prediction-cell .ml-prediction .pred-change {
    font-size: 0.5rem !important;
  }

  .dashboard-container table.stocks-table .prediction-cell .ml-prediction .usd-conversion {
    display: none !important;
  }

  /* CHART COLUMN - 50% smaller */
  .dashboard-container table.stocks-table .chart-col,
  .dashboard-container table.stocks-table .chart-cell,
  .dashboard-container table.stocks-table td.chart-cell {
    width: 16px !important;
    max-width: 20px !important;
    min-width: 0 !important;
    padding: 0.05rem !important;
  }

  .dashboard-container table.stocks-table .chart-cell .btn-stock-chart {
    padding: 0.15rem !important;
    min-width: 0 !important;
  }

  .dashboard-container table.stocks-table .chart-cell .btn-stock-chart i {
    font-size: 0.5rem !important;
  }

  /* PRICE */
  .dashboard-container table.stocks-table .price-display-compact .price-container {
    font-size: 0.55rem !important;
  }

  .dashboard-container table.stocks-table .price-display-compact .usd-conversion {
    font-size: 0.42rem !important;
  }

  /* DETAILS CELL - Keep table-cell display, use text-align and whitespace */
  .dashboard-container table.stocks-table td.details-cell {
    text-align: center !important;
    white-space: nowrap !important;
    padding: 0.15rem !important;
    min-width: 60px !important;
    max-width: 70px !important;
  }

  /* Hide the mobile-only chart button on iPad */
  .dashboard-container table.stocks-table td.details-cell .btn-details-chart.mobile-only {
    display: none !important;
  }

  /* AI Analysis button - inline-flex, icon only, square */
  .dashboard-container table.stocks-table td.details-cell .btn-details-ai {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    max-width: 26px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    vertical-align: middle !important;
    margin-right: 4px !important;
  }

  .dashboard-container table.stocks-table td.details-cell .btn-details-ai i:first-child {
    font-size: 0.6rem !important;
    margin: 0 !important;
  }

  /* Hide text and chevron on AI button */
  .dashboard-container table.stocks-table td.details-cell .btn-details-ai .btn-details-text,
  .dashboard-container table.stocks-table td.details-cell .btn-details-ai .chevron-icon {
    display: none !important;
  }

  /* Transaction dropdown wrapper - inline */
  .dashboard-container table.stocks-table td.details-cell .dashboard-transaction-dropdown {
    display: inline-block !important;
    vertical-align: middle !important;
  }

  .dashboard-container table.stocks-table td.details-cell .dashboard-transaction-dropdown .transaction-dropdown-component {
    display: inline-block !important;
  }

  /* Transaction dropdown button - square, same size */
  .dashboard-container table.stocks-table td.details-cell .transaction-dropdown-component .btn,
  .dashboard-container table.stocks-table td.details-cell .dashboard-transaction-dropdown .btn {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    max-width: 26px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    vertical-align: middle !important;
  }

  .dashboard-container table.stocks-table td.details-cell .transaction-dropdown-component .btn i,
  .dashboard-container table.stocks-table td.details-cell .dashboard-transaction-dropdown .btn i {
    font-size: 0.6rem !important;
    margin: 0 !important;
  }

  /* Hide dropdown chevron/arrow */
  .dashboard-container table.stocks-table td.details-cell .transaction-dropdown-component .btn::after,
  .dashboard-container table.stocks-table td.details-cell .dashboard-transaction-dropdown .btn::after {
    display: none !important;
  }

  /* EVENTS CELL - Force perfect circle icons */
  .dashboard-container table.stocks-table td.events-cell,
  .dashboard-container table.stocks-table .events-cell {
    max-width: 40px !important;
    padding: 0.1rem !important;
    text-align: center !important;
  }

  .dashboard-container table.stocks-table .events-cell .event-icon,
  .dashboard-container table.stocks-table td.events-cell .event-icon {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
    max-width: 20px !important;
    max-height: 20px !important;
    border-radius: 50% !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .dashboard-container table.stocks-table .events-cell .event-icon i {
    font-size: 0.5rem !important;
  }

  /* Position cell - compact */
  .dashboard-container table.stocks-table .position-cell {
    max-width: 75px !important;
    padding: 0.1rem !important;
  }
}

/* ============================================
   11-13 inch Laptop Optimizations (1024px - 1280px)
   Fix stacked buttons - make them side by side
   ============================================ */

@media (min-width: 1024px) and (max-width: 1280px) {
  /* DETAILS CELL - Keep table-cell display */
  .dashboard-container table.stocks-table td.details-cell {
    text-align: center !important;
    white-space: nowrap !important;
    padding: 0.2rem !important;
    min-width: 65px !important;
  }

  /* Hide the mobile-only chart button */
  .dashboard-container table.stocks-table td.details-cell .btn-details-chart.mobile-only {
    display: none !important;
  }

  /* AI button - inline-flex, square icon only */
  .dashboard-container table.stocks-table td.details-cell .btn-details-ai {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    max-width: 28px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    vertical-align: middle !important;
    margin-right: 4px !important;
  }

  .dashboard-container table.stocks-table td.details-cell .btn-details-ai i:first-child {
    font-size: 0.65rem !important;
    margin: 0 !important;
  }

  .dashboard-container table.stocks-table td.details-cell .btn-details-ai .btn-details-text,
  .dashboard-container table.stocks-table td.details-cell .btn-details-ai .chevron-icon {
    display: none !important;
  }

  /* Transaction dropdown wrapper - inline */
  .dashboard-container table.stocks-table td.details-cell .dashboard-transaction-dropdown {
    display: inline-block !important;
    vertical-align: middle !important;
  }

  .dashboard-container table.stocks-table td.details-cell .dashboard-transaction-dropdown .transaction-dropdown-component {
    display: inline-block !important;
  }

  /* Transaction dropdown button - compact, square */
  .dashboard-container table.stocks-table td.details-cell .transaction-dropdown-component .btn,
  .dashboard-container table.stocks-table td.details-cell .dashboard-transaction-dropdown .btn {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    max-width: 28px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    vertical-align: middle !important;
  }

  .dashboard-container table.stocks-table td.details-cell .transaction-dropdown-component .btn i,
  .dashboard-container table.stocks-table td.details-cell .dashboard-transaction-dropdown .btn i {
    font-size: 0.65rem !important;
    margin: 0 !important;
  }

  .dashboard-container table.stocks-table td.details-cell .transaction-dropdown-component .btn::after,
  .dashboard-container table.stocks-table td.details-cell .dashboard-transaction-dropdown .btn::after {
    display: none !important;
  }

  /* Prediction columns - reduced */
  .dashboard-container table.stocks-table .prediction-cell {
    max-width: 65px !important;
    padding: 0.25rem 0.15rem !important;
  }

  .stocks-table .prediction-cell .ml-prediction .pred-price {
    font-size: 0.6rem !important;
  }

  .stocks-table .prediction-cell .ml-prediction .pred-change {
    font-size: 0.5rem !important;
  }
}

/* ============================================
   13-inch Laptop Optimizations (1280px - 1440px)
   Fit AI Analysis and Trade buttons - hide chevron
   HORIZONTAL LAYOUT with inline-flex
   ============================================ */

@media (min-width: 1280px) and (max-width: 1440px) {
  /* DETAILS CELL - Keep table-cell display */
  .dashboard-container table.stocks-table td.details-cell {
    text-align: center !important;
    white-space: nowrap !important;
    padding: 0.2rem !important;
    min-width: 70px !important;
  }

  /* Hide the mobile-only chart button */
  .dashboard-container table.stocks-table td.details-cell .btn-details-chart.mobile-only {
    display: none !important;
  }

  /* AI button - inline-flex, square icon only */
  .dashboard-container table.stocks-table td.details-cell .btn-details-ai {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    max-width: 30px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    vertical-align: middle !important;
    margin-right: 4px !important;
  }

  .dashboard-container table.stocks-table td.details-cell .btn-details-ai i:first-child {
    font-size: 0.7rem !important;
    margin: 0 !important;
  }

  /* Hide text and chevron */
  .dashboard-container table.stocks-table td.details-cell .btn-details-ai .chevron-icon,
  .dashboard-container table.stocks-table td.details-cell .btn-details-ai .btn-details-text {
    display: none !important;
  }

  /* Transaction dropdown wrapper - inline */
  .dashboard-container table.stocks-table td.details-cell .dashboard-transaction-dropdown {
    display: inline-block !important;
    vertical-align: middle !important;
  }

  .dashboard-container table.stocks-table td.details-cell .dashboard-transaction-dropdown .transaction-dropdown-component {
    display: inline-block !important;
  }

  /* Transaction dropdown button - compact on 13" */
  .dashboard-container table.stocks-table td.details-cell .transaction-dropdown-component .btn,
  .dashboard-container table.stocks-table td.details-cell .dashboard-transaction-dropdown .btn {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    max-width: 30px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    vertical-align: middle !important;
  }

  .dashboard-container table.stocks-table td.details-cell .transaction-dropdown-component .btn i,
  .dashboard-container table.stocks-table td.details-cell .dashboard-transaction-dropdown .btn i {
    font-size: 0.7rem !important;
    margin: 0 !important;
  }

  /* Hide dropdown caret */
  .dashboard-container table.stocks-table td.details-cell .transaction-dropdown-component .btn::after,
  .dashboard-container table.stocks-table td.details-cell .dashboard-transaction-dropdown .btn::after {
    display: none !important;
  }

  /* Prediction columns - slightly reduced */
  .dashboard-container table.stocks-table .prediction-cell {
    max-width: 70px !important;
    padding: 0.25rem 0.2rem !important;
  }

  .stocks-table .prediction-cell .ml-prediction .pred-price {
    font-size: 0.65rem !important;
  }

  .stocks-table .prediction-cell .ml-prediction .pred-change {
    font-size: 0.55rem !important;
  }
}

/* ============================================
   14-15 inch Laptop Optimizations (1440px - 1600px)
   Slightly reduced buttons proportionally
   ============================================ */

@media (min-width: 1441px) and (max-width: 1600px) {
  /* Details cell - slightly reduced */
  .dashboard-container table.stocks-table .details-cell {
    padding: 0.3rem !important;
    min-width: 85px !important;
  }

  .dashboard-container table.stocks-table .details-cell .btn-details-ai {
    padding: 0.25rem 0.45rem !important;
    font-size: 0.65rem !important;
    min-width: unset !important;
  }

  /* Hide chevron on smaller 15" */
  .dashboard-container table.stocks-table .details-cell .btn-details-ai .chevron-icon {
    display: none !important;
  }

  .dashboard-container table.stocks-table .details-cell .btn-details-ai .btn-details-text {
    font-size: 0.6rem !important;
  }

  .dashboard-container table.stocks-table .details-cell .btn-details-ai i.fas:not(.chevron-icon) {
    font-size: 0.6rem !important;
  }

  /* Transaction dropdown button - slightly reduced */
  .dashboard-container table.stocks-table .transaction-dropdown-component .btn,
  .dashboard-container table.stocks-table .dashboard-transaction-dropdown .btn {
    width: 32px !important;
    height: 30px !important;
    min-width: 32px !important;
    padding: 0 !important;
    
  }

  .dashboard-container table.stocks-table .transaction-dropdown-component .btn i,
  .dashboard-container table.stocks-table .dashboard-transaction-dropdown .btn i {
    font-size: 0.7rem !important;
  }

  /* Hide dropdown caret */
  .dashboard-container table.stocks-table .transaction-dropdown-component .btn::after,
  .dashboard-container table.stocks-table .dashboard-transaction-dropdown .btn::after {
    display: none !important;
  }

  /* Prediction columns */
  .dashboard-container table.stocks-table .prediction-cell {
    max-width: 80px !important;
    padding: 0.3rem 0.25rem !important;
  }

  .stocks-table .prediction-cell .ml-prediction .pred-price {
    font-size: 0.7rem !important;
  }

  .stocks-table .prediction-cell .ml-prediction .pred-change {
    font-size: 0.6rem !important;
  }
}

/* ============================================
   Cards & Containers
   ============================================ */

@media (max-width: 768px) {
  .card,
  .summary-card,
  .feature-card {
    margin-bottom: 1rem;
    padding: 1rem;
  }
  
  /* Better spacing on mobile */
  .container {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
}

/* ============================================
   Navigation & Tabs
   ============================================ */

@media (max-width: 768px) {
  .nav-tabs .nav-link {
    padding: 12px 16px;
    font-size: 0.9rem;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    touch-action: manipulation;
  }

  /* Override above for dashboard segment control */
  .dashboard-tabs .nav-tabs .nav-link {
    padding: 0 !important;
    font-size: 0 !important;
    min-height: 0 !important;
      border: none !important;

  }

  .nav-pills .nav-link {
    min-height: 44px;
    padding: 12px 20px;
  }
}

/* ============================================
   Modals & Overlays
   ============================================ */

@media (max-width: 768px) {
  .modal-dialog {
    margin: 0.5rem;
    max-width: calc(100% - 1rem);
  }
  
  .modal-content {
    border-radius: 12px;
  }
  
  .modal-header,
  .modal-body,
  .modal-footer {
    padding: 1rem;
  }
}

/* ============================================
   Safe Area Insets (for notched devices)
   ============================================ */

@supports (padding: env(safe-area-inset-left)) {
  body {
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
  }
  
  .fixed-bottom,
  .chatbot-widget-container {
    padding-bottom: 20px;
    padding-bottom: env(safe-area-inset-bottom, 20px);
  }
  
  .fixed-top {
    padding-top: env(safe-area-inset-top, 0px);
  }
}

/* ============================================
   Performance Optimizations
   ============================================ */

/* Disable hover effects on touch devices */
@media (max-width: 768px) {
  @media (hover: none) {
    .btn:hover,
    a:hover,
    .card:hover {
      transform: none;
      box-shadow: inherit;
    }
  }
}

/* ============================================
   Text Selection
   ============================================ */

/* Allow text selection for better UX */
p,
span,
div,
li {
  -webkit-user-select: text;
  user-select: text;
}

/* But prevent selection on buttons and interactive elements */
button,
.btn,
a,
.nav-link {
  -webkit-user-select: none;
  user-select: none;
}

/* ============================================
   Loading States
   ============================================ */

/* Optimize loading indicators for mobile */
.loading,
.spinner {
  will-change: transform;
  transform: translateZ(0); /* Force GPU acceleration */
}

/* Ensure animations work in webview mode - NO RESTRICTIONS */
/* All animations work normally in webview mode */

/* Force spinner animations in webview mode */
body.webview-mode .refresh-status-component .spinner,
body.webview-mode .refresh-status-component .loading-spinner .spinner,
body.webview-mode .refresh-status-component .loading-content .loading-spinner .spinner,
body.webview-mode .spinner,
body.webview-mode .loading-spinner .spinner,
body.webview-mode .loading .spinner,
.webview-mode .refresh-status-component .spinner,
.webview-mode .refresh-status-component .loading-spinner .spinner,
.webview-mode .refresh-status-component .loading-content .loading-spinner .spinner,
.webview-mode .spinner,
.webview-mode .loading-spinner .spinner,
.webview-mode .loading .spinner {
  animation: spin 1s linear infinite !important;
  -webkit-animation: spin 1s linear infinite !important;
  animation-duration: 1s !important;
  -webkit-animation-duration: 1s !important;
  animation-iteration-count: infinite !important;
  -webkit-animation-iteration-count: infinite !important;
  animation-timing-function: linear !important;
  -webkit-animation-timing-function: linear !important;
  will-change: transform !important;
  transform: translateZ(0) !important;
  -webkit-transform: translateZ(0) !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
}

/* Also ensure animation works on mobile - but exclude webview mode */
@media (max-width: 768px) {
  body:not(.webview-mode) .refresh-status-component .loading-content .loading-spinner .spinner {
    animation: spin 1s linear infinite !important;
    -webkit-animation: spin 1s linear infinite !important;
    will-change: transform !important;
    transform: translateZ(0) !important;
    -webkit-transform: translateZ(0) !important;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
  }
  
  /* Ensure keyframes are available */
  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }
  
  @-webkit-keyframes spin {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
  }
}

/* ============================================
   Images & Media
   ============================================ */

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Lazy loading optimization */
img[loading="lazy"] {
  opacity: 0;
  transition: opacity 0.3s;
}

img[loading="lazy"].loaded {
  opacity: 1;
}

/* ============================================
   Chatbot Widget Mobile Specific
   ============================================ */

@media (max-width: 768px) {
  .chatbot-widget-container {
    bottom: 20px;
    bottom: env(safe-area-inset-bottom, 20px);
    right: 20px;
    left: auto;
  }
  
  .chatbot-window {
    width: calc(100vw - 40px);
    max-width: 100%;
    height: calc(100vh - 140px);
    max-height: 80vh;
    bottom: 100px;
    left: 20px;
    right: 20px;
    margin: 0;
  }
  
  .chatbot-toggle-btn {
    width: 56px;
    height: 56px;
    font-size: 22px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  }
  
  .chatbot-input {
    font-size: 16px !important; /* Prevent zoom on focus */
    min-height: 44px;
    padding: 12px 16px;
  }
  
  .chatbot-send-btn {
    min-width: 44px;
    min-height: 44px;
    width: 44px;
    height: 44px;
  }
  
  .message-content {
    font-size: 14px;
    padding: 10px 14px;
    line-height: 1.5;
  }
}

/* ============================================
   Dashboard Mobile Optimizations
   ============================================ */

@media (max-width: 768px) {
  .dashboard-container {
    padding: 0.5rem;
  }
  
  .dashboard-header {
    padding: 1rem 0;
  }
  
  .summary-card {
    padding: 1rem;
    margin-bottom: 1rem;
  }
  
  .section-header {
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
  }

  .opportunities-section .section-header {
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
  }

  .section-actions .btn {
    width: 100%;
    min-height: 44px;
  }

  .opportunities-section .section-actions .btn {
    width: auto !important;
    min-height: auto !important;
  }
}

/* ============================================
   Swipe Gestures Support
   ============================================ */

.swipeable {
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}

/* ============================================
   Prevent Text Size Adjustment
   ============================================ */

html {
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* ============================================
   Macro Events Section - Mobile Fix
   ============================================ */

@media (max-width: 768px) {
  .macro-events-section .macro-events-list {
    padding: 12px !important;
  }

  .macro-events-section .macro-event-item {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 8px !important;
    padding: 10px 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  }

  .macro-events-section .macro-event-item:last-child {
    border-bottom: none !important;
    padding-bottom: 0 !important;
  }

  .macro-events-section .macro-emoji {
    flex-shrink: 0 !important;
    font-size: 1.1rem !important;
  }

  .macro-events-section .macro-content {
    flex: 1 !important;
    min-width: 0 !important;
    /* Remove the line-clamp on mobile to prevent overlap */
    display: block !important;
    -webkit-line-clamp: unset !important;
    -webkit-box-orient: unset !important;
    overflow: visible !important;
  }

  .macro-events-section .macro-category {
    display: inline !important;
    color: #60a5fa !important;
    font-weight: 600 !important;
    font-size: 0.85rem !important;
    margin-right: 4px !important;
  }

  .macro-events-section .macro-text {
    display: inline !important;
    color: #d1d5db !important;
    font-size: 0.85rem !important;
    line-height: 1.5 !important;
  }
}

/* ============================================
   Webview Mode - Bottom Spacing
   ============================================ */

/* Add bottom padding for webview mode to ensure content doesn't get hidden behind nav */
body.webview-mode .dashboard-container,
body.webview-mode .stocks-container,
body.webview-mode .events-container,
body.webview-mode .account-container,
body.webview-mode main {
  padding-bottom: 80px !important;
}

/* iPad also needs extra bottom spacing */
@media (min-width: 768px) and (max-width: 1366px) {
  body.webview-mode .dashboard-container,
  body.webview-mode .stocks-container,
  body.webview-mode .events-container,
  body.webview-mode .account-container,
  body.webview-mode main {
    padding-bottom: 70px !important;
  }
}

/* ============================================
   PORTFOLIO / ACCOUNT PAGE — STOCK SEARCH INPUT FIX
   Ensure the search row stays horizontal on mobile/iPad
   ============================================ */
@media (max-width: 1024px) {
  #stock-search-form .d-flex {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
  }

  #stock-search-form .d-flex .flex-grow-1 {
    flex: 1 1 0% !important;
    min-width: 0 !important;
    width: auto !important;
    max-width: none !important;
  }

  #stock-search-form .d-flex .flex-shrink-0 {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
  }

  #stock-search-form .form-control {
    width: 100% !important;
    min-width: 0 !important;
  }
}

/* ============================================
   Webview Mode - Live Dot for Crypto Prices
   ============================================ */

/* Webview mode - Price main wrapper */
body.webview-mode .price-main,
body.webview-mode .price-display-compact .price-main,
body.webview-mode .dashboard-container .price-main {
  display: inline-flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  white-space: nowrap !important;
  gap: 0.2rem !important;
}

/* Webview mode - Live dot indicator for crypto */
/* Use ::before pseudo-element to ensure visibility on iOS webview */
body.webview-mode .price-live-dot,
body.webview-mode .price-display-compact .price-live-dot,
body.webview-mode .dashboard-container .price-live-dot,
body.webview-mode table.stocks-table .price-live-dot {
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: relative !important;
  flex-shrink: 0 !important;
  width: 6px !important;
  min-width: 6px !important;
  height: 6px !important;
  min-height: 6px !important;
  margin-left: 0.25rem !important;
  vertical-align: middle !important;
  /* Force GPU layer on iOS */
  -webkit-transform: translateZ(0) !important;
  transform: translateZ(0) !important;
}

body.webview-mode .price-live-dot::before,
body.webview-mode .price-display-compact .price-live-dot::before,
body.webview-mode .dashboard-container .price-live-dot::before,
body.webview-mode table.stocks-table .price-live-dot::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background-color: #00d4aa !important;
  box-shadow: 0 0 4px rgba(0, 212, 170, 0.5) !important;
  animation: pulse-live 2s infinite !important;
  -webkit-animation: pulse-live 2s infinite !important;
}

/* Ensure pulse-live animation works in webview */
@keyframes pulse-live {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.6;
    transform: scale(1.2);
  }
}

@-webkit-keyframes pulse-live {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.6;
    transform: scale(1.2);
  }
}