/* Octopus CSS Overrides for Mobile UX */

@media (max-width: 767px) {
  /* 1. Fix all large popups/dialogs to fit the dynamic viewport height and account for browser toolbars */
  .h-\[calc\(100vh-2rem\)\] {
    height: calc(100dvh - 1rem) !important;
    max-height: calc(100dvh - 1rem) !important;
    height: calc(100dvh - 1rem - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
    max-height: calc(100dvh - 1rem - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
    margin: 0.5rem !important;
    border-radius: 1.5rem !important;
    padding: 1rem !important;
  }

  /* 1.5. Fix dialogs that use max-h-[90vh] to use dynamic viewport height, fit nicely on screens, and add proper padding/margin */
  .max-h-\[90vh\] {
    max-height: calc(100dvh - 1.5rem) !important;
    max-height: calc(100dvh - 1.5rem - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
    width: calc(100% - 1rem) !important;
    margin: 0.5rem !important;
  }

  /* 2. Make the body container scrollable inside these large dialogs (supporting both form-based and div-based dialog layouts) */
  .h-\[calc\(100vh-2rem\)\] form > div.flex-1.min-h-0,
  .h-\[calc\(100vh-2rem\)\] > div.flex-1.min-h-0 {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding-right: 4px !important;
  }

  /* 3. Ensure the form content within the scrollable body expands naturally */
  .h-\[calc\(100vh-2rem\)\] form > div.flex-1.min-h-0 > div,
  .h-\[calc\(100vh-2rem\)\] > div.flex-1.min-h-0 > div {
    height: auto !important;
    min-height: min-content !important;
  }

  /* 4. Target the input fields grid inside the scrollable body to lay out in 2 columns, saving precious vertical space */
  .h-\[calc\(100vh-2rem\)\] form > div.flex-1.min-h-0 > div > div.grid,
  .h-\[calc\(100vh-2rem\)\] > div.flex-1.min-h-0 > div > div.grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.75rem !important;
  }

  /* 5. Ensure the model lists wrapper inside the scrollable body expands naturally on mobile */
  .h-\[calc\(100vh-2rem\)\] form > div.flex-1.min-h-0 > div > div.flex-1,
  .h-\[calc\(100vh-2rem\)\] > div.flex-1.min-h-0 > div > div.flex-1 {
    height: auto !important;
    min-height: min-content !important;
    flex: none !important;
  }

  /* 6. Ensure the model lists grid expands naturally on mobile */
  .h-\[calc\(100vh-2rem\)\] form > div.flex-1.min-h-0 > div > div.flex-1 > div.grid,
  .h-\[calc\(100vh-2rem\)\] > div.flex-1.min-h-0 > div > div.flex-1 > div.grid {
    height: auto !important;
    min-height: min-content !important;
    gap: 0.75rem !important;
  }

  /* 7. Set a comfortable height for the "添加模型" and "已选模型" list boxes */
  .h-\[calc\(100vh-2rem\)\] form > div.flex-1.min-h-0 > div > div.flex-1 > div.grid > div,
  .h-\[calc\(100vh-2rem\)\] > div.flex-1.min-h-0 > div > div.flex-1 > div.grid > div {
    height: 280px !important;
    min-height: 280px !important;
    max-height: 280px !important;
    flex: none !important;
  }
}

/* Regular expression validation error state for model filter input */
.regex-invalid {
  border-color: rgb(239 68 68) !important; /* red-500 */
  box-shadow: 0 0 0 3px rgb(239 68 68 / 20%) !important;
}

/* Slide-down and fade-in animation for premium terminal output box */
@keyframes octopusTerminalSlideIn {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.octopus-terminal-animate {
  animation: octopusTerminalSlideIn 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}