/* ==========================================================================
 * coach-chat.css — one chat shell for both Coaches, shaped like the Claude app.
 *
 * WHY
 * The two Coaches drifted into different chat UIs, and both accumulated
 * furniture between the conversation and the input: on a 390px phone the
 * redraft Coach stacked TEN elements there - a model A/B toggle, a standing
 * suggestion rail, an emblem - so the thing you type into sat below a menu you
 * did not ask for, and the keyboard then shoved the whole stack up.
 *
 * The Claude app gets three things right that both of these got wrong:
 *   1. NOTHING sits between the last message and the composer. Suggestions
 *      belong under the answer that prompted them, not pinned above the input
 *      where they are visible before you have asked anything.
 *   2. The assistant's text is the page. No avatar column stealing width, no
 *      bubble chrome around long analysis - a bubble is for a short user line,
 *      not for six paragraphs of reasoning.
 *   3. The composer is one rounded field that grows with what you type, pinned
 *      to the bottom with real safe-area padding so it clears the home
 *      indicator, and it does not jump when the keyboard opens.
 *
 * Everything here is scoped to .gwc so it can be adopted a page at a time
 * without touching what already works.
 * ========================================================================== */

/* ── CONVERSATION ─────────────────────────────────────────────────────────── */
.gwc-thread {
  display: flex; flex-direction: column; gap: 26px;
  padding: 18px 16px 8px;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;   /* stop the page bouncing behind the thread */
}

.gwc-msg { display: block; max-width: 100%; }

/* The user's line is the short one, so it gets the bubble and hugs the right.
   The assistant's answer is long-form and reads as page text. */
.gwc-msg.user {
  align-self: flex-end; margin-left: auto;
  max-width: 84%;
  background: rgba(0, 212, 255, .10);
  border: 1px solid rgba(0, 212, 255, .18);
  border-radius: 18px 18px 4px 18px;
  padding: 10px 14px;
  font-size: 15px; line-height: 1.5;
}
.gwc-msg.coach {
  font-size: 16px;            /* the Claude app reads at 16, not 14 */
  line-height: 1.62;          /* long analysis needs the air */
  color: var(--txt1, #e6f0f8);
  letter-spacing: .1px;
}
.gwc-msg.coach > *:first-child { margin-top: 0; }
.gwc-msg.coach > *:last-child { margin-bottom: 0; }
.gwc-msg.coach p { margin: 0 0 14px; }
.gwc-msg.coach ul, .gwc-msg.coach ol { margin: 0 0 14px; padding-left: 22px; }
.gwc-msg.coach li { margin: 0 0 6px; }
.gwc-msg.coach h2, .gwc-msg.coach h3 {
  font-family: var(--display, inherit); font-weight: 800;
  font-size: 17px; letter-spacing: .3px; text-transform: uppercase;
  margin: 22px 0 10px; color: var(--txt1, #e6f0f8);
}
.gwc-msg.coach strong { color: #fff; font-weight: 700; }
.gwc-msg.coach code {
  font-family: var(--mono, monospace); font-size: 13.5px;
  background: rgba(255,255,255,.06); padding: 1px 5px; border-radius: 4px;
}
/* Tables matter here: the Coach compares players constantly and both renderers
   used to flatten a comparison into prose. */
.gwc-msg.coach table { width: 100%; border-collapse: collapse; margin: 0 0 14px; font-size: 14px; }
.gwc-msg.coach th, .gwc-msg.coach td { text-align: left; padding: 7px 8px; border-bottom: 1px solid rgba(255,255,255,.07); }
.gwc-msg.coach th { font-family: var(--mono, monospace); font-size: 10.5px; letter-spacing: 1px; text-transform: uppercase; color: var(--txt3, #4a6076); }
.gwc-msg.coach td:not(:first-child) { font-family: var(--mono, monospace); font-variant-numeric: tabular-nums; }

/* ── NEXT-STEP CHIPS ──────────────────────────────────────────────────────
   Under the answer they belong to. A standing rail above the composer is a
   menu; this is a follow-up. */
.chips-under { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.chip-under {
  font-family: var(--body, inherit); font-size: 13.5px; line-height: 1.25;
  color: var(--teal, #00d4ff);
  background: rgba(0, 212, 255, .07);
  border: 1px solid rgba(0, 212, 255, .26);
  border-radius: 999px; padding: 9px 14px; min-height: 38px;
  cursor: pointer; text-align: left; max-width: 100%;
}
.chip-under:active { background: rgba(0, 212, 255, .16); }

/* ── COMPOSER ─────────────────────────────────────────────────────────────
   Pinned, rounded, grows with content, clears the home indicator. Nothing is
   allowed between this and the thread. */
.gwc-composer {
  position: sticky; bottom: 0; z-index: 20;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, transparent, var(--bg, #050709) 22%);
}
.gwc-inputrow {
  display: flex; align-items: flex-end; gap: 8px;
  background: var(--s2, #0d1219);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 24px; padding: 6px 6px 6px 16px;
}
.gwc-inputrow:focus-within { border-color: rgba(0,212,255,.45); }
.gwc-input {
  flex: 1; min-width: 0;
  background: transparent; border: 0; outline: none; resize: none;
  color: var(--txt1, #e6f0f8);
  font-family: var(--body, inherit); font-size: 16px;  /* 16px stops iOS zooming on focus */
  line-height: 1.45; padding: 9px 0; max-height: 140px;
}
.gwc-input::placeholder { color: var(--txt3, #4a6076); }
.gwc-send {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%;
  border: 0; cursor: pointer; display: flex; align-items: center; justify-content: center;
  background: var(--teal, #00d4ff); color: #04121a; font-size: 17px; font-weight: 700;
}
.gwc-send:disabled { opacity: .35; cursor: default; }
.gwc-disclaimer {
  text-align: center; font-family: var(--mono, monospace);
  font-size: 10px; line-height: 1.5; color: var(--txt3, #4a6076);
  padding: 6px 16px 0;
}

/* ── ACTION ROW under an assistant answer ─────────────────────────────────
   Copy / retry, the way the app puts them: quiet until wanted. */
.gwc-actions { display: flex; gap: 4px; margin-top: 12px; }
.gwc-actions button {
  background: transparent; border: 0; cursor: pointer;
  color: var(--txt3, #4a6076); font-size: 12px;
  padding: 6px 8px; border-radius: 7px; min-height: 32px;
}
.gwc-actions button:active { background: rgba(255,255,255,.06); color: var(--txt2, #8ba3ba); }

/* ── TYPING ───────────────────────────────────────────────────────────────── */
.gwc-typing { display: flex; gap: 5px; padding: 4px 0 10px; }
.gwc-typing i {
  width: 6px; height: 6px; border-radius: 50%; background: var(--txt3, #4a6076);
  animation: gwcblink 1.3s infinite both;
}
.gwc-typing i:nth-child(2) { animation-delay: .18s; }
.gwc-typing i:nth-child(3) { animation-delay: .36s; }
@keyframes gwcblink { 0%, 60%, 100% { opacity: .28 } 30% { opacity: 1 } }
@media (prefers-reduced-motion: reduce) { .gwc-typing i { animation: none; opacity: .5 } }

@media (max-width: 420px) {
  .gwc-thread { padding: 14px 14px 6px; gap: 22px; }
  .gwc-msg.coach { font-size: 15.5px; }
}