#storageBreakdownModal{background:transparent;align-items:center;justify-content:center;pointer-events:none}
#storageBreakdownPanel{pointer-events:auto}
#storageBreakdownPanel.files-panel{--files-ink:234,244,250;box-sizing:border-box;position:relative;width:612px;min-width:min(560px,calc(100vw - 24px));max-width:calc(100vw - 24px);height:min(620px,80vh);min-height:min(360px,calc(100vh - 24px));max-height:calc(100vh - 24px);padding:0;display:flex;flex-direction:column;overflow:hidden;resize:both;border:1px solid rgba(125,180,215,.13);border-radius:14px;background:#0e1a22;color:#eaf4fa;box-shadow:0 34px 70px -22px rgba(0,0,0,.95),inset 0 1px 0 rgba(255,255,255,.035);font-family:var(--ui-font,system-ui);animation:files-in 140ms cubic-bezier(.22,.61,.36,1)}
#storageBreakdownModal.is-closing{opacity:0;transition:opacity 100ms}
#storageBreakdownPanel *,#storageBreakdownPanel *::before,#storageBreakdownPanel *::after{box-sizing:border-box}
#storageBreakdownPanel [hidden]{display:none!important}
#storageBreakdownPanel button{font-family:inherit;cursor:pointer;transform:none;box-shadow:none;filter:none;transition:background 90ms,color 90ms,opacity 90ms}
#storageBreakdownPanel button:disabled{cursor:default}
#storageBreakdownPanel button:focus-visible,#storageBreakdownPanel input:focus-visible,.storage-row:focus-visible{outline:1px solid #38bdf8;outline-offset:2px}
#storageBreakdownHandle{display:flex;align-items:flex-start;gap:16px;flex:none;padding:16px 18px 14px;user-select:none}
.files-heading{flex:1;min-width:0;text-align:left}
#storageBreakdownTitle{margin:0;color:#eaf4fa;font-size:16px;font-weight:600;letter-spacing:-.01em;line-height:21px;text-align:left}
#storageBreakdownContext{margin:3px 0 0;font-size:11px;font-weight:400;line-height:15px;color:rgba(var(--files-ink),.45);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#storageBreakdownContext code{font:11px var(--ui-font-mono,monospace);color:rgba(var(--files-ink),.7)}
#storageBreakdownCloseTop{display:grid;place-items:center;flex:none;width:26px;height:26px;padding:0;border:0;border-radius:6px;background:rgba(232,241,244,.06);color:rgba(var(--files-ink),.5);font-size:20px;line-height:1}
#storageBreakdownCloseTop:hover{background:rgba(232,241,244,.1);color:#eaf4fa}
#storageBreakdownBack,#filesManageStorage{padding:0;border:0;background:transparent;text-align:left;font-size:10.5px;color:#38bdf8}
#storageBreakdownBack{margin-top:6px}
#filesStorage{width:150px;flex:none;padding-top:1px}
.files-storage-label{display:flex;justify-content:space-between;gap:5px;min-height:13px;font:10px var(--ui-font-mono,monospace);color:rgba(var(--files-ink),.5);white-space:nowrap}
#filesStorageTrack{height:3px;margin:4px 0 5px;background:rgba(125,180,215,.12);border-radius:2px;overflow:hidden}
#filesStorageFill{display:block;height:100%;width:0;background:#38bdf8;transition:width 240ms;border-radius:2px}
#filesTabs{display:flex;gap:24px;flex:none;padding:0 18px;border-bottom:1px solid rgba(125,180,215,.12)}
#filesTabs button{display:flex;align-items:center;gap:6px;position:relative;border:0;border-bottom:2px solid transparent;border-radius:0;padding:0 0 9px;background:transparent;color:rgba(var(--files-ink),.5);font-size:11.5px;font-weight:500;white-space:nowrap}
#filesTabs button:hover{color:#eaf4fa}
#filesTabs button[aria-selected=true]{font-weight:600;color:#eaf4fa;border-bottom-color:#38bdf8}
#filesTabs svg{color:#38bdf8}
.files-tab-count{font:10px var(--ui-font-mono,monospace);color:rgba(var(--files-ink),.32)}
#filesTabs [aria-selected=true] .files-tab-count{color:rgba(var(--files-ink),.45)}
#storageFileFilters{display:flex;align-items:center;gap:8px;flex:none;margin:0;padding:12px 18px 10px}
.files-search{display:flex;align-items:center;gap:8px;flex:1;min-width:70px;height:30px;padding:0 10px;border-radius:8px;background:#0a141b;box-shadow:inset 0 0 0 1px rgba(125,180,215,.1)}
.files-search-icon{display:flex;color:rgba(var(--files-ink),.4)}
#storageFileSearch{min-width:0;width:100%;height:100%;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;color:#eaf4fa;font:12px var(--ui-font,system-ui);outline:none}
#storageFileSearch::placeholder{color:rgba(var(--files-ink),.38)}
#storageBreakdownPanel #storageFileSearch:focus-visible{outline:none}
#storageFileSearch::-webkit-search-cancel-button{cursor:pointer}
.files-search:focus-within{box-shadow:inset 0 0 0 1px rgba(56,189,248,.5)}
#storageBreakdownPanel .files-filter{display:flex;align-items:center;justify-content:space-between;gap:8px;height:30px;padding:0 10px;border:1px solid rgba(125,180,215,.1);border-radius:8px;background:#0a141b;color:rgba(var(--files-ink),.65);font-size:10.5px;white-space:nowrap}
.files-chevron{color:rgba(var(--files-ink),.45)}
#filesViewToggle{display:flex;gap:2px;flex:none;padding:2px;border:1px solid rgba(125,180,215,.1);border-radius:7px;background:#0a141b}
#filesViewToggle button{display:grid;place-items:center;width:28px;height:26px;padding:0;border:0;border-radius:5px;color:rgba(var(--files-ink),.4);background:transparent}
#filesViewToggle [aria-pressed=true]{color:#38bdf8;background:rgba(56,189,248,.16)}
#storageFileReset{display:none}
#storageBreakdownBody{flex:1 1 auto;min-height:0;padding:8px 10px 10px;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:rgba(125,180,215,.2) transparent;user-select:none;overscroll-behavior:contain}
#storageBreakdownPanel .files-section{margin:0!important}
#storageBreakdownPanel .storage-sect{border:0!important;border-radius:0!important}
#storageBreakdownPanel[data-management=false] .files-section-heading{display:none!important}
#storageBreakdownPanel .storage-row{position:relative;display:grid;grid-template-columns:14px 52px minmax(0,1fr) 66px 64px;align-items:center;column-gap:10px;height:54px;padding:8px;border:0;border-radius:9px;transition:background 90ms;outline-offset:-1px}
#storageBreakdownPanel .storage-row:hover,#storageBreakdownPanel .storage-row:focus-within,#storageBreakdownPanel .storage-row.is-selected{background:rgba(125,180,215,.07);box-shadow:inset 0 0 0 1px rgba(125,180,215,.1)}
#storageBreakdownPanel .files-pick-target{display:flex;align-items:center;width:32px;height:54px;padding:8px;margin:-8px;cursor:pointer}
#storageBreakdownPanel .storage-pick{appearance:none;width:13px;height:13px;margin:0;border:1px solid rgba(125,180,215,.35);border-radius:3px;background:#0a141b;cursor:pointer;flex:none}
#storageBreakdownPanel .storage-pick:checked{background:#38bdf8;border-color:#38bdf8}
#storageBreakdownPanel .storage-pick:checked::after{content:'';display:block;width:6px;height:3px;border-left:1.5px solid #06131c;border-bottom:1.5px solid #06131c;transform:translate(3px,3px) rotate(-45deg)}
#storageBreakdownPanel .files-thumb{position:relative;display:flex;align-items:center;justify-content:center;width:52px;height:36px;overflow:hidden;border-radius:5px;box-shadow:inset 0 0 0 1px rgba(125,180,215,.14);background:#0a141b;color:rgba(var(--files-ink),.5);font:9.5px var(--ui-font-mono,monospace)}
.files-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.files-name{min-width:0;display:block;overflow:hidden}
#storageBreakdownPanel .files-name-button{display:block;max-width:100%;padding:0;border:0;background:transparent;color:#eaf4fa;font-size:12.5px;font-weight:500;line-height:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left}
.files-name-button:hover{text-decoration:underline;text-underline-offset:3px}
.files-meta{display:flex;align-items:center;gap:6px;margin-top:2px;color:rgba(var(--files-ink),.42);font-size:10.5px;font-weight:400;line-height:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.files-meta>span:not(.files-type){overflow:hidden;text-overflow:ellipsis}
.files-type{padding:0 4px;border-radius:2px;background:rgba(125,180,215,.12);font:9.5px/13px var(--ui-font-mono,monospace);flex:none}
.files-size{font:11.5px var(--ui-font-mono,monospace);font-variant-numeric:tabular-nums;text-align:right;color:rgba(var(--files-ink),.6);white-space:nowrap}
.files-row-actions{display:flex;gap:6px;justify-content:flex-end;opacity:0;transition:opacity 90ms;pointer-events:none}
.storage-row:hover .files-row-actions,.storage-row:focus-within .files-row-actions{opacity:1;pointer-events:auto}
#storageBreakdownPanel .files-row-action,#storageBreakdownPanel .files-overflow{position:relative;display:grid;place-items:center;flex:none;width:28px;height:28px;padding:0;border:1px solid transparent;border-radius:7px;background:rgba(232,241,244,.07);color:rgba(var(--files-ink),.65)}
#storageBreakdownPanel .storage-go{background:rgba(56,189,248,.16);border-color:rgba(56,189,248,.3);color:#8ad8fa}
#storageBreakdownPanel .files-row-action:disabled{opacity:.25}
#storageBreakdownPanel .files-overflow{display:none;font-size:20px;grid-column:5}
/* The app's tooltip ([data-tooltip] in app.css), placed by FilesList.js: a
   ::after bubble would be clipped by the scrolling list. */
.files-tooltip{position:fixed;z-index:100060;width:max-content;max-width:min(420px,calc(100vw - 16px));overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background:rgba(var(--ui-surface-rgb),.95);color:var(--ui-text);border:2px solid var(--ui-border);box-shadow:0 4px 12px rgba(0,0,0,.3);padding:5px 10px;border-radius:6px;font:400 11px var(--ui-font,system-ui);pointer-events:none;animation:files-tip-in .15s ease}
@keyframes files-tip-in{from{opacity:0;transform:translateY(4px)}}
#storageBulkBar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;flex:none;margin:0;padding:11px 18px;border-top:1px solid rgba(125,180,215,.12);background:transparent}
.files-selection-summary{flex:1;min-width:120px;display:flex;flex-direction:column;gap:3px;font-size:11px;color:rgba(var(--files-ink),.42)}
#storageBulkCount.has-selection{color:#eaf4fa;font-weight:500}
#storageBulkCount.summary-changed{animation:files-summary 120ms}
#filesMixedCount{font-size:10px;color:rgba(var(--files-ink),.5)}
#storageBulkBar button{border:0;border-radius:7px;padding:8px 12px;background:rgba(232,241,244,.07);color:#b9cad4;line-height:15px;font-size:11px;font-weight:600;white-space:nowrap}
#storageBulkBar #storageBreakdownAll,#storageBulkBar #storageBulkClear,#storageBulkBar #storageBreakdownMore{background:transparent;color:rgba(var(--files-ink),.5);font-weight:400;padding:3px 0}
#storageBulkBar #storageBreakdownAll:hover,#storageBulkBar #storageBulkClear:hover{color:#eaf4fa}
#storageBulkBar #storageBulkClear{font-size:10px}
#storageBulkBar #storageBulkDelete:hover:not(:disabled){background:rgba(248,113,113,.12);color:#f87171}
#storageBulkBar #storageBulkShrink{color:#06131c;background:#38bdf8}
#storageBulkBar #storageBulkShrink:disabled{color:rgba(var(--files-ink),.4);background:transparent}
#storageBulkBar #storageBulkDelete:disabled{color:rgba(var(--files-ink),.3);background:transparent}
#storageBulkBar #storageBreakdownMore{flex-basis:100%;text-align:left}
#storageBulkPrepare{font-size:10px!important}
.files-empty{padding:65px 15px;text-align:center;font-size:12px;color:rgba(var(--files-ink),.45)}
.files-empty p{margin:0 0 8px}.files-empty button{border:0;background:transparent;color:#38bdf8;font-size:11px}
.files-skeleton{height:54px;padding:8px;display:grid;grid-template-columns:14px 52px 1fr;column-gap:10px;align-items:center;position:relative}
.files-skeleton i{grid-column:2;width:52px;height:36px;border-radius:5px;background:rgba(125,180,215,.07)}
.files-skeleton b{grid-column:3;align-self:start;height:8px;width:55%;margin-top:6px;background:rgba(125,180,215,.1);border-radius:3px}
.files-skeleton span{position:absolute;left:94px;top:31px;width:26%;height:6px;background:rgba(125,180,215,.06);border-radius:3px}
.files-menu{z-index:calc(var(--z-modal-2) + 40)!important;background:#0e1a22;color:#eaf4fa;font:12px var(--ui-font,system-ui)}
.files-menu button{display:block;width:100%;border:0;background:transparent;text-align:left;font:inherit;transform:none;color:inherit;padding:8px 12px;cursor:pointer}
.files-menu button:hover,.files-menu button:focus-visible{background:rgba(125,180,215,.1);outline:none}
.files-menu button[aria-current=true]::after{content:'✓';float:right;color:#38bdf8}
.files-menu button:disabled{opacity:.35;cursor:default}.files-menu .ui-menu-item-danger{color:#f87171}
#storageBreakdownPanel[data-view=grid] .storage-sect{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
#storageBreakdownPanel[data-view=grid] .storage-row{height:180px;grid-template-columns:14px minmax(0,1fr) auto;grid-template-rows:100px auto 22px;gap:6px;background:rgba(125,180,215,.035)}
#storageBreakdownPanel[data-view=grid] .files-thumb{grid-column:2/4;grid-row:1;width:100%;height:100px}
#storageBreakdownPanel[data-view=grid] .files-pick-target{grid-column:1;grid-row:1;align-self:start;align-items:flex-start;width:28px;height:44px}
#storageBreakdownPanel[data-view=grid] .files-name{grid-column:1/4;grid-row:2}
#storageBreakdownPanel[data-view=grid] .files-size{grid-column:1/3;grid-row:3;text-align:left;font-size:10px}
#storageBreakdownPanel[data-view=grid] .files-row-actions{grid-column:3;grid-row:3}
#storageBreakdownPanel[data-view=grid] .files-row-action{width:23px;height:23px}
#storageBreakdownPanel[data-view=grid] .files-overflow{grid-column:3;grid-row:3}
#filesImports{overflow:auto;min-height:0;flex:1;padding:10px 18px}
#filesImports .import-queue{position:static!important;width:100%!important;max-height:none!important;padding:0!important;box-shadow:none!important;border:0!important;background:transparent!important;overflow:visible}
#filesImports .import-queue header,#filesImports .import-queue>p{display:none}
#filesImports .import-queue article{border-color:rgba(125,180,215,.12)}
#filesImportBadge{border-radius:5px;padding:0 5px;background:rgba(56,189,248,.2);font-size:11px}#filesImportBadge.has-errors{background:rgba(230,156,81,.25)}
.files-preview{background:#0e1a22;color:#eaf4fa;border:1px solid rgba(125,180,215,.2);border-radius:14px;max-width:90vw;max-height:90vh;padding:18px}
.files-preview img,.files-preview video{display:block;max-width:80vw;max-height:70vh;object-fit:contain;margin:12px 0}.files-preview::backdrop{background:rgba(4,8,12,.62)}
@keyframes files-in{from{opacity:0;transform:scale(.985)}to{opacity:1;transform:scale(1)}}
@keyframes files-summary{from{opacity:.35}to{opacity:1}}
@media(hover:none),(pointer:coarse){#storageBreakdownPanel .files-row-actions{display:none}#storageBreakdownPanel .files-overflow{display:grid}}
@media(max-width:600px){#storageBreakdownPanel.files-panel{min-width:0;width:calc(100vw - 20px);height:min(620px,85vh);max-height:85vh}#storageBreakdownHandle{padding:14px 14px 12px;gap:10px}#filesStorage{width:126px}.files-storage-label{font-size:9px}#filesTabs{padding:0 14px;gap:20px}#storageFileFilters{padding:10px 14px;gap:5px}.files-search{padding:0 7px;gap:4px}#storageBreakdownPanel .files-filter{padding:0 7px;font-size:10px;gap:4px}#filesViewToggle button{width:24px}#storageBreakdownPanel .storage-row{grid-template-columns:14px 42px minmax(0,1fr) 58px 28px;gap:7px}#storageBreakdownPanel .files-thumb{width:42px}#storageBreakdownPanel .files-row-actions{display:none}#storageBreakdownPanel .files-overflow{display:grid}#storageBulkBar{gap:8px;padding:10px 14px}#storageBulkBar button{padding:7px 9px;font-size:10px}.files-selection-summary{min-width:105px}#storageBulkBar #storageBulkClear{display:none}#storageBreakdownPanel[data-view=grid] .storage-sect{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){#storageBreakdownPanel .files-pick-target{width:29px}}
@media(prefers-reduced-motion:reduce){#storageBreakdownPanel,#storageBreakdownPanel *,#storageBreakdownModal{animation:none!important;transition:none!important}}

/* ── PHONE LAYOUT (audit 22.9.2026, item 2) ─────────────────────────────
   Everything above squeezes a desktop row into a phone and hopes. At 360px
   the search input had 55px of actual text area, the close button was 26px,
   the row menu 28px — and the file NAME, the one thing you are looking for,
   was the column that gave way because size, thumbnail and menu each kept
   their own.

   This block supersedes parts of the compact 600px rule above rather than
   editing it: that rule is one 1500-character line, and a change made
   inside it cannot be read in a diff. Same breakpoint, stated intent. */
@media(max-width:600px){
  /* The search gets the whole row. Filters and the view toggle wrap under
     it, where a dropdown has room to say what it is filtering by. */
  #storageFileFilters{flex-wrap:wrap;row-gap:8px;padding:10px 14px 12px}
  .files-search{flex:1 0 100%;height:40px;padding:0 12px;gap:8px}
  #storageFileSearch{font-size:16px}   /* 16px or iOS zooms the page on focus */
  #storageBreakdownPanel .files-filter{flex:1 1 auto;height:36px;font-size:11px}
  #filesViewToggle{margin-left:auto}
  #filesViewToggle button{width:40px;height:32px}

  /* ~44px for the two buttons that are alone on their edge. The close is
     the way out of a full-screen panel; missing it is a trapped feeling. */
  #storageBreakdownCloseTop{width:44px;height:44px;margin:-8px -6px -8px 0;font-size:24px}
  #storageBreakdownPanel .files-overflow{width:44px;height:44px;font-size:22px}

  /* THE NAME GETS THE WIDTH. Size moves under it, onto the line that
     already carries type, place and date — where a second short fact costs
     nothing and a column costs 58px of filename. */
  #storageBreakdownPanel .storage-row{
    grid-template-columns:14px 42px minmax(0,1fr) 44px;
    grid-template-areas:"pick thumb name more" "pick thumb size more";
    align-items:center;row-gap:0;height:auto;min-height:60px}
  #storageBreakdownPanel .files-pick-target{grid-area:pick;height:60px}
  #storageBreakdownPanel .files-thumb{grid-area:thumb}
  #storageBreakdownPanel .files-name{grid-area:name}
  #storageBreakdownPanel .files-size{grid-area:size;text-align:left;font-size:10.5px;
    color:rgba(var(--files-ink),.42);line-height:13px}
  #storageBreakdownPanel .files-overflow{grid-area:more;grid-column:auto}
  #storageBreakdownPanel .files-name-button{font-size:13.5px;line-height:19px}
  /* Grid view keeps its own placement — it has no columns to lose. */
  #storageBreakdownPanel[data-view=grid] .storage-row{grid-template-areas:none}
}