/*
 * Vapi Voice Assistant — Frontend CSS v1.1.0
 */

:root {
	--vapi-primary:       #6C63FF;
	--vapi-primary-dark:  #534dcf;
	--vapi-error:         #FF4D4D;
	--vapi-listening:     #22c55e;
	--vapi-speaking:      #3b82f6;
	--vapi-connecting:    #f59e0b;

	--vapi-btn-size:      60px;
	--vapi-offset-x:      24px;
	--vapi-offset-y:      24px;
	--vapi-z:             99999;
}

/* ── Root container ─────────────────────────────────────────────────────── */

#vapi-widget-root {
	position:        fixed;
	bottom:          var(--vapi-offset-y);
	z-index:         var(--vapi-z);
	display:         flex;
	flex-direction:  column;
	align-items:     center;
	gap:             8px;
	pointer-events:  none;
}

#vapi-widget-root.vapi-position-right { right: var(--vapi-offset-x); left: auto; }
#vapi-widget-root.vapi-position-left  { left:  var(--vapi-offset-x); right: auto; }

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

.vapi-btn {
	position:         relative;
	display:          inline-flex;
	align-items:      center;
	justify-content:  center;
	width:            var(--vapi-btn-size);
	height:           var(--vapi-btn-size);
	border-radius:    50%;
	border:           none;
	background:       var(--vapi-primary);
	color:            #fff;
	cursor:           pointer;
	pointer-events:   all;
	box-shadow:       0 4px 24px rgba(108,99,255,.35);
	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;
}

.vapi-btn:hover { background: var(--vapi-primary-dark); transform: scale(1.08); box-shadow: 0 6px 28px rgba(108,99,255,.5); }
.vapi-btn:active { transform: scale(.94); }
.vapi-btn:focus-visible { outline: 3px solid var(--vapi-primary); outline-offset: 4px; }

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

.vapi-icon {
	position:  absolute;
	width:     26px;
	height:    26px;
	transition: opacity .2s ease, transform .2s cubic-bezier(.34,1.56,.64,1);
}

/* Default state: show mic */
.vapi-icon-mic     { opacity: 1; transform: scale(1); }
.vapi-icon-stop    { opacity: 0; transform: scale(.5); }
.vapi-icon-spinner { opacity: 0; transform: scale(.5); }

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

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

/* Error: show mic again */
.vapi-state-error .vapi-icon-mic { opacity: 1; transform: scale(1); }
.vapi-state-error .vapi-icon-stop,
.vapi-state-error .vapi-icon-spinner { opacity: 0; transform: scale(.5); }

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

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

#vapi-widget-root.vapi-state-connecting .vapi-btn { background: var(--vapi-connecting); box-shadow: 0 4px 20px rgba(245,158,11,.4); cursor: wait; }
#vapi-widget-root.vapi-state-listening  .vapi-btn { background: var(--vapi-listening);  box-shadow: 0 4px 20px rgba(34,197,94,.4); }
#vapi-widget-root.vapi-state-speaking   .vapi-btn { background: var(--vapi-speaking);   box-shadow: 0 4px 20px rgba(59,130,246,.4); }
#vapi-widget-root.vapi-state-error      .vapi-btn { background: var(--vapi-error);      box-shadow: 0 4px 20px rgba(255,77,77,.4);
	animation: vapi-shake .4s ease; }

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

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

.vapi-ripple {
	position:      absolute;
	bottom:        0;
	width:         var(--vapi-btn-size);
	height:        var(--vapi-btn-size);
	border-radius: 50%;
	pointer-events: none;
}

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

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

@keyframes vapi-ripple {
	0%   { transform: scale(1);   opacity: .7; }
	100% { transform: scale(2.5); opacity: 0; }
}

/* Ripple colour matches state */
#vapi-widget-root.vapi-state-listening  .vapi-ripple::before,
#vapi-widget-root.vapi-state-listening  .vapi-ripple::after { border-color: var(--vapi-listening); }
#vapi-widget-root.vapi-state-speaking   .vapi-ripple::before,
#vapi-widget-root.vapi-state-speaking   .vapi-ripple::after { border-color: var(--vapi-speaking); }
#vapi-widget-root.vapi-state-connecting .vapi-ripple::before,
#vapi-widget-root.vapi-state-connecting .vapi-ripple::after { border-color: var(--vapi-connecting); }

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

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

#vapi-widget-root:not(.vapi-state-idle) .vapi-status-label { opacity: 1; transform: translateY(0); }

/* Error label in red */
#vapi-widget-root.vapi-state-error .vapi-status-label { background: rgba(180,0,0,.85); max-width: 280px; white-space: normal; text-align: center; }

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

#vapi-waveform {
	display:     none;
	align-items: flex-end;
	gap:         3px;
	height:      36px;
	pointer-events: none;
}

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

#vapi-widget-root.vapi-state-listening  .vapi-bar { background: var(--vapi-listening); }
#vapi-widget-root.vapi-state-speaking   .vapi-bar { background: var(--vapi-speaking);
	animation: vapi-idle-bar 1.1s ease-in-out infinite alternate; }

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

@keyframes vapi-idle-bar { from { height: 4px; } to { height: 22px; } }

/* ── Shortcode ───────────────────────────────────────────────────────────── */

.vapi-shortcode-wrap { display: inline-flex; margin: 8px 0; }

.vapi-shortcode-btn {
	display:      inline-flex;
	align-items:  center;
	gap:          10px;
	width:        auto;
	height:       auto;
	padding:      11px 20px;
	border-radius:100px;
	font-family:  -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-size:    14px;
	font-weight:  600;
}

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

@media ( max-width: 480px ) {
	:root { --vapi-btn-size: 52px; --vapi-offset-x: 16px; --vapi-offset-y: 20px; }
	.vapi-icon { width: 22px; height: 22px; }
	.vapi-status-label { font-size: 11px; max-width: 200px; }
}

/* ── RTL ─────────────────────────────────────────────────────────────────── */

[dir="rtl"] #vapi-widget-root.vapi-position-right { right: auto; left:  var(--vapi-offset-x); }
[dir="rtl"] #vapi-widget-root.vapi-position-left  { left:  auto; right: var(--vapi-offset-x); }

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

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