/* ══════════════════════════════════════════════════════════════════════
   FEATURE: coach-mascot.css
   Mascota Skora (el zorrito) — usada en /home (dashboard) + float anchor
   global en shell.js.

   Elementos: .coach-mascot-container, .coach-mascot-img, .coach-bubble,
   .coach-bubble::before, .coach-float-anchor.

   Usado por:
   - views/dashboard.html (.coach-mascot-container, .coach-mascot-img,
     .coach-bubble)
   - js/utils/shell.js (#coach-float-anchor)

   Extraído de learning.css y responsive.css en Round 2.2.
   ══════════════════════════════════════════════════════════════════════ */

/* ─── 1. Desktop (from learning.css 963-1009) ──────────────────────── */
/* Dashboard V2 - Coach-Ready Elements */
.coach-mascot-container {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.coach-mascot-img {
  height: 88px;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 4px 10px rgba(108, 43, 255, 0.15));
}

.coach-bubble {
  position: relative;
  background: #F8F6FF;
  border: 1px solid rgba(108, 43, 255, 0.12);
  border-radius: 16px;
  padding: 16px 20px;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--text-primary);
  flex: 1;
  min-width: 0;
}

.coach-bubble::before {
  content: '';
  position: absolute;
  left: -7px;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  width: 14px;
  height: 14px;
  background: #F8F6FF;
  border-left: 1px solid rgba(108, 43, 255, 0.12);
  border-bottom: 1px solid rgba(108, 43, 255, 0.12);
}

.coach-float-anchor {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 50;
}

/* ─── 2. Mobile @media (max-width: 768px) ──────────────────────────── */
/*       Ordenado por cascada original: learning.css primero, responsive.css */
/*       segundo (responsive.css gana en height de .coach-mascot-img). */
@media (max-width: 768px) {

  /* From learning.css 1189-1195 */
  .coach-mascot-img {
    height: 64px;
  }

  .coach-bubble::before {
    display: none;
  }

  /* From responsive.css 312-315 (Hide Fox Mascot — user feedback) */
  /* ── Hide Fox Mascot on Mobile (user feedback) ── */
  .coach-mascot-container {
    display: none !important;
  }

  /* From responsive.css 725-739 (mascot img + bubble overrides) */
  .coach-mascot-img {
    height: 72px;
  }

  .coach-bubble {
    padding: 12px 14px;
    border-radius: 12px;
    font-size: 0.85rem;
  }

  .coach-bubble::before {
    width: 10px;
    height: 10px;
    left: -5px;
  }

  /* From responsive.css 861-865 (float anchor above bottom nav) */
  /* ── Coach Float — Above bottom nav ── */
  .coach-float-anchor {
    bottom: calc(var(--m-bottomnav-h) + 12px) !important;
    right: var(--m-pad) !important;
  }
}