/* --- MOBILE v5: left-aligned name/title (no labels) + stacked buttons --- */
:root { --safe-bottom: env(safe-area-inset-bottom, 0px); }

@media (max-width: 640px) {
  .app { 
    overflow: visible !important; 
    padding-bottom: calc(120px + var(--safe-bottom)) !important;
  }

  .meta {
    position: fixed !important;
    left: 12px !important;
    right: 12px !important;
    bottom: calc(12px + var(--safe-bottom)) !important;
    transform: none !important;
    z-index: 9999 !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;

    max-width: none !important;
    writing-mode: horizontal-tb !important;
    text-align: left !important;
  }

  .meta .info {
    writing-mode: horizontal-tb !important;
    text-align: left !important;
    white-space: normal !important;
    word-break: break-word !important;
    line-height: 1.25 !important;
  }
  .meta .info .line1 { font-weight: 700; }
  .meta .info .line2 { opacity: .9; font-style: italic; }

  .meta .actions {
    display: flex !important;
    flex-direction: column !important;    /* stack buttons */
    align-items: flex-end !important;     /* right edge */
    gap: 8px !important;
  }

  .video-stack, .video-slide, .video-slide video { z-index: 1 !important; }

  .toast {
    bottom: calc(130px + var(--safe-bottom)) !important;
    z-index: 10000 !important;
  }
}
/* --- v5b: reduce info bar width by ~30% on mobile; buttons stacked at right --- */
@media (max-width: 640px) {
  .meta {
    /* keep position and safe-area from v5; switch to row to place actions at right */
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 12px !important;
  }
  .meta .info {
    flex: 1 1 70% !important;     /* ≈ 70% width */
    max-width: 70% !important;
    text-align: left !important;
  }
  .meta .actions {
    flex: 0 0 auto !important;
    display: flex !important;
    flex-direction: column !important;  /* stacked buttons */
    align-items: flex-end !important;
    gap: 8px !important;
  }
}