/* 
  mascot.css
  Ben the Cat — Premium Animated CSS Mascot
  Hyper-detailed with whiskers,nose,inner ears,breathing,and organic movement.
*/

/* ─── Hidden State (User Preference) ─── */
#mascot-container.mascot-hidden{
    display:none !important;
}

#mascot-container{
    position:fixed;
    bottom:40px;
    right:30px;
    width:110px;
    height:auto;
    min-height:110px;
    z-index:9999;
    pointer-events:none;
    display:flex;
    flex-direction:column-reverse;
    align-items:center;
    filter:drop-shadow(0 4px 12px rgba(0,0,0,0.15));
}

.nav-mascot-icon{
    color:var(--text-primary);
    font-size:1.1rem;
    margin-right:8px;
    cursor:pointer;
    transition:transform 0.3s ease,color 0.3s ease;
    vertical-align:middle;
}

.nav-mascot-icon:hover{
    transform:rotate(-15deg) scale(1.2);
    color:#F5A623;
}

#bill-the-cat{
    position:relative;
    width:100%;
    height:100%;
    pointer-events:auto;
    cursor:pointer;
    transition:transform 0.3s ease;
    /* Subtle idle breathing on the whole cat */
    animation:catIdleBreathe 4s ease-in-out infinite;
}

@keyframes catIdleBreathe{
    0%,100%{transform:translateY(0);}
    50%{transform:translateY(-2px);}
}

#bill-the-cat.flip{
    transform:scaleX(-1);
}

/* ─── BASE DESIGN (Hyper-Detailed Cat) ─── */
.bill-body{
    position:absolute;
    bottom:0;
    left:20px;
    width:65px;
    height:52px;
    background:linear-gradient(180deg,var(--text-primary) 0%,color-mix(in srgb,var(--text-primary) 85%,transparent) 100%);
    border-radius:32px 32px 12px 12px;
    transition:all 0.4s cubic-bezier(0.16,1,0.3,1);
}

/* Belly highlight */
.bill-body::after{
    content:'';
    position:absolute;
    bottom:4px;
    left:50%;
    transform:translateX(-50%);
    width:35px;
    height:25px;
    background:rgba(var(--bg-rgb),0.08);
    border-radius:50%;
}

.bill-head{
    position:absolute;
    bottom:38px;
    left:25px;
    width:55px;
    height:48px;
    background:var(--text-primary);
    border-radius:27px 27px 22px 22px;
    transition:all 0.4s cubic-bezier(0.16,1,0.3,1);
    z-index:2;
}

.bill-ear-l,
.bill-ear-r{
    position:absolute;
    top:-12px;
    width:0;
    height:0;
    border-left:11px solid transparent;
    border-right:11px solid transparent;
    border-bottom:28px solid var(--text-primary);
    transition:all 0.4s cubic-bezier(0.16,1,0.3,1);
}

/* Inner ear pink detail */
.bill-ear-l::after,
.bill-ear-r::after{
    content:'';
    position:absolute;
    top:8px;
    left:-5px;
    width:0;
    height:0;
    border-left:5px solid transparent;
    border-right:5px solid transparent;
    border-bottom:14px solid #E8A0BF;
}

.bill-ear-l{
    left:0;
    transform:rotate(-15deg);
}

.bill-ear-r{
    right:0;
    transform:rotate(15deg);
}

/* Eyes — larger,more expressive */
.bill-eye-l,
.bill-eye-r{
    position:absolute;
    top:15px;
    width:10px;
    height:10px;
    background:var(--bg-color);
    border-radius:50%;
    transition:all 0.3s ease;
    /* Pupil */
    box-shadow:inset 2px 0 0 1px rgba(0,0,0,0.3);
}

.bill-eye-l{
    left:12px;
}

.bill-eye-r{
    right:12px;
}

/* Nose */
.bill-nose{
    position:absolute;
    top:25px;
    left:50%;
    transform:translateX(-50%);
    width:6px;
    height:4px;
    background:#E8A0BF;
    border-radius:50% 50% 40% 40%;
}

/* Mouth — tiny W shape */
.bill-mouth{
    position:absolute;
    top:29px;
    left:50%;
    transform:translateX(-50%);
    width:10px;
    height:4px;
    border-bottom:2px solid rgba(var(--bg-rgb),0.3);
    border-radius:0 0 50% 50%;
}

/* Whiskers */
.bill-whiskers-l,
.bill-whiskers-r{
    position:absolute;
    top:26px;
    width:18px;
    height:1px;
    background:rgba(var(--bg-rgb),0.25);
    transition:all 0.3s ease;
}

.bill-whiskers-l{
    left:-6px;
    transform:rotate(-8deg);
}

.bill-whiskers-l::before{
    content:'';
    position:absolute;
    top:-4px;
    left:0;
    width:16px;
    height:1px;
    background:inherit;
    transform:rotate(10deg);
}

.bill-whiskers-r{
    right:-6px;
    transform:rotate(8deg);
}

.bill-whiskers-r::before{
    content:'';
    position:absolute;
    top:-4px;
    right:0;
    width:16px;
    height:1px;
    background:inherit;
    transform:rotate(-10deg);
}

/* The Tail — curvier,more organic */
.bill-tail{
    position:absolute;
    bottom:15px;
    left:3px;
    width:38px;
    height:8px;
    background:var(--text-primary);
    border-radius:4px 0 4px 4px;
    transform-origin:right center;
    transform:rotate(25deg);
    transition:all 0.4s cubic-bezier(0.16,1,0.3,1);
    /* Tail tip */
}

.bill-tail::after{
    content:'';
    position:absolute;
    left:-6px;
    top:-2px;
    width:10px;
    height:10px;
    background:var(--text-primary);
    border-radius:50%;
}

/* ─── ANIMATION STATES ─── */

/* 1. Blink (Default active loop) */
@keyframes billBlink{

    0%,
    96%,
    100%{
        height:8px;
        top:15px;
}

    98%{
        height:1px;
        top:18px;
}
}

#bill-the-cat:not(.sad):not(.sleeping) .bill-eye-l,
#bill-the-cat:not(.sad):not(.sleeping) .bill-eye-r{
    animation:billBlink 4s infinite;
}

/* 2. Happy (Streak Increase) */
#bill-the-cat.happy .bill-head{
    bottom:40px;
}

#bill-the-cat.happy .bill-eye-l,
#bill-the-cat.happy .bill-eye-r{
    border-radius:0;
    height:4px;
    top:15px;
    background:transparent;
    border-top:4px solid var(--bg-color);
}

#bill-the-cat.happy .bill-tail{
    animation:tailWag 0.3s infinite alternate;
}

@keyframes tailWag{
    0%{
        transform:rotate(10deg);
}

    100%{
        transform:rotate(50deg);
}
}

/* 3. Sad (Streak Loss) */
#bill-the-cat.sad .bill-ear-l{
    top:-5px;
    transform:rotate(-45deg);
}

#bill-the-cat.sad .bill-ear-r{
    top:-5px;
    transform:rotate(45deg);
}

#bill-the-cat.sad .bill-eye-l,
#bill-the-cat.sad .bill-eye-r{
    height:4px;
    border-radius:2px;
    top:18px;
}

#bill-the-cat.sad .bill-head{
    bottom:30px;
}

#bill-the-cat.sad .bill-tail{
    transform:rotate(-10deg);
}

/* 4. Sleeping (Idle for a while) */
@keyframes breathe{

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

    50%{
        transform:scaleY(1.05);
}
}

#bill-the-cat.sleeping .bill-body{
    height:40px;
    width:70px;
    left:15px;
    border-radius:20px;
    animation:breathe 3s infinite;
}

#bill-the-cat.sleeping .bill-head{
    bottom:10px;
    left:45px;
    transform:rotate(20deg);
}

#bill-the-cat.sleeping .bill-eye-l,
#bill-the-cat.sleeping .bill-eye-r{
    height:2px;
    top:20px;
    border-radius:0;
}

#bill-the-cat.sleeping .bill-tail{
    bottom:5px;
    left:-10px;
    transform:rotate(10deg);
}

/* ZZZ Particles for sleep */
.bill-zzz{
    position:absolute;
    top:10px;
    right:10px;
    font-size:14px;
    font-weight:bold;
    color:var(--text-secondary);
    opacity:0;
    pointer-events:none;
}

#bill-the-cat.sleeping .bill-zzz{
    animation:floatZzz 3s infinite;
}

@keyframes floatZzz{
    0%{
        transform:translate(0,0) scale(0.5);
        opacity:0;
}

    30%{
        opacity:1;
}

    100%{
        transform:translate(15px,-30px) scale(1.5);
        opacity:0;
}
}

/* 5. Walking (Random movement) */
@keyframes walkBounce{

    0%,
    100%{
        bottom:0;
}

    50%{
        bottom:3px;
}
}

#bill-the-cat.walking .bill-body,
#bill-the-cat.walking .bill-head{
    animation:walkBounce 0.3s infinite;
}

#bill-the-cat.walking .bill-tail{
    animation:tailWag 0.5s infinite alternate;
}

/* A small bowl for when he eats */
.bill-bowl{
    position:absolute;
    bottom:0;
    left:65px;
    width:20px;
    height:10px;
    background:var(--accent-color);
    border-radius:2px 2px 10px 10px;
    opacity:0;
    transition:opacity 0.3s ease;
}

/* 6. Eating (idle variant) */
#bill-the-cat.eating .bill-bowl{
    opacity:1;
}

#bill-the-cat.eating .bill-head{
    bottom:15px;
    left:35px;
    transform:rotate(30deg);
    animation:eatNom 0.4s infinite;
}

@keyframes eatNom{

    0%,
    100%{
        transform:rotate(30deg);
}

    50%{
        transform:rotate(40deg);
}
}

/* 7. Invigilator (Focused / Static) */
#bill-the-cat.invigilator .bill-eye-l,
#bill-the-cat.invigilator .bill-eye-r{
    animation:none;
    /* No blinking in serious mode */
    height:10px;
    top:13px;
    background:#FFD700;
    /* Golden eyes for hyper-focus */
}

/* 8. Suspicious (Narrowed eyes / stern) */
#bill-the-cat.suspicious .bill-head{
    transform:rotate(-10deg);
}

#bill-the-cat.suspicious .bill-eye-l,
#bill-the-cat.suspicious .bill-eye-r{
    height:2px;
    top:18px;
    background:#FF0000;
    /* Red "alert" eyes */
    border-radius:0;
}

#bill-the-cat.suspicious .bill-ear-l,
#bill-the-cat.suspicious .bill-ear-r{
    top:-5px;
}

#bill-the-cat.stretching .bill-tail{
    transform:rotate(60deg) scaleX(1.2);
    animation:tailWag 0.5s infinite alternate;
}

/* 10. Thinking (Concentrating on a fix) */
#bill-the-cat.thinking .bill-eye-l,
#bill-the-cat.thinking .bill-eye-r{
    height:2px;
    top:18px;
    background:#888888;
    /* Grey focus */
    border-radius:0;
}

#bill-the-cat.thinking .bill-tail{
    animation:tailWag 0.2s infinite alternate;
    /* Fast twitch */
}

#bill-the-cat.thinking .bill-head{
    transform:rotate(-5deg);
}

/* Message Bubble */
.bill-bubble{
    position:relative;
    margin-bottom:25px;
    background:rgba(var(--bg-rgb),0.85);
    /* Semi-transparent theme background */
    backdrop-filter:blur(10px);
    /* Premium glass effect */
    -webkit-backdrop-filter:blur(10px);
    border:1px solid var(--border-color);
    padding:16px 20px;
    border-radius:20px 20px 0 20px;
    font-size:0.9rem;
    color:var(--text-primary);
    box-shadow:0 10px 40px rgba(0,0,0,0.4);
    white-space:pre-wrap;
    width:380px;
    max-width:85vw;
    max-height:50vh;
    overflow-y:auto;
    line-height:1.5;
    word-wrap:break-word;
    overflow-wrap:break-word;
    opacity:0;
    transform:translateY(10px);
    transition:all 0.4s cubic-bezier(0.175,0.885,0.32,1.275);
    pointer-events:auto;
    z-index:10000;
}

.bill-bubble::-webkit-scrollbar{
    width:4px;
}

.bill-bubble::-webkit-scrollbar-thumb{
    background:var(--accent-color);
    border-radius:4px;
    opacity:0.3;
}

/* Centralized Chat Modal */
.ben-chat-modal{
    position:fixed;
    top:0;
    left:0;
    width:100vw;
    height:100vh;
    background:rgba(0,0,0,0.4);
    backdrop-filter:blur(8px);
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:20000;
    opacity:0;
    pointer-events:none;
    transition:opacity 0.3s ease;
}

.ben-chat-modal.active{
    opacity:1;
    pointer-events:auto;
}

.ben-chat-container{
    width:90%;
    max-width:600px;
    height:70vh;
    background:var(--surface-color);
    border:1px solid var(--border-color);
    border-radius:24px;
    display:flex;
    flex-direction:column;
    overflow:hidden;
    box-shadow:0 20px 50px rgba(0,0,0,0.3);
    transform:translateY(20px) scale(0.95);
    transition:all 0.4s cubic-bezier(0.19,1,0.22,1);
}

.ben-chat-modal.active .ben-chat-container{
    transform:translateY(0) scale(1);
}

.ben-chat-header{
    padding:24px;
    background:var(--bg-color);
    border-bottom:1px solid var(--border-color);
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.ben-chat-header h2{
    font-size:1.25rem;
    font-weight:700;
    margin:0;
    display:flex;
    align-items:center;
    gap:12px;
}

.ben-chat-header .close-btn{
    background:none;
    border:none;
    color:var(--text-secondary);
    font-size:1.5rem;
    cursor:pointer;
    transition:color 0.2s;
}

.ben-chat-header .close-btn:hover{
    color:#ff4444;
}

.ben-chat-history{
    flex:1;
    overflow-y:auto;
    padding:24px;
    display:flex;
    flex-direction:column;
    gap:16px;
    background:var(--surface-color);
}

.ben-chat-history::-webkit-scrollbar{
    width:6px;
}

.ben-chat-history::-webkit-scrollbar-thumb{
    background:var(--border-color);
    border-radius:10px;
}

.chat-msg{
    max-width:80%;
    padding:12px 18px;
    border-radius:18px;
    font-size:0.95rem;
    line-height:1.5;
    word-wrap:break-word;
    word-break:break-word;
    overflow-wrap:break-word;
    animation:msgFadeUp 0.3s ease forwards;
}

.chat-msg p {
    margin: 0 0 0.5rem 0;
}
.chat-msg p:last-child {
    margin-bottom: 0;
}
.chat-msg h1, .chat-msg h2, .chat-msg h3 {
    margin: 0.5rem 0;
    font-size: 1.1rem;
    font-weight: 700;
}

@keyframes msgFadeUp{
    from{
        opacity:0;
        transform:translateY(10px);
}

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

.chat-msg.ben{
    align-self:flex-start;
    background:var(--bg-color);
    color:var(--text-primary);
    border-bottom-left-radius:4px;
}

.chat-msg.user{
    align-self:flex-end;
    background:var(--accent-color);
    color:var(--bg-color);
    border-bottom-right-radius:4px;
}

.ben-chat-input-wrapper{
    padding:24px;
    background:var(--bg-color);
    border-top:1px solid var(--border-color);
    display:flex;
    gap:12px;
    align-items:center;
}

.ben-chat-input-wrapper input{
    flex:1;
    background:var(--surface-color);
    border:1px solid var(--border-color);
    color:var(--text-primary);
    padding:14px 20px;
    border-radius:100px;
    font-size:1rem;
    outline:none;
    transition:border-color 0.2s;
}

.ben-chat-input-wrapper input:focus{
    border-color:var(--accent-color);
}

.ben-chat-input-wrapper button{
    width:48px;
    height:48px;
    border-radius:50%;
    background:var(--accent-color);
    color:var(--bg-color);
    border:none;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.1rem;
    transition:transform 0.2s,background 0.2s;
}

.ben-chat-input-wrapper button:hover{
    transform:scale(1.05);
    background:var(--accent-hover);
}

.ben-chat-input-wrapper button:active{
    transform:scale(0.95);
}

.typing-indicator{
    font-style:italic;
    font-size:0.85rem;
    color:var(--text-secondary);
    margin-bottom:8px;
    display:none;
}

.typing-indicator.active{
    display:block;
}

/* Loading Dots */
.loading-dots::after{
    content:'...';
    display:inline-block;
    animation:dots 1.5s infinite;
    width:1em;
    text-align:left;
}

@keyframes dots{

    0%,
    20%{
        content:'.';
}

    40%{
        content:'..';
}

    60%,
    100%{
        content:'...';
}
}

.bill-bubble.show{
    opacity:1;
    transform:translateY(0);
}

/* Fix bubble mirroring if cat is flipped */
#bill-the-cat.flip~.bill-bubble{
    border-radius:20px 20px 20px 0;
}

/* ─── GRAND ENTRANCE EASTER EGG (Landing Page) ─── */
#bill-spotlight-overlay{
    position:fixed;
    top:0;
    left:0;
    width:100vw;
    height:100vh;
    background:rgba(0,0,0,0.95);
    backdrop-filter:blur(0px);
    -webkit-backdrop-filter:blur(0px);
    z-index:999;
    opacity:0;
    transition:opacity 3s ease,backdrop-filter 3s ease,-webkit-backdrop-filter 3s ease;
    pointer-events:none;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    padding-top:10vh;
}

#bill-spotlight-overlay.active{
    opacity:1;
    pointer-events:auto;
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
}

/* ─── TOOLTIP ─── */
.ben-tooltip {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    background: var(--surface-color);
    color: var(--text-primary);
    padding: 6px 14px;
    border-radius: 100px;
    font-size: 0.75rem;
    font-weight: 600;
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s cubic-bezier(0.19,1,0.22,1);
    border: 1px solid var(--border-color);
    box-shadow: 0 6px 16px rgba(0,0,0,0.15);
    white-space: nowrap;
    z-index: 99999;
}

#bill-the-cat:hover ~ .ben-tooltip {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.spotlight-circle{
    position:absolute;
    width:350px;
    height:350px;
    background:radial-gradient(circle,rgba(255,255,255,0.45) 0%,transparent 75%);
    border-radius:50%;
    transform:translate(-50%,-50%) scale(0);
    transition:transform 1.5s cubic-bezier(0.16,1,0.3,1);
    box-shadow:0 0 120px rgba(255,255,255,0.25);
    top:75%;
    left:50%;
}

#bill-spotlight-overlay.active .spotlight-circle{
    transform:translate(-50%,-50%) scale(1);
    animation:spotlightPulse 3s infinite alternate ease-in-out;
}

@keyframes spotlightPulse{
    from{
        transform:translate(-50%,-50%) scale(1);
        opacity:0.8;
}

    to{
        transform:translate(-50%,-50%) scale(1.1);
        opacity:1;
}
}

.bill-announcement{
    color:#FFFFFF;
    font-family:'Playfair Display',serif;
    font-weight:700;
    font-style:italic;
    font-size:3rem;
    text-align:center;
    max-width:900px;
    opacity:0;
    transform:translateY(40px) scale(0.95);
    transition:all 1.5s cubic-bezier(0.16,1,0.3,1) 0.8s;
    z-index:1001;
    letter-spacing:-0.01em;
    margin-bottom:550px;
    text-shadow:0 4px 30px rgba(0,0,0,0.5);
}

#bill-spotlight-overlay.active .bill-announcement{
    opacity:1;
    transform:translateY(0) scale(1);
}

/* Specific positioning for Bill during entrance */
#mascot-container.grand-entrance{
    z-index:1000 !important;
    bottom:25% !important;
    right:50% !important;
    left:auto !important;
    transform:translate(50%,50%) !important;
    transition:none !important;
}