/* 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);
}

/* Search: a name field and a Filters toggle on the path's line; the filters
 * fold out below as a grid that wraps to as many columns as the width allows. */
/* The path takes about two thirds of the line and the search one third, with
 * a clear gap between them; on a narrow screen they wrap, close together. */
.files-top {
  display: flex;
  flex-wrap: wrap;
  column-gap: 1.25rem;
  row-gap: .5rem;
  align-items: center;
}
.files-top > .files-path-row { flex: 2 1 20rem; min-width: 0; }
.files-top > .files-search-row { flex: 1 1 13rem; min-width: 0; }
.files-search-row {
  display: flex;
  gap: .35rem;
  align-items: center;
}
.files-search-field {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
}
.files-search-icon {
  position: absolute;
  left: .55rem;
  top: 50%;
  margin-top: -7.5px;
  color: var(--muted);
  pointer-events: none;
}
.files-search-q {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  background: var(--bg3);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 6px;
  padding: .4rem .55rem .4rem 1.95rem;
  font-size: 13px;
}
.files-filters-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  background: var(--bg3);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 6px;
  padding: .35rem .65rem;
  font-size: 13px;
  cursor: pointer;
}
.files-filters-btn:hover,
.files-filters-btn[aria-expanded="true"] { border-color: var(--accent); }
.files-filters-count {
  min-width: 1.2rem;
  height: 1.2rem;
  padding: 0 .35rem;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2rem;
  text-align: center;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
}
.files-filters-count[hidden] { display: none; }
.files-filters {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  gap: .5rem .75rem;
  padding: .6rem .7rem;
  background: var(--surface-control);
  border: 1px solid var(--outline-subtle);
  border-radius: 8px;
}
.files-filters[hidden] { display: none; }
.files-filter {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  min-width: 0;
  font-size: 12px;
  color: var(--muted);
}
.files-filter input,
.files-filter select {
  width: 100%;
  min-width: 0;
  background: var(--bg3);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 6px;
  padding: .35rem .5rem;
  font-size: 13px;
}
.files-filter-wide, .files-filters-foot { grid-column: 1 / -1; }
/* The two size fields share their own line below the dates: compact, side
 * by side and left-aligned, narrowing together on a phone. */
.files-filter-size {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-start;
  gap: .75rem;
}
.files-filter-size > .files-filter { flex: 0 1 9.5rem; }
/* What the size field was read as ("20 MiB"), or that it was not. The line
 * keeps its height while empty so the filters do not jump while typing. */
.files-size-hint {
  min-height: 1.15em;
  font-size: 11px;
  line-height: 1.15;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.files-size-hint.is-invalid { color: var(--warn); }
.files-filter input[aria-invalid="true"] { border-color: color-mix(in srgb, var(--warn) 55%, var(--border)); }

/* Type presets: the page's small secondary buttons, lit while the type field
 * holds exactly their extensions. */
.files-presets { display: flex; flex-wrap: wrap; gap: .35rem; }
button.files-preset {
  background: var(--bg3);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 6px;
  padding: .35rem .65rem;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}
button.files-preset:hover { border-color: var(--accent); }
button.files-preset[aria-pressed="true"] {
  background: var(--accent-soft);
  border-color: var(--accent-dim);
}
.files-filters-foot { display: flex; justify-content: flex-end; }

/* Modified from / until: a button that looks like the other fields and opens
 * a small calendar under it (files.js renderPicker). Two tracks wide: a date
 * with a time ("10. märts 2026, 14:30") does not fit in one; on a phone each
 * takes its own line. */
.files-filters > .files-date { grid-column: span 2; }
.files-date-box { position: relative; min-width: 0; }
button.files-date-trigger {
  width: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: .4rem;
  background: var(--bg3);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 6px;
  padding: .35rem .5rem;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.2;
  text-align: left;
  cursor: pointer;
}
button.files-date-trigger.has-value { padding-right: 1.9rem; }
button.files-date-trigger:hover,
button.files-date-trigger[aria-expanded="true"] { background: var(--bg3); border-color: var(--accent); color: var(--text); }
button.files-date-trigger:active { transform: none; }
button.files-date-trigger:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.files-date-icon { flex: 0 0 auto; color: var(--muted); }
.files-date-text {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.files-date-text.is-placeholder { color: var(--muted); }
button.files-date-clear {
  position: absolute;
  top: 0;
  bottom: 0;
  right: .2rem;
  margin: auto 0;
  width: 1.5rem;
  height: 1.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 4px;
  color: var(--muted);
  font-size: 15px;
  font-weight: 400;
  line-height: 1;
  cursor: pointer;
}
button.files-date-clear[hidden] { display: none; }
button.files-date-clear:hover { background: var(--surface-hover); border: 0; color: var(--text); }
button.files-date-clear:active { transform: none; }

.files-date-pop {
  position: absolute;
  z-index: 40;
  top: calc(100% + 4px);
  left: 0;
  /* Seven day cells of at least 34px: a comfortable touch target. */
  width: 272px;
  max-width: calc(100vw - 16px);
  box-sizing: border-box;
  padding: .5rem;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow-pop);
  color: var(--text);
  font-size: 13px;
}
.files-date-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .25rem;
  margin-bottom: .35rem;
}
.files-date-month {
  flex: 1 1 auto;
  text-align: center;
  font-weight: 600;
  text-transform: capitalize;
}
.files-date-pop button {
  font-weight: 400;
  line-height: 1;
}
.files-date-pop button:active { transform: none; }
.files-date-pop button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
button.files-date-nav {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  padding: 0;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-size: 17px;
}
button.files-date-nav:hover { background: var(--bg3); border-color: var(--accent); color: var(--text); }
.files-date-weekdays,
.files-date-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 2px;
}
.files-date-weekdays span {
  text-align: center;
  font-size: 11px;
  color: var(--muted);
  padding: .2rem 0;
  text-transform: uppercase;
}
button.files-date-day {
  height: 34px;
  min-width: 0;
  padding: 0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--text);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
button.files-date-day:hover { background: var(--surface-hover); border-color: var(--border); color: var(--text); }
button.files-date-day.is-outside { color: var(--muted); opacity: .6; }
button.files-date-day.is-today { border-color: var(--accent-dim); font-weight: 600; }
button.files-date-day.is-in-range { background: var(--accent-soft); }
button.files-date-day.is-range-end { background: var(--accent-soft); border-color: var(--accent-dim); }
button.files-date-day.is-selected,
button.files-date-day.is-selected:hover {
  background: var(--accent-solid);
  border-color: var(--accent-solid);
  color: var(--on-accent-solid, #fff);
  font-weight: 600;
  opacity: 1;
}
.files-date-foot {
  display: flex;
  justify-content: space-between;
  gap: .5rem;
  margin-top: .45rem;
  padding-top: .45rem;
  border-top: 1px solid var(--border);
}
button.files-date-act {
  min-height: 34px;
  padding: .35rem .65rem;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-size: 13px;
}
button.files-date-act:hover { background: var(--bg3); border-color: var(--accent); color: var(--text); }

/* Time of day under the calendar: "Specify time", or the time set with a
 * cross to drop it; the time view (below) picks it. */
.files-date-time {
  margin-top: .45rem;
  padding-top: .45rem;
  border-top: 1px solid var(--border);
}
button.files-date-time-add {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
}
.files-date-time-icon { flex: 0 0 auto; color: var(--muted); }
.files-date-time-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .4rem .5rem;
}
.files-date-time-field {
  display: flex;
  align-items: center;
  gap: .4rem;
  min-width: 0;
  color: var(--muted);
  font-size: 12px;
}
.files-date-pop input.files-date-time-input {
  width: 4.6rem;
  min-width: 0;
  height: 34px;
  box-sizing: border-box;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  padding: .35rem .5rem;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  text-align: center;
}
/* One ring in focus: the border plus a 1px shadow flush with it. A text field
 * always matches :focus-visible, so an outline on top of the border drew a
 * second ring with a gap. */
.files-date-pop input.files-date-time-input:focus,
.files-date-pop input.files-date-time-input:focus-visible {
  border-color: var(--accent);
  outline: none;
  box-shadow: 0 0 0 1px var(--accent);
}
.files-date-pop input.files-date-time-input[aria-invalid="true"] { border-color: color-mix(in srgb, var(--warn) 55%, var(--border)); }
.files-date-pop input.files-date-time-input[aria-invalid="true"]:focus { box-shadow: 0 0 0 1px color-mix(in srgb, var(--warn) 55%, var(--border)); }
.files-date-time-hint {
  margin-top: .3rem;
  font-size: 11px;
  line-height: 1.2;
  color: var(--warn);
}
.files-date-time-hint:empty { display: none; }

/* The time set, under the calendar: pressed, it opens the hours and minutes. */
.files-date-pop button.files-date-time-chip {
  min-height: 34px;
  min-width: 4.6rem;
  padding: .35rem .7rem;
  background: var(--accent-soft);
  border: 1px solid var(--accent-dim);
  border-radius: 6px;
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.files-date-pop button.files-date-time-chip:hover { background: var(--accent-soft); border-color: var(--accent); color: var(--text); }
/* The time and its cross, joined: the hovered or focused half on top, so its
 * whole border shows. */
.files-date-time-pill { display: inline-flex; align-items: stretch; }
.files-date-pop .files-date-time-pill button { position: relative; }
.files-date-pop .files-date-time-pill button:hover,
.files-date-pop .files-date-time-pill button:focus-visible { z-index: 1; }
.files-date-pop .files-date-time-pill button.files-date-time-chip { border-radius: 6px 0 0 6px; }
.files-date-pop button.files-date-time-x {
  width: 34px;
  min-height: 34px;
  margin-left: -1px;
  padding: 0;
  background: var(--accent-soft);
  border: 1px solid var(--accent-dim);
  border-radius: 0 6px 6px 0;
  color: var(--muted);
  font-size: 17px;
}
.files-date-pop button.files-date-time-x:hover { background: var(--accent-soft); border-color: var(--accent); color: var(--text); }

/* The time view, in place of the days: the field, then the hours and the
 * minutes as cells like the days. */
.files-time-display { display: flex; justify-content: center; margin: .15rem 0 .1rem; }
.files-date-pop .files-time-display input.files-date-time-input {
  width: 6.5rem;
  height: 40px;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: .03em;
}
.files-time-display + .files-date-time-hint { text-align: center; }
.files-time-label {
  margin: .45rem 0 .2rem;
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.files-time-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 2px;
}
.files-date-pop button.files-time-cell {
  height: 32px;
  min-width: 0;
  padding: 0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--text);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.files-date-pop button.files-time-cell:hover { background: var(--surface-hover); border-color: var(--border); color: var(--text); }
.files-date-pop button.files-time-cell.is-selected,
.files-date-pop button.files-time-cell.is-selected:hover,
.files-date-pop button.files-date-act.is-primary,
.files-date-pop button.files-date-act.is-primary:hover {
  background: var(--accent-solid);
  border-color: var(--accent-solid);
  color: var(--on-accent-solid, #fff);
  font-weight: 600;
}
.files-date-pop button.files-date-act.is-primary { flex: 1 1 auto; }
.files-date-pop button.files-date-act.is-primary:hover { filter: brightness(1.08); }

.files-search-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .5rem;
  margin: .25rem .5rem .5rem;
  font-size: 13px;
  color: var(--muted);
}
.files-search-title { min-width: 0; overflow-wrap: anywhere; }
.files-search-clear {
  background: var(--bg3);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 6px;
  padding: .25rem .6rem;
  font-size: 12px;
  cursor: pointer;
}
.files-search-clear:hover { border-color: var(--accent); }

.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;
}
/* A search result: its name, and under it the folder it sits in. */
.files-row-name--stacked {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.files-row-title, .files-row-where {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.files-row-where { color: var(--muted); font-size: 11px; }
.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; }
  /* Two filter columns still fit a 320 px phone. */
  .files-filters { grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)); padding: .5rem; }
}

/* 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;
}