:root {
  color-scheme: light;
  --canvas: #f8f7f4;
  --ink: #292c28;
  --muted: #6e7368;
  --accent: #ad6047;
  --sidebar: #242822;
  --line: #e6e5df;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--canvas); color: var(--ink); }
button, textarea, a { -webkit-tap-highlight-color: transparent; }
button, textarea { font: inherit; }
button, a { touch-action: manipulation; }
button { cursor: pointer; }
button:disabled, textarea:disabled { cursor: default; }
a { color: inherit; }
button:focus-visible, a:focus-visible, textarea:focus-visible { outline: 3px solid #b9785d; outline-offset: 4px; }
.icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.icon-definitions { position: absolute; width: 0; height: 0; overflow: hidden; }
.wordmark { display: inline-flex; align-items: center; gap: 10px; font-weight: 630; font-size: 23px; letter-spacing: -.8px; text-decoration: none; }
.wordmark svg { flex-shrink: 0; }
.brand-logo { --logo-height: 32px; display: inline-block; height: var(--logo-height); width: calc(var(--logo-height) * .562); flex-shrink: 0; background: currentColor; mask: url("/assets/jagora-logo.png") 50% 65% / auto 129% no-repeat; }
.status-screen { display: flex; min-height: 100svh; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 24px; text-align: center; color: var(--muted); font-size: 14px; }
.loading-mark { --logo-height: 42px; color: var(--accent); animation: breathe 2s ease-in-out infinite; }
.status-screen h1 { margin: 8px 0 0; font-size: 28px; font-weight: 500; letter-spacing: -.8px; color: var(--ink); }
.status-screen p { margin: 0 0 10px; }
.error-mark { --logo-height: 42px; color: var(--accent); }
.button { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; gap: 18px; padding: 12px 25px; border-radius: 9px; text-decoration: none; font-size: 14px; font-weight: 550; transition: background .15s, transform .15s; }
.button:hover { transform: translateY(-1px); }
.button-primary { background: var(--sidebar); color: #fff; border: 1px solid var(--sidebar); }
.button-primary:hover { background: #363d33; }
.button-secondary { border: 1px solid #d7d6cf; background: transparent; }
.button-secondary:hover { background: #eeede7; }
.preview-tag { border: 1px solid #deddd6; border-radius: 5px; padding: 5px 8px; color: #6c7166; font-size: 10px; line-height: 1; letter-spacing: .35px; white-space: nowrap; }
.welcome-screen { display: flex; flex-direction: column; min-height: 100svh; padding: 35px 48px 24px; }
.welcome-header { display: flex; justify-content: space-between; align-items: center; }
.welcome-content { width: 100%; max-width: 620px; margin: auto; padding: 28px 0 48px; text-align: center; }
.welcome-art { position: relative; width: 206px; height: 172px; margin: 0 auto 27px; display: flex; align-items: center; justify-content: center; }
.welcome-mark { z-index: 1; display: flex; align-items: center; justify-content: center; width: 103px; height: 103px; border-radius: 28px; background: #f0e5db; color: var(--accent); transform: rotate(-8deg); }
.welcome-mark .brand-logo { --logo-height: 68px; transform: rotate(8deg); }
.orbit { position: absolute; width: 196px; height: 100px; border: 1px solid #e4ded4; border-radius: 50%; }
.orbit-one { transform: rotate(-35deg); }
.orbit-two { transform: rotate(35deg); }
.art-dot { position: absolute; z-index: 2; border-radius: 50%; background: #c09c82; }
.dot-one { width: 8px; height: 8px; top: 37px; right: 20px; }
.dot-two { width: 5px; height: 5px; bottom: 34px; left: 21px; background: #a0aa90; }
.eyebrow { color: var(--accent); font-size: 11px; font-weight: 600; letter-spacing: 1.3px; text-transform: uppercase; }
.welcome-content h1 { font-size: clamp(40px, 5vw, 58px); line-height: 1.12; font-weight: 480; letter-spacing: -2.5px; margin: 19px 0; }
.welcome-description { font-size: 15px; line-height: 1.7; color: #6e7368; margin: 0 auto; max-width: 340px; }
.welcome-actions { display: flex; gap: 10px; justify-content: center; margin-top: 29px; }
.welcome-note { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 11px; color: #71776a; margin-top: 23px; }
.status-dot { width: 5px; height: 5px; border-radius: 50%; background: #9aab8b; flex-shrink: 0; }
.welcome-footer { display: flex; justify-content: center; align-items: center; gap: 7px; color: #71776a; font-size: 10px; }
.welcome-footer .icon { width: 13px; height: 13px; }
.auth-error { background: #f7e8df; border-radius: 8px; padding: 12px 18px; margin: 22px auto -10px; max-width: 360px; color: #995338; font-size: 13px; line-height: 1.5; }
.chat-screen { display: flex; height: 100svh; overflow: hidden; }
.sidebar { display: flex; flex-direction: column; width: 256px; flex-shrink: 0; min-height: 0; background: var(--sidebar); color: #eff0e8; padding: 30px 20px 16px; }
.sidebar-heading { display: flex; align-items: center; justify-content: space-between; padding: 0 6px; }
.sidebar .wordmark { font-size: 22px; color: #f0f0e9; }
.new-chat { display: flex; align-items: center; gap: 11px; width: 100%; margin-top: 34px; border: 1px solid #4b5046; border-radius: 8px; padding: 11px 13px; background: #30352d; color: #d6d9ce; font-size: 13px; text-align: left; }
.new-chat .icon { width: 17px; height: 17px; }
.new-chat:hover { background: #3b4235; border-color: #646c5c; }
.conversation-list { flex: 1; min-height: 0; overflow-y: auto; padding: 31px 10px 30px; }
.sidebar-label { color: #8b9383; font-size: 10px; margin: 0; letter-spacing: .3px; }
.sidebar-empty { padding-top: 25px; }
.empty-line { display: block; width: 73%; height: 5px; border-radius: 4px; background: #353b31; margin-bottom: 9px; }
.empty-line.short { width: 49%; }
.sidebar-empty p { color: #9aa191; font-size: 12px; line-height: 1.9; margin-top: 19px; }
.sidebar-bottom { flex-shrink: 0; border-top: 1px solid #3a4034; padding: 19px 7px 0; }
.account-profile { display: flex; align-items: center; gap: 11px; }
.avatar { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: #797b62; color: #f4f3e9; font-size: 12px; font-weight: 500; flex-shrink: 0; }
.account-copy { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.account-name { font-size: 12px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.account-tier { color: #a2aa97; font-size: 10px; }
.account-email { color: #a2aa97; font-size: 10px; margin: 12px 0 7px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.logout-button { display: flex; align-items: center; gap: 9px; margin-left: -6px; padding: 9px 6px; background: none; color: #bac1b0; border: 0; font-size: 11px; border-radius: 4px; }
.logout-button:hover { color: white; }
.logout-button .icon { width: 14px; height: 14px; }
.chat-main { display: flex; flex: 1; min-width: 0; flex-direction: column; min-height: 0; }
.chat-header { display: flex; justify-content: space-between; align-items: center; height: 80px; flex-shrink: 0; padding: 0 37px; }
.chat-header-start { display: flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 500; }
.header-divider { width: 1px; height: 13px; background: #d9dbd1; }
.header-plan { font-size: 11px; color: #6f7468; font-weight: 400; }
.chat-workspace { display: flex; flex-direction: column; flex: 1; min-height: 0; width: 100%; max-width: 900px; margin: 0 auto; padding: 0 48px 25px; }
.empty-chat { display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 1; min-height: 0; overflow-y: auto; padding: 40px 0 52px; text-align: center; }
.chat-mark { display: flex; align-items: center; justify-content: center; width: 76px; height: 76px; border-radius: 24px; color: var(--accent); background: #eee7df; margin-bottom: 27px; }
.chat-mark .brand-logo { --logo-height: 49px; }
.empty-chat .eyebrow { font-size: 10px; margin: 0; color: #757461; letter-spacing: 1.4px; }
.empty-chat h1 { font-size: clamp(33px, 3.5vw, 47px); line-height: 1.16; font-weight: 480; letter-spacing: -1.8px; margin: 17px 0 13px; max-width: 100%; overflow-wrap: anywhere; }
.chat-description { color: #6f7468; font-size: 15px; line-height: 1.6; margin: 0; }
.chat-availability { display: inline-flex; align-items: center; gap: 7px; margin-top: 32px; padding: 7px 10px; border: 1px solid #e0ded4; border-radius: 6px; color: #74725f; font-size: 10px; }
.chat-availability .icon { width: 13px; height: 13px; color: #b09b79; }
.conversation { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 24px 3px 30px; scrollbar-width: thin; scrollbar-color: #d6d8cf transparent; }
.messages { display: flex; flex-direction: column; gap: 28px; }
.message { min-width: 0; }
.message-author { margin: 0 0 9px; color: #747a6c; font-size: 11px; font-weight: 550; }
.message-content { font-size: 14px; line-height: 1.8; white-space: pre-wrap; overflow-wrap: anywhere; }
.message-user { align-self: flex-end; max-width: 90%; }
.message-user .message-author { text-align: right; }
.message-user .message-content { background: #eeeee6; border-radius: 16px 16px 4px 16px; padding: 12px 18px; }
.message-assistant { padding: 0 2px; }
.chat-pending { display: flex; align-items: center; gap: 9px; margin-top: 26px; color: #747a6c; font-size: 12px; }
.thinking-dots { display: inline-flex; gap: 3px; }
.thinking-dots span { width: 4px; height: 4px; border-radius: 50%; background: var(--accent); animation: breathe 1.4s ease-in-out infinite; }
.thinking-dots span:nth-child(2) { animation-delay: .2s; }
.thinking-dots span:nth-child(3) { animation-delay: .4s; }
.composer-area { width: 100%; flex-shrink: 0; }
.composer { border: 1px solid #dedfd6; border-radius: 18px; background: #fffefa; padding: 21px 19px 13px; box-shadow: 0 3px 16px #2b322005; }
.composer:focus-within { border-color: #aeb5a0; }
.composer textarea { display: block; resize: none; width: 100%; min-height: 44px; max-height: 160px; padding: 0 2px; border: 0; background: transparent; color: var(--ink); line-height: 1.6; font-size: 14px; opacity: 1; }
.composer textarea:disabled { color: #a3a598; -webkit-text-fill-color: #a3a598; }
.composer textarea:focus-visible { outline-offset: 5px; outline-width: 2px; }
.composer textarea::placeholder { color: #a3a598; opacity: 1; }
.composer-toolbar { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.icon-button { display: inline-flex; width: 32px; height: 32px; align-items: center; justify-content: center; border: 0; border-radius: 7px; background: transparent; color: inherit; }
.icon-button:hover:enabled { background: #eaece3; }
.composer-add { color: #a4a898; width: 26px; height: 26px; }
.composer-label { color: #818575; font-size: 10px; }
.send-button { display: flex; width: 32px; height: 32px; align-items: center; justify-content: center; margin-left: auto; border: 0; border-radius: 9px; background: #e9eae2; color: #aeb2a2; }
.send-button:enabled { background: var(--sidebar); color: #fffefa; }
.send-button:enabled:hover { background: #414a3b; }
.send-button .icon { width: 18px; height: 18px; }
.chat-error { margin: 0 0 12px; border: 1px solid #e4cbbd; background: #f8ece3; border-radius: 9px; padding: 11px 14px; color: #8b4c37; font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }
.composer-notice { margin: 12px 0 0; text-align: center; color: #747a6c; font-size: 10px; line-height: 1.6; }
.open-sidebar, .close-sidebar, .sidebar-backdrop { display: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.noscript-notice { position: fixed; inset: 0; z-index: 100; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; gap: 5px; background: var(--canvas); padding: 30px; font-size: 14px; line-height: 1.7; text-align: center; }
@keyframes breathe { 50% { opacity: .45; } }
@media (min-height: 850px) { .chat-workspace { padding-bottom: 40px; } .empty-chat { padding-bottom: 100px; } }
@media (max-width: 960px) { .sidebar { width: 226px; padding-left: 16px; padding-right: 16px; } .chat-workspace { padding-left: 30px; padding-right: 30px; } .chat-header { padding-left: 28px; padding-right: 28px; } }
@media (max-width: 700px) {
  .welcome-screen { padding: 25px 24px 22px; }
  .welcome-content { padding-bottom: 30px; }
  .welcome-art { margin-bottom: 12px; }
  .welcome-content h1 { font-size: 43px; letter-spacing: -2px; }
  .welcome-description { max-width: 285px; font-size: 14px; }
  .welcome-note { font-size: 10px; }
  .welcome-actions { flex-direction: column; max-width: 300px; margin-left: auto; margin-right: auto; }
  .welcome-actions .button { width: 100%; }
  .welcome-header .wordmark { font-size: 21px; }
  .chat-header { height: 70px; padding: 0 20px 0 13px; }
  .chat-header-start { gap: 10px; }
  .open-sidebar, .close-sidebar { display: inline-flex; }
  .close-sidebar { color: #b0b8a5; }
  .close-sidebar:hover:enabled { background: #3a4133; }
  .sidebar { position: fixed; top: 0; bottom: 0; left: 0; z-index: 20; width: 270px; max-width: 85vw; min-height: 100%; padding-top: 26px; transform: translateX(-100%); visibility: hidden; transition: transform .2s ease; }
  .sidebar.is-open { transform: translateX(0); visibility: visible; }
  .sidebar-backdrop { display: block; position: fixed; inset: 0; z-index: 19; width: 100%; height: 100%; background: #171d1761; border: 0; }
  .sidebar-open { overflow: hidden; }
  .chat-workspace { padding: 0 20px 24px; }
  .empty-chat { padding: 32px 0 44px; }
  .empty-chat h1 { font-size: 36px; }
  .chat-mark { width: 67px; height: 67px; border-radius: 22px; margin-bottom: 26px; }
  .chat-mark .brand-logo { --logo-height: 43px; }
  .chat-description { font-size: 13px; }
  .chat-availability { margin-top: 27px; }
  .conversation { padding-top: 15px; padding-bottom: 24px; }
  .message-content { font-size: 13px; }
  .message-user { max-width: 94%; }
  .composer { padding: 17px 15px 12px; border-radius: 16px; }
  .composer textarea { font-size: 13px; }
}
@media (max-height: 700px) and (min-width: 701px) { .empty-chat { padding-top: 12px; padding-bottom: 28px; } .chat-mark { width: 61px; height: 61px; margin-bottom: 18px; } .chat-mark .brand-logo { --logo-height: 40px; } .chat-availability { margin-top: 22px; } .empty-chat h1 { font-size: 37px; } }
@media (max-height: 700px) { .welcome-art { height: 130px; transform: scale(.8); margin-top: -10px; margin-bottom: 0; } .welcome-content { padding-top: 20px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }