/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability. 
 *
 *= require photo_viewer
 *= require components/mobile_nav
 *= require components/topbar
 *= require components/render_metrics_overlay
 */

/* Keep the Videos sidebar badge in sync with the photo profile's Make video
 * action without depending on a newly generated Tailwind utility bundle. */
.sidebar-video-new-badge {
  background: linear-gradient(90deg, #9333ea 0%, #db2777 52%, #f59e0b 100%);
  color: #fff;
}

.sidebar-video-new-badge:hover {
  background: linear-gradient(90deg, #7e22ce 0%, #be185d 52%, #d97706 100%);
}

/* Store options matches the neutral gray Download/Email modal. This stylesheet
 * loads after Tailwind, and the scoped selectors keep utility/theme rules from
 * changing the modal when it is opened from either the editor or photo list. */
.photo-store-options-overlay {
  background-color: rgba(0, 0, 0, 0.5) !important;
  padding: 1rem;
  overflow-y: auto;
}

.photo-store-options-overlay:not(.hidden) {
  display: flex;
  align-items: center;
  justify-content: center;
}

.photo-store-options-modal {
  position: relative;
  width: min(100%, 36rem) !important;
  margin: auto !important;
  overflow: visible;
  background: #1f1f1f !important;
  border-color: #404040 !important;
  color: #e5e7eb;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55) !important;
}

.photo-store-options-title {
  color: #f9fafb !important;
}

.photo-store-options-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  display: inline-flex;
  width: 2rem;
  height: 2rem;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #d1d5db;
  cursor: pointer;
  font-size: 1.25rem;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.photo-store-options-close:hover {
  background: #383838;
  color: #ffffff;
}

.photo-store-options-close:focus-visible {
  outline: 2px solid #60a5fa;
  outline-offset: 2px;
}

.photo-store-options-modal .text-gray-300,
.photo-store-options-modal .text-gray-400 {
  color: #d1d5db !important;
}

.photo-store-options-modal .text-gray-500 {
  color: #9ca3af !important;
}

.photo-store-options-modal .bg-gray-700 {
  background-color: #2d2d2d !important;
}

.photo-store-options-modal .border-gray-600 {
  border-color: #404040 !important;
}

.photo-store-options-modal .hover\:bg-gray-600:hover {
  background-color: #383838 !important;
}

.photo-store-options-modal .focus\:ring-blue-500:focus,
.photo-store-options-modal .focus\:ring-gray-500:focus {
  --tw-ring-color: rgba(59, 130, 246, 0.3) !important;
}

.photo-store-options-qr {
  background-color: #ffffff !important;
}

.photo-store-options-link-card {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1rem;
  border: 1px solid #404040;
  border-radius: 0.5rem;
  background: #292929;
}

.photo-store-options-qr-container {
  flex: 0 0 auto;
}

.photo-store-options-link-details {
  flex: 1 1 auto;
  min-width: 0;
}

.photo-store-options-url {
  box-sizing: border-box;
}

.photo-store-options-link-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.photo-store-options-link-actions .photo-store-options-button {
  flex: 1 1 0;
}

.photo-store-options-button--primary {
  background-color: #3b82f6 !important;
  border-color: #3b82f6 !important;
}

.photo-store-options-button--primary:hover {
  background-color: #2563eb !important;
  border-color: #2563eb !important;
}

.photo-store-options-button--secondary {
  background-color: #2d2d2d !important;
  border-color: #404040 !important;
  color: #d1d5db !important;
}

.photo-store-options-button--secondary:hover {
  background-color: #383838 !important;
}

@media (max-width: 640px) {
  .photo-store-options-modal {
    padding: 1.5rem !important;
  }

  .photo-store-options-link-card {
    flex-direction: column;
    align-items: stretch;
  }

  .photo-store-options-qr-container {
    align-self: center;
  }
}

.art-template-design-banner {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  border: 1px solid transparent;
  border-radius: 0.5rem;
  background:
    linear-gradient(#ffffff, #ffffff) padding-box,
    linear-gradient(90deg, #a855f7 0%, #ec4899 52%, #fbbf24 100%) border-box;
  box-shadow: 0 10px 24px rgba(168, 85, 247, 0.08), 0 0 18px rgba(236, 72, 153, 0.08);
}

.art-template-design-banner__icon {
  background:
    linear-gradient(#ffffff, #ffffff) padding-box,
    linear-gradient(90deg, #a855f7 0%, #ec4899 52%, #fbbf24 100%) border-box;
  border: 1px solid transparent;
  color: #db2777;
}

.art-template-design-banner__cta {
  border: 1px solid transparent;
  background:
    linear-gradient(90deg, #a855f7 0%, #ec4899 52%, #fbbf24 100%) padding-box,
    linear-gradient(90deg, #a855f7 0%, #ec4899 52%, #fbbf24 100%) border-box;
  box-shadow: 0 0 18px rgba(236, 72, 153, 0.24);
}

.art-template-design-banner__cta:hover {
  background:
    linear-gradient(90deg, #9333ea 0%, #db2777 52%, #f59e0b 100%) padding-box,
    linear-gradient(90deg, #9333ea 0%, #db2777 52%, #f59e0b 100%) border-box;
}

/* Compact markdown styling for the single-update announcement modal. */
.whats-new-modal-banner {
  aspect-ratio: 2 / 1;
  overflow: hidden;
}

.whats-new-modal-banner img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.whats-new-modal-close {
  background: rgba(17, 24, 39, 0.7);
}

.whats-new-modal-close:hover {
  background: rgba(17, 24, 39, 0.9);
}

.whats-new-modal-description > :first-child { margin-top: 0; }
.whats-new-modal-description > :last-child { margin-bottom: 0; }

.whats-new-modal-description p,
.whats-new-modal-description ul,
.whats-new-modal-description ol,
.whats-new-modal-description blockquote {
  margin-bottom: 0.75rem;
}

.whats-new-modal-description ul,
.whats-new-modal-description ol {
  padding-left: 1.25rem;
}

.whats-new-modal-description ul { list-style: disc; }
.whats-new-modal-description ol { list-style: decimal; }
.whats-new-modal-description a { color: #2563eb; }
.whats-new-modal-description a:hover { text-decoration: underline; }
.whats-new-modal-description strong { color: #111827; font-weight: 600; }
.whats-new-modal-description img { max-width: 100%; height: auto; border-radius: 0.5rem; }

/* Public offer landing page: this explicit background keeps the hero readable
 * even when a Tailwind build does not contain the dynamically added slate
 * utility classes. */
.signup-offer-hero {
  width: calc(100% + 2rem);
  min-height: calc(100vh - 5rem);
  margin: -1rem;
  padding-right: 1rem;
  padding-left: 1rem;
  background:
    radial-gradient(circle at 50% -10%, rgba(99, 102, 241, 0.52), transparent 42rem),
    linear-gradient(135deg, #0f172a 0%, #1e1b4b 48%, #0f172a 100%);
}

.signup-offer-hero__eyebrow {
  color: #bfdbfe;
}

.signup-offer-hero__title {
  color: #ffffff;
}

.signup-offer-hero__subtitle {
  color: #dbeafe;
}

.signup-offer-plan-header {
  border-bottom: 1px solid #e5e7eb;
  background: #ffffff;
}

@media (min-width: 640px) {
  .signup-offer-hero {
    margin: -1rem;
    padding-right: 1rem;
    padding-left: 1rem;
  }
}

@media (min-width: 640px) {
  .art-template-design-banner {
    align-items: center;
    flex-direction: row;
    justify-content: space-between;
  }
}

/* Base Image Comparison Styles */
.image-comparison {
  max-width: 700px;
  margin: 20px auto;
  border-radius: 20px;
  overflow: hidden;
}

.image-comparison img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left;
}

.image-comparison .images-container {
  position: relative;
  display: block; /* Changed from flex to block for single canvas approach */
  background-color: black;
}

/* Canvas styling for composite image */
.image-comparison canvas#composite-image {
  width: 100%;
  height: 100%;
  display: block;
}

/* Hide the before-image since it's now handled in WebGL */
.image-comparison .images-container .before-image {
  display: none;
}

/* Keep after-image styling for backward compatibility */
.image-comparison .after-image {
  width: 100%;
  height: 100%;
}

.image-comparison .slider {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: ew-resize;
  z-index: 20;
}

.image-comparison .slider-line {
  position: absolute;
  height: 100%;
  width: 4px;
  background: #fff;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  z-index: 10;
}

.image-comparison .slider-icon {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 20px;
  height: 20px;
  color: #fff;
  background-color: white;
  border-radius: 50%;
  transform: translate(-50%, -50%) rotateZ(90deg);
  z-index: 15;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Fullscreen Overlay Styles */
.overflow-hidden {
  overflow: hidden;
}

/* Fullscreen Container Styles */
[data-photo-settings-target="fullScreenOverlay"] {
  z-index: 9999;
  background-color: rgba(0, 0, 0, 0.9);
}

[data-photo-settings-target="fullScreenContainer"] {
  display: flex;
  justify-content: center;
  align-items: center;
}

[data-photo-settings-target="fullScreenContainer"] .images-container {
  position: relative;
  display: block; /* Changed from flex to block */
  max-height: 85vh;
  margin: 0 auto;
  background-color: black;
  border-radius: 12px;
  overflow: hidden;
}

/* Fullscreen Image Styles */
[data-photo-settings-target="fullScreenContainer"] .after-image,
[data-photo-settings-target="fullScreenContainer"] canvas#composite-image-fullscreen {
  max-height: 85vh;
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* Hide before image in fullscreen mode since it's handled in WebGL */
[data-photo-settings-target="fullScreenContainer"] .before-image {
  display: none;
}

/* Fullscreen Slider Styles */
[data-photo-settings-target="fullScreenContainer"] .slider {
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  z-index: 20;
  opacity: 0;
  cursor: ew-resize;
}

[data-photo-settings-target="fullScreenContainer"] .slider-line {
  position: absolute;
  height: 100%;
  width: 4px;
  background-color: white;
  left: 50%;
  top: 0;
  z-index: 10;
}

[data-photo-settings-target="fullScreenContainer"] .slider-icon {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 20px;
  height: 20px;
  background-color: white;
  border-radius: 50%;
  color: black;
  z-index: 15;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translate(-50%, -50%) rotateZ(90deg);
}

/* Canvas dimensions for fullscreen */
[data-photo-settings-target="fullScreenContainer"] canvas.after-image,
[data-photo-settings-target="fullScreenContainer"] canvas#composite-image,
[data-photo-settings-target="fullScreenContainer"] canvas#composite-image-fullscreen {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Fullscreen Close Button */
[data-photo-settings-target="fullScreenOverlay"] button {
  color: white;
  opacity: 0.8;
  transition: opacity 0.2s ease;
}

[data-photo-settings-target="fullScreenOverlay"] button:hover {
  opacity: 1;
}

/* Improve full screen button appearance */
[data-photo-settings-target="fullScreenButton"] {
  position: relative;
  z-index: 10;
  margin-bottom: 10px;
  width: auto;
  padding: 8px 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Container for the fullscreen button */
.image-comparison .mt-4 {
  margin-top: 1rem;
  width: 100%;
  display: flex;
  justify-content: center;
  position: relative;
  z-index: 5;
}

.flash-message {
  position: fixed;
  top: 1rem;
  right: 1rem;
  padding: 1rem;
  border-radius: 0.5rem;
  z-index: 50;
}

.flash-message.success {
  background-color: #def7ec;
  color: #03543f;
}

@keyframes fade-in-down {
  0% {
    opacity: 0;
    transform: translateY(-10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in-down {
  animation: fade-in-down 0.5s ease-out;
}

/* ===================== */
/* Temperature Slider UI */
/* ===================== */
.temperature-slider {
  /* Remove default background if any */
  background: transparent !important;
  /* For Safari, Chrome, Edge (Webkit) */
}
.temperature-slider::-webkit-slider-runnable-track {
  height: 0.5rem;
  border-radius: 0.5rem;
  background: linear-gradient(to right, #2196f3 0%, #ffeb3b 100%);
}
.temperature-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: #2196f3;
  border: 2px solid #fff;
  box-shadow: 0 0 2px rgba(0,0,0,0.2);
  cursor: pointer;
  margin-top: -0.25rem; /* Center thumb on track */
}
.temperature-slider:focus::-webkit-slider-thumb {
  outline: 2px solid #2196f3;
  outline-offset: 2px;
}

/* For Firefox */
.temperature-slider::-moz-range-track {
  height: 0.5rem;
  border-radius: 0.5rem;
  background: linear-gradient(to right, #2196f3 0%, #ffeb3b 100%);
}
.temperature-slider::-moz-range-thumb {
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: #2196f3;
  border: 2px solid #fff;
  box-shadow: 0 0 2px rgba(0,0,0,0.2);
  cursor: pointer;
}
.temperature-slider:focus::-moz-range-thumb {
  outline: 2px solid #2196f3;
  outline-offset: 2px;
}

/* For IE/Edge */
.temperature-slider::-ms-fill-lower {
  background: #2196f3;
  border-radius: 0.5rem 0 0 0.5rem;
}
.temperature-slider::-ms-fill-upper {
  background: #ffeb3b;
  border-radius: 0 0.5rem 0.5rem 0;
}
.temperature-slider::-ms-thumb {
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: #2196f3;
  border: 2px solid #fff;
  box-shadow: 0 0 2px rgba(0,0,0,0.2);
  cursor: pointer;
}
.temperature-slider:focus::-ms-thumb {
  outline: 2px solid #2196f3;
  outline-offset: 2px;
}
.temperature-slider::-ms-tooltip {
  display: none;
}

/* Remove outline for all browsers except on focus */
.temperature-slider:focus {
  outline: none;
}

/* Hide the outline for the range input itself */
.temperature-slider::-webkit-input-placeholder { color: transparent; }
.temperature-slider::-moz-placeholder { color: transparent; }
.temperature-slider:-ms-input-placeholder { color: transparent; }
.temperature-slider::placeholder { color: transparent; }

/* ===================== */
/* Brown Correction Slider UI */
/* ===================== */
.hue-slider {
  /* Remove default background if any */
  background: transparent !important;
}
.hue-slider::-webkit-slider-runnable-track {
  height: 0.5rem;
  border-radius: 0.5rem;
  background: linear-gradient(to right, #800303 0%, #bd7631 100%);
}
.hue-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: #9b4a1a;
  border: 2px solid #fff;
  box-shadow: 0 0 2px rgba(0,0,0,0.2);
  cursor: pointer;
  margin-top: -0.25rem; /* Center thumb on track */
}
.hue-slider:focus::-webkit-slider-thumb {
  outline: 2px solid #9b4a1a;
  outline-offset: 2px;
}

/* For Firefox */
.hue-slider::-moz-range-track {
  height: 0.5rem;
  border-radius: 0.5rem;
  background: linear-gradient(to right, #800303 0%, #bd7631 100%);
}
.hue-slider::-moz-range-thumb {
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: #9b4a1a;
  border: 2px solid #fff;
  box-shadow: 0 0 2px rgba(0,0,0,0.2);
  cursor: pointer;
}
.hue-slider:focus::-moz-range-thumb {
  outline: 2px solid #9b4a1a;
  outline-offset: 2px;
}

/* For IE/Edge */
.hue-slider::-ms-track {
  height: 0.5rem;
  border-radius: 0.5rem;
  background: linear-gradient(to right, #800303 0%, #bd7631 100%);
}
.hue-slider::-ms-thumb {
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: #9b4a1a;
  border: 2px solid #fff;
  box-shadow: 0 0 2px rgba(0,0,0,0.2);
  cursor: pointer;
}
.hue-slider:focus::-ms-thumb {
  outline: 2px solid #9b4a1a;
  outline-offset: 2px;
}
.hue-slider::-ms-tooltip {
  display: none;
}

/* Remove outline for all browsers except on focus */
.hue-slider:focus {
  outline: none;
}

/* ===================== */
/* Green Tint Slider UI */
/* ===================== */
.green-tint-slider {
  background: transparent !important;
}
.green-tint-slider::-webkit-slider-runnable-track {
  height: 0.5rem;
  border-radius: 0.5rem;
  background: linear-gradient(to right, #4a5568 0%, #22c55e 100%);
}
.green-tint-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: #22c55e;
  border: 2px solid #fff;
  box-shadow: 0 0 2px rgba(0,0,0,0.2);
  cursor: pointer;
  margin-top: -0.25rem;
}
.green-tint-slider:focus::-webkit-slider-thumb {
  outline: 2px solid #22c55e;
  outline-offset: 2px;
}
.green-tint-slider::-moz-range-track {
  height: 0.5rem;
  border-radius: 0.5rem;
  background: linear-gradient(to right, #4a5568 0%, #22c55e 100%);
}
.green-tint-slider::-moz-range-thumb {
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: #22c55e;
  border: 2px solid #fff;
  box-shadow: 0 0 2px rgba(0,0,0,0.2);
  cursor: pointer;
}
.green-tint-slider:focus::-moz-range-thumb {
  outline: 2px solid #22c55e;
  outline-offset: 2px;
}
.green-tint-slider::-ms-fill-lower {
  background: #4a5568;
  border-radius: 0.5rem 0 0 0.5rem;
}
.green-tint-slider::-ms-fill-upper {
  background: #22c55e;
  border-radius: 0 0.5rem 0.5rem 0;
}
.green-tint-slider::-ms-thumb {
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: #22c55e;
  border: 2px solid #fff;
  box-shadow: 0 0 2px rgba(0,0,0,0.2);
  cursor: pointer;
}
.green-tint-slider:focus::-ms-thumb {
  outline: 2px solid #22c55e;
  outline-offset: 2px;
}
.green-tint-slider::-ms-tooltip {
  display: none;
}
.green-tint-slider:focus {
  outline: none;
}
.green-tint-slider::-webkit-input-placeholder { color: transparent; }
.green-tint-slider::-moz-placeholder { color: transparent; }
.green-tint-slider:-ms-input-placeholder { color: transparent; }
.green-tint-slider::placeholder { color: transparent; }

/* ===================== */
/* Saturation Slider UI (gray = desaturated, right = vivid color) */
/* ===================== */
.saturation-slider {
  background: transparent !important;
}
.saturation-slider::-webkit-slider-runnable-track {
  height: 0.5rem;
  border-radius: 0.5rem;
  background: linear-gradient(to right, #9ca3af 0%, #9ca3af 30%, #eab308 65%, #ef4444 100%);
}
.saturation-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: #6b7280;
  border: 2px solid #fff;
  box-shadow: 0 0 2px rgba(0,0,0,0.2);
  cursor: pointer;
  margin-top: -0.25rem;
}
.saturation-slider:focus::-webkit-slider-thumb {
  outline: 2px solid #6b7280;
  outline-offset: 2px;
}
.saturation-slider::-moz-range-track {
  height: 0.5rem;
  border-radius: 0.5rem;
  background: linear-gradient(to right, #9ca3af 0%, #9ca3af 30%, #eab308 65%, #ef4444 100%);
}
.saturation-slider::-moz-range-thumb {
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: #6b7280;
  border: 2px solid #fff;
  box-shadow: 0 0 2px rgba(0,0,0,0.2);
  cursor: pointer;
}
.saturation-slider:focus::-moz-range-thumb {
  outline: 2px solid #6b7280;
  outline-offset: 2px;
}
.saturation-slider::-ms-fill-lower {
  background: #9ca3af;
  border-radius: 0.5rem 0 0 0.5rem;
}
.saturation-slider::-ms-fill-upper {
  background: #ef4444;
  border-radius: 0 0.5rem 0.5rem 0;
}
.saturation-slider::-ms-thumb {
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: #6b7280;
  border: 2px solid #fff;
  box-shadow: 0 0 2px rgba(0,0,0,0.2);
  cursor: pointer;
}
.saturation-slider:focus::-ms-thumb {
  outline: 2px solid #6b7280;
  outline-offset: 2px;
}
.saturation-slider::-ms-tooltip {
  display: none;
}
.saturation-slider:focus {
  outline: none;
}
.saturation-slider::-webkit-input-placeholder { color: transparent; }
.saturation-slider::-moz-placeholder { color: transparent; }
.saturation-slider:-ms-input-placeholder { color: transparent; }
.saturation-slider::placeholder { color: transparent; }

/* ===================== */
/* Filename Pattern Tag Builder */
/* ===================== */

/* Selected filename tags */
.filename-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.375rem 0.5rem;
  background-color: #3b82f6;
  color: white;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: grab;
  user-select: none;
  transition: all 0.15s ease;
}

.filename-tag:hover {
  background-color: #2563eb;
}

.filename-tag.dragging {
  opacity: 0.5;
  cursor: grabbing;
}

.filename-tag.drop-before::before {
  content: '';
  position: absolute;
  left: -4px;
  top: 0;
  bottom: 0;
  width: 2px;
  background-color: #3b82f6;
}

.filename-tag.drop-after::after {
  content: '';
  position: absolute;
  right: -4px;
  top: 0;
  bottom: 0;
  width: 2px;
  background-color: #3b82f6;
}

/* Fixed ID tag (non-removable) */
.filename-tag-fixed {
  background-color: #6b7280;
  cursor: default;
}

.filename-tag-fixed:hover {
  background-color: #6b7280;
}

/* Tag label */
.filename-tag .tag-label {
  margin-right: 0.25rem;
}

/* Remove button in tag */
.filename-tag .tag-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.125rem;
  margin-left: 0.25rem;
  background: transparent;
  border: none;
  border-radius: 0.25rem;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.8);
  transition: all 0.15s ease;
}

.filename-tag .tag-remove:hover {
  background-color: rgba(255, 255, 255, 0.2);
  color: white;
}

/* Available token buttons */
.token-button {
  display: inline-flex;
  align-items: center;
  padding: 0.375rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 500;
  border-radius: 0.375rem;
  border: 1px solid;
  cursor: pointer;
  transition: all 0.15s ease;
}

.token-button-available {
  background-color: #f0fdf4;
  color: #15803d;
  border-color: #86efac;
}

.token-button-available:hover {
  background-color: #dcfce7;
  border-color: #22c55e;
}

.token-button-disabled {
  background-color: #f3f4f6;
  color: #9ca3af;
  border-color: #d1d5db;
  cursor: not-allowed;
  opacity: 0.6;
}

/* ===================== */
/* Date Range Picker UI */
/* ===================== */
.daterangepicker {
  border: 1px solid #e5e7eb !important;
  border-radius: 0.75rem !important;
  box-shadow: 0 10px 30px rgba(17, 24, 39, 0.12) !important;
  padding: 0.5rem !important;
  font-family: inherit !important;
}

.daterangepicker .ranges ul {
  width: 180px;
  max-height: none;
  overflow-y: visible;
}

.daterangepicker .ranges li {
  border-radius: 0.5rem !important;
  color: #374151 !important;
  font-size: 0.875rem !important;
  padding: 0.5rem 0.625rem !important;
  margin-bottom: 0.125rem;
}

.daterangepicker .ranges li:hover {
  background-color: #f3f4f6 !important;
  color: #111827 !important;
}

.daterangepicker .ranges li.active {
  background-color: #eff6ff !important;
  color: #1d4ed8 !important;
}

.daterangepicker td.in-range {
  background-color: #eff6ff !important;
  color: #1f2937 !important;
}

.daterangepicker td.active,
.daterangepicker td.active:hover {
  background-color: #2563eb !important;
  color: #ffffff !important;
}

.daterangepicker td.available:hover,
.daterangepicker th.available:hover {
  background-color: #f3f4f6 !important;
  color: #111827 !important;
}

.daterangepicker .calendar-table {
  border: 1px solid #e5e7eb !important;
  border-radius: 0.5rem !important;
}

.daterangepicker .calendar-table th,
.daterangepicker .calendar-table td {
  font-size: 0.8125rem;
}

.daterangepicker .drp-buttons {
  border-top: 1px solid #e5e7eb !important;
  padding-top: 0.625rem !important;
}

.daterangepicker .drp-buttons .btn {
  border-radius: 0.5rem !important;
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  padding: 0.375rem 0.75rem !important;
}

.daterangepicker .drp-buttons .btn-primary {
  background-color: #2563eb !important;
  border-color: #2563eb !important;
  color: #ffffff !important;
}

.daterangepicker .drp-buttons .btn-default {
  background-color: #f9fafb !important;
  border-color: #d1d5db !important;
  color: #374151 !important;
}

.daterangepicker.drp-hide-ranges .ranges {
  display: none !important;
}

.daterangepicker.drp-hide-ranges .drp-calendar.left,
.daterangepicker.drp-hide-ranges .drp-calendar.right {
  display: inline-block !important;
  float: none !important;
  clear: none !important;
  vertical-align: top;
  border: 0 !important;
}

.daterangepicker.drp-hide-ranges {
  width: fit-content !important;
  min-width: 0 !important;
  white-space: nowrap;
  position: fixed !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  right: auto !important;
  z-index: 1000 !important;
}

.daterangepicker.drp-hide-ranges .drp-calendar.left {
  margin-right: 0.5rem;
}

.daterangepicker.drp-hide-ranges .drp-calendar.right {
  margin-left: 0 !important;
}

.daterangepicker.drp-presets-only .ranges {
  display: block !important;
}

.daterangepicker.drp-presets-only .drp-calendar.left,
.daterangepicker.drp-presets-only .drp-calendar.right {
  display: none !important;
}

.daterangepicker.drp-presets-only .drp-buttons {
  display: none !important;
}

/* Feature Requests — markdown content styling */
.fr-body p { margin: 0.5em 0; line-height: 1.55; }
.fr-body p:first-child { margin-top: 0; }
.fr-body p:last-child { margin-bottom: 0; }
.fr-body strong { font-weight: 600; }
.fr-body em { font-style: italic; }
.fr-body a { color: #1d4ed8; text-decoration: underline; }
.fr-body a:hover { color: #1e40af; }
.fr-body ul, .fr-body ol { padding-left: 1.4em; margin: 0.5em 0; }
.fr-body ul { list-style: disc; }
.fr-body ol { list-style: decimal; }
.fr-body li { margin: 0.15em 0; }
.fr-body code { background: rgba(0,0,0,0.05); padding: 0.1em 0.35em; border-radius: 4px; font-size: 0.9em; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.fr-body pre { background: rgba(0,0,0,0.05); padding: 0.75em 1em; border-radius: 6px; overflow-x: auto; font-size: 0.85em; }
.fr-body pre code { background: transparent; padding: 0; }
.fr-body blockquote { border-left: 3px solid #e5e7eb; padding-left: 0.85em; color: #6b7280; margin: 0.5em 0; }
.fr-body h1, .fr-body h2, .fr-body h3, .fr-body h4 { font-weight: 600; margin: 0.6em 0 0.3em; line-height: 1.3; }
.fr-body h1 { font-size: 1.25em; }
.fr-body h2 { font-size: 1.15em; }
.fr-body h3 { font-size: 1.05em; }
.fr-body hr { border: 0; border-top: 1px solid #e5e7eb; margin: 1em 0; }
.fr-body img { max-width: 100%; height: auto; border-radius: 6px; margin: 0.5em 0; }

/* Lift the whole navigation stacking context while search is open, so its
 * transformed container clears page toolbars without changing closed-search dialogs. */
.studio-navigation-header { position: relative; }
.studio-navigation-header:has(.studio-search-panel:not([hidden])) { z-index: 80; }

/* Studio search uses scoped CSS so focus and sizing do not depend on utility generation. */
.studio-search { position: relative; flex: 0 1 360px; min-width: 100px; margin: 0 24px; text-align: left; }
.studio-search-field { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 13px; border: 1px solid #e2e5eb; border-radius: 10px; background: #f8f9fb; transition: border-color .15s, box-shadow .15s, background .15s; }
.studio-search-field:focus-within { background: #fff; border-color: #60a5fa; box-shadow: 0 0 0 3px #2563eb14; }
.studio-search .studio-search-input, .search-page .search-page-input { appearance: none; -webkit-appearance: none; border: 0 !important; outline: none !important; box-shadow: none !important; background: transparent; padding: 0; margin: 0; min-width: 0; width: 100%; height: 100%; font-size: 14px; color: #1f2937; border-radius: 0; }
.studio-search-input::placeholder { color: #9198a6; }
.studio-search-magnifier { color: #9299a7; font-size: 14px; }
.studio-search-key { flex-shrink: 0; border: 1px solid #e3e5ea; border-radius: 4px; padding: 1px 4px; font-size: 10px; color: #9299a7; }
.studio-search-panel { position: absolute; top: calc(100% + 9px); left: 50%; transform: translateX(-50%); width: 420px; max-width: calc(100vw - 24px); border: 1px solid #e5e7eb; border-radius: 13px; background: #fff; box-shadow: 0 16px 45px #18213a20, 0 3px 8px #18213a08; z-index: 60; overflow: hidden; }
.studio-search-panel[hidden], .studio-search-footer[hidden], .studio-search-status[hidden] { display: none; }
.studio-search-scroll { max-height: min(480px, 65vh); overflow-y: auto; overscroll-behavior: contain; padding: 5px; }
.studio-search-heading { display: flex; align-items: center; justify-content: space-between; padding: 9px 9px 5px; color: #9299a7; font-size: 10px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; }
.studio-search-more { color: #1d4ed8; font-size: 11px; text-transform: none; letter-spacing: 0; padding: 3px; }
.studio-search-more:hover { text-decoration: underline; }
.studio-search-result { display: flex; align-items: center; gap: 10px; padding: 8px 9px; min-height: 51px; border-radius: 7px; color: #27303f; text-decoration: none; }
.studio-search-result:hover, .studio-search-result.is-active { background: #eff6ff; }
.studio-search-result:focus-visible, .studio-search-more:focus-visible, .studio-search-footer:focus-visible { outline: 2px solid #60a5fa; outline-offset: -2px; }
.studio-search-thumb, .studio-search-icon { width: 32px; height: 32px; flex-shrink: 0; border-radius: 7px; object-fit: cover; }
.studio-search-icon { display: flex !important; align-items: center; justify-content: center; color: #949aab; background: #f5f6f9; font-size: 13px; }
.studio-search-text { min-width: 0; }
.studio-search-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 500; line-height: 19px; }
.studio-search-subtitle { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #8a91a0; font-size: 11px; line-height: 17px; }
.studio-search-status { padding: 22px 18px; font-size: 13px; color: #8a91a0; }
.studio-search-footer { display: flex; align-items: center; justify-content: space-between; padding: 11px 15px; border-top: 1px solid #edf0f4; background: #fafbfc; color: #1d4ed8; font-size: 12px; font-weight: 500; }
.search-page { max-width: 1000px; margin: 24px auto; padding: 0 16px 32px; }
.search-page h1 { font-size: 25px; font-weight: 650; color: #202638; margin-bottom: 18px; }
.search-page-form { display: flex; gap: 12px; align-items: center; padding: 12px 16px; border: 1px solid #e1e4ec; border-radius: 12px; background: white; }
.search-page-form:focus-within { border-color: #60a5fa; box-shadow: 0 0 0 3px #2563eb14; }
.search-page-form button { background: #1d4ed8; color: #fff; border-radius: 7px; padding: 7px 16px; font-size: 13px; }
.search-page-tabs { display: flex; gap: 7px; overflow-x: auto; padding: 18px 0 22px; }
.search-page-tabs a { white-space: nowrap; padding: 7px 12px; border-radius: 7px; font-size: 12px; color: #747c8e; }
.search-page-tabs a[aria-current="page"] { background: #eff6ff; color: #1d4ed8; font-weight: 600; }
.search-page-section { border: 1px solid #e7e9ee; background: #fff; border-radius: 12px; margin-bottom: 18px; overflow: hidden; }
.search-page-section h2 { display: flex; justify-content: space-between; padding: 14px 18px; background: #fafbfc; border-bottom: 1px solid #edf0f4; font-size: 13px; font-weight: 600; color: #50596c; }
.search-page-section .studio-search-result { padding: 12px 18px; border-radius: 0; border-bottom: 1px solid #f3f4f6; }
.search-page-empty { padding: 48px 20px; text-align: center; color: #8890a1; background: #fff; border: 1px solid #e7e9ee; border-radius: 12px; }
.search-page-pagination { display: flex; justify-content: space-between; gap: 16px; font-size: 13px; color: #1d4ed8; padding: 10px 0; }
@media (max-width: 639px) {
  .studio-search { flex: 1 1 160px; margin: 0 10px; }
  .studio-search-key { display: none; }
  .studio-search-panel { position: fixed; top: 72px; left: 12px; right: 12px; width: auto; transform: none; }
  .studio-search-scroll { max-height: 60vh; }
  .search-page { margin-top: 16px; padding: 0 4px 24px; }
}
.studio-search-clear { color: #9aa1af; font-size: 12px; padding: 4px; line-height: 1; }
.studio-search-clear:hover { color: #1d4ed8; }
.studio-search-clear[hidden] { display: none; }
@media (min-width: 1024px) {
  .studio-top-nav { position: relative; }
  .studio-search { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 360px; margin: 0; }
}

.search-page-form button:hover { background: #1e40af; }
.search-page-form button:focus-visible { outline: 2px solid #60a5fa; outline-offset: 2px; }
.studio-search-avatar { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex-shrink: 0; border-radius: 50%; font-size: 12px; font-weight: 500; color: #374151; }
.studio-search-settings-icon { border-radius: 50%; }

.search-analytics { max-width: 1440px; margin: 0 auto; padding: 16px; color: #1f2937; }
.sa-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.sa-heading h1 { font-size: 26px; font-weight: 800; }
.sa-heading p, .sa-description { font-size: 13px; color: #6b7280; margin-top: 6px; }
.sa-badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; background: #eff6ff; color: #1d4ed8; border-radius: 6px; font-size: 11px; white-space: nowrap; }
.sa-filters { display: flex; align-items: end; flex-wrap: wrap; gap: 14px; padding: 18px; background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; margin-bottom: 24px; }
.sa-filters label { display: block; font-size: 12px; font-weight: 500; margin-bottom: 6px; color: #6b7280; }
.sa-filters input[type=date], .sa-filters select { border: 1px solid #d1d5db; border-radius: 7px; font-size: 13px; padding: 8px 12px; background: #fff; }
.sa-studio-filter { flex: 1; min-width: 180px; }.sa-studio-filter select { width: 100%; }
.sa-button { border: 0; background: #1d4ed8; color: #fff; padding: 9px 20px; border-radius: 7px; font-size: 13px; cursor: pointer; }.sa-button:hover { background: #1e40af; }
.sa-metrics { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 18px; margin-bottom: 24px; }
.sa-metric { display: flex; align-items: center; gap: 14px; background: white; border: 1px solid #e5e7eb; border-radius: 12px; padding: 22px; box-shadow: 0 2px 6px #11182704; }
.sa-icon { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; width: 44px; height: 44px; flex-shrink: 0; }.sa-blue { color: #2563eb; background: #dbeafe; }.sa-green { color: #16a34a; background: #dcfce7; }.sa-amber { color: #b45309; background: #fef3c7; }
.sa-label { font-size: 12px; color: #6b7280; margin-bottom: 3px; }.sa-metric strong { font-size: 28px; font-weight: 700; line-height: 1.2; }
.sa-card { background: white; border: 1px solid #e5e7eb; border-radius: 12px; padding: 24px; margin-bottom: 24px; box-shadow: 0 2px 6px #11182704; }.sa-card h2 { font-size: 16px; font-weight: 650; }
.sa-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.sa-chart { display: flex; align-items: end; height: 130px; gap: 3px; border-bottom: 1px solid #e5e7eb; margin-top: 26px; }.sa-chart-column { height: 100%; flex: 1; display: flex; align-items: end; }.sa-chart-column span { width: 100%; min-height: 2px; background: #60a5fa; border-radius: 3px 3px 0 0; }.sa-chart-column:hover span { background: #2563eb; }.sa-chart-dates { display: flex; justify-content: space-between; font-size: 11px; color: #9ca3af; margin-top: 10px; }
.sa-ranked { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid #f3f4f6; font-size: 13px; }.sa-rank { color: #9ca3af; width: 20px; }.sa-query { flex: 1; min-width: 0; overflow-wrap: anywhere; }.sa-ranked a { color: #1d4ed8; }
.sa-category { margin-top: 18px; }.sa-category>div:first-child { display: flex; justify-content: space-between; font-size: 13px; }.sa-track { height: 5px; border-radius: 4px; background: #eff6ff; margin: 7px 0 3px; overflow: hidden; }.sa-track span { display: block; height: 100%; background: #3b82f6; border-radius: 4px; }.sa-category small { font-size: 11px; color: #9ca3af; }
.sa-table-wrap { overflow-x: auto; margin-top: 20px; }.sa-table-wrap table { width: 100%; text-align: left; border-collapse: collapse; font-size: 12px; }.sa-table-wrap th { background: #f9fafb; color: #6b7280; font-weight: 600; padding: 12px; }.sa-table-wrap td { padding: 14px 12px; border-bottom: 1px solid #f3f4f6; vertical-align: top; }.sa-query-cell { max-width: 260px; overflow-wrap: anywhere; font-weight: 500; }.sa-nowrap { white-space: nowrap; }.sa-empty { color: #9ca3af; padding: 32px 0; font-size: 13px; text-align: center; }
@media(max-width:1000px) { .sa-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media(max-width:640px) { .search-analytics { padding: 0; }.sa-columns { grid-template-columns: 1fr; gap: 0; }.sa-heading { align-items: start; }.sa-heading h1 { font-size: 22px; }.sa-metrics { gap: 10px; }.sa-metric { padding: 14px; gap: 9px; }.sa-icon { width: 32px; height: 32px; }.sa-metric strong { font-size: 24px; }.sa-card { padding: 18px; } }