/**
 * ENNU Face Chart - AI Analysis Mode Styles
 * 
 * Clean, modern design system with mobile-first approach
 * 
 * @package ENNU_Face_Charting
 * @since 5.12.0
 */

/* =========================================
   CSS CUSTOM PROPERTIES (Design Tokens)
   ========================================= */

:root {
    /* Brand Colors */
    --ai-gold: #c5a35c;
    --ai-gold-light: #d4b978;
    --ai-gold-dark: #a8893c;
    
    /* Light Theme */
    --ai-bg-primary: #ffffff;
    --ai-bg-secondary: #f8fafc;
    --ai-bg-tertiary: #f1f5f9;
    --ai-text-primary: #1e293b;
    --ai-text-secondary: #475569;
    --ai-text-muted: #94a3b8;
    --ai-border: #e2e8f0;
    --ai-border-light: #f1f5f9;
    --ai-shadow: rgba(0, 0, 0, 0.08);
    --ai-shadow-strong: rgba(0, 0, 0, 0.15);
    
    /* Status Colors */
    --ai-success: #22c55e;
    --ai-success-bg: rgba(34, 197, 94, 0.1);
    --ai-warning: #f59e0b;
    --ai-warning-bg: rgba(245, 158, 11, 0.1);
    --ai-error: #ef4444;
    --ai-error-bg: rgba(239, 68, 68, 0.1);
    --ai-info: #3b82f6;
    --ai-info-bg: rgba(59, 130, 246, 0.1);
    
    /* Score Colors */
    --ai-excellent: #22c55e;
    --ai-good: #84cc16;
    --ai-moderate: #eab308;
    --ai-needs-attention: #f97316;
    
    /* Spacing */
    --ai-space-xs: 0.25rem;
    --ai-space-sm: 0.5rem;
    --ai-space-md: 1rem;
    --ai-space-lg: 1.5rem;
    --ai-space-xl: 2rem;
    
    /* Border Radius */
    --ai-radius-sm: 6px;
    --ai-radius-md: 12px;
    --ai-radius-lg: 16px;
    --ai-radius-xl: 24px;
    
    /* Typography */
    --ai-font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --ai-font-display: 'Playfair Display', Georgia, serif;
    
    /* Transitions */
    --ai-transition-fast: 150ms ease;
    --ai-transition-normal: 250ms ease;
    --ai-transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);
    
    /* Z-Index - must be higher than footer and other overlays */
    --ai-z-drawer: 99990;
    --ai-z-overlay: 99989;
}

/* Dark Theme Overrides */
/* Note: .ai-analysis-panel.theme-dark is needed because the panel is position:fixed 
   and doesn't inherit from parent containers */
.theme-dark,
.ennu-face-chart-container.theme-dark,
.ai-analysis-panel.theme-dark {
    --ai-bg-primary: #1a1a1f;
    --ai-bg-secondary: #111114;
    --ai-bg-tertiary: #2a2a30;
    --ai-text-primary: #f5f5f7;
    --ai-text-secondary: #a1a1a6;
    --ai-text-muted: #6b6b70;
    --ai-border: #2a2a30;
    --ai-border-light: #3a3a40;
    --ai-shadow: rgba(0, 0, 0, 0.4);
    --ai-shadow-strong: rgba(0, 0, 0, 0.6);
}

/* Dark mode drawer shadow */
.theme-dark .ai-analysis-panel.ai-drawer,
.ai-analysis-panel.ai-drawer.theme-dark {
    box-shadow: 0 -4px 32px rgba(0, 0, 0, 0.5);
}

/* =========================================
   AI DRAWER - Bottom Sheet Pattern
   ========================================= */

.ai-analysis-panel.ai-drawer {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 45vh;
    min-height: 160px;
    max-height: calc(100vh - 60px);
    max-height: calc(100dvh - 60px);
    
    background: var(--ai-bg-primary);
    border-radius: 16px 16px 0 0;
    border: none;
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.12);
    
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 99990 !important; /* Must be above footer and all other elements */
    
    transition: height var(--ai-transition-slow), 
                transform var(--ai-transition-slow);
    will-change: height, transform;
}

/* Drawer States */
.ai-analysis-panel.ai-drawer.minimized {
    height: 56px !important;
    min-height: 56px !important;
    cursor: pointer;
}

.ai-analysis-panel.ai-drawer.minimized .ai-analysis-content,
.ai-analysis-panel.ai-drawer.minimized .ai-drawer-handle {
    display: none !important;
}

.ai-analysis-panel.ai-drawer.minimized .ai-analysis-header {
    border-bottom: none;
    cursor: pointer;
}

/* Minimized state: make the whole header clickable to expand */
.ai-analysis-panel.ai-drawer.minimized .ai-header-left::after {
    content: 'Tap to expand';
    font-size: 0.75rem;
    color: var(--ai-text-muted);
    margin-left: var(--ai-space-sm);
}

.ai-analysis-panel.ai-drawer.expanded {
    height: 85vh;
    height: 85dvh;
}

.ai-analysis-panel.ai-drawer.dragging {
    transition: none;
    user-select: none;
    -webkit-user-select: none;
}

/* =========================================
   DRAG HANDLE
   ========================================= */

.ai-drawer-handle {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 0 6px;
    cursor: ns-resize;
    touch-action: none;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
}

.ai-drawer-handle-bar {
    width: 48px;
    height: 5px;
    background: var(--ai-gold);
    border-radius: 3px;
    transition: all var(--ai-transition-fast);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.ai-drawer-handle:hover .ai-drawer-handle-bar,
.ai-drawer-handle:active .ai-drawer-handle-bar {
    width: 64px;
    background: var(--ai-gold-light);
}

/* =========================================
   HEADER - Clean & Minimal
   ========================================= */

.ai-analysis-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--ai-space-sm) var(--ai-space-lg);
    background: transparent;
    border-bottom: 1px solid var(--ai-border-light);
    flex-shrink: 0;
    gap: var(--ai-space-md);
    flex-wrap: wrap;
}

.ai-header-left {
    display: flex;
    align-items: center;
    gap: var(--ai-space-sm);
    min-width: 0;
}

.ai-header-left .dashicons {
    color: var(--ai-gold);
    font-size: 20px;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.ai-header-left h2 {
    font-family: var(--ai-font-display);
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--ai-text-primary);
    margin: 0;
    white-space: nowrap;
}

.ai-powered-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: linear-gradient(135deg, var(--ai-gold) 0%, var(--ai-gold-dark) 100%);
    color: white;
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 4px 8px;
    border-radius: 4px;
    flex-shrink: 0;
}

.ai-header-right {
    display: flex;
    align-items: center;
    gap: var(--ai-space-sm);
}

.ai-drawer-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0 12px;
    gap: 6px;
    background: linear-gradient(135deg, var(--ai-gold) 0%, var(--ai-gold-dark) 100%);
    border: none;
    border-radius: var(--ai-radius-md);
    color: white;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--ai-transition-fast);
    -webkit-tap-highlight-color: transparent;
    box-shadow: 0 2px 8px rgba(197, 163, 92, 0.3);
}

.ai-drawer-toggle:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(197, 163, 92, 0.4);
}

.ai-drawer-toggle:active {
    transform: translateY(0);
}

.ai-drawer-toggle .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
    transition: transform var(--ai-transition-normal);
}

.ai-analysis-panel.ai-drawer.minimized .ai-drawer-toggle .dashicons {
    transform: rotate(180deg);
}

/* Toggle button text label */
.ai-drawer-toggle::after {
    content: 'Minimize';
}

.ai-analysis-panel.ai-drawer.minimized .ai-drawer-toggle::after {
    content: 'Expand';
}

/* =========================================
   SCROLLABLE CONTENT AREA
   ========================================= */

.ai-analysis-content {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
    padding: var(--ai-space-lg);
    padding-bottom: calc(var(--ai-space-xl) + env(safe-area-inset-bottom, 0));
    
    display: flex;
    flex-direction: column;
    gap: var(--ai-space-lg);
}

/* Custom Scrollbar */
.ai-analysis-content::-webkit-scrollbar {
    width: 6px;
}

.ai-analysis-content::-webkit-scrollbar-track {
    background: transparent;
}

.ai-analysis-content::-webkit-scrollbar-thumb {
    background: var(--ai-gold);
    opacity: 0.5;
    border-radius: 3px;
}

.ai-analysis-content::-webkit-scrollbar-thumb:hover {
    opacity: 1;
}

/* Hide content when minimized */
.ai-analysis-panel.ai-drawer.minimized .ai-analysis-content,
.ai-analysis-panel.ai-drawer.minimized .ai-results-detail-panel {
    display: none !important;
}

/* =========================================
   CONTROLS & BUTTONS
   ========================================= */

.ai-controls {
    display: flex;
    flex-direction: column;
    gap: var(--ai-space-sm);
}

.ai-panel-intro {
    color: var(--ai-text-secondary);
    font-size: 0.875rem;
    line-height: 1.5;
    margin: 0 0 var(--ai-space-sm);
}

/* Primary Button */
.ai-controls .ennu-fc-btn-primary,
.ai-controls .ennu-fc-btn-lg,
#btn-analyze-photo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--ai-space-sm);
    width: 100%;
    min-height: 48px;
    padding: var(--ai-space-md) var(--ai-space-lg);
    
    background: linear-gradient(135deg, var(--ai-gold) 0%, var(--ai-gold-dark) 100%);
    color: white;
    font-size: 0.9375rem;
    font-weight: 600;
    
    border: none;
    border-radius: var(--ai-radius-md);
    box-shadow: 0 4px 14px rgba(197, 163, 92, 0.35);
    
    cursor: pointer;
    transition: all var(--ai-transition-fast);
    -webkit-tap-highlight-color: transparent;
}

.ai-controls .ennu-fc-btn-primary:hover,
#btn-analyze-photo:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(197, 163, 92, 0.45);
}

.ai-controls .ennu-fc-btn-primary:active,
#btn-analyze-photo:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(197, 163, 92, 0.3);
}

.ai-controls .ennu-fc-btn-primary:disabled,
#btn-analyze-photo:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.ai-controls .ennu-fc-btn-primary.analyzing {
    pointer-events: none;
}

/* Secondary Button */
.ai-controls .ennu-fc-btn-secondary,
#btn-reanalyze-photo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--ai-space-sm);
    width: 100%;
    min-height: 44px;
    padding: var(--ai-space-sm) var(--ai-space-md);
    
    background: var(--ai-bg-tertiary);
    color: var(--ai-text-primary);
    font-size: 0.875rem;
    font-weight: 500;
    
    border: 1px solid var(--ai-border);
    border-radius: var(--ai-radius-sm);
    
    cursor: pointer;
    transition: all var(--ai-transition-fast);
}

.ai-controls .ennu-fc-btn-secondary:hover {
    background: var(--ai-border);
    border-color: var(--ai-gold);
}

/* =========================================
   STATUS MESSAGES
   ========================================= */

#ai-analysis-status {
    margin-bottom: var(--ai-space-md);
}

.ai-success-message {
    display: flex;
    align-items: flex-start;
    gap: var(--ai-space-sm);
    padding: var(--ai-space-md);
    background: var(--ai-success-bg);
    border: 1px solid var(--ai-success);
    border-radius: var(--ai-radius-md);
    color: #166534;
    font-size: 0.875rem;
    line-height: 1.5;
}

.theme-dark .ai-success-message {
    color: #86efac;
}

.ai-success-message .dashicons {
    color: var(--ai-success);
    flex-shrink: 0;
}

.ai-success-message strong {
    font-weight: 600;
}

.ai-error-message {
    display: flex;
    align-items: flex-start;
    gap: var(--ai-space-sm);
    padding: var(--ai-space-md);
    background: var(--ai-error-bg);
    border: 1px solid var(--ai-error);
    border-radius: var(--ai-radius-md);
    color: #991b1b;
    font-size: 0.875rem;
    line-height: 1.5;
}

.theme-dark .ai-error-message {
    color: #fca5a5;
}

.ai-error-message .dashicons {
    color: var(--ai-error);
    flex-shrink: 0;
}

.ai-error-help {
    color: var(--ai-text-muted);
    font-size: 0.8125rem;
    margin-top: var(--ai-space-sm);
}

/* Loading Spinner */
.ai-analysis-panel .spinner.is-active,
#ai-analysis-status .spinner.is-active {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 2px solid var(--ai-gold);
    border-top-color: transparent;
    border-radius: 50%;
    animation: ai-spin 0.8s linear infinite;
    margin-right: var(--ai-space-sm);
    vertical-align: middle;
}

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

/* =========================================
   SCORE DISPLAY - Hero Section (Minimal)
   ========================================= */

.ai-score-display {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: var(--ai-space-lg);
    padding: var(--ai-space-lg) var(--ai-space-md);
    background: transparent;
    border-radius: 0;
    border: none;
    border-bottom: 1px solid var(--ai-border-light);
}

.overall-score-circle,
.skin-age-display {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 100px;
    padding: var(--ai-space-md);
}

.overall-score-circle .score-value,
.skin-age-display .age-value {
    font-family: var(--ai-font-display);
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--ai-gold);
    line-height: 1;
}

.overall-score-circle .score-label,
.skin-age-display .age-label {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--ai-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: var(--ai-space-xs);
}

/* Score Color Variations */
.overall-score-circle.excellent .score-value { color: var(--ai-excellent); }
.overall-score-circle.good .score-value { color: var(--ai-good); }
.overall-score-circle.moderate .score-value { color: var(--ai-moderate); }
.overall-score-circle.needs-attention .score-value { color: var(--ai-needs-attention); }

/* =========================================
   RESULT SECTIONS - Clean, Minimal
   ========================================= */

.ai-result-section {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    margin-bottom: var(--ai-space-md);
}

.ai-result-section h4 {
    display: flex;
    align-items: center;
    gap: var(--ai-space-sm);
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--ai-text-muted);
    margin: 0 0 var(--ai-space-md);
    padding: 0;
    border: none;
}

.ai-result-section h4 .dashicons {
    color: var(--ai-gold);
    font-size: 14px;
    width: 14px;
    height: 14px;
}

/* Summary Text */
.ai-summary-text {
    color: var(--ai-text-primary);
    font-size: 0.9375rem;
    line-height: 1.7;
    margin: 0;
}

/* =========================================
   SCORES GRID - Clean Minimal
   ========================================= */

.ai-scores-grid {
    display: flex;
    flex-direction: column;
    gap: var(--ai-space-sm);
}

.ai-score-item {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: var(--ai-space-sm) 0;
    border-bottom: 1px solid var(--ai-border-light);
}

.ai-score-item:last-child {
    border-bottom: none;
}

.ai-score-item .score-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--ai-space-xs);
}

.ai-score-item .score-label {
    font-weight: 500;
    color: var(--ai-text-primary);
    font-size: 0.875rem;
}

.ai-score-item .score-value {
    font-weight: 700;
    font-size: 0.8125rem;
    padding: 0;
    border-radius: 0;
    background: none;
}

.ai-score-item .score-value.excellent { color: #16a34a; }
.ai-score-item .score-value.good { color: #65a30d; }
.ai-score-item .score-value.moderate { color: #ca8a04; }
.ai-score-item .score-value.needs-attention { color: #ea580c; }

/* Score Bar */
.ai-score-item .score-bar {
    height: 4px;
    background: var(--ai-border);
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: var(--ai-space-xs);
}

.ai-score-item .score-fill {
    height: 100%;
    border-radius: 2px;
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.ai-score-item .score-fill.score-excellent { background: var(--ai-excellent); }
.ai-score-item .score-fill.score-good { background: var(--ai-good); }
.ai-score-item .score-fill.score-moderate { background: var(--ai-moderate); }
.ai-score-item .score-fill.score-needs-attention { background: var(--ai-needs-attention); }

.ai-score-item .score-details {
    font-size: 0.8125rem;
}

.ai-score-item .score-classification {
    color: var(--ai-text-muted);
    font-size: 0.75rem;
}

.ai-score-item .score-description {
    color: var(--ai-text-secondary);
    margin: var(--ai-space-xs) 0 0;
    font-size: 0.8125rem;
}

.ai-score-item .score-ai-notes {
    color: var(--ai-gold);
    font-style: italic;
    margin: var(--ai-space-xs) 0 0;
    font-size: 0.8125rem;
}

.ai-score-item .score-explanation {
    color: var(--ai-text-secondary);
    font-size: 0.75rem;
    line-height: 1.4;
    margin-top: 4px;
    padding-left: 0;
    opacity: 0.85;
}

/* Dark mode score value colors - more vibrant */
.theme-dark .ai-score-item .score-value.excellent { color: #4ade80; }
.theme-dark .ai-score-item .score-value.good { color: #a3e635; }
.theme-dark .ai-score-item .score-value.moderate { color: #facc15; }
.theme-dark .ai-score-item .score-value.needs-attention { color: #fb923c; }

/* =========================================
   SKIN PROFILE BADGES - Minimal
   ========================================= */

.ai-skin-profile {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ai-space-xs);
}

.ai-skin-profile span,
.skin-age-badge,
.skin-type-badge,
.fitzpatrick-badge,
.glogau-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 4px;
    white-space: nowrap;
    background: var(--ai-bg-tertiary);
    color: var(--ai-text-primary);
}

.skin-age-badge {
    background: rgba(34, 197, 94, 0.12);
    color: #16a34a;
}

.skin-type-badge {
    background: rgba(8, 145, 178, 0.12);
    color: #0891b2;
}

.fitzpatrick-badge {
    background: rgba(124, 58, 237, 0.12);
    color: #7c3aed;
}

.glogau-badge {
    background: rgba(236, 72, 153, 0.12);
    color: #db2777;
}

/* Dark mode badge adjustments */
.theme-dark .skin-age-badge {
    background: rgba(34, 197, 94, 0.2);
    color: #86efac;
}

.theme-dark .skin-type-badge {
    background: rgba(8, 145, 178, 0.2);
    color: #67e8f9;
}

.theme-dark .fitzpatrick-badge {
    background: rgba(124, 58, 237, 0.2);
    color: #c4b5fd;
}

.theme-dark .glogau-badge {
    background: rgba(236, 72, 153, 0.2);
    color: #f9a8d4;
}

.theme-dark .ai-skin-profile span {
    background: var(--ai-bg-tertiary);
    color: var(--ai-text-primary);
}

/* =========================================
   OBSERVATIONS LIST - Clean
   ========================================= */

.ai-observations-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.ai-observations-list li {
    position: relative;
    padding: var(--ai-space-xs) 0 var(--ai-space-xs) var(--ai-space-md);
    color: var(--ai-text-primary);
    font-size: 0.875rem;
    line-height: 1.6;
    border: none;
}

.ai-observations-list li::before {
    content: '•';
    position: absolute;
    left: 0;
    top: var(--ai-space-xs);
    color: var(--ai-gold);
    font-weight: bold;
}

/* =========================================
   RECOMMENDATIONS - Minimal Cards
   ========================================= */

.ai-recommendations-list {
    display: flex;
    flex-direction: column;
    gap: var(--ai-space-sm);
}

.ai-recommendation-card {
    background: transparent;
    border: none;
    border-left: 2px solid var(--ai-gold);
    border-radius: 0;
    padding: var(--ai-space-sm) 0 var(--ai-space-sm) var(--ai-space-md);
    transition: all var(--ai-transition-fast);
}

.ai-recommendation-card:hover {
    border-left-color: var(--ai-gold-dark);
    background: rgba(197, 163, 92, 0.03);
}

.ai-recommendation-card .rec-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ai-space-sm);
    margin-bottom: var(--ai-space-xs);
}

.ai-recommendation-card .rec-treatment,
.ai-recommendation-card .treatment-name {
    font-weight: 600;
    color: var(--ai-text-primary);
    font-size: 0.875rem;
}

.ai-recommendation-card .rec-category {
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--ai-gold-dark);
    background: transparent;
    padding: 0;
    border-radius: 0;
    white-space: nowrap;
}

.ai-recommendation-card .rec-rationale,
.ai-recommendation-card .treatment-rationale {
    color: var(--ai-text-secondary);
    font-size: 0.8125rem;
    line-height: 1.5;
    margin-bottom: var(--ai-space-xs);
}

/* Priority Indicators */
.ai-recommendation-card.priority-high {
    border-left-color: var(--ai-error);
}

.ai-recommendation-card.priority-medium {
    border-left-color: var(--ai-warning);
}

.ai-recommendation-card.priority-low {
    border-left-color: var(--ai-info);
}

/* Quick Add Button - Prominent action */
.rec-actions {
    margin-top: var(--ai-space-sm);
}

.btn-quick-add-treatment {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: var(--ai-gold);
    color: white;
    font-size: 0.75rem;
    font-weight: 600;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: all var(--ai-transition-fast);
    min-height: 28px;
}

.btn-quick-add-treatment:hover {
    background: var(--ai-gold-dark);
}

.btn-quick-add-treatment:active {
    transform: scale(0.98);
}

.btn-quick-add-treatment .dashicons {
    font-size: 14px;
    width: 14px;
    height: 14px;
}

/* =========================================
   CONDITIONS - Inline Tags
   ========================================= */

.ai-conditions-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ai-space-xs);
}

.ai-condition-card {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    text-align: left;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.ai-condition-card .condition-name {
    font-weight: 500;
    color: var(--ai-text-primary);
    font-size: 0.8125rem;
    margin: 0;
}

.ai-condition-card .condition-meta {
    display: inline-flex;
    gap: 4px;
}

.ai-condition-card::after {
    content: '•';
    color: var(--ai-text-muted);
    margin-left: var(--ai-space-xs);
}

.ai-condition-card:last-child::after {
    display: none;
}

.confidence-badge,
.count-badge {
    font-size: 0.625rem;
    padding: 1px 4px;
    border-radius: 3px;
    font-weight: 600;
}

.confidence-badge {
    background: rgba(34, 197, 94, 0.1);
    color: #16a34a;
}

.count-badge {
    background: rgba(59, 130, 246, 0.1);
    color: #2563eb;
}

/* Suggestion Cards - Minimal */
.ai-suggestion-card {
    background: transparent;
    border: none;
    border-left: 2px solid var(--ai-border);
    border-radius: 0;
    padding: var(--ai-space-sm) 0 var(--ai-space-sm) var(--ai-space-md);
    margin-bottom: var(--ai-space-xs);
}

.ai-suggestion-card.ai-status-suggested {
    border-left-color: var(--ai-warning);
}

.ai-suggestion-card.ai-status-confirmed {
    border-left-color: var(--ai-success);
}

.suggestion-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--ai-space-xs);
}

.suggestion-label {
    font-weight: 600;
    color: var(--ai-text-primary);
    font-size: 0.8125rem;
}

.suggestion-confidence {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--ai-success);
}

.suggestion-severity,
.suggestion-zone {
    font-size: 0.75rem;
    color: var(--ai-text-muted);
    margin-bottom: 0;
}

.suggestion-actions {
    display: flex;
    gap: var(--ai-space-sm);
    margin-top: var(--ai-space-sm);
}

.ai-approve-btn,
.ai-reject-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    font-size: 0.6875rem;
    font-weight: 600;
    border-radius: 4px;
    cursor: pointer;
    transition: all var(--ai-transition-fast);
    min-height: 26px;
}

.ai-approve-btn {
    background: var(--ai-success);
    color: white;
    border: none;
}

.ai-approve-btn:hover {
    background: #16a34a;
}

.ai-reject-btn {
    background: transparent;
    color: var(--ai-text-muted);
    border: 1px solid var(--ai-border);
}

.ai-reject-btn:hover {
    background: var(--ai-error-bg);
    color: var(--ai-error);
    border-color: var(--ai-error);
}

/* Bulk Actions */
.ai-bulk-actions {
    display: flex;
    gap: var(--ai-space-sm);
    margin-bottom: var(--ai-space-sm);
    padding-bottom: var(--ai-space-sm);
    border-bottom: 1px solid var(--ai-border-light);
}

/* =========================================
   HIDE FOOTER WHEN AI PANEL IS ACTIVE
   ========================================= */

body:has(.ai-analysis-panel.ai-drawer:not([style*="display: none"])) .fc-footer,
.ennu-face-chart-container:has(.ai-analysis-panel.ai-drawer:not([style*="display: none"])) ~ .fc-footer,
.face-chart-content.mode-ai-analysis ~ .fc-footer {
    display: none !important;
}

/* Also ensure drawer is above WordPress admin bar if present */
.ai-analysis-panel.ai-drawer {
    /* Account for WP admin bar - 32px on desktop, 46px on mobile */
}

@media screen and (max-width: 782px) {
    body.admin-bar .ai-analysis-panel.ai-drawer {
        max-height: calc(100vh - 46px);
        max-height: calc(100dvh - 46px);
    }
}

/* =========================================
   RESULTS SUMMARY CONTAINER
   ========================================= */

#ai-results-summary {
    /* Default hidden state - JS will override with inline styles */
}

#ai-results-summary.has-results,
#ai-results-summary[style*="display: flex"] {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--ai-space-lg) !important;
    width: 100%;
    min-height: 100px;
}

.ai-comprehensive-results,
#ai-results-summary.ai-comprehensive-results {
    display: flex;
    flex-direction: column;
    gap: var(--ai-space-lg);
}

/* Loading state */
#ai-results-summary.loading {
    display: flex;
    min-height: 200px;
    align-items: center;
    justify-content: center;
}

/* Healthy skin message (no concerns) */
.ai-healthy-section {
    text-align: center;
}

.ai-healthy-skin {
    display: flex;
    align-items: flex-start;
    gap: var(--ai-space-md);
    padding: var(--ai-space-lg);
    background: var(--ai-success-bg);
    border: 1px solid var(--ai-success);
    border-radius: var(--ai-radius-md);
    text-align: left;
}

.ai-healthy-skin .dashicons {
    color: var(--ai-success);
    font-size: 24px;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    margin-top: 2px;
}

.ai-healthy-skin strong {
    display: block;
    color: #166534;
    font-size: 1rem;
    margin-bottom: var(--ai-space-xs);
}

.ai-healthy-skin p {
    color: #166534;
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.5;
}

.theme-dark .ai-healthy-skin strong,
.theme-dark .ai-healthy-skin p {
    color: #86efac;
}

/* No results state */
.ai-no-results {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--ai-space-xl);
    text-align: center;
    color: var(--ai-text-muted);
}

.ai-no-results .dashicons {
    font-size: 48px;
    width: 48px;
    height: 48px;
    opacity: 0.5;
    margin-bottom: var(--ai-space-md);
}

.ai-no-results p {
    margin: 0 0 var(--ai-space-sm);
}

.ai-no-results .ai-hint {
    font-size: 0.8125rem;
    opacity: 0.7;
}

/* Conditions section (from annotations) */
.ai-conditions-section .ai-conditions-grid {
    margin-top: var(--ai-space-sm);
}

/* =========================================
   MOBILE RESPONSIVE (< 768px)
   ========================================= */

@media (max-width: 767px) {
    .ai-analysis-panel.ai-drawer {
        border-radius: var(--ai-radius-lg) var(--ai-radius-lg) 0 0;
        height: 50vh;
    }
    
    /* Larger touch targets on mobile */
    .ai-drawer-handle {
        padding: 16px 0 12px;
    }
    
    .ai-drawer-handle-bar {
        width: 56px;
        height: 6px;
    }
    
    /* More prominent toggle button on mobile */
    .ai-drawer-toggle {
        min-width: 80px;
        min-height: 44px;
        font-size: 0.8125rem;
    }
    
    .ai-analysis-header {
        padding: var(--ai-space-sm) var(--ai-space-md);
    }
    
    .ai-header-left h2 {
        font-size: 1rem;
    }
    
    /* Minimized state - clear visual affordance */
    .ai-analysis-panel.ai-drawer.minimized {
        height: 60px !important;
        min-height: 60px !important;
    }
    
    .ai-analysis-panel.ai-drawer.minimized .ai-header-left::after {
        content: '↑ Tap to view analysis';
        font-size: 0.6875rem;
    }
    
    .ai-analysis-content {
        padding: var(--ai-space-md);
    }
    
    .ai-score-display {
        flex-direction: column;
        text-align: center;
        gap: var(--ai-space-md);
    }
    
    .overall-score-circle,
    .skin-age-display {
        flex-direction: row;
        justify-content: center;
        gap: var(--ai-space-sm);
        padding: var(--ai-space-sm);
    }
    
    .overall-score-circle .score-label,
    .skin-age-display .age-label {
        margin-top: 0;
    }
    
    .ai-conditions-grid {
        grid-template-columns: 1fr 1fr;
    }
    
    .suggestion-actions {
        flex-direction: column;
    }
    
    .ai-bulk-actions {
        flex-direction: column;
    }
    
    /* Score explanations - slightly smaller on mobile */
    .ai-score-item .score-explanation {
        font-size: 0.6875rem;
    }
}

/* Extra small screens */
@media (max-width: 374px) {
    .ai-header-left h2 {
        font-size: 0.875rem;
    }
    
    .ai-powered-badge {
        font-size: 0.5625rem;
        padding: 3px 6px;
    }
    
    .ai-conditions-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================================
   TABLET & DESKTOP (>= 768px)
   ========================================= */

@media (min-width: 768px) {
    .ai-analysis-panel.ai-drawer {
        border-radius: var(--ai-radius-xl) var(--ai-radius-xl) 0 0;
    }
    
    .ai-analysis-content {
        padding: var(--ai-space-lg) var(--ai-space-xl);
    }
    
    .ai-scores-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--ai-space-md);
    }
    
    .ai-conditions-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .ai-recommendations-list {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
    
    .ai-recommendation-card:hover {
        transform: translateY(-2px);
    }
}

/* Large desktop */
@media (min-width: 1200px) {
    .ai-analysis-panel.ai-drawer {
        max-width: 1400px;
        left: 50%;
        transform: translateX(-50%);
    }
    
    .ai-scores-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .ai-recommendations-list {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* =========================================
   ACCESSIBILITY
   ========================================= */

/* Focus states */
.ai-controls button:focus-visible,
.ai-drawer-toggle:focus-visible,
.ai-approve-btn:focus-visible,
.ai-reject-btn:focus-visible,
.btn-quick-add-treatment:focus-visible {
    outline: 2px solid var(--ai-gold);
    outline-offset: 2px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .ai-analysis-panel.ai-drawer,
    .ai-recommendation-card,
    .ai-score-item .score-fill,
    .ai-drawer-handle-bar,
    .ai-drawer-toggle .dashicons {
        transition: none;
    }
    
    .spinner.is-active {
        animation: none;
    }
}

/* High contrast */
@media (prefers-contrast: high) {
    .ai-analysis-panel.ai-drawer {
        border-width: 2px;
    }
    
    .ai-controls .ennu-fc-btn-primary {
        border: 2px solid black;
    }
}

/* =========================================
   PRINT STYLES
   ========================================= */

@media print {
    .ai-analysis-panel.ai-drawer {
        position: static;
        height: auto;
        max-height: none;
        box-shadow: none;
        border: 1px solid #ccc;
        border-radius: 0;
    }
    
    .ai-drawer-handle,
    .ai-drawer-toggle,
    .ai-controls button,
    .suggestion-actions,
    .ai-bulk-actions,
    .btn-quick-add-treatment {
        display: none !important;
    }
}

/* =========================================
   LEGACY COMPATIBILITY
   ========================================= */

/* Non-drawer mode fallback */
.ai-analysis-panel:not(.ai-drawer) {
    background: var(--ai-bg-primary);
    border: 1px solid var(--ai-border);
    border-radius: var(--ai-radius-md);
    margin: 0 0 var(--ai-space-md) 0;
    overflow: visible;
}

/* Ensure parent container doesn't cut off drawer */
.face-chart-sidebar:has(.ai-analysis-panel),
.sidebar-content:has(.ai-analysis-panel),
.mode-content:has(.ai-analysis-panel) {
    overflow: visible !important;
}

/* Fallback for browsers without :has() */
.face-chart-content.mode-ai-analysis .face-chart-sidebar,
.face-chart-content.mode-ai-analysis .sidebar-content,
.face-chart-content.mode-ai-analysis .mode-content {
    overflow: visible !important;
}