* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', system-ui, sans-serif; background: #000; color: #ffffff; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-tap-highlight-color: transparent; }

.yellow-highlight { color: #ff9f0a !important; }

h1, h2, h3, h4, h5, h6 { font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', system-ui, sans-serif; font-weight: 600; letter-spacing: -0.025em; }

::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.15); }
.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }

.panel { background: rgba(18,18,18,0.8); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border: 1px solid rgba(255,255,255,0.06); }
.card { background: rgba(22,22,22,0.6); border: 1px solid rgba(255,255,255,0.05); border-radius: 14px; transition: all 0.2s; }
.card:hover { border-color: rgba(255,255,255,0.1); }
.card-hover:hover { border-color: rgba(99,102,241,0.15); background: rgba(99,102,241,0.02); }
.input-field { background: rgba(18,18,18,0.6); border: 1px solid rgba(255,255,255,0.08); color: #ffffff; outline: none; border-radius: 10px; transition: all 0.2s; font-size: 13px; }
.input-field:focus { border-color: rgba(255,255,255,0.2); box-shadow: 0 0 0 3px rgba(255,255,255,0.04); }
.input-field::placeholder { color: #7c7c82; }
select.input-field { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 32px; }

.screen-view { opacity: 0; transform: translateY(8px); transition: opacity 0.35s cubic-bezier(0.16,1,0.3,1), transform 0.35s cubic-bezier(0.16,1,0.3,1); display: none; }
.screen-view.active { display: block; min-height: 100%; }
.screen-view.visible { opacity: 1; transform: translateY(0); }

.btn-primary { background: #fff; color: #000; font-weight: 600; border-radius: 10px; padding: 10px 20px; font-size: 13px; border: none; cursor: pointer; transition: all 0.2s; }
.btn-primary:hover { background: #e5e5e7; }
.btn-primary:active { transform: scale(0.97); }
.btn-secondary { background: rgba(255,255,255,0.06); color: #ffffff; font-weight: 500; border-radius: 10px; padding: 10px 20px; font-size: 13px; border: 1px solid rgba(255,255,255,0.08); cursor: pointer; transition: all 0.2s; }
.btn-secondary:hover { background: rgba(255,255,255,0.1); }
.btn-ghost { background: transparent; color: #b0b0b5; border: none; cursor: pointer; transition: all 0.2s; font-size: 13px; padding: 8px 12px; border-radius: 8px; }
.btn-ghost:hover { background: rgba(255,255,255,0.04); color: #ffffff; }
.btn-danger { background: #ff3b30; color: #ffffff; font-weight: 600; border-radius: 10px; padding: 10px 20px; font-size: 13px; border: none; cursor: pointer; transition: all 0.2s; }
.btn-danger:hover { background: #ff1f0f; }
.btn-danger:active { transform: scale(0.97); }

.badge { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 999px; font-size: 10px; font-weight: 500; letter-spacing: 0.01em; }
.badge-emerald { background: rgba(52,199,89,0.1); color: #34c759; border: 1px solid rgba(52,199,89,0.15); }
.badge-orange { background: rgba(255,159,10,0.1); color: #ff9f0a; border: 1px solid rgba(255,159,10,0.15); }
.badge-purple { background: rgba(175,82,222,0.1); color: #af52de; border: 1px solid rgba(175,82,222,0.15); }
.badge-blue { background: rgba(0,122,255,0.1); color: #007aff; border: 1px solid rgba(0,122,255,0.15); }

.chip { display: inline-flex; align-items: center; gap: 4px; padding: 6px 14px; border-radius: 999px; font-size: 12px; font-weight: 500; border: 1px solid rgba(255,255,255,0.08); color: #b0b0b5; cursor: pointer; transition: all 0.2s; white-space: nowrap; background: transparent; }
.chip:hover { border-color: rgba(255,255,255,0.15); color: #ffffff; }
.chip-active { background: #fff; color: #000; border-color: #fff; font-weight: 600; }
.chip-active:hover { background: #e5e5e7; color: #000; border-color: #e5e5e7; }
.active-chip { background: rgba(255,255,255,0.1); color: #fff; border-color: rgba(255,255,255,0.2); }

.post-card { background: rgba(18,18,18,0.5); border: 1px solid rgba(255,255,255,0.05); border-radius: 14px; overflow: hidden; transition: all 0.2s; }
.post-card:hover { border-color: rgba(255,255,255,0.08); }

.builder-card { display: flex; align-items: center; gap: 14px; padding: 14px; background: rgba(18,18,18,0.4); border: 1px solid rgba(255,255,255,0.05); border-radius: 12px; cursor: pointer; transition: all 0.2s; }
.builder-card:hover { border-color: rgba(255,255,255,0.1); background: rgba(255,255,255,0.02); }
.builder-avatar-box { width: 56px; height: 56px; border-radius: 10px; overflow: hidden; flex-shrink: 0; }

.chat-sent { background: #fff; color: #000; border-radius: 14px 14px 4px 14px; }
.chat-received { background: rgba(255,255,255,0.06); color: #ffffff; border-radius: 14px 14px 14px 4px; }

/* ── Sticky screen headers (search bar + title) on mobile ───────────────── */
/* On desktop the section scrolls naturally; on mobile the header block sticks
   to the top of #mainScroll so only the content cards scroll underneath it. */
.screen-sticky-header {
  /* desktop: no stickiness, normal block flow */
}
@media (max-width: 767px) {
  /* Remove top padding from the section itself — the sticky header provides it */
  #screen-home, #screen-feed, #screen-explore, #screen-marketplace {
    padding-top: 0 !important;
  }
  .screen-sticky-header {
    position: sticky;
    top: 0;
    z-index: 20;
    background: #000;
    /* Negate the section's px-4 horizontal padding so the bar spans full width */
    margin-left: -16px;
    margin-right: -16px;
    padding: 16px 16px 12px;
    /* Subtle shadow so content scrolls under cleanly */
    box-shadow: 0 2px 12px rgba(0,0,0,0.6);
  }
}

/* ── Messages screen ─────────────────────────────────────────────────────── */
/* On mobile: always cover the full viewport so desktop sidebar never bleeds through */
@media (max-width: 767px) {
  #screen-messages.active { position: fixed; inset: 0; z-index: 45; display: flex !important; flex-direction: column !important; }
}
/* Desktop: absolutely fill #mainScroll (which gets position:relative via JS).
   This sidesteps all percentage-height-in-flex-container ambiguities — the
   element just stretches to its nearest positioned ancestor's bounds. */
@media (min-width: 768px) {
  #screen-messages.active {
    position: absolute !important;
    inset: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
  }
}
/* Active-chat overlay: fixed full-screen on ALL sizes, dvh shrinks with keyboard.
   NOTE: No 'bottom' or 'inset' — only top/left/right + height so JS can override
   height when the keyboard opens without 'bottom:0' fighting it. */
#screen-messages.active.in-chat {
  position: fixed; top: 0; left: 0; right: 0; z-index: 45;
  height: 100vh; height: 100dvh; /* dvh = dynamic viewport height, keyboard-aware */
  display: flex !important; flex-direction: column !important;
}

/* Inner chat layout: header pinned, messages scroll, input pinned */
#msgActive { min-height: 0; }
#msgMessages { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding-bottom: 16px; }
#chatInputBar { flex-shrink: 0 !important; }

/* Chat header: flex-shrink-0 on the element itself keeps it pinned;
   position:sticky is NOT used here because #msgMain has overflow:hidden
   which breaks sticky. The header stays at top purely via flex layout. */

/* Ensure msgMain flex container constrains height properly */
#msgMain { overflow: hidden; }

/* When keyboard opens: resize the chat container to the visual viewport */
body.keyboard-open { overflow: hidden !important; }
body.keyboard-open #screen-messages.active { overscroll-behavior: contain; touch-action: pan-y; }

/* ── Global bottom navigation ─────────────────────────────────────────────── */
/* z-index 50 — higher than messages screen (45) so nav floats on top in list view */
nav#mobileNav { position: fixed; bottom: 0; left: 0; right: 0; z-index: 50; background: rgba(18,18,18,0.8); backdrop-filter: blur(24px); border-top: 1px solid rgba(255,255,255,0.06); }
body.keyboard-open nav#mobileNav { display: none; }

/* Floating pill-shaped message input bar */
#msgInputBar.floating { background: rgba(24,24,24,0.8); backdrop-filter: blur(24px); border-radius: 9999px; padding: 8px 16px; margin: 0 16px; box-shadow: 0 4px 20px rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.08); }
#msgInputBar.floating form { background: transparent; border-radius: 9999px; }
#msgInputBar.floating input { background: transparent; border: none; color: white; padding: 8px 12px; font-size: 14px; }
#msgInputBar.floating input::placeholder { color: #7c7c82; }
#msgInputBar.floating button { background: white; color: black; border: none; border-radius: 50%; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s; }
#msgInputBar.floating button:hover { background: #e5e5e7; transform: scale(1.05); }

/* Desktop message input bar styling */
#msgInputBar.desktop { position: fixed; bottom: 72px; left: 50%; transform: translateX(-50%); width: 100%; max-width: 640px; padding: 16px; z-index: 50; }
#msgInputBar.desktop form { background: rgba(24,24,24,0.8); backdrop-filter: blur(24px); border-radius: 9999px; box-shadow: 0 8px 32px rgba(0,0,0,0.4); border: 1px solid rgba(255,255,255,0.08); }
#msgInputBar.desktop input { background: transparent; border: none; color: white; padding: 12px 20px; font-size: 15px; }
#msgInputBar.desktop input::placeholder { color: #7c7c82; }
#msgInputBar.desktop button { background: white; color: black; border: none; border-radius: 50%; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s; margin-left: 8px; }
#msgInputBar.desktop button:hover { background: #e5e5e7; transform: scale(1.05); }

/* Notification badge styling */
.badge-unread { background: #ff3b30; color: white; font-weight: bold; box-shadow: 0 2px 8px rgba(255,59,48,0.4); }


/* Floating pill-shaped message input bar */
#msgInputBar.floating { background: rgba(18,18,18,0.8); backdrop-filter: blur(24px); border-top: 1px solid rgba(255,255,255,0.06); }
#msgInputBar.floating form { background: rgba(24,24,24,0.6); border: 1px solid rgba(255,255,255,0.08); border-radius: 9999px; padding: 8px 16px; box-shadow: 0 4px 20px rgba(0,0,0,0.3); transition: all 0.3s ease; }
#msgInputBar.floating form:focus-within { border-color: rgba(255,255,255,0.2); box-shadow: 0 6px 30px rgba(0,0,0,0.4); }
#msgInputBar.floating input { background: transparent; border: none; color: white; padding: 8px 12px; font-size: 14px; }
#msgInputBar.floating input::placeholder { color: #7c7c82; }
#msgInputBar.floating button { background: white; color: black; border: none; border-radius: 50%; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s; }
#msgInputBar.floating button:hover { background: #e5e5e7; transform: scale(1.05); }

/* Desktop message input bar styling */
#msgInputBar.desktop { position: fixed; bottom: 72px; left: 50%; transform: translateX(-50%); width: 100%; max-width: 640px; padding: 16px; z-index: 50; }
#msgInputBar.desktop form { background: rgba(24,24,24,0.8); backdrop-filter: blur(24px); border-radius: 9999px; box-shadow: 0 8px 32px rgba(0,0,0,0.4); border: 1px solid rgba(255,255,255,0.08); }
#msgInputBar.desktop input { background: transparent; border: none; color: white; padding: 12px 20px; font-size: 15px; }
#msgInputBar.desktop input::placeholder { color: #7c7c82; }
#msgInputBar.desktop button { background: white; color: black; border: none; border-radius: 50%; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s; margin-left: 8px; }
#msgInputBar.desktop button:hover { background: #e5e5e7; transform: scale(1.05); }

/* Notification badge styling */
.badge-unread { background: #ff3b30; color: white; font-weight: bold; box-shadow: 0 2px 8px rgba(255,59,48,0.4); }


@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pulse-subtle { 0%,100% { opacity: 1; } 50% { opacity: 0.5; } }
.animate-fade-in { animation: fadeIn 0.3s cubic-bezier(0.16,1,0.3,1) forwards; }
.animate-slide-up { animation: slideUp 0.4s cubic-bezier(0.16,1,0.3,1) forwards; }

.modal-overlay { overscroll-behavior: contain; }

.sidebar-btn { color: #b0b0b5; font-size: 13px; padding: 10px 14px; border-radius: 10px; transition: all 0.15s; border: none; background: transparent; cursor: pointer; width: 100%; text-align: left; display: flex; align-items: center; gap: 10px; }
.sidebar-btn:hover { background: rgba(255,255,255,0.04); color: #ffffff; }
.sidebar-btn.active { background: rgba(255,255,255,0.08); color: #fff; font-weight: 500; }

.mob-btn { color: #7c7c82; font-size: 11px; background: none; border: none; cursor: pointer; transition: all 0.15s; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding-top: 8px; touch-action: manipulation; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; }
.mob-btn:hover { color: #d0d0d5; }
.mob-btn.active { color: #ffffff; }
.mob-btn.active i { filter: drop-shadow(0 0 6px rgba(255,255,255,0.35)); }
.mob-btn.active #mobProfileAvatar { box-shadow: 0 0 0 2px #fff; }

/* Back button in the top header — subtle pill that only shows when off root */
#headerBackBtn { box-shadow: none; }
#headerBackBtn:active { transform: scale(0.9); }

@media (max-width: 767px) {
  nav#mobileNav .nav-label { display: block; }
  nav#mobileNav button { padding: 6px 4px; min-width: 0; }
}

/* Keep bottom nav anchored + respect home-indicator safe area on mobile.
   Modals render at z-50 in fixed overlays above this, so closing a modal can
   never leave the nav in a broken/obscured state. */
nav#mobileNav {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 50; /* above the messages full-screen overlay (z-45) */
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
body.keyboard-open nav#mobileNav { display: none; }

.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Proveit is dark mode only — no light theme */

/* Chat messages */

/* Toast */

/* Badges — improve contrast for better visibility */

/* Skeleton */

/* Modal backdrop */

/* ─── Skeleton Loaders ─── */
@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
.skeleton { background: linear-gradient(90deg, rgba(255,255,255,0.04) 25%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.04) 75%); background-size: 200% 100%; animation: shimmer 1.5s ease-in-out infinite; border-radius: 8px; }
.skeleton-card { background: rgba(22,22,22,0.6); border: 1px solid rgba(255,255,255,0.05); border-radius: 14px; padding: 12px; }
.skeleton-card .skeleton-img { width: 100%; height: 80px; border-radius: 10px; margin-bottom: 10px; }
.skeleton-card .skeleton-line { height: 12px; margin-bottom: 8px; border-radius: 6px; }
.skeleton-card .skeleton-line-sm { height: 10px; width: 60%; border-radius: 6px; margin-bottom: 8px; }
.skeleton-card .skeleton-line-xs { height: 8px; width: 40%; border-radius: 6px; }
.skeleton-profile { width: 100%; height: 120px; border-radius: 12px; margin-bottom: 12px; }
.skeleton-text { height: 14px; margin-bottom: 10px; border-radius: 6px; }
/* ─── Media Slider ─── */
.media-slider { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; scroll-snap-type: x mandatory; }
.media-slider::-webkit-scrollbar { display: none; }
.media-slider > * { scroll-snap-align: start; flex-shrink: 0; }
.media-slider img, .media-slider .video-thumb { border-radius: 10px; }

/* ─── Lazy Video Thumbnail ─── */
.video-thumb-wrapper { position: relative; cursor: pointer; border-radius: 10px; overflow: hidden; }
.video-thumb-wrapper .play-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.3); transition: background 0.2s; }
.video-thumb-wrapper:hover .play-overlay { background: rgba(0,0,0,0.15); }
.video-thumb-wrapper .play-overlay i { width: 40px; height: 40px; }

/* ─── Aspect Ratio (video frames keep true 16:9, no extra black space) ─── */
.aspect-16-9 { position: relative; width: 100%; aspect-ratio: 16 / 9; height: auto; }
.aspect-16-9 > * { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 10px; }

/* ─── Carousel Snap ─── */
.snap-x { scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
.snap-start { scroll-snap-align: start; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }
.scrollbar-hide::-webkit-scrollbar { display: none; }

/* ─── Post Card Carousel (multi-media) ───
   The outer media container and each slide wrap their content dynamically
   (width:100%, height:auto, min-height:0, 16:9) so embedded players account for
   the card tightly and never leave a giant black vertical gap. */
.media-carousel-wrap {
  width: 100%;
  height: auto;
  min-height: 0 !important;
  overflow: hidden;
}
.media-carousel {
  display: flex;
  gap: 8px;
  width: 100%;
  height: auto;
  min-height: 0 !important;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  border-radius: 12px;
}
.media-carousel::-webkit-scrollbar { display: none; }
.media-carousel > .media-item {
  flex-shrink: 0;
  scroll-snap-align: start;
  width: 100%;
  max-width: 100%;
  height: auto;
  min-height: 0 !important;
  cursor: pointer;
  border-radius: 12px;
  overflow: hidden;
  background: #000;
}
.media-carousel > .media-item img,
.media-carousel > .media-item .video-thumb,
.media-carousel > .media-item iframe,
.media-carousel > .media-item video {
  width: 100%;
  height: 100%;
  min-height: 0;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  border: 0;
}
.media-carousel > .media-item .aspect-16-9 { max-width: 100%; }
.media-carousel > .media-item .aspect-16-9 > iframe,
.media-carousel > .media-item .aspect-16-9 > video {
  width: 100%;
  height: 100%;
}

/* Media indicator dots */
.media-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 8px;
}
.media-dots .dot {
  width: 6px; height: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,0.25);
  transition: all 0.2s;
}
.media-dots .dot.active { background: #fff; width: 18px; }

/* Carousel scroll arrows (desktop) */
.media-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 28px; height: 28px;
  border-radius: 999px;
  background: rgba(0,0,0,0.6);
  border: 1px solid rgba(255,255,255,0.2);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  z-index: 4;
  opacity: 0;
  transition: opacity 0.2s;
}
.media-carousel-wrap:hover .media-nav { opacity: 1; }
.media-nav.prev { left: 6px; }
.media-nav.next { right: 6px; }
.media-carousel-wrap { position: relative; }

/* Avatar fallback (initial letter over a subtle gradient when no image) */
.avatar-fallback {
  background: linear-gradient(135deg, rgba(0,122,255,0.45), rgba(88,86,214,0.6));
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.02em;
}

/* Prominent category/tag badge */
.tag-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  border: 1px solid rgba(90,140,255,0.4);
  background: linear-gradient(135deg, rgba(0,122,255,0.18), rgba(88,86,214,0.22));
  color: #9db8ff;
}
.post-badges { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 10px; }

/* Engagement bar (Instagram-style bottom bar) */
.post-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 12px;
  margin-top: 8px;
  border-top: 1px solid rgba(255,255,255,0.1);
}
.post-actions-left {
  display: flex;
  align-items: center;
  gap: 16px;
}
.post-actions-left button,
.post-action-save {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #e8e8ec; /* light-gray so icons stay visible on dark cards */
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  border-radius: 8px;
  transition: color 0.15s, transform 0.15s;
}
.post-actions .post-action-btn svg {
  color: currentColor;
}
.post-actions .post-action-btn:hover { color: #fff; transform: scale(1.06); }
.post-actions .post-action-btn:active { transform: scale(0.95); }
/* Like/Heart turns red when liked */
.post-actions .post-action-btn.liked { color: #ff3b30; }
.post-actions .post-action-btn.liked svg { fill: currentColor; }
/* Bookmark fills when saved and is pushed to the far right */
.post-actions .post-action-save { margin-left: auto; }
.post-actions .post-action-save.saved { color: #fff; }
.post-actions .post-action-save.saved svg { fill: currentColor; }

/* Share popup option buttons */
.share-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 14px 6px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.04);
  color: #d0d0d5;
  cursor: pointer;
  transition: all 0.15s;
}
.share-option:hover { background: rgba(255,255,255,0.1); color: #fff; transform: translateY(-1px); }
.share-option span { font-size: 10px; font-weight: 600; }

/* ─── Typing Indicator Dots ─── */
.typing-dots::after {
  content: '';
  animation: typingDots 1.4s steps(4, end) infinite;
}
@keyframes typingDots {
  0% { content: ''; }
  25% { content: '.'; }
  50% { content: '..'; }
  75% { content: '...'; }
  100% { content: ''; }
}



/* Message list dividers - visible separators between chat entries */
  border-bottom: 1px solid rgba(0,0,0,0.05);
  margin-bottom: 2px;
  padding-bottom: 8px;
  transition: all 0.2s ease;
}
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 4px;
}
  background: rgba(0,0,0,0.02);
  border-radius: 6px;
}

/* Enhanced message thread separators */
  border-bottom: 1px solid rgba(0,0,0,0.04);
  margin-bottom: 1px;
}
  border-bottom: none;
  margin-bottom: 0;
}

/* Message group chat separators */
  border-bottom: 1px solid rgba(0,0,0,0.04);
  margin-bottom: 2px;
}
  border-bottom: none;
  margin-bottom: 0;
}

/* Enhanced divider lines for better visual hierarchy */
  border-color: rgba(0,0,0,0.06) !important;
  margin: 8px 0;
}
  border-color: rgba(0,0,0,0.06) !important;
  margin: 8px 0;
}


/* ===== Additional Light Mode Fixes ===== */

/* Message tabs (Direct/Groups) - ensure proper contrast regardless of JS className */
  border: 2px solid #b0b0b5 !important;
  background: #ffffff !important;
  color: #333333 !important;
  font-weight: 500 !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important;
}
  background: #000000 !important;
  color: #ffffff !important;
  border-color: #000000 !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15) !important;
}

/* Market tabs (Marketplace/Dashboard) */
  border: 2px solid #b0b0b5 !important;
  background: #ffffff !important;
  color: #333333 !important;
  font-weight: 500 !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important;
}
  background: #000000 !important;
  color: #ffffff !important;
  border-color: #000000 !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15) !important;
}

/* Theme toggle buttons in Settings */
  border: 2px solid #b0b0b5 !important;
  background: #ffffff !important;
  color: #333333 !important;
  font-weight: 500 !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important;
}
  background: #000000 !important;
  color: #ffffff !important;
  border-color: #000000 !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15) !important;
}

  stroke: currentColor !important;
  fill: none !important;
}
  stroke: currentColor !important;
}

/* Fix for View More button chevron */
  background: #ffffff !important;
  border: 2px solid #b0b0b5 !important;
  color: #333333 !important;
  font-weight: 500 !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important;
}
  background: #f5f5f5 !important;
  border-color: #8e8e93 !important;
  color: #000000 !important;
}

/* List New Tool button in Marketplace */
  background: #000000 !important;
  border: 2px solid #000000 !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important;
}
  background: #1a1a1a !important;
  border-color: #1a1a1a !important;
}

/* Follow button and other action buttons in profile */
  background: #000000 !important;
  border: 2px solid #000000 !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important;
}
  background: #1a1a1a !important;
  border-color: #1a1a1a !important;
}

/* Ensure divider lines in message list are visible */
  border-bottom: 1px solid rgba(0,0,0,0.05) !important;
  margin-bottom: 2px !important;
  padding-bottom: 8px !important;
}
  border-bottom: none !important;
  margin-bottom: 0 !important;
  padding-bottom: 4px !important;
}

/* Follower/following counts in profile */
  color: #111111 !important;
  font-weight: 700 !important;
}
  color: #555555 !important;
  font-weight: 600 !important;
}

  color: #888888 !important;
  opacity: 0.6 !important;
}

  background-color: #0B6D2C !important;
}

/* Ensure checkboxes are visible */
  accent-color: #000000 !important;
  border: 2px solid #b0b0b5 !important;
  width: 18px !important;
  height: 18px !important;
}
  background-color: #000000 !important;
  border-color: #000000 !important;
}

/* ===== End Additional Light Mode Fixes ===== */

/* ─── Comments Bottom Sheet (Instagram-style) ────────────────────────────── */
/* Full-screen overlay pinned to the bottom edge. Hidden by default; the
   `.open` class fades the backdrop in and slides the sheet up. */
.comments-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: none;
  align-items: flex-end;
  justify-content: center;
  overscroll-behavior: contain;
}
.comments-overlay.open {
  display: flex;
}

.comments-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.comments-overlay.open .comments-backdrop {
  opacity: 1;
}

/* The sheet itself — slides up from the bottom via translateY. */
.comments-sheet {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 640px;
  max-height: 70vh;
  max-height: 70dvh;               /* keyboard-aware on mobile */
  background: #16161a;
  border-radius: 16px 16px 0 0;    /* rounded top corners only */
  transform: translateY(100%);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.comments-overlay.open .comments-sheet {
  transform: translateY(0);
}

/* Drag-handle indicator line */
.comments-sheet-handle {
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  padding: 10px 0 4px;
}
.comments-sheet-drag {
  width: 40px;
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.25);
}

/* Header: centered title with a close button (right) and spacer (left) */
.comments-sheet-header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 14px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.comments-header-spacer {
  width: 36px;
  flex-shrink: 0;
}
.comments-sheet-title {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.comments-close-btn {
  width: 36px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: #b0b0b5;
  border-radius: 8px;
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
}
.comments-close-btn:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
}

/* Scrollable comments list */
.comments-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.comments-list::-webkit-scrollbar { width: 4px; }
.comments-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 999px; }
.comments-list::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.2); }

.comment-item + .comment-item {
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}
.comments-empty {
  padding: 40px 16px;
  text-align: center;
  color: #7c7c82;
  font-size: 13px;
}
.comments-spinner {
  width: 22px;
  height: 22px;
  margin: 0 auto 10px;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.15);
  border-top-color: #fff;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Inline "Like" text link */
.comment-like-link {
  background: none;
  border: none;
  padding: 0;
  margin-left: 12px;
  color: #7c7c82;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.15s;
}
.comment-like-link:hover { color: #b0b0b5; }

/* Heart like button on each comment row */
.comment-like-icon {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
  background: none;
  border: none;
  color: #7c7c82;
  font-size: 10px;
  cursor: pointer;
  transition: color 0.15s, transform 0.15s;
  width: 24px;
  text-align: center;
}
.comment-like-icon:hover { color: #b0b0b5; transform: scale(1.08); }
.comment-like-icon.liked { color: #ff3b30; }
.comment-like-icon.liked svg { fill: currentColor; }

/* Emoji quick-reaction bar */
.comments-emoji-bar {
  flex-shrink: 0;
  display: flex;
  gap: 10px;
  padding: 8px 16px;
  overflow-x: auto;
  scrollbar-width: none;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  background: #141417;
}
.comments-emoji-bar::-webkit-scrollbar { display: none; }
.comments-emoji-bar button {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  font-size: 20px;
  line-height: 1;
  padding: 6px 10px;
  cursor: pointer;
  transition: transform 0.15s, background 0.15s;
}
.comments-emoji-bar button:hover { transform: scale(1.12); background: rgba(255, 255, 255, 0.12); }
.comments-emoji-bar.hidden { display: none; }

/* Sticky bottom input bar */
.comments-input-bar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: #141417;
}
.comments-input-avatar {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  object-fit: cover;
  flex-shrink: 0;
}
.comments-input {
  flex: 1 1 auto;
  min-width: 0;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  color: #fff;
  font-size: 13px;
  padding: 9px 14px;
  outline: none;
  transition: border-color 0.15s, background 0.15s;
}
.comments-input::placeholder { color: #7c7c82; }
.comments-input:focus { border-color: rgba(255, 255, 255, 0.25); background: rgba(255, 255, 255, 0.09); }

.comments-smile-btn {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  background: none;
  border: none;
  color: #b0b0b5;
  border-radius: 50%;
  cursor: pointer;
  transition: color 0.15s, transform 0.15s;
}
.comments-smile-btn:hover { color: #fff; transform: scale(1.08); }

.comments-post-btn {
  flex-shrink: 0;
  background: none;
  border: none;
  color: rgba(0, 122, 255, 0.4);   /* inactive */
  font-size: 13px;
  font-weight: 700;
  cursor: default;
  transition: color 0.15s;
}
.comments-post-btn.active {
  color: #007aff;
  cursor: pointer;
}
.comments-post-btn.active:hover { color: #3395ff; }

/* ── Double-tap to like — Instagram-style floating heart ────────────────── */
.dbl-tap-heart {
  position: fixed;
  font-size: 80px;
  line-height: 1;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%) scale(0);
  animation: dblTapHeartPop 0.85s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
  will-change: transform, opacity;
  user-select: none;
}

@keyframes dblTapHeartPop {
  0%   { transform: translate(-50%, -50%) scale(0);   opacity: 1; }
  40%  { transform: translate(-50%, -50%) scale(1.25); opacity: 1; }
  65%  { transform: translate(-50%, -50%) scale(0.95); opacity: 1; }
  80%  { transform: translate(-50%, -50%) scale(1.1);  opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1.05); opacity: 0; }
}

/* ═══ Native Mobile App Polish (PWA) — eliminates webpage artifacts ═══ */
html, body {
  /* Prevent accidental pinch-to-zoom scaling completely */
  touch-action: pan-x pan-y !important;

  /* Prevent pull-to-refresh webpage bounces */
  overscroll-behavior-y: contain !important;

  /* Deactivate blue highlight text selection during clicks/long-presses */
  user-select: none !important;
  -webkit-user-select: none !important;
}

/* touch-action is NOT inherited — apply the no-pinch-zoom lock to every
   element so gestures starting on any child (cards, buttons, feed) can't zoom */
* {
  touch-action: pan-x pan-y !important;
}

/* Delete the default Android Chrome gray box tapping flash layout */
* {
  -webkit-tap-highlight-color: transparent !important;
}

/* Safety guard — keep text inside inputs/textareas editable & selectable so
   the app's core forms, chat, search and settings remain fully usable. */
input, textarea, [contenteditable], select {
  user-select: text !important;
  -webkit-user-select: text !important;
}

/* ─── Reader-Only Feed Checklist (Play Store PWA sandbox) ───
   Clean, responsive profile-card list. Built on semantic HTML + vanilla CSS;
   respects the locked mobile view parameters (no pinch-zoom artifacts). */
.skill-profile-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px;
  background: rgba(18, 18, 18, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  transition: border-color 0.2s, background 0.2s;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  touch-action: pan-x pan-y;
}
.skill-profile-card:hover { border-color: rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.02); }
.skill-profile-card:active { background: rgba(255, 255, 255, 0.03); }

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}
.card-header h4,
.card-name {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', system-ui, sans-serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #ffffff;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 0;
  padding: 0;
}
.card-description {
  font-size: 13px;
  line-height: 1.5;
  color: #c0c0c6;
  margin: 0;
  padding: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.feed-checklist-loading,
.feed-checklist-empty {
  text-align: center;
  color: #7c7c82;
  font-size: 13px;
  padding: 32px 16px;
}

/* =============================================================
   Ad Manager — Responsive + Dark-Mode Compatible Ad Styles
   ============================================================= */
.ad-slot {
  position: relative;
  width: 100%;
  margin: 16px 0;
  border-radius: 12px;
  overflow: hidden;
  background: #111111;  /* Matches dark theme */
  border: 1px solid #1f1f23;
  min-height: 100px;
}
.ad-slot .adsbygoogle {
  width: 100% !important;
  min-height: 100px !important;
  background: transparent;
  border: none;
}
.ad-slot .ad-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #4a4a56;
  font-size: 11px;
  text-align: center;
  padding: 8px;
}

/* ---- Comments bottom drawer (slide up / down) ---- */
#commentsSheet { transition: transform 0.25s ease-out; will-change: transform; }
#commentsDrawer.open #commentsSheet { transform: translateY(0); }
#commentsDrawer.open #commentsDrawerBackdrop { opacity: 1; }
#drawer-cmt-list { overscroll-behavior: contain; }

/* ---- Feed post text: Show more / Show less clamp ---- */
.feed-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.post-text { overflow-wrap: anywhere; }

/* ---- Post card layout stability ---- */
.post-card { box-sizing: border-box; }
.post-card, .post-card * { box-sizing: border-box; }
.post-card iframe { display: block; width: 100%; border: 0; }

/* ---- Offline fallback CSS ----
   These are element-level fallbacks for when utility CSS (Tailwind) fails to
   load (offline / CDN down). Deliberately NO !important and no attribute
   selectors, so class-based utilities (chips, avatars, logo sizing) always
   win in normal conditions and layout stays pixel-identical. */
img, video { max-width: 100%; height: auto; }
#offlineBanner {
  display: none;
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 9999;
  background: #27272a;
  color: #f4f4f5;
  border: 1px solid #3f3f46;
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 13px;
  text-align: center;
}
#offlineBanner.show { display: block; }