:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}h1{font-size:3.2em;line-height:1.1}body{background-color:#202327;color:#f2f3f5;font-family:Roboto,sans-serif;margin:0;padding:0;display:flex;justify-content:center;align-items:center;min-height:100vh}.App{width:100%;max-width:800px;display:flex;flex-direction:column;align-items:center;justify-content:center}.app-header{background-color:#202327;color:#f2f3f5;padding:10px;display:flex;justify-content:center;align-items:center;position:fixed;top:0;left:0;width:100%;z-index:100;box-shadow:0 2px 4px #0003}.app-container{display:flex;flex-direction:column;width:100%;max-width:800px;margin-top:70px;min-height:calc(100vh - 70px)}.logo-container{display:flex;align-items:center;justify-content:center;width:100%}.app-logo{height:50px;width:auto}.chat-container{display:flex;flex-direction:column;flex-grow:1;align-items:center;justify-content:center;height:100%;width:100%;max-width:800px;min-width:none;overflow-y:auto}.chat-header{display:flex;align-items:center;justify-content:center;padding:10px;border-bottom:1px solid #FFFFFF20}.chat-logo{width:150px;height:auto}.chat-messages{flex-grow:1;overflow-y:auto;padding:10px;display:flex;flex-direction:column;gap:10px;margin-bottom:4em}.chat-message{padding:10px 15px;border-radius:15px;max-width:70%;min-width:20%;word-break:break-word;box-shadow:0 2px 4px #0000001a}.user{background-color:#343a40;color:#fff;align-self:flex-end}.model{background-color:#fff0;color:#fff;align-self:flex-start}.server-status,.response-time{font-size:.8rem;color:#ccc;text-align:center;padding:5px}.chat-input{position:fixed;bottom:10px;display:flex;align-items:center;justify-content:center;margin:10px 0;width:70vw;height:60;padding:10px;border-radius:48px;background-color:#2b2b2b;color:#fff6}.chat-input input{border:none;flex-grow:1;font-size:1rem;padding:10px;border-radius:48px;box-sizing:border-box;background-color:#fff0;resize:none;overflow-y:hidden;min-height:40px;max-height:160px;color:#fff6;transition:background-color .3s ease}.chat-input input:focus{outline:none;color:#fff}.chat-input input:not(:placeholder-shown){overflow-y:auto}.chat-input button{display:flex;align-items:center;justify-content:center;border:none;margin:auto;background-color:#ffffff12;border-radius:100px;padding:10px;cursor:pointer;transition:background-color .3s ease;white-space:nowrap}.chat-input input:focus~button{background-color:#fff}.chat-input img{filter:invert(50%);transition:filter .3s ease}.chat-input input:focus~img{filter:invert(0%);background-color:red;opacity:0%}.chat-input button:hover{background-color:#0056b3}.chat-input button:disabled{background-color:#fff0;cursor:not-allowed}@media (max-width: 600px){.chat-container{max-width:95%;min-width:90vw;margin:10px}.chat-message{max-width:90%}}.spinner{border:2px solid rgba(0,0,0,.1);border-left-color:#66d395;border-radius:50%;width:24px;height:24px;animation:spin 1s linear infinite;display:inline-block}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.stop-icon{width:12px;height:12px;background-color:#6c757d;border-radius:2px;transition:background-color .2s ease-in-out}.chat-input button:hover .stop-icon{background-color:#343a40}