/**
 * ═══════════════════════════════════════════════════════════════
 * Vyoma AI Settings — Production Polish Layer
 * 
 * Refines the base settings UI for a professional, production-ready
 * aesthetic. All changes are visual — no logic is modified.
 * 
 * Goals:
 *  1. Fix input text contrast (black on white / white on dark)
 *  2. Replace emoji sidebar icons with clean SVG icons
 *  3. Improved typography hierarchy & spacing
 *  4. Smooth micro-animations on transitions
 *  5. Better mobile responsiveness
 *  6. Clean modal presentation (centered, blurred, shadowed)
 *  7. Professional SaaS aesthetic (ChatGPT / Notion / Linear)
 * ═══════════════════════════════════════════════════════════════
 */

/* ══════════════════════════════════════════════════════════════
   0. CSS VARIABLES FOR SETTINGS POLISH
   ══════════════════════════════════════════════════════════════ */
:root {
    --aks-transition-fast: 150ms ease-out;
    --aks-transition-medium: 200ms ease-out;
    --aks-radius-modal: 16px;
    --aks-radius-card: 12px;
    --aks-radius-input: 10px;
}

/* ══════════════════════════════════════════════════════════════
   1. OVERLAY — ENHANCED BACKDROP
   ══════════════════════════════════════════════════════════════ */
.aks-overlay {
    background: rgba(0, 0, 0, 0.55) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    transition: opacity var(--aks-transition-medium),
        visibility var(--aks-transition-medium) !important;
}

/* ══════════════════════════════════════════════════════════════
   2. PANEL — REFINED MODAL PRESENTATION
   ══════════════════════════════════════════════════════════════ */
.aks-panel {
    max-width: 820px !important;
    width: 90% !important;
    border-radius: var(--aks-radius-modal) !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45),
        0 0 0 1px rgba(255, 255, 255, 0.03) !important;
    transform: translateY(12px) !important;
    opacity: 0 !important;
    transition: transform var(--aks-transition-medium),
        opacity var(--aks-transition-medium) !important;
}

.aks-overlay.open .aks-panel {
    transform: translateY(0) !important;
    opacity: 1 !important;
}

/* ══════════════════════════════════════════════════════════════
   3. SIDEBAR — HIDE EMOJIS, SHOW SVG ICONS
   ══════════════════════════════════════════════════════════════ */

/* Hide emoji icons, which are text children of .aks-nav-icon */
.aks-nav-icon {
    font-size: 0 !important;
    width: 18px !important;
    height: 18px !important;
    color: var(--text-muted) !important;
    position: relative !important;
}

/* Active nav icon inherits accent color */
.aks-nav-item.active .aks-nav-icon {
    color: var(--accent) !important;
}

/* Generate SVG icon placeholders via CSS for each nav category.
   We use a pseudo-element approach — these simple shapes replace emojis */

/* Appearance (paintbrush / palette circle) */
.aks-nav-item[data-section="appearance"] .aks-nav-icon::before {
    content: '';
    position: absolute;
    inset: 2px;
    border-radius: 50%;
    border: 2px solid currentColor;
}

/* Personality & Brain (lightbulb shape) */
.aks-nav-item[data-section="brain"] .aks-nav-icon::before {
    content: '';
    position: absolute;
    top: 1px;
    left: 3px;
    width: 12px;
    height: 12px;
    border: 2px solid currentColor;
    border-radius: 50% 50% 50% 50%;
}

.aks-nav-item[data-section="brain"] .aks-nav-icon::after {
    content: '';
    position: absolute;
    bottom: 1px;
    left: 6px;
    width: 6px;
    height: 3px;
    border-bottom: 2px solid currentColor;
    border-left: 1px solid currentColor;
    border-right: 1px solid currentColor;
}

/* Profile (person outline) */
.aks-nav-item[data-section="profile"] .aks-nav-icon::before {
    content: '';
    position: absolute;
    top: 1px;
    left: 50%;
    transform: translateX(-50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 2px solid currentColor;
}

.aks-nav-item[data-section="profile"] .aks-nav-icon::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 14px;
    height: 5px;
    border-radius: 5px 5px 0 0;
    border: 2px solid currentColor;
    border-bottom: none;
}

/* Memory (database / stack) */
.aks-nav-item[data-section="memory"] .aks-nav-icon::before {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 12px;
    height: 4px;
    border: 1.5px solid currentColor;
    border-radius: 3px;
}

.aks-nav-item[data-section="memory"] .aks-nav-icon::after {
    content: '';
    position: absolute;
    top: 9px;
    left: 3px;
    width: 12px;
    height: 4px;
    border: 1.5px solid currentColor;
    border-radius: 3px;
}

/* Chat History (speech bubble) */
.aks-nav-item[data-section="chat"] .aks-nav-icon::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 10px;
    border: 2px solid currentColor;
    border-radius: 4px;
}

.aks-nav-item[data-section="chat"] .aks-nav-icon::after {
    content: '';
    position: absolute;
    bottom: 1px;
    left: 5px;
    width: 4px;
    height: 4px;
    border-left: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: skewX(-15deg);
}

/* Data & Privacy (shield) */
.aks-nav-item[data-section="privacy"] .aks-nav-icon::before {
    content: '';
    position: absolute;
    top: 1px;
    left: 3px;
    width: 12px;
    height: 14px;
    border: 2px solid currentColor;
    border-radius: 2px 2px 50% 50%;
}

/* Advanced (gear / cog using circle) */
.aks-nav-item[data-section="advanced"] .aks-nav-icon::before {
    content: '';
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    border: 2px solid currentColor;
}

.aks-nav-item[data-section="advanced"] .aks-nav-icon::after {
    content: '';
    position: absolute;
    inset: 6px;
    border-radius: 50%;
    background: currentColor;
}

/* Nav item refinements */
.aks-nav-item {
    padding: 11px 14px !important;
    font-size: 0.85rem !important;
    font-weight: 500 !important;
    transition: all var(--aks-transition-fast) !important;
    border-radius: 8px !important;
}

.aks-nav-item:hover {
    background: rgba(255, 255, 255, 0.04) !important;
}

.aks-nav-item.active {
    background: rgba(255, 255, 255, 0.06) !important;
    font-weight: 600 !important;
}

/* Active indicator bar */
.aks-nav-item.active::before {
    width: 3px !important;
    height: 18px !important;
    border-radius: 0 3px 3px 0 !important;
}

/* Sidebar header */
.aks-sidebar-header h2 {
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em !important;
}

/* ══════════════════════════════════════════════════════════════
   4. TYPOGRAPHY — PROFESSIONAL HIERARCHY
   ══════════════════════════════════════════════════════════════ */
.aks-section-title {
    font-size: 1rem !important;
    font-weight: 600 !important;
    color: var(--text-primary) !important;
    margin-bottom: 6px !important;
    letter-spacing: -0.01em !important;
}

.aks-section-desc {
    font-size: 0.8rem !important;
    color: var(--text-muted) !important;
    margin-bottom: 24px !important;
    line-height: 1.5 !important;
}

.aks-row-label {
    font-size: 0.86rem !important;
    font-weight: 500 !important;
}

.aks-row-hint {
    font-size: 0.74rem !important;
    color: var(--text-muted) !important;
    margin-top: 3px !important;
}

/* Input labels */
.aks-input-field label {
    font-size: 0.7rem !important;
    font-weight: 600 !important;
    color: var(--text-muted) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    margin-bottom: 8px !important;
}

/* ══════════════════════════════════════════════════════════════
   5. INPUT TEXT CONTRAST — READABILITY FIX
   ══════════════════════════════════════════════════════════════ */

/* Base input styles - always high contrast text */
.aks-input {
    color: var(--text-primary) !important;
    font-size: 0.86rem !important;
    padding: 11px 14px !important;
    border-radius: var(--aks-radius-input) !important;
    transition: border-color var(--aks-transition-fast),
        box-shadow var(--aks-transition-fast),
        background var(--aks-transition-fast) !important;
}

/* Light mode: force black text on white inputs */
:root.light .aks-input,
:root.light .aks-search-input {
    color: #111111 !important;
    background: #ffffff !important;
    border-color: #e0e0e0 !important;
}

:root.light .aks-input:focus,
:root.light .aks-search-input:focus {
    background: #ffffff !important;
    border-color: var(--accent) !important;
}

:root.light .aks-input::placeholder,
:root.light .aks-search-input::placeholder {
    color: #9ca3af !important;
}

/* Dark mode: ensure white/light text on dark inputs */
:root.dark .aks-input,
:root:not(.light) .aks-input,
:root.dark .aks-search-input,
:root:not(.light) .aks-search-input {
    color: #e5e5e5 !important;
}

:root.dark .aks-input::placeholder,
:root:not(.light) .aks-input::placeholder,
:root.dark .aks-search-input::placeholder,
:root:not(.light) .aks-search-input::placeholder {
    color: #6b7280 !important;
}

/* ══════════════════════════════════════════════════════════════
   6. CARDS & ROWS — REFINED SPACING
   ══════════════════════════════════════════════════════════════ */
.aks-card {
    border-radius: var(--aks-radius-card) !important;
    margin-bottom: 20px !important;
    overflow: hidden !important;
}

.aks-row {
    padding: 16px 20px !important;
    gap: 16px !important;
    transition: background var(--aks-transition-fast) !important;
}

.aks-row:hover {
    background: rgba(255, 255, 255, 0.02) !important;
}

:root.light .aks-row:hover {
    background: rgba(0, 0, 0, 0.02) !important;
}

/* Input grid spacing */
.aks-input-grid {
    gap: 16px !important;
}

/* Button row spacing */
.aks-btn-row {
    gap: 10px !important;
    margin-top: 8px !important;
}

/* Content body padding */
.aks-content-body {
    padding: 24px 28px 32px !important;
}

/* ══════════════════════════════════════════════════════════════
   7. MICRO-ANIMATIONS
   ══════════════════════════════════════════════════════════════ */

/* Section switching */
@keyframes aksSlideIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.aks-section.active {
    animation: aksSlideIn 180ms ease-out !important;
}

/* Toggle switch — smoother + faster */
.aks-toggle-track {
    transition: background 180ms ease-out !important;
}

.aks-toggle-thumb {
    transition: transform 180ms cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Buttons — subtle hover lift */
.aks-btn {
    transition: all var(--aks-transition-fast) !important;
}

.aks-btn:hover {
    transform: translateY(-1px) !important;
}

.aks-btn:active {
    transform: translateY(0) scale(0.98) !important;
}

/* Nav items */
.aks-nav-item {
    transition: background var(--aks-transition-fast),
        color var(--aks-transition-fast) !important;
}

/* Segmented control */
.aks-seg-btn {
    transition: all var(--aks-transition-fast) !important;
}

/* Color chips */
.aks-color-chip {
    transition: transform 150ms ease-out,
        box-shadow 150ms ease-out !important;
}

/* Cards hover */
.aks-card {
    transition: border-color var(--aks-transition-fast) !important;
}

/* ══════════════════════════════════════════════════════════════
   8. BUTTONS — CLEANER STYLE
   ══════════════════════════════════════════════════════════════ */
.aks-btn {
    padding: 10px 18px !important;
    font-size: 0.82rem !important;
    font-weight: 500 !important;
    border-radius: var(--aks-radius-input) !important;
}

.aks-btn-ghost {
    border-color: var(--border) !important;
    color: var(--text-secondary) !important;
}

.aks-btn-ghost:hover {
    border-color: var(--text-muted) !important;
    background: rgba(255, 255, 255, 0.04) !important;
}

:root.light .aks-btn-ghost:hover {
    background: rgba(0, 0, 0, 0.04) !important;
}

.aks-btn-danger {
    background: rgba(239, 68, 68, 0.08) !important;
    color: #ef4444 !important;
    border-color: rgba(239, 68, 68, 0.18) !important;
}

.aks-btn-danger:hover {
    background: rgba(239, 68, 68, 0.14) !important;
    border-color: rgba(239, 68, 68, 0.3) !important;
}

/* ══════════════════════════════════════════════════════════════
   9. PE LAUNCH — SUBTLER GRADIENT
   ══════════════════════════════════════════════════════════════ */
.aks-pe-launch {
    background: rgba(255, 255, 255, 0.03) !important;
    border-radius: var(--aks-radius-card) !important;
    transition: all var(--aks-transition-fast) !important;
}

:root.light .aks-pe-launch {
    background: rgba(0, 0, 0, 0.02) !important;
}

.aks-pe-launch:hover {
    background: var(--accent-soft) !important;
    border-color: var(--accent) !important;
    box-shadow: none !important;
    transform: translateY(-1px) !important;
}

/* ══════════════════════════════════════════════════════════════
   10. PRIVACY BLOCKS — BETTER READABILITY
   ══════════════════════════════════════════════════════════════ */
.aks-privacy-title {
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    margin-bottom: 10px !important;
}

.aks-privacy-text {
    font-size: 0.8rem !important;
    line-height: 1.65 !important;
}

.aks-privacy-text li {
    margin: 4px 0 !important;
}

/* Info badge */
.aks-info-badge {
    font-size: 0.78rem !important;
    border-radius: var(--aks-radius-input) !important;
    padding: 14px 18px !important;
    margin-top: 16px !important;
}

/* ══════════════════════════════════════════════════════════════
   11. TOGGLE — REMOVE GLOW, CLEANER LOOK
   ══════════════════════════════════════════════════════════════ */
.aks-toggle input:checked+.aks-toggle-track {
    box-shadow: none !important;
}

/* ══════════════════════════════════════════════════════════════
   12. SEGMENTED CONTROL — SUBTLER ACTIVE STATE
   ══════════════════════════════════════════════════════════════ */
.aks-seg-btn.active {
    box-shadow: none !important;
}

/* ══════════════════════════════════════════════════════════════
   13. SEARCH — POLISH
   ══════════════════════════════════════════════════════════════ */
.aks-search-input {
    font-size: 0.86rem !important;
    padding: 10px 14px 10px 38px !important;
    border-radius: var(--aks-radius-input) !important;
    transition: border-color var(--aks-transition-fast),
        box-shadow var(--aks-transition-fast) !important;
}

.aks-search-input:focus {
    box-shadow: 0 0 0 2px var(--accent-soft) !important;
}

/* ══════════════════════════════════════════════════════════════
   14. CONFIRM MODAL — POLISH
   ══════════════════════════════════════════════════════════════ */
.aks-modal-box {
    border-radius: var(--aks-radius-modal) !important;
    padding: 28px !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35) !important;
    transform: translateY(8px) !important;
    transition: transform var(--aks-transition-medium) !important;
}

.aks-modal-overlay.open .aks-modal-box {
    transform: translateY(0) !important;
}

/* ══════════════════════════════════════════════════════════════
   15. MOBILE RESPONSIVE ENHANCEMENTS
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 700px) {
    .aks-panel {
        width: 100% !important;
        max-width: 100% !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        border-radius: 0 !important;
        flex-direction: column !important;
    }

    .aks-overlay.open .aks-panel {
        transform: translateY(0) !important;
    }

    /* Sidebar → horizontal scrollable tab bar */
    .aks-sidebar {
        width: 100% !important;
        flex-direction: row !important;
        border-right: none !important;
        border-bottom: 1px solid var(--border) !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        flex-shrink: 0 !important;
        -ms-overflow-style: none !important;
        scrollbar-width: none !important;
    }

    .aks-sidebar::-webkit-scrollbar {
        display: none !important;
    }

    .aks-sidebar-header {
        display: none !important;
    }

    .aks-sidebar-footer {
        display: none !important;
    }

    /* Nav items → horizontal pills */
    .aks-sidebar-nav,
    #aksSidebarNav {
        display: flex !important;
        flex-direction: row !important;
        padding: 8px !important;
        gap: 4px !important;
        overflow-x: auto !important;
        flex: 1 !important;
    }

    .aks-nav-item {
        flex-direction: column !important;
        gap: 4px !important;
        padding: 8px 14px !important;
        margin-bottom: 0 !important;
        font-size: 0.72rem !important;
        white-space: nowrap !important;
        min-width: fit-content !important;
        min-height: 44px !important;
    }

    .aks-nav-item.active::before {
        display: none !important;
    }

    .aks-nav-item.active {
        border-bottom: 2px solid var(--accent) !important;
        border-radius: 8px 8px 0 0 !important;
    }

    /* Content area */
    .aks-content-body {
        padding: 20px 16px 28px !important;
    }

    .aks-content-header {
        padding: 14px 16px !important;
    }

    .aks-content-header-title {
        display: block !important;
        font-size: 0.95rem !important;
        font-weight: 600 !important;
    }

    /* Input grid → single column */
    .aks-input-grid {
        grid-template-columns: 1fr !important;
    }

    /* Button rows → wrap nicely */
    .aks-btn-row {
        flex-wrap: wrap !important;
    }

    .aks-btn {
        min-height: 44px !important;
        font-size: 0.84rem !important;
    }

    /* Row padding */
    .aks-row {
        padding: 14px 16px !important;
    }

    /* Modals */
    .aks-modal-box {
        padding: 24px !important;
        border-radius: 14px !important;
    }
}

/* ══════════════════════════════════════════════════════════════
   16. EXTRA SMALL SCREENS
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 400px) {
    .aks-nav-item {
        padding: 6px 10px !important;
        font-size: 0.65rem !important;
    }

    .aks-section-title {
        font-size: 0.92rem !important;
    }

    .aks-row-label {
        font-size: 0.82rem !important;
    }

    .aks-btn {
        padding: 9px 14px !important;
        font-size: 0.8rem !important;
    }
}

/* ══════════════════════════════════════════════════════════════
   17. SLIDER — REFINED THUMB
   ══════════════════════════════════════════════════════════════ */
.aks-slider::-webkit-slider-thumb {
    width: 18px !important;
    height: 18px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
    transition: transform var(--aks-transition-fast),
        box-shadow var(--aks-transition-fast) !important;
}

.aks-slider::-webkit-slider-thumb:hover {
    transform: scale(1.12) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25) !important;
}

/* ══════════════════════════════════════════════════════════════
   18. SCROLLBAR — REFINED
   ══════════════════════════════════════════════════════════════ */
.aks-content-body::-webkit-scrollbar {
    width: 4px !important;
}

.aks-content-body::-webkit-scrollbar-track {
    background: transparent !important;
}

.aks-content-body::-webkit-scrollbar-thumb {
    background: rgba(128, 128, 128, 0.25) !important;
    border-radius: 4px !important;
}

.aks-content-body::-webkit-scrollbar-thumb:hover {
    background: rgba(128, 128, 128, 0.4) !important;
}

/* ══════════════════════════════════════════════════════════════
   19. CLOSE BUTTON — REFINED
   ══════════════════════════════════════════════════════════════ */
.aks-close-btn {
    width: 34px !important;
    height: 34px !important;
    border-radius: 8px !important;
    transition: all var(--aks-transition-fast) !important;
}

.aks-close-btn:hover {
    background: rgba(255, 255, 255, 0.06) !important;
}

:root.light .aks-close-btn:hover {
    background: rgba(0, 0, 0, 0.06) !important;
}

/* ══════════════════════════════════════════════════════════════
   20. MEMORY VIEWER — REFINED
   ══════════════════════════════════════════════════════════════ */
.aks-memview {
    border-radius: var(--aks-radius-modal) !important;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.35) !important;
}

.aks-mem-entry {
    border-radius: 8px !important;
    margin-bottom: 10px !important;
    border-left: 3px solid var(--accent) !important;
    font-size: 0.82rem !important;
    line-height: 1.55 !important;
}

/* ══════════════════════════════════════════════════════════════
   21. FOCUS STATES — ACCESSIBILITY
   ══════════════════════════════════════════════════════════════ */
.aks-btn:focus-visible,
.aks-nav-item:focus-visible,
.aks-seg-btn:focus-visible,
.aks-toggle input:focus-visible+.aks-toggle-track,
.aks-input:focus-visible,
.aks-close-btn:focus-visible {
    outline: 2px solid var(--accent) !important;
    outline-offset: 2px !important;
}

/* ══════════════════════════════════════════════════════════════
   22. PERFORMANCE — GPU LAYERS FOR ANIMATED ELEMENTS
   ══════════════════════════════════════════════════════════════ */
.aks-panel,
.aks-modal-box,
.aks-memview,
.aks-toggle-thumb {
    will-change: transform, opacity;
}