/* AITradePro Mobile Trading CSS - V71 Phase 2 (additive, new file, Phase 1 files untouched) */

@media (max-width: 900px) {

  /* ---------- V73 Architecture Fix: single-scroll-model app-shell ----------
     #workspace / #ws-main / #ws-left never scroll. The chart (#multi-chart-wrap)
     always keeps a guaranteed minimum height so it can never disappear or render
     under the fixed bottom overlays. #ws-right (AI panel) and #ws-bottom
     (positions/journal list) are the two content regions whose length genuinely
     varies with data, so each scrolls internally within its own bounded box -
     replacing the previous "clear all grid tracks + let html/body scroll" patch,
     which broke the fixed app-shell and forced the chart to depend on a
     hardcoded JS pixel height. */
  #workspace{ height: 100dvh; }
  #ws-main{
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    overflow: hidden !important;
    padding-bottom: var(--bottom-safe-area, 80px) !important;
    box-sizing: border-box !important;
  }
  #ws-right{
    order: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 0 1 auto !important;
    max-height: 32% !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }
  #ws-right, #ws-right *{ box-sizing: border-box !important; }
  /* Fix: reliability-row (Exec/Feed/Broker/Fresh chips) was stretching to match the tall
     stats grid next to it because ai-decision-card is a flex row with default stretch. */
  #ai-decision-card{ align-items: flex-start !important; }
  #reliability-row{ height: auto !important; align-self: flex-start !important; flex-wrap: wrap !important; }

  #ws-left{ order: 2 !important; flex: 1 1 0 !important; min-height: 0 !important; overflow: hidden !important; display: flex !important; flex-direction: column !important; }
  /* Chart keeps a guaranteed floor so it can never collapse to 0 or disappear. */
  #multi-chart-wrap{ flex: 1 1 auto !important; min-height: 110px !important; }
  #click-toolbar, #chart-overlay-bar, #pf-strip{ flex-shrink: 0 !important; }
  /* Positions/journal list is the other genuinely variable-length region - scrolls internally. */
  #ws-bottom{ flex: 1 1 0 !important; min-height: 40px !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; }

  #ws-right > #ai-decision-card{ order: 1 !important; }
  #ws-right > #trade-setup-card{ order: 2 !important; }
  #ws-right > #market-panel{ order: 3 !important; }
  #ws-right > *{ order: 50; }
  #ws-right > #ai-decision-card,
  #ws-right > #trade-setup-card,
  #ws-right > #market-panel{ display: flex !important; }

  /* Secondary widgets collapsed by default on mobile, revealed via "Show more" toggle */
  #ws-right > *:not(#ai-decision-card):not(#trade-setup-card):not(#market-panel):not(.aitp-showmore-btn){
    display: none !important;
  }
  body.aitp-widgets-expanded #ws-right > *:not(.aitp-showmore-btn){
    display: flex !important;
  }

  /* Performance: let the browser skip layout/paint work for offscreen widget sections */
  .rp-section{ content-visibility: auto; contain-intrinsic-size: 1px 220px; }

  /* ---------- Paper trading chart/AI columns stack, chart first ---------- */
  .main{ display: flex !important; flex-direction: column !important; }
  .chart-col{ order: 1 !important; width: 100% !important; }
  .ai-col{ order: 2 !important; width: 100% !important; }
}

/* ---------- Show more toggle button ---------- */
.aitp-showmore-btn{
  display: block !important; width: 100%; margin: 8px 0; padding: 12px;
  min-height: 48px; border-radius: 10px; border: 1px solid #232a31;
  background: #151a1f; color: #f5a623; font-size: 13.5px; font-weight: 600;
  font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
}

/* ---------- Floating Live Signal Card ---------- */
#aitp-float-signal{
  position: fixed; left: 10px; right: 10px; z-index: var(--z-float-signal, 99500);
  bottom: calc(var(--aitp-nav-height, 60px) + var(--aitp-safe-bottom, 0px) + var(--aitp-tradebar-h, 0px) + 10px);
  background: rgba(21,26,31,0.97); border: 1px solid #232a31; border-radius: 16px;
  padding: 10px 12px; box-shadow: 0 6px 24px rgba(0,0,0,.45);
  display: none; align-items: center; gap: 10px;
  font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  backdrop-filter: blur(10px);
}
#aitp-float-signal.aitp-visible{ display: flex; }
#aitp-float-signal .aitp-fs-dir{
  font-weight: 800; font-size: 13px; padding: 6px 10px; border-radius: 8px; min-width: 44px; text-align: center;
}
#aitp-float-signal .aitp-fs-dir.buy{ background: rgba(46,204,113,.18); color: #2ecc71; }
#aitp-float-signal .aitp-fs-dir.sell{ background: rgba(231,76,60,.18); color: #e74c3c; }
#aitp-float-signal .aitp-fs-dir.wait,
#aitp-float-signal .aitp-fs-dir.neutral{ background: rgba(154,164,174,.18); color: #9aa4ae; }
#aitp-float-signal .aitp-fs-mid{ flex: 1; min-width: 0; font-size: 11px; color: #9aa4ae; line-height: 1.5; }
#aitp-float-signal .aitp-fs-mid b{ color: #e9edf1; font-size: 12px; }
#aitp-float-signal .aitp-fs-fab{
  width: 44px; height: 44px; min-width: 44px; border-radius: 50%; background: #f5a623; color: #0b0e11;
  display: flex; align-items: center; justify-content: center; font-size: 20px; border: none;
}

/* ---------- Quick Actions Bottom Sheet ---------- */
#aitp-sheet-backdrop{
  position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 99600;
  display: none; opacity: 0; transition: opacity .2s ease;
}
#aitp-sheet-backdrop.aitp-visible{ display: block; opacity: 1; }
#aitp-sheet{
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 99601;
  background: #12161a; border-top-left-radius: 18px; border-top-right-radius: 18px;
  padding: 10px 14px calc(18px + var(--aitp-safe-bottom, 0px));
  transform: translateY(100%); transition: transform .25s ease;
  font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
}
#aitp-sheet.aitp-visible{ transform: translateY(0); }
#aitp-sheet .aitp-sheet-handle{ width: 40px; height: 4px; border-radius: 2px; background: #333c44; margin: 4px auto 14px; }
#aitp-sheet button{
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 50px;
  background: transparent; border: none; border-bottom: 1px solid #1f262d; color: #e9edf1;
  font-size: 15px; text-align: left; padding: 0 4px;
}
#aitp-sheet button:last-child{ border-bottom: none; }
#aitp-sheet button .aitp-sheet-ic{ font-size: 18px; width: 24px; text-align: center; }

/* ---------- Sticky one-hand trade bar (paper-trading.html) ---------- */
#aitp-sticky-tradebar{
  position: fixed; left: 0; right: 0; z-index: var(--z-trade-bar, 99400);
  bottom: calc(var(--aitp-nav-height, 60px) + var(--aitp-safe-bottom, 0px));
  display: none; gap: 8px; padding: 8px 10px; background: rgba(11,14,17,0.97);
  border-top: 1px solid #1f262d; backdrop-filter: blur(10px);
}
#aitp-sticky-tradebar.aitp-visible{ display: flex; }
#aitp-sticky-tradebar button{
  flex: 1; min-height: 48px; border-radius: 10px; border: none; font-weight: 700; font-size: 14px;
}
#aitp-sticky-tradebar .aitp-buy{ background: #1e8449; color: #eafff2; }
#aitp-sticky-tradebar .aitp-sell{ background: #a93226; color: #ffeceb; }
#aitp-sticky-tradebar .aitp-place{ background: #f5a623; color: #0b0e11; flex: 1.4; }

/* ---------- Fullscreen chart mode ---------- */
.aitp-fs-target:fullscreen{
  background: #0b0e11; display: flex; flex-direction: column; justify-content: center;
}
.aitp-fs-btn{
  position: absolute; top: 10px; right: 10px; z-index: 500; width: 40px; height: 40px;
  border-radius: 10px; background: rgba(21,26,31,0.85); border: 1px solid #232a31; color: #e9edf1;
  font-size: 16px; display: flex; align-items: center; justify-content: center;
}

/* ---------- Long list soft pagination ---------- */
.aitp-list-hidden-row{ display: none !important; }
.aitp-list-more-btn{
  display: block; width: 100%; min-height: 44px; margin-top: 6px; border-radius: 8px;
  border: 1px dashed #2a323a; background: transparent; color: #9aa4ae; font-size: 13px;
}

@media (max-width: 480px){
  #aitp-float-signal .aitp-fs-mid{ font-size: 10.5px; }
}


/* V2 UI Polish: clean bullet-list rendering for AI insight/reasoning text (Paper Trading) */
.ai-insight-list{margin:4px 0 0 16px;padding:0;font-size:12px;color:#94a3b8;list-style:disc}
.ai-insight-list li{margin-bottom:2px;line-height:1.4}
.ai-insight-score{margin-top:4px;font-size:12px;color:#94a3b8;font-weight:600}