.speech-btn {
    position: fixed;
    z-index: 99999;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #e10514;
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    transform: translate(-10px, -50px);
    overflow: hidden;
}

.speech-btn .icon-sound:before,
.speech-btn .icon-refresh:before {
    color: #fff !important;
    font-size: 18px;
}

.speech-btn > .icn-load,
.speech-btn > .icon-pulse {
    display: none !important;
}

.speech-btn > .icn-trigger {
    display: flex !important;
}

.speech-btn.is-loading > .icn-load {
    display: flex !important;
}

.speech-btn.is-loading > .icn-trigger,
.speech-btn.is-loading > .icon-pulse,
.speech-btn.is-playing > .icn-load,
.speech-btn.is-playing > .icn-trigger {
    display: none !important;
}

.speech-btn.is-playing > .icon-pulse {
    display: flex !important;
    align-items: flex-end;
    justify-content: center;
    gap: 2px;
    height: 16px;
    width: 18px;
}

.speech-btn.is-playing .pulse-bar {
    display: block !important;
    width: 2px;
    height: 8px;
    margin: 0;
    padding: 0;
    font-size: 0;
    line-height: 0;
    background: #fff;
    border-radius: 1px;
    animation: speech-pulse 0.7s ease-in-out infinite;
}

.speech-btn.is-playing .icon-pulse .pulse-bar:nth-child(1) { height: 6px; animation-delay: 0s; }
.speech-btn.is-playing .icon-pulse .pulse-bar:nth-child(2) { height: 12px; animation-delay: 0.1s; }
.speech-btn.is-playing .icon-pulse .pulse-bar:nth-child(3) { height: 16px; animation-delay: 0.2s; }
.speech-btn.is-playing .icon-pulse .pulse-bar:nth-child(4) { height: 12px; animation-delay: 0.3s; }
.speech-btn.is-playing .icon-pulse .pulse-bar:nth-child(5) { height: 6px; animation-delay: 0.4s; }

.speech-btn.is-loading > .icn-load {
    animation: speech-spin 1s linear infinite;
}

@keyframes speech-pulse {
    0%, 100% { transform: scaleY(0.45); }
    50% { transform: scaleY(1); }
}

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