/* Phone-route interior chrome. Every selector requires html[data-route="phone"].
   Linked immediately after shells.css. Tablet and desktop rules stay there. */

html[data-route="phone"] .app-command-tray,
html[data-route="phone"] .app-command-tray-shell {
  display: flex !important;
  position: fixed !important;
  left: 0;
  right: 0;
  bottom: 0;
  box-sizing: border-box;
  height: var(--command-tray-pad) !important;
  z-index: 28000 !important;
  opacity: 1;
  background: var(--bg-elevated);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding-left: max(4px, var(--sal-fix, env(safe-area-inset-left, 0px)));
  padding-right: max(4px, var(--sar-fix, env(safe-area-inset-right, 0px)));
  padding-bottom: var(--sab-fix, env(safe-area-inset-bottom, 0px));
}
html[data-route="phone"] .top-bar {
  padding-left: max(8px, var(--sal-fix, env(safe-area-inset-left, 0px)));
  padding-right: max(8px, var(--sar-fix, env(safe-area-inset-right, 0px)));
}

html[data-route="phone"] body.chat-open:not(.tray-kb-hide):not(.keyboard-open):not(.th-copilot-overlay-open) .app-command-tray,
html[data-route="phone"] body.chat-open:not(.tray-kb-hide):not(.keyboard-open):not(.th-copilot-overlay-open) .app-command-tray-shell {
  display: flex !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

html[data-route="phone"] body.tray-kb-hide .app-command-tray,
html[data-route="phone"] body.tray-kb-hide .app-command-tray-shell,
html[data-route="phone"] body.keyboard-open .app-command-tray,
html[data-route="phone"] body.keyboard-open .app-command-tray-shell,
html[data-route="phone"] body.chat-open.tray-kb-hide .app-command-tray,
html[data-route="phone"] body.chat-open.tray-kb-hide .app-command-tray-shell,
html[data-route="phone"] body.chat-open.keyboard-open .app-command-tray,
html[data-route="phone"] body.chat-open.keyboard-open .app-command-tray-shell {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
  bottom: -200px !important;
}
html[data-route="phone"] #chat-fab,
html[data-route="phone"] .chat-toggle-fab {
  display: none !important;
  pointer-events: none !important;
}
html[data-route="phone"] #sidebar-mobile-trigger {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
}
html[data-route="phone"] #chat-drawer .chat-panel-header > #chat-close {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
}
html[data-route="phone"] #wl-mbar-menu,
html[data-route="phone"] #wl-mbar-sort,
html[data-route="phone"] #wl-mbar-refresh {
  min-width: 44px;
  min-height: 44px;
}

html[data-route="phone"] body.th-copilot-overlay-open .app-command-tray,
html[data-route="phone"] body.th-copilot-overlay-open .app-command-tray-shell {
  pointer-events: none !important;
  opacity: 0 !important;
}

html[data-route="phone"].oc-kb-overlay body:not(.chat-open) .main-content {
  padding-bottom: var(--oc-kb, 0px) !important;
}

html[data-route="phone"],
html[data-route="phone"] body {
  height: 100dvh;
  overflow: hidden;
}
html[data-route="phone"] .app-layout {
  height: 100dvh;
  min-height: 0;
  max-height: 100dvh;
}
html[data-route="phone"] .main-content {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
}
html[data-route="phone"] .content-wrapper {
  flex: 1 1 auto;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}
html[data-route="phone"] #content-left {
  flex: 1 1 auto;
  min-height: 0;
  max-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: calc(var(--command-tray-pad) + 8px);
}
html[data-route="phone"] body.chat-open #content-left {
  overflow: hidden;
}
/* Markets sizes an inner shell and locks #content-left. On the phone the
   page scroller is #content-left, and .mkt-shell grows with its content.
   Watchlist keeps its own !important lock. */
html[data-route="phone"] body:not(.chat-open) #content-left:has(> #markets-root) {
  overflow-x: hidden !important;
  overflow-y: auto !important;
}
html[data-route="phone"] #content-left > #markets-root.mkt-shell {
  height: auto !important;
  max-height: none !important;
  overflow-x: hidden !important;
  overflow-y: visible !important;
}
html[data-route="phone"] #markets-root.mkt-shell > .mkt-body {
  height: auto !important;
  max-height: none !important;
  flex: none !important;
  overflow: visible !important;
}
html[data-route="phone"] .chat-log,
html[data-route="phone"] .wl-table-wrap {
  overscroll-behavior: contain;
}

html[data-route="phone"] .content-right.mode-dock:not(.collapsed) {
  bottom: var(--command-tray-pad) !important;
  z-index: 29000 !important;
  height: 65dvh !important;
}
html[data-route="phone"][data-phone-short="1"] .content-right.mode-dock:not(.collapsed),
html[data-route="phone"] body.phone-short .content-right.mode-dock:not(.collapsed) {
  top: var(--sat-fix, env(safe-area-inset-top, 0px)) !important;
  bottom: var(--command-tray-pad) !important;
  height: auto !important;
  max-height: none !important;
  z-index: 29000 !important;
}
html[data-route="phone"].oc-kb-overlay body.chat-open .content-right.mode-dock:not(.collapsed) {
  bottom: var(--oc-kb, 0px) !important;
  height: 65dvh !important;
}
html[data-route="phone"].oc-kb-overlay[data-phone-short="1"] .content-right.mode-dock:not(.collapsed),
html[data-route="phone"].oc-kb-overlay body.phone-short.chat-open .content-right.mode-dock:not(.collapsed) {
  top: var(--sat-fix, env(safe-area-inset-top, 0px)) !important;
  bottom: var(--oc-kb, 0px) !important;
  height: auto !important;
  max-height: none !important;
}

@media (max-width: 319px) {
  html[data-route="phone"] .sidebar,
  html[data-route="phone"] .sidebar.collapsed {
    width: min(280px, calc(100vw - 44px)) !important;
  }
}