/* ============================================================
   JLynn Consultation Voice
   Scoped under .jlcv-wrap so nothing leaks into the theme.
   ------------------------------------------------------------
   NOTE ON !important: Gravity Forms 2.10+ "Framework theme"
   applies high-specificity rules (3 classes + element) to every
   button inside .gform_wrapper, which would otherwise reset our
   button's position/display and pop it out of the wrap. The
   !important flags below are the targeted counter.
   ============================================================ */

.jlcv-wrap {
    --jlcv-focus: #ffbd2e;

    /* Idle (pastel blue, navy glyph) */
    --jlcv-mic-idle-bg: #cfe0ef;
    --jlcv-mic-idle-bg-hover: #b8d1e4;
    --jlcv-mic-idle-fg: #17436d;

    /* Recording (pastel blush, muted red glyph) */
    --jlcv-mic-rec-bg: #f3c9cb;
    --jlcv-mic-rec-bg-hover: #e8b2b5;
    --jlcv-mic-rec-fg: #a94a4d;

    position: relative !important;
    display: block;
}

/* The Gravity Forms textarea always ends up as a direct child of .jlcv-wrap.
   Leave plenty of room on the right so typed content never flows under the mic. */
.jlcv-wrap > textarea {
    padding-right: 56px !important;
    font-size: 16px !important; /* Prevent iOS auto-zoom on focus */
    box-sizing: border-box;
    resize: vertical; /* Keep native resize handle visible. */
}

/* ------------------------------------------------------------
   Mic button
   - 40px circle, absolutely positioned top-right inside the textarea.
   - 44px minimum touch target on mobile (see media query below).
   - Native <button type="button"> — never submits the form.
   ------------------------------------------------------------ */
.jlcv-wrap .jlcv-mic {
    all: unset;
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    width: 40px !important;
    height: 40px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: var(--jlcv-mic-idle-bg) !important;
    color: var(--jlcv-mic-idle-fg) !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
    transition: background-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
    z-index: 2;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    line-height: 1 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    text-transform: none !important;
    font: inherit !important;
}

.jlcv-wrap .jlcv-mic:hover {
    background: var(--jlcv-mic-idle-bg-hover) !important;
}

.jlcv-wrap .jlcv-mic:active {
    transform: scale(0.95);
}

.jlcv-wrap .jlcv-mic:focus-visible {
    outline: 3px solid var(--jlcv-focus) !important;
    outline-offset: 2px;
}

.jlcv-wrap .jlcv-mic[disabled],
.jlcv-wrap .jlcv-mic:disabled {
    cursor: default;
    opacity: 0.85;
}

.jlcv-wrap .jlcv-mic svg {
    display: block;
    pointer-events: none;
}

/* Idle state — soft pulse so users notice the affordance. */
.jlcv-wrap .jlcv-mic.is-idle {
    background: var(--jlcv-mic-idle-bg) !important;
    color: var(--jlcv-mic-idle-fg) !important;
    animation: jlcv-idle-pulse 2.4s ease-in-out infinite;
}

@keyframes jlcv-idle-pulse {
    0%, 100% { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 0 0 0 rgba(23, 67, 109, 0.18); }
    50%      { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 0 0 8px rgba(23, 67, 109, 0); }
}

/* Recording state — blush with an active (but soft) pulse. */
.jlcv-wrap .jlcv-mic.is-recording {
    background: var(--jlcv-mic-rec-bg) !important;
    color: var(--jlcv-mic-rec-fg) !important;
    animation: jlcv-record-pulse 1.2s ease-in-out infinite;
}

.jlcv-wrap .jlcv-mic.is-recording:hover {
    background: var(--jlcv-mic-rec-bg-hover) !important;
}

@keyframes jlcv-record-pulse {
    0%, 100% { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 0 0 0 rgba(196, 93, 96, 0.32); }
    50%      { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 0 0 10px rgba(196, 93, 96, 0); }
}

/* Busy / transcribing state — spinner, no animation on the button itself. */
.jlcv-wrap .jlcv-mic.is-busy {
    background: var(--jlcv-mic-idle-bg) !important;
    color: var(--jlcv-mic-idle-fg) !important;
    animation: none;
}

.jlcv-wrap .jlcv-mic .jlcv-spinner {
    animation: jlcv-spin 0.9s linear infinite;
    transform-origin: 50% 50%;
}

@keyframes jlcv-spin {
    to { transform: rotate(360deg); }
}

/* ------------------------------------------------------------
   Error message below the textarea.
   Styled inline — not a banner — but legible and high-contrast.
   ------------------------------------------------------------ */
.jlcv-error {
    color: #a62828;
    background: #fdecec;
    border: 1px solid #f3c2c2;
    border-radius: 6px;
    padding: 8px 12px;
    margin: 6px 0 0;
    font-size: 14px;
    line-height: 1.45;
}

/* ------------------------------------------------------------
   Visually-hidden aria-live region.
   One per form; reused across all mic buttons on that form.
   ------------------------------------------------------------ */
.jlcv-live {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* ------------------------------------------------------------
   Mobile — bump the touch target to 44px per WCAG 2.5.5.
   ------------------------------------------------------------ */
@media (max-width: 600px) {
    .jlcv-wrap .jlcv-mic {
        width: 44px !important;
        height: 44px !important;
        top: 8px !important;
        right: 8px !important;
    }
    .jlcv-wrap > textarea {
        padding-right: 60px !important;
    }
}

/* ------------------------------------------------------------
   prefers-reduced-motion — disable all idle / record pulsing.
   Keep the spinner (it's a live progress indicator, not decoration).
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    .jlcv-wrap .jlcv-mic,
    .jlcv-wrap .jlcv-mic.is-idle,
    .jlcv-wrap .jlcv-mic.is-recording {
        animation: none !important;
        transition: none !important;
    }
}