/* Phone layout only; chart data, transforms and engine state are unchanged. */
#mobileNav,#mobileShade{display:none}
#mobileMore{background:var(--surface);color:var(--ink);direction:rtl}
#mobileMore .mobile-more-head{display:flex;align-items:center;justify-content:space-between}
#mobileMore .mobile-more-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}
#mobileMore button{min-height:44px}
@media(max-width:780px){
 html,body{height:100%;height:100dvh;width:100%;overflow:hidden}
 body{--mobile-header:48px;--mobile-footer:60px}
 header.professionalTopbar{height:calc(var(--mobile-header) + env(safe-area-inset-top,0px));min-height:48px;padding:env(safe-area-inset-top,0px) 6px 0;gap:4px;overflow:visible}
 body>main{height:calc(100% - var(--mobile-header) - var(--mobile-footer) - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));width:100%;min-height:0}
 .professionalTopbar .top-instruments{min-width:0;gap:2px}
 .professionalTopbar #topSymbol{min-width:50px;max-width:none;flex:1;padding:6px;font-size:14px;height:44px}
 .professionalTopbar #topTimeframes,.professionalTopbar #topStyles,.professionalTopbar #topStyleMenu,.professionalTopbar .brand{display:none}
 .professionalTopbar #topIntervals{width:52px;min-width:52px;height:44px;font-size:13px;color:var(--ink)}
 .professionalTopbar .top-actions{gap:0}
 .professionalTopbar .top-actions>button,.professionalTopbar .top-actions>#language{display:none!important}
 .professionalTopbar .top-actions>#undo,.professionalTopbar .top-actions>#redo{display:inline-flex!important;width:38px;height:44px;padding:6px;align-items:center;justify-content:center}
 .professionalTopbar .top-actions>#save{display:inline-flex!important;height:40px;min-width:48px;padding:6px 8px;font-size:12px;align-items:center;justify-content:center}
 #mobileNav{position:fixed;inset:auto 0 0;z-index:60;display:flex;height:calc(var(--mobile-footer) + env(safe-area-inset-bottom,0px));padding:3px 4px calc(3px + env(safe-area-inset-bottom,0px));background:var(--surface);color:var(--ink);border-top:1px solid var(--line);direction:rtl}
 #mobileNav button{flex:1;min-width:0;min-height:48px;border:0;background:transparent;color:var(--sub);padding:3px 1px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:11px;touch-action:manipulation}
 #mobileNav button.active{color:var(--ink);background:var(--focus);border-radius:9px}
 #mobileNav .ui-icon{width:21px;height:21px}
 body>main>.rail{position:absolute;top:0;bottom:0;left:0;width:62px;display:none;z-index:66;gap:3px;background:var(--surface);box-shadow:5px 0 25px var(--shadow);padding:5px 7px;overscroll-behavior:contain}
 body.mobile-tools>main>.rail{display:flex}
 .rail button{width:46px;height:44px;min-height:44px}
 body.mobile-tools #mobileShade{display:block;position:absolute;inset:0;z-index:65;background:#0004;border:0;border-radius:0;padding:0}
 .watchlist-rail{display:none}
 #watchlist.watchlist{position:absolute;inset:0;width:100%;max-width:none;border:0;box-shadow:none;z-index:62;background:var(--surface)}
 #watchlist .wl-head{height:52px;min-height:52px;padding:4px 10px}
 #watchlist .wl-head>button{min-width:44px;height:44px;font-size:22px}
 #watchlist #wlPicker{font-size:16px}
 #watchlist .wl-search input{font-size:16px;min-height:44px}
 #watchlist .wl-open{height:46px;min-height:46px}
 #watchlist .wl-row{min-height:46px}
 #watchlist .wl-price,#watchlist .wl-change,#watchlist .wl-percent,#watchlist .wl-symbol{font-size:13px}
 #watchlist .wl-star{opacity:1;width:32px;font-size:20px}
 #watchlist .wl-bottom button{min-height:44px;font-size:13px;padding:7px 10px}
 #panel,#panel.researchPanel{position:absolute;inset:0;width:100%;max-width:none;z-index:63;overflow:auto;overscroll-behavior:contain}
 #panel .panelHead{padding:8px 14px;background:var(--surface)}
 #panel .panelHead button{min-width:44px;min-height:44px}
 #panel section{padding:14px}
 dialog[open]{position:fixed;inset:auto 0 0;margin:0;width:100%;max-width:100%;max-height:calc(100dvh - 12px);overflow:auto;border-radius:16px 16px 0 0;box-sizing:border-box;padding:16px 12px calc(16px + env(safe-area-inset-bottom,0px));overscroll-behavior:contain}
 #twelveDialog,#wlDialog,#topSymbolDialog,#goToDateDialog,#mobileMore{width:100%;max-width:100%;max-height:calc(100dvh - 12px);padding:16px 12px calc(16px + env(safe-area-inset-bottom,0px))}
 dialog :is(input:not([type=checkbox]):not([type=color]):not([type=range]),select,textarea){font-size:16px;min-height:44px;min-width:0}
 dialog button,#panel button,#leftToolMenu button,#topbarPopup button{min-height:44px}
 #tdSearch{width:100%;flex:1 1 100%;min-width:0}
 #tdResults{max-height:43dvh;overscroll-behavior:contain}
 .td-instrument{grid-template-columns:minmax(0,1fr) 74px 54px;gap:6px}
 .td-instrument strong,.td-instrument small{overflow-wrap:anywhere}
 #chartSettingsDialog{height:calc(100dvh - 12px);max-height:calc(100dvh - 12px);max-width:100%;width:100%;padding:0}
 #chartSettingsDialog .cs-body{flex-direction:column}
 #chartSettingsDialog .cs-body nav{display:flex;width:100%;max-height:58px;min-height:58px;overflow-x:auto;overflow-y:hidden;border:0;border-bottom:1px solid var(--line);padding:4px;gap:4px}
 #chartSettingsDialog .cs-body nav button{width:auto;flex:none;margin:0;padding:6px 10px}
 #chartSettingsDialog .cs-body nav button span{font-size:12px}
 #chartSettingsDialog .cs-content{padding:0 12px 12px;overscroll-behavior:contain}
 #chartSettingsDialog .cs-heading{padding:8px 12px}
 #chartSettingsDialog .cs-footer{padding-bottom:calc(8px + env(safe-area-inset-bottom,0px))}
 #chartHeading{top:8px;left:8px;right:8px;gap:6px;font-size:10px}
 #chartHeading b{font-size:12px}
 #twelveQuoteBar{left:8px;right:8px;top:32px;max-width:none;gap:4px;padding:2px 5px}
 #twelveQuoteBar button{min-height:32px;padding:3px 5px}
 #tdFeedState{min-width:0;max-width:100px;flex:1}
 #chartNavigation{opacity:1;bottom:76px;gap:0;padding:2px}
 #chartNavigation button{width:40px;height:40px}
 #persistenceStatus{left:6px;right:6px;bottom:35px;max-width:none;padding:3px 6px;gap:5px}
 #saveStatus{max-width:55vw;overflow:hidden}
 #bottomTimezone{display:none}
 #chartBottomBar{overflow:hidden}
 #bottomRanges{margin:0;flex:1}
 #empty{padding:16px;text-align:center}
 #empty h1{font-size:22px}
 #empty p{font-size:13px;line-height:1.7}
 #empty .emptyMark{width:68px;height:68px;font-size:48px;margin-bottom:10px}
 #empty button{min-height:46px}
 #toast{position:fixed;bottom:calc(70px + env(safe-area-inset-bottom,0px));max-width:94vw;z-index:120}
 #leftToolMenu{max-width:calc(100vw - 74px)}
 #copyPopover,#drawingPopover{max-width:calc(100% - 12px);max-height:calc(100% - 20px);overflow:auto}
}

/* Only the chart owns gestures; forms and tool menus keep native scrolling. */
#chart{touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
@media(max-width:780px){
 #manualFlowBar{left:6px;right:6px;bottom:34px;max-width:none;flex-wrap:nowrap;overflow-x:auto;overscroll-behavior:contain;padding:4px;gap:4px}
 #manualHint{display:none}
 #manualFlowBar button{min-height:40px;flex:none;padding:6px 9px}
 #drawingFavorites button{min-width:40px;height:40px}
 #drawingFavoritesHandle{min-width:24px!important}
 #drawingStatus,#cutStatus{top:76px;left:8px;max-width:calc(100% - 90px)}
}

/* On phones, the chart stays clear; live controls remain in the More sheet. */
#mobileAnalysis{background:var(--surface);color:var(--ink);direction:rtl}
#mobileAnalysis .mobile-more-head{display:flex;align-items:center;justify-content:space-between}
@media(max-width:780px){
 #chartHeading,#drawingFavorites,#persistenceStatus,#copyLegend{display:none!important}
 #workspace :is(#twelveQuoteBar,#manualFlowBar,#workflowBadge,#workflowDetails,#abPanel,#abBadge,#chartNavigation){display:none!important}
 #chart{bottom:18px}
 #chartBottomBar{height:18px;min-height:18px;justify-content:flex-end;border:0;background:transparent!important;padding:0 5px;font-size:9px;pointer-events:none}
 #chartBottomBar>:not(#chartAttribution){display:none!important}
 #chartAttribution{pointer-events:auto;font-size:9px;max-width:none!important;white-space:nowrap}
 #mobileAnalysis{width:100%;max-width:100%;padding:12px 12px calc(12px + env(safe-area-inset-bottom,0px))}
 #mobileAnalysisContent{display:flex;flex-direction:column;gap:12px;margin-top:12px}
 #mobileAnalysis :is(#twelveQuoteBar,#manualFlowBar,#workflowBadge,#workflowDetails,#abPanel,#abBadge,#chartNavigation,#bottomRanges){position:static!important;inset:auto!important;transform:none!important;max-width:none!important;width:100%!important;margin:0;box-shadow:none;opacity:1}
 #mobileAnalysis :is(#workflowBadge,#workflowDetails,#abPanel,#abBadge):not([hidden]){display:block!important;font-size:12px}
 #mobileAnalysis #workflowBadge:not([hidden]){display:flex!important}
 #mobileAnalysis #manualFlowBar:not([hidden]){display:grid!important;grid-template-columns:1fr 1fr;overflow:visible;white-space:normal}
 #mobileAnalysis #manualHint{display:block;grid-column:1/-1;max-width:none;white-space:normal;font-size:12px;line-height:1.6}
 #mobileAnalysis :is(#twelveQuoteBar,#chartNavigation,#bottomRanges):not([hidden]){display:flex!important;flex-wrap:wrap;gap:6px}
 #mobileAnalysis button{min-height:44px;font-size:12px}
 #mobileAnalysis #chartNavigation button{width:44px;height:44px}
 #mobileAnalysis #bottomRanges button{min-width:44px}
 #mobileEditBounds{width:100%;margin-top:12px}
}