/* Phones drawn in the page: an iPhone (iOS 26) and an Android phone (Material 3); their screens scale with their width (em units). */
:root {
  --ios-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", var(--sans);
  --ios-blue: #0a84ff;
  --ios-tint: #4da3ff;
  --ios-bubble: #0f3d66;
  --ios-fill: rgba(255, 255, 255, 0.09);
  --ios-hairline: rgba(255, 255, 255, 0.16);
  --android-font: "Google Sans", Roboto, var(--sans);
  --md-surface: #111318;
  --md-container: #1d2024;
  --md-container-high: #282a2f;
  --md-secondary-container: #3e4759;
  --md-on-secondary-container: #dae2f9;
  --md-primary: #aac7ff;
  --md-primary-container: #284777;
  --phone-text-2: rgba(255, 255, 255, 0.86);
  --phone-text-3: rgba(255, 255, 255, 0.55);
  --push: 560ms;
}

.devices {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: var(--devices-gap);
}
.devices .device { flex: 0 1 290px; }

/* Frames: a titanium edge around a black bezel */
.device {
  position: relative;
  aspect-ratio: 9 / 19.5;
  padding: 3.4%;
  border-radius: 15% / 6.9%;
  background: #050505;
  box-shadow: inset 0 0 0 2px #4a474d, inset 0 0 0 3px #19181b, var(--window-shadow);
}
.device--android {
  aspect-ratio: 9 / 20;
  padding: 2.6%;
  border-radius: 10% / 4.5%;
  box-shadow: inset 0 0 0 2px #36373b, inset 0 0 0 3px #141416, var(--window-shadow);
}
.device::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 6;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0.12), transparent 38%);
  opacity: var(--sheen, 0.35);
}
.device__screen {
  position: relative;
  height: 100%;
  overflow: hidden;
  border-radius: 12.4% / 5.7%;
  background: #000;
  container-type: inline-size;
}
.device--android .device__screen { border-radius: 7.6% / 3.4%; }

.phone {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #000;
  color: #fff;
  font: 400 4.5cqw/1.3 var(--ios-font);
  letter-spacing: -0.01em;
}
.device--android .phone {
  background: var(--md-surface);
  font-family: var(--android-font);
  letter-spacing: 0;
}
.phone p { margin: 0; }
/* Home indicator, gesture bar on Android */
.phone::after {
  content: "";
  position: absolute;
  z-index: 5;
  left: 50%;
  bottom: 0.45em;
  width: 7.6em;
  height: 0.28em;
  margin-left: -3.8em;
  border-radius: 1em;
  background: rgba(255, 255, 255, 0.85);
}
.device--android .phone::after { width: 5.6em; height: 0.22em; margin-left: -2.8em; background: rgba(255, 255, 255, 0.5); }

/* Status bar: time, the Dynamic Island or the punch-hole camera, signal, Wi-Fi and battery */
.phone__status {
  position: absolute;
  z-index: 4;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  height: 3.3em;
  padding: 0 1.7em 0 2.2em;
  font-size: 0.95em;
  font-weight: 600;
}
.device--android .phone__status { height: 2.6em; padding: 0 1.3em; font-size: 0.82em; font-weight: 500; }
.phone__camera {
  position: absolute;
  top: 0.62em;
  left: 50%;
  width: 6.6em;
  height: 1.95em;
  margin-left: -3.3em;
  border-radius: 1em;
  background: #000;
}
.device--android .phone__camera {
  top: 0.75em;
  width: 1.1em;
  height: 1.1em;
  margin-left: -0.55em;
  box-shadow: 0 0 0 0.15em #1c1c1f;
}
.phone__signal {
  width: 4.6em;
  height: 0.8em;
  margin-left: auto;
  background: currentColor;
  mask: var(--icon-status) right center / contain no-repeat;
  -webkit-mask: var(--icon-status) right center / contain no-repeat;
}

/* Views: the Spaces tab, and the chat pushed over it */
.phone__view {
  position: absolute;
  inset: 0;
  padding-top: 3.4em;
  background: inherit;
  transition: translate var(--push) var(--ease), opacity var(--push) var(--ease);
}
.device--android .phone__view { padding-top: 2.8em; }
.phone__view--chat {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  translate: 100% 0;
}
.is-open .phone__view--chat { translate: none; }
.is-open .phone__view--spaces { translate: -30% 0; opacity: 0.3; }
.device--android .phone__view--chat { translate: 18% 0; opacity: 0; }
.is-open .device--android .phone__view--chat { translate: none; opacity: 1; }
.is-open .device--android .phone__view--spaces { translate: -10% 0; opacity: 0; }

.phone__large {
  padding: 0.3em 0.72em 0.35em;
  font-size: 1.85em;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.device--android .phone__large { padding: 0.55em 0.75em 0.6em; font-size: 1.45em; font-weight: 400; letter-spacing: 0; }

/* Lanes: tinted blocks holding projects and their workspaces, as in the Mac sidebar */
.lane {
  --lane: var(--state-doing);
  --lane-glyph: var(--icon-hammer);
  margin: 0 0.7em 0.55em;
  padding: 0.5em 0.5em 0.4em;
  border-radius: 1.1em;
  background: color-mix(in srgb, var(--lane) 13%, transparent);
}
.lane--review { --lane: var(--state-review); --lane-glyph: var(--icon-review); }
.lane--done { --lane: var(--state-done); --lane-glyph: var(--icon-done); }
.device--android .lane { border-radius: 1.3em; background: color-mix(in srgb, var(--lane) 9%, var(--md-container)); }
.lane__title {
  display: flex;
  align-items: center;
  gap: 0.4em;
  padding: 0 0.3em 0.3em;
  color: var(--lane);
  font-size: 0.8em;
  font-weight: 600;
}
.lane__icon {
  position: relative;
  width: 1.15em;
  height: 1.15em;
  border-radius: 50%;
  background: var(--lane);
}
.lane__icon::after {
  content: "";
  position: absolute;
  inset: 24%;
  background: #000;
  mask: var(--lane-glyph) center / contain no-repeat;
  -webkit-mask: var(--lane-glyph) center / contain no-repeat;
}
.lane__project {
  display: flex;
  align-items: center;
  gap: 0.45em;
  padding: 0.25em 0.3em;
  font-size: 0.88em;
  font-weight: 600;
}
.lane__ws {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.32em 0.5em 0.32em 1.55em;
  border-radius: 0.6em;
  color: var(--phone-text-2);
  font-size: 0.84em;
  white-space: nowrap;
  transition: background-color 250ms var(--ease);
}
.lane__ws p { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.lane__ws .state { width: 0.95em; height: 0.95em; }
.lane__tree { margin-left: 2.1em; border-left: 1px solid rgba(255, 255, 255, 0.2); }
.lane__tree .lane__ws { padding-left: 0.9em; }
.lane__tree .lane__ws::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 0.55em;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}
.is-tap .lane__ws--tap { background: rgba(255, 255, 255, 0.16); }
.is-tap .device--android .lane__ws--tap { background: var(--md-secondary-container); }

/* Chat: navigation bar, the log, the composer */
.phone__nav { display: flex; align-items: center; gap: 0.6em; padding: 0.1em 0.8em 0.5em; }
.phone__back {
  position: relative;
  flex: none;
  width: 2.5em;
  height: 2.5em;
  border-radius: 50%;
  background: var(--ios-fill);
  box-shadow: inset 0 0 0 0.5px var(--ios-hairline);
}
.phone__back::after {
  content: "";
  position: absolute;
  inset: 28%;
  background: #fff;
  mask: var(--icon-chevron) center / contain no-repeat;
  -webkit-mask: var(--icon-chevron) center / contain no-repeat;
}
.device--android .phone__back { background: none; box-shadow: none; }
.device--android .phone__back::after {
  inset: 25%;
  mask-image: var(--icon-arrow-back);
  -webkit-mask-image: var(--icon-arrow-back);
}
.phone__title { min-width: 0; line-height: 1.25; }
.phone__title p { font-size: 0.92em; font-weight: 600; }
.device--android .phone__title p { font-size: 1.05em; font-weight: 500; }
.phone__title small { display: block; color: var(--phone-text-3); font-size: 0.74em; }
.phone__log {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0 0.85em;
  overflow: hidden;
  mask: linear-gradient(transparent, #000 3em);
  -webkit-mask: linear-gradient(transparent, #000 3em);
}
.phone__log > :not(.step),
.phone__log > .step > * { margin-top: 0.65em; }
.phone .msg p { max-width: 86%; font-size: 0.9em; }
.phone .msg--user p {
  padding: 0.5em 0.85em;
  border-radius: 1.2em;
  background: var(--ios-bubble);
}
.device--android .msg--user p { border-radius: 1.2em 1.2em 0.35em 1.2em; background: var(--md-primary-container); }
.phone .msg--agent p { color: #fff; }
.thought { display: flex; align-items: center; gap: 0.45em; color: var(--phone-text-3); font-size: 0.82em; }
.thought__icon {
  width: 1em;
  height: 1em;
  background: currentColor;
  mask: var(--icon-thought) center / contain no-repeat;
  -webkit-mask: var(--icon-thought) center / contain no-repeat;
}

/* Tool calls: their group runs, each call appears, then the group folds */
.tools {
  overflow: hidden;
  border-radius: 0.8em;
  background: rgba(255, 214, 10, 0.12);
  box-shadow: inset 0 0 0 1px rgba(255, 214, 10, 0.24);
  font-size: 0.8em;
  transition: background-color 400ms var(--ease), box-shadow 400ms var(--ease);
}
.is-fold .tools { background: rgba(50, 215, 75, 0.1); box-shadow: inset 0 0 0 1px rgba(50, 215, 75, 0.22); }
.tools__head { display: flex; align-items: center; gap: 0.5em; padding: 0.5em 0.75em; }
.tools__icon,
.tools__chevron,
.phone .tool__icon {
  flex: none;
  width: 1.05em;
  height: 1.05em;
  background: var(--phone-text-3);
  mask: var(--icon) center / contain no-repeat;
  -webkit-mask: var(--icon) center / contain no-repeat;
}
.tools__icon { --icon: var(--icon-tools); background: var(--phone-text-2); }
.tools__chevron { --icon: var(--icon-chevron); width: 0.8em; margin-left: auto; rotate: -90deg; transition: rotate 400ms var(--ease); }
.is-fold .tools__chevron { rotate: 180deg; }
.tools__used,
.is-fold .tools__running { display: none; }
.is-fold .tools__used { display: block; }
.tools__rows {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 500ms var(--ease);
}
.is-fold .tools__rows { grid-template-rows: 0fr; }
.tools__list { min-height: 0; overflow: hidden; padding: 0 0.45em; }
.tool {
  display: flex;
  align-items: center;
  gap: 0.5em;
  margin-bottom: 0.45em;
  padding: 0.42em 0.6em;
  border-radius: 0.6em;
  background: rgba(0, 0, 0, 0.3);
  color: var(--phone-text-2);
}
.phone .tool__icon--read { --icon: var(--icon-doc); }
.phone .tool__icon--grep { --icon: var(--icon-review); }

/* A question card: an option is picked, the other folds away */
.ask {
  padding: 0.75em 0.8em 0.6em;
  border-radius: 1em;
  background: var(--ios-fill);
  box-shadow: inset 0 0 0 1px var(--ios-hairline);
  font-size: 0.84em;
}
.device--android .ask { border-radius: 0.9em; background: var(--md-container-high); box-shadow: none; }
.ask__title { display: flex; align-items: flex-start; gap: 0.45em; margin-bottom: 0.35em !important; font-weight: 600; }
.ask__icon {
  flex: none;
  width: 1.1em;
  height: 1.1em;
  margin-top: 0.1em;
  background: var(--state-input);
  mask: var(--icon-question) center / contain no-repeat;
  -webkit-mask: var(--icon-question) center / contain no-repeat;
}
.ask__option {
  display: flex;
  align-items: center;
  gap: 0.55em;
  padding: 0.38em 0.1em;
  color: var(--phone-text-2);
  transition: color 300ms var(--ease);
}
.ask__radio {
  flex: none;
  width: 1.05em;
  height: 1.05em;
  border-radius: 50%;
  box-shadow: inset 0 0 0 0.11em rgba(255, 255, 255, 0.45);
  transition: box-shadow 300ms var(--ease);
}
.is-pick .ask__option--pick { color: #fff; }
.is-pick .ask__option--pick .ask__radio { box-shadow: inset 0 0 0 0.34em var(--ios-blue); }
.is-pick .device--android .ask__option--pick .ask__radio { box-shadow: inset 0 0 0 0.11em var(--md-primary), inset 0 0 0 0.26em var(--md-container-high), inset 0 0 0 1em var(--md-primary); }
.ask__fold {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 450ms var(--ease), opacity 300ms var(--ease);
}
.ask__fold > * { min-height: 0; overflow: hidden; }
.is-answered .ask__fold { grid-template-rows: 0fr; opacity: 0; }
.ask__answered {
  max-height: 0;
  overflow: hidden;
  color: var(--phone-text-3);
  font-size: 0.86em;
  opacity: 0;
  transition: max-height 450ms var(--ease), opacity 400ms var(--ease);
}
.is-answered .ask__answered { max-height: 1.6em; opacity: 1; }

.phone__composer {
  display: flex;
  align-items: center;
  margin: 0.6em 0.75em 1.9em !important;
  padding: 0.4em 0.4em 0.4em 1em;
  border-radius: 1.4em;
  background: var(--ios-fill);
  box-shadow: inset 0 0 0 0.5px var(--ios-hairline);
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.88em;
}
.device--android .phone__composer { margin-bottom: 1.5em !important; border-radius: 1.6em; background: var(--md-container-high); box-shadow: none; }
.phone__send {
  position: relative;
  width: 1.9em;
  height: 1.9em;
  margin-left: auto;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
}
.phone__send::after {
  content: "";
  position: absolute;
  inset: 25%;
  background: rgba(255, 255, 255, 0.6);
  mask: var(--icon-send) center / contain no-repeat;
  -webkit-mask: var(--icon-send) center / contain no-repeat;
}

/* Tab bar: a floating Liquid Glass capsule on iOS, a navigation bar on Android; it slides away when a chat opens */
.phone__tabs {
  position: absolute;
  z-index: 3;
  left: 1.1em;
  right: 1.1em;
  bottom: 1.4em;
  display: flex;
  padding: 0.28em;
  border-radius: 2em;
  background: linear-gradient(rgba(74, 74, 80, 0.64), rgba(40, 40, 44, 0.74));
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 0.6em 1.6em rgba(0, 0, 0, 0.55);
  transition: translate var(--push) var(--ease), opacity var(--push) var(--ease);
}
.is-open .phone__tabs { translate: 0 150%; opacity: 0; }
.phone__tab {
  flex: 1;
  display: grid;
  justify-items: center;
  gap: 0.2em;
  padding: 0.45em 0 0.35em;
  border-radius: 1.8em;
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.62em;
  font-weight: 500;
}
.phone__tab.is-active { background: rgba(255, 255, 255, 0.13); color: var(--ios-tint); }
.phone__tab i { position: relative; width: 2.3em; height: 2.3em; }
.phone__tab i::after {
  content: "";
  position: absolute;
  inset: 0;
  background: currentColor;
  mask: var(--icon) center / contain no-repeat;
  -webkit-mask: var(--icon) center / contain no-repeat;
}
.phone__tab--spaces { --icon: var(--icon-spaces); }
.phone__tab--chats { --icon: var(--icon-chats); }
.phone__tab--more { --icon: var(--icon-more); }
.device--android .phone__tabs {
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0.6em 0 1.5em;
  border-radius: 0;
  background: var(--md-container);
  box-shadow: none;
}
.device--android .phone__tab {
  gap: 0.35em;
  padding: 0;
  border-radius: 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.66em;
}
.device--android .phone__tab.is-active { background: none; color: #fff; font-weight: 600; }
.device--android .phone__tab i { width: 5em; height: 2.6em; border-radius: 1.3em; }
.device--android .phone__tab i::after { inset: 0.45em 1.55em; }
.device--android .phone__tab.is-active i { background: var(--md-secondary-container); color: var(--md-on-secondary-container); }

/* Lock Screen with the agents' Live Activity */
.lock {
  background:
    radial-gradient(120% 70% at 90% 22%, #ff7a59, transparent 55%),
    radial-gradient(90% 60% at 0% 70%, #7a1050, transparent 62%),
    radial-gradient(90% 50% at 95% 100%, #ffc46b, transparent 55%),
    linear-gradient(170deg, #3a0d40, #1a0718 60%, #2a0a2c);
}
.lock__date,
.lock__time {
  position: absolute;
  left: 0;
  right: 0;
  color: rgba(255, 255, 255, 0.9);
  text-align: center;
}
.lock__date { top: 4.7em; font-weight: 600; }
.lock__time {
  top: 1.22em;
  font-size: 5em;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
}
.lock__hint {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 1.9em;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.78em;
  text-align: center;
}
.activity {
  position: absolute;
  left: 0.7em;
  right: 0.7em;
  bottom: 4em;
  padding: 0.8em 0.9em 0.6em;
  border-radius: 1.5em;
  background: rgba(28, 22, 30, 0.74);
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.2);
  font-size: 0.78em;
}
.activity__head {
  display: flex;
  align-items: center;
  gap: 0.45em;
  margin-bottom: 0.45em !important;
  color: var(--phone-text-3);
  white-space: nowrap;
}
.activity__head .state { width: 1.1em; height: 1.1em; }
.activity__counts { display: flex; gap: 0.55em; }
.activity__counts b { font-weight: 650; }
.activity__counts [data-tint="doing"] { color: var(--state-doing); }
.activity__counts [data-tint="review"] { color: var(--state-review); }
.activity__counts [data-tint="merged"] { color: var(--state-merged); }
.activity__head small { margin-left: auto; font-size: 0.86em; }
.activity__row {
  display: grid;
  grid-template-columns: 0.22em minmax(0, 1fr) 1em 3.4em;
  align-items: center;
  gap: 0.6em;
  margin: 0 -0.4em;
  padding: 0.3em 0.4em;
  border-radius: 0.6em;
}
.activity__bar {
  height: 2.3em;
  border-radius: 0.2em;
  background: var(--state-color);
  transition: background-color 400ms var(--ease);
}
.activity__row p { overflow: hidden; font-weight: 500; white-space: nowrap; text-overflow: ellipsis; }
.activity__row small { display: block; color: var(--phone-text-3); font-size: 0.84em; font-weight: 400; overflow: hidden; text-overflow: ellipsis; }
.activity__row .state { width: 1em; height: 1em; }
.activity__time { color: var(--phone-text-2); font-size: 0.88em; font-variant-numeric: tabular-nums; text-align: right; }
:is([data-state="review"], [data-state="merged"]) .activity__time { font-size: 0; }
:is([data-state="review"], [data-state="merged"]) .activity__time::after { color: var(--state-color); font-size: 3.1cqw; }
[data-state="review"] .activity__time::after { content: "Review"; }
[data-state="merged"] .activity__time::after { content: "Merged"; }
.motion .activity__row.is-changed { animation: activity-flash 1.1s var(--ease); }
.motion .is-changed .state { animation: state-pop 600ms var(--ease); }
@keyframes activity-flash {
  from { background: rgba(255, 255, 255, 0.14); }
  to { background: transparent; }
}
@keyframes state-pop {
  from { opacity: 0; transform: scale(0.4); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 640px) {
  .devices {
    justify-content: flex-start;
    margin-inline: calc(var(--margin) * -1);
    padding: 0 var(--margin) 48px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--margin);
    scrollbar-width: none;
  }
  .devices .device { flex: 0 0 74%; scroll-snap-align: start; }
}