/* Files scenes (js/scenes/files.js): styles for this file only, every class prefixed fl-. */

/* Shared desktop props: a Finder-like window, file tiles, keycaps */
.fl-fw { position: absolute; border-radius: 12px; background: #1c1d22; border: 1px solid #2a2b31; overflow: hidden;
  transition: border-color var(--m-base), box-shadow var(--m-base); }
.fl-fw.focus { border-color: rgba(10,132,255,.9); box-shadow: 0 0 0 3px rgba(10,132,255,.25); }
.fl-fh { height: 30px; display: flex; align-items: center; gap: 6px; padding: 0 12px; border-bottom: 1px solid #26272c; font-size: 12px; color: #c9cbd3; }
.fl-fh i { width: 9px; height: 9px; border-radius: 50%; background: #3a3b41; }
.fl-fh b { margin-left: 8px; font-weight: 600; }
.fl-ft { position: absolute; width: 104px; display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 11px; color: #e5e7eb;
  transition: left 650ms var(--ease-quint), opacity 250ms; }
.fl-nm { max-width: 100%; padding: 2px 6px; border-radius: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fl-ft.sel .fl-nm { background: var(--notch-blue); color: #fff; }
.fl-ft.cut { opacity: .45; }
.fl-ft.gone { opacity: 0; scale: .8; transition: opacity 400ms, scale 400ms var(--ease-quint); }
.fl-nm.edit { background: #fff; color: #111; box-shadow: 0 0 0 2px var(--notch-blue); }
.fl-sx { background: rgba(10,132,255,.45); }
.fl-key { position: relative; height: 30px; padding: 0 14px; border-radius: 8px; white-space: nowrap; cursor: pointer;
  font: 600 13px/1 -apple-system, BlinkMacSystemFont, system-ui; color: #f5f5f7; background: #2a2b31; border: 1px solid #3a3b42;
  box-shadow: 0 2px 0 #121317; transition: transform var(--m-fast) var(--ease-quint), box-shadow var(--m-fast); }
.fl-key::after { content: ""; position: absolute; inset: -8px -4px; }
.fl-key:hover { background: #33343b; }
.fl-key:active, .fl-key.press { transform: translateY(2px); box-shadow: 0 0 0 #121317; }
.fl-key:focus-visible { outline: 2px solid var(--notch-blue); outline-offset: 2px; }
.fl-key small { margin-left: 8px; font-size: 11px; font-weight: 500; color: #9a9ca6; }
.fl-keys { position: absolute; display: flex; gap: 10px; }

/* Segmented chips inside the island (Convert, Screen recording) */
.fl-seg { display: flex; gap: 6px; margin-bottom: 10px; }
.fl-seg button { position: relative; height: 26px; padding: 0 12px; border-radius: 13px; white-space: nowrap; font: 600 12px/1 -apple-system, system-ui;
  color: var(--notch-text-2); background: rgba(255,255,255,.06); transition: background var(--m-base), color var(--m-base); }
.fl-seg button::after { content: ""; position: absolute; inset: -6px -2px; }
.fl-seg button:hover { color: var(--notch-text); }
.fl-seg button.on { background: rgba(255,255,255,.16); color: var(--notch-text); }
.fl-ops button.on { background: var(--notch-blue); color: #fff; }
.fl-seg button:focus-visible { outline: 2px solid var(--notch-blue); outline-offset: 2px; }

/* Convert */
.fl-job { display: flex; align-items: center; gap: 14px; padding: 12px 14px; }
.fl-fi { width: 48px; flex: none; display: grid; place-items: center; }
.fl-aud { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: linear-gradient(135deg, #1f4fbf, #6b3fb3); font-size: 20px; }
.fl-jt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.fl-jt .t1, .fl-jt .t2 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fl-jt .meterbar { flex: none; width: 100%; margin-top: 8px; }
.fl-job .nb { min-width: 84px; }

/* Clean URL */
.fl-addr { position: absolute; display: flex; align-items: center; gap: 12px; height: 48px; padding: 0 8px 0 14px; border-radius: 24px; background: #1c1d22; border: 1px solid #2f3036; color: #e5e7eb; }
.fl-addr > .ic { font-size: 16px; color: #9a9ca6; }
.fl-url { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; font: 500 13px/1 ui-monospace, Menlo, Consolas, monospace; }
.fl-trk { display: inline-block; max-width: 340px; overflow: hidden; vertical-align: bottom; color: #9a9ca6;
  transition: max-width 520ms var(--ease-quint), opacity 420ms, color 300ms; }
.fl-addr.cut .fl-trk { color: var(--notch-red); text-decoration: line-through; }
.fl-addr.gone .fl-trk { max-width: 0; opacity: 0; }

/* Clipboard */
.fl-sq { display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 12px; margin-bottom: 10px; font-size: 13px; }
.fl-sq > .ic { font-size: 15px; color: var(--notch-text-2); }
.fl-ph { color: var(--notch-text-2); } .fl-q { color: var(--notch-text); }
.fl-sq .fl-loc { margin-left: auto; }
.fl-ch .clip button { height: 36px; }
.fl-ch .clip button.on { background: rgba(10,132,255,.35); }
.fl-ch .clip .cc { color: var(--notch-green); }

/* Color picker */
.fl-tile { position: absolute; border: 0; border-radius: 14px; cursor: crosshair; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.fl-loupe { position: absolute; left: 0; top: 0; width: 64px; height: 64px; border-radius: 50%; pointer-events: none; background: var(--c, #333);
  border: 3px solid #fff; box-shadow: 0 8px 22px rgba(0,0,0,.5), inset 0 0 0 1px rgba(0,0,0,.25); transition: translate 420ms var(--ease-quint); }
.fl-loupe::before, .fl-loupe::after { content: ""; position: absolute; left: 50%; top: 50%; background: rgba(255,255,255,.95); box-shadow: 0 0 0 1px rgba(0,0,0,.35); }
.fl-loupe::before { width: 14px; height: 2px; translate: -50% -50%; } .fl-loupe::after { width: 2px; height: 14px; translate: -50% -50%; }
.fl-loupe.lock { animation: fl-lock 520ms var(--sp-reward); }
@keyframes fl-lock { 40% { scale: 1.18; } }
.fl-sw { width: 26px; height: 26px; border-radius: 8px; flex: none; border: 1.5px dashed rgba(255,255,255,.4); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }

/* Copy text from screen */
.fl-poster { position: absolute; width: 480px; height: 160px; border-radius: 14px; background: #f1f1ef; color: #111; overflow: hidden; }
.fl-pt { position: absolute; left: 24px; top: 30px; display: flex; flex-direction: column; gap: 8px; }
.fl-pt b { font: 700 24px/1 -apple-system, system-ui; letter-spacing: -.02em; } .fl-pt span { font-size: 13px; color: #555; }
.fl-qr { position: absolute; left: 344px; top: 24px; width: 112px; height: 112px; border: 8px solid #f1f1ef; box-sizing: border-box; border-radius: 4px;
  background: repeating-conic-gradient(#111 0 25%, #f1f1ef 0 50%) 0 0 / 16px 16px; outline: 2px solid #111; outline-offset: -8px; }
.fl-tg { position: absolute; border: 0; background: none; cursor: pointer; border-radius: 8px; }
.fl-tg:hover { background: rgba(10,132,255,.1); } .fl-tg:focus-visible { outline: 2px solid var(--notch-blue); }
.fl-sel { position: absolute; border: 2px solid var(--notch-blue); border-radius: 8px; background: rgba(10,132,255,.2); opacity: 0; overflow: hidden; pointer-events: none;
  transition: left 480ms var(--ease-quint), top 480ms var(--ease-quint), width 480ms var(--ease-quint), height 480ms var(--ease-quint), opacity 200ms, border-color 250ms, background 250ms; }
.fl-sel.on { opacity: 1; }
.fl-sel.ok { border-color: var(--notch-green); background: rgba(48,209,88,.2); }
.fl-sel.scan::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--notch-blue); box-shadow: 0 0 10px var(--notch-blue); animation: fl-scan 900ms var(--ease-inout) infinite alternate; }
@keyframes fl-scan { from { top: 0; } to { top: calc(100% - 3px); } }

/* Disk image installer */
.fl-disk { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 14px; font-size: 30px; color: #fff; background: linear-gradient(160deg, #8a8d99, #4b4e59); box-shadow: 0 8px 18px rgba(0,0,0,.4); }
.fl-appi { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; flex: none; font-size: 22px; background: linear-gradient(135deg, #3b82f6, #7c5cff); }
.fl-di .row > span:nth-child(2) { flex: 1; min-width: 0; }
.fl-di small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fl-steps { display: grid; gap: 8px; margin-top: 14px; }
.fl-steps li { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--notch-text-2); transition: color var(--m-base); }
.fl-steps i { position: relative; width: 18px; height: 18px; border-radius: 50%; flex: none; border: 1.5px solid rgba(255,255,255,.3); box-sizing: border-box; }
.fl-steps .run { color: var(--notch-text); }
.fl-steps .run i { border-color: rgba(255,255,255,.25); border-top-color: #fff; animation: fl-spin 700ms linear infinite; }
.fl-steps .ok { color: var(--notch-text); }
.fl-steps .ok i { background: var(--notch-green); border-color: var(--notch-green); animation: pop 420ms var(--sp-reward); }
.fl-steps .ok i::after { content: ""; position: absolute; left: 4px; top: 4px; width: 7px; height: 4px; border: solid #fff; border-width: 0 0 2px 2px; rotate: -45deg; }
@keyframes fl-spin { to { rotate: 360deg; } }

/* Media */
.fl-mr { display: grid; grid-template-columns: 24px 56px 1fr 66px; align-items: center; gap: 12px; width: 100%; height: 44px; padding: 0 12px; margin-bottom: 4px;
  border-radius: 12px; text-align: left; color: var(--notch-text); background: rgba(255,255,255,.05); transition: background var(--m-base), opacity var(--m-base); position: relative; }
.fl-mr:hover { background: rgba(255,255,255,.1); }
.fl-mr[aria-pressed="false"] { opacity: .45; }
.fl-mr:focus-visible { outline: 2px solid var(--notch-blue); outline-offset: 2px; }
.fl-mr .ic { font-size: 18px; color: var(--notch-text-2); }
.fl-mr .t2 { text-align: right; }
.fl-gif { display: grid; place-items: center; width: 22px; height: 16px; border-radius: 4px; font: 700 8px/1 system-ui; color: #000; background: var(--notch-text-2); }
.fl-bar { position: relative; height: 8px; border-radius: 4px; background: rgba(255,255,255,.1); overflow: hidden; }
.fl-bar i { position: absolute; inset: 0 auto 0 0; border-radius: 4px; background: var(--notch-teal); transition: width 900ms var(--ease-inout), background 400ms; }
.fl-mr.done .fl-bar i { background: var(--notch-green); }
.fl-mr.done .t2 { color: var(--notch-green); }
.fl-act { margin-top: 10px; justify-content: space-between; }

/* Paste as plain text */
.fl-box { position: absolute; padding: 10px 18px; border-radius: 12px; background: #1c1d22; border: 1px solid #2a2b31; height: 62px; box-sizing: border-box; }
.fl-box > small { display: block; margin-bottom: 4px; font-size: 11px; font-weight: 600; color: #8a8c96; }
.fl-tag { position: absolute; right: 14px; top: 10px; padding: 3px 9px; border-radius: 9px; font-size: 11px; font-weight: 600; background: var(--notch-green); color: #000; opacity: 0; scale: .8; transition: opacity 250ms, scale 350ms var(--sp-reward); }
.fl-box.copied .fl-tag { opacity: 1; scale: 1; }
.fl-box.focus { border-color: rgba(10,132,255,.9); box-shadow: 0 0 0 3px rgba(10,132,255,.3); }
.fl-tx { font-size: 15px; line-height: 24px; color: #e8e9ee; white-space: nowrap; }
.fl-box.tgt .fl-tx { opacity: 0; transition: opacity 300ms; } .fl-box.tgt.has .fl-tx { opacity: 1; }
.fl-r1, .fl-r2, .fl-r3 { transition: color 350ms, background-color 350ms, font-size 350ms, text-decoration-color 350ms; }
.fl-tx.rich .fl-r1 { font: 700 20px Georgia, serif; color: #ff7ab6; }
.fl-tx.rich .fl-r2 { padding: 0 5px; border-radius: 4px; background: #ffe27a; color: #1d1d1f; font-weight: 700; }
.fl-tx.rich .fl-r3 { font-style: italic; color: #6bccff; text-decoration: underline; }

/* Screen recording */
.fl-area { position: absolute; border: 2px dashed rgba(255,255,255,.85); border-radius: 6px; background: rgba(255,255,255,.04);
  transition: left 480ms var(--ease-quint), top 480ms var(--ease-quint), width 480ms var(--ease-quint), height 480ms var(--ease-quint), border-color 250ms; }
.fl-area > b { position: absolute; width: 14px; height: 14px; border: 3px solid #fff; border-radius: 3px; }
.fl-area > b:nth-child(1) { left: -5px; top: -5px; border-right: 0; border-bottom: 0; } .fl-area > b:nth-child(2) { right: -5px; top: -5px; border-left: 0; border-bottom: 0; }
.fl-area > b:nth-child(3) { left: -5px; bottom: -5px; border-right: 0; border-top: 0; } .fl-area > b:nth-child(4) { right: -5px; bottom: -5px; border-left: 0; border-top: 0; }
.fl-area.rec { border-style: solid; border-color: var(--notch-red); }
.fl-area.rec > b { border-color: var(--notch-red); }
.fl-recl { position: absolute; left: 10px; bottom: 10px; display: none; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 10px; font-size: 11px; font-weight: 600; background: rgba(0,0,0,.6); }
.fl-area.rec .fl-recl { display: inline-flex; }
.fl-rec .dot { width: 9px; height: 9px; }
.fl-rc .row { justify-content: space-between; }
.fl-clip { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; flex: none; font-size: 18px; background: rgba(255,69,58,.85); }
.fl-ed .row > span:nth-child(2) { flex: 1; min-width: 0; }
.fl-tl { position: relative; height: 54px; margin-top: 18px; border-radius: 10px; overflow: hidden;
  background: repeating-linear-gradient(90deg, #3b4a78 0 38px, #4a5d94 38px 76px); }
.fl-dl, .fl-dr { position: absolute; top: 0; bottom: 0; width: 0; background: rgba(0,0,0,.62); transition: width 700ms var(--ease-quint); }
.fl-dl { left: 0; } .fl-dr { right: 0; }
.fl-tl.trim .fl-dl { width: 16%; } .fl-tl.trim .fl-dr { width: 14%; }
.fl-th { position: absolute; top: 0; bottom: 0; width: 8px; background: var(--notch-amber); transition: left 700ms var(--ease-quint), right 700ms var(--ease-quint); }
.fl-th.l { left: 0; border-radius: 6px 0 0 6px; } .fl-th.r { right: 0; border-radius: 0 6px 6px 0; }
.fl-tl.trim .fl-th.l { left: 16%; } .fl-tl.trim .fl-th.r { right: 14%; }
.fl-pl { position: absolute; top: -2px; bottom: -2px; left: 30%; width: 2px; background: #fff; }
.fl-tl.trim .fl-pl { animation: fl-play 1.6s linear infinite; }
@keyframes fl-play { from { left: 18%; } to { left: 80%; } }

/* Screenshot */
.fl-snap { position: absolute; border: 2px solid #fff; box-shadow: 0 0 0 1600px rgba(0,0,0,.45); transition: width 900ms var(--ease-inout), height 900ms var(--ease-inout); }
.fl-flash { position: absolute; left: 0; top: 0; width: 1512px; height: 982px; background: #fff; pointer-events: none; animation: fl-flash 420ms var(--ease-out) forwards; }
@keyframes fl-flash { from { opacity: .85; } to { opacity: 0; } }
.fl-sh { gap: 14px; }
.fl-shot { position: relative; width: 220px; height: 140px; flex: none; border-radius: 10px; overflow: hidden; background: linear-gradient(160deg, #1d3a6b, #44235f); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); }
.fl-sa, .fl-sb { position: absolute; border-radius: 6px; background: rgba(255,255,255,.14); }
.fl-sa { left: 14px; top: 14px; width: 92px; height: 58px; } .fl-sb { left: 124px; top: 36px; width: 80px; height: 84px; background: rgba(255,255,255,.08); }
.fl-shot svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.fl-an { fill: none; stroke: #ff453a; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 600ms var(--ease-out); }
.fl-an.on { stroke-dashoffset: 0; }
.fl-an.fl-at { fill: #ff453a; stroke: none; font: 700 16px system-ui; opacity: 0; transition: opacity 400ms; } .fl-an.fl-at.on { opacity: 1; }
.fl-tools { flex: 1; display: grid; align-content: space-between; min-width: 0; }
.fl-tool { position: relative; height: 30px; padding: 0 14px; border-radius: 15px; text-align: left; font: 600 12px/1 -apple-system, system-ui; color: var(--notch-text-2);
  background: rgba(255,255,255,.08); transition: background var(--m-base), color var(--m-base), transform var(--m-fast) var(--ease-quint); }
.fl-tool::after { content: ""; position: absolute; inset: -4px 0; }
.fl-tool:hover { color: var(--notch-text); } .fl-tool.on { background: var(--notch-blue); color: #fff; } .fl-tool.press { transform: scale(.94); }
.fl-tool:focus-visible { outline: 2px solid var(--notch-blue); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .fl-ft, .fl-trk, .fl-loupe, .fl-sel, .fl-area, .fl-bar i, .fl-snap, .fl-an, .fl-dl, .fl-dr, .fl-th, .fl-tag, .fl-r1, .fl-r2, .fl-r3 { transition: none; }
  .fl-loupe.lock, .fl-sel.scan::after, .fl-steps .run i, .fl-steps .ok i, .fl-flash, .fl-tl.trim .fl-pl { animation: none; }
  .fl-flash { display: none; }
}