:root {
  color-scheme: light;
  --canvas: #f4f5f7;
  --surface: #ffffff;
  --surface-soft: #f7f8fa;
  --surface-chat: #fafafa;
  --text: #18181b;
  --muted: #71717a;
  --line: rgba(24, 24, 27, 0.1);
  --line-strong: rgba(24, 24, 27, 0.16);
  --accent: #811b2a;
  --accent-hover: #6b1622;
  --accent-soft: #fdf2f4;
  --accent-text: #ffffff;
  --danger: #b42318;
  --ok: #16805d;
  --radius: 14px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --canvas: #12141b;
    --surface: #1b1e27;
    --surface-soft: #242833;
    --surface-chat: #151820;
    --text: #f3f4f6;
    --muted: #a1a1aa;
    --line: rgba(255, 255, 255, 0.1);
    --line-strong: rgba(255, 255, 255, 0.17);
    --accent-soft: #3a2027;
  }
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--canvas);
  color: var(--text);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
  overscroll-behavior: none;
}
[hidden] { display: none !important; }
.muted { color: var(--muted); }
.error { color: var(--danger); margin: 0.55rem 0 0; font-size: 0.92rem; }

.offline {
  position: fixed;
  top: var(--safe-top);
  left: 0;
  right: 0;
  z-index: 50;
  padding: 0.3rem 0.75rem;
  background: var(--danger);
  color: #fff;
  text-align: center;
  font-size: 0.85rem;
}

.screen { min-height: 100%; }
.login {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100dvh;
  padding: max(24px, var(--safe-top)) 20px max(24px, var(--safe-bottom));
}
.login-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.94fr) minmax(380px, 1.06fr);
  width: min(1080px, 100%);
  min-height: min(690px, calc(100dvh - 48px));
  overflow: hidden;
  border: 1px solid rgba(24, 24, 27, 0.08);
  border-radius: 28px;
  background: var(--surface);
  box-shadow: 0 28px 80px rgba(24, 24, 27, 0.14);
}
.brand-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 48px;
  overflow: hidden;
  padding: clamp(30px, 4.5vw, 56px);
  color: #fff;
  background:
    radial-gradient(ellipse at 12% 94%, rgba(129, 27, 42, 0.75), transparent 54%),
    linear-gradient(145deg, #12182c 0%, #202844 58%, #302536 100%);
}
.brand-panel::after {
  position: absolute;
  right: -138px;
  bottom: 42px;
  width: 330px;
  height: 330px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 50%;
  content: "";
  pointer-events: none;
}
.brand-lockup, .brand-copy, .brand-foot { position: relative; z-index: 1; }
.brand-lockup { display: flex; align-items: center; gap: 20px; }
.brand-wordmark { display: block; width: 116px; height: 78px; object-fit: contain; }
.brand-divider { width: 1px; height: 48px; background: rgba(255, 255, 255, 0.25); }
.bot-brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.bot-brand-mark { display: block; width: 55px; height: 46px; object-fit: contain; }
.bot-brand-copy { display: flex; flex-direction: column; line-height: 1.25; }
.bot-brand-copy strong { font-size: 17px; font-weight: 650; letter-spacing: -0.02em; }
.bot-brand-copy small { margin-top: 4px; color: rgba(255, 255, 255, 0.68); font-size: 11px; }
.brand-kicker, .eyebrow {
  color: #ffc104;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
}
.brand-copy { max-width: 430px; }
.brand-copy h2 {
  margin: 16px 0 14px;
  font-size: clamp(2.2rem, 4.7vw, 3.6rem);
  font-weight: 650;
  line-height: 1.04;
  letter-spacing: -0.055em;
}
.brand-copy h2 span { color: #ffc104; }
.brand-copy p { max-width: 340px; margin: 0; color: rgba(255, 255, 255, 0.73); font-size: 1rem; }
.brand-foot { display: flex; align-items: center; gap: 9px; color: rgba(255, 255, 255, 0.68); font-size: 0.8rem; }
.secure-dot { width: 8px; height: 8px; border-radius: 50%; background: #50d7a0; box-shadow: 0 0 0 4px rgba(80, 215, 160, 0.12); }

.card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: auto;
  max-width: none;
  padding: clamp(32px, 5vw, 66px);
  border-radius: 0;
  background: var(--surface);
  box-shadow: none;
}
.login-heading { margin-bottom: 1.45rem; }
.login-heading .eyebrow { color: var(--accent); }
.login-heading h1 { margin: 0.65rem 0 0.45rem; font-size: clamp(1.9rem, 3vw, 2.35rem); font-weight: 650; line-height: 1.12; letter-spacing: -0.045em; }
.login-heading p { margin: 0; color: var(--muted); font-size: 0.96rem; }
label { display: block; margin: 0.95rem 0 0.38rem; color: var(--text); font-size: 0.84rem; font-weight: 600; }
input, textarea {
  width: 100%;
  border: 1px solid var(--line-strong);
  border-radius: 11px;
  padding: 0.76rem 0.85rem;
  background: var(--surface-soft);
  color: var(--text);
  font: inherit;
  font-size: 16px;
  transition: border-color 140ms ease, box-shadow 140ms ease, background 140ms ease;
}
input::placeholder, textarea::placeholder { color: #9397a1; }
input:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(129, 27, 42, 0.13); background: var(--surface); }
button {
  min-height: 44px;
  border: 1px solid transparent;
  border-radius: 11px;
  padding: 0.68rem 1rem;
  background: var(--surface-soft);
  color: var(--text);
  font: inherit;
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease, transform 140ms ease;
}
button:focus-visible { outline: 3px solid rgba(47, 62, 159, 0.3); outline-offset: 2px; }
button:hover:not(:disabled) { transform: translateY(-1px); }
button.primary { display: inline-flex; align-items: center; justify-content: center; gap: 0.7rem; background: var(--accent); color: var(--accent-text); font-weight: 650; }
button.primary:hover:not(:disabled) { background: var(--accent-hover); }
button.ghost { background: transparent; color: inherit; padding: 0.5rem 0.75rem; }
button.ghost:hover:not(:disabled) { background: rgba(255, 255, 255, 0.1); }
button:disabled { opacity: 0.55; cursor: default; }
.login .primary { width: 100%; margin-top: 1.15rem; }
.button-arrow { font-size: 1.2rem; line-height: 1; }
.login-foot { display: flex; align-items: flex-start; gap: 8px; margin: 1rem 0 0; color: var(--muted); font-size: 0.73rem; line-height: 1.45; }
.login-foot span { color: var(--ok); font-size: 0.7rem; }

.chat { display: flex; flex-direction: column; width: 100%; height: 100dvh; max-height: 100dvh; background: var(--surface-chat); }
.bar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  min-height: 68px;
  padding: calc(var(--safe-top) + 0.45rem) max(1rem, env(safe-area-inset-right)) 0.45rem max(1rem, env(safe-area-inset-left));
  background: #151a2b;
  color: #fff;
  box-shadow: 0 4px 18px rgba(10, 13, 24, 0.12);
}
.title-brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.chat-mark { display: block; width: 38px; height: 32px; flex-shrink: 0; }
.title { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.title strong { font-size: 1rem; font-weight: 650; letter-spacing: -0.015em; }
.title .muted { overflow: hidden; margin-top: 3px; color: rgba(255, 255, 255, 0.65); font-size: 0.72rem; text-overflow: ellipsis; white-space: nowrap; }
.bar-wordmark { display: block; width: 56px; height: 44px; margin-left: auto; object-fit: contain; opacity: 0.88; }
.bar-actions { display: flex; flex-shrink: 0; gap: 0.15rem; }
.messages {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.75rem;
  min-height: 0;
  overflow-y: auto;
  padding: clamp(1rem, 3vw, 2rem) max(0.85rem, env(safe-area-inset-right)) 1.25rem max(0.85rem, env(safe-area-inset-left));
  -webkit-overflow-scrolling: touch;
}
.msg {
  position: relative;
  max-width: min(92%, 58rem);
  padding: 0.75rem 0.95rem;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: 0 2px 8px rgba(24, 24, 27, 0.035);
  overflow-wrap: anywhere;
  word-wrap: break-word;
}
.msg.user { align-self: flex-end; border-color: transparent; border-bottom-right-radius: 5px; background: var(--accent); color: #fff; white-space: pre-wrap; }
.msg.assistant { align-self: flex-start; padding-left: 2.9rem; border-bottom-left-radius: 5px; }
.msg.assistant::before {
  position: absolute;
  top: 0.8rem;
  left: 0.65rem;
  width: 28px;
  height: 24px;
  background: url("icons/zitybot-mark.svg") center / contain no-repeat;
  content: "";
}
.msg.error { border-color: var(--danger); }
.msg p { margin: 0 0 0.55rem; }
.msg p:last-child { margin-bottom: 0; }
.msg ul, .msg ol { margin: 0.25rem 0 0.55rem; padding-left: 1.2rem; }
.msg code { border-radius: 5px; padding: 0.05rem 0.3rem; background: rgba(127, 127, 127, 0.15); font: 0.88em ui-monospace, SFMono-Regular, Menlo, monospace; }
.msg pre { overflow-x: auto; margin: 0.45rem 0; border-radius: 9px; padding: 0.7rem; background: rgba(0, 0, 0, 0.07); }
.msg pre code { padding: 0; background: none; }
.msg.user code { background: rgba(255, 255, 255, 0.2); }
.actions { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 0.65rem; }
.actions button { background: var(--surface-soft); font-size: 0.9rem; }
.actions button.primary { background: var(--accent); }
.actions button.danger { border-color: var(--danger); background: transparent; color: var(--danger); }
.action-input { display: flex; gap: 0.45rem; width: 100%; margin-top: 0.55rem; }
.action-input input { flex: 1; }
.status { margin: 0; border-top: 1px solid var(--line); padding: 0.45rem 1rem; background: var(--surface); color: var(--muted); font-size: 0.82rem; }
.composer {
  display: flex;
  align-items: flex-end;
  gap: 0.55rem;
  border-top: 1px solid var(--line);
  padding: 0.7rem max(0.85rem, env(safe-area-inset-right)) calc(var(--safe-bottom) + 0.7rem) max(0.85rem, env(safe-area-inset-left));
  background: var(--surface);
}
.composer textarea { flex: 1; max-height: 8.5rem; resize: none; border-color: var(--line); background: var(--surface-soft); }
.composer .primary { min-width: 76px; }

.modal { width: min(92vw, 380px); border: 1px solid var(--line); border-radius: 18px; padding: 1.35rem; background: var(--surface); color: var(--text); box-shadow: 0 24px 70px rgba(0, 0, 0, 0.2); }
.modal::backdrop { background: rgba(14, 16, 25, 0.58); backdrop-filter: blur(3px); }
.modal h2 { margin: 0 0 0.55rem; font-size: 1.2rem; letter-spacing: -0.02em; }
.modal p { margin: 0 0 0.9rem; color: var(--muted); }
.modal .row { display: flex; justify-content: flex-end; gap: 0.55rem; margin-top: 1rem; }

.empty-state { align-self: center; width: min(100%, 580px); margin: auto; padding: 2rem 1.25rem; text-align: center; }
.empty-state-mark { width: 76px; height: 64px; margin: 0 auto 1.1rem; object-fit: contain; }
.empty-state-label { margin: 0 0 0.4rem; color: var(--accent); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.empty-state h2 { margin: 0; font-size: clamp(1.65rem, 5vw, 2.15rem); font-weight: 650; letter-spacing: -0.045em; }
.empty-state p:last-child { max-width: 410px; margin: 0.55rem auto 0; color: var(--muted); }

.typing::after { content: "..."; animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}
@media (max-width: 760px) {
  .login { align-items: flex-start; padding: max(16px, var(--safe-top)) 14px max(18px, var(--safe-bottom)); }
  .login-layout { display: flex; flex-direction: column; width: min(520px, 100%); min-height: 0; border-radius: 22px; }
  .brand-panel { gap: 25px; min-height: 300px; padding: 25px 24px; border-radius: 22px 22px 0 0; }
  .brand-lockup { gap: 12px; }
  .brand-wordmark { width: 92px; height: 63px; }
  .brand-divider { height: 40px; }
  .bot-brand { gap: 8px; }
  .bot-brand-mark { width: 44px; height: 38px; }
  .bot-brand-copy strong { font-size: 15px; }
  .bot-brand-copy small { max-width: 88px; font-size: 9px; }
  .brand-copy h2 { margin: 10px 0 8px; font-size: clamp(1.9rem, 7vw, 2.55rem); }
  .brand-copy p { max-width: 320px; font-size: 0.88rem; }
  .brand-foot { font-size: 0.72rem; }
  .card { padding: 27px 24px 24px; border-radius: 0 0 22px 22px; }
  .login-heading { margin-bottom: 0.8rem; }
  .login-heading h1 { font-size: 1.75rem; }
  .bar { min-height: 62px; gap: 0.35rem; padding-left: max(0.75rem, env(safe-area-inset-left)); padding-right: max(0.65rem, env(safe-area-inset-right)); }
  .title-brand { gap: 8px; }
  .chat-mark { width: 32px; height: 27px; }
  .title strong { font-size: 0.9rem; }
  .title .muted { max-width: 31vw; font-size: 0.65rem; }
  .bar-wordmark { width: 42px; height: 36px; margin-left: 0; }
  .bar-actions { gap: 0; }
  .bar-actions button { min-width: 42px; padding: 0.45rem 0.5rem; font-size: 0.78rem; }
}
@media (max-width: 390px) {
  .brand-lockup { gap: 9px; }
  .brand-wordmark { width: 78px; }
  .brand-divider { margin: 0 1px; }
  .bot-brand-mark { width: 37px; }
  .bot-brand-copy small { max-width: 75px; }
  .bar-wordmark { display: none; }
  .bar-actions button { padding-inline: 0.42rem; font-size: 0.74rem; }
}