@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap');
:root{--primary-color:#00ff99;--background-color:#10101a;--glass-background:rgba(255,255,255,.05);--text-color:#e0e0e0;--dark-text:#111;--border-color:rgba(255,255,255,.2);--shadow-color:rgba(0,255,153,.5);--font-main:'Poppins',sans-serif;--footer-height:80px}

/* Animation Keyframes */
@keyframes fadeIn{from{opacity:0;transform:translateY(20px) rotate(315deg)}to{opacity:1;transform:translateY(0) rotate(315deg)}}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.1)}}
@keyframes shake{0%,100%{transform:translateX(0)}10%,30%,50%,70%,90%{transform:translateX(-5px)}20%,40%,60%,80%{transform:translateX(5px)}}
@keyframes flip{0%{transform:perspective(400px) rotateY(0)}100%{transform:perspective(400px) rotateY(360deg)}}
@keyframes glow{0%,100%{text-shadow:0 0 10px var(--shadow-color),0 0 20px var(--shadow-color)}50%{text-shadow:0 0 20px #ff00de,0 0 30px #ff00de}}

*{margin:0;padding:0;box-sizing:border-box}
html{height:100%}
body{font-family:var(--font-main);background-color:var(--background-color);color:var(--text-color);overflow-x:hidden;min-height:100vh;padding-bottom:var(--footer-height);position:relative}
.header{position:fixed;top:0;left:0;width:100%;padding:1rem 2rem;display:flex;justify-content:space-between;align-items:center;z-index:100;background:linear-gradient(180deg,rgba(16,16,26,.7) 0,rgba(16,16,26,0) 100%)}
.header__left{display:flex;align-items:center;gap:1.5rem}
.icon-btn{background:0 0;border:none;color:var(--text-color);cursor:pointer;display:flex;align-items:center;gap:.5rem;font-size:1rem;transition:color .3s ease,transform .3s ease; padding: 0.5rem; border-radius: 8px;}
.icon-btn:hover{color:var(--primary-color);transform:scale(1.1); background: var(--glass-background);}
.credits{font-size:.9rem;font-weight:300}
.container{display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:calc(100vh - var(--footer-height));padding:2rem;padding-top:80px}
.section__container{display:flex;justify-content:center;align-items:center;flex-grow:1}
.zigzag__container{display:flex;justify-content:center;flex-wrap:wrap;gap:20px}
.zigzag__item{position:relative;width:80px;height:80px;transform:rotate(315deg);overflow:hidden;opacity:0;animation:fadeIn .5s ease-out forwards}
.zigzag__space{width:40px;height:80px;transform:rotate(315deg);opacity:0;animation:fadeIn .5s ease-out forwards}
.zigzag__item span{position:absolute;inset:5px;background:var(--glass-background);backdrop-filter:blur(10px);border:1px solid var(--border-color);border-radius:8px;display:flex;justify-content:center;align-items:center;transition:all .3s ease-in-out; animation: none;}
.zigzag__item span:hover{background:rgba(0,255,153,.1);transform:scale(1.1);box-shadow:0 0 15px var(--shadow-color)}
.zigzag__item span b{color:var(--text-color);font-size:2em;font-weight:600;transform:rotate(45deg);text-shadow:0 0 10px var(--shadow-color),0 0 20px var(--shadow-color); animation: none;}
.input__container{margin-top:2rem;display:flex;align-items:center;gap:1rem;z-index:10}
#name-input{background:var(--glass-background);border:1px solid var(--border-color);border-radius:8px;padding:.75rem 1rem;color:var(--text-color);font-size:1rem;width:300px;transition:all .3s ease}
#name-input:focus{outline:0;border-color:var(--primary-color);box-shadow:0 0 15px var(--shadow-color)}
#update-name-btn{background-color:var(--primary-color);color:var(--dark-text);border:none;border-radius:8px;padding:.75rem 1.5rem;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s ease}
#update-name-btn:hover{transform:translateY(-3px) scale(1.05);box-shadow:0 5px 20px var(--shadow-color)}

/* ✅ New Effect Styles */
.effect-pulse .zigzag__item span { animation: pulse 2s infinite ease-in-out; }
.effect-shake .zigzag__item span { animation: shake 0.5s infinite; }
.effect-flip .zigzag__item span { animation: flip 2s infinite linear; }
.effect-glow .zigzag__item span b { animation: glow 2s infinite ease-in-out; }

.footer{position:absolute;bottom:0;left:0;width:100%;height:var(--footer-height);display:flex;justify-content:center;align-items:center;z-index:5}
.social-links{display:flex;justify-content:center;gap:1.5rem}
.social-links a{color:var(--text-color);transition:color .3s ease,transform .3s ease}
.social-links a:hover{color:var(--primary-color);transform:translateY(-3px)}
.chatbot-window{position:fixed;top:100px;left:30px;width:350px;max-width:90vw;height:450px;background:var(--glass-background);backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px);border:1px solid var(--border-color);border-radius:12px;z-index:150;display:flex;flex-direction:column;box-shadow:0 10px 30px rgba(0,0,0,.2);transition:opacity .4s ease,transform .4s ease;transform:scale(1)}
.chatbot-window.hidden{opacity:0;transform:scale(.95);pointer-events:none}
.chatbot-header{padding:.75rem 1rem;background:rgba(0,0,0,.2);cursor:grab;display:flex;justify-content:space-between;align-items:center;user-select:none}
.chatbot-header:active{cursor:grabbing}
.chatbot-body{flex-grow:1;padding:1rem;overflow-y:auto;display:flex;flex-direction:column;gap:1rem}
.message{padding:.5rem 1rem;border-radius:12px;max-width:80%;word-wrap:break-word}
.bot-message{background-color:rgba(0,255,153,.1);align-self:flex-start;border-top-left-radius:0}
.user-message{background-color:rgba(100,100,255,.15);align-self:flex-end;border-top-right-radius:0}
.message.loading p{animation:pulse 1.5s infinite ease-in-out}@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
.chatbot-input-area{display:flex;padding:.5rem;border-top:1px solid var(--border-color)}
#chatbot-input{flex-grow:1;background:0 0;border:none;outline:0;color:var(--text-color);padding:.5rem;font-size:1rem}
#chatbot-send-btn{background:var(--primary-color);border:none;border-radius:8px;color:var(--dark-text);padding:.5rem;cursor:pointer;display:grid;place-items:center;transition:transform .2s ease}
#chatbot-send-btn:hover{transform:scale(1.1)}
.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.7);backdrop-filter:blur(5px);display:flex;justify-content:center;align-items:center;z-index:200;opacity:1;transition:opacity .3s ease}
.modal-overlay.hidden{opacity:0;pointer-events:none}
.modal{background:var(--glass-background);border:1px solid var(--border-color);border-radius:12px;padding:2rem;width:90%;max-width:600px;max-height:80vh;display:flex;flex-direction:column;transition:transform .3s ease}
.modal-overlay.hidden .modal{transform:scale(.95)}
.modal-header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--border-color);padding-bottom:1rem;margin-bottom:1rem}
.modal-body{overflow-y:auto;padding-right:1rem}
.modal-body::-webkit-scrollbar{width:8px}
.modal-body::-webkit-scrollbar-track{background:0 0}
.modal-body::-webkit-scrollbar-thumb{background-color:var(--primary-color);border-radius:10px}