/* Layouts for the current homepage product examples. */
:is(.tt-group-workspace, .tt-handoff-conversation, .tt-project-issues-shell,
    .tt-avatar-workspace, .tt-parallel-conversation, .tt-org-budget-workspace) {
  --demo-line: #dce6f2;
  --demo-canvas: #f2f7ff;
  --demo-paper: #fff;
  --demo-gap: clamp(8px, 1.25cqw, 18px);
  color: #17263a;
  font-size: clamp(10px, 1.12cqw, 15px);
  line-height: 1.45;
}

:is(.tt-group-workspace, .tt-handoff-conversation, .tt-project-issues-shell,
    .tt-avatar-workspace, .tt-parallel-conversation, .tt-org-budget-workspace) :is(header, footer) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6em;
}

:is(.tt-group-workspace, .tt-handoff-conversation, .tt-project-issues-shell,
    .tt-avatar-workspace, .tt-parallel-conversation, .tt-org-budget-workspace) small {
  display: block;
  color: #4a5d76;
}

:is(.tt-group-workspace, .tt-handoff-conversation, .tt-avatar-workspace, .tt-parallel-conversation) img {
  width: 2em;
  height: 2em;
  object-fit: cover;
  border-radius: 50%;
  flex: none;
}

:is(.tt-group-workspace, .tt-handoff-conversation, .tt-project-issues-shell,
    .tt-avatar-workspace, .tt-parallel-conversation__stage, .tt-org-budget-workspace__body) {
  display: grid;
  gap: var(--demo-gap);
  min-width: 0;
}

:is(.tt-group-workspace, .tt-avatar-workspace, .tt-parallel-conversation, .tt-org-budget-workspace) {
  height: 100%;
  overflow: auto;
  padding: var(--demo-gap);
  background: var(--demo-canvas);
}

.tt-group-workspace { grid-template-columns: 1fr 2.55fr 1.1fr; }
.tt-handoff-conversation { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); padding: var(--demo-gap); overflow: auto; }
.tt-project-issues-shell { grid-template-columns: 1fr 5fr; min-height: 0; overflow: auto; }
.tt-avatar-workspace { grid-template-columns: 1fr 3.5fr; }
.tt-parallel-conversation__stage { grid-template-columns: 2.6fr 1fr; margin-top: var(--demo-gap); }
.tt-org-budget-workspace__body { grid-template-columns: 2.1fr 1fr; }

:is(.tt-group-workspace > *, .tt-handoff-conversation > *, .tt-project-issues-shell > *,
    .tt-avatar-workspace > *, .tt-parallel-conversation__stage > *, .tt-org-budget-workspace__body > *) {
  min-width: 0;
  padding: var(--demo-gap);
  background: var(--demo-paper);
  border: 1px solid var(--demo-line);
  border-radius: 8px;
}

:is(.tt-group-workspace__channel-list, .tt-group-workspace__messages,
    .tt-group-workspace__tracker ol, .tt-handoff-conversation__dm-body,
    .tt-handoff-conversation__thread, .tt-project-issue-column, .tt-avatar-workspace__people,
    .tt-avatar-workspace__config, .tt-avatar-workspace__recent, .tt-parallel-conversation__messages,
    .tt-parallel-conversation__phone-messages, .tt-org-budget-workspace__member-list) {
  display: grid;
  gap: 0.55em;
  margin-block: 0.7em;
}

:is(.tt-group-message, .tt-group-workspace__channel-list > section, .tt-group-workspace__tracker li,
    .tt-avatar-workspace__identity, .tt-avatar-workspace__people > section,
    .tt-avatar-workspace__config > section, .tt-parallel-conversation__messages > article,
    .tt-handoff-conversation__thread > article, .tt-handoff-conversation__message) {
  display: flex;
  align-items: flex-start;
  gap: 0.55em;
  min-width: 0;
}

:is(.tt-group-task-card, .tt-group-workspace__composer, .tt-handoff-conversation__share,
    .tt-handoff-conversation__preview, .tt-project-issue-card, .tt-avatar-workspace__memory-grid > article,
    .tt-avatar-workspace__config > section, .tt-parallel-conversation__progress,
    .tt-parallel-conversation__phone-progress, .tt-org-budget-workspace__overview > *,
    .tt-org-budget-workspace__attention, .tt-org-budget-workspace__control) {
  background: var(--demo-canvas);
  border: 1px solid var(--demo-line);
  border-radius: 6px;
  padding: 0.55em;
}

.tt-group-message__avatar {
  display: grid;
  place-items: center;
  width: 2em;
  height: 2em;
  flex: none;
  border-radius: 50%;
  background: var(--demo-canvas);
}

:is(.tt-group-workspace__composer, .tt-project-issues-toolbar, .tt-org-budget-workspace__member-list > div) {
  display: flex;
  align-items: center;
  gap: 0.6em;
}

.tt-project-issues-toolbar { justify-content: space-between; margin-block: 0.65em; }
.tt-project-issues-toolbar span { margin-inline-end: 0.45em; }

:is(.tt-project-issues-workspace, .tt-project-issue-board, .tt-avatar-workspace__content,
    .tt-avatar-workspace__memory-grid, .tt-parallel-conversation__desktop-body,
    .tt-org-budget-workspace__overview) {
  display: grid;
  min-width: 0;
  gap: 0.6em;
}

.tt-project-issues-workspace { grid-template-columns: 2.2fr 1fr; }
.tt-project-issue-board, .tt-avatar-workspace__memory-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tt-project-issue-column { align-content: start; min-width: 0; margin: 0; }
.tt-project-issue-detail { min-width: 0; padding-inline-start: 0.65em; border-inline-start: 1px solid var(--demo-line); }
.tt-project-issue-card { overflow-wrap: anywhere; }
.tt-avatar-workspace__content { grid-template-columns: 2fr 1fr; }
.tt-parallel-conversation__desktop-body { grid-template-columns: 1fr 2.4fr; margin-top: 0.65em; }
.tt-parallel-conversation__device-icon { width: 1.5em; height: 1.5em; stroke: currentColor; display: inline-block; vertical-align: middle; }
.tt-parallel-conversation__sync-rail { padding-inline: var(--demo-gap); }
.tt-org-budget-workspace__overview { grid-template-columns: 1.7fr repeat(3, minmax(0, 1fr)); margin-block: var(--demo-gap); }
.tt-org-budget-workspace__overview > article > * { display: block; }
.tt-org-budget-workspace__member-list > div { justify-content: space-between; padding-block: 0.35em; border-bottom: 1px solid var(--demo-line); }
.tt-org-budget-workspace__total > div,
.tt-org-budget-workspace .tt-org-member-usage > i { display: block; height: 3px; background: var(--demo-line); }
.tt-org-budget-workspace__total > div > i,
.tt-org-budget-workspace .tt-org-member-usage > i > b { display: block; height: 100%; width: var(--usage); background: #3478d6; }

@media (max-width: 600px) {
  :is(.tt-group-workspace, .tt-handoff-conversation, .tt-avatar-workspace,
      .tt-project-issues-shell) { grid-template-columns: minmax(0, 1fr); }
  :is(.tt-group-workspace__channels, .tt-group-workspace__tracker,
      .tt-avatar-workspace__sidebar, .tt-project-issues-sidebar,
      .tt-project-issue-detail, .tt-parallel-conversation__threads) { display: none; }
  :is(.tt-project-issues-workspace, .tt-avatar-workspace__content,
      .tt-parallel-conversation__desktop-body) { grid-template-columns: minmax(0, 1fr); }
  .tt-org-budget-workspace__body { grid-template-columns: minmax(0, 1fr); }
  .tt-org-budget-workspace__overview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.tt-project-issue-card.is-selected, .tt-group-workspace__channel-list > .is-active {
  background: #eaf3ff;
  border-color: #bcd4f7;
}

/* Keep the UI white and reserve color for selection and status. */
:is(.tt-group-workspace, .tt-handoff-conversation, .tt-project-issues-shell,
    .tt-avatar-workspace, .tt-parallel-conversation, .tt-org-budget-workspace) {
  --demo-line: #d8e2ef;
  --demo-canvas: #f7faff;
  font-size: clamp(12px, 1.38cqw, 16px);
}

:is(.tt-group-workspace, .tt-handoff-conversation, .tt-project-issues-shell,
    .tt-avatar-workspace, .tt-parallel-conversation, .tt-org-budget-workspace) small {
  color: #42536b;
  font-size: max(10px, 0.84em);
}

:is(.tt-group-workspace__chat-head, .tt-handoff-conversation__person,
    .tt-handoff-conversation__workspace-head, .tt-project-issues-header,
    .tt-avatar-workspace__identity, .tt-parallel-conversation__desktop > header,
    .tt-org-budget-workspace__header) {
  padding-bottom: 0.7em;
  border-bottom: 1px solid var(--demo-line);
}

:is(.tt-group-workspace__chat-head, .tt-handoff-conversation__workspace-head,
    .tt-project-issues-header, .tt-avatar-workspace__identity,
    .tt-org-budget-workspace__header) :is(strong, h4) {
  font-size: 1.15em;
  color: #13223a;
}

.tt-group-workspace__channel-list > section { padding: 0.5em; border-radius: 6px; }
.tt-group-workspace__members { display: flex; gap: 0.4em; }
.tt-group-task-card { margin-top: 0.45em; border-inline-start: 3px solid #3268d6; }
.tt-avatar-workspace__identity > span { flex: 1; }
.tt-avatar-workspace__config > section > span { flex: 1; }
.tt-avatar-workspace__config > section > i,
.tt-project-issue-column > header b {
  border-radius: 5px;
  padding: 0.15em 0.4em;
  background: #e7efff;
  color: #234ea4;
  font-style: normal;
}
.tt-project-issue-column > header :is(span, strong, b),
.tt-org-budget-workspace__quota-summary { display: flex; align-items: center; gap: 0.45em; }
.tt-project-issue-card footer { flex-wrap: wrap; justify-content: flex-start; margin-top: 0.45em; }
.tt-project-issue-card p { margin-top: 0.35em; color: #42536b; }
.tt-project-issue-detail > * + * { margin-top: 0.55em; }
.tt-parallel-conversation__stage > * { min-height: 20em; }
.tt-parallel-conversation__phone { border: 3px solid #cbd9ec; border-radius: 20px; }
.tt-parallel-conversation__messages > .is-user,
.tt-parallel-conversation__phone-messages > .is-user {
  padding: 0.55em;
  border-radius: 6px;
  background: #edf4ff;
}
.tt-org-budget-workspace__overview > article > strong { font-size: 1.3em; }
.tt-org-budget-workspace__quota-summary > span { flex: 1; padding: 0.5em 0; }
.tt-org-budget-workspace__presets { display: flex; flex-wrap: wrap; gap: 0.4em; }
.tt-org-budget-workspace__presets > span { padding: 0.2em 0.4em; border: 1px solid var(--demo-line); border-radius: 4px; }

.tt-product-demo--handoff-v2:not([hidden]) {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: 100%;
  height: 100%;
  background: #fff;
}
.tt-product-demo--handoff-v2 .tt-handoff-refined-body {
  display: grid;
  min-height: 0;
  overflow: hidden;
}
.tt-product-demo--handoff-v2 .tt-handoff-conversation {
  background: #f7faff;
  min-height: 0;
}
.tt-handoff-conversation__share,
.tt-handoff-conversation__thread > .is-agent { border-inline-start: 3px solid #3268d6; }
.tt-handoff-conversation__thread > .is-agent { padding: 0.5em; background: #f2f7ff; }

@media (max-width: 600px) {
  .tt-parallel-conversation__stage > * { min-height: auto; }
  .tt-product-demo--handoff-v2 .tt-handoff-refined-body { grid-template-columns: minmax(0, 1fr); }
  .tt-product-demo--handoff-v2 .tt-handoff-refined-body > :is(.electron-showcase__rail, .tt-message-nav) { display: none; }
}

/* The handoff preview carries its own desktop chrome on the static site. */
.tt-product-demo--handoff-v2 .electron-showcase__topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  height: 36px;
  padding: 0 10px;
  background: #fff;
  border-bottom: 1px solid #d8e2ef;
  font-size: 11px;
}

.tt-product-demo--handoff-v2 .electron-icon {
  width: 14px;
  height: 14px;
  flex: none;
  stroke: currentColor;
  stroke-width: 1.5;
}

.tt-product-demo--handoff-v2 .electron-showcase__topbar > span {
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

.tt-product-demo--handoff-v2 .electron-showcase__traffic > i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ff645e;
}
.tt-product-demo--handoff-v2 .electron-showcase__traffic > i:nth-child(2) { background: #f5b945; }
.tt-product-demo--handoff-v2 .electron-showcase__traffic > i:nth-child(3) { background: #35bd69; }
.tt-product-demo--handoff-v2 .electron-showcase__search {
  margin-inline: auto;
  overflow: hidden;
  padding: 3px 7px;
  border-radius: 5px;
  background: #eef4ff;
  color: #405576;
}
.tt-product-demo--handoff-v2 .electron-showcase__status-indicator { display: flex; }
.tt-product-demo--handoff-v2 .tt-handoff-refined-body {
  grid-template-columns: 36px minmax(110px, 17%) minmax(0, 1fr);
}
.tt-product-demo--handoff-v2 .electron-showcase__rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  padding-block: 8px;
  background: #f2f7ff;
  border-inline-end: 1px solid #d8e2ef;
}
.tt-product-demo--handoff-v2 .electron-showcase__rail-items { display: grid; gap: 8px; }
.tt-product-demo--handoff-v2 .electron-product-icon { width: 16px; height: 16px; }
.tt-product-demo--handoff-v2 .electron-showcase__org-mark {
  display: grid;
  place-items: center;
  width: 23px;
  height: 23px;
  border-radius: 6px;
  color: #fff;
  background: #3268d6;
  font-size: 12px;
}
.tt-product-demo--handoff-v2 .tt-message-nav {
  overflow: auto;
  background: #f7faff;
  border-inline-end: 1px solid #d8e2ef;
}

@media (max-width: 600px) {
  .tt-product-demo--handoff-v2 .tt-handoff-refined-body { grid-template-columns: minmax(0, 1fr); }
  .tt-product-demo--handoff-v2 .electron-showcase__topbar > .electron-showcase__search { display: none; }
  .tt-product-demo--handoff-v2 .electron-showcase__status { margin-inline-start: auto; }
}