/* Phone and installed-app (PWA) layer. Loaded after every other stylesheet. */
:root{--tabbar:64px;--accent:#3987e5;--accent-soft:#24354d;--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px);--safe-left:env(safe-area-inset-left,0px);--safe-right:env(safe-area-inset-right,0px);-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;text-size-adjust:100%}
:root[data-theme=light]{--accent:#2a78d6;--accent-soft:#e7f0ff}
body{overscroll-behavior-y:none}
body.no-scroll{overflow:hidden}
.boot,.auth-page,.shell,.main{min-height:100vh;min-height:100dvh}
.button-link{display:inline-block;text-align:center;text-decoration:none}
a.primary{color:#fff}
[hidden]{display:none!important}

/* Install and theme buttons in the account card: install only when the browser can install. */
.account-actions{display:grid}
.account .install-app{display:none;background:#3474d5;border-color:#3474d5;color:#fff}
.can-install .account .install-app{display:block}
.standalone .account .install-app{display:none}
.account .theme-toggle{display:none}

/* Clear the iPhone notch and home indicator in the installed app. */
.sidebar{padding-top:var(--safe-top);padding-bottom:var(--safe-bottom)}
.auth-page{padding-top:max(24px,var(--safe-top));padding-left:max(24px,var(--safe-left));padding-right:max(24px,var(--safe-right))}

.backdrop,.tabbar{display:none}

.toast{position:fixed;left:50%;bottom:calc(24px + var(--safe-bottom));transform:translateX(-50%);z-index:60;width:max-content;max-width:min(440px,calc(100vw - 32px));background:var(--surface);color:var(--text);border:1px solid var(--border);padding:12px 16px;border-radius:12px;font-size:13px;line-height:1.45;box-shadow:0 12px 30px #0006;animation:rise .2s ease-out}
.net-banner{position:fixed;top:0;left:0;right:0;z-index:70;background:#a12b2b;color:#fff;text-align:center;font-size:12px;font-weight:700;padding:calc(8px + var(--safe-top)) 16px 8px}
@keyframes rise{from{opacity:0;transform:translate(-50%,8px)}}

@media (hover:none){.nav button:hover:not(.active){background:none}}

@media (max-width:720px){
  /* 16px form text stops iOS zooming in on focus; larger touch targets everywhere. */
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),textarea,select{font-size:16px!important}
  .field label{font-size:12px}
  .primary,.secondary,.danger,.ai-submit{min-height:46px;font-size:14px}
  .task-actions{gap:8px}
  .task-actions button,.row-actions a,.row-actions button{min-height:38px;padding:8px 12px;font-size:12px}
  .segmented button{min-height:36px;font-size:12px}
  .ai-tabs{overflow-x:auto;scrollbar-width:none}
  .ai-tabs::-webkit-scrollbar{display:none}
  .ai-tabs button{white-space:nowrap;min-height:44px}
  .chat-delete{visibility:visible}

  /* Top bar respects the notch; the menu slides in over a backdrop. */
  .topbar{height:calc(60px + var(--safe-top));padding:var(--safe-top) max(16px,var(--safe-right)) 0 max(16px,var(--safe-left));gap:12px}
  .topbar .status{display:none}
  .topbar h2{font-size:16px}
  .mobile-menu{display:grid;place-items:center;width:44px;height:44px;font-size:18px;border:1px solid var(--border)}
  .sidebar{width:min(300px,86vw);z-index:50;box-shadow:12px 0 40px #0008;visibility:hidden;transition:transform .22s ease,visibility 0s .22s}
  .shell.menu-open .sidebar{visibility:visible;transition:transform .22s ease}
  .nav button{padding:12px 14px;font-size:14px}
  .account button{min-height:42px;font-size:13px}
  .account .theme-toggle{display:block}
  .backdrop{display:block;position:fixed;inset:0;z-index:45;background:#000a;opacity:0;pointer-events:none;transition:opacity .2s}
  .shell.menu-open .backdrop{opacity:1;pointer-events:auto}

  /* Bottom tab bar replaces the floating Light/Dark picker once signed in. */
  body:has(.shell) .theme-picker{display:none}
  .main{padding-bottom:calc(var(--tabbar) + var(--safe-bottom))}
  .shell .page,.shell.assistant-mode .page{padding-bottom:28px}
  .tabbar{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;z-index:40;height:calc(var(--tabbar) + var(--safe-bottom));padding:0 var(--safe-right) var(--safe-bottom) var(--safe-left);background:var(--page);border-top:1px solid var(--border)}
  .tabbar button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;border:0;background:none;color:var(--muted);font-size:10.5px;font-weight:700;padding:6px 2px;min-width:0}
  .tabbar .icon{font-size:18px;line-height:1;height:24px;width:48px;display:grid;place-items:center;border-radius:12px}
  .tabbar button.active{color:var(--accent)}
  .tabbar button.active .icon{background:var(--accent-soft)}
  .toast{bottom:calc(var(--tabbar) + 16px + var(--safe-bottom))}

  /* Page content. */
  .page{padding-left:max(16px,var(--safe-left));padding-right:max(16px,var(--safe-right))}
  .assistant-mode .page{padding-left:max(14px,var(--safe-left));padding-right:max(14px,var(--safe-right))}
  .assistant-home{margin-top:32px}
  .assistant-prompt>textarea{min-height:110px;padding:18px}
  .assistant-send{width:46px;height:46px}
  .assistant-controls{gap:8px}
  .assistant-controls #assistant-task{flex:1 1 100%;max-width:none}
  .assistant-controls select[name=provider]{flex:1;max-width:none}
  .assistant-switch{max-width:100%}
  .assistant-switch button{padding:9px 18px}
  .panel{padding:18px 16px}
  .auth-card{padding:26px 20px}
  .list-item p{font-size:13px}
}

/* Phones turned sideways: shorter header so content keeps the height. */
@media (max-width:920px) and (max-height:500px) and (orientation:landscape){.topbar{height:calc(52px + var(--safe-top))}}