/* ============================================
   Enhanced Playground Styles
   Beautiful, modern visual design
   ============================================ */

/* Enhanced Theme Variables with Gradients */
:root {
    /* Gradients */
    --gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --gradient-accent: linear-gradient(135deg, #2c4a6e 0%, #4a7ba7 100%);
    --gradient-success: linear-gradient(135deg, #10b981 0%, #34d399 100%);
    --gradient-bg: linear-gradient(135deg, #f5f8fa 0%, #ebf2f9 100%);

    /* Shadows - Enhanced */
    --shadow-soft: 0 2px 8px rgba(30, 58, 95, 0.06);
    --shadow-medium: 0 4px 16px rgba(30, 58, 95, 0.1);
    --shadow-large: 0 12px 32px rgba(30, 58, 95, 0.15);
    --shadow-glow: 0 0 20px rgba(44, 74, 110, 0.2);

    /* Animations */
    --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
}

[data-theme="dark"] {
    --gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --gradient-accent: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
    --gradient-success: linear-gradient(135deg, #10b981 0%, #34d399 100%);
    --gradient-bg: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);

    --shadow-soft: 0 2px 8px rgba(0, 0, 0, 0.15);
    --shadow-medium: 0 4px 16px rgba(0, 0, 0, 0.25);
    --shadow-large: 0 12px 32px rgba(0, 0, 0, 0.35);
    --shadow-glow: 0 0 20px rgba(96, 165, 250, 0.3);
}

/* ============================================
   Enhanced Layout with Animations
   ============================================ */

body {
    background: var(--gradient-bg);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.playground-container {
    animation: fadeInUp 0.5s var(--ease-smooth);
}

.playground-frame {
    background-color: rgba(255, 255, 255, 0.65);
    border-radius: 40px;
    box-shadow: var(--shadow-large);
    padding: 32px;
}

[data-theme="dark"] .playground-frame {
    background-color: rgba(15, 23, 42, 0.8);
}

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

/* ============================================
   Enhanced Left Panel
   ============================================ */

.left-panel {
    background: var(--playground-bg-secondary);
    backdrop-filter: blur(10px);
    box-shadow: var(--shadow-medium);
    transition: all 0.3s var(--ease-smooth);
}

.left-panel:hover {
    box-shadow: var(--shadow-large);
}

/* Enhanced Model Selector */
.model-selector-button {
    background: linear-gradient(135deg, var(--playground-bg-tertiary) 0%, var(--playground-bg-hover) 100%);
    box-shadow: var(--shadow-soft);
    transition: all 0.3s var(--ease-bounce);
    position: relative;
    overflow: hidden;
}

.model-selector-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transition: left 0.5s;
}

.model-selector-button:hover::before {
    left: 100%;
}

.model-selector-button:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-medium);
}

.model-dropdown {
    animation: dropdownSlide 0.3s var(--ease-smooth);
    backdrop-filter: blur(15px);
}

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

.model-item {
    transition: all 0.2s var(--ease-smooth);
    position: relative;
}

.model-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--gradient-accent);
    transform: scaleY(0);
    transition: transform 0.3s var(--ease-bounce);
}

.model-item:hover::before,
.model-item.selected::before {
    transform: scaleY(1);
}

.model-item:hover {
    background-color: var(--playground-bg-hover);
    transform: translateX(4px);
}

.model-item-badge {
    background: var(--gradient-accent);
    color: white;
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}

/* ============================================
   Enhanced Parameters
   ============================================ */

.parameter-slider {
    position: relative;
    background: linear-gradient(to right,
        var(--playground-accent) 0%,
        var(--playground-accent) var(--value, 50%),
        var(--playground-bg-tertiary) var(--value, 50%),
        var(--playground-bg-tertiary) 100%);
    transition: background 0.3s var(--ease-smooth);
}

.parameter-slider::-webkit-slider-thumb {
    box-shadow: 0 2px 8px rgba(44, 74, 110, 0.3);
    transition: all 0.2s var(--ease-bounce);
}

.parameter-slider::-webkit-slider-thumb:hover {
    box-shadow: 0 4px 12px rgba(44, 74, 110, 0.5);
}

.parameter-slider::-webkit-slider-thumb:active {
    transform: scale(1.2);
}

.parameter-group {
    animation: slideInLeft 0.3s var(--ease-smooth);
    animation-fill-mode: both;
}

.parameter-group:nth-child(1) { animation-delay: 0.05s; }
.parameter-group:nth-child(2) { animation-delay: 0.1s; }
.parameter-group:nth-child(3) { animation-delay: 0.15s; }
.parameter-group:nth-child(4) { animation-delay: 0.2s; }
.parameter-group:nth-child(5) { animation-delay: 0.25s; }
.parameter-group:nth-child(6) { animation-delay: 0.3s; }

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

/* ============================================
   Enhanced Action Buttons
   ============================================ */

.action-button,
.left-panel-actions .action-button {
    position: relative;
    overflow: hidden;
    transition: all 0.3s var(--ease-bounce);
}

.action-button::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.action-button:active::after {
    width: 300px;
    height: 300px;
}

.action-button.primary {
    background: var(--gradient-accent);
    box-shadow: 0 4px 12px rgba(44, 74, 110, 0.3);
}

.action-button.primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(44, 74, 110, 0.4);
}

/* ============================================
   Enhanced Right Panel & Tabs
   ============================================ */

.right-panel {
    background: var(--playground-bg-secondary);
    backdrop-filter: blur(10px);
    box-shadow: var(--shadow-medium);
}

.tab-button {
    position: relative;
    transition: all 0.3s var(--ease-smooth);
}

.tab-button::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background: var(--gradient-accent);
    transform: translateX(-50%);
    transition: width 0.3s var(--ease-bounce);
}

.tab-button.active::after {
    width: 100%;
}

.tab-button:hover {
    transform: translateY(-2px);
}

/* ============================================
   Beautiful Welcome State
   ============================================ */

.welcome-state,
.chat-welcome {
    animation: fadeIn 0.6s var(--ease-smooth);
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.welcome-content svg,
.chat-welcome svg {
    animation: float 3s ease-in-out infinite;
}

@keyframes float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

.category-chip {
    background: var(--playground-accent-light);
    transition: all 0.3s var(--ease-bounce);
    cursor: pointer;
}

.category-chip:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 4px 12px rgba(44, 74, 110, 0.2);
}

/* ============================================
   Enhanced Chat Interface
   ============================================ */

.chat-message {
    animation: messageSlide 0.4s var(--ease-smooth);
}

@keyframes messageSlide {
    from {
        opacity: 0;
        transform: translateY(15px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.chat-message-avatar {
    box-shadow: var(--shadow-soft);
    transition: all 0.3s var(--ease-smooth);
}

.chat-message:hover .chat-message-avatar {
    transform: scale(1.1) rotate(5deg);
    box-shadow: var(--shadow-medium);
}

.chat-message-content {
    box-shadow: var(--shadow-soft);
    transition: all 0.2s var(--ease-smooth);
}

.chat-message:hover .chat-message-content {
    box-shadow: var(--shadow-medium);
}

.chat-input-wrapper {
    box-shadow: var(--shadow-soft);
    transition: all 0.3s var(--ease-smooth);
}

.chat-input-wrapper:focus-within {
    box-shadow: 0 0 0 3px var(--playground-accent-light), var(--shadow-medium);
    transform: translateY(-2px);
}

.chat-send-btn {
    box-shadow: 0 4px 12px rgba(44, 74, 110, 0.3);
}

.chat-send-btn:hover:not(:disabled) {
    animation: wiggle 0.5s ease-in-out;
}

@keyframes wiggle {
    0%, 100% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(-10deg);
    }
    75% {
        transform: rotate(10deg);
    }
}

/* ============================================
   Enhanced Loading & Error States
   ============================================ */

.spinner {
    border-width: 4px;
    box-shadow: var(--shadow-soft);
}

.loading-state,
.error-state {
    animation: fadeInScale 0.5s var(--ease-bounce);
}

@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* ============================================
   Enhanced API Code View
   ============================================ */

.code-example {
    box-shadow: var(--shadow-soft);
    transition: all 0.3s var(--ease-smooth);
    animation: fadeInUp 0.4s var(--ease-smooth);
    animation-fill-mode: both;
}

.code-example:nth-child(1) { animation-delay: 0.1s; }
.code-example:nth-child(2) { animation-delay: 0.2s; }
.code-example:nth-child(3) { animation-delay: 0.3s; }

.code-example:hover {
    box-shadow: var(--shadow-medium);
    transform: translateY(-4px);
}

.copy-button {
    transition: all 0.2s var(--ease-bounce);
}

.copy-button:hover {
    transform: scale(1.05);
    box-shadow: var(--shadow-soft);
}

.copy-button:active {
    transform: scale(0.95);
}

/* ============================================
   Enhanced Theme Toggle
   ============================================ */

.theme-toggle {
    backdrop-filter: blur(10px);
    box-shadow: var(--shadow-soft);
}

.theme-option {
    transition: all 0.2s var(--ease-bounce);
}

.theme-option:hover {
    transform: scale(1.1);
}

.theme-option.active {
    background: var(--gradient-accent);
    box-shadow: 0 4px 12px rgba(44, 74, 110, 0.3);
    animation: themePulse 0.5s var(--ease-bounce);
}

@keyframes themePulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.15);
    }
}

/* ============================================
   Enhanced Modal
   ============================================ */

.modal {
    animation: modalFadeIn 0.3s var(--ease-smooth);
}

@keyframes modalFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.modal-content {
    animation: modalSlideUp 0.4s var(--ease-bounce);
    box-shadow: var(--shadow-large);
}

@keyframes modalSlideUp {
    from {
        opacity: 0;
        transform: translateY(50px) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ============================================
   Enhanced Image/Video Interfaces
   ============================================ */

.image-output,
.video-output {
    transition: all 0.3s var(--ease-smooth);
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.05);
}

.image-output:hover,
.video-output:hover {
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.08);
}

.generated-image,
.generated-video {
    animation: imageReveal 0.6s var(--ease-smooth);
}

@keyframes imageReveal {
    from {
        opacity: 0;
        transform: scale(0.9);
        filter: blur(10px);
    }
    to {
        opacity: 1;
        transform: scale(1);
        filter: blur(0);
    }
}

/* ============================================
   Enhanced Audio Interface
   ============================================ */

.record-btn.recording {
    animation: recordPulse 1.5s ease-in-out infinite;
}

@keyframes recordPulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
    }
    50% {
        box-shadow: 0 0 0 15px rgba(239, 68, 68, 0);
    }
}

.audio-player-section audio,
.audio-output-section audio {
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.1));
}

/* ============================================
   Micro-interactions
   ============================================ */

.model-item-badge,
.info-badge,
.chat-model-badge {
    transition: all 0.2s var(--ease-bounce);
}

.model-item:hover .model-item-badge {
    transform: scale(1.05);
}

/* Smooth scrolling */
.chat-messages,
.parameters-container,
.model-list {
    scroll-behavior: smooth;
}

/* Enhanced focus states */
.parameter-input:focus,
.parameter-select:focus,
.parameter-textarea:focus,
.chat-input:focus,
.tts-input:focus {
    box-shadow: 0 0 0 4px var(--playground-accent-light), var(--shadow-soft);
    transform: translateY(-1px);
}

/* ============================================
   Tooltip Enhancement (if added later)
   ============================================ */

[title]:hover::after {
    animation: tooltipFade 0.2s var(--ease-smooth);
}

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

/* ============================================
   Reduced Motion Support
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ============================================
   Enhanced Responsiveness
   ============================================ */

@media (max-width: 968px) {
    .playground-container {
        animation: fadeIn 0.4s var(--ease-smooth);
    }

    .left-panel,
    .right-panel {
        box-shadow: var(--shadow-soft);
    }
}

/* ============================================
   Print Styles
   ============================================ */

@media print {
    .left-panel,
    .tab-navigation,
    .chat-input-container,
    .action-button {
        display: none;
    }

    .playground-container {
        display: block;
    }

    .right-panel {
        width: 100%;
        border: none;
        box-shadow: none;
    }
}