/* App Promotion Toast Customization */
#app-promotion-toast .progress {
  background-color: rgba(0, 0, 0, 0.1);
  overflow: visible;
}

#app-promotion-toast .progress-bar {
  background: linear-gradient(
    90deg,
    var(--color-primary),
    var(--color-secondary)
  );
  transition: none; /* アニメーションを無効にして手動制御 */
  border-radius: 0;
}

/* タイマーバーのカスタマイズ */
#app-promotion-toast .timer-bar {
  background: linear-gradient(
    90deg,
    var(--color-primary),
    var(--color-secondary)
  );
  transition: width 0.1s ease-out;
  border-radius: inherit;
}
#app-promotion-toast {
  border: none;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  border-radius: 12px;
}

#app-promotion-toast .toast-body {
  padding: 1rem;
}

#app-promotion-toast .btn-close {
  opacity: 0.7;
  transition: opacity 0.2s;
}

#app-promotion-toast .btn-close:hover {
  opacity: 1;
}

#app-promotion-toast .btn-primary {
  background: linear-gradient(135deg, #007aff, #0056cc);
  border: none;
  border-radius: 8px;
  font-weight: 500;
  transition: all 0.2s;
}

#app-promotion-toast .btn-primary:hover {
  background: linear-gradient(135deg, #0056cc, #003d99);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 122, 255, 0.3);
}

/* タイマープログレスバーのカスタマイズ */
#app-promotion-toast .progress {
  background-color: rgba(0, 0, 0, 0.1);
  overflow: visible;
}

/* In-App Browser Toast Styles */
#in-app-browser-toast {
  z-index: 9999;
  max-width: 320px !important;
  width: 320px !important;
}

/* DaisyUIのtoastクラスを上書き */
.toast.toast-top.toast-end,
.toast.toast-bottom.toast-end {
  max-width: 320px !important;
  width: 320px !important;
}

#in-app-browser-toast .custom-alert {
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  margin-right: 20px;
  position: relative;
  padding: 1rem;
  border-radius: 0.75rem;
  border: none;
  color: white;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  overflow: visible;
}

[data-theme="dark"] #in-app-browser-toast .alert {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Animation for toast entrance */
#in-app-browser-toast {
  animation: slideInFromTop 0.3s ease-out;
}

#in-app-browser-toast[class*="toast-bottom"] {
  animation: slideInFromBottom 0.3s ease-out;
}

@keyframes slideInFromTop {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInFromBottom {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsive adjustments */
@media (max-width: 768px) {
  #in-app-browser-toast {
    max-width: 320px !important;
    width: 320px !important;
    margin: 0 -0.5rem;
  }
}

/* 三角形の吹き出しスタイル */
#in-app-browser-toast .bubble-arrow {
  position: absolute;
  width: 0;
  height: 0;
  border: 12px solid transparent;
}

/* 右上向きの三角形 - ハンバーガーメニューに向けて */
#in-app-browser-toast .bubble-arrow-top-right {
  top: -12px;
  right: 10px;
  border-bottom-color: inherit;
  border-top: none;
  transform: translateX(0);
}

/* 右下向きの三角形 - Xのボタンに向けて */
#in-app-browser-toast .bubble-arrow-bottom-right {
  bottom: -12px;
  right: 10px;
  border-top-color: inherit;
  border-bottom: none;
  transform: translateX(0);
}

/* 各WebViewの公式感のある色 */
#in-app-browser-toast .custom-alert.alert-instagram {
  background: linear-gradient(
    45deg,
    #f09433 0%,
    #e6683c 25%,
    #dc2743 50%,
    #cc2366 75%,
    #bc1888 100%
  );
}

#in-app-browser-toast .custom-alert.alert-tiktok {
  background: linear-gradient(
    45deg,
    #25f4ee 0%,
    #1a1a1a 40%,
    #0a0a0a 70%,
    #fe2c55 100%
  );
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15);
}

#in-app-browser-toast .custom-alert.alert-facebook {
  background: #1877f2;
}

#in-app-browser-toast .custom-alert.alert-line {
  background: #00b900;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

#in-app-browser-toast .custom-alert.alert-x {
  background: #000000;
}

/* 色別の三角形調整 - 各WebViewの色に合わせる */
#in-app-browser-toast .custom-alert.alert-instagram .bubble-arrow-top-right {
  border-bottom-color: #bc1888 !important;
}

#in-app-browser-toast .custom-alert.alert-instagram .bubble-arrow-bottom-right {
  border-top-color: #bc1888 !important;
}

#in-app-browser-toast .custom-alert.alert-tiktok .bubble-arrow-top-right {
  border-bottom-color: #fe2c55 !important;
}

#in-app-browser-toast .custom-alert.alert-tiktok .bubble-arrow-bottom-right {
  border-top-color: #fe2c55 !important;
}

#in-app-browser-toast .custom-alert.alert-facebook .bubble-arrow-top-right {
  border-bottom-color: #1877f2 !important;
}

#in-app-browser-toast .custom-alert.alert-facebook .bubble-arrow-bottom-right {
  border-top-color: #1877f2 !important;
}

#in-app-browser-toast .custom-alert.alert-line .bubble-arrow-top-right {
  border-bottom-color: #00b900 !important;
}

#in-app-browser-toast .custom-alert.alert-line .bubble-arrow-bottom-right {
  border-top-color: #00b900 !important;
}

#in-app-browser-toast .custom-alert.alert-x .bubble-arrow-top-right {
  border-bottom-color: #000000 !important;
}

#in-app-browser-toast .custom-alert.alert-x .bubble-arrow-bottom-right {
  border-top-color: #000000 !important;
}

/* インラインカードのスタイル調整 */
#in-app-browser-toast .inline-flex {
  display: inline-flex;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(4px);
  border-radius: 0.5rem;
  padding: 0.25rem 0.5rem;
  margin: 0 0.25rem;
}

[data-theme="dark"] #in-app-browser-toast .inline-flex {
  background-color: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

/* アイコンの色を白色に統一 */
#in-app-browser-toast .text-primary {
  color: white !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Radial Progress Floating Animation */
@keyframes floating {
  0%,
  100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-3px);
  }
}

.radial-progress-floating {
  animation: floating 1s ease-in-out infinite;
}

.radial-progress-floating:hover {
  animation-play-state: paused;
  transform: scale(1.1) translateY(-3px);
}