/* Gillie — phone first, dark, same house as Foreigndly and the portfolio.
 *
 * Palette is the portfolio's (site/public/index.html) inverted: there, deep
 * sea on cream; here, cream on deep sea, because the centrepiece is a glowing
 * orb and a glow on a cream background is a smudge. Same two colours, so it
 * still reads as the same family.
 *
 * No webfont on purpose. The portfolio pulls Bricolage + Inter from Google,
 * which costs two extra origins, a Content-Security-Policy hole and a render
 * that depends on the network — and this thing has to work on a phone with one
 * bar and inside a service-worker cold start. The system stack is what iOS and
 * Android already have in memory.
 */
:root {
  --sea: #0E3A53;
  --sea-deep: #0A2C40;
  --sea-2: #1C6E8C;
  --cream: #F2EDE2;
  --cream-dim: #C9D8DE;
  --cyan: #7ED6DF;
  --roof: #C8552B;
  --good: #58C08E;
  --warn: #E0A33E;
  --line: rgba(233, 241, 242, .14);
  --body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", system-ui, sans-serif;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; height: 100%; }

body {
  font-family: var(--body);
  color: var(--cream);
  /* The fixed gradient rather than a scrolling one: on iOS the address bar
     collapsing changes the viewport height mid-scroll, and a background-size
     tied to it visibly jumps. */
  background: var(--sea-deep)
    radial-gradient(120% 80% at 50% 0%, #12455F 0%, #0A2C40 55%, #071E2C 100%)
    fixed;
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  overscroll-behavior-y: contain;
  -webkit-font-smoothing: antialiased;
}

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

header {
  display: flex; align-items: center; gap: 10px;
  padding: calc(env(safe-area-inset-top) + 14px) 18px 10px;
}
header h1 {
  font-size: 17px; font-weight: 700; letter-spacing: .02em; margin: 0; flex: 1;
}
.mark {
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--cyan); box-shadow: 0 0 12px var(--cyan);
  transition: background .3s, box-shadow .3s;
}
.mark.big { width: 34px; height: 34px; margin: 0 auto 14px; display: block; }
body[data-state="thinking"] .mark { background: var(--warn); box-shadow: 0 0 12px var(--warn); }
body[data-state="speaking"] .mark { background: var(--roof); box-shadow: 0 0 12px var(--roof); }
body[data-state="offline"] .mark { background: #6C7A80; box-shadow: none; }

#signout, #esc-btn {
  background: none; border: 1px solid var(--line); color: var(--cream-dim);
  font: inherit; font-size: 12px; padding: 5px 11px; border-radius: 999px;
}
#esc-btn[data-open="1"] { background: rgba(233, 241, 242, .1); color: var(--cream); }
#esc-btn .warn-count { color: var(--warn); }
#esc-count { font-weight: 700; }

/* The escalations dropdown: over the stage, not in the page flow. */
#esc-panel {
  position: absolute; z-index: 5;
  top: calc(env(safe-area-inset-top) + 52px);
  left: 12px; right: 12px; max-height: 55dvh; overflow-y: auto;
  background: rgba(7, 30, 44, .97); border: 1px solid var(--line);
  border-radius: 14px; padding: 12px 13px;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
#esc-panel[hidden] { display: none; }
#esc-panel h2 {
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: #8FA9B4; font-weight: 700; margin: 0 0 10px;
}

/* ------------------------------------------------------------------- stage
 *
 * The orb never scrolls away (owner 2026-08-08): main is a column that does
 * NOT scroll; the stage keeps its natural height and the thread pane below it
 * is the only thing that moves.
 */

main { flex: 1; display: flex; flex-direction: column; min-height: 0;
       overflow: hidden; padding: 0 18px 0; position: relative; }

#thread-wrap { flex: 1; min-height: 0; overflow-y: auto;
               -webkit-overflow-scrolling: touch; padding-bottom: 8px; }

.stage { flex: 0 0 auto; text-align: center; padding: 6px 0 4px; }
#orb {
  /* Smaller than the original 62vw: the orb shares the viewport with a
     conversation pane now, and the pane is the part he reads. */
  width: min(38vw, 190px); height: min(38vw, 190px);
  display: block; margin: 0 auto;
  /* The orb floats. 7s so it never syncs with the 1.1s breathing inside the
     canvas — two near-periods would beat visibly. */
  animation: float 7s ease-in-out infinite;
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}
@media (prefers-reduced-motion: reduce) { #orb { animation: none; } }

#caption {
  margin: 2px 0 14px; min-height: 20px; font-size: 14px;
  color: var(--cream-dim); line-height: 1.45;
  padding: 0 6px; word-wrap: break-word;
}

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

#thread { display: flex; flex-direction: column; gap: 9px; margin-bottom: 22px; }
.bubble {
  max-width: 88%; padding: 11px 14px; border-radius: 16px;
  font-size: 15px; line-height: 1.5; white-space: pre-wrap; word-wrap: break-word;
}
.bubble.owner {
  align-self: flex-end; background: var(--sea-2); color: #fff;
  border-bottom-right-radius: 5px;
}
.bubble.gillie {
  align-self: flex-start; background: rgba(233, 241, 242, .09);
  border: 1px solid var(--line); border-bottom-left-radius: 5px;
}
.bubble.err { color: #FFC9B5; border-color: rgba(200, 85, 43, .5); }

/* ---------------------------------------------------------------- activity */

#activity { list-style: none; margin: 0; padding: 0;
            border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
#activity li {
  display: flex; gap: 10px; align-items: baseline;
  padding: 10px 13px; font-size: 13px; line-height: 1.4;
  border-top: 1px solid var(--line);
}
#activity li:first-child { border-top: none; }
#activity .k {
  flex: 0 0 auto; font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
  font-weight: 700; padding: 3px 7px; border-radius: 999px;
  background: rgba(233, 241, 242, .1); color: var(--cream-dim);
}
#activity li.ok   .k { color: var(--good); background: rgba(88, 192, 142, .15); }
#activity li.warn .k { color: var(--warn); background: rgba(224, 163, 62, .16); }
#activity li.bad  .k { color: #FF9C7A; background: rgba(200, 85, 43, .2); }
#activity .t { flex: 1; color: var(--cream); }
#activity .w { flex: 0 0 auto; color: #7E96A2; font-size: 11px; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- controls */

#controls {
  display: flex; gap: 9px; align-items: center;
  padding: 10px 14px calc(env(safe-area-inset-bottom) + 12px);
  background: rgba(7, 30, 44, .92);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
}
#controls button {
  flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid var(--line); background: rgba(233, 241, 242, .08);
  color: var(--cream); display: grid; place-items: center;
}
#controls button svg { width: 21px; height: 21px; }
#mic[data-on="1"] { background: var(--cyan); color: #06202F; border-color: var(--cyan); }
#mic[hidden] { display: none; }
#text {
  flex: 1; min-width: 0; height: 46px; border-radius: 23px;
  border: 1px solid var(--line); background: rgba(233, 241, 242, .07);
  color: var(--cream); font: inherit;
  /* 16px exactly: anything smaller and iOS Safari zooms the page on focus and
     never zooms back out. */
  font-size: 16px; padding: 0 17px;
}
#text::placeholder { color: #7E96A2; }
#text:focus, #controls button:focus-visible {
  outline: 2px solid var(--cyan); outline-offset: 1px;
}
body[data-busy="1"] #send, body[data-busy="1"] #mic { opacity: .45; }

/* -------------------------------------------------------------------- gate */

#gate {
  position: fixed; inset: 0; z-index: 10;
  display: grid; place-items: center; padding: 26px;
  background: var(--sea-deep)
    radial-gradient(120% 80% at 50% 0%, #12455F 0%, #0A2C40 60%, #071E2C 100%);
}
#gate[hidden] { display: none; }
.gate-card { max-width: 340px; text-align: center; }
.gate-card h2 { font-size: 21px; margin: 0 0 10px; }
.gate-card p { font-size: 14.5px; line-height: 1.55; color: var(--cream-dim); margin: 0 0 18px; }
#ask-link {
  font: inherit; font-size: 15px; font-weight: 600;
  padding: 13px 22px; border-radius: 999px; border: none;
  background: var(--cyan); color: #06202F; width: 100%;
}
#ask-link:disabled { opacity: .55; }
.note { font-size: 13px; margin: 14px 0 0 !important; min-height: 18px; }