/* Optus Enterprise Pulse. Every value here is ported from `Theme.swift` in the
   iOS build, which in turn came from the Optus-inspired design system's
   tokens/*.css. Swap these and the app follows.

   Type: the system specifies MarkPro falling back to Poppins. MarkPro is
   licensed and not ours to ship, so Poppins is loaded in index.html and MarkPro
   wins on a machine that has it — the stack below names it first. */
:root {
  --font: MarkPro, Poppins, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-head: MarkPro, Poppins, -apple-system, "Helvetica Neue", Arial, sans-serif;

  /* Palette — Theme.swift */
  --magenta: #cb1ecb;
  --yellow: #fdcc08;
  --teal-dark: #00323a;
  --teal: #00828e;
  --cyan: #66e4e9;
  --ink: #181c1f;
  --body: #333333;
  --muted: #5b6b72;
  --line: #e4ebee;
  --page-bg: #f4f7f8;
  --section: #d9e4e9;
  --pale-blue: #e7eff8;
  --success: #0a6e5c;
  --success-bg: #dcf3ee;
  --warning: #8a6100;
  --warning-bg: #fdf1d8;
  --danger: #b4231f;
  --disabled: #a9b7bd;
  --dot-idle: #b9c7cc;
  --tab-idle: #8fa1a8;

  /* Radii — Theme.Radius */
  --r-sm: 5px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;

  /* The page behind the phone. The app is light-only, matching the design. */
  --page: #001e23;
  --icon: 22px;
}

* { box-sizing: border-box; }

/* Screens set display, so `hidden` needs to outrank it. */
[hidden] { display: none !important; }

html, body { height: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: var(--page);
  color: var(--body);
  font: 15px/1.5 var(--font);
  -webkit-font-smoothing: antialiased;
}

/* Two columns: the copy on the left, the phone on the right. */
.stage {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(32px, 6vw, 96px);
  width: 100%;
  max-width: 1180px;
}

.intro {
  flex: 1 1 0;
  max-width: 560px;
  min-height: min(900px, calc(100vh - 40px));
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #fff;
}

.intro h1 {
  margin: 0 0 18px;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(34px, 4.4vw, 52px);
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.intro p { margin: 0 0 12px; color: rgba(255, 255, 255, 0.78); font-size: 17px; }

.intro ol, .intro ul {
  margin: 0 0 26px;
  padding-left: 22px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 16px;
}
.intro li { margin-bottom: 10px; }
.intro li:last-child { margin-bottom: 0; }
.intro strong { color: #fff; }

.intro-logo-link { display: block; padding-top: 44px; width: min(375px, 87.5%); }
.intro-logo { display: block; width: 100%; height: auto; }

/* Sits directly under the logo, so it travels with the copy block as it
   centres rather than floating over the demo. Only visible when embedded. */
.intro-close {
  align-self: flex-start;
  margin-top: 28px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 42px;
  padding: 0 18px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 140ms ease, background-color 140ms ease;
}
.intro-close svg { width: 11px; height: 11px; fill: none; }
.intro-close:hover {
  border-color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.12);
}

@media (max-width: 900px) {
  body { align-items: flex-start; }
  .stage { flex-direction: column; gap: 40px; }
  .intro { min-height: 0; max-width: min(430px, 100%); align-items: flex-start; }
  .intro-logo-link { padding-top: 24px; }
  .intro-close { margin-top: 20px; }
}

.phone {
  flex: none;
  width: min(430px, 100%);
  height: min(900px, calc(100vh - 40px));
  padding: 12px;
  border-radius: 52px;
  background: #000;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.22), 0 40px 80px rgba(0, 0, 0, 0.6);
}

.app {
  position: relative;
  height: 100%;
  display: grid;
  /* statusbar / header / screen / footer (tabbar or composer) */
  grid-template-rows: auto auto 1fr auto;
  border-radius: 42px;
  overflow: hidden;
  background: #fff;
}

.screen {
  overflow-y: auto;
  padding: 14px 16px calc(58px + 16px);
  background: var(--page-bg);
  scrollbar-width: none;
}
.screen::-webkit-scrollbar { display: none; }

/* ---------------------------------------------------------------- statusbar --- */

/* The teal bleeds up behind the status bar, as it does on the phone, so the
   indicators run white over it. */
.statusbar {
  height: 50px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 26px;
  background: var(--teal-dark);
  color: #fff;
}
.time { font-size: 15px; font-weight: 600; letter-spacing: 0.01em; }
.island { width: 106px; height: 30px; border-radius: 16px; background: #000; }
.indicators { justify-self: end; display: flex; align-items: center; gap: 6px; }
.indicators svg { fill: currentColor; height: 12px; }
.indicators .signal { width: 18px; }
.indicators .wifi { width: 16px; }
.indicators .battery { width: 26px; }

/* ------------------------------------------------------------------ header --- */

/* AppHeader.swift: dark teal, menu and bell on one row, then title + yes pill,
   then a cyan subtitle. */
header {
  padding: 6px 18px 18px;
  background: var(--teal-dark);
  color: #fff;
}

.header-row { display: flex; align-items: center; justify-content: space-between; }

.icon-btn {
  position: relative;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  cursor: pointer;
}
.icon-btn svg {
  width: 17px; height: 17px;
  fill: none; stroke: currentColor;
  stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
}
.icon-btn .dot {
  position: absolute;
  top: 6px; right: 6px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--magenta);
}

.header-title {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding-top: 14px;
}
.header-title h1 {
  margin: 0;
  font-family: var(--font-head);
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.1;
}
header.compact .header-title h1 { font-size: 21px; }
.header-sub {
  margin: 2px 0 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--cyan);
}

/* The Optus "yes" mark. The PNG is a template asset — a mask — so it takes its
   colour from `background`, exactly as renderingMode(.template) does on iOS. */
.yes-logo {
  display: block;
  aspect-ratio: 1278 / 958;
  background-color: currentColor;
  -webkit-mask: url("/yes-logo.png") no-repeat center / contain;
  mask: url("/yes-logo.png") no-repeat center / contain;
}

/* TagCornerShape: rounded except bottom-left. */
.yes-pill {
  padding: 5px 9px;
  background: var(--yellow);
  border-radius: var(--r-lg) var(--r-lg) var(--r-lg) 0;
  color: #000;
  margin-bottom: 4px;
}
.yes-pill .yes-logo { width: 26px; }

/* ------------------------------------------------------- design-system kit --- */

/* SecTitle */
.sec-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 2px 10px;
}
.sec-title h2 {
  margin: 0;
  font-family: var(--font-head);
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.sec-title button {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  color: var(--teal);
  cursor: pointer;
}

/* MCard */
.card {
  padding: 16px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  margin-bottom: 14px;
}
/* Row lists supply their own vertical rhythm. */
.card.rows { padding: 4px 16px; }
.card.rows-b { padding: 4px 16px 14px; }
.card.dark { background: var(--teal-dark); border-color: var(--teal-dark); color: #fff; }
button.card { display: block; width: 100%; text-align: left; font: inherit; cursor: pointer; }

/* RowView */
.row-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  width: 100%;
  border: 0;
  background: none;
  font: inherit;
  text-align: left;
  color: inherit;
}
button.row-item { cursor: pointer; }
.row-item + .row-item { border-top: 1px solid var(--line); }
.row-icon {
  flex: none;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 10px;
  background: var(--section);
  color: var(--teal-dark);
}
.row-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.row-icon.success { background: var(--success-bg); color: var(--success); }
.row-icon.cyan { background: var(--cyan); color: var(--teal-dark); }
.row-icon.yellow { background: var(--yellow); color: var(--ink); }
.row-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.row-body strong {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.row-body span {
  font-size: 12.5px;
  color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.row-body span.wrap { white-space: normal; }
.row-right { flex: none; display: flex; align-items: center; gap: 6px; }
.row-time { font-size: 12.5px; font-weight: 700; color: var(--teal); }

.chevron { flex: none; width: 14px; height: 14px; fill: none; stroke: var(--muted); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* StatusPill */
.pill-tag {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
  background: var(--section);
  color: var(--teal-dark);
}
.pill-tag.open, .pill-tag.pending { background: var(--warning-bg); color: var(--warning); }
.pill-tag.progress { background: var(--pale-blue); color: var(--teal-dark); }
.pill-tag.done { background: var(--success-bg); color: var(--success); }
.pill-tag.cyan { background: var(--cyan); color: var(--ink); }
.pill-tag.magenta { background: var(--magenta); color: #fff; }

/* Bar */
.bar { height: 6px; border-radius: 999px; background: var(--section); overflow: hidden; }
.bar > i { display: block; height: 100%; border-radius: 999px; background: var(--teal); }
.bar > i.done { background: var(--success); }

/* CTA / GhostBtn / Chip */
.cta {
  display: block;
  width: 100%;
  padding: 10px 32px;
  border: 0;
  border-radius: var(--r-sm);
  background: var(--yellow);
  color: #000;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}
.cta.small { padding: 8px 20px; font-size: 14px; }
.cta.hug { width: auto; }

.ghost {
  display: block;
  width: 100%;
  padding: 9px 20px;
  border: 1.5px solid var(--ink);
  border-radius: var(--r-sm);
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.chip-row {
  display: flex;
  gap: 8px;
  margin: 14px -16px 4px;
  padding: 0 16px;
  overflow-x: auto;
  scrollbar-width: none;
}
.chip-row::-webkit-scrollbar { display: none; }
.chip {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  cursor: pointer;
}
.chip svg { width: 14px; height: 14px; fill: none; stroke: var(--teal); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* Press feedback, standing in for the web build's hover states. */
button:active { opacity: 0.72; transform: scale(0.98); }
button { transition: opacity 0.12s ease, transform 0.12s ease; }

.avatar {
  flex: none;
  display: grid; place-items: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--section);
  color: var(--teal-dark);
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 800;
}
.avatar.lg { width: 42px; height: 42px; font-size: 14px; }
.portrait { flex: none; border-radius: 50%; object-fit: cover; }

/* -------------------------------------------------------------------- home --- */

.hero {
  position: relative;
  height: 128px;
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-bottom: 10px;
}
.hero-slide {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  padding: 16px 18px 18px;
  border: 0;
  background: var(--teal-dark);
  color: #fff;
  font: inherit;
  text-align: left;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}
.hero-slide.on { opacity: 1; pointer-events: auto; }
.hero-slide.light { background: var(--yellow); color: #000; }
.hero-slide h3 {
  margin: 7px 0 0;
  font-family: var(--font-head);
  font-size: 16.5px;
  font-weight: 800;
  line-height: 1.2;
}
.hero-slide p { margin: 0; font-size: 12.5px; opacity: 0.8; line-height: 1.3; }

.dots { display: flex; justify-content: center; gap: 6px; margin-bottom: 14px; }
.dots button {
  width: 7px; height: 7px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--dot-idle);
  cursor: pointer;
  transition: width 0.3s ease, background 0.3s ease;
}
.dots button.on { width: 18px; background: var(--teal-dark); }

.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.stat-grid .card { margin: 0; padding: 14px; }
.stat-head { display: flex; align-items: center; justify-content: space-between; }
.stat-head svg { width: 18px; height: 18px; fill: none; stroke: var(--teal); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.stat-label { margin-top: 8px; font-size: 12px; font-weight: 600; color: var(--muted); }
.stat-value { font-size: 14.5px; font-weight: 700; color: var(--ink); line-height: 1.25; }

.launchpad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.launchpad button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 8px 0;
  border: 0;
  background: none;
  font: inherit;
  cursor: pointer;
}
.launchpad i {
  display: grid; place-items: center;
  width: 42px; height: 42px;
  border-radius: var(--r-lg);
  background: var(--section);
  color: var(--teal-dark);
}
.launchpad svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.launchpad span { font-size: 11.5px; font-weight: 600; color: var(--ink); }

.news-card h3 { margin: 5px 0 0; font-size: 15px; font-weight: 700; color: var(--ink); line-height: 1.25; }
.news-card p { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.35; }

/* --------------------------------------------------------------- workspace --- */

.desk-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; padding-bottom: 12px; }
.desk-head strong { display: block; font-size: 14.5px; font-weight: 700; color: var(--ink); }
.desk-head span { font-size: 12.5px; color: var(--muted); }

.desk-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; padding-bottom: 12px; }
.desk-grid button {
  aspect-ratio: 1;
  display: grid; place-items: center;
  border: 0;
  border-radius: var(--r-md);
  background: var(--section);
  color: var(--teal-dark);
  font: inherit;
  font-size: 10.5px;
  font-weight: 700;
  cursor: pointer;
}
.desk-grid button.taken { background: var(--line); color: var(--disabled); cursor: default; }
.desk-grid button.mine { background: var(--teal-dark); color: #fff; cursor: default; }
.desk-grid button.sel { background: var(--yellow); color: var(--ink); }

.legend { display: flex; gap: 14px; }
.legend span { display: flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--muted); }
.legend i { width: 10px; height: 10px; border-radius: 3px; background: var(--section); }
.legend i.taken { background: var(--line); }
.legend i.mine { background: var(--teal-dark); }

/* ---------------------------------------------------------------------- hr --- */

.leave-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.leave-top .label { font-size: 12.5px; font-weight: 600; color: var(--cyan); }
.leave-top .big { font-family: var(--font-head); font-size: 28px; font-weight: 800; color: #fff; line-height: 1.15; }
.leave-top .note { font-size: 12.5px; color: rgba(255, 255, 255, 0.8); }
.leave-req {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-top: 12px; padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}
.leave-req strong { display: block; font-size: 13px; font-weight: 600; color: #fff; }
.leave-req span { font-size: 12px; color: rgba(255, 255, 255, 0.75); }

.course { padding: 11px 0; }
.course + .course { border-top: 1px solid var(--line); }
.course-head { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
.course-head svg { flex: none; width: 15px; height: 15px; fill: none; stroke: var(--teal); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.course-head strong { flex: 1; font-size: 14px; font-weight: 600; color: var(--ink); }
.course-head em { font-style: normal; font-size: 12px; font-weight: 700; color: var(--muted); }
.course-head em.done { color: var(--success); }

.tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.tags span {
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--section);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--teal-dark);
}

/* ---------------------------------------------------------------- messages --- */

.seg { display: flex; gap: 8px; padding-bottom: 14px; }
.seg button {
  flex: 1;
  padding: 8px 0;
  border: 0;
  border-radius: 999px;
  background: #fff;
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--teal-dark);
  cursor: pointer;
}
.seg button.on { background: var(--teal-dark); color: #fff; }

.msg-avatar { position: relative; }
.msg-avatar i {
  position: absolute;
  right: -1px; bottom: -1px;
  width: 12px; height: 12px;
  border: 2px solid #fff;
  border-radius: 50%;
}
.msg-avatar i.whatsapp { background: #25d366; }
.msg-avatar i.sms { background: var(--cyan); }
.msg-avatar i.email { background: var(--magenta); }
.row-item.unread .row-body strong { font-weight: 700; }
.row-item.unread .row-body span { font-weight: 600; color: var(--ink); }
.msg-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.msg-meta time { font-size: 11px; color: var(--muted); }
.msg-meta b {
  min-width: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--magenta);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}

/* ---------------------------------------------------------------- settings --- */

.toggle {
  position: relative;
  flex: none;
  width: 51px; height: 31px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--disabled);
  cursor: pointer;
  transition: background 0.2s ease;
}
.toggle::after {
  content: "";
  position: absolute;
  top: 2px; left: 2px;
  width: 27px; height: 27px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  transition: transform 0.2s ease;
}
.toggle.on { background: var(--teal); }
.toggle.on::after { transform: translateX(20px); }

.version { margin-top: 16px; text-align: center; font-size: 12px; color: var(--muted); }

/* ----------------------------------------------------------------- profile --- */

.profile-head { display: flex; align-items: center; gap: 14px; }
.profile-head h3 { margin: 0; font-family: var(--font-head); font-size: 17px; font-weight: 800; color: var(--ink); }
.profile-head p { margin: 0; font-size: 13px; color: var(--muted); }
.profile-head a { font-size: 12.5px; font-weight: 600; color: var(--teal); text-decoration: none; }

/* -------------------------------------------------------------- signed out --- */

#screen-loggedout {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 24px;
  text-align: center;
}
#screen-loggedout .yes-logo { width: 64px; color: var(--ink); margin-bottom: 14px; }
#screen-loggedout h2 { margin: 0; font-family: var(--font-head); font-size: 20px; font-weight: 800; color: var(--ink); }
#screen-loggedout p { margin: 0 0 20px; font-size: 13.5px; color: var(--muted); line-height: 1.4; }
#screen-loggedout .cta { max-width: 240px; }

/* -------------------------------------------------------------- meeting brief --- */

.sheet-scrim {
  position: absolute;
  inset: 0;
  z-index: 7;
  background: rgba(0, 30, 35, 0.45);
}
.sheet {
  position: absolute;
  inset: 44px 0 0;
  z-index: 8;
  display: flex;
  flex-direction: column;
  border-radius: 20px 20px 0 0;
  overflow: hidden;
  background: var(--page-bg);
  transform: translateY(100%);
  transition: transform 0.28s ease;
}
.sheet.open { transform: translateY(0); }
.sheet-head { padding: 12px 18px 16px; background: var(--teal-dark); color: #fff; }
.grabber { width: 38px; height: 4px; margin: 0 auto 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.3); }
.sheet-title { display: flex; align-items: flex-start; gap: 10px; }
.sheet-title h2 { flex: 1; margin: 0; font-family: var(--font-head); font-size: 18px; font-weight: 800; line-height: 1.2; }
.sheet-title p { margin: 2px 0 0; font-size: 12.5px; font-weight: 600; color: var(--cyan); }
.sheet-body { flex: 1; overflow-y: auto; padding: 14px 16px 30px; scrollbar-width: none; }
.sheet-body::-webkit-scrollbar { display: none; }
.sheet-body p.tldr { margin: 0; font-size: 13.5px; color: var(--body); line-height: 1.45; }

.step { display: flex; align-items: flex-start; gap: 10px; padding: 11px 0; }
.step + .step { border-top: 1px solid var(--line); }
.step i { flex: none; width: 20px; height: 20px; margin-top: 1px; border: 2px solid var(--teal); border-radius: 6px; }
.step strong { display: block; font-size: 13.5px; font-weight: 600; color: var(--ink); line-height: 1.3; }
.step span { font-size: 12px; color: var(--muted); }

.timeline { display: flex; gap: 12px; }
.timeline i {
  flex: none;
  display: flex; flex-direction: column; align-items: center;
  width: 10px;
}
.timeline i b { width: 10px; height: 10px; margin-top: 4px; border-radius: 50%; background: var(--dot-idle); }
.timeline:first-child i b { background: var(--teal); }
.timeline i s { flex: 1; width: 2px; background: var(--line); }
.timeline div { padding-bottom: 16px; }
.timeline:last-child div { padding-bottom: 0; }
.timeline time { display: block; font-size: 11.5px; font-weight: 700; color: var(--teal); }
.timeline strong { font-size: 13px; font-weight: 600; color: var(--ink); line-height: 1.3; }

.person-head { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.person-head strong { display: block; font-size: 14.5px; font-weight: 700; color: var(--ink); }
.person-head span { font-size: 12.5px; color: var(--muted); }
.circle-btn {
  flex: none;
  display: grid; place-items: center;
  width: 34px; height: 34px;
  border: 0;
  border-radius: 50%;
  background: var(--section);
  color: var(--teal-dark);
  cursor: pointer;
}
.circle-btn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.bio { margin: 0 0 8px; font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.bio b { color: var(--teal-dark); }
.person-contact { display: flex; gap: 8px; font-size: 12px; font-weight: 600; color: var(--teal); }
.person-contact s { color: var(--dot-idle); text-decoration: none; }

/* --------------------------------------------------------------- transcript --- */

#screen-askai { display: flex; flex-direction: column; overflow: hidden; padding: 0; }

#transcript {
  flex: 1;
  overflow-y: auto;
  padding: 16px 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  scrollbar-width: none;
}
#transcript::-webkit-scrollbar { display: none; }

.row { display: flex; align-items: flex-end; gap: 8px; }
.row.user { justify-content: flex-end; }
.row.agent .yes-logo { flex: none; width: 26px; color: var(--ink); margin-bottom: 4px; }

.bubble {
  max-width: 84%;
  padding: 9px 13px;
  line-height: 1.45;
  font-size: 13.5px;
  background: #fff;
  color: var(--ink);
  border-radius: 14px 14px 14px 4px;
}
.bubble p { margin: 0; }
.row.user .bubble {
  background: var(--teal-dark);
  color: #fff;
  border-radius: 14px 14px 4px 14px;
}

.row.system {
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-align: center;
  font-size: 12.5px;
  color: var(--muted);
  padding: 2px 20px;
}

/* ---------------------------------------------------------------- composer --- */

#composer {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px 14px;
  background: var(--page-bg);
}

.pill {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 6px 6px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
}
#composer.live .pill { border: 1.5px solid var(--teal); }

#text-input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: none;
  font: inherit;
  font-size: 14px;
  color: var(--ink);
}
#text-input::placeholder { color: var(--disabled); }

.send {
  flex: none;
  display: grid; place-items: center;
  width: 36px; height: 36px;
  border: 0;
  border-radius: 50%;
  background: var(--yellow);
  color: #000;
  cursor: pointer;
}
.send svg { width: 15px; height: 15px; fill: currentColor; stroke: none; }

.call {
  flex: none;
  display: grid; place-items: center;
  width: 36px; height: 36px;
  border: 0;
  border-radius: 50%;
  background: var(--danger);
  color: #fff;
  cursor: pointer;
}
.call svg { width: 16px; height: 16px; fill: currentColor; stroke: none; }
.call[data-on="true"] { background: var(--section); color: var(--teal-dark); }

/* The live indicator: a five-bar equaliser, MiniWaveform.swift. */
.live-row { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--muted); }
.wave { display: flex; align-items: center; gap: 2.5px; height: 16px; }
.wave i {
  width: 3px;
  border-radius: 999px;
  background: var(--teal);
  animation: wave 1s ease-in-out infinite alternate;
}
.wave i:nth-child(1) { height: 8px;  animation-delay: 0s; }
.wave i:nth-child(2) { height: 14px; animation-delay: 0.12s; }
.wave i:nth-child(3) { height: 10px; animation-delay: 0.24s; }
.wave i:nth-child(4) { height: 16px; animation-delay: 0.36s; }
.wave i:nth-child(5) { height: 7px;  animation-delay: 0.48s; }
@keyframes wave { from { transform: scaleY(0.25); } to { transform: scaleY(1); } }
.wave.idle i { animation: none; transform: scaleY(0.25); }

@media (prefers-reduced-motion: reduce) {
  .wave i { animation: none; }
  .hero-slide, .sheet, .drawer, .toggle::after, button { transition: none; }
}

/* ------------------------------------------------------------------ toast --- */

.toast {
  position: absolute;
  left: 16px; right: 16px;
  bottom: calc(58px + 14px);
  z-index: 9;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border-radius: var(--r-lg);
  background: var(--teal-dark);
  color: #fff;
  font-size: 13.5px;
  font-weight: 600;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.18);
  animation: toast-in 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.toast i {
  flex: none;
  display: grid; place-items: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--yellow);
  color: #000;
}
.toast svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
@keyframes toast-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* ----------------------------------------------------------------- tabbar --- */

/* TabBar.swift: five items, the centre one the "yes" mark rather than a glyph. */
#tabbar {
  display: flex;
  align-items: flex-start;
  height: calc(58px + 12px);
  padding: 8px 8px 0;
  background: #fff;
  border-top: 1px solid var(--line);
}
#tabbar button {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 4px 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--tab-idle);
  cursor: pointer;
}
#tabbar .glyph { display: grid; place-items: center; height: 21px; }
#tabbar svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
/* Black rather than brand yellow, and larger than the 21px symbols so the
   wordmark reads at size. Its tail hangs below the baseline, so it is lifted
   clear of the label rather than sized down until it stops overlapping. */
#tabbar .yes-logo { width: 34px; color: #000; transform: translateY(-4px); }
#tabbar span { font-size: 10.5px; font-weight: 600; }
#tabbar button.active { color: var(--teal-dark); }
#tabbar button.active svg { stroke-width: 2.4; }
#tabbar button.active span { font-weight: 700; }

/* ----------------------------------------------------------------- drawer --- */

.drawer-scrim { position: absolute; inset: 0; z-index: 5; background: rgba(0, 30, 35, 0.45); }

.drawer {
  position: absolute;
  inset: 0 auto 0 0;
  z-index: 6;
  width: 78%;
  display: flex;
  flex-direction: column;
  background: #fff;
  transform: translateX(-100%);
  transition: transform 0.22s ease;
}
.drawer.open { transform: translateX(0); }

.drawer-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 46px 18px 18px;
  background: var(--teal-dark);
  color: #fff;
}
.drawer-head strong { display: block; font-family: var(--font-head); font-size: 16px; font-weight: 800; }
.drawer-head span { font-size: 12px; font-weight: 600; color: var(--cyan); }

.drawer-links { flex: 1; overflow-y: auto; padding: 10px; scrollbar-width: none; }
.drawer-links::-webkit-scrollbar { display: none; }
.drawer-links button {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 11px 12px;
  border: 0;
  border-radius: 10px;
  background: none;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.drawer-links svg { flex: none; width: 17px; height: 17px; fill: none; stroke: var(--muted); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.drawer-links button.active { background: var(--section); font-weight: 700; color: var(--teal-dark); }
.drawer-links button.active svg { stroke: var(--teal); }
.drawer-sep { height: 1px; margin: 8px; background: var(--line); }

.drawer-foot { padding: 6px 10px 8px; border-top: 1px solid var(--line); }
.drawer-foot button {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 11px 12px;
  border: 0;
  background: none;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  color: var(--danger);
  text-align: left;
  cursor: pointer;
}
.drawer-foot svg { flex: none; width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* TypingDots — the on-device assistant thinking. */
.typing { display: flex; gap: 4px; padding: 2px 0; }
.typing i {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--disabled);
  animation: typing 1s ease-in-out infinite;
}
.typing i:nth-child(2) { animation-delay: 0.18s; }
.typing i:nth-child(3) { animation-delay: 0.36s; }
@keyframes typing {
  0%, 100% { transform: translateY(0); opacity: 0.35; }
  50% { transform: translateY(-3px); opacity: 1; }
}

/* Camera / photo attach, sitting inside the composer pill. */
.attach {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: var(--muted);
  cursor: pointer;
}
.attach:hover { color: var(--teal); background: var(--page-bg); }
.attach svg {
  width: 19px; height: 19px;
  fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}

/* An attached photo in the transcript: the picture is the bubble. Capped on
   both axes so a portrait phone photo doesn't take over the thread. */
.row .photo {
  display: block;
  max-width: 62%;
  max-height: 260px;
  width: auto;
  height: auto;
  border-radius: 14px 14px 4px 14px;
  border: 1px solid var(--line);
}

/* A tool result that needs more than a spoken line — an expense wanting its
   receipt. Sits in the transcript on the agent's side. */
.tool-card {
  align-self: flex-start;
  width: 84%;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 14px 14px 14px 4px;
  background: #fff;
}
.tool-card-head {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--teal);
}
.tool-card strong { display: block; margin-top: 5px; font-size: 15px; font-weight: 700; color: var(--ink); }
.tool-card span { display: block; font-size: 12.5px; color: var(--muted); line-height: 1.35; }
.tool-card .cta { margin-top: 12px; display: flex; align-items: center; justify-content: center; gap: 8px; }
.tool-card .cta svg {
  width: 16px; height: 16px;
  fill: none; stroke: currentColor;
  stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
}
.tool-card .attached {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 8px 12px;
  border-radius: var(--r-sm);
  background: var(--success-bg);
  color: var(--success);
  font-size: 13px;
  font-weight: 700;
}
.tool-card .attached svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

/* Yes/no under a question the app asked itself, with no call up to answer into. */
.offer { display: flex; gap: 8px; align-self: flex-start; width: 84%; }
.offer .cta, .offer .ghost { margin: 0; flex: 1; }

/* Message search, sitting under the channel filters. */
.searchbar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
}
.searchbar svg {
  flex: none;
  width: 15px; height: 15px;
  fill: none; stroke: var(--muted);
  stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
}
.searchbar input {
  flex: 1;
  min-width: 0;
  padding: 9px 0;
  border: 0;
  outline: none;
  background: none;
  font: inherit;
  font-size: 13.5px;
  color: var(--ink);
}
.searchbar input::placeholder { color: var(--disabled); }
.searchbar input::-webkit-search-cancel-button { -webkit-appearance: none; }
.searchbar:focus-within { border-color: var(--teal); }