/* ═══════════════════════════════════════════════════════════
   Files app styles (Phase 1 step 6 — UI unification + token sweep)
   Tokens only: no hardcoded hex, no token fallbacks with literal hex.
   ═══════════════════════════════════════════════════════════ */

/* ── Files View Toggle Buttons ─────────────────────────────────── */
/* The view toggle chips are now OscarUI.iconButton (.ou-icon-btn). These
   rules only set the group container + the toggle sizing/spacing; visual
   states (hover/active) come from .ou-icon-btn. */
.files-view-toggle {
  display: flex;
  gap: 2px;
  margin-right: 8px;
}
.files-view-btn.ou-icon-btn {
  width: 28px;
  height: 24px;
}
.files-view-btn.ou-icon-btn svg { width: 14px; height: 14px; }

/* ── Grid View ─────────────────────────────────────────────────── */
.files-view-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 4px;
  padding: 8px !important;
}
.files-view-grid .files-item {
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 10px 6px;
  gap: 6px;
  border-bottom: none;
  border-radius: var(--radius-lg);
  min-height: 90px;
}
.files-view-grid .files-item:hover {
  background: var(--overlay-1);
}
.files-view-grid .files-item input[type="checkbox"] { display: none; }
.files-view-grid .files-item-icon {
  width: 40px;
  height: 40px;
}
.files-view-grid .files-item-icon svg { width: 36px; height: 36px; }
.files-view-grid .files-item-icon img { width: 40px; height: 40px; object-fit: cover; border-radius: var(--radius-sm); }
.files-view-grid .files-item-info { flex: none; width: 100%; min-width: 0; }
.files-view-grid .files-item-name {
  font-size: var(--fs-xs);
  line-height: 1.3;
  max-height: 2.6em;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-word;
}
.files-view-grid .files-item-meta { display: none; }
.files-view-grid .files-item-actions { display: none; }
.files-view-grid .files-item.selected { outline: 2px solid var(--accent); outline-offset: -2px; }
/* Grid empty/loading states - span full width */
.files-view-grid .files-empty,
.files-view-grid .ou-empty,
.files-view-grid .ou-loading,
.files-view-grid .files-results-banner {
  grid-column: 1 / -1;
}

/* ── Compact List View ─────────────────────────────────────────── */
.files-view-compact .files-item {
  padding: 3px 12px;
  gap: 8px;
  min-height: 0;
  border-bottom-color: var(--overlay-1);
}
.files-view-compact .files-item input[type="checkbox"] { display: none; }
.files-view-compact .files-item-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.files-view-compact .files-item-icon svg { width: 14px; height: 14px; }
.files-view-compact .files-item-icon img { width: 16px; height: 16px; object-fit: cover; border-radius: 2px; }
.files-view-compact .files-item-info { flex: 1; min-width: 0; }
.files-view-compact .files-item-name {
  font-size: var(--fs-sm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.files-view-compact .files-item-name .files-pub-badge { display: none; }
.files-view-compact .files-item-meta {
  display: inline;
  font-size: var(--fs-xs);
  color: var(--text-dim);
  margin-left: 8px;
}
.files-view-compact .files-item-info {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.files-view-compact .files-item-actions { display: none; }
.files-view-compact .files-item:hover .files-item-actions {
  display: flex;
}
.files-view-compact .files-item-actions .files-action-direct { padding: 2px; }
.files-view-compact .files-item-actions .files-action-direct svg { width: 12px; height: 12px; }

/* ── Files list rows (built on OscarUI.listItem) ───────────────── */
/* .files-item now wraps .ou-list-item; keep its row chrome here. */
.files-item.ou-list-item { border-bottom: 1px solid var(--border); border-radius: 0; }
.files-item.selected { background: var(--accent-tint); }  /* §4: live accent-tint, not a frozen rgba */
.files-item.drag-over { outline: 2px dashed var(--accent); outline-offset: -2px; background: var(--accent-tint); }
.files-item.dragging { opacity: .4; }
.files-item input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border: 1.5px solid var(--overlay-3);
  border-radius: var(--radius-sm);
  background: var(--overlay-1);
  cursor: pointer;
  flex-shrink: 0;
  position: relative;
  transition: all .15s;
}
.files-item input[type="checkbox"]:hover {
  border-color: var(--border-strong);
  background: var(--overlay-2);
}
.files-item input[type="checkbox"]:checked {
  background: var(--accent);
  border-color: var(--accent);
}
.files-item input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 1px;
  width: 5px;
  height: 9px;
  border: solid var(--text-on-accent);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* Search-result rows carry the containing-dir on the meta line. */
.files-item-meta-search { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.files-item-dir { color: var(--accent); font-size: var(--fs-xs); }

/* Breadcrumb "Search Results" current crumb. */
.files-breadcrumb-current { color: var(--accent); display: inline-flex; align-items: center; }
.files-breadcrumb-current-icon { vertical-align: -2px; margin-right: 4px; }

/* Search results count banner. */
.files-results-banner { padding: 8px 16px; font-size: var(--fs-sm); color: var(--text-dim); border-bottom: 1px solid var(--border); }

/* ── Drive account pills (was inline cssText) ──────────────────── */
.drive-account-pill {
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
}
.drive-account-pill.active {
  background: var(--accent);
  color: var(--text-on-accent);
  border-color: var(--accent);
}

/* Brand-ish filetype tile colors live here (--c hook), not baked into the SVG.
   Folder hue = categorical amber. Brand filetype glyphs (PDF/Word/Excel/…) keep
   their own multi-color brand fills (§3.5 exemption). */
.files-item-icon.files-folder { --c: var(--c3); }
.files-item-icon.files-folder svg { color: var(--c); }

/* Drive rows reuse .files-item — only the slightly smaller icon differs. */
.drive-item-icon { width: 24px; height: 24px; background: transparent; }
.drive-item-icon svg { width: 20px; height: 20px; }

/* ── Cursor anchor for OscarUI.menu opened from a right-click ───── */
.ou-menu-cursor-anchor { position: fixed; width: 0; height: 0; pointer-events: none; }

/* ── Preview header (OscarUI.subHeader, replaces floating toolbar) ─ */
/* The preview overlay used to carry a position:absolute floating toolbar
   with a bare X. It is now a flow subHeader at the top of the overlay so
   nothing escapes into .chat-main. */
.files-preview-overlay .files-preview-header.ou-subheader {
  flex-shrink: 0;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.files-preview-header .ou-subheader-actions button {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--overlay-1);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background .15s;
}
.files-preview-header .ou-subheader-actions button:hover { background: var(--overlay-2); }
.files-preview-header .ou-subheader-actions button svg { width: 18px; height: 18px; }
/* Header now occupies flow space, so the content no longer needs top padding
   to clear a floating toolbar. */
.files-preview-overlay .files-preview-content { padding-top: 16px; }