/* mufaa2d.css — OnlyCases Swiss International Precision System */

.site-header {
	width:100%;
	background-color:var(--surface);
	border-bottom:1px solid var(--line);
	position:relative;
	z-index:100;
}

@media (min-width: 720px) {
	.site-header {
		height:var(--header-height-desktop);
		display:flex;
		align-items:center;
	}
}

.header-inner {
	display:flex;
	align-items:center;
	justify-content:space-between;
	width:100%;
	padding-block:var(--space-xs);
}

@media (min-width: 720px) {
	.header-inner {
		padding-block:0;
		height:100%;
	}
}

.brand {
	display:inline-flex;
	align-items:center;
	flex-shrink:0;
	text-decoration:none;
	transition:opacity var(--dur-fast) var(--ease-out);
}

.brand:hover {
	opacity:0.85;
}

.brand:active {
	opacity:0.7;
}

.brand:focus-visible {
	outline:2px solid var(--accent);
	outline-offset:4px;
}

.brand-logo {
	height:2.1rem;
	width:auto;
	display:block;
}

.nav-desktop {
	display:none;
}

@media (min-width: 720px) {
	.nav-desktop {
		display:flex;
		align-items:center;
		gap:var(--space-m);
		height:100%;
	}

	.nav-list {
		display:flex;
		align-items:center;

		gap:clamp(0.25rem, 0.6vw, 0.75rem);
		margin:0;
		padding:0;
		list-style:none;
		height:100%;
	}

	.nav-link {
		display:inline-flex;
		align-items:center;
		padding:var(--space-2xs) clamp(0.35rem, 0.5vw, 0.7rem);
		min-height:44px;
		font-family:var(--lava-7f0);
		font-size:var(--step--1);
		font-weight:500;
		white-space:nowrap;
		color:var(--ink-soft);
		text-decoration:none;
		letter-spacing:-0.01em;
		border-bottom:2px solid transparent;
		transition:color var(--dur-fast) var(--ease-out),
								border-color var(--dur-fast) var(--ease-out),
								background-color var(--dur-fast) var(--ease-out);
	}

	.nav-link:hover {
		color:var(--ink);
		background-color:var(--surface-2);
	}

	.nav-link:active {
		background-color:var(--line);
		color:var(--ink);
	}

	.nav-link:focus-visible {
		outline:2px solid var(--accent);
		outline-offset:-2px;
	}

	.nav-link[aria-current='page'] {
		color:var(--ink);
		border-bottom-color:var(--hairline);
		font-weight:600;
	}
}

.header-action-group {
	display:flex;
	align-items:center;
	gap:var(--space-xs);
}

/* Mobile Bottom Dock (Within reach of the thumb) */
.mobile-dock {
	display:flex;
	position:fixed;
	bottom:0;
	left:0;
	right:0;
	height:var(--dock-height-mobile);
	background-color:var(--surface);
	border-top:1px solid var(--line);
	z-index:1000;
	padding-bottom:env(safe-area-inset-bottom, 0px);
	align-items:stretch;
	justify-content:space-around;
}

@media (min-width: 720px) {
	.mobile-dock {
		display:none;
	}
}

.dock-item {
	flex:1;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	gap:2px;
	min-height:44px;
	color:#e0e0e0;
	text-decoration:none;
	font-family:var(--lava-7f0);
	font-size:var(--step--2);
	font-weight:600;
	padding:var(--space-3xs) var(--space-2xs);
	transition:color var(--dur-fast) var(--ease-out),
							background-color var(--dur-fast) var(--ease-out);
}

.dock-item:hover {
	color:var(--ink);
	background-color:var(--surface-2);
}

.dock-item:active {
	background-color:var(--line);
	color:var(--ink);
}

.dock-item:focus-visible {
	outline:2px solid var(--accent);
	outline-offset:-2px;
}

.dock-item[aria-current='page'] {
	color:var(--ink);
	border-top:2px solid var(--hairline);
}

.dock-item .icon {
	width:1.15em;
	height:1.15em;
}

/* Mobile Navigation Panel / Drawer */
.mobile-nav-panel {
	display:none;
	position:fixed;
	bottom:calc(var(--dock-height-mobile) + env(safe-area-inset-bottom, 0px));
	left:0;
	right:0;
	background-color:var(--surface);
	border-top:1px solid var(--line);
	border-bottom:1px solid var(--line);
	padding:var(--space-m);
	z-index:999;
	max-height:70vh;
	overflow-y:auto;
	box-shadow:0 -8px 24px rgba(0, 0, 0, 0.6);
}

.mobile-nav-panel.is-open {
	display:block;
}

.mobile-nav-list {
	display:flex;
	flex-direction:column;
	gap:var(--space-2xs);
}

.mobile-nav-link {
	display:flex;
	align-items:center;
	justify-content:space-between;
	padding:var(--space-xs) var(--space-s);
	min-height:48px;
	background-color:var(--ground);
	border:1px solid var(--line);
	color:var(--ink);
	font-family:var(--lava-7f0);
	font-size:var(--lava-e0d);
	text-decoration:none;
	font-weight:500;
	transition:background-color var(--dur-fast) var(--ease-out),
							border-color var(--dur-fast) var(--ease-out);
}

.mobile-nav-link:hover {
	background-color:var(--surface-2);
	border-color:var(--ink-soft);
}

.mobile-nav-link:active {
	background-color:var(--surface);
	border-color:var(--accent);
}

.mobile-nav-link:focus-visible {
	outline:2px solid var(--accent);
	outline-offset:1px;
}

.mobile-nav-link[aria-current='page'] {
	border-left:4px solid var(--hairline);
	background-color:var(--surface-2);
}

.btn {
	display:inline-flex;
	align-items:center;

	justify-content:center;
	gap:var(--space-2xs);
	padding:var(--space-xs) var(--space-m);
	min-height:44px;
	height:44px;
	font-family:var(--lava-7f0);
	font-size:var(--step--1);
	font-weight:600;
	letter-spacing:0.02em;
	text-decoration:none;
	cursor:pointer;
	border-radius:0;
	border:1px solid transparent;
	transition:background-color var(--dur-fast) var(--ease-out),
							border-color var(--dur-fast) var(--ease-out),
							color var(--dur-fast) var(--ease-out),
							box-shadow var(--dur-fast) var(--ease-out);
	white-space:normal;
	text-align:center;

}

.btn-primary {
	background-color:var(--accent);
	color:var(--accent-ink);
	border-color:var(--accent);
}

.btn-primary:hover {
	background-color:#2da162;
	border-color:#2da162;
	box-shadow:0 2px 8px rgba(38, 133, 81, 0.4);
}

.btn-primary:active {
	background-color:#1e6d42;
	border-color:#1e6d42;
	box-shadow:inset 0 2px 4px rgba(0, 0, 0, 0.3);
}

.btn-primary:focus-visible {
	outline:2px solid var(--accent-ink);
	outline-offset:2px;
}

.btn-secondary {
	background-color:var(--surface);
	color:var(--ink);
	border-color:var(--line);
}

.btn-secondary:hover {
	background-color:var(--surface-2);
	border-color:var(--ink-soft);
	color:#fff;
}

.btn-secondary:active {
	background-color:var(--ground);
	border-color:var(--hairline);
}

.btn-secondary:focus-visible {
	outline:2px solid var(--accent);
	outline-offset:2px;
}

.btn-hairline {
	background-color:transparent;
	color:var(--ink);
	border-color:var(--hairline);
}

.btn-hairline:hover {
	background-color:rgba(176, 141, 87, 0.12);
	border-color:#c7a469;
}

.btn-hairline:active {
	background-color:rgba(176, 141, 87, 0.22);
}

.btn-hairline:focus-visible {
	outline:2px solid var(--hairline);
	outline-offset:2px;
}

.btn-sm {
	min-height:44px;
	height:44px;
	padding:var(--space-2xs) var(--space-s);
	font-size:var(--step--2);
}

.btn-full {
	width:100%;
}

/* Directory Row Layout (Index Style) */
.directory-table {
	width:100%;
	border-top:1px solid var(--line);
}

.directory-row {
	display:grid;
	grid-template-columns:1fr;
	padding-block:var(--space-s);
	border-bottom:1px solid var(--line);
	gap:var(--space-xs);
	transition:background-color var(--dur-fast) var(--ease-out);
}

@media (min-width: 640px) {
	.directory-row {
		grid-template-columns:minmax(0, 2fr) minmax(90px, auto) minmax(130px, auto) auto;
		align-items:center;
		gap:var(--space-m);
		padding-block:var(--space-s);
	}
}

.directory-row:hover {
	background-color:var(--surface);
}

.directory-title {
	font-family:var(--lava-7f0);
	font-size:var(--lava-e0d);
	font-weight:600;
	color:var(--ink);
	margin-bottom:0.2rem;
	line-height:1.35;
}

.directory-title a {
	display:inline;
}

.directory-desc {
	font-size:var(--step--1);
	color:var(--ink-soft);
	margin:0;
}

.directory-price {
	font-family:var(--lava-730);
	font-size:var(--lava-e0d);
	font-weight:700;
	color:var(--ink);
}

.directory-spec {
	font-family:var(--lava-730);
	font-size:var(--step--2);
	color:var(--ink-soft);
}

.catalog-card {
	background-color:var(--surface);
	border:1px solid var(--line);
	display:flex;
	flex-direction:column;
	height:100%;
	transition:border-color var(--dur-fast) var(--ease-out),
							background-color var(--dur-fast) var(--ease-out);
}

.catalog-card:hover {
	border-color:var(--hairline);
	background-color:#212121;
}

.catalog-card-media {
	position:relative;
	aspect-ratio:4 / 3;
	overflow:hidden;
	background-color:#0d0c0c;
	border-bottom:1px solid var(--line);
}

.catalog-card-media img {
	width:100%;
	height:100%;
	object-fit:cover;
	transition:transform var(--dur-deliberate) var(--ease-out);
}

.catalog-card:hover .catalog-card-media img {
	transform:scale(1.025);
}

.catalog-card-body {
	padding:var(--space-m);
	display:flex;
	flex-direction:column;
	flex-grow:1;
}

.catalog-card-title {
	font-size:var(--lava-0af);
	font-weight:700;
	margin-bottom:var(--space-2xs);
	color:var(--ink);
}

.catalog-card-text {
	font-size:var(--step--1);
	color:var(--ink-soft);
	flex-grow:1;
	margin-bottom:var(--space-m);
}

.catalog-card-meta {
	display:flex;
	align-items:center;
	justify-content:space-between;
	border-top:1px solid var(--line);
	padding-top:var(--space-xs);
	margin-top:auto;
}

.spec-table {
	width:100%;
	border-collapse:collapse;
	font-family:var(--lava-7f0);
	font-size:var(--step--1);
	border:1px solid var(--line);
	background-color:var(--surface);
}

.spec-table th,
.spec-table td {
	padding:var(--space-xs) var(--space-s);
	border-bottom:1px solid var(--line);
	text-align:left;
}

.spec-table th {
	background-color:var(--surface-2);
	color:var(--ink);
	font-family:var(--lava-730);
	font-size:var(--step--2);
	text-transform:uppercase;
	letter-spacing:0.05em;
	font-weight:700;
}

.spec-table td {
	color:var(--ink-soft);
}

.spec-table tr:hover td {
	background-color:rgba(255, 255, 255, 0.02);
	color:var(--ink);
}

.spec-table .spec-label {
	font-weight:600;
	color:var(--ink);
}

.spec-table .spec-value {
	font-family:var(--lava-730);
	color:var(--ink);
}

.inquiry-form {
	background-color:var(--surface);
	border:1px solid var(--line);
	padding:var(--space-m);
}

@media (min-width: 768px) {
	.inquiry-form {
		padding:var(--space-l);
	}
}

.form-group {
	margin-bottom:var(--space-m);
}

.form-label {
	display:block;
	font-family:var(--lava-7f0);
	font-size:var(--step--1);
	font-weight:600;
	color:var(--ink);
	margin-bottom:var(--space-3xs);
}

.form-label .optional {
	font-weight:400;
	color:var(--ink-soft);
	font-size:var(--step--2);
	margin-left:0.25rem;
}

.form-input,
.form-select,
.form-textarea {
	width:100%;
	background-color:var(--surface-2);
	border:1px solid var(--line);
	color:var(--ink);
	padding:var(--space-xs) var(--space-s);
	font-family:var(--lava-7f0);
	font-size:var(--lava-e0d);
	border-radius:0;
	transition:border-color var(--dur-fast) var(--ease-out),
							background-color var(--dur-fast) var(--ease-out),
							box-shadow var(--dur-fast) var(--ease-out);
	min-height:48px;
}

.form-textarea {
	min-height:110px;
	resize:vertical;
}

.form-input:hover,
.form-select:hover,
.form-textarea:hover {
	border-color:var(--ink-soft);
	background-color:#303030;
}

.form-input:focus-visible,
.form-select:focus-visible,
.form-textarea:focus-visible {
	outline:2px solid var(--accent);
	outline-offset:1px;
	border-color:var(--accent);
	background-color:#333;
}

.form-input:active,
.form-select:active,
.form-textarea:active {
	border-color:var(--hairline);
}

.form-input[aria-invalid='true'],
.form-select[aria-invalid='true'],
.form-textarea[aria-invalid='true'] {
	border-color:#c94b4b;
	background-color:rgba(201, 75, 75, 0.08);
}

.form-error-msg {
	display:none;
	font-family:var(--lava-7f0);
	font-size:var(--step--2);
	color:#ff8585;
	margin-top:var(--space-3xs);
}

.form-error-msg.is-visible {
	display:block;
}

.form-checkbox-label {
	display:flex;
	align-items:flex-start;
	gap:var(--space-2xs);
	cursor:pointer;
	font-size:var(--step--1);
	color:var(--ink-soft);
	user-select:none;
}

.form-checkbox-label input[type='checkbox'] {
	appearance:none;
	-webkit-appearance:none;
	width:20px;
	height:20px;
	background-color:var(--surface-2);
	border:1px solid var(--line);
	cursor:pointer;
	flex-shrink:0;
	margin-top:0.15rem;
	display:grid;
	place-content:center;
	transition:background-color var(--dur-fast) var(--ease-out),
							border-color var(--dur-fast) var(--ease-out);
}

.form-checkbox-label input[type='checkbox']:hover {
	border-color:var(--ink-soft);
}

.form-checkbox-label input[type='checkbox']:checked {
	background-color:var(--accent);
	border-color:var(--accent);
}

.form-checkbox-label input[type='checkbox']:checked::before {
	content:"";
	width:10px;
	height:6px;
	border-left:2px solid #fff;
	border-bottom:2px solid #fff;
	transform:rotate(-45deg) translate(1px, -1px);
}

.form-checkbox-label input[type='checkbox']:focus-visible {
	outline:2px solid var(--accent);
	outline-offset:2px;
}

/* Honeypots hidden visually */
.visually-hidden-honey {
	position:absolute !important;
	opacity:0 !important;
	pointer-events:none !important;
	width:1px !important;
	height:1px !important;
	overflow:hidden !important;
}

.photo-collage {
	position:relative;
	width:100%;
	min-height:360px;
	margin-block:var(--space-l);
	display:flex;
	align-items:center;
	justify-content:center;
	overflow:hidden;
}

@media (min-width: 768px) {
	.photo-collage {
		min-height:580px;
	}
}

.collage-item {
	position:absolute;
	border:1px solid var(--line);
	background-color:var(--surface);
	box-shadow:0 16px 36px rgba(0, 0, 0, 0.7);
	transition:transform var(--dur-deliberate) var(--ease-out),
							border-color var(--dur-fast) var(--ease-out);
}

.collage-item img {
	width:100%;
	height:100%;
	object-fit:cover;
	display:block;
}

.collage-item--base {
	width:65%;
	aspect-ratio:3 / 2;
	height:auto;
	top:10%;
	left:5%;
	z-index:1;
	transform:rotate(-1.5deg);
}

.collage-item--mid {
	width:52%;
	aspect-ratio:3 / 2;
	height:auto;
	bottom:8%;
	right:5%;
	z-index:2;
	transform:rotate(2deg);
	border-color:var(--hairline);
}

.collage-item--accent {
	width:38%;
	aspect-ratio:3 / 2;
	height:auto;
	top:25%;
	left:32%;
	z-index:3;
	transform:rotate(-0.5deg);
	border:2px solid var(--accent);
}

@media (max-width: 480px) {
	.collage-item--base {
		width:85%;
		top:5%;
		left:2%;
	}
	.collage-item--mid {
		width:75%;
		bottom:5%;
		right:2%;
	}
	.collage-item--accent {
		width:60%;
		top:30%;
		left:20%;
	}
}

.collage-caption {
	position:absolute;
	bottom:0;
	left:0;
	right:0;
	background-color:rgba(20, 18, 18, 0.92);
	backdrop-filter:blur(8px);
	-webkit-backdrop-filter:blur(8px);
	padding:var(--space-3xs) var(--space-2xs);
	font-family:var(--lava-730);
	font-size:var(--step--2);
	color:var(--ink);
	border-top:1px solid var(--line);
	z-index:10;
	overflow-wrap:break-word;
	max-width:100%;
}

.instrument-card {
	background:linear-gradient(180deg, #222 0%, #1a1a1a 100%);
	border:1px solid rgba(176, 141, 87, 0.35);
	border-top:2px solid var(--hairline);
	box-shadow:0 16px 36px rgba(0, 0, 0, 0.45);
	padding:var(--space-m);
	width:100%;
}

@media (min-width: 640px) {
	.instrument-card {
		padding:var(--space-l);
	}
}

.instrument-heading {
	font-family:var(--lava-730);
	font-size:var(--step--2);
	color:var(--hairline);
	text-transform:uppercase;
	letter-spacing:0.08em;
	margin-bottom:var(--space-xs);
}

.instrument-row {
	display:grid;
	grid-template-columns:1fr;
	gap:var(--space-xs);
	margin-bottom:var(--space-s);
}

@media (min-width: 480px) {
	.instrument-row {
		grid-template-columns:repeat(2, 1fr);
	}
}

.instrument-display {
	background-color:#121212;
	border:1px solid rgba(176, 141, 87, 0.25);
	border-left:3px solid var(--accent);
	box-shadow:inset 0 2px 6px rgba(0, 0, 0, 0.5);
	padding:var(--space-s) var(--space-m);
	margin-block:var(--space-s);
	display:flex;
	align-items:baseline;
	justify-content:space-between;
	flex-wrap:wrap;
	gap:var(--space-2xs);
}

.instrument-estimate-label {
	font-family:var(--lava-730);
	font-size:var(--step--2);
	color:var(--ink-soft);
	text-transform:uppercase;
	letter-spacing:0.04em;
}

.instrument-figure {
	font-family:var(--lava-730);
	font-size:var(--lava-ebd);
	font-weight:700;
	color:var(--ink);
	font-variant-numeric:tabular-nums;
}

.instrument-note {
	font-family:var(--lava-7f0);
	font-size:var(--step--1);
	color:var(--ink-soft);
	margin-top:var(--space-3xs);
}

.site-footer {
	background-color:var(--surface);
	border-top:1px solid var(--line);
	padding-top:var(--space-2xl);
	padding-bottom:var(--space-xl);
	margin-top:var(--space-3xl);
}

@media (max-width: 719px) {
	.site-footer {
		padding-bottom:calc(var(--space-2xl) + var(--dock-height-mobile));
	}
}

.footer-grid {
	display:grid;
	grid-template-columns:1fr;
	gap:var(--space-xl);
	margin-bottom:var(--space-2xl);
}

@media (min-width: 768px) {
	.footer-grid {
		grid-template-columns:2fr 1fr 1fr;
	}
}

.footer-brand-col {
	display:flex;
	flex-direction:column;
	gap:var(--space-s);
}

.footer-logo {
	height:2.3rem;
	width:auto;
	display:block;
}

.footer-facts {
	font-size:var(--step--1);
	color:var(--ink-soft);
	line-height:1.6;
}

.footer-nav-col h3 {
	font-family:var(--lava-730);
	font-size:var(--step--1);
	text-transform:uppercase;
	letter-spacing:0.05em;
	color:var(--ink);
	margin-bottom:var(--space-s);
}

.footer-nav-list {
	display:flex;
	flex-direction:column;
	gap:var(--space-2xs);
}

.footer-nav-link {
	font-size:var(--step--1);
	color:var(--ink-soft);
	text-decoration:none;
	padding-block:0.2rem;
	display:inline-block;
	min-height:36px;
	line-height:32px;
	transition:color var(--dur-fast) var(--ease-out),
							padding-left var(--dur-fast) var(--ease-out);
}

.footer-nav-link:hover {
	color:var(--ink);
	padding-left:var(--space-3xs);
}

.footer-nav-link:active {
	color:var(--hairline);
}

.footer-nav-link:focus-visible {
	outline:2px solid var(--accent);
	outline-offset:2px;
}

.footer-legal-bar {
	border-top:1px solid var(--line);
	padding-top:var(--space-m);
	display:flex;
	flex-direction:column;
	gap:var(--space-m);
}

@media (min-width: 768px) {
	.footer-legal-bar {
		flex-direction:row;
		align-items:center;
		justify-content:space-between;
	}
}

.footer-legal-links {
	display:flex;
	flex-wrap:wrap;
	gap:var(--space-s);
	align-items:center;
}

.footer-legal-link {
	font-family:var(--lava-730);
	font-size:var(--step--2);
	color:var(--ink-soft);
	text-decoration:none;
	min-height:44px;
	display:inline-flex;
	align-items:center;
	transition:color var(--dur-fast) var(--ease-out);
}

.footer-legal-link:hover {
	color:var(--ink);
	text-decoration:underline;
}

.footer-legal-link:active {
	color:var(--hairline);
}

.footer-legal-link:focus-visible {
	outline:2px solid var(--accent);
	outline-offset:2px;
}

.footer-disclaimer {
	font-size:var(--step--2);
	color:var(--ink-soft);
	line-height:1.5;
	margin-top:var(--space-s);
	border-left:2px solid var(--line);
	padding-left:var(--space-s);
}

.consent-bar {
	position:fixed;
	bottom:0;
	left:0;
	right:0;
	background-color:var(--surface);
	border-top:1px solid var(--line);
	z-index:2000;
	padding:0.5rem var(--space-m);
	box-shadow:0 -4px 20px rgba(0, 0, 0, 0.8);
	display:none;
}

@media (max-width: 719px) {
	.consent-bar {
		bottom:calc(var(--dock-height-mobile) + env(safe-area-inset-bottom, 0px));
		padding:0.35rem 0.75rem;
		max-height:25vh;
	}
}

.consent-bar.is-visible {
	display:block;
}

.consent-inner {
	max-width:var(--container-max);
	margin-inline:auto;
	display:flex;
	flex-direction:column;
	gap:var(--space-xs);
	align-items:flex-start;
	justify-content:space-between;
}

@media (min-width: 768px) {
	.consent-inner {
		flex-direction:row;
		align-items:center;
		gap:var(--space-m);
	}
}

.consent-text {
	font-size:var(--step--1);
	color:var(--ink);
	margin:0;
	max-width:65ch;
	line-height:1.4;
}

.consent-text a {
	color:var(--ink);
	text-decoration:underline;
	text-underline-offset:2px;
}

.consent-text a:hover {
	color:var(--hairline);
}

.consent-actions {
	display:flex;
	align-items:center;
	gap:var(--space-xs);
	flex-shrink:0;
}

.chat-launcher {
	position:fixed;
	bottom:var(--space-m);
	right:var(--space-m);
	z-index:1500;
	width:44px;
	height:44px;
	background-color:var(--surface-2);
	border:1px solid var(--line);
	color:var(--ink);
	display:none; /* Managed by JS */
	align-items:center;
	justify-content:center;
	cursor:pointer;
	box-shadow:0 4px 16px rgba(0, 0, 0, 0.6);
	transition:background-color var(--dur-fast) var(--ease-out),
							border-color var(--dur-fast) var(--ease-out),
							transform var(--dur-fast) var(--ease-out),
							box-shadow var(--dur-fast) var(--ease-out);
}

@media (max-width: 719px) {
	.chat-launcher {
		bottom:calc(var(--dock-height-mobile) + 100px + env(safe-area-inset-bottom, 0px));
	}
}

.chat-launcher:hover {
	background-color:var(--surface);
	border-color:var(--hairline);
	transform:translateY(-2px);
	box-shadow:0 6px 20px rgba(0, 0, 0, 0.8);
}

.chat-launcher:active {
	background-color:var(--ground);
	transform:translateY(0);
}

.chat-launcher:focus-visible {
	outline:2px solid var(--accent);
	outline-offset:2px;
}

.chat-badge {
	position:absolute;
	top:-4px;
	right:-4px;
	background-color:var(--accent);
	color:var(--accent-ink);
	font-family:var(--lava-730);
	font-size:0.7rem;
	font-weight:700;
	width:18px;
	height:18px;
	display:flex;
	align-items:center;
	justify-content:center;
	border:1px solid var(--ground);
}

.chat-panel {
	position:fixed;
	bottom:calc(var(--space-m) + 60px);
	right:var(--space-m);
	width:360px;
	max-width:calc(100vw - 2rem);
	height:500px;
	max-height:calc(100vh - 120px);
	max-height:calc(100svh - 120px);
	background-color:var(--surface);
	border:1px solid var(--line);
	box-shadow:0 16px 40px rgba(0, 0, 0, 0.8);
	z-index:1550;
	display:none;
	flex-direction:column;
}

@media (max-width: 719px) {
	.chat-panel {
		bottom:calc(var(--dock-height-mobile) + 65px + env(safe-area-inset-bottom, 0px));
		right:1rem;
		left:1rem;
		width:auto;
		height:440px;
	}
}

.chat-panel.is-open {
	display:flex;
}

.chat-header {
	padding:var(--space-xs) var(--space-s);
	background-color:var(--surface-2);
	border-bottom:1px solid var(--line);
	display:flex;
	align-items:center;
	justify-content:space-between;
}

.chat-title {
	font-family:var(--lava-730);
	font-size:var(--step--1);
	font-weight:700;
	color:var(--ink);
}

.chat-close-btn {
	background:transparent;
	border:1px solid transparent;
	color:var(--ink-soft);
	width:36px;
	height:36px;
	display:flex;
	align-items:center;
	justify-content:center;
	cursor:pointer;
	transition:color var(--dur-fast) var(--ease-out),
							background-color var(--dur-fast) var(--ease-out);
}

.chat-close-btn:hover {
	color:var(--ink);
	background-color:var(--line);
}

.chat-close-btn:active {
	background-color:var(--ground);
}

.chat-close-btn:focus-visible {
	outline:2px solid var(--accent);
}

.chat-body {
	flex-grow:1;
	padding:var(--space-s);
	overflow-y:auto;
	display:flex;
	flex-direction:column;
	gap:var(--space-xs);
	background-color:var(--ground);
}

.chat-msg {
	padding:var(--space-2xs) var(--space-xs);
	max-width:85%;
	font-size:var(--step--1);
	line-height:1.4;
	word-break:break-word;
}

.chat-msg--operator {
	align-self:flex-start;
	background-color:var(--surface);
	border:1px solid var(--line);
	color:var(--ink);
}

.chat-msg--user {
	align-self:flex-end;
	background-color:var(--surface-2);
	border:1px solid var(--hairline);
	color:var(--ink);
}

.chat-footer {
	padding:var(--space-xs);
	background-color:var(--surface);
	border-top:1px solid var(--line);
}

.chat-form {
	display:flex;
	gap:var(--space-3xs);
}

.chat-input {
	flex-grow:1;
	background-color:var(--surface-2);
	border:1px solid var(--line);
	color:var(--ink);
	padding:var(--space-2xs) var(--space-xs);
	font-size:var(--step--1);
	min-height:44px;
}

.chat-input:focus-visible {
	outline:2px solid var(--accent);
}