/**
 * Coachy Widget Styles
 *
 * Floating voice-agent bubble + conversation panel for the ECM demo AU
 * public site. Palette matches the site's public brand (blue #004aad,
 * lime #c0cc24, teal #5ce1e0) — NOT the ECM admin palette, per Lord's
 * "match the site's existing colours" (2026-07-03).
 *
 * Part of: ECM — Coachy Voice Agent
 */

:root {
  --coachy-blue: #004aad;
  --coachy-lime: #c0cc24;
  --coachy-teal: #5ce1e0;
  --coachy-dark: #1c2733;
  --coachy-muted: #6b7683;
  --coachy-bg: #ffffff;
  --coachy-border: #d9dee4;
  --coachy-error: #d9534f;
  --coachy-font: 'Roboto', system-ui, -apple-system, sans-serif;
}

/* === FLOATING BUBBLE === */
.coachy-bubble {
  position: fixed; right: 20px; bottom: 20px; z-index: 99990;
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--coachy-blue); border: 3px solid var(--coachy-lime);
  color: #fff; cursor: pointer; box-shadow: 0 4px 16px rgba(0,0,0,.25);
  display: flex; align-items: center; justify-content: center;
  transition: transform .15s ease;
}
.coachy-bubble:hover { transform: scale(1.07); }
.coachy-bubble svg { width: 34px; height: 34px; }
.coachy-bubble .coachy-bubble-label {
  position: absolute; right: 74px; white-space: nowrap;
  background: var(--coachy-dark); color: #fff; font: 400 13px var(--coachy-font);
  padding: 6px 12px; border-radius: 16px; opacity: 0; pointer-events: none;
  transition: opacity .2s;
}
.coachy-bubble:hover .coachy-bubble-label { opacity: 1; }
/* Gentle pulse so the bubble reads as "alive" without being annoying */
@keyframes coachy-pulse { 0%,100% { box-shadow: 0 4px 16px rgba(0,0,0,.25); } 50% { box-shadow: 0 4px 22px rgba(0,74,173,.55); } }
.coachy-bubble { animation: coachy-pulse 3.2s ease-in-out infinite; }
.coachy-bubble[hidden] { display: none; }

/* === PANEL === */
.coachy-panel {
  position: fixed; right: 20px; bottom: 20px; z-index: 99991;
  width: 380px; max-width: calc(100vw - 40px); height: 640px; max-height: calc(100vh - 40px);
  background: var(--coachy-bg); border-radius: 16px; overflow: hidden;
  box-shadow: 0 12px 40px rgba(0,0,0,.3);
  display: flex; flex-direction: column;
  font: 400 14px/1.45 var(--coachy-font); color: var(--coachy-dark);
}
.coachy-panel[hidden] { display: none; }

/* Phones: full-screen takeover — half our leads are mobile */
@media (max-width: 576px) {
  .coachy-panel { right: 0; bottom: 0; width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; }
}

/* — Header — */
.coachy-head {
  background: var(--coachy-blue); color: #fff;
  padding: 12px 16px; display: flex; align-items: center; gap: 10px; flex: 0 0 auto;
}
.coachy-avatar {
  width: 40px; height: 40px; border-radius: 50%; background: #fff;
  display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
  border: 2px solid var(--coachy-lime);
}
.coachy-avatar svg { width: 26px; height: 26px; }
.coachy-head-name { font-weight: 700; font-size: 16px; }
.coachy-head-sub { font-size: 11px; opacity: .85; }
.coachy-close {
  margin-left: auto; background: none; border: 0; color: #fff; font-size: 22px;
  cursor: pointer; line-height: 1; padding: 4px 8px;
}
.coachy-close:focus-visible { outline: 2px solid var(--coachy-lime); }

/* — Status strip — */
.coachy-status {
  flex: 0 0 auto; padding: 6px 16px; font-size: 12px; color: var(--coachy-muted);
  display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--coachy-border);
  min-height: 30px;
}
.coachy-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--coachy-border); flex: 0 0 auto; }
.coachy-status[data-state="listening"] .coachy-dot { background: var(--coachy-lime); animation: coachy-blink 1s infinite; }
.coachy-status[data-state="speaking"]  .coachy-dot { background: var(--coachy-teal); animation: coachy-blink .7s infinite; }
.coachy-status[data-state="thinking"]  .coachy-dot { background: var(--coachy-blue); animation: coachy-blink .4s infinite; }
@keyframes coachy-blink { 50% { opacity: .3; } }
.coachy-timer { margin-left: auto; font-variant-numeric: tabular-nums; }

/* — Captions (live transcript) — */
.coachy-captions {
  flex: 1 1 auto; overflow-y: auto; padding: 14px 12px;
  display: flex; flex-direction: column; gap: 8px; background: #f5f7f9;
}
.coachy-msg { max-width: 84%; padding: 8px 12px; border-radius: 14px; white-space: pre-wrap; word-wrap: break-word; }
.coachy-msg-agent { align-self: flex-start; background: #fff; border: 1px solid var(--coachy-border); border-bottom-left-radius: 4px; }
.coachy-msg-user  { align-self: flex-end; background: var(--coachy-blue); color: #fff; border-bottom-right-radius: 4px; }
.coachy-msg-sys   { align-self: center; background: none; color: var(--coachy-muted); font-size: 12px; text-align: center; }

/* — Editable contact fields — */
.coachy-contact {
  flex: 0 0 auto; border-top: 1px solid var(--coachy-border); padding: 10px 14px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px; background: #fff;
}
.coachy-contact[hidden] { display: none; }
.coachy-field { display: flex; flex-direction: column; }
.coachy-field-name { grid-column: 1 / -1; }
.coachy-field label { font-size: 11px; color: var(--coachy-muted); margin-bottom: 2px; }
.coachy-field input {
  height: 34px; border: 1px solid var(--coachy-border); border-radius: 8px;
  padding: 0 10px; font: 400 14px var(--coachy-font); color: var(--coachy-dark);
}
.coachy-field input:focus { outline: 2px solid var(--coachy-teal); border-color: var(--coachy-teal); }
.coachy-field input.coachy-invalid { border-color: var(--coachy-error); background: #fdf3f3; }
.coachy-contact-hint { grid-column: 1 / -1; font-size: 11px; color: var(--coachy-muted); margin: 0; }

/* — Footer — */
.coachy-foot {
  flex: 0 0 auto; padding: 10px 14px; border-top: 1px solid var(--coachy-border);
  display: flex; align-items: center; gap: 10px; background: #fff;
}
.coachy-btn {
  border: 0; border-radius: 20px; padding: 9px 18px; cursor: pointer;
  font: 700 13px var(--coachy-font); color: #fff; background: var(--coachy-blue);
}
.coachy-btn:hover { filter: brightness(1.1); }
.coachy-btn:disabled { opacity: .5; cursor: default; }
.coachy-btn-go { background: var(--coachy-lime); color: var(--coachy-dark); }
.coachy-btn-mute { background: #eef1f4; color: var(--coachy-dark); }
.coachy-btn-mute[aria-pressed="true"] { background: var(--coachy-error); color: #fff; }
.coachy-form-link { margin-left: auto; font-size: 12px; color: var(--coachy-blue); }

/* — Consent / error / done overlays share one style — */
.coachy-gate {
  position: absolute; inset: 0; background: rgba(255,255,255,.97);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; padding: 28px; text-align: center; z-index: 2;
}
.coachy-gate[hidden] { display: none; }
.coachy-gate h3 { font: 700 18px var(--coachy-font); color: var(--coachy-blue); margin: 0; }
.coachy-gate p { margin: 0; color: var(--coachy-dark); font-size: 13px; }
.coachy-gate .coachy-fineprint { font-size: 11px; color: var(--coachy-muted); }
.coachy-panel-wrap { position: relative; display: contents; }