/*
 * speakit.css — ARISE
 *
 * Site-wide "read aloud" feature. Any element with class="speakit" gets a
 * small speaker button injected into it by speakit.js. Clicking it sends
 * the element's own text to /tts/speak and plays the resulting audio.
 *
 * Design notes:
 *  - Uses ONLY existing CSS variables from variables.css (no invented colors).
 *  - Visual pattern matches .is-msg-tts-btn (interview-simulator.css) for
 *    consistency across the site.
 *  - position: relative on .speakit is required so the button can anchor to
 *    the top-right corner. This is a no-op for the vast majority of elements
 *    (div/label/p/span/etc. with default `position: static`). If an element
 *    already sets its own `position` explicitly (absolute/fixed/sticky),
 *    this rule has no effect and the button anchors to the next positioned
 *    ancestor instead — visually acceptable in nearly all cases, but worth
 *    a spot-check if a .speakit element behaves unusually.
 *  - The button is visible-but-subtle by default (not hover-only), then
 *    highlighted on hover/focus. Hover-only reveal would make the feature
 *    invisible to touch-only and keyboard-only users, which conflicts with
 *    ARISE's accessibility-first philosophy — so it stays reachable and
 *    visible for everyone, just less prominent until interacted with.
 *
 * @author  Ερμής / Wide-AI Ltd
 * @version 1.0 — 2026-08-25
 */

.speakit {
    position: relative;
}

.speakit-btn {
    position: absolute;
    top: -0.6rem;
    right: -0.6rem;
    z-index: 5;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;

    background: var(--bg-white);
    border: 1px solid var(--bg-light);
    border-radius: 50%;
    color: var(--text-dark);
    opacity: 0.55;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
    transition: opacity 0.15s ease, transform 0.15s ease, color 0.15s ease;
}

.speakit-btn .speakit-icon {
    display: inline-flex;
    width: 1.05rem;
    height: 1.05rem;
}

/* Always fully visible (not hover-only) on coarse-pointer / touch devices —
   there is no hover state to reveal it otherwise. */
@media (hover: none) {
    .speakit-btn {
        opacity: 0.75;
    }
}

.speakit:hover .speakit-btn,
.speakit-btn:hover,
.speakit-btn:focus-visible {
    opacity: 1;
    transform: scale(1.06);
}

.speakit-btn:focus-visible {
    outline: 2px solid var(--light-blue);
    outline-offset: 2px;
}

.speakit-btn.is-speakit-playing {
    opacity: 1;
    color: var(--primary-dark-blue);
    border-color: var(--light-blue);
}

/* ── Form-field labels (Όνομα, Επώνυμο, κ.λπ.) ───────────────────────────
   These sit in tight multi-column grids — an absolutely-positioned overlay
   badge would collide with the adjacent field's label. Render inline,
   right after the label text, smaller than the default overlay button. */
label.speakit-label .speakit-btn {
    position: static;
    display: inline-flex;
    vertical-align: middle;
    width: 1.3rem;
    height: 1.3rem;
    margin-left: 0.35rem;
    top: auto;
    right: auto;
    box-shadow: none;
    background: transparent;
    border: none;
}

label.speakit-label .speakit-btn .speakit-icon {
    width: 0.8rem;
    height: 0.8rem;
}

.speakit-btn.is-speakit-loading .speakit-icon {
    animation: speakit-spin 1s linear infinite;
}

/* 2026-08-31: γενικό "waiting" οπτικό για ΟΠΟΙΟΔΗΠΟΤΕ button παίρνει αυτή
   την κλάση μέσω setBtnState() — ΟΧΙ μόνο τα ίδια τα .speakit-btn (με δικό
   τους .speakit-icon που περιστρέφεται παραπάνω), αλλά ΚΑΙ custom κουμπιά
   όπως το "Listen" του RSS summary dialog (dashboard-rss.js) που περνάνε
   ένα πραγματικό DOM button στο window.ARISESpeakIt.speakText(text,
   {button:...}). Χωρίς δικό τους .speakit-icon να περιστραφεί, παίρνουν
   τουλάχιστον αυτό το γενικό dimming + cursor:wait ώστε να είναι σαφές
   ότι κάτι "τρέχει" — ο Groq/LLM απαντάει συνήθως γρηγορότερα από το ίδιο
   το TTS audio generation, άρα αυτό το ενδιάμεσο διάστημα είναι πραγματικά
   αισθητό, όχι θεωρητικό edge-case. */
.is-speakit-loading {
    opacity: .6;
    cursor: wait !important;
}
.is-speakit-loading:disabled {
    pointer-events: none;
}

@keyframes speakit-spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* ── Form fields (input/textarea/select) ─────────────────────────────────
   input/textarea/select can't render appended children, so speakit.js wraps
   them in this container instead. TEXTAREA keeps the default top-right
   corner badge (tall element, corner reads naturally). Single-line
   input/select get the vertically-centered variant below instead — a
   top-right badge would sit oddly on a short field. */
.speakit-field-wrap {
    display: block;
    position: relative;
    width: 100%;
}

.speakit-field-wrap select,
.speakit-field-wrap input,
.speakit-field-wrap textarea {
    width: 100%;
    box-sizing: border-box;
    padding-right: 2.4rem; /* room for the badge so text never runs under it */
}

.speakit-field-wrap.speakit-field-inline .speakit-btn {
    top: 50%;
    right: 0.4rem;
    transform: translateY(-50%);
}

.speakit-field-wrap.speakit-field-inline:hover .speakit-btn,
.speakit-field-wrap.speakit-field-inline .speakit-btn:hover,
.speakit-field-wrap.speakit-field-inline .speakit-btn:focus-visible {
    transform: translateY(-50%) scale(1.06);
}