/* =============================================================================
 * css/app.css — ImagePrompter design system.
 * -----------------------------------------------------------------------------
 * Tokens + component classes shared across the app. Markup composes these with
 * Tailwind utilities (loaded via CDN). Light mode only, single blue accent.
 * ============================================================================= */

:root {
  --accent: #2563eb;            /* blue-600 — the one accent */
  --accent-strong: #1d4ed8;     /* blue-700 — hover */
  --accent-shadow: rgb(37 99 235 / .12);  /* input focus glow */

  --ink: #171717;               /* neutral-900 */
  --muted: #737373;             /* neutral-500 */
  --faint: #a3a3a3;             /* neutral-400 */
  --border: #e5e5e5;            /* neutral-200 */
  --border-hover: #d4d4d4;      /* neutral-300 */
  --surface-hover: #fafafa;     /* neutral-50  — subtle row/button hover */
  --surface-2: #f5f5f5;         /* neutral-100 — hover/selected surfaces, muted badges */
  --accent-soft: #eff6ff;       /* blue-50     — active nav + undo-button tint */

  --r-sm: .5rem;  --r: .6rem;  --r-lg: .75rem;

  --pad-x: 1.25rem;             /* page gutter, scales up below */
  --z-drawer: 40;  --z-backdrop: 30;  --z-pop: 20;  --z-modal: 50;
}
@media (min-width: 640px)  { :root { --pad-x: 1.5rem; } }
@media (min-width: 1024px) { :root { --pad-x: 2rem;   } }

html, body { -webkit-font-smoothing: antialiased; }
body { font-feature-settings: "ss01","cv01"; }

/* ── Reusable primitives ──────────────────────────────────────────────────── */
.page { padding-inline: var(--pad-x); }

.eyebrow { font-size: 10px; font-weight: 700; letter-spacing: .025em; text-transform: uppercase; color: var(--muted); }

.icon-badge { display: inline-flex; align-items: center; justify-content: center; flex: none; border-radius: var(--r-lg); background: var(--ink); color: #fff; }
.icon-badge--muted { background: var(--surface-2); color: var(--faint); }
.icon-badge--sm { border-radius: var(--r-sm); }            /* small brand badges (sidebar/topbar) */

/* Safe-area-aware bottom padding for fixed/edge containers. */
.pb-safe { padding-bottom: max(.75rem, env(safe-area-inset-bottom)); }

/* ── Thin, unobtrusive scrollbar ──────────────────────────────────────────── */
.scroll-thin { scrollbar-width: thin; scrollbar-color: #d4d4d4 transparent; }
.scroll-thin::-webkit-scrollbar { width: 8px; height: 8px; }
.scroll-thin::-webkit-scrollbar-track { background: transparent; }
.scroll-thin::-webkit-scrollbar-thumb { background: #e0e0e0; border-radius: 9999px; border: 2px solid transparent; background-clip: content-box; }
.scroll-thin::-webkit-scrollbar-thumb:hover { background: #c8c8c8; background-clip: content-box; }

/* ── Entrance motion (fade-in up + blur), top→bottom ──────────────────────── */
@keyframes enter { from { opacity: 0; transform: translateY(10px); filter: blur(6px); } to { opacity: 1; transform: none; filter: blur(0); } }
.anim-in { opacity: 0; animation: enter .5s cubic-bezier(.16,.84,.3,1) forwards; }
.anim-d1{animation-delay:.06s}.anim-d2{animation-delay:.12s}.anim-d3{animation-delay:.18s}.anim-d4{animation-delay:.24s}
.anim-d5{animation-delay:.30s}.anim-d6{animation-delay:.36s}.anim-d7{animation-delay:.42s}.anim-d8{animation-delay:.48s}

/* Opacity-only entrance — for the sidebar, whose transform is owned by the drawer. */
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.fade-in { opacity: 0; animation: fade .4s ease-out forwards; }

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; border-radius: var(--r); border: 1px solid var(--border); background: #fff; color: var(--ink); font-weight: 500; transition: background .15s ease-out, border-color .15s ease-out, color .15s ease-out; }
.btn:hover { background: var(--surface-hover); border-color: var(--border-hover); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn--accent { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn--accent:hover { background: var(--accent-strong); border-color: var(--accent-strong); }
/* "Undo" mode of the Clear-fields button: accent-tinted so the rescue is obvious. */
.btn[data-mode="undo"] { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); }
.btn[data-mode="undo"]:hover { color: var(--accent-strong); border-color: var(--accent); background: var(--accent-soft); }
/* Looks like .btn but is a static, non-interactive label (no hover, no cursor). */
.btn-static { display: inline-flex; align-items: center; justify-content: center; gap: .35rem; border-radius: var(--r-sm); border: 1px solid var(--border); background: #fff; color: var(--ink); font-weight: 500; cursor: default; }

/* ── Inputs ───────────────────────────────────────────────────────────────── */
.field { width: 100%; height: 2.25rem; border-radius: var(--r); border: 1px solid var(--border); background: #fff; padding: 0 .7rem; font-size: 12px; color: var(--ink); transition: border-color .15s ease-out, box-shadow .15s ease-out; }
.field:hover { border-color: var(--border-hover); }
.field:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-shadow); }
textarea.field { height: auto; padding: .55rem .7rem; line-height: 1.5; }

/* ── Sidebar nav item ─────────────────────────────────────────────────────── */
.nav-item { transition: background .15s ease-out, color .15s ease-out; }
.nav-item:hover { background: var(--surface-2); }
.nav-item[aria-current="true"] { background: var(--accent-soft); color: #1e40af; }
.nav-item[aria-current="true"] .nav-ic { color: var(--accent); }
.nav-item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
/* "Soon" items are inert: no interactive affordance. */
.nav-item[aria-disabled="true"] { cursor: default; }
.nav-item[aria-disabled="true"]:hover { background: transparent; }

/* ── Category cards ───────────────────────────────────────────────────────── */
.card-lift { transition: transform .15s ease-out, border-color .15s ease-out, box-shadow .15s ease-out; }
.card-lift:hover { transform: translateY(-2px); border-color: var(--border-hover); box-shadow: 0 6px 20px -12px rgb(0 0 0 / .18); }
.card-lift:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── Custom dropdown ──────────────────────────────────────────────────────── */
/* Transition lives on the base so it animates BOTH open and close. */
.dd-pop { transform-origin: top left; transition: opacity .14s ease-out, transform .14s ease-out; }
.dd-pop[data-open="false"] { opacity: 0; transform: scale(.97) translateY(-4px); pointer-events: none; }
.dd-pop[data-open="true"]  { opacity: 1; transform: none; }
.dd-opt[aria-selected="true"] { background: var(--surface-2); }
.dd-opt .check { opacity: 0; margin-left: auto; }
.dd-opt[aria-selected="true"] .check { opacity: 1; color: var(--accent); }

/* ── Chips ────────────────────────────────────────────────────────────────── */
.chip { transition: background .15s ease-out, border-color .15s ease-out, color .15s ease-out; }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }

/* ── Breadcrumb link ──────────────────────────────────────────────────────── */
.crumb-link { transition: color .15s ease-out; }
.crumb-link:hover { color: var(--ink); }
.crumb-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: .25rem; }

/* ── "Works with" pill — model logo circle (reused: stack, +N counter, tooltip rows) ── */
.model-logo { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; flex: none; border-radius: 9999px; background: #fff; border: 1px solid var(--border); box-shadow: 0 0 0 2px #fff; overflow: hidden; }
.model-logo img { width: 100%; height: 100%; object-fit: cover; }
.model-logo--counter { font-size: 9px; font-weight: 600; color: #525252; }   /* white "+N" pill */
.model-logo--sm { width: 18px; height: 18px; box-shadow: none; }              /* tooltip rows */

/* ── "Works with" pill — hover/focus tooltip listing hidden models ────────── */
.pop-wrap { position: relative; outline: none; cursor: default; }
.pop-wrap:focus-visible > .pop-trigger { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: .25rem; }
.pop { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(4px);
  background: #fff; border: 1px solid var(--border); border-radius: .65rem; box-shadow: 0 10px 28px -12px rgb(0 0 0 / .28);
  padding: 5px; min-width: 172px; opacity: 0; pointer-events: none; transition: opacity .15s ease-out, transform .15s ease-out; z-index: var(--z-pop); }
.pop-wrap:hover > .pop, .pop-wrap:focus-within > .pop { opacity: 1; transform: translateX(-50%); pointer-events: auto; }
.pop-head { font-size: 9.5px; font-weight: 700; letter-spacing: .025em; text-transform: uppercase; color: var(--muted); padding: 4px 6px 3px; }
.pop-row { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: .4rem; font-size: 11.5px; color: #404040; white-space: nowrap; }
.pop-row:hover { background: var(--surface-2); }

/* ── Attachment thumbnail ─────────────────────────────────────────────────── */
.thumb { object-fit: cover; background: var(--surface-2); }

/* ── "Generate …" label assist link ───────────────────────────────────────── */
.assist-link { display: inline-flex; align-items: center; gap: .25rem; font-size: 10.5px; font-weight: 600; color: var(--accent); border-radius: .3rem; padding: 1px 2px; transition: color .15s ease-out; }
.assist-link:hover { color: var(--accent-strong); }
.assist-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── Modal (overlay + card, animated in/out) ───────────────────────────────── */
.modal-overlay {
  position: fixed; inset: 0; z-index: var(--z-modal);
  display: flex; align-items: center; justify-content: center;
  padding: 1rem; padding-top: max(1rem, env(safe-area-inset-top));
  background: rgb(23 23 23 / .45);
  opacity: 0; transition: opacity .2s ease-out;
}
.modal-overlay[data-open="true"] { opacity: 1; }
.modal-card {
  width: min(560px, 100%); max-height: 86dvh; overflow-y: auto;
  background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: 0 24px 60px -20px rgb(0 0 0 / .35);
  opacity: 0; transform: translateY(8px) scale(.98);
  transition: opacity .2s ease-out, transform .2s ease-out;
  outline: none;
}
.modal-overlay[data-open="true"] .modal-card { opacity: 1; transform: none; }

/* ============================================================================
 * Responsive app shell — sidebar static ≥1024px, off-canvas drawer below.
 * Topbar & backdrop hidden via Tailwind `lg:hidden` in the markup (reliable
 * against Tailwind's display utilities); this file only owns positioning.
 * ========================================================================== */
.sidebar {
  position: fixed; inset-block: 0; left: 0; z-index: var(--z-drawer);
  width: 244px; max-width: 86vw;
  transform: translateX(-100%);
  transition: transform .2s ease-out;
  padding-left: env(safe-area-inset-left);
}
.sidebar.is-open { transform: none; }
.backdrop {
  position: fixed; inset: 0; z-index: var(--z-backdrop);
  background: rgb(23 23 23 / .4);
  opacity: 0; pointer-events: none;
  transition: opacity .2s ease-out;
}
.backdrop.is-open { opacity: 1; pointer-events: auto; }
.app-topbar { padding-top: env(safe-area-inset-top); }

@media (min-width: 1024px) {
  .sidebar { position: static; transform: none; transition: none; z-index: auto; max-width: none; padding-left: 0; }
}

/* ── Reduced motion ───────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .anim-in, .fade-in { animation: none; opacity: 1; }
  * { transition: none !important; }
}