/* Gallery-specific styles — shared system comes from layout.css */

/* ── Gallery body layout ─────────────────────────────────────────────────── */
.workspace { overflow: hidden; display: flex; flex-direction: column; padding: 0; }
.gallery-body {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: visible;
  position: relative;
}
.gallery-content {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
}

/* Status bar below topbar */
.gallery-status-bar {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  padding: 3px 14px;
  background: var(--soft);
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
  min-height: 22px;
  display: flex;
  align-items: center;
}

/* Lock hub-sidebar vertical in gallery (no horizontal mobile flip) */
.gallery-body .hub-sidebar {
  position: relative !important;
  top: auto !important;
  width: 172px !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  margin-right: 0 !important;
  margin-bottom: 0 !important;
  border-right: 1px solid var(--line);
  padding: 8px 0;
  overflow: visible;
  flex-shrink: 0;
}
.gallery-body .hub-sidebar .filter-chip {
  width: 100% !important;
  border-radius: 8px !important;
  border: none !important;
  background: transparent !important;
  padding: 8px 14px !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}
.gallery-body .hub-sidebar.collapsed .filter-chip {
  opacity: 0 !important;
  pointer-events: none !important;
}
.gallery-body .hub-sidebar .filter-chip.active {
  background: var(--accent) !important;
  color: var(--accent-ink) !important;
  border: none !important;
}

h1 { margin: 0; font-size: 15px; font-weight: 700; }
h3 { margin: 0 0 4px; font-size: 14px; font-weight: 700; }
p { margin: 0; }

/* ── Browse tab ──────────────────────────────────────────────────────────── */
.browse-toolbar { display:flex; gap:8px; align-items:center; flex-wrap:wrap; padding:14px 18px 6px; }
.pill-row { display:flex; flex-wrap:wrap; gap:6px; padding:8px 18px 4px; }
.pill { padding:4px 10px; border-radius:20px; border:1px solid var(--line); background:transparent; cursor:pointer; font-size:12px; font-weight:600; color:var(--muted); }
.pill.active-all, .pill.active-usage { border-color:var(--accent); background:var(--soft); color:var(--accent); }
.chip-row { display:flex; flex-wrap:wrap; gap:6px; }
.usage-chip, .api-opt { padding:4px 10px; border-radius:6px; border:1px solid var(--line); background:transparent; cursor:pointer; font-size:12px; font-weight:600; color:var(--muted); }
.usage-chip.on, .api-opt.on { background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }

/* ── Image grid / list ───────────────────────────────────────────────────── */
.image-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:12px; padding:12px 18px 24px; }
.image-list { display:flex; flex-direction:column; gap:8px; padding:12px 18px 24px; }
.img-tile { border:1px solid var(--line); border-radius:10px; overflow:hidden; cursor:pointer; position:relative; background:var(--surface-raised,#f8fafc); }
.img-tile img { width:100%; height:160px; object-fit:cover; display:block; }
.img-tile-info { padding:8px; font-size:11px; }
.img-tile-name { font-weight:600; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.img-tile-tags { color:var(--muted); margin-top:2px; }
.img-tile-actions { display:flex; gap:4px; position:absolute; top:6px; right:6px; opacity:0; transition:opacity .15s; }
.img-tile:hover .img-tile-actions { opacity:1; }
.img-row { display:flex; align-items:center; gap:12px; padding:8px 10px; border:1px solid var(--line); border-radius:8px; }
.img-row img { width:56px; height:40px; object-fit:cover; border-radius:4px; flex-shrink:0; }
.img-row-info { flex:1; min-width:0; }
.img-row-name { font-size:13px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.img-row-sub { font-size:11px; color:var(--muted); }
.img-row-actions { display:flex; gap:4px; flex-shrink:0; }

/* ── Theme chips ─────────────────────────────────────────────────────────── */
.theme-chip { display:flex; align-items:center; gap:6px; padding:6px 10px; border:1px solid var(--line); border-radius:8px; background:transparent; cursor:pointer; font-size:12px; font-weight:600; width:100%; text-align:left; margin-bottom:4px; }
.theme-chip.on { border-color:var(--accent); background:var(--soft); }
.palette-dots { display:flex; gap:3px; }
.dot { width:10px; height:10px; border-radius:50%; display:inline-block; }

/* ── Credit bar ──────────────────────────────────────────────────────────── */
.credit-bar.warn { background:rgba(234,179,8,0.14); border-color:rgba(234,179,8,0.45); color:#fde68a; }
.credit-bar.empty { background:rgba(239,68,68,0.14); border-color:rgba(239,68,68,0.45); color:#fca5a5; }

/* ── PWA iOS prompt ──────────────────────────────────────────────────────── */
#pwa-ios-btn { display:none; position:fixed; bottom:24px; right:16px; z-index:9999; background:rgba(9,12,17,0.92); border:1px solid rgba(255,255,255,0.15); border-radius:14px; padding:10px 16px; color:#e4e4e7; font-family:-apple-system,BlinkMacSystemFont,sans-serif; font-size:13px; cursor:pointer; backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); box-shadow:0 4px 24px rgba(0,0,0,0.5); align-items:center; gap:8px; }
#pwa-ios-tooltip { display:none; position:fixed; bottom:80px; right:16px; z-index:9999; background:rgba(9,12,17,0.96); border:1px solid rgba(255,255,255,0.15); border-radius:14px; padding:14px 16px; color:#e4e4e7; font-family:-apple-system,BlinkMacSystemFont,sans-serif; font-size:13px; max-width:240px; box-shadow:0 4px 24px rgba(0,0,0,0.5); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); }
#pwa-ios-tooltip p { margin:0 0 6px; line-height:1.5; }
#pwa-ios-tooltip strong { color:#22d3ee; }
#pwa-ios-dismiss { font-size:11px; color:#71717a; cursor:pointer; }