/* LiveLoop's file manager, the Projects panel expanded (owner, 2026-10-26; public/liveloop-file-manager.js).
   White with dark words in Light, LiveLoop's grey-violet in Aurora, dark in Dark. */
#liveloop-files-manager { --fm-bg: #ffffff; --fm-soft: #f6f6f9; --fm-line: #e3e3ea; --fm-ink: #15151c; --fm-dim: #6b6b78; --fm-accent: #7c3aed; --fm-pick: #f3efff; }
html:not(.light-mode) #liveloop-files-manager { --fm-bg: #121219; --fm-soft: #1a1a24; --fm-line: rgba(255, 255, 255, .12); --fm-ink: #ececf3; --fm-dim: #a0a0b0; --fm-pick: rgba(124, 58, 237, .22); }
body.portal-layer-aurora #liveloop-files-manager { --fm-bg: #42404e; --fm-soft: rgba(255, 255, 255, .07); --fm-line: rgba(255, 255, 255, .16); --fm-ink: #eceaf4; --fm-dim: #c9c6d6; --fm-pick: rgba(167, 139, 250, .25); }

.llfm-expand { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; margin-right: 8px; height: 34px; min-height: 0 !important; padding: 0 12px; border-radius: 10px; border: 1px solid var(--fm-line); background: var(--fm-bg); color: var(--fm-ink); font: 700 12.5px/1 Inter, system-ui, sans-serif; cursor: pointer; white-space: nowrap; }
.llfm-expand[aria-pressed="true"] { border-color: var(--fm-accent); color: var(--fm-accent); }

/* Expanded: the panel fills the screen under the bar; the compact list, its note, Select, Rename current and the
   delete footer step aside (the manager has its own); storage and the other actions stay on top. */
:root:root #liveloop-files-manager.llfm-on { inset: calc(var(--portal-bar-h, 64px) + 8px) 16px 16px 16px !important; width: auto !important; max-width: none !important; }
:root:root #liveloop-files-manager.llfm-on :is(#liveloop-files-list, .liveloop-files-note, footer, #liveloop-files-select, #liveloop-files-rename) { display: none !important; }

.llfm { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: 250px minmax(0, 1fr); position: relative; border-top: 1px solid var(--fm-line); color: var(--fm-ink); font: 500 13px/1.45 Inter, system-ui, sans-serif; }
.llfm.is-dragging .llfm-node, .llfm.is-dragging .llfm-place { outline: 1px dashed color-mix(in srgb, var(--fm-accent) 40%, transparent); outline-offset: -2px; }
.llfm-loading { padding: 18px; }
.llfm button { font: inherit; color: inherit; min-height: 0 !important; }
.llfm i { color: var(--fm-accent) !important; -webkit-text-fill-color: var(--fm-accent) !important; }
.llfm :is(span, b, small, p, nav, button, input, select, option) { -webkit-text-fill-color: currentColor !important; text-shadow: none !important; }
.llfm-muted { color: var(--fm-dim) !important; padding: 6px 10px; margin: 0; font-size: 12px; }

/* the tree */
.llfm-side { min-height: 0; overflow: auto; padding: 12px 10px; border-right: 1px solid var(--fm-line); background: var(--fm-soft); display: flex; flex-direction: column; gap: 2px; }
.llfm-place, .llfm-node-name { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 10px; border: 0; border-radius: 9px; background: transparent; text-align: left; cursor: pointer; }
.llfm-place span, .llfm-node-name span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.llfm-place small, .llfm-node-name small { color: var(--fm-dim) !important; font-size: 11px; }
.llfm-place:hover, .llfm-node-name:hover { background: color-mix(in srgb, var(--fm-accent) 8%, transparent); }
.llfm-place.is-on, .llfm-node.is-on .llfm-node-name { background: var(--fm-pick); }
.llfm-place.is-over, .llfm-node.is-over .llfm-node-name { background: color-mix(in srgb, var(--fm-accent) 22%, transparent); }
.llfm-side-head { display: flex; align-items: center; justify-content: space-between; margin: 12px 4px 4px 10px; color: var(--fm-dim); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
.llfm-node { display: flex; align-items: center; padding-left: calc(var(--depth, 0) * 14px); }
.llfm-caret { flex: none; width: 22px; height: 22px; display: grid; place-items: center; border: 0; background: transparent; cursor: pointer; padding: 0; }
.llfm-caret:disabled { cursor: default; }
.llfm-caret i { font-size: 10px; color: var(--fm-dim) !important; -webkit-text-fill-color: var(--fm-dim) !important; }

/* the main side */
.llfm-main { min-height: 0; overflow: auto; padding: 14px 18px 18px; display: flex; flex-direction: column; gap: 12px; }
.llfm-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.llfm-crumbs { display: flex; align-items: center; gap: 6px; font-size: 15px; min-width: 0; flex-wrap: wrap; }
.llfm-crumbs button { border: 0; background: transparent; padding: 2px 4px; border-radius: 6px; color: var(--fm-dim) !important; cursor: pointer; font-weight: 600; }
.llfm-crumbs button:hover { color: var(--fm-ink) !important; }
.llfm-crumbs span { color: var(--fm-dim) !important; }
.llfm-crumbs b { font-weight: 800; }
.llfm-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.llfm-search, .llfm-sort { height: 34px !important; min-height: 0 !important; padding: 0 10px !important; border-radius: 9px !important; border: 1px solid var(--fm-line) !important; background: var(--fm-bg) !important; color: var(--fm-ink) !important; font: 500 12.5px Inter, system-ui, sans-serif !important; }
.llfm-search { width: 220px; }
.llfm-seg { display: inline-flex; border: 1px solid var(--fm-line); border-radius: 9px; overflow: hidden; }
.llfm-seg button { width: 34px; height: 32px; border: 0; background: var(--fm-bg); cursor: pointer; }
.llfm-seg button[aria-pressed="true"] { background: var(--fm-pick); }
.llfm-btn { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 9px; border: 1px solid var(--fm-line); background: var(--fm-bg); cursor: pointer; font-weight: 700 !important; font-size: 12.5px !important; white-space: nowrap; }
.llfm-btn:hover { border-color: var(--fm-accent); }
.llfm-icon { width: 30px; height: 30px; display: inline-grid; place-items: center; border: 0; border-radius: 8px; background: transparent; cursor: pointer; padding: 0; }
.llfm-icon:hover { background: color-mix(in srgb, var(--fm-accent) 10%, transparent); }
.llfm-danger, .llfm-danger i { color: #dc2626 !important; -webkit-text-fill-color: #dc2626 !important; }
.llfm-picked { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 10px; background: var(--fm-pick); }

.llfm-items.llfm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; align-content: start; }
.llfm-items.llfm-list { display: flex; flex-direction: column; gap: 4px; }
.llfm-card { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 14px; border-radius: 14px; border: 1px solid var(--fm-line); background: var(--fm-bg); text-align: left; cursor: default; user-select: none; }
.llfm-folder { cursor: pointer; background: var(--fm-soft); }
.llfm-card:hover { border-color: color-mix(in srgb, var(--fm-accent) 50%, var(--fm-line)); box-shadow: 0 6px 18px rgba(20, 10, 60, .08); }
.llfm-card.is-picked { border-color: var(--fm-accent); background: var(--fm-pick); }
.llfm-card.is-active .llfm-card-name::after { content: ' ●'; color: #16a34a; font-size: 10px; }
.llfm-card.is-over { border-color: var(--fm-accent); background: color-mix(in srgb, var(--fm-accent) 14%, var(--fm-bg)); }
.llfm-card-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; background: color-mix(in srgb, var(--fm-accent) 12%, transparent); font-size: 17px; }
.llfm-card-name { font-weight: 700; font-size: 13.5px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: 26px; }
.llfm-card small { color: var(--fm-dim) !important; font-size: 11.5px; }
.llfm-pick { position: absolute; top: 12px; right: 12px; width: 16px !important; height: 16px !important; min-height: 0 !important; margin: 0; accent-color: var(--fm-accent); opacity: .45; }
.llfm-card:hover .llfm-pick, .llfm-pick:checked { opacity: 1; }
.llfm-more { position: absolute; bottom: 8px; right: 8px; }
.llfm-list .llfm-card { flex-direction: row; align-items: center; padding: 8px 12px; border-radius: 10px; }
.llfm-list .llfm-card-icon { width: 30px; height: 30px; font-size: 14px; }
.llfm-list .llfm-card-name { flex: 0 1 40%; }
.llfm-list .llfm-card small { flex: 1; }
.llfm-list .llfm-pick { position: static; order: -1; }
.llfm-list .llfm-more { position: static; }
.llfm-empty { color: var(--fm-dim) !important; padding: 30px 6px; text-align: center; grid-column: 1 / -1; }
.llfm-hint { margin: auto 0 0; color: var(--fm-dim) !important; font-size: 11.5px; }

.llfm-menu { position: absolute; z-index: 10; min-width: 220px; max-height: 360px; overflow: auto; padding: 6px; border-radius: 12px; border: 1px solid var(--fm-line); background: var(--fm-bg); box-shadow: 0 18px 44px rgba(15, 23, 42, .2); display: flex; flex-direction: column; }
.llfm-menu p { margin: 4px 8px 6px; color: var(--fm-dim) !important; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; }
.llfm-menu button { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border: 0; border-radius: 8px; background: transparent; text-align: left; cursor: pointer; font-weight: 600 !important; }
.llfm-menu button:hover { background: var(--fm-pick); }
.llfm-menu .llfm-menu-new { border-top: 1px solid var(--fm-line); border-radius: 0 0 8px 8px; margin-top: 4px; }

@media (max-width: 760px) {
  .llfm { grid-template-columns: 1fr; }
  .llfm-side { max-height: 180px; border-right: 0; border-bottom: 1px solid var(--fm-line); }
}
:root:root #liveloop-files-manager header .llfm-expand { width: auto !important; height: 34px !important; font-size: 12.5px !important; align-self: center; }
/* Projects is in front of the Flow panel and the build ideas (owner, 2026-10-26: "having project at the most forefront
   ... and with flow"): it sits inside LiveLoop, so its layer cannot outrank them; they step aside while it is open. */
body:has(#liveloop-files-manager:not(.hidden)) :is(#desk-flow, #sc-ll-pills) { visibility: hidden !important; }
/* During a take the clock and proof badge sit on top of everything (script.js, ensureLiveLoopRecordHud), so Projects
   starts under them (owner, 2026-11-01: "overlap here between file manager and rand proof"). */
:root:root:root body.liveloop-recording #liveloop-files-manager { top: var(--ll-hud-bottom, calc(var(--portal-bar-h, 64px) + 8px)) !important; }
/* The skin's button gloss stays off the tree's quiet buttons. */
:root:root:root:root body:is(*, #llfmx):is(*, #llfmx) .llfm :is(.llfm-caret, .llfm-place, .llfm-node-name, .llfm-icon, .llfm-crumbs button) {
  background: transparent !important; background-image: none !important; box-shadow: none !important; border: 0 !important; filter: none !important;
}
:root:root:root:root body:is(*, #llfmx):is(*, #llfmx) .llfm :is(.llfm-place.is-on, .llfm-node.is-on .llfm-node-name) { background: var(--fm-pick) !important; }
:root:root:root:root body:is(*, #llfmx):is(*, #llfmx) .llfm :is(.llfm-place, .llfm-node-name):hover { background: color-mix(in srgb, var(--fm-accent) 8%, transparent) !important; }

/* A project opened like a folder (owner, 2026-10-30): the chevron into it, its states as cards or rows. */
.llfm-into { position: absolute; bottom: 8px; right: 40px; }
.llfm-into i { font-size: 11px; }
.llfm-list .llfm-into { position: static; }
.llfm-state { cursor: pointer; }
.llfm-state-no { font-weight: 700; font-size: 12px !important; font-variant-numeric: tabular-nums; color: var(--fm-ink); }
.llfm-list .llfm-state-no { min-width: 30px; width: auto !important; padding: 0 6px; border-radius: 8px; }
.llfm-state:focus-visible, .llfm-project:focus-visible { outline: 2px solid var(--fm-accent); outline-offset: 2px; }
.llfm-picked { flex-wrap: wrap; }
.llfm-btn:disabled { opacity: .45; cursor: default; }
/* The flat look (saryos-files.css) for the state number, which is text where a project has an icon. */
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) .llfm .llfm-state-no { color: var(--ss-text, var(--fm-ink)) !important; -webkit-text-fill-color: currentColor !important; font: 600 11px var(--ss-font, inherit) !important; }
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) .llfm .llfm-list .llfm-state-no { width: auto !important; min-width: 28px; border-radius: 999px !important; background: var(--ss-card, var(--fm-soft)) !important; }