/* History Panel - responsive sizing to match similar items panel EXACTLY */
@media (min-width: 1400px) {
  .history-panel {
    width: clamp(40vw, 45vw, 70vw) !important;
    height: clamp(40vh, 70vh, 80vh) !important;
    left: calc(2vw + clamp(40vw, 45vw, 70vw) + 2vw) !important;
  }
}

@media (min-width: 1024px) and (max-width: 1399px) {
  .history-panel {
    width: clamp(40vw, 35vw, 70vw) !important;
    height: clamp(40vh, 55vh, 80vh) !important;
    left: calc(2vw + clamp(40vw, 55vw, 70vw) + 2vw) !important;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .history-panel {
    width: clamp(40vw, 3vw, 70vw) !important;
    height: clamp(40vh, 55vh, 80vh) !important;
    left: calc(2vw + clamp(40vw, 55vw, 70vw) + 2vw) !important;
  }
}

.history-panel {
  position: fixed;
  top: 50% !important;
  /* The following are now set dynamically in JS for perfect alignment: */
  /* left: ...; width: ...; height: ...; */
  background: transparent;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  transform: translateY(-50%) !important; /* Center vertically like the expanded card */
  pointer-events: none; /* Start with no pointer events */
}

/* When the history panel is rendered inside an expanded card (mobile),
   force it to fill the card's content area and remove fixed positioning
   calculations so it visually sits centered with equal left/right spacing. */
.expanded-card.expanded .history-panel {
  position: absolute !important;
  inset: 0 !important; /* top:0; right:0; bottom:0; left:0 */
  width: auto !important;
  height: auto !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  transform: none !important; /* disable translateY centering from desktop rules */
  display: block !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  pointer-events: auto !important;
  z-index: 9999 !important;
}

.expanded-card.expanded .history-panel .history-container {
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important; /* let the container content manage its own padding */
  box-sizing: border-box !important;
  border-radius: 8px !important;
}

.history-panel.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.history-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 20px;
  z-index: 10001;
  transition: all 0.2s ease;
}

.history-close:hover {
  background: rgba(255, 255, 255, 0.4);
  transform: scale(1.1);
}

.history-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background: #080b11;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.8);
  border: 2px solid #196875;
  animation: historyFadeIn 0.5s forwards;
}

/* Default game styling */
.history-container {
  border: 2px solid #196875;
}

/* Movie styling */
.history-panel[data-original-card^="movie"] .history-container {
  border: 2px solid #9b4d5f;
}

/* Book styling */
.history-panel[data-original-card^="book"] .history-container {
  border: 2px solid #b08d57;
}

/* TV Show styling */
.history-panel[data-original-card^="tvshow"] .history-container {
  border: 2px solid #3d5afe;
}

/* History card styling */
.history-panel[data-original-card^="history"] .history-container {
  border: 2px solid #8b6914;
}

.history-header {
  padding: 20px 20px 10px 20px;
  border-bottom: 1px solid rgba(63, 203, 224, 0.2);
  background: rgba(25, 104, 117, 0.1);
}

/* Filter buttons container */
.history-filter-buttons {
  display: flex;
  gap: 8px;
  margin-top: 15px;
  flex-wrap: wrap;
}

.history-filter-btn {
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  color: #aaa;
  cursor: pointer;
  font-size: 0.85rem;
  transition: all 0.2s ease;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  text-overflow: ellipsis;
}

.history-filter-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.4);
}

.history-filter-btn.active {
  background: rgba(63, 203, 224, 0.2);
  border-color: #3fcbe0;
  color: #3fcbe0;
}

/* Movie filter button styling */
.history-panel[data-original-card^="movie"] .history-filter-btn.active {
  background: rgba(155, 77, 95, 0.2);
  border-color: #ff8a9e;
  color: #ff8a9e;
}

/* Book filter button styling */
.history-panel[data-original-card^="book"] .history-filter-btn.active {
  background: rgba(176, 141, 87, 0.2);
  border-color: #d4af37;
  color: #d4af37;
}

/* TV Show filter button styling */
.history-panel[data-original-card^="tvshow"] .history-filter-btn.active {
  background: rgba(61, 90, 254, 0.2);
  border-color: #e6e9ff;
  color: #e6e9ff;
}

/* History filter button styling */
.history-panel[data-original-card^="history"] .history-filter-btn.active {
  background: rgba(139, 105, 20, 0.2);
  border-color: #a67c19;
  color: #a67c19;
}

/* Movie header styling */
.history-panel[data-original-card^="movie"] .history-header {
  border-bottom: 1px solid rgba(155, 77, 95, 0.2);
  background: rgba(155, 77, 95, 0.1);
}

/* Book header styling */
.history-panel[data-original-card^="book"] .history-header {
  border-bottom: 1px solid rgba(176, 141, 87, 0.2);
  background: rgba(176, 141, 87, 0.1);
}

/* TV Show header styling */
.history-panel[data-original-card^="tvshow"] .history-header {
  border-bottom: 1px solid rgba(61, 90, 254, 0.2);
  background: rgba(61, 90, 254, 0.1);
}

/* History header styling */
.history-panel[data-original-card^="history"] .history-header {
  border-bottom: 1px solid rgba(139, 105, 20, 0.2);
  background: rgba(139, 105, 20, 0.1);
}

.history-header h3 {
  margin: 0;
  color: #3fcbe0;
  font-size: 1.5rem;
  text-shadow: 0 0 10px rgba(63, 203, 224, 0.3);
}

/* Movie header text color */
.history-panel[data-original-card^="movie"] .history-header h3 {
  color: #ff8a9e;
  text-shadow: 0 0 10px rgba(155, 77, 95, 0.3);
}

/* Book header text color */
.history-panel[data-original-card^="book"] .history-header h3 {
  color: #d4af37;
  text-shadow: 0 0 10px rgba(176, 141, 87, 0.3);
}

/* TV Show header text color */
.history-panel[data-original-card^="tvshow"] .history-header h3 {
  color: #e6e9ff;
  text-shadow: 0 0 10px rgba(61, 90, 254, 0.3);
}

/* History header text color */
.history-panel[data-original-card^="history"] .history-header h3 {
  color: #f4e4c1;
  text-shadow: 0 0 10px rgba(139, 105, 20, 0.3);
}

.history-loading {
  margin-top: 10px;
  color: #aaa;
  font-size: 0.9rem;
  display: none;
}

.history-content {
  flex: 1;
  padding: 15px; /* Reduced padding to give more space for content */
  overflow-y: auto;
  overflow-x: hidden; /* Prevent horizontal scrolling */
}

.history-items-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px 0;
}

.load-more-container {
  display: flex;
  justify-content: center;
  padding: 15px 0;
}

.load-more-btn {
  padding: 10px 20px;
  background: rgba(63, 203, 224, 0.1);
  border: 1px solid rgba(63, 203, 224, 0.3);
  border-radius: 4px;
  color: #3fcbe0;
  cursor: pointer;
  font-size: 0.9rem;
  transition: all 0.2s ease;
}

.load-more-btn:hover {
  background: rgba(63, 203, 224, 0.2);
  border-color: #3fcbe0;
}

/* Movie load more button styling */
.history-panel[data-original-card^="movie"] .load-more-btn {
  background: rgba(155, 77, 95, 0.1);
  border-color: rgba(155, 77, 95, 0.3);
  color: #ff8a9e;
}

.history-panel[data-original-card^="movie"] .load-more-btn:hover {
  background: rgba(155, 77, 95, 0.2);
  border-color: #ff8a9e;
}

/* Book load more button styling */
.history-panel[data-original-card^="book"] .load-more-btn {
  background: rgba(176, 141, 87, 0.1);
  border-color: rgba(176, 141, 87, 0.3);
  color: #d4af37;
}

.history-panel[data-original-card^="book"] .load-more-btn:hover {
  background: rgba(176, 141, 87, 0.2);
  border-color: #d4af37;
}

/* TV Show load more button styling */
.history-panel[data-original-card^="tvshow"] .load-more-btn {
  background: rgba(61, 90, 254, 0.1);
  border-color: rgba(61, 90, 254, 0.3);
  color: #e6e9ff;
}

.history-panel[data-original-card^="tvshow"] .load-more-btn:hover {
  background: rgba(61, 90, 254, 0.2);
  border-color: #e6e9ff;
}

/* History load more button styling */
.history-panel[data-original-card^="history"] .load-more-btn {
  background: rgba(139, 105, 20, 0.1);
  border-color: rgba(139, 105, 20, 0.3);
  color: #f4e4c1;
}

.history-panel[data-original-card^="history"] .load-more-btn:hover {
  background: rgba(139, 105, 20, 0.2);
  border-color: #a67c19;
}

.placeholder-message, .no-history-message, .error-message {
  text-align: center;
  color: #aaa;
  font-size: 1rem;
  margin: 30px 0;
  padding: 20px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.05);
}

.error-message {
  color: #ff6b6b;
  background: rgba(255, 107, 107, 0.1);
  border: 1px solid rgba(255, 107, 107, 0.2);
}

.history-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px 0;
}

.no-history-items {
  text-align: center;
  color: #aaa;
  font-size: 1.1rem;
  margin-top: 50px;
}

/* History item cards - updated for new layout */

/* Updated history item card to match real history card style */
/* Compact horizontal history card */
.history-item-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  border-radius: 14px;
  overflow: hidden;
  position: relative;
  transition: all 0.25s cubic-bezier(0.2, 1, 0.3, 1);
  cursor: pointer;
  padding: 0;
  animation: fadeIn 0.5s ease-in-out;
  background: linear-gradient(145deg, #3d2f1f 0%, #2a1810 50%, #1f1207 100%);
  border: 2px solid #8b6914;
  box-shadow: 0 2px 8px rgba(0,0,0,0.18), 0 0 8px rgba(139,105,20,0.08);
  min-height: 140px;
  max-width: 100%;
  box-sizing: border-box;
  gap: 24px;
  margin-bottom: 18px;
}

.history-item-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.22), 0 0 12px rgba(139,105,20,0.13);
}

/* Paper texture overlays (kept, but less pronounced for compact) */
.history-item-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background:
    radial-gradient(circle at 20% 80%, rgba(255, 255, 255, 0.01) 1px, transparent 1px),
    radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.01) 1px, transparent 1px),
    radial-gradient(circle at 40% 40%, rgba(139, 105, 20, 0.015) 2px, transparent 2px);
  pointer-events: none;
  z-index: 1;
}
.history-item-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    45deg,
    rgba(139, 105, 20, 0.015) 0%,
    transparent 25%,
    transparent 75%,
    rgba(139, 105, 20, 0.015) 100%
  );
  pointer-events: none;
  border-radius: 8px;
  z-index: 1;
}



/* Image container on the left, fixed size */

.history-item-card .history-image-container {
  flex-shrink: 0;
  width: 120px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #2a1810, #1f1207);
  border-right: 2px solid rgba(139, 105, 20, 0.25);
  z-index: 2;
  border-radius: 12px 0 0 12px;
  margin: 18px 0 18px 18px;
  box-shadow: 0 2px 12px rgba(139,105,20,0.13);
}


.history-item-card .history-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
  filter: sepia(0.1) contrast(1.1) brightness(0.97);
  border-radius: 6px;
  border: 2px solid #8b6914;
  box-shadow: 0 1px 6px rgba(0,0,0,0.13);
  background: #1f1207;
}

.history-item-card:hover .history-image {
  transform: scale(1.04);
}



.history-item-card .history-content {
  padding: 10px 12px;
  flex: 1;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 2;
  min-width: 0;
}

.history-item-card .history-content h3 {
  margin: 0 0 4px 0;
  color: #f4e4c1;
  font-size: 1.05em;
  font-weight: 600;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  line-height: 1.2;
}

.history-item-card .description-container {
  margin-bottom: 4px;
}

.history-item-card .description {
  margin: 4px 0 6px 0;
  color: #d4c4a1;
  font-size: 0.85em;
  line-height: 1.4;
  flex: 1;
}

.history-item-card .description.truncated {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.history-item-card .history-meta {
  margin-top: auto;
  border-top: 1px solid rgba(139, 105, 20, 0.18);
  padding-top: 6px;
}

.history-item-card .history-meta span {
  display: block;
  margin-bottom: 2px;
  color: #d4c4a1;
  font-size: 0.78em;
}

.history-item-card .history-meta strong {
  color: #8b6914;
  font-weight: 600;
  margin-right: 4px;
}

/* Responsive adjustments for improved image presentation */
@media (max-width: 1400px) {
  .history-item-card .history-image-container {
    width: 100px;
    height: 100px;
    margin: 12px 0 12px 12px;
  }
  .history-item-card {
    min-height: 110px;
    gap: 18px;
  }
}
@media (max-width: 1024px) {
  .history-item-card .history-image-container {
    width: 80px;
    height: 80px;
    margin: 8px 0 8px 8px;
  }
  .history-item-card {
    min-height: 90px;
    gap: 12px;
  }
}
@media (max-width: 768px) {
  .history-item-card .history-image-container {
    width: 60px;
    height: 60px;
    margin: 4px 0 4px 4px;
  }
  .history-item-card .history-content {
    padding: 7px 8px;
  }
  .history-item-card {
    min-height: 70px;
    gap: 8px;
  }
}
@media (max-width: 480px) {
  .history-item-card .history-image-container {
    width: 40px;
    height: 40px;
    margin: 2px 0 2px 2px;
  }
  .history-item-card .history-content h3 {
    font-size: 0.95em;
  }
  .history-item-card .description {
    font-size: 0.75em;
  }
  .history-item-card {
    min-height: 50px;
    gap: 4px;
  }
}
/* Animation */
@keyframes historyFadeIn {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Responsive design */
@media (max-width: 1200px) {
  .history-item-card {
    min-height: 100px;
    padding: 10px;
  }
  
  .history-item-card .history-image-container {
    width: 70px;
    height: 70px;
  }
  
  .history-filter-btn {
    font-size: 0.8rem;
    padding: 6px 10px;
  }
}

@media (max-width: 768px) {
  .history-panel {
    padding: 10px;
  }
  
  .history-header {
    padding: 15px;
  }
  
  .history-content {
    padding: 15px;
  }
  
  .history-item-card {
    min-height: 90px;
    padding: 8px;
    gap: 8px;
  }
  
  .history-item-card .history-image-container {
    width: 60px;
    height: 60px;
  }
  
  .history-filter-buttons {
    flex-direction: column;
    gap: 6px;
  }
  
  .history-filter-btn {
    font-size: 0.75rem;
    padding: 8px 10px;
  }
}




/* History Expanded Videos Section Styling */
.history-expanded-container .videos-section {
  margin-top: 20px;
  padding: 15px;
  background: rgba(139, 105, 20, 0.05);
  border: 1px solid rgba(139, 105, 20, 0.2);
  border-radius: 8px;
}

/* Video sections styling for history expanded in panel */
.history-expanded-view .video-sections-container {
  margin-top: 20px;
}

.history-expanded-view .video-section {
  margin-bottom: 15px;
}

.history-expanded-view .section-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 15px;
  cursor: pointer;
  background-color: rgba(139, 105, 20, 0.1);
  border-radius: 6px;
  margin-bottom: 8px;
  border: 1px solid rgba(139, 105, 20, 0.2);
  transition: all 0.3s ease;
}

.history-expanded-view .section-heading:hover {
  background-color: rgba(139, 105, 20, 0.15);
  border-color: rgba(139, 105, 20, 0.3);
}

.history-expanded-view .section-heading h4 {
  margin: 0;
  color: #f4e4c1;
  font-size: 1.1rem;
  font-weight: 600;
  text-shadow: 0 0 5px rgba(139, 105, 20, 0.3);
}

.history-expanded-view .toggle-icon {
  color: #f4e4c1;
  font-size: 1rem;
  font-weight: bold;
  transition: transform 0.2s ease;
}

.history-expanded-view .video-wrapper iframe {
  border: 2px solid rgba(139, 105, 20, 0.3);
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(139, 105, 20, 0.15);
}

.history-expanded-container .videos-section h4 {
  margin: 0 0 15px 0;
  color: #f4e4c1;
  font-size: 1.1rem;
  font-weight: 600;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  border-bottom: 1px solid rgba(139, 105, 20, 0.3);
  padding-bottom: 8px;
}

.history-expanded-container .videos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 15px;
  margin-top: 15px;
}

.history-expanded-container .video-item {
  background: rgba(139, 105, 20, 0.08);
  border: 1px solid rgba(139, 105, 20, 0.25);
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.3s ease;
}

.history-expanded-container .video-item:hover {
  background: rgba(139, 105, 20, 0.12);
  border-color: rgba(139, 105, 20, 0.4);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(139, 105, 20, 0.15);
}

.history-expanded-container .video-thumbnail {
  width: 100%;
  height: 160px;
  object-fit: cover;
  cursor: pointer;
  transition: opacity 0.3s ease;
}

.history-expanded-container .video-thumbnail:hover {
  opacity: 0.9;
}

.history-expanded-container .video-info {
  padding: 12px;
}

.history-expanded-container .video-title {
  margin: 0;
  color: #f4e4c1;
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.history-expanded-container .video-loading {
  text-align: center;
  color: #d4c4a1;
  font-style: italic;
  padding: 20px;
}

.history-expanded-container .no-videos {
  text-align: center;
  color: #a67c19;
  font-style: italic;
  padding: 20px;
  background: rgba(139, 105, 20, 0.05);
  border-radius: 6px;
  border: 1px dashed rgba(139, 105, 20, 0.3);
}

/* Media Player styling for history expanded in panel */
.history-expanded-container .media-button {
  background: linear-gradient(135deg, #8b6914, #a67c19);
  border: 1px solid #b08020;
  color: #f4e4c1;
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.9rem;
  margin-top: 10px;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.history-expanded-container .media-button:hover {
  background: linear-gradient(135deg, #a67c19, #b08020);
  box-shadow: 0 2px 8px rgba(139, 105, 20, 0.3);
  transform: translateY(-1px);
}

.history-expanded-container .media-button:active {
  transform: translateY(0);
}

.history-expanded-container .video-player-panel {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90vw;
  max-width: 1000px;
  height: 80vh;
  background: #080b11;
  border: 2px solid #8b6914;
  border-radius: 8px;
  z-index: 20000;
  display: none;
  flex-direction: column;
  box-shadow: 0 0 30px rgba(139, 105, 20, 0.4);
}

.history-expanded-container .video-player-header {
  padding: 15px 20px;
  background: rgba(139, 105, 20, 0.1);
  border-bottom: 1px solid rgba(139, 105, 20, 0.3);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.history-expanded-container .video-player-title {
  color: #f4e4c1;
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0;
}

.history-expanded-container .video-player-close {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  transition: all 0.2s ease;
}

.history-expanded-container .video-player-close:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: scale(1.1);
}

.history-expanded-container .video-player-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.history-expanded-container .video-iframe {
  width: 100%;
  height: 100%;
  border: none;
}

.history-expanded-container .video-playlist {
  height: 150px;
  background: rgba(139, 105, 20, 0.05);
  border-top: 1px solid rgba(139, 105, 20, 0.2);
  overflow-x: auto;
  padding: 10px;
  display: flex;
  gap: 10px;
  align-items: center;
}

.history-expanded-container .playlist-item {
  flex-shrink: 0;
  width: 120px;
  height: 90px;
  cursor: pointer;
  border-radius: 4px;
  overflow: hidden;
  border: 2px solid transparent;
  transition: all 0.2s ease;
}

.history-expanded-container .playlist-item:hover {
  border-color: rgba(139, 105, 20, 0.5);
}

.history-expanded-container .playlist-item.active {
  border-color: #8b6914;
  box-shadow: 0 0 10px rgba(139, 105, 20, 0.4);
}

.history-expanded-container .playlist-thumbnail {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Responsive styling for history panel videos */
@media (max-width: 768px) {
  .history-expanded-container .videos-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  
  .history-expanded-container .video-thumbnail {
    height: 140px;
  }
  
  .history-expanded-container .video-player-panel {
    width: 95vw;
    height: 85vh;
  }
  
  .history-expanded-container .video-playlist {
    height: 120px;
  }
  
  .history-expanded-container .playlist-item {
    width: 100px;
    height: 75px;
  }
}

@media (max-width: 480px) {
  .history-expanded-container .videos-section {
    padding: 10px;
    margin-top: 15px;
  }
  
  .history-expanded-container .video-thumbnail {
    height: 120px;
  }
  
  .history-expanded-container .video-info {
    padding: 8px;
  }
  
  .history-expanded-container .video-title {
    font-size: 0.8rem;
  }
  
  .history-expanded-container .video-player-panel {
    width: 98vw;
    height: 90vh;
  }
  
  .history-expanded-container .video-playlist {
    height: 100px;
  }
  
  .history-expanded-container .playlist-item {
    width: 80px;
    height: 60px;
  }
}

/* Scrollbar styling for history content */
.history-content::-webkit-scrollbar {
  width: 8px;
}

.history-content::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
}

.history-content::-webkit-scrollbar-thumb {
  background: rgba(139, 105, 20, 0.3);
  border-radius: 4px;
}

.history-content::-webkit-scrollbar-thumb:hover {
  background: rgba(139, 105, 20, 0.5);
}