/* Shorts-specific styles */
  body {
      overflow: hidden;
  }

  .shorts-container {
      position: relative;
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #000;
  }

  .shorts-player-wrapper {
      position: relative;
      width: 100%;
      max-width: 500px;
      height: 100%;
      background: #000;
      display: flex;
      align-items: center;
      justify-content: center;
      isolation: isolate; /* Create stacking context */
  }

  @media (max-width: 768px) {
      .shorts-player-wrapper {
          max-width: 100%;
      }
  }

  .shorts-video {
      width: 100%;
      height: 100%;
      /* object-fit is now dynamically set by JavaScript based on aspect ratio */
      object-fit: contain; /* default fallback */
      background: #000;
  }

  /* Square videos (1:1 aspect ratio) should scale to fill viewport height */
  .shorts-player-wrapper.square-video {
      max-width: 100vh; /* Make the container as wide as the viewport is tall */
      width: 100vh;
  }

  .shorts-video.square-video {
      object-fit: contain; /* Keep contain to show full video */
  }

  /* Overlay controls */
  .shorts-overlay {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      pointer-events: none;
      z-index: 10;
  }

  .shorts-top-bar {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      padding: 1rem;
      background: linear-gradient(to bottom, rgba(0, 0, 0, 0.7), transparent);
      display: flex;
      justify-content: space-between;
      align-items: center;
      pointer-events: auto;
  }

  .shorts-logo {
      font-size: 1.25rem;
      font-weight: 700;
      color: white;
  }

  .shorts-close-btn {
      width: 2.5rem;
      height: 2.5rem;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.1);
      border: none;
      color: white;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.2s;
  }

  .shorts-close-btn:hover {
      background: rgba(255, 255, 255, 0.2);
  }

  /* Side action buttons */
  .shorts-actions {
      position: absolute;
      right: 1rem;
      bottom: 8rem;
      display: flex;
      flex-direction: column;
      gap: 1.5rem;
      pointer-events: auto;
      transition: opacity 0.3s ease, transform 0.3s ease;
      z-index: 15; /* Ensure it's above video but below modals */
  }

  .shorts-actions.hidden {
      opacity: 0;
      transform: translateX(10px);
      pointer-events: none;
  }

  .action-btn {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.25rem;
      background: none;
      border: none;
      color: white;
      cursor: pointer;
      transition: transform 0.2s;
  }

  .action-btn:hover {
      transform: scale(1.1);
  }

  .action-btn svg {
      width: 2rem;
      height: 2rem;
      filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
  }

  .action-btn span {
      font-size: 0.75rem;
      font-weight: 600;
      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  }

  /* Video info */
  .shorts-info {
      position: absolute;
      left: 1rem;
      bottom: 2rem;
      right: 5rem;
      pointer-events: auto;
      color: white;
      transition: opacity 0.3s ease, transform 0.3s ease;
      z-index: 15;
  }

  .shorts-info.hidden {
      opacity: 0;
      transform: translateY(10px);
      pointer-events: none;
  }

  .shorts-channel {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      margin-bottom: 0.75rem;
  }

  .shorts-avatar {
      width: 2.5rem;
      height: 2.5rem;
      border-radius: 50%;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      font-size: 1rem;
  }

  .shorts-avatar-img {
      width: 2.5rem;
      height: 2.5rem;
      border-radius: 50%;
      object-fit: cover;
      border: 2px solid rgba(255, 255, 255, 0.2);
  }

  .shorts-channel-name {
      font-weight: 600;
      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  }

  .shorts-subscribe-btn {
      padding: 0.5rem 1rem;
      background: white;
      color: black;
      border: none;
      border-radius: 1.5rem;
      font-weight: 600;
      font-size: 0.875rem;
      cursor: pointer;
      transition: background 0.2s, transform 0.1s;
      margin-left: auto;
  }

  .shorts-subscribe-btn:hover {
      background: #e0e0e0;
      transform: scale(1.05);
  }

  .shorts-subscribe-btn:active {
      transform: scale(0.98);
  }

  .shorts-subscribe-btn.subscribed {
      background: rgba(255, 255, 255, 0.2);
      color: white;
      border: 1px solid rgba(255, 255, 255, 0.4);
  }

  .shorts-subscribe-btn.subscribed:hover {
      background: rgba(255, 255, 255, 0.3);
  }

  .shorts-title {
      font-weight: 600;
      margin-bottom: 0.25rem;
      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
      line-height: 1.4;
  }

  .shorts-description {
      font-size: 0.875rem;
      opacity: 0.9;
      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
      line-height: 1.4;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
  }

  /* Navigation arrows */
  .shorts-nav {
      position: absolute;
      right: 1rem;
      top: 50%;
      transform: translateY(-50%);
      display: flex;
      flex-direction: column;
      gap: 1rem;
      pointer-events: auto;
  }

  .nav-arrow {
      width: 3rem;
      height: 3rem;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.1);
      border: none;
      color: white;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.2s;
  }

  .nav-arrow:hover:not(:disabled) {
      background: rgba(255, 255, 255, 0.2);
  }

  .nav-arrow:disabled {
      opacity: 0.3;
      cursor: not-allowed;
  }

  .nav-arrow svg {
      width: 1.5rem;
      height: 1.5rem;
  }

  /* Loading state */
  .shorts-loading {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: white;
  }

  .spinner {
      width: 3rem;
      height: 3rem;
      border: 3px solid rgba(255, 255, 255, 0.3);
      border-top-color: white;
      border-radius: 50%;
      animation: spin 0.8s linear infinite;
  }

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

  /* Play/Pause overlay */
  .shorts-play-pause {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 5rem;
      height: 5rem;
      pointer-events: none;
      opacity: 0;
      transition: opacity 0.3s;
  }

  .shorts-play-pause.show {
      opacity: 1;
  }

  .shorts-play-pause svg {
      width: 100%;
      height: 100%;
      filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5));
  }

  /* Progress bar */
  .shorts-progress {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 3px;
      background: rgba(255, 255, 255, 0.3);
      pointer-events: auto;
      cursor: pointer;
      transition: height 0.2s ease;
  }
  
  .shorts-progress:hover {
      height: 6px;
  }

  .shorts-progress-bar {
      height: 100%;
      background: #ff0000;
      width: 0%;
      transition: width 0.1s linear;
      pointer-events: none;
  }

  /* Volume drag indicator */
  .volume-drag-indicator {
      position: fixed;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      background: rgba(0, 0, 0, 0.9);
      border-radius: 1rem;
      padding: 1.5rem 1rem;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 1rem;
      z-index: 100;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.2s;
  }

  .volume-drag-indicator.show {
      opacity: 1;
  }

  .volume-bar {
      width: 8px;
      height: 150px;
      background: rgba(255, 255, 255, 0.3);
      border-radius: 4px;
      position: relative;
      overflow: hidden;
  }

  .volume-fill {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      background: white;
      transition: height 0.1s ease;
      height: 100%;
  }

  .volume-text {
      color: white;
      font-size: 1rem;
      font-weight: 600;
      min-width: 50px;
      text-align: center;
  }

  /* Comment section toggle */
  .shorts-comments-toggle {
      position: absolute;
      bottom: 2rem;
      right: 1rem;
      padding: 0.75rem;
      background: rgba(255, 255, 255, 0.1);
      border: none;
      border-radius: 50%;
      color: white;
      cursor: pointer;
      pointer-events: auto;
      transition: background 0.2s;
  }

  .shorts-comments-toggle:hover {
      background: rgba(255, 255, 255, 0.2);
  }

  .shorts-comments-toggle svg {
      width: 1.5rem;
      height: 1.5rem;
  }

  /* Comments Drawer Styles */
  .shorts-comments-drawer {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background: rgb(15 23 42 / 0.98);
      backdrop-filter: blur(10px);
      border-top-left-radius: 1rem;
      border-top-right-radius: 1rem;
      max-height: 85vh;
      height: 85vh;
      transform: translateY(100%);
      transition: transform 0.3s ease;
      z-index: 100;
      overflow: hidden;
      display: flex;
      flex-direction: column;
  }

  .shorts-comments-drawer.open {
      transform: translateY(0);
  }

  .comments-drawer-header {
      padding: 1rem 1.5rem;
      border-bottom: 1px solid rgb(51 65 85);
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-shrink: 0;
  }

  .comments-drawer-header h3 {
      font-size: 1.125rem;
      font-weight: 600;
  }

  .comments-drawer-close {
      width: 2rem;
      height: 2rem;
      border-radius: 50%;
      background: rgb(51 65 85);
      border: none;
      color: white;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.2s;
  }

  .comments-drawer-close:hover {
      background: rgb(71 85 105);
  }

  .comments-drawer-body {
      flex: 1;
      overflow-y: auto;
      padding: 1rem 1.5rem;
  }

  .comment-item {
      margin-bottom: 1.5rem;
  }

  /* Action button active states */
  .action-btn.liked svg {
      fill: #3b82f6;
      stroke: #3b82f6;
  }

  /* Responsive adjustments */
  @media (min-width: 768px) {
      .shorts-comments-drawer {
          left: auto;
          right: 1rem;
          bottom: 0;
          max-width: 450px;
          width: 450px;
          max-height: calc(100vh - 2rem);
          height: calc(100vh - 2rem);
          border-radius: 1rem;
          transform: translateY(calc(100% + 1rem));
      }
      
      .shorts-comments-drawer.open {
          transform: translateY(1rem);
      }
  }