.app-container{max-width:800px;margin:0 auto;padding:20px;font-family:Arial,sans-serif}h1{text-align:center;margin-bottom:20px}.connection-status{text-align:center;padding:8px;margin-bottom:20px;background-color:#f44336;color:#fff;border-radius:4px}.connection-status.connected{background-color:#4caf50}.connection-status.connecting{background-color:#ffc107}.message-container{border:1px solid #ddd;border-radius:4px;height:400px;overflow-y:auto;padding:10px;margin-bottom:20px}.no-messages{text-align:center;color:#888;margin-top:180px}.message{margin-bottom:15px;padding:10px;background-color:#f9f9f9;border-radius:4px}.message-header{display:flex;justify-content:space-between;margin-bottom:5px;font-size:.9em}.sender{font-weight:700}.timestamp{color:#888}.message-body{word-break:break-word}.message-form{display:flex;margin-bottom:20px;gap:10px}.message-input{flex:2;padding:10px;border:1px solid #ddd;border-radius:4px}.sender-input{flex:1;padding:10px;border:1px solid #ddd;border-radius:4px}.send-button{padding:10px 20px;background-color:#4caf50;color:#fff;border:none;border-radius:4px;cursor:pointer}.send-button:disabled{background-color:#ccc;cursor:not-allowed}.config-section{margin-top:30px;padding:15px;border:1px solid #ddd;border-radius:4px;background-color:#f9f9f9}.note{font-size:.8em;color:#666;font-style:italic}