* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html {
  --sidebar-width: 4.25rem;
  --sidebar-width-expanded: 16.5rem;
  --tab: #e7eef0;
  --tab-active: #006969;
  --tab-active-ink: #fff;
  --sidebar-active: #0b5557;
  font-family: Outfit, sans-serif;
  font-size: 16px;
  line-height: 1.45;
  font-weight: 400;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

button,
a {
  font: inherit;
}

html.landing-html,
html.landing-html body {
  height: 100%;
  margin: 0;
}

.main-panel {
  flex: 1;
  min-width: 0;
  padding: 1.75rem 2rem;
}

.page h1 {
  margin: 0 0 0.5rem;
  font-size: clamp(2rem, 3.5vw, 2.4rem);
  letter-spacing: -0.03em;
  font-weight: 600;
  line-height: 1.15;
}

.lede {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
  max-width: 40rem;
}

.landing-shot .email-message__attachment-preview-frame {
  min-height: 22rem;
  height: 100%;
}

.landing-shot .email-message__attachment-preview-frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 22rem;
  border: 0;
  background: #fff;
}
html.landing-html {
  color-scheme: light;
  --landing-page-bg: #f4f7f8;
  --landing-overscroll-end: color-mix(in srgb, #006969 11%, #f4f7f8);
  background-color: var(--landing-page-bg);
}

html.landing-html body {
  color-scheme: light;
  background-color: var(--landing-page-bg);
}

@supports (animation-timeline: scroll()) {
  html.landing-html {
    animation: landing-scroll-background linear;
    animation-timeline: scroll();
  }
}

@keyframes landing-scroll-background {
  from {
    background-color: var(--landing-page-bg);
  }

  to {
    background-color: var(--landing-overscroll-end);
  }
}

@media (prefers-reduced-motion: reduce) {
  html.landing-html {
    animation: none;
  }
}

.landing {
  color-scheme: light;
  --bg: #f4f7f8;
  --ink: #142026;
  --body: #3a4a52;
  --muted: #5a6b73;
  --panel: #ffffff;
  --border: #d5e0e4;
  --sidebar: #006969;
  --sidebar-ink: #e8f7f7;
  --sidebar-muted: #cae7e8;
  --sidebar-hover: #128284;
  --sidebar-highlight-bg: color-mix(in srgb, var(--sidebar) 11%, var(--bg));
  position: relative;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--ink);
}

.landing-top {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  background: var(--bg);
}

.landing-wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--sidebar);
  text-decoration: none;
  font-weight: 700;
  font-size: 2.3rem;
  letter-spacing: -0.03em;
  transition: color 0.15s ease;
}

.landing-wordmark img {
  display: block;
  width: 2.35rem;
  height: 2.35rem;
  object-fit: contain;
  flex: 0 0 auto;
  transition: filter 0.15s ease;
}

.landing-wordmark:hover {
  color: var(--sidebar-hover);
}

/* The logo is an <img> (unaffected by `color`), so brighten it to match the
 * text's --sidebar -> --sidebar-hover shift on hover. */
.landing-wordmark:hover img {
  filter: brightness(1.24);
}

.landing-nav {
  display: flex;
  align-items: center;
  gap: 1.15rem;
}

.landing-nav-link {
  color: var(--sidebar);
  text-decoration: none;
  font-size: 1.0625rem;
  font-weight: 500;
}

.landing-nav-link:hover {
  color: var(--sidebar-hover);
}

.landing-nav-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 0.25rem;
  border: 0;
  border-radius: 0.4rem;
  background: var(--sidebar);
  color: var(--sidebar-ink);
  text-decoration: none;
  font-size: 1.0625rem;
  font-weight: 500;
  padding: 0.45rem 0.85rem;
  white-space: nowrap;
  cursor: pointer;
}

.landing-nav-button:hover {
  background: var(--sidebar-hover);
  color: var(--sidebar-ink);
}

.landing-footer {
  margin-top: auto;
  padding: 3.25rem 1.5rem 2.25rem;
  background: var(--sidebar-highlight-bg);
  text-align: center;
  color: var(--body);
}

.landing-footer > p {
  margin: 1.25rem 0 0;
}

.landing-footer-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2.5rem 7rem;
  text-align: left;
}

.landing-footer-col {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.landing-footer-heading {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--body);
  opacity: 0.72;
}

.landing-footer-links {
  display: grid;
  grid-auto-rows: auto;
  gap: 0.45rem 1.75rem;
}

.landing-footer-links--company {
  grid-template-columns: auto auto;
}

.landing-footer a {
  color: var(--sidebar);
  text-decoration: none;
  font-weight: 500;
}

.landing-footer a:hover {
  color: var(--sidebar-hover);
}

.landing-page {
  width: min(100%, 50%);
  margin: 0 auto;
  padding: 2.5rem 1.5rem 3.5rem;
}

@media (max-width: 720px) {
  .landing-page {
    width: 100%;
  }
}

.landing-page-hero {
  margin-bottom: 2.75rem;
}

.landing-page-brand {
  margin: 0 0 0.85rem;
  font-size: clamp(2.4rem, 7vw, 3.8rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.05;
  color: var(--sidebar);
}

.landing-page-title {
  margin: 0;
  font-size: clamp(1.55rem, 3.5vw, 2rem);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.2;
}

.landing-page-lede {
  margin: 1rem 0 0;
  color: var(--body);
  font-size: 1.15rem;
  line-height: 1.5;
}

.landing-page-section .landing-page-intro {
  margin: 0;
  color: var(--ink);
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -0.015em;
}

.landing-page-section {
  margin-top: 2.25rem;
}

.landing-page-section h2 {
  margin: 0 0 0.55rem;
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: -0.015em;
}

.landing-page-section p {
  margin: 0;
  color: var(--body);
  font-size: 1.125rem;
  line-height: 1.55;
}

.landing-page-section p+p {
  margin-top: 0.85rem;
}

.landing-page-section a {
  color: var(--sidebar);
  font-weight: 600;
  text-decoration: none;
}

.landing-page-section a:hover {
  text-decoration: underline;
}

.landing-legal-page {
  width: min(100%, 68rem);
  margin: 0 auto;
  padding: 2.5rem 1.5rem 3.5rem;
}

.landing-legal-hero {
  margin-bottom: 2.25rem;
}

.landing-legal-hero-title {
  margin: 0;
  font-size: clamp(2.1rem, 6vw, 3.1rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.1;
  color: var(--sidebar);
}

.landing-legal-layout {
  display: grid;
  grid-template-columns: 16.5rem minmax(0, 1fr);
  gap: 2.5rem 3rem;
  align-items: start;
}

.landing-legal-toc {
  color: var(--body);
}

.landing-legal-toc--desktop {
  position: sticky;
  top: 1.25rem;
  max-height: calc(100vh - 2.5rem);
  overflow: auto;
}

.landing-legal-toc--mobile {
  display: none;
}

.landing-legal-toc-title,
.landing-legal-toc--mobile summary {
  margin: 0 0 0.75rem;
  color: var(--ink);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.015em;
}

.landing-legal-toc--mobile summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
}

.landing-legal-toc--mobile summary::-webkit-details-marker {
  display: none;
}

.landing-legal-toc--mobile summary::after {
  content: "";
  width: 0.42rem;
  height: 0.42rem;
  border-right: 2px solid var(--sidebar);
  border-bottom: 2px solid var(--sidebar);
  transform: rotate(45deg);
  flex: 0 0 auto;
}

.landing-legal-toc-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.45rem;
}

.landing-legal-toc-link {
  display: block;
  color: var(--muted);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.35;
}

.landing-legal-toc-link:hover {
  color: var(--sidebar);
}

.landing-legal-toc-link.is-active {
  color: var(--sidebar);
  font-weight: 600;
}

@media (max-width: 840px) {
  .landing-legal-layout {
    grid-template-columns: 1fr;
    gap: 1.35rem;
  }

  .landing-legal-toc--desktop {
    display: none;
  }

  .landing-legal-toc--mobile {
    display: block;
    padding: 0.85rem 1rem;
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    background: var(--panel);
  }

  .landing-legal-toc--mobile[open] summary {
    margin-bottom: 0.75rem;
  }

  .landing-legal-toc--mobile[open] summary::after {
    transform: rotate(-135deg);
  }
}

.landing-legal h1 {
  margin: 0 0 1.15rem;
  font-size: clamp(2.1rem, 6vw, 3.1rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.1;
  color: var(--sidebar);
}

.landing-legal h2 {
  margin: 2.15rem 0 0.6rem;
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  scroll-margin-top: 1.25rem;
}

.landing-legal h3 {
  margin: 1.5rem 0 0.5rem;
  font-size: 1.05rem;
  font-weight: 600;
}

.landing-legal p,
.landing-legal li {
  margin: 0 0 0.85rem;
  color: var(--body);
  font-size: 1.0625rem;
  line-height: 1.6;
}

.landing-legal > p:last-child {
  margin-top: 2rem;
  margin-bottom: 0;
  color: var(--muted);
  font-size: 0.95rem;
}

.landing-legal a {
  color: var(--sidebar);
  font-weight: 600;
  text-decoration: none;
}

.landing-legal a:hover {
  text-decoration: underline;
}

.landing-legal hr {
  margin: 1.75rem 0;
  border: 0;
  border-top: 1px solid var(--border);
}

.landing-legal ul {
  margin: 0 0 0.85rem;
  padding: 0 0 0 1.2rem;
}

.landing-legal li {
  margin-bottom: 0.45rem;
}

.landing-legal-table-wrap {
  overflow-x: auto;
  margin: 0 0 1.1rem;
}

.landing-legal table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.98rem;
}

.landing-legal th,
.landing-legal td {
  border: 1px solid var(--border);
  padding: 0.5rem 0.65rem;
  text-align: left;
  vertical-align: top;
  color: var(--body);
}

.landing-legal th {
  background: color-mix(in srgb, var(--sidebar) 8%, var(--panel));
  color: var(--ink);
  font-weight: 600;
}

.landing-values {
  margin: 0.85rem 0 0;
  padding: 0 0 0 1.2rem;
  display: grid;
  gap: 0.9rem;
  color: var(--body);
  font-size: 1.125rem;
  line-height: 1.55;
}

.landing-values li::marker {
  color: var(--ink);
  font-weight: 600;
}

.landing-values strong {
  display: block;
  color: var(--ink);
  font-weight: 600;
}

.landing-values p {
  margin: 0.35rem 0 0;
}

.landing-page-section .landing-page-cta {
  margin-top: 0;
  font-size: 1.4rem;
  font-weight: 550;
  line-height: 1.45;
  letter-spacing: -0.01em;
}

.landing-page-cta a {
  color: var(--sidebar);
  font-weight: 600;
  text-decoration: none;
}

.landing-page-cta a:hover {
  text-decoration: underline;
}

.landing-contact-form {
  margin-top: 1rem;
  display: grid;
  gap: 0.9rem;
  text-align: left;
}

.landing-contact-field {
  display: grid;
  gap: 0.3rem;
  font-weight: 500;
  color: var(--muted);
  font-size: 0.95rem;
}

.landing-contact-field input,
.landing-contact-field textarea {
  border: 1px solid var(--border);
  border-radius: 0.4rem;
  background: var(--panel);
  color: var(--ink);
  font: inherit;
  font-weight: 400;
  font-size: 1rem;
  padding: 0.55rem 0.75rem;
  resize: vertical;
}

.landing-contact-field input:focus,
.landing-contact-field textarea:focus {
  outline: 2px solid var(--sidebar);
  outline-offset: 1px;
}

.landing-contact-submit {
  justify-self: start;
  border: 0;
  border-radius: 0.4rem;
  background: var(--sidebar);
  color: var(--sidebar-ink);
  font: inherit;
  font-weight: 500;
  padding: 0.6rem 1.1rem;
  cursor: pointer;
}

.landing-contact-submit:hover:not(:disabled) {
  background: var(--sidebar-hover);
}

.landing-contact-submit:disabled {
  opacity: 0.7;
  cursor: wait;
}

.landing-contact-error {
  margin: 0;
  color: #b42318;
}

.landing-contact-thanks {
  margin: 1rem 0 0;
  color: var(--sidebar);
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.45;
}

.landing-page-back {
  margin: 0 0 1.5rem;
}

.landing-page-back a {
  color: var(--muted);
  text-decoration: none;
  font-weight: 500;
}

.landing-page-back a:hover {
  color: var(--sidebar);
}

.landing-rule {
  display: block;
  width: 100%;
  height: 0;
  margin: 0;
  border: 0;
  border-top: 1px solid #b8c5cb;
}

.landing-role-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
}

.landing-role-list>li {
  margin: 0;
  padding: 0;
}

.landing-role-link {
  display: grid;
  gap: 0.2rem;
  padding: 0.85rem 0;
  color: inherit;
  text-decoration: none;
}

.landing-role-link:hover .landing-role-link__title,
.landing-role-link:hover .landing-role-link__action {
  color: var(--sidebar-hover);
}

.landing-role-link__title {
  color: var(--sidebar);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  text-decoration: none;
}

.landing-role-link__meta {
  color: var(--muted);
  line-height: 1.45;
}

.landing-role-link__action {
  margin-top: 0.35rem;
  color: var(--sidebar);
  font-weight: 600;
}

.landing-hero {
  display: grid;
  justify-items: center;
  padding: 3.5rem 1.5rem 2.25rem;
  text-align: center;
}

.landing-hero--after-shot {
  padding-top: 0.5rem;
  padding-bottom: 3rem;
}

.landing-cite {
  font-size: 0.55em;
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0;
}

.landing-cite a {
  color: var(--sidebar);
  text-decoration: none;
}

.landing-cite a:hover {
  text-decoration: underline;
}

.landing-insight {
  margin: 2.5rem auto 1rem;
}

.landing-insight__accent {
  display: inline;
  padding: 0.02em 0.14em;
  border-radius: 0.12em;
  background: var(--sidebar-highlight-bg);
  color: var(--sidebar);
  font-size: 1.3em;
  font-weight: 700;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.landing-insight__emphasize {
  text-decoration: none;
  background-image: linear-gradient(color-mix(in srgb, var(--sidebar) 55%, transparent),
      color-mix(in srgb, var(--sidebar) 55%, transparent));
  background-size: 100% 0.12em;
  background-repeat: no-repeat;
  background-position: 0 100%;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  padding-bottom: 0.06em;
}

.landing-insight--display {
  max-width: 52rem;
  padding: 1.35rem 1.5rem;
  border-top: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  text-align: center;
  box-sizing: border-box;
  width: 100%;
}

.landing-insight--display p {
  margin: 0;
  font-size: clamp(1.35rem, 3.2vw, 1.75rem);
  font-weight: 300;
  letter-spacing: -0.025em;
  line-height: 1.38;
  color: var(--ink);
}

.landing-headline {
  margin: 0;
  font-size: clamp(2.1rem, 6vw, 3.6rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.08;
  text-align: left;
}

.landing-tagline {
  margin: 1.3rem 0 0.5rem;
  max-width: 36rem;
  color: var(--body);
  font-size: 1.3rem;
  font-weight: 500;
}

.landing-ticker {
  display: inline-grid;
  position: relative;
  vertical-align: baseline;
  text-align: left;
}

.landing-ticker__sizer {
  visibility: hidden;
  height: 1.15em;
  line-height: 1.15em;
  white-space: nowrap;
  pointer-events: none;
}

.landing-ticker__window {
  position: absolute;
  left: 0;
  top: 0;
  height: 1.15em;
  width: max-content;
  overflow: hidden;
}

.landing-ticker__track {
  display: flex;
  flex-direction: column;
  align-items: start;
}

.landing-ticker__track span {
  display: block;
  height: 1.15em;
  line-height: 1.15em;
  text-align: left;
  white-space: nowrap;
  color: var(--sidebar);
}

.landing-start {
  width: min(100%, 44rem);
  margin: 2.6rem auto 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  align-items: stretch;
}

.landing-start--footer {
  margin-top: 0;
}

.landing-start-choice {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  width: 100%;
  min-height: 6.25rem;
  padding: 1.15rem 1.1rem;
  border-radius: 0.55rem;
  font: inherit;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.landing-start-choice--primary {
  border: 0;
  background: var(--sidebar);
  color: var(--sidebar-ink);
}

.landing-start-choice--primary:hover {
  background: var(--sidebar-hover);
}

.landing-start-choice--secondary {
  border: 1px solid var(--sidebar);
  background: var(--panel);
  color: var(--sidebar);
}

.landing-start-choice--secondary:hover:not(:disabled) {
  background: color-mix(in srgb, var(--sidebar) 10%, var(--panel));
}

.landing-start-choice:focus-visible {
  outline: 2px solid var(--sidebar);
  outline-offset: 2px;
}

.landing-start-choice:disabled {
  opacity: 0.7;
  cursor: wait;
}

.landing-start-choice__title {
  font-size: 1.7rem;
  font-weight: 650;
  line-height: 1.15;
}

.landing-start-choice__hint {
  max-width: 14rem;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.35;
  opacity: 0.82;
}

.landing-start__or {
  align-self: center;
  color: var(--muted);
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1;
}

.landing-start__error {
  grid-column: 1 / -1;
  margin: 0;
  color: #b42318;
  text-align: center;
}

.landing-shot-wrap {
  --landing-swell: 0;
  padding: 0 1.5rem 2.5rem;
}

.landing-shot {
  --bg: #f4f7f8;
  --ink: #142026;
  --muted: #5a6b73;
  --panel: #ffffff;
  --border: #d5e0e4;
  --sidebar: #006969;
  --sidebar-ink: #e8f7f7;
  --sidebar-muted: #cae7e8;
  --sidebar-hover: #128284;
  --sidebar-active: #0b5557;
  --tab: #e7eef0;
  --tab-active: #006969;
  --tab-active-ink: #fff;
  --form-surface: #ffffff;
  color-scheme: light;
  display: flex;
  max-width: 75vw;
  height: min(44rem, 78vh);
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  background: var(--bg);
  color: var(--ink);
  box-shadow: 0 18px 50px color-mix(in srgb, var(--ink) 10%, transparent);
  transform-origin: top center;
  transform: translate3d(0, calc((1 - var(--landing-swell)) * 1.75rem), 0) scale3d(calc(0.85 + 0.15 * var(--landing-swell)), calc(0.85 + 0.15 * var(--landing-swell)), 1);
}

.landing-shot-wrap.is-swell-ready .landing-shot {
  transition: transform 0.2s linear;
}

.landing-shot-wrap--swell-animating .landing-shot {
  transition: transform 1.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.landing-shot .app-shell {
  width: 100%;
  height: 100%;
  min-height: 0;
}

.landing-shot .sidebar {
  height: 100%;
  position: relative;
  flex: 0 0 var(--sidebar-width);
}

.landing-shot .main-panel {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  padding: 1rem 1.15rem 1.15rem;
}

.landing-shot .page.doc-review {
  flex: 1;
  min-height: 0;
  height: auto;
  max-height: none;
  display: flex;
  flex-direction: column;
  padding-bottom: 0;
  overflow: hidden;
}

.landing-shot .doc-review__grid {
  flex: 1;
  min-height: 0;
  height: auto;
  align-items: stretch;
}

.landing-shot .doc-review__preview-card,
.landing-shot .doc-review__form-card {
  max-height: 100%;
}

.landing-shot .doc-review__form-card {
  --form-surface: #ffffff;
  background: #ffffff;
  color: var(--ink);
}

.landing-shot .doc-review__form-card>.doc-review__panel-title {
  background: #ffffff;
}

.landing-shot .doc-review__input,
.landing-shot .doc-review__radios,
.landing-shot select.doc-review__input {
  color-scheme: light;
  background: #ffffff;
  color: var(--ink);
  border-color: var(--border);
}

.landing-shot .doc-review__field--linked {
  background: color-mix(in srgb,
      var(--annotation-color, var(--tab-active)) 16%,
      transparent);
}

.landing-shot .doc-review__preview-body,
.landing-shot .email-message__preview-body {
  min-height: 0;
  height: auto;
  overflow: auto;
}

.landing-shot .doc-review__form,
.landing-shot .pdf-viewer__scroll,
.landing-shot .doc-review__preview-body,
.landing-shot .email-message__preview-body {
  overscroll-behavior: auto;
}

.landing-shot .doc-review__back {
  cursor: default;
}

@media (min-width: 641px) {
  .landing-start {
    grid-template-columns: 1fr auto 1fr;
    grid-auto-flow: dense;
  }

  .landing-start-choice--secondary {
    grid-column: 1;
  }

  .landing-start__or {
    grid-column: 2;
  }

  .landing-start-choice--primary {
    grid-column: 3;
  }
}

@media (max-width: 640px) {
  .landing-start {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .landing-ticker__track {
    transform: none !important;
  }

  .landing-shot {
    transform: none;
  }

  .landing-shot-wrap--swell-animating .landing-shot {
    transition: none;
  }
}
/* App shell + sidebar + org switcher */

.app-shell {
  display: flex;
  min-height: 100%;
}

.sidebar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  width: var(--sidebar-width);
  height: 100vh;
  background: var(--sidebar);
  color: var(--sidebar-ink);
  overflow: hidden;
  transition: width 200ms ease;
}

.sidebar--expanded,
.sidebar--pinned {
  width: var(--sidebar-width-expanded);
}

.sidebar__top {
  position: relative;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0;
  min-height: 4.75rem;
  padding: 0.75rem 0;
}

.sidebar__logo {
  --sidebar-logo-mark-size: calc(1.75rem * 2.35 / 2.3);
  /* Same mark→text gap as .landing-wordmark, scaled to sidebar type. */
  --sidebar-logo-gap: calc(1.75rem * 0.55 / 2.3);
  flex: 1 1 auto;
  min-width: 0;
  height: auto;
  min-height: 2.75rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--sidebar-logo-gap);
  /* Keep the mark centered in the collapsed rail. */
  padding: 0;
  padding-left: calc((var(--sidebar-width) - var(--sidebar-logo-mark-size)) / 2);
}

.sidebar__logo-mark {
  position: relative;
  flex: 0 0 var(--sidebar-logo-mark-size);
  width: var(--sidebar-logo-mark-size);
  height: 2.75rem;
  display: grid;
  place-items: center;
}

.sidebar__logo-mark > * {
  position: relative;
  z-index: 1;
}

.sidebar__logo img {
  display: block;
  flex: 0 0 auto;
  width: var(--sidebar-logo-mark-size);
  height: var(--sidebar-logo-mark-size);
  object-fit: contain;
}

.sidebar__brand {
  display: block;
  flex: 0 0 auto;
  padding-right: 0.5rem;
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  white-space: nowrap;
  color: var(--sidebar-ink);
}

/* Mark+gap end inside the rail, so clip alone still peeks letters. */
.sidebar:not(.sidebar--expanded):not(.sidebar--pinned) .sidebar__brand {
  visibility: hidden;
}

.sidebar__logo:hover .sidebar__logo-mark::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.65rem;
  background: var(--sidebar-hover);
  transform: translate(-50%, -50%);
  z-index: 0;
}

.sidebar__pin-wrap {
  position: absolute;
  z-index: 40;
  top: 50%;
  left: calc(var(--sidebar-width-expanded) - 2.25rem - 0.55rem);
  transform: translateY(-50%);
  width: 2.25rem;
}

.sidebar__pin {
  width: 2.25rem;
  height: 2.25rem;
  border: 0;
  border-radius: 0.5rem;
  background: transparent;
  color: var(--sidebar-ink);
  cursor: pointer;
  display: grid;
  place-items: center;
}

.sidebar__pin svg {
  width: 1.25rem;
  height: 1.25rem;
}

.sidebar__pin:hover,
.sidebar__pin.is-active,
.sidebar__pin.is-hinting {
  background: var(--sidebar-hover);
}

.sidebar__pin.is-hinting {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--sidebar-ink) 50%, transparent);
}

.sidebar-hint-layer {
  position: fixed;
  inset: 0;
  z-index: 80;
  pointer-events: none;
}

.sidebar-hint-arrow {
  position: absolute;
  inset: 0;
  display: block;
  overflow: visible;
}

.sidebar-hint-arrow__stroke,
.sidebar-hint-arrow__head path {
  fill: none;
  stroke: var(--ink);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sidebar-hint-arrow__stroke--halo,
.sidebar-hint-arrow__head--halo path {
  stroke: var(--panel);
  stroke-width: 5;
}

.sidebar-hint-arrow__stroke {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: sidebar-hint-draw 0.9s cubic-bezier(0.4, 0.05, 0.2, 1) 0.16s forwards;
}

.sidebar-hint-arrow__head {
  opacity: 0;
  animation: sidebar-hint-head 0.22s ease-out 0.92s forwards;
}

.sidebar__pin-hint {
  --sidebar-hint-border: color-mix(in srgb, var(--border) 45%, var(--ink));
  position: absolute;
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.45rem;
  width: max-content;
  max-width: 13.5rem;
  padding: 0.65rem 0.7rem 0.55rem;
  border: 1.5px solid var(--sidebar-hint-border);
  border-radius: 0.7rem;
  background: var(--panel);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--ink) 16%, transparent);
  color: var(--ink);
  font-weight: 500;
  line-height: 1.35;
  text-align: left;
}

.sidebar__pin-hint--float {
  position: fixed;
  pointer-events: auto;
  animation: sidebar-hint-pop 0.22s ease-out;
}

.sidebar__pin-hint-text {
  margin: 0;
}

.sidebar__pin-hint-ok {
  align-self: flex-end;
  margin: 0;
  padding: 0.2rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: 0.4rem;
  background: var(--tab);
  color: var(--ink);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.sidebar__pin-hint-ok:hover,
.sidebar__pin-hint-ok:focus-visible {
  background: color-mix(in srgb, var(--tab-active) 12%, var(--tab));
  outline: none;
}

.sidebar__nav-wrap {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.sidebar__nav {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.5rem 0 1rem;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.sidebar__nav-fade {
  position: absolute;
  left: 0;
  right: 0;
  height: 1.5rem;
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.sidebar__nav-fade--top {
  top: 0;
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--ink) 28%, transparent),
    transparent
  );
}

.sidebar__nav-fade--bottom {
  bottom: 0;
  background: linear-gradient(
    to top,
    color-mix(in srgb, var(--ink) 28%, transparent),
    transparent
  );
}

.sidebar__nav-wrap--more-up .sidebar__nav-fade--top,
.sidebar__nav-wrap--more-down .sidebar__nav-fade--bottom {
  opacity: 1;
}

.sidebar__section {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.sidebar__row {
  display: flex;
  align-items: center;
  gap: 0;
  min-width: 0;
}

.sidebar__link {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0;
  min-height: 2.75rem;
  padding: 0;
  border-radius: 0;
  color: inherit;
  text-decoration: none;
  background: transparent;
}

/* Expanded: inset row highlight (not edge-to-edge). */
.sidebar--expanded .sidebar__link::before,
.sidebar--pinned .sidebar__link::before {
  content: "";
  position: absolute;
  inset: 0 0.55rem;
  border-radius: 0.65rem;
  pointer-events: none;
  z-index: 0;
}

.sidebar--expanded .sidebar__link:hover::before,
.sidebar--pinned .sidebar__link:hover::before {
  background: var(--sidebar-hover);
}

.sidebar--expanded .sidebar__link.is-active::before,
.sidebar--pinned .sidebar__link.is-active::before {
  background: var(--sidebar-active);
}

/* Collapsed: square highlight centered on the icon. */
.sidebar:not(.sidebar--expanded):not(.sidebar--pinned) .sidebar__icon::before {
  content: "";
  position: absolute;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.65rem;
  pointer-events: none;
  z-index: 0;
}

.sidebar:not(.sidebar--expanded):not(.sidebar--pinned) .sidebar__link:hover .sidebar__icon::before {
  background: var(--sidebar-hover);
}

.sidebar:not(.sidebar--expanded):not(.sidebar--pinned) .sidebar__link.is-active .sidebar__icon::before {
  background: var(--sidebar-active);
}

.sidebar__icon {
  position: relative;
  z-index: 1;
  flex: 0 0 var(--sidebar-width);
  width: var(--sidebar-width);
  height: 2.75rem;
  display: grid;
  place-items: center;
}

.sidebar__alert {
  position: absolute;
  top: calc(50% - 0.85rem);
  right: calc((var(--sidebar-width) - 1.55rem) / 2 - 0.1rem);
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: #dc2626;
  box-shadow: 0 0 0 1.5px var(--sidebar);
  pointer-events: none;
  z-index: 1;
}

.sidebar__icon svg {
  position: relative;
  z-index: 1;
  width: 1.4rem;
  height: 1.4rem;
}

.sidebar__label {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  padding-right: 0.55rem;
  font-size: 1.03rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.sidebar__chevron {
  flex: 0 0 2rem;
  width: 2rem;
  height: 2rem;
  margin-right: 0.35rem;
  border: 0;
  border-radius: 0.45rem;
  background: transparent;
  color: var(--sidebar-muted);
  cursor: pointer;
  display: grid;
  place-items: center;
}

.sidebar__chevron svg {
  width: 1.1rem;
  height: 1.1rem;
  transition: transform 180ms ease;
}

.sidebar__chevron.is-open svg {
  transform: rotate(90deg);
}

.sidebar__chevron:hover {
  background: var(--sidebar-hover);
  color: var(--sidebar-ink);
}

.sidebar__sub {
  list-style: none;
  margin: 0 0 0 var(--sidebar-width);
  padding: 0.2rem 0.55rem 0.2rem 0;
  display: grid;
  gap: 0rem;
  font-size: 0.95rem;
}

.sidebar__sublink {
  display: block;
  padding: 0.35rem 0.5rem;
  border-radius: 0.35rem;
  color: var(--sidebar-muted);
  text-decoration: none;
  font-weight: 400;
}

.sidebar__sublink:hover {
  background: var(--sidebar-hover);
  color: var(--sidebar-ink);
}

.sidebar__sublink.is-active {
  color: var(--sidebar-ink);
  background: var(--sidebar-active);
}

.sidebar:has(.org-switcher__list) {
  overflow: visible;
}

.sidebar__footer {
  margin-top: auto;
  position: relative;
  z-index: 30;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.15rem;
  padding: 0.55rem 0 0.7rem;
  border-top: 1px solid color-mix(in srgb, var(--sidebar-ink) 16%, transparent);
  color: var(--sidebar-muted);
  min-width: 0;
  overflow: visible;
}

.sidebar-sign-out,
.sidebar-profile__trigger {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0;
  width: 100%;
  min-height: 2.5rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  min-width: 0;
}

.sidebar--expanded .sidebar-sign-out::before,
.sidebar--pinned .sidebar-sign-out::before,
.sidebar--expanded .sidebar-profile__trigger::before,
.sidebar--pinned .sidebar-profile__trigger::before {
  content: "";
  position: absolute;
  inset: 0 0.55rem;
  border-radius: 0.55rem;
  pointer-events: none;
  z-index: 0;
}

.sidebar--expanded .sidebar-sign-out:hover::before,
.sidebar--expanded .sidebar-sign-out:focus-visible::before,
.sidebar--pinned .sidebar-sign-out:hover::before,
.sidebar--pinned .sidebar-sign-out:focus-visible::before,
.sidebar--expanded .sidebar-profile__trigger:hover::before,
.sidebar--expanded .sidebar-profile__trigger:focus-visible::before,
.sidebar--pinned .sidebar-profile__trigger:hover::before,
.sidebar--pinned .sidebar-profile__trigger:focus-visible::before {
  background: var(--sidebar-hover);
}

.sidebar-sign-out:hover,
.sidebar-sign-out:focus-visible,
.sidebar-profile__trigger:hover,
.sidebar-profile__trigger:focus-visible {
  background: transparent;
  outline: none;
}

.sidebar:not(.sidebar--expanded):not(.sidebar--pinned) .sidebar-sign-out__icon::before,
.sidebar:not(.sidebar--expanded):not(.sidebar--pinned) .sidebar-profile__icon::before {
  content: "";
  position: absolute;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.55rem;
  pointer-events: none;
  z-index: 0;
}

.sidebar:not(.sidebar--expanded):not(.sidebar--pinned) .sidebar-sign-out:hover .sidebar-sign-out__icon::before,
.sidebar:not(.sidebar--expanded):not(.sidebar--pinned) .sidebar-sign-out:focus-visible .sidebar-sign-out__icon::before,
.sidebar:not(.sidebar--expanded):not(.sidebar--pinned) .sidebar-profile__trigger:hover .sidebar-profile__icon::before,
.sidebar:not(.sidebar--expanded):not(.sidebar--pinned) .sidebar-profile__trigger:focus-visible .sidebar-profile__icon::before {
  background: var(--sidebar-hover);
}

.sidebar-sign-out:disabled {
  opacity: 0.7;
  cursor: wait;
}

.sidebar-sign-out__icon,
.sidebar-profile__icon {
  position: relative;
  z-index: 1;
  flex: 0 0 var(--sidebar-width);
  width: var(--sidebar-width);
  height: 2.5rem;
  display: grid;
  place-items: center;
  color: var(--sidebar-ink);
}

.sidebar-sign-out__icon svg,
.sidebar-profile__icon svg {
  position: relative;
  z-index: 1;
  width: 1.4rem;
  height: 1.4rem;
}

.sidebar-sign-out__label,
.sidebar-profile__label {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  padding-right: 0.55rem;
  font-weight: 500;
  color: var(--sidebar-ink);
  white-space: nowrap;
}

/* Footer rows only: pull labels a bit closer; keep icons aligned with nav. */
.sidebar--expanded .sidebar-sign-out__label,
.sidebar--pinned .sidebar-sign-out__label,
.sidebar--expanded .sidebar-profile__label,
.sidebar--pinned .sidebar-profile__label {
  margin-left: -0.45rem;
}

a.sidebar-profile__trigger {
  text-decoration: none;
  color: inherit;
}

.org-switcher {
  position: relative;
  width: 100%;
  min-width: 0;
}

.org-switcher__trigger {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0;
  width: 100%;
  min-height: 2.5rem;
  min-width: 0;
}

.sidebar--expanded .org-switcher__trigger::before,
.sidebar--pinned .org-switcher__trigger::before {
  content: "";
  position: absolute;
  inset: 0 0.55rem;
  border-radius: 0.55rem;
  pointer-events: none;
  z-index: 0;
}

.sidebar--expanded .org-switcher__trigger:hover::before,
.sidebar--expanded .org-switcher__trigger:focus-within::before,
.sidebar--pinned .org-switcher__trigger:hover::before,
.sidebar--pinned .org-switcher__trigger:focus-within::before {
  background: var(--sidebar-hover);
}

.sidebar--expanded .org-switcher__trigger.is-open::before,
.sidebar--pinned .org-switcher__trigger.is-open::before {
  background: var(--sidebar-active);
}

.org-switcher__main {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 0;
  flex: 1;
  min-width: 0;
  min-height: 2.5rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.org-switcher__main:focus-visible,
.org-switcher__chevron:focus-visible {
  outline: none;
}

.org-switcher__main:disabled,
.org-switcher__chevron:disabled {
  opacity: 0.7;
  cursor: wait;
}

.org-switcher__mark {
  position: relative;
  z-index: 1;
  flex: 0 0 var(--sidebar-width);
  width: var(--sidebar-width);
  height: 2.5rem;
  border-radius: 0;
  display: grid;
  place-items: center;
  background: transparent;
  color: var(--sidebar-ink);
}

.org-switcher__mark svg {
  width: 1.4rem;
  height: 1.4rem;
}

.sidebar:not(.sidebar--expanded):not(.sidebar--pinned) .org-switcher__trigger:hover .org-switcher__mark::before,
.sidebar:not(.sidebar--expanded):not(.sidebar--pinned) .org-switcher__trigger:focus-visible .org-switcher__mark::before,
.sidebar:not(.sidebar--expanded):not(.sidebar--pinned) .org-switcher__trigger.is-open .org-switcher__mark::before {
  content: "";
  position: absolute;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.55rem;
  background: var(--sidebar-hover);
  z-index: -1;
}

.sidebar:not(.sidebar--expanded):not(.sidebar--pinned) .org-switcher__trigger.is-open .org-switcher__mark::before {
  background: var(--sidebar-active);
}

.org-switcher__option-mark {
  flex: 0 0 1.4rem;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 0;
  display: grid;
  place-items: center;
  background: transparent;
  color: var(--sidebar-ink);
}

.org-switcher__option-mark svg {
  width: 1.4rem;
  height: 1.4rem;
}

.org-switcher__label {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  padding-right: 0.55rem;
  font-size: 1.03rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--sidebar-ink);
  white-space: nowrap;
}

.sidebar--expanded .org-switcher__label,
.sidebar--pinned .org-switcher__label {
  margin-left: -0.45rem;
}

.org-switcher__option-label {
  flex: 1;
  font-weight: 500;
  color: var(--sidebar-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.org-switcher__chevron {
  position: relative;
  z-index: 1;
  flex: 0 0 2rem;
  width: 2rem;
  height: 2.5rem;
  margin-right: 0.35rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  display: grid;
  place-items: center;
  background: transparent;
  color: var(--sidebar-muted);
  cursor: pointer;
}

.org-switcher__chevron svg {
  width: 1rem;
  height: 1rem;
  transform: rotate(-90deg);
  transition: transform 160ms ease;
}

.org-switcher__trigger.is-open .org-switcher__chevron svg {
  transform: rotate(90deg);
}

.org-switcher__list {
  position: absolute;
  z-index: 40;
  left: 0;
  bottom: calc(100% + 0.25rem);
  width: max(100%, 13.5rem);
  margin: 0;
  padding: 0.3rem;
  list-style: none;
  border: 1px solid color-mix(in srgb, var(--sidebar-ink) 18%, transparent);
  border-radius: 0.55rem;
  background: var(--sidebar);
  box-shadow: 0 0.45rem 1.1rem color-mix(in srgb, #000 22%, transparent);
  max-height: 14rem;
  overflow: auto;
}

.org-switcher__option {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  width: 100%;
  border: 0;
  border-radius: 0.4rem;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  padding: 0.4rem 0.35rem;
  cursor: pointer;
}

.org-switcher__option:hover,
.org-switcher__option:focus-visible {
  background: var(--sidebar-hover);
  outline: none;
}

.org-switcher__option.is-selected {
  background: var(--sidebar-active);
}

.org-switcher__option:disabled {
  opacity: 0.65;
  cursor: wait;
}

.org-switcher__error {
  margin: 0.2rem 0.35rem 0.1rem;
  color: #f0a8a8;
}

@keyframes sidebar-hint-pop {
  from {
    opacity: 0;
    transform: translateY(6px) scale(0.94);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes sidebar-hint-draw {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes sidebar-hint-head {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

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

  .sidebar__pin-hint--float,
  .sidebar-hint-arrow__stroke,
  .sidebar-hint-arrow__head {
    animation: none;
  }

  .sidebar-hint-layer,
  .sidebar-hint-layer--leaving {
    transition: none;
  }

  .sidebar-hint-arrow__stroke {
    stroke-dashoffset: 0;
  }

  .sidebar-hint-arrow__head {
    opacity: 1;
  }
}
/* Document / email review layout + PDF viewer */

.doc-review {
  /* Fit the main panel (1.75rem padding top+bottom) — no phantom page scroll. */
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  height: calc(100dvh - 3.5rem);
  max-height: calc(100dvh - 3.5rem);
  overflow: hidden;
}

.doc-review__top {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(18rem, 1fr);
  gap: 1.25rem;
  align-items: end;
  margin-bottom: 1.25rem;
}

.doc-review__header {
  margin-bottom: 0;
  min-width: 0;
}

.doc-review__top-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 0.75rem;
}

.doc-review__top-actions .error {
  flex: 1 0 100%;
  margin: 0;
  text-align: right;
}

@media (max-width: 960px) {
  .doc-review__top {
    grid-template-columns: 1fr;
    align-items: start;
  }
}

.doc-review__back {
  display: inline-block;
  margin-bottom: 0.65rem;
  color: var(--sidebar);
  text-decoration: none;
  font-size: 1rem;
  font-weight: 500;
}

.doc-review__back:hover {
  text-decoration: underline;
}

.doc-review__grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(18rem, 1fr);
  gap: 1.25rem;
  align-items: stretch;
  flex: 1 1 auto;
  min-height: 0;
}

.doc-review__form-column {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-height: 0;
  height: 100%;
  min-width: 0;
}

.doc-review__form-column > .doc-review__form-card {
  flex: 1 1 auto;
  min-height: 0;
}

@media (max-width: 960px) {
  .doc-review {
    height: auto;
    max-height: none;
    overflow: visible;
  }

  .doc-review__grid {
    grid-template-columns: 1fr;
    flex: 0 0 auto;
    min-height: 0;
  }

  .doc-review__form-column {
    height: auto;
  }
}

.doc-review__form-card {
  --form-surface: var(--panel);
  display: flex;
  flex-direction: column;
  height: 0;
  min-height: 100%;
  border: 1px solid var(--border);
  border-radius: 0.65rem;
  background: var(--panel);
  overflow: hidden;
}

@media (max-width: 960px) {
  .doc-review__form-card {
    height: auto;
    min-height: 0;
  }
}

@media (prefers-color-scheme: dark) {
  .doc-review__form-card {
    --form-surface: var(--tab);
    background: var(--form-surface);
  }

  .doc-review__form-card>.doc-review__panel-title {
    background: var(--panel);
  }
}

.doc-review__preview-card {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
  border: 1px solid var(--border);
  border-radius: 0.65rem;
  background: var(--panel);
}

.doc-review__preview-card>.doc-review__panel-title {
  border-radius: 0.65rem 0.65rem 0 0;
}

.doc-review__panel-title {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.55rem 0.75rem 0.55rem 1rem;
  border-bottom: 1px solid var(--border);
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
}

.doc-review__annotation-toggles {
  display: flex;
  align-items: stretch;
  gap: 0.35rem;
}

.doc-review__annotation-toggle {
  position: relative;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 0;
  height: auto;
  padding: 0.12rem 0.28rem;
  border: 1px solid color-mix(in srgb, var(--ink) 14%, var(--border));
  border-radius: 0.4rem;
  background: transparent;
  color: color-mix(in srgb, var(--ink) 72%, var(--muted));
  cursor: pointer;
}

.doc-review__annotation-toggle:hover {
  color: var(--sidebar);
  border-color: color-mix(in srgb, var(--sidebar) 50%, var(--border));
}

.doc-review__annotation-toggle svg {
  display: block;
  width: 1.5rem;
  height: 1.5rem;
}

.doc-review__annotation-toggle .outlook-bubble-tooltip {
  z-index: 40;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.16s ease,
    visibility 0.16s ease;
}

.doc-review__annotation-toggle:hover .outlook-bubble-tooltip {
  opacity: 1;
  visibility: visible;
}

.doc-review__preview-body {
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  position: relative;
  border-radius: 0 0 0.65rem 0.65rem;
  overflow: auto;
}

.doc-review__preview-frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: var(--panel);
}

.pdf-viewer {
  position: relative;
  height: 100%;
  border-radius: inherit;
  background: color-mix(in srgb, var(--tab) 70%, transparent);
}

.pdf-viewer__scroll {
  position: relative;
  height: 100%;
  overflow: auto;
  border-radius: inherit;
  scrollbar-color: color-mix(in srgb, var(--muted) 70%, transparent) transparent;
  overscroll-behavior: contain;
}

.pdf-viewer--fit-content {
  height: auto;
  display: flex;
  flex-direction: column;
}

.pdf-viewer--fit-content .pdf-viewer__scroll {
  height: auto;
  overflow: visible;
  overscroll-behavior: auto;
}

.pdf-viewer--fit-content .pdf-viewer__toolbar {
  position: sticky;
  bottom: 0.7rem;
  right: auto;
  order: 2;
  align-self: flex-end;
  margin: 0 0.7rem 0.7rem 0;
}

.pdf-viewer__scroll--zoomed {
  cursor: grab;
}

.pdf-viewer__scroll--panning {
  cursor: grabbing;
  user-select: none;
}

.pdf-viewer__toolbar {
  position: absolute;
  z-index: 3;
  right: 0.7rem;
  bottom: 0.7rem;
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.pdf-viewer__page-jump,
.pdf-viewer__zoom {
  display: flex;
  align-items: center;
  gap: 0.1rem;
  padding: 0.2rem;
  border: 1px solid var(--border);
  border-radius: 0.45rem;
  background: color-mix(in srgb, var(--panel) 92%, transparent);
  box-shadow: 0 1px 4px rgb(0 0 0 / 10%);
}

.pdf-viewer__page-jump {
  gap: 0.1rem;
}

.pdf-viewer__page-count {
  min-width: 2.6rem;
  padding: 0 0.15rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  text-align: center;
}

.pdf-viewer__zoom-btn,
.pdf-viewer__zoom-level {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}

.pdf-viewer__zoom-btn {
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 0.3rem;
}

.pdf-viewer__zoom-btn:hover:not(:disabled) {
  background: color-mix(in srgb, var(--tab) 70%, transparent);
}

.pdf-viewer__zoom-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

.pdf-viewer__zoom-btn svg {
  width: 0.95rem;
  height: 0.95rem;
}

.pdf-viewer__zoom-level {
  min-width: 2.6rem;
  height: 1.7rem;
  padding: 0 0.2rem;
  border-radius: 0.3rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.pdf-viewer__zoom-level:hover {
  background: color-mix(in srgb, var(--tab) 70%, transparent);
}

.pdf-viewer__pages {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: max-content;
  min-width: 100%;
}

.pdf-viewer__page {
  position: relative;
  width: max-content;
  margin: 0 auto;
  background: var(--panel);
  box-shadow: 0 1px 2px rgb(0 0 0 / 8%);
  overflow: visible;
}

.pdf-viewer__canvas {
  display: block;
  width: auto;
  height: auto;
}

.pdf-viewer__overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  /* SVG defaults to hidden; swell/labels must paint past the page bounds. */
  overflow: visible;
  opacity: 1;
  transition: opacity 0.22s ease;
}

.pdf-viewer__overlay--hidden {
  opacity: 0;
}

.pdf-viewer__overlay--hidden .field-annotation {
  pointer-events: none;
}

.field-annotation--obscured {
  opacity: 0 !important;
  pointer-events: none;
}

.pdf-viewer__loading {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--panel) 70%, transparent);
  color: var(--muted);
}

.pdf-viewer__hint {
  margin: 0.5rem 0.75rem 0.75rem;
  text-align: center;
  color: var(--muted);
}

.doc-review__preview-image-wrap {
  height: 100%;
  overflow: auto;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: color-mix(in srgb, var(--tab) 55%, transparent);
}

.doc-review__preview-image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.doc-review__download {
  color: var(--sidebar);
  font-weight: 500;
  text-decoration: none;
}

.doc-review__download:hover {
  text-decoration: underline;
}

.doc-review__preview-placeholder {
  height: 100%;
  display: grid;
  place-content: center;
  gap: 0.35rem;
  text-align: center;
  color: var(--muted);
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--tab) 80%, transparent) 25%,
      transparent 25%),
    linear-gradient(225deg,
      color-mix(in srgb, var(--tab) 80%, transparent) 25%,
      transparent 25%);
  background-size: 1.5rem 1.5rem;
  font-weight: 500;
}

.doc-review__preview-meta {
  margin: 0;
  font-weight: 400;
  max-width: 24rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

.doc-review__form {
  display: grid;
  gap: 1rem;
  padding: 1rem;
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
}

/* Keep inbox-only fields in the form grid so the 1rem gap still applies. */
#review-inbox-fields,
#email-fields-inbox-only {
  display: contents;
}

.doc-review__halaxy {
  display: grid;
  gap: 0.35rem;
  justify-items: start;
}

.doc-review__patient-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  box-sizing: border-box;
  border: 1px solid var(--border);
  border-radius: 0.4rem;
  padding: 0.45rem 0.65rem;
}

.doc-review__patient-details {
  display: grid;
  flex: 1 1 10rem;
  gap: 0.15rem;
  min-width: 0;
}

.doc-review__patient-name {
  font-weight: 500;
  line-height: 1.3;
  width: fit-content;
  max-width: 100%;
  cursor: default;
}

.doc-review__patient-dob {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
  width: fit-content;
  max-width: 100%;
  cursor: default;
}

.doc-review__patient-status {
  margin: 0;
  font-size: 0.85rem;
  color: var(--muted);
}

.doc-review__patient-row .doc-review__halaxy {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
}

.doc-review__halaxy .page-button {
  justify-self: start;
  display: inline-flex;
}

.doc-review__halaxy-copy {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.doc-review__halaxy-logo {
  display: block;
  flex: 0 0 auto;
  height: 1.8rem;
  width: auto;
  padding: 0.2rem 0.3rem;
  border-radius: 0.35rem;
  background: #eef1f3;
  box-sizing: content-box;
}

.doc-review__halaxy-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.25;
}

.doc-review__halaxy-name {
  font-weight: 400;
  color: var(--muted);
}

.doc-review__halaxy .page-button:disabled {
  opacity: 1;
}

.doc-review__halaxy-warning {
  flex: 0 0 auto;
  line-height: 1;
}

.doc-review__halaxy-title--missing {
  color: var(--muted);
  opacity: 0.6;
  text-decoration: line-through;
}

.doc-review__field {
  display: grid;
  gap: 0.35rem;
  border-radius: 8px;
  outline: 2px solid transparent;
  outline-offset: 4px;
  transition:
    outline-color 0.22s ease,
    background-color 0.22s ease;
}

.doc-review__field--linked {
  outline-color: transparent;
  background: color-mix(in srgb,
      var(--annotation-color, var(--tab-active)) 16%,
      transparent);
  padding: 0.5rem 0.65rem;
  margin: -0.5rem -0.65rem;
}

@media (prefers-color-scheme: dark) {
  .doc-review__field--linked {
    background: color-mix(in srgb,
        var(--annotation-color, var(--tab-active)) 35%,
        transparent);
  }
}

.doc-review__field--linked .doc-review__field-label> :first-child {
  background: var(--form-surface, var(--panel));
  border-radius: 4px;
  box-decoration-break: clone;
  padding: 0 0.2rem;
  margin: 0 -0.15rem;
  box-shadow: 0 0 2px 2px var(--form-surface, var(--panel));
}

.doc-review__field-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  font-weight: 500;
  color: var(--muted);
}

/* Keep controls on the panel surface so the wash only frames them. */
.doc-review__field--linked .doc-review__input,
.doc-review__field--linked .doc-review__radios,
.doc-review__field--linked .doc-review__patient-row {
  background: var(--form-surface, var(--panel));
}

.doc-review__input {
  width: 100%;
  box-sizing: border-box;
  font: inherit;
  color: inherit;
  border: 1px solid var(--border);
  border-radius: 0.4rem;
  padding: 0.45rem 0.65rem;
  background: transparent;
}

.doc-review__textarea {
  resize: vertical;
  min-height: 6rem;
  line-height: 1.4;
}

.doc-review__control--annotated .doc-review__input {
  border-color: color-mix(in srgb, var(--annotation-color) 70%, var(--border));
  box-shadow: 0 0 8px 1px color-mix(in srgb, var(--annotation-color) 26%, transparent);
}

.doc-review__control--annotated .doc-review__radios,
.doc-review__control--annotated .doc-review__patient-row {
  border: 1px solid color-mix(in srgb, var(--annotation-color) 70%, var(--border));
  border-radius: 0.4rem;
  padding: 0.45rem 0.65rem;
  box-shadow: 0 0 8px 1px color-mix(in srgb, var(--annotation-color) 26%, transparent);
}

.doc-review__input:focus {
  outline: 2px solid color-mix(in srgb, var(--sidebar) 35%, transparent);
  outline-offset: 1px;
}

.doc-review__control--annotated .doc-review__input:focus {
  outline-color: color-mix(in srgb, var(--annotation-color) 55%, transparent);
}

.doc-review__radios {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem 1.25rem;
}

.doc-review__radios--stack {
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 0.35rem;
}

.doc-review__radio {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 1rem;
  color: var(--ink);
  cursor: pointer;
}

.doc-review__checkbox {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
  color: var(--ink);
  cursor: pointer;
  user-select: none;
}

.doc-review__checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
}

.doc-review__checkbox input[type="checkbox"] {
  appearance: none;
  box-sizing: border-box;
  flex: 0 0 auto;
  width: 1.25rem;
  height: 1.25rem;
  margin: 0;
  border: 1.5px solid color-mix(in srgb, var(--border) 55%, var(--ink));
  border-radius: 0.3rem;
  background: var(--panel);
  cursor: pointer;
  display: grid;
  place-content: center;
}

.doc-review__checkbox input[type="checkbox"]::before {
  content: "";
  width: 0.7rem;
  height: 0.7rem;
  transform: scale(0);
  transition: transform 0.12s ease-in-out;
  background-color: var(--ink);
  clip-path: polygon(
    14% 44%,
    0 65%,
    50% 100%,
    100% 16%,
    80% 0%,
    43% 62%
  );
}

.doc-review__checkbox input[type="checkbox"]:checked {
  border-color: var(--ink);
  background: color-mix(in srgb, var(--ink) 6%, var(--panel));
}

.doc-review__checkbox input[type="checkbox"]:checked::before {
  transform: scale(1);
}

.doc-review__checkbox input[type="checkbox"]:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--ink) 35%, transparent);
  outline-offset: 2px;
}

.doc-review__checkbox input[type="checkbox"]:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.doc-review__checkbox:has(input:disabled) {
  cursor: not-allowed;
  opacity: 0.7;
}

.doc-review__attachment-clip {
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  color: var(--muted);
}

.confidence-pill {
  display: inline-block;
  padding: 0.1rem 0.4rem;
  border-radius: 0.3rem;
  border: 1px solid transparent;
  font-weight: 600;
  line-height: 1.3;
}

.confidence-pill--high {
  background: #ecfdf3;
  border-color: #abefc6;
  color: #067647;
}

.confidence-pill--mid {
  background: #fffaeb;
  border-color: #fedf89;
  color: #b54708;
}

.confidence-pill--low {
  background: #fef3f2;
  border-color: #fecdca;
  color: #b42318;
}

@media (prefers-color-scheme: dark) {
  .confidence-pill--high {
    background: #052e1c;
    border-color: #085d3a;
    color: #75e0a7;
  }

  .confidence-pill--mid {
    background: #3d2e0a;
    border-color: #854d0e;
    color: #fbbf24;
  }

  .confidence-pill--low {
    background: #450a0a;
    border-color: #912018;
    color: #f97066;
  }
}

.doc-review__actions {
  display: grid;
  gap: 0.45rem;
  padding-top: 0.35rem;
  border-top: 1px solid var(--border);
}

.doc-review__note-box {
  box-sizing: border-box;
  border: 1px solid var(--border);
  border-radius: 0.4rem;
  padding: 0.55rem 0.65rem;
  background: var(--form-surface, var(--panel));
}

.doc-review__note-box:focus-within {
  outline: 2px solid color-mix(in srgb, var(--sidebar) 35%, transparent);
  outline-offset: 1px;
}

.doc-review__note-box--annotated {
  border-color: color-mix(
    in srgb,
    var(--annotation-color, var(--tab-active)) 70%,
    var(--border)
  );
  box-shadow: 0 0 8px 1px
    color-mix(in srgb, var(--annotation-color, var(--tab-active)) 26%, transparent);
}

.doc-review__note-box--annotated:focus-within {
  outline-color: color-mix(
    in srgb,
    var(--annotation-color, var(--tab-active)) 55%,
    transparent
  );
}

.doc-review__note-editor {
  min-height: 8.5rem;
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  outline: none;
  caret-color: var(--ink);
}

.doc-review__note-editor[data-disabled="true"] {
  opacity: 0.72;
  caret-color: transparent;
}

.doc-review__note-editor--linked {
  border-radius: 0.25rem;
  outline: 2px solid var(--annotation-color, var(--tab-active));
  outline-offset: 2px;
  background: color-mix(
    in srgb,
    var(--annotation-color, var(--tab-active)) 12%,
    transparent
  );
}

.doc-review__note-attribution-inline {
  display: inline;
}

.doc-review__note-token {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin: 0 0.1rem;
  padding: 0.05rem 0.35rem;
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  border-radius: 0.3rem;
  background: color-mix(in srgb, var(--border) 55%, transparent);
  color: var(--ink);
  font: inherit;
  line-height: 1.3;
  vertical-align: baseline;
  cursor: default;
  user-select: all;
}

.doc-review__note-token--annotated {
  border-color: color-mix(
    in srgb,
    var(--annotation-color, var(--tab-active)) 55%,
    var(--border)
  );
}

.doc-review__note-token--linked {
  border-color: var(--annotation-color, var(--tab-active));
  background: color-mix(
    in srgb,
    var(--annotation-color, var(--tab-active)) 16%,
    transparent
  );
}

@media (prefers-color-scheme: dark) {
  .doc-review__note-editor--linked,
  .doc-review__note-token--linked {
    background: color-mix(
      in srgb,
      var(--annotation-color, var(--tab-active)) 35%,
      transparent
    );
  }
}

.doc-review__note-textarea {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  line-height: 1.45;
  resize: vertical;
  min-height: 8.5rem;
}

.doc-review__note-textarea:focus {
  outline: none;
}

.doc-review__actions .page-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.doc-review__actions-note {
  margin: 0;
  color: var(--muted);
}

.doc-review__actions-success {
  margin: 0;
  color: #027a48;
}

.doc-review__actions-success a {
  color: inherit;
  font-weight: 600;
}

.doc-review__actions-done {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-weight: 600;
}

.doc-review__actions-done-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem 0.75rem;
}

.doc-review__actions-done-icon {
  width: 1.1rem;
  height: 1.1rem;
  flex-shrink: 0;
}

@media (prefers-color-scheme: dark) {
  .doc-review__actions-success {
    color: #75e0a7;
  }
}

.doc-review__actions .error {
  margin: 0;
}

/* Processing (extraction in progress) — shared spinner + overlays */

.doc-review__spinner {
  width: 1.15rem;
  height: 1.15rem;
  flex: 0 0 auto;
  /* Fixed colors in both schemes so the spin stays obvious. */
  border: 2px solid color-mix(in srgb, #5a6b73 28%, transparent);
  border-top-color: #006969;
  border-radius: 50%;
  animation: doc-review-spin 0.7s linear infinite;
}

.doc-review__spinner--lg {
  width: 2.25rem;
  height: 2.25rem;
  border-width: 4.5px;
}

@keyframes doc-review-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Zero-height sticky host so the pill floats over content without a layout gap. */
.doc-review__processing-pill-anchor {
  position: sticky;
  top: 0;
  z-index: 10;
  height: 0;
  overflow: visible;
  pointer-events: none;
}

.doc-review__processing-pill {
  position: absolute;
  top: 1.35rem;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 0.55rem;
  width: max-content;
  height: auto;
  padding: 0.55rem 0.9rem;
  /* Fixed light appearance in both color schemes. */
  border: 1px solid #d5e0e4;
  border-radius: 0.55rem;
  background: color-mix(in srgb, #ffffff 94%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow:
    0 8px 32px color-mix(in srgb, #7c3aed 38%, transparent),
    0 2px 10px color-mix(in srgb, #7c3aed 22%, transparent),
    0 0 0 1px color-mix(in srgb, #7c3aed 12%, transparent);
  color: #142026;
  color-scheme: light;
  font-weight: 600;
  white-space: nowrap;
  pointer-events: none;
}

.doc-review__processing-pill .doc-review__spinner {
  border-color: color-mix(in srgb, #5a6b73 28%, transparent);
  border-top-color: #006969;
}

.doc-review__form-body {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

.doc-review__form-body--processing .doc-review__form {
  opacity: 0.35;
  pointer-events: none;
  filter: blur(1.5px);
}

.doc-review__processing {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 1rem;
  text-align: center;
  font-weight: 600;
  color: var(--ink);
  background: color-mix(in srgb, var(--panel) 55%, transparent);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

/* "Open in Halaxy" while processing: always present, disabled, spinning. */
.doc-review__halaxy-copy--processing {
  color: var(--muted);
}

@media (prefers-reduced-motion: reduce) {
  .doc-review__spinner {
    animation: none;
    border-style: dotted;
  }
}

:root {
  --annotation-pad-x: 4px;
  --annotation-pad-y: 5px;
  --annotation-label-gap: 3px;
  --annotation-label-pad-x: 3px;
  --annotation-label-pad-y: 1.5px;
  --annotation-label-font: 600 13px/1 Outfit, sans-serif;
  --annotation-label-reserve: calc(var(--annotation-pad-y) + var(--annotation-label-gap) + var(--annotation-label-pad-y) * 2 + 13px);
  --annotation-pulse-x: 1.15;
  --annotation-pulse-y: 1.28;
  --annotation-pulse-peak-x: 1.18;
  --annotation-pulse-peak-y: 1.32;
}

.field-annotation {
  pointer-events: auto;
  cursor: pointer;
  scroll-margin: 72px;
  transition: opacity 0.18s ease;
}

.field-annotation__label-bg {
  fill: #ffffff;
  background: #ffffff;
  opacity: 0.6;
}

.field-annotation__label--on-dark .field-annotation__label-bg {
  opacity: 0.9;
}

.field-annotation--pulse .field-annotation__label-bg {
  opacity: 1;
}

/*
  Box + caption live in __overlay. Pulse scales that layer from the box
  centre so the label rides with the highlight. Document text stays outside.
*/
.field-annotation__overlay {
  pointer-events: none;
  transform-origin: center;
  transform: scale(1);
  transition: transform 0.18s ease;
}

.field-annotation--pulse>.field-annotation__overlay {
  transform: scale(var(--annotation-pulse-x), var(--annotation-pulse-y));
  animation: annotation-swell-unpulse 0.7s ease-out forwards;
}

/* Hover swell goes to the pulse peak, then eases back to rest. */
@keyframes annotation-swell-unpulse {
  0% {
    transform: scale(1);
  }

  42% {
    transform: scale(var(--annotation-pulse-peak-x),
        var(--annotation-pulse-peak-y));
  }

  100% {
    transform: scale(var(--annotation-pulse-x), var(--annotation-pulse-y));
  }
}

@media (prefers-reduced-motion: reduce) {
  .field-annotation--pulse>.field-annotation__overlay {
    animation: none;
  }
}

/* Image boxes can vanish. HTML marks must keep the wrapped text. */
button.field-annotation--image.field-annotation--hidden {
  opacity: 0;
  pointer-events: none;
}

mark.field-annotation--hidden {
  pointer-events: none;
  cursor: inherit;
}

mark.field-annotation--hidden>.field-annotation__overlay {
  opacity: 0;
}

.field-annotation--pulse .field-annotation__box {
  fill-opacity: 0.08;
  stroke-width: 3.25;
}

svg .field-annotation__overlay {
  transform-box: view-box;
}

/* HTML marks — the overlay is positioned against this box. */
mark.field-annotation {
  position: relative;
  isolation: isolate;
  display: inline-block;
  vertical-align: baseline;
  background: transparent;
  color: inherit;
  border-radius: 2px;
  padding: 0;
}

.image-annotation-layer {
  position: relative;
  display: inline-block;
  max-width: 100%;
  vertical-align: top;
  overflow: visible;
}

.image-annotation-layer>img {
  display: block;
  max-width: 100%;
  height: auto;
}

/*
  Image boxes use left/top/width/height % on the photo. They must stay
  absolute — relative (as used for <mark>) stacks them below the image.
*/
button.field-annotation--image {
  position: absolute;
  isolation: isolate;
  display: block;
  border: 0;
  border-radius: 2px;
  padding: 0;
  background: transparent;
  color: inherit;
}

mark.field-annotation--pulse,
button.field-annotation--image.field-annotation--pulse {
  z-index: 2;
}

mark.field-annotation>.field-annotation__overlay,
button.field-annotation--image>.field-annotation__overlay {
  position: absolute;
  inset: calc(-1 * var(--annotation-pad-y)) calc(-1 * var(--annotation-pad-x));
  pointer-events: none;
}

mark.field-annotation .field-annotation__box,
button.field-annotation--image .field-annotation__box {
  position: absolute;
  inset: 0;
  border-radius: 2px;
  background: color-mix(in srgb,
      var(--annotation-color, #8b5cf6) 20%,
      transparent);
  box-shadow: inset 0 0 0 2px var(--annotation-color, #8b5cf6);
  transition:
    background 0.18s ease,
    box-shadow 0.18s ease;
}

mark.field-annotation--pulse .field-annotation__box,
button.field-annotation--image.field-annotation--pulse .field-annotation__box {
  background: color-mix(in srgb,
      var(--annotation-color, #8b5cf6) 8%,
      transparent);
  box-shadow: inset 0 0 0 3.25px var(--annotation-color, #8b5cf6);
}

mark.field-annotation .field-annotation__label,
button.field-annotation--image .field-annotation__label {
  position: absolute;
  left: 0;
  bottom: calc(100% + var(--annotation-label-gap));
  z-index: 1;
  font: var(--annotation-label-font);
  color: var(--annotation-color, #8b5cf6);
}

mark.field-annotation .field-annotation__label-bg,
button.field-annotation--image .field-annotation__label-bg {
  position: absolute;
  inset: 0;
  border-radius: 2px;
  z-index: -1;
}

mark.field-annotation .field-annotation__label-text,
button.field-annotation--image .field-annotation__label-text {
  position: relative;
  display: block;
  padding: var(--annotation-label-pad-y) var(--annotation-label-pad-x);
  white-space: nowrap;
}
.outlook-bubble-tooltip {
  --outlook-bubble-border: color-mix(in srgb, var(--border) 45%, var(--ink));
  position: absolute;
  z-index: 30;
  left: 50%;
  bottom: calc(100% + 0.55rem);
  top: auto;
  transform: translateX(-50%);
  width: max-content;
  max-width: min(18rem, 70vw);
  padding: 0.45rem 0.65rem;
  border: 1.5px solid var(--outlook-bubble-border);
  border-radius: 0.45rem;
  background: var(--panel);
  box-shadow: 0 6px 20px color-mix(in srgb, var(--ink) 14%, transparent);
  color: var(--body);
  font-weight: 400;
  line-height: 1.35;
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
  pointer-events: none;
}

.outlook-bubble-tooltip--portal {
  position: fixed;
  bottom: auto;
  z-index: 80;
  transform: translate(-50%, calc(-100% - 0.55rem));
}

.outlook-bubble-tooltip::after,
.outlook-bubble-tooltip::before {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  border-style: solid;
}

/* Border triangle (underneath fill) */
.outlook-bubble-tooltip::before {
  top: 100%;
  border-width: 8px 8px 0;
  border-color: var(--outlook-bubble-border) transparent transparent;
}

/* Fill triangle */
.outlook-bubble-tooltip::after {
  top: calc(100% - 1.5px);
  border-width: 7px 7px 0;
  border-color: var(--panel) transparent transparent;
}

.outlook-bubble-tooltip__muted {
  color: var(--muted);
}

.outlook-bubble-tooltip--interactive {
  pointer-events: auto;
}

.outlook-bubble-tooltip__body {
  display: block;
}

.outlook-bubble-tooltip__link {
  display: inline-block;
  margin-top: 0.4rem;
  font-weight: 600;
}

.hover-tooltip-wrap {
  display: inline-flex;
  justify-self: start;
  cursor: help;
}

.hover-tooltip-wrap > :disabled {
  pointer-events: none;
}

/* Outlook inbox + email message views */
.mailbox-connect-form {
  display: flex;
  align-items: center;
}

.mailbox-connect-form input {
  font: inherit;
  color: inherit;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  padding: 0.45rem 0.7rem;
  background: transparent;
  width: 100%;
  min-width: 14rem;
  box-sizing: border-box;
}

.mailbox-connect-form input:focus {
  outline: 2px solid color-mix(in srgb, currentColor 25%, transparent);
  outline-offset: 1px;
}

.mailbox-connect-trigger {
  font-weight: 500;
  color: var(--ink);
  background: color-mix(in srgb, var(--ink) 5%, var(--panel));
  border-color: var(--border);
}

.mailbox-connect-trigger:hover:not(:disabled) {
  color: var(--ink);
  background: color-mix(in srgb, var(--ink) 9%, var(--panel));
  border-color: color-mix(in srgb, var(--border) 40%, var(--ink));
}

@media (prefers-color-scheme: dark) {
  .mailbox-connect-trigger {
    color: var(--ink);
    background: color-mix(in srgb, var(--ink) 8%, var(--panel));
    border-color: color-mix(in srgb, var(--border) 70%, var(--ink));
  }

  .mailbox-connect-trigger:hover:not(:disabled) {
    background: color-mix(in srgb, var(--ink) 12%, var(--panel));
    border-color: color-mix(in srgb, var(--border) 45%, var(--ink));
  }
}

.outlook-mailbox-picker {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.65rem;
  margin-top: 0.75rem;
  width: fit-content;
}

.outlook-mailbox-picker__label {
  flex: none;
  font-weight: 500;
  color: var(--ink);
}

.outlook-mailbox-menu {
  position: relative;
  min-width: 16rem;
}

.outlook-mailbox-menu__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  min-height: 2.35rem;
  padding: 0.45rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 0.45rem;
  background: var(--panel);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.outlook-mailbox-menu__trigger:hover,
.outlook-mailbox-menu__trigger:focus-visible {
  border-color: color-mix(in srgb, var(--border) 40%, currentColor);
  outline: none;
}

.outlook-mailbox-menu__trigger.is-open {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-color: color-mix(in srgb, var(--border) 40%, currentColor);
}

.outlook-mailbox-menu__value {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.outlook-mailbox-menu__chevron {
  flex: none;
  width: 0.45rem;
  height: 0.45rem;
  margin-right: 0.1rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.65;
}

.outlook-mailbox-menu__trigger.is-open .outlook-mailbox-menu__chevron {
  transform: translateY(0.12rem) rotate(225deg);
}

.outlook-mailbox-menu__list {
  position: absolute;
  z-index: 40;
  top: 100%;
  left: 0;
  right: 0;
  margin: 0;
  padding: 0.3rem;
  list-style: none;
  border: 1px solid color-mix(in srgb, var(--border) 40%, currentColor);
  border-top: 0;
  border-radius: 0 0 0.45rem 0.45rem;
  background: var(--panel);
  box-shadow: 0 0.4rem 0.9rem color-mix(in srgb, var(--ink) 10%, transparent);
  max-height: 16rem;
  overflow: auto;
}

.outlook-mailbox-menu__option {
  display: block;
  width: 100%;
  border: 0;
  border-radius: 0.3rem;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  padding: 0.5rem 0.55rem;
  cursor: pointer;
}

.outlook-mailbox-menu__option:hover,
.outlook-mailbox-menu__option:focus-visible {
  background: color-mix(in srgb, var(--tab) 80%, transparent);
  outline: none;
}

.outlook-mailbox-menu__option.is-selected {
  background: color-mix(in srgb, var(--tab) 90%, transparent);
  font-weight: 600;
}

.outlook-mailbox-menu__option--action {
  color: var(--muted);
  border-top: 1px solid var(--border);
  border-radius: 0 0 0.3rem 0.3rem;
  margin-top: 0.25rem;
  padding-top: 0.6rem;
}

.data-table-wrap.outlook-inbox-wrap {
  max-width: 100%;
  overflow: auto;
}

.outlook-inbox-th--clip {
  padding-left: 0.2rem;
  padding-right: 0.4rem;
}

.data-table--resizable td.outlook-inbox-from,
.outlook-inbox-table thead th:first-child {
  overflow: visible;
  white-space: normal;
  text-overflow: unset;
  padding-right: 0.35rem;
}

.outlook-from-trigger {
  position: relative;
  display: block;
  width: 100%;
  max-width: 100%;
}

.outlook-from-trigger__text {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.outlook-inbox-table .outlook-inbox-subject {
  overflow: hidden;
}

.outlook-inbox-table .outlook-inbox-subject__line {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.outlook-inbox-table .outlook-inbox-subject__title {
  font-weight: inherit;
}

.outlook-inbox-table .outlook-inbox-subject__preview {
  margin-left: 0.5rem;
  color: var(--muted);
  font-weight: 400;
}

.outlook-inbox-table tr.is-unread .outlook-inbox-subject__title {
  font-weight: 650;
}

.outlook-inbox-table .outlook-inbox-date {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
}

.data-table--resizable td.outlook-inbox-clip {
  position: relative;
  text-align: center;
  color: var(--muted);
  vertical-align: middle;
  overflow: visible;
  white-space: normal;
  text-overflow: unset;
  padding-left: 0.2rem;
  padding-right: 0.4rem;
}

.outlook-clip-trigger {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.15rem;
}

.outlook-inbox-table tr.is-open td {
  background: color-mix(in srgb, var(--tab) 55%, transparent);
}

.outlook-inbox-details-row td {
  background: color-mix(in srgb, var(--tab) 35%, var(--panel));
  border-bottom: 1px solid var(--border);
  padding: 0.85rem 0.9rem 1rem;
}

.outlook-message__clip-icon {
  width: 1.15rem;
  height: 1.15rem;
  display: block;
}

.outlook-message__preview {
  margin: 0;
  padding: 0;
  color: var(--muted);
  white-space: pre-wrap;
}

.outlook-message__details {
  display: grid;
  gap: 0.65rem;
  justify-items: start;
  max-width: 40rem;
}

.outlook-message__categories {
  margin: 0;
  color: var(--muted);
}

.outlook-attachments {
  padding: 0;
  width: 100%;
}

.outlook-attachment-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.35rem;
}

.outlook-attachment-link {
  display: grid;
  gap: 0.1rem;
  width: 100%;
  text-align: left;
  border: 1px solid var(--border);
  border-radius: 0.4rem;
  background: transparent;
  color: inherit;
  padding: 0.55rem 0.7rem;
  cursor: pointer;
}

.outlook-attachment-link:hover:not(:disabled):not(.is-disabled) {
  background: color-mix(in srgb, var(--tab) 70%, transparent);
}

.outlook-attachment-link:disabled,
.outlook-attachment-link.is-disabled {
  cursor: default;
  opacity: 0.75;
}

.outlook-attachment-name {}

.outlook-attachment-meta {
  color: var(--muted);
}

.outlook-message-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.85rem;
}

.email-message__meta {
  margin-top: 0.25rem;
}

.email-message__preview-card {
  min-height: 0;
  height: 100%;
}

.email-message__tabs {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  padding: 0.65rem 0.85rem;
  border-bottom: 1px solid var(--border);
  background: var(--panel);
  border-radius: 0.65rem 0.65rem 0 0;
}

.email-message__tab {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  border: 1px solid var(--border);
  border-radius: 0.4rem;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 500;
  padding: 0.4rem 0.6rem;
  max-width: 14rem;
  overflow: hidden;
  white-space: nowrap;
  cursor: pointer;
}

.email-message__tab-clip {
  flex: 0 0 auto;
  width: 0.85rem;
  height: 0.85rem;
}

.email-message__tab-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.email-message__tab:hover:not(:disabled) {
  background: color-mix(in srgb, var(--tab) 80%, transparent);
}

.email-message__tab.is-selected {
  border-color: color-mix(in srgb, var(--border) 30%, currentColor);
  background: color-mix(in srgb, var(--tab) 90%, transparent);
  font-weight: 600;
  color: var(--ink);
}

.email-message__tab--more {
  color: var(--muted);
  font-weight: 500;
}

.email-message__tab--more:disabled {
  opacity: 0.6;
  cursor: default;
}

.email-message__tabs-status {
  color: var(--muted);
  padding: 0 0.35rem;
}

.email-message__tabs-toggle {
  margin-left: auto;
  align-self: stretch;
  display: flex;
}

.email-message__tabs-toggle .doc-review__annotation-toggles {
  height: 100%;
}

.email-message__tabs-toggle .doc-review__annotation-toggle {
  height: 100%;
  padding-block: 0;
}

.email-message__tabs-error {
  margin: 0;
  padding: 0.5rem 0.85rem;
  border-bottom: 1px solid var(--border);
}

.email-message__preview-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  gap: 0;
  min-height: 0;
  height: auto;
  position: relative;
  overflow: auto;
}

@media (max-width: 960px) {
  .email-message__preview-body {
    min-height: 24rem;
  }
}

.email-message__stream {
  display: flex;
  flex-direction: column;
}

.email-message__section {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
}

.email-message__section+.email-message__section {
  border-top: 1px solid var(--border);
}

.email-message__section--pdf {
  height: auto;
}

.email-message__section-label {
  flex: 0 0 auto;
  padding: 0.55rem 1rem;
  font-weight: 600;
  color: var(--muted);
  background: color-mix(in srgb, var(--tab) 50%, var(--panel));
  border-bottom: 1px solid var(--border);
}

.email-message__section-placeholder {
  min-height: 12rem;
}

.email-message__headers {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: var(--annotation-label-reserve) 1rem 0.7rem;
  border-bottom: 1px solid #e5e7eb;
  background: #fff;
  color-scheme: light;
  overflow: visible;
}

.email-message__header-row {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: 0.6rem;
  align-items: baseline;
}

.email-message__header-label {
  font-weight: 600;
  color: #64748b;
}

.email-message__header-value {
  color: #142026;
  overflow-wrap: anywhere;
}

.email-message__header-row:first-child .email-message__header-value {
  font-weight: 600;
}

.email-message__body-wrap {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  overflow: visible;
}

.email-message__html-frame {
  display: block;
  width: 100%;
  height: auto;
  border: 0;
  overflow: visible;
  background: #fff;
  color-scheme: light;
}

.email-message__text-body {
  margin: 0;
  padding: var(--annotation-label-reserve) 1rem 1rem;
  white-space: pre-wrap;
  font: inherit;
  line-height: 1.45;
  color: #142026;
  background: #fff;
  color-scheme: light;
}

.email-message__attachment-preview-frame {
  flex: 0 0 auto;
  height: auto;
}

.email-message__docx-frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #fff;
}

.email-message__docx-frame--stream {
  height: 0;
  min-height: 12rem;
}

.email-message__image-wrap {
  flex: 0 0 auto;
  padding: 0.75rem 1rem 1rem;
  height: auto;
}

.email-message__image {
  display: block;
  max-width: 100%;
  height: auto;
}

.floating-live-chat {
  /* Portaled to body — lock marketing light brand so dark mode / :root
     tokens don't replace the Burnout highlight wash with a near-black mix. */
  color-scheme: light;
  --bg: #f4f7f8;
  --ink: #142026;
  --body: #3a4a52;
  --muted: #5a6b73;
  --panel: #ffffff;
  --border: #d5e0e4;
  --sidebar: #006969;
  --sidebar-ink: #e8f7f7;
  --sidebar-muted: #cae7e8;
  --sidebar-hover: #128284;
  --sidebar-active: #0b5557;
  --sidebar-highlight-bg: color-mix(in srgb, #006969 11%, #f4f7f8);

  position: fixed;
  z-index: 70;
  width: 3.5rem;
  height: 3.5rem;
  touch-action: none;
}

.floating-live-chat-panel {
  position: absolute;
  width: min(22.5rem, calc(100vw - 1.5rem));
  max-height: min(32rem, calc(100vh - 6.5rem));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 1rem;
  background: var(--panel);
  color: var(--ink);
  box-shadow:
    0 0.75rem 2rem color-mix(in srgb, var(--ink) 14%, transparent),
    0 0.15rem 0.4rem color-mix(in srgb, var(--ink) 8%, transparent);
  animation: floating-live-chat-panel-in 0.18s ease-out;
}

.floating-live-chat-panel--above {
  bottom: calc(100% + 0.75rem);
  transform-origin: bottom right;
}

.floating-live-chat-panel--below {
  top: calc(100% + 0.75rem);
  transform-origin: top right;
}

.floating-live-chat-panel--align-end {
  right: 0;
}

.floating-live-chat-panel--align-start {
  left: 0;
}

@keyframes floating-live-chat-panel-in {
  from {
    opacity: 0;
    transform: translateY(0.4rem) scale(0.97);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .floating-live-chat-panel {
    animation: none;
  }
}

.floating-live-chat-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.9rem 0.9rem 0.75rem;
  background: var(--sidebar);
  color: var(--sidebar-ink);
  cursor: grab;
  user-select: none;
}

.floating-live-chat-header:active {
  cursor: grabbing;
}

.floating-live-chat-header-copy {
  min-width: 0;
}

.floating-live-chat-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.floating-live-chat-subtitle {
  margin: 0.2rem 0 0;
  font-size: 0.8rem;
  color: var(--sidebar-muted);
  line-height: 1.35;
}

.floating-live-chat-header-actions {
  flex: none;
  display: flex;
  align-items: center;
  gap: 0;
  margin: -0.15rem -0.15rem 0 0;
}

.floating-live-chat-header-btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.55rem;
  height: 1.55rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.floating-live-chat-header-btn:hover {
  background: color-mix(in srgb, #fff 14%, transparent);
}

.floating-live-chat-header-btn svg {
  width: 1.1rem;
  height: 1.1rem;
}

.floating-live-chat-messages {
  flex: 1 1 auto;
  min-height: 10rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  padding: 0.9rem;
  background: color-mix(in srgb, var(--bg) 65%, var(--panel));
}

.floating-live-chat-load-earlier {
  align-self: center;
  margin: 0.1rem 0 0.15rem;
}

.floating-live-chat-load-earlier-btn {
  margin: 0;
  padding: 0.35rem 0.7rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted, #6b7280);
  font: inherit;
  font-size: 0.78rem;
  line-height: 1.2;
  text-decoration: underline;
  text-underline-offset: 0.15em;
  cursor: pointer;
}

.floating-live-chat-load-earlier-btn:disabled {
  cursor: default;
  text-decoration: none;
  opacity: 0.7;
}

.floating-live-chat-message-block {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  max-width: 88%;
}

.floating-live-chat-message-block:has(.floating-live-chat-bubble--user) {
  align-self: flex-end;
  align-items: flex-end;
}

.floating-live-chat-message-block:has(.floating-live-chat-bubble--assistant),
.floating-live-chat-message-block:has(.floating-live-chat-bubble--error) {
  align-self: flex-start;
  align-items: flex-start;
}

.floating-live-chat-bubble {
  max-width: 100%;
  padding: 0.65rem 0.8rem;
  border-radius: 0.85rem;
  font-size: 0.92rem;
  line-height: 1.4;
  white-space: pre-wrap;
  word-break: break-word;
}

.floating-live-chat-bubble--assistant {
  align-self: flex-start;
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--body);
  border-bottom-left-radius: 0.25rem;
}

.floating-live-chat-bubble--user {
  align-self: flex-end;
  background: var(--sidebar);
  color: var(--sidebar-ink);
  border-bottom-right-radius: 0.25rem;
}

.floating-live-chat-bubble--error {
  align-self: stretch;
  max-width: none;
  background: color-mix(in srgb, #b42318 10%, var(--panel));
  border: 1px solid color-mix(in srgb, #b42318 35%, var(--border));
  color: #b42318;
}

.floating-live-chat-seen {
  margin: 0;
  padding: 0 0.15rem;
  font-size: 0.72rem;
  line-height: 1.2;
  color: var(--muted, #6b7280);
}

.floating-live-chat-bubble--typing {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  max-width: 88%;
  padding: 0.55rem 0.75rem;
  color: var(--muted, #6b7280);
  font-size: 0.82rem;
}

.floating-live-chat-typing-label {
  white-space: nowrap;
}

.floating-live-chat-typing-dots {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
}

.floating-live-chat-typing-dots span {
  width: 0.35rem;
  height: 0.35rem;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.35;
  animation: floating-live-chat-typing-dot 1.2s ease-in-out infinite;
}

.floating-live-chat-typing-dots span:nth-child(2) {
  animation-delay: 0.15s;
}

.floating-live-chat-typing-dots span:nth-child(3) {
  animation-delay: 0.3s;
}

@keyframes floating-live-chat-typing-dot {
  0%,
  80%,
  100% {
    opacity: 0.3;
    transform: translateY(0);
  }
  40% {
    opacity: 1;
    transform: translateY(-0.12rem);
  }
}

.floating-live-chat-composer {
  display: grid;
  gap: 0.55rem;
  padding: 0.75rem;
  border-top: 1px solid var(--border);
  background: var(--panel);
}

.floating-live-chat-message-input {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 0.45rem;
  background: var(--bg);
  color: var(--ink);
  font: inherit;
  padding: 0.5rem 0.65rem;
  resize: none;
  min-height: 4.25rem;
  line-height: 1.4;
}

.floating-live-chat-message-input:focus {
  outline: 2px solid var(--sidebar);
  outline-offset: 1px;
}

.floating-live-chat-send-row {
  display: flex;
  justify-content: flex-end;
}

.floating-live-chat-send {
  border: 0;
  border-radius: 999px;
  padding: 0.45rem 1rem;
  background: var(--sidebar);
  color: var(--sidebar-ink);
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
}

.floating-live-chat-send:hover:not(:disabled) {
  background: var(--sidebar-hover);
}

.floating-live-chat-send:disabled {
  opacity: 0.65;
  cursor: wait;
}

.floating-live-chat-launcher {
  position: absolute;
  inset: 0;
  width: 3.5rem;
  height: 3.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background: var(--sidebar);
  color: var(--sidebar-ink);
  box-shadow:
    0 0.35rem 0.85rem color-mix(in srgb, var(--ink) 22%, transparent),
    0 0.1rem 0.3rem color-mix(in srgb, var(--ink) 14%, transparent);
  cursor: grab;
  user-select: none;
}

.floating-live-chat-launcher:active {
  cursor: grabbing;
}

.floating-live-chat-launcher:hover {
  background: var(--sidebar-hover);
}

.floating-live-chat-launcher svg {
  width: 1.65rem;
  height: 1.65rem;
  pointer-events: none;
  /* Stem pulls the bbox down; nudge so the bubble body looks centered. */
  transform: translateY(0.12rem);
}

.floating-live-chat--dragging .floating-live-chat-launcher,
.floating-live-chat--dragging .floating-live-chat-header {
  cursor: grabbing;
}