*{box-sizing:border-box;margin:0;padding:0}:root{--brand-primary: #1976d2;--brand-secondary: #424242;--brand-accent: #4caf50;--brand-background: #f5f5f5;--brand-text: #282828}body{font-family:Roboto,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:var(--brand-background)}.chat-container{display:flex;flex-direction:column;height:100vh;max-width:100%;margin:0 auto;background-color:#fff}.chat-messages{flex:1;overflow-y:auto;padding:1rem}.message{margin-bottom:1rem;padding:.75rem 1rem;border-radius:1rem;max-width:80%;word-wrap:break-word}.user-message{background-color:#e3f2fd;margin-left:auto;border-bottom-right-radius:.25rem}.bot-message{background-color:#f5f5f5;margin-right:auto;border-bottom-left-radius:.25rem}.chat-input{display:flex;padding:1rem;border-top:1px solid #e0e0e0;background-color:#fff}.chat-input input{flex:1;padding:.75rem;border:1px solid #e0e0e0;border-radius:1.5rem;margin-right:.5rem}.chat-input button{padding:.75rem 1.5rem;background-color:var(--brand-primary);color:#fff;border:none;border-radius:1.5rem;cursor:pointer}.chat-input button:hover{background-color:var(--brand-secondary)}@media (min-width: 768px){.chat-container{max-width:768px;border-radius:.5rem;box-shadow:0 2px 10px #0000001a;margin:2rem auto;height:calc(100vh - 4rem)}}