:root {
  color-scheme: light dark;
  --accent: var(--tg-theme-button-color, #2481cc);
  --accent-ink: var(--tg-theme-button-text-color, #fff);
  --ink: var(--tg-theme-text-color, #0f1419);
  --hint: var(--tg-theme-hint-color, #5c6670);
  --bg: var(--tg-theme-bg-color, #fff);
  --panel: var(--tg-theme-secondary-bg-color, #f0f2f5);
  --accent-tint: color-mix(in oklch, var(--accent) 12%, var(--bg));
  --accent-tint-strong: color-mix(in oklch, var(--accent) 22%, var(--bg));
  --hairline: color-mix(in oklch, var(--hint) 30%, transparent);

  /* signature: the notary seal — official-document world of employment
     records. Used sparingly: verification moments only, never for
     ordinary interactive states (those stay on --accent). */
  --seal: #b0402a;
  --seal-tint: color-mix(in oklch, var(--seal) 14%, var(--bg));
  --seal-tint-strong: color-mix(in oklch, var(--seal) 24%, var(--bg));
  --mono: ui-monospace, "SF Mono", "Menlo", "Consolas", monospace;
  /* a document serif for headings only — ledger/registry register, kept off
     body text so reading speed in the chat itself never suffers */
  --serif: ui-serif, "New York", "Iowan Old Style", "Georgia", "Times New Roman", serif;

  --ease-out-quart: cubic-bezier(.25,1,.5,1);
  --ease-out-expo: cubic-bezier(.16,1,.3,1);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, "SF Pro Text", system-ui, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--ink);
}

#app {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
}

/* ---------- gate (first-run / continue-or-restart) ---------- */

#gate {
  position: relative;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 32px 28px;
  background-color: var(--bg);
  background-image:
    radial-gradient(640px circle at 50% 0%, color-mix(in oklch, var(--seal) 7%, transparent), transparent 60%),
    repeating-linear-gradient(25deg, color-mix(in oklch, var(--seal) 5%, transparent) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(-25deg, color-mix(in oklch, var(--seal) 5%, transparent) 0 1px, transparent 1px 7px);
}

.lang-toggle {
  border: 1px solid color-mix(in oklch, var(--seal) 45%, var(--hairline));
  background: none;
  color: var(--seal);
  font: inherit;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 6px 11px;
  border-radius: 8px;
  cursor: pointer;
  transition: transform 140ms cubic-bezier(.22,1,.36,1), opacity 140ms ease;
}
.lang-toggle:active { transform: scale(0.94); }

#lang-toggle-gate {
  position: absolute;
  top: 18px;
  right: 18px;
}

#lang-toggle-app {
  margin-left: auto;
  flex-shrink: 0;
}

@media (prefers-reduced-motion: reduce) {
  .lang-toggle { transition: none; }
}

.gate-seal {
  width: 76px;
  height: 76px;
  margin: 0 auto 18px;
  color: var(--seal);
  transform: rotate(-6deg);
}
.gate-seal svg { width: 100%; height: 100%; }

.gate-seal {
  animation: seal-stamp 420ms var(--ease-out-expo) both;
}

#gate h1 {
  margin: 0 0 10px;
  font-family: var(--serif);
  font-size: 23px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
#gate > p {
  margin: 0 0 30px;
  max-width: 32ch;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--hint);
  text-wrap: pretty;
}

#gate-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-width: 280px;
}

.gate-btn {
  width: 100%;
  padding: 13px 16px;
  border-radius: 12px;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 140ms cubic-bezier(.22,1,.36,1), opacity 140ms ease;
}
.gate-btn:active { transform: scale(0.97); }

.gate-btn-primary {
  border: none;
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: 0 2px 10px color-mix(in oklch, var(--accent) 30%, transparent);
}
.gate-btn-secondary {
  border: 1px solid color-mix(in oklch, var(--seal) 45%, var(--hairline));
  background: none;
  color: var(--seal);
}

.gate-loading {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--hint);
  letter-spacing: 0.02em;
}

.gate-footnote {
  margin-top: 22px;
  border: none;
  background: none;
  color: var(--hint);
  font: inherit;
  font-size: 12px;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
  .gate-btn { transition: none; }
}

/* ---------- header ---------- */

#app-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--hairline);
  flex-shrink: 0;
}

/* rounded-square "personnel file" photo frame, not a circle —
   deliberately different from the generic chat-avatar-in-a-bubble default */
#app-header .avatar {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 11px;
  background: var(--accent-tint-strong);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: 0 0 0 1.5px color-mix(in oklch, var(--accent) 35%, var(--hairline));
}
#app-header .avatar svg { width: 21px; height: 21px; }
#app-header .avatar img,
.msg-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
  display: block;
}

.header-text h1 {
  margin: 0;
  font-family: var(--serif);
  font-size: 16.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
}
.status-line {
  margin: 3px 0 0;
  font-size: 12px;
  font-family: var(--mono);
  letter-spacing: 0.01em;
  color: var(--hint);
  display: flex;
  align-items: center;
  gap: 6px;
}
.status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #34c759;
  flex-shrink: 0;
  box-shadow: 0 0 0 0 rgba(52, 199, 89, 0.55);
  animation: status-pulse 2.4s var(--ease-out-quart) infinite;
}

@keyframes status-pulse {
  0% { box-shadow: 0 0 0 0 rgba(52, 199, 89, 0.45); }
  70% { box-shadow: 0 0 0 5px rgba(52, 199, 89, 0); }
  100% { box-shadow: 0 0 0 0 rgba(52, 199, 89, 0); }
}

/* ---------- chat area ---------- */

/* fine engine-turned crosshatch, evoking guilloché engraving on official
   paper — pure CSS, no risk of a generated pattern drifting off-brief */
#chat {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  background-color: var(--bg);
  background-image:
    radial-gradient(640px circle at 12% 0%, color-mix(in oklch, var(--accent) 7%, transparent), transparent 55%),
    radial-gradient(560px circle at 100% 100%, color-mix(in oklch, var(--seal) 6%, transparent), transparent 55%),
    repeating-linear-gradient(25deg, color-mix(in oklch, var(--seal) 5%, transparent) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(-25deg, color-mix(in oklch, var(--seal) 5%, transparent) 0 1px, transparent 1px 7px);
  background-attachment: local, local, local, local;
}

#messages {
  padding: 14px 14px 4px;
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

/* welcome / empty state */

#welcome {
  margin: auto 0;
  padding: 28px 8px 8px;
  text-align: center;
}

/* the seal — round, ink-stamp motif; the one signature element */
.welcome-icon {
  width: 60px;
  height: 60px;
  margin: 0 auto 14px;
  color: var(--seal);
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotate(-6deg);
  animation: seal-stamp 420ms var(--ease-out-expo) both;
}
.welcome-icon svg { width: 100%; height: 100%; }

#welcome h2 {
  margin: 0 0 6px;
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
#welcome > p {
  margin: 0 auto 22px;
  max-width: 36ch;
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink);
  opacity: 0.72;
  text-wrap: pretty;
}

/* price tag — a torn receipt stub, echoing the paperwork/seal identity
   instead of a generic pricing card; one line, one price, no risk of
   reading as two sequential charges */
#price-tag {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  text-align: left;
  margin: 0 0 18px;
  padding: 12px 15px;
  border: 1px dashed color-mix(in oklch, var(--seal) 40%, var(--hairline));
  border-radius: 12px;
  background: var(--seal-tint);
}
.price-tag-check {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: 1px;
  color: var(--seal);
}
.price-tag-check svg { width: 100%; height: 100%; }

.price-tag-text {
  font-size: 12.5px;
  line-height: 1.44;
  color: var(--ink);
  text-wrap: pretty;
}
.price-tag-value {
  font-family: var(--mono);
  font-weight: 700;
  color: var(--seal);
  letter-spacing: -0.01em;
}

/* intake ledger — a ruled list standing in for the personnel-file
   intake form, not another card grid */
#intake-list {
  text-align: left;
  border-top: 1px solid var(--hairline);
}

.intake-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  padding: 13px 4px;
  border: none;
  border-bottom: 1px solid var(--hairline);
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  text-align: left;
  transition: background 180ms var(--ease-out-quart), transform 180ms var(--ease-out-quart);
}
.intake-row:active { background: color-mix(in oklch, var(--seal) 6%, transparent); transform: scale(0.99); }
@media (hover: hover) {
  .intake-row:hover { background: color-mix(in oklch, var(--seal) 5%, transparent); transform: translateX(2px); }
  .intake-row:hover .intake-tag { border-color: color-mix(in oklch, var(--seal) 55%, var(--hairline)); }
}
.intake-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.intake-tag {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  transition: border-color 140ms ease;
}
.intake-tag img { width: 22px; height: 22px; object-fit: contain; }

.intake-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding-top: 1px; }
.intake-title { font-size: 14px; font-weight: 600; }
.intake-desc { font-size: 12.5px; color: var(--ink); opacity: 0.72; line-height: 1.3; }

/* messages */

.msg-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  margin: 5px 0;
  max-width: 100%;
  animation: msg-in 220ms cubic-bezier(.22,1,.36,1) both;
}
.msg-row.msg-user { flex-direction: row-reverse; }

.msg-avatar {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border-radius: 9px;
  background: var(--accent-tint-strong);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.msg-avatar svg { width: 14px; height: 14px; }

.msg {
  max-width: 78%;
  padding: 9px 13px;
  border-radius: 16px;
  line-height: 1.42;
  font-size: 14.5px;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.msg-user .msg {
  background: var(--accent);
  color: var(--accent-ink);
  border-bottom-right-radius: 5px;
  box-shadow: 0 1px 2px color-mix(in oklch, var(--accent) 35%, transparent);
}
.msg-assistant .msg {
  background: var(--panel);
  border-bottom-left-radius: 5px;
  box-shadow: 0 1px 1px color-mix(in oklch, var(--ink) 4%, transparent);
}

.msg a { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

/* rendered markdown inside assistant bubbles */
.msg.formatted { white-space: normal; }
.msg.formatted > *:first-child { margin-top: 0; }
.msg.formatted > *:last-child { margin-bottom: 0; }
.msg.formatted p { margin: 0 0 8px; }
.msg.formatted h4, .msg.formatted h5, .msg.formatted h6 {
  margin: 12px 0 5px;
  font-size: 15px;
  font-weight: 650;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.msg.formatted ul { margin: 2px 0 8px; padding-left: 19px; }
.msg.formatted li { margin: 3px 0; }
.msg.formatted li::marker { color: var(--hint); }
.msg.formatted strong { font-weight: 700; }
.msg.formatted em { font-style: italic; }
.msg.formatted code {
  background: color-mix(in oklch, var(--ink) 9%, transparent);
  padding: 1px 5px;
  border-radius: 5px;
  font-size: 0.9em;
  font-family: var(--mono);
}
.msg.formatted hr {
  border: none;
  border-top: 1px solid var(--hairline);
  margin: 10px 0;
}

.msg-error .msg { background: color-mix(in oklch, #ff3b30 14%, var(--panel)); color: #ff3b30; }

/* the PDF-ready moment — the seal's payoff: the document is done and
   verified, echoing the welcome-screen mark */
.pdf-ready { display: flex; align-items: center; gap: 10px; }
.pdf-seal {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  color: var(--seal);
  transform: rotate(-6deg);
  animation: seal-stamp 320ms cubic-bezier(.16,1,.3,1) both;
}
.pdf-seal svg { width: 100%; height: 100%; }

@keyframes seal-stamp {
  from { opacity: 0; transform: scale(1.35) rotate(9deg); }
  to { opacity: 1; transform: scale(1) rotate(-6deg); }
}

/* paywall moment — same seal language, framed as a gate rather than a payoff */
.msg.paywall {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  padding: 20px 18px;
  max-width: 86%;
}
.paywall-seal {
  width: 40px;
  height: 40px;
  color: var(--seal);
  transform: rotate(-6deg);
  animation: seal-stamp 320ms cubic-bezier(.16,1,.3,1) both;
}
.paywall-seal svg { width: 100%; height: 100%; }
.msg.paywall p { margin: 0; font-size: 14px; line-height: 1.45; }
.paywall-btn {
  border: none;
  background: var(--accent);
  color: var(--accent-ink);
  font: inherit;
  font-weight: 600;
  font-size: 14.5px;
  min-height: 44px;
  padding: 13px 24px;
  border-radius: 11px;
  cursor: pointer;
  box-shadow: 0 2px 10px color-mix(in oklch, var(--accent) 30%, transparent);
  transition: transform 140ms cubic-bezier(.22,1,.36,1);
}
.paywall-btn:active { transform: scale(0.95); }

/* typing indicator */

.typing .msg { display: flex; align-items: center; gap: 4px; padding: 12px 14px; }
.typing .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--hint);
  animation: typing-bounce 1.1s ease-in-out infinite;
}
.typing .dot:nth-child(2) { animation-delay: 0.15s; }
.typing .dot:nth-child(3) { animation-delay: 0.3s; }

@keyframes typing-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
  30% { transform: translateY(-4px); opacity: 1; }
}

@keyframes msg-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- composer ---------- */

#composer {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  padding-bottom: max(10px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--hairline);
  flex-shrink: 0;
  background: var(--bg);
}

#attach-btn {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: var(--panel);
  color: var(--hint);
  border-radius: 11px;
  cursor: pointer;
  transition: color 160ms ease, background 160ms ease;
}
#attach-btn svg { width: 18px; height: 18px; }
#attach-btn:active { color: var(--accent); background: var(--accent-tint); }

#question {
  flex: 1;
  min-width: 0;
  padding: 9px 15px;
  border-radius: 12px;
  border: 1px solid var(--hairline);
  background: var(--panel);
  color: inherit;
  font-size: 14.5px;
  font-family: inherit;
}
#question {
  transition: border-color 160ms var(--ease-out-quart), box-shadow 160ms var(--ease-out-quart);
}
#question:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-tint);
}
#question::placeholder { color: var(--hint); }

#send-btn {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: var(--accent);
  color: var(--accent-ink);
  border-radius: 11px;
  cursor: pointer;
  transition: transform 140ms cubic-bezier(.22,1,.36,1), opacity 140ms ease;
}
#send-btn svg { width: 17px; height: 17px; }
#send-btn:active { transform: scale(0.92); }
#send-btn:disabled, #attach-btn:disabled { opacity: 0.5; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .msg-row { animation: none; }
  .typing .dot { animation: none; opacity: 0.7; }
  .intake-row, #send-btn { transition: none; }
  .intake-row:hover { transform: none; }
  .pdf-seal, .paywall-seal, .gate-seal, .welcome-icon { animation: none; }
  .paywall-btn { transition: none; }
  .status-dot { animation: none; box-shadow: none; }
  #question { transition: none; }
}