/* Vapi Multi-Agent — Frontend CSS v1.0.0 */

:root {
	--vapi-agent-color:   #6C63FF;
	--vapi-agent-dark:    #534dcf;
	--vapi-agent-listen:  #22c55e;
	--vapi-agent-speak:   #3b82f6;
	--vapi-agent-connect: #f59e0b;
	--vapi-agent-error:   #ef4444;
}

/* ── Widget container ─────────────────────────────────── */

.vapi-ma-widget {
	display:        inline-flex;
	flex-direction: column;
	align-items:    center;
	gap:            8px;
	position:       relative;
}

/* Floating positions */
.vapi-ma-position-floating-right,
.vapi-ma-position-floating-left {
	position:   fixed;
	bottom:     24px;
	z-index:    99999;
	flex-direction: column-reverse;
}
.vapi-ma-position-floating-right { right: 24px; }
.vapi-ma-position-floating-left  { left:  24px; }

/* ── Button ───────────────────────────────────────────── */

.vapi-ma-btn {
	position:         relative;
	display:          inline-flex;
	align-items:      center;
	gap:              10px;
	padding:          12px 20px;
	border-radius:    100px;
	border:           none;
	background:       var(--vapi-agent-color);
	color:            #fff;
	font-family:      -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-size:        15px;
	font-weight:      600;
	cursor:           pointer;
	box-shadow:       0 4px 20px rgba(0,0,0,.18);
	transition:       background .25s ease, transform .2s cubic-bezier(.34,1.56,.64,1), box-shadow .25s ease;
	-webkit-tap-highlight-color: transparent;
	user-select:      none;
	outline:          none;
	white-space:      nowrap;
}

.vapi-ma-btn:hover  { background: var(--vapi-agent-dark); transform: scale(1.05); box-shadow: 0 6px 28px rgba(0,0,0,.22); }
.vapi-ma-btn:active { transform: scale(.96); }
.vapi-ma-btn:focus-visible { outline: 3px solid var(--vapi-agent-color); outline-offset: 4px; }

/* Floating style = icon-only round button */
.vapi-ma-position-floating-right .vapi-ma-btn,
.vapi-ma-position-floating-left  .vapi-ma-btn {
	width:   60px;
	height:  60px;
	padding: 0;
	border-radius: 50%;
	justify-content: center;
}
.vapi-ma-position-floating-right .vapi-ma-label,
.vapi-ma-position-floating-left  .vapi-ma-label { display: none; }

/* ── Icons ────────────────────────────────────────────── */

.vapi-ma-icon {
	position:   relative;
	width:       22px;
	height:      22px;
	flex-shrink: 0;
	transition:  opacity .2s ease, transform .2s cubic-bezier(.34,1.56,.64,1);
}

.vapi-ma-icon-mic     { opacity: 1; transform: scale(1); }
.vapi-ma-icon-stop    { opacity: 0; transform: scale(.5); position: absolute; }
.vapi-ma-icon-spinner { opacity: 0; transform: scale(.5); position: absolute; }

/* Connecting */
.vapi-ma-state-connecting .vapi-ma-icon-mic     { opacity: 0; transform: scale(.5); }
.vapi-ma-state-connecting .vapi-ma-icon-spinner { opacity: 1; transform: scale(1);
	animation: vapi-ma-spin .75s linear infinite; }

/* Active */
.vapi-ma-state-listening .vapi-ma-icon-mic,
.vapi-ma-state-speaking  .vapi-ma-icon-mic  { opacity: 0; transform: scale(.5); }
.vapi-ma-state-listening .vapi-ma-icon-stop,
.vapi-ma-state-speaking  .vapi-ma-icon-stop { opacity: 1; transform: scale(1); position: relative; }

/* Error */
.vapi-ma-state-error .vapi-ma-icon-mic { opacity: 1; transform: scale(1); }

@keyframes vapi-ma-spin { to { transform: scale(1) rotate(360deg); } }

/* ── Button color per state ───────────────────────────── */

.vapi-ma-state-connecting .vapi-ma-btn { background: var(--vapi-agent-connect); cursor: wait; }
.vapi-ma-state-listening  .vapi-ma-btn { background: var(--vapi-agent-listen); box-shadow: 0 4px 20px rgba(34,197,94,.35); }
.vapi-ma-state-speaking   .vapi-ma-btn { background: var(--vapi-agent-speak);  box-shadow: 0 4px 20px rgba(59,130,246,.35); }
.vapi-ma-state-error      .vapi-ma-btn { background: var(--vapi-agent-error);  animation: vapi-ma-shake .4s ease; }

@keyframes vapi-ma-shake {
	0%,100%{ transform: translateX(0); }
	20%{ transform: translateX(-5px); }
	40%{ transform: translateX(5px); }
	60%{ transform: translateX(-4px); }
	80%{ transform: translateX(4px); }
}

/* ── Status label ─────────────────────────────────────── */

.vapi-ma-status {
	font-family:     -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-size:       12px;
	font-weight:     500;
	color:           #fff;
	background:      rgba(0,0,0,.72);
	padding:         4px 12px;
	border-radius:   20px;
	white-space:     nowrap;
	backdrop-filter: blur(6px);
	max-width:       240px;
	overflow:        hidden;
	text-overflow:   ellipsis;
	opacity:         0;
	transform:       translateY(4px);
	transition:      opacity .2s ease, transform .2s ease;
	pointer-events:  none;
}

.vapi-ma-widget:not(.vapi-ma-state-idle) .vapi-ma-status { opacity: 1; transform: translateY(0); }
.vapi-ma-state-error .vapi-ma-status { background: rgba(180,20,20,.85); }

/* ── Waveform ─────────────────────────────────────────── */

.vapi-ma-waveform {
	display:     none;
	align-items: flex-end;
	gap:         3px;
	height:      32px;
	pointer-events: none;
}

.vapi-ma-bar {
	display:       block;
	width:         4px;
	min-height:    4px;
	border-radius: 2px;
	background:    var(--vapi-agent-color);
	transition:    height .08s ease;
}

.vapi-ma-state-listening  .vapi-ma-bar { background: var(--vapi-agent-listen); }
.vapi-ma-state-speaking   .vapi-ma-bar { background: var(--vapi-agent-speak);
	animation: vapi-ma-wave 1.1s ease-in-out infinite alternate; }

.vapi-ma-state-speaking .vapi-ma-bar:nth-child(1){ animation-delay:0s;   animation-duration:1.0s; }
.vapi-ma-state-speaking .vapi-ma-bar:nth-child(2){ animation-delay:.2s;  animation-duration:1.3s; }
.vapi-ma-state-speaking .vapi-ma-bar:nth-child(3){ animation-delay:.1s;  animation-duration:0.9s; }
.vapi-ma-state-speaking .vapi-ma-bar:nth-child(4){ animation-delay:.3s;  animation-duration:1.2s; }
.vapi-ma-state-speaking .vapi-ma-bar:nth-child(5){ animation-delay:.05s; animation-duration:1.1s; }

@keyframes vapi-ma-wave { from{ height:4px; } to{ height:22px; } }

/* ── Ripple ───────────────────────────────────────────── */

.vapi-ma-ripple {
	position:       absolute;
	bottom:         0;
	left:           50%;
	transform:      translateX(-50%);
	width:          60px;
	height:         60px;
	border-radius:  50%;
	pointer-events: none;
}

.vapi-ma-ripple::before,
.vapi-ma-ripple::after {
	content:       '';
	position:      absolute;
	inset:         0;
	border-radius: 50%;
	border:        2px solid var(--vapi-agent-color);
	opacity:       0;
}

.vapi-ma-ripple--active::before { animation: vapi-ma-ripple 1.6s ease-out infinite; }
.vapi-ma-ripple--active::after  { animation: vapi-ma-ripple 1.6s ease-out .8s infinite; }

@keyframes vapi-ma-ripple {
	0%   { transform: scale(1);   opacity: .6; }
	100% { transform: scale(2.4); opacity: 0; }
}

.vapi-ma-state-listening .vapi-ma-ripple::before,
.vapi-ma-state-listening .vapi-ma-ripple::after { border-color: var(--vapi-agent-listen); }
.vapi-ma-state-speaking  .vapi-ma-ripple::before,
.vapi-ma-state-speaking  .vapi-ma-ripple::after { border-color: var(--vapi-agent-speak); }

/* ── Responsive ───────────────────────────────────────── */

@media (max-width:480px) {
	.vapi-ma-position-floating-right { right: 16px; bottom: 20px; }
	.vapi-ma-position-floating-left  { left:  16px; bottom: 20px; }
	.vapi-ma-btn { font-size: 14px; padding: 11px 18px; }
}

/* ── Reduced motion ───────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
	.vapi-ma-btn, .vapi-ma-icon, .vapi-ma-bar, .vapi-ma-status { transition: none !important; animation: none !important; }
	.vapi-ma-ripple--active::before,
	.vapi-ma-ripple--active::after { animation: none !important; }
}