/* =========================================
   FONT FAMILY
========================================= */
.voice-modal,
.voice-modal * {
    font-family: "Outfit", sans-serif;
}

.voice-card {
  padding: 25px;
  position: relative;
}

.voice-modal {
    height: 698px;
}

.close-btn {
  position: absolute;
  top: 10px;
  right: 12px;
  border: none;
  background: none;
  font-size: 18px;
  cursor: pointer;
}

h2 {
  text-align: center;
  font-size: 30px !important;
  margin-bottom: 5px;
  letter-spacing: unset !important;
}

.subtitle {
  text-align: center;
  font-size: 14px;
  color: #666;
  margin-bottom: 20px;
}

label {
  font-size: 14px;
  margin-bottom: 5px;
  display: block;
}

input {
  margin-bottom: 15px;
}

input,
select {
  width: 100% !important;
  padding: 10px !important;
  border-radius: 20px !important;
  border: 1px solid #ddd !important;
}

.phone-group {
  display: flex;
  margin-bottom: 15px;
}

.phone-group span {
  background: #f3f3f3;
  padding: 10px;
  border: 1px solid #ddd;
  border-right: none;
  border-radius: 20px 0 0 20px;
}

.phone-group input {
  border-radius: 0 20px 20px 0 !important;
  border-left: none !important;
  margin-bottom: 0;
}

select#timezone {
  margin-bottom: 15px;
  padding: 12px !important;
}

.actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 10px;
}

.actions button {
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid;
  font-size: 16px;
  font-weight: 600;
  min-width: 140px;
  margin-top: 5px;
}

.cancel {
  background-color: #5b5b5b;
  color: #fff;
}

.cancel:hover {
  color: #5b5b5b;
  border: 1px solid #5b5b5b !important;
  background: #fff;
}

.submit {
  background: #dcdcdc;
  color: #fff;
  cursor: not-allowed;
}

.submit:enabled {
  background: #0664e8;
  color: #fff;
  cursor: pointer;
}

.submit:enabled:hover {
  color: #0664e8;
  border: 1px solid #cde0fb !important;
  background: #cde0fb;
}

.submit:disabled {
  background: #ccc;
  cursor: not-allowed;
  opacity: 0.7;
}

.call-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
}

/* CARD */
.call-card-checkbox {
  position: relative;
  display: flex;
  align-items: flex-start;
  padding: 14px 16px;
  border: 1px solid #dcdcdc;
  border-radius: 12px;
  cursor: pointer;
  background: #f9f9f9;
  transition: all 0.2s ease;
}

/* HIDE default radio */
.call-card-checkbox input {
    width: unset !important;
    margin-right: 10px;
}

/* CONTENT */
.card-content .title {
  font-size: 14px;
  font-weight: 600;
  color: #222;
}

.card-content .desc {
  font-size: 12px;
  color: #666;
  margin-top: 4px;
}

/* SELECTED STATE (this is the magic) */
.call-card-checkbox:has(input:checked) {
  border: 2px solid #1e66d0;
  background: #eef4ff;
}

/* Optional: subtle hover */
.call-card-checkbox:hover {
  border-color: #bbb;
}

.field-error {
    border: 1px solid red !important;
}

.form-message {

    position: absolute;

    left: 50%;
    bottom: -72px;

    transform: translateX(-50%);

    z-index: 9999;

    width: max-content;
    max-width: 90%;

    padding: 14px 20px;

    border-radius: 14px;

    font-size: 14px;
    font-weight: 600;

    box-shadow:
        0 10px 30px rgba(0,0,0,.14);

    display: none;

    animation:
        toastSlideUp .25s ease;
}

/* SUCCESS */
.form-message.success {

    background: #e9f8ee;
    color: #24a148;

    border: 1px solid #b7ebc6;
}

/* ERROR */
.form-message.error {

    background: #fff1f1;
    color: #d92d20;

    border: 1px solid #f5b5b5;
}

/* ANIMATION */
@keyframes toastSlideUp {

    from {

        opacity: 0;

        transform:
            translateX(-50%)
            translateY(10px);
    }

    to {

        opacity: 1;

        transform:
            translateX(-50%)
            translateY(0);
    }
}

/* =========================================
   AVATAR ICONS
========================================= */
.call-avatar svg,
.success-icon svg {

    width: 42px;
    height: 42px;

    display: block;

    stroke: currentColor;
}

/* SUCCESS */
.success-icon {

    color: #22c55e;
}

/* =========================================
   BUTTON SVG FIX
========================================= */
.btn-circle svg,
.btn-circle svg * {

    pointer-events: none;
}

/* =========================================
   CALL UI WRAPPER
========================================= */
#call-ui {
    width: 100%;
    min-height: 520px;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    box-sizing: border-box;
}

/* =========================================
   SHARED CALL VIEW
========================================= */
.call-view {
    display: none;
    width: 100%;
}

.call-card {
    width: 100%;
    max-width: 360px;
    margin: 0 auto;
    text-align: center;
}

/* =========================================
   AVATAR CIRCLE
========================================= */
.call-avatar {
    width: 96px;
    height: 96px;
    margin: 0 auto 26px;
    border-radius: 999px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: linear-gradient(180deg, #2f6fff 0%, #1d3d9b 100%);
    color: white;

    font-size: 42px;
    box-shadow:
        0 0 0 14px rgba(47, 111, 255, 0.05);
}

/* =========================================
   TITLES
========================================= */
.call-card h2 {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
    color: #1d2545;
    letter-spacing: -0.3px;
}

.call-card .sub {
    margin-top: 12px;
    font-size: 16px;
    color: #7f8bb3;
    line-height: 1.5;
}

/* =========================================
   STATUS PILL
========================================= */
.pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 34px;
    padding: 0 18px;

    margin-top: 24px;

    border-radius: 999px;

    background: #eef3ff;
    color: #2f6fff;

    font-size: 14px;
    font-weight: 600;
}

/* =========================================
   AGENT STATES
========================================= */

#agent-state {
    transition:
        background .2s ease,
        color .2s ease,
        transform .2s ease;
}

/* LISTENING */
.state-listening {
    background: #eef3ff;
    color: #2f6fff;
}

/* SPEAKING */
.state-speaking {
    background: #e9f8ee;
    color: #24a148;
}

/* THINKING */
.state-thinking {
    background: #fff4e5;
    color: #ff8a00;
}

/* =========================================
   AVATAR BASE
========================================= */
.call-avatar {
    transition:
        transform .25s ease,
        box-shadow .25s ease,
        background .25s ease;
}

/* =========================================
   LISTENING
========================================= */
.avatar-listening {
    box-shadow:
        0 0 0 10px rgba(47,111,255,.08),
        0 0 24px rgba(47,111,255,.18);
}

/* =========================================
   SPEAKING
========================================= */
.avatar-speaking {
    animation: speakingPulse 1.2s infinite;

    box-shadow:
        0 0 0 12px rgba(36,161,72,.12),
        0 0 30px rgba(36,161,72,.28);
}

/* =========================================
   THINKING
========================================= */
.avatar-thinking {
    animation: thinkingFloat 1.6s ease-in-out infinite;

    box-shadow:
        0 0 0 12px rgba(255,138,0,.10),
        0 0 28px rgba(255,138,0,.18);
}

/* =========================================
   SPEAKING PULSE
========================================= */
@keyframes speakingPulse {

    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.08);
    }

    100% {
        transform: scale(1);
    }
}

/* =========================================
   THINKING FLOAT
========================================= */
@keyframes thinkingFloat {

    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-5px);
    }

    100% {
        transform: translateY(0px);
    }
}

/* =========================================
   CONTROLS
========================================= */
.controls {

    display: flex;

    align-items: center;
    justify-content: center;

    gap: 18px;

    margin-top: 26px;
}

/* =========================================
   BUTTON BASE
========================================= */
.btn-circle {

    width: 64px;
    height: 64px;

    border: none;
    outline: none;

    border-radius: 50% !important;

    display: flex;

    align-items: center;
    justify-content: center;

    cursor: pointer;

    padding: 0 !important;

    transition:
        transform .18s ease,
        opacity .18s ease,
        background .18s ease;
}

.btn-circle:hover {

    transform: scale(1.04);
}

/* =========================================
   SVG
========================================= */
.btn-circle svg {

    width: 26px;
    height: 26px;

    display: block;

    pointer-events: none;
}

/* =========================================
   MUTE
========================================= */
.btn-circle.mute {

    background: #e9efff;

    color: #2f6fff;
}

/* MUTED */
.btn-circle.mute.muted {

    background: #ffe9e9;

    color: #ef4444;
}

/* =========================================
   END
========================================= */
.btn-circle.end {

    background: #ef3b3b;

    color: #ffffff;
}

.btn-circle.end svg {

    width: 28px;
    height: 28px;

    display: block;
}

/* =========================================
   ENDED STATE
========================================= */
.success-icon {
    width: 96px;
    height: 96px;

    margin: 0 auto 26px;

    border-radius: 999px;

    background: #edf7ef;
    color: #2ba84a;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 46px;
    font-weight: 700;
}

/* =========================================
   BACK BUTTON
========================================= */
.btn-back {
    width: 100%;
    max-width: 255px;
    height: 54px;

    margin-top: 36px;

    border: none;
    border-radius: 999px;

    background: #172554;
    color: white;

    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.3px;

    cursor: pointer;

    transition:
        transform .18s ease,
        opacity .18s ease;
    padding: inherit !important;
}

.btn-back:hover {
    transform: translateY(-1px);
    background: #172554 !important;
}

.btn-back:active {
    transform: translateY(1px);
}

/* =========================================
   VIEW STATES
========================================= */
#view-connecting,
#view-active,
#view-ended {
    display: none;
}

/* =========================================
   ACTIVE SCREEN SPACING
========================================= */
#view-active .pill {
    margin-top: 18px;
}

/* =========================================
   CONNECTING AVATAR
========================================= */
#view-connecting .call-avatar {
    position: relative;

    animation:
        connectingFloat 2.2s ease-in-out infinite;
}

/* OUTER RING */
#view-connecting .call-avatar::before {

    content: "";

    position: absolute;

    inset: -14px;

    border-radius: 50%;

    border: 3px solid rgba(47,111,255,.18);

    animation:
        pulseRing 1.8s ease-out infinite;
}

/* SECOND RING */
#view-connecting .call-avatar::after {

    content: "";

    position: absolute;

    inset: -28px;

    border-radius: 50%;

    border: 2px solid rgba(47,111,255,.10);

    animation:
        pulseRing 1.8s ease-out infinite .9s;
}

/* =========================================
   FLOATING
========================================= */
@keyframes connectingFloat {

    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-5px);
    }

    100% {
        transform: translateY(0px);
    }
}

/* =========================================
   PULSE RINGS
========================================= */
@keyframes pulseRing {

    0% {
        transform: scale(.85);
        opacity: .9;
    }

    70% {
        transform: scale(1.15);
        opacity: .25;
    }

    100% {
        transform: scale(1.28);
        opacity: 0;
    }
}

/* =========================================
   ACTIVE AVATAR
========================================= */
#view-active .call-avatar {

    position: relative;

    overflow: visible;

    animation:
        activeFloat 3s ease-in-out infinite;
}

/* FIRST RING */
#view-active .call-avatar::before {

    content: "";

    position: absolute;

    inset: -14px;

    border-radius: 50%;

    border: 3px solid rgba(47,111,255,.18);

    animation:
        activeRing 2s ease-out infinite;
}

/* SECOND RING */
#view-active .call-avatar::after {

    content: "";

    position: absolute;

    inset: -28px;

    border-radius: 50%;

    border: 2px solid rgba(47,111,255,.10);

    animation:
        activeRing 2s ease-out infinite 1s;
}

/* =========================================
   FLOAT
========================================= */
@keyframes activeFloat {

    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-4px);
    }

    100% {
        transform: translateY(0px);
    }
}

/* =========================================
   RING PULSE
========================================= */
@keyframes activeRing {

    0% {
        transform: scale(.9);
        opacity: .9;
    }

    70% {
        transform: scale(1.15);
        opacity: .25;
    }

    100% {
        transform: scale(1.28);
        opacity: 0;
    }
}

/* =========================================
   TOAST
========================================= */
.voice-toast {

    position: fixed;

    left: 50%;
    bottom: 28px;

    transform:
        translateX(-50%)
        translateY(20px);

    min-width: 320px;
    max-width: 90vw;

    background: #ffffff;

    border-radius: 16px;

    padding: 16px 22px;

    box-shadow:
        0 12px 40px rgba(0,0,0,.14);

    z-index: 999999;

    opacity: 0;

    pointer-events: none;

    transition:
        opacity .25s ease,
        transform .25s ease;
}

.form-message {

    position: fixed;

    left: 50%;
    bottom: 75px;

    transform: translateX(-50%);

    z-index: 999999;

    width: fit-content;
    max-width: 90vw;

    padding: 14px 20px;

    border-radius: 14px;

    font-size: 14px;
    font-weight: 600;

    box-shadow:
        0 10px 30px rgba(0,0,0,.14);

    display: none;

    animation:
        toastSlideUp .25s ease;
}

/* SUCCESS */
.form-message.success {

    background: #e9f8ee;
    color: #24a148;

    border: 1px solid #b7ebc6;
}

/* ERROR */
.form-message.error {

    background: #fff1f1;
    color: #d92d20;

    border: 1px solid #f5b5b5;
}

/* ANIMATION */
@keyframes toastSlideUp {

    from {
        opacity: 0;
        transform:
            translateX(-50%)
            translateY(10px);
    }

    to {
        opacity: 1;
        transform:
            translateX(-50%)
            translateY(0);
    }
}

/* SHOW */
.voice-toast.show {

    opacity: 1;

    transform:
        translateX(-50%)
        translateY(0);
}

/* CONTENT */
.voice-toast .toast-content {

    font-size: 15px;

    font-weight: 600;

    line-height: 1.4;

    text-align: center;
}

/* SUCCESS */
.voice-toast.success {

    border-left: 5px solid #2fb344;
}

.voice-toast.success .toast-content {

    color: #1f7a32;
}

/* ERROR */
.voice-toast.error {

    border-left: 5px solid #ef4444;
}

.voice-toast.error .toast-content {

    color: #b42318;
}

/* =========================================
   OPTION ICONS
========================================= */
.option-icon {

    width: 20px;
    height: 20px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    margin-right: 10px;

    color: #2f6fff;

    flex-shrink: 0;
}

.option-icon svg {

    width: 20px;
    height: 20px;

    display: block;
}

/* TITLE ALIGNMENT */
.call-card-checkbox .title {

    display: flex;

    align-items: center;
}

/* =========================================
   MOBILE
========================================= */
@media (max-width: 480px) {

    #call-ui {
        min-height: 460px;
        padding: 32px 18px;
    }

    .call-card h2 {
        font-size: 20px;
    }

    .call-card .sub {
        font-size: 15px;
    }

    .btn-circle {
        width: 68px;
        height: 68px;
    }
}