.App{display:flex;flex-direction:column;height:100vh;text-align:center}.App-header{background-color:#282c34;padding:20px;color:#fff}.App-header h1{margin:0;font-size:1.5em}.App-body{display:flex;flex-grow:1;overflow:hidden}.App-left-column,.App-right-column,.App-main-column{padding:20px;border:1px solid #ccc}.App-left-column{background-color:#f0f0f0;width:20%}.App-main-column{display:flex;flex-direction:column;background-color:#fff;flex-grow:1}.chat-area{display:flex;flex-direction:column;height:100%;border:1px solid #eee}.message-list{flex-grow:1;overflow-y:auto;padding:10px;border-bottom:1px solid #ddd}.input-area{display:flex;padding:10px;background-color:#f9f9f9}.input-area textarea{flex-grow:1;margin-right:10px;padding:8px;border:1px solid #ccc;border-radius:4px;resize:none;min-height:40px;max-height:120px;overflow-y:auto}.input-area button{padding:8px 15px;border:none;background-color:#007bff;color:#fff;border-radius:4px;cursor:pointer}.App-right-column{background-color:#f0f0f0;width:20%;position:relative}.settings-button{position:absolute;top:10px;right:10px;background:none;border:none;cursor:pointer}.App-footer{background-color:#333;color:#fff;padding:10px;display:none}.App-footer button{background-color:#555;color:#fff;border:none;padding:10px 15px;margin:0 5px;cursor:pointer}.App-footer button:hover{background-color:#777}@media (max-width: 768px){.App-body{flex-direction:column}.App-left-column,.App-right-column{display:none;width:100%;height:calc(100vh - 60px);position:fixed;top:0;left:0;background-color:#f0f0f0;z-index:150;box-sizing:border-box;padding:60px 20px 20px;border:1px solid #ccc;overflow-y:auto}.App-left-column.show,.App-right-column.show{display:block}.App-main-column{width:100%;padding-bottom:70px}.App-footer{display:flex;justify-content:space-around;background-color:#333;color:#fff;padding:10px;box-sizing:border-box;height:60px;position:fixed;bottom:0;left:0;width:100%;z-index:200}}.settings-dialog{background-color:#fff;padding:20px;border-radius:8px;box-shadow:0 2px 10px #0000001a;width:400px;max-width:90%}.settings-dialog h2{margin-top:0;margin-bottom:20px;font-size:1.5em;text-align:center}.settings-dialog div{margin-bottom:15px}.settings-dialog label{display:block;margin-bottom:5px;font-weight:700}.settings-dialog input[type=text]{width:calc(100% - 12px);padding:8px;border:1px solid #ccc;border-radius:4px;box-sizing:border-box}.settings-dialog button{background-color:#007bff;color:#fff;border:none;padding:10px 15px;border-radius:4px;cursor:pointer;display:block;margin:20px auto 0}.settings-dialog button:hover{background-color:#0056b3}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}