/* static/css/sidebar.css */
.sidebar-card {
    width: 168px;
    flex-shrink: 0;
    position: sticky;
    top: 2rem;
    height: fit-content;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    padding: 8px;
    font-size: 0.8rem;
}

.tags-header {
    font-weight: 700;
    margin: 8px 0 6px;
}

.tag-search {
    display: flex;
}

.tag-search input[type="text"] {
    flex: 1 1 auto;
    min-width: 0;
    padding: 8px 10px;
    border: 1px solid #ddd;
    border-right: 0;
    border-radius: 8px 0 0 8px;
    outline: none;
}

.tag-search button {
    flex: 0 0 auto;
    padding: 0 12px;
    border: 1px solid #ddd;
    border-left: 0;
    border-radius: 0 8px 8px 0;
    background: #f8f8f8;
    cursor: pointer;
    line-height: 36px;
    font-size: 0.95rem;
}

.tag-search button:hover {
    background: #f2f2f2;
}

.tag-list {
    list-style: none;
    padding: 0;
    margin: 10px 0 0;
}

.tag-list li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
}

.tag-list li::before {
    content: "✑";
    font-weight: 700;
    color: #9aa0a6;
    flex: 0 0 auto;
}

.tag-list li a {
    background: none;
    padding: 0;
    border-radius: 0;
    text-decoration: none;
    color: #444;
    font-size: 0.9rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
}

.tag-list li a:hover {
    text-decoration: underline;
    color: #111;
}

.nav-links {
    display: flex;
    flex-direction: column;
    margin-bottom: 12px;
    font-size: 0.9rem;
}

.nav-link {
    display: flex;
    align-items: center;
    padding: 6px 8px;
    margin: 2px 0;
    color: #3a3a3a;
    text-decoration: none;
    border-radius: 6px;
    font-weight: 600;
}

.nav-link .icon {
    display: inline-block;
    margin-right: 8px;
    font-size: 1rem;
}

.nav-link.active .icon {
    opacity: 0.9;
}

.nav-link:hover:not(.active) {
    background: #f0f0f0;
}

/* Remove or override the old 768px block and use this instead */
@media (max-width: 899px) {
  .sidebar-card {            /* left tags rail */
    width: 100%;
    position: static;
  }
  .sticker-sidebar {         /* right sticker rail */
    width: max-content;      /* only as wide as its contents */
    position: static;
  }
}

/* Allow floating override on small screens when we add the class */
@media (max-width: 899px) {
  .sticker-sidebar.is-floating {
    width: auto;      /* override 100% */
    position: fixed;  /* override static */
  }
}

@media (max-width: 899px) {
  .sticker-sidebar {
    position: fixed !important;
    right: 12px;
    bottom: 12px;               /* anchor to bottom */
    top: auto !important;       /* kill the sticky top */
    left: auto !important;
    transform: none !important;
    margin: 0 !important;

    width: auto;
    max-width: min(92vw, 360px);
    max-height: calc(100vh - 24px); /* never exceed viewport */
    overflow: auto;
    box-shadow: 0 10px 24px rgba(0,0,0,.25);
    border-radius: 12px;
  }
}

/* ==== Following Creators (sidebar) ==== */
.creator-list {
  list-style: none;
  padding: 0;
  margin: 10px 0 0;
}

.creator-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
}

.creator-list li a {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: #444;
  font-size: .9rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji",
               "Segoe UI Emoji", "Segoe UI Symbol";
}

.creator-list li a:hover {
  text-decoration: underline;
  color: #111;
}

.creator-list .avatar.tiny {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  object-fit: cover;
  display: inline-block;
  flex: 0 0 20px;
  background: #eee; /* graceful fallback if image fails */
}

/* Optional: subtle divider between sections to match sidebar feel */
.tags-header + .creator-list {
  margin-top: 6px;
}

/* Tiny avatar — square */
.sidebar-card .creator-list img.avatar.tiny,
.sidebar-card .creator-list a img.avatar.tiny {
  width: 20px !important;
  height: 20px !important;
  border-radius: 4px !important; /* square with slightly rounded corners */
  object-fit: cover;
  flex: 0 0 20px;
  display: inline-block;
  background: #eee; /* graceful fallback */
}

/* Scope to the left sidebar only */
#tags-sidebar .sponsored-block .sponsored-list {
  list-style: none;
  padding-left: 0;
  margin: 6px 0 0;
}
#tags-sidebar .sponsored-block .sponsored-list li + li { margin-top: 6px; }

#tags-sidebar .sponsored-block .sponsored-item {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 6px 8px;
  border-radius: 8px;
  text-decoration: none;
  background: rgba(255,255,255,0.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(0,0,0,0.06);
}
#tags-sidebar .sponsored-block .sponsored-item:hover {
  background: rgba(255,255,255,0.85);
}

#tags-sidebar .sponsored-block .sponsored-meta {
  display: flex; align-items: center; gap: 8px;
}
#tags-sidebar .sponsored-block .sponsored-title {
  font-weight: 600; color: #444;
}
#tags-sidebar .sponsored-block .sponsored-pill {
  font-size: 11px; line-height: 1;
  padding: 4px 6px; border-radius: 999px;
  background: rgba(239,194,125,0.18);
  color: #6b5a2e;
  border: 1px solid rgba(239,194,125,0.35);
  white-space: nowrap;
}

/* CTA link (renamed to avoid collisions) */
#tags-sidebar .sponsored-block .brandfeed-cta { margin-top: 8px; }
#tags-sidebar .sponsored-block .brandfeed-cta .nav-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.8rem; text-decoration: none;
}
#tags-sidebar .sponsored-block .brandfeed-cta .nav-link:hover { text-decoration: underline; }

/* Placeholder card — scoped */
#tags-sidebar .sponsored-block .sponsored-card {
  display: block;
  margin-top: 8px;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,0.07);
  background: radial-gradient(120% 120% at 0% 0%, rgba(250,244,232,0.6), rgba(255,255,255,0.5));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: transform .08s ease, background .2s ease;
}
#tags-sidebar .sponsored-block .sponsored-card:hover { transform: translateY(-1px); }

#tags-sidebar .sponsored-block .sponsored-top { display: flex; justify-content: flex-end; }
#tags-sidebar .sponsored-block .sponsored-body { display: flex; gap: 10px; align-items: center; margin-top: 6px; }
#tags-sidebar .sponsored-block .sponsored-copy { display: grid; gap: 2px; }
#tags-sidebar .sponsored-block .sponsored-desc { font-size: 12px; color: #666; }
#tags-sidebar .sponsored-block .sponsored-cta { margin-top: 8px; font-size: 12px; font-weight: 600; color: #1a5ad7; }

/* Empty state text (used in tags/creators/sponsored) */
.no-tags {
  color: #777;       /* default grey */
  font-size: 0.8rem; /* keep consistent with sidebar font size */
  margin: 4px 0;
}

.no-tags.important {
  color: #d9534f; /* example: make it red for emphasis */
}

/* --- Sponsored block --- */
.sponsored-list {
  list-style: none;
  padding-left: 0;
  margin: 6px 0 0;
}
.sponsored-list li + li { margin-top: 6px; }

.sponsored-item {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 6px 8px;
  border-radius: 8px;
  text-decoration: none;
  background: rgba(255,255,255,0.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(0,0,0,0.06);
}
.sponsored-item:hover {
  background: rgba(255,255,255,0.85);
}

.sponsored-meta { display: flex; align-items: center; gap: 8px; }
.sponsored-title {
  font-weight: 600;
  color: #222;
}
.sponsored-pill {
  font-size: 11px;
  line-height: 1;
  padding: 4px 6px;
  border-radius: 999px;
  background: rgba(239,194,125,0.18); /* subtle gold */
  color: #6b5a2e;
  border: 1px solid rgba(239,194,125,0.35);
  white-space: nowrap;
}

/* Card-style placeholder when no feeds exist yet */
.sponsored-card {
  display: block;
  margin-top: 8px;
  padding: 10px;
  border-radius: 12px;
  text-decoration: none;
  border: 1px solid rgba(0,0,0,0.07);
  background: radial-gradient(120% 120% at 0% 0%, rgba(250,244,232,0.6), rgba(255,255,255,0.5));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: transform .08s ease, background .2s ease;
}
.sponsored-card:hover { transform: translateY(-1px); }

.sponsored-top { display: flex; justify-content: flex-end; }
.sponsored-body {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 6px;
}
.sponsored-logo {
  width: 28px; height: 28px;
  border-radius: 6px;
  display: grid; place-items: center;
  background: rgba(0,0,0,0.04);
  font-size: 16px;
}
.sponsored-copy { display: grid; gap: 2px; }
.sponsored-desc {
  font-size: 12px;
  color: #666;
}
.sponsored-cta {
  margin-top: 8px;
  font-size: 12px;
  font-weight: 600;
  color: #1a5ad7;
}

.brand-feed-link,
.brand-feed-link a {
  display: flex;
  align-items: center;
  padding: 2px 2px;
  margin: 2px 0;
  color: #444;
  text-decoration: none;
  border-radius: 6px;
  font-weight: 600;
  text-decoration: none;
}
.brand-feed-link:hover,
.brand-feed-link a:hover {
  text-decoration: none; /* or none, if you want it clean */
}

.tag-search .search-icon {
  width: 16px;
  height: 16px;
  display: block; /* ensures it centers correctly */
}

.icon-link {
  display: flex;
  align-items: center;
  gap: 6px;              /* ← adds space between icon and text */
  text-decoration: none;
  color: inherit;
  padding: 6px 8px;
  color: #444;
  border-radius: 6px;
  font-weight: 600;
}

.nav-icon {
  width: 20px;
  height: 20px;
}

/* Works whether you used <div class="tags-header"> or <h4> */
#tags-sidebar .tags-header,
#tags-sidebar h4.section-title,
#tags-sidebar .section-title {
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.75rem;
  color: #666;
  margin: 1rem 0 0.5rem;
  letter-spacing: 0.06em;
}

/* === Add subtle spacing above sidebar section labels === */
#tags-sidebar .tags-header,
#tags-sidebar h4.section-title,
#tags-sidebar .section-title {
  margin-top: 18px;      /* extra space before section label */
  margin-bottom: 6px;    /* keep bottom tight */
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.75rem;
  color: #666;
  letter-spacing: 0.06em;
}

/* Remove extra space above the very first label (Trending) */
#tags-sidebar .tags-header:first-of-type {
  margin-top: 8px;
}

/* tighten top edge just a touch */
#tags-sidebar .tags-header:first-of-type { margin-top: 10px; }

/* consistent label spacing (slightly tighter than before) */
#tags-sidebar .tags-header,
#tags-sidebar h4.section-title,
#tags-sidebar .section-title {
  margin-top: 18px;   /* was 22px */
  margin-bottom: 6px; /* keeps label close to list */
}

/* make Sponsored not feel too far from Creators */
#tags-sidebar .tags-header + .sponsored-list { margin-top: 6px; }

/* smoother list rhythm so bullet + text feel centered */
#tags-sidebar .tag-list li,
#tags-sidebar .creator-list li {
  padding: 6px 0;
  line-height: 1.4;
}

/* soften the bullet and align a touch tighter */
#tags-sidebar .tag-list li::before {
  color: #b6bcc3;
  margin-left: 2px;
}

/* Align sidebar sections with search box edges */
#tags-sidebar .tags-header,
#tags-sidebar .tag-list,
#tags-sidebar .creator-list,
#tags-sidebar .no-tags,
#tags-sidebar .sponsored-block {
  padding-left: 4px;  /* or 0 if you want them perfectly flush */
  margin-left: 0;
}

body.sticker-dragging .sticker.is-dragging,
body.sticker-dragging .sticker-icon.is-dragging {
  animation: none !important;                 /* stop sprite animation */
  background-position-x: 0 !important;        /* show first frame */
  background-position-y: 100% !important;     /* bottom row for drag look */
  filter: saturate(.9);
}