/* NovaAI V69 — final mobile portability and touch reliability layer. */
:root{--v69-vh:100dvh;--v69-safe-top:env(safe-area-inset-top,0px);--v69-safe-bottom:env(safe-area-inset-bottom,0px);--v69-safe-left:env(safe-area-inset-left,0px);--v69-safe-right:env(safe-area-inset-right,0px)}
html,body{max-width:100%;overflow-x:clip!important}
:where(.app-shell,.chat-main,.chat-scroll,.messages,.message,.message-content,.composer-wrap,.composer,.composer-bottom,.composer-tools,.sidebar,.nova-v4-modal,.settings-dialog,.nova-context-panel){min-width:0!important}
:where(img,video,svg,canvas,pre,code,table){max-width:100%}
pre{overflow:auto;-webkit-overflow-scrolling:touch}

/* Dialogs and advanced tools must be usable on a phone and with the keyboard open. */
.nova-v4-modal,.settings-dialog{box-sizing:border-box;max-width:calc(100vw - 20px)!important}
.nova-v4-modal .nova-v4-body,.settings-dialog form{overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.nova-v4-close,.settings-dialog .icon-btn{min-width:44px!important;min-height:44px!important}

@media(max-width:820px){
  body:has(.app-shell){height:var(--v69-vh)!important;min-height:0!important;overflow:hidden!important}
  body:has(.app-shell) .app-shell{height:var(--v69-vh)!important;min-height:0!important;grid-template-columns:minmax(0,1fr)!important}
  body:has(.app-shell) .chat-main{height:var(--v69-vh)!important;min-height:0!important;grid-template-rows:auto minmax(0,1fr) auto!important}

  /* Compact but complete header. */
  body:has(.app-shell) .chat-header{height:auto!important;min-height:58px!important;padding:max(8px,var(--v69-safe-top)) max(10px,var(--v69-safe-right)) 8px max(10px,var(--v69-safe-left))!important;gap:8px!important;flex-wrap:nowrap!important}
  body:has(.app-shell) .header-left{min-width:0!important;gap:8px!important;flex:1 1 auto!important}
  body:has(.app-shell) .title-row{min-width:0!important;gap:6px!important}
  body:has(.app-shell) .title-row h1{font-size:16px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
  body:has(.app-shell) .beta{font-size:7px!important;padding:2px 5px!important}
  body:has(.app-shell) .header-left p{font-size:9px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;max-width:42vw!important}
  body:has(.app-shell) .header-actions{gap:6px!important;flex:0 0 auto!important}
  body:has(.app-shell) .engine-pill{padding:7px 8px!important;max-width:96px!important;overflow:hidden!important}
  body:has(.app-shell) .engine-pill span:last-child{display:none!important}
  body:has(.app-shell) .header-actions .icon-btn{width:42px!important;height:42px!important;min-width:42px!important;min-height:42px!important}

  /* Sidebar becomes a touch-friendly drawer, not a desktop column squeezed onto mobile. */
  body:has(.app-shell) .sidebar{width:min(86vw,330px)!important;max-width:330px!important;height:var(--v69-vh)!important;padding:max(12px,var(--v69-safe-top)) max(12px,var(--v69-safe-right)) max(12px,var(--v69-safe-bottom)) max(12px,var(--v69-safe-left))!important;overflow:hidden!important;box-shadow:24px 0 70px rgba(0,0,0,.58)!important}
  body:has(.app-shell) .sidebar-section{margin-top:14px!important;min-height:0!important}
  body:has(.app-shell) .conversation-list{max-height:none!important;min-height:80px!important;overflow-y:auto!important;-webkit-overflow-scrolling:touch!important;padding-bottom:6px!important}
  body:has(.app-shell) .conversation-item,body:has(.app-shell) .side-action,body:has(.app-shell) .new-chat{min-height:44px!important}
  body:has(.app-shell) .sidebar-bottom{max-height:50vh!important;overflow-y:auto!important;-webkit-overflow-scrolling:touch!important;padding-bottom:max(4px,var(--v69-safe-bottom))!important}

  body:has(.app-shell) .chat-scroll{min-height:0!important;padding:12px max(10px,var(--v69-safe-right)) 20px max(10px,var(--v69-safe-left))!important;overflow-y:auto!important;overflow-x:hidden!important;scrollbar-gutter:stable both-edges;-webkit-overflow-scrolling:touch!important}
  body:has(.app-shell) .messages{width:min(100%,820px)!important;padding-bottom:24px!important}
  body:has(.app-shell) .message{width:100%!important;max-width:100%!important}
  body:has(.app-shell) .message-content{overflow-wrap:break-word!important;word-break:normal!important}
  body:has(.app-shell) .message-content pre,body:has(.app-shell) .message-content table{max-width:100%!important;overflow:auto!important}

  /* Composer stays usable above phone browser bars and virtual keyboard. */
  body:has(.app-shell) .composer-wrap{padding:8px max(8px,var(--v69-safe-right)) max(8px,var(--v69-safe-bottom)) max(8px,var(--v69-safe-left))!important;background:linear-gradient(180deg,rgba(4,11,20,0),rgba(4,11,20,.96) 16%)!important}
  body:has(.app-shell) .composer{padding:10px!important;border-radius:16px!important;max-height:min(48dvh,360px)!important;overflow:auto!important;-webkit-overflow-scrolling:touch!important}
  body:has(.app-shell) #promptInput{font-size:16px!important;line-height:1.45!important;min-height:44px!important;max-height:22dvh!important}
  body:has(.app-shell) .composer-tools{gap:6px!important;display:flex!important;flex-wrap:wrap!important}
  body:has(.app-shell) .composer-tools .tool-chip{min-height:40px!important;font-size:11px!important;padding:.52rem .62rem!important;flex:0 1 auto!important}
  body:has(.app-shell) .send-btn{min-width:46px!important;width:46px!important;height:46px!important;min-height:46px!important}

  /* Tool dialogs become bottom-sheet-like on phones, with internal scrolling. */
  .nova-v4-modal,.settings-dialog{width:calc(100vw - 16px)!important;max-width:none!important;max-height:calc(var(--v69-vh) - 16px)!important;margin:auto!important;border-radius:18px!important}
  .nova-v4-modal .nova-v4-head{padding:12px 14px!important;position:sticky!important;top:0!important;z-index:3!important;background:#071322!important}
  .nova-v4-modal .nova-v4-head h2{font-size:17px!important;line-height:1.15!important}
  .nova-v4-modal .nova-v4-body{padding:12px 14px max(16px,var(--v69-safe-bottom))!important;max-height:calc(var(--v69-vh) - 74px)!important;overflow:auto!important}
  .nova-v4-grid{grid-template-columns:minmax(0,1fr)!important}
  .nova-v4-actions{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(132px,1fr))!important;gap:8px!important}
  .nova-v4-btn{min-height:44px!important;width:100%!important;white-space:normal!important}
  .nova-v4-field input,.nova-v4-field textarea,.nova-v4-field select,.settings-dialog input,.settings-dialog textarea,.settings-dialog select{font-size:16px!important;min-height:44px!important}
  .nova-v17-editor.tall{min-height:180px!important;max-height:34dvh!important}

  /* Page-aware NovaAI panel must look intentional on phone. */
  .nova-context-panel{left:max(6px,var(--v69-safe-left))!important;right:max(6px,var(--v69-safe-right))!important;bottom:max(6px,var(--v69-safe-bottom))!important;top:max(6px,var(--v69-safe-top))!important;width:auto!important;max-width:none!important;max-height:none!important;height:auto!important;border-radius:18px!important}
  .nova-context-panel.open{display:flex!important;flex-direction:column!important}
  .nova-context-messages{min-height:0!important;overflow-y:auto!important;-webkit-overflow-scrolling:touch!important}
  .nova-context-compose{flex:0 0 auto!important}
  .nova-context-compose textarea{font-size:16px!important;max-height:20dvh!important}
  .nova-context-send,.nova-context-voicebar button{min-height:44px!important}
}

@media(max-width:430px){
  /* Matches v46's ".header-actions .engine-pill" specificity so this hide-below-430px
     rule actually wins the cascade instead of losing to v46's "compact icon" version,
     which was silently keeping the pill (and its 34px) alive on the smallest phones. */
  body:has(.app-shell) .header-actions .engine-pill{display:none!important}
  body:has(.app-shell) .beta{display:none!important}
  body:has(.app-shell) .header-left p{max-width:48vw!important}
  body:has(.app-shell) .composer-tools .tool-chip{font-size:10.5px!important;padding:.48rem .55rem!important}
  .nova-v4-actions{grid-template-columns:minmax(0,1fr)!important}
  .nova-context-voicebar{display:grid!important;grid-template-columns:1fr 1fr!important}
  .nova-context-voice-status{grid-column:1/-1!important}
}

@media(max-width:380px){
  body:has(.app-shell) .title-row h1{font-size:15px!important}
  body:has(.app-shell) .header-left p{display:none!important}
  body:has(.app-shell) .composer-tools .tool-chip{min-height:38px!important}
}

/* Short landscape phones: preserve usable content area. */
@media(max-height:520px) and (orientation:landscape){
  body:has(.app-shell) .chat-header{min-height:50px!important;padding-top:5px!important;padding-bottom:5px!important}
  body:has(.app-shell) .composer{max-height:42dvh!important}
  body:has(.app-shell) #promptInput{max-height:16dvh!important}
  .nova-v4-modal,.settings-dialog{max-height:calc(var(--v69-vh) - 8px)!important}
  .nova-v4-modal .nova-v4-body{max-height:calc(var(--v69-vh) - 64px)!important}
}

@media(prefers-reduced-motion:reduce){.sidebar,.nova-context-panel{transition:none!important}}