/**
 * AI Helper Styles
 */

/* AI Helper Button */
.oppb-ai-helper-btn {
  @apply inline-flex items-center gap-1.5 px-3 py-1.5 rounded-md text-xs font-medium;
  @apply bg-gradient-to-r from-purple-500 to-indigo-500 text-white;
  @apply hover:from-purple-600 hover:to-indigo-600;
  @apply transition-all cursor-pointer;
  @apply shadow-sm hover:shadow;
}

.oppb-ai-helper-btn--disabled {
  @apply opacity-50 cursor-not-allowed;
  @apply from-gray-400 to-gray-500 hover:from-gray-400 hover:to-gray-500;
  @apply shadow-none;
}

/* AI Dialog */
.oppb-ai-dialog {
  @apply fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2;
  @apply bg-surface rounded-lg shadow-xl z-50;
  @apply w-[600px] max-w-[90vw] max-h-[80vh] overflow-hidden;
  @apply flex flex-col;
}

.oppb-ai-dialog__title {
  @apply flex items-center gap-2 px-6 py-4 text-lg font-semibold text-text;
  @apply border-b border-border;
}

.oppb-ai-dialog__description {
  @apply px-6 py-3 text-sm text-text-muted;
  @apply border-b border-border bg-surface-secondary;
}

.oppb-ai-dialog__content {
  @apply flex-1 overflow-y-auto p-6 space-y-4;
}

.oppb-ai-dialog__info {
  @apply grid grid-cols-3 gap-4 p-4 rounded-md bg-surface-secondary text-sm;
}

.oppb-ai-dialog__info p {
  @apply text-text-muted;
}

.oppb-ai-dialog__info strong {
  @apply text-text font-medium;
}

.oppb-ai-dialog__error {
  @apply flex items-center gap-2 p-3 rounded-md;
  @apply bg-danger/10 text-danger text-sm;
}

.oppb-ai-dialog__result {
  @apply space-y-3;
}

.oppb-ai-dialog__result-header {
  @apply flex items-center gap-2 text-sm font-medium text-text;
}

.oppb-ai-dialog__code-preview {
  @apply space-y-2;
}

.oppb-ai-dialog__code-preview details {
  @apply border border-border rounded-md overflow-hidden;
}

.oppb-ai-dialog__code-preview summary {
  @apply px-3 py-2 bg-surface-secondary text-sm text-text-muted cursor-pointer;
  @apply hover:bg-surface-secondary/80;
}

.oppb-ai-dialog__code-preview pre {
  @apply p-3 text-xs bg-[#1e1e1e] text-gray-300 overflow-x-auto;
  @apply max-h-48;
}

.oppb-ai-dialog__code-preview code {
  @apply font-mono;
}

.oppb-ai-dialog__preview {
  @apply mb-3;
}

.oppb-ai-dialog__preview-label {
  @apply block text-xs font-medium text-text-muted mb-1;
}

.oppb-ai-dialog__preview-frame {
  @apply w-full h-40 border border-border rounded-md bg-white;
}

.oppb-ai-dialog__code-row {
  @apply flex items-start justify-between gap-2;
}

.oppb-ai-dialog__code-row details {
  @apply flex-1;
}

/* Hooks tab */
.oppb-hooks-element-list {
  @apply space-y-1.5 mt-2;
}

.oppb-hooks-element-item {
  @apply flex items-center gap-2 text-xs;
}

.oppb-element-id-badge {
  @apply font-mono text-xs px-1.5 py-0.5 rounded bg-primary/10 text-primary border border-primary/20;
}

.oppb-hooks-element-meta {
  @apply text-text-muted;
}

.oppb-hooks-snippet {
  @apply mt-2 p-3 text-xs bg-[#1e1e1e] text-gray-300 rounded-md overflow-x-auto font-mono;
  @apply max-h-48;
}

.oppb-hooks-snippet--combined {
  @apply max-h-64;
}

.oppb-hooks-preset-notice {
  @apply mt-2 p-3 rounded-md border border-border bg-surface-secondary space-y-2;
}

.oppb-hooks-preset-notice__text {
  @apply text-xs text-text leading-relaxed;
}

.oppb-hooks-preset-notice__warning {
  @apply flex items-start gap-2 text-xs text-amber-700 dark:text-amber-400 leading-relaxed;
}

.oppb-copy-btn {
  @apply inline-flex items-center gap-1 px-2 py-1 text-xs rounded border border-border;
  @apply bg-surface hover:bg-surface-secondary text-text-muted hover:text-text cursor-pointer;
}

.oppb-ai-dialog__actions {
  @apply flex justify-end gap-2 px-6 py-4 border-t border-border;
}

.oppb-ai-dialog__close {
  @apply absolute top-4 right-4 p-1 rounded-md;
  @apply text-text-muted hover:text-text hover:bg-surface-secondary;
  @apply transition-colors cursor-pointer;
}
