/* Claude AI Advanced Options CSS - REDESIGNED: Compact & Space-Efficient */

.advanced-options-section {
    background: var(--gray-25); /* Lighter background */
    border: 1px solid var(--gray-200); /* Thinner border */
    border-radius: var(--radius-lg); /* Smaller radius */
    margin-bottom: var(--space-3); /* Reduced margin */
    overflow: hidden;
    transition: all var(--transition-normal);
}

.advanced-options-section:hover {
    border-color: var(--gray-300);
    box-shadow: var(--shadow-xs); /* Lighter shadow */
}

/* REDESIGNED: Compact Header */
.advanced-options-header {
    padding: var(--space-2) var(--space-3); /* Much smaller padding */
    background: linear-gradient(135deg, var(--gray-25), var(--gray-50));
    border-bottom: 1px solid var(--gray-200);
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: all var(--transition-normal);
    min-height: 40px; /* Set minimum height */
}

.advanced-options-header:hover {
    background: linear-gradient(135deg, var(--gray-50), var(--gray-100));
}

.advanced-options-title {
    display: flex;
    align-items: center;
    gap: var(--space-1); /* Reduced gap */
    font-weight: var(--font-semibold);
    color: var(--gray-800);
    font-size: 11px; /* Much smaller text */
}

.advanced-options-title svg {
    color: var(--gray-600);
    width: 12px; /* Smaller icon */
    height: 12px;
}

/* REDESIGNED: Compact Toggle Button */
.toggle-advanced-btn {
    background: var(--gray-100);
    color: var(--gray-700);
    border: 1px solid var(--gray-300);
    padding: var(--space-1) var(--space-2); /* Smaller padding */
    border-radius: var(--radius-md); /* Smaller radius */
    cursor: pointer;
    font-size: 10px; /* Very small text */
    font-weight: var(--font-medium);
    display: flex;
    align-items: center;
    gap: var(--space-1); /* Reduced gap */
    transition: all var(--transition-normal);
    min-height: 24px; /* Compact height */
}

.toggle-advanced-btn:hover {
    background: var(--gray-200);
    border-color: var(--gray-400);
    transform: translateY(-1px);
}

.toggle-advanced-btn.expanded {
    background: var(--orange-500);
    color: white;
    border-color: var(--orange-500);
}

.toggle-advanced-btn.expanded:hover {
    background: var(--orange-600);
    border-color: var(--orange-600);
}

.toggle-arrow {
    transition: transform var(--transition-normal);
    width: 10px; /* Smaller arrow */
    height: 10px;
}

.toggle-advanced-btn.expanded .toggle-arrow {
    transform: rotate(180deg);
}

/* REDESIGNED: Compact Content */
.advanced-options-content {
    padding: var(--space-3); /* Reduced padding */
    background: white;
    animation: expandDown 0.2s ease-out; /* Faster animation */
}

/* FIXED: Flexible Grid Layout */
.advanced-options-grid {
    display: grid;
    grid-template-columns: 1fr; /* Single column to prevent cutoff */
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

/* SIMPLIFIED: Responsive Grid Layout */
@media (min-width: 450px) {
    .advanced-options-grid {
        grid-template-columns: 1fr 1fr;
    }
    
    /* Always keep word count full width */
    .advanced-option-group[data-option="wordcount"] {
        grid-column: 1 / -1;
    }
}

.advanced-option-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-1); /* Tighter spacing */
}

.advanced-option-group label {
    font-weight: var(--font-semibold);
    color: var(--gray-800);
    font-size: 10px; /* Much smaller text */
    display: flex;
    align-items: center;
    gap: var(--space-1); /* Reduced gap */
    line-height: 1.2;
}

.advanced-option-group label svg {
    color: var(--gray-600);
    flex-shrink: 0;
    width: 10px; /* Smaller icons */
    height: 10px;
}

/* REDESIGNED: Compact Form Controls */
.advanced-option-group select,
.advanced-option-group input {
    padding: var(--space-1) var(--space-2); /* Much smaller padding */
    border: 1px solid var(--gray-300); /* Thinner border */
    border-radius: var(--radius-md); /* Smaller radius */
    font-size: 11px; /* Smaller text */
    background: white;
    transition: all var(--transition-normal);
    font-family: var(--font-family);
    color: var(--gray-900);
    min-height: 28px; /* Compact height */
}

.advanced-option-group select:focus,
.advanced-option-group input:focus {
    outline: none;
    border-color: var(--orange-400);
    box-shadow: 0 0 0 2px rgba(238, 119, 35, 0.08); /* Subtle shadow */
    background: var(--orange-25, #fefaf8);
}

.advanced-option-group select:hover,
.advanced-option-group input:hover {
    border-color: var(--gray-400);
}

/* FIXED: Robust Select Styling - No Duplicate Arrows */
.advanced-option-group select {
    /* Aggressive native styling removal */
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    
    /* Remove any existing background images */
    background: white;
    
    /* Add single custom arrow */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23374151' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e") !important;
    background-position: right var(--space-2) center !important;
    background-repeat: no-repeat !important;
    background-size: 12px !important;
    padding-right: var(--space-6) !important;
    cursor: pointer;
}

.advanced-option-group select:focus {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23ee7723' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e") !important;
}

/* Comprehensive browser fixes */
.advanced-option-group select::-webkit-appearance {
    -webkit-appearance: none !important;
}

.advanced-option-group select::-moz-focus-inner {
    border: 0 !important;
    padding: 0 !important;
}

.advanced-option-group select::-ms-expand {
    display: none !important;
}

.advanced-option-group select::-ms-value {
    background: transparent !important;
    color: inherit !important;
}

/* Number Input Styling */
.advanced-option-group input[type="number"] {
    -moz-appearance: textfield;
}

.advanced-option-group input[type="number"]::-webkit-outer-spin-button,
.advanced-option-group input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* FIXED: Word Length Container with More Space */
.word-length-container {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.word-length-suggestions {
    display: flex;
    gap: var(--space-1);
    flex-wrap: wrap;
    justify-content: flex-start; /* Align to start for better layout */
}

/* Full width for word count input to prevent cutoff */
.advanced-option-group[data-option="wordcount"] {
    grid-column: 1 / -1; /* Full width */
}

/* REDESIGNED: Compact Word Suggestion Buttons */
.word-suggestion {
    background: var(--orange-50);
    color: var(--orange-700);
    border: 1px solid var(--orange-200);
    padding: 2px var(--space-1);
    border-radius: var(--radius-sm);
    font-size: 9px;
    cursor: pointer;
    transition: all var(--transition-normal);
    font-weight: var(--font-medium);
    min-width: 30px; /* Slightly larger for better touch targets */
    text-align: center;
    flex-shrink: 0; /* Prevent shrinking */
}

.word-suggestion:hover {
    background: var(--orange-500);
    color: white;
    border-color: var(--orange-500);
    transform: translateY(-1px);
}

.word-suggestion.active {
    background: var(--success-500);
    color: white;
    border-color: var(--success-500);
}

/* REDESIGNED: Compact Option Help Text */
.option-help {
    color: var(--gray-500);
    font-size: 9px; /* Very small text */
    line-height: var(--leading-normal);
    margin-top: var(--space-1);
    font-style: italic;
}

/* REDESIGNED: Compact Footer */
.advanced-options-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: var(--space-2); /* Reduced padding */
    border-top: 1px solid var(--gray-200);
    margin-top: var(--space-2); /* Reduced margin */
}

.advanced-help {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

.advanced-help small {
    color: var(--gray-500);
    font-style: italic;
    font-size: 9px; /* Very small text */
}

/* REDESIGNED: Compact Reset Button */
.reset-defaults-btn {
    background: var(--gray-500);
    color: white;
    border: none;
    padding: var(--space-1) var(--space-2); /* Smaller padding */
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: 10px; /* Smaller text */
    font-weight: var(--font-medium);
    transition: all var(--transition-normal);
    display: flex;
    align-items: center;
    gap: var(--space-1);
    min-height: 24px; /* Compact height */
}

.reset-defaults-btn:hover {
    background: var(--gray-600);
    transform: translateY(-1px);
}

.reset-defaults-btn svg {
    width: 10px; /* Smaller icon */
    height: 10px;
}

/* REDESIGNED: Faster Animations */
@keyframes expandDown {
    from {
        opacity: 0;
        max-height: 0;
        padding-top: 0;
        padding-bottom: 0;
    }
    to {
        opacity: 1;
        max-height: 300px; /* Reduced max height */
        padding-top: var(--space-3);
        padding-bottom: var(--space-3);
    }
}

/* REDESIGNED: Full-width Options */
.advanced-option-group.full-width {
    grid-column: 1 / -1;
}

/* Special styling for specific controls */
.advanced-option-group[data-option="language"] {
    grid-column: 1;
}

.advanced-option-group[data-option="tone"] {
    grid-column: 2;
}

.advanced-option-group[data-option="creativity"] {
    grid-column: 1;
}

.advanced-option-group[data-option="wordcount"] {
    grid-column: 2;
}

/* Responsive Design - IMPROVED */
@media (max-width: 768px) {
    .advanced-options-header {
        padding: var(--space-2) var(--space-3);
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-2);
        min-height: auto;
    }
    
    .toggle-advanced-btn {
        align-self: stretch;
        justify-content: center;
    }
    
    .advanced-options-content {
        padding: var(--space-2);
    }
    
    .advanced-options-grid {
        grid-template-columns: 1fr !important; /* Force single column on mobile */
        gap: var(--space-2);
    }
    
    .advanced-options-footer {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-2);
    }
    
    .reset-defaults-btn {
        justify-content: center;
    }
    
    .word-length-suggestions {
        justify-content: flex-start; /* Better alignment on mobile */
    }
    
    .advanced-help {
        justify-content: center;
        text-align: center;
    }
    
    .word-suggestion {
        min-width: 28px;
        font-size: 8px;
    }
}

@media (max-width: 480px) {
    .advanced-options-header {
        padding: var(--space-2);
    }
    
    .advanced-options-content {
        padding: var(--space-2);
    }
    
    .advanced-options-grid {
        gap: var(--space-2);
    }
    
    .advanced-option-group select,
    .advanced-option-group input {
        padding: var(--space-1);
        font-size: 10px;
        min-height: 26px;
    }
    
    .advanced-option-group label {
        font-size: 9px;
    }
    
    .word-suggestion {
        min-width: 24px;
        padding: 1px var(--space-1);
        font-size: 8px;
    }
}

/* Focus states for accessibility */
.advanced-options-header:focus,
.toggle-advanced-btn:focus-visible {
    outline: 2px solid var(--orange-500);
    outline-offset: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .advanced-options-section {
        border-width: 2px;
    }
    
    .advanced-option-group select,
    .advanced-option-group input {
        border-width: 2px;
    }
    
    .advanced-option-group select:focus,
    .advanced-option-group input:focus {
        border-color: var(--orange-600);
    }
}

/* Print styles */
@media print {
    .advanced-options-section {
        display: none;
    }
}