/* BizPilot Owner — tablet portrait sidebar override v1
   Scope: STAGING Owner UI presentation only.
   Phone <=650px keeps the existing mobile navigation.
   Desktop and tablet landscape keep the existing full sidebar.

   On rotation to portrait the sidebar collapses to an icon rail. The labels
   are clipped rather than removed, so the link text stays in the accessibility
   tree and every route keeps the same name for assistive technology.
   Selectors carry html body #app .sidebar because owner-customer-crm-ads.css
   already styles this exact range at that specificity; matching it is what
   makes the rail win the cascade instead of depending on file order.
   The width trio is not redundant with the grid column. The served shell
   pins html body #app .sidebar{width:240px;min-width:240px;max-width:240px}
   over this same range, so narrowing the column alone left the sidebar
   240px wide, overflowing its own 72px track and covering the page beside
   it. Releasing the pin is what actually collapses the rail. */
@media screen and (min-width:651px) and (max-width:1100px) and (orientation:portrait){
  html body #app .shell{grid-template-columns:72px minmax(0,1fr)!important}
  html body #app .sidebar{width:72px!important;min-width:72px!important;max-width:72px!important;padding:14px 8px 16px!important;overflow-x:hidden!important;overflow-y:auto!important}
  html body #app .sidebar .logoBox{justify-content:center!important;padding:4px 0 12px!important}
  html body #app .sidebar .logoText,html body #app .sidebar .promo{display:none!important}
  html body #app .sidebar .bp-logo{width:40px!important;height:40px!important}
  html body #app .sidebar .nav{gap:4px!important}
  html body #app .sidebar .nav .owner-nav-link{grid-template-columns:1fr!important;gap:0!important;min-height:48px!important;padding:10px 0!important;margin:0!important;justify-items:center!important}
  html body #app .sidebar .owner-nav-copy{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
  html body #app .sidebar .owner-nav-arrow,html body #app .sidebar .nav .owner-nav-section{display:none!important}
  html body #app .sidebar .owner-nav-icon{width:24px!important;height:24px!important;margin:0!important}
}

/* BizPilot Owner AI Chat — composer reachability in tablet portrait.
   Below 820px the chat page turns the document into a scroller and sizes the
   chat column to 100dvh-205px. The column then starts below the hero and the
   stat cards, so its bottom — the message input and the send button — lands
   past the fold and the Owner has to scroll before typing, and again after the
   keyboard opens. Desktop and tablet landscape never hit this because .main is
   already a 100dvh flex column that does not scroll.
   Portrait gets that same treatment rather than a new layout: nothing is
   hidden, nothing is repositioned, the history panel keeps its place and
   becomes scrollable within the remaining space.

   Every rule here is scoped to the chat route. #ownerAiChat lives in .content
   on every page and the router hides it off-route with .owner-route-hidden;
   an unscoped #app #ownerAiChat.owner-ai-chat-page rule outranks that class on
   specificity and would put the chat page on top of whatever page the Owner
   actually opened. */
@media screen and (min-width:651px) and (max-width:1100px) and (orientation:portrait){
  html[data-owner-page="chat"],html[data-owner-page="chat"] body{height:100dvh!important;overflow:hidden!important}
  html[data-owner-page="chat"] #app .main{display:flex!important;flex-direction:column!important;height:100dvh!important;min-height:0!important;overflow:hidden!important}
  html[data-owner-page="chat"] #app .content{display:flex!important;flex-direction:column!important;flex:1 1 auto!important;min-height:0!important;overflow:hidden!important}
  html[data-owner-page="chat"] #app #ownerAiChat.owner-ai-chat-page{display:flex!important;flex-direction:column!important;flex:1 1 auto!important;min-height:0!important}
  html[data-owner-page="chat"] #app #ownerAiChat .owner-ai-chat-layout{display:grid!important;grid-template-columns:1fr!important;grid-template-rows:minmax(0,1fr) auto!important;flex:1 1 auto!important;min-height:0!important}
  html[data-owner-page="chat"] #app #ownerAiChat .owner-ai-chat-center{height:auto!important;min-height:0!important;max-height:none!important}
  html[data-owner-page="chat"] #app #ownerAiChat .owner-ai-chat-history-panel{min-height:0!important;max-height:30dvh!important;overflow-y:auto!important}
}