/* ============================================
   Google Drive — folder chooser / import browser (js/drive-browser.js),
   Send to Drive dialog + uploads tray (js/drive-send.js),
   Settings → Files & Storage → Google Drive.
   Slate tokens throughout (css/slate.css).
   ============================================ */

/* ── shared modal shell ── */
.pwd-overlay {
    position: fixed; inset: 0; z-index: 10700;
    background: var(--sl-scrim, oklch(0 0 0 / 0.55));
    -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
    display: flex; align-items: center; justify-content: center;
    padding: 24px 16px; box-sizing: border-box;
}
.pwd-modal {
    display: flex; flex-direction: column;
    width: min(560px, 100%); max-height: min(640px, 100%);
    background: var(--sl-raised); border: 1px solid var(--sl-line-pop);
    border-radius: var(--sl-r-12); box-shadow: var(--sl-shadow-pop);
    color: var(--sl-text-1); font-family: var(--sl-font-ui); font-size: 12.5px;
    box-sizing: border-box; overflow: hidden;
}
.pwd-browser { height: min(560px, 100%); }
/* Slate buttons set display, which would beat the hidden attribute. */
.pwd-modal [hidden], .pwd-tray [hidden] { display: none !important; }
.pwd-send { width: min(460px, 100%); }
.pwd-ic { display: inline-flex; flex: none; align-items: center; justify-content: center; }
.pwd-head {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 14px; border-bottom: 1px solid var(--sl-hairline);
}
.pwd-title { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; flex: 1; min-width: 0; }
.pwd-title > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pwd-title .pwd-ic { color: var(--sl-text-2); }
.pwd-account { color: var(--sl-text-3); font-size: 11.5px; max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pwd-x {
    flex: none; width: var(--sl-h-sm); height: var(--sl-h-sm); padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: none; border: none; border-radius: var(--sl-r-6);
    color: var(--sl-text-2); cursor: pointer;
}
.pwd-x:hover { background: var(--sl-wash); color: var(--sl-text-1); }
.pwd-x:focus-visible, .pwd-row:focus-visible, .pwd-crumb:focus-visible { outline: 2px solid var(--sl-focus); outline-offset: 1px; }
.pwd-foot {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 14px; border-top: 1px solid var(--sl-hairline);
}
.pwd-foot-status { flex: 1; min-width: 0; color: var(--sl-text-3); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pwd-ok { max-width: 60%; overflow: hidden; text-overflow: ellipsis; }

/* ── browser ── */
.pwd-recent {
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    padding: 10px 14px 0;
}
.pwd-recent-label { color: var(--sl-text-3); font-size: 11px; font-weight: 600; margin-right: 2px; }
.pwd-chip { max-width: 180px; }
.pwd-chip > span:last-child { overflow: hidden; text-overflow: ellipsis; }
.pwd-bar {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    padding: 10px 14px; border-bottom: 1px solid var(--sl-hairline);
}
.pwd-crumbs { display: flex; align-items: center; gap: 2px; flex: 1; min-width: 0; overflow: hidden; }
.pwd-crumb {
    flex: none; max-width: 160px; height: 24px; padding: 0 6px;
    background: none; border: none; border-radius: var(--sl-r-6);
    color: var(--sl-link); font: inherit; font-size: 12.5px; cursor: pointer;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pwd-crumb:hover { background: var(--sl-wash); }
.pwd-crumb.is-current { color: var(--sl-text-1); font-weight: 600; cursor: default; background: none; }
.pwd-sep { color: var(--sl-text-3); }
.pwd-tools { display: flex; gap: 6px; flex: none; }
.pwd-newrow { display: flex; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--sl-hairline); }
.pwd-newrow[hidden] { display: none; }
.pwd-newinput { flex: 1; min-width: 0; height: var(--sl-h-sm); }
.pwd-list {
    flex: 1; min-height: 120px; overflow-y: auto;
    padding: 6px; display: flex; flex-direction: column; gap: 2px;
}
.pwd-row {
    display: flex; align-items: center; gap: 10px; width: 100%;
    min-height: 40px; padding: 4px 8px; box-sizing: border-box;
    background: none; border: 1px solid transparent; border-radius: var(--sl-r-8);
    color: var(--sl-text-1); font: inherit; text-align: left; cursor: pointer;
}
.pwd-row:hover { background: var(--sl-wash); }
.pwd-row.is-selected { background: var(--sl-accent-tint, oklch(0.72 0.13 230 / 0.12)); border-color: var(--sl-accent-line, oklch(0.72 0.13 230 / 0.4)); }
.pwd-thumb {
    flex: none; width: 32px; height: 32px; border-radius: var(--sl-r-6);
    display: inline-flex; align-items: center; justify-content: center; overflow: hidden;
    background: var(--sl-wash); color: var(--sl-text-2);
}
.pwd-row.is-folder .pwd-thumb { color: var(--sl-warning); background: none; }
.pwd-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pwd-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pwd-go { color: var(--sl-text-3); font-size: 16px; }
.pwd-tick {
    flex: none; width: 18px; height: 18px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--sl-border); color: transparent;
}
.pwd-row.is-selected .pwd-tick { background: var(--sl-accent); border-color: var(--sl-accent); color: var(--sl-on-accent); }
.pwd-empty { padding: 40px 16px; text-align: center; color: var(--sl-text-3); display: flex; flex-direction: column; align-items: center; gap: 10px; }
.pwd-empty p { margin: 0; color: var(--sl-text-2); max-width: 380px; }
.pwd-more { align-self: center; margin: 6px 0; }
.pwd-note { margin: 0; padding: 0 14px 10px; color: var(--sl-text-3); font-size: 11px; line-height: 1.45; }
.pwd-connect { padding: 36px 20px; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.pwd-connect p { margin: 0; max-width: 360px; }
.pwd-connect-lead { color: var(--sl-text-1); font-size: 13px; }
.pwd-connect-why { color: var(--sl-text-3); font-size: 11.5px; }

/* ── send dialog ── */
.pwd-body { padding: 14px; display: flex; flex-direction: column; gap: 14px; overflow-y: auto; }
.pwd-field { display: flex; flex-direction: column; gap: 6px; }
.pwd-label { color: var(--sl-text-2); font-size: 11.5px; font-weight: 600; }
.pwd-row-line { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pwd-acct { color: var(--sl-text-2); }
.pwd-avatar { width: 22px; height: 22px; border-radius: 50%; flex: none; }
.pwd-acct-email { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pwd-lead { color: var(--sl-text-2); }
.pwd-folder {
    padding: 6px 6px 6px 10px; border-radius: var(--sl-r-8);
    background: var(--sl-panel); border: 1px solid var(--sl-border);
}
.pwd-folder .pwd-ic { color: var(--sl-warning); }
.pwd-folder-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pwd-name-input { width: 100%; }
.pwd-check { display: flex; align-items: center; gap: 8px; cursor: pointer; color: var(--sl-text-1); }
.pwd-check input { margin: 0; accent-color: var(--sl-accent); width: 14px; height: 14px; flex: none; }
.pwd-check-detail { color: var(--sl-text-3); font-size: 11.5px; margin-left: auto; }
.pwd-filelist {
    margin: 0; padding: 6px 10px 6px 26px; max-height: 140px; overflow-y: auto;
    background: var(--sl-panel); border: 1px solid var(--sl-border); border-radius: var(--sl-r-8);
    color: var(--sl-text-2); font-size: 12px; line-height: 1.6;
}
.pwd-filelist li { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── uploads tray ── */
.pwd-tray {
    position: fixed; right: 16px; bottom: 16px; z-index: 10090;
    width: min(340px, calc(100vw - 32px)); max-height: 50vh;
    display: flex; flex-direction: column;
    background: var(--sl-raised); border: 1px solid var(--sl-line-pop);
    border-radius: var(--sl-r-10); box-shadow: var(--sl-shadow-pop);
    color: var(--sl-text-1); font-family: var(--sl-font-ui); font-size: 12px;
    overflow: hidden;
}
.pwd-tray-head { display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 12px; border-bottom: 1px solid var(--sl-hairline); }
.pwd-tray-head .pwd-ic { color: var(--sl-text-2); }
.pwd-tray-title { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pwd-tray-list { overflow-y: auto; padding: 4px 0; }
.pwd-job { padding: 6px 12px; display: flex; flex-direction: column; gap: 4px; }
.pwd-job + .pwd-job { border-top: 1px solid var(--sl-hairline); }
.pwd-job-top { display: flex; align-items: center; gap: 8px; min-height: 22px; }
.pwd-job-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pwd-job-meta { flex: none; color: var(--sl-text-3); font-size: 11px; font-variant-numeric: tabular-nums; }
.pwd-job.is-done .pwd-job-meta { color: var(--sl-success); }
.pwd-job.is-failed .pwd-job-meta { color: var(--sl-error); }
.pwd-job-cancel { width: 22px; height: 22px; }
.pwd-bar-track { height: 4px; border-radius: 2px; background: var(--sl-wash); overflow: hidden; }
.pwd-bar-fill { height: 100%; width: 2%; background: var(--sl-accent); border-radius: 2px; transition: width 0.25s ease; }
.pwd-bar-fill.is-indeterminate { width: 30%; animation: pwdSlide 1.2s ease-in-out infinite; }
@keyframes pwdSlide { from { transform: translateX(-100%); } to { transform: translateX(340%); } }
.pwd-job-acts { display: flex; gap: 10px; }
.pwd-link { height: auto; padding: 0; font-size: 11.5px; }
.pwd-job-err { color: var(--sl-error); font-size: 11.5px; line-height: 1.4; }

/* Google's Picker ("Browse all of Drive…") opens from inside the chooser above;
   its own dialog sits at z-index ~1000, which would put it behind ours. */
.picker-dialog-bg { z-index: 10800 !important; }
.picker-dialog { z-index: 10801 !important; }

/* ── Settings → Files & Storage → Google Drive ── */
.pwd-set-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pwd-set-folder { flex: 1; min-width: 160px; }

@media (prefers-reduced-motion: reduce) {
    .pwd-bar-fill, .pwd-bar-fill.is-indeterminate { transition: none; animation: none; }
}
@media (max-width: 520px) {
    .pwd-tools { width: 100%; }
    .pwd-tools > * { flex: 1; }
    .pwd-account { display: none; }
}