*{margin:0;padding:0;box-sizing:border-box}html,body,#root{width:100%;height:100%}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:linear-gradient(135deg,#1a1a2e,#16213e);color:#fff}.container{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;padding:40px 20px;gap:24px}.main-button{padding:24px 64px;font-size:24px;font-weight:600;border:none;border-radius:16px;cursor:pointer;transition:all .2s ease;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;box-shadow:0 4px 20px #667eea66;flex-shrink:0}.main-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 30px #667eea80}.main-button:active:not(:disabled){transform:translateY(0)}.main-button:disabled{opacity:.6;cursor:not-allowed}.main-button.connecting{background:linear-gradient(135deg,#f59e0b,#d97706);box-shadow:0 4px 20px #f59e0b66}.main-button.connected{background:linear-gradient(135deg,#ef4444,#dc2626);box-shadow:0 4px 20px #ef444466}.main-button.connected:hover:not(:disabled){box-shadow:0 8px 30px #ef444480}.chat-history{flex:1;width:100%;max-width:600px;overflow-y:auto;display:flex;flex-direction:column;gap:12px;padding:16px;background:#ffffff0d;border-radius:16px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.chat-message{display:flex;gap:12px;padding:12px 16px;border-radius:12px;background:#ffffff14;line-height:1.5}.chat-message.user{background:#667eea33}.chat-message.bot{background:#4ade8026}.chat-role{font-size:20px;flex-shrink:0}.chat-text{color:#ffffffe6;font-size:16px}