/* BlueFox Twitch Editor Stylesheet - Matching bluefox.golgautier.org design system */

:root {
  --blue-dark: #052552;
  --blue-primary: #052552;
  --blue-accent: #5d6c80;
  --blue-light: #E8EEF5;
  --orange-accent: #FFFFFF;
  --gold-accent: #CC8925;
  --gold-light: #FFF2E2;
  --bg-surface: #F4F6F9;
  --bg-card: #FFFFFF;
  --text-main: #052552;
  --text-muted: #5d6c80;
  --text-light: #7E8C9F;
  --border-color: #D6E0EC;
  --status-confirmed: #1EA97C;
  --status-confirmed-bg: #E4F8F0;
  --status-declined: #FF5757;
  --status-declined-bg: #FFE7E6;
  --status-pending: #CC8925;
  --status-pending-bg: #FFF2E2;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --shadow-sm: 0 2px 8px rgba(5, 37, 82, .05);
  --shadow-md: 0 4px 16px rgba(5, 37, 82, .08);
  --shadow-lg: 0 8px 30px rgba(5, 37, 82, .12);
}

/* Custom sleek scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: var(--bg-surface);
}
::-webkit-scrollbar-thumb {
  background: #b0bac7;
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--blue-accent);
}

/* Scrubber range styling */
#scrubber-wrapper:hover #scrubber-thumb {
  transform: translate(-50%, 0) scale(1.2);
}

/* Timeline segment markers */
.timeline-segment-marker {
  position: absolute;
  top: 0;
  bottom: 0;
  background-color: rgba(204, 137, 37, 0.7);
  border-left: 1px solid #CC8925;
  border-right: 1px solid #CC8925;
  pointer-events: none;
  border-radius: 2px;
  transition: opacity 0.2s ease;
}

.timeline-segment-marker:hover {
  background-color: rgba(204, 137, 37, 0.9);
}

/* Active sequence pulsing animation */
@keyframes pulse-ring {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 87, 87, 0.6);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(255, 87, 87, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 87, 87, 0);
  }
}

.pulsing-record {
  animation: pulse-ring 1.8s infinite cubic-bezier(0.4, 0, 0.6, 1);
}

/* Toast animation matching bluefox.golgautier.org */
@keyframes toastSlideDown {
  0% {
    opacity: 0;
    transform: translateY(-16px) scale(0.96);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.toast-enter {
  animation: toastSlideDown 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Ensure Twitch Embed iframe expands to 100% container dimensions */
#video-frame-container iframe,
#twitch-embed-container iframe {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
}

/* Fullscreen mode styling (Native HTML5 Fullscreen API or simulated .is-fullscreen) */
#video-frame-container:fullscreen,
#video-frame-container:-webkit-full-screen,
#video-frame-container.is-fullscreen {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100dvh !important;
  height: 100vh;
  max-width: 100vw !important;
  max-height: 100dvh !important;
  max-height: 100vh;
  z-index: 9999 !important;
  border-radius: 0 !important;
  border: none !important;
  background: #000000 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Hide the enter immersive button once in native/simulated fullscreen */
#video-frame-container:fullscreen #btn-landscape-enter-fullscreen,
#video-frame-container:-webkit-full-screen #btn-landscape-enter-fullscreen,
#video-frame-container.is-fullscreen #btn-landscape-enter-fullscreen {
  display: none !important;
}

/* Show floating overlay controls on top of the video when in fullscreen */
#video-frame-container:fullscreen #landscape-sidebar,
#video-frame-container:-webkit-full-screen #landscape-sidebar,
#video-frame-container.is-fullscreen #landscape-sidebar {
  display: flex !important;
  position: absolute !important;
  right: max(10px, env(safe-area-inset-right, 10px)) !important;
  top: max(8px, env(safe-area-inset-top, 8px)) !important;
  bottom: max(8px, env(safe-area-inset-bottom, 8px)) !important;
  width: 78px !important;
  z-index: 50 !important;
}

#video-frame-container:fullscreen #landscape-time-pill,
#video-frame-container:-webkit-full-screen #landscape-time-pill,
#video-frame-container.is-fullscreen #landscape-time-pill {
  display: flex !important;
  position: absolute !important;
  left: max(10px, env(safe-area-inset-left, 10px)) !important;
  top: max(8px, env(safe-area-inset-top, 8px)) !important;
  z-index: 50 !important;
}

#video-frame-container:fullscreen #btn-overlay-exit-fullscreen,
#video-frame-container:-webkit-full-screen #btn-overlay-exit-fullscreen,
#video-frame-container.is-fullscreen #btn-overlay-exit-fullscreen {
  display: flex !important;
  position: absolute !important;
  right: calc(max(10px, env(safe-area-inset-right, 10px)) + 86px) !important;
  top: max(8px, env(safe-area-inset-top, 8px)) !important;
  z-index: 50 !important;
}

/* Mobile landscape orientation mode (smartphones held horizontally) */
@media (orientation: landscape) and (max-height: 720px) and (max-width: 1100px) {
  body.editor-view-active {
    overscroll-behavior: none !important;
  }

  body.editor-view-active header,
  body.editor-view-active footer,
  body.editor-view-active #view-vod-list,
  body.editor-view-active #editor-top-bar,
  body.editor-view-active #custom-controls,
  body.editor-view-active #cutter-panel,
  body.editor-view-active #editor-sequences-col {
    display: none !important;
  }

  body.editor-view-active main {
    padding: 0 !important;
    margin: 0 !important;
    max-width: 100vw !important;
    width: 100vw !important;
    height: 100dvh !important;
    height: 100vh;
  }

  body.editor-view-active #view-editor {
    position: fixed !important;
    inset: 0 !important;
    z-index: 9999 !important;
    width: 100vw !important;
    height: 100dvh !important;
    height: 100vh;
    margin: 0 !important;
    padding: 0 !important;
    background: #000000 !important;
    overflow: hidden !important;
    display: block !important;
  }

  body.editor-view-active #editor-main-grid {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body.editor-view-active #editor-player-col {
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
  }

  body.editor-view-active #video-frame-container {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    height: 100vh;
    max-width: 100vw !important;
    max-height: 100dvh !important;
    max-height: 100vh;
    aspect-ratio: auto !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
    background: #000000 !important;
    z-index: 100 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Overlay controls floating on top of the video on the right */
  body.editor-view-active #landscape-sidebar {
    display: flex !important;
    position: absolute !important;
    right: max(10px, env(safe-area-inset-right, 10px)) !important;
    top: max(8px, env(safe-area-inset-top, 8px)) !important;
    bottom: max(8px, env(safe-area-inset-bottom, 8px)) !important;
    width: 78px !important;
    z-index: 50 !important;
  }

  /* Floating time pill on top of the video on top-left */
  body.editor-view-active #landscape-time-pill {
    display: flex !important;
    position: absolute !important;
    left: max(10px, env(safe-area-inset-left, 10px)) !important;
    top: max(8px, env(safe-area-inset-top, 8px)) !important;
    z-index: 50 !important;
  }

  /* Prompt button to enter true immersive fullscreen when browser tabs/address bar are still taking space */
  body.editor-view-active:not(.is-fullscreen-mode) #btn-landscape-enter-fullscreen {
    display: flex !important;
  }

  /* Exit fullscreen button on top of the video */
  body.editor-view-active #btn-overlay-exit-fullscreen {
    display: flex !important;
    position: absolute !important;
    right: calc(max(10px, env(safe-area-inset-right, 10px)) + 86px) !important;
    top: max(8px, env(safe-area-inset-top, 8px)) !important;
    z-index: 50 !important;
  }
}