:root {
  --ground: #1C1D20;
  --said: #26282C;
  --line: #35383D;
  --fog: #E8E9EB;
  --ash: #A3A7AE;
  --orange: #FF7A1A;
  --sky: #9FB4D4;
  --navy: #141E32;
  --good: #3EE08A;
  --warn: #FFD23F;
  --bad: #FF4D5E;
  --voice: Sora, 'DM Sans', system-ui, sans-serif;
  --body: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --col: 640px;
  --ease-out-soft: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-pop: cubic-bezier(0.34, 1.4, 0.64, 1);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overscroll-behavior: none; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--ground);
  color: var(--fog);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

a { color: var(--fog); text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; border-radius: 8px; }

.top, main {
  width: 100%;
  max-width: calc(var(--col) + 36px);
  margin-left: auto;
  margin-right: auto;
}
.ask-inner, .ask-note {
  width: 100%;
  max-width: var(--col);
  margin-left: auto;
  margin-right: auto;
}

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

.top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px max(18px, env(safe-area-inset-right)) 8px max(18px, env(safe-area-inset-left));
}
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; min-height: 44px; }
.brand-text { display: flex; align-items: baseline; gap: 8px; }
.brand-name { font-family: var(--voice); font-weight: 700; font-size: 23px; letter-spacing: -0.03em; line-height: 1; }
.brand-by { font-size: 13px; color: var(--ash); text-decoration: none; margin: 0 auto 0 8px; padding: 14px 6px 12px 0; align-self: center; transform: translateY(3px); border-radius: 6px; }
.brand-by:hover .wm, .brand-by:focus-visible .wm { opacity: 1; }
.top-link { font-size: 14px; color: var(--ash); text-decoration: none; padding: 12px 0; }
.top-link:hover { color: var(--fog); }

.avatar {
  flex: none; width: 34px; height: 34px; border-radius: 11px; background: var(--orange);
  display: flex; align-items: center; justify-content: center;
}
.avatar svg { width: 21px; height: 23px; display: block; }
.avatar-lg { width: 40px; height: 40px; border-radius: 13px; }
.avatar-lg svg { width: 25px; height: 27px; }

.top-links { display: inline-flex; align-items: center; gap: 16px; }
.top-btn {
  font: inherit; font-size: 14px; font-weight: 600; color: var(--fog); background: none; cursor: pointer;
  border: 1px solid var(--line); border-radius: 999px; padding: 8px 14px; min-height: 40px; max-width: 9.5em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: border-color 0.18s ease, background-color 0.18s ease;
}
.top-btn:hover { border-color: var(--orange); background: rgba(255, 122, 26, 0.07); }
@media (max-width: 480px) { .top.has-acct #news { display: none; } }
/* Google draws its button in two steps. Until its own styles arrive the raw logo would fill the bubble, so the slot
   is held to the button's final size and the logo to icon size. */
.gsi { height: 44px; max-width: 100%; margin-top: 4px; overflow: hidden; }
.gsi svg { width: 18px; height: 18px; }
.dot-good { background: var(--good); }
.ask-note a { color: inherit; }

/* ---------- plain pages ---------- */
.page { padding-top: 22px; padding-bottom: 60px; }
.page h1 { font-family: var(--voice); font-weight: 700; font-size: 30px; line-height: 1.15; letter-spacing: -0.03em; margin: 0 0 6px; }
.page h2 { font-family: var(--voice); font-weight: 600; font-size: 19px; letter-spacing: -0.02em; margin: 32px 0 8px; }
.page p, .page li { color: #C9CCD1; max-width: 62ch; }
.page p { margin: 0 0 12px; }
.page ul { margin: 0 0 12px; padding-left: 20px; }
.page li { margin-bottom: 6px; }
.page a { color: var(--sky); }

/* ---------- thread ---------- */

main { flex: 1; padding: 14px max(18px, env(safe-area-inset-right)) 28px max(18px, env(safe-area-inset-left)); }

.thread { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }

.msg { display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 10px; align-items: start; }
.msg + .msg .avatar { visibility: hidden; }
.msg .avatar { grid-column: 1; }
.msg-body { grid-column: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; }


.said {
  max-width: 100%;
  background: var(--said); border-radius: 6px 20px 20px 20px; padding: 14px 16px;
}
.said p { margin: 0; }
.said a { color: var(--sky); overflow-wrap: anywhere; }
.said p + p { margin-top: 8px; }

.voice { font-family: var(--voice); font-weight: 600; font-size: 19px; line-height: 1.3; letter-spacing: -0.02em; }
.quiet { color: var(--ash); font-size: 14px; }

.me { display: flex; justify-content: flex-end; margin: 6px 0 2px; }
.me-said {
  max-width: 80%; background: var(--orange); color: var(--navy);
  font-family: var(--voice); font-weight: 600; font-size: 16px; letter-spacing: -0.01em;
  border-radius: 20px 20px 6px 20px; padding: 10px 16px; overflow-wrap: anywhere;
}

.earlier { display: flex; align-items: center; gap: 12px; margin: 10px 0 6px; color: #8E9299; font-size: 13px; }
.earlier::before, .earlier::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.earlier button { font: inherit; color: var(--ash); background: none; border: 0; padding: 6px 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.row-flight { align-items: center; }
.row-flight .airline { width: 34px; height: 34px; border-radius: 10px; }
.row-flight .airline img { width: 26px; height: 26px; }
.reply-more { color: var(--ash); }

.ednote { margin-top: 14px; padding: 12px 14px; border-radius: 14px; background: rgba(255, 122, 26, 0.09); border-left: 3px solid var(--orange); }
.said > .ednote { margin-bottom: 4px; }
.ednote-label { display: block; font-family: var(--voice); font-weight: 600; font-size: 13px; color: var(--orange); margin-bottom: 4px; }
.ednote p { margin: 0; font-size: 15px; line-height: 1.45; }
.ednote-by { display: block; margin-top: 6px; font-size: 13px; color: var(--ash); }
.promises li { display: flex; gap: 10px; align-items: baseline; }
.promises strong { flex: none; width: 2.2em; font-family: var(--voice); font-weight: 600; font-size: 14px; }
.promises .yes strong { color: var(--good); }
.promises .no strong { color: var(--bad); }
.promises .no { color: var(--ash); }

.more-btn { margin-top: 12px; font: inherit; font-size: 14px; font-weight: 600; color: var(--sky); background: none; border: 0; padding: 6px 0; min-height: 32px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.more-box > .points, .more-box > .facts { margin-top: 8px; }
.more-box > .facts { border-top: 0; padding-top: 0; }
.reply-link { display: inline-flex; align-items: center; text-decoration: none; color: var(--sky); border-color: rgba(159, 180, 212, 0.4); }
.reply-link::after { content: ''; width: 7px; height: 7px; margin-left: 8px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg) translateY(1px); }
.reply-link:hover { border-color: var(--sky); background: rgba(159, 180, 212, 0.08); }

.intro .points { margin-top: 12px; padding-top: 0; border-top: 0; }
.intro .quiet { margin-top: 12px; }

/* ---------- answers ---------- */

.answer { width: 100%; padding: 16px; }
.answer-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; min-height: 40px; }
.answer-code { margin: 0; font-family: var(--voice); font-weight: 700; font-size: 24px; line-height: 1; letter-spacing: -0.03em; }
.msg, .me { scroll-margin-bottom: 140px; }
.answer-code.is-long { font-size: 20px; line-height: 1.15; }
.answer-sub { margin: 8px 0 0; line-height: 1.3; font-size: 14px; color: var(--ash); }
.said.answer .voice { margin-top: 14px; }
.said.answer .answer-meta { margin-top: 6px; }

/* status labels: a word in a tinted capsule, with three bars for risk or a dot for state */
.answer-head .answer-code { flex: 1; white-space: nowrap; }
.answer-head .answer-code.is-long { white-space: normal; min-width: 0; }
.pill {
  flex: none; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  font-size: 13px; font-weight: 600; line-height: 1; padding: 7px 11px; border-radius: 999px;
  color: var(--tone); background: var(--tint);
}
.said > .pill { margin-bottom: 12px; }
.pill-good { --tone: var(--good); --tint: rgba(62, 224, 138, 0.13); }
.pill-warn { --tone: var(--warn); --tint: rgba(255, 210, 63, 0.13); }
.pill-bad { --tone: var(--bad); --tint: rgba(255, 77, 94, 0.15); }
.pill-calm { --tone: var(--sky); --tint: rgba(159, 180, 212, 0.13); }
.pill-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--tone); }
.pill-bars { display: inline-flex; gap: 3px; }
.pill-bars i { width: 11px; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.16); }
.pill-bars-low i:nth-child(1), .pill-bars-medium i:nth-child(-n+2), .pill-bars-high i { background: var(--tone); }

.dot { flex: none; align-self: flex-start; width: 9px; height: 9px; border-radius: 50%; margin: 6px -2px 0 0; }
.dot-bad { background: var(--bad); }
.dot-warn { background: var(--warn); }
.dot-maybe { border: 2px solid var(--warn); }

.airline {
  flex: none; width: 40px; height: 40px; border-radius: 12px; background: #fff; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.airline img { width: 32px; height: 32px; object-fit: contain; display: block; }
.airline-code { background: var(--line); color: var(--fog); font-family: var(--voice); font-weight: 700; font-size: 14px; letter-spacing: -0.02em; }

.points { list-style: none; margin: 14px 0 0; padding: 14px 0 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; }
.points li { font-size: 15px; line-height: 1.45; }

.answer-label { margin: 16px 0 0; font-family: var(--voice); font-weight: 600; font-size: 14px; letter-spacing: -0.01em; color: var(--sky); }
.points.steps { margin-top: 8px; padding-top: 0; border-top: 0; }
.points.steps li { position: relative; padding-left: 18px; }
.points.steps li::before { content: ''; position: absolute; left: 2px; top: 0.55em; width: 6px; height: 6px; border-radius: 50%; background: var(--orange); }
.points li p { margin: 0; }
.points li a { color: var(--sky); overflow-wrap: anywhere; }

.facts { margin: 14px 0 0; padding: 14px 0 0; border-top: 1px solid var(--line); display: grid; gap: 8px; }
.fact { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 10px; font-size: 14px; }
.fact dt { color: var(--ash); }
.fact dd { margin: 0; }

.said.answer .confirm { margin-top: 14px; }

/* tappable rows and quick replies */
.rows { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; }
.rows li + li { border-top: 1px solid var(--line); }
.row {
  width: 100%; display: flex; align-items: baseline; gap: 12px; text-align: left;
  background: none; border: 0; padding: 12px 0; min-height: 44px; color: inherit; font: inherit; cursor: pointer;
}
.row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.row-name { font-family: var(--voice); font-weight: 600; font-size: 16px; letter-spacing: -0.01em; color: var(--fog); }
.row-text { font-size: 15px; line-height: 1.4; color: #C9CCD1; }
.row:hover .row-name { text-decoration: underline; text-underline-offset: 3px; }
.said .rows + .quiet { margin-top: 4px; }

.replies { display: flex; flex-wrap: wrap; gap: 8px; }
.reply {
  background: none; border: 1px solid var(--line); color: var(--fog); border-radius: 999px;
  font: inherit; font-size: 14px; padding: 9px 14px; min-height: 40px; cursor: pointer; text-align: left; line-height: 1.3;
}
.reply { transition: border-color 0.18s ease, background-color 0.18s ease, transform 0.18s var(--ease-out-soft); }
.reply:hover { border-color: var(--orange); background: rgba(255, 122, 26, 0.07); }
.reply:active { transform: scale(0.96); }

.dots { display: inline-flex; gap: 5px; padding: 6px 2px; }
.dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--ash); animation: wave 1.2s infinite ease-in-out; }
.dots i:nth-child(2) { animation-delay: 0.14s; }
.dots i:nth-child(3) { animation-delay: 0.28s; }
@keyframes wave { 0%, 60%, 100% { opacity: 0.3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-4px); } }

.plain { color: var(--ash); }

/* ---------- ask bar ---------- */

.ask {
  position: sticky; bottom: 0; z-index: 2;
  background: linear-gradient(to bottom, rgba(28, 29, 32, 0), var(--ground) 22px);
  padding: 22px max(18px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
}
.ask-inner {
  display: flex; align-items: center; gap: 8px;
  background: var(--said); border: 1px solid var(--line); border-radius: 999px; padding: 6px 6px 6px 20px;
}
.ask-inner { transition: border-color 0.2s ease, box-shadow 0.25s ease; }
.ask-inner:focus-within { border-color: var(--orange); box-shadow: 0 0 0 4px rgba(255, 122, 26, 0.14); }
.ask button { transition: transform 0.18s var(--ease-pop), opacity 0.2s ease; }
.ask button:active { transform: scale(0.9); }
.row { transition: transform 0.18s var(--ease-out-soft); }
.row:active { transform: scale(0.985); }
.num { font-variant-numeric: tabular-nums; }
.airline img { opacity: 0; transition: opacity 0.35s ease; }
.airline img.is-loaded { opacity: 1; }
.ask input {
  flex: 1; min-width: 0; height: 44px; border: 0; background: transparent; color: var(--fog);
  font: inherit; font-size: 17px; outline: none;
}
.ask input::placeholder { color: #8E9299; opacity: 1; }
.ask button {
  flex: none; width: 44px; height: 44px; border: 0; border-radius: 50%; cursor: pointer;
  background: var(--orange); color: var(--navy); display: flex; align-items: center; justify-content: center;
}
.ask button svg { width: 22px; height: 22px; }
.ask button[disabled] { opacity: 0.5; cursor: default; }
.ask-note { margin-top: 8px; margin-bottom: 0; font-size: 12px; line-height: 1.4; color: #8E9299; text-align: center; }

.follow .said { margin-top: 18px; }
.follow .said p { margin-bottom: 0; max-width: none; }
.follow .said .voice { color: var(--fog); margin-top: 14px; }
.follow .said .answer-sub { margin-top: 8px; color: var(--ash); }
.follow .said .answer-meta { margin-top: 6px; color: var(--ash); }
.follow .said .confirm { margin-top: 14px; color: var(--ash); }
.follow .points { padding-left: 0; margin: 14px 0 0; }
.follow .points li { margin: 0; color: var(--fog); max-width: none; }
.follow-cta { margin: 22px 0 14px; }
.follow-btn { display: inline-block; background: var(--orange); color: var(--navy) !important; font-family: var(--voice); font-weight: 600; font-size: 16px; text-decoration: none; padding: 13px 22px; border-radius: 999px; }
.top .avatar img { width: 100%; height: 100%; display: block; border-radius: inherit; }
.stats { max-width: 900px; }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.stats td:first-child { white-space: nowrap; }
.tile { background: var(--said); border-radius: 18px; padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; }
.tile-num { font-family: var(--voice); font-weight: 700; font-size: 28px; letter-spacing: -0.03em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.tile-label { font-size: 14px; color: var(--ash); }
.table-wrap { overflow-x: auto; background: var(--said); border-radius: 18px; padding: 6px 18px; }
.stats table { width: 100%; border-collapse: collapse; font-size: 15px; }
.stats th { text-align: left; font-weight: 600; color: var(--ash); font-size: 13px; padding: 10px 12px 10px 0; white-space: nowrap; }
.stats td { padding: 10px 12px 10px 0; border-top: 1px solid var(--line); }
.stats th.num, .stats td.num { text-align: right; padding-right: 0; padding-left: 12px; font-variant-numeric: tabular-nums; }

@media (min-width: 700px) {
  .top { padding-top: 26px; }
  main { padding-top: 22px; }
  .voice { font-size: 20px; }
  .said.answer { padding: 20px; }
}

/* ---------- motion ----------
   New messages rise and fade in, their contents follow in a short stagger, and status marks settle last.
   Everything here only plays once, on content the traveler just asked for. */

@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop { 0% { opacity: 0; transform: scale(0.6); } 100% { opacity: 1; transform: scale(1); } }
@keyframes slide-in { from { opacity: 0; transform: translateX(18px) scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes ping { 0% { box-shadow: 0 0 0 0 var(--ring); } 70%, 100% { box-shadow: 0 0 0 7px transparent; } }

.msg.is-new .avatar { animation: pop 0.45s var(--ease-pop) both; }
.me.is-new .me-said { animation: slide-in 0.4s var(--ease-out-soft) both; transform-origin: 100% 100%; }

.fresh > * { animation: rise 0.5s var(--ease-out-soft) both; }
.fresh > .replies { animation: none; }
.fresh > .replies .reply { animation: rise 0.45s var(--ease-out-soft) both; }
.fresh > .replies .reply:nth-child(1) { animation-delay: 0.42s; }
.fresh > .replies .reply:nth-child(2) { animation-delay: 0.48s; }
.fresh > .replies .reply:nth-child(3) { animation-delay: 0.54s; }
.fresh > .replies .reply:nth-child(4) { animation-delay: 0.6s; }
.fresh > .replies .reply:nth-child(n+5) { animation-delay: 0.66s; }

.fresh .answer > *, .fresh .said > .pill, .fresh .said > .voice, .fresh .said > .rows, .fresh .said > .quiet { animation: rise 0.5s var(--ease-out-soft) both; }
.fresh .said > *:nth-child(1) { animation-delay: 0.06s; }
.fresh .said > *:nth-child(2) { animation-delay: 0.12s; }
.fresh .said > *:nth-child(3) { animation-delay: 0.18s; }
.fresh .said > *:nth-child(4) { animation-delay: 0.24s; }
.fresh .said > *:nth-child(5) { animation-delay: 0.3s; }
.fresh .said > *:nth-child(6) { animation-delay: 0.36s; }
.fresh .said > *:nth-child(n+7) { animation-delay: 0.42s; }

.fresh .points li, .fresh .rows li, .fresh .fact { animation: rise 0.45s var(--ease-out-soft) both; }
.fresh .points li:nth-child(1), .fresh .rows li:nth-child(1), .fresh .fact:nth-child(1) { animation-delay: 0.3s; }
.fresh .points li:nth-child(2), .fresh .rows li:nth-child(2), .fresh .fact:nth-child(2) { animation-delay: 0.37s; }
.fresh .points li:nth-child(3), .fresh .rows li:nth-child(3), .fresh .fact:nth-child(3) { animation-delay: 0.44s; }
.fresh .points li:nth-child(4), .fresh .rows li:nth-child(4), .fresh .fact:nth-child(4) { animation-delay: 0.51s; }
.fresh .points li:nth-child(n+5), .fresh .rows li:nth-child(n+5), .fresh .fact:nth-child(n+5) { animation-delay: 0.58s; }

.fresh .answer-head .pill, .fresh .airline { animation: pop 0.5s var(--ease-pop) 0.2s both; }
.fresh .pill-bars i { transform-origin: 0 50%; animation: grow 0.4s var(--ease-out-soft) both; }
.fresh .pill-bars i:nth-child(1) { animation-delay: 0.45s; }
.fresh .pill-bars i:nth-child(2) { animation-delay: 0.57s; }
.fresh .pill-bars i:nth-child(3) { animation-delay: 0.69s; }
.fresh .dot { animation: pop 0.4s var(--ease-pop) 0.4s both; }

/* A slow pulse marks the things that are going wrong right now. */
.pill-bad .pill-dot, .dot-bad { --ring: rgba(255, 77, 94, 0.55); animation: ping 2.2s ease-out 1s infinite; }
.fresh .dot-bad { animation: pop 0.4s var(--ease-pop) 0.4s both, ping 2.2s ease-out 1.2s infinite; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .dots i { opacity: 0.7; }
  .airline img { opacity: 1; }
}

/* v1.3: flight phases, track record, desk scripts and claim drafts */
.now { margin-top: 10px; font-size: 15px; line-height: 1.45; color: var(--fog); }
.now strong { font-family: var(--voice); font-weight: 600; color: var(--sky); }
.record { display: flex; gap: 10px; align-items: baseline; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 14px; color: var(--ash); }
.record .dot { align-self: auto; margin: 0; transform: translateY(-1px); }
.flightbar { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.fb-code { font-family: var(--voice); font-weight: 600; font-size: 13px; letter-spacing: 0.02em; color: var(--ash); }
.fb-track { position: relative; flex: 1; height: 4px; border-radius: 2px; background: var(--line); }
.fb-track i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 2px; background: var(--sky); transition: width 1.1s var(--ease-out-soft); }
.fb-track i::after { content: ''; position: absolute; right: -5px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 3px var(--said); }
.points.says { gap: 12px; }
.points.says li { padding-left: 14px; border-left: 3px solid var(--orange); font-size: 16px; line-height: 1.45; color: var(--fog); }
.draft { margin-top: 14px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--ground); }
.draft-title { font-family: var(--voice); font-weight: 600; font-size: 15px; line-height: 1.35; }
.said .draft-text { margin-top: 10px; font-size: 14px; line-height: 1.55; color: var(--fog); white-space: pre-wrap; overflow-wrap: anywhere; }
.said.answer .draft + .replies { margin-top: 12px; }
@media (prefers-reduced-motion: reduce) { .fb-track i { transition: none; } }

/* v1.4: the small Milo is a close-up, chest up, filling his tile */
.avatar { overflow: hidden; }
.avatar svg, .avatar-lg svg { width: 100%; height: 100%; }

/* v2.0: the promise leads the opening message */
.intro .hi { font-family: var(--voice); font-weight: 600; font-size: 15px; color: var(--sky); }
.intro .slogan { display: block; margin: 8px 0 0; font-family: var(--voice); font-weight: 700; font-size: 27px; line-height: 1.16; letter-spacing: -0.03em; text-align: left; }
.intro .slogan span { display: block; }
.intro .slogan .me { margin-top: 6px; }
.intro .slogan .them { color: var(--ash); }
.intro .slogan .me { color: #fff; }
.intro .points { margin-top: 18px; }
@media (min-width: 640px) { .intro .slogan { font-size: 32px; } }
.intro .slogan .them { text-wrap: balance; }


/* v2.3: small motion with a purpose. All of it switches off for people who ask their device for less motion. */
.avatar { position: relative; cursor: pointer; }
.m-eye { transform-box: fill-box; transform-origin: 50% 50%; }
.m-cap { transform-box: fill-box; transform-origin: 18% 92%; }
/* 1. Milo blinks now and then (only the newest Milo and the one in the header, so the page stays calm). */
.msg:last-child .m-eye, .brand .m-eye { animation: m-blink 5.6s infinite; }
.brand .m-eye { animation-delay: 2.1s; }
/*    He tilts his head while he looks something up, then hops when the answer lands. */
.msg.is-thinking .avatar svg { transform-origin: 50% 88%; animation: m-tilt 0.9s ease-in-out infinite alternate; }
.msg.landed .avatar { animation: m-hop 0.52s var(--ease-pop); }
/* 7. Tap or hover him and he tips his cap. */
.avatar.tip .m-cap, .brand:hover .avatar .m-cap { animation: m-tip 0.85s var(--ease-out-soft); }
@keyframes m-blink { 0%, 94%, 100% { transform: scaleY(1); } 96.5% { transform: scaleY(0.12); } }
@keyframes m-tilt { from { transform: rotate(-7deg); } to { transform: rotate(6deg); } }
@keyframes m-hop { 0% { transform: translateY(0); } 38% { transform: translateY(-6px); } 70% { transform: translateY(1px); } 100% { transform: translateY(0); } }
@keyframes m-tip { 0%, 100% { transform: rotate(0); } 35%, 60% { transform: rotate(-17deg) translateY(-7px); } }
/* 2. While he thinks: a small plane drawing a contrail. */
.contrail { position: relative; display: block; width: 76px; height: 20px; margin: 2px 0; }
.contrail i { position: absolute; left: 0; top: 9px; width: 60px; height: 2px; border-radius: 1px; background: linear-gradient(to right, rgba(163, 167, 174, 0), var(--ash)); transform-origin: 0 50%; animation: trail 1.5s var(--ease-out-soft) infinite; }
.contrail svg { position: absolute; left: 0; top: 2px; width: 16px; height: 16px; fill: var(--sky); animation: fly 1.5s var(--ease-out-soft) infinite; }
@keyframes fly { 0% { transform: translateX(0); opacity: 0; } 12% { opacity: 1; } 78% { transform: translateX(60px); opacity: 1; } 100% { transform: translateX(60px); opacity: 0; } }
@keyframes trail { 0% { transform: scaleX(0); opacity: 0; } 12% { opacity: 1; } 78% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }
/* 3. The promise lands in two beats on a first visit. */
.fresh .intro .hi { animation: fade 0.5s var(--ease-out-soft) 0.1s both; }
.fresh .intro .slogan .them { animation: rise 0.6s var(--ease-out-soft) 0.35s both; }
.fresh .intro .slogan .me { animation: rise 0.6s var(--ease-out-soft) 1.25s both; }
.fresh .intro .points, .fresh .intro .quiet { animation: fade 0.7s var(--ease-out-soft) 2s both; }
/* 4. On a flight in the air, Milo rides the progress line. */
.fb-track { margin: 9px 0; }
.fb-track i::after { content: none; }
.fb-milo { position: absolute; right: -11px; top: 50%; width: 22px; height: 22px; margin-top: -11px; border-radius: 7px; background: var(--orange); overflow: hidden; box-shadow: 0 0 0 3px var(--said); animation: m-glide 2.6s ease-in-out infinite alternate; }
.fb-milo svg { display: block; width: 100%; height: 100%; }
@keyframes m-glide { from { transform: translateY(-1.5px) rotate(-3deg); } to { transform: translateY(1.5px) rotate(2deg); } }
@media (prefers-reduced-motion: reduce) {
  .m-eye, .m-cap, .avatar, .avatar svg, .fb-milo, .contrail i, .contrail svg, .intro * { animation: none !important; }
  .contrail i { transform: none; } .contrail svg { transform: translateX(60px); }
}
.flightbar { margin: 16px 0 14px; }

/* v2.5: a cleaner flight list. One line per flight, the time on the right. */
.rows-slim { margin-top: 10px; }
.row-slim { gap: 12px; padding-top: 9px; padding-bottom: 9px; }
.row-slim .airline { width: 28px; height: 28px; border-radius: 8px; }
.row-slim .airline img { width: 21px; height: 21px; }
.row-slim .row-name { flex: 1; min-width: 0; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row-when { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.row-time { font-family: var(--voice); font-weight: 600; font-size: 15px; color: var(--fog); font-variant-numeric: tabular-nums; }
.row-tag { font-size: 12px; color: var(--ash); }
.row-tag.is-bad { color: var(--bad); }

/* v2.6: the head-to-head forecast. The airline's time against Milo's. */
.versus { margin-top: 14px; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.vs-row { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "who time" "note time"; align-items: center; gap: 1px 14px; padding: 11px 14px; color: var(--ash); }
.vs-row + .vs-row { border-top: 1px solid var(--line); }
.vs-who { grid-area: who; font-family: var(--voice); font-weight: 600; font-size: 14px; color: var(--fog); }
.vs-note { grid-area: note; font-size: 13px; line-height: 1.35; }
.vs-time { grid-area: time; font-family: var(--voice); font-weight: 600; font-size: 16px; font-variant-numeric: tabular-nums; color: var(--fog); white-space: nowrap; }
.vs-row.is-milo { background: rgba(255, 122, 26, 0.09); color: var(--fog); }
.vs-row.is-milo .vs-who { color: var(--orange); }
.vs-row.is-milo .vs-time { color: #fff; font-size: 18px; }
.fresh .versus { animation: rise 0.5s var(--ease-out-soft) 0.35s both; }
.fresh .vs-row.is-milo { animation: fade 0.6s var(--ease-out-soft) 1s both; }
.versus + .now { margin-top: 16px; }

/* v2.7: Milo's read, the AI's second opinion on a flight. */
.read { margin-top: 14px; padding: 12px 14px; border-left: 3px solid var(--orange); border-radius: 4px 12px 12px 4px; background: rgba(255, 122, 26, 0.07); animation: rise 0.5s var(--ease-out-soft) both; }
.said .read-text { font-size: 15px; line-height: 1.45; color: var(--fog); }
.read-text strong { font-family: var(--voice); font-weight: 600; color: var(--orange); }
.said .read-watch { margin-top: 6px; font-size: 13px; line-height: 1.4; color: var(--ash); }
@media (prefers-reduced-motion: reduce) { .read { animation: none; } }

/* The build number, so it is always clear which version is live. */
.ver { white-space: nowrap; opacity: 0.75; }

/* About page */
.about .lede { font-family: var(--voice); font-weight: 600; font-size: 19px; line-height: 1.4; letter-spacing: -0.015em; color: var(--fog); margin: 18px 0 8px; max-width: 46ch; }
.about .specs { list-style: none; padding-left: 0; }
.about .specs li { padding: 10px 0; margin: 0; border-top: 1px solid var(--line); }
.about .specs li:last-child { border-bottom: 1px solid var(--line); }
.about li strong { color: var(--fog); font-weight: 600; }

/* Contrail's wordmark, sized to sit on the text baseline like a word. */
.wm { height: 1.02em; width: auto; vertical-align: -0.17em; display: inline-block; }
.brand-by .wm { opacity: 0.82; margin-left: 1px; }
.top-link .wm { opacity: 0.9; margin-right: 2px; }
.reply-link .wm { margin: 0 1px 0 5px; }
.news { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); display: grid; gap: 8px; }
.news-from { margin: 0; font-size: 13px; color: var(--ash); }
.news-from .wm { opacity: 0.9; margin-left: 2px; }
.news-story { color: var(--sky); font-size: 15px; line-height: 1.35; text-decoration: none; }
.news-story:hover, .news-story:focus-visible { text-decoration: underline; }

/* v3.7: delay odds. One number that moves, a scale with a tick for the typical flight, and what is moving it. */
.odds { margin-top: 16px; padding: 16px 16px 14px; border: 1px solid var(--line); border-radius: 16px; background: linear-gradient(180deg, rgba(159, 180, 212, 0.06), rgba(159, 180, 212, 0) 70%); }
.odds-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.odds-name { font-family: var(--voice); font-weight: 600; font-size: 14px; color: var(--sky); letter-spacing: -0.01em; }
.odds-chip { font-size: 13px; font-weight: 600; padding: 4px 10px; border-radius: 999px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.odds-chip.is-up { color: var(--bad); background: rgba(255, 77, 94, 0.12); }
.odds-chip.is-down { color: var(--good); background: rgba(62, 224, 138, 0.12); }
.odds-arrow { font-size: 10px; vertical-align: 1px; }
.odds-main { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-top: 6px; }
.odds-num { margin: 0; font-family: var(--voice); font-weight: 700; font-size: 60px; line-height: 0.95; letter-spacing: -0.045em; font-variant-numeric: tabular-nums; color: var(--fog); }
.odds-pct { font-size: 0.5em; font-weight: 600; letter-spacing: -0.02em; margin-left: 2px; color: var(--ash); }
.odds-spark { flex: none; margin-bottom: 6px; overflow: visible; }
.odds-line { stroke: var(--sky); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.odds-line { stroke-dasharray: 1; stroke-dashoffset: 0; animation: odds-draw 1.1s ease-out both; }
.odds-area { opacity: 0; animation: odds-rise 0.6s ease-out 0.7s forwards; }
.odds-fill-top { stop-color: var(--sky); stop-opacity: 0.28; }
.odds-fill-end { stop-color: var(--sky); stop-opacity: 0; }
.odds-ping { fill: var(--orange); transform-box: fill-box; transform-origin: center; animation: odds-ping 1.8s ease-out 1.1s infinite; opacity: 0; }
.odds-dot { animation: odds-rise 0.3s ease-out 1s both; }
@keyframes odds-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes odds-rise { from { opacity: 0; } to { opacity: 1; } }
@keyframes odds-ping { 0% { transform: scale(1); opacity: 0.55; } 100% { transform: scale(3.4); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .odds-line, .odds-area, .odds-dot { animation: none; opacity: 1; } .odds-ping { animation: none; opacity: 0; } }
.odds-dot { fill: var(--orange); }
.odds-what { margin: 6px 0 0; font-size: 15px; color: var(--fog); }
.odds-bar { position: relative; height: 6px; margin-top: 14px; border-radius: 999px; background: var(--line); }
.odds-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: var(--orange); transition: width 0.9s var(--ease-out-soft, ease-out); }
.odds-tick { position: absolute; top: -3px; width: 2px; height: 12px; border-radius: 2px; background: var(--fog); transform: translateX(-1px); }
.odds-typical { margin: 14px 0 0; font-size: 13px; color: var(--ash); line-height: 1.4; }
.odds-since { margin: 4px 0 0; font-size: 13px; color: var(--ash); }
.odds-side { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--line); font-size: 14px; color: var(--ash); }
.odds-stat-n { font-family: var(--voice); font-weight: 600; color: var(--fog); font-variant-numeric: tabular-nums; }
.odds-head { margin: 14px 0 6px; font-family: var(--voice); font-weight: 600; font-size: 14px; color: var(--fog); }
.odds-movers { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.odds-movers li { display: grid; grid-template-columns: 3.4em 1fr; gap: 10px; align-items: baseline; font-size: 14px; line-height: 1.35; color: var(--fog); }
.odds-pts { font-family: var(--voice); font-weight: 600; font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.odds-movers .is-up .odds-pts { color: var(--bad); }
.odds-movers .is-down .odds-pts { color: var(--good); }
.odds.is-settled .odds-num { color: var(--ash); }
.odds + .versus { margin-top: 12px; }
@media (prefers-reduced-motion: reduce) { .odds-fill { transition: none; } }

/* Study page (owner only): Milo's history backfill. */
.study-state { font-family: var(--voice); font-weight: 600; font-size: 17px; color: var(--fog); margin: 22px 0 14px; }
.study-form { display: grid; gap: 8px; max-width: 420px; margin: 0 0 14px; }
.study-form[hidden] { display: none; }
.study-form label { font-size: 13px; color: var(--ash); }
.study-form input { font: inherit; font-size: 16px; color: var(--fog); background: var(--said); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.study-form input:focus-visible, .study-form button:focus-visible { outline: 2px solid var(--sky); outline-offset: 2px; }
.study-form button { font: inherit; font-weight: 600; font-size: 16px; color: var(--navy); background: var(--orange); border: 0; border-radius: 12px; padding: 13px 16px; cursor: pointer; }

/* ---------- wide screens: delays on the left, the conversation in the middle, your flights on the right ---------- */
.side[hidden] { display: none; }
@media (max-width: 719px) { .side { display: none; } }
@media (min-width: 720px) {
  /* Room for two columns: the delays board sits left of the conversation and the pair is centered. */
  :root { --side: 320px; --gap: 24px; --mid: calc(var(--col) + 36px); --left: max(18px, calc((100vw - var(--side) - var(--gap) - var(--mid)) / 2)); }
  .chat .top, .chat main { margin-left: calc(var(--left) + var(--side) + var(--gap)); margin-right: auto; }
  .chat .ask-inner, .chat .ask-note { margin-left: calc(var(--left) + var(--side) + var(--gap)); margin-right: auto; }
  .side {
    position: fixed; z-index: 1; top: 92px; width: var(--side);
    max-height: calc(100vh - 116px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
    display: flex; flex-direction: column; gap: 12px;
  }
  .side-l { left: var(--left); }
  .side-r { display: none; }
  .side-card { background: var(--said); border-radius: 22px; padding: 18px; }
  .side-card[hidden] { display: none; }
  .side-title-l { margin-left: 4px; }
  .side-title { font-family: var(--voice); font-weight: 600; font-size: 17px; letter-spacing: -0.02em; margin: 0 0 8px; color: var(--fog); }
  .side-text { margin: 0; font-size: 15px; line-height: 1.45; color: #C9CCD1; }
  .side-cta { margin-top: 14px; width: 100%; font: inherit; font-weight: 600; font-size: 15px; color: var(--navy); background: var(--orange); border: 0; border-radius: 999px; padding: 11px 16px; cursor: pointer; }
  .side-trips { list-style: none; margin: 0; padding: 0; }
  .side-trips li + li { border-top: 1px solid var(--line); }
  .side-trip { display: grid; grid-template-columns: 1fr auto; column-gap: 10px; row-gap: 2px; width: 100%; text-align: left; font: inherit; color: var(--fog); background: none; border: 0; padding: 10px 0; cursor: pointer; }
  .side-trip:hover .side-trip-id { color: var(--orange); }
  .side-trip-id { font-family: var(--voice); font-weight: 600; font-size: 16px; }
  .side-trip-day { font-size: 14px; color: var(--ash); align-self: center; }
  .side-trip-label { grid-column: 1 / -1; font-size: 14px; color: var(--ash); }
  .side-text + .side-trips, .side-trips + .side-text { margin-top: 8px; }
  .board-msg { display: block; }
  .board-msg .avatar { display: none; }
  .board-msg .msg-body { align-items: stretch; }
  .board-msg .said.answer { padding: 18px; }
  .board-msg .voice { font-size: 17px; }
}
/* Room for three: the conversation sits dead center with a column on each side. */
@media (min-width: 1240px) {
  :root { --side: min(320px, calc((100vw - var(--mid)) / 2 - var(--gap) - 18px)); --mid-left: calc((100vw - var(--mid)) / 2); }
  .chat .top, .chat main { margin-left: var(--mid-left); }
  .chat .ask-inner, .chat .ask-note { margin-left: var(--mid-left); }
  .side-l { left: calc(var(--mid-left) - var(--gap) - var(--side) + 18px); }
  .side-r { display: flex; left: calc(var(--mid-left) + var(--mid) + var(--gap) - 18px); }
  .side-r[hidden] { display: none; }
}

/* Sign in with Apple: a plain white pill the same width as Google's button. */
.apple-go { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 10px; width: 260px; max-width: 100%; height: 40px; color: #000; background: #fff; border: 0; border-radius: 999px; padding: 0 16px; font: inherit; font-weight: 500; font-size: 15px; cursor: pointer; }
.apple-logo { font-family: -apple-system, "SF Pro Text", "Helvetica Neue", sans-serif; font-size: 18px; line-height: 1; margin-top: -2px; }
.apple-go:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }

/* ---------- inside the iPhone app: the app draws its own top bar and ask bar ---------- */
/* The app has its own top bar everywhere: the conversation, and the sheet that About and Privacy open in. */
.in-app .top { display: none; }
.in-app .page { padding-top: 6px; padding-bottom: 60px; }
.in-app .ask { position: static; background: none; padding-top: 4px; padding-bottom: 165px; }   /* clears the app's ask bar and tab bar, without a big empty gap */
.in-app .ask-inner { display: none; }
.in-app main { padding-top: 10px; }
.in-app .msg, .in-app .me { scroll-margin-bottom: 240px; }
.in-app .side { display: none; }

/* ---------- admin page ---------- */
.admin { max-width: 980px; }
.admin-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 4px; }
.admin-tab.is-on { background: var(--orange); border-color: var(--orange); color: var(--navy); font-weight: 600; }
.admin-find { width: 100%; max-width: 420px; font: inherit; font-size: 16px; color: var(--fog); background: var(--said); border: 1px solid var(--line); border-radius: 999px; padding: 11px 18px; margin: 0 0 14px; }
.admin-find:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.admin-status { list-style: none; margin: 0 0 14px; padding: 4px 18px; background: var(--said); border-radius: 18px; }
.page .admin-status li { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; margin: 0; max-width: none; }
.admin-status li + li { border-top: 1px solid var(--line); }
.admin-status strong { display: block; color: var(--fog); font-weight: 600; }
.admin-state { display: block; font-size: 14px; color: var(--ash); }
.admin-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; margin-top: 7px; background: var(--line); }
.admin-dot.is-good { background: var(--good); }
.admin-dot.is-warn { background: var(--warn); }
.admin-line { font-family: var(--voice); font-weight: 600; font-size: 17px; color: var(--fog); margin: 18px 0 10px; }
.admin-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; background: var(--said); border-radius: 14px; padding: 12px 14px; overflow-wrap: anywhere; }
.admin-note { background: var(--said); border-radius: 18px; padding: 16px 18px; margin: 0 0 10px; }
.admin-note-head { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; margin-bottom: 6px; }
.admin-note-head strong { font-family: var(--voice); font-size: 16px; color: var(--fog); }
.admin-note ul { margin: 0; }
.admin .table-wrap td { overflow-wrap: anywhere; }
.admin-page .top { max-width: 980px; }
.in-app .intro-free { display: none; }                       /* they are already in the app */
.in-app .board-msg .said.answer { display: none; }           /* the app has its own Delays tab */

/* The longer product name: keep "by Contrail" on one line, and tighten the header on small phones. */
.brand-by { white-space: nowrap; }
@media (max-width: 420px) {
  .brand-name { font-size: 20px; }
  .top .brand-by { font-size: 11.5px; margin-left: 6px; padding-right: 2px; }
  .top .avatar-lg { width: 34px; height: 34px; }
  .top-btn { max-width: 104px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
@media (max-width: 345px) { .top .brand-by { display: none; } }

/* ---- admin: the Systems tab. Lamps pulse while a system is live. */
.sys-head { background: var(--said); border-radius: 22px; padding: 22px 22px 16px; margin: 6px 0 8px; }
.sys-big { display: flex; align-items: center; gap: 18px; }
.sys-count { display: block; font-family: var(--voice); font-weight: 700; font-size: 32px; letter-spacing: -0.035em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.sys-sub { display: block; color: var(--ash); font-size: 15px; margin-top: 4px; }
.sys-orb { position: relative; flex: none; width: 54px; height: 54px; --tone: var(--good); }
.sys-big.is-wait .sys-orb { --tone: var(--warn); }
.sys-big.is-down .sys-orb { --tone: var(--bad); }
.sys-orb i { position: absolute; inset: 0; border-radius: 50%; }
.sys-orb i:nth-child(1) { inset: 17px; background: var(--tone); box-shadow: 0 0 18px var(--tone); }
.sys-orb i:nth-child(2), .sys-orb i:nth-child(3) { border: 2px solid var(--tone); opacity: 0; animation: sys-ring 2.4s var(--ease-out-soft) infinite; }
.sys-orb i:nth-child(3) { animation-delay: 1.2s; }
.sys-big.is-down .sys-orb i:nth-child(2), .sys-big.is-down .sys-orb i:nth-child(3) { animation-duration: 1.1s; }
.sys-big.is-down .sys-orb i:nth-child(3) { animation-delay: 0.55s; }
@keyframes sys-ring { 0% { transform: scale(0.36); opacity: 0.9; } 100% { transform: scale(1); opacity: 0; } }
.sys-strip { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; }
.sys-pip { width: 18px; height: 6px; border-radius: 3px; background: var(--line); }
.sys-pip.is-live { background: var(--good); animation: sys-breathe 2.4s ease-in-out infinite; }
.sys-pip.is-wait { background: var(--warn); }
.sys-pip.is-down { background: var(--bad); animation: sys-blink 0.9s steps(2, jump-none) infinite; }
.page .sys-tick { color: var(--ash); font-size: 13px; margin: 16px 0 0; font-variant-numeric: tabular-nums; }
.sys-grid + .quiet { margin-top: 22px; }
.sys-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 12px; }
.sys-card { display: flex; gap: 14px; align-items: flex-start; background: var(--said); border-radius: 18px; padding: 16px 18px; border: 1px solid transparent; animation: sys-in 0.45s var(--ease-out-soft) both; }
.sys-still .sys-card { animation: none; }
.sys-card.is-down { border-color: color-mix(in srgb, var(--bad) 55%, transparent); }
.sys-card.is-off { opacity: 0.62; }
@keyframes sys-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.sys-lamp { position: relative; flex: none; width: 14px; height: 14px; margin-top: 4px; border-radius: 50%; background: var(--line); --tone: var(--line); }
.sys-card.is-live .sys-lamp { --tone: var(--good); background: var(--good); box-shadow: 0 0 10px color-mix(in srgb, var(--good) 70%, transparent); }
.sys-card.is-wait .sys-lamp { --tone: var(--warn); background: var(--warn); animation: sys-breathe 2.8s ease-in-out infinite; }
.sys-card.is-down .sys-lamp { --tone: var(--bad); background: var(--bad); box-shadow: 0 0 10px color-mix(in srgb, var(--bad) 70%, transparent); animation: sys-blink 0.9s steps(2, jump-none) infinite; }
.sys-card.is-off .sys-lamp { background: transparent; box-shadow: inset 0 0 0 2px var(--line); }
.sys-lamp i { position: absolute; inset: -2px; border-radius: 50%; border: 2px solid var(--tone); opacity: 0; }
.sys-card.is-live .sys-lamp i { animation: sys-ping 2.2s var(--ease-out-soft) infinite; }
@keyframes sys-ping { 0% { transform: scale(0.7); opacity: 0.85; } 80%, 100% { transform: scale(2.3); opacity: 0; } }
@keyframes sys-breathe { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
@keyframes sys-blink { 0% { opacity: 1; } 100% { opacity: 0.25; } }
.sys-body { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 5px; }
.sys-top { display: flex; align-items: center; gap: 10px; }
.sys-top strong { color: var(--fog); font-weight: 600; flex: 1; min-width: 0; }
.sys-word { flex: none; font-size: 12.5px; font-weight: 600; padding: 2px 9px; border-radius: 999px; background: var(--line); color: var(--ash); }
.sys-card.is-live .sys-word { background: color-mix(in srgb, var(--good) 16%, transparent); color: var(--good); }
.sys-card.is-wait .sys-word { background: color-mix(in srgb, var(--warn) 16%, transparent); color: var(--warn); }
.sys-card.is-down .sys-word { background: color-mix(in srgb, var(--bad) 18%, transparent); color: var(--bad); }
.sys-note { color: var(--ash); font-size: 14px; line-height: 1.4; overflow-wrap: anywhere; }
.sys-when { color: var(--sky); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.sys-bars { flex: none; display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; }
.sys-bars i { width: 3px; height: 4px; border-radius: 1px; background: var(--line); }
.sys-bars i.is-on { background: var(--good); animation: sys-bar 1.1s ease-in-out infinite alternate; }
@keyframes sys-bar { from { height: 4px; } to { height: 14px; } }
.sys-meter { position: relative; height: 8px; border-radius: 4px; background: var(--line); margin-top: 4px; }
.sys-meter i { display: block; height: 100%; border-radius: 4px; background: var(--good); transition: width 0.6s var(--ease-out-soft); }
.sys-meter i.is-hot { background: var(--bad); }
.sys-meter b { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--fog); border-radius: 1px; }
@media (max-width: 520px) { .sys-count { font-size: 26px; } .sys-orb { width: 44px; height: 44px; } .sys-orb i:nth-child(1) { inset: 14px; } }
@media (prefers-reduced-motion: reduce) {
  .sys-orb i, .sys-pip, .sys-card, .sys-lamp, .sys-lamp i, .sys-bars i { animation: none !important; }
  .sys-bars i.is-on { height: 10px; }
}
.page .sys-wait { color: var(--ash); animation: sys-breathe 1.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .page .sys-wait { animation: none; } }

/* ---------- plain page header: his tile, a hairline under it, and the same width as the page below ---------- */
.top-sub { position: relative; padding-bottom: 16px; margin-bottom: 10px; }
.top-sub::after { content: ''; position: absolute; left: max(18px, env(safe-area-inset-left)); right: max(18px, env(safe-area-inset-right)); bottom: 0; height: 1px; background: rgba(255, 255, 255, 0.09); }
.top-wide { max-width: 900px; }

/* ---------- wide screens, second pass: the header runs across all the columns so nothing floats above the side panels,
   and the side panels sit back as darker wells so the conversation's bubbles are the bright surfaces ---------- */
@media (min-width: 720px) {
  .chat .top { margin-left: calc(var(--left) - 18px); max-width: calc(var(--side) + var(--gap) + var(--mid) + 18px); }
  .side-l, .side-card { background: #17181B; border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 22px; }
  .side { max-height: calc(100vh - 92px - 136px); }
  /* The panels still scroll, but without a scrollbar poking past their rounded corners. */
  .side { scrollbar-width: none; }
  .side::-webkit-scrollbar { display: none; }
  .side-l { padding: 18px 18px 8px; gap: 4px; }
  .side-l .side-title-l { margin: 0 0 4px; }
  .side-l .said, .side-l .board-msg .said.answer { background: none; padding: 0; border-radius: 0; }
  .side-l .side-list { padding-top: 6px; }
  .chat .thread:not(.side-list) .said { background: #2A2C31; }
}
@media (min-width: 1240px) {
  .chat .top { margin-left: calc(var(--mid-left) - var(--gap) - var(--side)); max-width: calc(var(--mid) + 2 * (var(--gap) + var(--side))); }
}

/* ---------- flight answer, simplified: the number, Milo's read and the schedule up top; the rest behind "Show details" ---------- */
.odds { margin-top: 14px; padding: 14px 16px 14px; }
.odds .odds-typical { margin-top: 8px; }
.said.answer .answer-meta { margin-top: 12px; }
.said.answer .points.lead { margin-top: 12px; padding-top: 0; border-top: 0; }
.said.answer .more-btn { margin-top: 6px; }
.detail { margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--line); display: grid; gap: 14px; }
.detail > * { margin-top: 0; }
.detail .odds-side { margin: 0; padding-top: 0; border-top: 0; }
.detail .odds-head { margin: 12px 0 6px; }
.detail .odds-typical { margin: 8px 0 0; }
.detail .points.steps { margin: 0; padding-top: 14px; border-top: 1px solid var(--line); }
.detail .record, .detail .news { margin-top: 0; }
.odds-movers li { grid-template-columns: 2.6em 1fr; gap: 8px; }
.said.answer .confirm { margin-top: 8px; }

/* ---------- airline tiles: the airline's own color and code, no logo on a white box ---------- */
.airline.airline-code { background: var(--line); color: #fff; font-family: var(--voice); font-weight: 700; font-size: 14px; letter-spacing: -0.01em; }
.airline.is-light { color: var(--navy); }
.airline.is-small { width: 34px; height: 34px; border-radius: 10px; font-size: 12.5px; }

/* ---------- wide screens: the header stays put, so the side panels never sit under empty space ---------- */
@media (min-width: 720px) {
  /* Pinned, not sticky: Safari let a sticky header drift up with the page. Fixed is the same thing the side panels use. */
  .chat .top { position: fixed; top: 0; left: calc(var(--left) - 18px); width: calc(var(--side) + var(--gap) + var(--mid) + 18px); max-width: none; margin: 0; z-index: 6; background: var(--ground); padding-top: 26px; padding-bottom: 12px; height: 82px; }
  .chat main { margin-top: 82px; }
  .in-app.chat main, .in-app main { margin-top: 0; }
  /* A solid band under the header, in the page color, so the conversation never ghosts through as it scrolls away. Only the last few pixels soften. */
  .chat .top::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 16px; background: linear-gradient(var(--ground) 0, var(--ground) 12px, rgba(28, 29, 32, 0) 16px); pointer-events: none; }
  .chat .top::before { content: ''; position: absolute; left: 0; right: 0; bottom: 100%; height: 200px; background: var(--ground); pointer-events: none; }
  /* A full-width solid bar pinned to the very top, behind the header. Safari's glass toolbar shows whatever scrolls under it
     unless a pinned bar the full width of the window sits at the top edge, in which case it takes that bar's color. */
  body.chat:not(.in-app)::before { content: ''; position: fixed; top: 0; left: 0; right: 0; height: 82px; background: var(--ground); z-index: 5; pointer-events: none; }
  .side { top: 100px; max-height: calc(100vh - 100px - 136px); }

  /* your flights: one small card per flight */
  .side-trips li + li { border-top: 0; margin-top: 8px; }
  .trip-card { display: grid; grid-template-columns: auto 1fr auto; column-gap: 10px; row-gap: 8px; align-items: center; width: 100%; text-align: left; font: inherit; color: var(--fog);
    background: #22242A; border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 16px; padding: 12px; cursor: pointer; transition: border-color 0.2s ease, background 0.2s ease; }
  .trip-card:hover, .trip-card:focus-visible { border-color: rgba(255, 122, 26, 0.55); background: #262930; }
  .trip-main { display: grid; gap: 1px; min-width: 0; }
  .trip-id { font-family: var(--voice); font-weight: 600; font-size: 15px; letter-spacing: -0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .trip-route, .trip-when { font-size: 13px; line-height: 1.35; color: var(--ash); }
  .trip-odds { display: grid; justify-items: end; gap: 0; }
  .trip-odds-n { font-family: var(--voice); font-weight: 700; font-size: 20px; letter-spacing: -0.03em; line-height: 1.05; font-variant-numeric: tabular-nums; }
  .trip-odds-l { font-size: 11px; color: var(--ash); white-space: nowrap; }
  .trip-when { grid-column: 1 / -1; margin-top: -2px; }
  .trip-status { grid-column: 1 / -1; display: flex; gap: 8px; align-items: baseline; padding-top: 8px; border-top: 1px solid rgba(255, 255, 255, 0.07); font-size: 13px; line-height: 1.35; color: #C9CCD1; }
  .dot-calm { background: var(--sky); }
  .trip-status .dot { flex: none; align-self: auto; margin: 0; transform: translateY(-1px); }
}

/* ---------- airline symbol over the colored tile ---------- */
.airline { position: relative; }
.airline.airline-code img { position: absolute; inset: 0; margin: auto; width: 68%; height: 68%; object-fit: contain; opacity: 0; transition: opacity 0.3s ease; }
.airline.has-logo { background: #2F3238 !important; color: transparent; border: 1px solid rgba(255, 255, 255, 0.06); }
.airline.has-logo img { opacity: 1; }

@media (min-width: 1240px) {
  .chat .top { left: calc(var(--mid-left) - var(--gap) - var(--side)); width: calc(var(--mid) + 2 * (var(--gap) + var(--side))); margin: 0; max-width: none; }
}

/* ---------- your flights: remove a flight ---------- */
  .side-trips li { position: relative; }
  .trip-x { position: absolute; top: -7px; right: -7px; width: 24px; height: 24px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.14); background: #17181B; color: var(--ash);
    font: inherit; font-size: 15px; line-height: 1; display: grid; place-items: center; padding: 0 0 1px; cursor: pointer; opacity: 0; transition: opacity 0.15s ease, color 0.15s ease, border-color 0.15s ease; }
  .side-trips li:hover .trip-x, .side-trips li:focus-within .trip-x, .trip-x:focus-visible { opacity: 1; }
  .trip-x:hover, .trip-x:focus-visible { color: var(--fog); border-color: rgba(255, 255, 255, 0.4); }
  @media (hover: none) { .trip-x { opacity: 1; } }
  .trip-sure { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; padding: 10px 12px; border-radius: 14px; background: #22242A; border: 1px solid rgba(255, 255, 255, 0.06); font-size: 13px; color: #C9CCD1; }
  .trip-sure[hidden] { display: none; }
  .trip-sure span { flex: 1 1 100%; }
  .trip-yes, .trip-no { font: inherit; font-size: 13px; font-weight: 600; border-radius: 999px; padding: 7px 14px; cursor: pointer; }
  .trip-yes { color: #fff; background: rgba(255, 77, 94, 0.18); border: 1px solid rgba(255, 77, 94, 0.5); }
  .trip-no { color: var(--fog); background: none; border: 1px solid var(--line); }

/* ---------- flight cards, second pass: codes, Milo's forecast, what is moving it, and gate and leave time close in ---------- */
  .trip-card { row-gap: 7px; }
  .trip-route { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ash); }
  .trip-code { font-family: var(--voice); font-weight: 600; font-size: 13px; letter-spacing: 0.01em; color: #C9CCD1; }
  .trip-arrow { font-size: 12px; color: var(--ash); transform: translateY(-1px); }
  .trip-when { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; margin-top: 0; font-size: 13px; color: #C9CCD1; }
  .trip-count { color: var(--sky); font-weight: 600; white-space: nowrap; }
  .trip-status { font-family: var(--voice); font-weight: 600; font-size: 13.5px; letter-spacing: -0.01em; color: var(--fog); }
  .trip-why { grid-column: 1 / -1; display: grid; gap: 4px; margin-top: -2px; padding-left: 17px; }
  .trip-mover { display: flex; gap: 6px; align-items: baseline; font-size: 12.5px; line-height: 1.35; color: var(--ash); }
  .trip-tri { flex: none; font-size: 8px; transform: translateY(-1px); }
  .trip-mover.is-up .trip-tri { color: var(--bad); }
  .trip-mover.is-down .trip-tri { color: var(--good); }
  .trip-chips { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; }
  .trip-chip { font-size: 12.5px; font-weight: 600; color: var(--fog); background: rgba(159, 180, 212, 0.12); border-radius: 999px; padding: 5px 10px; }
  .trip-chip.is-quiet { color: var(--ash); font-weight: 500; background: rgba(255, 255, 255, 0.05); }
  .trip-chip[hidden] { display: none; }

/* ---------- your flights: add a flight right in the column ---------- */
  .side-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
  .side-head .side-title { margin: 0; }
  .side-add { font: inherit; font-size: 13px; font-weight: 600; color: var(--fog); background: none; border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; cursor: pointer; transition: border-color 0.2s ease, background 0.2s ease; }
  .side-add:hover, .side-add:focus-visible { border-color: var(--orange); background: rgba(255, 122, 26, 0.07); }
  .trip-add { display: grid; grid-template-columns: 1fr; gap: 8px; margin: 0 0 12px; padding: 12px; border-radius: 16px; background: #22242A; border: 1px solid rgba(255, 255, 255, 0.06); }
  .trip-add[hidden] { display: none; }
  .trip-add input { width: 100%; font: inherit; font-size: 15px; color: var(--fog); background: #17181B; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; color-scheme: dark; }
  .trip-add input::placeholder { color: var(--ash); }
  .trip-add input:focus-visible { outline: 2px solid var(--orange); outline-offset: 1px; border-radius: 10px; }
  .trip-add-go { font: inherit; font-weight: 600; font-size: 14px; color: var(--navy); background: var(--orange); border: 0; border-radius: 999px; padding: 10px 14px; cursor: pointer; }
  .trip-add-go:disabled { opacity: 0.6; cursor: default; }
  .trip-add-note { margin: 0; font-size: 12.5px; line-height: 1.4; color: var(--ash); }
  .trip-add-note.is-bad { color: #FF8D98; }
  .side-card > .trip-add-note { margin: 0 0 10px; }

/* ---------- your flights at every width: the same card and trip styles the wide column uses ---------- */
  .side-card { background: var(--said); border-radius: 22px; padding: 18px; }
  .side-card[hidden] { display: none; }
  .side-title-l { margin-left: 4px; }
  .side-title { font-family: var(--voice); font-weight: 600; font-size: 17px; letter-spacing: -0.02em; margin: 0 0 8px; color: var(--fog); }
  .side-text { margin: 0; font-size: 15px; line-height: 1.45; color: #C9CCD1; }
  .side-cta { margin-top: 14px; width: 100%; font: inherit; font-weight: 600; font-size: 15px; color: var(--navy); background: var(--orange); border: 0; border-radius: 999px; padding: 11px 16px; cursor: pointer; }
  .side-trips { list-style: none; margin: 0; padding: 0; }
  .side-trips li + li { border-top: 1px solid var(--line); }
  .side-trip { display: grid; grid-template-columns: 1fr auto; column-gap: 10px; row-gap: 2px; width: 100%; text-align: left; font: inherit; color: var(--fog); background: none; border: 0; padding: 10px 0; cursor: pointer; }
  .side-trip:hover .side-trip-id { color: var(--orange); }
  .side-trip-id { font-family: var(--voice); font-weight: 600; font-size: 16px; }
  .side-trip-day { font-size: 14px; color: var(--ash); align-self: center; }
  .side-trip-label { grid-column: 1 / -1; font-size: 14px; color: var(--ash); }
  .side-text + .side-trips, .side-trips + .side-text { margin-top: 8px; }
  .side-card { background: #17181B; border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 22px; }
  .side-trips li + li { border-top: 0; margin-top: 8px; }
  .trip-card { display: grid; grid-template-columns: auto 1fr auto; column-gap: 10px; row-gap: 8px; align-items: center; width: 100%; text-align: left; font: inherit; color: var(--fog);
    background: #22242A; border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 16px; padding: 12px; cursor: pointer; transition: border-color 0.2s ease, background 0.2s ease; }
  .trip-card:hover, .trip-card:focus-visible { border-color: rgba(255, 122, 26, 0.55); background: #262930; }
  .trip-main { display: grid; gap: 1px; min-width: 0; }
  .trip-id { font-family: var(--voice); font-weight: 600; font-size: 15px; letter-spacing: -0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .trip-route, .trip-when { font-size: 13px; line-height: 1.35; color: var(--ash); }
  .trip-odds { display: grid; justify-items: end; gap: 0; }
  .trip-odds-n { font-family: var(--voice); font-weight: 700; font-size: 20px; letter-spacing: -0.03em; line-height: 1.05; font-variant-numeric: tabular-nums; }
  .trip-odds-l { font-size: 11px; color: var(--ash); white-space: nowrap; }
  .trip-when { grid-column: 1 / -1; margin-top: -2px; }
  .trip-status { grid-column: 1 / -1; display: flex; gap: 8px; align-items: baseline; padding-top: 8px; border-top: 1px solid rgba(255, 255, 255, 0.07); font-size: 13px; line-height: 1.35; color: #C9CCD1; }
  .dot-calm { background: var(--sky); }
  .trip-status .dot { flex: none; align-self: auto; margin: 0; transform: translateY(-1px); }

/* trips: a heading per trip, and a note between flights that connect */
.trip-head { font-family: var(--voice); font-weight: 600; font-size: 14px; letter-spacing: -0.01em; color: var(--fog); margin: 14px 2px 8px; display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.trip-head:first-of-type { margin-top: 2px; }
.trip-head span { font-family: var(--body); font-weight: 400; font-size: 12.5px; color: var(--ash); white-space: nowrap; }
.side-trips { list-style: none; margin: 0; padding: 0; }
.trip-link { list-style: none; margin: 4px 0 4px 26px; padding: 2px 0 2px 12px; border-left: 2px dotted var(--line); font-size: 12.5px; color: var(--ash); }
.side-trips li.trip-link + li, .side-trips li + li.trip-link { margin-top: 4px; }
.trip-link.is-tight { color: var(--warn); }
.trip-past { margin-top: 14px; }
.trip-past .more-btn { margin-top: 0; }
.trip-past-list { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 6px; }
.trip-past-list li { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--ash); }
.trip-past-list strong { font-family: var(--voice); font-weight: 600; color: #C9CCD1; }

/* ---------- your flights on phones and narrow windows: a button in the header opens it as a full sheet ---------- */
.top-flights[hidden] { display: none; }
.sheet-bar { display: none; }
@media (max-width: 719px) {
  .side.side-r.is-sheet { display: flex; flex-direction: column; gap: 12px; position: fixed; inset: 0; top: 0; left: 0; width: auto; max-height: none; z-index: 30; background: var(--ground);
    padding: max(14px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) calc(24px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); overflow-y: auto; overscroll-behavior: contain; animation: sheet-in 0.28s var(--ease-out-soft) both; }
  .side.side-r.is-sheet .sheet-bar { display: flex; justify-content: flex-end; }
  .sheet-close { font: inherit; font-weight: 600; font-size: 15px; color: var(--fog); background: none; border: 1px solid var(--line); border-radius: 999px; padding: 9px 16px; cursor: pointer; }
  .side.side-r.is-sheet .side-card { max-width: 560px; width: 100%; margin: 0 auto; padding: 18px; }
  .side.side-r.is-sheet .trip-x { opacity: 1; }
  body.sheet-on { overflow: hidden; }
}
@keyframes sheet-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .side.side-r.is-sheet { animation: none; } }

.trip-add-shot { font: inherit; font-weight: 600; font-size: 13.5px; color: var(--fog); background: none; border: 1px solid var(--line); border-radius: 999px; padding: 9px 14px; cursor: pointer; }
.trip-add-shot:hover, .trip-add-shot:focus-visible { border-color: var(--orange); background: rgba(255, 122, 26, 0.07); }

/* flight cards: the flight name is never cut off */
.trip-card { grid-template-columns: auto minmax(0, 1fr) auto; }
.trip-id { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.2; overflow-wrap: anywhere; }
.trip-odds-n { font-size: 19px; }

/* ---------- wide screens, two columns: the conversation on the left, Your flights on the right and wider ---------- */
@media (min-width: 720px) {
  :root { --side: min(420px, calc(100vw - var(--mid) - var(--gap) - 36px)); --two-left: max(18px, calc((100vw - var(--mid) - var(--gap) - var(--side)) / 2)); }
  .side-l { display: none !important; }
  .chat .top { left: var(--two-left); width: calc(var(--mid) + var(--gap) + var(--side)); margin: 0; max-width: none; }
  .chat main { margin-left: var(--two-left); margin-right: auto; }
  .chat .ask-inner, .chat .ask-note { margin-left: var(--two-left); margin-right: auto; }
  .side-r { display: flex; left: calc(var(--two-left) + var(--mid) + var(--gap) - 18px); }
  .side-r[hidden] { display: none; }
  .trip-odds-n { font-size: 22px; }
  .trip-id { font-size: 16px; }
}

/* ---------- the right column is the bird's-eye view: Your flights, then the delays board ---------- */
.side-view { display: none; }
.side-delays-card[hidden] { display: none; }
@media (min-width: 720px) {
  .side-view { display: block; font-family: var(--voice); font-weight: 700; font-size: 20px; letter-spacing: -0.03em; margin: 0 0 2px 4px; color: var(--fog); }
  .side { top: 100px; max-height: calc(100vh - 100px - 16px); padding-bottom: 8px; z-index: 3; }
  /* A hairline between the conversation and the bird's-eye view, so the column can run to the bottom of the window. */
  body.chat:not(.in-app)::after { content: ''; position: fixed; top: 96px; bottom: 16px; left: calc(var(--two-left) + var(--mid) + (var(--gap) / 2) - 18px); width: 1px; background: rgba(255, 255, 255, 0.08); pointer-events: none; z-index: 3; }
  .side-delays-card .side-title { margin-bottom: 10px; }
  .side-delays-card .said, .side-delays-card .board-msg .said.answer { background: none; padding: 0; border-radius: 0; }
  .side-delays-card .side-list { padding: 0; margin: 0; }
  .side-delays-card .replies { margin-top: 10px; }
}
@media (max-width: 719px) {
  .side.side-r.is-sheet .side-delays-card, .side.side-r.is-sheet .side-view { display: none; }
}

/* ---------- flight cards: small signs of life ---------- */
/* The status light breathes while Milo is watching: slow when all is well, quicker when there is trouble. */
.trip-status .dot { position: relative; }
.trip-status .dot::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: inherit; animation: trip-ring 2.8s var(--ease-out-soft) infinite; }
.trip-status .dot-warn::after { animation-duration: 2.1s; }
.trip-status .dot-bad { animation: none; }
.trip-status .dot-bad::after { animation-duration: 1.5s; }
.trip-status.is-ahead > span:last-child { animation: trip-breathe 2.4s ease-in-out infinite; }
/* Inside eight hours the countdown and a posted gate pulse gently. */
.trip-count.is-soon { animation: trip-breathe 2.4s ease-in-out infinite; }
.trip-chip.is-gate { box-shadow: 0 0 0 0 rgba(159, 180, 212, 0.45); animation: trip-chip 2.6s ease-out infinite; }
/* The odds number glows when a delay looks likely. */
.trip-card.is-hot .trip-odds-n { animation: trip-breathe 2.4s ease-in-out infinite; }
@keyframes trip-ring { 0% { transform: scale(1); opacity: 0.55; } 75%, 100% { transform: scale(2.7); opacity: 0; } }
@keyframes trip-breathe { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
@keyframes trip-chip { 0% { box-shadow: 0 0 0 0 rgba(159, 180, 212, 0.45); } 70%, 100% { box-shadow: 0 0 0 6px rgba(159, 180, 212, 0); } }

/* ---------- phones: a tighter flight answer, so the whole read fits on one screen ---------- */
@media (max-width: 640px) {
  .said.answer .voice { margin-top: 10px; font-size: 17px; }
  .answer-code { font-size: 21px; }
  .answer-sub { margin-top: 4px; font-size: 13.5px; }
  /* Delay odds: the number sits beside its label, not above it. */
  .odds { display: grid; grid-template-columns: auto 1fr; column-gap: 14px; align-items: center; margin-top: 12px; padding: 12px 14px; }
  .odds-main { grid-column: 1; grid-row: 1 / span 2; margin: 0; }
  .odds-num { font-size: 44px; }
  .odds-top { grid-column: 2; grid-row: 1; align-self: end; }
  .odds-name { font-size: 13px; }
  .odds-what { grid-column: 2; grid-row: 2; align-self: start; margin: 2px 0 0; font-size: 13.5px; line-height: 1.3; color: #C9CCD1; }
  .odds-bar { grid-column: 1 / -1; margin-top: 10px; }
  .odds .odds-typical { grid-column: 1 / -1; margin-top: 6px; font-size: 12px; }
  .odds > :not(.odds-main):not(.odds-top):not(.odds-what):not(.odds-bar):not(.odds-typical) { grid-column: 1 / -1; }
  .now { margin-top: 10px; font-size: 14px; line-height: 1.4; }
  .now + .answer-meta { display: none; }           /* the line above already gives the gate and the time */
  .read { margin-top: 10px; padding: 10px 12px; font-size: 14px; line-height: 1.4; }
  .said.answer .confirm { margin-top: 6px; font-size: 12.5px; }
}

/* ---------- the iPhone app's Google sign-in sheet ---------- */
.app-signin { min-height: 100vh; margin: 0; display: grid; place-items: center; background: var(--ground); }
.app-signin-box { display: grid; justify-items: center; gap: 14px; padding: 32px 24px; text-align: center; max-width: 360px; }
.app-signin-mark { border-radius: 18px; }
.app-signin-box h1 { margin: 6px 0 0; font-family: var(--voice); font-weight: 700; font-size: 24px; letter-spacing: -0.03em; color: var(--fog); }
.app-signin-box p { margin: 0 0 8px; font-size: 15px; line-height: 1.45; color: var(--ash); }
#app-signin-btn { min-height: 44px; }

/* The iPhone app has its own Delays tab, so the delays summary never appears in its conversation. */
.in-app li.board-msg, .in-app .board-msg { display: none !important; }

/* Airline logos fill their rounded tile edge to edge. A sliver cut off at the corners is fine. */
.airline.has-logo { overflow: hidden; border: 0; padding: 0; background: #FFFFFF !important; }   /* every logo sits on white, in the airline's own colors */
.airline.airline-code.has-logo img { inset: 0; margin: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }

.app-signin-box .unwatch-note { font-size: 19px; line-height: 1.45; color: var(--fog); }
.app-signin-box .unwatch-note a { color: var(--orange); }

/* ---- admin: the Test Milo tab */
.bench-bar { display: flex; align-items: center; gap: 14px; margin: 14px 0; flex-wrap: wrap; }
.bench-own { display: flex; gap: 10px; align-items: center; margin: 0 0 14px; flex-wrap: wrap; }
.bench-own .admin-find { margin: 0; flex: 1 1 260px; }
.bench-card .admin-note-head { align-items: center; }
.bench-one { padding: 6px 14px; font-size: 14px; }
.bench-turn { padding: 10px 0; }
.bench-turn + .bench-turn { border-top: 1px solid var(--line); }
.page .bench-q { margin: 0 0 6px; font-weight: 600; color: var(--orange); max-width: none; }
.page .bench-a { margin: 0 0 6px; color: var(--fog); max-width: none; white-space: pre-wrap; }
.page .bench-meta { margin: 0 0 6px; font-size: 13px; color: var(--ash); max-width: none; }
.bench-flag { display: inline-block; margin: 0 6px 6px 0; padding: 3px 10px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--bad); background: rgba(255, 77, 94, 0.14); }
.bench-one, .bench-own .chip { font: inherit; font-size: 14px; font-weight: 600; color: var(--fog); background: transparent; border: 1px solid var(--line); border-radius: 999px; padding: 6px 16px; cursor: pointer; }
.bench-one:hover, .bench-own .chip:hover { border-color: var(--orange); color: var(--orange); }
.bench-one:disabled, .bench-bar .chip:disabled { opacity: 0.5; cursor: default; }
.bench-one:focus-visible, .bench-own .chip:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.bench-all { font: inherit; font-size: 15px; font-weight: 700; color: var(--navy); background: var(--orange); border: 0; border-radius: 999px; padding: 9px 20px; cursor: pointer; }
.bench-all:disabled { opacity: 0.5; cursor: default; }
.bench-all:focus-visible { outline: 2px solid var(--fog); outline-offset: 2px; }

/* ---- voice, feedback, Milo's reactions, odds history on trip cards */
.ask button.ask-mic { background: transparent; color: var(--ash); width: 40px; height: 40px; }
.ask button.ask-mic:hover { color: var(--fog); }
.ask button.ask-mic.is-on { color: var(--navy); background: var(--orange); animation: mic-pulse 1.3s ease-in-out infinite; }
.ask button.ask-mic[hidden] { display: none; }
@keyframes mic-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 122, 26, 0.5); } 50% { box-shadow: 0 0 0 9px rgba(255, 122, 26, 0); } }
.rate { display: flex; gap: 8px; align-items: center; margin: 2px 0 0 4px; }
.rate-btn { font: inherit; font-size: 12px; color: var(--ash); background: transparent; border: 1px solid var(--line); border-radius: 999px; padding: 3px 11px; cursor: pointer; transition: color 0.15s ease, border-color 0.15s ease; }
.rate-btn:hover { color: var(--fog); border-color: var(--ash); }
.rate-btn:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.rate-done { font-size: 12px; color: var(--ash); }
.msg.is-worried .avatar { animation: m-fret 0.42s ease-in-out 3; }
.msg.is-pleased .avatar { animation: m-bob 0.7s var(--ease-pop, ease-out) 1 0.5s; }
@keyframes m-fret { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-7deg); } 75% { transform: rotate(7deg); } }
@keyframes m-bob { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-6px) rotate(-4deg); } 70% { transform: translateY(0) rotate(3deg); } }
.trip-spark { margin: 3px 0 0; justify-self: end; }
.trip-called { grid-column: 1 / -1; display: block; margin-top: 2px; padding: 6px 10px; border-radius: 10px; font-size: 13px; font-weight: 600; color: var(--orange); background: rgba(255, 122, 26, 0.12); }
@media (prefers-reduced-motion: reduce) { .msg.is-worried .avatar, .msg.is-pleased .avatar, .ask button.ask-mic.is-on { animation: none; } }
.trip-forward strong { color: var(--fog); font-weight: 600; overflow-wrap: anywhere; }

/* ---- the embeddable airport badge and the scorecard */
.badge-page { background: transparent; margin: 0; padding: 6px; min-height: 0; }
.badge { display: grid; gap: 8px; max-width: 420px; padding: 14px 16px; border-radius: 18px; background: var(--said); border: 1px solid var(--line); color: var(--fog); text-decoration: none; font-size: 14px; }
.badge-top { display: flex; align-items: center; gap: 10px; }
.badge-top img { border-radius: 8px; flex: none; }
.badge-name { font-family: var(--voice); font-weight: 700; font-size: 17px; flex: 1; min-width: 0; }
.badge-line { font-family: var(--voice); font-weight: 600; font-size: 15px; line-height: 1.35; }
.badge-foot { font-size: 12px; color: var(--ash); }
.tile-num.is-word { font-size: 22px; line-height: 1.2; }

/* ---- small comforts: thinking lines, smooth details, odds movement, feathers, freshness */
.think-line { display: block; margin-top: 4px; font-size: 13px; color: var(--ash); opacity: 0; }
.think-line:empty { display: none; }
.think-line.is-in { animation: think-in 0.4s ease forwards; }
@keyframes think-in { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
.more-box.is-moving { overflow: hidden; transition: height 0.28s ease; }
.fresh-stamp { margin: 10px 0 0; font-size: 12px; }
.trip-move { justify-self: end; font-size: 12px; font-weight: 700; }
.trip-move.is-up { color: var(--bad); }
.trip-move.is-down { color: var(--good); }
.trip-card { position: relative; }
.feathers { position: absolute; left: 50%; top: 40%; width: 0; height: 0; pointer-events: none; }
.feathers i { position: absolute; width: 9px; height: 16px; border-radius: 60% 60% 60% 60% / 80% 80% 30% 30%; background: var(--orange); opacity: 0; animation: feather 1.9s ease-out forwards; }
.feathers i:nth-child(3n) { background: var(--fog); width: 7px; height: 13px; }
@keyframes feather { 0% { opacity: 0; transform: translate(0, 0) rotate(0); } 12% { opacity: 1; } 60% { opacity: 1; transform: translate(var(--dx), var(--dy)) rotate(var(--rot)); } 100% { opacity: 0; transform: translate(calc(var(--dx) * 1.15), calc(var(--dy) + 70px)) rotate(calc(var(--rot) * 1.6)); } }
.lost { text-align: center; padding-top: 12vh; }
.lost img { width: 120px; height: 120px; border-radius: 28px; animation: m-fret 0.9s ease-in-out 2; }
.page.lost p { margin-left: auto; margin-right: auto; }
.lost .lost-go { display: inline-block; margin-top: 18px; padding: 11px 22px; border-radius: 999px; background: var(--orange); color: var(--navy); font-weight: 700; text-decoration: none; }
@media (prefers-reduced-motion: reduce) { .think-line.is-in, .lost img { animation: none; opacity: 1; } }
.said .fresh-stamp { margin: 12px 0 0; }

/* ---- no flight yet: starters in the side column, odds on route rows */
.side-nofly { margin-top: 14px; }
.side-tries { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.side-try { font: inherit; font-size: 14px; font-weight: 600; color: var(--fog); background: transparent; border: 1px solid var(--line); border-radius: 999px; padding: 8px 14px; cursor: pointer; transition: border-color 0.15s ease, color 0.15s ease; }
.side-try:hover { border-color: var(--orange); color: var(--orange); }
.side-try:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.row-odds { display: block; font-size: 12px; color: var(--ash); }
.row-odds.is-pick { color: var(--good); font-weight: 600; }

/* ---- alerts by text */
.text-code { font-family: var(--voice); font-size: 20px; margin: 10px 0; color: var(--fog); }
.text-code strong { color: var(--orange); font-weight: 700; }

.trip-nudge { display: flex; align-items: center; gap: 12px; margin: 2px 0 10px; }
.trip-nudge .trip-add-note { margin: 0; flex: 1; }
.trip-nudge-btn { flex: none; background: var(--orange); border-color: var(--orange); color: var(--navy); font-weight: 700; }
.trip-nudge-btn:disabled { opacity: 0.6; }

/* Google's sign-in button, dressed by Milo when Google's own stylesheet has not arrived (see gsi-fix.js). */
.gsi-plain { height: auto; overflow: visible; }
.gsi-plain [role="button"] { display: flex; align-items: center; justify-content: center; box-sizing: border-box; width: 280px; max-width: 100%; height: 44px; padding: 0 18px; border-radius: 999px; background: #131314; border: 1px solid #8E918F; color: #E3E3E3; font-family: var(--body); font-weight: 500; font-size: 15px; line-height: 1; white-space: nowrap; cursor: pointer; position: relative; overflow: hidden; -webkit-tap-highlight-color: transparent; }
.gsi-plain [role="button"] div { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0; padding: 0; border: 0; background: none; }
.gsi-plain [role="button"] div:empty { display: none; }
.gsi-plain [role="button"] svg { width: 18px; height: 18px; display: block; flex: none; }
.gsi-plain [role="button"] span { margin: 0; padding: 0; }
.gsi-plain [role="button"] span + span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.gsi-plain [role="button"]:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
.gsi.gsi-plain [role="button"] { width: 260px; }
@media (max-width: 860px) { .lp-google.gsi-plain [role="button"] { width: 100%; } }

/* Admin: links to share */
.link-card { display: flex; align-items: center; flex-wrap: nowrap; justify-content: space-between; gap: 14px; }
.link-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 150px; }
.link-text .quiet { margin: 0; font-size: 14px; }
.link-url { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 14px; color: var(--orange); text-decoration: none; overflow-wrap: anywhere; margin-top: 4px; }
.link-url:hover { text-decoration: underline; }
.link-acts { display: flex; flex-direction: column; gap: 8px; flex: none; }
@media (min-width: 700px) { .link-acts { flex-direction: row; } }

/* Phones and tablets on the web: the header stays at the top while the conversation scrolls under it. */
@media (max-width: 719px) {
  body.chat:not(.in-app) .top { position: sticky; top: 0; z-index: 6; background: var(--ground); padding-top: max(12px, env(safe-area-inset-top)); padding-bottom: 8px; }
  body.chat:not(.in-app) .top::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 14px; background: linear-gradient(var(--ground), rgba(28, 29, 32, 0)); pointer-events: none; }
}

/* Mid-width screens (a folding phone opened up, a tablet): the same two columns as a desktop, with the conversation
   narrowed so Your flights fits beside it. */
@media (min-width: 720px) and (max-width: 1099px) {
  :root { --col: calc(100vw - clamp(270px, 38vw, 420px) - 24px - 72px); }
  body.in-app { --col: 640px; }
  .in-app.chat main { margin-left: auto !important; margin-right: auto !important; }
}

/* Behind the see-through iPhone keyboard: a plain panel, so the conversation does not show through it. */
.kb-cover { position: fixed; left: 0; right: 0; bottom: 0; background: var(--ground); z-index: 4; pointer-events: none; }
.kb-cover[hidden] { display: none; }

/* Admin: audience */
.aud-pick { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 10px; }
.aud-opt.is-on { background: var(--fog); border-color: var(--fog); color: var(--ground); }
.aud-key { margin: 0 0 6px; }
.aud-h3 { font-family: var(--voice); font-weight: 600; font-size: 16px; letter-spacing: -0.02em; margin: 22px 0 8px; color: var(--fog); }
.aud-funnel { background: var(--said); border-radius: 18px; padding: 14px 18px; display: grid; gap: 10px; }
.aud-step { display: grid; grid-template-columns: minmax(120px, 210px) minmax(40px, 1fr) 52px 44px; align-items: center; gap: 12px; font-size: 14.5px; }
.aud-step-name { color: #C9CCD1; }
.aud-bar { display: block; height: 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.07); overflow: hidden; }
.aud-bar i { display: block; height: 100%; border-radius: 999px; background: var(--fog); }
.aud-step-n { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--fog); }
.aud-step-pct { text-align: right; font-variant-numeric: tabular-nums; color: var(--ash); font-size: 13.5px; }
.aud-older { margin-top: 36px; padding-top: 22px; border-top: 1px solid var(--line); }
@media (max-width: 520px) { .aud-step { grid-template-columns: minmax(0, 1fr) 46px 40px; } .aud-bar { grid-column: 1 / -1; grid-row: 2; } }

/* Admin: email */
.mail-form { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.mail-label { font-size: 14px; font-weight: 600; color: var(--fog); margin-top: 4px; }
.mail-form .mail-subject { max-width: none; margin: 0; border-radius: 14px; }
.mail-body { width: 100%; font: inherit; font-size: 16px; line-height: 1.5; color: var(--fog); background: var(--ground); border: 1px solid var(--line); border-radius: 14px; padding: 12px 16px; resize: vertical; min-height: 160px; }
.mail-body:focus-visible, .mail-subject:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.mail-form .bench-bar { margin-top: 8px; }
.mail-state { margin: 4px 0 0; min-height: 1.4em; }
.mail-warn { margin: 6px 0 0; padding-left: 12px; border-left: 2px solid var(--warn); }

/* Admin: raw flight lookup */
.raw-out { margin: 10px 0 24px; }