/* ═══════════════════════════════════════════════════════════════
   EDU AI VOICE — shared companion widget for the elder pages
   Pairs with the EduAiVoice widget in assets/js/ai-voice-edu.js.

   Same look as the mobile app (mobile/src/components/EduAiVoiceButton.js):
   a round speaker button with a yellow "Tulong" tag; its panel lists the
   page's guides (each says its instruction) and turns green while EDU AI
   VOICE speaks. What it says comes up as a subtitle, not a text box.
   EDU AI VOICE is a narrator: it never listens, so there is no mic here.

   Gerontological rules that drive the numbers below:
   - every control is at least 60px tall with 10px+ between targets
   - body copy never drops under 17px, subtitles are 20px and up
   - text sits on solid surfaces, never on a gradient, for contrast
   ═══════════════════════════════════════════════════════════════ */

.eduvoice {
    --ev-navy: #0c1f4a;
    --ev-blue: #1d4ed8;
    --ev-text: #0f172a;
    --ev-muted: #475569;
    --ev-border: #cbd5e1;
    --ev-amber: #b45309;
    --ev-state: #1d4ed8;        /* ready */
    --ev-state-edge: #1e3a8a;

    position: fixed;
    /* Left, not right: on pages with bottom-of-screen page-navigation controls
       (e.g. the dashboard's "Susunod na mga Aralin" button), a right-anchored
       button sits directly on top of them. */
    left: clamp(12px, calc(2 * var(--ds-vw, 1vw)), 24px);
    bottom: clamp(12px, calc(2 * var(--ds-vw, 1vw)), 24px);
    z-index: 9000;
    font-family: 'Atkinson Hyperlegible', 'Poppins', system-ui, sans-serif;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    max-width: calc(calc(100 * var(--ds-vw, 1vw)) - 24px);
}

.eduvoice.is-speaking  { --ev-state: #15803d; --ev-state-edge: #14532d; }

/* While a drag is in progress (see initDrag) the widget is repositioned with
   inline left/top, so its transition is suspended and the cursor reflects the grab. */
.eduvoice.is-dragging {
    transition: none !important;
    user-select: none;
}

.eduvoice.is-dragging .eduvoice-launcher,
.eduvoice.is-dragging .eduvoice-head {
    cursor: grabbing;
}

/* ── The round button ─────────────────────────────────────── */

.eduvoice-launcher {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 72px;
    padding: 0;
    border: 0;
    background: none;
    cursor: grab;
    /* Draggable: stops a touchscreen's own pan/scroll gesture from fighting a finger-drag */
    touch-action: none;
    font-family: inherit;
}

.eduvoice-fab {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--ev-state);
    border: 3px solid #ffffff;
    color: #ffffff;
    box-shadow: 0 10px 26px rgba(12, 31, 74, .32);
    transition: transform .18s ease, background .2s ease;
}

.eduvoice-fab svg { width: 30px; height: 30px; }
.eduvoice-launcher:hover .eduvoice-fab { transform: translateY(-2px); }
.eduvoice-launcher:focus-visible { outline: none; }
.eduvoice-launcher:focus-visible .eduvoice-fab { outline: 4px solid #fcd34d; outline-offset: 3px; }

/* Rings around the button while EDU AI VOICE speaks */
.eduvoice-fab-ring {
    position: absolute;
    top: 0;
    left: 4px;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--ev-state);
    opacity: 0;
    pointer-events: none;
}

@keyframes eduvoice-ring {
    from { transform: scale(1); opacity: .5; }
    to   { transform: scale(1.6); opacity: 0; }
}

.eduvoice.is-speaking .eduvoice-fab-ring { animation: eduvoice-ring 1.3s ease-out infinite; }

.eduvoice-fab-tag {
    position: relative;
    z-index: 2;
    margin-top: -10px;
    padding: 1px 11px;
    border-radius: 999px;
    background: #facc15;
    border: 2px solid #ffffff;
    color: #422006;
    font-size: 14px;
    font-weight: 800;
    line-height: 19px;
    box-shadow: 0 3px 8px rgba(12, 31, 74, .2);
}

/* ── Panel ────────────────────────────────────────────────── */

.eduvoice-panel {
    width: min(360px, calc(calc(100 * var(--ds-vw, 1vw)) - 24px));
    background: #ffffff;
    border: 2px solid var(--ev-border);
    border-radius: 24px;
    box-shadow: 0 18px 44px rgba(12, 31, 74, .28);
    overflow: hidden;
    /* Never taller than the screen, with room for the round button under it */
    max-height: calc(calc(100 * var(--ds-vh, 1vh)) - 110px);
    overflow-y: auto;
}

.eduvoice-panel[hidden] { display: none; }

.eduvoice-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 14px 14px 16px;
    background: var(--ev-state);
    color: #ffffff;
    cursor: grab;
    touch-action: none;
    transition: background .2s ease;
}

.eduvoice-head-avatar {
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #ffffff;
    color: var(--ev-state);
}

.eduvoice-head-avatar svg { width: 26px; height: 26px; }

.eduvoice-head-text { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.3; cursor: default; }
.eduvoice-head-text strong { font-family: 'Poppins', sans-serif; font-size: 19px; font-weight: 800; letter-spacing: .4px; }
.eduvoice-head-text span { font-size: 16px; font-weight: 600; opacity: .95; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.eduvoice-x {
    width: 60px;
    height: 60px;
    flex: 0 0 60px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 18px;
    background: rgba(255, 255, 255, .2);
    color: #ffffff;
    cursor: pointer;
}

.eduvoice-x svg { width: 26px; height: 26px; }
.eduvoice-x:hover { background: rgba(255, 255, 255, .32); }
.eduvoice-x:focus-visible { outline: 3px solid #ffffff; outline-offset: 2px; }

.eduvoice-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
}

/* ── One-line hardware notice ─────────────────────────────── */

.eduvoice-notice {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 12px 14px;
    background: #fffbeb;
    border: 2px solid #fcd34d;
    border-radius: 14px;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.4;
    color: #78350f;
}

/* display:flex above would otherwise show an empty amber box when there is nothing to report */
.eduvoice-notice[hidden] { display: none; }
.eduvoice-notice-icon { flex: 0 0 24px; color: var(--ev-amber); }
.eduvoice-notice-icon svg { width: 24px; height: 24px; display: block; }

/* ── "Paano magsimula?": the big button ───────────────────── */

.eduvoice-talk {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    min-height: 68px;
    padding: 10px 20px;
    border: 0;
    border-bottom: 5px solid var(--ev-state-edge);
    border-radius: 20px;
    background: var(--ev-state);
    color: #ffffff;
    font-family: inherit;
    font-size: 21px;
    font-weight: 800;
    cursor: pointer;
    transition: background .2s ease, transform .1s ease;
}

.eduvoice-talk:active { transform: translateY(2px); }
.eduvoice-talk:focus-visible { outline: 4px solid #fcd34d; outline-offset: 3px; }
.eduvoice-talk-icon { display: grid; place-items: center; width: 28px; height: 28px; }
.eduvoice-talk-icon svg { width: 28px; height: 28px; }

/* ── This page's guides: press one, EDU AI VOICE says it ─────── */

.eduvoice-guides-label {
    margin: 4px 0 -2px;
    color: #334155;
    font-size: 17px;
    font-weight: 700;
}
.eduvoice-guides-label[hidden] { display: none; }

.eduvoice-guides {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.eduvoice-guides:empty { display: none; }

.eduvoice-guide {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 60px;
    padding: 8px 14px 8px 10px;
    border: 2px solid #bfdbfe;
    border-radius: 18px;
    background: #ffffff;
    color: var(--ev-text);
    font-family: inherit;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    text-align: left;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}

.eduvoice-guide:hover { background: #eff6ff; border-color: var(--ev-blue); }
.eduvoice-guide:focus-visible { outline: 4px solid #fcd34d; outline-offset: 2px; }

.eduvoice-guide-icon {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #dbeafe;
    color: var(--ev-blue);
}
.eduvoice-guide-icon svg { width: 22px; height: 22px; }

/* The guide being said right now */
.eduvoice-guide.is-playing { background: #f0fdf4; border-color: #15803d; }
.eduvoice-guide.is-playing .eduvoice-guide-icon { background: #15803d; color: #ffffff; }

/* ── Other buttons ────────────────────────────────────────── */

.eduvoice-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 60px;
    padding: 10px 14px;
    border: 2px solid var(--ev-border);
    border-radius: 16px;
    background: #ffffff;
    color: var(--ev-text);
    font-family: inherit;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}

.eduvoice-btn svg { width: 24px; height: 24px; flex: 0 0 24px; }
.eduvoice-btn:hover { background: #f1f5f9; border-color: #3b82f6; }
.eduvoice-btn:focus-visible { outline: 4px solid #fcd34d; outline-offset: 2px; }


.eduvoice-btn[aria-pressed="true"] {
    background: #fef3c7;
    border-color: #f59e0b;
    color: #78350f;
}

.eduvoice-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.eduvoice-row .eduvoice-btn { font-size: 17px; padding: 10px 8px; }

/* ── Subtitle ─────────────────────────────────────────────── */
/* What EDU AI VOICE is saying, a line at a time, like a film subtitle.
   It never takes a click: pointer-events none, so the page under it still works.
   It sits above everything, dialogs included (they run up to z-index 10001);
   under one it would be dimmed and blurred by the dialog's backdrop. */

.eduvoice-subtitle {
    position: fixed;
    left: 50%;
    bottom: clamp(96px, calc(13 * var(--ds-vh, 1vh)), 140px);
    z-index: 2147483600;
    /* Own width, not the half-screen left of `left: 50%` (which wrapped short lines on phones) */
    width: max-content;
    max-width: min(860px, calc(calc(100 * var(--ds-vw, 1vw)) - 32px));
    padding: 12px 24px;
    border-radius: 16px;
    background: rgba(15, 23, 42, .9);
    box-shadow: 0 10px 30px rgba(2, 6, 23, .35);
    color: #ffffff;
    font-family: 'Atkinson Hyperlegible', 'Poppins', system-ui, sans-serif;
    font-size: clamp(20px, calc(2.1 * var(--ds-vw, 1vw)), 26px);
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, 8px);
    transition: opacity .25s ease, transform .25s ease;
}

.eduvoice-subtitle.is-on {
    opacity: 1;
    transform: translate(-50%, 0);
}

/* A dialog is open (placeSubtitle in ai-voice-edu.js): drop to the screen edge the
   dialog box leaves free, rather than over its words and buttons. The round button
   is under the dialog's backdrop then, so the bottom edge is clear of it. */
.eduvoice-subtitle.is-over-modal { bottom: 16px; }
.eduvoice-subtitle.is-over-modal.is-top { top: 16px; bottom: auto; }

/* ── Visual tutorial ("Paano magsimula?") ─────────────────── */

.eduvoice-tour {
    position: fixed;
    inset: 0;
    z-index: 9500;
    pointer-events: none;       /* the real page stays pressable; only the card takes clicks */
    opacity: 0;
    transition: opacity .25s ease;
    font-family: 'Atkinson Hyperlegible', 'Poppins', system-ui, sans-serif;
}

.eduvoice-tour.is-on { opacity: 1; }

/* A bright hole over the button being shown; everything else dims */
.eduvoice-tour-spot {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 0;
    height: 0;
    border-radius: 18px;
    box-shadow: 0 0 0 4px #facc15, 0 0 0 calc(200 * var(--ds-vmax, 1vmax)) rgba(12, 31, 74, .55);
    transition: left .5s ease, top .5s ease, width .5s ease, height .5s ease;
}

.eduvoice-tour.is-mini .eduvoice-tour-spot {
    box-shadow: 0 0 0 4px #facc15, 0 0 0 calc(200 * var(--ds-vmax, 1vmax)) rgba(12, 31, 74, .22);
}

/* The same blue cursor as the quiz's "Paano Laruin?" demo */
.eduvoice-tour-hand {
    position: absolute;
    left: 0;
    top: 0;
    width: 56px;
    height: 56px;
    transform-origin: 10px 5px;
    transform: translate(-10px, -5px);
    filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .4));
    transition: transform .2s ease;
}

.eduvoice-tour-hand svg { width: 56px; height: 56px; display: block; }
.eduvoice-tour-hand.is-gliding { transition: left .9s cubic-bezier(.45, .05, .25, 1), top .9s cubic-bezier(.45, .05, .25, 1), transform .2s ease; }
.eduvoice-tour-hand.is-tapping { transform: translate(-10px, -5px) scale(.82) rotate(-6deg); }

/* Where the cursor "presses" */
.eduvoice-tour-ripple {
    position: absolute;
    width: 22px;
    height: 22px;
    margin: -11px 0 0 -11px;
    border-radius: 50%;
    border: 4px solid #facc15;
    opacity: 0;
}

@keyframes eduvoice-ripple {
    from { transform: scale(.4); opacity: .95; }
    to   { transform: scale(3.2); opacity: 0; }
}
.eduvoice-tour-ripple.is-on { animation: eduvoice-ripple .8s ease-out; }

.eduvoice-tour-card {
    position: absolute;
    left: 12px;
    top: 12px;
    box-sizing: border-box;
    padding: 16px 18px 18px;
    border-radius: 22px;
    background: #ffffff;
    border: 3px solid #facc15;
    box-shadow: 0 20px 50px rgba(2, 6, 23, .4);
    pointer-events: auto;
    transition: left .45s ease, top .45s ease;
}

.eduvoice-tour.is-mini .eduvoice-tour-card { display: none; }

.eduvoice-tour-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }

.eduvoice-tour-step {
    padding: 4px 12px;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 16px;
    font-weight: 800;
}

.eduvoice-tour-x {
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    display: grid;
    place-items: center;
    border: 2px solid var(--ev-border, #cbd5e1);
    border-radius: 16px;
    background: #ffffff;
    color: #334155;
    cursor: pointer;
}
.eduvoice-tour-x svg { width: 24px; height: 24px; }

.eduvoice-tour-text {
    margin: 12px 0 16px;
    color: #0c1f4a;
    font-size: clamp(20px, calc(2 * var(--ds-vw, 1vw)), 24px);
    font-weight: 700;
    line-height: 1.4;
}

.eduvoice-tour-actions {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px;
}

.eduvoice-tour-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 60px;
    padding: 10px 16px;
    border: 2px solid #cbd5e1;
    border-radius: 16px;
    background: #ffffff;
    color: #0f172a;
    font-family: inherit;
    font-size: 18px;
    font-weight: 800;
    cursor: pointer;
}

.eduvoice-tour-btn svg { width: 22px; height: 22px; }

.eduvoice-tour-next {
    border: 0;
    border-bottom: 4px solid #14532d;
    background: #16a34a;
    color: #ffffff;
}

.eduvoice-tour-btn:focus-visible,
.eduvoice-tour-x:focus-visible { outline: 4px solid #1d4ed8; outline-offset: 2px; }

/* ── Small screens ────────────────────────────────────────── */

@media (max-width: 560px) {
    .eduvoice { left: 12px; bottom: 12px; }
    .eduvoice-subtitle { bottom: 104px; padding: 10px 16px; }
    .eduvoice-subtitle.is-over-modal { bottom: 12px; }
    .eduvoice-subtitle.is-over-modal.is-top { top: 12px; }
}

/* Phone turned sideways (short screen): the subtitle sits on the bottom edge beside
   the round button. Above the button it landed mid-screen, over the lesson. */
@media (max-height: 500px) and (min-width: 561px) {
    .eduvoice-subtitle {
        bottom: 12px;
        left: calc(50% + 48px);
        max-width: min(760px, calc(calc(100 * var(--ds-vw, 1vw)) - 140px));
        padding: 8px 18px;
        font-size: 18px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .eduvoice-fab,
    .eduvoice-fab-ring,
    .eduvoice-talk,
    .eduvoice-guide,
    .eduvoice-subtitle,
    .eduvoice-tour,
    .eduvoice-tour-spot,
    .eduvoice-tour-hand,
    .eduvoice-tour-card {
        transition-duration: 0s !important;
        animation: none !important;
    }
}

@media print {
    .eduvoice,
    .eduvoice-subtitle,
    .eduvoice-tour { display: none; }
}