/* Dexora Voice Agent — Voice-Only Widget */

:root {
    --dva-color:  #FF3C00;
    --dva-hover:  #e03500;
    --dva-dark:   #0f0f0f;
    --dva-bg:     #ffffff;
    --dva-border: rgba(0,0,0,0.08);
    --dva-shadow: 0 12px 48px rgba(0,0,0,0.16);
    --dva-radius: 20px;
}

#dva-root {
    position: fixed;
    bottom: 28px;
    right: 28px;
    z-index: 99999;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
}

/* ─── FAB ─── */
#dva-fab {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--dva-color);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    box-shadow: 0 4px 24px rgba(255,60,0,0.45);
    transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
    margin-left: auto;
}
#dva-fab:hover        { transform: scale(1.08); box-shadow: 0 6px 32px rgba(255,60,0,0.55); }
#dva-fab.dva-open     { background: var(--dva-dark); box-shadow: 0 4px 20px rgba(0,0,0,0.35); }

/* ─── Panel ─── */
#dva-window {
    position: absolute;
    bottom: 76px;
    right: 0;
    width: 400px;
    background: var(--dva-bg);
    border-radius: var(--dva-radius);
    box-shadow: var(--dva-shadow);
    overflow: hidden;
    animation: dvaIn 0.22s cubic-bezier(0.22, 1, 0.36, 1);
    display: flex;
    flex-direction: column;
}

@keyframes dvaIn {
    from { opacity: 0; transform: translateY(14px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.dva-hidden { display: none !important; }

/* ─── Header ─── */
#dva-header {
    background: var(--dva-color);
    padding: 16px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}

#dva-agent-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

#dva-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255,255,255,0.22);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    flex-shrink: 0;
}

#dva-name {
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: -0.2px;
}

#dva-x {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255,255,255,0.18);
    border: none;
    color: #fff;
    font-size: 13px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
    flex-shrink: 0;
}
#dva-x:hover { background: rgba(255,255,255,0.32); }

/* ─── Body (orb + status) ─── */
#dva-body {
    padding: 40px 24px 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    background: #fafafa;
}

/* ─── Orb visualizer ─── */
#dva-orb-wrap {
    position: relative;
    width: 140px;
    height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#dva-orb {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: rgba(255,60,0,0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: background 0.4s;
}

/* Centre dot */
#dva-orb::before {
    content: '';
    position: absolute;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--dva-color);
    opacity: 0.12;
    transition: opacity 0.3s, transform 0.3s;
}

/* Bars inside the orb */
#dva-orb span {
    display: block;
    width: 5px;
    border-radius: 5px;
    background: var(--dva-color);
    height: 8px;
    margin: 0 3px;
    opacity: 0.3;
    transition: height 0.2s, opacity 0.2s;
}

/* ── idle ── */
#dva-orb.dva-orb-idle::before          { opacity: 0.08; }
#dva-orb.dva-orb-idle span             { opacity: 0.15; height: 8px; }

/* ── processing ── */
#dva-orb.dva-orb-proc                  { background: rgba(100,100,100,0.06); }
#dva-orb.dva-orb-proc::before          { background: #888; opacity: 0.12; }
#dva-orb.dva-orb-proc span             { background: #aaa; animation: dvaProc 0.8s ease-in-out infinite; }
#dva-orb.dva-orb-proc span:nth-child(1){ animation-delay: 0s;     }
#dva-orb.dva-orb-proc span:nth-child(2){ animation-delay: 0.13s;  }
#dva-orb.dva-orb-proc span:nth-child(3){ animation-delay: 0.26s;  }
#dva-orb.dva-orb-proc span:nth-child(4){ animation-delay: 0.39s;  }
#dva-orb.dva-orb-proc span:nth-child(5){ animation-delay: 0.52s;  }
#dva-orb.dva-orb-proc span:nth-child(6){ animation-delay: 0.65s;  }

@keyframes dvaProc {
    0%,100%{ height: 6px;  opacity: 0.25; }
    50%    { height: 30px; opacity: 0.7;  }
}

/* ── listening (user speaking) ── */
#dva-orb.dva-orb-listen                { background: rgba(255,60,0,0.08); }
#dva-orb.dva-orb-listen::before        { opacity: 0.18; animation: dvaPulse 1.8s ease-in-out infinite; }
#dva-orb.dva-orb-listen span           { opacity: 0.9; animation: dvaListen 1.2s ease-in-out infinite; }
#dva-orb.dva-orb-listen span:nth-child(1){ animation-delay: 0s;    height: 16px; }
#dva-orb.dva-orb-listen span:nth-child(2){ animation-delay: 0.2s;  height: 32px; }
#dva-orb.dva-orb-listen span:nth-child(3){ animation-delay: 0.1s;  height: 48px; }
#dva-orb.dva-orb-listen span:nth-child(4){ animation-delay: 0.3s;  height: 32px; }
#dva-orb.dva-orb-listen span:nth-child(5){ animation-delay: 0.15s; height: 20px; }
#dva-orb.dva-orb-listen span:nth-child(6){ animation-delay: 0.25s; height: 10px; }

@keyframes dvaListen {
    0%,100%{ transform: scaleY(0.5); opacity: 0.5; }
    50%    { transform: scaleY(1.0); opacity: 1;   }
}

/* ── speaking (agent audio playing) ── */
#dva-orb.dva-orb-speak                 { background: rgba(34,197,94,0.08); }
#dva-orb.dva-orb-speak::before         { background: #22c55e; opacity: 0.2; animation: dvaPulse 0.9s ease-in-out infinite; }
#dva-orb.dva-orb-speak span            { background: #22c55e; animation: dvaSpeak 0.55s ease-in-out infinite alternate; }
#dva-orb.dva-orb-speak span:nth-child(1){ animation-delay: 0s;    }
#dva-orb.dva-orb-speak span:nth-child(2){ animation-delay: 0.09s; }
#dva-orb.dva-orb-speak span:nth-child(3){ animation-delay: 0.04s; }
#dva-orb.dva-orb-speak span:nth-child(4){ animation-delay: 0.13s; }
#dva-orb.dva-orb-speak span:nth-child(5){ animation-delay: 0.07s; }
#dva-orb.dva-orb-speak span:nth-child(6){ animation-delay: 0.11s; }

@keyframes dvaSpeak {
    from { height: 6px;  }
    to   { height: 44px; }
}

@keyframes dvaPulse {
    0%,100%{ transform: scale(1);    opacity: 0.15; }
    50%    { transform: scale(1.25); opacity: 0.3;  }
}

/* ─── Status text ─── */
#dva-status {
    font-size: 14px;
    color: #777;
    text-align: center;
    margin: 0;
    min-height: 20px;
    letter-spacing: -0.1px;
}

/* ─── Booking panel ─── */
#dva-booking {
    background: #fff;
    border-top: 1px solid var(--dva-border);
    padding: 16px 20px 20px;
    flex-shrink: 0;
}

#dva-booking-title {
    margin: 0 0 12px;
    font-size: 14px;
    font-weight: 700;
    color: #111;
}

.dva-brow {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    padding: 5px 0;
    border-bottom: 1px solid #f3f3f3;
    color: #555;
}
.dva-brow strong { color: #111; font-weight: 600; }

#dva-booking-btns {
    display: flex;
    gap: 10px;
    margin-top: 14px;
}

#dva-ok {
    flex: 1;
    background: var(--dva-color);
    color: #fff;
    border: none;
    padding: 11px 0;
    border-radius: 50px;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.2s;
}
#dva-ok:hover { background: var(--dva-hover); }

#dva-no {
    flex: 1;
    background: transparent;
    color: #888;
    border: 1.5px solid #ddd;
    padding: 11px 0;
    border-radius: 50px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
}
#dva-no:hover { border-color: #bbb; color: #444; }

/* ─── Footer / call button ─── */
#dva-footer {
    padding: 20px 24px 24px;
    display: flex;
    justify-content: center;
    background: #fff;
    border-top: 1px solid var(--dva-border);
    flex-shrink: 0;
}

#dva-call-btn,
#dva-end-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 14px 48px;
    border-radius: 50px;
    border: none;
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.3px;
    color: #fff;
    transition: all 0.2s;
    text-transform: uppercase;
}

#dva-call-btn {
    background: var(--dva-color);
    box-shadow: 0 4px 18px rgba(255,60,0,0.4);
}
#dva-call-btn:hover { background: var(--dva-hover); transform: translateY(-2px); box-shadow: 0 6px 24px rgba(255,60,0,0.5); }
#dva-call-btn:active { transform: translateY(0); }

#dva-end-btn {
    background: var(--dva-dark);
    box-shadow: 0 4px 14px rgba(0,0,0,0.25);
}
#dva-end-btn:hover { background: #333; transform: translateY(-2px); }

/* ─── Mobile ─── */
@media (max-width: 440px) {
    #dva-window { width: calc(100vw - 20px); right: -4px; bottom: 74px; }
    #dva-root   { bottom: 16px; right: 16px; }
    #dva-body   { padding: 32px 16px 24px; }
    #dva-orb-wrap,
    #dva-orb    { width: 120px; height: 120px; }
    #dva-call-btn,
    #dva-end-btn { padding: 13px 36px; }
}