/* =============================================================================
   MUSE · Overview — a dashboard in the main area aggregating three categories
   (Conversations · Artifacts · Files) with source tabs that filter the grid.
   An artifact card enters the workspace; an asset card opens its conversation.
   ========================================================================== */

/* Main area in Overview mode: hide the composer, give the grid more room. */
.app[data-view="gallery"] .composer-wrap { display: none; }
.app[data-view="gallery"] .thread { padding: 22px 26px 28px; }
.app[data-view="gallery"] .thread__inner { max-width: 1160px; }

.gallery { display: flex; flex-direction: column; gap: 18px; }

.gallery__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.gallery__lead { min-width: 0; }
/* Overview, Projects and Files are siblings: three destinations you reach from
   the nav, so they carry the same weight. h2 per the type scale. */
.gallery__title { font: 600 var(--h2)/1.1 var(--font-display); letter-spacing: -0.015em; }
.gallery__sub { font: 400 13.5px/1.5 var(--font-ui); color: var(--ink-mid); margin-top: 5px; max-width: 540px; }

/* ── category summary (the three aggregated categories) ───────────────────── */
.ov-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
/* Flat, non-interactive summary panels — deliberately NOT card-like: no fill,
   no shadow, no pointer. The clickable tiles below are raised + lift on hover. */
.ov-stat { display: flex; align-items: center; gap: 12px; padding: 13px 16px; border-radius: var(--r-lg);
  background: transparent; box-shadow: inset 0 0 0 1px var(--line); cursor: default; }
.ov-stat__ico { width: 36px; height: 36px; border-radius: 10px; flex: none; display: grid; place-items: center;
  background: var(--sunken); color: var(--ink-mid); }
.ov-stat__ico .icon { width: 18px; height: 18px; }
.ov-stat__txt { display: flex; flex-direction: column; min-width: 0; }
.ov-stat__n { font: 600 22px/1 var(--font-display); letter-spacing: -0.01em; }
.ov-stat__l { font: 500 12px/1.2 var(--font-ui); color: var(--ink-low); margin-top: 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── source tabs + layout toggle ──────────────────────────────────────────── */
.ov-tabs { align-self: flex-start; flex-wrap: wrap; }
.ov-layout { align-self: center; flex: none; }

/* list mode — flat full-width rows with dividers (vs. the elevated card grid).
   Double-class selector so it beats the base `.gallery__grid` columns regardless
   of source order (both are single-class otherwise → later one would win). */
.gallery__grid.gallery__grid--list { grid-template-columns: 1fr; gap: 0; }
.gallery__grid--list .gcard { box-shadow: none; border-radius: 0; background: transparent;
  padding: 12px 10px; border-bottom: 1px solid var(--line-soft); }
.gallery__grid--list .gcard:hover { transform: none; box-shadow: none; background: var(--hover); }
.gallery__grid--list .gcard:last-child { border-bottom: 0; }

/* ── grid of cards ────────────────────────────────────────────────────────── */
.gallery__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); gap: 12px; }

/* compact card — type thumb + name + type/date (no preview, no pills) */
.gcard {
  display: flex; align-items: center; gap: 12px; text-align: left; cursor: pointer;
  padding: 14px; border-radius: var(--r-lg); background: var(--surface);
  box-shadow: var(--sh-sm), inset 0 0 0 1px var(--line-soft);
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.gcard:hover { transform: translateY(-2px); box-shadow: var(--sh-md), inset 0 0 0 1px var(--line); }
.gcard:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.gcard__thumb { width: 40px; height: 40px; border-radius: 11px; flex: none; }
.gcard__thumb .icon { width: 20px; height: 20px; }
.gcard__id { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.gcard__name { font: 600 14px/1.3 var(--font-ui); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gcard__meta { font: 400 11.5px/1.3 var(--font-mono); color: var(--ink-low); }
/* the conversation that generated this artifact — icon + title on one line */
.gcard__from { display: flex; align-items: center; gap: 5px; margin-top: 6px; min-width: 0;
  font: 500 11.5px/1.2 var(--font-ui); color: var(--ink-low); }
.gcard__from .icon { width: 13px; height: 13px; flex: none; color: var(--ink-faint); }
.gcard__fromname { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* source badge — who made it: Muse (generated) vs You (uploaded) */
.gcard__src { flex: none; align-self: flex-start; display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 8px; border-radius: var(--r-pill); font: 600 10.5px/1 var(--font-ui); letter-spacing: .01em; }
.gcard__src .icon { width: 12px; height: 12px; }
.gcard__src-bolt { height: 13px; width: auto; display: block; }   /* Muse bolt replaces the sparkle */
.gcard__src--muse { color: var(--accent); background: var(--accent-soft); }
.gcard__src--you { color: var(--ink-mid); background: var(--sunken); box-shadow: inset 0 0 0 1px var(--line-soft); }

/* uploaded-file thumb — neutral recessed (generated artifacts keep their type tint) */
.gcard__thumb--file { display: grid; place-items: center; background: var(--sunken); color: var(--ink-mid);
  box-shadow: inset 0 0 0 1px var(--line-soft); }

/* empty / zero states */
.gallery__empty { grid-column: 1 / -1; padding: 40px; text-align: center; color: var(--ink-low); font-size: 13.5px; }
.gallery__zero { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 72px 20px; text-align: center; color: var(--ink-low); }
.gallery__zero .icon { color: var(--ink-faint); margin-bottom: 8px; }
.gallery__zero b { font: 600 16px/1.2 var(--font-display); color: var(--ink-2); }
.gallery__zero span { font-size: 13px; max-width: 320px; }

/* ── located tile — pulse when you jump back to an artifact's creation moment ── */
.artifact-tile.is-located { position: relative; }
.artifact-tile.is-located::after {
  content: ""; position: absolute; inset: -3px; border-radius: inherit; pointer-events: none; z-index: 2;
  border: 2px solid var(--accent); box-shadow: 0 0 0 4px var(--accent-soft);
  animation: tile-locate 2200ms var(--ease-out) both;
}
@keyframes tile-locate {
  0%   { opacity: 0; transform: scale(1.035); }
  14%  { opacity: 1; transform: scale(1); }
  72%  { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.01); }
}

/* ── responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 760px) { .ov-stats { grid-template-columns: 1fr; } }
@media (max-width: 560px) {
  .gallery__head { flex-direction: column; align-items: stretch; }
  .gallery__grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .artifact-tile.is-located { animation-duration: 1ms; }
}