/* =========================================================================
 /rursat on a phone (8 Oct 2026). Loaded after styles.css, so these rules win.
 One column, full height, thumb-reachable controls: the sidebar's actions move
 to a chip row under the title (the sidebar itself is hidden on phones), the
 map and the farmer form take the whole screen, inputs are 16px so iOS does
 not zoom, and the composer sits above the home indicator.
 ========================================================================= */
.mobile-nav{display:none}

@media (max-width: 720px){
 html,body{height:100%;height:100dvh}
 body{display:block;overflow:hidden;perspective:none}
 body::before,body::after{display:none}            /* the aurora costs battery, not information */
 .sidebar{display:none}
 .main{margin:0;height:100%;height:100dvh;border-radius:0;border:0;box-shadow:none;animation:none}

 /* title bar */
 .topbar{padding:8px 12px 6px;gap:8px}
 .topbar > div{min-width:0;flex:1}
 .topbar h1{font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .topbar .sub{display:none}
 .form-toggle{display:none}
 .topbar-actions{display:none}

 /* the phone's own action row */
 .mobile-nav{display:flex;gap:6px;padding:6px 10px 8px;overflow-x:auto;-webkit-overflow-scrolling:touch;
  border-bottom:1px solid rgba(255,255,255,.08);position:relative;z-index:2;scrollbar-width:none}
 .mobile-nav::-webkit-scrollbar{display:none}
 .mobile-nav button{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;padding:9px 12px;min-height:40px;
  border-radius:999px;font-size:12.5px;font-weight:600;color:var(--ink);white-space:nowrap;cursor:pointer;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16)}
 .mobile-nav button.primary{background:var(--grad-brand);color:#fff;border-color:rgba(255,255,255,.25)}
 .mobile-nav button svg.ic{width:15px;height:15px}

 /* chat */
 .messages{padding:12px 10px;gap:12px}
 .msg{max-width:100%;gap:8px}
 .avatar{width:28px;height:28px;font-size:13px;border-radius:9px}
 .bubble{padding:11px 12px;font-size:14px;line-height:1.5;border-radius:14px;max-width:calc(100vw - 58px);
  overflow-wrap:anywhere;transform:none}
 .msg.user .bubble:hover,.msg.ai .bubble:hover{transform:none}
 .bubble table{display:block;max-width:100%;overflow-x:auto}
 .bubble img{max-width:100%;height:auto}
 .bubble .actions{gap:6px}
 .bubble .actions button{padding:9px 12px;font-size:12.5px;min-height:38px}
 .pdf-report-card .actions{flex-direction:column}
 .pdf-report-card .btn{width:100%;justify-content:center}

 /* composer above the home indicator; icon buttons; no iOS zoom */
 .composer{padding:8px 8px calc(8px + env(safe-area-inset-bottom));gap:6px;align-items:center}
 .composer textarea{font-size:16px;min-height:44px;max-height:120px;padding:11px 12px;border-radius:14px}
 .composer button{width:42px;height:42px;padding:0;justify-content:center;border-radius:12px;flex:none}
 #send{width:46px;height:44px;padding:0;border-radius:14px;justify-content:center}
 #send span{display:none}
 .composer #tts-btn,.composer #tts-stop-btn{display:none}
 .composer #mic-btn{width:44px;height:44px}
 .voice-indicator{bottom:84px}

 /* map: the whole screen. One row of search + base map on top; the NDVI/NDWI/EO
  overlays stay on desktop; the tap/draw hint and the capture button float over
  the bottom of the map so the map itself gets the height. */
 .map-modal{align-items:stretch;justify-content:stretch}
 .map-modal-inner{position:relative;width:100vw;height:100%;height:100dvh;max-height:none;border-radius:0;border:0;animation:none}
 .map-header{padding:8px 12px}
 .map-header h3{font-size:14.5px}
 .map-header .sub{display:none}
 .map-toolbar{padding:6px 8px;gap:6px;flex-wrap:nowrap}
 .map-toolbar input{flex:1 1 auto;min-width:0;font-size:16px;padding:10px 12px}
 .map-toolbar button{padding:9px 10px;font-size:12px;min-height:40px;flex:0 0 auto}
 #map-search-btn span{display:none}
 #basemap-btn small{display:none}
 #ndvi-btn,#ndvi-ts-btn,#ndwi-btn,#eo-switcher{display:none}
 #map-info{position:absolute;left:8px;right:8px;bottom:calc(64px + env(safe-area-inset-bottom));z-index:6;
  font-size:11px;line-height:1.35;white-space:normal;color:#e2e8f0;
  background:rgba(2,6,23,.72);padding:6px 9px;border-radius:8px;backdrop-filter:blur(6px)}
 #capture-btn{position:absolute;left:8px;right:8px;bottom:calc(10px + env(safe-area-inset-bottom));z-index:6;
  padding:13px;font-size:14px;justify-content:center;min-height:48px}
 .map-canvas{min-height:0}
 .map-footer{display:none}
 #basemap-badge{font-size:10px!important;bottom:calc(112px + env(safe-area-inset-bottom))!important;left:8px!important;max-width:84%!important}
 .mapboxgl-ctrl-top-right{top:4px;right:4px}
 .mapboxgl-ctrl-top-left{top:4px;left:4px}
 .mapboxgl-ctrl-bottom-left,.mapboxgl-ctrl-bottom-right{bottom:calc(100px + env(safe-area-inset-bottom))}
 .aibhoomi-preview-tip{font-size:11px;left:8px;bottom:calc(140px + env(safe-area-inset-bottom))}

 /* farmer form: a full-screen sheet */
 .form-panel{top:0;bottom:0;right:-102vw;width:100vw;max-width:100vw;border-radius:0;border:0}
 .form-panel.open{right:0}
 .fp-head{padding:12px 14px}
 .fp-body{padding:12px 14px}
 .fp-body fieldset{min-width:0}                    /* a fieldset's min-content width would push the sheet wider than the phone */
 .fp-body input,.fp-body select{font-size:16px;padding:10px 12px;width:100%;min-width:0}
 .grid2{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
 .fp-foot{padding:10px 14px calc(10px + env(safe-area-inset-bottom))}
 .crops{grid-template-columns:1fr 1fr;font-size:13px}
 .crops label{min-height:36px}

 /* overlays */
 .login-card{width:min(92vw,380px);padding:22px 18px}
 .login-body input{font-size:16px}
 .plans-inner{width:94vw!important;max-width:94vw!important;max-height:88dvh;overflow:auto}
 .pdf-overlay-card{width:min(90vw,360px)}
 .toast{max-width:92vw;font-size:13px}
 .sect-results{display:none}
}

/* landscape phones: keep the map and chat usable when the height is small */
@media (max-width: 920px) and (max-height: 480px){
 .mobile-nav{padding:4px 10px}
 .mobile-nav button{min-height:34px;padding:6px 10px}
 .map-header{display:none}
 .map-toolbar .map-info{display:none}
}