:root {
  --chat-bg: #1a1025;
  --chat-panel: #211630;
  --sender-bubble: #5b3a9e;
  --sender-text: #f0e6ff;
  --receiver-bubble: #2d1f42;
  --receiver-text: #e8dff5;
  --input-bg: #241838;
  --input-border: #8b5cf6;
  --send-btn-bg: #8b5cf6;
  --send-btn-icon: #ffffff;
  --muted: #a89bb8;
  --line: rgba(220, 203, 241, 0.11);
  font-family: "Segoe UI", "Trebuchet MS", sans-serif;
  color: #f5effb;
  background: var(--chat-bg);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }
body { min-width: 320px; min-height: 100vh; margin: 0; background: radial-gradient(ellipse at 50% 0%, rgba(91, 58, 158, 0.17), transparent 48%), var(--chat-bg); }
button, input, textarea { font: inherit; }
button { color: inherit; }
a { color: #cbb1ff; }
.chat-page { padding: 0 24px; }
.chat-shell { width: min(100%, 920px); min-height: 100vh; margin: 0 auto; display: flex; flex-direction: column; }
.chat-header { height: 76px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--line); }
.brand-lockup { display: inline-flex; align-items: center; gap: 11px; color: #f5effb; font-size: 16px; font-weight: 700; text-decoration: none; }
.brand-mark { width: 34px; aspect-ratio: 1; display: grid; place-items: center; border: 1px solid rgba(203, 177, 255, 0.36); border-radius: 9px; color: #e6d6ff; font-size: 11px; letter-spacing: 0; }
.account-tools { display: flex; align-items: center; gap: 14px; }
.account-email { max-width: 260px; overflow: hidden; color: var(--muted); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.quiet-button { width: 36px; aspect-ratio: 1; border: 1px solid var(--line); border-radius: 7px; background: transparent; color: #d8c9e8; cursor: pointer; font-size: 18px; transform: rotate(45deg); }
.quiet-button:hover { border-color: var(--input-border); color: white; }
.chat-panel { flex: 1; min-height: 560px; max-height: calc(100vh - 130px); display: flex; flex-direction: column; margin: 28px 0 16px; overflow: hidden; border: 1px solid var(--line); border-radius: 9px; background: rgba(33, 22, 48, 0.88); box-shadow: 0 22px 70px rgba(0, 0, 0, 0.22); }
.conversation-heading { min-height: 82px; display: flex; align-items: center; justify-content: space-between; padding: 17px 24px; border-bottom: 1px solid var(--line); }
.eyebrow { margin: 0 0 7px; color: #b8a3d2; font-size: 10px; font-weight: 700; letter-spacing: 1.2px; }
.conversation-heading h1, .auth-panel h1 { margin: 0; font-size: 19px; font-weight: 600; letter-spacing: 0; }
.connection-state { display: inline-flex; align-items: center; gap: 7px; color: #b7a9c5; font-size: 12px; }
.connection-state span { width: 7px; aspect-ratio: 1; border-radius: 50%; background: #83d5a5; box-shadow: 0 0 10px rgba(131, 213, 165, 0.5); }
.message-container { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 16px; padding: 24px; overflow-y: auto; scrollbar-color: #513a69 transparent; }
.empty-state { display: flex; align-items: center; gap: 11px; margin: auto; color: #a89bb8; font-size: 13px; }
.message { width: fit-content; max-width: min(78%, 620px); display: flex; align-items: flex-start; gap: 11px; padding: 12px 14px; border: 1px solid transparent; border-radius: 8px; animation: message-in 180ms ease-out both; }
.sender-message { align-self: flex-end; background: var(--sender-bubble); color: var(--sender-text); }
.receiver-message { align-self: flex-start; border-color: rgba(203, 177, 255, 0.08); background: var(--receiver-bubble); color: var(--receiver-text); }
.avatar { width: 26px; aspect-ratio: 1; flex: 0 0 26px; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, 0.13); color: inherit; font-size: 10px; font-weight: 700; }
.lucide {margin: 0 auto 0 auto}
.lucide-user {color: inherit}
.lucide-bot {color: inherit}
.message-content { min-width: 0; }
.message-text { margin: 1px 0 7px; overflow-wrap: anywhere; white-space: pre-wrap; font-size: 14px; line-height: 1.55; }
.message time { color: rgba(239, 229, 249, 0.62); font-size: 10px; }
.composer { padding: 14px 20px 11px; border-top: 1px solid var(--line); background: rgba(18, 11, 27, 0.36); }
.action-bar { min-height: 34px; display: flex; align-items: center; gap: 8px; margin-bottom: 9px; }
.action-label { margin-right: 2px; color: #9c8bad; font-size: 9px; font-weight: 700; letter-spacing: 1px; }
.command-chip { padding: 5px 10px; border: 1px solid rgba(203, 177, 255, 0.2); border-radius: 5px; background: transparent; color: #d4c1ea; cursor: pointer; font-size: 11px; }
.command-chip:hover { border-color: #8b5cf6; background: rgba(139, 92, 246, 0.1); }
.composer-form { min-height: 54px; display: flex; align-items: flex-end; gap: 10px; padding: 7px 8px 7px 13px; border: 1px solid rgba(139, 92, 246, 0.56); border-radius: 7px; background: var(--input-bg); transition: border-color 150ms ease, box-shadow 150ms ease; }
.composer-form:focus-within { border-color: #ad8aff; box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.14); }
.composer-form textarea { width: 100%; min-height: 38px; max-height: 140px; resize: vertical; border: 0; outline: 0; background: transparent; color: #f5effb; font-size: 14px; line-height: 1.45; }
.composer-form textarea::placeholder { color: #91829f; }
.send-button { width: 38px; height: 38px; flex: 0 0 38px; display: grid; place-items: center; border: 0; border-radius: 5px; background: var(--send-btn-bg); color: var(--send-btn-icon); cursor: pointer; transition: background 150ms ease, transform 150ms ease; }
.send-button:hover { background: #a278ff; transform: translateY(-1px); }
.send-button svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.composer-note { margin: 8px 2px 0; color: #91829f; font-size: 10px; }
.chat-footer { display: flex; justify-content: space-between; padding: 0 2px 18px; color: #857793; font-size: 10px; }
.chat-footer span:last-child { letter-spacing: 1px; }
.auth-page { display: grid; place-items: center; padding: 24px; }
.auth-shell { width: min(100%, 420px); animation: rise-in 380ms ease-out both; }
.auth-shell > .brand-lockup { margin: 0 0 25px 3px; }
.auth-panel { padding: 30px; border: 1px solid var(--line); border-radius: 9px; background: rgba(33, 22, 48, 0.9); box-shadow: 0 22px 70px rgba(0, 0, 0, 0.23); }
.auth-panel h1 { font-size: 21px; }
.auth-copy { margin: 9px 0 23px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.auth-form { display: flex; flex-direction: column; }
.auth-form label { margin: 0 0 7px; color: #d7c9e5; font-size: 12px; }
.auth-form input { width: 100%; height: 43px; margin-bottom: 18px; padding: 0 12px; border: 1px solid rgba(203, 177, 255, 0.2); border-radius: 5px; outline: 0; background: var(--input-bg); color: #f5effb; }
.auth-form input:focus { border-color: var(--input-border); box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.13); }
.primary-button { min-height: 44px; display: flex; align-items: center; justify-content: space-between; margin-top: 4px; padding: 0 14px; border: 0; border-radius: 5px; background: var(--send-btn-bg); color: white; cursor: pointer; font-size: 13px; font-weight: 600; }
.primary-button:hover { background: #a278ff; }
.primary-button span { font-size: 18px; }
.form-error { margin: 0 0 17px; padding: 10px 12px; border: 1px solid rgba(255, 128, 145, 0.25); border-radius: 5px; background: rgba(255, 128, 145, 0.08); color: #ffb3bd; font-size: 12px; line-height: 1.5; }
.auth-switch { margin: 19px 0 0; color: var(--muted); font-size: 12px; text-align: center; }
.auth-switch a { margin-left: 3px; color: #d0b7ff; text-decoration: none; }
.auth-switch a:hover { text-decoration: underline; }
.auth-footnote { margin: 17px 0 0; color: #8e809b; font-size: 11px; text-align: center; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; clip-path: inset(50%); }
@keyframes message-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
@keyframes rise-in { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 600px) {
  .chat-page { padding: 0 12px; }
  .chat-header { height: 64px; }
  .chat-panel { min-height: 0; max-height: calc(100vh - 100px); margin: 14px 0 10px; }
  .conversation-heading { min-height: 72px; padding: 14px 16px; }
  .message-container { padding: 16px 12px; gap: 12px; }
  .message { max-width: 90%; gap: 8px; padding: 10px; }
  .message-text { font-size: 13px; }
  .composer { padding: 10px 10px 9px; }
  .account-email { max-width: 130px; font-size: 11px; }
  .auth-panel { padding: 24px 20px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}