/* The shared mark stays recognizable across all nine interface themes. */
.app-body .brand {
  gap: 10px;
  font-family: var(--sans);
  font-weight: 750;
  letter-spacing: -1px;
}
.app-body .brand-wordmark { white-space: nowrap; line-height: 1; }
.app-body .brand small {
  margin-top: 7px;
  font: 500 8px/1.2 var(--sans);
  letter-spacing: 1.5px;
}
.app-body .brand-logo { display: block; width: 44px; height: 44px; flex: 0 0 auto; }
.workspace-page .brand { font-size: 27px; }
.workspace-page .brand-footer { color: var(--ink); font-weight: 500; }
.brand-footer strong { font-weight: 750; letter-spacing: -.4px; }
.brand-product { font-weight: inherit; }
.workspace-page .section-nav .nav-icon { display: grid; place-items: center; width: 28px; height: 28px; flex: 0 0 28px; border-radius: 9px; }
.workspace-page .section-nav .nav-icon .icon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.workspace-page .section-nav .conversation-nav-link .nav-icon { background: var(--action-fill, var(--accent)); color: var(--on-accent); }
.workspace-page .section-nav .conversation-nav-link[aria-current] .nav-icon { box-shadow: 0 0 0 1px currentColor; }
@media (max-width: 600px) {
  .workspace-page .section-nav a { flex-direction: column; gap: 5px; padding: 9px 3px; white-space: normal; text-align: center; line-height: 1.35; }
}
.android-download-link { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 12px; border: 1px solid var(--line, #dedee4); border-radius: 12px; color: var(--ink); font-size: 11px; white-space: nowrap; }
.android-download-link:hover { text-decoration: underline; }
.auth-body .android-download-link { align-self: center; justify-content: center; min-height: 44px; margin: 24px 0 0; padding: 10px 18px; font-size: 12px; }
.conversation-page .brand-story { font-size: 11px; color: var(--muted); margin: 8px 0 0; }

/* Give the sign-in page the same silver, charcoal and red direction. */
.auth-body {
  --paper: #f5f5f7;
  --surface: #ffffff;
  --ink: #242426;
  --green: #c62f3e;
  --green-dark: #a92332;
  --muted: #68686e;
  background: radial-gradient(ellipse at 10% 0, #ffffff, transparent 60%), var(--paper);
}
.auth-body .auth-shell { border-color: #e3e3e8; border-radius: 30px; box-shadow: 0 24px 80px #25252a0c; }
.auth-body .auth-visual { background: radial-gradient(ellipse at 100% 20%, #ffffff, transparent 70%), #eeeef2; color: var(--ink); }
.auth-body .auth-copy .eyebrow { color: #6a6a72; letter-spacing: 2px; }
.auth-body .auth-copy h1 { font: 650 clamp(32px, 4vw, 44px)/1.45 var(--sans); letter-spacing: -1.2px; }
.auth-body .auth-copy h1 em { color: var(--green); }
.auth-body .auth-copy > p:last-child { color: #63636b; }
.auth-body .auth-features { color: #616169; border-color: #d8d8df; background: transparent; }
.auth-body .login-index { color: #717179; font-family: var(--sans); }
.auth-body .login-heading h2 { font-family: var(--sans); font-weight: 650; }
.auth-body .login-heading > p:last-child,
.auth-body .login-footer,
.auth-body .session-note,
.auth-body .login-heading .eyebrow,
.auth-body #password-toggle,
.auth-body .field-group > label { color: #66666e; }
.auth-body .eyebrow > span { background: var(--green); }
.auth-body .field-group input::placeholder { color: #777780; }
.auth-body .field-group input { border-color: #dcdce2; background: #fafafb; color: var(--ink); border-radius: 12px; }
.auth-body .field-group input:focus { border-color: var(--green); box-shadow: 0 0 0 3px #c62f3e14; }
.auth-body .primary-button { background: var(--green); color: #fff; border-radius: 14px; box-shadow: 0 6px 18px #c62f3e1a; }
.auth-body .primary-button:hover:not(:disabled) { background: var(--green-dark); }
.auth-body :is(button, a, input):focus-visible { outline-color: var(--green); }
.conversation-art { position: relative; min-height: 190px; flex: 1; margin: 28px 0 24px; }
.greeting-bubble { width: fit-content; min-width: 178px; padding: 18px 24px; border-radius: 24px 24px 24px 6px; background: white; box-shadow: 0 8px 24px #24242609; transform: rotate(-4deg); }
.greeting-bubble span { display: block; font-size: 11px; letter-spacing: .8px; color: #74747c; margin-bottom: 7px; }
.greeting-bubble strong { font-size: 26px; font-weight: 600; letter-spacing: -.6px; }
.greeting-bubble.reply { position: absolute; right: 0; top: 78px; transform: rotate(4deg); border-radius: 24px 24px 6px 24px; background: var(--green); color: #fff; }
.greeting-bubble.reply span { color: #fff; opacity: .85; }
@media (max-width: 760px) {
  .app-body .brand-logo { width: 38px; height: 38px; }
  .workspace-page .brand { font-size: 25px; }
  .app-body .brand small { font-size: 7px; letter-spacing: 1.1px; }
}
@media (max-width: 700px) {
  .auth-body .conversation-art { display: none; }
  .auth-body .auth-copy { margin-top: 26px; }
}