/* ============================================
   SOCIAL MEDIA INBOX GALLERY STYLE
   Mimics WhatsApp/Telegram/Messenger inbox
   ============================================ */

/* Gallery header - messaging app style */
.gallery.inbox-style .gallery-header {
  max-width: 600px;
  margin: 0 auto var(--space-md);
  padding: var(--space-md) var(--space-lg);
  background: var(--color-surface);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.gallery.inbox-style .gallery-title {
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
  margin-bottom: var(--space-xs);
  text-align: left;
}

.gallery.inbox-style .gallery-stats {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  font-family: var(--font-primary);
  text-align: left;
}

/* Override default gallery grid to vertical list */
.gallery.inbox-style .gallery-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: 600px;
  margin: 0 auto var(--space-2xl);
  background: var(--color-surface);
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

/* Inbox conversation item (scammer card) */
.inbox-style .scammer-card {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  background: var(--color-surface);
  border-radius: 0;
  border: none;
  border-bottom: 1px solid var(--color-border);
  box-shadow: none;
  cursor: pointer;
  transition: background 0.2s ease;
  position: relative;
}

.inbox-style .scammer-card:hover {
  background: #F5F5F5;
  transform: none;
  box-shadow: none;
}

.inbox-style .scammer-card:active {
  background: #EBEBEB;
}

.inbox-style .scammer-card:last-child {
  border-bottom: none;
}

/* Platform indicator */
.inbox-platform-icon {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: var(--font-bold);
  color: white;
  position: absolute;
  right: var(--space-lg);
  top: var(--space-md);
}

.platform-messenger {
  background: #0084FF;
}

.platform-telegram {
  background: #0088CC;
}

.platform-whatsapp {
  background: #25D366;
}

/* Avatar */
.inbox-style .scammer-avatar-wrapper {
  width: 56px;
  height: 56px;
  margin: 0;
  flex-shrink: 0;
  position: relative;
}

.inbox-style .scammer-avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--color-border);
}

/* Online status dot */
.inbox-online-dot {
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 14px;
  height: 14px;
  background: #44B700;
  border: 2px solid var(--color-surface);
  border-radius: 50%;
}

/* Content area */
.inbox-content {
  flex: 1;
  min-width: 0; /* Allow text truncation */
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

/* Name and time row */
.inbox-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-sm);
}

.inbox-style .scammer-name {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  margin: 0;
  text-align: left;
  color: var(--color-text-primary);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.inbox-time {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Message preview */
.inbox-message-preview {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
}

/* Unread badge */
.inbox-unread-badge {
  min-width: 22px;
  height: 22px;
  background: var(--color-primary);
  color: white;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  padding: 0 6px;
  flex-shrink: 0;
}

/* Platform-specific unread badge colors */
.platform-messenger .inbox-unread-badge {
  background: #0084FF;
}

.platform-telegram .inbox-unread-badge {
  background: #0088CC;
}

.platform-whatsapp .inbox-unread-badge {
  background: #25D366;
}

/* Completed state */
.inbox-style .scammer-card.completed {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}

.inbox-style .scammer-card.completed:hover {
  background: #F5F5F5;
}

.inbox-style .scammer-card.completed .inbox-message-preview {
  color: var(--color-text-muted);
}

.inbox-style .scammer-card.completed .scammer-name {
  color: var(--color-text-secondary);
}

.inbox-style .scammer-card.completed .inbox-time {
  color: var(--color-success);
  font-weight: var(--font-medium);
}

/* Completed checkmark */
.inbox-style .scammer-badge {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 18px;
  height: 18px;
  background: var(--color-success);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  border: 2px solid var(--color-surface);
}

/* Locked state */
.inbox-style .scammer-card.locked {
  opacity: 0.5;
  cursor: not-allowed;
}

.inbox-style .scammer-card.locked:hover {
  background: var(--color-surface);
}

/* Hide elements not needed in inbox view */
.inbox-style .scammer-type,
.inbox-style .scammer-location,
.inbox-style .scammer-meta,
.inbox-style .scammer-status,
.inbox-style .scammer-actions {
  display: none;
}

/* Mobile responsive */
@media (max-width: 640px) {
  .inbox-style .scammer-card {
    padding: var(--space-sm) var(--space-md);
  }

  .inbox-style .scammer-avatar-wrapper {
    width: 48px;
    height: 48px;
  }

  .inbox-style .scammer-name {
    font-size: var(--text-sm);
  }

  .inbox-message-preview {
    font-size: var(--text-xs);
  }

  .inbox-platform-icon {
    right: var(--space-md);
    top: var(--space-sm);
  }
}

/* Section styles for inbox */
.inbox-style .gallery-section {
  max-width: 600px;
  margin: 0 auto var(--space-xl);
}

/* Typing indicator animation */
.inbox-typing {
  display: inline-flex;
  gap: 3px;
  align-items: center;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.inbox-typing-dot {
  width: 4px;
  height: 4px;
  background: var(--color-text-muted);
  border-radius: 50%;
  animation: typingDot 1.4s infinite;
}

.inbox-typing-dot:nth-child(2) {
  animation-delay: 0.2s;
}

.inbox-typing-dot:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes typingDot {
  0%, 60%, 100% {
    transform: translateY(0);
    opacity: 0.7;
  }
  30% {
    transform: translateY(-6px);
    opacity: 1;
  }
}

/* Platform badge variations */
.inbox-platform-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  margin-top: var(--space-xs);
}

.inbox-platform-badge.messenger {
  background: #E3F2FD;
  color: #0084FF;
}

.inbox-platform-badge.telegram {
  background: #E0F2F1;
  color: #0088CC;
}

.inbox-platform-badge.whatsapp {
  background: #E8F5E9;
  color: #25D366;
}

/* New message pulse animation */
.inbox-style .scammer-card.new-message {
  animation: messagePulse 2s ease-out;
}

@keyframes messagePulse {
  0% {
    background: #E3F2FD;
  }
  100% {
    background: var(--color-surface);
  }
}