:root {
  color-scheme: light;
  --ink: #18243a;
  --ink-soft: #31415b;
  --muted: #718096;
  --paper: #f5f7fb;
  --white: #ffffff;
  --line: #e5eaf2;
  --blue: #4169e1;
  --blue-deep: #3153c8;
  --blue-pale: #eaf0ff;
  --teal: #1b9a91;
  --teal-pale: #e3f5f2;
  --gold: #f4b860;
  --serif: 'Manrope', 'DM Sans', 'Segoe UI', sans-serif;
  --sans: 'DM Sans', 'Segoe UI', sans-serif;
  --shadow: 0 24px 70px rgb(34 52 83 / 9%);
}

* { box-sizing: border-box; }
body {
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(ellipse at 74% 8%, rgb(222 232 255 / 62%), transparent 32rem),
    radial-gradient(ellipse at 4% 85%, rgb(226 244 241 / 68%), transparent 28rem),
    var(--paper);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}
button, input, textarea { font: inherit; }
button:focus-visible, input:focus-visible, textarea:focus-visible, a:focus-visible {
  outline: 3px solid rgb(65 105 225 / 38%);
  outline-offset: 3px;
}
.shell { max-width: 1320px; margin: auto; padding: 0 64px; }
.topbar { height: 90px; display: flex; align-items: center; justify-content: space-between; }
.brand { display: flex; align-items: center; gap: 11px; color: var(--ink); text-decoration: none; font: 800 21px var(--serif); letter-spacing: -.8px; }
.brand-ai, .mobile-brand span { color: var(--blue); }
.brand-mark { height: 35px; width: 35px; border-radius: 12px; background: linear-gradient(145deg, var(--blue), #5948bf); color: #fff; display: grid; place-items: center; font: 800 24px var(--serif); box-shadow: 0 5px 12px rgb(65 105 225 / 24%); transform: rotate(-4deg); }
.account-actions, .welcome-actions { display: flex; align-items: center; gap: 12px; }
.button { border: 0; border-radius: 10px; padding: 11px 17px; font: 650 13px var(--sans); cursor: pointer; transition: transform .18s, background .18s, box-shadow .18s; }
.button:hover { transform: translateY(-1px); }
.button-dark { background: linear-gradient(135deg, var(--blue), var(--blue-deep)); color: white; box-shadow: 0 5px 14px rgb(65 105 225 / 19%); }
.button-dark:hover { background: linear-gradient(135deg, #3459ce, #293fa9); box-shadow: 0 8px 18px rgb(65 105 225 / 25%); }
.button-quiet { background: transparent; color: var(--ink-soft); }
.button-quiet:hover { background: #e9edf5; }
.button-large { padding: 15px 21px; font-size: 14px; }
.welcome { max-width: 920px; margin: 108px auto 0; }
.eyebrow { font-size: 10px; font-weight: 750; letter-spacing: 1.6px; color: #66768f; display: flex; align-items: center; gap: 9px; }
.status-dot { display: inline-block; width: 7px; height: 7px; background: var(--teal); border-radius: 50%; box-shadow: 0 0 0 4px var(--teal-pale); }
.welcome h1 { font: 750 clamp(54px, 8vw, 92px)/1.05 var(--serif); letter-spacing: -6px; margin: 25px 0 20px; }
.welcome h1 span { color: var(--blue); }
.intro { color: #687891; font-size: 17px; line-height: 1.75; max-width: 455px; margin: 0 0 30px; }
.welcome-actions .button-quiet { padding-left: 13px; padding-right: 13px; }
.feature-row { border-top: 1px solid #dfe5ef; margin-top: 88px; padding-top: 24px; display: flex; gap: 52px; color: #5e6e85; font-size: 12px; }
.feature-row > div { display: flex; gap: 10px; align-items: center; }
.feature-icon { color: var(--teal); font-size: 17px; }
.hidden { display: none !important; }

/* Signed-in chat */
.chat-view { height: calc(100vh - 90px); min-height: 580px; margin: 0 -64px; background: var(--white); border: 1px solid var(--line); border-bottom: 0; border-radius: 18px 18px 0 0; display: grid; grid-template-columns: 270px 1fr; overflow: hidden; box-shadow: var(--shadow); }
.sidebar { background: #f8faff; border-right: 1px solid var(--line); display: flex; flex-direction: column; padding: 21px 16px 14px; }
.new-chat { width: 100%; text-align: left; padding: 13px 14px; }
.side-label { font-size: 9px; letter-spacing: 1.4px; font-weight: 750; color: #8795aa; margin: 29px 9px 12px; }
.history { display: flex; flex-direction: column; gap: 4px; overflow: auto; }
.history-item { background: none; border: 0; text-align: left; padding: 10px; border-radius: 8px; color: #586982; font: 12px var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.history-item:hover, .history-item.active { background: var(--blue-pale); color: var(--blue-deep); }
.side-bottom { margin-top: auto; border-top: 1px solid var(--line); padding: 15px 4px 3px; display: flex; align-items: center; gap: 10px; }
.avatar { height: 32px; width: 32px; border-radius: 50%; background: linear-gradient(145deg, #dce6ff, #d8f0eb); display: grid; place-items: center; font-size: 12px; font-weight: 750; color: #3d5caa; }
.user-label { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 3px; }
.user-label strong { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-label span { font-size: 10px; color: #929db0; }
.icon-button { border: 0; background: transparent; color: #718096; cursor: pointer; font-size: 17px; border-radius: 7px; }
.icon-button:hover { color: var(--blue); background: var(--blue-pale); }
.conversation { min-width: 0; display: flex; flex-direction: column; }
.conversation-head { height: 55px; border-bottom: 1px solid #edf0f5; display: flex; align-items: center; justify-content: flex-end; padding: 0 27px; }
.private-label { font-size: 10px; color: #7e8ba0; display: flex; align-items: center; gap: 9px; }
.private-label .status-dot { width: 6px; height: 6px; box-shadow: 0 0 0 3px var(--teal-pale); }
.messages { flex: 1; overflow: auto; padding: 30px max(8%, calc((100% - 760px)/2)); }
.empty-chat { height: 100%; min-height: 300px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.orb { height: 60px; width: 60px; border-radius: 21px; background: linear-gradient(145deg, var(--blue-pale), var(--teal-pale)); color: var(--blue); display: grid; place-items: center; font: 800 41px var(--serif); transform: rotate(-5deg); margin-bottom: 17px; }
.empty-chat h2 { font: 700 23px var(--serif); letter-spacing: -.7px; margin: 5px 0 8px; }
.empty-chat p { font-size: 13px; color: #8995a8; margin: 0; }
.message { display: flex; gap: 12px; margin: 22px 0; align-items: flex-start; }
.message.user { justify-content: flex-end; }
.message-bubble { max-width: min(680px, 85%); font-size: 14px; line-height: 1.7; white-space: pre-wrap; }
.message.user .message-bubble { background: var(--blue-pale); color: #263c77; border-radius: 14px 14px 3px 14px; padding: 12px 16px; }
.message.assistant .message-bubble { padding: 4px 0; color: #35435a; }
.message-avatar { flex: none; width: 27px; height: 27px; border-radius: 9px; background: linear-gradient(145deg, var(--blue), #5948bf); color: white; display: grid; place-items: center; font: 700 18px var(--serif); }
.composer { position: relative; max-width: 760px; width: calc(100% - 50px); margin: 0 auto 22px; border: 1px solid #dce3ee; border-radius: 14px; padding: 13px 54px 23px 17px; background: white; box-shadow: 0 8px 30px rgb(34 52 83 / 7%); transition: border-color .18s, box-shadow .18s; }
.composer:focus-within { border-color: #9db2f4; box-shadow: 0 0 0 4px rgb(65 105 225 / 9%), 0 8px 28px rgb(34 52 83 / 7%); }
.composer textarea { resize: none; width: 100%; max-height: 140px; border: 0; outline: 0; background: transparent; font: 14px/1.5 var(--sans); color: var(--ink); }
.composer textarea:focus-visible { outline: none; }
.composer textarea::placeholder { color: #9aa5b5; }
.send-button { position: absolute; right: 12px; top: 11px; width: 33px; height: 33px; border: 0; border-radius: 10px; background: linear-gradient(135deg, var(--blue), var(--blue-deep)); color: white; font-size: 19px; cursor: pointer; transition: transform .18s, box-shadow .18s; }
.send-button:hover { transform: translateY(-1px); box-shadow: 0 5px 12px rgb(65 105 225 / 25%); }
.send-button:disabled { opacity: .45; cursor: wait; }
.composer-note { position: absolute; bottom: 7px; left: 17px; font-size: 9px; color: #9aa5b5; }

/* Account dialog and notifications */
.modal { position: fixed; inset: 0; z-index: 5; display: grid; place-items: center; padding: 20px; }
.modal-backdrop { position: absolute; inset: 0; background: rgb(18 29 49 / 62%); backdrop-filter: blur(5px); }
.modal-card { position: relative; width: min(100%, 410px); background: white; border: 1px solid rgb(255 255 255 / 75%); border-radius: 19px; padding: 35px 39px 28px; box-shadow: 0 24px 80px rgb(14 26 48 / 28%); animation: rise .2s ease; }
.modal-close { position: absolute; right: 17px; top: 14px; border: 0; background: transparent; font-size: 24px; color: #8793a5; cursor: pointer; border-radius: 7px; }
.modal-close:hover { background: #f0f3f8; color: var(--ink); }
.modal-brand { margin-bottom: 23px; }
.modal-card .eyebrow { font-size: 9px; }
.modal-card h2 { font: 700 27px var(--serif); letter-spacing: -1.2px; margin: 12px 0 7px; }
.modal-copy { font-size: 12px; color: #858fa0; margin: 0 0 24px; }
.modal-card label { display: block; font-size: 11px; font-weight: 650; margin: 15px 0 7px; }
.modal-card input { width: 100%; padding: 12px 13px; border: 1px solid #dfe5ef; border-radius: 9px; font: 13px var(--sans); outline: none; transition: border-color .16s, box-shadow .16s; }
.modal-card input:focus { border-color: #8fa7f1; box-shadow: 0 0 0 3px rgb(65 105 225 / 10%); }
.submit-auth { width: 100%; margin-top: 18px; padding: 13px; }
.form-error { min-height: 14px; color: #b34249; font-size: 11px; margin: 8px 0 -9px; }
.switch-mode { text-align: center; font-size: 11px; color: #7c8798; margin: 20px 0; }
.switch-mode button { border: 0; background: none; color: var(--blue-deep); font: 700 11px var(--sans); cursor: pointer; }
.switch-mode button:hover { text-decoration: underline; }
.privacy-note { border-top: 1px solid #edf0f5; padding-top: 16px; font-size: 10px; line-height: 1.5; color: #929cad; text-align: center; }
.toast { position: fixed; bottom: 20px; left: 50%; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; background: #202d46; color: white; border-radius: 9px; padding: 11px 16px; font-size: 12px; transition: .2s; z-index: 8; box-shadow: 0 7px 20px rgb(18 29 49 / 20%); }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.mobile-brand { display: none; }

@keyframes rise { from { transform: translateY(8px); opacity: .6; } to { transform: none; opacity: 1; } }

@media (max-width: 700px) {
  .shell { padding: 0 21px; }
  .topbar { height: 72px; }
  .account-actions { gap: 3px; }
  .account-actions .button { padding: 9px 10px; font-size: 11px; }
  .brand { font-size: 18px; }
  .brand-mark { width: 31px; height: 31px; }
  .welcome { margin: 100px auto 0; }
  .welcome h1 { letter-spacing: -3.5px; font-size: clamp(51px, 14vw, 75px); }
  .intro { font-size: 15px; }
  .feature-row { margin-top: 65px; gap: 14px; flex-wrap: wrap; }
  .feature-row > div { font-size: 10px; }
  .chat-view { height: calc(100vh - 72px); min-height: 520px; margin: 0 -21px; border-radius: 13px 13px 0 0; grid-template-columns: 1fr; }
  .sidebar { display: none; }
  .conversation-head { justify-content: space-between; padding: 0 17px; }
  .mobile-brand { display: inline; font: 800 14px var(--serif); }
  .messages { padding: 20px 18px; }
  .empty-chat h2 { font-size: 20px; }
  .empty-chat p { max-width: 250px; line-height: 1.5; }
  .composer { width: calc(100% - 28px); margin-bottom: 14px; }
  .modal-card { padding: 32px 25px 22px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}