/* Final shell sizing layer, loaded after page styles. Sizes stay readable as space shrinks. */
.workspace-host { margin: 0; height: 100dvh; overflow: hidden; background: #0f172a; }
#workspaceFrame { position: fixed; inset: 0; display: block; width: 100%; height: 100dvh; border: 0; }
.workspace-chrome-state[hidden] { display: none !important; }
.workspace-loading { position: fixed; top: calc(var(--topbar-height) + 12px); right: 20px; z-index: 70; padding: 8px 14px; border: 1px solid var(--line); border-radius: 10px; color: var(--muted); background: var(--surface); pointer-events: none; }
.workspace-loading[hidden] { display: none; }
/* Only the persistent host draws the narrow-screen menu backdrop. */
.workspace-page::before { display: none !important; }
/* Child dialogs cannot enter the host's top layer. Keep their controls inside
   the content area so the persistent search bar/sidebar never cover them. */
.workspace-page { --workspace-modal-left: var(--sidebar-width); }
.workspace-page dialog:modal { inset: var(--topbar-height) 0 0 var(--workspace-modal-left); margin: auto; max-width: calc(100vw - var(--workspace-modal-left) - 32px); max-height: calc(100dvh - var(--topbar-height) - 32px); }
.workspace-page :is(.create-folder-modal,.upload-conflict-modal) { inset: var(--topbar-height) 0 0 var(--workspace-modal-left); }
.workspace-page .create-folder-box { max-height: calc(100dvh - var(--topbar-height) - 48px); overflow-y: auto; }
@media (max-width: 767px) { .workspace-page { --workspace-modal-left: 0px; } }
.search-scope[hidden] { display: none !important; }
#workspaceChrome.child-dialog-open::after, #workspaceChrome.child-dialog-open::before { content: ''; position: fixed; z-index: 101; background: #020617bb; pointer-events: none; }
#workspaceChrome.child-dialog-open::after { inset: 0 auto 0 0; width: var(--sidebar-width); }
#workspaceChrome.child-dialog-open::before { top: 0; right: 0; left: var(--sidebar-width); height: var(--topbar-height); }
@media (max-width: 767px) { #workspaceChrome.child-dialog-open::after { width: 64px; height: 56px; } #workspaceChrome.child-dialog-open::before { left: 64px; } }
.workspace-failure { position: fixed; inset: 0; display: grid; place-content: center; gap: 16px; padding: 24px; background: #0f172a; color: #e2e8f0; z-index: 1000; }
.workspace-failure[hidden] { display: none; }
.workspace-failure a { color: #93c5fd; }
/* Authentication must remain scrollable with a short window / on-screen keyboard. */
.auth-screen { min-height: 100dvh; overflow: auto; overflow-x: clip; }
.auth-screen :is(.app-shell,.guest-shell,.content,.content-inner) { min-height: 100dvh; }
.auth-screen .auth-stage { min-height: 100dvh; padding: clamp(12px, 3vmin, 32px); overflow: clip; }
.auth-screen .auth-panel { width: clamp(280px, 42vw, 430px); max-width: 100%; padding: clamp(20px, 5vmin, 52px) clamp(18px, 4vmin, 46px); border-radius: clamp(16px, 3vmin, 26px); }
.auth-screen .auth-panel h1 { font-size: clamp(23px, 3.8vmin, 30px); }
.auth-screen .auth-subtitle { margin-bottom: clamp(14px, 3.5vmin, 34px); font-size: clamp(13px, 2vmin, 15px); }
.auth-screen .auth-form { gap: clamp(12px, 2.8vmin, 22px); }
.auth-screen .auth-form label { min-width: 0; font-size: clamp(13px, 2vmin, 15px); }
.auth-screen .auth-form label > span { color: #cbd5e1; }
.auth-screen .auth-form input::placeholder { color: #94a3b8; opacity: 1; }
.auth-screen .auth-form input:not([type=checkbox]):not([type=hidden]) { min-width: 0; width: 100%; height: clamp(40px, 7vmin, 54px); padding-inline: clamp(10px, 2vmin, 18px); font-size: 16px; }
.auth-screen .auth-submit { height: clamp(42px, 7.5vmin, 58px); margin-top: 0; }
.auth-screen .auth-divider { margin: clamp(14px, 3vmin, 36px) 0 clamp(12px, 2.5vmin, 24px); }
.auth-screen .auth-secondary { min-width: 0; max-width: 100%; padding-inline: 20px; height: clamp(38px, 6vmin, 45px); }
.auth-screen .auth-remember-hint { margin: -4px 0 0; overflow-wrap: anywhere; }
@media (max-height: 560px) { .auth-screen .auth-stage { align-items: start; }.auth-screen .auth-symbol { margin-bottom: 10px; } }
/* Remaining fixed-size surfaces: constrain the panel, not the entire page. */
.media-viewer.is-mini { width: min(400px, calc(100vw - 24px)); height: min(280px, calc(100dvh - 24px)); }
.media-viewer .mv-settings-panel { max-width: calc(100vw - 40px); max-height: calc(100dvh - 140px); overflow: auto; }
.media-viewer .mv-more-panel { max-width: calc(100vw - 40px); max-height: calc(100dvh - 160px); overflow: auto; }
.media-viewer .mv-info { max-height: calc(100% - 140px); overflow: auto; }
.media-viewer #mvText { padding: clamp(12px, 3vw, 24px) clamp(16px, 5vw, 62px); }
.app-screen .text-editor { min-height: min(240px, 40dvh); height: clamp(160px, 52dvh, 640px); }
.app-screen .text-preview { min-height: min(300px, 50dvh); }
.app-screen .editor-shell { min-height: min(620px, 70dvh); }
.app-screen .upload-transfer-list { max-height: min(310px, calc(100dvh - 150px)); }
.app-screen .upload-conflict-box { max-height: calc(100dvh - 24px); overflow-y: auto; }
.app-screen .conflict-manual-controls { min-width: 0; }
@media (max-width: 600px) {
  .app-screen .conflict-option:not(.conflict-manual-option) { grid-template-columns: minmax(0,1fr) 60px; }
  .app-screen .conflict-option:not(.conflict-manual-option) .conflict-file-row>div:last-child { grid-column: 1 / -1; grid-row: 3; }
  .app-screen .conflict-thumb { width: 56px; height: 56px; }
  .app-screen .upload-transfer-window { right: 12px; bottom: 12px; }
  .media-viewer .mv-footer { flex-wrap: wrap; }
  .media-viewer .mv-image-controls { position: static; transform: none; margin-inline: auto; }
  .media-viewer .mv-footer:has(.mv-image-controls:not([hidden])) .mv-footer-space { display: none; }
  .media-viewer .mv-playback-row { flex-wrap: wrap; }
}
.app-screen {
  --shell-space: clamp(12px, 2.4vw, 34px);
  --control-height: clamp(32px, 3.2vw, 42px);
  --shell-font: clamp(12px, 1vw, 14px);
}
.app-screen .app-shell { min-width:0; width:100%; }
.app-screen .sidebar { display: flex; flex-direction: column; height: 100dvh !important; }
.app-screen .sidebar-head { display: flex; flex: none; height: clamp(52px, 8vh, 66px) !important; padding-inline: clamp(10px, 1.4vw, 18px) !important; }
.app-screen .sidebar-inner { display: flex; flex-direction: column; flex: 1; min-height: 0 !important; overflow-y: auto; overflow-x: hidden; gap: clamp(8px, 2vh, 18px) !important; padding: clamp(8px, 1.7vh, 16px) 8px !important; }
.app-screen .nav-group { flex: none; gap: clamp(2px, .6vh, 6px); }
.app-screen .nav-item { min-height: clamp(32px, 5vh, 38px) !important; padding: clamp(4px, .8vh, 7px) 8px !important; font-size: var(--shell-font) !important; }
.app-screen .storage-card { display: block; flex: none; margin-top: auto; padding: clamp(10px, 1.2vw, 14px) !important; }
/* Reset the old small trash pseudo-element box before applying its existing SVG mask. */
.app-screen .line-icon.trash::before { width: 20px !important; height: 20px !important; top: 0 !important; left: 0 !important; border: 0 !important; border-radius: 0; }
.app-screen .topbar { left: var(--sidebar-width) !important; display: flex !important; padding: 0 var(--shell-space) !important; }
.app-screen .top-search { position: relative !important; left: auto !important; top: auto !important; transform: none !important; display:flex; align-items:stretch; gap:8px; width: min(680px, 100%) !important; min-width: 0 !important; height: clamp(34px, 3.3vw, 40px) !important; padding:0 !important; border:0 !important; border-radius:0; background:transparent !important; overflow:visible; }
.app-screen .search-query { display:flex; align-items:center; gap:10px; flex:1 1 0; min-width:0; padding:0 12px; border:1px solid rgba(148,163,184,.22); border-radius:10px; background:#111c2f; }
.app-screen .search-query:focus-within { border-color:#60a5fa; }
.app-screen .top-search .search-icon { position:relative; left:auto; top:auto; flex:none; margin:0; transform:none; }
.app-screen .top-search input { min-width: 0; font-size: var(--shell-font); }
.app-screen .top-search button { flex:none; height:100%; font-size: var(--shell-font); border-radius:10px !important; }
.app-screen .content-inner { padding: var(--shell-space); min-width: 0; }
.app-screen .content-inner:has(.legacy-drive-shell) { padding: 0; }
.app-screen .legacy-drive-shell { width: 100% !important; padding: var(--shell-space) var(--shell-space) 90px !important; }
.app-screen .drive-action-toolbar { margin-top: 0; margin-bottom: clamp(8px, 1.2vw, 16px); }
.app-screen .drive-main-actions { min-width:0; max-width:100%; flex:1 1 0; flex-wrap: wrap; gap: 8px; }
.app-screen :is(.drive-action-btn,.create-rail-toggle,.quick-create-btn) { min-height: var(--control-height) !important; height: var(--control-height) !important; font-size: var(--shell-font) !important; padding-inline: clamp(10px, 1.3vw, 18px) !important; }
.app-screen .legacy-filter-strip { flex-wrap: wrap; gap: 8px; margin-bottom: clamp(10px, 1.6vw, 22px); }
.app-screen .legacy-inline-search { min-width: 0; gap: 6px; }
.app-screen .legacy-inline-search select { min-width: 0; width: clamp(105px, 12vw, 160px); min-height: var(--control-height) !important; font-size: var(--shell-font); padding-inline: 8px; }
.app-screen .drive-view-button { min-height: var(--control-height); padding: 0; font-size: var(--shell-font); }
.app-screen .drive-view-control { gap: 6px; }
.app-screen .legacy-drive-shell:not([data-view-mode="compact"]) .item-main-area { padding: clamp(8px, 1vw, 14px); gap: 8px; }
.app-screen .legacy-drive-shell:not([data-view-mode="compact"]) .item-name-link { font-size: var(--shell-font); }
.app-screen .legacy-drive-shell[data-view-mode="list"] .file-item { padding: 0; }
.app-screen .legacy-drive-shell[data-view-mode="list"] :is(.file-icon,.folder-icon) { width: clamp(28px, 3vw, 42px); height: clamp(28px, 3vw, 42px); }
.app-screen .legacy-drive-shell[data-view-mode="list"] .file-thumbnail { width: clamp(36px, 3.5vw, 48px); height: clamp(36px, 3.5vw, 48px); flex-basis: clamp(36px, 3.5vw, 48px); }
.app-screen .legacy-drive-shell[data-view-mode="thumbnail"] :is(.file-list,.folder-list) { grid-template-columns: repeat(auto-fill,minmax(clamp(135px, 16vw, 190px),1fr)); gap: clamp(8px, 1vw, 14px); }
.app-screen .legacy-drive-shell[data-view-mode="thumbnail"] :is(.file-icon,.folder-icon,.file-thumbnail) { height: clamp(86px, 10vw, 126px); }
.app-screen .legacy-drive-shell[data-view-mode="thumbnail"] .explorer-item { min-height: clamp(170px, 17vw, 210px); }
.app-screen :is(.page-hero,.settings-card,.account-session) { padding: clamp(14px, 2vw, 26px); }
.app-screen :is(.page-hero,.trash-header) h1 { font-size: clamp(20px, 2.3vw, 30px); }
.app-screen :is(.page-toolbar,.editor-actions) { flex-wrap: wrap; gap: 8px; }
.app-screen :is(.app-dialog,.create-folder-box) { max-width: calc(100vw - 24px); max-height: calc(100dvh - 24px); overflow-y: auto; }

.sidebar-account { flex: none; padding: 8px; border-top: 1px solid rgba(148,163,184,.12); }
.account-trigger { display: flex; align-items: center; width: 100%; min-height: 42px; padding: 6px 8px; gap: 10px; border: 0; border-radius: 10px; background: transparent; color: #e2e8f0; text-align: left; }
.account-trigger:hover,.account-trigger[aria-expanded=true] { background: #1e293b; }
.account-avatar { display: grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: 50%; background: #b94335; color: #fff; font-size: 12px; font-weight: 600; }
.account-trigger-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--shell-font); }
.account-chevron { color: #94a3b8; }
.account-popover { position: fixed; inset: auto; margin: 0; width: min(270px, calc(100vw - 16px)); padding: 8px; border: 1px solid #374151; border-radius: 16px; background: #202b3d; color: #e2e8f0; box-shadow: 0 16px 48px #0006; overflow-y: auto; }
.account-popover:not(:popover-open) { display: none; }
.account-menu-identity { display: flex; gap: 10px; align-items: center; padding: 8px 8px 12px; margin-bottom: 4px; border-bottom: 1px solid #475569; }
.account-menu-identity>div { min-width: 0; }
.account-menu-identity strong,.account-menu-identity small { display: block; overflow-wrap: anywhere; }
.account-menu-identity small { color: #94a3b8; margin-top: 3px; }
.account-popover a,.account-popover button { display: flex; align-items: center; justify-content: flex-start; gap: 10px; width: 100%; min-height: 38px; padding: 8px; border: 0; border-radius: 8px; background: transparent; color: #e2e8f0; text-decoration: none; font: inherit; font-size: 13px; }
.account-popover :is(a,button):hover { background: #334155; }
.account-popover :is(a,button):focus-visible,.account-trigger:focus-visible { outline: 2px solid #60a5fa; outline-offset: -2px; }
.account-popover .line-icon,.account-logout button>span { flex: none; width: 20px; height: 20px; text-align: center; }
.account-logout { margin: 4px 0 0; border-top: 1px solid #475569; padding-top: 4px; }
.app-screen.sidebar-collapsed .account-trigger { justify-content: center; padding: 6px 0; }
.app-screen.sidebar-collapsed :is(.account-trigger-name,.account-chevron) { display: none; }
@media (max-width: 1100px) { .app-screen .drive-view-control>span { display: none; } }
@media (max-width: 767px) {
  .app-screen .sidebar-resizer,.app-screen.sidebar-collapsed .sidebar-resizer { display: none !important; }
  .app-screen .topbar { left: 64px !important; }
  .app-screen .top-search { width: 100% !important; right: auto !important; }
  .app-screen .sidebar-head { height: 56px !important; }
  .app-screen .sidebar-inner { display: flex; }
  .app-screen.sidebar-collapsed .sidebar-account { display: none; }
  .app-screen .legacy-filter-strip { flex-direction: row; }
  .app-screen .legacy-filter-strip .filter-only-form { flex: 1 1 100%; }
  .app-screen .legacy-inline-search select { width: 50%; }
  .app-screen .legacy-inline-search.filter-only-form { min-width:0; width:100%; }
  .app-screen .legacy-inline-search.filter-only-form select { width:calc((100% - 8px)/2) !important; min-width:0; flex:1 1 0; }
  .app-screen .drive-view-control { margin-left: 0; }
  .app-screen .legacy-drive-shell { padding-bottom: 100px !important; }
  .app-screen .nav-item { min-height: 40px !important; }
}
/* Search controls remain local to the shell; no global input sizing changes. */
.top-search .search-scope { width:clamp(112px,12vw,145px); flex:0 0 auto; max-width:145px; min-width:0; height:100%; margin:0; border:1px solid rgba(148,163,184,.22); background:#111c2f; color:#cbd5e1; border-radius:10px; padding:0 8px; font:inherit; font-size:var(--shell-font); }
.search-result-path { display:block; color:#91a8c8; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.72rem; }
.explorer-item.location-highlight { outline:2px solid #729df7; outline-offset:-2px; background:#223658; }
.legacy-drive-shell[data-view-mode="compact"] .search-result-path { display:none; }
@media(max-width:600px) { .app-screen .top-search { gap:5px; } .app-screen .search-query { gap:6px; padding-inline:8px; } .top-search .search-scope { width:104px; max-width:104px; font-size:.72rem; } .app-screen .top-search button { padding-inline:10px !important; } }