/* Custom Marikit V2 CSS */

body {
    background-color: #f8fafc;
    /* Crisp, clean off-white */
    color: #1e293b;
    margin: 0;
    font-family: 'Inter', sans-serif;
    overscroll-behavior-y: none;
    -webkit-font-smoothing: antialiased;

    /* === Bubble Theme Tokens (Light Mode / Production) === */
    --bubble-bot-bg: linear-gradient(135deg, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.01) 100%);
    --bubble-bot-rim: rgba(0, 0, 0, 0.05);
    --bubble-bot-rim-top: rgba(255, 255, 255, 1);
    --bubble-bot-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.06);
    --bubble-bot-text: #1e293b;
    --bubble-tagalog-color: #7c3aed;        /* vibrant violet */
    --bubble-tagalog-weight: 600;
    --bubble-translation-color: #64748b;   /* slate-500 */
    --bubble-translation-size: 0.88em;
}

/* Dark Mode Bubble Overrides — toggled via isDevelopmentOrStaging */
body.theme-dark {
    background-color: #0b041c;
    color: #f8fafc;

    /* === Bubble Theme Tokens (Dark Mode / Staging) === */
    --bubble-bot-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.02) 100%);
    --bubble-bot-rim: rgba(255, 255, 255, 0.05);
    --bubble-bot-rim-top: rgba(255, 255, 255, 0.35);
    --bubble-bot-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
    --bubble-bot-text: #f8fafc;
    --bubble-tagalog-color: #d946ef;       /* fuchsia-500 or vibrant pink/purple */
    --bubble-tagalog-weight: 600;
    --bubble-translation-color: rgba(255, 255, 255, 0.75);
    --bubble-translation-size: 0.9em;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.no-scrollbar {
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
}

/* The Breathing Pill */
.orb-container {
    width: 140px;
    height: 72px;
    /* Reclaiming vertical space */
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.orb {
    /* Vibrant purple and pink gradient to match branding */
    background: radial-gradient(circle at 30% 30%, #ec4899, #9333ea, #4f46e5);
    box-shadow: 0 0 30px 10px rgba(147, 51, 234, 0.3), inset 0 0 20px rgba(255, 255, 255, 0.8);
    transition: all 0.5s ease-in-out;
}

.orb.breathing {
    animation: breathe 4s infinite ease-in-out;
}

.orb.listening {
    animation: listen-pulse 1.5s infinite ease-in-out;
    background: radial-gradient(circle at 30% 30%, #f43f5e, #ec4899, #a855f7);
    box-shadow: 0 0 50px 15px rgba(236, 72, 153, 0.4), inset 0 0 20px rgba(255, 255, 255, 0.9);
}

.orb.speaking {
    animation: speak-pulse 0.5s infinite alternate ease-in-out;
}

.orb.muted-orb {
    animation: none !important;
    transform: scale(0.95) !important;
    background: radial-gradient(circle at 30% 30%, #cbd5e1, #94a3b8, #64748b) !important;
    box-shadow: 0 0 10px 2px rgba(148, 163, 184, 0.4), inset 0 0 15px rgba(255, 255, 255, 0.4) !important;
    transition: all 0.4s ease-out !important;
}

.orb.disconnecting-orb {
    animation: none !important;
    transform: scale(0.9) !important;
    opacity: 0.6 !important;
    background: radial-gradient(circle at 30% 30%, #ec4899, #9333ea, #4f46e5) !important;
    box-shadow: 0 0 25px 5px rgba(147, 51, 234, 0.2) !important;
    transition: all 0.3s ease-out !important;
}

@keyframes breathe {

    0%,
    100% {
        transform: scale(1);
        opacity: 0.9;
        box-shadow: 0 0 25px 5px rgba(147, 51, 234, 0.2);
    }

    50% {
        transform: scale(1.05);
        opacity: 1;
        box-shadow: 0 0 40px 12px rgba(147, 51, 234, 0.4);
    }
}

@keyframes listen-pulse {

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

    50% {
        transform: scale(1.15);
        box-shadow: 0 0 70px 20px rgba(236, 72, 153, 0.5);
    }
}

@keyframes speak-pulse {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(1.1);
        box-shadow: 0 0 50px 15px rgba(147, 51, 234, 0.5);
    }
}

/* Glassmorphism Sheet */
.glass-sheet {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.05);
}

.pb-safe {
    padding-bottom: calc(env(safe-area-inset-bottom, 24px) + 15px);
}

.pt-safe {
    padding-top: env(safe-area-inset-top, 0px);
}

.marikit-logo-gradient {
    background: linear-gradient(to right, #6366f1, #8b5cf6, #d946ef, #fb7185);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}


.mask-image-fade-edges {
    -webkit-mask-image: linear-gradient(to bottom, transparent, black 20px, black calc(100% - 20px), transparent);
    mask-image: linear-gradient(to bottom, transparent, black 20px, black calc(100% - 20px), transparent);
}

.logo-gradient-text {
    background: linear-gradient(to right, #8b5cf6, #ec4899);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Call Ripple Effect */
.call-ripple {
    position: absolute;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: 2px solid #34d399;
    /* Emerald */
    animation: pebble-ripple 2s infinite cubic-bezier(0.19, 1, 0.22, 1);
    opacity: 0;
    pointer-events: none;
}

.call-ripple-delayed {
    animation-delay: 0.8s;
    /* Timed with the second note of the chime */
}

@keyframes pebble-ripple {
    0% {
        transform: scale(1.3125);
        opacity: 0.8;
        border-width: 4px;
    }

    100% {
        transform: scale(3.90625);
        opacity: 0;
        border-width: 0px;
    }
}

/* Standby Call Pulse (Sonar) */
.standby-pulse {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: #10b981;
    /* emerald-500 */
    opacity: 0.6;
    animation: sonar-ping 2.5s infinite ease-out;
    pointer-events: none;
    z-index: 0;
}

@keyframes sonar-ping {
    0% {
        transform: scale(1);
        opacity: 0.6;
    }

    100% {
        transform: scale(1.8);
        opacity: 0;
    }
}

/* Settings Tooltip (Desktop Only) */
@media (hover: hover) {
    .settings-container::after {
        content: "Change Language & Mode";
        position: absolute;
        bottom: calc(100% + 12px);
        left: 50%;
        transform: translateX(-50%) translateY(0);
        background: #1e293b;
        /* slate-800 */
        color: white;
        padding: 8px 14px;
        border-radius: 12px;
        font-size: 13px;
        font-weight: 600;
        white-space: nowrap;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.2s, transform 0.2s;
        z-index: 50;
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    }

    /* Tooltip Arrow */
    .settings-container::before {
        content: "";
        position: absolute;
        bottom: calc(100% + 6px);
        left: 50%;
        transform: translateX(-50%);
        border-width: 6px;
        border-style: solid;
        border-color: #1e293b transparent transparent transparent;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.2s;
        z-index: 50;
    }

    .settings-container:hover::after,
    .settings-container:hover::before {
        opacity: 1;
        transform: translateX(-50%) translateY(-4px);
    }
}

/* Blur fade for message groups */
.transition-message-enter {
    opacity: 0;
    filter: blur(8px);
    transform: translateY(10px);
}

.transition-message-enter-active {
    opacity: 1;
    filter: blur(0px);
    transform: translateY(0);
    transition: opacity 600ms cubic-bezier(0.16, 1, 0.3, 1), 
                filter 600ms cubic-bezier(0.16, 1, 0.3, 1), 
                transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* ==========================================
   MARIKIT: 2D CSS GRADIENT BLOB (SIRI-STYLE)
   ========================================== */

/* Dark center circle to provide depth (the eye) */
.blob-eye {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 36px;
    height: 36px;
    margin-top: -18px;
    margin-left: -18px;
    border-radius: 50%;
    /* Theme background color */
    background: #0b041c; 
    /* Inset shadow to give a subtle 3D spherical crater feel */
    box-shadow: inset -2px -2px 6px rgba(255, 255, 255, 0.05),
                inset 2px 2px 6px rgba(0, 0, 0, 0.8),
                0 0 10px #0b041c;
    z-index: 15; /* Between the blob (10) and the webgl canvas (20) */
    pointer-events: none;
}

/* Cultural Anchor Watermark (Slow Rotating SVG inside Core) */
.cultural-watermark {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: slowWatermarkSpin 90s linear infinite; /* Premium 90-second slow rotation */
}

.baybayin-ka {
    width: 60%;
    height: 60%;
    color: #4c1d95; /* Muted deep violet/purple */
    opacity: 0.15; /* Extremely subtle etched glass look */
    pointer-events: none;
}

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

/* The bounds holding the blob */
.blob-container {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120px;
    height: 120px;
    margin-top: -60px;
    margin-left: -60px;
    pointer-events: none;
    z-index: 10;
    
    /* Hardware acceleration hints */
    will-change: transform, filter;

    /* The magic Siri melt effect */
    filter: blur(35px) saturate(1.5);
    
    /* Base pulse scale controlled via React inline style */
    transition: filter 0.5s ease-in-out;
}

/* Base rotation wrapper */
.blob-spin {
    width: 100%;
    height: 100%;
    position: relative;
    animation: blobRotate 12s linear infinite;
    transform-origin: center center;
}

/* The structural circles inside the blob */
.blob-core, .blob-ring-1, .blob-ring-2, .blob-ring-3 {
    position: absolute;
    border-radius: 50%;
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    mix-blend-mode: normal;
}

.blob-core {
    width: 60%;
    height: 60%;
    top: 20%;
    left: 20%;
    background: #ffffff;
    box-shadow: 0 0 40px #a5f3fc; /* Cyan base glow */
    z-index: 4;
}

.blob-ring-1 {
    width: 80%;
    height: 80%;
    top: -10%;
    left: 20%;
    background: #c026d3; /* Magenta */
    animation: blobDrift 6s ease-in-out infinite alternate;
    z-index: 3;
}

.blob-ring-2 {
    width: 90%;
    height: 90%;
    bottom: -15%;
    right: 15%;
    background: #7e22ce; /* Deep Purple */
    animation: blobDrift 8s ease-in-out infinite alternate-reverse;
    z-index: 2;
}

.blob-ring-3 {
    width: 70%;
    height: 70%;
    top: 30%;
    left: -10%;
    background: #ec4899; /* Neon Pink */
    animation: blobDrift 7s ease-in-out infinite alternate;
    animation-delay: -3s;
    z-index: 1;
}

/* Continuous Animations */
@keyframes blobRotate {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes blobDrift {
    0%   { transform: translate(0, 0) scale(1.0); }
    100% { transform: translate(15%, 15%) scale(1.1); }
}

/* STATES */

/* Idle: Smaller, cooler colors */
.blob-state-idle {
    filter: blur(15px) saturate(1.2);
}
.blob-state-idle .blob-core { background: #bae6fd; box-shadow: 0 0 20px #38bdf8; }
.blob-state-idle .blob-ring-1 { background: #6366f1; opacity: 0.85; }
.blob-state-idle .blob-ring-2 { background: #312e81; opacity: 0.95;}
.blob-state-idle .blob-ring-3 { background: #0284c7; opacity: 0.75; }

/* Listening: Mid-size, shifting to purple */
.blob-state-listening {
    filter: blur(12px) saturate(1.4);
}
.blob-state-listening .blob-core { background: #e9d5ff; box-shadow: 0 0 30px #a855f7; }
.blob-state-listening .blob-ring-1 { background: #d946ef; opacity: 0.9; }
.blob-state-listening .blob-ring-2 { background: #6b21a8; opacity: 1.0; }
.blob-state-listening .blob-ring-3 { background: #ec4899; opacity: 0.8; }

/* Speaking: Carbon copy of listening physics but with cyan colors */
.blob-state-speaking {
    filter: blur(12px) saturate(1.4);
    /* 15% tighter fit to perfectly hug the diamond stroke */
    width: 102px;
    height: 102px;
    margin-top: -51px;
    margin-left: -51px;
}
.blob-state-speaking .blob-core { background: #e0f2fe; box-shadow: 0 0 30px #7dd3fc; }
.blob-state-speaking .blob-ring-1 { background: #0ea5e9; opacity: 0.9; }
.blob-state-speaking .blob-ring-2 { background: #0369a1; opacity: 1.0; }
.blob-state-speaking .blob-ring-3 { background: #38bdf8; opacity: 0.8; }

/* =========================================================
   Anti-Regression Light Theme Shield
   =========================================================
   GUARDRAIL: Only fires when body.theme-dark is NOT set.
   - Production: body has no theme-dark class → shield activates → white theme
   - Staging/Localhost: App.tsx adds body.theme-dark → shield is bypassed → dark theme
   When App.tsx is copy/pasted from a backup with old dark-mode Tailwind classes,
   the shield intercepts and flips them to white on production automatically.
*/

/* 1. Global Backgrounds */
body:not(.theme-dark) [class*="bg-[#0B041C]"],
body:not(.theme-dark) [class*="bg-[#0B0A1A]"] {
    background-color: #f8fafc !important;
}

/* 2. Global Text Colors */
body:not(.theme-dark) div.font-sans.text-white {
    color: #0f172a !important; /* slate-900 */
}
body:not(.theme-dark) [class*="text-white/90"] {
    color: #0f172a !important;
}
body:not(.theme-dark) [class*="text-purple-300"] {
    color: #64748b !important; /* slate-500 */
}

/* 3. Bottom Fade Gradient */
body:not(.theme-dark) [class*="from-[#0B041C]"],
body:not(.theme-dark) [class*="from-[#0B0A1A]"] {
    --tw-gradient-from: #f8fafc var(--tw-gradient-from-position) !important;
    --tw-gradient-to: rgba(248, 250, 252, 0) var(--tw-gradient-to-position) !important;
    --tw-gradient-stops: var(--tw-gradient-from), rgba(248, 250, 252, 0.9) var(--tw-gradient-via-position), var(--tw-gradient-to) !important;
}

/* 4. Sidebar Lines & Overlays */
body:not(.theme-dark) [class*="border-white/5"] {
    border-color: #e2e8f0 !important; /* slate-200 */
}
body:not(.theme-dark) nav [class*="bg-white/5"] {
    background-color: rgba(0, 0, 0, 0.05) !important;
}

/* 5. Settings/Mute Controls & Sidebars */
body:not(.theme-dark) button[class*="bg-white/10"] {
    background-color: rgba(0, 0, 0, 0.05) !important; /* black/5 */
    border-color: rgba(0, 0, 0, 0.05) !important;
    color: #64748b !important;
}
body:not(.theme-dark) button[class*="hover\:bg-white\/20"]:hover {
    background-color: rgba(0, 0, 0, 0.1) !important; /* black/10 */
}

/* --- Bot Chat Bubble --- */
.bot-chat-bubble {
    color: var(--bubble-bot-text);
    max-width: 80%;
}

.bot-chat-bubble .text-target-lang {
    color: var(--bubble-bot-text);
    font-weight: 500 !important;
    font-size: 17px !important;
    line-height: 1.55 !important;
}

.bot-chat-bubble .highlight-word {
    color: var(--bubble-tagalog-color) !important;
    font-weight: 700 !important;
}

.bot-chat-bubble .text-bridge-lang {
    color: var(--bubble-translation-color) !important;
    font-size: var(--bubble-translation-size) !important; /* 0.9em base */
    font-weight: 300 !important;
    line-height: 1.5 !important;
}

@media (max-width: 768px) {
    .bot-chat-bubble {
        max-width: 95%; /* Stretch horizontally on narrow screens */
    }

    .bot-chat-bubble .text-target-lang {
        font-size: 15px; /* Slightly reduce font size of primary text */
    }

    .bot-chat-bubble .text-bridge-lang {
        font-size: 0.85rem; /* Further reduce English translation to keep blocks compact */
    }
}

/* Chat scroll mask to prevent visualizer overlap clipping */
.chat-scroll-mask {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 100%);
}

@media (min-width: 768px) {
    .chat-scroll-mask {
        -webkit-mask-image: none;
        mask-image: none;
    }
}