/* Instagram Reels Style - Minimal & Compact */
    .reels-viewport {
      position: relative;
      height: calc(100dvh - 158px - var(--safe-top) - var(--safe-bottom));
      min-height: 520px;
      z-index: 10;
      overflow-y: auto;
      scroll-snap-type: y mandatory;
      scroll-behavior: smooth;
      overscroll-behavior-y: contain;
      touch-action: pan-y;
      background: #000;
      scrollbar-width: none;
    }
    .reels-viewport::-webkit-scrollbar { display: none; }
    
    .reel-item {
      position: relative;
      width: 100%;
      height: 100%;
      min-height: 100%;
      scroll-snap-align: start;
      scroll-snap-stop: always;
      background: #000;
      overflow: hidden;
    }
    
    .reel-video { 
      width: 100%; 
      height: 100%; 
      object-fit: cover; 
      background: #000; 
      transition: filter .28s ease, opacity .28s ease;
    }

    .reel-video-loading-state .reel-video {
      filter: blur(14px);
      opacity: .78;
    }

    .reel-video-ready .reel-video {
      filter: blur(0);
      opacity: 1;
    }

    .reel-loading-overlay {
      position: absolute;
      inset: 0;
      z-index: 2;
      display: grid;
      place-items: center;
      background: rgba(0,0,0,.22);
      backdrop-filter: blur(2px);
      -webkit-backdrop-filter: blur(2px);
      opacity: 1;
      pointer-events: none;
      transition: opacity .25s ease;
    }

    .reel-video-ready .reel-loading-overlay {
      opacity: 0;
    }

    .reel-loading-spinner {
      width: 34px;
      height: 34px;
      border-radius: 50%;
      border: 3px solid rgba(255,255,255,.28);
      border-top-color: #fff;
      animation: reel-spin .8s linear infinite;
      filter: drop-shadow(0 2px 12px rgba(0,0,0,.45));
    }

    @keyframes reel-spin {
      to { transform: rotate(360deg); }
    }
    
    .reel-empty { 
      display: grid; 
      place-items: center; 
      color: #fff; 
    }
    
    /* Minimal gradient - only at bottom for text readability */
    .reel-gradient-overlay { 
      position: absolute; 
      inset: 0; 
      background: linear-gradient(
        to bottom, 
        transparent 0%, 
        transparent 70%, 
        rgba(0,0,0,0.4) 90%, 
        rgba(0,0,0,0.6) 100%
      ); 
      pointer-events: none; 
      z-index: 1;
    }
    
    /* Top bar - no background */
    .reel-top-bar { 
      position: absolute; 
      top: calc(12px + var(--safe-top)); 
      left: 14px; 
      right: 14px; 
      display: flex; 
      justify-content: space-between; 
      align-items: center; 
      color: #fff; 
      z-index: 3;
    }
    
    .reel-top-btn {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      border: 0;
      background: transparent;
      color: #fff;
      font-size: 16px;
      display: grid;
      place-items: center;
    }
    
    .reel-top-btn:active {
      transform: scale(0.9);
    }
    
    .reel-top-title {
      font-size: 15px;
      font-weight: 600;
      color: #fff;
      text-shadow: 0 1px 3px rgba(0,0,0,.6);
    }
    
    /* Content area - LEFT SIDE in RTL (Arabic) */
    .reel-content-area { 
      position: absolute; 
      left: 14px;
      right: 70px; 
      bottom: calc(92px + var(--safe-bottom)); 
      color: #fff; 
      display: grid; 
      gap: 8px; 
      z-index: 3;
      direction: ltr;
      text-align: left;
      align-items: flex-start;
    }
    
    [dir="ltr"] .reel-content-area { 
      left: 70px;
      right: 14px;
    }
    
    /* Author inline - avatar + name on same line */
    .reel-author-inline {
      display: flex;
      align-items: center;
      gap: 10px;
      border: 0;
      background: transparent;
      color: #fff;
      padding: 0;
      width: fit-content;
      direction: ltr;
      text-align: left;
    }
    
    .reel-avatar-inline {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      object-fit: cover;
      background: rgba(255,255,255,0.1);
      border: 2px solid #fff;
      flex: 0 0 32px;
    }
    
    .reel-avatar-empty {
      display: grid;
      place-items: center;
      color: rgba(255,255,255,0.6);
      font-size: 14px;
    }
    
    .reel-username-inline {
      font-size: 14px;
      font-weight: 600;
      color: #fff;
      text-shadow: 0 1px 3px rgba(0,0,0,.7);
      direction: rtl;
    }
    
    .reel-caption-text {
      margin: 0;
      font-size: 13px;
      line-height: 1.4;
      color: #fff;
      font-weight: 400;
      text-shadow: 0 1px 3px rgba(0,0,0,.7);
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      direction: rtl;
      text-align: right;
      width: 100%;
    }
    
    /* Attachment card - ONLY one with background */
    .reel-attachment-card { 
      border: 1px solid rgba(255,255,255,0.25); 
      background: rgba(0,0,0,0.5); 
      color: #fff; 
      border-radius: 12px; 
      padding: 10px 12px; 
      display: flex; 
      gap: 10px; 
      align-items: center; 
      justify-content: space-between;
      direction: rtl;
      text-align: right;
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      width: fit-content;
      max-width: 100%;
      transition: transform .15s ease;
    }
    
    .reel-attachment-card:active {
      transform: scale(0.98);
    }
    
    .reel-attachment-content {
      display: flex;
      align-items: center;
      gap: 10px;
      flex: 1;
      min-width: 0;
    }
    
    .reel-attachment-icon {
      width: 32px;
      height: 32px;
      border-radius: 8px;
      background: rgba(255,255,255,0.2);
      display: grid;
      place-items: center;
      flex: 0 0 32px;
    }
    
    .reel-attachment-icon i {
      font-size: 14px;
      color: #fff;
    }
    
    .reel-attachment-text {
      flex: 1;
      min-width: 0;
      display: grid;
      gap: 2px;
    }
    
    .reel-attachment-title {
      font-size: 13px;
      font-weight: 600;
      color: #fff;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    
    .reel-attachment-label { 
      color: rgba(255,255,255,0.7); 
      font-size: 11px;
      font-weight: 500;
    }
    
    .reel-attachment-arrow {
      font-size: 12px;
      color: rgba(255,255,255,0.6);
      flex: 0 0 12px;
    }
    
    [dir="rtl"] .reel-attachment-arrow {
      transform: scaleX(-1);
    }
    
    /* Actions column - RIGHT SIDE in RTL (Arabic) */
    .reel-actions-column { 
      position: absolute; 
      right: 12px;
      left: auto; 
      bottom: calc(92px + var(--safe-bottom)); 
      display: grid; 
      gap: 16px; 
      z-index: 4; 
      color: #fff;
      align-items: center;
    }
    
    [dir="ltr"] .reel-actions-column { 
      right: auto;
      left: 12px;
    }
    
    .reel-action-btn { 
      border: 0;
      background: transparent;
      color: #fff; 
      display: grid; 
      place-items: center; 
      gap: 4px;
      font-weight: 700;
      padding: 0;
      transition: transform .15s ease;
    }
    
    .reel-action-btn:active {
      transform: scale(0.9);
    }
    
    .reel-action-icon {
      width: 44px;
      height: 44px;
      display: grid;
      place-items: center;
    }
    
    .reel-action-icon i {
      font-size: 28px;
      color: #fff;
      filter: drop-shadow(0 1px 4px rgba(0,0,0,.6));
    }
    
    .reel-action-btn.active .reel-action-icon i {
      color: #ef4444;
    }
    
    .reel-action-count { 
      font-size: 11px; 
      font-weight: 700;
      color: #fff;
      text-shadow: 0 1px 3px rgba(0,0,0,.7);
    }
    
    .reel-author-avatar-btn {
      width: 44px;
      height: 44px;
      border: 0;
      background: transparent;
      padding: 0;
      position: relative;
    }
    
    .reel-author-avatar {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      object-fit: cover;
      border: 2px solid #fff;
      display: block;
      margin: 0 auto;
    }