/* MyTube Index Page Styles */

/* レイアウトヘルパー */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px;
}

/* アップロードページ（main-content 以下）専用 */
.main-content .file-input-wrapper {
  position: relative;
  overflow: hidden;
  display: inline-block;
}
.main-content .file-input-wrapper input[type=file] {
  position: absolute;
  left: -9999px;
}
.main-content .file-input-label {
  display: inline-block;
  padding: 12px 20px;
  cursor: pointer;
  background: linear-gradient(135deg, #2d3748 0%, #4a5568 100%);
  color: #ffffff;
  border-radius: 8px;
  transition: all 0.3s ease;
}
@media (min-width: 768px) {
  .main-content .file-input-label {
    padding: 16px 24px;
  }
}
.main-content .file-input-label:hover {
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
  background: linear-gradient(135deg, #4a5568 0%, #718096 100%);
}

/* プログレスバー背景（テーマ対応） */
.main-content .progress-bg { background-color: #e5e7eb; }
[data-theme="dark"] .main-content .progress-bg { background-color: #374151; }

/* モバイル最適化（アップロードページのガラス効果を弱める） */
@media (max-width: 767px) {
  .main-content .glass-effect {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 1rem !important;
    margin: 0 !important;
  }
  .main-content .flex.items-center.justify-center {
    padding: 1rem !important;
  }
  .main-content .flex.items-center.justify-center > div {
    max-width: 100% !important;
    width: 100% !important;
  }
}

.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}

.video-card {
  background: var(--card-bg);
  overflow: hidden;
  transition: all 0.3s ease;
}

.video-thumbnail {
  position: relative;
}

.video-thumbnail img {
  display: block;
  width: 100%;
  height: auto;
}

.video-duration {
  position: absolute;
  right: 8px;
  bottom: 8px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 12px;
}

.video-info {
  padding: 12px;
}

.video-title {
  margin: 0 0 8px 0;
  font-size: 14px;
  color: var(--text-primary);
}

/* メインページの動画タイトルスタイル */
.video-title-main {
  color: var(--text-primary);
  transition: color 0.3s ease;
}


/* 現在の動画タイトルスタイル */
.video-title-current {
  font-size: 1.8rem;
  color: var(--text-primary);
  transition: color 0.3s ease;
}

/* サイドバーの動画タイトルスタイル */
.video-title-sidebar {
  font-size: 1.2rem;
  color: var(--text-primary);
  transition: color 0.3s ease;
}

/* 動画ボタンのテキストスタイル */
.video-button-text {
  color: var(--text-primary);
  transition: color 0.3s ease;
}

/* 動画カードのメタ情報スタイル */
.video-meta-info {
  color: var(--text-secondary);
  transition: color 0.3s ease;
}

/* 動画カードのアイコンスタイル */
.video-meta-icon {
  color: var(--text-secondary);
  transition: color 0.3s ease;
}

/* 動画カードの数値情報スタイル */
.video-count-info {
  color: var(--text-secondary);
  transition: color 0.3s ease;
}

/* 動画がない時のアイコン背景色 */
.empty-video-icon-bg {
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 50%, #cbd5e1 100%);
  transition: background 0.3s ease;
}

/* テーマ変数は theme.css で管理 */

/* 動画カードのいいね率バッジスタイル */
.video-like-rate-badge {
  background: var(--accent-bg);
  color: var(--text-secondary);
  transition: all 0.3s ease;
}

/* 動画カードのいいね率テキストスタイル */
.video-like-rate-text {
  color: var(--text-secondary);
  transition: color 0.3s ease;
}

/* 動画再生ページの動画情報欄スタイル */
.video-info-container {
  padding: 1rem;
  background: var(--card-bg);
  backdrop-filter: blur(8px);
  transition: all 0.3s ease;
}

@media (max-width: 768px) {
  .video-title-current {
    font-size: 1.4rem;
  }
  .video-info-container {
    padding: 0.5rem;
    background: none;
    backdrop-filter: none;
  }
}


/* おすすめ動画カードのスタイル */
.recommended-video-card {
  padding: 0.5rem;
  background: var(--card-bg);
  backdrop-filter: blur(8px);
  transition: all 0.3s ease;
}

/* おすすめ動画カードのホバー背景（ライト/ダーク対応） */
.recommended-video-card:hover {
  background: var(--table-row-hover) !important;
}

/* 動画再生時間表示のスタイル */
.video-duration-badge {
  background: rgba(0, 0, 0, 0.8);
  color: #ffffff;
  transition: all 0.3s ease;
}

/* 動画プレイヤーコンテナのスタイル */
.video-player-container {
  background: var(--primary-bg);
  transition: background-color 0.3s ease;
}

/* 動画アップロードページ用の入力フィールドスタイル */
.upload-input {
  background: var(--card-bg) !important;
  border: 2px solid rgba(0, 0, 0, 0.2) !important;
  color: var(--text-primary) !important;
  transition: all 0.3s ease !important;
}

.upload-input:focus {
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
  outline: none !important;
}

.upload-input::placeholder {
  color: var(--text-muted) !important;
}

/* テーマ変数は theme.css で管理 */

/* 動画アップロードページ用のボタンスタイル */
.upload-button {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
  color: #ffffff !important;
  border: none !important;
  transition: all 0.3s ease !important;
}

.upload-button:hover {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 8px 25px rgba(59, 130, 246, 0.3) !important;
}

.upload-button:active {
  transform: translateY(0) !important;
  box-shadow: 0 4px 15px rgba(59, 130, 246, 0.2) !important;
}

/* テーマ変数は theme.css で管理 */

/* 成功時のアップロードボタン */
.upload-button.from-green-600 {
  background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
  color: #ffffff !important;
}

.upload-button.from-green-600:hover {
  background: linear-gradient(135deg, #047857 0%, #065f46 100%) !important;
  box-shadow: 0 8px 25px rgba(5, 150, 105, 0.3) !important;
}

/* エラー時のアップロードボタン */
.upload-button.from-red-600 {
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%) !important;
  color: #ffffff !important;
}

.upload-button.from-red-600:hover {
  background: linear-gradient(135deg, #b91c1c 0%, #991b1b 100%) !important;
  box-shadow: 0 8px 25px rgba(220, 38, 38, 0.3) !important;
}

/* テーマ変数は theme.css で管理 */

.video-meta {
  display: flex;
  gap: 12px;
  color: var(--text-secondary);
  font-size: 12px;
}

.video-actions {
  margin-top: 8px;
}

.btn-like {
  background: var(--secondary-bg);
  color: var(--text-primary);
  border: 1px solid var(--card-border);
  border-radius: 8px;
  padding: 6px 10px;
  transition: all 0.3s ease;
}

.btn-like:hover {
  background: var(--accent-bg);
}

 

 

/* 動画一覧のタイトル専用スタイル */
.video-list-container .line-clamp-2 {
  line-height: 1.4;
  max-height: calc(1.4em * 2);
}

/* PCでの動画一覧タイトル調整 */
@media (min-width: 769px) {
  .video-list-container .line-clamp-2 {
    line-height: 1.5;
    max-height: calc(1.5em * 2);
  }
}

 

/* 動画リスト切り替えアニメーション */
.video-list-transition {
  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}

.video-list-transition.fade-out {
  opacity: 0;
  transform: translateY(10px);
}

.video-list-transition.fade-in {
  opacity: 1;
  transform: translateY(0);
}

/* プレースホルダーアニメーション */
#scroll-placeholder {
  transition: opacity 0.3s ease-in-out;
}

#scroll-placeholder.fade-out {
  opacity: 0;
}

/* 並び替え中の動画一覧セクション背景（ライト/ダーク対応） */
.sorting-placeholder {
  border-radius: 0.75rem;
  background: transparent;
  border: none;
  backdrop-filter: none;
}

/* 並び替え中インジケータの背景 */
.sorting-indicator {
  background: transparent;
  border: none;
}

 

/* いいねボタンのカスタムスタイル */
.like-button.liked {
  animation: likeGlow 0.6s ease-in-out forwards;
}

.like-button.liked .button-icon {
  animation: heartBeat 0.6s ease-in-out forwards;
}

.like-button.animate-bounce {
  animation: likeBounce 0.6s ease-in-out forwards;
}

.like-button.animate-pulse {
  animation: heartPulse 0.6s ease-in-out forwards;
}

/* いいねボタンのコンテナスタイル */
#like-button {
  position: relative;
  overflow: visible !important;
  z-index: 50;
}

/* いいねアニメーション */
@keyframes heartBeat {
  0% {
    transform: scale(1);
  }
  14% {
    transform: scale(1.3);
  }
  28% {
    transform: scale(1);
  }
  42% {
    transform: scale(1.3);
  }
  70% {
    transform: scale(1);
  }
}

@keyframes heartPulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes likeBounce {
  0%, 20%, 53%, 80%, 100% {
    transform: translate3d(0, 0, 0);
  }
  40%, 43% {
    transform: translate3d(0, -8px, 0);
  }
  70% {
    transform: translate3d(0, -4px, 0);
  }
  90% {
    transform: translate3d(0, -2px, 0);
  }
}

@keyframes likeGlow {
  0% {
    box-shadow: 0 0 5px rgba(239, 68, 68, 0.5);
  }
  50% {
    box-shadow: 0 0 20px rgba(239, 68, 68, 0.8), 0 0 30px rgba(239, 68, 68, 0.6);
  }
  100% {
    box-shadow: 0 0 5px rgba(239, 68, 68, 0.5);
  }
}

/* リップル効果のスタイル */
.like-ripple {
  position: fixed;
  border-radius: 50%;
  background: rgba(239, 68, 68, 0.3);
  transform: scale(0);
  animation: ripple 0.6s linear;
  pointer-events: none;
  z-index: 51;
}

@keyframes ripple {
  to {
    transform: scale(6);
    opacity: 0;
  }
}

/* フローティングハートのスタイル */
.floating-heart {
  position: fixed;
  pointer-events: none;
  z-index: 1000;
  color: #ef4444;
  animation-duration: 1.5s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-out;
  transform-origin: center;
}

.floating-heart svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

.floating-heart[data-index="0"] {
  animation-name: floatingHeart1;
  animation-delay: 0s;
}

.floating-heart[data-index="1"] {
  animation-name: floatingHeart2;
  animation-delay: 0.1s;
}

.floating-heart[data-index="2"] {
  animation-name: floatingHeart3;
  animation-delay: 0.2s;
}

.floating-heart[data-index="3"] {
  animation-name: floatingHeart1;
  animation-delay: 0.3s;
}

.floating-heart[data-index="4"] {
  animation-name: floatingHeart2;
  animation-delay: 0.4s;
}

@keyframes floatingHeart1 {
  0% {
    opacity: 1;
    transform: translateY(0) translateX(0) scale(1);
  }
  50% {
    opacity: 0.8;
    transform: translateY(-60px) translateX(-20px) scale(1.3);
  }
  100% {
    opacity: 0;
    transform: translateY(-120px) translateX(-40px) scale(1.6);
  }
}

@keyframes floatingHeart2 {
  0% {
    opacity: 1;
    transform: translateY(0) translateX(0) scale(1);
  }
  50% {
    opacity: 0.8;
    transform: translateY(-50px) translateX(30px) scale(1.2);
  }
  100% {
    opacity: 0;
    transform: translateY(-100px) translateX(60px) scale(1.4);
  }
}

@keyframes floatingHeart3 {
  0% {
    opacity: 1;
    transform: translateY(0) translateX(0) scale(1);
  }
  50% {
    opacity: 0.8;
    transform: translateY(-70px) translateX(-10px) scale(1.4);
  }
  100% {
    opacity: 0;
    transform: translateY(-140px) translateX(-20px) scale(1.8);
  }
}

@keyframes floatingHeart {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(-50px) scale(1.5);
  }
}

.like-count-animate {
  animation: countBounce 0.3s ease;
}

@keyframes countBounce {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  .mobile-sidebar-header {
    margin-bottom: 12px;
  }

  .video-list-container .line-clamp-2 {
    line-height: 1.3;
    max-height: calc(1.3em * 2);
    padding-bottom: 2px;
    margin-bottom: 0.25rem;
  }
}

@media (max-width: 480px) {
  .video-list-container .line-clamp-2 {
    line-height: 1.2;
    max-height: calc(1.2em * 2);
    padding-bottom: 1px;
    margin-bottom: 0.25rem;
  }
}

/* タッチデバイス対応 */
@media (hover: none) {
  .card-hover:hover {
    transform: none;
    box-shadow: none;
  }

  .card-hover:active {
    transform: scale(0.98);
  }
}

/* 共有リンクの手動表示（URLボックス） */
#manual-copy-area #manual-copy-url {
  display: inline-block;
  padding: 0.25rem 0.5rem; /* 4px 8px */
  border: 1px solid var(--card-border);
  border-radius: 0.375rem; /* 6px */
  background: var(--primary-bg);
  color: var(--text-primary);
}