*{margin:0;padding:0;box-sizing:border-box;font-family:"monospace"}html,body{height:100%;width:100%}html{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif}main{height:50vh;width:100%;background-color:#2d2d2d;color:#fff}main section{height:100vh;width:100%;display:flex;justify-content:center;align-items:center}main .conversation-area{height:95vh;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;position:relative}main .conversation-area .loading-overlay{position:absolute;inset:0;background:#2d2d2df2;display:flex;flex-direction:column;justify-content:center;align-items:center;z-index:10}main .conversation-area .loading-overlay .loading-text{font-size:24px;margin-bottom:10px}main .conversation-area .loading-overlay .loading-subtitle{font-size:14px;color:#ccc}main .conversation-area .messages{flex:1;width:70%;display:flex;flex-direction:column;gap:1.5em;padding:.5em;overflow-y:auto;padding-bottom:1rem;font-size:18px}main .conversation-area .messages .message{width:fit-content;padding:.5em 1em;background-color:#4a4a4a;border-radius:.5em;color:#f8f3f3;max-width:80%;word-wrap:break-word}main .conversation-area .messages .message.user{align-self:flex-end;background-color:#4a4a4a}main .conversation-area .messages .message.assistant.loading{background-color:#3a3a3a}main .conversation-area .messages .message .typing-indicator{display:flex;gap:4px}main .conversation-area .messages .message .typing-indicator span{height:8px;width:8px;background-color:#bbb;border-radius:50%;display:inline-block;animation:typing 1.4s infinite ease-in-out}main .conversation-area .messages .message .typing-indicator span:nth-child(1){animation-delay:-.32s}main .conversation-area .messages .message .typing-indicator span:nth-child(2){animation-delay:-.16s}main .conversation-area .quick-replies{display:flex;gap:10px;margin-bottom:15px;flex-wrap:wrap;justify-content:center;max-width:70%}main .conversation-area .quick-replies .quick-reply-btn{padding:8px 16px;background:#3a3a3a;border:1px solid #555;border-radius:20px;color:#fff;cursor:pointer;font-size:14px;transition:background .2s}main .conversation-area .quick-replies .quick-reply-btn:hover:not(:disabled){background:#4a4a4a}main .conversation-area .quick-replies .quick-reply-btn:disabled{opacity:.5;cursor:not-allowed}main .conversation-area .input-area{width:70%;height:50px;background-color:#3c3c3c;border:1px solid #555;border-radius:.5em;display:flex;align-items:center}main .conversation-area .input-area input{flex:1;padding:.5em .7em;outline:none;background-color:transparent;border:none;color:#e3d6d6;font-size:18px}main .conversation-area .input-area input:disabled{opacity:.6}main .conversation-area .input-area button{width:80px;height:100%;background-color:#2d2d2d;color:#fff;border:none;border-radius:0 .45rem .45rem 0;cursor:pointer;font-size:16px}main .conversation-area .input-area button:disabled{background-color:#2d2d2d;cursor:not-allowed}@keyframes typing{0%,80%,to{transform:scale(.8);opacity:.5}40%{transform:scale(1);opacity:1}}.messages::-webkit-scrollbar{width:8px}.messages::-webkit-scrollbar-track{background:#2d2d2d}.messages::-webkit-scrollbar-thumb{background:#555;border-radius:4px}.messages::-webkit-scrollbar-thumb:hover{background:#777}