/* ── Global Styles ───────────────────────────────────────────── */
body {
    background-color: #f4f4f5;
    transition: background-color 0.3s ease;
}

.dark body {
    background-color: #09090b;
    background-image:
        radial-gradient(circle at 15% 50%, rgba(255, 255, 255, 0.03), transparent 25%),
        radial-gradient(circle at 85% 30%, rgba(255, 255, 255, 0.02), transparent 25%);
}

/* ── Responsive Card Container ───────────────────────────────── */
#card-container {
    height: 640px !important;
}

@media (min-width: 640px) {
    #card-container {
        height: 400px !important;
    }
}

/* ── 3D Transform Utilities ──────────────────────────────────── */
.preserve-3d {
    transform-style: preserve-3d;
}

.backface-hidden {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.face-front {
    pointer-events: auto;
}

.face-back {
    pointer-events: none;
}

#card-container.is-flipped .face-front {
    pointer-events: none;
}

#card-container.is-flipped .face-back {
    pointer-events: auto;
}

/* ── Custom Scrollbar ────────────────────────────────────────── */
.custom-scrollbar::-webkit-scrollbar {
    width: 4px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: transparent;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: #d4d4d8;
    border-radius: 20px;
}

.dark .custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: #3f3f46;
}

/* ── Project Pagination ──────────────────────────────────────── */
#project-list {
    transition: opacity 0.2s ease-in-out;
}

#project-list.fade-out {
    opacity: 0;
}

/* ── AI Assistant Styles ─────────────────────────────────────── */

/* RGB Breathing animation for the modal border */
@keyframes rgb-breathing {
    0% {
        border-color: #ef4444;
        box-shadow: 0 0 15px rgba(239, 68, 68, 0.3);
    }

    33% {
        border-color: #22c55e;
        box-shadow: 0 0 15px rgba(34, 197, 94, 0.3);
    }

    66% {
        border-color: #3b82f6;
        box-shadow: 0 0 15px rgba(59, 130, 246, 0.3);
    }

    100% {
        border-color: #ef4444;
        box-shadow: 0 0 15px rgba(239, 68, 68, 0.3);
    }
}

.rgb-border {
    animation: rgb-breathing 5s infinite ease-in-out;
}

/* Typing indicator animation */
.typing-indicator span {
    display: inline-block;
    width: 6px;
    height: 6px;
    background-color: #a1a1aa;
    border-radius: 50%;
    margin: 0 2px;
    animation: typing-bounce 1.4s infinite ease-in-out both;
}

.typing-indicator span:nth-child(1) {
    animation-delay: -0.32s;
}

.typing-indicator span:nth-child(2) {
    animation-delay: -0.16s;
}

@keyframes typing-bounce {

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

    40% {
        transform: scale(1);
    }
}

/* Modal transition helper */
#ai-modal {
    transition: opacity 0.3s ease, pointer-events 0.3s ease;
}

#ai-modal-content {
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.icon {
    display: inline-block;
    flex-shrink: 0;
}

/* Rotating conic gradient border for RGB button */
@keyframes rotate-border {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.rgb-btn {
    position: relative;
    overflow: hidden;
    border: none !important;
    background: transparent !important;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 10px rgba(72, 147, 252, 0.15);
}

.rgb-btn::before {
    content: '';
    position: absolute;
    top: -150%;
    left: -150%;
    width: 400%;
    height: 400%;
    background: conic-gradient(
        from 0deg,
        #4893fc,
        #bd99fe,
        #f59c8e,
        #ffe432,
        #00b95c,
        #4893fc
    );
    animation: rotate-border 4s linear infinite;
    z-index: 1;
}

.rgb-btn::after {
    content: '';
    position: absolute;
    inset: 2px; /* Border thickness (medium) */
    background: rgba(250, 250, 250, 0.9); /* Translucent bg-zinc-50 */
    backdrop-filter: blur(4px);
    transition: background 0.3s ease;
    z-index: 2;
}

.dark .rgb-btn::after {
    background: rgba(24, 24, 27, 0.9); /* Translucent dark:bg-zinc-800/30 */
}

/* Hover background changes */
.rgb-btn:hover::after {
    background: rgba(244, 244, 245, 0.95);
}

.dark .rgb-btn:hover::after {
    background: rgba(32, 32, 36, 0.95);
}

/* Content wrapper style to keep it on top of absolute border layers */
.rgb-btn > * {
    position: relative;
    z-index: 10;
}

/* ── Theme Toggle Icons Visibility ───────────────────────────── */
#theme-toggle .icon {
    display: none;
}
html:not(.dark):not(.liquid) #theme-toggle #icon-sun {
    display: block;
}
html.dark #theme-toggle #icon-moon {
    display: block;
}
html.liquid #theme-toggle #icon-glass {
    display: block;
}

/* ── Liquid Glass Theme ────────────────────────────────────────── */
html.liquid::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 1;
    background: 
        radial-gradient(circle at 15% 25%, rgba(255, 0, 128, 0.12), transparent 45%),
        radial-gradient(circle at 85% 75%, rgba(0, 128, 255, 0.15), transparent 45%),
        radial-gradient(circle at 50% 50%, rgba(128, 0, 255, 0.08), transparent 50%);
    pointer-events: none;
}

html.liquid #card .face-front,
html.liquid #card .face-back {
    background: rgba(20, 20, 25, 0.45) !important;
    backdrop-filter: blur(25px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(25px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 
        0 20px 50px rgba(0, 0, 0, 0.35), 
        inset 0 0 20px rgba(255, 255, 255, 0.05),
        -3px -3px 10px rgba(255, 0, 80, 0.15), 
        3px 3px 10px rgba(0, 200, 255, 0.2) !important;
    color: #e4e4e7 !important;
}

html.liquid #card .face-front::before,
html.liquid #card .face-back::before {
    content: '';
    position: absolute;
    inset: 0;
    border: 1.5px solid transparent;
    background: linear-gradient(120deg, #ff0055, #00ffcc, #0066ff, #ffcc00, #ff0055) border-box;
    background-size: 300% 300%;
    animation: liquid-border-glow 8s linear infinite;
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    pointer-events: none;
    opacity: 0.65;
    z-index: 5;
}

@keyframes liquid-border-glow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Typography & shadows for liquid mode */
html.liquid h1 {
    color: #ffffff !important;
    text-shadow: 
        0.75px 0.75px 0px rgba(255, 0, 80, 0.6), 
        -0.75px -0.75px 0px rgba(0, 200, 255, 0.6), 
        0 2px 4px rgba(0, 0, 0, 0.4) !important;
}

html.liquid h2, 
html.liquid h3, 
html.liquid h4 {
    color: #ffffff !important;
    text-shadow: 
        0.5px 0.5px 0px rgba(255, 0, 80, 0.4), 
        -0.5px -0.5px 0px rgba(0, 200, 255, 0.4), 
        0 1px 3px rgba(0, 0, 0, 0.4) !important;
}

html.liquid p, 
html.liquid span:not(.font-mono) {
    color: #f4f4f5 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4) !important;
}

html.liquid .font-mono {
    color: #e4e4e7 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4) !important;
}

/* Badges, toggles & inputs */
html.liquid #theme-toggle,
html.liquid #status-badge,
html.liquid div:has(> #clock-display),
html.liquid .social-link {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #e4e4e7 !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    transition: all 0.3s ease !important;
}

html.liquid #theme-toggle:hover,
html.liquid .social-link:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
}

html.liquid .rgb-btn::after {
    background: rgba(20, 20, 25, 0.7) !important;
}

html.liquid .rgb-btn:hover::after {
    background: rgba(30, 30, 35, 0.85) !important;
}

/* Nested project items */
html.liquid .project-item {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    transition: all 0.3s ease;
}

html.liquid .project-item:hover {
    background: rgba(255, 255, 255, 0.12) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
}

html.liquid #card a.block {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    transition: all 0.3s ease;
}

html.liquid #card a.block:hover {
    background: rgba(255, 255, 255, 0.12) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
}

/* AI Modal styling override */
html.liquid #ai-modal-content {
    background: rgba(20, 20, 25, 0.65) !important;
    backdrop-filter: blur(30px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(30px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4) !important;
}

html.liquid #ai-modal-content > div:first-child {
    background: rgba(255, 255, 255, 0.03) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

html.liquid #chat-messages {
    background: transparent !important;
}

html.liquid #chat-form {
    background: rgba(255, 255, 255, 0.02) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}

html.liquid #chat-input {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
}

html.liquid #chat-input:focus {
    border-color: rgba(255, 255, 255, 0.35) !important;
}

html.liquid #chat-form button[type="submit"] {
    background: rgba(255, 255, 255, 0.9) !important;
    color: #18181b !important;
    border: none !important;
}

html.liquid #chat-form button[type="submit"]:hover {
    background: #ffffff !important;
}

html.liquid #chat-messages div.bg-zinc-100 {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #f4f4f5 !important;
}

html.liquid #chat-messages div.bg-zinc-900 {
    background: rgba(255, 255, 255, 0.85) !important;
    color: #09090b !important;
    border-color: transparent !important;
}

html.liquid .custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.25) !important;
}