/* BunnyBuddy on a phone.
 *
 * Built for one hand, at arm's length, under the table. The controls sit at
 * the bottom because that is where a thumb reaches; the answer scrolls above
 * them. Nothing here is translucent or hidden — this screen is not being
 * shared, which is the whole reason the phone works where a laptop window
 * would not. */

:root {
  --bg: #0a0d12;
  --panel: #12141c;
  --line: rgba(255,255,255,.1);
  --text: #edf2f7;
  --muted: #99a6ba;
  --accent: #61adff;
  --hear: #61adff;
  --mic: #59d6bf;
  --answer: #ff9e40;
  --good: #4ccc8c;
  --bad: #ff6b6b;
  /* The notch and the home indicator. Without these the control row sits
     under the gesture bar and the first tap dismisses the keyboard instead. */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
/* An explicit `display` beats the hidden attribute, so every element that
   gets one needs this or it can never be hidden again. The gate would have
   stayed over the app for ever after sign-in. */
[hidden] { display: none !important; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--bg); color: var(--text);
  font: 400 16px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  overscroll-behavior-y: none;
}

/* ---------------------------------------------------------------- the gate */
.gate {
  position: fixed; inset: 0; z-index: 20; overflow-y: auto;
  background: var(--bg); -webkit-overflow-scrolling: touch;
}
.setup {
  max-width: 560px; margin: 0 auto; padding: 24px 18px;
  padding-top: calc(24px + var(--safe-top));
  padding-bottom: calc(32px + var(--safe-bottom));
  display: grid; gap: 16px;
}
.setup-top { display: flex; align-items: center; gap: 13px; }
.setup-form { display: grid; gap: 14px; }
.scard {
  border: 1px solid var(--line); border-radius: 16px; padding: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.012));
  display: grid; gap: 10px;
}
.scard h2 { margin: 0; font-size: 15px; font-weight: 650; color: #fff; }
.scard .hint { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
/* The label and its asterisk share a line; a grid put the asterisk on its
   own row underneath, which read as a bullet rather than a marker. */
.scard label { display: grid; gap: 5px; font-size: 12.5px; color: var(--muted); }
.scard label > input, .scard label > textarea { grid-column: 1; }
.scard label { grid-template-columns: 1fr; }
.lbl { display: flex; align-items: baseline; gap: 5px; }
/* A red asterisk, not the word "required" — the app settled on the same. */
.req { color: var(--bad); font-style: normal; }
.scard input, .scard textarea {
  width: 100%; padding: 12px; border-radius: 11px; border: 1px solid var(--line);
  background: rgba(0,0,0,.3); color: var(--text);
  /* 16px exactly: smaller and iOS zooms the page when the field takes focus.
     The family is set on its own — inside the `font` shorthand `inherit`
     leaves a textarea on the user agent's monospace default. */
  font-size: 16px; line-height: 1.45; font-weight: 400;
  font-family: inherit; resize: vertical;
}
.scard input:focus, .scard textarea:focus {
  outline: none; border-color: rgba(97,173,255,.6);
}
.count { margin: 0; font-size: 11.5px; color: var(--muted); text-align: right; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips button {
  font: 500 12px/1 inherit; color: var(--text); cursor: pointer;
  padding: 7px 11px; border-radius: 999px;
  background: rgba(255,255,255,.07); border: 1px solid var(--line);
}
.choice { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.choice button {
  display: grid; gap: 3px; text-align: left; cursor: pointer;
  padding: 11px 12px; border-radius: 12px;
  background: rgba(255,255,255,.04); border: 1px solid var(--line); color: var(--muted);
  font: inherit;
}
.choice button b { font-size: 14px; font-weight: 640; color: var(--text); }
.choice button span { font-size: 11.5px; line-height: 1.4; }
.choice button.on {
  background: rgba(97,173,255,.14); border-color: rgba(97,173,255,.55);
}
.choice button.on b { color: #fff; }
.gate h1 { margin: 0; font-size: 22px; font-weight: 680; letter-spacing: -.5px; }
.gate > .setup > .setup-top p { margin: 2px 0 0; color: var(--muted); font-size: 13.5px; }
.fine { font-size: 13px; color: var(--muted); opacity: .8; }
.btn {
  width: 100%;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 26px; border: 0; border-radius: 14px;
  background: var(--accent); color: #07101f; font: 640 16px/1 inherit;
  text-decoration: none; cursor: pointer;
}
.btn.ghost { background: rgba(255,255,255,.08); color: var(--text); }
.btn.danger { background: rgba(255,107,107,.16); color: #ffb4b4; }

/* --------------------------------------------------------------- the shell */
.shell { display: flex; flex-direction: column; height: 100%; }
.bar {
  display: flex; align-items: center; gap: 10px;
  padding: calc(10px + var(--safe-top)) 14px 10px;
  border-bottom: 1px solid var(--line); background: var(--panel);
}
.who { font-size: 13px; color: var(--muted); margin-left: 4px;
       white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.endx { width: 30px; height: 30px; border-radius: 999px; flex: none;
        border: 1px solid rgba(255,107,107,.3); background: rgba(255,107,107,.17);
        color: #ffb4b4; font-size: 15px; line-height: 1; cursor: pointer; }
.endbtn {
  margin-left: auto; flex: none; padding: 7px 13px; border-radius: 999px;
  border: 1px solid rgba(255,107,107,.32); background: rgba(255,107,107,.15);
  color: #ffb4b4; font: 600 13px/1 inherit; cursor: pointer;
}
.clock + .endbtn { margin-left: 10px; }
.clock { margin-left: auto; font-variant-numeric: tabular-nums;
         color: var(--muted); font-size: 13px; }
.icon {
  width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line);
  background: none; color: var(--muted); font-size: 17px; cursor: pointer;
}
.bar .clock + .icon { margin-left: 8px; }
.bar .icon:only-of-type { margin-left: auto; }

.stage { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;
         padding: 14px 14px 4px; }
.card {
  border: 1px solid var(--line); border-radius: 16px; padding: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.012));
}
.intro h1 { margin: 0 0 8px; font-size: 19px; font-weight: 660; letter-spacing: -.3px; }
.intro p { margin: 0 0 8px; font-size: 14.5px; color: var(--muted); }
.warn { color: #ffcf9a; }

/* ------------------------------------------------------------- what it hears
   Pinned above the controls, one line. A growing transcript that pushes the
   answer around is unreadable on a phone, so it is clamped and the end is
   what shows — the end is the part just said. */
.heard {
  display: flex; align-items: center; gap: 9px; padding: 9px 14px;
  border-top: 1px solid var(--line); background: rgba(97,173,255,.07);
  font-size: 13.5px; color: var(--muted);
}
.heard span:last-child {
  flex: 1; min-width: 0; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; direction: rtl; text-align: left;
}
.eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; flex: none; }
.eq i { width: 3px; border-radius: 2px; background: var(--hear); height: 40%; }
.listening .eq i { animation: eq .7s ease-in-out infinite alternate; }
.listening .eq i:nth-child(2) { animation-delay: .18s }
.listening .eq i:nth-child(3) { animation-delay: .36s }
@keyframes eq { from { height: 25% } to { height: 100% } }

/* ------------------------------------------------------------ the controls
   The same five as the Mac app, in the same colours: five identically
   coloured buttons are told apart only by reading them, which is the one
   thing there is no time for mid-interview. The hues group them — the
   listening source is cool, the one that spends credit is warm, asking is
   the quiet one. Screen is here but disabled: a browser cannot read your
   screen, and a control that is silently missing reads as a bug. */
.dock {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px;
  padding: 10px 12px calc(10px + var(--safe-bottom));
  border-top: 1px solid var(--line); background: var(--panel);
}
.key {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  /* 62px, because this is pressed without looking and possibly under a desk. */
  min-height: 62px; padding: 9px 4px; border-radius: 999px; cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--t) 38%, transparent);
  background: color-mix(in srgb, var(--t) 11%, transparent);
  color: color-mix(in srgb, var(--t) 62%, var(--muted));
  font: 640 12px/1 inherit;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.key.hear   { --t: var(--hear); }
.key.answer { --t: var(--answer); }
.key.screen { --t: #c28fff; }
.key.follow { --t: #9eadcc; }
.key[disabled] { opacity: .38; }
/* Lit is the colour at full strength, with a ring: a fill alone disappears
   against a bright room on a phone screen. */
.key.on {
  color: #fff;
  border-color: color-mix(in srgb, var(--t) 95%, transparent);
  background: color-mix(in srgb, var(--t) 30%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--t) 16%, transparent);
}
.key:active:not([disabled]) { transform: scale(.97); }
.k-ico svg { width: 21px; height: 21px; fill: none; stroke: currentColor;
             stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ------------------------------------------------------------- the answers */
.turn { margin-bottom: 14px;
         border-color: color-mix(in srgb, var(--answer) 45%, transparent);
         background: rgba(255,158,64,.035); }
.q {
  display: flex; gap: 9px; align-items: flex-start; margin-bottom: 10px;
  font-size: 16px; font-weight: 640; line-height: 1.35;
}
.q {
  padding-bottom: 10px; border-bottom: 1px solid var(--line);
}
.q .n {
  flex: none; width: 22px; height: 22px; border-radius: 50%; margin-top: 2px;
  background: var(--answer); color: #1a0f00; font-size: 12px; font-weight: 800;
  display: grid; place-items: center;
}
.a { padding-top: 11px; }
.a { font-size: 15.5px; line-height: 1.62; }
.a p { margin: 0 0 10px; }
.a h3 { margin: 14px 0 7px; font-size: 15px; font-weight: 660; color: var(--accent); }
.a ul, .a ol { margin: 0 0 10px; padding-left: 20px; }
.a li { margin-bottom: 6px; }
.a strong { color: var(--accent); font-weight: 640; }
.a code {
  font: 400 13.5px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
  background: rgba(0,0,0,.35); padding: 1px 5px; border-radius: 5px;
}
.a pre {
  margin: 0 0 12px; padding: 12px; border-radius: 10px; overflow-x: auto;
  background: rgba(0,0,0,.4); border: 1px solid var(--line);
}
.a pre code { background: none; padding: 0; font-size: 13px; }
.a table { width: 100%; border-collapse: collapse; margin: 0 0 12px; font-size: 14px; }
.a th, .a td { text-align: left; padding: 7px 9px; border-bottom: 1px solid var(--line); }
.a th { color: var(--muted); font-size: 12.5px; font-weight: 640; }
.thinking { color: var(--muted); font-size: 14.5px; }
.err { color: var(--bad); font-size: 14.5px; }
.turn .again {
  display: inline-flex; gap: 7px; margin-top: 2px; padding: 8px 14px;
  border-radius: 999px; border: 1px solid var(--line); background: none;
  color: var(--muted); font: 600 13px/1 inherit; cursor: pointer;
}

/* ------------------------------------------------------------- the diagram
   Same two shapes the Mac app draws. Scrolled sideways rather than wrapped,
   because on a phone a wrapped sequence stops reading as a sequence. */
.glance { margin: 0 0 12px; padding: 12px; border-radius: 10px;
          background: rgba(255,255,255,.04);
          border: 1px solid color-mix(in srgb, var(--hear) 35%, transparent); }
.glance .cap { font-size: 11px; font-weight: 640; letter-spacing: .5px;
               color: var(--muted); margin-bottom: 9px; }
.flow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.flow b { font-size: 13px; font-weight: 640; padding: 7px 11px; border-radius: 999px;
          background: color-mix(in srgb, var(--hear) 16%, transparent);
          border: 1px solid color-mix(in srgb, var(--hear) 50%, transparent); }
.flow i { color: var(--hear); font-style: normal; }
.seq { overflow-x: auto; }
.seq-grid { display: grid; gap: 4px; min-width: 260px; }
.seq-lanes { display: grid; gap: 6px; }
.seq-lanes b { font-size: 12px; font-weight: 640; text-align: center; padding: 6px 4px;
               border-radius: 7px; background: rgba(0,0,0,.3); border: 1px solid var(--line); }
.seq-step { position: relative; height: 34px; font-size: 12px; color: var(--muted); }
.seq-step em { position: absolute; top: 0; font-style: normal; text-align: center;
               white-space: nowrap; }
.seq-step em::after { content: ""; position: absolute; left: 0; right: 0; top: 20px;
                      border-top: 1.4px solid var(--hear); }
.seq-step.ret em { color: var(--muted); }
.seq-step.ret em::after { border-top-style: dashed; border-top-color: var(--muted); }

/* ---------------------------------------------------------------- the sheet */
dialog {
  width: min(94vw, 460px); border: 1px solid var(--line); border-radius: 18px;
  background: var(--panel); color: var(--text); padding: 0;
  margin: auto auto calc(16px + var(--safe-bottom));
}
dialog::backdrop { background: rgba(0,0,0,.6); }
.sheet-in { padding: 20px; display: grid; gap: 12px; }
.sheet-in h2 { margin: 0; font-size: 17px; font-weight: 660; }
.sheet-in label { display: grid; gap: 5px; font-size: 13px; color: var(--muted); }
.sheet-in input, .sheet-in textarea {
  width: 100%; padding: 12px; border-radius: 11px; border: 1px solid var(--line);
  background: rgba(0,0,0,.3); color: var(--text);
  /* 16px exactly: anything smaller and iOS Safari zooms the page on focus. */
  font-size: 16px; line-height: 1.45; font-family: inherit; resize: vertical;
}
.sheet-in menu { display: flex; gap: 10px; margin: 4px 0 0; padding: 0; }
.sheet-in menu .btn { flex: 1; }

@media (prefers-reduced-motion: reduce) { .eq i { animation: none; } }

/* A line under the transcript. The first version failed silently, which is
   indistinguishable from listening to a quiet room. */
.status {
  margin: 0; padding: 8px 14px; font-size: 13px; line-height: 1.45;
  color: #ffcf9a; background: rgba(255,158,64,.1);
  border-top: 1px solid var(--line);
}

/* ------------------------------------------------- past sessions
   A list of everything you have asked, whichever device heard it.
   Taller than the other sheets because it is read rather than filled in. */
#past { width: min(96vw, 560px); margin: auto; }
.past-in { max-height: min(86vh, 760px); overflow-y: auto; }
.past-top { display: flex; align-items: center; gap: 10px; }
.past-top h2 { margin-right: auto; }
.past-top .endx { border-color: var(--line); background: rgba(255,255,255,.07);
                  color: var(--muted); }

.past-s { border: 1px solid var(--line); border-radius: 13px;
          background: rgba(0,0,0,.22); overflow: hidden; }
.past-s + .past-s { margin-top: 9px; }
.past-s > summary {
  display: flex; align-items: center; gap: 10px; padding: 13px 14px;
  cursor: pointer; list-style: none; font-size: 14px;
}
.past-s > summary::-webkit-details-marker { display: none; }
.past-h { font-weight: 600; }
.past-n { margin-left: auto; font-size: 12px; color: var(--muted);
          font-variant-numeric: tabular-nums; }
.past-s[open] > summary { border-bottom: 1px solid var(--line); }

.past-t { padding: 13px 14px; }
.past-t + .past-t { border-top: 1px solid var(--line); }
.past-q { margin: 0 0 9px; font-size: 14px; line-height: 1.5; font-weight: 560; }
/* Which device heard it. The one fact a local transcript could not record. */
.past-src {
  display: inline-block; margin-right: 7px; padding: 2px 7px; border-radius: 6px;
  background: rgba(255,255,255,.09); color: var(--muted);
  font-size: 11px; font-weight: 600; vertical-align: 1px;
}
.past-t .answer { font-size: 14px; }