/* Pip screens: home CTAs, live tutor screen, camera mode, rest/summary. Builds on app.css tokens. */

/* ---------- Home ---------- */
.pip-home .home-hero { gap: 16px; }
.pip-hero-btn { background: none; border: 0; padding: 0; display: block; }
.pip-hero-btn .mascot { width: clamp(110px, 16vmin, 170px); height: auto; }
.pip-ctas { display: grid; grid-template-columns: 1.3fr 1fr; gap: 14px; padding: 12px 6px 4px; flex: 0 0 auto; }
.pip-cta {
  --cta: var(--green); --cta-deep: var(--green-deep);
  display: flex; align-items: center; gap: 16px; min-height: 96px; padding: 12px 20px;
  border-radius: 28px; background: var(--cta); color: #fff; text-align: left;
  box-shadow: 0 8px 0 var(--cta-deep), var(--shadow-card);
  transition: transform 0.1s var(--ease-pop), box-shadow 0.1s, opacity 0.2s;
}
.pip-cta:active { transform: translateY(6px); box-shadow: 0 2px 0 var(--cta-deep), var(--shadow-card); }
.pip-cta[disabled] { opacity: 0.5; filter: saturate(0.5); }
.pip-cta-cam { --cta: var(--blue); --cta-deep: var(--blue-deep); }
.pip-cta-icon { width: 54px; height: 54px; border-radius: 18px; background: rgba(255, 255, 255, 0.22); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.pip-cta-icon svg { width: 34px; height: 34px; }
.pip-cta-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pip-cta-text b { font-size: clamp(1.3rem, 3vmin, 1.7rem); font-weight: 700; line-height: 1.1; }
.pip-cta-text small { font-size: 1rem; font-weight: 500; opacity: 0.92; }
.practise-label { font-weight: 700; color: var(--ink-soft); font-size: 1rem; padding: 10px 10px 0; text-transform: uppercase; letter-spacing: 0.06em; flex: 0 0 auto; }
.pip-home .world { padding-top: 8px; }
.pip-home .island .island-art { padding: 8px; }
@media (orientation: portrait) {
  .pip-ctas { grid-template-columns: 1fr; }
  .pip-cta { min-height: 84px; }
}
@media (max-height: 720px) and (orientation: landscape) {
  .pip-cta { min-height: 76px; padding: 8px 16px; }
  .pip-cta-icon { width: 44px; height: 44px; }
  .practise-label { padding-top: 4px; }
}

/* ---------- Live tutor screen ---------- */
.pip-screen .topbar { gap: 10px; }
.pip-status { display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 16px; border-radius: 18px; background: var(--white); font-weight: 600; font-size: 1.05rem; color: var(--ink-soft); box-shadow: 0 4px 0 var(--sand-deep), 0 8px 16px rgba(43, 39, 64, 0.06); }
.pip-status .dot { width: 12px; height: 12px; border-radius: 50%; background: var(--sand-deep); display: block; }
.pip-status.is-live .dot { background: var(--green); animation: pulse 1.6s ease-in-out infinite; }
.pip-status.is-talking .dot { background: var(--blue); animation: talk 0.7s ease-in-out infinite; }
.pip-status.is-bad .dot { background: var(--red); }
.icon-btn.is-on { color: #fff; background: var(--blue); box-shadow: 0 4px 0 var(--blue-deep); }
.icon-btn.is-muted { color: var(--red); }
.icon-btn.pip-end { color: var(--red); }
.icon-btn svg { width: 28px; height: 28px; }
.pip-screen .prompt .speech-bubble p { font-size: clamp(1.15rem, 2.6vmin, 1.55rem); }
.pip-screen.is-pip-talking .pip-mascot .mascot-sm { animation: talk 0.6s ease-in-out infinite; }
.pip-stage { position: relative; min-height: 0; }
.board-host { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.board-host[hidden], .cam-host[hidden] { display: none; }

/* connecting / fallback overlay */
.pip-overlay { position: absolute; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(255, 248, 236, 0.86); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: opacity 0.3s, visibility 0.3s; }
.pip-overlay.is-gone { opacity: 0; visibility: hidden; pointer-events: none; }
.pip-overlay-card { background: var(--white); border-radius: var(--radius-xl); padding: clamp(18px, 3vmin, 32px); box-shadow: 0 10px 0 var(--sand-deep), var(--shadow-card); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; width: min(560px, 100%); }
.pip-overlay-card .mascot { width: clamp(100px, 18vmin, 160px); animation: breathe 2.4s ease-in-out infinite; }
.pip-overlay-card h2 { margin: 0; font-size: clamp(1.5rem, 4vmin, 2.2rem); }
.pip-overlay-card p { margin: 0; color: var(--ink-soft); font-size: 1.15rem; font-weight: 500; }
.pip-overlay-card .actions { flex-wrap: wrap; }

/* ---------- Camera mode ---------- */
.cam-host { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.cam { flex: 1 1 auto; min-height: 0; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.cam-frame { position: relative; flex: 1 1 auto; min-height: 0; width: min(100%, 92vh); aspect-ratio: 4 / 3; border-radius: 28px; overflow: hidden; background: #1b1830; box-shadow: var(--shadow-float); }
.cam-video { width: 100%; height: 100%; object-fit: cover; display: block; }
.cam-corner { position: absolute; width: 44px; height: 44px; border: 6px solid var(--yellow); border-radius: 10px; }
.cam-corner.tl { top: 14px; left: 14px; border-right: 0; border-bottom: 0; }
.cam-corner.tr { top: 14px; right: 14px; border-left: 0; border-bottom: 0; }
.cam-corner.bl { bottom: 14px; left: 14px; border-right: 0; border-top: 0; }
.cam-corner.br { bottom: 14px; right: 14px; border-left: 0; border-top: 0; }
.cam-status { font-weight: 600; color: var(--ink-soft); font-size: 1.1rem; min-height: 1.4em; text-align: center; }
.cam-actions { display: flex; gap: 14px; align-items: center; justify-content: center; flex-wrap: wrap; flex: 0 0 auto; padding-bottom: 4px; }
.cam-look .btn-ico svg { width: 1.4em; height: 1.4em; }
@media (orientation: portrait) { .cam-frame { width: 100%; } }

/* ---------- Ask Pip button motion state ---------- */
.ask-pip.is-waving .hand { animation: pip-wave 0.9s ease-in-out; }
.ask-pip[hidden] { display: none; }
body.is-offline .ask-pip .face { filter: saturate(0.7); }

/* ---------- parent notes ---------- */
.parent .note { border-top: 1px solid var(--sand); padding: 10px 0; }
.parent .note:first-of-type { border-top: 0; }
.parent .note .when { font-weight: 800; font-family: var(--font-display); }
.parent .note .tag { display: inline-block; background: var(--yellow-soft); color: var(--ink); border-radius: 999px; padding: 2px 10px; font-size: 0.8rem; font-weight: 700; margin: 4px 6px 0 0; }