/* FireCraft Files — same CopperForge design tokens as the chat UI. */

.files { padding: clamp(var(--space-lg), 4vw, var(--space-2xl)); display: flex; flex-direction: column; gap: var(--space-lg); }
.files__head { display: flex; align-items: center; gap: var(--space-md); flex-wrap: wrap; }
.files__head h1 { font-size: var(--text-h2); margin: 0; }
.files__sub { color: var(--color-muted); font-size: var(--text-sm); }
.files__actions { display: flex; gap: var(--space-xs); flex-wrap: wrap; margin-left: auto; }

.files__bar { display: flex; flex-direction: column; gap: var(--space-sm); }
.files__crumbs { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: var(--text-sm); color: var(--color-muted); }
.files__crumbs button {
  border: 0; background: transparent; color: var(--color-ink-2); font: inherit;
  padding: 4px 6px; border-radius: var(--radius-sm); cursor: pointer;
}
.files__crumbs button:hover { background: var(--color-paper-3); color: var(--color-ink); }
.files__crumbs .sep { opacity: .45; }

.files__tools { display: flex; gap: var(--space-sm); align-items: center; flex-wrap: wrap; }
.files__search { position: relative; flex: 1 1 220px; max-width: 380px; }
.files__search input {
  width: 100%; min-height: 40px; padding: 8px 12px 8px 34px;
  background: var(--color-paper-2); border: 1px solid var(--color-rule);
  border-radius: var(--radius-pill); color: var(--color-ink); font: inherit; font-size: var(--text-sm);
}
.files__search svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; stroke: var(--color-muted); fill: none; stroke-width: 2; }

.files__usage { display: flex; align-items: center; gap: var(--space-sm); font-size: var(--text-xs); color: var(--color-muted); }
.files__usage .track { flex: 1; height: 6px; border-radius: 99px; background: var(--color-paper-3); overflow: hidden; min-width: 120px; max-width: 320px; }
.files__usage .fill { height: 100%; background: var(--color-accent); border-radius: 99px; }

.files__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--space-sm); }
.file-card {
  position: relative; display: flex; flex-direction: column; gap: 8px;
  padding: var(--space-sm); min-height: 118px;
  background: var(--color-paper-2); border: 1px solid var(--color-rule);
  border-radius: var(--radius-md); cursor: pointer; text-align: left;
  color: var(--color-ink); transition: border-color var(--dur-micro) var(--ease-out), background-color var(--dur-micro) var(--ease-out);
}
.file-card:hover { border-color: var(--color-muted); background: var(--color-paper-3); }
.file-card__icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: var(--radius-sm); background: color-mix(in oklab, var(--color-accent) 14%, transparent); color: var(--color-accent); }
.file-card__icon svg { width: 19px; height: 19px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.file-card--dir .file-card__icon { background: color-mix(in oklab, var(--color-ink) 8%, transparent); color: var(--color-ink-2); }
.file-card__name { font-size: var(--text-sm); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-card__meta { font-size: var(--text-xs); color: var(--color-muted); }
.file-card__thumb { width: 100%; height: 88px; border-radius: var(--radius-sm); object-fit: cover; background: var(--color-paper-3); }
.file-card__menu {
  position: absolute; top: 6px; right: 6px; width: 28px; height: 28px; border-radius: 50%;
  border: 1px solid transparent; background: transparent; color: var(--color-muted);
  cursor: pointer; display: grid; place-items: center; font-size: 16px; line-height: 1;
}
.file-card__menu:hover { background: var(--color-paper); border-color: var(--color-rule); color: var(--color-ink); }
.file-card__menu-panel {
  position: absolute; top: 34px; right: 6px; z-index: 5; min-width: 150px;
  background: var(--color-paper); border: 1px solid var(--color-rule); border-radius: var(--radius-md);
  box-shadow: 0 12px 30px rgba(0,0,0,.35); padding: 4px; display: flex; flex-direction: column;
}
.file-card__menu-panel button {
  text-align: left; padding: 8px 10px; border: 0; background: transparent;
  color: var(--color-ink); font: inherit; font-size: var(--text-sm); border-radius: var(--radius-sm); cursor: pointer;
}
.file-card__menu-panel button:hover { background: var(--color-paper-3); }
.file-card__menu-panel button[data-act="delete"] { color: var(--color-error); }

.files__empty { padding: var(--space-2xl) var(--space-lg); text-align: center; color: var(--color-muted); border: 1px dashed var(--color-rule); border-radius: var(--radius-md); }
.files__drop { outline: 2px dashed var(--color-accent); outline-offset: -8px; border-radius: var(--radius-md); }

.files__note { font-size: var(--text-xs); color: var(--color-muted); }
.files__toast { position: sticky; bottom: var(--space-md); align-self: flex-start; }

/* preview modal */
.files__modal { position: fixed; inset: 0; z-index: 60; background: rgba(8,10,14,.72); display: grid; place-items: center; padding: var(--space-md); }
.files__modal-card { background: var(--color-paper); border: 1px solid var(--color-rule); border-radius: var(--radius-lg); width: min(1100px, 100%); height: min(88vh, 900px); display: flex; flex-direction: column; overflow: hidden; }
.files__modal-head { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm) var(--space-md); border-bottom: 1px solid var(--color-rule); }
.files__modal-head strong { font-size: var(--text-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.files__modal-body { flex: 1; min-height: 0; display: grid; place-items: center; background: var(--color-paper-2); }
.files__modal-body img { max-width: 100%; max-height: 100%; object-fit: contain; }
.files__modal-body iframe, .files__modal-body video { width: 100%; height: 100%; border: 0; background: #000; }
.files__modal-body pre { width: 100%; height: 100%; margin: 0; padding: var(--space-md); overflow: auto; font-family: var(--font-outlier); font-size: var(--text-sm); white-space: pre-wrap; }

/* standalone login (files.firecraft.fun) */
.files-login { min-height: 100dvh; display: grid; place-items: center; padding: var(--space-xl) var(--space-md); background: var(--color-paper); }
.files-login__card { width: min(420px, 100%); background: var(--color-paper-2); border: 1px solid var(--color-rule); border-radius: var(--radius-lg); padding: var(--space-xl); display: flex; flex-direction: column; gap: var(--space-md); }
.files-login__card img { width: 76px; height: 76px; margin: 0 auto; }
.files-login__card h1 { font-size: var(--text-h3); margin: 0; text-align: center; }
.files-login__card p { margin: 0; text-align: center; color: var(--color-muted); font-size: var(--text-sm); }
.files-login__accounts { display: grid; gap: var(--space-xs); }
.files-login__acc { text-align: left; padding: var(--space-sm) var(--space-md); border-radius: var(--radius-md); border: 1px solid var(--color-rule); background: var(--color-paper); color: var(--color-ink); cursor: pointer; font: inherit; }
.files-login__acc[aria-pressed="true"] { border-color: var(--color-accent); background: color-mix(in oklab, var(--color-accent) 10%, var(--color-paper)); }
.files-login__acc small { display: block; color: var(--color-muted); font-size: var(--text-xs); }
.files-login input { min-height: 44px; padding: 8px 12px; border-radius: var(--radius-sm); border: 1px solid var(--color-rule); background: var(--color-paper); color: var(--color-ink); font: inherit; }
.files-login__err { color: var(--color-error); font-size: var(--text-sm); min-height: 1em; }

/* standalone header */
.files-top { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm) var(--space-lg); border-bottom: 1px solid var(--color-rule); background: var(--color-paper-2); }
.files-top img { width: 28px; height: 28px; }
.files-top strong { font-family: var(--font-display); letter-spacing: var(--tracking-display); }
.files-top .who { margin-left: auto; color: var(--color-muted); font-size: var(--text-sm); display: flex; align-items: center; gap: var(--space-sm); }

@media (max-width: 700px) {
  .files { padding: var(--space-md); }
  .files__grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .files__actions { width: 100%; margin-left: 0; }
  .file-card__thumb { height: 74px; }
}