/**
 * Sinnesskin Integration Overrides
 * Ensures existing styles work harmoniously with the living background
 * Keeps all existing functionality while adding the peaceful Sinnesskin layer
 */

/* Auth and chat screens keep their original z-index to cover full viewport */
/* Canvas (z-index: -1) and blobs (z-index: 0) stay behind everything */

#sinnesskin-canvas {
    z-index: 0 !important;
}

.sinnesskin-blobs-container {
    z-index: -1 !important;
}

/* Content containers get semi-transparent background for legibility */
.auth-container,
.chat-content-wrapper,
.chat-input-container {
    background: rgba(255, 252, 249, 0.70) !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
    border-radius: 24px !important;
    box-shadow: 0 8px 32px rgba(46, 42, 40, 0.08) !important;
    border: 1px solid rgba(232, 223, 211, 0.3) !important;
}

/* Chat mode: slightly more transparent so neural pulse remains visible */
.chat-content-wrapper {
    background: rgba(255, 252, 249, 0.48) !important;
}

.chat-input-container {
    background: rgba(255, 252, 249, 0.58) !important;
}

[data-theme="dark"] .auth-container,
[data-theme="dark"] .chat-content-wrapper,
[data-theme="dark"] .chat-input-container {
    background: rgba(26, 22, 37, 0.75) !important;
    border: 1px solid rgba(184, 169, 201, 0.2) !important;
}

[data-theme="dark"] .chat-content-wrapper {
    background: rgba(26, 22, 37, 0.52) !important;
}

[data-theme="dark"] .chat-input-container {
    background: rgba(26, 22, 37, 0.62) !important;
}

/* Chat messages get subtle background enhancement (klasser: .message.user / .message.ai) */
.message.user .message-bubble {
    background: linear-gradient(135deg, rgba(201, 124, 93, 0.88) 0%, rgba(184, 169, 201, 0.88) 100%) !important;
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 16px rgba(201, 124, 93, 0.18);
}

.message.ai .message-bubble {
    background: linear-gradient(135deg, rgba(237, 232, 244, 0.92) 0%, rgba(244, 235, 227, 0.92) 100%) !important;
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 16px rgba(184, 169, 201, 0.14);
}

/* Header stays above everything */
.chat-header {
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    background: rgba(255, 252, 249, 0.80);
    z-index: 100;
}

[data-theme="dark"] .chat-header {
    background: rgba(26, 22, 37, 0.85);
}

/* Input area enhancement */
.input-wrapper {
    background: rgba(255, 252, 249, 0.90);
    backdrop-filter: blur(20px);
}

[data-theme="dark"] .input-wrapper {
    background: rgba(26, 22, 37, 0.90);
}

/* Auth screen centering with Sinnesskin */
.auth-screen {
    backdrop-filter: none;
    background: transparent !important;
    /* Let Sinnesskin show through completely */
}

.chat-screen {
    background: transparent !important;
    /* Let Sinnesskin show through in chat too */
}

.chat-screen.visible {
    background: transparent !important;
}

/* Buttons get enhanced Sinnesskin colors */

.chat-screen.visible .chat-content-wrapper {
    background: rgba(255, 252, 249, 0.32) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
}

.chat-screen.visible .chat-input-container {
    background: rgba(255, 252, 249, 0.42) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
}

.chat-screen.visible .chat-header {
    background: rgba(255, 252, 249, 0.52) !important;
}

.primary-btn {
    background: linear-gradient(135deg, #C97C5D 0%, #B8A9C9 100%) !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 4px 20px rgba(201, 124, 93, 0.25) !important;
    border-radius: 18px !important;
}

.primary-btn:hover {
    transform: translateY(-2px) scale(1.02) !important;
    box-shadow: 0 8px 32px rgba(201, 124, 93, 0.35) !important;
}

/* Unified state system for seamless controls */
.primary-btn:focus-visible,
.secondary-btn:focus-visible,
.send-btn:focus-visible {
    outline: 2px solid rgba(201, 124, 93, 0.7);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(201, 124, 93, 0.18) !important;
}

.secondary-btn:disabled,
.primary-btn:disabled,
.send-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    filter: saturate(0.7);
}

[data-theme="dark"] .primary-btn:focus-visible,
[data-theme="dark"] .secondary-btn:focus-visible,
[data-theme="dark"] .send-btn:focus-visible {
    outline: 2px solid rgba(184, 169, 201, 0.8);
    box-shadow: 0 0 0 4px rgba(184, 169, 201, 0.2) !important;
}

/* Smooth breathing animation for logo */
.modern-logo svg,
.auth-logo svg {
    animation: gentle-breathe 6s ease-in-out infinite;
}

@keyframes gentle-breathe {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.03);
    }
}

/* Toast notifications float above Sinnesskin */
.toast-container {
    z-index: 200;
}

.toast {
    backdrop-filter: blur(20px);
    background: rgba(255, 252, 249, 0.95);
    box-shadow: 0 8px 32px rgba(46, 42, 40, 0.12);
}

[data-theme="dark"] .toast {
    background: rgba(26, 22, 37, 0.95);
}

/* Emotion sidebar integration */
.emotion-sidebar {
    background: rgba(255, 252, 249, 0.75);
    backdrop-filter: blur(20px);
}

[data-theme="dark"] .emotion-sidebar {
    background: rgba(26, 22, 37, 0.80);
}

/* Ensure text is always readable over Sinnesskin */
body {
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5);
}

[data-theme="dark"] body {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* Dropdown menu enhancement */
.dropdown-menu {
    backdrop-filter: blur(30px);
    background: rgba(255, 252, 249, 0.95);
    box-shadow: 0 12px 48px rgba(46, 42, 40, 0.15);
}

[data-theme="dark"] .dropdown-menu {
    background: rgba(26, 22, 37, 0.95);
}

/* Loading skeleton matches Sinnesskin palette */
.skeleton {
    background: linear-gradient(90deg,
            rgba(232, 223, 211, 0.6) 25%,
            rgba(245, 240, 232, 0.6) 50%,
            rgba(232, 223, 211, 0.6) 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s ease-in-out infinite;
}

[data-theme="dark"] .skeleton {
    background: linear-gradient(90deg,
            rgba(26, 22, 37, 0.6) 25%,
            rgba(42, 36, 53, 0.6) 50%,
            rgba(26, 22, 37, 0.6) 75%);
}

/* Footer links enhanced */
.auth-footer {
    backdrop-filter: blur(10px);
    background: rgba(255, 252, 249, 0.60);
}

[data-theme="dark"] .auth-footer {
    background: rgba(26, 22, 37, 0.70);
}

/* Splash screen transition */
.splash-screen {
    backdrop-filter: blur(40px);
    background: rgba(245, 240, 232, 0.98);
    z-index: 9999;
}

[data-theme="dark"] .splash-screen {
    background: rgba(26, 22, 37, 0.98);
}

/* Performance optimization - GPU acceleration */
.sinnesskin-blobs-container *,
#sinnesskin-canvas,
.chat-messages,
.message-bubble {
    transform: translateZ(0);
    will-change: transform;
    backface-visibility: hidden;
    perspective: 1000px;
}

/* Remove will-change after animation/interaction completes */
.message-bubble:not(:hover) {
    will-change: auto;
}

/* Mobile responsiveness */
@media (max-width: 768px) {

    .auth-container,
    .chat-content-wrapper {
        backdrop-filter: blur(15px);
        -webkit-backdrop-filter: blur(15px);
    }

    /* Reduce transparency on mobile for better readability */
    .content-layer {
        background: rgba(255, 252, 249, 0.85);
    }

    [data-theme="dark"] .content-layer {
        background: rgba(26, 22, 37, 0.85);
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {

    .auth-container,
    .chat-content-wrapper,
    .chat-input-container {
        background: rgba(255, 252, 249, 0.95);
    }

    [data-theme="dark"] .auth-container,
    [data-theme="dark"] .chat-content-wrapper,
    [data-theme="dark"] .chat-input-container {
        background: rgba(26, 22, 37, 0.95);
    }
}

/* Print styles - hide Sinnesskin for printing */

[data-theme="dark"] .chat-screen.visible .chat-content-wrapper {
    background: rgba(26, 22, 37, 0.34) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
}

[data-theme="dark"] .chat-screen.visible .chat-input-container {
    background: rgba(26, 22, 37, 0.44) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
}

[data-theme="dark"] .chat-screen.visible .chat-header {
    background: rgba(26, 22, 37, 0.54) !important;
}

@media print {

    #sinnesskin-canvas,
    .sinnesskin-blobs-container {
        display: none !important;
    }

    .content-layer,
    .auth-container,
    .chat-content-wrapper {
        background: white !important;
        backdrop-filter: none !important;
    }
}