/* V1.7.0 — Mobile First Field Mode */
:root{--mobile-nav-height:76px;--mobile-content-width:560px}
.generator-step{border:0;margin:0;padding:0;min-width:0}
.generator-step>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;font-weight:800;color:var(--text)}
.generator-step>summary::-webkit-details-marker{display:none}
.generator-step-index{width:30px;height:30px;display:grid;place-items:center;border-radius:10px;background:var(--primary-2);color:var(--primary);font-size:12px;flex:none}
.generator-step-title{display:flex;flex-direction:column;gap:2px;min-width:0}
.generator-step-title strong{font-family:var(--font-display);font-size:14px}
.generator-step-title small{font-size:10px;font-weight:600;color:var(--muted)}
.generator-step-chevron{margin-left:auto;color:var(--muted);transition:transform .18s ease}
.generator-step[open] .generator-step-chevron{transform:rotate(180deg)}
.generator-step-body{display:flex;flex-direction:column;gap:14px;margin-top:16px}
.mobile-generate-bar{display:flex;gap:10px;align-items:center}
.mobile-generate-bar .primary-button{width:100%;min-height:50px;font-size:15px}
.mobile-form-note{display:none}

@media(min-width:901px){
  .generator-step{padding:16px;border-radius:18px;box-shadow:var(--neu-inset-sm);background:var(--bg)}
  .generator-step>summary{pointer-events:none;margin-bottom:2px}
  .generator-step-chevron{display:none}
  .generator-step:not([open])>.generator-step-body{display:flex}
}

@media(max-width:900px){
  html{scroll-padding-top:72px;overscroll-behavior-y:none}
  body{overflow-x:hidden;-webkit-tap-highlight-color:transparent}
  button,.nav-item,.output-tab,.theme-option{touch-action:manipulation}
  .app-shell{display:block!important;min-height:100dvh;padding-bottom:calc(var(--mobile-nav-height) + env(safe-area-inset-bottom))}
  .main-column{min-height:100dvh;width:100%}

  /* Native-style bottom navigation */
  .sidebar{position:fixed!important;inset:auto 0 0 0!important;width:100%!important;height:auto!important;transform:none!important;padding:8px 8px calc(7px + env(safe-area-inset-bottom))!important;border-radius:22px 22px 0 0!important;border:0!important;background:color-mix(in srgb,var(--bg) 94%,transparent)!important;backdrop-filter:blur(20px);box-shadow:0 -10px 28px rgba(35,48,42,.16)!important;z-index:70!important}
  body.dark .sidebar{box-shadow:0 -12px 30px rgba(0,0,0,.42)!important}
  .brand-block,.sidebar-footer{display:none!important}
  .nav-list{display:grid!important;grid-template-columns:repeat(6,minmax(54px,1fr));gap:4px;overflow:visible;padding:0;margin:0}
  .nav-item{min-width:0!important;min-height:58px;padding:6px 3px!important;border-radius:15px!important;display:flex!important;flex-direction:column;justify-content:center;gap:4px!important;text-align:center!important;font-size:9px!important;line-height:1.05;color:var(--muted)!important;box-shadow:none!important;transform:none!important}
  .nav-item .nav-icon{width:30px!important;height:27px!important;border-radius:9px!important;font-size:12px!important;box-shadow:none!important;background:transparent!important}
  .nav-item span:last-child{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .nav-item.active{background:var(--primary-2)!important;color:var(--primary)!important;box-shadow:var(--neu-inset-sm)!important}
  .nav-item.active .nav-icon{color:var(--primary);background:transparent!important;box-shadow:none!important}
  .mobile-menu{display:none!important}

  /* Compact mobile header */
  :root{--topbar:62px}
  .topbar{height:calc(62px + env(safe-area-inset-top));padding:calc(9px + env(safe-area-inset-top)) 12px 9px!important;gap:8px;border-bottom:0!important;box-shadow:0 8px 20px rgba(79,96,87,.10)!important;background:color-mix(in srgb,var(--bg) 92%,transparent)!important}
  .topbar-copy{min-width:0}
  .topbar h1{font-size:17px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .topbar p{display:none!important}
  .topbar-actions{gap:6px}
  .topbar-actions>.primary-button{display:none!important}
  .theme-trigger{width:42px!important;height:42px!important;min-width:42px!important;padding:0!important;border-radius:14px!important}
  .theme-menu{position:fixed!important;right:10px!important;top:calc(58px + env(safe-area-inset-top))!important;width:min(250px,calc(100vw - 20px))!important}

  /* Mobile content canvas */
  .page-root{width:100%;max-width:var(--mobile-content-width);margin:0 auto;padding:12px 12px 24px!important}
  .section{margin-bottom:18px}
  .section-head{margin-bottom:10px!important;gap:4px!important}
  .section-head h2{font-size:17px!important}
  .section-head p{font-size:11px!important;line-height:1.45}
  .grid,.stack{gap:12px!important}
  .grid.two,.grid.three,.grid.four,.form-grid{grid-template-columns:1fr!important}
  .card{padding:14px!important;border-radius:20px!important}
  .generator-layout{display:block!important;width:100%;max-width:100%;gap:0!important}
  .generator-panel.card{position:static!important;padding:0!important;background:transparent!important;box-shadow:none!important;border:0!important}
  .generator-panel>.section-head{padding:2px 4px 0;margin-bottom:10px!important}
  .generator-panel>.section-head h2{font-size:20px!important}
  #generatorForm{gap:12px!important}

  /* Three compact field steps */
  .generator-step{padding:0;border-radius:20px;background:var(--bg);box-shadow:var(--neu-raised);overflow:hidden}
  .generator-step>summary{min-height:60px;padding:14px 15px}
  .generator-step-title strong{font-size:14px}
  .generator-step-title small{font-size:10px}
  .generator-step-body{padding:0 15px 16px;margin-top:0}
  .field{gap:6px}
  .field label{font-size:11px}
  .field input,.field select,.field textarea{min-height:48px;padding:11px 12px!important;border-radius:14px!important;font-size:16px!important;box-shadow:var(--neu-inset-sm)!important}
  .field textarea{min-height:106px}
  .helper{font-size:10px;line-height:1.45}
  .field-count{height:18px;min-width:20px;font-size:9px}
  .warning-box{padding:12px!important;font-size:11px!important}
  .mobile-form-note{display:block;font-size:10px;color:var(--muted);text-align:center;margin:0 8px}
  .mobile-generate-bar{position:sticky;bottom:calc(var(--mobile-nav-height) + 6px + env(safe-area-inset-bottom));z-index:45;padding:9px;border-radius:18px;background:color-mix(in srgb,var(--bg) 94%,transparent);backdrop-filter:blur(18px);box-shadow:0 8px 26px rgba(34,48,41,.20);margin-top:2px}
  .mobile-generate-bar .primary-button{min-height:52px;border-radius:15px!important;font-size:15px!important;box-shadow:var(--neu-raised-sm)!important}

  /* Result behaves like a mobile reader */
  .output-shell{min-height:320px!important;margin-top:14px;padding:14px!important;border-radius:22px!important}
  .output-shell>.row.between{align-items:flex-start!important;flex-direction:column!important;gap:8px!important;margin-bottom:10px!important}
  .output-shell>.row.between>.helper{width:100%;display:flex;flex-wrap:wrap;gap:4px;align-items:center}
  .chip-row{gap:6px!important;overflow-x:auto;flex-wrap:nowrap!important;width:100%;padding-bottom:3px;scrollbar-width:none}
  .chip-row::-webkit-scrollbar{display:none}
  .chip{white-space:nowrap;font-size:10px!important;padding:6px 9px!important}
  .output-tabs{position:sticky;top:calc(62px + env(safe-area-inset-top));z-index:16;display:flex!important;flex-wrap:nowrap!important;overflow-x:auto!important;scroll-snap-type:x proximity;gap:7px!important;margin:0 -4px 12px!important;padding:8px 4px 11px!important;background:color-mix(in srgb,var(--bg) 94%,transparent);backdrop-filter:blur(14px);scrollbar-width:none}
  .output-tabs::-webkit-scrollbar{display:none}
  .output-tab{flex:none;scroll-snap-align:start;min-height:40px;padding:8px 11px!important;border-radius:12px!important;font-size:11px!important;white-space:nowrap}
  .output-content{font-size:15px!important;line-height:1.68!important;max-width:none!important}
  .output-block{padding:14px!important;border-radius:16px!important;margin-bottom:10px!important}
  .output-actions{position:sticky;bottom:calc(var(--mobile-nav-height) + 6px + env(safe-area-inset-bottom));z-index:44;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px!important;padding:9px;margin:14px -2px 0!important;border-radius:18px;background:color-mix(in srgb,var(--bg) 94%,transparent);backdrop-filter:blur(18px);box-shadow:0 8px 26px rgba(34,48,41,.20)}
  .output-actions button{width:100%;min-height:46px;padding:9px 8px!important;font-size:12px!important;border-radius:13px!important}
  .thread-series{gap:11px!important}
  .thread-card{padding:14px!important;border-radius:18px!important}
  .thread-card-head{margin-bottom:10px!important;padding-bottom:10px!important}
  .thread-number{height:30px;min-width:43px;font-size:11px}
  .thread-card-actions .mini-button{min-height:40px;padding:8px 12px;font-size:11px}
  .thread-review-row{grid-template-columns:46px 68px minmax(0,1fr)!important;padding:10px!important;gap:7px!important;font-size:11px!important}
  .empty-state{padding:34px 14px!important}

  /* Other screens remain phone-usable */
  .toolbar{align-items:stretch!important;flex-direction:column}
  .toolbar>*{width:100%;max-width:none!important}
  .product-card{min-height:0!important}
  .product-card .card-actions{display:grid!important;grid-template-columns:1fr 1fr}
  .product-card .card-actions button{min-height:44px}
  .data-table{min-width:660px}
  .table-wrap{border-radius:16px!important}
  .modal-host{align-items:end!important;padding:0!important}
  .modal-card{width:100%!important;max-width:none!important;max-height:92dvh!important;border-radius:24px 24px 0 0!important;padding-bottom:env(safe-area-inset-bottom)}
  .modal-head{padding:15px 16px!important}
  .modal-body{padding:16px!important}
  .modal-actions{position:sticky;bottom:0;background:var(--bg);padding-bottom:calc(10px + env(safe-area-inset-bottom));display:grid!important;grid-template-columns:1fr 1fr}
  .modal-actions button{min-height:46px}
  .toast-region{left:12px!important;right:12px!important;bottom:calc(var(--mobile-nav-height) + 12px + env(safe-area-inset-bottom))!important}
  .toast{max-width:none!important;width:100%;text-align:center}
}

@media(max-width:380px){
  .nav-item{font-size:8px!important}
  .nav-item .nav-icon{width:26px!important}
  .page-root{padding-left:9px!important;padding-right:9px!important}
  .output-actions{grid-template-columns:1fr 1fr}
}

/* Mobile overflow hardening */
@media(max-width:900px){
  .sidebar{width:auto!important;max-width:none!important}
  .nav-list{width:100%;min-width:0}
  .output-shell,.generator-layout,.output-shell>.row.between,.output-shell>.row.between>div,.chip-row{min-width:0!important;max-width:100%!important}
  .output-shell>.row.between>div{width:100%!important}
  .chip-row{width:100%!important}
  .toast-region{width:auto!important}
  .toast{width:auto!important;max-width:100%!important}
}