/* Instagram-Inspired Complete Design System */
/* Dark/Light Theme Support */

:root[data-theme="light"] {
  --ig-primary-background: #ffffff;
  --ig-secondary-background: #fafafa;
  --ig-primary-text: #262626;
  --ig-secondary-text: #8e8e8e;
  --ig-tertiary-text: #c7c7c7;
  --ig-border: #dbdbdb;
  --ig-separator: #efefef;
  --ig-link: #00376b;
  --ig-blue: #0095f6;
  --ig-hover: rgba(0, 0, 0, 0.05);
  --ig-overlay: rgba(0, 0, 0, 0.65);
  --ig-error: #ed4956;
}

:root[data-theme="dark"], :root {
  --ig-primary-background: #000000;
  --ig-secondary-background: #121212;
  --ig-primary-text: #fafafa;
  --ig-secondary-text: #a8a8a8;
  --ig-tertiary-text: #737373;
  --ig-border: #262626;
  --ig-separator: #363636;
  --ig-link: #e0f1ff;
  --ig-blue: #0095f6;
  --ig-hover: rgba(255, 255, 255, 0.1);
  --ig-overlay: rgba(0, 0, 0, 0.8);
  --ig-error: #ed4956;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}

*:hover {
  scrollbar-color: rgba(255,255,255,0.15) transparent;
}

:root[data-theme="light"] *:hover {
  scrollbar-color: rgba(0,0,0,0.12) transparent;
}

*::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 4px;
}

*:hover::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.15);
}

:root[data-theme="light"] *:hover::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.12);
}

*::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,0.25);
}

:root[data-theme="light"] *::-webkit-scrollbar-thumb:hover {
  background: rgba(0,0,0,0.2);
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  background-color: var(--ig-primary-background);
  color: var(--ig-primary-text);
  -webkit-font-smoothing: antialiased;
  transition: background-color 0.3s ease, color 0.3s ease;
  overflow-x: hidden;
  padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px));
}

/* === TOP NAVIGATION === */
.ig-top-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 44px;
  background: var(--ig-primary-background);
  border-bottom: 1px solid var(--ig-border);
  display: flex;
  align-items: center;
  z-index: 100;
  padding: 0 16px;
}

:root[data-theme="light"] .ig-top-nav {
  background: #ffffff;
  border-bottom: 1px solid #dbdbdb;
}

/* Instagram-style home nav override */
.ig-home-nav {
  background: var(--ig-primary-background);
  border-bottom: 1px solid var(--ig-border);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Scroll-to-hide top nav */
.ig-top-nav.ig-nav-hidden {
  transform: translateY(-100%);
}

/* Scroll-to-hide bottom nav */
.ig-bottom-nav.ig-nav-hidden {
  transform: translateX(-50%) translateY(calc(100% + 28px));
  animation: none;
  opacity: 0;
  pointer-events: none;
}

.ig-nav-container {
  max-width: 975px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ig-nav-left {
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  user-select: none;
}

/* Chevron rotation on open */
.ig-logo-dropdown {
  color: var(--ig-primary-text);
  margin-top: 4px;
  opacity: 0.7;
  transition: transform 0.2s ease;
}

.ig-logo-dropdown.ig-chevron-open {
  transform: rotate(180deg);
}

/* Feed dropdown menu */
.ig-feed-dropdown {
  position: fixed;
  z-index: 200;
  background: var(--ig-secondary-background);
  border: 1px solid var(--ig-border);
  border-radius: 12px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.3);
  min-width: 200px;
  overflow: hidden;
  animation: igFeedDdIn 0.15s ease-out;
}

@keyframes igFeedDdIn {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

.ig-feed-dd-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  font-size: 16px;
  font-weight: 400;
  color: var(--ig-primary-text);
  cursor: pointer;
  transition: background 0.15s;
}

.ig-feed-dd-item:hover {
  background: var(--ig-hover);
}

.ig-feed-dd-item.active {
  font-weight: 600;
}

.ig-feed-dd-item + .ig-feed-dd-item {
  border-top: 1px solid var(--ig-border);
}

.ig-logo {
  font-family: 'Grand Hotel', 'Brush Script MT', cursive;
  font-size: 26px;
  font-weight: 400;
  color: var(--ig-primary-text);
  text-decoration: none;
  cursor: pointer;
  letter-spacing: -0.5px;
}

.ig-search-box {
  position: relative;
  width: 268px;
}

.ig-search-input {
  width: 100%;
  height: 36px;
  padding: 3px 16px;
  background-color: var(--ig-secondary-background);
  border: 1px solid var(--ig-border);
  border-radius: 8px;
  font-size: 14px;
  color: var(--ig-primary-text);
  outline: none;
}

.ig-search-input::placeholder {
  color: var(--ig-secondary-text);
}

.ig-nav-icons {
  display: flex;
  align-items: center;
  gap: 22px;
}

.ig-nav-icon {
  width: 24px;
  height: 24px;
  cursor: pointer;
  position: relative;
  transition: transform 0.1s ease;
}

.ig-nav-icon:active {
  transform: scale(0.9);
}

.ig-nav-icon svg {
  width: 24px;
  height: 24px;
}

.ig-notification-dot {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 8px;
  height: 8px;
  background-color: var(--ig-error);
  border-radius: 50%;
  border: 2px solid var(--ig-primary-background);
}

/* === BOTTOM NAVIGATION === */
.ig-bottom-nav {
  position: fixed;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  max-width: 600px;
  height: 48px;
  background: rgba(28, 28, 30, 0.45);
  border: none;
  border-radius: 28px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  z-index: 100;
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
  padding: 0 16px;
  animation: slideUpNav 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  transition: transform 0.3s ease-in-out, opacity 0.2s ease-in-out;
}

@keyframes slideUpNav {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(100px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

.ig-bottom-nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  gap: 2px;
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  padding: 6px 0;
  border-radius: 16px;
  position: relative;
}

.ig-bottom-nav-item:hover {
  color: rgba(255, 255, 255, 1);
  transform: translateY(-2px);
}

.ig-bottom-nav-item:active {
  opacity: 0.7;
  transform: translateY(0);
}

.ig-bottom-nav-item svg {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  fill: none;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
}

.ig-bottom-nav-item.active {
  color: rgba(255, 255, 255, 1);
  background: rgba(255, 255, 255, 0.1);
}

.ig-bottom-nav-item.active svg {
  stroke-width: 2.5px;
}

/* Profile picture in nav */
.ig-nav-profile-pic {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid transparent;
}

.ig-bottom-nav-item.active .ig-nav-profile-pic {
  border-color: #fff;
}

:root[data-theme="light"] .ig-bottom-nav-item.active .ig-nav-profile-pic {
  border-color: var(--ig-blue);
}

/* Light theme nav items */
:root[data-theme="light"] .ig-bottom-nav-item {
  color: rgba(0, 0, 0, 0.75);
}

:root[data-theme="light"] .ig-bottom-nav-item:hover {
  color: rgba(0, 0, 0, 0.95);
}

:root[data-theme="light"] .ig-bottom-nav-item.active {
  color: var(--ig-blue);
  background: rgba(0, 149, 246, 0.1);
}

:root[data-theme="light"] .ig-bottom-nav-item svg {
  filter: none;
}

.ig-bottom-nav-label {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: -0.2px;
  white-space: nowrap;
}

/* Light theme override for bottom nav */
:root[data-theme="light"] .ig-bottom-nav {
  background: rgba(255, 255, 255, 0.45);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

/* Hide bottom nav on messages page */
.ig-messages-page .ig-bottom-nav {
  display: none;
}

/* Adjust body padding for messages page */
.ig-messages-page {
  padding-bottom: 0 !important;
}

/* === MAIN CONTENT === */
.ig-main {
  max-width: 630px;
  margin: 44px auto 0;
  padding: 0;
}

/* === STORIES === */
.ig-stories {
  background-color: var(--ig-primary-background);
  border: 1px solid var(--ig-border);
  border-radius: 8px;
  padding: 16px 0;
  margin-bottom: 24px;
  overflow: hidden;
}

/* Instagram flush stories — no card border */
.ig-stories.ig-stories-flush {
  border: none;
  border-radius: 0;
  border-bottom: 1px solid var(--ig-border);
  margin-bottom: 0;
  padding: 10px 0;
  background: var(--ig-primary-background);
}

.ig-stories-scroll {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0 18px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.ig-stories-scroll::-webkit-scrollbar {
  display: none;
}

.ig-story {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  flex-shrink: 0;
  user-select: none;
}

.ig-story-ring {
  width: 66px;
  height: 66px;
  border-radius: 50%;
  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  padding: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.ig-story-ring.seen,
.ig-story-ring.viewed {
  background: var(--ig-border);
}

.ig-story-avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 3px solid var(--ig-primary-background);
  object-fit: cover;
}

.ig-story-username {
  font-size: 12px;
  color: var(--ig-primary-text);
  max-width: 74px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ig-add-story {
  position: relative;
}

.ig-add-story-btn {
  position: absolute;
  bottom: 6px;
  right: 0;
  width: 20px;
  height: 20px;
  background-color: var(--ig-blue);
  border: 2px solid var(--ig-primary-background);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
}

/* === POST === */
.ig-post {
  background-color: var(--ig-primary-background);
  border-bottom: 1px solid var(--ig-border);
  border-radius: 0;
  margin-bottom: 0;
  overflow: hidden;
  position: relative;
}

/* Instagram-style separator between posts */
.ig-post-separator {
  height: 4px;
  background: var(--ig-border);
  opacity: 0.3;
}

/* Double-tap heart animation overlay */
.ig-heart-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  z-index: 10;
  pointer-events: none;
  animation: heartBurst 0.8s ease-in-out forwards;
}

.ig-heart-overlay svg {
  width: 80px;
  height: 80px;
  fill: #ed4956;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.3));
}

@keyframes heartBurst {
  0% { transform: translate(-50%, -50%) scale(0); opacity: 0.8; }
  15% { transform: translate(-50%, -50%) scale(1.3); opacity: 1; }
  30% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  70% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
}

.ig-post-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
}

.ig-post-user {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

.ig-post-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
}

.ig-post-info {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0;
}

.ig-post-username {
  font-size: 14px;
  font-weight: 600;
  color: var(--ig-primary-text);
}

.ig-post-header-dot {
  font-size: 14px;
  color: var(--ig-secondary-text);
  margin: 0 5px;
  font-weight: 700;
}

.ig-post-header-time {
  font-size: 14px;
  color: var(--ig-secondary-text);
  font-weight: 400;
}

.ig-post-location {
  font-size: 12px;
  color: var(--ig-primary-text);
}

.ig-post-menu {
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  color: var(--ig-primary-text);
}

.ig-post-menu svg {
  width: 24px;
  height: 24px;
}

.ig-post-image {
  width: 100%;
  max-height: 600px;
  object-fit: contain;
  display: block;
  user-select: none;
  background: #1a1a1a;
}

/* Video post styling */
.ig-post-video {
  width: 100%;
  max-height: 600px;
  object-fit: cover;
  display: block;
  background: #000;
}

.ig-post-video-container {
  position: relative;
  background: #000;
  overflow: hidden;
}

.ig-post-video-container .ig-cseries-badge {
  display: none;
}

.ig-post-video-container .ig-video-play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60px;
  height: 60px;
  background: rgba(0,0,0,0.5);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 5;
  opacity: 0;
  transition: opacity 0.2s;
}

.ig-post-video-container:hover .ig-video-play-btn,
.ig-post-video-container.paused .ig-video-play-btn {
  opacity: 1;
}

.ig-post-video-container .ig-video-sound-btn {
  position: absolute;
  bottom: 12px;
  right: 12px;
  width: 28px;
  height: 28px;
  background: rgba(0,0,0,0.6);
  border: none;
  border-radius: 50%;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 5;
}

/* Feed creator series — play icon overlay (non-interactive, just visual indicator) */
.ig-feed-cseries {
  cursor: pointer;
}

.ig-feed-cseries-play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s;
  z-index: 5;
}

.ig-feed-cseries.paused .ig-feed-cseries-play-icon {
  opacity: 1;
}

/* Fullscreen creator series tap zone — transparent overlay for play/pause */
.ig-cseries-tap-zone {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(100% - 36px);
  z-index: 10;
  cursor: pointer;
}

.ig-cseries-pause-indicator {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s, transform 0.2s;
  background: rgba(0,0,0,0.35);
  border-radius: 50%;
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ig-cseries-pause-indicator.show {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  animation: cseriesPauseFlash 0.6s ease-in-out forwards;
}

@keyframes cseriesPauseFlash {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
  20% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  80% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
}

.ig-post-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 12px 2px;
  width: 100%;
}

.ig-post-actions-left {
  display: flex;
  gap: 12px;
  align-items: center;
}

.ig-action-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  transition: opacity 0.2s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ig-action-btn:active {
  opacity: 0.5;
}

.ig-action-btn svg {
  width: 24px;
  height: 24px;
  stroke: var(--ig-primary-text);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ig-action-btn.liked svg {
  fill: #ed4956;
  stroke: #ed4956;
  animation: like-animation 0.3s ease;
}

.ig-action-btn.saved svg {
  fill: var(--ig-primary-text);
}

@keyframes like-animation {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.2); }
}

.ig-post-likes {
  padding: 0 14px;
  margin-bottom: 4px;
}

.ig-post-likes-count {
  font-size: 14px;
  color: var(--ig-primary-text);
  font-weight: 400;
}

.ig-post-likes-count strong {
  font-weight: 600;
}

.ig-post-caption {
  padding: 0 14px;
  margin-bottom: 4px;
  font-size: 14px;
  line-height: 1.4;
}

.ig-caption-username {
  font-weight: 600;
  margin-right: 6px;
  color: var(--ig-primary-text);
}

.ig-caption-text {
  color: var(--ig-primary-text);
  white-space: pre-wrap;
  word-wrap: break-word;
}

.ig-caption-more {
  color: var(--ig-secondary-text);
  cursor: pointer;
}

.ig-post-comments-btn {
  padding: 0 14px;
  margin-bottom: 2px;
  color: var(--ig-secondary-text);
  font-size: 14px;
  cursor: pointer;
  background: none;
  border: none;
  text-align: left;
  font-family: inherit;
}

.ig-post-time {
  padding: 0 14px 8px;
  font-size: 10px;
  color: var(--ig-secondary-text);
  text-transform: uppercase;
  letter-spacing: 0.2px;
}

.ig-add-comment {
  border-top: 1px solid var(--ig-border);
  padding: 6px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.ig-add-comment-input {
  flex: 1;
  border: none;
  background: none;
  font-size: 14px;
  color: var(--ig-primary-text);
  outline: none;
}

.ig-add-comment-input::placeholder {
  color: var(--ig-secondary-text);
}

.ig-post-comment-btn {
  background: none;
  border: none;
  color: var(--ig-blue);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  opacity: 0.3;
  pointer-events: none;
}

.ig-post-comment-btn.active {
  opacity: 1;
  pointer-events: auto;
}

/* === MESSAGES === */
.ig-messages-container {
  position: fixed;
  top: 44px;
  left: 0;
  right: 0;
  bottom: 50px;
  background-color: var(--ig-primary-background);
  display: flex;
  overflow: hidden;
}

.ig-conversations {
  width: 100%;
  max-width: 350px;
  border-right: 1px solid var(--ig-border);
  display: flex;
  flex-direction: column;
  background-color: var(--ig-primary-background);
}

.ig-messages-header {
  padding: 20px;
  border-bottom: 1px solid var(--ig-border);
  display: none;
  justify-content: space-between;
  align-items: center;
}

/* Mobile Messages Header */
.ig-messages-mobile-header {
  display: flex;
  padding: 12px 16px;
  border-bottom: 1px solid var(--ig-border);
  align-items: center;
  gap: 12px;
  background-color: var(--ig-primary-background);
}

.ig-mobile-back {
  background: none;
  border: none;
  padding: 8px;
  margin-right: 8px;
  cursor: pointer;
  color: var(--ig-primary-text);
  display: flex;
  align-items: center;
  transition: all 0.2s ease;
  border-radius: 50%;
  flex-shrink: 0;
}

.ig-mobile-back svg {
  width: 24px;
  height: 24px;
}

.ig-mobile-back:hover {
  background: rgba(255, 255, 255, 0.15);
  transform: scale(1.1);
}

.ig-mobile-back:active {
  transform: scale(0.95);
}

/* Messages Search */
.ig-messages-search {
  display: flex;
  margin: 8px 16px;
  padding: 8px 12px;
  background-color: var(--ig-secondary-background);
  border-radius: 8px;
  align-items: center;
}

/* Messages Tabs */
.ig-messages-tabs {
  display: flex;
  border-bottom: 1px solid var(--ig-border);
  padding: 0 16px;
}

.ig-messages-tab {
  flex: 1;
  text-align: center;
  padding: 12px 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--ig-secondary-text);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all 0.2s;
}

.ig-messages-tab.active {
  color: var(--ig-primary-text);
  border-bottom-color: var(--ig-primary-text);
}

/* Conversation Camera Button */
.ig-conversation-camera {
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  color: var(--ig-secondary-text);
  display: none; /* Hidden by default on desktop */
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s;
}

.ig-conversation-camera:hover {
  opacity: 0.7;
}

.ig-messages-username {
  font-size: 16px;
  font-weight: 600;
}

.ig-new-message-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  color: var(--ig-primary-text);
  display: flex;
  align-items: center;
  justify-content: center;
}

.ig-new-message-btn:hover {
  opacity: 0.7;
}

.ig-conversations-list {
  flex: 1;
  overflow-y: auto;
}

.ig-conversation {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 20px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.ig-conversation:hover {
  background-color: var(--ig-hover);
}

.ig-conversation.active {
  background-color: var(--ig-hover);
}

.ig-conversation-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.ig-conversation-info {
  flex: 1;
  min-width: 0;
}

.ig-conversation-name {
  font-size: 14px;
  font-weight: 400;
  margin-bottom: 2px;
}

.ig-conversation-message {
  font-size: 14px;
  color: var(--ig-secondary-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ig-conversation-message.unread {
  font-weight: 600;
  color: var(--ig-primary-text);
}

.ig-conversation-time {
  font-size: 12px;
  color: var(--ig-secondary-text);
  flex-shrink: 0;
}

.ig-conversation-unread {
  width: 8px;
  height: 8px;
  background-color: var(--ig-blue);
  border-radius: 50%;
}

.ig-chat {
  flex: 1;
  display: flex;
  flex-direction: column;
  background-color: var(--ig-primary-background);
}

.ig-chat-header {
  padding: 10px 12px;
  border-bottom: 1px solid var(--ig-border);
  display: flex;
  align-items: center;
  gap: 4px;
  background-color: var(--ig-primary-background);
}

.ig-chat-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
}

#chatAvatarContainer {
  position: relative;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

#chatAvatarIcon {
  transition: all 0.2s ease;
}

.ig-chat-username {
  font-size: 14px;
  font-weight: 600;
  color: var(--ig-primary-text);
}

.ig-chat-status {
  font-size: 12px;
  color: var(--ig-secondary-text);
}

.ig-chat-actions {
  display: flex;
  gap: 16px;
  align-items: center;
}

.ig-chat-action-btn {
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  color: var(--ig-primary-text);
  display: flex;
  align-items: center;
  justify-content: center;
}

.ig-chat-action-btn:hover {
  opacity: 0.7;
}

.ig-chat-back {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  margin-right: 4px;
  color: var(--ig-primary-text);
  transition: all 0.2s ease;
  border-radius: 50%;
}

.ig-chat-back:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: scale(1.1);
}

.ig-chat-back:active {
  transform: scale(0.95);
}

/* Light theme back button styles */
:root[data-theme="light"] .ig-mobile-back:hover,
:root[data-theme="light"] .ig-chat-back:hover {
  background: rgba(0, 0, 0, 0.08);
}

:root[data-theme="light"] .ig-mobile-back,
:root[data-theme="light"] .ig-chat-back {
  color: #262626;
}

.ig-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: transparent;
  scroll-behavior: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.ig-message {
  max-width: 60%;
  padding: 8px 12px;
  border-radius: 22px;
  font-size: 14px;
  word-wrap: break-word;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  position: relative;
  cursor: pointer;
  transition: all 0.2s ease;
}

.ig-message:hover {
  filter: brightness(0.95);
}

.ig-message:hover .ig-message-options-trigger {
  opacity: 1;
  visibility: visible;
}

.ig-message-sent {
  align-self: flex-end;
  background-color: var(--ig-border);
  color: var(--ig-primary-text);
}

.ig-message-received {
  align-self: flex-start;
  background-color: #3a3a3c;
  color: #ffffff;
}

[data-theme="light"] .ig-message-received {
  background-color: #efefef;
  color: #262626;
}

.ig-message-media {
  max-width: 70%;
  padding: 4px;
  border-radius: 18px;
  background-color: transparent;
}

.ig-message-media.ig-message-sent {
  align-self: flex-end;
}

.ig-message-media.ig-message-received {
  align-self: flex-start;
}

.ig-message-time {
  font-size: 11px;
  color: var(--ig-secondary-text);
  margin-top: 4px;
  text-align: right;
}

[data-theme="light"] .ig-message-sent {
  background-color: #6C5CE7;
  color: #fff;
}

[data-theme="dark"] .ig-message-sent {
  background-color: #6C5CE7;
  color: #fff;
}

[data-theme="dark"] .ig-message-sent .ig-message-time {
  color: rgba(255, 255, 255, 0.7);
}

[data-theme="light"] .ig-message-sent .ig-message-time {
  color: rgba(255, 255, 255, 0.7);
}

/* @mention link styling */
.mention-link {
  color: #00d4ff;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.mention-link:hover {
  text-decoration: underline;
}
.ig-message-sent .mention-link {
  color: #ffffff !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
.ig-message-received .mention-link {
  color: #00d4ff !important;
}
[data-theme="light"] .ig-message-received .mention-link {
  color: #0095f6 !important;
}

/* Message Context Menu */
.ig-message-context-menu {
  position: fixed;
  background: var(--ig-primary-background);
  border: 1px solid var(--ig-border);
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  z-index: 1000;
  min-width: 200px;
  overflow: hidden;
  display: none;
}

.ig-message-context-menu.active {
  display: block;
}

.ig-message-context-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  cursor: pointer;
  transition: background 0.2s;
  color: var(--ig-primary-text);
  font-size: 14px;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  min-height: 48px; /* Better touch target for mobile */
}

.ig-message-context-item:active {
  background: var(--ig-hover);
  transform: scale(0.98);
}

.ig-message-context-item:hover {
  background: var(--ig-hover);
}

.ig-message-context-item.danger {
  color: var(--ig-error);
}

.ig-message-context-item svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* Mobile-specific improvements */
@media (max-width: 768px) {
  .ig-message-context-menu {
    min-width: 220px;
    max-width: 280px;
  }
  
  .ig-message-context-item {
    padding: 16px 20px;
    font-size: 15px;
  }
  
  /* Make three-dot buttons more visible on touch devices */
  .ig-message button[title="More options"] {
    opacity: 0.9 !important;
  }
}

.ig-message-context-divider {
  height: 1px;
  background: var(--ig-border);
  margin: 4px 0;
}

.ig-message-wrapper {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  position: relative;
}

.ig-message-wrapper.sent {
  flex-direction: row-reverse;
}

.ig-message-options-trigger {
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s;
  cursor: pointer;
  padding: 4px;
  color: var(--ig-secondary-text);
}

.ig-message-options-trigger:hover {
  color: var(--ig-primary-text);
}

.ig-chat-input-container {
  padding: 8px 12px;
  border-top: 1px solid var(--ig-border);
  display: flex;
  align-items: flex-end;
  gap: 4px;
  background-color: var(--ig-primary-background);
  position: relative;
}

.ig-camera-circle {
  background: var(--ig-blue) !important;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  min-width: 36px;
  padding: 6px !important;
  color: #fff !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ig-camera-circle svg {
  width: 20px;
  height: 20px;
}

.ig-input-action-btn {
  background: none;
  border: none;
  padding: 8px;
  cursor: pointer;
  color: var(--ig-primary-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s;
  flex-shrink: 0;
}

.ig-input-action-btn:hover {
  opacity: 0.7;
}

.ig-chat-input {
  flex: 1;
  border: 1px solid var(--ig-border);
  border-radius: 22px;
  padding: 10px 16px;
  font-size: 14px;
  background-color: var(--ig-secondary-background);
  color: var(--ig-primary-text);
  outline: none;
  resize: none;
  overflow-y: auto;
  min-height: 40px;
  max-height: 150px;
  line-height: 1.4;
  font-family: inherit;
  box-sizing: border-box;
}

.ig-chat-input::placeholder {
  color: var(--ig-secondary-text);
}

.ig-send-btn {
  background: none;
  border: none;
  color: var(--ig-blue);
  cursor: pointer;
  padding: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s;
  flex-shrink: 0;
}

.ig-send-btn:hover {
  opacity: 0.7;
}

.ig-send-btn svg {
  width: 24px;
  height: 24px;
}

/* === MOBILE RESPONSIVE === */
@media (max-width: 768px) {
  .ig-search-box {
    display: none;
  }
  
  .ig-main {
    padding: 0;
    margin-top: 44px;
  }
  
  .ig-post,
  .ig-stories {
    border-radius: 0;
    border-left: none;
    border-right: none;
  }
  
  /* Responsive scrollable bottom nav for mobile */
  .ig-bottom-nav {
    width: 94%;
    max-width: none;
    bottom: 10px;
    height: 56px;
    border-radius: 28px;
    padding: 0 6px;
    justify-content: flex-start;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    transition: transform 0.3s ease-in-out, opacity 0.2s ease-in-out;
  }
  
  .ig-bottom-nav::-webkit-scrollbar {
    display: none;
  }
  
  .ig-bottom-nav-item {
    flex: 0 0 auto;
    min-width: 56px;
    padding: 6px 8px;
  }

  /* Mobile hide state for bottom nav */
  .ig-bottom-nav.ig-nav-hidden {
    transform: translateY(calc(100% + 28px));
    animation: none;
    opacity: 0;
    pointer-events: none;
  }
  
  .ig-bottom-nav-item svg {
    width: 22px;
    height: 22px;
  }
  
  .ig-bottom-nav-label {
    font-size: 9px;
  }
  
  .ig-nav-profile-pic {
    width: 22px;
    height: 22px;
  }
  
  /* Mobile Messages Styling */
  .ig-messages-top-nav {
    display: none !important;
  }
  
  .ig-messages-container {
    top: 0 !important;
    bottom: 0 !important;
  }
  
  .ig-messages-mobile-header {
    display: flex !important;
  }
  
  .ig-messages-header {
    display: none;
  }
  
  .ig-messages-search {
    display: flex !important;
  }
  
  .ig-messages-tabs {
    display: flex !important;
  }
  
  .ig-conversation-camera {
    display: flex !important; /* Show camera button on mobile */
  }
  
  .ig-conversations {
    max-width: 100%;
    border-right: none;
  }
  
  .ig-chat {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 200;
    transform: translateX(100%);
    transition: transform 0.3s ease;
  }
  
  .ig-chat.active {
    transform: translateX(0);
  }
  
  .ig-chat-back {
    display: flex !important;
  }
  
  .ig-chat-header {
    padding: 10px 12px;
    gap: 8px;
  }
  
  .ig-chat-header > div {
    min-width: 0;
  }

  .ig-chat-username {
    font-size: 14px !important;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  .ig-chat-actions {
    display: flex !important;
    gap: 2px !important;
    flex-shrink: 0;
  }
  
  .ig-chat-input-container {
    padding: 8px 8px;
    gap: 2px;
  }
  
  .ig-input-action-btn {
    display: inline-flex;
    padding: 6px;
  }
  
  .ig-camera-circle {
    width: 32px;
    height: 32px;
    min-width: 32px;
    padding: 4px !important;
  }
  
  .ig-camera-circle svg {
    width: 18px;
    height: 18px;
  }
  
  .ig-send-btn {
    display: inline-flex;
  }
  
  .ig-voice-btn {
    display: inline-flex;
  }
}

/* === UTILITIES === */
.ig-hidden {
  display: none !important;
}

.ig-text-center {
  text-align: center;
}

.ig-mb-1 {
  margin-bottom: 8px;
}

.ig-mb-2 {
  margin-bottom: 16px;
}

/* === SETTINGS === */
.ig-settings-section {
  background-color: var(--ig-primary-background);
  border: 1px solid var(--ig-border);
  border-radius: 8px;
  margin-bottom: 24px;
  overflow: hidden;
}

.ig-settings-item {
  padding: 16px 20px;
  border-bottom: 1px solid var(--ig-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  transition: background-color 0.2s;
}

.ig-settings-item:last-child {
  border-bottom: none;
}

.ig-settings-item:hover {
  background-color: var(--ig-hover);
}

.ig-toggle-switch {
  width: 51px;
  height: 31px;
  background-color: var(--ig-border);
  border-radius: 31px;
  position: relative;
  cursor: pointer;
  transition: background-color 0.3s;
}

.ig-toggle-switch.active {
  background-color: var(--ig-blue);
}

.ig-toggle-slider {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 27px;
  height: 27px;
  background-color: white;
  border-radius: 50%;
  transition: transform 0.3s;
}

.ig-toggle-switch.active .ig-toggle-slider {
  transform: translateX(20px);
}

/* === LOADING === */
.ig-spinner {
  width: 24px;
  height: 24px;
  border: 2px solid var(--ig-border);
  border-top-color: var(--ig-primary-text);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin: 40px auto;
}

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

/* === MODAL/MENU === */
.ig-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--ig-overlay);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.2s ease;
  padding: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.ig-modal {
  background-color: var(--ig-primary-background);
  border-radius: 16px;
  min-width: 400px;
  max-width: 90%;
  animation: slideUp 0.3s ease;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.06);
  overflow: hidden;
}

@supports (height: 100dvh) {
  .ig-modal {
    max-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 16px);
  }
}

@keyframes slideUp {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.ig-modal-item {
  padding: 14px 20px;
  text-align: center;
  cursor: pointer;
  border-bottom: 1px solid var(--ig-border);
  transition: background-color 0.2s;
}

.ig-modal-item:last-child {
  border-bottom: none;
}

.ig-modal-item:hover {
  background-color: var(--ig-hover);
}

.ig-modal-item.danger {
  color: var(--ig-error);
  font-weight: 600;
}

/* Image Carousel Styles */
.ig-carousel {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #000;
}

.ig-carousel-inner {
  display: flex;
  transition: transform 0.3s ease-in-out;
  width: 100%;
}

.ig-carousel-inner img {
  flex-shrink: 0;
  width: 100%;
  max-height: 700px;
  object-fit: contain;
  cursor: pointer;
}

.ig-carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 24px;
  cursor: pointer;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}

.ig-carousel-btn:hover {
  background: rgba(0, 0, 0, 0.7);
}

.ig-carousel-btn:active {
  transform: translateY(-50%) scale(0.95);
}

.ig-carousel-dots {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  z-index: 10;
}

.ig-carousel-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: all 0.2s;
}

.ig-carousel-dot.active {
  background: white;
  transform: scale(1.2);
}

.ig-carousel-dot:hover {
  background: rgba(255, 255, 255, 0.8);
}

/* Image Zoom Modal */
.ig-zoom-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10000;
  animation: fadeIn 0.2s ease;
}

.ig-zoom-overlay {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: zoom-out;
  padding: 20px;
}

.ig-zoom-image {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
  cursor: zoom-in;
  transition: transform 0.2s ease;
  touch-action: none;
}

.ig-zoom-close {
  position: absolute;
  top: 20px;
  right: 20px;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  border: none;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  font-size: 36px;
  font-weight: 300;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  z-index: 10001;
  transition: background 0.2s;
}

.ig-zoom-close:hover {
  background: rgba(0, 0, 0, 0.9);
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Responsive adjustments for carousel */
@media (max-width: 768px) {
  .ig-carousel-btn {
    width: 36px;
    height: 36px;
    font-size: 20px;
  }
  
  .ig-zoom-image {
    max-width: 95vw;
    max-height: 95vh;
  }
  
  .ig-zoom-close {
    top: 10px;
    right: 10px;
    width: 44px;
    height: 44px;
    font-size: 32px;
  }
}

/* ============================================ */
/* Full-Screen Post Viewer (Instagram Creator Series-style) */
/* ============================================ */
.ig-fullscreen-viewer {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #000;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  animation: fadeInViewer 0.25s ease;
}

@keyframes fadeInViewer {
  from { opacity: 0; }
  to { opacity: 1; }
}

.ig-fullscreen-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.6) 0%, transparent 100%);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 20;
  height: 52px;
}

.ig-fullscreen-back {
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.5));
}

.ig-fullscreen-back:active {
  opacity: 0.5;
}

.ig-fullscreen-camera {
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.5));
}

.ig-fullscreen-camera:active {
  opacity: 0.5;
}

.ig-fullscreen-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  background: #000;
  scroll-snap-type: y mandatory;
}

/* === CREATOR SERIES-STYLE FULLSCREEN POST === */
.ig-fullscreen-post {
  height: 100vh;
  height: 100dvh;
  position: relative;
  background: #000;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Media fills the screen */
.ig-fullscreen-post .ig-cseries-media {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
}

.ig-fullscreen-post .ig-cseries-media img,
.ig-fullscreen-post .ig-cseries-media video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Edge-to-edge cover on mobile only */
@media (max-width: 768px) {
  .ig-fullscreen-post .ig-cseries-media video {
    object-fit: cover;
  }
}

/* Carousel inside fullscreen */
.ig-fullscreen-post .ig-carousel {
  width: 100%;
  height: 100%;
  max-height: none;
  background: #000;
}

.ig-fullscreen-post .ig-carousel-inner {
  height: 100%;
  background: #000;
}

.ig-fullscreen-post .ig-carousel-inner img {
  height: 100%;
  max-height: none;
  object-fit: contain;
  background: #000;
}

.ig-fullscreen-post .ig-carousel-dots {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 4px;
  z-index: 15;
}

.ig-fullscreen-post .ig-carousel-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  transition: all 0.2s;
}

.ig-fullscreen-post .ig-carousel-dot.active {
  background: #fff;
}

/* Right-side action buttons (Creator Series-style) */
.ig-cseries-actions {
  position: absolute;
  right: 8px;
  bottom: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  z-index: 15;
  max-width: 50px;
}

.ig-cseries-action-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  cursor: pointer;
  color: #fff;
  padding: 0;
  filter: drop-shadow(0 1px 4px rgba(0,0,0,0.5));
}

.ig-cseries-action-btn svg {
  width: 26px;
  height: 26px;
  stroke: #fff;
  fill: none;
  stroke-width: 2;
}

.ig-cseries-action-btn.liked svg {
  fill: #ed4956;
  stroke: #ed4956;
  animation: like-animation 0.3s ease;
}

.ig-cseries-action-btn.saved svg {
  fill: #fff;
}

.ig-cseries-action-count {
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

.ig-cseries-action-btn:active {
  transform: scale(0.9);
}

/* Bottom overlay info (Creator Series-style) */
.ig-cseries-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0 12px 40px;
  padding-right: 56px;
  z-index: 15;
  pointer-events: none;
}

/* Gradient background on pseudo-element so it never blocks clicks */
.ig-cseries-bottom::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(0deg, rgba(0,0,0,0.3) 0%, transparent 70%);
  pointer-events: none;
  z-index: -1;
}

.ig-cseries-bottom > * {
  pointer-events: auto;
  position: relative;
}

.ig-cseries-user-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.ig-cseries-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #fff;
}

.ig-cseries-username {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
  text-decoration: none;
}

.ig-cseries-follow-btn {
  background: transparent;
  border: 1px solid #fff;
  color: #fff;
  padding: 4px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  margin-left: 4px;
}

.ig-cseries-follow-btn:active {
  opacity: 0.7;
}

.ig-cseries-caption {
  color: #fff;
  font-size: 13px;
  line-height: 1.35;
  max-height: 1.35em;
  overflow: hidden;
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
  margin-bottom: 0;
  transition: max-height 0.3s ease;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ig-cseries-caption.expanded {
  max-height: none;
  overflow-y: auto;
  white-space: normal;
  text-overflow: unset;
}

.ig-cseries-caption-more {
  background: none;
  border: none;
  color: rgba(255,255,255,0.6);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  padding: 0;
  margin: 2px 0 0 0;
  display: inline;
}

/* Collapsible details section (music, time, features) shown on expand */
.ig-cseries-details {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.ig-cseries-details.expanded {
  max-height: 300px;
  overflow-y: auto;
}

.ig-cseries-music {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #fff;
  font-size: 12px;
  margin-top: 6px;
}

.ig-cseries-music svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

.ig-cseries-time {
  color: rgba(255,255,255,0.5);
  font-size: 11px;
  margin-top: 4px;
}

/* Progress bars at top */
.ig-cseries-progress {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: rgba(255,255,255,0.2);
  z-index: 20;
}

.ig-cseries-progress-bar {
  height: 100%;
  background: #fff;
  transition: width 0.1s linear;
}

/* Sound toggle */
.ig-cseries-sound-btn {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(0,0,0,0.5);
  border: none;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 15;
  opacity: 0;
  transition: opacity 0.3s;
}

.ig-fullscreen-post:hover .ig-cseries-sound-btn {
  opacity: 1;
}

/* Heart animation on double tap */
.ig-cseries-heart-anim {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  pointer-events: none;
  z-index: 30;
  animation: cseriesHeartBurst 0.8s ease-in-out forwards;
}

.ig-cseries-heart-anim svg {
  width: 100px;
  height: 100px;
  fill: #ed4956;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.3));
}

@keyframes cseriesHeartBurst {
  0% { transform: translate(-50%, -50%) scale(0); opacity: 0.8; }
  15% { transform: translate(-50%, -50%) scale(1.4); opacity: 1; }
  30% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  70% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
}

/* Hide main nav when fullscreen is open */
body:has(#fullScreenPostViewer) .ig-top-nav,
body:has(#fullScreenPostViewer) .ig-bottom-nav {
  display: none;
}

/* === CREATOR SERIES PAGE === */
.ig-cseries-page {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #000;
  z-index: 200;
  overflow: hidden;
}

.ig-cseries-page .ig-cseries-scroll {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  -webkit-overflow-scrolling: touch;
}

.ig-cseries-page .ig-cseries-item {
  width: 100%;
  height: 100vh;
  height: 100dvh;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  position: relative;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ig-cseries-page .ig-cseries-item video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body:has(.ig-cseries-page) .ig-top-nav,
body:has(.ig-cseries-page) .ig-bottom-nav {
  display: none;
}

/* Fullscreen comment input bar at bottom — hidden by default */
.ig-cseries-comment-bar {
  display: none;
}

/* Loading spinner for creator series videos */
.ig-cseries-loading-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 12;
  pointer-events: none;
}

.ig-cseries-loading-spinner.hidden {
  display: none;
}

@keyframes cseriesSpin {
  to { transform: rotate(360deg); }
}

/* Mute/unmute button in fullscreen creator series — sits atop actions column */
.ig-cseries-mute-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(38,38,38,0.7);
  border: none;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.15s;
}

.ig-cseries-mute-btn:active {
  transform: scale(0.9);
}

/* Video progress bar at bottom of fullscreen creator series */
.ig-cseries-progress-bar-container {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 36px;
  z-index: 30;
  cursor: pointer;
  display: flex;
  align-items: flex-end;
  padding-top: 24px;
  box-sizing: border-box;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}

.ig-cseries-progress-track {
  width: 100%;
  height: 3px;
  background: rgba(255,255,255,0.3);
  position: relative;
  transition: height 0.15s;
}

.ig-cseries-progress-bar-container:hover .ig-cseries-progress-track,
.ig-cseries-progress-bar-container:active .ig-cseries-progress-track,
.ig-cseries-progress-bar-container.dragging .ig-cseries-progress-track {
  height: 8px;
}

.ig-cseries-progress-fill {
  height: 100%;
  background: #fff;
  width: 0%;
  border-radius: 0 1px 1px 0;
  transition: none;
  pointer-events: none;
}

/* Show a scrubber dot on hover/drag */
.ig-cseries-progress-fill::after {
  content: '';
  position: absolute;
  right: -6px;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  opacity: 0;
  transition: opacity 0.15s;
  pointer-events: none;
}

.ig-cseries-progress-bar-container:hover .ig-cseries-progress-fill::after,
.ig-cseries-progress-bar-container.dragging .ig-cseries-progress-fill::after {
  opacity: 1;
}

/* Fullscreen embedded features */
.ig-cseries-features {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: auto !important;
  position: relative;
  z-index: 5;
  touch-action: manipulation;
}

.ig-cseries-poll {
  background: rgba(255,255,255,0.1);
  border-radius: 12px;
  padding: 12px;
  backdrop-filter: blur(6px);
}

.ig-cseries-poll .poll-question {
  font-weight: 600;
  color: #fff;
  margin-bottom: 10px;
  font-size: 14px;
}

.ig-cseries-poll .poll-option {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.25);
  margin-bottom: 6px;
  cursor: pointer;
  transition: all 0.2s;
}

.ig-cseries-poll .poll-option:hover {
  border-color: rgba(255,255,255,0.5);
}

.ig-cseries-poll .poll-option.poll-voted {
  border: 2px solid var(--ig-blue, #0095f6);
}

.ig-cseries-poll .poll-bar {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: var(--ig-blue, #0095f6);
  opacity: 0.2;
  transition: width 0.5s ease;
}

.ig-cseries-poll .poll-option-label {
  position: relative;
  padding: 8px 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #fff;
  font-size: 13px;
}

.ig-cseries-custom-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 16px;
  background: var(--ig-blue, #0095f6);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  width: 100%;
  transition: opacity 0.2s;
  pointer-events: auto !important;
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(0,0,0,0.1);
  position: relative;
  z-index: 2;
}

.ig-cseries-custom-btn:active {
  opacity: 0.7;
}

.ig-cseries-contact-btns {
  display: flex;
  gap: 8px;
  pointer-events: auto !important;
  touch-action: manipulation;
}

.ig-cseries-contact-btns button {
  flex: 1;
  padding: 8px 12px;
  background: rgba(255,255,255,0.15);
  backdrop-filter: blur(6px);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 8px;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s;
  pointer-events: auto !important;
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(0,0,0,0.1);
}

.ig-cseries-contact-btns button:active {
  background: rgba(255,255,255,0.3);
}

.ig-cseries-time {
  color: rgba(255,255,255,0.5);
  font-size: 11px;
  margin-top: 4px;
}

/* Adjust for mobile */
@media (max-width: 768px) {
  .ig-cseries-actions {
    right: 6px;
    bottom: 80px;
    gap: 14px;
  }
  
  .ig-cseries-action-btn svg {
    width: 24px;
    height: 24px;
  }
  
  .ig-cseries-action-count {
    font-size: 11px;
  }
  
  .ig-cseries-bottom {
    right: 0;
    padding-right: 48px;
    padding-bottom: 40px;
  }

  .ig-cseries-actions {
    bottom: 100px;
  }

  .ig-post-image {
    max-height: 500px;
  }
}

/* Messaging Attachment Menu */
.ig-attach-btn {
  background: none;
  border: none;
  padding: 8px;
  cursor: pointer;
  color: var(--ig-primary-text);
  display: flex;
  align-items: center;
  justify-content: center;
}

.ig-attach-menu {
  position: absolute;
  bottom: 60px;
  left: 16px;
  background: var(--ig-primary-background);
  border: 1px solid var(--ig-border);
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  padding: 8px;
  z-index: 1000;
  min-width: 150px;
}

.ig-attach-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  border-radius: 8px;
  color: var(--ig-primary-text);
  font-size: 14px;
  transition: background 0.2s;
}

.ig-attach-option:hover {
  background: var(--ig-hover);
}

.ig-attach-option svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

.ig-voice-btn {
  background: none;
  border: none;
  padding: 8px;
  cursor: pointer;
  color: var(--ig-primary-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  border-radius: 50%;
}

.ig-voice-btn:active {
  transform: scale(0.9);
}

/* Fallback: ig-modal used as standalone full-screen overlay */
div.ig-modal.ig-modal-overlay {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: rgba(0, 0, 0, 0.8);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 10000;\n}

.ig-btn-primary {
  background: var(--ig-blue);
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  margin: 0 8px;
}

/* Emoji Picker Styles */
.ig-emoji-picker {
  background: var(--ig-background);
  border-radius: 12px;
  max-width: 350px;
  width: 90%;
  max-height: 400px;
  bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
}

.ig-emoji-header {
  padding: 16px;
  border-bottom: 1px solid var(--ig-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ig-emoji-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

.ig-emoji-grid {
  padding: 12px;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 8px;
  overflow-y: auto;
  max-height: 300px;
}

.ig-emoji-item {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  padding: 8px;
  border-radius: 8px;
  transition: background 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ig-emoji-item:hover {
  background: var(--ig-hover-overlay);
}

/* Message Actions Modal Styles */
.ig-message-actions-menu {
  background: var(--ig-background);
  border-radius: 12px;
  max-width: 350px;
  width: 90%;
  overflow: hidden;
}

.ig-message-action-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border: none;
  background: none;
  width: 100%;
  cursor: pointer;
  color: var(--ig-primary-text);
  font-size: 14px;
  transition: background 0.2s;
  border-bottom: 1px solid var(--ig-border);
}

.ig-message-action-btn:last-child {
  border-bottom: none;
}

.ig-message-action-btn:hover {
  background: var(--ig-hover-overlay);
}

.ig-message-action-btn.danger {
  color: #ed4956;
}

.ig-message-action-btn svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* Reply Preview */
.ig-reply-preview {
  position: relative;
}

/* Mobile Optimizations for Modals */
@media (max-width: 768px) {
  .ig-emoji-picker,
  .ig-message-actions-menu {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    max-width: none;
    border-radius: 12px 12px 0 0;
    animation: slideUp 0.3s ease-out;
  }
  
  .ig-emoji-grid {
    grid-template-columns: repeat(7, 1fr);
  }
  
  @keyframes slideUp {
    from {
      transform: translateY(100%);
    }
    to {
      transform: translateY(0);
    }
  }
}

/* Timer Option Buttons */
.ig-timer-option {
  padding: 12px 16px;
  background: var(--ig-secondary-background);
  border: 1px solid var(--ig-border);
  border-radius: 8px;
  cursor: pointer;
  color: var(--ig-primary-text);
  font-size: 14px;
  transition: all 0.2s;
}

.ig-timer-option:hover {
  background: var(--ig-hover-overlay);
  border-color: var(--ig-blue);
}

.ig-btn-primary {
  background: var(--ig-blue);
  color: white;
  padding: 10px 24px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
}

.ig-btn-secondary {
  background: var(--ig-secondary-background);
  color: var(--ig-primary-text);
  border: none;
  padding: 10px 24px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
}

/* === PDF EMBEDS (LinkedIn-style) === */
.ig-pdf-embed {
  border: 1px solid var(--ig-border);
  border-radius: 12px;
  overflow: hidden;
  background: var(--ig-secondary-background);
  cursor: pointer;
}

.ig-pdf-embed-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 12px;
  border-bottom: 1px solid var(--ig-border);
}

.ig-pdf-embed-badge {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--ig-primary-background);
  border: 1px solid var(--ig-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: var(--ig-primary-text);
  flex-shrink: 0;
}

.ig-pdf-embed-title {
  font-weight: 600;
  color: var(--ig-primary-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}

.ig-pdf-embed-size {
  font-size: 12px;
  color: var(--ig-secondary-text);
  flex-shrink: 0;
}

.ig-pdf-embed-preview {
  background: var(--ig-primary-background);
}

.ig-pdf-embed-preview canvas {
  width: 100%;
  height: auto;
  display: block;
  image-rendering: auto;
}

.ig-pdf-embed-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-top: 1px solid var(--ig-border);
  background: var(--ig-secondary-background);
}

.ig-pdf-ctrl {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid var(--ig-border);
  background: var(--ig-primary-background);
  color: var(--ig-primary-text);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.ig-pdf-ctrl:active {
  opacity: 0.6;
}

.ig-pdf-page {
  font-size: 12px;
  color: var(--ig-secondary-text);
}

.ig-pdf-sep {
  margin: 0 4px;
}

/* PDF modal */
.ig-pdf-modal-header {
  position: sticky;
  top: 0;
  background: var(--ig-secondary-background);
  border-bottom: 1px solid var(--ig-border);
  padding: 12px 16px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ig-pdf-modal-title {
  max-width: 80%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ig-pdf-modal-close {
  position: absolute;
  right: 12px;
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: var(--ig-secondary-text);
  padding: 6px;
}

.ig-pdf-modal-body {
  height: calc(90vh - 48px - 54px);
}

.ig-pdf-canvas-wrap {
  width: 100%;
  height: 100%;
  overflow: auto;
  background: var(--ig-primary-background);
}

.ig-pdf-modal-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-top: 1px solid var(--ig-border);
  background: var(--ig-secondary-background);
}

.ig-pdf-open {
  margin-left: auto;
  color: var(--ig-blue);
  text-decoration: none;
  font-weight: 600;
}

/* ========== Instagram-style Inline Comments in Feed ========== */
.ig-inline-comment {
  padding: 0 14px 2px;
  font-size: 14px;
  line-height: 1.4;
}

.ig-inline-comment-user {
  font-weight: 600;
  color: var(--ig-primary-text);
  margin-right: 6px;
  cursor: pointer;
}

.ig-inline-comment-text {
  color: var(--ig-primary-text);
}

/* ========== Instagram-style Bottom Sheet Comments ========== */
.ig-comments-sheet-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0);
  z-index: 10000;
  transition: background 0.3s ease;
}

.ig-comments-sheet-overlay.ig-sheet-open {
  background: rgba(0, 0, 0, 0.5);
}

.ig-comments-sheet-overlay.ig-sheet-closing {
  background: rgba(0, 0, 0, 0);
}

.ig-comments-sheet {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  max-height: 70vh;
  background: var(--ig-secondary-background);
  border-radius: 16px 16px 0 0;
  display: flex;
  flex-direction: column;
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1), max-height 0.3s ease;
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.3);
  overflow: hidden;
}

.ig-sheet-open .ig-comments-sheet {
  transform: translateY(0);
}

.ig-sheet-closing .ig-comments-sheet {
  transform: translateY(100%);
}

.ig-comments-sheet-handle {
  padding: 12px 0 4px;
  display: flex;
  justify-content: center;
  cursor: grab;
  flex-shrink: 0;
}

.ig-sheet-drag-indicator {
  width: 36px;
  height: 4px;
  border-radius: 2px;
  background: var(--ig-secondary-text);
  opacity: 0.4;
}

.ig-comments-sheet-header {
  padding: 4px 16px 12px;
  text-align: center;
  border-bottom: 1px solid var(--ig-border);
  flex-shrink: 0;
  position: relative;
}

/* Expand/collapse toggle button in header */
.ig-sheet-expand-btn {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--ig-secondary-text);
  cursor: pointer;
  padding: 6px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, transform 0.3s;
}

.ig-sheet-expand-btn:hover {
  background: var(--ig-hover-overlay, rgba(255,255,255,0.1));
}

.ig-sheet-expanded .ig-sheet-expand-btn svg {
  transform: rotate(180deg);
}

.ig-comments-sheet-title {
  font-weight: 700;
  font-size: 15px;
  color: var(--ig-primary-text);
}

.ig-comments-sheet-body {
  flex: 1;
  overflow-y: auto;
  padding: 4px 0;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.ig-comments-empty {
  padding: 40px 16px;
  color: var(--ig-secondary-text);
  text-align: center;
}

.ig-comments-reply-info {
  padding: 8px 16px;
  background: rgba(0, 149, 246, 0.1);
  border-top: 1px solid var(--ig-border);
  font-size: 13px;
  color: var(--ig-blue);
  flex-shrink: 0;
  align-items: center;
  justify-content: space-between;
}

.ig-comments-sheet-input {
  display: flex;
  gap: 10px;
  padding: 10px 16px;
  border-top: 1px solid var(--ig-border);
  align-items: center;
  flex-shrink: 0;
  background: var(--ig-secondary-background);
  padding-bottom: max(10px, env(safe-area-inset-bottom));
}

.ig-comments-input-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.ig-comments-input-field {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--ig-border);
  border-radius: 22px;
  background: var(--ig-background);
  color: var(--ig-primary-text);
  font-size: 14px;
  outline: none;
  font-family: inherit;
}

.ig-comments-input-field:focus {
  border-color: var(--ig-blue);
}

.ig-comments-input-field::placeholder {
  color: var(--ig-secondary-text);
}

.ig-comments-post-btn {
  background: none;
  border: none;
  color: var(--ig-blue);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  padding: 8px;
  flex-shrink: 0;
  opacity: 0.6;
  transition: opacity 0.2s;
}

.ig-comments-post-btn:hover {
  opacity: 1;
}

.ig-mention-dropdown {
  display: none;
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  max-height: 150px;
  overflow-y: auto;
  background: var(--ig-secondary-background);
  border: 1px solid var(--ig-border);
  border-radius: 12px;
  margin-bottom: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  z-index: 10;
}

/* ========== Instagram-style Likes Display ========== */
.ig-post-likes {
  padding: 0 16px;
  margin-bottom: 6px;
  min-height: 0;
}

.ig-post-likes-count {
  font-size: 14px;
  color: var(--ig-primary-text);
}

.ig-post-likes-count strong {
  font-weight: 600;
}

/* ========== Desktop adaptations ========== */
@media (min-width: 768px) {
  .ig-comments-sheet {
    max-width: 480px;
    left: 50%;
    transform: translate(-50%, 100%);
    border-radius: 16px 16px 0 0;
  }

  .ig-sheet-open .ig-comments-sheet {
    transform: translate(-50%, 0);
  }

  .ig-sheet-closing .ig-comments-sheet {
    transform: translate(-50%, 100%);
  }
}

/* ========================================================================
   Generic Bottom Sheet (Likes, Share, etc.)
   ======================================================================== */
.ig-bottom-sheet-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0);
  z-index: 10000;
  transition: background 0.3s ease;
}

.ig-bottom-sheet-overlay.ig-sheet-open {
  background: rgba(0, 0, 0, 0.5);
}

.ig-bottom-sheet-overlay.ig-sheet-closing {
  background: rgba(0, 0, 0, 0);
}

.ig-bottom-sheet {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  max-height: 75vh;
  background: var(--ig-secondary-background);
  border-radius: 16px 16px 0 0;
  display: flex;
  flex-direction: column;
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1), max-height 0.3s ease;
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.3);
  overflow: hidden;
}

.ig-sheet-open .ig-bottom-sheet {
  transform: translateY(0);
}

.ig-sheet-closing .ig-bottom-sheet {
  transform: translateY(100%);
}

.ig-sheet-expanded .ig-sheet-expand-btn svg {
  transform: rotate(180deg);
}

/* Expanded state */
.ig-bottom-sheet.ig-sheet-expanded {
  max-height: 95vh !important;
}

.ig-comments-sheet.ig-sheet-expanded {
  max-height: 95vh !important;
}

.ig-bottom-sheet-handle {
  padding: 12px 0 4px;
  display: flex;
  justify-content: center;
  cursor: grab;
  flex-shrink: 0;
}

.ig-bottom-sheet-header {
  padding: 4px 16px 12px;
  text-align: center;
  border-bottom: 1px solid var(--ig-border);
  flex-shrink: 0;
  position: relative;
}

.ig-bottom-sheet-title {
  font-weight: 700;
  font-size: 15px;
  color: var(--ig-primary-text);
}

.ig-bottom-sheet-body {
  flex: 1;
  overflow-y: auto;
  padding: 4px 0;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* ========== Likes Bottom Sheet ========== */
.ig-likes-user-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
}

.ig-likes-avatar-link {
  flex-shrink: 0;
}

.ig-likes-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

.ig-likes-user-info {
  flex: 1;
  min-width: 0;
}

.ig-likes-username {
  font-weight: 600;
  font-size: 14px;
  color: var(--ig-primary-text);
  text-decoration: none;
  display: block;
}

.ig-likes-username:hover {
  text-decoration: underline;
}

.ig-likes-bio {
  font-size: 12px;
  color: var(--ig-secondary-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ig-likes-follow-btn {
  background: var(--ig-blue);
  color: white;
  border: none;
  padding: 7px 20px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
  transition: opacity 0.2s;
}

.ig-likes-follow-btn:hover {
  opacity: 0.85;
}

.ig-likes-follow-btn.following {
  background: var(--ig-secondary-background);
  color: var(--ig-primary-text);
  border: 1px solid var(--ig-border);
}

/* ========== Share Bottom Sheet ========== */
.ig-share-sheet {
  max-height: 80vh;
}

.ig-share-search {
  padding: 8px 16px;
  border-bottom: 1px solid var(--ig-border);
  flex-shrink: 0;
}

.ig-share-search-input {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--ig-border);
  border-radius: 10px;
  background: var(--ig-background);
  color: var(--ig-primary-text);
  font-size: 14px;
  outline: none;
  box-sizing: border-box;
  font-family: inherit;
}

.ig-share-search-input:focus {
  border-color: var(--ig-blue);
}

.ig-share-search-input::placeholder {
  color: var(--ig-secondary-text);
}

.ig-share-section-label {
  padding: 10px 16px 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ig-secondary-text);
}

.ig-share-user-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
}

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

.ig-share-user-info {
  flex: 1;
  min-width: 0;
}

.ig-share-username {
  font-weight: 600;
  font-size: 14px;
  color: var(--ig-primary-text);
}

.ig-share-user-bio {
  font-size: 12px;
  color: var(--ig-secondary-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ig-share-send-btn {
  background: var(--ig-blue);
  color: white;
  border: none;
  padding: 7px 20px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
  transition: opacity 0.2s;
}

.ig-share-send-btn:hover {
  opacity: 0.85;
}

.ig-share-actions {
  padding: 16px;
  border-top: 1px solid var(--ig-border);
  flex-shrink: 0;
  display: flex;
  gap: 16px;
  justify-content: center;
  overflow-x: auto;
  padding-bottom: max(16px, env(safe-area-inset-bottom));
}

.ig-share-action-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  color: var(--ig-primary-text);
  background: none;
  border: none;
  cursor: pointer;
  font-size: 12px;
  min-width: 60px;
  padding: 0;
}

.ig-share-action-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--ig-background);
  border: 1px solid var(--ig-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ig-primary-text);
}

/* ========== Desktop adaptations for generic bottom sheet ========== */
@media (min-width: 768px) {
  .ig-bottom-sheet {
    max-width: 480px;
    left: 50%;
    transform: translate(-50%, 100%);
    border-radius: 16px 16px 0 0;
  }

  .ig-sheet-open .ig-bottom-sheet {
    transform: translate(-50%, 0);
  }

  .ig-sheet-closing .ig-bottom-sheet {
    transform: translate(-50%, 100%);
  }
}

/* ========================================================================
   Instagram-style Comments
   ======================================================================== */

/* Comment row — main layout */
.ig-comment-row {
  display: flex;
  gap: 12px;
  padding: 12px 16px;
  position: relative;
  align-items: flex-start;
}

.ig-comment-row.ig-comment-reply {
  gap: 10px;
  padding: 8px 16px 8px 12px;
}

/* Avatar */
.ig-comment-avatar-link {
  flex-shrink: 0;
  text-decoration: none;
}

.ig-comment-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  cursor: pointer;
  display: block;
}

.ig-comment-avatar.ig-comment-avatar-sm {
  width: 28px;
  height: 28px;
}

/* Comment body */
.ig-comment-body {
  flex: 1;
  min-width: 0;
  position: relative;
}

.ig-comment-text {
  margin-bottom: 4px;
  line-height: 1.4;
  font-size: 14px;
  word-break: break-word;
}

.ig-comment-reply .ig-comment-text {
  font-size: 13px;
}

.ig-comment-username {
  font-weight: 600;
  text-decoration: none;
  color: var(--ig-primary-text);
  cursor: pointer;
  margin-right: 6px;
}

.ig-comment-username:hover {
  text-decoration: underline;
}

.ig-comment-content {
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--ig-primary-text);
}

.ig-comment-mention {
  color: var(--ig-blue);
  text-decoration: none;
  font-weight: 600;
}

/* Meta row — time, likes count, reply btn, more */
.ig-comment-meta {
  display: flex;
  gap: 14px;
  font-size: 12px;
  color: var(--ig-secondary-text);
  align-items: center;
  margin-top: 2px;
}

.ig-comment-time {
  color: var(--ig-secondary-text);
}

.ig-comment-meta-btn {
  background: none;
  border: none;
  color: var(--ig-secondary-text);
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  padding: 0;
  line-height: 1;
}

.ig-comment-meta-btn:hover {
  color: var(--ig-primary-text);
}

.ig-comment-more-btn {
  opacity: 0;
  transition: opacity 0.15s;
  padding: 2px;
}

.ig-comment-row:hover .ig-comment-more-btn {
  opacity: 1;
}

/* Heart like button on right side of comment (Instagram style) */
.ig-comment-like-btn {
  flex-shrink: 0;
  align-self: center;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  color: var(--ig-secondary-text);
  margin-top: 4px;
  transition: transform 0.15s;
}

.ig-comment-like-btn svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  display: block;
}

.ig-comment-like-btn.ig-comment-liked {
  color: #ed4956;
}

.ig-comment-like-btn.ig-comment-liked svg {
  fill: #ed4956;
  stroke: #ed4956;
}

.ig-comment-like-btn:active {
  transform: scale(1.3);
}

/* 3-dot actions menu */
.ig-comment-actions-menu {
  display: none;
  position: absolute;
  left: 0;
  top: 100%;
  margin-top: 4px;
  background: var(--ig-secondary-background);
  border: 1px solid var(--ig-border);
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  z-index: 20;
  min-width: 150px;
  overflow: hidden;
}

.ig-comment-actions-menu.ig-menu-visible {
  display: block;
}

.ig-comment-action-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 12px 16px;
  background: none;
  border: none;
  border-top: 1px solid var(--ig-border);
  color: var(--ig-primary-text);
  cursor: pointer;
  font-size: 14px;
  text-align: left;
}

.ig-comment-action-item:first-child {
  border-top: none;
}

.ig-comment-action-item:hover {
  background: var(--ig-hover-overlay);
}

.ig-comment-action-item.ig-comment-action-danger {
  color: #ef4444;
}

/* Reply thread */
.ig-comment-replies-thread {
  margin-left: 48px;
  position: relative;
}

.ig-comment-reply .ig-comment-replies-thread {
  margin-left: 38px;
}

/* View replies button */
.ig-comment-view-replies-btn {
  background: none;
  border: none;
  color: var(--ig-secondary-text);
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  padding: 8px 0 4px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.ig-comment-view-replies-btn:hover {
  color: var(--ig-primary-text);
}

.ig-comment-replies-line {
  display: inline-block;
  width: 24px;
  height: 1px;
  background: var(--ig-secondary-text);
}

/* Hidden replies container */
.ig-comment-hidden-replies {
  display: none;
}

.ig-comment-hidden-replies.ig-replies-visible {
  display: block;
}

/* Fullscreen likes label */
.ig-cseries-likes-label {
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: transparent;
  transition: text-decoration-color 0.2s;
}

.ig-cseries-likes-label:hover {
  text-decoration-color: currentColor;
}

/* Desktop expanded bottom sheets */
@media (min-width: 768px) {
  .ig-comments-sheet.ig-sheet-expanded {
    max-height: 95vh !important;
  }

  .ig-bottom-sheet.ig-sheet-expanded {
    max-height: 95vh !important;
  }
}