* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: radial-gradient(120% 120% at 50% 0%, #dbe4f6 0%, #c2cfe8 60%, #aab9dc 100%);
  color: #0b1220; -webkit-font-smoothing: antialiased;
  min-height: 100dvh; overflow: hidden;
}
.desktop-shell { width: 100vw; min-height: 100dvh; height: 100dvh; }
.phone-screen { position: relative; width: 100%; height: 100%; overflow: hidden;
  background: linear-gradient(180deg, #E8EEFC 0%, #C9D8F7 100%); }
.coach { height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; background: transparent; }
.topbar { padding: 18px 32px 14px; font-size: 20px; font-weight: 650; text-align: left;
  color: #0b1220; border-bottom: 1px solid rgba(20, 40, 90, 0.08); background: rgba(255,255,255,0.22); }
.chat { min-height: 0; overflow-y: auto; padding: 22px clamp(20px, 7vw, 120px) 16px; background: transparent;
  display: flex; flex-direction: column; gap: 6px; }
.chat::-webkit-scrollbar { width: 0; }
.row { display: flex; height: fit-content; flex-shrink: 0; background: transparent; margin-top: 2px; }
.row.coach { justify-content: flex-start; }
.row.user { justify-content: flex-end; }
.bubble { position: relative; width: fit-content; max-width: min(720px, 74%); padding: 10px 14px;
  font-size: clamp(16px, 1.45vw, 20px); line-height: 1.42; font-weight: 400; word-wrap: break-word; white-space: pre-wrap;
  border-radius: 14px; box-shadow: 0 1px 0.5px rgba(11, 20, 26, 0.13); }
.row.coach .bubble { background: #135BEC; color: #ffffff; }
.row.user .bubble { background: #FEF0B8; color: #111111; }
.row.coach .bubble::after { content: ""; position: absolute; bottom: 0; left: -9px; width: 16px; height: 20px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='7' height='9' viewBox='0 0 7 9'><path d='M7 1 C7 5 5 8 1 8 C3 7 4 5 4 2 C4 1 5 1 7 1 Z' fill='%23135BEC'/></svg>") no-repeat; background-size: 100% 100%; }
.row.user .bubble::after { content: ""; position: absolute; bottom: 0; right: -9px; width: 16px; height: 20px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='7' height='9' viewBox='0 0 7 9'><path d='M0 1 C0 5 2 8 6 8 C4 7 3 5 3 2 C3 1 2 1 0 1 Z' fill='%23FEF0B8'/></svg>") no-repeat; background-size: 100% 100%; }
.bubble[data-interrupted="true"]::before { content: "interrupted"; display: block; margin-bottom: 3px; font-size: 11px; opacity: .72; text-transform: uppercase; letter-spacing: .06em; }
.dock { padding: 10px 24px 20px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; background: rgba(255,255,255,.12); }
.orb-wrap { display: flex; justify-content: center; grid-column: 2; padding: 2px 0; }
#coach-orb { width: clamp(90px, 10vw, 132px); height: clamp(90px, 10vw, 132px); }
.controls { display: flex; gap: 10px; grid-column: 1; grid-row: 1; }
.join-button, .mic-button { border: none; border-radius: 22px; padding: 10px 20px; font-size: 15px; font-weight: 600; cursor: pointer; }
.join-button { background: #135BEC; color: #fff; }
.join-button.is-joined { background: #2f5bd0; }
.mic-button { background: rgba(255,255,255,.6); color: #0b1220; }
.mic-button[aria-pressed="true"] { background: #FEF0B8; color: #111; }
.mic-button:disabled { opacity: .5; cursor: default; }
.call-status { grid-column: 3; grid-row: 1; justify-self: end; font-size: 13px; color: rgba(20,40,90,.68); }
@media (max-width: 720px) {
  .topbar { padding: 14px 18px 10px; }
  .chat { padding: 14px 14px 10px; }
  .bubble { max-width: 88%; font-size: 16px; }
  .dock { grid-template-columns: 1fr; gap: 7px; padding: 8px 14px 14px; }
  .orb-wrap, .controls, .call-status { grid-column: 1; grid-row: auto; justify-self: center; }
}
/* ── Colour change drama ──────────────────────────────────────────────────────
   The background colour swaps INSTANTLY. These two animations ride on top so the
   change is felt, not just seen: a burst that floods out from the centre, and a
   quick settle on the screen itself. */
.color-burst {
  position: absolute; inset: 0; z-index: 5; pointer-events: none;
  opacity: 0; transform: scale(0.35);
  animation: burstOut 620ms cubic-bezier(.16,.9,.3,1) forwards;
}
@keyframes burstOut {
  0%   { opacity: .95; transform: scale(0.30); }
  55%  { opacity: .55; transform: scale(1.25); }
  100% { opacity: 0;   transform: scale(1.9); }
}
.screen-settle { animation: settle 520ms cubic-bezier(.2,.9,.25,1); }
@keyframes settle {
  0%   { transform: scale(1.028) translateY(-4px); }
  40%  { transform: scale(0.994) translateY(2px); }
  70%  { transform: scale(1.004) translateY(-1px); }
  100% { transform: none; }
}

/* ── Week grid component (the coach SHOWS the week) ───────────────────────── */
.weekcard{width:100%;max-width:88%;background:rgba(255,255,255,.92);border-radius:14px;padding:12px 13px 11px;
  box-shadow:0 2px 8px -2px rgba(11,20,26,.18);font-size:14px;color:#16233b}
.weekhead{display:flex;justify-content:space-between;align-items:baseline;font-weight:700;margin-bottom:9px}
.weekhead .pct{font-size:18px;color:#135BEC}
.habit{display:flex;align-items:center;gap:9px;margin:7px 0}
.hname{flex:1;font-size:13px;line-height:16px}
.dots{display:flex;gap:3px}
.cell{width:19px;height:19px;border-radius:5px;font-size:9px;font-weight:700;display:flex;align-items:center;justify-content:center}
.cell.on{background:#2fb56b;color:#fff}
.cell.off{background:rgba(16,32,60,.10);color:rgba(16,32,60,.42)}
.hcount{font-size:12px;font-weight:700;color:#48566f;min-width:26px;text-align:right}