/* Shared: index + ios — home AI surface (from index.html at extract time). */
    /* ====== INDEX: AI Token Analyzer (LEFT PANEL ONLY) ====== */
    /* Index left panel explainer: unified typography */
    :is(body.page-index, body.page-ios) .panel-left .ai-explainer p{
      margin: 0 0 8px;
      font-size: 14px;
      line-height: 1.45;
      color: var(--text-muted);
      font-weight: 400;
    }

    /* Index left panel AI analyzer: use full available width */
    :is(body.page-index, body.page-ios) .panel-left .ai-analyzer { margin-top: 12px; max-width: none; width: 100%; }
    :is(body.page-index, body.page-ios) .ai-row { display:flex; gap:10px; align-items:center; }
    /* Mobile: stretch wrapped control row (base rule above uses center for desktop) */
    @media (max-width: 768px) {
      :is(body.page-index, body.page-ios) .ai-row { align-items: stretch; }
    }
    :is(body.page-index, body.page-ios) .ai-input-wrap { position: relative; flex: 1 1 auto; min-width: 0; }
    :is(body.page-index, body.page-ios) .ai-mint-row {
      display: flex;
      align-items: center;
      gap: 8px;
      min-width: 0;
      flex: 1 1 auto;
    }
    :is(body.page-index, body.page-ios) .ai-mint-prefix {
      display: flex;
      align-items: center;
      gap: 6px;
      flex-shrink: 0;
    }
    :is(body.page-index, body.page-ios) .ai-mint-prefix[hidden] { display: none !important; }
    :is(body.page-index, body.page-ios) .ai-mint-logo-wrap {
      width: 22px;
      height: 22px;
      flex: 0 0 22px;
      border-radius: 50%;
      overflow: hidden;
      background: rgba(148,163,184,.12);
      border: 1px solid rgba(148,163,184,.2);
      display: flex;
      align-items: center;
      justify-content: center;
    }
    :is(body.page-index, body.page-ios) .ai-mint-logo {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 50%;
    }
    :is(body.page-index, body.page-ios) .ai-mint-symbol {
      font-size: 13px;
      font-weight: 600;
      color: rgba(226,232,240,.94);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 72px;
    }
    :is(body.page-index, body.page-ios) .ai-mint-row > .ai-input { flex: 1 1 auto; min-width: 0; width: 100%; }
    :is(body.page-index, body.page-ios) .ai-input {
      flex:1 1 auto; min-width:0;
      padding: 10px 12px; border-radius: 12px;
      border: 1px solid rgba(148,163,184,.25);
      background: rgba(15,23,42,.5);
      color: rgba(226,232,240,.95);
    }
    :is(body.page-index, body.page-ios) #ai-mint.ai-input:focus,
    :is(body.page-index, body.page-ios) #ai-mint.ai-input:focus-visible {
      outline: none;
      -webkit-focus-ring-color: transparent;
      border-color: rgba(56, 189, 248, 0.55);
      box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.22);
    }

    /* Remove native history/datalist dropdown caret (WebKit) — keep input visuals unchanged */
    :is(body.page-index, body.page-ios) #ai-mint {
      -webkit-appearance: none;
      appearance: none;
      background-image: none !important;
    }
    :is(body.page-index, body.page-ios) #ai-mint::-webkit-list-button {
      display: none !important;
    }
    :is(body.page-index, body.page-ios) .ai-btn {
      flex:0 0 auto;
      padding: 10px 12px; border-radius: 12px;
      border: 1px solid rgba(56,189,248,.35);
      background: rgba(56,189,248,.12);
      color: rgba(226,232,240,.95);
      min-width: 118px; /* prevent resize when label becomes "Analyzing…" */
      text-align: center;
      white-space: nowrap;
    }

    /* Index-only: micro-flash + tap feedback (no layout shift) */
    @keyframes aiBtnFlash {
      0%   { filter: brightness(1); box-shadow: none; }
      50%  { filter: brightness(1.10); box-shadow: 0 0 0 1px rgba(56,189,248,.22), 0 0 18px rgba(56,189,248,.14); }
      100% { filter: brightness(1); box-shadow: none; }
    }
    :is(body.page-index, body.page-ios) .ai-btn.btn-flash{
      animation: aiBtnFlash 110ms ease-out both;
    }

    @keyframes aiBtnTap {
      0%   { transform: translateY(0) scale(1); filter: brightness(1); }
      45%  { transform: translateY(1px) scale(0.985); filter: brightness(1.02); }
      100% { transform: translateY(0) scale(1); filter: brightness(1); }
    }
    :is(body.page-index, body.page-ios) .ai-btn.btn-tap{
      animation: aiBtnTap 160ms ease-out both;
    }

    /* Swap-Index token dropdown (Task 2) */
    :is(body.page-index, body.page-ios) .ai-token-dropdown{
      position: absolute;
      left: 0;
      top: calc(100% + 8px);
      width: 100%;
      z-index: 60;
      border-radius: 14px;
      border: 1px solid rgba(148,163,184,.20);
      background: rgba(2,6,23,.72);
      -webkit-backdrop-filter: blur(10px);
      backdrop-filter: blur(10px);
      box-shadow: 0 10px 30px rgba(0,0,0,.45);
      overflow: hidden; /* no internal scroll */
    }
    :is(body.page-index, body.page-ios) .ai-token-section{
      padding: 10px 10px 8px 10px;
    }
    :is(body.page-index, body.page-ios) .ai-token-section + .ai-token-section{
      border-top: 1px solid rgba(148,163,184,.14);
    }
    :is(body.page-index, body.page-ios) .ai-token-section-title{
      font-size: 12px;
      color: rgba(226,232,240,.72);
      letter-spacing: .01em;
      padding: 0 2px 8px 2px;
      display:flex;
      align-items:center;
      justify-content: space-between;
    }
    :is(body.page-index, body.page-ios) .ai-token-items{
      display:flex;
      flex-direction: column;
      gap: 2px;
      overflow: hidden; /* strict: no scroll */
    }
    :is(body.page-index, body.page-ios) .ai-token-item{
      display:flex;
      align-items:center;
      gap: 10px;
      padding: 8px 10px;
      border-radius: 12px;
      cursor: pointer;
      color: rgba(226,232,240,.92);
      background: rgba(15,23,42,0.18);
      border: 1px solid transparent;
      user-select: none;
      min-height: 38px;
    }
    :is(body.page-index, body.page-ios) .ai-token-item:hover{
      background: rgba(56,189,248,.10);
      border-color: rgba(56,189,248,.22);
    }
    :is(body.page-index, body.page-ios) .ai-token-icon{
      width: 20px;
      height: 20px;
      border-radius: 999px;
      flex: 0 0 auto;
      background: rgba(148,163,184,.12);
      border: 1px solid rgba(148,163,184,.20);
    }
    :is(body.page-index, body.page-ios) .ai-token-meta{
      display:flex;
      flex-direction: column;
      min-width: 0;
      flex: 1 1 auto;
    }
    :is(body.page-index, body.page-ios) .ai-token-symbol{
      font-size: 13px;
      line-height: 1.1;
      color: rgba(226,232,240,.94);
      font-weight: 600;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    :is(body.page-index, body.page-ios) .ai-token-name{
      font-size: 12px;
      line-height: 1.1;
      color: rgba(148,163,184,.88);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      margin-top: 2px;
    }
    :is(body.page-index, body.page-ios) .ai-token-risk-pill{
      flex: 0 0 auto;
      font-size: 11px;
      color: rgba(226,232,240,.86);
      background: rgba(248,113,113,.10);
      border: 1px solid rgba(248,113,113,.22);
      padding: 4px 8px;
      border-radius: 999px;
      display:flex;
      align-items:center;
      gap: 6px;
      white-space: nowrap;
    }
    :is(body.page-index, body.page-ios) .ai-token-risk-pill .warn{
      font-size: 12px;
      line-height: 1;
    }

    :is(body.page-index, body.page-ios) .panel-left .ai-output {
      position: relative;
      display: flex;
      flex-direction: column;
      flex: 1 1 auto;
      overflow-x: hidden;
      overflow-y: hidden;
      min-height: 0;
      height: auto;
      max-height: none;
      -webkit-overflow-scrolling: touch;
      overscroll-behavior: contain;
      scrollbar-gutter: stable;
      margin-top: 10px;
      margin-bottom: 0;
      padding: 12px 12px;
      border-radius: 14px;
      border: 1px solid rgba(148,163,184,.22);
      background: rgba(2,6,23,.35);
      color: rgba(226,232,240,.9);
      font-size: var(--ai-font-size);
      line-height: var(--ai-line-height);
      white-space: pre-wrap;
      width: 100%;
      max-width: none;
    }

    /* Index AI: keep outer cards fixed; only long analysis body scrolls */
    :is(body.page-index, body.page-ios) .panel-left {
      display: flex;
      flex-direction: column;
      min-height: 0;
    }
    :is(body.page-index, body.page-ios) .ai-analyzer {
      display: flex;
      flex-direction: column;
      flex: 1 1 auto;
      min-height: 0;
      overflow-x: hidden;
    }
    :is(body.page-index, body.page-ios) #ai-output{
      flex: 1 1 auto;
      max-height: 100%;
      min-height: 0;
    }
    :is(body.page-index, body.page-ios) #ai-output.ai-output .ai-scroll {
      flex: 1 1 auto;
      align-self: stretch;
      min-height: 0 !important;
      overflow-y: auto;
      overflow-x: hidden;
      -webkit-overflow-scrolling: touch;
      overscroll-behavior: contain;
    }

    /* Index: shared AI host participates in panel-left flex height chain */
    body.page-index #juplite-shared-home-ai-host {
      flex: 1 1 auto;
      min-height: 0;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }
    body.page-index #juplite-shared-home-ai-host .hero-title,
    body.page-index #juplite-shared-home-ai-host .ai-explainer {
      flex: 0 0 auto;
    }
    body.page-index #juplite-shared-home-ai-host .ai-analyzer {
      flex: 1 1 auto;
      min-height: 0;
    }

    /* Ensure swap view grid fills main height */
    :is(body.page-index, body.page-ios) #view-swap.view-active{
      height: 100%;
      flex: 1 1 auto;
      min-height: 0;
    }
    :is(body.page-index, body.page-ios) .layout{
      height: 100%;
      min-height: 0;
    }

    :is(body.page-index, body.page-ios) .panel-left,
    :is(body.page-index, body.page-ios) .panel-right{
      height: 100%;
      min-height: 0;
    }

    /*
      Mobile fix (Swap/Index): when the 2-panel grid collapses to 1 column,
      the previous "force 100% height everywhere" produced clipped content and unusable controls
      (no scroll space to reach the second panel). Keep Layout v1.0 (no body scroll),
      but allow the active view to scroll internally and let panels size naturally.
    */
    @media (max-width: 1024px) {
      /* Match screener/pools/refer: let the document grow; body owns vertical scroll (not html height:100% lock). */
      html {
        height: auto;
        min-height: 100%;
        overflow-x: hidden;
        overflow-y: visible;
      }
      /* Mobile / tablet: full-page vertical scroll (avoid nested-scroll trap) */

      /* Content grows in-flow; document (body) is the scroll container */
      :is(body.page-index, body.page-ios) #view-swap.view-active{
        flex: none;
        height: auto;
        min-height: 0;
        overflow: visible;
        overflow-x: hidden;
        /* Topbar+ticker are already above <main> in normal flow; extra padding duplicated their height. */
        padding-top: 0;
        box-sizing: border-box;
      }

      /* Allow stacked panels to take natural height */
      :is(body.page-index, body.page-ios) #view-swap > .layout,
      :is(body.page-index, body.page-ios) #view-swap .layout,
      :is(body.page-index, body.page-ios) #view-swap .panel-left,
      :is(body.page-index, body.page-ios) #view-swap .panel-right,
      :is(body.page-index, body.page-ios) #view-swap .layout > section.panel{
        height: unset;
        min-height: 0;
      }

      /* Undo mobile min-height clamp that can exceed small viewports */
      :is(body.page-index, body.page-ios) #view-swap .panel-left{
        min-height: 0;
      }
      :is(body.page-index, body.page-ios) #view-swap > .layout > section.panel.panel-left,
      :is(body.page-index, body.page-ios) #view-swap > .layout > section.panel:not(.panel-left) {
        height: auto;
      }
      /* AI row: allow wrap on narrow screens to prevent horizontal overflow */
      :is(body.page-index, body.page-ios) .ai-row { flex-wrap: wrap; }

      /*
        Single vertical scroll: only #view-swap scrolls. The AI result (.ai-scroll) grows in-flow
        so gestures are not "captured" by a nested scroll area (desktop unchanged: rules below are max-width only).
      */
      :is(body.page-index, body.page-ios) #view-swap > .layout > section.panel.panel-left #ai-output.ai-output {
        flex: 0 0 auto;
        height: auto;
        max-height: none;
        overflow: visible;
      }
      :is(body.page-index, body.page-ios) #ai-output.ai-output .ai-scroll {
        flex: 0 0 auto;
        min-height: 0;
        overflow-y: visible;
        overflow-x: hidden;
        overscroll-behavior: auto;
      }

      /* Mobile hierarchy: AI flow reads as step 1; Jupiter stack reads as secondary (desktop unchanged). */
      :is(body.page-index, body.page-ios) #view-swap > .layout {
        gap: 28px 12px;
      }
      :is(body.page-index, body.page-ios) #view-swap > .layout > section.panel.panel-left .ai-analyzer {
        flex: 0 0 auto;
        border-radius: 14px;
        outline: 1px solid rgba(56, 189, 248, 0.24);
        outline-offset: 3px;
        box-shadow: 0 14px 42px rgba(15, 23, 42, 0.55);
      }
      :is(body.page-index, body.page-ios) #view-swap > .layout > section.panel:not(.panel-left) {
        margin-top: 2px;
        border-top: 1px solid rgba(148, 163, 184, 0.14);
        padding-top: 22px;
        box-shadow: 0 12px 34px rgba(15, 23, 42, 0.48);
        border-color: rgba(148, 163, 184, 0.28);
      }
      :is(body.page-index, body.page-ios) #view-swap > .layout > section.panel:not(.panel-left) .pro-shell {
        box-shadow: 0 8px 22px rgba(0, 0, 0, 0.32);
        border-color: rgba(148, 163, 184, 0.14);
      }
      :is(body.page-index, body.page-ios) #view-swap > .layout > section.panel:not(.panel-left) .plugin-wrapper {
        border-color: rgba(30, 64, 175, 0.38);
      }
    }

    /* Terminal wrapper: align with mobile.html — avoid WebKit hit issues on Jupiter top chrome. */
    :is(body.page-index, body.page-ios) #view-swap #index-terminal-panel {
      overflow: visible !important;
    }

    /* Index (swap view only): stretch left analysis panel to match right terminal height */
    :is(body.page-index, body.page-ios) #view-swap > .layout {
      flex: 1 1 auto;
      min-height: 0;
      align-items: stretch;
    }

    /* Index/Swap: golden ratio columns (desktop only) */
    @media (min-width: 1025px) {
      :is(body.page-index, body.page-ios) #view-swap > .layout {
        grid-template-columns: minmax(0, 1.618fr) minmax(0, 1fr);
      }
      body.page-index #ai-output .ai-token-list.visible {
        flex: 1 1 auto;
        min-height: 0;
      }
    }
    :is(body.page-index, body.page-ios) #view-swap > .layout > section.panel.panel-left {
      height: 100%;
      min-height: 0;
    }
    :is(body.page-index, body.page-ios) #view-swap > .layout > section.panel:not(.panel-left) {
      height: 100%;
      min-height: 0;
    }
    :is(body.page-index, body.page-ios) #view-swap > .layout > section.panel.panel-left > div {
      display: flex;
      flex-direction: column;
      height: 100%;
      min-height: 0;
    }
    :is(body.page-index, body.page-ios) #view-swap > .layout > section.panel.panel-left .ai-analyzer {
      display: flex;
      flex-direction: column;
      flex: 1 1 auto;
      min-height: 0;
    }
    :is(body.page-index, body.page-ios) #view-swap > .layout > section.panel.panel-left #ai-output.ai-output {
      flex: 1 1 auto;
      height: 100%;
      max-height: 100%;
      overflow: hidden;
      margin-bottom: 0;
    }

    /* Ensure AI output starts at the top (no vertical centering) */
    :is(body.page-index, body.page-ios) .panel-left #ai-output {
      display: flex !important;
      flex-direction: column !important;
      justify-content: flex-start !important;
      align-items: flex-start !important;
      place-items: start !important;
      place-content: start !important;
      text-align: left !important;
    }

    :is(body.page-index, body.page-ios) .panel-left #ai-output-text {
      display: block !important;
      width: 100% !important;
      text-align: left !important;
      flex: 0 0 auto !important;
      min-height: 0 !important;
      overflow: visible !important;
      max-height: none !important;
      font-size: 14px !important;
      line-height: 1.6 !important;
      white-space: pre-wrap !important;
      word-break: break-word !important;
      overflow-wrap: anywhere !important;
      font-family: inherit !important;
    }

    :is(body.page-index, body.page-ios) .panel-left #ai-output-text {
      margin: 0;
      white-space: pre-wrap;
      text-align: left;
    }

    /* Verdict highlighting (index left panel only) */
    :is(body.page-index, body.page-ios) .panel-left #ai-output-text .ai-verdict-buy {
      color: #2ecc71;
      font-weight: 600;
    }
    :is(body.page-index, body.page-ios) .panel-left #ai-output-text .ai-verdict-hold {
      color: #f1c40f;
      font-weight: 600;
    }
    :is(body.page-index, body.page-ios) .panel-left #ai-output-text .ai-verdict-sell {
      color: #e74c3c;
      font-weight: 600;
    }

    /* Verdict color tags (index only) */
    :is(body.page-index, body.page-ios) .ai-verdict { font-weight: 600; margin-top: 10px; }
    :is(body.page-index, body.page-ios) .ai-v-buy  { color: #2ecc71; }
    :is(body.page-index, body.page-ios) .ai-v-hold { color: #f1c40f; }
    :is(body.page-index, body.page-ios) .ai-v-sell { color: #e74c3c; }
    :is(body.page-index, body.page-ios) .ai-v-reason { opacity: 0.85; font-weight: 400; }

    /* Verdikt line: color ONLY numeric percent tokens (global) */
    #ai-output-text .ai-num-buy  { color: #2ecc71; font-weight: 600; }
    #ai-output-text .ai-num-hold { color: #f1c40f; font-weight: 600; }
    #ai-output-text .ai-num-sell { color: #e74c3c; font-weight: 600; }
    #ai-output-text .ai-verdikt-line { display: block; margin-top: 12px; }
    /* Premium Scenario card (locked placeholder; same design system as ai-output) */
    :is(body.page-index, body.page-ios) .scenario-card {
      margin-top: 12px;
      padding: 12px 12px;
      border-radius: 14px;
      border: 1px solid rgba(148,163,184,.22);
      background: rgba(2,6,23,.35);
      color: rgba(226,232,240,.92);
      width: 100%;
    }
    :is(body.page-index, body.page-ios) .scenario-card .scenario-header-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 6px;
      min-height: 0;
    }
    :is(body.page-index, body.page-ios) .scenario-card .scenario-header-row .scenario-title { margin: 0; flex-shrink: 0; }
    :is(body.page-index, body.page-ios) .scenario-card .scenario-verdict {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 6px;
      font-size: 14px;
      font-weight: 600;
      flex-shrink: 1;
      min-width: 0;
      justify-content: flex-end;
    }
    :is(body.page-index, body.page-ios) .scenario-card .scenario-verdict[hidden] { display: none !important; }
    :is(body.page-index, body.page-ios) .scenario-card .scenario-verdict .ai-num-buy { color: #2ecc71; }
    :is(body.page-index, body.page-ios) .scenario-card .scenario-verdict .ai-num-hold { color: #f1c40f; }
    :is(body.page-index, body.page-ios) .scenario-card .scenario-verdict .ai-num-sell { color: #e74c3c; }
    :is(body.page-index, body.page-ios) .scenario-card .scenario-subtitle { margin: 0 0 10px 0; font-size: 14px; line-height: 1.6; color: rgba(226,232,240,.92); }
    :is(body.page-index, body.page-ios) .scenario-card .scenario-desc-multiline { white-space: pre-line; }
    :is(body.page-index, body.page-ios) .scenario-card .scenario-bullets {
      margin: 0 0 12px 0;
      padding-left: 18px;
      font-size: 14px;
      line-height: 1.6;
      color: rgba(226,232,240,.92);
    }
    :is(body.page-index, body.page-ios) .scenario-card .scenario-bullets li { margin-bottom: 4px; }
    :is(body.page-index, body.page-ios) .scenario-card .scenario-cta {
      display: inline-block;
      text-align: center;
      text-decoration: none;
      padding: 10px 12px;
      border-radius: 12px;
      border: 1px solid rgba(56,189,248,.35);
      background: rgba(56,189,248,.12);
      color: rgba(226,232,240,.95);
      font-size: 13px;
      font-weight: 500;
      min-width: 118px;
    }
    :is(body.page-index, body.page-ios) .scenario-card .scenario-cta:hover {
      background: rgba(56,189,248,.18);
      border-color: rgba(56,189,248,.45);
    }
    :is(body.page-index, body.page-ios) .scenario-card .scenario-active-badge {
      display: inline-block;
      font-size: 11px;
      font-weight: 700;
      padding: 4px 8px;
      border-radius: 999px;
      background: rgba(41,222,107,.15);
      border: 1px solid rgba(41,222,107,.4);
      color: rgba(41,222,107,.95);
      margin-bottom: 8px;
    }
    :is(body.page-index, body.page-ios) .scenario-card .scenario-active .scenario-subtitle,
    :is(body.page-index, body.page-ios) .scenario-card .scenario-expired .scenario-subtitle {
      margin-bottom: 10px;
    }
    :is(body.page-index, body.page-ios) .scenario-card .scenario-no-trade { color: rgba(226,232,240,.92); font-size: 14px; line-height: 1.6; }
    :is(body.page-index, body.page-ios) .scenario-card .scenario-warning {
      overflow: visible;
    }
    :is(body.page-index, body.page-ios) .scenario-card .scenario-warning .scenario-warning-text {
      position: relative;
      display: inline-block;
      z-index: 2;
    }
    :is(body.page-index, body.page-ios) .scenario-card .scenario-warning .scenario-warning-text::after {
      content: "";
      position: absolute;
      top: 50%;
      left: -12%;
      width: 34%;
      height: 150%;
      transform: translateY(-50%);
      pointer-events: none;
      z-index: -1;
      opacity: 0;
      background: radial-gradient(
        ellipse at center,
        rgba(56,189,248,0.34) 0%,
        rgba(56,189,248,0.18) 38%,
        rgba(56,189,248,0.08) 62%,
        rgba(56,189,248,0.00) 100%
      );
      filter: blur(16px);
      animation: scenarioTextLightDrift 7.2s ease-in-out infinite;
    }
    :is(body.page-index, body.page-ios) .scenario-card .scenario-warning .scenario-char {
      transition: color 120ms linear, text-shadow 120ms linear;
    }
    :is(body.page-index, body.page-ios) .scenario-card .scenario-warning .scenario-char.is-hot {
      color: #ff5a5a;
      text-shadow: 0 0 8px rgba(255, 90, 90, 0.35);
    }
    @keyframes scenarioTextLightDrift {
      0% {
        left: -12%;
        opacity: 0;
      }
      10% {
        opacity: 0.88;
      }
      42% {
        left: 78%;
        opacity: 0.68;
      }
      52% {
        left: 82%;
        opacity: 0;
      }
      100% {
        left: 82%;
        opacity: 0;
      }
    }
    :is(body.page-index, body.page-ios) .scenario-card .scenario-found { margin-top: 8px; font-size: 14px; line-height: 1.6; }
    :is(body.page-index, body.page-ios) .scenario-card .scenario-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 14px;
      line-height: 1.6;
      margin-bottom: 6px;
      color: rgba(226,232,240,.92);
    }
    :is(body.page-index, body.page-ios) .scenario-card .scenario-label {
      font-size: 14px;
      color: rgba(226,232,240,.92);
      line-height: 1.6;
    }
    :is(body.page-index, body.page-ios) .scenario-card .scenario-value { font-weight: 500; }
    :is(body.page-index, body.page-ios) .scenario-card .scenario-updated {
      animation: scenarioFlash 0.6s ease;
    }
    @keyframes scenarioFlash {
      0%   { background-color: rgba(34,197,94,0.25); }
      100% { background-color: transparent; }
    }
    :is(body.page-index, body.page-ios) .scenario-card .scenario-profit { color: rgba(41,222,107,.95); }
    :is(body.page-index, body.page-ios) .scenario-card .scenario-loss { color: rgba(248,113,113,.95); }
    :is(body.page-index, body.page-ios) .scenario-card .scenario-open-trade {
      margin-top: 10px;
      cursor: pointer;
      padding: 10px 12px;
      background: rgba(0,140,255,0.12);
      border: 1px solid rgba(0,200,255,0.35);
      box-shadow: 0 0 8px rgba(0,200,255,0.18);
    }
    :is(body.page-index, body.page-ios) .scenario-card .scenario-open-trade:hover {
      background: rgba(0,160,255,0.18);
      border-color: rgba(0,220,255,0.45);
      box-shadow: 0 0 12px rgba(0,220,255,0.25);
    }
    :is(body.page-index, body.page-ios) .scenario-card .scenario-speculative { color: rgba(241,196,15,.95); }
    :is(body.page-index, body.page-ios) .scenario-card .scenario-presets-wrap {
      margin: 8px 0 10px 0;
    }
    :is(body.page-index, body.page-ios) .scenario-card .scenario-presets-row {
      display: flex;
      align-items: center;
      gap: 8px;
      position: relative;
    }
    /* Lower scenario block: two columns (buy | sell + profit + My Trades). Header row / badge / verdict unchanged. */
    :is(body.page-index, body.page-ios) .scenario-card .scenario-found-body {
      display: flex;
      flex-direction: row;
      align-items: flex-start;
      gap: 14px;
      width: 100%;
      min-width: 0;
    }
    :is(body.page-index, body.page-ios) .scenario-card .scenario-found-col {
      flex: 1 1 0;
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    :is(body.page-index, body.page-ios) .scenario-card .scenario-found-col .scenario-row {
      margin-bottom: 0;
    }
    /* Buy / sell only: one line, em dash before price; same .scenario-entry-value / .scenario-target-value for JS. */
    :is(body.page-index, body.page-ios) .scenario-card .scenario-row-inline-price {
      display: flex;
      flex-wrap: wrap;
      align-items: baseline;
      justify-content: flex-start;
      gap: 0;
      column-gap: 0.2em;
      row-gap: 0.12em;
      min-width: 0;
    }
    :is(body.page-index, body.page-ios) .scenario-card .scenario-row-inline-price .scenario-label {
      font-size: 12px;
      font-weight: 400;
      line-height: 1.45;
      color: rgba(148, 163, 184, 0.92);
      flex: 0 1 auto;
      max-width: 100%;
    }
    :is(body.page-index, body.page-ios) .scenario-card .scenario-row-inline-price .premium-scenario-inline-price::before {
      content: "\00a0\2014\00a0";
      font-size: 12px;
      font-weight: 400;
      line-height: 1.45;
      color: rgba(148, 163, 184, 0.7);
      user-select: none;
    }
    :is(body.page-index, body.page-ios) .scenario-card .scenario-row-inline-price .premium-scenario-inline-price {
      font-size: clamp(14px, 3.5vw, 17px);
      font-weight: 600;
      line-height: 1.25;
      color: rgba(241, 245, 249, 0.98);
      font-variant-numeric: tabular-nums;
      letter-spacing: 0.01em;
      min-width: 0;
      word-break: break-all;
      flex: 0 1 auto;
    }
    :is(body.page-index, body.page-ios) .scenario-card .scenario-found-col-buy .scenario-open-trade {
      display: inline-block;
      align-self: stretch;
      margin-top: 2px;
      text-align: center;
      box-sizing: border-box;
    }
    :is(body.page-index, body.page-ios) .scenario-card .scenario-found-col-sell .scenario-my-trades-btn {
      display: inline-block;
      align-self: stretch;
      margin-top: 4px;
      text-align: center;
      box-sizing: border-box;
    }
    :is(body.page-index, body.page-ios) .scenario-card .scenario-cta.scenario-cta-secondary {
      background: rgba(2, 6, 23, 0.45);
      border-color: rgba(56, 189, 248, 0.3);
      color: rgba(226, 232, 240, 0.95);
    }
    :is(body.page-index, body.page-ios) .scenario-card .scenario-cta.scenario-cta-secondary:hover {
      background: rgba(56, 189, 248, 0.1);
      border-color: rgba(56, 189, 248, 0.42);
    }
    :is(body.page-index, body.page-ios) .scenario-card .scenario-amount-row {
      display: inline-flex;
      flex-wrap: nowrap;
      align-items: center;
      gap: 8px;
      width: 100%;
      min-width: 0;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
    }
    :is(body.page-index, body.page-ios) .scenario-card .scenario-amount-row .scenario-presets {
      flex: 0 1 auto;
      min-width: 0;
    }
    :is(body.page-index, body.page-ios) .scenario-card .scenario-amount-row .scenario-custom-input {
      width: auto;
      min-width: 64px;
      max-width: 96px;
      flex: 0 1 auto;
    }
    @media (max-width: 640px) {
      :is(body.page-index, body.page-ios) .scenario-card .scenario-found-body {
        flex-direction: column;
        gap: 12px;
      }
    }
    :is(body.page-index, body.page-ios) .scenario-card .scenario-recommend-hint {
      font-size: 14px;
      line-height: 1.6;
      color: rgba(226,232,240,.92);
      margin: -4px 0 8px 0;
    }
    :is(body.page-index, body.page-ios) .scenario-card .scenario-presets-label {
      font-size: 14px;
      line-height: 1.6;
      color: rgba(226,232,240,.92);
    }
    :is(body.page-index, body.page-ios) .scenario-card .scenario-presets {
      display: flex;
      flex-wrap: nowrap;
      gap: 6px;
    }
    :is(body.page-index, body.page-ios) .scenario-card .scenario-preset-btn {
      padding: 6px 10px;
      font-size: 11px;
      border-radius: 8px;
      border: 1px solid rgba(148,163,184,.25);
      background: rgba(30,41,59,.5);
      color: rgba(226,232,240,.9);
      cursor: pointer;
      transition: border-color .15s, background .15s;
    }
    :is(body.page-index, body.page-ios) .scenario-card .scenario-preset-btn:hover {
      border-color: rgba(56,189,248,.4);
      background: rgba(56,189,248,.12);
    }
    :is(body.page-index, body.page-ios) .scenario-card .scenario-preset-btn.scenario-preset-active {
      border-color: rgba(56,189,248,.5);
      background: rgba(56,189,248,.18);
    }
    :is(body.page-index, body.page-ios) .scenario-card .scenario-custom-input {
      padding: 6px 10px;
      font-size: 11px;
      min-width: 72px;
      max-width: 90px;
      border-radius: 10px;
      border: 1px solid rgba(148,163,184,.25);
      background: rgba(2,6,23,.4);
      color: rgba(226,232,240,.9);
      width: 100%;
      -moz-appearance: textfield;
      appearance: textfield;
    }
    :is(body.page-index, body.page-ios) .scenario-card .scenario-custom-input::-webkit-outer-spin-button,
    :is(body.page-index, body.page-ios) .scenario-card .scenario-custom-input::-webkit-inner-spin-button {
      -webkit-appearance: none;
      appearance: none;
      margin: 0;
    }
    :is(body.page-index, body.page-ios) .scenario-card .scenario-custom-input::placeholder {
      color: rgba(226,232,240,.7);
    }

/* ===== AI Analyzer: Pro loading animation (panel-only, no layout shift) ===== */
:is(body.page-index, body.page-ios) #ai-output { position: relative; }

/* AI back arrow (shown when loading/result) */
:is(body.page-index, body.page-ios) .ai-back-arrow {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 3;
  width: 26px;
  height: 26px;
  padding: 2px;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 8px;
  background: rgba(255,255,255,0.08);
  color: #ffffff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 1;
}
:is(body.page-index, body.page-ios) .ai-back-arrow:hover {
  background: rgba(255,255,255,0.12);
  border-color: rgba(0,255,200,0.35);
  box-shadow: 0 0 6px rgba(0,255,200,0.15);
}
:is(body.page-index, body.page-ios) .ai-back-arrow::before { content: "←"; }
:is(body.page-index, body.page-ios) .ai-back-arrow[hidden] { display: none !important; }

/* AI Analysis: actions row (Back + Chart) top-left */
:is(body.page-index, body.page-ios) .ai-actions-row {
  position: absolute;
  top: 8px;
  left: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 3;
}
:is(body.page-index, body.page-ios) .ai-actions-row[hidden] { display: none !important; }
:is(body.page-index, body.page-ios) .ai-actions-row .ai-back-arrow {
  position: relative;
  top: auto;
  left: auto;
}
:is(body.page-index, body.page-ios) .ai-chart-wrap {
  display: inline-flex;
  align-items: center;
}
:is(body.page-index, body.page-ios) .ai-chart-mini-btn {
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 8px;
  background: rgba(255,255,255,0.08);
  color: rgba(226,232,240,0.9);
  font-size: 14px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .15s ease, border-color .15s ease;
}
:is(body.page-index, body.page-ios) .ai-chart-mini-btn:hover {
  background: rgba(255,255,255,0.12);
  border-color: rgba(56,189,248,0.35);
}
/* AI Chart modal: resizable by edge/corner */
:is(body.page-index, body.page-ios) .ai-chart-modal {
  width: min(520px, calc(100vw - 32px));
  height: min(420px, calc(100vh - 80px));
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 80px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  resize: both;
}
:is(body.page-index, body.page-ios) .ai-chart-modal-body {
  flex: 1 1 auto;
  min-height: 120px;
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
:is(body.page-index, body.page-ios) .ai-chart-modal-body iframe {
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  border: 0;
  display: block;
}
/* AI Chart modal: ensure hidden by default; no auto-open on load */
:is(body.page-index, body.page-ios) #ai-chart-modal-overlay[hidden],
:is(body.page-index, body.page-ios) #ai-chart-modal[hidden] { display: none !important; }
:is(body.page-index, body.page-ios) #ai-chart-modal-overlay { z-index: 20000; }
:is(body.page-index, body.page-ios) #ai-chart-modal { z-index: 20001; position: fixed; }
:is(body.page-index, body.page-ios) #ai-chart-modal .jl-wallet-modal-head { position: relative; z-index: 20002; cursor: move; user-select: none; -webkit-user-select: none; }
:is(body.page-index, body.page-ios) #ai-chart-modal .jl-wallet-modal-head .icon-btn { cursor: pointer; }
:is(body.page-index, body.page-ios) #ai-chart-modal-close { position: relative; z-index: 20003; }
:is(body.page-index, body.page-ios) #ai-output.has-ai-actions .ai-scroll { padding-top: 42px; }

@media (max-width: 768px) {
  :is(body.page-index, body.page-ios) #ai-output.has-ai-actions .ai-scroll { padding-top: 48px; }
}

/* AI token table (empty state) — match Screener token-logo-wrap 26px, symbol typography */
:is(body.page-index, body.page-ios) .ai-token-table {
  display: none;
  flex-direction: column;
  overflow-y: auto;
  max-height: 100%;
  padding: 8px 0;
}
:is(body.page-index, body.page-ios) .ai-token-table.visible { display: flex; }
:is(body.page-index, body.page-ios) .ai-token-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  cursor: pointer;
  border-radius: 10px;
  transition: background .12s;
  min-height: 36px;
  width: 100%;
  box-sizing: border-box;
}
:is(body.page-index, body.page-ios) .ai-token-row:hover { background: rgba(148,163,184,.12); }
:is(body.page-index, body.page-ios) .ai-token-row .token-logo-wrap {
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  border-radius: 50%;
  overflow: hidden;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
:is(body.page-index, body.page-ios) .ai-token-row .token-logo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
:is(body.page-index, body.page-ios) .ai-token-row .ai-token-symbol {
  flex: 0 0 auto;
  font-weight: 600;
  font-size: 13px;
  color: rgba(226,232,240,.95);
}
:is(body.page-index, body.page-ios) .ai-token-row .ai-token-symbol-wrap {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
}
:is(body.page-index, body.page-ios) .ai-token-row .token-meme-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 4px;
  font-size: 11px;
  line-height: 1;
  transform: translateY(-1px);
  opacity: 0.92;
  flex: 0 0 auto;
}
:is(body.page-index, body.page-ios) .ai-token-row .token-meme-warn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 4px;
  font-size: 11px;
  line-height: 1;
  transform: translateY(-1px);
  color: #F2C94C;
  opacity: 0.95;
  flex: 0 0 auto;
}
:is(body.page-index, body.page-ios) .ai-token-row .ai-token-price {
  margin-left: auto;
  font-size: 12px;
  color: rgba(148,163,184,.9);
  font-variant-numeric: tabular-nums;
}
:is(body.page-index, body.page-ios) .ai-token-row .ai-token-chg {
  margin-left: 10px;
  min-width: 52px;
  text-align: right;
  font-size: 12px;
  color: rgba(148,163,184,.9);
  font-variant-numeric: tabular-nums;
}
:is(body.page-index, body.page-ios) .ai-token-row .ai-token-chg.pct-pos { color: #2ecc71; }
:is(body.page-index, body.page-ios) .ai-token-row .ai-token-chg.pct-neg { color: #ff5c5c; }
/* AI token list: one scrollable list, full width, scrollbar at right edge */
:is(body.page-index, body.page-ios) .ai-token-list {
  display: none;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  max-height: 100%;
  min-height: 0;
  width: 100%;
  padding: 8px 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(148,163,184,0.35) transparent;
}
:is(body.page-index, body.page-ios) .ai-token-list.visible { display: flex; }
:is(body.page-index, body.page-ios) .ai-token-list[hidden] { display: none !important; }
:is(body.page-index, body.page-ios) .ai-token-list::-webkit-scrollbar { width: 8px; }
:is(body.page-index, body.page-ios) .ai-token-list::-webkit-scrollbar-track { background: transparent; }
:is(body.page-index, body.page-ios) .ai-token-list::-webkit-scrollbar-thumb {
  background-color: rgba(148,163,184,0.32);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
:is(body.page-index, body.page-ios) .ai-token-list::-webkit-scrollbar-thumb:hover { background-color: rgba(148,163,184,0.48); }
:is(body.page-index, body.page-ios) #ai-output .ai-token-list.visible ~ #ai-status,
:is(body.page-index, body.page-ios) #ai-output .ai-token-list.visible ~ #ai-shimmer,
:is(body.page-index, body.page-ios) #ai-output .ai-token-list.visible ~ .ai-scroll { display: none !important; }
:is(body.page-index, body.page-ios) .ai-token-connect-wallet {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 72px;
  padding: 16px;
  font-size: var(--ai-font-size);
  line-height: var(--ai-line-height);
  color: rgba(148,163,184,.9);
  max-width: 100%;
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}
:is(body.page-index, body.page-ios) .ai-token-connect-wallet.visible { display: flex; }
:is(body.page-index, body.page-ios) .ai-token-connect-wallet[hidden] { display: none !important; }
:is(body.page-index, body.page-ios) #ai-output .ai-token-connect-wallet.visible ~ #ai-status,
:is(body.page-index, body.page-ios) #ai-output .ai-token-connect-wallet.visible ~ #ai-shimmer,
:is(body.page-index, body.page-ios) #ai-output .ai-token-connect-wallet.visible ~ .ai-scroll { display: none !important; }

/* Pulse frame during thinking */
:is(body.page-index, body.page-ios) #ai-output.is-thinking { animation: aiPulse 1.8s ease-in-out infinite; }
@keyframes aiPulse {
  0%   { box-shadow: 0 0 0 rgba(120,180,255,0); }
  50%  { box-shadow: 0 0 14px rgba(120,180,255,0.22); }
  100% { box-shadow: 0 0 0 rgba(120,180,255,0); }
}

/* Status row pinned to top */
:is(body.page-index, body.page-ios) #ai-status {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px 6px 12px;
  text-align: left;
}

/* After loading: collapse ALL loading/status UI out of layout so results start at the top */
:is(body.page-index, body.page-ios) #ai-output:not(.is-thinking) #ai-status,
:is(body.page-index, body.page-ios) #ai-output:not(.is-thinking) #ai-shimmer,
:is(body.page-index, body.page-ios) #ai-output:not(.is-thinking) #ai-loading-visual {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* Reduce vertical padding when showing result (less empty space above/below text) */
:is(body.page-index, body.page-ios) #ai-output:not(.is-thinking) {
  padding-top: 0 !important;
  padding-bottom: 4px !important;
}

/* Align first analysis line with thinking-line level: no extra top spacing in scroll/text */
:is(body.page-index, body.page-ios) #ai-output:not(.is-thinking) .ai-scroll {
  padding-top: 0;
  padding-bottom: 0;
}
:is(body.page-index, body.page-ios) #ai-output:not(.is-thinking) #ai-output-text {
  padding-top: 0;
  padding-bottom: 4px;
  margin-top: -4px;
}

/* Left side: phase + dots */
:is(body.page-index, body.page-ios) #ai-phase-wrap {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

:is(body.page-index, body.page-ios) #ai-phase {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Animated dots without width shift */
:is(body.page-index, body.page-ios) #ai-dots {
  display: inline-block;
  width: 18px; /* fixed so panel doesn't shift */
  text-align: left;
}

:is(body.page-index, body.page-ios) #ai-dots::after {
  content: "";
  display: inline-block;
  animation: aiDots 1.1s steps(4, end) infinite;
}

@keyframes aiDots {
  0%   { content: ""; }
  25%  { content: "."; }
  50%  { content: ".."; }
  75%  { content: "..."; }
  100% { content: ""; }
}

/* Right side: percent */
:is(body.page-index, body.page-ios) #ai-pct {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  opacity: 0.9;
}

/* Progress % is shown in the Analyze button during run, not in the panel */
:is(body.page-index, body.page-ios) #ai-pct { display: none; }

/* Shimmer line */
:is(body.page-index, body.page-ios) #ai-shimmer {
  height: 3px;
  width: calc(100% - 24px);
  margin: 0 12px 10px 12px;
  border-radius: 999px;
  overflow: hidden;
  display: none !important; /* UI FIX: remove blinking loading line only */
  opacity: 0;
}

:is(body.page-index, body.page-ios) #ai-output.is-thinking #ai-shimmer { opacity: 1; }

:is(body.page-index, body.page-ios) #ai-shimmer::before {
  content: "";
  display: block;
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.22), transparent);
  background-size: 200% 100%;
  animation: aiShimmer 1.1s linear infinite;
}

@keyframes aiShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Matrix-style AI loading visual (replaces old thinking line) */
/* When thinking: ai-scroll becomes flex so loader can fill height */
:is(body.page-index, body.page-ios) #ai-output.is-thinking .ai-scroll {
  display: flex;
  flex-direction: column;
}
:is(body.page-index, body.page-ios) #ai-output.is-thinking .ai-scroll #ai-output-text {
  flex-shrink: 0;
}
:is(body.page-index, body.page-ios) .ai-loading-visual {
  position: relative;
  width: 100%;
  flex: 1 1 auto;
  min-height: 120px;
  margin: 0 0 8px 0;
  border-radius: 12px;
  overflow: hidden;
  display: none;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(10,16,26,0.72) 0%, rgba(8,12,20,0.86) 100%);
  border: 1px solid rgba(110, 231, 255, 0.08);
  box-shadow:
    inset 0 0 24px rgba(110, 231, 255, 0.03),
    0 0 18px rgba(110, 231, 255, 0.04);
}
:is(body.page-index, body.page-ios) .ai-loading-visual.is-active {
  display: block;
}
:is(body.page-index, body.page-ios) #ai-matrix-canvas {
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0.22;
}
:is(body.page-index, body.page-ios) .ai-loading-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(
      180deg,
      rgba(110, 231, 255, 0.10) 0%,
      rgba(110, 231, 255, 0.02) 18%,
      rgba(0, 0, 0, 0) 45%,
      rgba(0, 0, 0, 0.16) 100%
    );
}
/* Bottom fade: symbols dissolve smoothly toward the bottom */
:is(body.page-index, body.page-ios) .ai-loading-visual::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 42%;
  pointer-events: none;
  background: linear-gradient(
    to top,
    rgba(6, 10, 18, 0.98) 0%,
    rgba(6, 10, 18, 0.6) 35%,
    rgba(6, 10, 18, 0) 100%
  );
}

/* Output text: pinned top; scroll happens in .ai-scroll; fade-in on result */
:is(body.page-index, body.page-ios) #ai-output-text {
  width: 100%;
  display: block;
  padding: 0 12px 6px 12px;
  margin: 0;
  overflow: visible;
  opacity: 1;
  transform: translateY(0);
}

:is(body.page-index, body.page-ios) #ai-output-text.ai-fade-in { animation: aiFadeInUp 220ms ease-out both; }
@keyframes aiFadeInUp {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* AI analysis scrollbar (scroll container: .ai-scroll) */
:is(body.page-index, body.page-ios) #ai-output .ai-scroll {
  scrollbar-width: thin; /* Firefox */
  scrollbar-color: rgba(148,163,184,0.35) transparent; /* thumb track */
}
:is(body.page-index, body.page-ios) #ai-output .ai-scroll::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
:is(body.page-index, body.page-ios) #ai-output .ai-scroll::-webkit-scrollbar-track {
  background: transparent;
}
:is(body.page-index, body.page-ios) #ai-output .ai-scroll::-webkit-scrollbar-thumb {
  background-color: rgba(148,163,184,0.32);
  border-radius: 999px;
  border: 2px solid transparent; /* creates padding so it feels thinner */
  background-clip: padding-box;
}
:is(body.page-index, body.page-ios) #ai-output .ai-scroll::-webkit-scrollbar-thumb:hover {
  background-color: rgba(148,163,184,0.48);
}

/* Soft top/bottom fades (scoped to the scrollable AI output only) */
:is(body.page-index, body.page-ios) #ai-output {
  position: relative;
}
:is(body.page-index, body.page-ios) #ai-output::before,
:is(body.page-index, body.page-ios) #ai-output::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 22px;
  pointer-events: none;
  z-index: 2;
}
:is(body.page-index, body.page-ios) #ai-output::before{
  top: 0;
  background: linear-gradient(to bottom, rgba(2,6,23,0.40), rgba(2,6,23,0));
  border-top-left-radius: 14px;
  border-top-right-radius: 14px;
}
:is(body.page-index, body.page-ios) #ai-output::after{
  bottom: 0;
  background: linear-gradient(to top, rgba(2,6,23,0.40), rgba(2,6,23,0));
  border-bottom-left-radius: 14px;
  border-bottom-right-radius: 14px;
}

/* After loading: remove overlay fades so no shadow/gradient remains */
:is(body.page-index, body.page-ios) #ai-output:not(.is-thinking)::before,
:is(body.page-index, body.page-ios) #ai-output:not(.is-thinking)::after{
  content: none !important;
  opacity: 0 !important;
  height: 0 !important;
}

/* Button: prevent resize when swapping Analyze -> Analyzing… */
:is(body.page-index, body.page-ios) #ai-run,
:is(body.page-index, body.page-ios) .ai-btn {
  min-width: 118px;
  white-space: nowrap;
  text-align: center;
}


/* Mobile AI/scenario — aligned with index.html (768px + 520px blocks) */
@media (max-width: 768px) {
  :is(body.page-index, body.page-ios) #view-swap .hero-title,
  :is(body.page-index, body.page-ios) #view-swap .ai-explainer {
    min-width: 0;
    max-width: 100%;
  }
  :is(body.page-index, body.page-ios) #view-swap .hero-text,
  :is(body.page-index, body.page-ios) #view-swap .section-text {
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  /* Mint input: long base58 paste must not widen the page */
  :is(body.page-index, body.page-ios) #ai-mint.ai-input {
    overflow-x: auto;
    word-break: break-all;
  }
  /* AI Analyze: comfortable tap target */
  :is(body.page-index, body.page-ios) .ai-row .ai-btn {
    min-height: 44px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  /* Scroll region: avoid flex min-content overflow */
  :is(body.page-index, body.page-ios) #ai-output .ai-scroll {
    min-width: 0;
  }
  /* Scenario: header (title + verdict) can wrap without collision */
  :is(body.page-index, body.page-ios) .scenario-card .scenario-header-row {
    flex-wrap: wrap;
    align-items: flex-start;
    row-gap: 6px;
  }
  :is(body.page-index, body.page-ios) .scenario-card .scenario-header-row .scenario-title {
    flex: 1 1 auto;
    min-width: 0;
    line-height: 1.25;
  }
  :is(body.page-index, body.page-ios) .scenario-card .scenario-header-row .scenario-verdict {
    flex: 1 1 100%;
    justify-content: flex-start;
  }
  /* Key/value rows (e.g. profit): stack value under label on narrow widths */
  :is(body.page-index, body.page-ios) .scenario-card .scenario-row:not(.scenario-row-inline-price) {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 4px 10px;
  }
  :is(body.page-index, body.page-ios) .scenario-card .scenario-row:not(.scenario-row-inline-price) .scenario-value {
    flex: 1 1 100%;
    min-width: 0;
    text-align: left;
    overflow-wrap: anywhere;
  }
  :is(body.page-index, body.page-ios) .scenario-card .scenario-row-inline-price .premium-scenario-inline-price {
    max-width: 100%;
  }
  /* Presets + amount: slightly larger touch targets */
  :is(body.page-index, body.page-ios) .scenario-card .scenario-preset-btn {
    min-height: 36px;
    padding: 8px 12px;
  }
  :is(body.page-index, body.page-ios) .scenario-card .scenario-cta,
  :is(body.page-index, body.page-ios) .scenario-card .scenario-open-trade {
    min-height: 44px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  /* AI toolbar: touch target */
  :is(body.page-index, body.page-ios) .ai-back-arrow,
  :is(body.page-index, body.page-ios) .ai-chart-mini-btn {
    min-width: 36px;
    min-height: 36px;
    width: 36px;
    height: 36px;
  }
}

@media (max-width: 520px) {
  :is(body.page-index, body.page-ios) .ai-row {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  :is(body.page-index, body.page-ios) .ai-row .ai-input-wrap {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
  }
  :is(body.page-index, body.page-ios) .ai-row .ai-btn {
    width: 100%;
    max-width: none;
  }
  :is(body.page-index, body.page-ios) #view-swap .panel.panel-left {
    padding-left: 10px;
    padding-right: 10px;
  }
}