/* Ask the Coach (coachchat.js): the chat panel at the table (inside the Coach's box) and on the lesson pages (her face
   in the corner). Slack-like: her answer, the buttons for the next question under it, then the box to type in. */

.coach-chat { display: flex; flex-direction: column; gap: 6px; flex: none; padding: 6px 10px 10px; min-width: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.14); }
.coach-chat[hidden] { display: none; }
.cc-thread { display: flex; flex-direction: column; gap: 6px; max-height: min(34vh, 260px); overflow-y: auto; min-height: 0; }
.cc-thread:empty { display: none; }
.cc-msg p { margin: 0; line-height: 1.3; overflow-wrap: anywhere; }
.cc-me { align-self: flex-end; max-width: 85%; background: rgba(255, 255, 255, 0.12); border-radius: 10px 10px 2px 10px;
  padding: 5px 9px; font-size: 0.95em; }
.cc-her { align-self: stretch; }
.cc-link { display: inline-block; margin-top: 4px; color: #f2c661; font-weight: 600; text-decoration: underline; }
.cc-next, .cc-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; min-width: 0; }
.cc-chips { margin-top: 0; }
.cc-chip { font: inherit; font-size: 0.88em; line-height: 1.2; padding: 4px 9px; border-radius: 14px; cursor: pointer;
  border: 1px solid rgba(242, 198, 97, 0.7); background: rgba(242, 198, 97, 0.12); color: inherit; text-decoration: none;
  max-width: 100%; text-align: left; overflow-wrap: anywhere; }
.cc-chip:hover, .cc-chip:focus-visible { background: rgba(242, 198, 97, 0.28); }
/* the move at the table ("Pass these three") is the one to press: solid gold like Send, on a row of its own */
.cc-chip.cc-action { flex: 1 0 100%; text-align: center; font-weight: 700; border: 0; background: #f2c661;
  color: #1d2a20; padding: 7px 12px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35); }
.cc-chip.cc-action:hover, .cc-chip.cc-action:focus-visible { background: #f7d683; }
.cc-chip.cc-action:disabled { opacity: 0.55; cursor: default; }
.cc-form { display: flex; gap: 6px; min-width: 0; }
.cc-input { flex: 1 1 auto; min-width: 0; font: inherit; font-size: 16px; padding: 6px 9px; border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.35); background: #fffdf7; color: #1d1d1d; }
.cc-send { flex: none; font: inherit; font-weight: 600; padding: 6px 12px; border-radius: 8px; cursor: pointer;
  border: 0; background: #f2c661; color: #1d2a20; }
.cc-send:disabled { opacity: 0.6; cursor: default; }

/* her face moves with what she says (the server picks the wiggle), for about a second */
@keyframes coach-nod { 0%, 100% { transform: none; } 30% { transform: translateY(3px); } 60% { transform: translateY(-1px); } }
@keyframes coach-wink { 0%, 100% { transform: none; } 40% { transform: rotate(-7deg) scale(1.04); } }
@keyframes coach-laugh { 0%, 100% { transform: none; } 20%, 60% { transform: rotate(4deg); } 40%, 80% { transform: rotate(-4deg); } }
@keyframes coach-shrug { 0%, 100% { transform: none; } 40% { transform: translateY(-4px) scale(1.03); } }
@keyframes coach-point { 0%, 100% { transform: none; } 40% { transform: translateX(-5px) rotate(-3deg); } }
@keyframes coach-yawn { 0%, 100% { transform: none; } 50% { transform: scaleY(1.08) rotate(2deg); } }
@keyframes coach-gentle { 0%, 100% { opacity: 1; } 50% { opacity: 0.75; } }
.coach-wiggle-nod { animation: coach-nod 0.9s ease-in-out 1; }
.coach-wiggle-wink { animation: coach-wink 0.8s ease-in-out 1; }
.coach-wiggle-laugh { animation: coach-laugh 0.9s ease-in-out 1; }
.coach-wiggle-shrug { animation: coach-shrug 0.8s ease-in-out 1; }
.coach-wiggle-point { animation: coach-point 0.8s ease-in-out 1; }
.coach-wiggle-yawn { animation: coach-yawn 1.1s ease-in-out 1; }
@media (prefers-reduced-motion: reduce) {
  .coach-wiggle-nod, .coach-wiggle-wink, .coach-wiggle-laugh, .coach-wiggle-shrug, .coach-wiggle-point, .coach-wiggle-yawn {
    animation: coach-gentle 0.9s ease-in-out 1; }
}

/* the lesson pages: her face in the bottom corner, the chat above it */
.coach-chat-float { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 60; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.coach-chat-float[hidden] { display: none; }
.coach-chat-face { width: 56px; height: 56px; border-radius: 50%; padding: 0; cursor: pointer; font-size: 0; color: transparent;
  border: 2px solid #f2c661; background: #f6ecd6 url("/art/coach.webp?v=51e15cc0a0") center 12% / 112% auto no-repeat;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35); }
.coach-chat-box { width: min(360px, calc(100vw - 32px)); max-height: calc(100vh - 110px); display: flex; flex-direction: column;
  background: #0b2c1e; color: #fdf8ec; border-radius: 12px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35); overflow: hidden; }
.coach-chat-box[hidden] { display: none; }
.coach-chat-box .cc-head { display: flex; justify-content: space-between; align-items: center; padding: 8px 10px 2px; }
.cc-x { font: inherit; font-size: 1.3em; line-height: 1; background: none; border: 0; color: inherit; cursor: pointer; padding: 2px 6px; }
.coach-chat-box .coach-chat { border-top: 0; flex: 1 1 auto; min-height: 0; overflow: hidden; }
.coach-chat-box .cc-thread { flex: 0 1 auto; max-height: none; }
.coach-chat-box .cc-chips, .coach-chat-box .cc-form { flex: none; }

/* at the table: its own box beside her face, placed by app.js (chatPlace) */
.coach-chat-box.at-table { position: fixed; z-index: 48; }

/* the replay button on an answer that has her voice: at the answer's top right, beside her first words, big enough
   for a finger; it pulses while her clip is on its way */
.cc-her::after { content: ""; display: block; clear: both; }
.cc-hear { float: right; font: inherit; font-size: 1em; line-height: 1; min-width: 36px; min-height: 32px; padding: 4px 8px;
  margin: 0 0 4px 8px; border: 1px solid rgba(242, 198, 97, 0.6); border-radius: 16px; background: rgba(242, 198, 97, 0.12);
  color: inherit; cursor: pointer; }
.cc-hear:hover, .cc-hear:focus-visible { background: rgba(242, 198, 97, 0.28); }
@keyframes cc-hear-wait { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
.cc-hear-wait { animation: cc-hear-wait 0.9s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .cc-hear-wait { animation: none; opacity: 0.6; } }
/* her voice switch beside Send: on for every answer, or off; kept in this browser */
.cc-voice { flex: none; font: inherit; font-size: 0.85em; padding: 6px 9px; border-radius: 8px; cursor: pointer;
  border: 1px solid rgba(242, 198, 97, 0.7); background: transparent; color: inherit; white-space: nowrap; }
.cc-voice[aria-pressed="true"] { background: rgba(242, 198, 97, 0.22); }
/* her next questions folded away on a phone, and the button that shows them again */
.cc-next[hidden] { display: none; }
.coach-chat .cc-more { display: block; font: inherit; font-size: 0.9em; margin-top: 6px; padding: 6px 0; min-height: 32px;
  border: 0; border-radius: 0; background: transparent; box-shadow: none; color: #f2c661; text-decoration: underline;
  cursor: pointer; }
.coach-chat .cc-memo { color: inherit; }

/* the owner's private mood switch, on his account only */
.cc-owner { display: flex; align-items: center; gap: 6px; font-size: 0.8em; opacity: 0.7; margin-top: 4px; }

/* thumbs up or down under her reply */
.cc-thumbs { display: flex; gap: 4px; margin-top: 2px; }
.cc-thumb { font: inherit; font-size: 0.85em; line-height: 1; padding: 2px 6px; border: 0; border-radius: 10px;
  background: transparent; cursor: pointer; opacity: 0.6; }
.cc-thumb:hover, .cc-thumb-on { opacity: 1; }
.cc-thumb:disabled { cursor: default; }

/* her notebook: what she remembers about you */
.cc-memo { font: inherit; font-size: 0.8em; border: 0; background: transparent; text-decoration: underline; cursor: pointer;
  padding: 2px 0; margin-top: 4px; opacity: 0.75; }

/* the Mr. Yuk face for a throw she would not make: a green tint and a small wince */
@keyframes cc-yuck { 0%, 100% { filter: none; transform: none; } 30%, 70% { filter: hue-rotate(80deg) saturate(1.6); transform: scale(0.96); } }
.coach-wiggle-yuck { animation: cc-yuck 1s ease-in-out; }
@media (prefers-reduced-motion: reduce) { .coach-wiggle-yuck { animation: none; filter: hue-rotate(80deg); } }

/* the salute for a goodbye: her own raised hand beside her face for a moment */
.coach-wiggle-salute { position: relative; }
.coach-wiggle-salute::after { content: "\1F596"; position: absolute; right: -0.6em; top: -0.2em; font-size: 0.8em;
  animation: cc-salute 1s ease-in-out; }
@keyframes cc-salute { 0% { opacity: 0; transform: translateY(4px); } 30%, 80% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .coach-wiggle-salute::after { animation: none; } }

/* costumes on her face while she says a bit (3 Nov): our own simple shapes, no borrowed imagery */
.coach-costume { position: relative; overflow: visible; }
.coach-costume-ears::before, .coach-costume-ears::after { content: ""; position: absolute; top: 18%; width: 0; height: 0;
  border-left: 0.35em solid transparent; border-right: 0.35em solid transparent; border-bottom: 0.9em solid #e9b98f;
  pointer-events: none; }
.coach-costume-ears::before { left: -0.45em; transform: rotate(-28deg); }
.coach-costume-ears::after { right: -0.45em; transform: rotate(28deg); }
.coach-costume-party-hat::before { content: ""; position: absolute; left: 50%; top: -0.9em; width: 0; height: 0;
  transform: translateX(-50%) rotate(-8deg); border-left: 0.45em solid transparent; border-right: 0.45em solid transparent;
  border-bottom: 1em solid #d94f70; pointer-events: none; }
.coach-costume-sunglasses::before { content: ""; position: absolute; left: 18%; right: 18%; top: 38%; height: 0.32em;
  border-radius: 0.2em; background: #1d1d1d; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.4); pointer-events: none; }
.coach-costume-yuk { filter: hue-rotate(80deg) saturate(1.5); }

/* music bits (3 Nov): a disco-ball sparkle and an air-guitar sway, gentle under reduced motion */
@keyframes cc-disco { 0%, 100% { filter: none; } 25% { filter: brightness(1.25) hue-rotate(40deg); } 50% { filter: brightness(1.1) hue-rotate(160deg); } 75% { filter: brightness(1.25) hue-rotate(280deg); } }
.coach-wiggle-disco { animation: cc-disco 1s linear; }
@keyframes cc-air-guitar { 0%, 100% { transform: none; } 25% { transform: rotate(-8deg); } 50% { transform: rotate(6deg) translateY(-2px); } 75% { transform: rotate(-4deg); } }
.coach-wiggle-air-guitar { animation: cc-air-guitar 1s ease-in-out; }
@media (prefers-reduced-motion: reduce) { .coach-wiggle-disco, .coach-wiggle-air-guitar { animation: none; } }

/* a little dance (the brick house wall) */
@keyframes cc-dance { 0%, 100% { transform: none; } 20% { transform: translateX(-3px) rotate(-5deg); } 40% { transform: translateX(3px) rotate(5deg); } 60% { transform: translateX(-3px) rotate(-5deg); } 80% { transform: translateX(3px) rotate(5deg); } }
.coach-wiggle-dance { animation: cc-dance 1s ease-in-out; }
@media (prefers-reduced-motion: reduce) { .coach-wiggle-dance { animation: none; } }

/* a sip of lemonade: a small tilt back */
@keyframes cc-sip { 0%, 100% { transform: none; } 40%, 60% { transform: rotate(-10deg) translateY(-1px); } }
.coach-wiggle-sip { animation: cc-sip 1s ease-in-out; }
@media (prefers-reduced-motion: reduce) { .coach-wiggle-sip { animation: none; } }

/* a bowling roll for the owner's Quintana nods */
@keyframes cc-bowl { 0% { transform: none; } 40% { transform: translateX(-4px) rotate(-12deg); } 70% { transform: translateX(6px) rotate(10deg); } 100% { transform: none; } }
.coach-wiggle-bowl { animation: cc-bowl 1s ease-in-out; }
@media (prefers-reduced-motion: reduce) { .coach-wiggle-bowl { animation: none; } }

/* a finger wag for her tournament taunt */
@keyframes cc-finger-wag { 0%, 100% { transform: none; } 20%, 60% { transform: rotate(-6deg); } 40%, 80% { transform: rotate(6deg); } }
.coach-wiggle-finger-wag { animation: cc-finger-wag 1s ease-in-out; }
@media (prefers-reduced-motion: reduce) { .coach-wiggle-finger-wag { animation: none; } }

.cc-chips[hidden] { display: none; }

/* the tiles she names, small, under her words */
.cc-tiles { display: flex; flex-wrap: wrap; gap: 3px; margin: 3px 0 2px; }

/* the Move button under her face on a page of its own: small, for keyboards; the face itself drags */
.coach-chat-float .cc-move { display: block; margin: 2px auto 0; font: inherit; font-size: 0.7em; padding: 1px 6px;
  border: 0; border-radius: 8px; background: rgba(0, 0, 0, 0.06); cursor: pointer; }
.coach-chat-float .coach-face { touch-action: none; cursor: grab; }

/* her box hangs off her face wherever she sits: above near the bottom, below near the top, inside the screen */
.coach-chat-float .coach-chat-box { position: absolute; bottom: calc(100% + 8px); left: 0; max-height: min(70vh, calc(100vh - 140px)); }
.coach-chat-float.cc-open-left .coach-chat-box { left: auto; right: 0; }
.coach-chat-float.cc-open-down .coach-chat-box { bottom: auto; top: calc(100% + 8px); }

/* one fixed size (3 Nov, Jeff: the box grew to the full window): about 420 px on a laptop, less on a phone; the
   messages scroll inside it with the newest in view */
.coach-chat-box { height: min(420px, calc(100vh - 140px)); }
.coach-chat-box .coach-chat { display: flex; flex-direction: column; height: 100%; }
.coach-chat-box .cc-thread { flex: 1 1 auto; overflow-y: auto; min-height: 0; }
@media (max-width: 600px) { .coach-chat-box { height: min(360px, calc(100vh - 160px)); } }
/* her short remark by her face, unasked: it fades by itself */
.cc-bubble { position: fixed; z-index: 70; max-width: 260px; padding: 8px 11px; border-radius: 12px; background: #fdf8ec;
  color: #1d2b22; font-size: 0.9em; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3); cursor: pointer;
  animation: cc-bubble 5s ease-in-out forwards; }
/* its point, toward her face (coachchat.js bubble sets --cc-tip, the face's middle across the bubble) */
.cc-bubble::after { content: ""; position: absolute; left: var(--cc-tip, 50%); width: 12px; height: 12px; margin-left: -6px;
  background: inherit; transform: rotate(45deg); }
.cc-bubble.cc-above::after { bottom: -5px; }
.cc-bubble.cc-below::after { top: -5px; }
@keyframes cc-bubble { 0% { opacity: 0; transform: translateY(4px); } 8%, 80% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .cc-bubble { animation: none; } }

/* the site voice switch (6 Nov): her voice off for this person, so no voice button */
.no-coach-voice .cc-voice { display: none; }