/* Ask Pitch AI — open presentation Q&A chat (Signal Console).
   Flat, blue-accented, matches the app shell. No gradients on the marks. */

.coach-wrap {
  max-width: 880px;
  width: 100%;
  min-width: 0;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  min-height: calc(100dvh - 96px);
}

/* header */
.coach-hero { display: flex; align-items: center; gap: 14px; padding-bottom: 16px;
  border-bottom: 1px solid var(--border); }
.coach-hero .ic { width: 46px; height: 46px; flex: none; }
.coach-hero .ic img { width: 100%; height: 100%; display: block; }
.coach-hero > div { min-width: 0; }   /* let the text block shrink so long Thai tokens wrap */
.coach-hero h1 { margin: 0 0 3px; font-family: var(--font-display); font-size: 22px; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.coach-hero p { margin: 0; font-size: 13px; color: var(--text-dim); line-height: 1.5; max-width: 60ch; overflow-wrap: anywhere; }

/* thread */
.coach-thread { display: flex; flex-direction: column; gap: 16px; flex: 1 1 auto;
  padding: 20px 0 4px; }
.cmsg { display: flex; gap: 10px; max-width: 88%; }
.cmsg.user { align-self: flex-end; flex-direction: row-reverse; }
.cmsg .av { width: 30px; height: 30px; border-radius: 9px; flex: none; display: grid; place-items: center; }
.cmsg.bot .av { background: none; overflow: hidden; }
.cmsg.bot .av img { width: 100%; height: 100%; display: block; }
.cmsg.user .av { background: var(--surface-3); color: var(--text-faint); font-size: 12.5px; font-weight: 700; }
.cmsg .bubble { padding: 11px 14px; border-radius: 15px; font-size: 14.5px; line-height: 1.62;
  min-width: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.cmsg.bot .bubble { background: var(--surface-2); border: 1px solid var(--border); color: var(--text);
  border-top-left-radius: 5px; }
.cmsg.user .bubble { background: var(--blue); color: #fff; border-top-right-radius: 5px; }
.cmsg.typing .bubble { color: var(--text-faint); }

/* suggestion chips */
.coach-suggest { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 2px; }
.coach-suggest button { font-family: var(--font-body); font-size: 13px; color: var(--text);
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-pill);
  padding: 8px 14px; cursor: pointer; transition: border-color .15s, color .15s; }
.coach-suggest button:hover { border-color: var(--blue); color: var(--blue-bright); }

/* composer — pinned to the bottom of the viewport while the thread scrolls */
.coach-composer { position: sticky; bottom: 0; display: flex; gap: 10px; align-items: flex-end;
  padding: 12px 0 10px; margin-top: 14px; background: var(--bg); }
.coach-composer::before { content: ""; position: absolute; left: 0; right: 0; top: -22px; height: 22px;
  background: linear-gradient(180deg, transparent, var(--bg)); pointer-events: none; }
.coach-input { flex: 1 1 auto; min-width: 0; resize: none; min-height: 48px; max-height: 168px; padding: 13px 15px;
  font-family: var(--font-body); font-size: 14.5px; color: var(--text); background: var(--surface);
  border: 1px solid var(--border-strong); border-radius: 14px; line-height: 1.5; }
.coach-input:focus { outline: none; border-color: var(--blue); }
.coach-input::placeholder { color: var(--text-faint); }
.coach-send { flex: none; width: 48px; height: 48px; border-radius: 13px; border: none;
  background: var(--blue); color: #fff; cursor: pointer; display: grid; place-items: center; }
.coach-send svg { width: 20px; height: 20px; }
.coach-send:hover { filter: brightness(1.08); }
.coach-send:disabled { opacity: .5; cursor: default; filter: none; }
.coach-disc { font-size: 11px; color: var(--text-faint); text-align: center; padding-bottom: 8px; }

@media (max-width: 640px) {
  .coach-wrap { min-height: calc(100dvh - 120px); }
  .cmsg { max-width: 94%; }
  .coach-hero p { font-size: 12.5px; }
}