/* flexusb mobile shell — loaded after the legacy inline styles.
   Desktop layout is intentionally untouched. */
@media (max-width: 760px) {
  :root {
    --mobile-safe-top: env(safe-area-inset-top, 0px);
    --mobile-safe-right: env(safe-area-inset-right, 0px);
    --mobile-safe-bottom: env(safe-area-inset-bottom, 0px);
    --mobile-safe-left: env(safe-area-inset-left, 0px);
    --mobile-header-height: 62px;
    --mobile-edge: 14px;
    --mobile-radius: 16px;
  }

  html, body { width: 100%; max-width: 100%; overflow-x: hidden; }
  body { min-height: 100dvh; }

  body:not(.files-active):not(.editor-tab-mode) {
    align-items: stretch;
    min-height: 100dvh;
    padding: max(10px, var(--mobile-safe-top)) max(12px, var(--mobile-safe-right)) max(12px, var(--mobile-safe-bottom)) max(12px, var(--mobile-safe-left));
    background: #fff;
  }
  body:not(.files-active):not(.editor-tab-mode) .container { max-width: 520px; margin: 0 auto; }
  .login-shell {
    min-height: calc(100dvh - var(--mobile-safe-top) - var(--mobile-safe-bottom) - 22px);
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .login-story {
    min-height: 0 !important;
    padding: 14px 6px 12px !important;
    background: #fff;
    color: var(--text);
  }
  .login-story::before, .login-story::after, .login-story-copy, .login-benefits { display: none !important; }
  .login-brand a { color: var(--text); font-size: 17px; }
  .login-brand img { width: 30px; height: 30px; }
  .login-auth-panel {
    justify-content: flex-start;
    padding: 16px 6px calc(24px + var(--mobile-safe-bottom)) !important;
    background: #fff;
  }
  .login-auth-eyebrow { margin-bottom: 7px; font-size: 10px; }
  .login-step h2 { font-size: clamp(27px, 8vw, 32px); }
  .login-step-lede { margin: 9px 0 22px; font-size: 13px; line-height: 1.55; }
  .login-device-button {
    min-height: 74px !important;
    border-radius: 16px;
    padding: 12px 14px;
    box-shadow: 0 10px 26px rgba(73,111,242,.20);
  }
  .login-device-button strong { font-size: 16px !important; }
  .login-device-button small { font-size: 11px !important; }
  .login-separator { margin: 18px 0; }
  .login-email-button, .login-fido-button, .login-submit { min-height: 52px !important; border-radius: 14px; font-size: 15px !important; }
  .login-auth-foot { margin-top: 22px; padding-bottom: 4px; }

  body.files-active { width: 100%; min-height: 100dvh; height: 100dvh; overflow: hidden; background: var(--bg); }
  body.files-active .container, .drive-app {
    width: 100%; height: 100dvh; min-height: 100dvh; max-height: 100dvh; overflow: hidden;
  }
  .drive-app { display:grid; grid-template-rows:auto minmax(0,1fr); background:var(--bg); }
  .drive-topbar {
    position:relative;
    top:auto;
    z-index:70;
    grid-template-columns:44px minmax(0,1fr) !important;
    grid-template-rows:1fr;
    gap:8px !important;
    min-height:calc(var(--mobile-header-height) + var(--mobile-safe-top));
    padding:calc(8px + var(--mobile-safe-top)) max(12px,var(--mobile-safe-right)) 8px max(10px,var(--mobile-safe-left)) !important;
    border-bottom:1px solid color-mix(in srgb, var(--border) 78%, transparent);
    background:color-mix(in srgb, var(--card) 94%, transparent) !important;
    box-shadow:0 1px 12px rgba(23,32,51,.05) !important;
    backdrop-filter:blur(18px);
  }
  .drive-menu-button { width:44px; height:44px; border-radius:14px; }
  .drive-search {
    grid-column:2 !important;
    grid-row:1 !important;
    height:44px;
    min-height:44px !important;
    padding:0 12px !important;
    border:1px solid var(--border);
    border-radius:14px !important;
    background:color-mix(in srgb, var(--bg) 78%, var(--card)) !important;
  }
  .drive-search input { height:42px; padding:0 !important; font-size:16px !important; }
  .drive-layout { height:auto !important; min-height:0; grid-template-columns:1fr !important; grid-template-rows:minmax(0,1fr) !important; overflow:hidden; }
  .drive-main { min-height:0; overflow:hidden; padding:0 var(--mobile-edge) !important; background:var(--bg); }
  .drive-main .files-panel { padding-top:10px !important; }

  .drive-sidebar {
    top:0 !important;
    bottom:0;
    left:calc(-1 * min(330px, 86vw) - 28px) !important;
    z-index:100 !important;
    width:min(330px,86vw) !important;
    height:100dvh !important;
    min-height:100dvh !important;
    padding:calc(16px + var(--mobile-safe-top)) 14px calc(16px + var(--mobile-safe-bottom)) !important;
    gap:12px !important;
    border-radius:0 22px 22px 0;
    background:var(--card) !important;
    box-shadow:none;
  }
  body.drive-menu-open .drive-sidebar { left:0 !important; box-shadow:16px 0 42px rgba(15,23,42,.22) !important; }
  .drive-menu-backdrop { z-index:95 !important; backdrop-filter:blur(2px); }
  .drive-menu-brand { min-height:48px; padding:3px 8px 11px !important; }
  .drive-nav { gap:4px !important; }
  .drive-nav button { min-height:48px !important; border-radius:13px !important; font-size:15px !important; }
  .drive-sidebar .storage-summary { border-radius:15px; box-shadow:none; }
  .drive-menu-logout { min-height:48px; border-radius:13px; }

  .files-head { min-height:44px; margin:0 0 6px !important; gap:7px !important; }
  .files-head .breadcrumb {
    min-width:0;
    min-height:40px;
    margin:0 !important;
    padding:4px 0 !important;
    flex-wrap:nowrap;
    overflow-x:auto;
    overflow-y:hidden;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    white-space:nowrap;
    scrollbar-width:none;
  }
  .files-head .breadcrumb::-webkit-scrollbar { display:none; }
  .breadcrumb button { flex:0 0 auto; min-height:34px; padding:5px 6px; font-size:14px; }
  .files-head-tools { gap:5px !important; }
  .ai-launch { min-width:40px !important; width:40px; height:40px; min-height:40px !important; padding:0 !important; border-radius:12px; }
  .ai-launch .ai-launch-label { display:none !important; }
  .view-switch { display:flex; gap:2px !important; padding:3px; border-radius:11px; background:color-mix(in srgb,var(--border) 32%,transparent); }
  .view-switch button { min-width:36px !important; height:34px; padding:0 7px !important; border:0 !important; border-radius:8px !important; font-size:11px; }

  .file-selection-shell { margin:0 calc(-1 * var(--mobile-edge)); padding:0 var(--mobile-edge) calc(88px + var(--mobile-safe-bottom)); }
  .file-columns { display:none !important; }
  .file-list.list-view { padding-top:2px; }
  .file-list.list-view .file-row,
  .trash-list.list-view .file-row {
    grid-template-columns:34px minmax(0,1fr) 44px !important;
    grid-template-rows:auto auto;
    column-gap:10px !important;
    min-height:64px !important;
    padding:9px 3px !important;
    border-bottom:1px solid color-mix(in srgb,var(--border) 72%,transparent) !important;
    border-radius:0 !important;
  }
  .file-list.list-view .file-row:active,
  .trash-list.list-view .file-row:active { background:var(--accent-soft); }
  .file-list.list-view .file-main,
  .trash-list.list-view .file-main { grid-column:2; grid-row:1; min-width:0; }
  .file-list.list-view .file-icon,
  .trash-list.list-view .file-icon { width:34px; height:34px; }
  .file-name { font-size:15px !important; line-height:1.3; }
  .list-view .file-type, .list-view .file-modified { display:none !important; }
  .list-view .file-size {
    grid-column:2 !important;
    grid-row:2;
    margin:1px 0 0 !important;
    padding:0 !important;
    color:var(--muted);
    font-size:11.5px !important;
  }
  .list-view .file-actions { grid-column:3 !important; grid-row:1/3 !important; align-self:center; justify-self:end; }
  .file-actions button { min-width:42px; min-height:42px; border-radius:12px; }
  .file-select-box { align-self:center; }
  .grid-view.file-list { grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:10px !important; padding-top:4px; }
  .grid-view .file-row { min-height:160px !important; border-radius:16px !important; }

  #files-msg:empty, #upload-list:empty { display:none !important; }
  #files-msg:not(:empty) { margin:0 0 7px; padding:9px 11px; border-radius:12px; font-size:12px; }

  .drive-add-actions { right:max(16px,var(--mobile-safe-right)) !important; bottom:calc(18px + var(--mobile-safe-bottom)) !important; }
  .drive-add-actions > button { width:58px !important; height:58px !important; border-radius:18px !important; box-shadow:0 12px 28px rgba(49,84,207,.35) !important; }
  .new-menu {
    position:fixed !important;
    z-index:1300 !important;
    left:max(12px,var(--mobile-safe-left)) !important;
    right:max(12px,var(--mobile-safe-right)) !important;
    top:auto !important;
    bottom:calc(88px + var(--mobile-safe-bottom)) !important;
    width:auto !important;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:4px;
    padding:10px !important;
    border-radius:20px !important;
    box-shadow:0 20px 55px rgba(15,23,42,.26) !important;
  }
  .new-menu.hidden { display:none !important; }
  .new-menu hr { display:none; }
  .new-menu button { min-height:54px !important; border-radius:13px !important; font-size:14px !important; }

  #selection-toolbar:not(.hidden), #trash-selection-toolbar:not(.hidden) {
    position:fixed;
    z-index:1250;
    left:0;
    right:0;
    bottom:0;
    height:auto !important;
    min-height:82px !important;
    margin:0 !important;
    padding:8px max(10px,var(--mobile-safe-right)) calc(8px + var(--mobile-safe-bottom)) max(10px,var(--mobile-safe-left)) !important;
    display:grid !important;
    grid-template-columns:minmax(64px,1.2fr) repeat(4,minmax(48px,1fr));
    gap:4px;
    align-items:center;
    border:1px solid var(--border);
    border-width:1px 0 0;
    border-radius:18px 18px 0 0;
    background:color-mix(in srgb,var(--card) 96%,transparent);
    box-shadow:0 -12px 36px rgba(23,32,51,.12);
    backdrop-filter:blur(18px);
  }
  #selection-toolbar > strong, #trash-selection-toolbar > strong { font-size:12px; padding-left:4px; white-space:nowrap; }
  #selection-toolbar .icon-action, #trash-selection-toolbar .icon-action {
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:3px;
    width:100% !important;
    min-width:0 !important;
    height:56px;
    padding:4px 2px !important;
    border:0 !important;
    border-radius:12px !important;
    background:transparent !important;
    font-size:10px;
  }
  #selection-toolbar .icon-action svg, #trash-selection-toolbar .icon-action svg { width:21px; height:21px; }
  #selection-toolbar .icon-action::after, #trash-selection-toolbar .icon-action::after {
    content:attr(data-mobile-label);
    display:block;
    max-width:100%;
    overflow:hidden;
    color:var(--muted);
    font-size:9.5px;
    font-weight:700;
    line-height:1.1;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  #selection-toolbar #selection-clear, #trash-selection-toolbar #trash-selection-clear { order:-1; }
  body:has(#selection-toolbar:not(.hidden)) .drive-add-actions,
  body:has(#trash-selection-toolbar:not(.hidden)) .drive-add-actions { display:none !important; }

  .transfer-queue {
    left:max(12px,var(--mobile-safe-left)) !important;
    right:max(12px,var(--mobile-safe-right)) !important;
    bottom:calc(88px + var(--mobile-safe-bottom)) !important;
    width:auto !important;
    max-height:min(48dvh,420px);
    border-radius:18px !important;
    box-shadow:0 18px 48px rgba(23,32,51,.18) !important;
  }
  .transfer-queue-head { min-height:46px; padding:9px 12px !important; }
  .transfer-queue-items { max-height:calc(min(48dvh,420px) - 46px); overflow:auto; }
  .transfer-task { grid-template-columns:minmax(0,1fr) auto !important; padding:10px 12px !important; }
  .transfer-task button { min-height:36px; }
  .transfer-task .transfer-progress-value { min-width:0 !important; }
  .transfer-task .transfer-track { grid-column:1/-1 !important; }

  .action-menu {
    position:fixed !important;
    z-index:1400 !important;
    left:max(12px,var(--mobile-safe-left)) !important;
    right:max(12px,var(--mobile-safe-right)) !important;
    top:auto !important;
    bottom:calc(12px + var(--mobile-safe-bottom)) !important;
    width:auto !important;
    max-width:none !important;
    max-height:68dvh;
    overflow:auto;
    padding:10px !important;
    border-radius:20px !important;
    box-shadow:0 20px 60px rgba(15,23,42,.28) !important;
  }
  .action-menu button { min-height:50px !important; border-radius:12px !important; font-size:14px; }

  dialog:not(#move-dialog):not(#ai-assistant-dialog):not(#editor-dialog) {
    width:100% !important;
    max-width:100% !important;
    max-height:min(86dvh,760px);
    margin:auto 0 0 !important;
    padding:20px max(18px,var(--mobile-safe-right)) calc(18px + var(--mobile-safe-bottom)) max(18px,var(--mobile-safe-left)) !important;
    overflow:auto;
    border:0 !important;
    border-radius:22px 22px 0 0 !important;
  }
  dialog:not(#move-dialog):not(#ai-assistant-dialog):not(#editor-dialog)::backdrop { backdrop-filter:blur(2px); }
  dialog input, dialog textarea, dialog select { font-size:16px !important; }
  .dialog-actions button { min-height:48px; border-radius:12px; }

  #move-dialog.move-picker, #ai-assistant-dialog {
    width:100vw !important;
    height:100dvh !important;
    max-width:none !important;
    max-height:none !important;
    margin:0 !important;
    border:0 !important;
    border-radius:0 !important;
  }
  #ai-assistant-dialog { background:var(--bg) !important; }
  .ai-assistant-head { padding:calc(12px + var(--mobile-safe-top)) 14px 11px !important; }
  .ai-tabs { padding:8px 14px !important; }
  .ai-chat-log { padding:14px !important; }
  .ai-search-form { padding:10px 14px calc(12px + var(--mobile-safe-bottom)) !important; }
  .ai-quick-prompts { padding:0 14px 9px !important; }

  .trash-info-bar { min-height:46px; padding:9px 12px !important; border-radius:12px; font-size:12px; }
  .drive-main > .device-management { max-width:none !important; padding-bottom:calc(22px + var(--mobile-safe-bottom)); }
  .management-head { gap:10px; margin:8px 0 16px; }
  .management-head h1 { font-size:22px; }
  .settings-section, .claim-panel, .settings-stepup { border-radius:14px; }

  input, textarea, select { font-size:max(16px,1em); }

  .drive-scroll-rail { display:none !important; }
  .file-selection-shell, #trash-selection-shell { scrollbar-width:none; overscroll-behavior-y:contain; -webkit-overflow-scrolling:touch; }
  .file-selection-shell::-webkit-scrollbar, #trash-selection-shell::-webkit-scrollbar { display:none; }
}

@media (max-width: 390px) {
  :root { --mobile-edge: 11px; }
  .view-switch button { min-width:32px !important; padding:0 5px !important; font-size:10px; }
  .files-head { gap:4px !important; }
  .ai-launch { width:38px; min-width:38px !important; height:38px; min-height:38px !important; }
  .grid-view.file-list { grid-template-columns:1fr !important; }
  #selection-toolbar:not(.hidden), #trash-selection-toolbar:not(.hidden) {
    grid-template-columns:56px repeat(4,minmax(44px,1fr));
    padding-inline:6px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .drive-sidebar, .drive-menu-backdrop { transition:none !important; }
}

@media (max-width: 760px) {
  body.drive-menu-open .drive-add-actions { display:none !important; }

  #selection-toolbar:not(.hidden), #trash-selection-toolbar:not(.hidden) {
    grid-template-columns:repeat(5,minmax(0,1fr));
    grid-template-rows:auto 56px;
    row-gap:2px;
  }
  #selection-toolbar > strong, #trash-selection-toolbar > strong {
    grid-column:1/-1;
    grid-row:1;
    padding:2px 8px 0;
  }
  #selection-toolbar .icon-action, #trash-selection-toolbar .icon-action { grid-row:2; }
  #selection-toolbar #selection-clear, #trash-selection-toolbar #trash-selection-clear { order:initial; }

  .transfer-queue { position:fixed !important; }

  #view-list, #trash-view-list, #view-grid, #trash-view-grid { font-size:0 !important; }
  #view-list::before, #trash-view-list::before { content:'≡'; font-size:19px; line-height:1; }
  #view-grid::before, #trash-view-grid::before { content:'▦'; font-size:16px; line-height:1; }
}