/*
 * Eva dock: launcher and panel, bottom right. White surface, Ericom ink and blue, 10 px
 * radius, one soft shadow. Mounted into #eva-dock, which sits outside main#main so the
 * pjax router never replaces it.
 */

.eva-dock {
	--eva-blue: #0081c9;
	--eva-blue-dark: #006aa6;
	--eva-blue-soft: rgb(0 129 201 / 0.1);
	--eva-ink: #282b2c;
	--eva-body: #404040;
	--eva-muted: #5f6468;
	--eva-rule: #e3e5e6;
	--eva-surface: #ffffff;
	--eva-surface-2: #f5f6f7;
	--eva-danger: #b3261e;
	--eva-radius: 10px;
	--eva-shadow: 0 12px 40px rgb(20 24 26 / 0.16), 0 2px 8px rgb(20 24 26 / 0.08);
	--eva-gap: 24px;
	position: fixed;
	inset-block-end: var(--eva-gap);
	inset-inline-end: var(--eva-gap);
	z-index: 900;
	font-family: var(--font-body, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif);
	color: var(--eva-ink);
	line-height: 1.4;
}

.eva-dock *,
.eva-dock *::before,
.eva-dock *::after { box-sizing: border-box; }

.eva-dock button { font: inherit; }

.eva-dock :focus-visible { outline: 3px solid #40c0f0; outline-offset: 2px; }

/* ---- Launcher ------------------------------------------------------------------------ */

.eva-dock__launcher {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

.eva-dock__launcher[hidden] { display: none; }

.eva-dock__label {
	padding: 10px 16px;
	border-radius: 100px;
	background: var(--eva-surface);
	box-shadow: var(--eva-shadow);
	color: var(--eva-ink);
	font-size: 0.95rem;
	font-weight: 600;
	white-space: nowrap;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.eva-dock__launcher:hover .eva-dock__label { color: var(--eva-blue-dark); }

.eva-dock__face {
	position: relative;
	display: block;
	flex: none;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: var(--eva-surface);
	box-shadow: var(--eva-shadow), 0 0 0 3px var(--eva-surface), 0 0 0 5px var(--eva-blue);
}

.eva-dock__face img {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	object-fit: cover;
}

/* The ring: a thin blue halo that breathes outward while Eva listens. */
.eva-dock__ring {
	position: absolute;
	inset: -5px;
	border: 2px solid var(--eva-blue);
	border-radius: 50%;
	opacity: 0;
	pointer-events: none;
}

.eva-dock[data-state="listening"] .eva-dock__ring {
	animation: eva-ring 1.8s ease-out infinite;
}

.eva-dock[data-state="speaking"] .eva-dock__ring {
	opacity: 0.55;
	animation: eva-ring-soft 1.2s ease-in-out infinite;
}

.eva-dock[data-state="connecting"] .eva-dock__ring,
.eva-dock[data-state="thinking"] .eva-dock__ring { opacity: 0.4; }

@keyframes eva-ring {
	0% { transform: scale(1); opacity: 0.7; }
	100% { transform: scale(1.35); opacity: 0; }
}

@keyframes eva-ring-soft {
	0%, 100% { transform: scale(1); opacity: 0.55; }
	50% { transform: scale(1.08); opacity: 0.25; }
}

/* ---- Panel ----------------------------------------------------------------------------- */

.eva-dock__panel {
	display: flex;
	flex-direction: column;
	width: 360px;
	max-height: min(560px, calc(100vh - 2 * var(--eva-gap)));
	border-radius: var(--eva-radius);
	background: var(--eva-surface);
	box-shadow: var(--eva-shadow);
	overflow: hidden;
	transform-origin: 100% 100%;
	animation: eva-panel-in 0.18s ease-out;
}

.eva-dock__panel[hidden] { display: none; }

@keyframes eva-panel-in {
	from { opacity: 0; transform: translateY(8px) scale(0.98); }
	to { opacity: 1; transform: none; }
}

.eva-dock__head {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 14px 14px 16px;
	border-block-end: 1px solid var(--eva-rule);
}

.eva-dock__avatar {
	flex: none;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	object-fit: cover;
	box-shadow: 0 0 0 2px var(--eva-surface), 0 0 0 3px var(--eva-blue);
}

.eva-dock__id { flex: 1; min-width: 0; }
.eva-dock__name { margin: 0; font-size: 1rem; font-weight: 600; color: var(--eva-ink); }
.eva-dock__role { margin: 0; overflow: hidden; font-size: 0.8rem; color: var(--eva-muted); white-space: nowrap; text-overflow: ellipsis; }

.eva-dock__chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px;
	border-radius: 100px;
	background: var(--eva-surface-2);
	color: var(--eva-muted);
	font-size: 0.75rem;
	font-weight: 600;
	white-space: nowrap;
}

.eva-dock__chip::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
}

.eva-dock[data-tone="active"] .eva-dock__chip { background: var(--eva-blue-soft); color: #00669e; }
.eva-dock[data-tone="error"] .eva-dock__chip { background: rgb(179 38 30 / 0.08); color: var(--eva-danger); }

.eva-dock__icon-btn {
	display: grid;
	place-items: center;
	flex: none;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	border-radius: 8px;
	background: none;
	color: var(--eva-muted);
	cursor: pointer;
}

.eva-dock__icon-btn:hover { background: var(--eva-surface-2); color: var(--eva-ink); }
.eva-dock svg { display: block; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.eva-dock__body {
	flex: 1;
	min-height: 0;
	padding: 18px 16px;
	overflow-y: auto;
}

/* ---- State card ---------------------------------------------------------------------- */

.eva-card__title { margin: 0 0 4px; font-size: 1.05rem; font-weight: 600; color: var(--eva-ink); }
.eva-card__line { margin: 0; font-size: 0.92rem; color: var(--eva-body); }
.eva-card__line + .eva-card__line { margin-block-start: 4px; }
.eva-card__meta { margin: 10px 0 0; font-size: 0.82rem; color: var(--eva-muted); }

.eva-card__row { display: flex; align-items: center; gap: 14px; }

.eva-card__big {
	margin: 0 0 6px;
	font-size: 1.6rem;
	font-weight: 300;
	letter-spacing: -0.01em;
	color: var(--eva-ink);
	font-variant-numeric: tabular-nums;
}

.eva-card__company {
	margin-block-start: 12px;
	padding: 12px;
	border-radius: 8px;
	background: var(--eva-surface-2);
}

.eva-card__company-name { margin: 0; font-size: 0.92rem; font-weight: 600; }
.eva-card__company a { color: #00669e; font-size: 0.85rem; word-break: break-all; }

.eva-card__company-summary {
	display: -webkit-box;
	margin: 4px 0 0;
	overflow: hidden;
	font-size: 0.85rem;
	color: var(--eva-body);
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}

.eva-card__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-block-start: 14px; }

.eva-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 10px 18px;
	border: 0;
	border-radius: 100px;
	background: var(--eva-blue);
	color: #fff;
	font-size: 0.92rem;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.eva-btn:hover { background: var(--eva-blue-dark); color: #fff; }

.eva-btn--quiet { background: var(--eva-surface-2); color: var(--eva-ink); }
.eva-btn--quiet:hover { background: #e9ebec; color: var(--eva-ink); }

.eva-btn--danger { background: var(--eva-danger); }
.eva-btn--danger:hover { background: #8f1e18; }

/* Voice bars: five short bars that move while Eva listens or speaks. */
.eva-bars { display: inline-flex; align-items: center; gap: 3px; height: 22px; }

.eva-bars span {
	width: 3px;
	height: 6px;
	border-radius: 2px;
	background: var(--eva-blue);
	opacity: 0.85;
}

.eva-dock[data-state="listening"] .eva-bars span { animation: eva-bar 1.1s ease-in-out infinite; }
.eva-dock[data-state="speaking"] .eva-bars span { animation: eva-bar 0.7s ease-in-out infinite; }
.eva-dock[data-state="thinking"] .eva-bars span,
.eva-dock[data-state="connecting"] .eva-bars span,
.eva-dock[data-state="transferring"] .eva-bars span { animation: eva-dot 1.2s ease-in-out infinite; }

.eva-bars span:nth-child(2) { animation-delay: 0.12s !important; }
.eva-bars span:nth-child(3) { animation-delay: 0.24s !important; }
.eva-bars span:nth-child(4) { animation-delay: 0.36s !important; }
.eva-bars span:nth-child(5) { animation-delay: 0.48s !important; }

@keyframes eva-bar {
	0%, 100% { height: 6px; }
	50% { height: 20px; }
}

@keyframes eva-dot {
	0%, 100% { opacity: 0.25; }
	50% { opacity: 1; }
}

.eva-dock__caption {
	margin: 14px 0 0;
	padding: 10px 12px;
	border-inline-start: 3px solid var(--eva-blue);
	border-radius: 6px;
	background: var(--eva-surface-2);
	color: var(--eva-body);
	font-size: 0.88rem;
}

.eva-dock__caption[hidden] { display: none; }

/* ---- Footer ----------------------------------------------------------------------------- */

.eva-dock__foot {
	display: flex;
	gap: 10px;
	padding: 12px 16px 14px;
	border-block-start: 1px solid var(--eva-rule);
}

.eva-dock__foot .eva-btn { flex: 1; }
.eva-dock__foot .eva-btn[disabled] { opacity: 0.45; cursor: default; }
.eva-dock__foot .eva-btn--quiet[aria-pressed="true"] { background: var(--eva-ink); color: #fff; }

/* ---- Phones: the panel spans the width, pinned to the bottom ---------------------------- */

@media (max-width: 480px) {
	.eva-dock[data-open="true"] {
		inset-inline: 0;
		inset-block-end: 0;
	}

	.eva-dock__panel {
		width: 100%;
		max-height: 72vh;
		border-radius: var(--eva-radius) var(--eva-radius) 0 0;
	}

	.eva-dock__label { padding: 8px 14px; font-size: 0.9rem; }
}

@media (prefers-reduced-motion: reduce) {
	.eva-dock__panel { animation: none; }
	.eva-dock__ring,
	.eva-dock[data-state] .eva-dock__ring,
	.eva-dock[data-state] .eva-bars span { animation: none !important; }
	.eva-dock[data-state="listening"] .eva-dock__ring { opacity: 0.6; }
	.eva-dock[data-state="listening"] .eva-bars span,
	.eva-dock[data-state="speaking"] .eva-bars span { height: 12px; }
}

@media print {
	.eva-dock { display: none; }
}