/* ── DESIGN TOKENS ───────────────────────────────────── */
:root {
  --bg: #faf9f7;
  --white: #ffffff;
  --surface: #f2efeb;
  --surface2: #e9e4de;
  --border: #e2ddd7;
  --text: #2d2926;
  --muted: #8a8078;
  --muted2: #b5afa8;
  --accent: #fc27a3;
  --accent-hover: #d91f8a;
  --accent-shadow: rgba(252, 39, 163, 0.28);
  --accent-light: #fff2ed;
  --accent2: #4a90d9;
  --accent2-light: #eef5fd;
  --green: #3dba7e;
  --green-light: #edfaf4;
  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 24px;
  --shadow-sm: 0 1px 4px rgba(0,0,0,0.06), 0 2px 8px rgba(0,0,0,0.04);
  --shadow: 0 4px 16px rgba(0,0,0,0.08), 0 1px 4px rgba(0,0,0,0.04);
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.12), 0 4px 12px rgba(0,0,0,0.06);
}

/* Dark mode, set explicitly by theme.js (via the no-flash inline script
   in each page's <head>) as a data-theme attribute on <html>, seeded
   from the user's saved preference or the OS setting. Not a media query:
   every pilot page always sets this attribute itself before first paint,
   so there's no "unset" state to also handle here. */
:root[data-theme="dark"] {
  --bg: #17121e;
  --white: #1e1826;
  --surface: #241c2c;
  --surface2: #2c2436;
  --border: #362c42;
  --text: #f1eaf4;
  --muted: #a89bb5;
  --muted2: #857a92;
  --accent: #ff6fb4;
  --accent-hover: #ff8dc4;
  --accent-shadow: rgba(255, 111, 180, 0.32);
  --accent-light: #3a2432;
  --accent2: #6fa8e8;
  --accent2-light: #21304a;
  --green: #5fd6a5;
  --green-light: #16241f;
  --shadow-sm: 0 1px 4px rgba(0,0,0,0.35), 0 2px 8px rgba(0,0,0,0.25);
  --shadow: 0 4px 16px rgba(0,0,0,0.4), 0 1px 4px rgba(0,0,0,0.25);
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.5), 0 4px 12px rgba(0,0,0,0.3);
}

/* A few pieces of the topbar/sidebar chrome hardcode a white "glass"
   look (rgba(255,255,255...)) rather than reading from the tokens
   above, so a straight token swap doesn't reach them, overridden
   directly here instead. This is the persistent chrome on every pilot
   page; page-specific body content (hero sections, cards, panels) is
   the next pass, not this one. */
[data-theme="dark"] .topbar {
  background: rgba(23, 18, 30, 0.9);
}
[data-theme="dark"] .sidebar {
  background: rgba(30, 24, 38, 0.6) !important;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}
[data-theme="dark"] .sidebar:hover,
[data-theme="dark"] .sidebar.expanded {
  background: rgba(30, 24, 38, 0.85) !important;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
}
/* Dark-mode counterpart of .sidebar.suppress-hover:hover further down
   higher specificity than the plain dark-mode :hover rule above it (4
   selectors vs 3), so it wins regardless of source order. */
[data-theme="dark"] .sidebar.suppress-hover:hover {
  background: rgba(30, 24, 38, 0.6) !important;
}
[data-theme="dark"] .sidebar .sb-icon {
  color: var(--muted);
}
[data-theme="dark"] .logo-liber {
  color: var(--text);
}
/* The logo mark itself is swapped to a dedicated dark-mode PNG asset
   (LiberPixelsIcon-dark.png, near-black frame recolored to white,
   pink squares left untouched) by theme.js's applyTheme(), not by a
   filter here, a filter can't recolor just the frame without also
   hitting the pink. */
/* .topbar-submit .hero-cta.primary, and .mi-dl:hover are all the same
   "inverted" button (background = --text, dark-on-light in light mode)
   with a hardcoded white label, illegible once --text flips to a light
   color here, for the same reason each time. */
[data-theme="dark"] .topbar-submit,
[data-theme="dark"] .hero-cta.primary,
[data-theme="dark"] .mi-dl:hover,
[data-theme="dark"] #addToCollectionBtn {
  color: var(--bg);
}

/* Glass overlays sitting on top of a photo (not a flat surface), these
   stay a translucent white in light mode by design, but need to flip to
   a translucent dark in this theme or the light-colored --text/--muted
   text and icons rendered on top of them become illegible, same failure
   as the hardcoded-white cards below. */
[data-theme="dark"] .hero-card-info {
  background: rgba(30, 24, 38, 0.88);
}
[data-theme="dark"] .card-save-btn,
[data-theme="dark"] .card-delete-btn,
[data-theme="dark"] .mi-btn {
  background: rgba(30, 24, 38, 0.85);
}
[data-theme="dark"] .card-save-btn:hover,
[data-theme="dark"] .card-delete-btn:hover,
[data-theme="dark"] .mi-btn:hover {
  background: var(--white);
}

/* ── RESET ───────────────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Nunito', sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  font-size: 15px;
}

/* ── ACCESSIBILITY ───────────────────────────────────── */
:focus-visible {
  outline: 2.5px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── ANIMATIONS ──────────────────────────────────────── */
@keyframes popIn {
  from { opacity: 0; transform: scale(0.96) translateY(10px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: .3; }
}

/* ════════════════════════════════════════════════════════
   TOP BAR (fixed, with logo + search + actions)
   ════════════════════════════════════════════════════════ */
.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 110;
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(16px);
  
  border-bottom: 1.5px solid var(--border);
  padding: 0 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}

.topbar-logo {
  
  display: flex;
  align-items: center;
  gap: 1px;
  text-decoration: none;
  font-weight: 900;
  font-size: 1.5rem;
  color: var(--text);
  flex-shrink: 0;
}
.topbar-logo-mark {
  width: 55px;
  height: 55px;
  object-fit: contain;    /* keeps logo proportions */
  border-radius: 10px;    /* optional, matches previous style */
  transition: transform 0.18s ease;
}
.topbar-logo-text {
  font-size: 1.5rem;
  font-weight: 900;
  display: inline-flex;   /* makes the two spans sit side by side */
}
.topbar-logo:hover .topbar-logo-mark {

  transform: scale(1.05);
}
.logo-liber {
  color: #000000;  /* black */
  font-weight: 900;
}

.logo-pixels {
  color: var(--accent);  /* pink (#fc27a3) */
  font-weight: 900;
}
.topbar-search {
  flex: 1;
  max-width: 600px;
  margin: 0 24px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface);
  border-radius: 40px;
  padding: 0 18px;
  height: 44px;
  transition: all 0.18s;
}
.topbar-search:focus-within {
  background: var(--white);
  box-shadow: 0 0 0 1.5px var(--border);
}
.topbar-search .material-icons {
  color: var(--muted2);
}
.topbar-search input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-family: 'Nunito', sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
  text-overflow: ellipsis;
}
.topbar-search input::placeholder {
  color: var(--muted2);
  font-weight: 500;
}
.topbar-search button {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--muted2);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  border-radius: 50%;
  transition: all 0.15s;
}
.topbar-search button:hover {
  background: var(--surface2);
  color: var(--text);
}

/* Visual search button: springy icon, a one-shot ring ping, and a styled
   tooltip (pages that include a .visual-tip) instead of the native title. */
.topbar-search .topbar-visual {
  position: relative;
  transition: background 0.2s ease, box-shadow 0.3s ease,
              transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.topbar-search .topbar-visual .material-icons {
  transition: color 0.2s ease, transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.topbar-search .topbar-visual:hover,
.topbar-search .topbar-visual:focus-visible {
  background: var(--accent-light);
  box-shadow: 0 0 0 4px var(--accent-light);
}
.topbar-search .topbar-visual:hover .material-icons,
.topbar-search .topbar-visual:focus-visible .material-icons {
  color: var(--accent);
  transform: scale(1.12);
}
.topbar-search .topbar-visual:active {
  transform: scale(0.86);
}
.topbar-search .topbar-visual::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--accent);
  opacity: 0;
  pointer-events: none;
}
.topbar-search .topbar-visual:hover::before {
  animation: visualPing 0.65s ease-out;
}
@keyframes visualPing {
  from { transform: scale(0.85); opacity: 0.7; }
  to   { transform: scale(1.8);  opacity: 0; }
}

.visual-tip {
  position: absolute;
  top: calc(100% + 12px);
  right: -6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 9px 14px;
  border-radius: 14px;
  background: var(--text);
  color: var(--bg);
  font-family: 'Nunito', sans-serif;
  text-align: left;
  white-space: nowrap;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px) scale(0.94);
  transform-origin: top right;
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s linear 0.15s;
  pointer-events: none;
  z-index: 60;
}
.visual-tip::before {
  content: '';
  position: absolute;
  top: -5px;
  right: 18px;
  width: 10px;
  height: 10px;
  background: inherit;
  border-radius: 2px;
  transform: rotate(45deg);
}
.visual-tip strong {
  font-size: 0.8rem;
  font-weight: 800;
}
.visual-tip span {
  font-size: 0.72rem;
  font-weight: 600;
  opacity: 0.7;
}
@media (hover: hover) {
  .topbar-visual:hover .visual-tip {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    /* Short delay so the tip doesn't flash when the cursor just passes over. */
    transition: opacity 0.2s ease 0.25s,
                transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 0.25s,
                visibility 0s linear 0.25s;
  }
}
.topbar-visual:focus-visible .visual-tip {
  opacity: 1;
  visibility: visible;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .topbar-search .topbar-visual,
  .topbar-search .topbar-visual .material-icons,
  .visual-tip {
    transition: none !important;
  }
  .topbar-search .topbar-visual:hover::before {
    animation: none;
  }
  .topbar-search .topbar-visual:hover .material-icons {
    transform: none;
  }
}

.topbar-right {
  display: flex;
  gap: 16px;
  align-items: center;
}
/* Some pages wrap "Log in"/"Sign up" in this div without their own inline
   flex styling, without display:flex here, the two <a> tags lay out as
   inline elements and align to text baseline. Since "Sign up" has padding
   making it taller than plain-text "Log in", that misaligns both of them
   against each other and against "Licence" next to them. IDs are
   inconsistent across pages (authLinks vs auth-links), so both are covered. */
#authLinks, #auth-links {
  display: flex;
  align-items: center;
  gap: 16px;
}
.topbar-login {
  color: var(--muted);
  font-weight: 700;
  text-decoration: none;
}
.topbar-login:hover {
  color: var(--text);
}
.topbar-submit {
  background: var(--text);
  color: white;
  padding: 8px 18px;
  border-radius: 30px;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.18s;
}
.topbar-submit:hover {
  background: var(--accent);
}
/* Standalone dark-mode toggle, always visible in the topbar regardless
   of auth state, unlike the one inside the signed-in user dropdown. */
.theme-toggle-btn {
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: var(--muted);
  flex-shrink: 0;
  transition: background 0.2s ease, color 0.2s ease;
}
.theme-toggle-btn:hover {
  background: var(--surface);
  color: var(--accent);
}
.theme-toggle-btn .material-icons {
  font-size: 20px;
}
/* The dropdown's own theme row is redundant on desktop, the standalone
   .theme-toggle-btn above is already visible in the topbar there. It
   only earns its place on mobile, where .theme-toggle-btn is hidden
   (see the 768px media query) and this becomes the only way to reach
   dark mode. !important because each page declares this row's display
   unconditionally in its own inline <style> block, later in the
   document than this shared stylesheet, so a plain override here would
   lose the cascade tie. */
.user-dropdown-theme-row {
  display: none !important;
}

/* Licence is reachable from the sidebar/topbar on desktop already, so the
   dropdown copy is redundant there, same reasoning and !important
   requirement as .user-dropdown-theme-row above (each page's own inline
   <style> block declares .user-dropdown a { display:flex } unconditionally,
   later in the document, so a plain override here loses the cascade tie). */
.user-dropdown-mobile-only {
  display: none !important;
}

/* =========================================================
   ===== : SIDEBAR*/
.sidebar {
  position: fixed !important;
  left: 0; 
  top: 64px;  /* ← FIXED: pushes sidebar below topbar */
  bottom: 0;
  width: 72px !important;
  background: rgba(255, 255, 255, 0.55) !important;
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  border-right: 1px solid rgba(255, 255, 255, 0.5);
  padding: 20px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  z-index: 500 !important;
  overflow: hidden;
  box-shadow: 4px 0 24px rgba(0, 0, 0, 0.05);
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              background 0.3s ease,
              box-shadow 0.3s ease,
              border-color 0.3s ease;
}
.sidebar:hover,
.sidebar.expanded {
  width: 200px !important;
  align-items: flex-start;
  padding-left: 16px;
  background: rgba(255, 255, 255, 0.72) !important;
  backdrop-filter: blur(10px) ;
  -webkit-backdrop-filter: blur(8px) ;
  box-shadow: 8px 0 36px rgba(0, 0, 0, 0.10);
  border-right: 1px solid rgba(255, 255, 255, 0.65);
}
/* Clicking the burger to collapse it happens with the pointer still
   sitting on the sidebar (the button lives inside it), without this
   :hover above would keep it visually expanded right through the click,
   making the second click look like it did nothing. The JS toggle adds
   this class on collapse and removes it on the sidebar's own mouseleave,
   so hover-expand only resumes once the pointer genuinely leaves and
   comes back. Higher specificity than the plain :hover rule (3 selectors
   vs 2) wins the !important tie without needing source-order tricks. */
.sidebar.suppress-hover:hover {
  width: 72px !important;
  align-items: center !important;
  padding-left: 8px !important;
  background: rgba(255, 255, 255, 0.55) !important;
  box-shadow: none !important;
}
.sidebar.suppress-hover:hover .sb-icon .sb-label {
  opacity: 0 !important;
  max-width: 0 !important;
}
.sidebar .sidebar-nav {
  display: flex;
  flex-direction: column;
  align-items: inherit;
  gap: 12px;
  width: 100%;
  height: 100%;
}
.site-legal-footer {
  display: flex;
  /* column-reverse rather than column: markup order is <p> (copyright)
     then <nav> (the pink links), and reversing the flex direction puts
     the last DOM child, the links, first visually, above the
     copyright line, without having to reorder the HTML on every page. */
  flex-direction: column-reverse;
  justify-content: center;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 24px 28px 94px;
  padding: 18px 20px;
  border-top: 1px solid var(--border, rgba(148, 163, 184, 0.22));
  color: var(--muted, #64748b);
  font-size: 0.82rem;
  text-align: center;
}
.site-legal-footer nav {
  display: flex;
  gap: 16px;
}
.site-legal-footer a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--accent, #ec4899);
  font-weight: 800;
  text-decoration: none;
}
.site-legal-footer p {
  margin: 0;
}
.site-legal-footer a:hover {
  text-decoration: underline;
}
@media (max-width: 700px) {
  .site-legal-footer {
    margin-left: 78px;
    margin-right: 16px;
  }
}
.site-legal-footer a .material-icons {
  font-size: 15px;
}
.editor-page {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  height: auto !important;
  min-height: 100vh;
}
.editor-page .site-legal-footer {
  margin: 0;
}
.sidebar .sb-icon {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: #334155;
  font-weight: 600;
  padding: 8px 12px;
  border-radius: 40px;
  width: 100%;
  border: none;
  background: transparent;
  cursor: pointer;
  font-family: 'Nunito', sans-serif;
  white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease;
}
.sidebar .sb-icon .material-icons {
  font-size: 24px;
  flex-shrink: 0;
}
/* labels own display + width so hover reveals text just like
   the click-to-pin .expanded state does */
.sidebar .sb-icon .sb-label {
  display: inline-block !important;
  font-size: 0.85rem;
  white-space: nowrap;
  opacity: 0;
  max-width: 0;
  overflow: hidden;
  transition: opacity 0.2s ease, max-width 0.25s ease;
}
.sidebar:hover .sb-icon .sb-label,
.sidebar.expanded .sb-icon .sb-label {
  opacity: 1;
  max-width: 160px;
}
.sidebar .sb-icon:hover {
  background: rgba(236, 72, 153, 0.10);
  color: #ec4899;
}
.sidebar .sb-icon.active {
  background: rgba(236, 72, 153, 0.16);
  color: #ec4899;
}

/* ── MAIN AREA (adjusted for fixed topbar) ───────────────────────── */
.main {
  margin-left: 72px;
  margin-top: 64px;
  min-height: calc(100vh - 64px);
  transition: margin-left 0.25s ease;
}
body.sidebar-open .main {
  margin-left: 220px;
}

/* ════════════════════════════════════════════════════════
   CATEGORY TABS (search/home)
   ════════════════════════════════════════════════════════ */
.cat-tabs {
  position: sticky;
  top: 64px;
  z-index: 105;
  display: flex;
  gap: 6px;
  padding: 12px 32px;
  border-bottom: 1.5px solid var(--border);
  overflow-x: auto;
  scrollbar-width: none;
  background: var(--white);
}
.cat-tabs::-webkit-scrollbar { display: none; }
.cat-tab {
  position: relative;
  color: var(--muted);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.875rem;
  padding: 10px 14px;
  border-radius: 8px;
  white-space: nowrap;
  transition: all 0.15s;
}
.cat-tab:hover { color: var(--text); background: var(--surface); }
.cat-tab.active { color: var(--text); background: var(--surface); }
.cat-tab.active::after {
  content: '';
  position: absolute;
  bottom: -13px;
  left: 14px;
  right: 14px;
  height: 2.5px;
  background: var(--text);
  border-radius: 2px;
}
.cat-tab-new {
  background: var(--accent);
  color: white;
  font-size: 0.65rem;
  font-weight: 900;
  padding: 2px 6px;
  border-radius: 6px;
  margin-right: 4px;
  vertical-align: middle;
}

/* ════════════════════════════════════════════════════════
   FEED + MASONRY (search results)
   ════════════════════════════════════════════════════════ */
.feed { padding: 24px 32px 64px; }
.masonry {
  columns: 3;
  column-gap: 24px;
}
.masonry-item {
  break-inside: avoid;
  margin-bottom: 24px;
  border-radius: 4px;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  background: var(--surface);
  animation: popIn 0.4s ease both;
}
.masonry-item img {
  width: 100%;
  display: block;
  transition: transform 0.3s ease;
}
.masonry-item-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.5) 0%, transparent 30%, transparent 70%, rgba(0,0,0,0.3) 100%);
  opacity: 0;
  transition: opacity 0.2s;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 14px;
}
.masonry-item:hover .masonry-item-overlay { opacity: 1; }
.masonry-item-top { display: flex; justify-content: flex-end; gap: 8px; }
.masonry-item-bottom { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.mi-btn {
  background: rgba(255,255,255,0.9);
  border: none;
  width: 22px;
  height: 22px;
  border-radius: 5px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
  color: var(--text);
  text-decoration: none;
}
.mi-dl-btn, a.mi-btn[download] {
  color: var(--accent);
}
.mi-btn .material-icons { font-size: 13px; }
.mi-btn:hover { background: white; transform: scale(1.08); }
.mi-author {
  display: flex;
  align-items: center;
  gap: 8px;
  color: white;
  font-weight: 700;
  font-size: 0.8rem;
  text-shadow: 0 1px 4px rgba(0,0,0,0.4);
  min-width: 0;
  overflow: hidden;
}
.mi-author span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mi-author-av {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.55rem;
  font-weight: 900;
  color: white;
  flex-shrink: 0;
}
.mi-source-icon {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}
/* Always-visible small provider badge in the corner of every asset card
   not hidden inside the hover overlay, since it should be visible while
   just browsing the grid, not only on hover. A white disc behind it keeps
   the tiny logo readable against both light and dark images. */
.mi-source-badge {
  position: absolute;
  bottom: 6px;
  left: 6px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  z-index: 3;
  background: var(--white);
  padding: 1px;
  box-shadow: var(--shadow-sm);
}
.mi-dl {
  background: var(--white);
  border: none;
  padding: 7px 14px;
  border-radius: 6px;
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.15s;
  text-decoration: none;
  color: var(--text);
  display: inline-flex;
  align-items: center;
}
.mi-dl:hover { background: var(--text); color: white; }

/* Save-to-collection popover and its hover preview share one size,
   padding, radius and shadow so they read as a matched pair when the
   preview sits beside the list (see positionCollectionPreview()). */
.save-collection-popover,
.save-collection-preview {
  width: 252px;
  background: var(--white);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow-lg);
  padding: 10px;
}
.save-collection-popover {
  position: absolute;
  z-index: 1100;
  display: flex;
  flex-direction: column;
  max-height: 340px;
}
.scp-header {
  padding: 2px 6px 8px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted2);
}
.scp-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  margin: 0 -4px;
  padding: 0 4px 8px;
}
.scp-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  height: 40px;
  border: 1px solid transparent;
  background: var(--surface);
  color: var(--text);
  border-radius: 10px;
  padding: 0 10px;
  text-align: left;
  font: inherit;
  font-weight: 700;
  font-size: 0.84rem;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.scp-row:hover,
.scp-row:focus-visible { background: var(--accent-light); border-color: var(--accent); outline: none; }
.scp-row .material-icons { font-size: 18px; flex-shrink: 0; color: var(--muted2); }
.scp-row.is-saved { background: var(--accent-light); }
.scp-row.is-saved .material-icons { color: var(--accent); }
.scp-row-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scp-row-count {
  position: relative;
  flex-shrink: 0;
  min-width: 24px;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--white);
  text-align: center;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--muted2);
}
.scp-row.is-updating .scp-row-count { color: transparent; }
.scp-row.is-updating .scp-row-count::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 11px;
  height: 11px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: scp-count-spin 0.7s linear infinite;
  transform: translate(-50%, -50%);
}
@keyframes scp-count-spin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}
.scp-create-row {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.scp-create-input {
  flex: 1;
  min-width: 0;
  height: 36px;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0 10px;
  background: var(--white);
  color: var(--text);
  font: inherit;
  font-size: 0.82rem;
}
.scp-create-input:focus { outline: none; border-color: var(--accent); }
.scp-create-confirm {
  border: none;
  background: var(--accent);
  color: #fff;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.scp-create-confirm:hover { opacity: 0.9; }
.scp-create-confirm:disabled { opacity: 0.5; cursor: default; }
.scp-empty-state {
  padding: 14px;
  text-align: center;
  color: var(--muted2);
  font-size: 0.78rem;
}
.scp-empty-state .material-icons {
  display: block;
  margin: 0 auto 6px;
  font-size: 22px;
  color: var(--border);
}
.save-collection-preview {
  position: fixed;
  z-index: 1110;
  display: flex;
  flex-direction: column;
  pointer-events: auto;
  animation: scp-preview-in 0.14s ease both;
}
@keyframes scp-preview-in {
  from { opacity: 0; transform: translateX(-4px); }
  to { opacity: 1; transform: none; }
}
.scp-preview-head { padding: 2px 4px 0; }
.scp-preview-title {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.92rem;
  font-weight: 800;
}
.scp-preview-count {
  display: block;
  margin-top: 2px;
  color: var(--muted2);
  font-size: 0.74rem;
}
.scp-preview-thumbnails {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
  margin-top: 10px;
}
.scp-preview-thumb {
  position: relative;
  aspect-ratio: 1;
  border-radius: 10px;
  overflow: hidden;
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted2);
}
.scp-preview-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.scp-preview-thumb .material-icons { font-size: 22px; }
.scp-preview-thumb .pixabay-heal-placeholder { background: var(--surface) !important; }
.scp-preview-thumb.is-loading {
  background: linear-gradient(90deg, var(--surface) 25%, var(--surface2) 50%, var(--surface) 75%);
  background-size: 200% 100%;
  animation: scp-shimmer 1.2s ease-in-out infinite;
}
@keyframes scp-shimmer {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}
.scp-preview-more {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  font-size: 0.95rem;
  font-weight: 800;
}
.scp-preview-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 10px;
  padding: 18px 8px;
  border-radius: 10px;
  background: var(--surface);
  color: var(--muted2);
  font-size: 0.78rem;
}
.scp-preview-empty .material-icons { font-size: 26px; }
.scp-preview-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: auto;
  padding: 10px 4px 2px;
  color: var(--accent);
  font-size: 0.8rem;
  font-weight: 800;
  text-decoration: none;
}
.scp-preview-link .material-icons { font-size: 16px; transition: transform 0.15s ease; }
.scp-preview-link:hover .material-icons { transform: translateX(3px); }

.feed-load { text-align: center; padding: 32px 0; }
.feed-sentinel { height: 1px; }
.feed-end {
  text-align: center;
  padding: 28px 16px 40px;
  margin: 0;
  color: var(--muted, #94a3b8);
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  font-size: 0.9rem;
}
.feed-end[hidden] { display: none; }
.feed-end.is-error { color: #e94560; cursor: pointer; }
.feed-load-btn {
  background: var(--white);
  border: 2px solid var(--border);
  color: var(--text);
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  font-size: 0.9rem;
  padding: 12px 32px;
  border-radius: 30px;
  cursor: pointer;
  transition: all 0.18s;
}
.feed-load-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-light);
}

/* ════════════════════════════════════════════════════════
   COLLECTIONS PAGE
   ════════════════════════════════════════════════════════ */
.collections-page {
  padding: 24px 32px 64px;
}
.collections-hero {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 24px;
  align-items: stretch;
  margin-bottom: 24px;
}
.collections-hero-content {
  background: linear-gradient(135deg, var(--white), var(--surface));
  border: 1.5px solid var(--border);
  border-radius: 28px;
  padding: 30px;
  box-shadow: var(--shadow-sm);
}
.collections-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 12px;
}
.collections-hero h1 {
  font-size: clamp(1.8rem, 2.2vw, 2.6rem);
  line-height: 1.1;
  margin-bottom: 12px;
}
.collections-hero p {
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.65;
}
.collections-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 20px 0 24px;
}
.hero-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  border-radius: 999px;
  font-weight: 800;
  text-decoration: none;
  transition: all 0.18s;
}
.hero-cta.primary {
  background: var(--text);
  color: white;
}
.hero-cta.primary:hover {
  background: var(--accent);
}
.hero-cta.secondary {
  background: var(--white);
  color: var(--text);
  border: 1.5px solid var(--border);
}
.hero-cta.secondary:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.collections-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.collections-stats div {
  min-width: 110px;
  padding: 12px 14px;
  background: var(--white);
  border-radius: 14px;
  border: 1px solid var(--border);
}
.collections-stats strong {
  display: block;
  font-size: 1rem;
  margin-bottom: 2px;
}
.collections-stats span {
  font-size: 0.8rem;
  color: var(--muted);
}
.collections-hero-card {
  border-radius: 28px;
  overflow: hidden;
  min-height: 320px;
  box-shadow: var(--shadow);
  background: linear-gradient(135deg, #1f2937, #4f46e5 45%, #ff6b81 100%);
}
.hero-card-media {
  height: 100%;
  display: flex;
  align-items: flex-end;
  padding: 24px;
  background: linear-gradient(180deg, transparent 0%, rgba(15, 23, 42, 0.35) 100%),
    url('https://images.unsplash.com/photo-1500534623283-312aade485b7?auto=format&fit=crop&w=700&q=75') center/cover;
}
.hero-card-info {
  background: rgba(255,255,255,0.9);
  border-radius: 16px;
  padding: 16px;
  max-width: 240px;
}
.hero-card-badge {
  display: inline-block;
  margin-bottom: 8px;
  background: var(--accent);
  color: white;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.hero-card-info h2 {
  font-size: 1.15rem;
  margin-bottom: 6px;
}
.hero-card-info p {
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.45;
}
.collections-yours {
  margin-bottom: 32px;
}
.collections-section-head {
  margin-bottom: 16px;
}
.collections-section-head h2 {
  font-size: 1.3rem;
  margin-bottom: 4px;
}
.collections-section-head p {
  color: var(--muted);
  font-size: 0.92rem;
}
.own-collection-media {
  position: relative;
}
.own-collection-media .own-collection-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 44px;
  color: rgba(255,255,255,0.85);
  z-index: 0;
}
.own-media-a { background: linear-gradient(135deg, #fc27a3, #f472b6); }
.own-media-b { background: linear-gradient(135deg, #6366f1, #818cf8); }
.own-media-c { background: linear-gradient(135deg, #10b981, #34d399); }
.card-delete-btn {
  position: relative;
  z-index: 1;
  border: none;
  background: rgba(255,255,255,0.92);
  color: #ef4444;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: transform 0.18s ease, background 0.18s ease;
}
.card-delete-btn:hover {
  transform: scale(1.05);
  background: white;
}
.collections-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.collections-results-bar {
  margin-bottom: 16px;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 700;
}
.collections-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.collections-chip {
  border: 1.5px solid var(--border);
  background: var(--white);
  color: var(--text);
  padding: 8px 12px;
  border-radius: 999px;
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.18s;
}
.collections-chip:hover,
.collections-chip.active {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-light);
}
.collections-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.collection-card {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.collection-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}
.collection-card-media {
  position: relative;
  height: 190px;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 12px;
}
.collection-card-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15,23,42,0.08) 0%, rgba(15,23,42,0.24) 100%);
  pointer-events: none;
}
.media-one { background-image: linear-gradient(135deg, rgba(15,23,42,0.15), rgba(15,23,42,0.12)), url('https://images.unsplash.com/photo-1494526585095-c41746248156?auto=format&fit=crop&w=480&q=70'); }
.media-two { background-image: linear-gradient(135deg, rgba(15,23,42,0.15), rgba(15,23,42,0.12)), url('https://images.unsplash.com/photo-1505693416388-ac5ce068fe85?auto=format&fit=crop&w=480&q=70'); }
.media-three { background-image: linear-gradient(135deg, rgba(15,23,42,0.15), rgba(15,23,42,0.12)), url('https://images.unsplash.com/photo-1516321497487-e288fb19713f?auto=format&fit=crop&w=480&q=70'); }
.media-four { background-image: linear-gradient(135deg, rgba(15,23,42,0.15), rgba(15,23,42,0.12)), url('https://images.unsplash.com/photo-1507525428034-b723cf961d3e?auto=format&fit=crop&w=480&q=70'); }
.media-five { background-image: linear-gradient(135deg, rgba(15,23,42,0.15), rgba(15,23,42,0.12)), url('https://images.unsplash.com/photo-1518770660439-4636190af475?auto=format&fit=crop&w=480&q=70'); }
.media-six { background-image: linear-gradient(135deg, rgba(15,23,42,0.15), rgba(15,23,42,0.12)), url('https://images.unsplash.com/photo-1494526585095-c41746248156?auto=format&fit=crop&w=480&q=70'); }
.media-seven { background-image: linear-gradient(135deg, rgba(252,39,163,0.2), rgba(74,144,217,0.16)), url('https://images.unsplash.com/photo-1524758631624-e2822e304c36?auto=format&fit=crop&w=480&q=70'); }
.card-save-btn {
  position: relative;
  z-index: 1;
  border: none;
  background: rgba(255,255,255,0.92);
  color: var(--accent);
  width: 36px;
  height: 36px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: transform 0.18s ease, background 0.18s ease;
}
.card-save-btn:hover {
  transform: scale(1.05);
  background: white;
}
.collection-card.is-saved {
  border-color: var(--accent);
  box-shadow: 0 10px 28px rgba(252,39,163,0.12);
}
.collection-card.is-saved .card-save-btn {
  background: var(--accent);
  color: white;
}
.collection-card.is-hidden {
  display: none;
}
.collection-card-body { padding: 16px 16px 18px; }
.collections-empty-state {
  margin-top: 20px;
  padding: 24px;
  border: 1.5px dashed var(--border);
  border-radius: 20px;
  background: var(--surface);
  color: var(--muted);
  text-align: center;
}
.collections-empty-state h3 {
  color: var(--text);
  margin-bottom: 6px;
}
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 220;
}
.create-collection-modal {
  width: min(480px, 100%);
  background: var(--white);
  border-radius: 24px;
  padding: 22px;
  box-shadow: var(--shadow-lg);
}
.create-collection-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.create-collection-header h3 {
  font-size: 1.1rem;
}
.create-collection-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.create-collection-form label {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-weight: 700;
  color: var(--text);
}
.create-collection-form input,
.create-collection-form textarea {
  border: 1.5px solid var(--border);
  border-radius: 12px;
  padding: 10px 12px;
  font: inherit;
  color: var(--text);
  background: var(--surface);
}
.create-collection-form input:focus,
.create-collection-form textarea:focus {
  outline: none;
  border-color: var(--accent);
}
.create-collection-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 4px;
}
.collection-details-modal {
  width: min(760px, 100%);
  background: var(--white);
  border-radius: 24px;
  padding: 22px;
  box-shadow: var(--shadow-lg);
  max-height: min(88vh, 860px);
  overflow: auto;
  animation: collectionModalIn 0.25s ease both;
}
@keyframes collectionModalIn {
  from { opacity: 0; transform: translateY(14px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.collection-detail-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--accent);
  margin-bottom: 2px;
}
.collection-detail-description {
  color: var(--muted);
  margin-bottom: 16px;
}
.collection-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}
.collection-detail-photo {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface);
}
.collection-detail-photo img {
  width: 100%;
  height: 170px;
  object-fit: cover;
  display: block;
}
.detail-photo-remove {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 1;
  border: none;
  background: rgba(15,23,42,0.65);
  color: white;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.detail-photo-remove:hover {
  background: #ef4444;
}
.detail-photo-remove .material-icons {
  font-size: 16px;
}
.collection-detail-upload {
  border-top: 1px solid var(--border);
  padding-top: 16px;
}
.collection-detail-upload h4 {
  margin-bottom: 10px;
}
.create-collection-cover {
  display: flex;
  align-items: center;
  gap: 14px;
}
.create-collection-cover-preview {
  width: 88px;
  height: 66px;
  flex-shrink: 0;
  border-radius: 14px;
  border: 1.5px dashed var(--border);
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.create-collection-cover-preview .material-icons {
  color: var(--muted);
  font-size: 26px;
}
.create-collection-cover-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cover-upload-btn {
  border: 1.5px solid var(--border);
  background: var(--white);
  color: var(--text);
  padding: 9px 14px;
  border-radius: 999px;
  font-weight: 800;
  cursor: pointer;
  font-size: 0.88rem;
}
.cover-upload-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.collection-detail-header-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}
.modal-icon-btn {
  border: none;
  background: var(--surface);
  color: var(--muted);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.modal-icon-btn:hover {
  background: var(--accent-light);
  color: var(--accent);
}
.collection-detail-edit-form {
  flex-direction: column;
  gap: 14px;
  padding: 14px;
  margin-bottom: 18px;
  border: 1.5px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
}
/* [hidden] is a plain (non-!important) UA-stylesheet rule, so an author
   rule that unconditionally sets `display` on this element, even to
   flex it into a row when shown, wins the cascade and defeats it,
   leaving the form visibly stuck open regardless of the hidden attribute.
   Scoping the display declaration to :not([hidden]) keeps the toggle
   working: hidden elements fall through to the UA default instead. */
.collection-detail-edit-form:not([hidden]) {
  display: flex;
}
.collection-detail-edit-form label {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-weight: 700;
  font-size: 0.88rem;
}
.collection-detail-edit-form input,
.collection-detail-edit-form textarea {
  border: 1.5px solid var(--border);
  border-radius: 12px;
  padding: 10px 12px;
  font: inherit;
  color: var(--text);
  background: var(--white);
}
.collection-detail-edit-form input:focus,
.collection-detail-edit-form textarea:focus {
  outline: none;
  border-color: var(--accent);
}
.collection-detail-empty {
  grid-column: 1 / -1;
  padding: 18px;
  border: 1.5px dashed var(--border);
  border-radius: 16px;
  color: var(--muted);
  text-align: center;
  background: var(--surface);
}
.collection-detail-picker {
  border-top: 1px solid var(--border);
  padding-top: 16px;
}
.collection-detail-picker h4 {
  margin-bottom: 10px;
}
.collection-photo-picker {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.collection-photo-picker button {
  border: 1px solid var(--border);
  background: var(--white);
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  padding: 0;
}
.collection-photo-picker img {
  width: 100%;
  height: 88px;
  object-fit: cover;
  display: block;
}
.collection-photo-picker button:hover {
  border-color: var(--accent);
  box-shadow: 0 8px 20px rgba(252,39,163,0.12);
}
.modal-close-btn {
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--muted);
}
.collection-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.collection-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: var(--accent-light);
  color: var(--accent);
  padding: 4px 9px;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.collection-count {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 700;
}
.collection-card h3 {
  font-size: 1.05rem;
  margin-bottom: 6px;
}
.collection-card p {
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.55;
  margin-bottom: 10px;
}
.collection-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.collection-tags span {
  background: var(--surface);
  color: var(--text);
  padding: 5px 8px;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 700;
}

@media (max-width: 1024px) {
  .collections-hero {
    grid-template-columns: 1fr;
  }
  .collections-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .collections-page {
    padding: 20px 16px 48px;
  }
  .collections-hero-content,
  .collections-hero-card {
    border-radius: 20px;
  }
  .collections-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  .collection-card { border-radius: 16px; }
  .collection-card-body { padding: 10px 12px 12px; }
  /* Narrow cards: "YOURS" + item count on the first line, the visibility
     badge (Public / Followers) on its own line underneath, so nothing is
     squashed or cut off. */
  .collection-card-top {
    margin-bottom: 4px;
    display: grid;
    grid-template-columns: auto auto;
    justify-content: start;
    align-items: center;
    gap: 6px;
  }
  .collection-card-top .collection-count { white-space: nowrap; }
  .collection-card-body .collection-card-top .public-badge {
    grid-column: 1 / -1;
    justify-self: start;
    margin-left: 0;
    white-space: nowrap;
  }
  .collection-badge { padding: 3px 7px; font-size: 0.62rem; }
  .collection-count { font-size: 0.7rem; }
  .collection-card h3 { font-size: 0.88rem; margin-bottom: 3px; }
  .collection-card p { font-size: 0.76rem; line-height: 1.35; margin-bottom: 6px; -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
  .collection-tags { gap: 5px; }
  .collection-tags span { padding: 3px 6px; font-size: 0.62rem; }
  /* collections.html's own fixed-height media area (profile.html's card
     media uses a different aspect-ratio technique, scoped here so this
     doesn't fight that rule). */
  .collections-page .collection-card-media { height: 110px; padding: 8px; }
}

/* ════════════════════════════════════════════════════════
   SEARCH PAGE, TOOLBAR + FILTERS
   ════════════════════════════════════════════════════════ */
.search-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 32px;
  gap: 16px;
  border-bottom: 1.5px solid var(--border);
  background: var(--white);
  flex-wrap: wrap;
}
.search-types { display: flex; gap: 4px; flex-wrap: wrap; }
.st-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 0.875rem;
  color: var(--muted);
  padding: 9px 14px;
  border-radius: 8px;
  transition: all 0.15s;
}
.st-tab:hover { background: var(--surface); color: var(--text); }
.st-tab.active { background: var(--text); color: white; background: #ec4899;  box-shadow: 0 4px 14px rgba(236, 72, 153, 0.25);  border-color: #ec4899;}
.st-count { font-size: 0.72rem; opacity: 0.7; font-weight: 700; }
.search-filters { display: flex; gap: 10px; align-items: center; }
.sf-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--white);
  border: 1.5px solid var(--border);
  color: var(--text);
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 0.875rem;
  padding: 9px 16px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s;
}
.sf-btn:hover { border-color: var(--accent); color: var(--accent); }
.sf-btn.active { background: var(--accent-light); border-color: var(--accent); color: var(--accent); }
.sf-sort {
  background: var(--white);
  border: 1.5px solid var(--border);
  color: var(--text);
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 0.875rem;
  padding: 9px 14px;
  border-radius: 8px;
  cursor: pointer;
  outline: none;
}
.sf-sort:focus { border-color: var(--accent); }

.active-filters {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 12px 32px;
  background: var(--surface);
  border-bottom: 1.5px solid var(--border);
}
.af-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--white);
  border: 1.5px solid var(--border);
  color: var(--text);
  font-weight: 700;
  font-size: 0.8rem;
  padding: 5px 5px 5px 12px;
  border-radius: 20px;
}
.af-pill button {
  background: var(--surface);
  border: none;
  cursor: pointer;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font-size: 0.7rem;
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
}
.af-pill button:hover { background: var(--accent); color: white; }
.af-clear {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--accent);
  font-weight: 800;
  font-size: 0.8rem;
  padding: 5px 10px;
}
.af-clear:hover { text-decoration: underline; }

.filter-panel {
  display: none;
  padding: 20px 32px;
  background: var(--white);
  border-bottom: 1.5px solid var(--border);
  gap: 32px;
  flex-wrap: wrap;
  animation: popIn 0.25s ease;
}
.filter-panel.show { display: flex; }
.fp-group { display: flex; flex-direction: column; gap: 8px; min-width: 180px; }
.fp-label {
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}
.fp-options { display: flex; flex-wrap: wrap; gap: 6px; }
.fp-opt {
  background: var(--surface);
  border: 1.5px solid transparent;
  color: var(--text);
  font-weight: 700;
  font-size: 0.8rem;
  padding: 6px 12px;
  border-radius: 20px;
  cursor: pointer;
}
.fp-opt:hover { border-color: var(--accent); }
.fp-opt.active { background: var(--accent-light); border-color: var(--accent); color: var(--accent); }
.fp-swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.fp-swatch {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.15s;
  border: 2.5px solid transparent;
  box-shadow: var(--shadow-sm);
}
.fp-swatch:hover { transform: scale(1.15); }
.fp-swatch.active { border-color: var(--text); transform: scale(1.1); }




/* ════════════════════════════════════════════════════════
   MODAL
   ════════════════════════════════════════════════════════ */
.modal-bg {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(45,41,38,0.65);
  backdrop-filter: blur(6px);
  /* Above .sidebar's z-index:500 !important, otherwise the sidebar
     renders in front of this overlay instead of behind it, so
     backdrop-filter never touches it and it stays sharp/undimmed while
     the rest of the page blurs out underneath the modal. */
  z-index: 600;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.modal-bg.show { display: flex; }
.modal {
  position: relative;
  background: var(--white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  max-width: 820px;
  width: 100%;
  box-shadow: var(--shadow-lg);
  animation: popIn 0.28s ease;
  display: flex;
  flex-direction: column;
  max-height: 90vh;
}
/* Asset preview modal's close button, top-right corner, icon only.
   A separate class from .modal-close-btn (the pill "Close" button some
   other modals on other pages use in their footer/header) so this doesn't
   change those. */
.modal-close-x {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 5;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, transform 0.2s ease;
}
.modal-close-x:hover {
  background: rgba(0, 0, 0, 0.7);
  transform: scale(1.08);
}
.modal-close-x .material-icons {
  font-size: 20px;
}
.modal-img {
  width: 100%;
  object-fit: contain;
  max-height: 58vh;
  background: var(--surface);
  display: block;
}
.modal-footer {
  padding: 20px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  border-top: 1.5px solid var(--border);
}
.modal-meta h3 { font-size: 1rem; font-weight: 900; margin-bottom: 3px; }
.modal-meta p { font-size: 0.84rem; color: var(--muted); font-weight: 600; }
.modal-actions { margin-left: auto; display: flex; gap: 10px; }
.modal-dl {
  background: var(--accent);
  color: white;
  border: none;
  font-weight: 800;
  font-size: 0.875rem;
  padding: 10px 22px;
  border-radius: 30px;
  cursor: pointer;
  transition: all 0.18s;
  box-shadow: 0 2px 8px var(--accent-shadow);
}
.modal-dl:hover { background: var(--accent-hover); transform: translateY(-1px); }
.modal-close-btn {
  background: var(--surface);
  border: none;
  color: var(--muted);
  font-weight: 700;
  font-size: 0.875rem;
  padding: 10px 18px;
  border-radius: 30px;
  cursor: pointer;
}
.modal-close-btn:hover { background: var(--surface2); color: var(--text); }

/* ════════════════════════════════════════════════════════
   CHAT (Pixie)
   ════════════════════════════════════════════════════════ */
.fab {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 200;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--accent);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px var(--accent-shadow);
  transition: all 0.22s;
}
.fab:hover { transform: scale(1.08); box-shadow: 0 6px 28px var(--accent-shadow); }
.fab-dot {
  position: absolute;
  top: 1px;
  right: 1px;
  width: 16px;
  height: 16px;
  background: var(--green);
  border-radius: 50%;
  border: 2.5px solid var(--bg);
  font-size: 0.52rem;
  font-weight: 900;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}
.chat-panel {
  position: fixed;
  bottom: 104px;
  right: 28px;
  width: 370px;
  height: 530px;
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: 24px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  z-index: 199;
  transform: scale(0.88) translateY(24px);
  opacity: 0;
  pointer-events: none;
  transition: all 0.28s cubic-bezier(0.34,1.56,0.64,1);
}
.chat-panel.open { transform: scale(1) translateY(0); opacity: 1; pointer-events: all; }
.chat-head {
  padding: 14px 18px;
  border-bottom: 1.5px solid var(--border);
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--bg);
}
.chat-av {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), #ff9466);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.chat-head-text h3 { font-size: 0.9rem; font-weight: 900; color: var(--text); }
.chat-head-text p {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--green);
  display: flex;
  align-items: center;
  gap: 5px;
}
.online-dot {
  width: 7px;
  height: 7px;
  background: var(--green);
  border-radius: 50%;
  animation: blink 2s infinite;
}
.chat-x {
  margin-left: auto;
  background: var(--surface);
  border: none;
  color: var(--muted);
  cursor: pointer;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.chat-x:hover { background: var(--surface2); color: var(--text); }
.chat-msgs {
  flex: 1;
  overflow-y: auto;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  scrollbar-width: thin;
}
.msg { display: flex; gap: 8px; animation: popIn 0.25s ease; }
.msg.user { flex-direction: row-reverse; }
.msg-av {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  align-self: flex-end;
}
.msg.bot .msg-av { background: linear-gradient(135deg, var(--accent), #ff9466); }
.msg.user .msg-av { background: var(--surface2); }
.bubble {
  max-width: 82%;
  padding: 10px 14px;
  border-radius: 16px;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.55;
}
.msg.bot .bubble {
  background: var(--surface);
  color: var(--text);
  border-bottom-left-radius: 4px;
  border: 1.5px solid var(--border);
}
.msg.user .bubble { background: var(--accent); color: white; border-bottom-right-radius: 4px; }
.msg-suggs { display: flex; flex-direction: column; align-items: stretch; gap: 6px; margin-top: 8px; }
.sugg {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--white);
  border: 1.5px solid var(--border);
  color: var(--accent);
  font-size: 0.775rem;
  font-weight: 800;
  padding: 5px 11px;
  border-radius: 20px;
  cursor: pointer;
}
.sugg:hover { background: var(--accent-light); border-color: var(--accent); }
.sugg.sugg-done {
  background: var(--green);
  border-color: var(--green);
  color: white;
}
.sugg.sugg-done:hover { background: #31a86d; border-color: #31a86d; }

.pixie-slider-panel,
.pixie-toggle-panel {
  margin-top: 12px;
  padding: 12px 12px 10px;
  border-radius: 18px;
  background: var(--surface2);
  border: 1px solid var(--border);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.28);
  animation: pixiePopIn 0.24s cubic-bezier(0.2, 0.9, 0.2, 1);
}

.pixie-slider-track {
  position: relative;
  background: linear-gradient(90deg, rgba(233, 30, 99, 0.1), rgba(233, 30, 99, 0.18));
  border: 1px solid rgba(233, 30, 99, 0.18);
  box-shadow: inset 0 2px 6px rgba(15, 23, 42, 0.05);
  transition: all 0.2s ease;
}

.pixie-slider-fill {
  background: linear-gradient(90deg, #f7b3c8 0%, #ec4899 44%, #e91e63 100%);
  box-shadow: 0 8px 18px rgba(233, 30, 99, 0.25);
  transition: width 0.22s cubic-bezier(0.2, 0.9, 0.2, 1);
}

.pixie-slider-knob {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ffffff, #ffe8f0);
  border: 3px solid #ec4899;
  box-shadow: 0 8px 18px rgba(233, 30, 99, 0.28);
  transition: left 0.22s cubic-bezier(0.2, 0.9, 0.2, 1), transform 0.15s ease;
}

.pixie-slider-knob:active {
  transform: scale(1.08);
}

.pixie-slider-bubble {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  padding: 6px 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, #ffe4ef, #f8bbd0);
  color: #880e4f;
  font-size: 0.7rem;
  font-weight: 900;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.8);
}

.pixie-toggle-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.pixie-toggle-switch {
  position: relative;
  width: 52px;
  height: 30px;
  border: none;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(148, 163, 184, 0.45), rgba(148, 163, 184, 0.72));
  box-shadow: inset 0 2px 8px rgba(15, 23, 42, 0.18);
  cursor: pointer;
  transition: background 0.22s ease, transform 0.2s ease, box-shadow 0.22s ease;
  padding: 0;
}

.pixie-toggle-switch.is-on {
  background: linear-gradient(90deg, #ff8ab7 0%, #f43f5e 36%, #e91e63 100%);
  box-shadow: 0 8px 18px rgba(233, 30, 99, 0.24);
}

.pixie-toggle-switch:hover {
  transform: translateY(-1px);
}

.pixie-toggle-switch:active {
  transform: scale(0.98);
}

.pixie-toggle-knob {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ffffff, #ffe7f0);
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.15);
  transition: transform 0.25s cubic-bezier(0.2, 0.9, 0.2, 1), box-shadow 0.2s ease;
}

.pixie-toggle-switch.is-on .pixie-toggle-knob {
  transform: translateX(22px);
  box-shadow: 0 6px 16px rgba(233, 30, 99, 0.28);
}

@keyframes pixiePopIn {
  0% { opacity: 0; transform: translateY(6px) scale(0.98); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

.chat-foot {
  padding: 12px 14px;
  border-top: 1.5px solid var(--border);
  display: flex;
  gap: 8px;
  align-items: center;
  background: var(--bg);
}
.chat-in {
  flex: 1;
  background: var(--white);
  border: 1.5px solid var(--border);
  color: var(--text);
  font-family: 'Nunito', sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  padding: 10px 14px;
  border-radius: 20px;
  outline: none;
}
.chat-in:focus { border-color: var(--accent); }
.chat-send {
  background: var(--accent);
  border: none;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: white;
  transition: all 0.18s;
  box-shadow: 0 2px 8px var(--accent-shadow);
  flex-shrink: 0;
}
.chat-send:hover { transform: scale(1.1); }

/* ════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
  .masonry { columns: 2; }
}
@media (max-width: 768px) {
  /* Sidebar becomes a Pinterest-style icon-only bottom tab bar on
     mobile instead of a left rail, since a fixed left column eats
     into the already-narrow width available for the feed. */
  .sidebar {
    left: 0;
    right: 0;
    top: auto;
    bottom: 0;
    width: 100% !important;
    height: 60px;
    padding: 0;
    flex-direction: row;
    border-right: none;
    border-top: 1px solid var(--border);
    box-shadow: 0 -4px 16px rgba(0,0,0,0.06);
  }
  .sidebar:hover,
  .sidebar.expanded {
    width: 100% !important;
    padding: 0;
    align-items: center;
  }
  .sidebar .sidebar-nav {
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    gap: 0;
  }
  .sidebar .sb-burger { display: none; }
  .sidebar .sb-icon {
    flex-direction: column;
    width: auto;
    gap: 2px;
    padding: 6px 8px;
    border-radius: 14px;
  }
  .sidebar .sb-icon .material-icons { font-size: 24px; }
  /* Small caption under each bottom-bar icon. Listed with the
     suppress-hover selector so a tap (which fires :hover) can't hide it. */
  .sidebar .sb-icon .sb-label,
  .sidebar.suppress-hover:hover .sb-icon .sb-label {
    display: block !important;
    opacity: 1 !important;
    max-width: none !important;
    font-size: 0.62rem;
    line-height: 1.1;
  }
  .main { margin-left: 0; margin-bottom: 60px; }
  body.sidebar-open .main { margin-left: 0; }
  .site-legal-footer { margin: 0 16px 76px; }
  .topbar { padding: 0 16px; }
  .topbar-logo-text { display: none; }
  .topbar-logo { gap: 0; }
  .topbar-search { margin: 0 12px; min-width: 0; }
  .topbar-search input { min-width: 0; }
  .topbar-right { flex-shrink: 0; gap: 8px; }
  .topbar-right .topbar-login { display: none; }
  /* Logged-out visitors still need a way in — keep "Log in" as compact
     text next to the Sign up pill so the search bar keeps the room. */
  .topbar-right .topbar-login[href*="login.html"] {
    display: inline;
    font-size: 0.8rem;
    white-space: nowrap;
  }
  #authLinks, #auth-links { gap: 10px !important; }
  .theme-toggle-btn { display: none; }
  .notification-wrap > .notification-bell { display: none; }
  /* Collapse the avatar button down to just the photo, name, and the
     dropdown chevron are dropped since there's no room for them next to
     logo + search on a phone; License/Notifications/Search/Recent/theme
     now live inside the dropdown the avatar opens (see user-dropdown
     markup and notifications.js's #dropdownNotifBtn wiring). */
  .user-menu-btn { padding: 4px !important; gap: 0 !important; }
  .user-menu-btn #user-name { display: none; }
  .user-menu-btn > .material-icons { display: none; }
  .user-dropdown-theme-row { display: flex !important; }
  .user-dropdown-mobile-only { display: flex !important; }
  .cat-tabs { padding: 10px 16px; }
  .feed { padding: 16px; }
  .masonry { columns: 2; column-gap: 10px; }
  .masonry-item { margin-bottom: 10px; border-radius: 14px; }
  .search-toolbar { padding: 12px 16px; }
  .active-filters { padding: 10px 16px; }
  .filter-panel { padding: 16px; gap: 20px; }
  .results-bar { padding: 20px 16px 0; }
  .results-title { font-size: 1.15rem; }
  .chat-panel { width: calc(100vw - 20px); right: 10px; }
  .fab { bottom: 76px; right: 16px; }
}
@media (max-width: 480px) {
  .topbar-right .topbar-submit { padding: 6px 10px; font-size: 0.75rem; white-space: nowrap; }
  .topbar-right .topbar-login[href*="login.html"] { font-size: 0.75rem; }
  #authLinks, #auth-links { gap: 8px !important; }
  .topbar-search { margin: 0 8px; }
}
/* Increase columns for more images per row */
.masonry {
  columns: 4;
  column-gap: 20px;
}

/* Slightly reduce image margins and padding */
.feed {
  padding: 20px 28px 48px;
}

/* Adjust for very large screens (5 columns optional) */
@media (min-width: 1600px) {
  .masonry {
    columns: 5;
    column-gap: 20px;
  }
}

/* Keep existing responsive overrides */
@media (max-width: 1100px) {
  .masonry { columns: 3; }
}
@media (max-width: 768px) {
  .masonry { columns: 2; column-gap: 10px; }
  .feed { padding: 16px; }
}
@media (max-width: 480px) {
  .masonry { columns: 2; column-gap: 8px; }
  .masonry-item { margin-bottom: 8px; border-radius: 12px; }
}
/* ---------- Search Suggestions ---------- */
.ff-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}
/* ─────────────────────────────────────────────────────────
   NEW: IMAGES + CHAT SIDE-BY-SIDE LAYOUT
   ───────────────────────────────────────────────────────── */
.results-layout {
  display: flex;
  gap: 0;
  align-items: flex-start;
  transition: all 0.2s;
}
/* Suggestions dropdown container */
.ff-suggestions {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: var(--white);
  border: 1.5px solid #e8b4c8;
  border-radius: 16px;
}
/* main images column - flexible */
.images-column {
  flex: 1;
  min-width: 0;      /* prevents flex overflow */
  transition: all 0.3s cubic-bezier(0.2, 0.9, 0.4, 1.1);
}

/* CHAT COLUMN, starts collapsed (width 0, hidden) */
.chat-column {
  width: 0;
  overflow-x: hidden;
  flex-shrink: 0;
  background: var(--white);
  border-radius: 28px 0 0 28px;
  box-shadow: none;
  transition: width 0.35s cubic-bezier(0.2, 0.9, 0.4, 1.1), box-shadow 0.2s;
  align-self: stretch;
  margin-left: 0;
  opacity: 0;
  visibility: hidden;
}

/* when open, less than half screen (max 38%) */
.results-layout.chat-open .chat-column {
  width: min(400px, 38%);
  visibility: visible;
  opacity: 1;
  margin-left: 24px;
  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.04);
  border-left: 1.5px solid var(--border);
}

/* internal chat panel styling (reuse existing .chat-panel style but adapted) */
.chat-inside {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 520px;
  background: var(--white);
  border-radius: 24px;
  overflow: hidden;
    box-shadow: 0 4px 16px rgba(212, 83, 126, 0.1);
  z-index: 1000;
  display: none;
  padding: 6px 0;

}
/* Individual suggestion row */
.ff-suggestions .ff-suggestion-item {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
}
.ff-suggestions.visible {
  display: block;
}
/* reuse your existing chat head/messages/foot, just adjust spacing */
.chat-inside .chat-head {
  padding: 18px 20px;
  border-bottom: 1.5px solid var(--border);
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--bg);
}

.chat-inside .chat-msgs {
  flex: 1;
  overflow-y: auto;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.chat-inside .chat-foot {
  padding: 14px 18px;
  border-top: 1.5px solid var(--border);
  display: flex;
  gap: 12px;
  background: var(--white);
  width: 100%;
  padding: 10px 20px;
  text-align: left !important;
}

/* toggle button style */
#openChatBtn {
  background: var(--accent-light);
  border-color: var(--accent);
  transition: all 0.2s;
}
#openChatBtn:hover {
  background: var(--accent);
  color: white;
}

/* responsive: on narrow screens, stack vertically */
@media (max-width: 760px) {
  .results-layout {
    flex-direction: column;
  }
  .chat-column {
    width: 100% !important;
    margin-left: 0 !important;
    border-left: none;
    margin-top: 20px;
  }
  .results-layout.chat-open .chat-column {
    width: 100%;
  }
}
/* ─────────────────────────────────────────────────────────
   NEW: IMAGES + CHAT SIDE-BY-SIDE LAYOUT (no overlay)
   ───────────────────────────────────────────────────────── */
.search-results-container {
  display: flex;
  gap: 0;
  align-items: flex-start;
}

.images-area {
  flex: 1;
  min-width: 0;
  transition: flex 0.25s cubic-bezier(0.2, 0.9, 0.4, 1.1);
}
/* Text inside suggestion takes available space, stays left */
.ff-suggestions .ff-suggestion-item span {
  text-align: left;
}
.images-area {
  flex: 1;
  white-space: nowrap;
  min-width: 0;
}
/* CHAT SIDEBAR - fixed viewport height, scrollable internally, resizable */
.chat-sidebar {
  width: 0;
  flex-shrink: 0;
  background: var(--white, #ffffff);
  border-radius: 24px 0 0 24px;
  transition: width 0.25s cubic-bezier(0.2, 0.9, 0.4, 1.1);
  position: sticky;
  top: 80px;
  align-self: flex-start;
  height: calc(100vh - 80px);
  overflow: hidden;          /* prevent content showing when collapsed */
  box-shadow: none;
  margin-left: 0;
  will-change: width;        /* hint browser for smooth transition */
}

.chat-sidebar.open {
  width: 360px;              /* default width, will be overridden by resize inline style */
  margin-left: 24px;
  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.06);
  border-left: 1.5px solid var(--border, #e2ddd7);
}

/* Resize handle, bigger hit area, but barely visible */
.resize-handle {
  position: absolute;
  left: -6px;
  top: 0;
  bottom: 0;
  width: 12px;
  cursor: ew-resize;
  background: transparent;
  z-index: 10;
  transition: background 0.2s;
}
.resize-handle:hover {
  background: var(--accent, #fc27a3);
  opacity: 0.3;
}
.resize-handle:active {
  background: var(--accent, #fc27a3);
  opacity: 0.6;
}

/* FAB hide/show, fades and shrinks out as the chat panel opens, instead
   of vanishing instantly, so the two motions read as one continuous
   gesture rather than a button popping out of existence mid-transition. */
.fab-pixie.hide-fab {
  opacity: 0;
  transform: scale(0.6);
  pointer-events: none;
}
/* Hover & keyboard-active state */
.ff-suggestions .ff-suggestion-item:hover,
.ff-suggestions .ff-suggestion-item.active {
  background: #fdf2f6;
}
/* Inner chat structure (fills sidebar) */
.chat-inside {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  border-radius: 24px;
  background: var(--white);
}
.chat-inside .chat-head,
.chat-inside .chat-foot {
  flex-shrink: 0;
  color: #888;
}
.chat-inside .chat-msgs {
  flex: 1;
  overflow-y: auto;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: #fefefc;
}
.interactive-chip {
  background: var(--accent-light, #fff2ed);
  border: 1px solid var(--accent, #fc27a3);
  color: var(--accent, #fc27a3);
  padding: 6px 14px;
  border-radius: 30px;
  font-weight: 600;
  color: #d4537e;
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.2s;
  display: inline-block;
  width: auto;
}
/* "No results" message */
.ff-no-results {
  padding: 12px 20px;
  font-size: 13px;
  color: #888780;
  text-align: left;
}
/* Loading state */
.ff-loading {
  padding: 12px 20px;
  font-size: 13px;
  color: #888780;
}
.color-swatches {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
/* Original floating Pixie button (restored) */
.fab-pixie {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 200;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--accent, #fc27a3);
    font-size: 15px;
  color: #333;
  font-family: inherit;
  transition: background 0.15s ease;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(252, 39, 163, 0.3);
  transition: all 0.22s;
  
  color: white;
}
.fab-pixie:hover {
  transform: scale(1.08);
  box-shadow: 0 6px 28px rgba(252, 39, 163, 0.4);
}
.fab-dot {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 16px;
  height: 16px;
  background: var(--green, #3dba7e);
  border-radius: 50%;
  border: 2px solid var(--bg, #faf9f7);
  font-size: 0.6rem;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

/* Hide the old chat panel if it exists (avoid conflict) */
.chat-panel {
  display: none !important;
}

/* Responsive: on narrow screens, chat stacks below images */
@media (max-width: 760px) {
  .search-results-container {
    flex-direction: column;
  }
  .chat-sidebar {
    width: 100% !important;
    margin-left: 0 !important;
    border-left: none;
    margin-top: 20px;
    border-radius: 24px;
    height: 60vh;
    max-height: 60vh;
  }
  .chat-sidebar.open {
    width: 100%;
  }
  .resize-handle {
    display: none;
  }
  .fab-pixie {
    bottom: 20px;
    right: 20px;
  }
}
/* ─────────────────────────────────────────────────────────
   CHAT SIDEBAR: sticky scroll + horizontal resize
   ───────────────────────────────────────────────────────── */
.search-results-container {
  display: flex;
  gap: 0;
  align-items: flex-start;
  position: relative;
}

.images-area {
  flex: 1;
  min-width: 0;
}

/* Chat sidebar, now sticky (scrolls with page) and resizable */
.chat-sidebar {
  width: 0;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--white, #ffffff);
  border-radius: 24px 0 0 24px;
  transition: width 0.25s cubic-bezier(0.2, 0.9, 0.4, 1.1);
  margin-left: 0;
  opacity: 0;
  visibility: hidden;
  box-shadow: none;
  position: sticky;        /* 👈 sticks while scrolling */
  top: 80px;               /* below topbar */
  align-self: flex-start;
  height: auto;            /* natural height based on content */
  max-height: calc(100vh - 90px);
  overflow-y: auto;        /* internal scroll if content too tall */
}

.chat-sidebar.open {
  width: 360px;
  visibility: visible;
  opacity: 1;
  margin-left: 24px;
  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.06);
  border-left: 1.5px solid var(--border, #e2ddd7);
}
.chat-sidebar {
  transition: width 0.25s cubic-bezier(0.2, 0.9, 0.4, 1.1), visibility 0.25s, opacity 0.2s;
}
/* Resize handle (horizontal drag) */
.resize-handle {
  position: absolute;
  left: -6px;
  top: 0;
  bottom: 0;
  width: 8px;
  cursor: ew-resize;
  background: transparent;
  z-index: 10;
  transition: background 0.2s;
}
.resize-handle:hover {
  background: var(--accent, #fc27a3);
  opacity: 0.5;
}
.resize-handle:active {
  background: var(--accent, #fc27a3);
  opacity: 0.8;
}

/* Inner chat structure */
.chat-inside {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  overflow: hidden;
  border-radius: 24px;
  background: var(--white);
}

.chat-inside .chat-msgs {
  flex: 1;
  overflow-y: auto;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: #fefefc;
}

.chat-inside .chat-head,
.chat-inside .chat-foot {
  flex-shrink: 0;
}

/* Restored floating Pixie button */
.fab-pixie {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 200;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--accent, #fc27a3);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(252, 39, 163, 0.3);
  transition: all 0.22s;
  color: white;
}
.fab-pixie:hover {
  transform: scale(1.08);
  box-shadow: 0 6px 28px rgba(252, 39, 163, 0.4);
}
.fab-dot {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 16px;
  height: 16px;
  background: var(--green, #3dba7e);
  border-radius: 50%;
  border: 2px solid var(--bg, #faf9f7);
  font-size: 0.6rem;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

/* Hide any old chat panel if present */
.chat-panel {
  display: none !important;
}

/* Responsive: on narrow screens, chat stacks below */
@media (max-width: 760px) {
  .search-results-container {
    flex-direction: column;
  }
  .chat-sidebar {
    position: relative;
    top: 0;
    width: 100% !important;
    margin-left: 0 !important;
    border-left: none;
    margin-top: 20px;
    border-radius: 24px;
    max-height: 60vh;
  }
  .chat-sidebar.open {
    width: 100%;
  }
  .resize-handle {
    display: none;
  }
  .fab-pixie {
    bottom: 20px;
    right: 20px;
  }
}

/* Rich controls inside chat */
.msg-controls {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  flex-direction: column;
}

.interactive-chip {
  background: var(--accent-light, #fff2ed);
  border: 1px solid var(--accent, #fc27a3);
  color: var(--accent, #fc27a3);
  padding: 6px 14px;
  border-radius: 30px;
  font-weight: 600;
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.2s;
  display: inline-block;
  width: auto;
}

.interactive-chip:hover {
  background: var(--accent, #fc27a3);
  color: white;
}

.color-picker-group, .slider-group {
  background: var(--surface, #f2efeb);
  padding: 10px;
  border-radius: 16px;
  margin: 6px 0;
}

.control-label {
  font-weight: 700;
  font-size: 0.75rem;
  display: block;
  margin-bottom: 8px;
  color: var(--text, #2d2926);
}



.color-swatch {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid transparent;
  transition: transform 0.1s, border 0.1s;
  animation: ff-spin 0.6s linear infinite;
  flex-shrink: 0;
}
@keyframes ff-spin {
  to { transform: rotate(360deg); }
}
.color-swatch:hover {
  transform: scale(1.1);
}
/* ---------- Mobile responsiveness ---------- */
@media (max-width: 600px) {
  .ff-suggestions {
    border-radius: 12px;
  }
  .ff-suggestions .ff-suggestion-item {
    padding: 12px 16px;
    font-size: 14px;
  }
}
.color-swatch.selected {
  border-color: var(--accent, #fc27a3);
  box-shadow: 0 0 0 2px white;
}

.selected-colors {
  font-size: 0.7rem;
  margin: 8px 0;
  color: var(--muted, #8a8078);
}

.apply-colors, .apply-slider {
  background: var(--accent, #fc27a3);
  color: white;
  border: none;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.7rem;
  font-weight: 700;
  cursor: pointer;
  margin-top: 6px;
}

.apply-colors:hover, .apply-slider:hover {
  background: var(--accent-hover, #d91f8a);
}

.slider-group input[type="range"] {
  width: 100%;
  margin: 8px 0;
}

.slider-value {
  font-weight: 800;
  color: var(--accent, #fc27a3);
}
/* Rich controls inside chat messages */
.msg-controls {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  flex-direction: column;
}

.interactive-chip {
  background: var(--accent-light, #fff2ed);
  border: 1px solid var(--accent, #fc27a3);
  color: var(--accent, #fc27a3);
  padding: 6px 16px;
  border-radius: 40px;
  font-weight: 600;
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.2s;
  width: fit-content;
}
.interactive-chip:hover {
  background: var(--accent, #fc27a3);
  color: white;
}

.color-picker-group, .slider-group {
  background: var(--surface, #f2efeb);
  padding: 10px;
  border-radius: 20px;
  margin: 4px 0;
}
.control-label {
  font-weight: 700;
  font-size: 0.7rem;
  display: block;
  margin-bottom: 8px;
  color: var(--text, #2d2926);
  letter-spacing: 0.5px;
}

.color-swatch {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid transparent;
  transition: transform 0.1s;
}
.color-swatch:hover {
  transform: scale(1.12);
  border-color: white;
}
.slider-group input[type="range"] {
  width: 100%;
  margin: 8px 0;
}
.apply-slider {
  background: var(--accent, #fc27a3);
  color: white;
  border: none;
  padding: 4px 14px;
  border-radius: 30px;
  font-size: 0.7rem;
  font-weight: 700;
  cursor: pointer;
  margin-top: 6px;
}
.apply-slider:hover {
  background: var(--accent-hover, #d91f8a);
}
.slider-value {
  font-weight: 800;
  color: var(--accent, #fc27a3);
}
/* Typing indicator animation */
.typing-bubble {
  display: flex;
  gap: 4px;
  align-items: center;
  padding: 12px 16px;
}
.typing-bubble span {
  width: 8px;
  height: 8px;
  background: var(--muted2, #b5afa8);
  border-radius: 50%;
  display: inline-block;
  animation: typing 1.4s infinite ease-in-out both;
}
.typing-bubble span:nth-child(1) { animation-delay: -0.32s; }
.typing-bubble span:nth-child(2) { animation-delay: -0.16s; }
@keyframes typing {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.5; }
  40% { transform: scale(1); opacity: 1; }
}
.keyword-bar{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:14px 0;
}

.keyword-chip{
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 14px;
  border-radius:999px;
  background:#f1f3f5;
  font-size:14px;
  font-weight:700;
}

.keyword-chip button{
  border:none;
  background:none;
  cursor:pointer;
  display:flex;
  align-items:center;
}
.typing-indicator .typing {
  display: flex;
  gap: 6px;
  align-items: center;
  padding: 12px 16px;
}

.typing-indicator .dot {
  width: 8px;
  height: 8px;
  background-color: #888;
  border-radius: 50%;
  animation: pulse 1.4s ease-in-out infinite;
}

.typing-indicator .dot:nth-child(1) { animation-delay: 0s; }
.typing-indicator .dot:nth-child(2) { animation-delay: 0.2s; }
.typing-indicator .dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes pulse {
  0%, 60%, 100% { transform: scale(1); opacity: 0.6; }
  30% { transform: scale(1.3); opacity: 1; }
}

.msg-filters {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: flex-start;
}

.filter-color-picker {
  background: rgba(0,0,0,0.1);
  padding: 10px;
  border-radius: 16px;
  width: 100%;
}

.selected-colors {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0;
}

.color-picker-add, .color-picker-apply {
  transition: background 0.2s;
}
.color-picker-add:hover {
  background-color: #5a5a5a;
}
.color-picker-apply:hover {
  background-color: #8183ff;
}


.sugg .material-icons {
  font-size: 16px;
}

.keyword-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0;
  padding: 0 12px;
}
.keyword-chip {
  background: var(--accent, #6366f1);
  color: white;
  padding: 4px 8px 4px 12px;
  border-radius: 24px;
  font-size: 0.8rem;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.keyword-chip span {
  cursor: pointer;
  font-weight: bold;
}
/* ===== FILTER PANEL ===== */
.filter-panel {
  display: none;
  background: var(--white);
  border-radius: 20px;
  padding: 20px;
  margin-bottom: 24px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
  border: 1px solid var(--border);
}

.filter-panel.show {
  display: block;
}

.fp-group {
  margin-bottom: 20px;
}

.fp-label {
  display: block;
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
  color: var(--muted);
}

.fp-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.fp-opt {
  background: var(--surface);
  color: var(--text);
  border: none;
  padding: 8px 16px;
  border-radius: 40px;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.fp-opt.active {
  background: #6366f1;
  color: white;
}

.fp-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.fp-swatch {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  transition: transform 0.1s ease, box-shadow 0.2s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.fp-swatch.active {
  transform: scale(1.1);
  box-shadow: 0 0 0 3px #fff, 0 0 0 4px #6366f1;
}

/* ===== KEYWORD BAR ===== */
.keyword-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 16px 0;
  padding: 8px 0;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
}

.keyword-chip {
  background: #f0f0f0;
  padding: 6px 12px;
  border-radius: 32px;
  font-size: 0.85rem;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background 0.2s;
}

.keyword-chip span {
  cursor: pointer;
  font-weight: bold;
  font-size: 14px;
  color: #888;
}

.keyword-chip span:hover {
  color: #e74c3c;
}

/* ===== ACTIVE FILTERS PILLS (optional) ===== */
.active-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.af-pill {
  background: #eef2ff;
  padding: 6px 12px;
  border-radius: 30px;
  font-size: 0.8rem;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.af-pill button {
  background: none;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
}

.af-clear {
  background: none;
  border: none;
  color: #6366f1;
  font-weight: 500;
  cursor: pointer;
}

/* Reverse Image Search Styles */
.reverse-search-modal {
    max-width: 700px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border, #e0e0e0);
    background: var(--white, #ffffff);
    border-radius: 12px 12px 0 0;
}

.modal-header h2 {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1.3rem;
    margin: 0;
    color: var(--text, #2d3436);
}

.modal-header h2 .material-icons {
    color: var(--accent, #fc27a3);
}

.modal-close-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--muted, #636e72);
    padding: 8px;
    border-radius: 50%;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-close-btn:hover {
    background: var(--surface2, #f0f0f0);
    color: var(--text, #2d3436);
}

.modal-close-btn .material-icons {
    font-size: 24px;
}

.reverse-search-content {
    padding: 24px;
    background: var(--white, #ffffff);
}

.upload-zone {
    border: 2px dashed var(--border, #dcdde1);
    border-radius: 12px;
    padding: 40px 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    background: var(--surface, #f8f9fa);
}

.upload-zone:hover {
    border-color: var(--accent, #fc27a3);
    background: var(--accent-light, #fff2ed);
}

.upload-zone.dragover {
    border-color: var(--accent, #fc27a3);
    background: var(--accent-light, #fff2ed);
    transform: scale(1.02);
}

.upload-icon {
    margin-bottom: 8px;
}

.upload-zone h3 {
    margin: 8px 0 4px;
    font-size: 1.1rem;
    color: var(--text, #2d3436);
}

.upload-zone p {
    color: var(--muted, #636e72);
    margin: 4px 0;
    font-size: 0.9rem;
}

.upload-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 24px;
    background: var(--accent, #fc27a3);
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 12px;
}

.upload-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px var(--accent-shadow, rgba(252, 39, 163, 0.3));
}

.upload-limits {
    font-size: 0.8rem;
    color: var(--muted, #636e72);
    margin-top: 8px;
}

.preview-wrapper {
    position: relative;
    margin: 0 auto;
    max-width: 100%;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.preview-wrapper img {
    width: 100%;
    max-height: 400px;
    object-fit: contain;
    display: block;
    background: var(--surface, #f5f5f5);
}

.remove-image-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: rgba(0,0,0,0.7);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 10;
}
/* Keyword bar */
.keyword-bar {
  padding: 8px 16px;
  background: #f8f8f8;
  border-bottom: 1px solid #f0f0f0;
  display: none;
  flex-wrap: wrap;
  gap: 6px;
}
.keyword-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #ec4899;
  color: #fff;
  padding: 4px 10px;
  border-radius: 40px;
  font-size: 0.75rem;
  font-weight: 600;
}
.keyword-chip .remove-btn {
  cursor: pointer;
  font-size: 12px;
  margin-left: 4px;
}
.remove-image-btn:hover {
    background: rgba(231, 76, 60, 0.9);
    transform: scale(1.1);
}

.remove-image-btn .material-icons {
    font-size: 20px;
}

.analysis-status {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 20px;
    margin-top: 16px;
    background: var(--surface, #f8f9fa);
    border-radius: 8px;
}

/* Loading spinner */
.ff-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid #e8b4c8;
  border-top-color: #d4537e;
}
.analysis-status .spinner {
    width: 24px;
    height: 24px;
    border: 3px solid var(--border, #dcdde1);
    border-top: 3px solid var(--accent, #fc27a3);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    display: block;
}

.status-text {
    font-weight: 500;
    color: var(--text, #2d3436);
    margin: 0;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.caption-results {
    margin-top: 20px;
}

.caption-results h4 {
    margin-bottom: 12px;
    font-size: 1rem;
    color: var(--text, #2d3436);
}

.caption-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 200px;
    overflow-y: auto;
}

.caption-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: var(--surface, #f8f9fa);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 2px solid transparent;
}

.caption-item:hover {
    background: var(--surface2, #f0f0f0);
    transform: translateX(4px);
}

.caption-item.selected {
    border-color: var(--accent, #fc27a3);
    background: var(--accent-light, #fff2ed);
}

.caption-text {
    flex: 1;
    font-size: 0.95rem;
    color: var(--text, #2d3436);
}

.caption-confidence {
    font-size: 0.8rem;
    color: var(--muted, #636e72);
    margin-left: 12px;
    white-space: nowrap;
}

.search-actions {
    display: flex;
    gap: 12px;
    margin-top: 20px;
    flex-wrap: wrap;
}

.search-captions-btn,
.show-all-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    flex: 1;
    justify-content: center;
    min-width: 150px;
}

.search-captions-btn {
    background: var(--accent, #fc27a3);
    color: white;
}

.search-captions-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px var(--accent-shadow, rgba(252, 39, 163, 0.3));
}

.show-all-btn {
    background: var(--surface, #f8f9fa);
    color: var(--text, #2d3436);
}

.show-all-btn:hover {
    background: var(--surface2, #f0f0f0);
    transform: translateY(-2px);
}

/* Mobile adjustments */
@media (max-width: 600px) {
    .reverse-search-modal {
        width: 95%;
        max-height: 95vh;
    }
    
    .modal-header h2 {
        font-size: 1.1rem;
    }
    
    .upload-zone {
        padding: 24px 16px;
    }
    
    .upload-zone h3 {
        font-size: 1rem;
    }
    
    .search-actions {
        flex-direction: column;
    }
    
    .search-captions-btn,
    .show-all-btn {
        flex: none;
        width: 100%;
    }
    
    .caption-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
    
    .caption-confidence {
        margin-left: 0;
        font-size: 0.75rem;
    }
    
    .preview-wrapper img {
        max-height: 250px;
    }
}

/* Premium license disclaimer */
.masonry-item .license-disclaimer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 4px 14px;
  background: rgba(0,0,0,0.35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-top: 1px solid rgba(255,255,255,0.06);
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 3;
  transform: translateY(100%);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.masonry-item:hover .license-disclaimer {
  transform: translateY(0);
}

.masonry-item .license-disclaimer .license-label {
  color: rgba(255,255,255,0.5);
  font-size: 0.45rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.masonry-item .license-disclaimer .license-name {
  color: rgba(255,255,255,0.85);
  font-size: 0.55rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  background: rgba(255,255,255,0.06);
  padding: 1px 10px;
  border-radius: 10px;
}

.masonry-item .license-disclaimer .license-source {
  color: rgba(255,255,255,0.2);
  font-size: 0.4rem;
  font-weight: 300;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.masonry-item .license-disclaimer .license-info-btn {
  display: inline-flex;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.15);
  align-items: center;
  justify-content: center;
  font-size: 7px;
  font-weight: 700;
  color: rgba(255,255,255,0.3);
  cursor: help;
  transition: all 0.3s ease;
  background: transparent;
  pointer-events: auto;
}

.masonry-item .license-disclaimer .license-info-btn:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.3);
  color: rgba(255,255,255,0.7);
  transform: scale(1.1);
}

/* =========================================================
   ===== SEARCH DROPDOWN - Combined Suggestions + Recent =====
   ========================================================= */
.ff-suggestions {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 8px;
  background: var(--white);
  border-radius: 16px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.15);
  z-index: 999;
  max-height: 420px;
  overflow-y: auto;
  display: none;
  padding: 6px 0;
  border: 1px solid var(--border);
}

.ff-suggestions.visible {
  display: block;
}

.ff-suggestion-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 16px;
  border: none;
  background: none;
  text-align: left;
  font-size: 14px;
  color: var(--text);
  cursor: pointer;
  border-radius: 8px;
  font-family: 'Nunito', sans-serif;
  transition: background 0.15s ease;
}

.ff-suggestion-item:hover,
.ff-suggestion-item.active {
  background: var(--surface);
}

.ff-suggestion-item .ff-icon {
  color: var(--muted);
  flex-shrink: 0;
  font-size: 18px;
}

.ff-highlight {
  font-weight: 700;
  color: var(--accent);
}

.ff-suggestion-divider {
  display: flex;
  align-items: center;
  padding: 8px 16px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  border-top: 1px solid var(--border);
  margin-top: 4px;
  padding-top: 10px;
}

.ff-suggestion-divider .material-icons {
  font-size: 14px;
  margin-right: 6px;
}

.ff-loading, .ff-no-results {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  color: var(--muted);
  font-size: 14px;
}

.ff-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: ff-spin 0.6s linear infinite;
}

@keyframes ff-spin {
  to { transform: rotate(360deg); }
}

.ff-recent-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 16px;
  border: none;
  background: none;
  text-align: left;
  font-size: 14px;
  color: var(--text);
  cursor: pointer;
  border-radius: 8px;
  font-family: 'Nunito', sans-serif;
  transition: background 0.15s ease;
}

.ff-recent-item:hover {
  background: var(--surface);
}

.ff-recent-item .ff-icon {
  color: var(--muted);
  flex-shrink: 0;
  font-size: 18px;
}

.ff-recent-item .recent-time {
  font-size: 0.7rem;
  color: var(--muted);
  margin-left: auto;
}

.ff-recent-item .remove-recent-btn {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
}

.ff-recent-item .remove-recent-btn:hover {
  background: #fee2e2;
  color: #ef4444;
}

.ff-user-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 16px;
  border: none;
  background: none;
  text-align: left;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  border-radius: 8px;
  font-family: 'Nunito', sans-serif;
  transition: background 0.15s ease;
}

.ff-user-item:hover,
.ff-user-item.active {
  background: var(--surface);
}

.ff-user-item .ff-icon {
  color: var(--muted);
  flex-shrink: 0;
  font-size: 22px;
}

.ff-user-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

/* Profiles tab results, sits in the same #masonry CSS-columns layout as
   photo/video tiles (break-inside/margin-bottom match .masonry-item), but
   as a plain white card rather than an image tile. */
.profile-result-card {
  break-inside: avoid;
  margin-bottom: 24px;
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: 16px;
  padding: 28px 20px;
  text-align: center;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.profile-result-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
  border-color: var(--accent);
}
.profile-result-avatar {
  width: 72px;
  height: 72px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: var(--accent-light);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.profile-result-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.profile-result-avatar .material-icons {
  font-size: 44px;
}
.profile-result-card h3 {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text);
  margin: 0;
}
.profile-result-card p {
  font-size: 0.8rem;
  color: var(--muted);
  margin: 4px 0 0;
}

.recent-empty-state {
  padding: 16px;
  text-align: center;
  color: var(--muted);
  font-size: 0.85rem;
}

.recent-empty-state .material-icons {
  display: block;
  margin: 0 auto 6px;
  font-size: 28px;
  color: var(--muted2);
}

.ff-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ===== Pixie chat widget (index/explore/collections) =====
   The earlier .chat-sidebar rules above this point rely on
   `position: sticky` inside .search-results-container, a flex layout
   that only exists on the search page. On pages without that wrapper,
   sticky positioning had nothing to size against, so the panel rendered
   at width/height 0 despite the .open class being applied correctly.
   This standalone, viewport-fixed version doesn't depend on any
   particular parent layout, so it works the same on every page. It
   comes last in the file so it wins the cascade over the rules above
   (equal specificity, later source order) wherever it's used; the
   search page keeps using its own local <style> override, which is
   more specific in source order there and is unaffected by this block. */
.chat-sidebar {
  position: fixed;
  top: 88px;
  right: 24px;
  width: 0;
  min-width: 0;
  max-width: min(90vw, 380px);
  height: calc(100vh - 120px);
  max-height: 640px;
  overflow: hidden;
  background: var(--white, #ffffff);
  border-radius: 20px;
  border: 1px solid transparent;
  box-shadow: none;
  opacity: 0;
  visibility: hidden;
  transition: width 0.25s ease, opacity 0.2s ease, visibility 0.2s;
  z-index: 150;
}

.chat-sidebar.open {
  width: 360px;
  min-width: 280px;
  opacity: 1;
  visibility: visible;
  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.12);
  border-color: var(--border, #e2ddd7);
}

@media (max-width: 760px) {
  .chat-sidebar {
    left: 12px;
    right: 12px;
    top: auto;
    bottom: 96px;
    max-width: none;
    height: 60vh;
    max-height: 60vh;
  }
  .chat-sidebar.open {
    width: auto;
  }
  .chat-sidebar .resize-handle {
    display: none;
  }
}

/* Inner widget chrome. Scoped under .chat-sidebar (rather than bare
   .chat-inside/.chat-head/etc, several of which are already defined
   earlier in this file inside malformed rules with missing closing
   braces, e.g. ".ff-suggestions .ff-icon {" never closes before the
   next selector, so the browser's error recovery swallows whatever
   follows unpredictably). Scoping avoids relying on those broken rules
   at all instead of trying to untangle them. */
.chat-sidebar .chat-inside {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.chat-sidebar .chat-head {
  padding: 12px 18px 14px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--white);
  flex-shrink: 0;
  min-height: 72px;
}

.chat-sidebar .chat-head-text {
  flex: 1;
}

.chat-sidebar .chat-head-text h3 {
  font-size: 0.95rem;
  margin: 0;
  color: var(--text);
  font-weight: 700;
}

.chat-sidebar .chat-head-text p {
  font-size: 0.7rem;
  margin: 0;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 4px;
}

.chat-sidebar .online-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #22c55e;
  display: inline-block;
}

.chat-sidebar .chat-x {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  padding: 6px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chat-sidebar .chat-x:hover {
  background: var(--surface2);
  color: var(--text);
}

.chat-sidebar .chat-msgs {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px;
  background: var(--surface);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.chat-sidebar .chat-msgs .msg {
  display: flex;
  gap: 10px;
}

.chat-sidebar .chat-msgs .msg-content {
  background: var(--white);
  padding: 10px 14px;
  border-radius: 12px;
  border-top-left-radius: 4px;
  max-width: 80%;
  font-size: 0.85rem;
  color: var(--text);
  box-shadow: var(--shadow-sm);
  line-height: 1.5;
}

.chat-sidebar .chat-msgs .msg.user {
  justify-content: flex-end;
}

.chat-sidebar .chat-msgs .msg.user .msg-content {
  background: var(--accent);
  color: #fff;
  border-top-left-radius: 12px;
  border-top-right-radius: 4px;
}

.chat-sidebar .chat-foot {
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  display: flex;
  gap: 8px;
  background: var(--white);
  flex-shrink: 0;
}

.chat-sidebar .chat-foot .chat-in {
  flex: 1;
  padding: 8px 14px;
  border: 1.5px solid var(--border);
  border-radius: 40px;
  font-size: 0.85rem;
  outline: none;
  background: var(--white);
  color: var(--text);
  transition: border-color 0.2s ease;
}

.chat-sidebar .chat-foot .chat-in:focus {
  border-color: var(--accent);
}

.chat-sidebar .chat-foot .chat-send {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: var(--accent);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.2s ease;
}

.chat-sidebar .chat-foot .chat-send:hover {
  background: var(--accent-hover);
}

.chat-sidebar .resize-handle {
  position: absolute;
  left: -6px;
  top: 18px;
  bottom: 18px;
  width: 6px;
  cursor: ew-resize;
  background: var(--border);
  border-radius: 999px;
}

.chat-sidebar .resize-handle:hover {
  background: var(--accent);
  opacity: 0.6;
}
/* Profile dropdown: the name + email header links to the profile page.
   Overrides the dropdown's menu-row link styling (flex row, padding) so it
   keeps its original stacked header look. */
.user-dropdown a.user-dropdown-header {
  display: block;
  padding: 12px 20px 14px;
  font-weight: 400;
  font-size: inherit;
  cursor: pointer;
}
.user-dropdown a.user-dropdown-header:hover .dropdown-name {
  color: var(--accent, #fc27a3);
}
.user-dropdown .user-dropdown-header .dropdown-email {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}