/* ==========================================================================
   app-native.css — native-app-only enhancement layer
   --------------------------------------------------------------------------
   Every rule is scoped under `html.is-native-app`, a class added ONLY when the
   page runs inside the Capacitor Android/iOS shell (see the detection script in
   index.html). On the regular website this file is inert — zero visual change.
   Goal: make the existing web UI feel like a native app (safe areas, big touch
   targets, tactile press feedback, no website chrome).
   ========================================================================== */

/* --- App-like body behaviour: no rubber-band, no tap highlight ----------- */
html.is-native-app,
html.is-native-app body {
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
}

/* Disable accidental text selection / long-press callout everywhere except
   real input fields (so forms still work normally). */
html.is-native-app *:not(input):not(textarea):not([contenteditable="true"]) {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

html.is-native-app body {
  -webkit-overflow-scrolling: touch;
}

/* --- Safe areas (notch / status bar / gesture bar) ----------------------- */
html.is-native-app .app-header {
  padding-top: max(8px, env(safe-area-inset-top));
}

html.is-native-app .landing-shell {
  padding-top: max(24px, env(safe-area-inset-top));
  padding-bottom: max(24px, env(safe-area-inset-bottom));
}

html.is-native-app main {
  /* Leave room for the floating bottom nav pill. */
  padding-bottom: calc(92px + env(safe-area-inset-bottom));
}

/* --- Touch-friendly PRIMARY actions (Material guideline ≥48dp) -----------
   Scoped to the big primary controls only. A blanket `button { min-height }`
   was inflating small icon/toolbar buttons (indicator badges, chart toolbar,
   pane toggles), making them oddly tall. */
html.is-native-app .landing-btn,
html.is-native-app .btn-buy,
html.is-native-app .btn-sell,
html.is-native-app .investment-modal__button {
  min-height: 48px;
}

html.is-native-app .landing-btn {
  padding: 14px 16px;
  font-size: 16px;
  border-radius: 12px;
}

/* Login credential fields: normalized, compact, single-line inputs.
   box-sizing:border-box is essential — without it min-height is added ON TOP of
   the padding (content-box), which blew the fields up to ~76px and looked weird.
   font-size 16px also prevents the WebView auto-zoom on input focus. */
html.is-native-app .landing-auth-card input {
  box-sizing: border-box;
  width: 100%;
  min-height: 46px;
  padding: 10px 12px;
  font-size: 16px;
  border-radius: 10px;
}

/* --- On-brand primary action (replace the generic web blue with mint) ---- */
html.is-native-app .landing-btn-primary,
html.is-native-app .buy-btn {
  background: linear-gradient(145deg, #38d9c4, #1fb3a0) !important;
  color: #04201c !important;
  border: none !important;
  font-weight: 700;
}

/* Active category chips (Invest + Portfolio): brand mint instead of web blue. */
html.is-native-app .asset-filter__button.active,
html.is-native-app .portfolio-filter__button.active {
  background: linear-gradient(145deg, #38d9c4, #1fb3a0) !important;
  color: #04201c !important;
  border-color: transparent !important;
}

/* Compact category chips — the global 48px min-height (meant for primary
   actions) made these filter pills look oversized/empty. */
html.is-native-app .asset-filter__button,
html.is-native-app .portfolio-filter__button {
  min-height: 0 !important;
  height: 34px;
  padding: 0 15px !important;
  font-size: 12.5px !important;
  font-weight: 600;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}

html.is-native-app .category-filter-shell {
  padding: 12px 12px 10px !important;
}

html.is-native-app .asset-filter,
html.is-native-app .portfolio-filter {
  gap: 8px !important;
}

/* --- Tactile feedback: hover lift doesn't fire on touch, use press scale - */
html.is-native-app .landing-btn:hover,
html.is-native-app .landing-btn-secondary:hover {
  transform: none;
}

html.is-native-app .landing-btn:active,
html.is-native-app button:active {
  transform: scale(0.97);
}

/* --- Never surface the developer auth-debug panel inside the app --------- */
html.is-native-app #auth-debug-panel {
  display: none !important;
}

/* ==========================================================================
   Bottom navigation — floating pill, 4 uniform tabs (app only)
   --------------------------------------------------------------------------
   Order: Trade · Invest · Portfolio · Lab. All tabs identical (icon + label);
   active = mint icon + white label. Re-styles the existing header .tabs;
   desktop website keeps tabs in the header.
   ========================================================================== */
html.is-native-app .center-group.tabs-row {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: max(12px, env(safe-area-inset-bottom));
  height: 68px;
  z-index: 9999;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: space-around;
  background: rgba(18, 24, 38, 0.88);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 30px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  overflow: visible !important;
}

html.is-native-app .center-group.tabs-row .tabs {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0;
  margin: 0;
  overflow: visible !important;
}

/* All nav items — uniform */
html.is-native-app .tabs .tab {
  flex: 1 1 0;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 68px;
  min-height: 68px;
  padding: 0;
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: #8d95a5;
  font-size: 12px !important;
  font-weight: 500;
  letter-spacing: 0.1px;
  line-height: 1;
  transition: color 0.2s ease !important;
  transform: none !important;
}

html.is-native-app .tabs .tab:active {
  transform: none !important;
}

/* Active regular item: white label + mint icon, no pill. */
html.is-native-app .tabs .tab.active {
  color: #ffffff !important;
  background: none !important;
  font-weight: 600;
}

/* Suppress the desktop blue active-pill on all items in-app. */
html.is-native-app .tabs .tab::after {
  display: none !important;
}

/* Notification count badge (.twl-badge child span, base styled in styles.css).
   In the app's bottom nav, sit it at the top-right of the icon. */
html.is-native-app .tabs .tab > .twl-badge {
  top: 6px;
  right: auto;
  left: calc(50% + 7px);
  box-shadow: 0 0 0 2px rgba(18, 24, 38, 0.95);
}

/* Glyph via mask-image (icon colour set explicitly, separate from label). */
html.is-native-app .tabs .tab::before {
  content: "";
  display: block;
  position: relative !important;
  z-index: 1;
  inset: auto !important;
  margin: 0 !important;
  width: 22px;
  height: 22px;
  background-color: #8d95a5;
  -webkit-mask: var(--tab-icon) center / contain no-repeat;
  mask: var(--tab-icon) center / contain no-repeat;
  /* Kill the desktop's decorative spin so icons are STATIC and upright. */
  animation: none !important;
  transform: none !important;
  transition: none !important;
}

html.is-native-app .tabs .tab.active::before {
  background-color: #2df7ca !important; /* mint icon when active */
}

/* icons */
html.is-native-app .tabs .tab[data-tab="trade"] {
  --tab-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 17 9 11 13 15 21 7'/%3E%3Cpolyline points='15 7 21 7 21 13'/%3E%3C/svg%3E");
}

html.is-native-app .tabs .tab[data-tab="assets"] {
  --tab-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.21 15.89A10 10 0 1 1 8 2.83'/%3E%3Cpath d='M22 12A10 10 0 0 0 12 2v10z'/%3E%3C/svg%3E");
}

html.is-native-app .tabs .tab[data-tab="portfolio"] {
  --tab-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='7' width='20' height='14' rx='2' ry='2'/%3E%3Cpath d='M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16'/%3E%3C/svg%3E");
}

html.is-native-app .tabs .tab[data-tab="performance"] {
  --tab-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 3h6'/%3E%3Cpath d='M10 3v6l-5.6 9.6A1 1 0 0 0 5.3 20h13.4a1 1 0 0 0 .9-1.4L14 9V3'/%3E%3Cpath d='M8 14h8'/%3E%3C/svg%3E");
}

/* In a fullscreen chart/positions panel (Trade tab only), hide the bottom bar
   for max space — the panel's own collapse button exits. Scoped to
   .trade-tab-active so a lingering fullscreen class never hides the nav on the
   Invest / Portfolio / Lab tabs. */
html.is-native-app body.trade-tab-active[class*="fullscreen"] .center-group.tabs-row {
  display: none !important;
}

html.is-native-app body.trade-tab-active[class*="fullscreen"] main {
  padding-bottom: env(safe-area-inset-bottom);
}

/* ==========================================================================
   Bottom-sheet dialogs (app only)
   --------------------------------------------------------------------------
   The investment/confirm/alert dialogs (.investment-modal family) become
   bottom sheets that slide up — the standard Android dialog pattern — instead
   of centred desktop modals.
   ========================================================================== */
html.is-native-app .investment-modal.visible {
  align-items: flex-end !important;
  justify-content: stretch !important;
  /* Above the floating bottom nav (z-index 9999) so the sheet + its content are
     never hidden behind the tabs. */
  z-index: 10001 !important;
}

html.is-native-app .investment-modal.visible .investment-modal__panel {
  width: 100% !important;
  max-width: 100% !important;
  max-height: 88vh !important;
  overflow-y: auto !important;
  border-radius: 22px 22px 0 0 !important;
  padding-bottom: calc(20px + env(safe-area-inset-bottom)) !important;
  animation: twl-sheet-up 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Grab handle at the top of the sheet. */
html.is-native-app .investment-modal.visible .investment-modal__panel::before {
  content: "";
  display: block;
  width: 40px;
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.28);
  margin: 0 auto 16px;
}

@keyframes twl-sheet-up {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

/* Primary dialog action on-brand (mint, not web blue). */
html.is-native-app .investment-modal__button--primary {
  background: linear-gradient(145deg, #38d9c4, #1fb3a0) !important;
  color: #04201c !important;
  border: none !important;
}

/* Active (fullscreen) expand/collapse button — brand mint, not the web blue. */
html.is-native-app .panel-expand-btn.active {
  background: linear-gradient(145deg, #38d9c4, #1fb3a0) !important;
  color: #04201c !important;
}

/* ==========================================================================
   Trade screen — more chart real estate, slimmer chrome (app only)
   ========================================================================== */
html.is-native-app .chart-section,
html.is-native-app .positions {
  padding: 12px !important;
}

/* NOTE: do NOT force a fixed height on #chart-container — it must stay
   `flex: 1` so it fills the chart-section, whose height the draggable splitter
   controls. A fixed height here breaks the drag-to-resize of the panels.
   The ResizeObserver in chart.js keeps the canvas filling the container. */

/* Normalize all chart-toolbar controls (< | timeframe | Indicators | Reset
   Stock) to one compact height — the old blanket button min-height made some
   48px and others ~35px, looking uneven. */
html.is-native-app .chart-toolbar .left-controls button,
html.is-native-app .chart-toolbar .left-controls select,
html.is-native-app .chart-toolbar .indicator-selector-btn,
html.is-native-app .chart-toolbar #reset-stock-btn {
  height: 34px !important;
  min-height: 34px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  font-size: 13px !important;
  display: inline-flex !important;
  align-items: center;
}

/* Compact indicator badges (SMA 14 / RSI 14), their 👁⚙✕ controls and the
   pane hide/show ▲ toggle — these were inflated to ~48px/62px. */
html.is-native-app .indicator-badge {
  padding: 4px 8px !important;
}

html.is-native-app .indicator-badge-btn,
html.is-native-app .indicator-stack-toggle {
  min-height: 0 !important;
  height: 26px !important;
  width: 26px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}

/* Positions panel header: float the compact O/C/A dropdown + fullscreen button
   onto the SAME line as the table header (Side | Qty | PnL | Action), at the
   far right — so they take no extra vertical row. The option text is shortened
   to O/C/A in app-native.js. */
html.is-native-app .positions {
  position: relative;
}

html.is-native-app .positions-filter-bar {
  position: absolute !important;
  top: 0 !important;
  right: 12px !important;
  margin: 0 !important;
  width: auto !important;
  min-height: 0 !important;
  gap: 6px !important;
  justify-content: flex-end !important;
  z-index: 6;
}

/* The floating O/C/A + fullscreen controls sit over the (rightmost) Action
   column header. Hide just that redundant label on mobile so they don't collide
   — the Action column itself and its per-row buttons stay. */
html.is-native-app .positions table thead th.col-action {
  color: transparent !important;
}

html.is-native-app .positions-filter-bar #positions-filter {
  width: auto !important;
  min-width: 0 !important;
  height: 34px !important;
  min-height: 34px !important;
  padding: 4px 8px !important;
  font-size: 13px !important;
  font-weight: 600;
  text-align: center;
}

html.is-native-app .positions-filter-bar #positions-expand-btn {
  margin-left: 0 !important;
  width: 34px !important;
  height: 34px !important;
  min-height: 34px !important;
}

/* Make the chart/positions drag separator obvious: taller hit area with a
   centred grab handle so users know it can be dragged up. */
html.is-native-app .trade-home-splitter {
  height: 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: row-resize;
  touch-action: none;
  background: #11161f !important;
}

html.is-native-app .trade-home-splitter::after {
  content: "" !important;
  display: block !important;
  position: static !important;
  inset: auto !important;
  width: 46px !important;
  height: 5px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.34) !important;
}

html.is-native-app .trade-home-splitter:active::after {
  background: #38d9c4 !important;
}

/* --- Uniform header (hamburger) menu items ------------------------------- */
html.is-native-app .header-menu-panel button,
html.is-native-app .header-menu-panel a {
  box-sizing: border-box;
  width: 100%;
  min-height: 44px !important;
  height: 44px;
  display: flex !important;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding: 0 14px !important;
  margin: 0 !important;
  font-size: 14px !important;
  font-weight: 600;
  text-align: left;
  text-decoration: none;
  border-radius: 10px;
  /* Uniform neutral background — kills the odd blue "Login" highlight so the
     menu reads as one tidy list (text colours, e.g. gold Leaderboard, stay). */
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  box-shadow: none !important;
}

/* The uniform `display: flex !important` above must NOT resurrect menu items the
   app deliberately hides via JS (renderHeaderAuthState sets style.display='none'
   on Login when signed in, and on Logout/Save/Profile when a guest). Without
   this, the inline hide is overridden and a logged-in user wrongly sees BOTH
   Login and Logout. Re-honour the JS-driven hidden state. */
html.is-native-app .header-menu-panel button[style*="display: none"],
html.is-native-app .header-menu-panel button[style*="display:none"],
html.is-native-app .header-menu-panel a[style*="display: none"],
html.is-native-app .header-menu-panel a[style*="display:none"] {
  display: none !important;
}

/* ==========================================================================
   On-screen keyboard handling (app only)
   --------------------------------------------------------------------------
   With Keyboard.resize = "none" the WebView never shrinks when the soft
   keyboard opens, so app-native.js measures the keyboard height (in CSS px via
   window.visualViewport) into --twl-kb-inset and sets html.twl-kb-open.
   These rules then confine the dialogs/login to the area ABOVE the keyboard,
   centred in it, so no field/content hides behind the keyboard.
   ========================================================================== */

/* Centred order dialog (trade module): pin it above the keyboard and let it
   scroll, instead of staying centred behind the keyboard. */
html.is-native-app.twl-kb-open .order-modal-backdrop {
  bottom: var(--twl-kb-inset, 0px) !important;
  align-items: flex-start !important;
  padding-top: 12px !important;
  overflow-y: auto !important;
}

html.is-native-app.twl-kb-open .order-modal-card {
  max-height: calc(100dvh - var(--twl-kb-inset, 0px) - 24px) !important;
}

/* Bottom-sheet dialogs (investment / confirm / alert): when the keyboard is open,
   confine the overlay to the area ABOVE the keyboard and CENTER the dialog within
   that area (not pinned to the very top or bottom) so it sits comfortably in the
   middle of the visible space. */
html.is-native-app.twl-kb-open .investment-modal.visible {
  top: 0 !important;
  bottom: var(--twl-kb-inset, 0px) !important;
  align-items: center !important;
}

html.is-native-app.twl-kb-open .investment-modal.visible .investment-modal__panel {
  /* The overlay already ends at the keyboard top, so 100% = the space above it.
     Short content (the invest amount sheet) is centered with Cancel/Confirm
     visible; taller content scrolls inside the panel. Round all corners since it
     is now a centered card, not a bottom sheet. */
  max-height: 100% !important;
  border-radius: 18px !important;
  animation: none !important; /* no slide-up when re-centering for the keyboard */
}

/* The floating bottom nav (Trade · Invest · Portfolio · Lab) is useless while the
   keyboard covers the bottom — hide it so it doesn't float oddly mid-screen. */
html.is-native-app.twl-kb-open .center-group.tabs-row {
  display: none !important;
}

/* SMART UX: keep the action buttons ALWAYS visible. When the keyboard is open
   the dialog body scrolls, but Cancel/Confirm (and Place Order) stay pinned to
   the bottom of the sheet — so after typing an amount the user can confirm
   immediately, without first dismissing the keyboard. The solid background
   masks the body content scrolling underneath. */
html.is-native-app.twl-kb-open .investment-modal.visible .investment-modal__actions {
  position: sticky;
  bottom: 0;
  margin-top: 12px;
  padding: 12px 0 4px;
  background: #111827; /* matches the panel's lower gradient stop */
  z-index: 3;
}

html.is-native-app.twl-kb-open .order-modal-card .order-primary {
  position: sticky;
  bottom: 0;
  margin-top: 12px;
  /* widen the button's own background to a full-width shelf so nothing peeks
     beside it as the form scrolls underneath. */
  box-shadow: 0 -12px 0 12px #1e2430;
  z-index: 3;
}

/* Login (landing) with the keyboard open: confine the shell to the area ABOVE
   the keyboard and CENTER the auth card in it (instead of the fields snapping to
   the extreme top), and hide the now-irrelevant chrome — brand logo, headline,
   and the About/FAQ/legal footer — so only the login form shows. */
html.is-native-app.twl-kb-open .landing-shell {
  min-height: 0 !important;
  height: calc(100dvh - var(--twl-kb-inset, 0px)) !important;
  padding-top: max(8px, env(safe-area-inset-top)) !important;
  padding-bottom: 8px !important;
  place-content: center !important;
  overflow-y: auto !important;
}

html.is-native-app.twl-kb-open .landing-brand,
html.is-native-app.twl-kb-open .landing-copy,
html.is-native-app.twl-kb-open .landing-footer,
html.is-native-app.twl-kb-open .landing-legal-note {
  display: none !important;
}

/* ==========================================================================
   Exit confirmation dialog (app only) — shown on hardware back at the root
   so the app never closes instantly without asking.
   ========================================================================== */
.twl-exit-confirm {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.twl-exit-confirm.visible {
  display: flex;
}

.twl-exit-confirm__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 6, 12, 0.72);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.twl-exit-confirm__panel {
  position: relative;
  width: min(360px, 100%);
  background: linear-gradient(180deg, #151b28 0%, #0f141f 100%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 16px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
  color: #f7f9ff;
  padding: 22px 20px 18px;
  font-family: 'Baloo 2', sans-serif;
  text-align: center;
}

.twl-exit-confirm__panel h3 {
  margin: 0 0 8px;
  font-size: 20px;
  font-weight: 600;
}

.twl-exit-confirm__panel p {
  margin: 0 0 18px;
  font-size: 14px;
  opacity: 0.85;
}

.twl-exit-confirm__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.twl-exit-confirm__btn {
  min-height: 46px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(31, 43, 69, 0.6);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

.twl-exit-confirm__btn--primary {
  border: none;
  background: linear-gradient(145deg, #38d9c4, #1fb3a0);
  color: #04201c;
}

.twl-exit-confirm__btn:active {
  transform: scale(0.97);
}