/* 
   PLUSART  PROMPT BAR v5.1 (RESTYLE)
   Layout restructured to Box Style (Input Top, Controls Bottom)
   
   Sistema de input profesional inspirado en Claude/ChatGPT/Gemini
   Ruta: /studio-motion/css/PromptBar.css
   
   FIX CRÍTICO: Elimina la barra de autofill de Chrome iOS - Usa autocomplete="one-time-code" en HTML - CSS oculta cualquier botón de autofill residual - Font-size>=16px previene zoom en iOS */
/* ═══════════════════════════════════════════════════════════════════════════
   1. DOCK CONTAINER (Wrapper)
═══════════════════════════════════════════════════════════════════════════ */

.dock-container {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 16px 20px;
    /* Lift up to match previous control position */
    padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px));
    z-index: 50;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    pointer-events: none;
}

.dock-container>* {
    pointer-events: auto;
}

/* ═══════════════════════════════════════════════════════════════════════════
   2. ASPECT SELECTOR (Dropdown)
═══════════════════════════════════════════════════════════════════════════ */

/* [MOD]: Allow aspect selector to remain visible in expanded mode (new layout supports it)
   Previously: .prompt-bar.expanded .aspect-selector { display: none !important; }
*/
.prompt-bar.expanded .aspect-selector {
    display: block !important;
}

.aspect-selector {
    position: relative;
    flex-shrink: 0;
    align-self: center;
    margin-bottom: 0px;
    /* Always visible */
    display: block !important;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
    max-width: none !important;
    overflow: visible !important;
    transition: none !important;
}

/* UNIVERSAL KILL SWITCH FOR ANIMATIONS ON APPEAR */
.prompt-bar:focus-within .aspect-selector *,
.prompt-bar:focus-within .model-selector-integrated *,
.prompt-bar:focus-within #randomPromptBtn *,
.prompt-bar:focus-within .aspect-selector-trigger,
.prompt-bar:focus-within .icon-btn-mini {
    transition: none !important;
    animation: none !important;
}

.prompt-bar:focus-within .aspect-selector {
    display: block;
    opacity: 1 !important;
    transform: translateX(0) !important;
    pointer-events: auto !important;
    max-width: 50px !important;
    overflow: visible !important;
    /* Instant show on focus */
    transition: none !important;
}

/* 2.2 RANDOM BUTTON (Hidden by default) */
#randomPromptBtn {
    /* Always visible */
    display: flex !important;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
    max-width: 40px !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    transition: none !important;
}

.prompt-bar:focus-within #randomPromptBtn {
    /* Always visible */
    display: flex !important;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
    max-width: 40px !important;
    margin-right: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    align-self: center;
    margin-bottom: 0px;
    /* Instant show */
    transition: none !important;
}

/* [MOD]: Allow controls to remain visible in expanded mode */
.prompt-bar.expanded #randomPromptBtn,
.prompt-bar.expanded #btnNewImage {
    display: flex !important;
}

.aspect-selector-trigger {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    /* Circular button */
    background: transparent;
    color: var(--text-muted, #71717a);
    cursor: pointer;
    transition: all 0.2s ease;
}

.aspect-selector-trigger:hover,
.aspect-selector.open .aspect-selector-trigger {
    color: var(--text-primary, #fff);
    background: rgba(255, 255, 255, 0.08);
    /* Consistent subtle hover */
}

.aspect-selector.open .aspect-selector-trigger {
    color: var(--accent-color, #8b5cf6);
}

.aspect-selector-trigger svg,
.aspect-selector-trigger i {
    width: 20px;
    height: 20px;
}

/* Dropdown Menu - Styled to match dark theme */
.aspect-dropdown {
    position: absolute;
    bottom: calc(100% + 25px);
    /* Position above trigger */
    left: -60px;
    min-width: 180px;
    background: rgb(20, 20, 28);
    /* Force dark background */
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 6px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px) scale(0.95);
    z-index: 100;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.aspect-selector.open .aspect-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

/* Options */
.aspect-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: var(--text-secondary, #a1a1aa);
    cursor: pointer;
    width: 100%;
    text-align: left;
    transition: all 0.15s ease;
}

.aspect-option:hover {
    background: rgba(255, 255, 255, 0.08);
    /* Dark hover state */
    color: var(--text-primary, #fff);
}

.aspect-option.selected {
    background: rgba(139, 92, 246, 0.15);
    /* Accent highlight */
    color: var(--accent-color, #c4b5fd);
}

.aspect-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.aspect-label {
    font-size: 13px;
    font-weight: 500;
}

/* ═══════════════════════════════════════════════════════════════════════════
   2.5 MODEL SELECTOR (Integrated)
═══════════════════════════════════════════════════════════════════════════ */

.model-selector-integrated {
    position: relative;
    flex-shrink: 0;
    align-self: center;
    margin-bottom: 0px;

    /* Always visible */
    display: flex !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;

    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;

    transition: none !important;
}

.prompt-bar:focus-within .model-selector-integrated {
    display: flex;
    opacity: 1 !important;
    transform: translateX(0) !important;
    pointer-events: auto !important;
    max-width: 50px !important;
    overflow: visible !important;
    /* Instant show */
    transition: none !important;
}

/* [MOD]: Allow model selector to remain visible */
.prompt-bar.expanded .model-selector-integrated {
    display: flex !important;
}

/* Reusing icon-btn-mini styles for trigger but ensuring specificity */
.model-selector-integrated .icon-btn-mini {
    color: var(--text-muted, #71717a);
}

.model-selector-integrated .icon-btn-mini:hover,
.model-selector-integrated.open .icon-btn-mini {
    color: var(--text-primary, #fff);
    background: rgba(255, 255, 255, 0.08);
    /* Consistent subtle hover */
}

.model-selector-integrated.open .icon-btn-mini {
    color: var(--accent-color, #8b5cf6);
}

.model-chevron {
    width: 14px;
    height: 14px;
    opacity: 0.6;
    transition: transform 0.2s ease;
}

.model-selector-integrated.open .model-chevron {
    transform: rotate(180deg);
}

.model-dropdown {
    position: absolute;
    bottom: calc(100% + 14px);
    /* Prompt bar padding + extra */
    left: 0;
    width: 240px;
    background: rgba(20, 20, 28, 0.98);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 6px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px) scale(0.95);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
    display: flex;
    flex-direction: column;
    gap: 2px;
    z-index: 100;
}

.model-selector-integrated.open .model-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.model-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border: none;
    background: transparent;
    color: var(--text-secondary, #a1a1aa);
    border-radius: 10px;
    cursor: pointer;
    text-align: left;
    transition: all 0.15s ease;
}

.model-option:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
}

.model-option.selected {
    background: rgba(139, 92, 246, 0.15);
    color: var(--accent-color, #c4b5fd);
}

.model-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.model-name {
    font-size: 13px;
    font-weight: 600;
}

.model-desc {
    font-size: 11px;
    opacity: 0.7;
}

.model-check {
    width: 14px;
    height: 14px;
    opacity: 0;
    transition: opacity 0.2s;
}

.model-option.selected .model-check {
    opacity: 1;
}

/* Suggestion Chips (Balloons) in Empty State */
.suggestion-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 24px;
    max-width: 600px;
}

.suggestion-chip {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-secondary, #a1a1aa);
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
}

.suggestion-chip:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
}

/* ═══════════════════════════════════════════════════════════════════════════
   3. PROMPT BAR (Main Container)
═══════════════════════════════════════════════════════════════════════════ */

.prompt-bar {
    width: 100%;
    max-width: 680px;
    background: var(--panel-bg-glass, rgba(30, 30, 30, 0.6));
    backdrop-filter: blur(28px) saturate(180%);
    -webkit-backdrop-filter: blur(28px) saturate(180%);
    border: 1px solid var(--prompt-border, rgba(255, 255, 255, 0.08));
    border-radius: 28px;
    display: flex;
    flex-direction: column;
    /* Explicit column for rows */
    align-items: stretch;
    justify-content: flex-start;
    padding: 16px 18px;
    gap: 8px;
    /* Gap between top and bottom row */
    min-height: auto;

    box-shadow:
        0 10px 30px -10px rgba(0, 0, 0, 0.5);
    transition: none;
    position: relative;
    margin: 0 auto;
    /* Ensure centering */
}

/* --- NEW LAYOUT CONTAINERS --- */

.prompt-top-row {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.prompt-bottom-row {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 40px;
    /* Ensure height for controls */
}

.prompt-controls-left {
    display: flex;
    align-items: center;
    gap: 8px;
    /* Spacing between icons */
}

/* Remove ordering hacks as structure is now explicit */
.prompt-bar>* {
    order: 0;
}

.gen-btn {
    order: 0 !important;
    margin-left: 0 !important;
}

/* Reset margins for icons in left group */
.prompt-controls-left .icon-btn-mini,
.prompt-controls-left .aspect-selector,
.prompt-controls-left .model-selector-integrated {
    margin: 0;
}

.prompt-bar:focus-within {
    background: var(--panel-bg-glass, rgba(30, 30, 30, 0.6)) !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}

.prompt-bar.expanded {
    border-radius: 20px;
    background: var(--panel-bg-glass, rgba(30, 30, 30, 0.6)) !important;
    box-shadow: 0 -10px 50px rgba(0, 0, 0, 0.6);
}

.prompt-bar.shake {
    animation: shake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

@keyframes shake {

    10%,
    90% {
        transform: translateX(-1px);
    }

    20%,
    80% {
        transform: translateX(2px);
    }

    30%,
    50%,
    70% {
        transform: translateX(-4px);
    }

    40%,
    60% {
        transform: translateX(4px);
    }
}

/* ════════════════════â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•
   4. PROMPT INPUT (Textarea) — CRITICAL ANTI-AUTOFILL STYLES
   
   Este bloque contiene los estilos que previenen la barra de autofill
   de Chrome iOS. Funciona en conjunto con los atributos HTML.
═══════════â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â• */

.prompt-input-wrapper {
    width: 100%;
    position: relative;
    display: flex;
    align-items: flex-start;
    min-width: 0;
    margin-bottom: 0;
}

.prompt-input {
    width: 100%;
    /* [MOD] Increase min-height for box feel */
    min-height: 60px;
    /* Match icon height for better centering */
    max-height: 150px;
    padding: 10px 12px;
    /* Symmetrical padding */
    padding-right: 36px;
    /* Avoid overlap with expand button */
    background: transparent;
    border: none;
    outline: none;
    resize: none;
    color: var(--prompt-text, #f4f4f5);
    font-family: inherit;
    /* CRITICAL: 16px prevents iOS zoom AND helps avoid autofill triggers */
    font-size: 16px;
    /* Increased for better rendering and iOS anti-zoom */
    font-weight: 400;
    line-height: 1.4;
    /* Slightly tighter for better vertical centering */
    letter-spacing: 0.2px;
    overflow-y: hidden;
    overflow-x: visible;
    /* Ensure nothing is chopped horizontally */
    word-wrap: break-word;
    white-space: pre-wrap;

    /* Remove ALL default browser styling */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

    /* Disable iOS zoom on focus */
    touch-action: manipulation;

    /* Prevent text selection highlight issues */
    -webkit-user-select: text;
    user-select: text;

    /* Custom scrollbar */
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CRITICAL: Anti-Autofill Styles for Chrome iOS
   
   Estos estilos ocultan cualquier UI de autofill que Chrome intente mostrar
   y previenen el styling automático de campos autofilled.
═══════════════════════════════════════════════════════════════════════════ */

/* Override Chrome autofill background color */
.prompt-input:-webkit-autofill,
.prompt-input:-webkit-autofill:hover,
.prompt-input:-webkit-autofill:focus,
.prompt-input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px rgba(31, 31, 43, 0.98) inset !important;
    -webkit-text-fill-color: #f4f4f5 !important;
    background-color: transparent !important;
    background-clip: content-box !important;
    transition: background-color 5000s ease-in-out 0s;
    caret-color: #f4f4f5;
}

/* Hide Chrome's autofill dropdown buttons */
.prompt-input::-webkit-credentials-auto-fill-button,
.prompt-input::-webkit-contacts-auto-fill-button,
.prompt-input::-webkit-credit-card-auto-fill-button {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    position: absolute !important;
    right: 0 !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

/* Hide any inner spin buttons or decoration */
.prompt-input::-webkit-inner-spin-button,
.prompt-input::-webkit-outer-spin-button,
.prompt-input::-webkit-search-decoration,
.prompt-input::-webkit-search-cancel-button,
.prompt-input::-webkit-search-results-button,
.prompt-input::-webkit-search-results-decoration {
    display: none !important;
    -webkit-appearance: none !important;
}

/* Firefox autofill */
.prompt-input:-moz-autofill {
    background-color: transparent !important;
}

/* ═══════════════════════════════════════════════════════════════════════════ */

/* Placeholder Shimmer Animation */
@keyframes placeholderPulse {
    0% {
        background-position: -200% 0;
    }

    100% {
        background-position: 200% 0;
    }
}

.prompt-input::placeholder {
    font-weight: 400;
    /* Use alpha in gradient instead of global opacity to avoid clipping issues with background-clip: text */
    background: linear-gradient(90deg,
            rgba(113, 113, 122, 0.45) 0%,
            rgba(255, 255, 255, 0.75) 50%,
            rgba(113, 113, 122, 0.45) 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
    -webkit-text-fill-color: transparent;
    /* Required for some WebKit versions */
    animation: placeholderPulse 3s infinite linear;
    transition: opacity 0.3s;
    /* Extra vertical space to prevent descender clipping */
    display: block;
}

.prompt-input:focus::placeholder {
    opacity: 0.5;
}

/* Scrollbar styling */
.prompt-input::-webkit-scrollbar {
    width: 4px;
}

.prompt-input::-webkit-scrollbar-track {
    background: transparent;
}

.prompt-input::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 4px;
}

.prompt-input::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.25);
}

/* Overflow state */
.prompt-input.has-overflow {
    overflow-y: auto;
}

/* Selection styling */
.prompt-input::selection {
    background: rgba(139, 92, 246, 0.4);
    color: white;
}

/* Expanded state */
.prompt-bar.expanded .prompt-input {
    min-height: 200px;
    max-height: 50vh;
    overflow-y: auto;
    padding-right: 40px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   5. CHARACTER COUNTER
═══════════════════════════════════════════════════════════════════════════ */

.char-counter {
    display: none !important;
}

.prompt-bar:focus-within .char-counter.visible {
    opacity: 1;
    transform: translateY(0);
}

.char-counter.warning {
    color: #f59e0b;
}

.char-counter.danger {
    color: #ef4444;
}

/* ═══════════════════════════════════════════════════════════════════════════
   6. STYLE SELECTOR (LoRA/Model Picker)
═══════════════════════════════════════════════════════════════════════════ */

.style-selector {
    position: relative;
    flex-shrink: 0;
    align-self: center;
    margin-bottom: 0;
}

.style-selector-trigger {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 40px;
    min-width: 40px;
    padding: 0 12px;
    border: none;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-secondary, #a1a1aa);
    cursor: pointer;
    transition: all 0.2s ease;
}

.style-selector-trigger:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary, #fff);
}

.style-selector.open .style-selector-trigger {
    background: rgba(139, 92, 246, 0.2);
    color: var(--accent-color, #8b5cf6);
}

.style-icon {
    width: 20px;
    height: 20px;
    color: inherit;
    flex-shrink: 0;
}

.style-label {
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
}

.style-chevron {
    width: 14px;
    height: 14px;
    opacity: 0.6;
    transition: transform 0.2s ease;
}

.style-selector.open .style-chevron {
    transform: rotate(180deg);
}

/* Dropdown */
.style-dropdown {
    position: absolute;
    bottom: calc(100% + 12px);
    left: 0;
    min-width: 220px;
    background: rgba(10, 10, 15, 0.98);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 6px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px) scale(0.95);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 100;
    max-height: 320px;
    overflow-y: auto;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
}

.style-selector.open .style-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.style-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: var(--text-secondary, #a1a1aa);
    cursor: pointer;
    width: 100%;
    text-align: left;
    transition: all 0.15s ease;
}

.style-option:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-primary, #fff);
}

.style-option.selected {
    background: rgba(139, 92, 246, 0.15);
    color: var(--accent-color, #c4b5fd);
}

.style-option-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.style-option-content {
    flex: 1;
    min-width: 0;
}

.style-option-name {
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 1px;
}

.style-option-desc {
    font-size: 11px;
    color: var(--text-muted, #71717a);
}

.style-option-check {
    width: 16px;
    height: 16px;
    color: var(--accent-color, #8b5cf6);
    opacity: 0;
    flex-shrink: 0;
    transition: opacity 0.15s;
}

.style-option.selected .style-option-check {
    opacity: 1;
}

/* ═══════════════════════════════════════════════════════════════════════════
   7. ACTION BUTTONS (Random, Expand, Generate)
═══════════════════════════════════════════════════════════════════════════ */

/* Random Prompt Button */
.icon-btn-mini {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--text-muted, #71717a);
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.2s ease;
    align-self: center;

    /* Always visible */
    display: flex;
    max-width: 40px;
    opacity: 1;
    padding: 0;
    overflow: hidden;
    margin: 0;
}

.prompt-bar:focus-within .icon-btn-mini {
    display: flex;
    max-width: 40px;
    opacity: 1;
    margin-right: 0;
}

/* FIX: Siempre mostrar botón New Image */
#btnNewImage {
    display: flex !important;
    width: 40px !important;
    height: 40px !important;
    max-width: 40px !important;
    opacity: 1 !important;
    padding: 0 !important;
    margin-right: 0px !important;
    /* El gap es suficiente */
    overflow: visible !important;
    pointer-events: auto !important;
    transition: all 0.2s ease !important;
    justify-content: center !important;
    align-items: center !important;
    color: var(--text-muted, #71717a);
}

#btnNewImage:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.1);
}

.icon-btn-mini svg,
.icon-btn-mini i {
    width: 20px;
    height: 20px;
}

/* Visible in expanded mode */
.prompt-bar.expanded .icon-btn-mini {
    max-width: 40px !important;
    opacity: 1 !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Expand Button */
.expand-btn {
    position: absolute;
    top: 0px;
    right: 0px;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--text-muted, #71717a);
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    z-index: 10;
}

.expand-btn svg,
.expand-btn i {
    width: 20px;
    height: 20px;
}

.expand-btn.visible {
    opacity: 1;
    pointer-events: auto;
}

.expand-btn:hover {
    color: var(--text-primary, #fff);
}

.prompt-bar.expanded .expand-btn {
    opacity: 1;
    pointer-events: auto;
}

/* Generate Button */
.gen-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.3);
    cursor: default;
    flex-shrink: 0;
    align-self: center;
    transition: all 0.2s ease;
}

.gen-btn svg,
.gen-btn i {
    width: 20px;
    height: 20px;
    color: currentColor;
}

.gen-btn:disabled svg,
.gen-btn:disabled i {
    opacity: 0.4;
    color: white;
}

/* Enabled state */
.gen-btn:not(:disabled) {
    background: var(--accent-color, #8b5cf6);
    color: white;
    cursor: pointer;
}

.gen-btn:not(:disabled):hover {
    background: #7c3aed;
    transform: scale(1.09);
}

.gen-btn:not(:disabled):active {
    transform: scale(0.95);
}

/* Loading state */
.gen-btn.loading {
    pointer-events: none;
}

.gen-btn.loading svg,
.gen-btn.loading i {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Generating state */
.gen-btn.generating {
    background: var(--accent-color, #8b5cf6);
    pointer-events: none;
}

.gen-btn.generating svg,
.gen-btn.generating i {
    animation: spin 1s linear infinite;
}

/* ═══════════════════════════════════════════════════════════════════════════
   8. DISCLAIMER TEXT
═══════════════════════════════════════════════════════════════════════════ */

.disclaimer-text {
    font-size: 12px;
    color: var(--text-muted, #71717a);
    text-align: center;
    margin-top: 4px;
    opacity: 0.7 !important;
    max-width: 600px;
    line-height: 1.4;
    /* FIX: Prevent collapse and ensure visibility */
    flex-shrink: 0;
    display: block !important;
    height: auto !important;
    min-height: 18px !important;
    overflow: visible !important;
    visibility: visible !important;
}

.disclaimer-text a {
    color: inherit;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    transition: color 0.2s;
}

.disclaimer-text a:hover {
    color: var(--text-secondary, #a1a1aa);
}

/* ═══════════════════════════════════════════════════════════════════════════
   9. MOBILE RESPONSIVE
═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .dock-container {
        padding: 12px 16px;
        padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
        gap: 10px;
    }

    .prompt-bar,
    .prompt-bar.expanded,
    .prompt-bar:focus-within {
        border-radius: 24px;
        padding: 0 10px;
        align-items: center;
        min-height: 52px;
        gap: 6px;
        box-shadow: none !important;
        /* CRITICAL: Force remove all shadows on mobile */
    }

    /* CRITICAL: Keep 16px minimum to prevent iOS zoom */
    .prompt-input {
        font-size: 16px;
        min-height: 38px;
        padding: 9px 10px;
    }

    .style-selector-trigger {
        min-width: 38px;
        width: 38px;
        height: 38px;
        padding: 0;
        border-radius: 50%;
    }

    .style-label,
    .style-chevron {
        display: none;
    }

    .style-icon {
        width: 18px;
        height: 18px;
    }

    .gen-btn {
        width: 38px;
        height: 38px;
    }

    .gen-btn svg,
    .gen-btn i {
        width: 18px;
        height: 18px;
    }

    .prompt-bar:focus-within .icon-btn-mini {
        max-width: 40px;
    }

    .style-dropdown {
        left: -8px;
        min-width: 200px;
    }



    .disclaimer-text {
        font-size: 11px;
        padding: 0 16px;
    }

    /* Expanded mobile */
    .prompt-bar.expanded {
        border-radius: 18px;
    }

    .prompt-bar.expanded .prompt-input {
        min-height: 150px;
        font-size: 16px;
    }
}

@media (max-width: 480px) {
    .aspect-pills {
        gap: 6px;
    }

    .aspect-pill span {
        display: none;
    }

    .aspect-pill {
        padding: 8px 12px;
    }

    .char-counter {
        display: none;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   10. DESKTOP ADJUSTMENTS (Panel Awareness)
═══════════════════════════════════════════════════════════════════════════ */

@media (min-width: 1024px) {

    /* Studio Motion: Sidebar is hidden, so dock should be truly centered */
    .dock-container {
        left: 0;
        right: 0;
    }

    /* When panel is visible */
    body:has(.results-panel:not(.collapsed)) .dock-container {
        right: 320px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   11. KEYBOARD SHORTCUTS HINT
═══════════════════════════════════════════════════════════════════════════ */

.keyboard-hint {
    position: absolute;
    bottom: 100%;
    right: 0;
    margin-bottom: 8px;
    padding: 4px 8px;
    background: rgba(0, 0, 0, 0.8);
    border-radius: 6px;
    font-size: 11px;
    color: var(--text-muted, #71717a);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
}

.prompt-bar:focus-within .keyboard-hint {
    opacity: 0.7;
}

.keyboard-hint kbd {
    display: inline-block;
    padding: 2px 4px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    font-family: inherit;
    font-size: 10px;
}

@media (max-width: 768px) {
    .keyboard-hint {
        display: none;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   12. ACCESSIBILITY
═══════════════════════════════════════════════════════════════════════════ */

/* Focus visible for keyboard navigation */
.prompt-input:focus-visible {
    outline: none;
}

.gen-btn:focus-visible,
.style-selector-trigger:focus-visible,
.aspect-pill:focus-visible,
.icon-btn-mini:focus-visible {
    outline: 2px solid var(--accent-color, #8b5cf6);
    outline-offset: 2px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {

    .prompt-bar,
    .prompt-input,
    .gen-btn,
    .aspect-pill,
    .style-dropdown,
    .aspect-pills {
        transition: none;
    }

    .gen-btn.loading svg,
    .gen-btn.loading i,
    .gen-btn.generating svg,
    .gen-btn.generating i {
        animation: none;
    }

    .prompt-bar.shake {
        animation: none;
    }
}

/* High contrast mode */
@media (prefers-contrast: high) {
    .prompt-bar {
        width: 100%;
        max-width: 680px;
        background: var(--panel-bg-glass, rgba(30, 30, 30, 0.6));
        backdrop-filter: blur(24px) saturate(180%);
        -webkit-backdrop-filter: blur(24px) saturate(180%);
        border-radius: 26px;
        border: 1px solid var(--border-medium, rgba(255, 255, 255, 0.1));
    }

    /* ═══════════════════════════════════════════════════════════════════════════
   13. CENTERED INITIAL STATE (Desktop Only)
═══════════════════════════════════════════════════════════════════════════ */

    @media (min-width: 769px) {

        /* ZONE 2: Prompt Bar (Center 55%) */
        .dock-container.initial-center {
            position: absolute !important;
            top: 55% !important;
            left: 50% !important;
            transform: translate(-50%, -50%) !important;
            /* EXACT CENTER */
            bottom: auto !important;
            margin: 0 !important;

            width: 100% !important;
            max-width: 720px !important;
            padding-bottom: 0;
            z-index: 100;
            pointer-events: none;
        }

        .dock-container.initial-center>* {
            pointer-events: auto;
        }

        /* Hide disclaimer text initially (Global rule handles this now) */
    }

    /* Zone Strategy applies here (Desktop/Tablet) */

    /* 1. Aspect Pills: Hidden by default in center mode */
    .dock-container.initial-center .aspect-pills {
        display: flex;
        opacity: 0;
        transform: translateY(10px);
        pointer-events: none;
        visibility: hidden;
        transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);

        /* Ensure positioning works in both fixed (mobile) and absolute (desktop) contexts */
        position: absolute;
        bottom: 100%;
        left: 0;
        right: 0;
        margin-bottom: 16px;
        justify-content: center;
    }

    /* Show on focus */
    .dock-container.initial-center:focus-within .aspect-pills {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
        visibility: visible;
    }

    /* 2. Disclaimer: Hidden in initial state */
    .dock-container.initial-center .disclaimer-text {
        display: none !important;
    }

    .dock-container {
        position: fixed !important;
        bottom: 30px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        z-index: 100 !important;
        /* Encima de canvas, debajo de modales */
        width: 90%;
        max-width: 700px;
        pointer-events: none;
        /* Permite clicks en el canvas a través del contenedor vacío */
    }

    .dock-container>* {
        pointer-events: auto;
        /* Reactiva clicks en la barra */
    }

    /* Mobile Fix: Prevent overlap with bottom tool panel */
    @media (max-width: 768px) {
        .dock-container {
            padding-bottom: calc(90px + env(safe-area-inset-bottom, 20px)) !important;
        }
    }
}

/* â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• 
   14. LIGHT MODE PROFESSIONAL OVERRIDES
â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â•  */

body.light-mode .prompt-bar {
    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow:
        0 4px 6px -1px rgba(0, 0, 0, 0.05),
        0 10px 15px -3px rgba(0, 0, 0, 0.1),
        0 20px 25px -5px rgba(0, 0, 0, 0.05) !important;
}

body.light-mode .prompt-input {
    color: #18181b !important;
}

body.light-mode .prompt-input::placeholder {
    background: linear-gradient(90deg,
            rgba(24, 24, 27, 0.4) 0%,
            rgba(24, 24, 27, 0.6) 50%,
            rgba(24, 24, 27, 0.4) 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent !important;
}

body.light-mode .icon-btn-mini:hover,
body.light-mode #btnNewImage:hover,
body.light-mode .aspect-selector-trigger:hover {
    background: rgba(0, 0, 0, 0.05) !important;
    color: #000 !important;
}

body.light-mode .aspect-selector.open .aspect-selector-trigger,
body.light-mode .model-selector-integrated.open .icon-btn-mini {
    background: rgba(139, 92, 246, 0.1) !important;
    color: var(--accent-color, #8b5cf6) !important;
}

body.light-mode .aspect-dropdown,
body.light-mode .model-dropdown,
body.light-mode .style-dropdown {
    background: rgba(255, 255, 255, 0.98) !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1) !important;
}

body.light-mode .aspect-option,
body.light-mode .model-option,
body.light-mode .style-option {
    color: #52525b !important;
}

body.light-mode .aspect-option:hover,
body.light-mode .model-option:hover,
body.light-mode .style-option:hover {
    background: rgba(0, 0, 0, 0.04) !important;
    color: #18181b !important;
}

body.light-mode .gen-btn:disabled {
    background: rgba(0, 0, 0, 0.05) !important;
    opacity: 1 !important;
}

body.light-mode .gen-btn:disabled i,
body.light-mode .gen-btn:disabled svg {
    color: #999 !important;
    opacity: 1 !important;
}

body.light-mode .gen-btn:not(:disabled) {
    background: var(--accent-color, #8b5cf6) !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3) !important;
}