/* Sloane Curtis — floating contact dock. Loaded after style.css. */

.dock {
	position: fixed;
	right: clamp(14px, 2.4vw, 30px);
	bottom: clamp(14px, 2.4vw, 30px);
	z-index: 95;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 12px;
}

/* Toggle ------------------------------------------------------------------ */

.dock__toggle {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 22px 14px 18px;
	border-radius: var(--r-pill);
	background: var(--blue-500);
	color: var(--on-accent);
	font-weight: 700;
	font-size: .93rem;
	letter-spacing: -.01em;
	box-shadow: 0 18px 40px -12px rgba(0, 27, 105, .7);
	transition: transform .35s var(--ease), background-color .3s;
}
.dock__toggle:hover { transform: translateY(-2px); background: var(--blue-700); }

.dock__toggle-ico { width: 21px; height: 21px; flex: none; display: block; }
.dock__toggle-ico svg { width: 100%; height: 100%; display: block; }
.dock__toggle-ico--close { display: none; }

.dock.is-open .dock__toggle-ico--open { display: none; }
.dock.is-open .dock__toggle-ico--close { display: block; }
.dock.is-open .dock__toggle-label { display: none; }
.dock.is-open .dock__toggle { padding: 15px; }

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

.dock__panel {
	width: min(320px, calc(100vw - 28px));
	padding: 20px;
	border-radius: var(--r-lg);
	background: rgba(18, 22, 32, .97);
	border: 1px solid var(--line-d2);
	box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .8);
	backdrop-filter: blur(18px);
	-webkit-backdrop-filter: blur(18px);
	color: var(--on-dark);
	transform-origin: 100% 100%;
	animation: dock-in .3s var(--ease);
}
.dock__panel[hidden] { display: none; }

@keyframes dock-in {
	from { opacity: 0; transform: translateY(12px) scale(.96); }
	to   { opacity: 1; transform: none; }
}

.dock__title {
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .17em;
	text-transform: uppercase;
	color: var(--on-dark-faint);
	margin-bottom: 14px;
}

.dock__act {
	display: flex;
	align-items: center;
	gap: 13px;
	padding: 12px;
	margin: 0 -6px;
	border-radius: var(--r-sm);
	transition: background-color .25s;
}
.dock__act:hover { background: rgba(255, 255, 255, .07); }

.dock__ico {
	width: 40px;
	height: 40px;
	flex: none;
	display: grid;
	place-items: center;
	border-radius: 50%;
	border: 1px solid var(--line-d2);
	color: var(--accent);
}
.dock__ico svg { width: 19px; height: 19px; display: block; }
.dock__act--primary .dock__ico {
	background: var(--blue-500);
	border-color: var(--blue-500);
	color: var(--on-accent);
}

.dock__body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.dock__lab { font-size: .93rem; font-weight: 700; letter-spacing: -.02em; }
.dock__sub { font-size: .78rem; color: var(--on-dark-mute); }
.dock__act--primary .dock__sub {
	color: var(--accent);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.dock__hours {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 14px;
	font-size: .78rem;
	color: var(--on-dark-mute);
}

.dock__note {
	font-size: .74rem;
	color: var(--on-dark-faint);
	margin-top: 14px;
	padding-top: 13px;
	border-top: 1px solid var(--line-d);
}

@media (max-width: 760px) {
	.dock__toggle-label { display: none; }
	.dock__toggle { padding: 15px; }
}

@media (prefers-reduced-motion: reduce) {
	.dock__panel { animation: none; }
}