* { box-sizing: border-box; margin: 0; padding: 0; }
body { 
  font-family: system-ui, -apple-system, sans-serif; 
  background: #020617; 
  color: #e5e7eb; 
  min-height: 100vh; 
  display: flex; 
  justify-content: center; 
  align-items: center; 
  padding: 20px;
}
.chat-container { 
  width: 100%; 
  max-width: 400px; 
  border: 1px solid rgba(148,163,184,0.35); 
  border-radius: 18px; 
  overflow: hidden; 
  background: rgba(2,6,23,0.95);
  box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5);
}
.chat-header { 
  padding: 16px; 
  border-bottom: 1px solid rgba(148,163,184,0.2); 
  font-weight: 600;
  font-size: 15px;
}
.chat-status { font-size: 12px; opacity: 0.7; margin-top: 4px; }
.chat-messages { 
  height: 400px; 
  overflow-y: auto; 
  padding: 16px; 
}
.message { 
  margin-bottom: 12px; 
  display: flex; 
}
.message.inbound { justify-content: flex-end; }
.message.outbound { justify-content: flex-start; }
.message-bubble { 
  max-width: 80%; 
  padding: 10px 14px; 
  border-radius: 14px; 
  border: 1px solid rgba(148,163,184,0.25);
}
.message.inbound .message-bubble { background: rgba(56,189,248,0.15); }
.message.outbound .message-bubble { background: rgba(148,163,184,0.08); }
.message-meta { font-size: 11px; opacity: 0.6; margin-bottom: 4px; }
.message-text { font-size: 13px; white-space: pre-wrap; line-height: 1.5; }
.chat-input { 
  display: flex; 
  gap: 10px; 
  padding: 16px; 
  border-top: 1px solid rgba(148,163,184,0.2); 
}
.chat-input input { 
  flex: 1; 
  padding: 12px 14px; 
  border-radius: 12px; 
  border: 1px solid rgba(148,163,184,0.35); 
  background: rgba(15,23,42,0.8); 
  color: #e5e7eb; 
  outline: none;
  font-size: 14px;
}
.chat-input input:focus { border-color: #38bdf8; }
.chat-input button { 
  padding: 12px 20px; 
  border-radius: 12px; 
  border: none; 
  background: #0ea5e9; 
  color: white; 
  cursor: pointer;
  font-weight: 500;
  font-size: 14px;
  transition: background 0.2s;
}
.chat-input button:hover { background: #0284c7; }
.chat-input button:disabled { opacity: 0.5; cursor: not-allowed; }
.empty-state { opacity: 0.5; font-size: 13px; text-align: center; padding: 60px 20px; }
.error-state { color: #f87171; font-size: 13px; text-align: center; padding: 20px; }