/* Server access -> Files. Loaded lazily alongside files.js when the user
 * first opens the Files sub-tab (server_access.js -> initFilesPanel). */

.files-bar {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  margin-bottom: .75rem;
}
.files-path-row {
  display: flex;
  gap: .35rem;
  align-items: center;
}
.files-path {
  flex: 1 1 auto;
  min-width: 0;
  background: var(--bg3);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 6px;
  padding: .4rem .55rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
}
.files-up, .files-go {
  flex: 0 0 auto;
  background: var(--bg3);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 6px;
  padding: .35rem .65rem;
  cursor: pointer;
}
.files-up:disabled { opacity: .35; cursor: not-allowed; }
.files-up:hover:not(:disabled), .files-go:hover { border-color: var(--accent); }

.files-actions {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
}
.files-action-btn {
  background: var(--accent-soft);
  border: 1px solid var(--accent-dim);
  color: var(--text);
  border-radius: 6px;
  padding: .4rem .75rem;
  cursor: pointer;
  font-size: 13px;
}
.files-action-btn.secondary {
  background: var(--bg3);
  border-color: var(--border);
}
.files-action-btn:hover { border-color: var(--accent); }
.files-toggle {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: 13px;
  color: var(--muted);
  cursor: pointer;
  user-select: none;
}
/* base.css styles every input as a full-width text field; a checkbox has to
 * opt out or it stretches across the row and pushes its label away. */
.files-toggle input {
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  margin: 0;
  padding: 0;
  accent-color: var(--accent);
  cursor: pointer;
}
.files-toggle input:focus { box-shadow: none; }
.files-toggle input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.files-toggle:hover { color: var(--text); }
/* How many hidden and system entries this folder holds. Muted while they are
 * held back, accent once the toggle shows them. */
.files-hidden-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.4rem;
  height: 1.25rem;
  padding: 0 .4rem;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--muted);
  background: var(--bg3);
  border: 1px solid var(--border);
  transition: color .15s, background .15s, border-color .15s;
}
.files-hidden-count[hidden] { display: none; }
.files-toggle input:checked ~ .files-hidden-count {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
}

.files-drop {
  position: relative;
  border: 1px dashed transparent;
  border-radius: 8px;
  padding: .5rem;
  min-height: 220px;
  transition: border-color .15s, background .15s;
}
.files-drop.is-dropping {
  border-color: var(--accent);
  background: var(--accent-softer);
}

/* The listing scrolls on its own, like the terminal's frame: a folder of a
 * thousand files must not stretch the Settings dialog a thousand rows tall
 * and carry the path bar and the buttons out of sight with it. The height
 * tracks the window, capped on tall monitors, and the scroll stays inside
 * the list instead of running on into the dialog when it reaches the end. */
.files-list {
  max-height: clamp(260px, 55vh, 640px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) transparent;
}
.files-list::-webkit-scrollbar { width: 8px }
.files-list::-webkit-scrollbar-track { background: transparent }
.files-list::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 4px }
.files-list::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover) }

/* With the File manager category in front — picked in the Settings list, or
 * shown on its own (the sidebar's File manager shortcut, the agent's
 * open_panel tool) — the file manager fills the dialog: the listing takes
 * every row the dialog has to give and is the one thing that scrolls, the
 * path bar above and the upload tray below stay put, and the dialog never
 * scrolls behind it — two scrollbars side by side was the old way. shell.css
 * passes the dialog's height down to the card; from the card on down it is
 * the tool's own business. The cap above stays for "All options", where the
 * listing is one card on a scrolling page. */
.settings-view[data-category="files"] .files-panel,
.settings-view[data-category="files"] .files-drop {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.settings-view[data-category="files"] .files-list {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
}

.files-hint, .files-empty, .files-error {
  margin: 1rem .5rem;
  color: var(--muted);
  font-size: 13px;
}
.files-error { color: var(--file-danger); }

.files-table { display: flex; flex-direction: column; }
.files-row {
  display: grid;
  /* Last column is fixed-width so dir rows (2 buttons) and file rows (3) keep
   * the size + mtime columns vertically aligned. Fits 3×28px + 2×.25rem gap. */
  grid-template-columns: 1.4rem 1fr 5rem 9rem 5.75rem;
  gap: .5rem;
  align-items: center;
  padding: .35rem .5rem;
  border-radius: 6px;
  font-size: 13px;
  color: var(--text);
}
.files-row[data-nav] { cursor: pointer; }
.files-row:hover { background: var(--surface-hover); }
.files-row-icon { text-align: center; }
.files-row-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.files-row-size, .files-row-mtime {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  text-align: right;
}
.files-link-target { color: var(--muted); font-size: 12px; }
.files-row-err { color: var(--file-danger); font-size: 12px; }

.files-row-actions {
  display: flex;
  gap: .25rem;
  justify-content: flex-end;
}
/* Buttons fade in on hover; the lock in the same column is a status marker
   and stays visible. */
.files-row-act {
  opacity: 0;
  transition: opacity .15s;
}
.files-row:hover .files-row-act,
.files-row:focus-within .files-row-act { opacity: 1; }
@media (hover: none), (pointer: coarse) {
  .files-row-act { opacity: 1; }
}

.files-row-act {
  background: transparent;
  border: 1px solid var(--outline-subtle);
  color: var(--text);
  border-radius: 5px;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 14px;
  padding: 0;
}
.files-row-act:hover { border-color: var(--accent); }
.files-row-act.danger:hover { border-color: var(--file-danger); color: var(--file-danger); }
.files-row-lock {
  background: transparent;
  border: 0;
  padding: 0;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  cursor: help;
}
/* An explanation, not an action: keep base.css button:hover chrome off it. */
.files-row-lock:hover { background: transparent; border: 0; }
.files-row-lock:active { transform: none; }

@media (max-width: 600px) {
  .files-row {
    grid-template-columns: 1.2rem 1fr auto;
    grid-template-areas:
      "icon name actions"
      ".    meta meta";
  }
  .files-row-icon { grid-area: icon; }
  .files-row-name { grid-area: name; }
  .files-row-actions { grid-area: actions; }
  .files-row-act { opacity: 1; }
  /* The time and the size share the second line, the time under the name
     and the size at the end. Both stretched across the area and set right,
     the grid painted one over the other; a cell each, the time's width
     pushed the row past a 320 px phone. */
  .files-row-size, .files-row-mtime { grid-area: meta; }
  .files-row-mtime { justify-self: start; }
  .files-row-size { justify-self: end; }
}

/* Upload progress tray (sticky strip below the list) */
.files-uploads {
  margin-top: .75rem;
  border-top: 1px solid var(--border);
  padding-top: .5rem;
  display: flex;
  flex-direction: column;
  gap: .35rem;
}
.files-upload-row {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  gap: .15rem .5rem;
  background: var(--surface-control);
  border: 1px solid var(--outline-subtle);
  border-radius: 6px;
  padding: .4rem .55rem;
}
.files-upload-meta {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
  display: flex;
  gap: .5rem;
  align-items: center;
  font-size: 13px;
  overflow: hidden;
}
.files-upload-name {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.files-upload-size {
  font-size: 12px; color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.files-upload-cancel {
  grid-column: 2 / 3;
  grid-row: 1 / 3;
  align-self: center;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 5px;
  width: 28px;
  height: 28px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.files-upload-cancel:hover { border-color: var(--file-danger); color: var(--file-danger); }
.files-upload-bar {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
  height: 4px;
  background: var(--bg3);
  border-radius: 2px;
  overflow: hidden;
  margin-top: .25rem;
}
.files-upload-bar-fill {
  height: 100%;
  width: 0%;
  background: var(--accent);
  transition: width .2s linear;
}
.files-upload-bar-fill.errored { background: var(--file-danger); }
.files-upload-status {
  grid-column: 1 / 2;
  grid-row: 3 / 4;
  font-size: 12px;
  color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.files-upload-row { grid-template-rows: auto auto auto; }
.files-upload-err { color: var(--file-danger); }

.files-prompt-input {
  width: 100%;
  background: var(--bg3);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 6px;
  padding: .45rem .55rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}