/**
 * HashOne Vapi Assistant Styles
 * Version: 1.0.0
 */

/*
 * Fallback palette. The active palette is injected from the plugin settings
 * (Vapi Assistant > Appearance) via wp_add_inline_style, which redefines these
 * same custom properties. Defaults below match the Laetitia Villetorte brand.
 */
:root {
    --vapi-primary-color: #23666D;   /* brand teal  */
    --vapi-primary-rgb: 35, 102, 109;
    --vapi-secondary-color: #164A50;  /* deeper teal */
    --vapi-accent-color: #BD8D2E;     /* brand gold  */
    --vapi-accent-rgb: 189, 141, 46;

    /* Panel shades */
    --vapi-surface: #0E2A2E;
    --vapi-surface-deep: #091B1E;
    --vapi-surface-raised: #163A3F;
    --vapi-surface-input: #123237;
    --vapi-surface-hover: #1B454B;

    --vapi-button-gradient: linear-gradient(135deg, #23666D 0%, #164A50 100%);

    --vapi-text-dark: #1f2937;
    --vapi-text-light: rgba(255, 255, 255, 0.65);
    --vapi-bg-light: #f9fafb;
    --vapi-border-color: rgba(255, 255, 255, 0.10);
    --vapi-shadow: 0 10px 25px rgba(0, 0, 0, 0.18);
    --vapi-shadow-hover: 0 15px 35px rgba(0, 0, 0, 0.25);
}

/* Main Widget Container */
.hashone-vapi-widget {
    position: fixed;
    z-index: 999999;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* Position Classes */
.hashone-vapi-bottom-right {
    bottom: 60px;
    right: 64px;
}

.hashone-vapi-bottom-left {
    bottom: 30px;
    left: 30px;
}

.hashone-vapi-top-right {
    top: 30px;
    right: 30px;
}

.hashone-vapi-top-left {
    top: 30px;
    left: 30px;
}

/* Floating Toggle Button */
.hashone-vapi-toggle {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--vapi-button-gradient);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--vapi-shadow);
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
    color: white;
    position: relative;
    overflow: visible;
}

.hashone-vapi-toggle::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.2), transparent);
    opacity: 0;
    transition: opacity 0.4s ease;
    display: none;
}

.hashone-vapi-toggle .hashone-vapi-icon-image:hover {
    transform: scale(1.15);
    transition:0.5s ease all;
    box-shadow: var(--vapi-shadow-hover);
}

.hashone-vapi-icon-image{
    transition:0.5s ease all;
}

.hashone-vapi-toggle:hover::before {
    opacity: 1;
}

.hashone-vapi-toggle:active {
    transform: scale(0.95);
    transition: transform 0.1s ease;
}

.hashone-vapi-icon-default {
    width: 32px;
    height: 32px;
    animation: pulse 2s infinite;
}

.hashone-vapi-icon-image {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.05);
    }
}

/* Wave Animation INSIDE Icon */
.hashone-vapi-wave-inside {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    z-index: 10;
    pointer-events: none;
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.hashone-vapi-wave-gif {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}

/* Lottie Animation Container */
.hashone-vapi-lottie-container {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hashone-vapi-lottie-container svg {
    width: 100% !important;
    height: 100% !important;
    max-width: 100%;
    max-height: 100%;
}

/* Voice Loading Indicator */
.hashone-vapi-voice-loading {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    z-index: 11;
        background: var(--vapi-button-gradient) !important;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.hashone-vapi-voice-loading-spinner {
    width: 30px;
    height: 30px;
    border: 3px solid rgba(var(--vapi-primary-rgb), 0.3);
    border-top-color: var(--vapi-primary-color);
    border-radius: 50%;
    animation: voiceSpin 0.8s linear infinite;
}

@keyframes voiceSpin {
    to {
        transform: rotate(360deg);
    }
}

.hashone-vapi-wave-bars-inside {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    height: 100%;
}

.hashone-vapi-wave-bar-inside {
    width: 3px;
    height: 8px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 2px;
    animation: waveAnimationInside 1s ease-in-out infinite;
}

.hashone-vapi-wave-bar-inside:nth-child(1) {
    animation-delay: 0s;
}

.hashone-vapi-wave-bar-inside:nth-child(2) {
    animation-delay: 0.1s;
}

.hashone-vapi-wave-bar-inside:nth-child(3) {
    animation-delay: 0.2s;
}

.hashone-vapi-wave-bar-inside:nth-child(4) {
    animation-delay: 0.3s;
}

.hashone-vapi-wave-bar-inside:nth-child(5) {
    animation-delay: 0.4s;
}

@keyframes waveAnimationInside {
    0%, 100% {
        height: 8px;
        opacity: 0.6;
    }
    50% {
        height: 24px;
        opacity: 1;
    }
}

/* Status Label */
.hashone-vapi-status-label {
    position: absolute;
    bottom: -59px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--vapi-button-gradient);
    backdrop-filter: blur(10px);
    padding: 7px 18px 10px 18px;
    border-radius: 20px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s 0.3s;
    pointer-events: none;
    box-shadow: 0px 2px 12px rgb(251 248 248 / 18%);
    min-width: 96px;
    text-align: center;
}

.hashone-vapi-status-label.show {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(-8px);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s 0s;
}

.hashone-vapi-status-label span {
    color: #ffffff;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.3px;
    transition: opacity 0.15s ease;
    display: inline-block;
}

/* Icon wrapper */
.hashone-vapi-icon-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    opacity: 1;
    transition: opacity 0.3s ease;
    overflow: visible;
}

.hashone-vapi-helper-label {
    position: absolute;
    top: -46px;
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    color: #111827;
    padding: 6px 14px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.3px;
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.12);
    pointer-events: none;
    white-space: nowrap;
    z-index: 15;
}

.hashone-vapi-helper-label::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 12px;
    background: var(--vapi-surface);
    box-shadow: inherit;
    clip-path: polygon(50% 100%, 0 0, 100% 0);

}

.hashone-vapi-helper-hand {
    font-size: 15px;
    line-height: 1;
}

.hashone-vapi-helper-text {
    color: #111827;
}

/* Hide icon when wave is active */
.hashone-vapi-toggle.wave-active .hashone-vapi-icon-wrapper {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0s 0.2s;
}

/* Show wave when active */
.hashone-vapi-toggle.wave-active .hashone-vapi-wave-inside {
    opacity: 1;
    visibility: visible;
}

/* Modal Overlay */
.hashone-vapi-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000000;
    animation: fadeIn 0.3s ease-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Modal Content */
.hashone-vapi-modal-content {
    background: linear-gradient(160deg, var(--vapi-surface) 0%, var(--vapi-surface-deep) 100%);
    border-radius: 24px;
    padding: 40px;
    max-width: 500px;
    width: 90%;
    position: relative;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
    animation: slideUp 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    color: white;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Close Button */
.hashone-vapi-close {
    position: absolute!important;
    top: 20px!important;
    right: 20px!important;
    background: rgba(255, 255, 255, 0.1)!important;
    border: none!important;
    color: white!important;
    font-size: 28px!important;
    cursor: pointer!important;
    /* Width and height must match, or border-radius:50% yields an ellipse. */
    box-sizing: border-box!important;
    padding: 0!important;
    flex: 0 0 auto!important;
    width: 40px!important;
    height: 40px!important;
    min-width: 40px!important;
    min-height: 40px!important;
    box-shadow: none!important;
    border-radius: 50%!important;
    display: flex!important;
    align-items: center!important;
    justify-content: center!important;
    transition: all 0.3s!important;
    line-height: 1!important;
}

.hashone-vapi-close:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: rotate(90deg);
}

/* Modal Header */
.hashone-vapi-modal-header h3 {
    margin: 0 0 30px 0!important;
    font-size: 24px!important;
    font-weight: 600!important;
    text-align: center!important;
    color: white!important;
}

/* Modal Body */
.hashone-vapi-modal-body {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* Action Buttons */
.hashone-vapi-action-btn {
    display: flex !important;
    align-items: center!important;
    justify-content: center!important;
    gap: 12px!important;
    padding: 18px 24px!important;
    border: 2px solid rgba(255, 255, 255, 0.2)!important;
    border-radius: 12px!important;
    background: rgba(255, 255, 255, 0.05)!important;
    color: white!important;
    font-size: 16px!important;
    font-weight: 500!important;
    cursor: pointer!important;
    transition: all 0.3s!important;
}

.hashone-vapi-action-btn svg {
    width: 24px;
    height: 24px;
    transition: transform 0.3s;
}

.hashone-vapi-action-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.4);
    transform: translateY(-2px);
}

.hashone-vapi-action-btn:hover svg {
    transform: scale(1.1);
}

.hashone-vapi-action-btn:active {
    transform: translateY(0);
}

.hashone-vapi-modal-footer {
    text-align: center;
    margin-top: 20px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 14px;
}

/* Form step */
#hashone-vapi-step-form .hashone-vapi-form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 14px;
}

#hashone-vapi-step-form label {
    font-size: 13px;
    color: rgba(255,255,255,0.9);
    font-weight: 500;
}

#hashone-vapi-step-form input[type="text"],
#hashone-vapi-step-form input[type="email"],
#hashone-vapi-step-form input[type="tel"]{
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.06);
    color: #fff;
    outline: none;
    transition: border-color .2s, box-shadow .2s, background .2s;
}

#hashone-vapi-step-form input::placeholder{
    color: rgba(255,255,255,0.55);
}

#hashone-vapi-step-form input:focus{
    border-color: rgba(var(--vapi-primary-rgb), 0.7);
    box-shadow: 0 0 0 3px rgba(var(--vapi-primary-rgb), 0.2);
    background: rgba(255,255,255,0.08);
}

.hashone-vapi-error{
    color: #fda4af;
    font-size: 12px;
    min-height: 14px;
}

.hashone-vapi-form-actions{
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 10px;
}

/* End form step */

/* Assistant Container */
.hashone-vapi-assistant-container {
    position: fixed;
    bottom: 110px;
    width: 420px;
    max-width: calc(100vw - 40px);
    height: 650px;
    max-height: calc(100vh - 140px);
    background: var(--vapi-surface);
    border-radius: 24px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    z-index: 1000001;
    animation: slideUp 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

/* Position the assistant container based on toggle position */
.hashone-vapi-bottom-right .hashone-vapi-assistant-container {
    right: 30px;
}

.hashone-vapi-bottom-left .hashone-vapi-assistant-container {
    left: 30px;
}

.hashone-vapi-top-right .hashone-vapi-assistant-container {
    top: 110px;
    bottom: auto;
    right: 30px;
}

.hashone-vapi-top-left .hashone-vapi-assistant-container {
    top: 110px;
    bottom: auto;
    left: 30px;
}

.hashone-vapi-assistant-content {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Assistant Header */
.hashone-vapi-assistant-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    background: var(--vapi-surface);
    border-radius: 20px 20px 0 0;
    color: white;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.hashone-vapi-assistant-title {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 600;
    font-size: 16px;
}

.hashone-vapi-avatar {
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hashone-vapi-avatar svg {
    width: 20px;
    height: 20px;
}

.hashone-vapi-chat-input::placeholder {
    color: #fff !important;
}

.hashone-vapi-send-btn svg {
    overflow: visible !important;
}

.hashone-vapi-avatar img {
    width: 60px !important;
}

.hashone-vapi-close-assistant {
    background: rgba(255, 255, 255, 0.2)!important;
    border: none!important;
    color: white!important;
    font-size: 24px!important;
    cursor: pointer!important;
    /* Square, so border-radius:50% is a circle rather than an ellipse. */
    box-sizing: border-box!important;
    padding: 0!important;
    flex: 0 0 auto!important;
    width: 36px!important;
    height: 36px!important;
    min-width: 36px!important;
    min-height: 36px!important;
    box-shadow: none!important;
    border-radius: 50%!important;
    display: flex!important;
    align-items: center!important;
    justify-content: center!important;
    transition: all 0.3s!important;
    line-height: 1!important;
}

.hashone-vapi-close-assistant:hover {
    background: rgba(255, 255, 255, 0.3)!important;
    transform: rotate(90deg)!important;
}

/* Assistant Body */
.hashone-vapi-assistant-body {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
    background: var(--vapi-bg-light);
}

.hashone-vapi-message {
    /* background: white;
    padding: 16px; */
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    margin-bottom: 15px;
}

.hashone-vapi-message p {
    margin: 0;
    color: var(--vapi-text-dark);
    line-height: 1.5;
}

/* Wave Animation */
.hashone-vapi-wave-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    gap: 20px;
}

.hashone-vapi-wave-bars {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 60px;
}

.hashone-vapi-wave-bar {
    width: 6px;
    height: 20px;
    background: linear-gradient(135deg, var(--vapi-primary-color) 0%, var(--vapi-secondary-color) 100%);
    border-radius: 3px;
    animation: waveAnimation 1s ease-in-out infinite;
}

.hashone-vapi-wave-bar:nth-child(1) {
    animation-delay: 0s;
}

.hashone-vapi-wave-bar:nth-child(2) {
    animation-delay: 0.1s;
}

.hashone-vapi-wave-bar:nth-child(3) {
    animation-delay: 0.2s;
}

.hashone-vapi-wave-bar:nth-child(4) {
    animation-delay: 0.3s;
}

.hashone-vapi-wave-bar:nth-child(5) {
    animation-delay: 0.4s;
}

@keyframes waveAnimation {
    0%, 100% {
        height: 20px;
    }
    50% {
        height: 50px;
    }
}

.hashone-vapi-wave-status {
    font-size: 16px;
    color: var(--vapi-text-light);
    margin: 0;
    font-weight: 500;
}

/* Connecting Spinner */
.hashone-vapi-connecting {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    gap: 15px;
}

.hashone-vapi-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid rgba(var(--vapi-primary-rgb), 0.2);
    border-top-color: var(--vapi-primary-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

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

.hashone-vapi-connecting p {
    margin: 0;
    color: var(--vapi-text-light);
    font-size: 14px;
}

/* Assistant Footer */
.hashone-vapi-assistant-footer {
    padding: 20px;
    background: white;
    border-radius: 0 0 20px 20px;
    border-top: 1px solid var(--vapi-border-color);
    display: flex;
    justify-content: center;
}

.hashone-vapi-end-call-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: #ef4444;
    border: none;
    border-radius: 24px;
    color: white;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
}

.hashone-vapi-end-call-btn svg {
    width: 20px;
    height: 20px;
}

.hashone-vapi-end-call-btn:hover {
    background: #dc2626;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
}

/* Chat Mode Specific Styles */
.hashone-vapi-chat-body {
    display: flex;
    flex-direction: column;
    position: relative;
    padding: 24px;
    background: var(--vapi-surface-deep);
    flex: 1;
    min-height: 0;
}

.hashone-vapi-chat-messages {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    gap: 18px;
    scroll-behavior: smooth;
    padding-right: 8px;
    min-height: 0;
}

/* Connecting Animation */
.hashone-vapi-chat-connecting {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--vapi-surface-deep);
    z-index: 100;
}

.hashone-vapi-connecting-animation {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.hashone-vapi-connecting-spinner {
    position: relative;
    width: 60px;
    height: 60px;
}

.hashone-vapi-spinner-ring {
    position: absolute;
    width: 100%;
    height: 100%;
    border: 3px solid transparent;
    border-top-color: var(--vapi-primary-color);
    border-radius: 50%;
    animation: spinRing 1.5s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}

.hashone-vapi-spinner-ring:nth-child(1) {
    animation-delay: -0.45s;
}

.hashone-vapi-spinner-ring:nth-child(2) {
    animation-delay: -0.3s;
}

.hashone-vapi-spinner-ring:nth-child(3) {
    animation-delay: -0.15s;
}

@keyframes spinRing {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.hashone-vapi-connecting-text {
    color: rgba(255, 255, 255, 0.8);
    font-size: 16px;
    font-weight: 500;
    margin: 0;
    animation: pulseText 1.5s ease-in-out infinite;
}

@keyframes pulseText {
    0%, 100% {
        opacity: 0.6;
    }
    50% {
        opacity: 1;
    }
}

/* Message Styles */
.hashone-vapi-message-assistant {
    display: flex;
    gap: 0;
    align-self: flex-start;
    max-width: 85%;
    animation: slideInLeft 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    margin-bottom: 12px;
}

.hashone-vapi-message-user {
    display: flex;
    gap: 0;
    align-self: flex-end;
    max-width: 85%;
    flex-direction: row-reverse;
    animation: slideInRight 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    margin-bottom: 12px;
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.hashone-vapi-message-avatar {
    display: none;
}

.hashone-vapi-message-avatar svg {
    display: none;
}

.hashone-vapi-avatar-image-small {
    display: none;
}

.hashone-vapi-message-content {
    background: transparent !important;
    padding: 14px 18px!important;
    border-radius: 18px!important;
    background: var(--vapi-surface-raised)!important;
    box-shadow: none!important;
    border: none!important;
    position: relative!important;
    transition: all 0.2s ease!important;
}

.hashone-vapi-message-content:hover {
    background: var(--vapi-surface-hover);
}

.hashone-vapi-message-user .hashone-vapi-message-content {
    background: var(--vapi-button-gradient);
    color: white;
    border: none;
    box-shadow: none;
}

.hashone-vapi-message-user .hashone-vapi-message-content:hover {
    background: linear-gradient(135deg, var(--vapi-secondary-color) 0%, var(--vapi-primary-color) 100%);
}

.hashone-vapi-message-content p {
    margin: 0 !important;
    color: rgba(255, 255, 255, 0.95) !important;
    line-height: 1.6 !important;
    font-size: 14px !important;
}

.hashone-vapi-message-user .hashone-vapi-message-content p {
    color: white !important;
}

/* Typing Indicator */
.hashone-vapi-typing {
    display: flex;
    gap: 0;
    align-self: flex-start;
    animation: slideInLeft 0.3s ease-out;
    margin-bottom: 12px;
}

.hashone-vapi-typing-dots {
    background: var(--vapi-surface-raised);
    padding: 14px 18px;
    border-radius: 18px;
    display: flex;
    gap: 6px;
    align-items: center;
    border: none;
    box-shadow: none;
}

.hashone-vapi-typing-dots span {
    width: 8px;
    height: 8px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    animation: typingDot 1.4s ease-in-out infinite;
}

.hashone-vapi-typing-dots span:nth-child(1) {
    animation-delay: 0s;
}

.hashone-vapi-typing-dots span:nth-child(2) {
    animation-delay: 0.2s;
}

.hashone-vapi-typing-dots span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes typingDot {
    0%, 60%, 100% {
        transform: translateY(0);
        opacity: 0.7;
    }
    30% {
        transform: translateY(-10px);
        opacity: 1;
    }
}

.hashone-vapi-chat-footer {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 20px 24px;
    background: var(--vapi-surface);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.hashone-vapi-chat-input {
    flex: 1!important;
    padding: 14px 20px!important;
    border: 1px solid rgba(255, 255, 255, 0.1)!important;
    border-radius: 12px!important;
    font-size: 14px!important;
    outline: none!important;
    transition: all 0.3s!important;
    background: var(--vapi-surface-input)!important;
    color: rgba(255, 255, 255, 0.9)!important;
    font-family: inherit!important;
}

.hashone-vapi-chat-input::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.hashone-vapi-chat-input:focus {
    border-color: var(--vapi-primary-color);
    background: var(--vapi-surface-hover);
    box-shadow: 0 0 0 3px rgba(var(--vapi-primary-rgb), 0.1);
}

.hashone-vapi-send-btn {
    width: 48px!important;
    height: 48px!important;
    border-radius: 50%!important;
    background: linear-gradient(135deg, var(--vapi-primary-color) 0%, var(--vapi-secondary-color) 100%)!important;
    border: none!important;
    color: white!important;
    cursor: pointer!important;
    display: flex!important;
    align-items: center!important;
    justify-content: center!important;
    transition: all 0.3s!important;
    box-shadow: 0 4px 12px rgba(var(--vapi-primary-rgb), 0.3)!important;
}

.hashone-vapi-send-btn:hover {
    transform: scale(1.1)!important;
    box-shadow: 0 6px 16px rgba(var(--vapi-primary-rgb), 0.5)!important;
}

.hashone-vapi-send-btn:active {
    transform: scale(0.95);
}

.hashone-vapi-send-btn svg {
    width: 22px;
    height: 22px;
}

/* Scrollbar Styles */
.hashone-vapi-assistant-body::-webkit-scrollbar,
.hashone-vapi-chat-messages::-webkit-scrollbar {
    width: 8px;
}

.hashone-vapi-assistant-body::-webkit-scrollbar-track,
.hashone-vapi-chat-messages::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 4px;
}

.hashone-vapi-assistant-body::-webkit-scrollbar-thumb,
.hashone-vapi-chat-messages::-webkit-scrollbar-thumb {
    background: rgba(var(--vapi-primary-rgb), 0.4);
    border-radius: 4px;
    transition: background 0.3s;
}

.hashone-vapi-assistant-body::-webkit-scrollbar-thumb:hover,
.hashone-vapi-chat-messages::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--vapi-primary-rgb), 0.6);
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .hashone-vapi-toggle {
        width: 56px;
        height: 56px;
    }
    
    .hashone-vapi-bottom-right,
    .hashone-vapi-bottom-left,
    .hashone-vapi-top-right,
    .hashone-vapi-top-left {
        bottom: 20px;
        right: 20px;
        left: auto;
        top: auto;
    }
    
    .hashone-vapi-assistant-container {
        width: calc(100vw - 40px);
        height: calc(100vh - 110px);
        bottom: 90px;
        left: 20px !important;
        right: 20px !important;
    }
    
    .hashone-vapi-top-right .hashone-vapi-assistant-container,
    .hashone-vapi-top-left .hashone-vapi-assistant-container {
        top: 90px;
        bottom: 20px;
    }
    
    .hashone-vapi-modal-content {
        padding: 30px 20px;
    }
    
    .hashone-vapi-modal-header h3 {
        font-size: 20px;
    }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Print Styles */
@media print {
    .hashone-vapi-widget {
        display: none !important;
    }
}

.hashone-vapi-avatar img {
    width: 86px !important;
}

/*
 * The Vapi Web SDK injects its own floating button. We render our own, so hide
 * theirs completely and make sure it cannot swallow clicks meant for the page.
 */
button#vapi-support-btn,
#vapi-support-btn {
    opacity: 0 !important;
    pointer-events: none !important;
    width: 0 !important;
    height: 0 !important;
    visibility: hidden !important;
}

button#hashone-vapi-toggle {
    background: var(--vapi-button-gradient) !important;
}


/*
 * NOTE: an earlier build of this plugin forced a dark gradient onto the host
 * page's <body> with !important. That belonged to a dark-themed site and would
 * black out every page of a light theme. The widget must never restyle the
 * host page -- do not reintroduce a global `body` rule here.
 */

.hashone-vapi-helper-label {
    box-shadow: 0px 2px 12px rgb(251 248 248 / 18%);
    background: var(--vapi-button-gradient) !important;
    color: #fff !important;
    animation: pulse-animation 2s infinite;
}


@keyframes pulse-animation {
  0% {
    box-shadow: 0 0 0 0px rgba(0, 0, 0, 0.2);
  }
  100% {
    box-shadow: 0 0 0 20px rgba(0, 0, 0, 0);
  }
}


.hashone-vapi-helper-label span {
    color: #fff;
}

@keyframes slowPulse {
    0% {
        transform: translateX(-50%) scale(1);
        box-shadow: 0 4px 10px rgba(15, 23, 42, 0.22);
    }
    50% {
        transform: translateX(-50%) scale(1.08);
        box-shadow: 0 6px 18px rgba(15, 23, 42, 0.32);
    }
    100% {
        transform: translateX(-50%) scale(1);
        box-shadow: 0 4px 10px rgba(15, 23, 42, 0.22);
    }
}



span.hashone-vapi-helper-hand img {
    width: 14px;
    position: absolute;
    left: 9px;
    top: 3px;
}

.hashone-vapi-helper-label {
    position: absolute;
    top: -46px;
    left: 50%;

    /* keep your original transform here */
    --base-transform: translateX(-50%);

    transform: var(--base-transform);
    animation: floatScale 3s ease-in-out infinite !important;

    background: #fff;
    color: #111827;
    padding: 6px 14px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.3px;
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.12);
    pointer-events: none;
    white-space: nowrap;
    z-index: 15;
}

@keyframes floatScale {
    0% {
        transform: var(--base-transform) translateY(0) scale(1);
    }
    50% {
        transform: var(--base-transform) translateY(-8px) scale(1.02);
    }
    100% {
        transform: var(--base-transform) translateY(0) scale(1);
    }
}


div#hashone-vapi-step-select {
    display: flex ;
    flex-direction: column;
    gap: 20px !important;
}

.hashone-vapi-form-intro h4 {
    display: none;
}

form#hashone-vapi-user-form .hashone-vapi-form-group {
    margin-top: 10px;
    margin-bottom: 0px;
    gap: 5px;
}


/* ==========================================================================
   Brand identity components
   Added for the Laetitia Villetorte build. The client's logo is a wide
   wordmark, so it is shown in the wide header areas only; circular slots
   (floating button, chat avatar, message avatars) use a monogram instead.
   ========================================================================== */

/*
 * Wide wordmark logo in the modal header.
 *
 * The client's wordmark is teal-on-transparent, which all but disappears on
 * the dark teal panel. Sitting it on a white chip keeps the logo's own brand
 * colours correct and readable, and the artwork's built-in transparent padding
 * simply blends into the chip.
 */
.hashone-vapi-brand-logo {
    display: block;
    width: auto;
    max-width: 100%;
    max-height: 78px;
    margin: 0 auto;
    object-fit: contain;
}

.hashone-vapi-brand-logo-chip {
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    max-width: 82%;
    margin: 0 auto 22px auto;
    padding: 6px 16px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
}

/* Monogram mark used inside every circular avatar slot */
.hashone-vapi-monogram {
    width: 100%;
    height: 100%;
    display: block;
}

.hashone-vapi-monogram text {
    font-family: Georgia, 'Times New Roman', 'Iowan Old Style', serif;
    font-size: 42px;
    font-weight: 700;
    letter-spacing: 1px;
}

/* On the big floating button the monogram needs breathing room */
.hashone-vapi-toggle .hashone-vapi-monogram {
    width: 46px;
    height: 46px;
}

.hashone-vapi-avatar .hashone-vapi-monogram {
    width: 26px;
    height: 26px;
}

.hashone-vapi-message-avatar .hashone-vapi-monogram {
    width: 20px;
    height: 20px;
}

/* Assistant name + brand line in the chat header */
.hashone-vapi-assistant-identity {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
    margin-left: 12px;
    min-width: 0;
}

.hashone-vapi-assistant-name {
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hashone-vapi-assistant-brand {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.4px;
    color: var(--vapi-accent-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* The avatar circle reads better with a soft brand tint than flat white */
.hashone-vapi-avatar {
    background: rgba(var(--vapi-accent-rgb), 0.18) !important;
    color: #fff;
    flex: 0 0 auto;
}

/* Pre-chat form ---------------------------------------------------------- */

.hashone-vapi-form-intro p {
    margin: 0 0 18px 0;
    font-size: 14px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.78);
    text-align: center;
}

/* Two buttons side by side: Back is quiet, the primary action carries the brand */
.hashone-vapi-form-actions .hashone-vapi-action-btn {
    flex: 1 1 0;
    padding: 14px 18px !important;
    font-size: 15px !important;
}

.hashone-vapi-btn-secondary {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    flex: 0 0 34% !important;
}

.hashone-vapi-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.12) !important;
}

.hashone-vapi-btn-primary {
    background: var(--vapi-button-gradient) !important;
    border-color: transparent !important;
    box-shadow: 0 4px 14px rgba(var(--vapi-primary-rgb), 0.45) !important;
}

.hashone-vapi-btn-primary:hover {
    box-shadow: 0 6px 20px rgba(var(--vapi-primary-rgb), 0.6) !important;
    transform: translateY(-1px);
}

.hashone-vapi-btn-primary[disabled] {
    opacity: 0.6 !important;
    cursor: wait !important;
    transform: none !important;
}

/* Field validation messages */
.hashone-vapi-error {
    display: block;
    min-height: 16px;
    margin-top: 5px;
    font-size: 12px;
    color: #ff9d9d;
}

/* Gold accent for the badge arrow so it matches the pill above it */
.hashone-vapi-helper-label::after {
    background: var(--vapi-secondary-color);
}

/* Reduced motion: keep the widget usable without the looping animations */
@media (prefers-reduced-motion: reduce) {
    .hashone-vapi-helper-label,
    .hashone-vapi-icon-default,
    .hashone-vapi-wave-bar-inside {
        animation: none !important;
    }
    .hashone-vapi-toggle,
    .hashone-vapi-btn-primary {
        transition: none !important;
    }
}

/* Voice failure message: longer than a status word, so let it wrap */
.hashone-vapi-status-label.hashone-vapi-status-error {
    white-space: normal;
    width: 260px;
    max-width: 70vw;
    line-height: 1.4;
    background: linear-gradient(135deg, #8c2f2f 0%, #5f1f1f 100%);
}

.hashone-vapi-status-label.hashone-vapi-status-error span {
    white-space: normal;
    font-size: 12.5px;
}

/* -------------------------------------------------------------------------
 * Layout corrections
 * ---------------------------------------------------------------------- */

/* The close glyph is an SVG now, so no font metrics are involved and the
   cross is centred by its own geometry. font-size is zeroed because the
   button still inherits one and an inline SVG sits on the text baseline,
   which would otherwise push it a few pixels off centre. */
.hashone-vapi-close,
.hashone-vapi-close-assistant {
    font-size: 0!important;
}

.hashone-vapi-close-icon,
.hashone-vapi-close-assistant .hashone-vapi-close-icon {
    display: block!important;
    width: 16px!important;
    height: 16px!important;
    flex: 0 0 auto!important;
    pointer-events: none;
}

/* The site runs an accessibility plugin whose own round button is pinned to
   the bottom-right corner. Sitting at right:64px the widget landed underneath
   it, so both buttons were half-covered. Clearing the full width of that
   button plus a gap keeps the two side by side. */
.hashone-vapi-bottom-right {
    right: 124px;
}

/* The panel opened at bottom:110px while the toggle occupies 60px-140px, so
   its lower edge sliced across the top of the button. It now clears the
   button with a 16px gap, and max-height follows so tall viewports still fit. */
.hashone-vapi-assistant-container {
    bottom: 156px;
    max-height: calc(100vh - 186px);
}

@media (max-width: 768px) {
    /* Narrow screens have no room to sit beside the accessibility button, so
       the widget stacks above it instead. Must stay after the earlier 768px
       block, which pins the widget back into the shared corner. */
    .hashone-vapi-bottom-right {
        right: 20px;
        bottom: 88px;
    }

    .hashone-vapi-assistant-container {
        bottom: 160px;
        max-height: calc(100vh - 190px);
        height: calc(100vh - 190px);
    }
}