/*
 * HDS Voice Order — styles front (mobile-first).
 * Personnalisation via variables CSS surchargées côté thème :
 *   #hds-vo { --hds-vo-accent: #634c9f; }
 */

.hds-vo {
    --hds-vo-accent: #2e7d32;
    --hds-vo-accent-dark: #1b5e20;
    --hds-vo-danger: #c62828;
    --hds-vo-warning: #b26a00;
    --hds-vo-border: #e0e0e0;
    --hds-vo-radius: 12px;

    max-width: 640px;
    margin: 0 auto;
    font-size: 16px;
    line-height: 1.5;
}

/* ---------------------------------------------------------------------- */
/* Bouton micro                                                            */
/* ---------------------------------------------------------------------- */

.hds-vo__mic {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    padding: 16px 24px;
    border: none;
    border-radius: var(--hds-vo-radius);
    background: var(--hds-vo-accent);
    color: #fff;
    font-size: 1.05em;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.1s ease;
}

.hds-vo__mic:hover:not(:disabled) {
    background: var(--hds-vo-accent-dark);
}

.hds-vo__mic:active:not(:disabled) {
    transform: scale(0.98);
}

.hds-vo__mic:disabled {
    opacity: 0.6;
    cursor: wait;
}

.hds-vo__mic-icon {
    display: inline-flex;
    width: 24px;
    height: 24px;
}

.hds-vo__mic-icon svg {
    width: 100%;
    height: 100%;
}

/* Pulsation pendant l'enregistrement */
.hds-vo__mic--recording {
    background: var(--hds-vo-danger);
    animation: hds-vo-pulse 1.2s ease-in-out infinite;
}

.hds-vo__mic--recording:hover:not(:disabled) {
    background: var(--hds-vo-danger);
}

@keyframes hds-vo-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(198, 40, 40, 0.45); }
    50%      { box-shadow: 0 0 0 12px rgba(198, 40, 40, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .hds-vo__mic--recording {
        animation: none;
    }
}

.hds-vo__hint {
    margin: 8px 0 0;
    font-size: 0.85em;
    color: #757575;
    text-align: center;
}

/* ---------------------------------------------------------------------- */
/* Statut (timer, chargement, erreurs inline)                              */
/* ---------------------------------------------------------------------- */

.hds-vo__status {
    min-height: 1.5em;
    margin-top: 10px;
    text-align: center;
    font-weight: 600;
}

.hds-vo__status--recording {
    color: var(--hds-vo-danger);
    font-variant-numeric: tabular-nums;
}

.hds-vo__status--processing {
    color: var(--hds-vo-accent-dark);
}

.hds-vo__status--processing::after {
    content: '';
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-left: 8px;
    vertical-align: -2px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: hds-vo-spin 0.8s linear infinite;
}

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

.hds-vo__status--error {
    color: var(--hds-vo-danger);
}

/* ---------------------------------------------------------------------- */
/* Panneau de revue                                                        */
/* ---------------------------------------------------------------------- */

.hds-vo__panel {
    margin-top: 16px;
    padding: 20px;
    border: 1px solid var(--hds-vo-border);
    border-radius: var(--hds-vo-radius);
    background: #fff;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.hds-vo__transcript {
    margin: 0 0 16px;
    padding: 12px;
    border-left: 3px solid var(--hds-vo-accent);
    background: #f5f5f5;
    border-radius: 0 8px 8px 0;
    font-size: 0.95em;
}

.hds-vo__transcript-intro {
    font-weight: 600;
}

.hds-vo__title {
    margin: 0 0 12px;
    font-size: 1.1em;
}

.hds-vo__title--success {
    color: var(--hds-vo-accent-dark);
}

.hds-vo__title--warning {
    color: var(--hds-vo-warning);
}

/* Lignes de commande */
.hds-vo__lines {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.hds-vo__line {
    padding: 12px;
    border: 1px solid var(--hds-vo-border);
    border-radius: 8px;
}

.hds-vo__line--check {
    border-color: var(--hds-vo-warning);
    background: #fff8ec;
}

.hds-vo__line-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.hds-vo__badge {
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 0.75em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    background: #e8f5e9;
    color: var(--hds-vo-accent-dark);
}

.hds-vo__line--check .hds-vo__badge {
    background: #fff3e0;
    color: var(--hds-vo-warning);
}

.hds-vo__requested {
    font-size: 0.85em;
    color: #616161;
}

.hds-vo__line-controls {
    display: flex;
    gap: 8px;
}

.hds-vo__product {
    flex: 1;
    min-width: 0;
    padding: 10px;
    border: 1px solid var(--hds-vo-border);
    border-radius: 8px;
    font-size: 0.95em;
    background: #fff;
}

.hds-vo__qty {
    width: 76px;
    padding: 10px;
    border: 1px solid var(--hds-vo-border);
    border-radius: 8px;
    font-size: 0.95em;
    text-align: center;
}

/* Listes de résultat */
.hds-vo__added,
.hds-vo__failed {
    margin: 0 0 16px;
    padding-left: 20px;
}

.hds-vo__failed li {
    color: var(--hds-vo-warning);
}

.hds-vo__total {
    font-weight: 700;
    margin: 0 0 16px;
}

/* Erreurs */
.hds-vo__error,
.hds-vo__panel-error {
    margin: 12px 0;
    padding: 12px;
    border-radius: 8px;
    background: #fdecea;
    color: var(--hds-vo-danger);
    font-size: 0.95em;
}

/* Boutons d'action */
.hds-vo__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
}

.hds-vo__btn {
    padding: 12px 20px;
    border: 1px solid var(--hds-vo-border);
    border-radius: 8px;
    background: #f5f5f5;
    color: #212121;
    font-size: 0.95em;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    transition: background 0.2s ease;
}

.hds-vo__btn:hover {
    background: #eeeeee;
}

.hds-vo__btn--primary {
    background: var(--hds-vo-accent);
    border-color: var(--hds-vo-accent);
    color: #fff;
}

.hds-vo__btn--primary:hover {
    background: var(--hds-vo-accent-dark);
    color: #fff;
}

.hds-vo__btn--ghost {
    background: transparent;
    border-color: transparent;
    color: #757575;
}

/* Message connexion requise */
.hds-vo--login-required p {
    padding: 16px;
    border: 1px dashed var(--hds-vo-border);
    border-radius: var(--hds-vo-radius);
    text-align: center;
}

/* ---------------------------------------------------------------------- */
/* ≥ 600 px : boutons sur une ligne, bouton micro auto                     */
/* ---------------------------------------------------------------------- */

@media (min-width: 600px) {
    .hds-vo__mic {
        width: auto;
        margin: 0 auto;
    }

    .hds-vo__actions .hds-vo__btn {
        flex: 0 0 auto;
    }
}

/* ---------------------------------------------------------------------- */
/* Variante flottante : bouton rond bas-droite sur toutes les pages        */
/* ---------------------------------------------------------------------- */

.hds-vo--floating {
    position: fixed;
    right: 16px;
    bottom: 16px;
    /* Au-dessus du widget WhatsApp du site (z-index 999999) */
    z-index: 1000001;
    max-width: none;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.hds-vo--floating .hds-vo__mic,
.hds-vo--floating .hds-vo__mic:hover:not(:disabled) {
    width: 60px;
    height: 60px;
    padding: 0;
    border-radius: 50%;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

.hds-vo--floating .hds-vo__mic {
    background: var(--hds-vo-accent);
}

.hds-vo--floating .hds-vo__mic:hover:not(:disabled) {
    background: var(--hds-vo-accent-dark);
}

.hds-vo--floating .hds-vo__mic--recording,
.hds-vo--floating .hds-vo__mic--recording:hover:not(:disabled) {
    background: var(--hds-vo-danger);
}

/* Libellé masqué visuellement, conservé pour les lecteurs d'écran */
.hds-vo--floating .hds-vo__mic-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.hds-vo--floating .hds-vo__hint {
    display: none;
}

/* Statut en bulle au-dessus du bouton, masqué quand vide */
.hds-vo--floating .hds-vo__status {
    order: -1;
    margin: 0 0 10px;
    padding: 6px 12px;
    background: #fff;
    border: 1px solid var(--hds-vo-border);
    border-radius: 999px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    font-size: 0.85em;
}

.hds-vo--floating .hds-vo__status:empty {
    display: none;
}

/* Panneau ancré au-dessus du bouton, hauteur bornée, défilable */
.hds-vo--floating .hds-vo__panel {
    position: fixed;
    right: 16px;
    bottom: 88px;
    z-index: 1000002;
    width: min(420px, calc(100vw - 32px));
    max-height: min(70vh, 560px);
    overflow-y: auto;
    margin: 0;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
}

/* Mobile/tablette : la navbar mobile fixe du thème (klb-mobile-bottom)
   occupe le bas d'écran et WhatsApp la droite → micro à GAUCHE, au-dessus */
@media (max-width: 991px) {
    .hds-vo--floating {
        right: auto;
        left: 12px;
        bottom: calc(74px + env(safe-area-inset-bottom, 0px));
        align-items: flex-start;
    }

    .hds-vo--floating .hds-vo__panel {
        left: 12px;
        right: 12px;
        width: auto;
        bottom: calc(148px + env(safe-area-inset-bottom, 0px));
        max-height: 55vh;
    }
}