/* Trade terminal + chat extras (mirrors Next.js TradeScreen) */
.trade-shell { background: #0f0f11; min-height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }
body.trade-page { overflow: hidden; overscroll-behavior: none; }
body.trade-page footer { display: none; }
@media (min-width: 1024px) {
  body.trade-page { overflow: auto; }
  body.trade-page footer { display: block; }
}

/* Mobile + PWA: shrink chart so stake + BUY/SELL stay on one screen */
@media (max-width: 1023px) {
  html.pwa-standalone,
  html.pwa-standalone body.trade-page {
    height: 100%;
    min-height: 100dvh;
    min-height: 100svh;
    min-height: -webkit-fill-available;
  }
  body.trade-page {
    min-height: 100dvh;
    min-height: 100svh;
    min-height: -webkit-fill-available;
  }
  .trade-shell {
    height: 100dvh;
    height: 100svh;
    max-height: 100dvh;
    max-height: 100svh;
    min-height: 0;
  }
  .trade-header {
    padding-top: env(safe-area-inset-top, 0px);
  }
  .trade-main-row {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
  }
  .trade-board {
    min-height: 0;
    overflow: hidden;
    justify-content: flex-end;
  }
  .trade-chart-area {
    flex: 0 1 auto;
    height: min(36vh, calc(100svh - 15.5rem - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)));
    max-height: min(36vh, calc(100svh - 15.5rem - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)));
    min-height: 7rem;
    background: #000;
  }
  body.trade-page.trade-demo .trade-chart-area {
    height: min(32vh, calc(100svh - 17.5rem - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)));
    max-height: min(32vh, calc(100svh - 17.5rem - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)));
  }
  .trade-controls {
    flex-shrink: 0;
    padding-bottom: max(0.5rem, env(safe-area-inset-bottom, 0px));
  }
  .trade-stake-row { padding-top: 0.375rem; padding-bottom: 0.375rem; }
  .trade-stake-row .input-field,
  .trade-stake-row #stake-input { padding-top: 0.5rem; padding-bottom: 0.5rem; font-size: 1.125rem; }
  .trade-quick-row { padding-bottom: 0.375rem; }
  .trade-quick-row button { padding-top: 0.5rem; padding-bottom: 0.5rem; font-size: 0.8125rem; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
  .trade-quick-btn { cursor: pointer; user-select: none; }
  .trade-action-row { gap: 0.375rem; }
  .trade-action-btn { padding-top: 0.625rem; padding-bottom: 0.625rem; font-size: 0.9375rem; }
  .trade-toolbar { padding-top: 0.25rem; padding-bottom: 0.25rem; }
  .demo-banner { padding-top: 0.25rem; padding-bottom: 0.25rem; font-size: 10px; }
  .chat-fab { bottom: calc(9.25rem + env(safe-area-inset-bottom, 0px)); }
  #toast-container { bottom: calc(4rem + env(safe-area-inset-bottom, 0px)); }

  /* Installed PWA (iOS/Android home screen): tighter chart for notched screens */
  html.pwa-standalone .trade-chart-area {
    height: min(30vh, calc(100svh - 16rem - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)));
    max-height: min(30vh, calc(100svh - 16rem - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)));
  }
  html.pwa-standalone body.trade-page.trade-demo .trade-chart-area {
    height: min(26vh, calc(100svh - 18rem - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)));
    max-height: min(26vh, calc(100svh - 18rem - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)));
  }
}

@media (max-width: 1023px) and (display-mode: standalone) {
  .trade-chart-area {
    height: min(30vh, calc(100svh - 16rem - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)));
    max-height: min(30vh, calc(100svh - 16rem - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)));
  }
  body.trade-page.trade-demo .trade-chart-area {
    height: min(26vh, calc(100svh - 18rem - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)));
    max-height: min(26vh, calc(100svh - 18rem - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)));
  }
}
.trade-header { flex-shrink: 0; border-bottom: 1px solid #2a2a2e; background: #1a1a1c; }
.trade-header-inner { display: flex; height: 3rem; align-items: center; justify-content: space-between; padding: 0 .75rem; }
@media (min-width: 640px) { .trade-header-inner { height: 3.5rem; padding: 0 1rem; } }
.trade-toolbar { flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #2a2a2e; background: #141416; padding: .375rem .75rem; }
.balance-pill { display: flex; align-items: center; gap: .375rem; border-radius: .5rem; background: #252528; padding: .25rem .5rem; text-decoration: none; color: inherit; cursor: pointer; }
@media (min-width: 640px) { .balance-pill { gap: .5rem; padding: .375rem .75rem; } }
.balance-avatar { display: flex; height: 1.75rem; width: 1.75rem; align-items: center; justify-content: center; border-radius: 9999px; background: #1a4d3a; color: #22c55e; }
@media (min-width: 640px) { .balance-avatar { height: 2rem; width: 2rem; } }
.demo-banner { flex-shrink: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .25rem .75rem; background: #3d3018; padding: .375rem .75rem; text-align: center; font-size: 11px; color: #e8c872; }
.demo-banner strong { color: #f0d060; font-weight: 600; }
.trade-main-row { display: flex; min-height: 0; flex: 1; }
.chat-desktop { display: none; min-height: 0; width: 18rem; flex-shrink: 0; align-self: stretch; flex-direction: column; }
@media (min-width: 1024px) { .chat-desktop { display: flex; } }
@media (min-width: 1280px) { .chat-desktop { width: 20rem; } }
.trade-board { display: flex; min-height: 0; min-width: 0; flex: 1; flex-direction: column; }
.chat-fab { position: fixed; bottom: 5rem; right: .75rem; z-index: 40; display: flex; height: 2.75rem; width: 2.75rem; align-items: center; justify-content: center; border-radius: 9999px; background: #c49a2a; color: #000; box-shadow: 0 10px 25px rgba(0,0,0,.35); border: none; cursor: pointer; }
@media (min-width: 1024px) { .chat-fab { display: none; } }
.chat-mobile-overlay { position: fixed; inset: 0; z-index: 50; }
.chat-mobile-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.6); }
.chat-mobile-sheet { position: absolute; bottom: 0; left: 0; right: 0; z-index: 1; display: flex; height: min(85dvh, 640px); flex-direction: column; overflow: hidden; border-top-left-radius: 1rem; border-top-right-radius: 1rem; background: #0d0d0f; box-shadow: 0 -10px 40px rgba(0,0,0,.5); }
.modal-overlay { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.modal-overlay.hidden { display: none !important; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.7); }
.modal-panel { position: relative; max-height: 80vh; width: 100%; max-width: 28rem; overflow-y: auto; border-radius: .75rem; border: 1px solid var(--border); background: #1a1a1c; padding: 1.5rem; }
.toggle-track { position: relative; display: inline-flex; height: 1rem; width: 1.75rem; flex-shrink: 0; border-radius: 9999px; background: #3a3a3e; transition: background .2s; }
.toggle-track.toggle-on { background: #22c55e; }
.toggle-knob { position: absolute; top: 2px; left: 2px; height: .75rem; width: .75rem; border-radius: 9999px; background: #fff; transition: transform .2s; }
.toggle-knob.toggle-knob-on { transform: translateX(.875rem); }
.trade-footer-wrap { flex-shrink: 0; max-height: 40vh; overflow-y: auto; }
.pt-header { padding-top: 4rem; }
.left-0 { left: 0; }
.right-0 { right: 0; }
.fixed { position: fixed; }
.backdrop-blur-xl { backdrop-filter: blur(24px); }
.bg-background\/80 { background: rgba(10,10,11,.8); }
.hidden { display: none !important; }
@media (min-width: 768px) { .md\\:flex { display: flex !important; } .md\\:hidden { display: none !important; } .md\\:grid-cols-2 { grid-template-columns: repeat(2,minmax(0,1fr)); } .md\\:items-end { align-items: flex-end; } .md\\:text-right { text-align: right; } }
@media (min-width: 640px) { .sm\\:inline { display: inline !important; } .sm\\:inline-block { display: inline-block !important; } .sm\\:hidden { display: none !important; } .sm\\:table-cell { display: table-cell !important; } .sm\\:grid-cols-2 { grid-template-columns: repeat(2,minmax(0,1fr)); } .sm\\:grid-cols-3 { grid-template-columns: repeat(3,minmax(0,1fr)); } .sm\\:grid-cols-4 { grid-template-columns: repeat(4,minmax(0,1fr)); } .sm\\:flex-row { flex-direction: row; } }
@media (min-width: 1024px) { .lg\\:grid-cols-3 { grid-template-columns: repeat(3,minmax(0,1fr)); } .lg\\:grid-cols-4 { grid-template-columns: repeat(4,minmax(0,1fr)); } }
.animate-pulse { animation: pulse 2s cubic-bezier(.4,0,.6,1) infinite; }
@keyframes pulse { 50% { opacity: .5; } }
.overscroll-contain { overscroll-behavior: contain; }
.min-h-0 { min-height: 0; }
.shrink-0 { flex-shrink: 0; }
.gap-0\\.5 { gap: .125rem; }
.text-\\[10px\\] { font-size: 10px; }
.text-\\[11px\\] { font-size: 11px; }
.h-1\\.5 { height: .375rem; }
.w-1\\.5 { width: .375rem; }
.rounded-t-2xl { border-top-left-radius: 1rem; border-top-right-radius: 1rem; }
.border-gold\\/60 { border-color: rgba(212,175,55,.6); }
.bg-gold\\/5 { background: rgba(212,175,55,.05); }
.bg-gold\\/10 { background: rgba(212,175,55,.1); }
.bg-gold\\/20 { background: rgba(212,175,55,.2); }
.bg-surface-elevated\\/50 { background: rgba(28,28,31,.5); }
.border-gold\\/30 { border-color: rgba(212,175,55,.3); }
.help-card { transition: border-color .2s; }
.help-card:hover { border-color: rgba(212,175,55,.3); }
.prose-page h2 { color: var(--foreground); font-size: 1rem; font-weight: 600; margin-top: 1.5rem; }
.prose-page p, .prose-page li { color: var(--muted); line-height: 1.7; font-size: .875rem; }
.prose-page ol { list-style: decimal; padding-left: 1.25rem; }
.prose-page ul { list-style: disc; padding-left: 1.25rem; }