/* Tara — floating full-body AI sports coach (sir, 2026-10-02).
   She stands bottom-right; Talk and Read sit under her. Tap her to open the chat. */
#tara-dock {
  --tara: #8f6df5; --tara-dark: #5b3fc4; --tara-glow: rgba(143, 109, 245, .55);
  position: fixed; right: 10px; bottom: 0; z-index: 9998;
  width: 168px; display: flex; flex-direction: column; align-items: center;
  font-family: Inter, system-ui, sans-serif; pointer-events: none;
}
#tara-dock > * { pointer-events: auto; }
/* the legacy launcher button is now Tara herself */
#chat-toggle.tara-char {
  position: relative !important; right: auto !important; bottom: auto !important; width: 168px !important; height: auto !important;
  border-radius: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important;
  display: block !important; cursor: pointer; font-size: 0 !important; line-height: 0;
}
#chat-toggle.tara-char:focus-visible { outline: 3px solid #cbb8ff; outline-offset: 4px; border-radius: 16px !important; }
.tara-stage { position: relative; width: 100%; }
.tara-aura { position: absolute; left: 50%; top: 52%; width: 230px; height: 230px; transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(circle, var(--tara-glow) 0%, rgba(143, 109, 245, 0) 68%); filter: blur(4px); opacity: .55; animation: tara-aura 4.5s ease-in-out infinite; }
.tara-floor { position: absolute; left: 50%; bottom: 2px; width: 120px; height: 18px; transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0, 0, 0, .65), rgba(0, 0, 0, 0) 70%); }
.tara-ring { position: absolute; left: 50%; bottom: -3px; width: 132px; height: 26px; transform: translateX(-50%); border-radius: 50%;
  border: 2px solid rgba(190, 165, 255, .85); box-shadow: 0 0 14px var(--tara-glow), inset 0 0 10px var(--tara-glow); opacity: .85; }
#tara-img { position: relative; display: block; width: 100%; height: auto; filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .55)); transform-origin: 50% 100%; animation: tara-breathe 5s ease-in-out infinite; user-select: none; -webkit-user-drag: none; }
.tara-bubble { position: absolute; right: 100%; bottom: 70%; margin-right: 6px; width: 190px; padding: 10px 12px; border-radius: 14px 14px 4px 14px;
  background: #1b1530; color: #f2edff; border: 1px solid #6c52d6; font-size: 14px; line-height: 1.45; box-shadow: 0 8px 22px rgba(0, 0, 0, .5); }
.tara-bubble button { position: absolute; top: 2px; right: 4px; background: none; border: 0; color: #bba9f5; font-size: 18px; cursor: pointer; min-width: 32px; min-height: 32px; }
.tara-bubble b { color: #fff; }

.tara-actions { display: flex; gap: 8px; width: 100%; padding: 8px 2px 10px; }
.tara-btn { flex: 1; min-height: 44px; border-radius: 12px; border: 1px solid #7c5de8; background: linear-gradient(180deg, #7a59ea, var(--tara-dark));
  color: #fff; font: 700 14px Inter, system-ui, sans-serif; display: inline-flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; box-shadow: 0 4px 14px rgba(0, 0, 0, .45); }
.tara-btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.tara-btn:hover { filter: brightness(1.12); }
.tara-btn:focus-visible { outline: 3px solid #e1d6ff; outline-offset: 2px; }
.tara-btn[disabled] { opacity: .5; cursor: not-allowed; }
.tara-btn.on { background: #e2475d; border-color: #ff8fa0; }
.tara-status { position: absolute; left: 50%; top: -6px; transform: translate(-50%, -100%); padding: 4px 12px; border-radius: 999px; background: #1b1530; border: 1px solid #6c52d6; color: #e9e1ff; font: 600 12.5px Inter, sans-serif; white-space: nowrap; display: none; }
#tara-dock.listening .tara-status, #tara-dock.speaking .tara-status { display: block; }

/* talking: she gently bobs and the aura pulses with her voice */
#tara-dock.speaking #tara-img { animation: tara-talk .42s ease-in-out infinite; }
#tara-dock.speaking .tara-aura, #tara-dock.listening .tara-aura { opacity: 1; animation: tara-pulse .9s ease-in-out infinite; }
#tara-dock.listening .tara-ring { border-color: #ff8fa0; box-shadow: 0 0 16px rgba(255, 90, 120, .7); }

@keyframes tara-breathe { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.006, 1.012); } }
@keyframes tara-talk { 0%, 100% { transform: scale(1, 1) translateY(0); } 50% { transform: scale(1.012, 1.02) translateY(-2px); } }
@keyframes tara-aura { 0%, 100% { opacity: .4; transform: translate(-50%, -50%) scale(.95); } 50% { opacity: .7; transform: translate(-50%, -50%) scale(1.05); } }
@keyframes tara-pulse { 0%, 100% { transform: translate(-50%, -50%) scale(.95); } 50% { transform: translate(-50%, -50%) scale(1.14); } }

/* chat panel: sits to the left of Tara on desktop */
#chat-container.tara-panel { right: 190px !important; bottom: 14px !important; width: min(380px, calc(100vw - 210px)) !important; max-height: 78vh !important;
  background: #14102a !important; border: 1px solid #5b3fc4 !important; border-radius: 18px !important; box-shadow: 0 14px 40px rgba(0, 0, 0, .65) !important; }
.tara-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid #2c2352; background: linear-gradient(180deg, #221a45, #14102a); }
.tara-head img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 2px solid #8f6df5; }
.tara-head b { display: block; color: #fff; font-size: 16px; letter-spacing: .02em; }
.tara-head small { color: #c9bcf7; font-size: 12.5px; }
.tara-head .x { margin-left: auto; background: none; border: 0; color: #cbb8ff; font-size: 22px; min-width: 44px; min-height: 44px; cursor: pointer; }
#chat-container.tara-panel #concierge-messages { font-size: 15px; line-height: 1.55; }
#chat-container.tara-panel .message.bot { background: #231a47; color: #f2edff; border: 1px solid #3a2d70; }
#chat-container.tara-panel .message.user { background: #7a59ea; color: #fff; }
#chat-container.tara-panel .message.bot a { color: #d4c6ff; }

@media (max-width: 640px) {
  #tara-dock { width: 104px; right: 4px; }
  #chat-toggle.tara-char { width: 104px !important; }
  .tara-aura { width: 150px; height: 150px; }
  .tara-ring { width: 84px; } .tara-floor { width: 76px; }
  .tara-actions { width: 136px; align-self: flex-end; gap: 6px; }
  .tara-btn { font-size: 13px; padding: 0 4px; gap: 4px; min-width: 0; } .tara-btn svg { width: 16px; height: 16px; }
  .tara-bubble { width: 168px; bottom: 60%; }
  #chat-container.tara-panel { right: 6px !important; left: 6px !important; width: auto !important; bottom: 300px !important; max-height: calc(100vh - 330px) !important; }
}
@media (prefers-reduced-motion: reduce) { #tara-img, .tara-aura, #tara-dock.speaking #tara-img { animation: none !important; } }

/* landscape mobile — collapse Tara to compact buttons so she never covers the nav bar */
@media (max-height: 480px) {
  #tara-dock { width: 80px; right: 6px; bottom: 4px; }
  .tara-stage { display: none !important; }
  #tara-dock [aria-label="Chat with Tara"] { display: none !important; }
  .tara-actions { padding: 2px 0 4px; width: 80px; gap: 4px; }
  .tara-btn { min-height: 38px; font-size: 12px; padding: 0 4px; }
  #chat-container.tara-panel { right: 4px !important; left: 4px !important; width: auto !important; bottom: 96px !important; max-height: calc(100vh - 110px) !important; }
}

#chat-container.tara-panel #send-btn { background: #7a59ea !important; color: #fff !important; border: 1px solid #9a7dff !important; border-radius: 10px; font-weight: 700; }
#chat-container.tara-panel #send-btn:hover { filter: brightness(1.12); }
#chat-container.tara-panel #user-input { background: #0d0a1f !important; color: #f2edff !important; border: 1px solid #3a2d70 !important; min-height: 44px; border-radius: 10px; }
#chat-container.tara-panel .message.typing { color: #cbb8ff; font-style: italic; }

/* lip-sync canvas (tara-lips.js) shares the portrait's box and animations so the mouth never drifts */
#tara-lips { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; transform-origin: 50% 100%; animation: tara-breathe 5s ease-in-out infinite; }
#tara-dock.speaking #tara-lips { animation: tara-talk .42s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { #tara-lips, #tara-dock.speaking #tara-lips { animation: none !important; } }

/* ---------- minimise ---------- */
#tara-min { position: absolute; top: 0; right: 0; z-index: 3; width: 36px; height: 36px; padding: 0; border: 1px solid rgba(203, 184, 255, .5); border-radius: 50%; background: rgba(20, 14, 34, .9); color: #fff; font: 700 22px/1 Inter, system-ui, sans-serif; cursor: pointer; }
#tara-dock.tara-min > * { display: none !important; }
#tara-restore { display: none; position: fixed; right: max(14px, env(safe-area-inset-right)); bottom: max(14px, env(safe-area-inset-bottom)); z-index: 9999; width: 56px; height: 56px; padding: 0; border: 2px solid #9b82d8; border-radius: 50%; background: #1a1230; overflow: hidden; cursor: pointer; box-shadow: 0 6px 16px rgba(0, 0, 0, .5); }
#tara-restore.show { display: block; }
#tara-restore img { display: block; width: 100%; height: 100%; object-fit: cover; }
#tara-min:focus-visible, #tara-restore:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }