/* ============================================================
   assets/files.css — the File Manager's OWN chrome.
   ------------------------------------------------------------
   Browsing itself (grid / list / details, sorting, selection, drag, context
   menu, rename, details pane, folder rail, pagination) moved to the shared
   engine in patch 605 — see assets/filebrowser.css. What remains here is only
   what this surface adds on top of it: the search + kind chips, the
   Internal/External audience badges, the folder-rail management controls, the
   photo lightbox, and the upload dialog.
   ============================================================ */

/* ── Toolbar extras (injected into the browser's own toolbar) ── */
.files-search { position: relative; flex: 1 1 200px; min-width: 160px; max-width: 280px; }
.files-search i { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--ink-faint); font-size: 16px; }
.files-search input { width: 100%; padding: 8px 10px 8px 32px; border: 1px solid var(--bd); border-radius: 8px; background: var(--bg1, var(--bg)); color: var(--ink); font-size: 14px; }
.files-chips { display: flex; gap: 4px; flex-wrap: wrap; }
.files-chip { padding: 6px 12px; border: 1px solid var(--bd); background: transparent; color: var(--ink-soft); border-radius: 20px; font-size: 13px; font-weight: 600; cursor: pointer; }
.files-chip:hover { border-color: var(--accent); color: var(--ink); }
.files-chip.active { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ── States ──────────────────────────────────────────────────── */
/* .files-loading is NOT the file manager's — app.js reuses it for the project
   settings tab loader. Kept here (rather than pruned with the rest of the old
   browser CSS) because that call site still renders it. */
.files-loading { text-align: center; padding: 60px 20px; color: var(--ink-faint); }
.files-loading i { animation: spin 1s linear infinite; font-size: 20px; margin-right: 6px; vertical-align: middle; }
.files-empty { text-align: center; padding: 60px 20px; color: var(--ink-faint); }
.files-empty i { font-size: 40px; opacity: .5; }
.files-empty h3 { margin: 12px 0 4px; color: var(--ink-soft); font-size: 16px; }
.files-empty p { margin: 0; font-size: 13px; }

/* ── Internal / External audience badge ──────────────────────── */
.files-vis { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 600; padding: 2px 8px; border-radius: 20px; border: 1px solid var(--bd); cursor: pointer; }
.files-vis.int { background: color-mix(in srgb, var(--ink-soft) 12%, transparent); color: var(--ink-soft); }
.files-vis.ext { background: color-mix(in srgb, #16A34A 16%, transparent); color: #15803D; border-color: color-mix(in srgb, #16A34A 35%, transparent); }
.files-vis.ro { cursor: default; opacity: .85; }
.files-vis i { font-size: 12px; }

/* ── Folder-rail management controls (rendered into the rail) ── */
.files-fvis { display: inline-flex; align-items: center; flex: 0 0 auto; cursor: pointer; padding: 3px 4px; border-radius: 5px; color: var(--ink-faint); font-size: 12px; }
.files-fvis.ext { color: #15803D; }
.files-fvis:hover { background: var(--bg); }
.files-fx-del, .files-fx-ren { flex: 0 0 auto; border: none; background: transparent; color: var(--ink-faint); cursor: pointer; padding: 3px; border-radius: 5px; opacity: 0; font-size: 12px; }
.fb-rail-row:hover .files-fx-del, .fb-rail-row:hover .files-fx-ren { opacity: 1; }
.files-fx-del:hover { color: var(--danger, #DC2626); }
.files-fx-ren:hover { color: var(--accent); }
@media (hover: none) { .files-fx-del, .files-fx-ren { opacity: .55; } }

/* ── Lightbox ────────────────────────────────────────────────── */
.files-lightbox { position: fixed; inset: 0; z-index: 4000; background: rgba(8,10,14,.92); display: flex; align-items: center; justify-content: center; }
.flb-fig { margin: 0; max-width: 90vw; max-height: 90vh; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.flb-img { max-width: 90vw; max-height: 82vh; object-fit: contain; border-radius: 6px; box-shadow: 0 8px 40px rgba(0,0,0,.5); background: #111; }
.flb-cap { display: flex; align-items: center; gap: 16px; color: #E4E7EB; font-size: 13px; flex-wrap: wrap; justify-content: center; }
.flb-dl { color: #fff; text-decoration: none; border: 1px solid rgba(255,255,255,.3); padding: 4px 10px; border-radius: 6px; font-size: 12px; }
.flb-dl:hover { background: rgba(255,255,255,.14); }
.flb-x { position: absolute; top: 16px; right: 20px; width: 40px; height: 40px; border: none; border-radius: 50%; background: rgba(255,255,255,.12); color: #fff; font-size: 20px; cursor: pointer; }
.flb-x:hover { background: rgba(255,255,255,.24); }
.flb-nav { width: 48px; height: 48px; border: none; border-radius: 50%; background: rgba(255,255,255,.10); color: #fff; font-size: 24px; cursor: pointer; margin: 0 14px; flex: none; }
.flb-nav:hover { background: rgba(255,255,255,.22); }

/* ── Upload modal ────────────────────────────────────────────── */
/* Where the files are going. A readout, not a picker — the browser already
   knows, so the dialog states it instead of asking. */
.fu-dest { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--bd); border-radius: 8px; background: var(--bg2); margin-bottom: 12px; }
.fu-dest i { font-size: 20px; color: var(--ink-faint); flex: none; }
.fu-dest span { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-faint); }
.fu-dest b { display: block; font-size: 14px; color: var(--ink); overflow-wrap: anywhere; }

.files-drop { border: 2px dashed var(--bd); border-radius: 10px; padding: 26px 16px; text-align: center; color: var(--ink-soft); margin-top: 6px; transition: border-color .12s, background .12s; }
.files-drop.drag { border-color: var(--accent); background: var(--bg2); }
.files-drop i { font-size: 34px; color: var(--ink-faint); }
.files-drop p { margin: 8px 0 2px; font-size: 14px; }
.files-drop-btn { background: none; border: none; color: var(--accent); font-weight: 600; cursor: pointer; padding: 0; font-size: 14px; }