*{padding:0;margin:0;box-sizing:border-box}html{font-family:Montserrat,sans-serif}body{background:#eee;background-image:url(https://www.transparenttextures.com/patterns/cubes.png);height:100%;margin:0}#root{display:flex;flex-direction:column;min-height:100vh}.container{flex:1;display:flex;flex-direction:column}header{display:flex;align-items:center;justify-content:space-between;background-color:#f5ba13;margin:auto;padding:16px 32px;box-shadow:0 0 10px #0000004d;width:100%}header h1{color:#fff;font-family:McLaren,cursive;font-weight:200}.welcome-header-container{display:flex;justify-content:center;align-items:center;gap:20px}.welcome-header-container p{color:#fff}.btn-loggout{background:#f5ba13;color:#fff;border:none;box-shadow:0 1px 3px #0000004d;cursor:pointer;outline:none;font-size:1.1em;padding:1rem;border-radius:20px 2px}footer{text-align:center;width:100%;height:2.5rem;margin-top:8%}footer p{color:#ccc}.notes-box{flex:1;margin:3rem;display:grid;grid-template-columns:repeat(6,1fr);align-items:start;gap:2rem}.note{background:#fff;border-radius:7px;box-shadow:0 2px 5px #ccc;padding:10px}.note h1{font-size:1.1em;margin-bottom:6px}.note p{font-size:1.1em;margin-bottom:10px;white-space:pre-wrap;word-wrap:break-word}.note button{position:relative;float:right;margin-right:10px;color:#f5ba13;border:none;width:36px;height:36px;cursor:pointer;outline:none;border-radius:2px}.tooltip-btn{position:relative;display:inline-block}.tooltip-text{visibility:hidden;background-color:#f5ba13;color:#282828;text-align:center;font-size:.75em;padding:4px 8px;border-radius:4px;position:absolute;z-index:10;top:125%;left:50%;transform:translate(-50%);white-space:nowrap;opacity:0;transition:opacity .2s ease}.tooltip-btn:hover .tooltip-text{visibility:visible;opacity:1}.note.edit{border:#f5ba13 solid;display:flex;flex-direction:column;min-height:170px}.note.edit input{font-weight:600}.note.edit textarea{flex-grow:1;resize:vertical}.edit-icon{font-size:24px}button:hover{transform:scale(1.2);transition:transform .2s ease}form.create-note{position:relative;width:480px;margin:30px auto 20px;background:#fff;padding:15px;border-radius:7px;box-shadow:0 1px 5px #8a8989}.note.edit input,.note.edit textarea,form.create-note input,form.create-note textarea{width:100%;border-top:none;border-left:none;border-right:none;border-bottom:.5px dashed #c3c3c3;padding:4px;outline:none;font-size:1.2em;font-family:inherit;resize:none}.note.edit textarea,form.create-note textarea{border-bottom:none;scrollbar-width:thin;scrollbar-color:#f5ba13 transparent}form.create-note button{position:absolute;right:18px;bottom:-18px;background:#f5ba13;color:#fff;border:none;border-radius:50%;width:36px;height:36px;box-shadow:0 1px 3px #0000004d;cursor:pointer;outline:none}.error-message{color:#d32f2f;font-size:.9em;margin-top:8px;text-align:center}.auth-form{display:flex;justify-content:center;align-items:center;flex-direction:column;gap:2rem;width:22vw;padding-top:2rem;box-shadow:0 1px 3px #0000004d;margin:4rem auto 1rem;border-radius:10px 100px}form h2{color:#282828}.auth-content{display:flex;flex-direction:column;align-items:center;justify-content:center}.auth-box{margin:auto;display:flex;flex-direction:column;position:relative}.auth-box{margin-bottom:1rem}.auth-box label{margin-right:1rem;margin-bottom:.5rem;margin-left:.7rem}.auth-input{padding:.7rem .7rem .7rem 3rem;border:none;border-radius:2px 20px;width:15vw}.auth-icon{position:absolute;top:2rem;margin-left:.7rem;font-size:small;color:#f5ba13}.auth-button{background-color:#f5ba13;border:none;width:15vw;padding:.7rem;border-radius:2px 20px;color:#fff;box-shadow:0 1px 3px #0000004d;cursor:pointer;font-size:1.1em}.auth-error{margin-bottom:2rem;color:#f51313;font-weight:600}.go-to-box{display:flex;align-items:center;justify-content:center;gap:1rem;font-size:.9rem}.chat-container{display:flex;flex-direction:column;align-items:flex-end;padding-right:2rem}#chatbot-toggler{position:fixed;bottom:30px;right:35px;border:none;height:50px;width:50px;display:flex;cursor:pointer;border-radius:50%;background-color:#f5ba13;align-items:center;justify-content:center;transition:all .2s ease}#chatbot-toggler .toggler-icon{position:absolute;color:#fff}.chat-container.show-chat #chatbot-toggler{transform:rotate(90deg)}#chat-toggler .toggler-icon:last-child,.chat-container.show-chat #chatbot-toggler .toggler-icon:first-child{opacity:0}.chat-container.show-chat #chatbot-toggler .toggler-icon:last-child{opacity:1}.chat-popup{position:fixed;opacity:0;pointer-events:none;bottom:90px;right:35px;width:22vw;background-color:#fff;border-radius:15px;box-shadow:0 0 128px #0000001a,0 32px 64px -48px #00000080;overflow:hidden;transform:scale(.2);transform-origin:bottom right;transition:all .1s ease}.chat-container.show-chat .chat-popup{opacity:1;pointer-events:auto;transform:scale(1)}.chat-popup .chat-header{display:flex;padding:15px 22px;align-items:center;justify-content:space-between;background-color:#f5ba13}.chat-header .chat-header-info{display:flex;gap:10px;align-items:center}.chat-header-info svg{height:35px;width:35px;padding:6px;fill:#f5ba13;background-color:#fff;border-radius:50%;flex-shrink:0}.chat-header-info .icon-text{color:#fff;font-size:1.31rem;font-weight:600}.chat-header button{height:40px;width:40px;border:none;outline:none;color:#fff;cursor:pointer;font-size:1.9rem;padding-top:2px;border-radius:50%;margin-right:-10px;background-color:#f5ba13;transition:.2s ease}.chat-header button:hover{background-color:#e2aa11}.chat-body{display:flex;flex-direction:column;gap:20px;height:460px;margin-bottom:82px;overflow-y:auto;padding:25px 22px;scrollbar-width:thin;scrollbar-color:#f5ba13 transparent}.chat-body .message{display:flex;gap:11px;align-items:center}.chat-body .message.error .message-text{color:red}.chat-body .bot-message svg{height:35px;width:35px;padding:6px;flex-shrink:0;align-self:flex-end;margin-bottom:2px;fill:#fff;background-color:#f5ba13;border-radius:50%}.chat-body .message .message-text{padding:12px 16px;max-width:75%;word-wrap:break-word;white-space:pre-line;font-size:.95rem}.chat-body .bot-message .message-text{background-color:#eee;border-radius:13px}.chat-body .user-message{flex-direction:column;align-items:flex-end}.chat-body .user-message .message-text{color:#fff;background-color:#f5ba13;border-radius:13px 13px 3px}.chat-footer{position:absolute;bottom:0;width:100%;background-color:#fff;padding:15px 22px 20px}.chat-footer .chat-form{display:flex;align-items:center;background-color:#fff;outline:1px solid #eee;border-radius:32px;box-shadow:0 0 8px #0000000f}.chat-footer .chat-form:focus-within{outline:2px solid #f5ba13}.chat-form .message-input{border:none;outline:none;background-color:none;width:100%;height:47px;padding:0 17px;font-size:.95rem}.chat-form button{height:35px;width:35px;display:none;border:none;outline:none;cursor:pointer;font-size:1.15rem;color:#fff;flex-shrink:0;margin-right:6px;border-radius:50%;background-color:#f5ba13;transition:.2s ease}.chat-form button:hover{background-color:#e2aa11}.chat-form .message-input:valid~button{display:block}.confirm-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#0006;display:flex;align-items:center;justify-content:center;z-index:999}.confirm-box{background:#fff;padding:20px 30px;border-radius:40px 4px;box-shadow:0 2px 10px #aaa;max-width:400px;text-align:center}.confirm-buttons-box{display:flex;justify-content:center;gap:10px;margin-top:20px}.confirm-buttons-box .confirm-btn{padding:8px 16px;font-weight:700;width:110px;letter-spacing:2px;border-radius:14px 4px}.confirm-btn:hover{background:#ddd}.confirm-btn.danger{background:#f44336;color:#fff}.confirm-btn.danger:hover{background:#d32f2f}@media (max-width: 1650px){.auth-form{width:30vw}.auth-button,.auth-input{width:23vw}.notes-box{grid-template-columns:repeat(5,1fr);gap:1.8rem}.chat-popup{width:26vw}}@media (max-width: 1100px){.auth-form{width:40vw}.auth-button,.auth-input{width:33vw}.notes-box{margin:3rem 2rem;grid-template-columns:repeat(3,1fr);gap:1.6rem}.chat-popup{width:40vw}}@media (max-width: 850px){.auth-form{width:50vw}.auth-button,.auth-input{width:43vw}.notes-box{grid-template-columns:repeat(2,1fr);gap:1.2rem}.chat-popup{width:60vw}}@media (max-width: 520px){.auth-form{width:90vw}.auth-button,.auth-input{width:83vw}.notes-box{margin:3rem 1rem;grid-template-columns:1fr}form.create-note{width:90vw}.chat-popup{width:80vw}.chat-body{height:400px}.welcome-header-container p{opacity:0}}