/* =================== 1 SECOND MODERN LOADER WITH THEME SUPPORT =================== */

/* CSS Variables for theme switching */
:root {
    --loader-bg-start: #0a0a0a;
    --loader-bg-mid: #16213e;
    --loader-bg-end: #0f3460;
    --loader-text-color: rgba(255, 255, 255, 0.9);
    --particle-blue: rgba(59, 130, 246, 0.2);
    --particle-purple: rgba(147, 51, 234, 0.15);
    --particle-green: rgba(16, 185, 129, 0.12);
}

/* Light mode variables */
.light-mode {
    --loader-bg-start: #f8fafc;
    --loader-bg-mid: #cbd5e1;
    --loader-bg-end: #94a3b8;
    --loader-text-color: rgba(15, 23, 42, 0.9);
    --particle-blue: rgba(59, 130, 246, 0.25);
    --particle-purple: rgba(147, 51, 234, 0.2);
    --particle-green: rgba(16, 185, 129, 0.15);
}

/* Loader container */
#page-loader {
    position: fixed;
    inset: 0;
    background: linear-gradient(135deg, var(--loader-bg-start), var(--loader-bg-mid), var(--loader-bg-end));
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.8s ease, visibility 0.8s ease;
    overflow: hidden;
    transform: translateZ(0); /* hardware acceleration */
}

/* Fade out */
#page-loader.hidden {
    opacity: 0;
    visibility: hidden;
}

/* Floating particles (subtle) */
.loader-background {
    position: absolute;
    inset: 0;
    background:
            radial-gradient(circle at 20% 30%, var(--particle-blue), transparent 60%),
            radial-gradient(circle at 70% 60%, var(--particle-purple), transparent 60%),
            radial-gradient(circle at 40% 80%, var(--particle-green), transparent 60%);
    animation: subtleParticles 6s ease-in-out infinite;
    z-index: 0;
}

@keyframes subtleParticles {
    0%, 100% { transform: translateY(0); opacity: 0.7; }
    50% { transform: translateY(-6px); opacity: 1; }
}

/* Logo container */
.loader-logo {
    width: 100px;
    height: 100px;
    /* background: url('/images/logo-light-only-text.png') no-repeat center center; */
    background-size: contain;
    position: relative;
    z-index: 1;
    animation: logoSpin 1s linear infinite;
    transform: translateZ(0); /* hardware acceleration */
}

/* Logo spin */
@keyframes logoSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Optional halo ring */
.loader-logo::before {
    content: '';
    position: absolute;
    inset: -15px;
    border: 2px solid var(--particle-blue);
    border-radius: 50%;
    animation: ringSpin 1.5s linear infinite;
    opacity: 0.6;
}

@keyframes ringSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Loader text */
.loader-text {
    color: var(--loader-text-color);
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 2px;
    margin-top: 20px;
    text-align: center;
    font-family: 'Poppins', sans-serif;
    text-transform: uppercase;
    opacity: 0;
    animation: textReveal 0.6s ease forwards 0.2s;
    text-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

@keyframes textReveal {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Loading dots */
.loader-text::after {
    content: '';
    display: inline-block;
    animation: loadingDots 1s steps(4, end) infinite;
}

@keyframes loadingDots {
    0% { content: ''; }
    25% { content: '.'; }
    50% { content: '..'; }
    75% { content: '...'; }
    100% { content: ''; }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .loader-logo { width: 80px; height: 80px; }
    .loader-logo::before { inset: -12px; }
    .loader-text { font-size: 14px; letter-spacing: 1.5px; }
}

/* Performance optimization */
#page-loader * {
    will-change: transform, opacity, filter;
    backface-visibility: hidden;
    perspective: 1000px;
    transform-style: preserve-3d;
}

/* ================== CHATBOT RESIZE HANDLES ================== */
.resize-handle {
    position: absolute;
    background: transparent; /* görünmez ama hover’da belli olabilir */
    z-index: 10;
}

/* Köşe handle'ları */
.resize-nw, .resize-ne, .resize-sw, .resize-se {
    width: 14px;
    height: 14px;
}

.resize-nw {
    top: -4px; left: -4px;
    cursor: nw-resize;
}
.resize-ne {
    top: -4px; right: -4px;
    cursor: ne-resize;
}
.resize-sw {
    bottom: -4px; left: -4px;
    cursor: sw-resize;
}
.resize-se {
    bottom: -4px; right: -4px;
    cursor: se-resize;
}

/* Kenar handle'ları */
.resize-n, .resize-s {
    height: 8px;
    width: 100%;
    left: 0;
}
.resize-n {
    top: -4px;
    cursor: n-resize;
}
.resize-s {
    bottom: -4px;
    cursor: s-resize;
}

.resize-e, .resize-w {
    width: 8px;
    height: 100%;
    top: 0;
}
.resize-e {
    right: -4px;
    cursor: e-resize;
}
.resize-w {
    left: -4px;
    cursor: w-resize;
}
.resize-handle:hover {
    background: rgba(59,130,246,0.2);
    border-radius: 2px;
}