@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

:root {
    --bg-page: #ffffff; /* Clean white background to match the screenshot */
    --card-bg: rgba(255, 255, 255, 0.72);
    --card-border: rgba(228, 228, 231, 0.6); /* Very subtle grey border */
    --text-primary: #18181b; /* Zinc 900 */
    --text-secondary: #71717a; /* Zinc 500 */
    --text-muted: #a1a1aa; /* Zinc 400 */

    --shadow-widget: 0 8px 40px rgba(24, 24, 27, 0.06), 0 2px 8px rgba(24, 24, 27, 0.04);

    /* Perfect ElevenLabs-style gradient: yellowish lime green to soft cyan-blue */
    --orb-gradient: radial-gradient(circle at 30% 20%, #dcfce7 0%, #a7f3d0 20%, #38bdf8 60%, #1d4ed8 100%);
    --orb-active-gradient: linear-gradient(135deg, #fecdd3 0%, #f43f5e 50%, #be123c 100%);

    --ease-fluid: cubic-bezier(0.65, 0, 0.35, 1);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--bg-page);
    color: var(--text-primary);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 20px;
    position: relative;
}

/* Ambient slow-drifting gradient blobs behind the widget for a fluid, alive backdrop */
.ambient-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.ambient-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    opacity: 0.35;
    will-change: transform;
}

.ambient-blob-a {
    width: 480px;
    height: 480px;
    top: -160px;
    left: -140px;
    background: radial-gradient(circle, #a7f3d0 0%, #38bdf8 70%, transparent 100%);
    animation: drift-a 22s var(--ease-fluid) infinite alternate;
}

.ambient-blob-b {
    width: 420px;
    height: 420px;
    bottom: -160px;
    right: -120px;
    background: radial-gradient(circle, #fecdd3 0%, #f43f5e 70%, transparent 100%);
    animation: drift-b 26s var(--ease-fluid) infinite alternate;
}

.ambient-blob-c {
    width: 360px;
    height: 360px;
    bottom: 10%;
    left: 8%;
    background: radial-gradient(circle, #dcfce7 0%, #1d4ed8 75%, transparent 100%);
    opacity: 0.22;
    animation: drift-c 30s var(--ease-fluid) infinite alternate;
}

@keyframes drift-a {
    0% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(60px, 40px) scale(1.1); }
    100% { transform: translate(-30px, 70px) scale(0.95); }
}

@keyframes drift-b {
    0% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(-50px, -60px) scale(1.08); }
    100% { transform: translate(40px, -20px) scale(0.92); }
}

@keyframes drift-c {
    0% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(40px, -30px) scale(1.12); }
    100% { transform: translate(-60px, 20px) scale(1); }
}

/* ElevenLabs-style Widget Card */
.widget-card {
    background: var(--card-bg);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    border: 1px solid var(--card-border);
    border-radius: 24px;
    width: 382px;
    height: 480px;
    box-shadow: var(--shadow-widget);
    display: flex;
    flex-direction: column;
    padding: 24px;
    position: relative;
    z-index: 1;
    transition: box-shadow 0.4s var(--ease-fluid), transform 0.4s var(--ease-fluid);
}

/* Header inside the Widget */
.widget-header {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-bottom: 10px;
}

/* Small resize ornament at top right */
.action-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #f4f4f5;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
}

/* Body / Central Visualizer Area */
.widget-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
    text-align: center;
}

/* Ring visualizer wrapper */
.visualizer-ring {
    position: relative;
    width: 180px;
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

/* Microphone Orb: layered morphing gradient blobs for a fluid, liquid feel */
.mic-orb {
    width: 160px;
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2;
    transition: transform 0.5s var(--ease-fluid), filter 0.5s var(--ease-fluid);
    filter: drop-shadow(0 4px 20px rgba(56, 189, 248, 0.25));
    position: relative;
}

.mic-orb:hover {
    transform: scale(1.03);
}

.mic-orb:active {
    transform: scale(0.97);
}

/* Each blob layer morphs its border-radius continuously and drifts/rotates
   independently so the overlapping gradients read as one fluid, liquid orb. */
.blob-layer {
    position: absolute;
    inset: -12%;
    background: var(--orb-gradient);
    mix-blend-mode: normal;
    will-change: transform, border-radius;
    transition: background 0.6s var(--ease-fluid), opacity 0.6s var(--ease-fluid);
}

.blob-1 {
    animation: morph-1 9s ease-in-out infinite;
    opacity: 0.95;
}

.blob-2 {
    animation: morph-2 11s ease-in-out infinite;
    opacity: 0.6;
    filter: blur(2px);
    mix-blend-mode: soft-light;
}

.blob-3 {
    animation: morph-3 7.5s ease-in-out infinite;
    opacity: 0.45;
    filter: blur(6px);
    mix-blend-mode: overlay;
}

@keyframes morph-1 {
    0%, 100% { border-radius: 42% 58% 65% 35% / 45% 40% 60% 55%; transform: rotate(0deg) scale(1); }
    25%      { border-radius: 58% 42% 38% 62% / 62% 55% 45% 38%; transform: rotate(8deg) scale(1.03); }
    50%      { border-radius: 50% 50% 32% 68% / 38% 62% 38% 62%; transform: rotate(-6deg) scale(0.98); }
    75%      { border-radius: 65% 35% 55% 45% / 55% 45% 65% 35%; transform: rotate(4deg) scale(1.02); }
}

@keyframes morph-2 {
    0%, 100% { border-radius: 60% 40% 30% 70% / 50% 60% 40% 50%; transform: rotate(0deg) scale(1.05); }
    33%      { border-radius: 35% 65% 60% 40% / 40% 35% 65% 60%; transform: rotate(-10deg) scale(0.97); }
    66%      { border-radius: 55% 45% 45% 55% / 65% 40% 60% 35%; transform: rotate(10deg) scale(1.04); }
}

@keyframes morph-3 {
    0%, 100% { border-radius: 45% 55% 50% 50% / 55% 45% 55% 45%; transform: rotate(0deg) scale(1.1); }
    50%      { border-radius: 60% 40% 40% 60% / 40% 55% 45% 60%; transform: rotate(14deg) scale(0.95); }
}

/* Connecting State: Slow breathing animation, blobs slow down and dim slightly */
.visualizer-ring.connecting .mic-orb {
    animation: breathing 2.5s infinite var(--ease-fluid);
}

.visualizer-ring.connecting .blob-layer {
    animation-duration: 14s, 16s, 12s;
}

/* Connected State: gradients shift to the active palette, motion speeds up subtly */
.visualizer-ring.connected .mic-orb {
    filter: drop-shadow(0 8px 25px rgba(244, 63, 94, 0.35));
    transform: scale(1.03);
}

.visualizer-ring.connected .blob-1,
.visualizer-ring.connected .blob-2,
.visualizer-ring.connected .blob-3 {
    background: var(--orb-active-gradient);
}

.visualizer-ring.connected .blob-1 { animation-duration: 5.5s; }
.visualizer-ring.connected .blob-2 { animation-duration: 6.5s; }
.visualizer-ring.connected .blob-3 { animation-duration: 4.5s; }

/* Phone icon styling - perfect white circle in center with black phone icon */
.phone-icon-container {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    color: #000000;
    transition: all 0.3s ease;
}

.phone-icon-container.active {
    color: #ef4444;
}

.phone-svg {
    width: 18px;
    height: 18px;
    /* Angle matching standard handset orientation curved left/down */
    transform: rotate(0deg);
}

/* Pulse rings for audio feedback styling */
.wave-ring {
    position: absolute;
    width: 100%;
    height: 100%;
    display: none;
    align-items: center;
    justify-content: center;
}

.visualizer-ring.connected .wave-ring {
    display: flex;
}

.pulse-ring {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(244, 63, 94, 0.22) 0%, rgba(244, 63, 94, 0) 70%);
    filter: blur(1px);
    animation: ring-pulse 2.8s infinite var(--ease-fluid);
    z-index: 1;
}

/* Status message text */
.status-message {
    font-size: 0.95rem;
    color: var(--text-secondary);
    line-height: 1.5;
    max-width: 300px;
    font-weight: 400;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.4s var(--ease-fluid), transform 0.4s var(--ease-fluid), color 0.4s var(--ease-fluid);
}

.status-message.active {
    font-weight: 500;
    color: var(--text-primary);
    opacity: 1;
    transform: translateY(0);
}

.status-message.listening {
    color: #ef4444;
}

/* Widget Footer styling */
.widget-footer {
    margin-top: auto;
}

.message-input-container {
    display: flex;
    align-items: center;
    background: #ffffff;
    border: 1px solid #e4e4e7; /* Zinc 200 */
    border-radius: 24px;
    padding: 4px 6px 4px 16px;
    height: 48px;
}

.message-input {
    flex: 1;
    border: none;
    background: transparent;
    outline: none;
    font-family: inherit;
    font-size: 0.95rem;
    color: var(--text-primary);
}

.message-input::placeholder {
    color: var(--text-muted);
}

.send-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

/* Animations */
@keyframes breathing {
    0% { transform: scale(1); }
    50% { transform: scale(1.03); }
    100% { transform: scale(1); }
}

@keyframes ring-pulse {
    0% {
        transform: scale(0.85);
        opacity: 0.7;
    }
    70% {
        opacity: 0.25;
    }
    100% {
        transform: scale(1.55);
        opacity: 0;
    }
}