* { box-sizing: border-box; margin: 0; padding: 0; }

html {
  height: 100%;
  overflow: hidden;
}

:root {
  /* Aligns with Easol tailwind container-lg used by .floating-chat-agent */
  --tw-container-lg: 32rem;
  --surface-radius: 32px;
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --anim-duration: 250ms;
  --motion-duration-accordion: 180ms;

  --ease-in-quad: cubic-bezier(0.55, 0.085, 0.68, 0.53);
  --ease-in-cubic: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  --ease-in-quart: cubic-bezier(0.895, 0.03, 0.685, 0.22);
  --ease-in-quint: cubic-bezier(0.755, 0.05, 0.855, 0.06);
  --ease-in-expo: cubic-bezier(0.95, 0.05, 0.795, 0.035);
  --ease-in-circ: cubic-bezier(0.6, 0.04, 0.98, 0.335);

  --ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1);
  --ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
  --ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-out-circ: cubic-bezier(0.075, 0.82, 0.165, 1);

  --ease-in-out-quad: cubic-bezier(0.455, 0.03, 0.515, 0.955);
  --ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1);
  --ease-in-out-quart: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-in-out-quint: cubic-bezier(0.86, 0, 0.07, 1);
  --ease-in-out-expo: cubic-bezier(1, 0, 0, 1);
  --ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.15, 0.86);
  --page-gutter: 16px;
  /* Space between viewport and the rounded .page preview card */
  --preview-outer-padding: 8px;
  /* Context rail width inside .workspace-shell (Sales Pipeline view only) */
  --context-rail-width: 220px;
  /* Space under the scrollable thread so the last item clears the floating agent chat */
  --conversation-scroll-bottom-pad: 9rem;
  /* Context rail: keep placeholder above floating agent chat at bottom of viewport */
  --context-zone-bottom-safe: max(8.75rem, 26vh);
  /* Extra inset below floating agent inside the floating strip */
  --floating-zone-pad-bottom: 16px;
  /* Push-layout menu: strip revealed when .page narrows */
  --app-nav-reveal-width: min(260px, 42vw);
  /* Space between reveal text and .page when menu open — keeps full border + radius on .page */
  --page-open-gap: 12px;
}

body {
  font-family: var(--font);
  background: var(--neutral-75);
  color: var(--neutral-800);
  height: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ── Bottom prototype strip (below .page-shell); hidden when empty ── */
.state-switcher {
  position: relative;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  background: var(--neutral-75);
  border-top: 1px solid var(--neutral-200);
  flex-shrink: 0;
}

.state-switcher:empty {
  display: none;
}

.timeline-panel {
  width: 100%;
  min-width: 0;
}

.state-switcher--timeline-tabs {
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 10px;
}

.state-switcher__tabs-group {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
  flex: 1;
}

.state-switcher__tablist {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  min-width: 0;
}

.state-switcher--timeline-tabs .state-switcher__simulate {
  margin-left: auto;
  flex-shrink: 0;
}

.state-switcher__tail .state-switcher__simulate {
  margin-left: 0;
}

.state-switcher__tail {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  margin-left: auto;
}

.state-switcher__collapse {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--neutral-500);
  cursor: pointer;
  flex-shrink: 0;
  font: inherit;
}

.state-switcher__collapse:hover {
  background: var(--neutral-100);
  color: var(--neutral-800);
}

.state-switcher__collapse:focus-visible {
  outline: 2px solid var(--sea-400);
  outline-offset: 2px;
}

/* SuperUser bar hidden + sidebar lightning toggle */
body.super-user-bar--hidden #super-user-bar {
  display: none;
}

body:not(.super-user-bar--hidden) .page-reveal__super-user-toggle {
  display: none;
}

body.super-user-bar--hidden .page-reveal__super-user-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--neutral-700);
  cursor: pointer;
  line-height: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s var(--ease-standard), background-color 0.15s var(--ease-standard), color 0.15s var(--ease-standard);
}

body.super-user-bar--hidden #page-reveal:hover .page-reveal__super-user-toggle,
body.super-user-bar--hidden #page-reveal:focus-within .page-reveal__super-user-toggle {
  opacity: 1;
  pointer-events: auto;
}

body.super-user-bar--hidden .page-reveal__super-user-toggle:hover {
  background: var(--neutral-100);
  color: var(--neutral-900);
}

body.super-user-bar--hidden .page-reveal__super-user-toggle:focus-visible {
  outline: 2px solid var(--sea-400);
  outline-offset: 2px;
  opacity: 1;
  pointer-events: auto;
}

.switcher-label {
  font-size: 0.6875rem;
  color: var(--neutral-400);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-right: 6px;
  flex-shrink: 0;
}

.state-switcher__simulate {
  margin-left: 10px;
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px dashed var(--neutral-400);
  background: var(--white);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--neutral-600);
  cursor: pointer;
}

.state-switcher__simulate:hover {
  border-color: var(--neutral-500);
  color: var(--neutral-900);
}

.state-tab {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 0.8125rem;
  color: var(--neutral-500);
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
  font-family: var(--font);
}

.state-tab:hover {
  background: var(--neutral-100);
  color: var(--neutral-700);
  border-color: var(--neutral-200);
}

/* Selected: neutral outline only vs ghost inactive (no fill) */
.state-tab.active {
  background: transparent;
  border-color: var(--neutral-400);
  color: var(--neutral-800);
}

.state-tab.active:hover {
  background: var(--neutral-100);
  border-color: var(--neutral-500);
  color: var(--neutral-900);
}

.state-switcher--figma-components {
  flex-wrap: wrap;
  row-gap: 8px;
}

.state-switcher__figma-caption {
  flex: 1;
  min-width: 14rem;
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--neutral-700);
}

.state-switcher__figma-caption a {
  color: var(--sea-600);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.state-switcher__figma-caption a:hover {
  color: var(--sea-800);
}

/* ── Page chrome (.page paints over .page-reveal until menu opens; reveal has no chrome) ── */
.page-shell {
  flex: 1;
  min-height: 0;
  position: relative;
  margin: var(--preview-outer-padding);
  display: flex;
  flex-direction: column;
}

.page-reveal {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--app-nav-reveal-width);
  z-index: 0;
  padding: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.page-reveal__scroll {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 12px 10px 8px 10px;
  box-sizing: border-box;
}

.page-reveal__brand-footer {
  flex-shrink: 0;
  align-self: flex-start;
  margin: 0;
  padding: 0 10px 20px 10px;
  line-height: 0;
}

.page-reveal__brand-footer-row {
  display: flex;
  align-items: center;
  gap: 10px;
  line-height: 0;
}

.page-reveal__brand-mark {
  display: block;
  height: 1rem;
  width: auto;
}

.page-reveal__stack {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}

.page-reveal__company-bar {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 40px;
  padding-right: 44px;
  min-width: 0;
}

.page-reveal__company {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.page-reveal__company-logo {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 9999px;
  background: #f5c518;
  box-shadow: inset 0 0 0 1px rgba(7, 7, 7, 0.04);
}

.page-reveal__company-name {
  font-family: var(--font);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.25;
  color: var(--neutral-900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Sidebar segmented tabs (icon + label only when selected) ── */
.sidebar-segmented {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.sidebar-segmented__tab {
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  font: inherit;
  color: var(--neutral-900);
  border-radius: 9999px;
  appearance: none;
  -webkit-appearance: none;
}

.sidebar-segmented__tab:focus {
  outline: none;
}

.sidebar-segmented__tab:focus-visible {
  outline: 2px solid var(--sea-400);
  outline-offset: 2px;
}

.sidebar-segmented__surface {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  min-height: 36px;
  padding: 8px;
  border-radius: 9999px;
  border: 1px solid transparent;
  background: transparent;
  box-sizing: border-box;
  transition: background-color 0.15s var(--ease-standard), border-color 0.15s var(--ease-standard), gap 0.15s var(--ease-standard), padding 0.15s var(--ease-standard);
}

.sidebar-segmented__tab.is-selected .sidebar-segmented__surface {
  gap: 6px;
  padding: 6px 12px 6px 10px;
  background: var(--neutral-100);
  border-color: var(--neutral-200);
}

.sidebar-segmented__icon {
  display: block;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  aspect-ratio: 1;
  color: var(--neutral-900);
  overflow: visible;
}

.sidebar-segmented__label {
  font-size: 0.8125rem;
  line-height: 1.2;
  font-weight: 400;
  color: var(--neutral-900);
  white-space: nowrap;
}

.sidebar-segmented__tab:not(.is-selected) .sidebar-segmented__label {
  display: none;
}

.page-reveal__panels {
  min-width: 0;
}

.page-reveal__panel {
  min-width: 0;
}

/* Chat history: same rhythm as .sidebar-nav, with date headings + snippet / time row */
.chat-history {
  margin: 0;
  padding: 0;
  font-family: var(--font);
}

.chat-history__group {
  margin: 0;
}

.chat-history__group + .chat-history__group {
  margin-top: 18px;
}

.chat-history__date {
  margin: 0 0 8px;
  padding: 0 12px;
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: 0.01em;
  color: var(--neutral-700);
}

.chat-history__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.chat-history__item {
  margin: 0;
  padding: 0;
}

.chat-history__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  width: 100%;
  margin: 0;
  padding: 8px 12px;
  border: none;
  border-radius: 12px;
  background: transparent;
  font: inherit;
  cursor: default;
  text-align: left;
  color: inherit;
  box-sizing: border-box;
  transition: background-color 0.12s var(--ease-standard), color 0.12s var(--ease-standard);
}

.chat-history__row:hover {
  background: rgba(7, 7, 7, 0.04);
}

.chat-history__row:hover .chat-history__snippet {
  color: var(--neutral-900);
}

.chat-history__row:hover .chat-history__time {
  color: var(--neutral-600);
}

.chat-history__row:focus {
  outline: none;
}

.chat-history__row:focus-visible {
  outline: 2px solid var(--sea-400);
  outline-offset: 2px;
}

.chat-history__row[data-main-view] {
  cursor: pointer;
}

.chat-history__snippet {
  flex: 1;
  min-width: 0;
  font-size: 0.8125rem;
  line-height: 1.35;
  font-weight: 400;
  font-family: var(--font);
  color: var(--neutral-800);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color 0.12s var(--ease-standard);
}

.chat-history__time {
  flex-shrink: 0;
  font-size: 0.8125rem;
  line-height: 1.35;
  font-weight: 400;
  font-family: var(--font);
  color: var(--neutral-500);
  white-space: nowrap;
  transition: color 0.12s var(--ease-standard);
}

.sidebar-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sidebar-nav__link {
  display: block;
  padding: 8px 12px;
  border-radius: 12px;
  font-family: var(--font);
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.35;
  color: var(--neutral-800);
  text-decoration: none;
  cursor: default;
  transition: background-color 0.12s var(--ease-standard), color 0.12s var(--ease-standard);
}

.sidebar-nav__link[data-main-view] {
  cursor: pointer;
}

.sidebar-nav__link:hover {
  background: rgba(7, 7, 7, 0.04);
  color: var(--neutral-900);
}

.sidebar-nav__link:focus {
  outline: none;
}

.sidebar-nav__link:focus-visible {
  outline: 2px solid var(--sea-400);
  outline-offset: 2px;
}

.sidebar-nav__link--selected {
  background: var(--neutral-100);
  color: var(--neutral-900);
}

.sidebar-nav__link--selected:hover {
  background: var(--neutral-100);
  color: var(--neutral-900);
}

/* Inbox → Support: collapsible sub-nav + count badges */
.sidebar-nav--inbox {
  width: 100%;
}

.sidebar-nav__section {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
}

.sidebar-nav__section-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin: 0 0 4px;
  padding: 6px 12px 8px;
  border: none;
  border-radius: 12px;
  background: transparent;
  font: inherit;
  color: var(--neutral-900);
  cursor: pointer;
  text-align: left;
  transition: background-color 0.12s var(--ease-standard);
}

.sidebar-nav__section-toggle:hover {
  background: rgba(7, 7, 7, 0.04);
}

.sidebar-nav__section-toggle:focus {
  outline: none;
}

.sidebar-nav__section-toggle:focus-visible {
  outline: 2px solid var(--sea-400);
  outline-offset: 2px;
}

.sidebar-nav__section-label {
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.35;
  font-family: var(--font);
}

.sidebar-nav__section-chevron {
  flex-shrink: 0;
  color: var(--neutral-600);
  transition: transform 0.15s var(--ease-standard);
}

.sidebar-nav__section-toggle[aria-expanded="false"] .sidebar-nav__section-chevron {
  transform: rotate(-90deg);
}

.sidebar-nav__section-toggle[aria-expanded="false"] + .sidebar-nav__list {
  display: none;
}

.sidebar-nav__link--row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.sidebar-nav__link--row > span:first-child {
  min-width: 0;
}

.sidebar-nav__badge {
  flex-shrink: 0;
  min-width: 1.5rem;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.25;
  font-family: var(--font);
  text-align: center;
  background: var(--sea-100);
  color: var(--sea-600);
}

/* Shown only while drawer open: appears on sidebar hover (or when the control is focused for keyboard). */
.page-reveal__hover-close {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--neutral-600);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s var(--ease-standard), color 0.15s var(--ease-standard);
  font: inherit;
  appearance: none;
  -webkit-appearance: none;
}

.page-reveal__hover-close:hover {
  color: var(--neutral-800);
}

.page-reveal__hover-close:focus-visible {
  outline: 2px solid var(--sea-400);
  outline-offset: 2px;
  opacity: 1;
  pointer-events: auto;
}

body.app-nav-open .page-reveal:hover .page-reveal__hover-close {
  opacity: 1;
  pointer-events: auto;
}

body.app-nav-open .zone-entity-header__menu-toggle,
body.app-nav-open .page-bare-menu {
  visibility: hidden;
  pointer-events: none;
}

.page-reveal__text {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--neutral-700);
  font-family: var(--font);
}

.page {
  position: relative;
  z-index: 1;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 0;
  margin: 0;
  padding: 0;
  border: 1px solid var(--neutral-200);
  border-radius: 12px;
  background: var(--surface);
  width: 100%;
  box-sizing: border-box;
  transition:
    margin-left var(--anim-duration) var(--ease-standard),
    width var(--anim-duration) var(--ease-standard);
}

body.app-nav-open .page {
  margin-left: calc(var(--app-nav-reveal-width) + var(--page-open-gap));
  width: calc(100% - var(--app-nav-reveal-width) - var(--page-open-gap));
  border-radius: 12px;
}

@media (prefers-reduced-motion: reduce) {
  .page,
  .floating-zone,
  .page-reveal__hover-close,
  .sidebar-segmented__surface {
    transition: none;
  }
}

.zone {
  background: transparent;
  display: flex;
  font-size: 0.6875rem;
  color: var(--neutral-400);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.zone-entity-header {
  position: relative;
  align-items: center;
  justify-content: center;
  min-height: 60px;
  padding: 0 var(--page-gutter);
  border: none;
  border-bottom: 1px solid var(--neutral-200);
  border-radius: 0;
  background: var(--surface);
}

.zone-entity-header__title {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 0 calc(var(--page-gutter) + 44px);
  text-align: center;
}

.zone-entity-header__icon-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--neutral-500);
  cursor: pointer;
  transition: background-color 0.15s var(--ease-standard), color 0.15s var(--ease-standard);
  font: inherit;
  appearance: none;
  -webkit-appearance: none;
}

.zone-entity-header__icon-btn:hover {
  background: var(--neutral-100);
  color: var(--neutral-700);
}

.zone-entity-header__icon-btn:focus-visible {
  outline: 2px solid var(--sea-400);
  outline-offset: 2px;
}

.zone-entity-header__menu-toggle {
  left: var(--page-gutter);
}

.zone-entity-header__context-toggle {
  right: var(--page-gutter);
}

.zone-entity-header__context-icon[hidden] {
  display: none;
}

/* Entity header + workspace chrome only on Sales Pipeline (workspace) route */
body[data-main-view]:not([data-main-view="workspace"]) .zone-entity-header {
  display: none !important;
}

/*
  Menu toggles use .zone-entity-header__icon-btn (top: 50% + translateY(-50%)).
  Author `display: inline-flex` can win over the `hidden` attribute in some cases,
  and the transform stacks badly with .page-bare-menu's top — so enforce hidden and
  reset transform for the floating control.
*/
#menu-toggle[hidden],
#menu-toggle-bare[hidden] {
  display: none !important;
}

body[data-main-view="workspace"] #menu-toggle-bare {
  display: none !important;
}

body[data-main-view]:not([data-main-view="workspace"]) #menu-toggle {
  display: none !important;
}

.page-bare-menu {
  position: absolute;
  top: 12px;
  left: 24px;
  z-index: 2;
  transform: none;
}

.page-content {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  min-height: 0;
  overflow: hidden;
  border: none;
  background: var(--surface);
}

/* Main column: stacked route panes (only one visible). */
.page-main {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: minmax(0, 1fr);
  overflow: hidden;
}

.page-main > .page-view {
  grid-area: 1 / 1;
  min-height: 0;
  min-width: 0;
  overflow: auto;
}

/*
  Floating zone is anchored to .page-content (absolute; see .floating-zone).
  Non-workspace routes: author `display: flex` would override the HTML `hidden` attribute,
  so timeline + composer stayed visible on Site / Data / chat placeholder.
*/
.page-main > .page-view[hidden] {
  display: none !important;
}

.page-main > .page-view--workspace:not([hidden]) {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Sales Pipeline workspace: conversation + composer stack | context rail */
.workspace-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--context-rail-width);
  grid-template-rows: minmax(0, 1fr);
  grid-template-areas: "workspaceMain workspaceContext";
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  min-height: 0;
  height: 100%;
  align-items: stretch;
  align-self: stretch;
}

.workspace-shell > .chrome-conversation {
  grid-area: workspaceMain;
  min-width: 0;
  min-height: 0;
}

.workspace-shell > .zone-context {
  grid-area: workspaceContext;
  align-self: stretch;
  min-width: 0;
  min-height: 0;
  max-width: var(--context-rail-width);
  justify-self: stretch;
}

.page-view--placeholder {
  box-sizing: border-box;
  padding: calc(12px + 48px) 24px 32px;
  background: var(--surface);
}

.page-view-placeholder-inner {
  max-width: 44rem;
  margin-left: auto;
  margin-right: auto;
}

.page-view-placeholder-inner.page-view-data-insights__inner {
  max-width: min(100%, 56rem);
}

.page-view-placeholder__title {
  margin: 0 0 8px;
  font-family: var(--font);
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.25;
  color: var(--neutral-900);
}

.page-view-placeholder__lede {
  margin: 0;
  font-family: var(--font);
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--neutral-700);
}

/* Data & Insights — page title + content-area tabs (Easol nav spec) */
.page-view-data-insights__masthead {
  margin-bottom: 20px;
}

.page-view-data-insights__title {
  margin: 0;
  font-family: "Outfit", var(--font);
  font-size: clamp(1.25rem, 2vw, 1.375rem);
  font-weight: 600;
  line-height: 1.2;
  color: var(--neutral-900);
}

.page-view-data-insights__tabbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin: 0 0 24px;
  border-bottom: 1px solid var(--neutral-200);
}

.page-view-data-insights__tab {
  box-sizing: border-box;
  margin: 0 0 -1px;
  min-height: 36px;
  padding: 8px 16px;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  font-family: var(--font);
  font-size: 13px;
  line-height: 1.2;
  font-weight: 400;
  color: var(--neutral-500);
  cursor: pointer;
  transition:
    color 0.15s var(--ease-standard),
    border-color 0.15s var(--ease-standard),
    background-color 0.15s var(--ease-standard);
  -webkit-appearance: none;
  appearance: none;
}

.page-view-data-insights__tab:hover {
  color: var(--neutral-700);
  background-color: var(--eclipse-alpha-04);
}

.page-view-data-insights__tab[aria-selected="true"] {
  color: var(--neutral-900);
  border-bottom-color: var(--sea-500);
}

.page-view-data-insights__tab:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 102, 255, 0.15);
  border-radius: 6px;
}

.page-view-data-insights__panel-lede {
  margin: 0;
  font-family: var(--font);
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--neutral-700);
}

@media (prefers-reduced-motion: reduce) {
  .page-view-data-insights__tab {
    transition: none;
  }
}

/* Data & Insights — reports index table */
.page-view-data-insights__reports-table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.reports-index-table {
  width: 100%;
  min-width: min(100%, 52rem);
  border-collapse: collapse;
  font-family: var(--font);
  font-size: 13px;
  line-height: 1.45;
  color: var(--neutral-800);
}

.reports-index-table thead th {
  padding: 12px 16px 12px 0;
  border-bottom: 1px solid var(--neutral-200);
  text-align: left;
  font-weight: 600;
  font-size: 13px;
  color: var(--neutral-900);
  white-space: nowrap;
}

.reports-index-table thead th:not(:last-child) {
  padding-right: 20px;
}

.reports-index-table tbody td {
  padding: 16px 16px 16px 0;
  border-bottom: 1px solid var(--neutral-200);
  vertical-align: top;
}

.reports-index-table tbody td:not(:last-child) {
  padding-right: 20px;
}

.reports-index-table__name {
  min-width: 11rem;
}

.reports-index-table__name-link {
  color: var(--sea-500);
  text-decoration: none;
  font-weight: 400;
  transition: color 0.15s var(--ease-standard);
}

.reports-index-table__name-link:hover {
  color: var(--sea-600);
  text-decoration: underline;
}

.reports-index-table__name-link:focus-visible {
  outline: none;
  border-radius: 4px;
  box-shadow: 0 0 0 3px rgba(0, 102, 255, 0.15);
}

.reports-index-table__name-meta {
  margin: 6px 0 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--neutral-500);
}

.reports-index-table__muted {
  color: var(--neutral-500);
  white-space: nowrap;
}

.reports-index-table__usecases {
  min-width: 14rem;
  max-width: 28rem;
}

.reports-index-table__use-line {
  margin: 0 0 8px;
  color: var(--neutral-800);
}

.reports-index-table__use-line:last-child {
  margin-bottom: 0;
}

.chat-history__row--selected {
  background: var(--neutral-100);
}

.chat-history__row--selected .chat-history__snippet,
.chat-history__row--selected .chat-history__time {
  color: var(--neutral-900);
}

.zone-context {
  display: grid;
  place-content: center;
  place-items: center;
  justify-items: center;
  align-content: center;
  text-align: center;
  padding: 16px;
  padding-bottom: var(--context-zone-bottom-safe);
  border: none;
  border-left: 1px solid var(--neutral-200);
  border-radius: 0;
  min-width: 0;
  min-height: 0;
  height: 100%;
  box-sizing: border-box;
  overflow: auto;
}

.page.context-rail-hidden .workspace-shell {
  grid-template-columns: 1fr;
  grid-template-areas: "workspaceMain";
}

.page.context-rail-hidden .zone-context {
  display: none;
}

.chrome-conversation {
  min-width: 0;
  min-height: 0;
  border: none;
  border-radius: 0;
  background: var(--surface);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

.conversation-surface {
  flex: 1;
  min-height: 0;
  width: 100%;
  max-width: 44rem;
  margin-left: auto;
  margin-right: auto;
  overflow: auto;
  padding: calc(12px + 48px) 24px var(--conversation-scroll-bottom-pad);
  background: var(--surface);
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.conversation-surface::-webkit-scrollbar {
  display: none;
}

/*
 * Conversation timeline: static reference from Centralised sales channel Components
 * (Timeline event 7480:22364, Action 7481:22412, Accordion 7320:80882).
 */

.timeline-stream {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.timeline-stream__title {
  margin: 0 0 14px;
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--neutral-900);
}

.timeline-stream__section-label {
  margin: 22px 0 10px;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--neutral-500);
}

.timeline-stream__section-label:first-of-type {
  margin-top: 0;
}

/* Message shell + optional “New” divider above each event */
.timeline-message {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.timeline-new-divider {
  display: none;
  align-items: center;
  gap: 12px;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  padding: 6px 42px 4px 0;
}

.timeline-message--has-new .timeline-new-divider {
  display: flex;
}

.timeline-new-divider__label {
  flex-shrink: 0;
  width: 32px;
  margin: 0;
  text-align: left;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.2;
  color: #f76700;
}

.timeline-new-divider__track {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
}

.timeline-new-divider__line {
  display: block;
  width: 100%;
  height: 1px;
  background: #f76700;
  border-radius: 1px;
  box-shadow: 0 -3px 10px rgba(247, 103, 0, 0.45), 0 -1px 5px rgba(247, 103, 0, 0.35);
}

.timeline-message--accumulating .timeline-new-divider__line {
  animation: timeline-new-divider-pulse 1.2s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .timeline-message--accumulating .timeline-new-divider__line {
    animation: none;
  }
}

@keyframes timeline-new-divider-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.45;
  }
}

/* Preview “New” divider while Option/Alt is held (scenario timelines); mid-grey — not the real unread accent */
.timeline-ghost-divider {
  display: none;
  align-items: center;
  gap: 12px;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  padding: 6px 42px 4px 0;
}

.timeline-message--ghost-new-hover .timeline-ghost-divider {
  display: flex;
}

.timeline-message--ghost-new-hover {
  cursor: copy;
}

.timeline-ghost-divider__label {
  flex-shrink: 0;
  width: 32px;
  margin: 0;
  text-align: left;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--neutral-500);
}

.timeline-ghost-divider__track {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
}

.timeline-ghost-divider__line {
  display: block;
  width: 100%;
  height: 1px;
  background: var(--neutral-400);
  border-radius: 1px;
}

/* —— Collaborator avatar (illustrated, from Figma asset) —— */

.timeline-event__avatar--collaborator {
  padding: 0;
  overflow: hidden;
  border-color: var(--eclipse-alpha-20);
  background: var(--white);
}

.timeline-event__avatar-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Approval row: collaborator NW + creator SE (reuse stack diagonal) */

.timeline-event__actor-line--approval .timeline-event__actor-name-cluster {
  flex: 0 1 auto;
  min-width: 0;
}

.timeline-event__actor-line--approval {
  flex-wrap: wrap;
}

.timeline-event__actor-name-cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 3px;
  row-gap: 4px;
  min-width: 0;
  max-width: 100%;
  font-size: 0.875rem;
}

.timeline-event__actor-muted {
  font-weight: 400;
  color: var(--neutral-600);
}

.timeline-event__actor-name-cluster .timeline-event__actor-name {
  font-weight: 600;
  color: var(--neutral-900);
}

.timeline-event__actor-name-suffix {
  font-weight: 600;
  color: var(--neutral-900);
}

.timeline-event__summary.timeline-event__summary--action {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.43;
  color: var(--neutral-600);
}

.timeline-event:not(.timeline-event--expandable) .timeline-event__body > .timeline-event__summary.timeline-event__summary--action {
  font-size: 0.875rem;
}

.timeline-event__summary--action .timeline-event__action-lead {
  font-weight: 700;
}

.timeline-event__body.timeline-event__body--full {
  gap: 4px;
}

.timeline-event.timeline-event--accordion-sample .timeline-event__row .timeline-event__body--full {
  padding-left: 0;
}

/* —— Action (Figma nested accordion + cards) —— */

.figma-action-acc {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
  width: 100%;
  min-width: 0;
}

.figma-action-acc--solo {
  max-width: 28rem;
}

.figma-action-acc--compact {
  gap: 0;
}

.figma-action-acc__trigger {
  display: inline-flex;
  align-items: center;
  gap: 0;
}

button.figma-action-acc__trigger {
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  font-family: var(--font);
  color: inherit;
  cursor: pointer;
  text-align: left;
  border-radius: 2px;
  appearance: none;
  -webkit-appearance: none;
}

button.figma-action-acc__trigger:focus {
  outline: none;
}

button.figma-action-acc__trigger:focus-visible {
  outline: 2px solid var(--sea-400);
  outline-offset: 2px;
}

.figma-action-acc__trigger--static {
  cursor: default;
  user-select: text;
}

.figma-action-acc__trigger-text {
  font-size: 0.875rem;
  line-height: 1.43;
  color: var(--neutral-600);
}

.figma-chev-svg {
  display: block;
  flex-shrink: 0;
  color: var(--neutral-500);
}

/* Collapsed / closed: Heroicon path is chevron-right; avoid rotate(-90deg) which reads as up. */
.figma-chev-svg--ltr {
  transform: none;
}

/* Interactive accordion: closed = chevron-right, open = rotated down */
button.figma-action-acc__trigger .figma-chev-svg {
  transition: transform var(--motion-duration-accordion) var(--ease-in-cubic);
}

button.figma-action-acc__trigger[aria-expanded="true"] .figma-chev-svg {
  transform: rotate(90deg);
}

/* Expanded / open: rotate chevron-right 90deg → points down (static reference markup only) */
.figma-chev-svg--down {
  transform: rotate(90deg);
}

.figma-action-acc__panel {
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  max-height: 0;
  overflow: hidden;
  /* Top-to-bottom reveal */
  transition:
    max-height var(--motion-duration-accordion) var(--ease-in-cubic),
    padding-top var(--motion-duration-accordion) var(--ease-in-cubic),
    opacity var(--motion-duration-accordion) var(--ease-in-cubic);
  opacity: 0;
  pointer-events: none;
}

.figma-action-acc.is-expanded .figma-action-acc__panel {
  max-height: min(48rem, 90vh);
  padding-top: 4px;
  opacity: 1;
  pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
  button.figma-action-acc__trigger .figma-chev-svg {
    transition: none;
  }

  .figma-action-acc__panel {
    transition: none;
  }
}

.figma-action-acc__rail {
  box-sizing: border-box;
  border-left: 1px solid var(--neutral-300);
  padding: 2px 0 2px 12px;
}

.figma-action-acc__rail--bullets {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 0.75rem;
  line-height: 1.33;
  color: var(--neutral-900);
}

.figma-bullet-line {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}

.figma-bullet-line--nest {
  padding-left: 16px;
}

.figma-bullet-line__dash {
  flex-shrink: 0;
  color: inherit;
}

.figma-email-meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.33;
}

.figma-email-meta__row {
  display: grid;
  grid-template-columns: 4.75rem minmax(0, 1fr);
  gap: 8px 12px;
  align-items: start;
}

.figma-email-meta__row dt {
  margin: 0;
  color: var(--neutral-600);
  font-weight: 400;
}

.figma-email-meta__row dd {
  margin: 0;
  color: var(--neutral-900);
}

.figma-card {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  border-radius: 0 12px 12px 12px;
}

.figma-card--enquiry {
  padding: 16px;
  background: var(--white);
  border: 1px solid var(--neutral-200);
}

.figma-kv-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0;
}

.figma-kv {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.figma-kv__k {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.33;
  font-weight: 400;
  color: var(--neutral-600);
}

.figma-kv__v {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--neutral-900);
}

.figma-card__icon-corner {
  position: absolute;
  top: 9px;
  right: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--neutral-500);
  cursor: pointer;
}

.figma-card--email-creator,
.figma-card--email-customer {
  padding: 16px;
}

.figma-card--email-creator {
  background: var(--sea-100);
  border: 1px solid var(--sea-200);
}

.figma-card--email-customer {
  background: var(--white);
  border: 1px solid var(--neutral-200);
}

.figma-email__corner-tools {
  position: absolute;
  top: 9px;
  right: 12px;
  display: flex;
  gap: 8px;
}

.figma-email__icon-btn {
  display: inline-flex;
  padding: 4px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--neutral-500);
  cursor: default;
}

.figma-email__icon-btn svg {
  display: block;
  flex-shrink: 0;
  overflow: visible;
  shape-rendering: geometricPrecision;
}

.figma-email__body {
  padding-right: 56px;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--neutral-900);
}

.figma-email__p {
  margin: 0 0 0.5em;
}

.figma-email__p:last-child {
  margin-bottom: 0;
}

.figma-card--note {
  padding: 16px;
  background: var(--playa-100);
  border: 1px solid var(--playa-200);
}

.figma-card__note-body {
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--neutral-900);
}

.timeline-event--accordion-sample .timeline-event__row {
  padding-left: 42px;
}

.timeline-event__body:has(.figma-card) {
  gap: 8px;
}

/* “New” strip: retained for backwards compatibility — unused in Components reference stream */
.timeline-event__new-strip {
  display: none;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex-shrink: 0;
}

.timeline-stream > .timeline-message.timeline-first-unread > .timeline-event > .timeline-event__new-strip {
  display: flex;
}

.timeline-event__new-strip-label {
  flex-shrink: 0;
  width: 32px;
  margin: 0;
  text-align: left;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.2;
  color: #f76700;
}

.timeline-event__new-strip-line-wrap {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
}

.timeline-event__new-strip-line {
  display: block;
  width: 100%;
  height: 1px;
  background: #f76700;
  border-radius: 1px;
  box-shadow: 0 -3px 10px rgba(247, 103, 0, 0.45), 0 -1px 5px rgba(247, 103, 0, 0.35);
}

@keyframes timeline-new-strip-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.45;
  }
}

.timeline-stream > .timeline-message.timeline-first-unread--accumulating > .timeline-event > .timeline-event__new-strip .timeline-event__new-strip-line {
  animation: timeline-new-strip-pulse 1.2s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .timeline-stream > .timeline-message.timeline-first-unread--accumulating > .timeline-event > .timeline-event__new-strip .timeline-event__new-strip-line {
    animation: none;
    opacity: 1;
  }
}

/* Timeline row inset: Figma pl 24 / pr 66 / py 8 (horizontal padding splits with .conversation-surface 24px gutters). */
.timeline-event,
.timeline-thread {
  padding: 8px 42px 8px 0;
  box-sizing: border-box;
}

/* Compact log row: optional “New” strip + row (avatar + body) */
.timeline-event {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  min-width: 0;
}

.timeline-event__row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
}

.timeline-event__actor-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 8px;
  width: 100%;
  min-width: 0;
}

.timeline-event__actor-name {
  flex: 0 1 auto;
  min-width: 0;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--neutral-900);
}

.timeline-event__actor-approval {
  font-weight: 400;
  color: var(--neutral-700);
}

.timeline-event__actor-approval strong {
  font-weight: 600;
  color: var(--neutral-900);
}

.timeline-event__actor-ts {
  flex-shrink: 0;
  font-size: 0.6875rem;
  font-weight: 400;
  line-height: 1.3;
  color: var(--neutral-500);
}

/* Line 2: action (paired with author row `.timeline-event__actor-line`) */
.timeline-event__action-line,
.timeline-event__action-summary {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.4;
  font-weight: 400;
  color: var(--neutral-800);
}

/* Accordion trigger as the only action line (after author): match action-summary typography */
.timeline-event__body > .timeline-event__actor-line + .figma-action-acc--compact button.figma-action-acc__trigger .figma-action-acc__trigger-text {
  font-size: 0.8125rem;
  line-height: 1.4;
  font-weight: 400;
  color: var(--neutral-800);
}

.timeline-event__action-lead {
  font-weight: 700;
}

.timeline-event--enquiry-card .timeline-event__body.timeline-event__body--actor-stack {
  gap: 6px;
}

.timeline-event--enquiry-card .timeline-event__row {
  align-items: flex-start;
}

/* Expandable rows: avatar always bottom-aligned to body so it doesn’t jump when
   is-expanded toggles while the panel max-height is still animating */
.timeline-event.timeline-event--expandable .timeline-event__row {
  align-items: flex-end;
}

.timeline-event__avatar {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
  border: 1px solid transparent;
}

.timeline-event__avatar--customer {
  background: var(--white);
  color: var(--neutral-900);
  border-color: var(--neutral-100);
}

.timeline-event__avatar--creator {
  background: var(--neutral-200);
  color: var(--neutral-900);
  border-color: var(--neutral-300);
}

.timeline-event__avatar--ai {
  background: var(--white);
  color: var(--sea-500);
  border-color: var(--eclipse-alpha-20);
}

.timeline-event__avatar--ai .timeline-event__ai-icon {
  display: block;
  width: 17px;
  height: 17px;
  flex-shrink: 0;
}

.timeline-event__avatar-stack .timeline-event__avatar--ai .timeline-event__ai-icon {
  width: 11px;
  height: 11px;
}

/* Dual actors: same outer footprint as a single 32px avatar, circles on a diagonal */
.timeline-event__avatar-stack {
  flex-shrink: 0;
  position: relative;
  width: 32px;
  height: 32px;
}

.timeline-event__avatar-stack .timeline-event__avatar--sm {
  position: absolute;
  width: 20px;
  height: 20px;
  font-size: 0.5rem;
  letter-spacing: 0.01em;
}

/* NW … SE diagonal (slight overlap, fits inside 32×32) */
.timeline-event__avatar-stack .timeline-event__avatar--sm:first-child {
  left: 0;
  top: 0;
  z-index: 2;
}

.timeline-event__avatar-stack .timeline-event__avatar--sm:last-child {
  left: 12px;
  top: 12px;
  z-index: 1;
}

.timeline-event__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.timeline-event--enquiry-card .timeline-event__body {
  gap: 0;
}

.timeline-event--expandable .timeline-event__body {
  gap: 0;
}

.timeline-event__summary {
  display: block;
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.45;
  font-weight: 400;
  color: var(--neutral-800);
  text-align: left;
}

.timeline-event:not(.timeline-event--expandable) .timeline-event__body > .timeline-event__summary {
  font-size: 0.8125rem;
  line-height: 1.4;
}

.timeline-event--enquiry-card .timeline-event__avatar {
  align-self: flex-start;
  margin-top: 2px;
}

.enquiry-card {
  width: 100%;
}

.enquiry-card__header {
  min-height: 46px;
  padding: 0 5px 0 18px;
}

.enquiry-card__header--icon-only {
  box-sizing: border-box;
  min-height: 40px;
  padding: 0 8px 0 14px;
  justify-content: flex-end;
}

.enquiry-card__summary {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.4;
  font-weight: 400;
  color: var(--neutral-800);
}

.enquiry-card__action {
  margin-left: auto;
  width: 36px;
  height: 36px;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--neutral-500);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.enquiry-card__action:focus-visible {
  outline: 2px solid var(--sea-400);
  outline-offset: 2px;
}

.enquiry-card__action-icon {
  display: block;
  width: 20px;
  height: 20px;
  margin: 0 auto;
}

.enquiry-card__body {
  padding-bottom: 10px;
}

.enquiry-card__fields {
  display: grid;
  gap: 16px;
}

.enquiry-card__field {
  display: grid;
  gap: 4px;
}

.enquiry-card__field dt {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.35;
  color: var(--neutral-500);
}

.enquiry-card__field dd {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--neutral-800);
  word-break: break-word;
}

.enquiry-card__footer {
  padding-top: 2px;
}

/* Referenced object: tight white outline chip + Heroicon (standalone <button> in expandable rows; <span> in static rows) */
.timeline-event__object-btn {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin: 0 0 0 4px;
  padding: 1px 5px 1px 3px;
  vertical-align: middle;
  border: 1px solid var(--neutral-200);
  border-radius: 6px;
  background: var(--white);
  color: var(--neutral-800);
  font-size: inherit;
  font-weight: 400;
  line-height: 1.2;
}

button.timeline-event__object-btn {
  font-family: var(--font);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  text-align: left;
}

.timeline-event__object-icon {
  display: block;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--sea-500);
}

.timeline-event__object-label {
  white-space: nowrap;
  font-size: 0.6875rem;
}

.timeline-event__object-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 1px;
  padding: 1px 4px 0;
  border-radius: 4px;
  font-size: 0.5625rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.3;
  background: var(--neutral-100);
  color: var(--neutral-600);
  border: 1px solid var(--neutral-200);
  flex-shrink: 0;
}

.timeline-event__time {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.3;
  color: var(--neutral-500);
}

.timeline-event--expandable .timeline-event__time {
  margin-top: 3px;
}

/* Expandable log rows: summary line + chevron (Heroicons), panel, then timestamp */
.timeline-event--expandable .timeline-event__toggle {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 0;
  width: 100%;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  font-family: var(--font);
  text-align: left;
  color: inherit;
  border-radius: 2px;
}

.timeline-event--expandable .timeline-event__summary-line {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
}

.timeline-event--expandable .timeline-event__summary.timeline-event__expand-trigger {
  flex: 0 1 auto;
  width: fit-content;
  max-width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  font-family: var(--font);
  font-size: 0.9375rem;
  line-height: 1.45;
  font-weight: 400;
  color: var(--neutral-800);
  text-align: left;
  cursor: pointer;
  border-radius: 2px;
  appearance: none;
  -webkit-appearance: none;
}

.timeline-event--expandable .timeline-event__chev {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding-left: 4px;
  color: var(--neutral-400);
  line-height: 0;
}

.timeline-event--expandable button.timeline-event__chev.timeline-event__expand-trigger {
  margin: 0;
  padding: 0 0 0 4px;
  border: none;
  background: none;
  font: inherit;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  color: var(--neutral-400);
}

.timeline-event--expandable .timeline-event__chev-svg {
  display: block;
  width: 16px;
  height: 16px;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.timeline-event--expandable.is-expanded .timeline-event__chev-svg {
  transform: rotate(90deg);
}

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

  .timeline-event--expandable .timeline-event__chev-svg {
    transition: none;
  }

  .convo-preview-card__thread,
  .convo-preview-card__chev-svg {
    transition: none;
  }
}

.timeline-event--expandable .timeline-event__expand-trigger:focus-visible,
.timeline-event--expandable button.timeline-event__object-btn:focus-visible {
  outline: 2px solid var(--sea-400);
  outline-offset: 2px;
}

.timeline-event__panel {
  max-height: 0;
  overflow: hidden;
  /* Same duration as chevron; ease-in-out so open and close feel even */
  transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.timeline-event--expandable.is-expanded .timeline-event__panel {
  max-height: 20rem;
}

.timeline-event__panel-inner {
  overflow: hidden;
}

.timeline-event__panel-inner--accordion {
  box-sizing: border-box;
  margin-top: 2px;
  padding: 4px 0 0 12px;
  border-left: 1px solid var(--neutral-200);
}

.timeline-event__panel-inner--accordion .timeline-event__property-list,
.timeline-event__panel-inner--accordion .timeline-event__panel-text {
  padding: 0 0 8px;
  margin: 0;
}

.timeline-event__panel-text {
  padding: 10px 0 6px;
  margin: 0;
  font-size: 0.8125rem;
  color: var(--neutral-600);
  line-height: 1.45;
}

.timeline-event__property-list {
  list-style: none;
  margin: 0;
  padding: 10px 0 6px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--neutral-600);
}

.timeline-event__property-list li {
  margin: 0;
}

.timeline-event__property-list strong {
  font-weight: 600;
  color: var(--neutral-800);
}

/* Message thread: optional “New” strip + grid row (avatar + card) */
.timeline-thread {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  min-width: 0;
}

.timeline-thread__row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: end;
  min-width: 0;
}

.timeline-thread__main {
  min-width: 0;
}

.timeline-thread__avatar {
  align-self: end;
}

.timeline-thread__lead {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
  min-width: 0;
}

.timeline-thread__lead.timeline-thread__lead--inline {
  margin-bottom: 8px;
}

.timeline-thread__thread-tag {
  font-weight: 400;
  color: var(--neutral-600);
}

.timeline-thread.timeline-thread--with-lead .timeline-thread__row {
  align-items: start;
}

.timeline-thread.timeline-thread--with-lead .timeline-thread__avatar {
  align-self: start;
  margin-top: 4px;
}

/* AI conversation preview (message-style card + cropped bubble thread) */
.convo-preview-card {
  border-radius: 12px;
  border: 1px solid var(--neutral-200);
  background: var(--white);
  overflow: hidden;
  min-width: 0;
  cursor: pointer;
}

.convo-preview-card:focus-visible {
  outline: 2px solid var(--sea-400);
  outline-offset: 2px;
}

.convo-preview-card__header {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 46px;
  padding: 0 12px 0 18px;
  border-bottom: 1px solid var(--neutral-200);
  box-sizing: border-box;
}

.convo-preview-card:not(.is-expanded) .convo-preview-card__header {
  border-bottom: none;
}

.convo-preview-card__title {
  flex: 1;
  margin: 0;
  min-width: 0;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.35;
  color: var(--neutral-800);
}

.convo-preview-card__chev {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 6px 4px;
  line-height: 0;
  color: var(--neutral-400);
  pointer-events: none;
}

.convo-preview-card__chev-svg {
  display: block;
  width: 16px;
  height: 16px;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.convo-preview-card.is-expanded .convo-preview-card__chev-svg {
  transform: rotate(90deg);
}

.convo-preview-card.is-expanded .convo-preview-card__chev {
  color: var(--neutral-500);
}

.convo-preview-card__thread {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  max-height: 0;
  min-height: 0;
  overflow: hidden;
  padding: 0 14px;
  background: var(--neutral-75);
  scroll-behavior: smooth;
  transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), padding 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.convo-preview-card.is-expanded .convo-preview-card__thread {
  max-height: 148px;
  padding: 12px 14px 12px 26px;
  margin-left: 3px;
  border-left: 1px solid var(--neutral-200);
  overflow-x: hidden;
  overflow-y: auto;
}

.convo-bubble {
  max-width: 92%;
  padding: 10px 12px;
  margin-bottom: 10px;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--neutral-800);
}

.convo-bubble:last-child {
  margin-bottom: 0;
}

.convo-bubble p {
  margin: 0;
}

.convo-bubble__meta {
  display: block;
  margin-bottom: 4px;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--neutral-500);
}

/* Chat tail: one square corner toward the thread edge (TL TR BR BL) */
.convo-bubble--ai {
  align-self: flex-start;
  margin-right: auto;
  background: var(--white);
  border: 1px solid var(--neutral-200);
  border-radius: 11px 11px 11px 0;
}

.convo-bubble--creator {
  align-self: flex-end;
  margin-left: auto;
  background: var(--sea-100);
  border: 1px solid var(--sea-200);
  border-radius: 11px 11px 0 11px;
}

.convo-preview-card__footer {
  padding: 8px 18px 12px;
  border-top: 1px solid var(--neutral-200);
  font-size: 0.75rem;
  color: var(--neutral-500);
  background: var(--white);
}

.message-card {
  border-radius: 12px;
  border: 1px solid var(--neutral-200);
  background: var(--white);
  overflow: hidden;
}

.message-card-creator {
  background: var(--sea-100);
  border-color: var(--sea-200);
}

.message-card--note {
  background: var(--playa-75);
  border-color: var(--playa-200);
}

.message-card-customer {
  background: var(--white);
  border-color: var(--neutral-200);
}

.message-header {
  min-height: 46px;
  display: flex;
  align-items: center;
  padding: 0 18px;
  border-bottom: 1px solid var(--neutral-200);
  font-size: 0.875rem;
  color: var(--neutral-800);
}

.message-card-creator .message-header {
  border-bottom-color: var(--neutral-200);
}

/* Draft email header: same typography as enquiry summary; full padding when no header action */
.message-card-creator .enquiry-card__header {
  padding: 0 18px;
}

.message-body {
  padding: 16px 18px 10px;
  color: var(--neutral-800);
  line-height: 1.5;
  font-size: 0.9375rem;
}

.message-body p {
  margin-bottom: 10px;
}

.message-body p:last-child {
  margin-bottom: 0;
}

.message-footer {
  padding: 0 18px 16px;
  font-size: 0.75rem;
  color: var(--neutral-500);
}

.message-footer--email-draft {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  padding: 12px 12px 12px 18px;
  background: var(--neutral-75);
  border-top: 1px solid var(--neutral-200);
}

.message-footer--email-draft--actions-only {
  justify-content: flex-end;
}

.message-footer--muted {
  color: var(--neutral-500);
  font-size: 0.6875rem;
}

.message-body--note {
  padding: 14px 18px 16px;
  font-size: 0.875rem;
  line-height: 1.45;
}

.message-body--note p {
  margin: 0;
}

.message-footer--email-draft .message-footer__meta {
  flex-shrink: 0;
  font-size: 0.75rem;
  color: var(--neutral-500);
}

.email-draft-footer__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 24px;
}

.email-draft-footer__edit {
  margin: 0;
  padding: 4px 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.2;
  color: var(--neutral-800);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.email-draft-footer__edit:hover {
  text-decoration: underline;
}

.email-draft-footer__edit:focus-visible {
  outline: 2px solid var(--sea-400);
  outline-offset: 2px;
}

.email-draft-footer__send {
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  border: 1px solid var(--neutral-200);
  border-radius: 8px;
  background: var(--white);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.2;
  color: var(--neutral-800);
  cursor: pointer;
  white-space: nowrap;
  appearance: none;
  -webkit-appearance: none;
  transition: background-color 0.15s var(--ease-standard);
}

.email-draft-footer__send:hover {
  background: var(--neutral-75);
}

.email-draft-footer__send:focus-visible {
  outline: 2px solid var(--sea-400);
  outline-offset: 2px;
}

@media (max-width: 1024px) {
  .timeline-thread__row {
    grid-template-columns: auto 1fr;
    gap: 10px;
  }
}

/* ── Floating zone (anchored to .page-content; centered horizontally) ── */
.floating-zone {
  position: absolute;
  z-index: 20;
  left: 0;
  right: 0;
  bottom: var(--floating-zone-pad-bottom);
  padding: 0 var(--page-gutter);
  box-sizing: border-box;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 10px;
  width: 100%;
  max-width: none;
  margin: 0;
  pointer-events: none;
}

/* Author `display: flex` beats the default `[hidden]` display — force collapse when routed off workspace chat. */
.floating-zone[hidden] {
  display: none !important;
  pointer-events: none;
}

.floating-zone > * {
  pointer-events: auto;
}


/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 18px;
  border-radius: 999px;
  font-size: 0.875rem;
  font-family: var(--font);
  cursor: pointer;
  border: none;
  white-space: nowrap;
}


.btn-ghost     { background: var(--neutral-200); color: var(--neutral-700); }
.btn-ghost:hover { background: var(--neutral-300); }
.btn-primary   { background: var(--sea-500); color: var(--white); }
.btn-primary:hover { background: var(--sea-600); }


/* ── Cart summary modal (timeline Cart object chip) ── */
.cart-modal-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Author `display` must not override the UA closed-dialog rule, or the modal shows on load. */
.cart-modal-shell:not([open]) {
  display: none;
}

.cart-modal-shell[open] {
  margin: 0;
  padding: 20px;
  border: none;
  background: transparent;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.cart-modal-shell::backdrop {
  background: rgba(7, 7, 7, 0.45);
}

.cart-modal__panel {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 32rem;
  max-height: min(90vh, 44rem);
  overflow: hidden;
  background: var(--white);
  border-radius: 12px;
  border: 1px solid var(--neutral-200);
  box-shadow: 0 20px 50px rgba(7, 7, 7, 0.12);
}

.cart-modal__header {
  position: relative;
  flex-shrink: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 48px 14px 20px;
  border-bottom: 1px solid var(--neutral-200);
}

.cart-modal__title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.cart-modal__title {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--neutral-900);
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.cart-modal__badge {
  margin: 0;
  flex-shrink: 0;
}

.cart-modal__close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--neutral-500);
  cursor: pointer;
  font-family: var(--font);
}

.cart-modal__close:hover {
  background: var(--neutral-100);
  color: var(--neutral-800);
}

.cart-modal__close:focus-visible {
  outline: 2px solid var(--sea-400);
  outline-offset: 2px;
}

.cart-modal__scroll {
  flex: 1;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.cart-modal__body {
  padding: 0 20px 20px;
}

.cart-modal__footer {
  flex-shrink: 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  padding: 14px 20px 16px;
  border-top: 1px solid var(--neutral-200);
  background: var(--white);
}

.cart-modal__edit-btn {
  min-width: 5.5rem;
}

.cart-summary-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--neutral-800);
}

.cart-summary-table th,
.cart-summary-table td {
  padding: 10px 6px;
  border-bottom: 1px solid var(--neutral-200);
  vertical-align: top;
}

.cart-summary-table thead th {
  padding-top: 14px;
  padding-bottom: 8px;
  font-weight: 600;
  font-size: 0.6875rem;
  color: var(--neutral-600);
  text-align: right;
}

.cart-summary-table thead th.cart-summary-table__corner {
  text-align: left;
}

.cart-summary-table__num {
  text-align: right;
  white-space: nowrap;
  width: 1%;
  padding-left: 10px;
}

.cart-summary-table__desc {
  padding-right: 12px;
  min-width: 0;
}

.cart-summary-table__desc p {
  margin: 0;
}

.cart-summary-table__meta {
  font-size: 0.6875rem;
  color: var(--neutral-500);
  line-height: 1.35;
  margin-bottom: 3px;
}

.cart-summary-table__name {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--neutral-900);
  line-height: 1.35;
  margin-bottom: 5px;
}

.cart-summary-table__detail {
  font-size: 0.75rem;
  color: var(--neutral-600);
  line-height: 1.4;
  margin-top: 3px;
}

.cart-summary-table__break td {
  padding-top: 8px;
  padding-bottom: 8px;
  vertical-align: baseline;
}

.cart-summary-table__break-pad {
  border-bottom-color: var(--neutral-200);
}

.cart-summary-table__label {
  text-align: right;
  font-size: 0.8125rem;
  color: var(--neutral-700);
  padding-right: 8px;
}

.cart-summary-table__break--strong .cart-summary-table__label,
.cart-summary-table__break--strong .cart-summary-table__num {
  font-weight: 600;
  color: var(--neutral-900);
}