/**
 * Setin Voice Search — voice-search.css
 * Author: Ilias Settas / Setin Designs
 */

/* ─── CSS Variables ─────────────────────────────────────────────────────────── */
:root {
    --svs-mic-color:    #000000;
    --svs-pulse-color:  #e91e8c;
    --svs-overlay-bg:   rgba(0, 0, 0, 0.82);
    --svs-overlay-text: #ffffff;
    --svs-radius:       50%;
    --svs-transition:   0.25s ease;
    --svs-z-mic:        9000;
    --svs-z-overlay:    9999;
}

/* ─── Mic Button — base ──────────────────────────────────────────────────────── */
.svs-mic-btn {
    display:          inline-flex;
    align-items:      center;
    justify-content:  center;
    width:            36px;
    height:           36px;
    border:           none;
    border-radius:    var(--svs-radius);
    background:       transparent;
    color:            var(--svs-mic-color);
    cursor:           pointer;
    padding:          0;
    transition:       background var(--svs-transition),
                      color var(--svs-transition),
                      transform var(--svs-transition);
    position:         relative;
    z-index:          var(--svs-z-mic);
    flex-shrink:      0;
}

.svs-mic-btn:focus-visible {
    outline:        2px solid var(--svs-pulse-color);
    outline-offset: 3px;
}

.svs-mic-btn svg {
    width:  20px;
    height: 20px;
    display: block;
}

/* ─── Mic Button — states ────────────────────────────────────────────────────── */
.svs-mic-btn.svs-state-idle:hover {
    background: rgba(0, 0, 0, 0.07);
    transform:  scale(1.08);
}

.svs-mic-btn.svs-state-listening {
    color:      var(--svs-pulse-color);
    background: rgba(0, 0, 0, 0.06);
    animation:  svs-pulse-ring 1.4s ease-out infinite;
}

.svs-mic-btn.svs-state-error {
    color: #d32f2f;
}

/* ─── Pulse animation ────────────────────────────────────────────────────────── */
@keyframes svs-pulse-ring {
    0%   { box-shadow: 0 0 0 0   color-mix(in srgb, var(--svs-pulse-color) 60%, transparent); }
    70%  { box-shadow: 0 0 0 10px color-mix(in srgb, var(--svs-pulse-color) 0%,  transparent); }
    100% { box-shadow: 0 0 0 0   color-mix(in srgb, var(--svs-pulse-color) 0%,  transparent); }
}

/* Fallback for browsers without color-mix */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
    @keyframes svs-pulse-ring {
        0%   { box-shadow: 0 0 0 0   rgba(233, 30, 140, 0.6); }
        70%  { box-shadow: 0 0 0 10px rgba(233, 30, 140, 0);   }
        100% { box-shadow: 0 0 0 0   rgba(233, 30, 140, 0);   }
    }
}

/* ─── Input wrapper (position: inside) ──────────────────────────────────────── */
.svs-input-wrapper {
    position:   relative;
    display:    inline-flex;
    align-items: center;
    width:      100%;
}

.svs-input-wrapper input {
    padding-right: 44px !important; /* make room for the mic button */
    width:         100%;
}

.svs-mic-btn.svs-inside {
    position:  absolute;
    right:     6px;
    top:       50%;
    transform: translateY(-50%);
}

.svs-mic-btn.svs-inside.svs-state-listening {
    transform: translateY(-50%) scale(1); /* keep centered while pulsing */
}

/* ─── Beside position ────────────────────────────────────────────────────────── */
.svs-mic-btn.svs-beside {
    margin-left: 6px;
    vertical-align: middle;
}

/* ─── Floating button ────────────────────────────────────────────────────────── */
.svs-mic-btn.svs-floating {
    position:   fixed;
    bottom:     24px;
    right:      24px;
    width:      52px;
    height:     52px;
    background: var(--svs-mic-color);
    color:      #fff;
    box-shadow: 0 4px 16px rgba(0,0,0,0.22);
    z-index:    var(--svs-z-mic);
    transition: background var(--svs-transition),
                box-shadow var(--svs-transition),
                transform var(--svs-transition);
}

.svs-mic-btn.svs-floating:hover {
    transform:  scale(1.08) translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.28);
}

.svs-mic-btn.svs-floating.svs-state-listening {
    background: var(--svs-pulse-color);
    color:      #fff;
}

.svs-mic-btn.svs-floating svg {
    width:  22px;
    height: 22px;
}

/* ─── Overlay ─────────────────────────────────────────────────────────────────── */
.svs-overlay {
    display:         flex;
    align-items:     center;
    justify-content: center;
    position:        fixed;
    inset:           0;
    background:      var(--svs-overlay-bg);
    z-index:         var(--svs-z-overlay);
    opacity:         0;
    pointer-events:  none;
    transition:      opacity 0.3s ease;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.svs-overlay.svs-overlay-visible {
    opacity:        1;
    pointer-events: auto;
}

/* ─── Overlay inner ──────────────────────────────────────────────────────────── */
.svs-overlay-inner {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    gap:             16px;
    text-align:      center;
    color:           var(--svs-overlay-text);
    padding:         40px 32px;
    position:        relative;
    max-width:       400px;
    width:           90%;
}

/* ─── Overlay mic icon ───────────────────────────────────────────────────────── */
.svs-overlay-mic {
    width:           72px;
    height:          72px;
    border-radius:   50%;
    background:      rgba(255,255,255,0.1);
    display:         flex;
    align-items:     center;
    justify-content: center;
    color:           #fff;
    transition:      background var(--svs-transition);
}

.svs-overlay-mic svg {
    width:  32px;
    height: 32px;
}

.svs-overlay-listening .svs-overlay-mic {
    background: var(--svs-pulse-color);
    animation:  svs-pulse-ring 1.4s ease-out infinite;
}

.svs-overlay-processing .svs-overlay-mic {
    background: rgba(255,255,255,0.15);
    animation:  svs-spin 1s linear infinite;
}

@keyframes svs-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* ─── Overlay message ────────────────────────────────────────────────────────── */
.svs-overlay-message {
    font-size:   1.1rem;
    font-weight: 500;
    margin:      0;
    color:       rgba(255,255,255,0.92);
    letter-spacing: 0.02em;
}

/* ─── Live transcript ────────────────────────────────────────────────────────── */
.svs-transcript {
    min-height:  1.4em;
    font-size:   1.35rem;
    font-weight: 600;
    color:       #fff;
    margin:      0;
    letter-spacing: 0.01em;
    transition:  opacity 0.2s;
}

.svs-transcript:empty {
    opacity: 0;
}

/* ─── Overlay close button ───────────────────────────────────────────────────── */
.svs-overlay-close {
    position:   absolute;
    top:        12px;
    right:      12px;
    background: transparent;
    border:     none;
    color:      rgba(255,255,255,0.6);
    font-size:  1.1rem;
    cursor:     pointer;
    padding:    6px 10px;
    border-radius: 4px;
    transition: color var(--svs-transition),
                background var(--svs-transition);
    line-height: 1;
}

.svs-overlay-close:hover {
    color:      #fff;
    background: rgba(255,255,255,0.1);
}

.svs-overlay-close:focus-visible {
    outline:        2px solid rgba(255,255,255,0.6);
    outline-offset: 2px;
}

/* ─── Responsive ─────────────────────────────────────────────────────────────── */
@media ( max-width: 480px ) {
    .svs-overlay-inner {
        padding: 32px 20px;
        gap:     12px;
    }

    .svs-overlay-mic {
        width:  60px;
        height: 60px;
    }

    .svs-overlay-mic svg {
        width:  26px;
        height: 26px;
    }

    .svs-overlay-message {
        font-size: 0.95rem;
    }

    .svs-transcript {
        font-size: 1.15rem;
    }

    .svs-mic-btn.svs-floating {
        bottom: 16px;
        right:  16px;
        width:  48px;
        height: 48px;
    }
}

/* ─── Reduced motion ─────────────────────────────────────────────────────────── */
@media ( prefers-reduced-motion: reduce ) {
    .svs-mic-btn,
    .svs-overlay,
    .svs-overlay-mic,
    .svs-transcript {
        animation:  none !important;
        transition: none !important;
    }
}

/* ─── XStore in-row position ─────────────────────────────────────────────────
   Mic sits inside .input-row flex container, before the search/clear buttons.
   No wrapper needed — just inherits the flex layout.               */
.svs-mic-btn.svs-inrow {
    flex-shrink:  0;
    margin-right: 4px;
    background:   transparent;
    color:        var(--svs-mic-color);
}

.svs-mic-btn.svs-inrow:hover {
    background: rgba(0,0,0,0.07);
}

.svs-mic-btn.svs-inrow.svs-state-listening {
    color:      var(--svs-pulse-color);
    background: transparent;
}

/* ─── XStore dark search mode fix ───────────────────────────────────────────
   Desktop overlay uses data-search-mode="dark" which makes background dark.
   Force mic color to match the search-button (currentColor inherits white).  */
[data-search-mode="dark"] .svs-mic-btn.svs-inrow {
    color: currentColor;
}

[data-search-mode="dark"] .svs-mic-btn.svs-inrow.svs-state-listening {
    color: var(--svs-pulse-color);
}







/* ─── Focus animation ────────────────────────────────────────────────────────*/
@keyframes svs-focus-wiggle {
    0%   { transform: scale(1);    }
    30%  { transform: scale(1.12); }
    70%  { transform: scale(1.06); }
    100% { transform: scale(1);    }
}
.svs-mic-btn.svs-focus-anim {
    animation: svs-focus-wiggle 0.4s ease-in-out !important;
    transform-origin: center center !important;
    will-change: transform !important;
}

/* ─── Arc wrapper ────────────────────────────────────────────────────────────*/
.svs-mic-wrapper {
    position: relative !important;
    display:  inline-flex !important;
    align-items: center !important;
    overflow: visible !important;
}

/* ─── Drop lines: converge into mic from above ───────────────────────────────*/
.svs-bars {
    position:       absolute !important;
    top:            -3px !important;
    left:           50% !important;
    transform:      translateX(-50%) !important;
    width:          20px !important;
    height:         14px !important;
    pointer-events: none;
    overflow:       visible !important;
}

.svs-bar {
    position:      absolute !important;
    width:         1px !important;
    border-radius: 1px !important;
    background:    var(--svs-mic-color) !important;
    opacity:       0;
    transform-origin: bottom center !important;
}

.svs-bar-1 { height: 9px !important;  left: 2px !important;  top: 0 !important; }
.svs-bar-2 { height: 12px !important; left: 9px !important;  top: -2px !important; }
.svs-bar-3 { height: 9px !important;  left: 16px !important; top: 0 !important; }

@keyframes svs-drop1 {
    0%   { opacity:0;   transform: rotate(-28deg) translateY(-12px); }
    25%  { opacity:.85; transform: rotate(-18deg) translateY(-2px);  }
    60%  { opacity:.55; transform: rotate(-8deg)  translateY(6px);   }
    100% { opacity:0;   transform: rotate(-2deg)  translateY(12px);  }
}
@keyframes svs-drop2 {
    0%   { opacity:0;   transform: translateY(-14px); }
    25%  { opacity:.85; transform: translateY(-2px);  }
    60%  { opacity:.55; transform: translateY(6px);   }
    100% { opacity:0;   transform: translateY(12px);  }
}
@keyframes svs-drop3 {
    0%   { opacity:0;   transform: rotate(43deg)  translateY(-12px); }
    25%  { opacity:.85; transform: rotate(30deg)  translateY(-2px);  }
    60%  { opacity:.55; transform: rotate(15deg)  translateY(6px);   }
    100% { opacity:0;   transform: rotate(3deg)   translateY(12px);  }
}

.svs-mic-btn.svs-focused ~ .svs-bars .svs-bar-1,
.svs-mic-wrapper .svs-mic-btn.svs-focused ~ .svs-bars .svs-bar-1 {
    animation: svs-drop1 1.3s ease-in infinite .15s !important;
}
.svs-mic-btn.svs-focused ~ .svs-bars .svs-bar-2,
.svs-mic-wrapper .svs-mic-btn.svs-focused ~ .svs-bars .svs-bar-2 {
    animation: svs-drop2 1.3s ease-in infinite 0s !important;
}
.svs-mic-btn.svs-focused ~ .svs-bars .svs-bar-3,
.svs-mic-wrapper .svs-mic-btn.svs-focused ~ .svs-bars .svs-bar-3 {
    animation: svs-drop3 1.3s ease-in infinite .15s !important;
}

.svs-state-listening ~ .svs-bars { opacity:0 !important; animation:none !important; }

/* ─── Wave rings ─────────────────────────────────────────────────────────────*/
.svs-mic-btn { overflow: visible !important; }
.svs-wave {
    position:       absolute !important;
    border-radius:  50% !important;
    border:         2px solid var(--svs-pulse-color) !important;
    opacity:        0;
    pointer-events: none;
    top:  50% !important;
    left: 50% !important;
}
@keyframes svs-wave-pulse {
    0%   { opacity: 0.7; transform: translate(-50%,-50%) scale(1.8); }
    100% { opacity: 0;   transform: translate(-50%,-50%) scale(0.4); }
}
.svs-state-listening .svs-wave-1 { animation: svs-wave-pulse 1.4s ease-in infinite 0s !important; }
.svs-state-listening .svs-wave-2 { animation: svs-wave-pulse 1.4s ease-in infinite .35s !important; }
.svs-state-listening .svs-wave-3 { animation: svs-wave-pulse 1.4s ease-in infinite .7s !important; }

/* ─── Tooltip — below the search box, injected via JS ───────────────────────*/
.svs-tooltip {
    position:       fixed !important;
    background:     rgba(20,20,20,0.85) !important;
    color:          #fff !important;
    font-size:      10px !important;
    font-family:    inherit !important;
    font-weight:    500 !important;
    white-space:    nowrap !important;
    padding:        4px 12px !important;
    border-radius:  20px !important;
    pointer-events: none !important;
    opacity:        0 !important;
    transition:     opacity 0.25s ease !important;
    z-index:        999999 !important;
    box-shadow:     0 2px 8px rgba(0,0,0,0.18) !important;
    transform:      translateX(-50%) !important;
}

.svs-tooltip.svs-tooltip-visible {
    opacity: 1 !important;
}




/* Remove XStore's hover background on non-floating mic buttons only */
.svs-mic-btn.svs-inrow:hover,
.svs-mic-btn.svs-beside:hover,
.svs-mic-btn.svs-inrow:focus,
.svs-mic-btn.svs-beside:focus {
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;
}
.svs-mic-btn.svs-inrow.svs-state-idle:hover,
.svs-mic-btn.svs-beside.svs-state-idle:hover {
    background: transparent !important;
    transform: scale(1.08) !important;
}

/* Floating button: preserve its own hover styles */
.svs-mic-btn.svs-floating:hover {
    transform: scale(1.08) translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(0,0,0,0.28) !important;
}

/* Force floating button background — overrides any XStore interference */
.svs-mic-btn.svs-floating,
.svs-mic-btn.svs-floating:hover,
.svs-mic-btn.svs-floating:focus {
    background: var(--svs-mic-color) !important;
    color: #fff !important;
}
.svs-mic-btn.svs-floating:hover {
    transform:  scale(1.08) translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(0,0,0,0.28) !important;
}
.svs-mic-btn.svs-floating.svs-state-listening {
    background: var(--svs-pulse-color) !important;
}