/* Activities & Coins UI overrides/additions */

/* Mobile sidebar styles */
.mobile-sidebar {
  transition: transform 0.3s ease-in-out;
}

.mobile-sidebar-overlay {
  transition: opacity 0.3s ease-in-out;
}

.mobile-sidebar.translate-x-full {
  transform: translateX(100%);
}

/* Enhanced cross button styles for main chatbot sidebar */
.sidebar-close-btn {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.2);
  color: #dc2626;
  transition: all 0.2s ease;
}

.sidebar-close-btn:hover {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.3);
  transform: scale(1.05);
}

.sidebar-close-btn:active {
  transform: scale(0.95);
}

.sidebar-close-btn .fa-times {
  font-size: 16px;
  font-weight: bold;
}

/* Enhanced cross button styles for mobile sidebar */
.mobile-sidebar .fa-times {
  font-size: 18px;
  font-weight: bold;
}

/* Feedback button styles */
.feedback-btn {
  transition: all 0.2s ease;
}

.feedback-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(16, 163, 74, 0.3);
}

.feedback-btn:active {
  transform: translateY(0);
}

/* Auto-close button animation */
button.pulse {
  animation: pulse-once 0.2s ease-in-out;
}

@keyframes pulse-once {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

/* Compact header button */
.header-action-btn { background-color:#f7fafc; color:#334155; border:1px solid #e2e8f0; border-radius:8px; padding:8px 12px; font-size:14px; font-weight:600; cursor:pointer; display:inline-flex; align-items:center; gap:8px; transition:background-color .2s ease,border-color .2s ease, transform .05s ease; }
.header-action-btn:hover { background-color:#edf2f7; border-color:#cbd5e0; }
.header-action-btn:active { transform: translateY(1px); }
.header-action-btn.primary { background:#16a34a; color:#fff; border-color:#16a34a; }
.header-action-btn.primary:hover { background:#15803d; border-color:#15803d; }

/* Coin badge */
.coin-badge { display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px; background:linear-gradient(135deg,#f59e0b,#d97706); color:#fff; font-weight:700; box-shadow:0 2px 8px rgba(217,119,6,.25); }
.coin-badge i { filter: drop-shadow(0 1px 1px rgba(0,0,0,.2)); animation: coin-wobble 2.2s ease-in-out infinite; }
@keyframes coin-wobble { 0%,100%{ transform: rotate(0deg);} 50%{ transform: rotate(-12deg);} }

/* Activities modal width */
.activities-modal { max-width: 760px; }

/* Tabs */
.tabs { display:flex; gap:8px; margin-bottom:16px; border-bottom:1px solid #e5e7eb; padding-bottom:8px; }
.tab-button { background:#f8fafc; border:1px solid #e5e7eb; color:#334155; padding:8px 12px; border-radius:8px; font-weight:600; cursor:pointer; display:inline-flex; align-items:center; gap:8px; }
.tab-button:hover { background:#eef2f7; }
.tab-button.active { background:#16a34a; border-color:#16a34a; color:#fff; }
.tab-panel { display:none; }
.tab-panel.active { display:block; }

/* Submit gate */
.submit-gate { display:flex; align-items:center; gap:12px; background:#fff7ed; color:#9a3412; border:1px dashed #fdba74; border-radius:10px; padding:12px; margin-bottom:12px; }
.submit-gate i { font-size:20px; }
.gate-title { font-weight:800; }
.gate-sub { font-size:.9rem; color:#b45309; }

/* Upload form */
.upload-form { background:#f8fafc; border:1px solid #e5e7eb; border-radius:12px; padding:12px; }
.upload-row { display:flex; align-items:center; gap:12px; margin-bottom:10px; }
.file-label { display:inline-flex; align-items:center; gap:8px; background:#fff; border:1px dashed #cbd5e1; color:#334155; padding:8px 12px; border-radius:8px; cursor:pointer; }
#activityImage { border:1px solid #e5e7eb; padding:8px; border-radius:8px; background:#fff; }
.upload-form textarea { width:100%; border:1px solid #e5e7eb; border-radius:10px; padding:10px; resize:vertical; font-size:14px; background:#fff; min-height:80px; }
.upload-actions { margin-top:10px; display:flex; align-items:center; gap:12px; }
.upload-actions .hint { font-size:.9rem; color:#64748b; display:flex; align-items:center; gap:6px; }
.form-msg { margin-top:8px; font-size:.92rem; color:#64748b; }

/* Hide native file input; use label as trigger */
.file-input-hidden { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.file-name { margin-left: 8px; color: #64748b; font-size: 0.9rem; }

/* My submissions spacing */
.my-submission-row { margin-bottom: 12px; padding: 10px 6px; }

/* Status pills */
.history-item .user-status { padding:4px 8px; border-radius:999px; font-size:.75rem; text-transform:capitalize; }
.user-status.active { background:#dcfce7; color:#166534; border:1px solid #86efac; }
.user-status.inactive { background:#fee2e2; color:#991b1b; border:1px solid #fecaca; }

/* Enhanced like/comment buttons */
.like-btn { position: relative; }
.like-btn.liked { color:#dc2626 !important; } /* red-600 */
.like-btn.liked i { animation: heart-pop .25s ease-out; }
.like-btn.pulse { animation: pulse-quick .2s ease-out; }
@keyframes heart-pop { 0%{ transform: scale(1);} 50%{ transform: scale(1.25);} 100%{ transform: scale(1);} }
@keyframes pulse-quick { 0%{ transform: translateY(0);} 50%{ transform: translateY(-1px);} 100%{ transform: translateY(0);} }

/* Comment avatar subtle ring */
.comment-avatar { box-shadow: 0 0 0 2px #ecfdf5; } /* emerald-50 ring */

/* Slideshow styles */
.activity-slideshow {
  position: relative;
  user-select: none;
}

.slideshow-container {
  position: relative;
  min-height: 200px;
}

.slideshow-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
  pointer-events: none;
}

.slideshow-slide.active {
  position: relative;
  opacity: 1;
  pointer-events: auto;
}

.slideshow-slide.hidden {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.slideshow-slide img,
.slideshow-slide video {
  display: block;
  margin: 0 auto;
}

.slideshow-prev,
.slideshow-next {
  z-index: 10;
  cursor: pointer;
  border: none;
  outline: none;
  transition: all 0.3s ease;
}

.slideshow-prev:hover,
.slideshow-next:hover {
  transform: translateY(-50%) scale(1.1);
}

.slideshow-prev:active,
.slideshow-next:active {
  transform: translateY(-50%) scale(0.95);
}

/* Make arrows visible on mobile */
@media (max-width: 768px) {
  .slideshow-prev,
  .slideshow-next {
    width: 36px;
    height: 36px;
    font-size: 14px;
  }
}

.slideshow-indicators {
  z-index: 10;
}

.slideshow-indicator {
  cursor: pointer;
  border: none;
  outline: none;
  padding: 0;
  transition: all 0.3s ease;
}

.slideshow-indicator:hover {
  transform: scale(1.2);
}

/* Media preview styles */
#pageMediaPreview,
#mobileMediaPreview {
  transition: all 0.3s ease;
}

/* Responsive */
@media (max-width: 720px) {
  .activities-modal { max-width: 95vw; }
  .tabs { flex-wrap: wrap; }
}