/* ============================================================
   HASHTAG PICKER (typeahead dropdown) + HASHTAG DETAIL PAGE
   Matches ActGram create-flow inputs + brand cyan (#00AEEF).
   Namespaced (.htp-* / .hdp-*) so nothing existing is overridden.
   ============================================================ */

/* ---------- Picker dropdown ---------- */
.htp-dropdown {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px);
  background: #FFFFFF; border: 1px solid #E2E8F0; border-radius: 14px;
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.14);
  max-height: 300px; overflow-y: auto; z-index: 70;
  -webkit-overflow-scrolling: touch;
}
.htp-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; cursor: pointer;
  border-bottom: 1px solid rgba(15, 23, 42, 0.04);
  transition: background 140ms;
}
.htp-row:last-child { border-bottom: none; }
.htp-row:hover, .htp-row--active { background: #F0FAFF; }
.htp-row--new { background: #F8FCFF; }
.htp-hash {
  width: 32px; height: 32px; flex-shrink: 0; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #E8F7FD; color: #00AEEF; font-weight: 800; font-size: 16px;
}
.htp-meta { flex: 1; min-width: 0; }
.htp-tag {
  font-size: 14px; font-weight: 700; color: #0F172A;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  display: flex; align-items: center; gap: 4px;
}
.htp-sub { font-size: 11.5px; color: #94A3B8; }
.htp-add { font-size: 18px; color: #00AEEF; flex-shrink: 0; }
.htp-trend { font-size: 13px; color: #F97316; }
.htp-official { font-size: 13px; color: #1D9BF0; }
.htp-empty { padding: 18px 12px; text-align: center; font-size: 13px; color: #94A3B8; }

/* Dark variant for the director dark sheet input */
.input-dark + .htp-dropdown,
.htp-dark .htp-dropdown { background: #0F172A; border-color: #1E293B; }

/* ============================================================
   HASHTAG DETAIL PAGE  (#hashtag-detail)
   Instagram-style: big title, count row, follow button, tabs,
   post/reel grids. Reuses the profile grid + feed card styles.
   ============================================================ */
.hdp-page {
  min-height: 100vh; background: #FFFFFF;
  font-family: 'DM Sans', sans-serif; box-sizing: border-box;
}
.hdp-appbar {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; border-bottom: 1px solid #F1F5F9;
  position: sticky; top: 0; background: #FFFFFF; z-index: 10;
}
.hdp-back {
  width: 40px; height: 40px; border-radius: 12px; border: 1px solid #E2E8F0;
  background: #FFFFFF; display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0;
}
.hdp-appbar-title { font-size: 16px; font-weight: 800; color: #0F172A; font-family: 'Outfit', sans-serif; }

.hdp-hero { padding: 24px 20px 16px; text-align: center; }
.hdp-hash-badge {
  width: 76px; height: 76px; border-radius: 50%; margin: 0 auto 14px;
  background: linear-gradient(135deg, #00AEEF, #0072B5);
  display: flex; align-items: center; justify-content: center;
  font-size: 38px; font-weight: 900; color: #FFFFFF;
  box-shadow: 0 12px 30px rgba(0, 174, 239, 0.28);
}
.hdp-title {
  font-size: 24px; font-weight: 900; color: #0F172A; margin: 0 0 4px;
  font-family: 'Outfit', sans-serif; word-break: break-word;
  display: inline-flex; align-items: center; gap: 6px; justify-content: center;
}
.hdp-title .hdp-trend-pill {
  font-size: 11px; font-weight: 800; color: #F97316; background: #FFF7ED;
  border-radius: 999px; padding: 2px 9px; display: inline-flex; align-items: center; gap: 3px;
}
.hdp-counts {
  display: flex; align-items: center; justify-content: center; gap: 22px;
  margin: 12px 0 18px;
}
.hdp-count-num { font-size: 18px; font-weight: 800; color: #0F172A; }
.hdp-count-label { font-size: 12px; color: #64748B; }
.hdp-follow-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-width: 180px; padding: 12px 26px; border: none; border-radius: 14px;
  font-size: 15px; font-weight: 800; cursor: pointer;
  background: #00AEEF; color: #FFFFFF;
  box-shadow: 0 10px 26px rgba(0, 174, 239, 0.28);
  transition: transform 200ms, background 200ms;
  font-family: 'Outfit', sans-serif;
}
.hdp-follow-btn:hover { transform: translateY(-1px); }
.hdp-follow-btn.following {
  background: #F1F5F9; color: #0F172A; box-shadow: none;
}

.hdp-tabs {
  display: flex; border-bottom: 1px solid #F1F5F9; margin-top: 8px;
  position: sticky; top: 68px; background: #FFFFFF; z-index: 9;
}
.hdp-tab {
  flex: 1; text-align: center; padding: 12px 0; cursor: pointer;
  font-size: 13px; font-weight: 700; color: #94A3B8;
  border-bottom: 2px solid transparent; background: none; border-top: none; border-left: none; border-right: none;
  font-family: 'Outfit', sans-serif;
}
.hdp-tab.active { color: #00AEEF; border-bottom-color: #00AEEF; }

.hdp-body { padding: 4px; }
.hdp-empty {
  padding: 60px 20px; text-align: center; color: #94A3B8;
}
.hdp-empty i { font-size: 44px; display: block; margin-bottom: 10px; color: #CBD5E1; }

/* Related hashtags chip row */
.hdp-related { padding: 16px 16px 24px; border-top: 1px solid #F1F5F9; }
.hdp-related-title { font-size: 13px; font-weight: 800; color: #0F172A; margin-bottom: 10px; }
.hdp-related-row { display: flex; flex-wrap: wrap; gap: 8px; }
.hdp-related-chip {
  font-size: 13px; font-weight: 700; color: #0072B5; background: #E8F7FD;
  border-radius: 999px; padding: 6px 12px; cursor: pointer;
  transition: background 160ms;
}
.hdp-related-chip:hover { background: #D5F0FB; }

/* Reuse a 3-col grid for posts/reels (same feel as profile grid) */
.hdp-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px;
}
/* Each cell is a positioned container so renderPostThumbnail's
   absolutely-positioned .profile-post-thumb fills it (matches the profile
   grid's Instagram-style 3:4 portrait tiles). */
.hdp-grid-cell {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: #F1F5F9;
}
.hdp-grid-cell > .profile-post-thumb,
.hdp-grid-cell > * {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Inline clickable hashtag inside caption/thought body text */
.ag-inline-hashtag {
  color: #0072B5; font-weight: 600; cursor: pointer;
}
.ag-inline-hashtag:hover { text-decoration: underline; }

/* Trending hashtag chips (search default view / discover) */
.ag-trend-tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 700; color: #0F172A;
  background: #F1F5F9; border-radius: 999px; padding: 8px 14px;
  cursor: pointer; transition: background 160ms;
}
.ag-trend-tag:hover { background: #E8F7FD; }
.ag-trend-tag .ag-trend-hash { color: #00AEEF; font-weight: 900; }
.ag-trend-tag .ag-trend-flame { color: #F97316; font-size: 12px; }
.ag-trend-tag .ag-trend-count { font-size: 11px; color: #94A3B8; font-weight: 500; }

@media (prefers-color-scheme: dark) {
  :root[data-theme="dark"] .htp-dropdown { background: #0F172A; border-color: #1E293B; }
  :root[data-theme="dark"] .htp-tag { color: #F1F5F9; }
  :root[data-theme="dark"] .hdp-page { background: #0B1220; }
}