/* Keep tall cluster settings below the asset bar, with reachable scrolling. */
.trader-theme [data-floating-menu="chart-settings"] {
  box-sizing: border-box;
  background: var(--panel-bg, #1d2334) !important;
  overflow: auto !important;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.trader-theme .theme-sidebar:has([data-floating-menu="chart-settings"]) { z-index: 160 !important; }
.trader-theme [data-floating-menu="chart-settings"] > :first-child {
  position: sticky;
  top: 0;
  z-index: 4;
  height: auto !important;
  min-height: 44px;
  padding: 8px 42px 8px 16px !important;
  flex-wrap: wrap;
  gap: 8px;
}
.trader-theme .responsive-settings-close {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 36px;
  height: 36px;
  font-size: 24px;
  line-height: 1;
  color: inherit;
  border-radius: 4px;
  touch-action: manipulation;
}
.trader-theme .responsive-settings-close:focus-visible { outline: 2px solid #ff8a16; outline-offset: -2px; }
.trader-theme [data-floating-menu="chart-settings"] > .grid {
  grid-template-columns: minmax(105px, 38%) minmax(0, 1fr) !important;
  gap: 12px !important;
}
.trader-theme [data-floating-menu="chart-settings"] > .grid > div { min-width: 0; }

/* One phone layout, instead of hard-coded chart and order-form heights.
   Navigation participates in layout, so it cannot cover the order buttons. */
@media (max-width: 700px), (max-width: 1000px) and (pointer: coarse) and (max-height: 600px) {
  .trader-theme {
    zoom: 1 !important;
    box-sizing: border-box;
    height: 100vh !important;
    height: min(100dvh, var(--trade-visible-height, 100dvh)) !important;
    min-height: 0 !important;
    margin-top: 0 !important;
    overflow: hidden !important;
  }
  .trader-theme > .theme-topbar { flex: 0 0 58px; height: 58px !important; min-height: 58px; }
  .trader-theme .trader-main-shell {
    position: relative;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: minmax(80px, 1fr) auto auto !important;
    flex: 1 1 0 !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    align-content: stretch !important;
  }
  .trader-theme .trader-main-shell > .theme-sidebar {
    position: absolute !important;
    inset: 0 auto auto 0 !important;
    width: 0 !important;
    min-width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    background: transparent !important;
    border: 0 !important;
    overflow: visible !important;
  }
  .trader-theme .theme-sidebar .sidebar-volume-item { display: none !important; }
  .trader-theme .trader-main-shell > .chart-workspace-grid,
  .trader-theme .chart-workspace-grid > div,
  .trader-theme .chart-pane-responsive {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    flex: 1 1 0 !important;
    overflow: hidden !important;
  }
  .trader-theme .trader-main-shell > .trade-panel-volume,
  .trader-theme .trader-main-shell > .new-options-panel {
    position: relative !important;
    inset: auto !important;
    grid-column: 1 !important;
    grid-row: 2 !important;
    box-sizing: border-box;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: min(52dvh, 330px) !important;
    margin: 0 !important;
    padding: 6px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    border-radius: 0 !important;
    align-self: stretch !important;
  }
  .trader-theme .trade-panel-volume > .space-y-2 {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
    width: 100%;
  }
  .trader-theme .trade-panel-volume .trade-investment-card,
  .trader-theme .trade-panel-volume .trade-expiry-card {
    grid-column: auto !important;
    grid-row: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
  }
  .trader-theme .trade-panel-volume .trade-investment-card { grid-column: 1 !important; }
  .trader-theme .trade-panel-volume .trade-expiry-card { grid-column: 2 !important; }
  .trader-theme .trade-panel-volume .new-option-select { margin: 0 0 4px; font-size: 10px; }
  .trader-theme .trade-panel-volume .new-option-select select { margin-top: 2px; padding: 4px; min-height: 30px; }
  .trader-theme .trade-panel-volume .trade-mode-switch { margin-bottom: 4px !important; }
  .trader-theme .trade-panel-volume .trade-profit-volume { display: none !important; }
  .trader-theme .trade-panel-volume .trade-up,
  .trader-theme .trade-panel-volume .trade-down {
    grid-row: 2 !important;
    position: relative !important;
    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 54px !important;
    min-height: 54px !important;
    margin: 0 !important;
    padding: 4px 8px !important;
    justify-content: center !important;
    gap: 6px !important;
  }
  .trader-theme .trade-panel-volume .trade-up { grid-column: 1 !important; }
  .trader-theme .trade-panel-volume .trade-down { grid-column: 2 !important; }
  .trader-theme .trade-panel-volume .trade-action-copy strong { font-size: 16px !important; line-height: 18px !important; }
  .trader-theme .trade-panel-volume .trade-direction-icon { width: 30px !important; height: 30px !important; }
  .trader-theme .trade-panel-volume .trade-action-code { display: none !important; }
  .trader-theme .trade-panel-volume .trade-action-payout { display: block !important; font-size: 12px; }
  .trader-theme .mobile-bottom-nav {
    position: relative !important;
    inset: auto !important;
    grid-column: 1 !important;
    grid-row: 3 !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    box-sizing: border-box;
    height: calc(60px + env(safe-area-inset-bottom, 0px)) !important;
    min-height: 60px !important;
    padding: 4px 4px calc(4px + env(safe-area-inset-bottom, 0px)) !important;
    margin: 0 !important;
  }
  .trader-theme .theme-footer { display: none !important; }
  .trader-theme .trade-investment-value input,
  .trader-theme .new-options-panel input { font-size: 16px !important; }
  .trader-theme.mobile-amount-editing .trader-main-shell {
    grid-template-rows: minmax(40px, 1fr) auto !important;
  }
  .trader-theme.mobile-amount-editing .mobile-bottom-nav { display: none !important; }
  .trader-theme [data-floating-menu="left-tools"] {
    position: absolute !important;
    top: var(--mobile-tools-top, 0px) !important;
    bottom: auto !important;
    left: var(--mobile-tools-left, 8px) !important;
    z-index: 121 !important;
    visibility: hidden;
    display: flex !important;
    flex-direction: column-reverse !important;
    align-items: flex-start !important;
    gap: 4px !important;
  }
  .trader-theme.mobile-tools-anchored [data-floating-menu="left-tools"] { visibility: visible; }
  .trader-theme .mobile-chart-tools-toggle:not(.hidden) {
    display: grid;
    place-items: center;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    border: 1px solid var(--theme-grid, #46536a);
    border-radius: 6px;
    color: var(--theme-text, #f2f5fa);
    background: var(--panel-bg, #1d2334);
    font-size: 16px !important;
    line-height: 1;
  }
  .trader-theme [data-floating-menu="left-tools"] > .mobile-chart-tools-options {
    display: none !important;
    flex-direction: column !important;
    width: 32px !important;
    gap: 4px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    max-height: var(--mobile-tools-menu-height, 180px) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }
  .trader-theme [data-floating-menu="left-tools"] > .mobile-chart-tools-options-open:not(.hidden) { display: flex !important; }
  .trader-theme [data-floating-menu="left-tools"] .sidebar-tool-button {
    flex-shrink: 0;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
  }
  .trader-theme .forma-live-deposit {
    box-sizing: border-box;
    padding-left: max(14px, env(safe-area-inset-left, 0px));
    padding-right: max(14px, env(safe-area-inset-right, 0px));
    padding-bottom: max(40px, calc(env(safe-area-inset-bottom, 0px) + 24px));
    scroll-padding-block: 24px;
    overscroll-behavior: contain;
  }
  .trader-theme .forma-live-deposit .forma-close { min-width: 44px; min-height: 44px; }
  .trader-theme .forma-live-deposit .forma-close {
    position: fixed;
    top: calc(70px + env(safe-area-inset-top, 0px));
    right: max(12px, env(safe-area-inset-right, 0px));
    z-index: 2;
  }
  .trader-theme [data-floating-menu="chart-settings"] { max-width: calc(100vw - 16px); }
  .trader-theme .trade-amount-menu,
  .trader-theme .expiry-menu-volume {
    position: fixed !important;
    inset: 66px 8px auto 8px !important;
    width: auto !important;
    max-width: none !important;
    max-height: calc(100dvh - 150px) !important;
    overflow: auto !important;
    z-index: 150 !important;
  }
}

/* A low, wide phone needs horizontal space, not a clipped three-row stack. */
@media (min-width: 480px) and (max-width: 700px) and (max-height: 500px), (min-width: 480px) and (max-width: 1000px) and (pointer: coarse) and (max-height: 500px) {
  .trader-theme .trader-main-shell {
    grid-template-columns: minmax(0, 1fr) minmax(220px, 38%) !important;
    grid-template-rows: minmax(80px, 1fr) auto !important;
  }
  .trader-theme .trader-main-shell > .chart-workspace-grid { grid-column: 1 !important; grid-row: 1 !important; }
  .trader-theme .trader-main-shell > .trade-panel-volume,
  .trader-theme .trader-main-shell > .new-options-panel {
    grid-column: 2 !important;
    grid-row: 1 !important;
    height: 100% !important;
    max-height: 100% !important;
    min-width: 0 !important;
  }
  .trader-theme .mobile-bottom-nav { grid-column: 1 / -1 !important; grid-row: 2 !important; }
}

/* Leave both actions reachable even when the phone is held horizontally. */
@media (max-width: 1000px) and (pointer: coarse) and (max-height: 600px) {
  .trader-theme .trade-panel-volume .trade-panel-card { padding: 4px !important; }
  .trader-theme .trade-panel-volume .trade-field-label { min-height: 20px !important; height: 20px !important; }
  .trader-theme .trade-panel-volume .trade-mode-switch { min-height: 30px !important; }
  .trader-theme .trade-panel-volume .trade-mode-button { min-height: 26px !important; padding: 2px !important; }
  .trader-theme .trade-panel-volume .new-option-select { font-size: 0; line-height: 0; }
  .trader-theme .trade-panel-volume .new-option-select select { font-size: 11px; line-height: 18px; height: 30px; }
  .trader-theme .trade-panel-volume .trade-expiry-value { height: 38px !important; padding-block: 2px !important; margin-top: 0 !important; }
}

/* Fit the entire indicator catalog below the asset bar; only its body scrolls. */
.trader-theme [data-floating-menu="indicator-catalog"] {
  display:flex;flex-direction:column;box-sizing:border-box;
  overflow:hidden!important;
}
.trader-theme [data-floating-menu="indicator-catalog"] > .tool-volume-header {
  flex:0 0 auto;min-height:48px;
}
.trader-theme [data-floating-menu="indicator-catalog"] > .indicator-catalog-body {
  flex:1 1 auto;min-height:0!important;max-height:none!important;
  overflow-y:auto;overscroll-behavior:contain;
}

/* Each mobile multichart card must contain both trade directions. */
@media (max-width:700px), (max-width:1000px) and (pointer:coarse) and (max-height:600px) {
  .trader-theme .trader-main-shell > .chart-workspace-grid:has(.chart-local-order-panel) {
    display:flex!important;flex-direction:column!important;gap:4px;
    overflow-y:auto!important;overflow-x:hidden!important;
    overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  }
  .trader-theme .chart-workspace-grid:has(.chart-local-order-panel) > div {
    flex:0 0 auto!important;height:max(228px, calc((100% - 4px) / 2))!important;
    min-height:228px!important;grid-row:auto!important;grid-column:auto!important;
  }
  .trader-theme .chart-workspace-grid:has(.chart-local-order-panel) .chart-pane-responsive[data-drawing-active="false"] { touch-action:pan-y!important; }
  .trader-theme .chart-local-order-panel {
    top:4px!important;right:4px!important;bottom:auto!important;
    display:grid;grid-template-rows:38px 46px 36px 40px 40px;
    gap:3px;width:88px!important;padding:4px!important;box-sizing:border-box;
  }
  .trader-theme .chart-local-order-field {margin:0!important;font-size:8px;min-height:0;}
  .trader-theme .chart-local-order-field > span:first-child {margin-bottom:2px;line-height:10px;}
  .trader-theme .chart-local-order-input,
  .trader-theme .chart-local-order-field select {height:24px!important;padding:0 4px!important;}
  .trader-theme .chart-local-order-profit {min-height:0!important;line-height:1;}
  .trader-theme .chart-local-order-profit span {font-size:8px;}
  .trader-theme .chart-local-order-profit strong {font-size:18px!important;}
  .trader-theme .chart-local-order-profit b {font-size:9px;}
  .trader-theme .chart-local-order-panel > button {height:40px!important;min-height:40px;margin:0!important;font-size:10px;}
}

/* Positions follow the actual chart bounds instead of fixed sidebar widths. */
.trader-theme [data-floating-menu="portfolio-panel"] {
  left:var(--portfolio-left,44px)!important;right:var(--portfolio-right,166px)!important;
  width:auto!important;min-width:0;box-sizing:border-box;overflow:hidden;
}
.trader-theme .portfolio-panel-header {flex:0 0 32px;min-width:0;width:100%;box-sizing:border-box;}
.trader-theme .portfolio-panel-header > button {flex-shrink:0;white-space:nowrap;}
.trader-theme .portfolio-panel-toggle {margin-left:auto;}
@media (max-width:700px), (max-width:1000px) and (pointer:coarse) and (max-height:600px) {
  .trader-theme [data-floating-menu="portfolio-panel"] {left:0!important;right:0!important;}
  .trader-theme .portfolio-panel-header > button {padding-left:6px!important;padding-right:6px!important;font-size:10px;}
  .trader-theme [data-floating-menu="portfolio-panel"][data-collapsed="true"] {
    inset:auto 0 64px 0!important;height:32px!important;max-height:32px!important;
  }
}