/**
 * Groundcraft Concierge — launcher, panel, and the rosette voice orb.
 *
 * Consumes the site design tokens (tokens.css) but falls back to the canonical
 * brand values so it renders correctly on any site — including network/client
 * sites that don't ship tokens.css. One mapping block does the fallback; the rest
 * of the sheet only ever reads --gcc-* so there is a single source of truth.
 *
 * Identity is the Groundcraft rosette on graphite; the signal colour is lime.
 * Open/close is driven by .gcc-root[data-open] and views by .gcc-panel[data-view]
 * — never by the `hidden` attribute (which lost to `display:flex` and left the old
 * panel permanently parked over the page).
 */
.gcc-root {
	--gcc-brand: var(--brand, #9bd45f);
	--gcc-brand-strong: var(--brand-strong, #527d21);
	--gcc-brand-ink: var(--brand-ink, #1c2e0a);
	--gcc-brand-soft: var(--brand-soft, #eef7df);
	--gcc-surface: var(--surface, #ffffff);
	--gcc-surface-2: var(--surface-2, #f1f2ed);
	--gcc-ink: var(--ink, #1b1e19);
	--gcc-ink-2: var(--ink-2, #525750);
	--gcc-muted: var(--muted, #787d74);
	--gcc-border: var(--border, #e3e5dc);
	--gcc-graphite: var(--nav-bg, #20231e);
	--gcc-graphite-2: #2a2e26;
	--gcc-graphite-deep: #171a15;
	--gcc-on-graphite: var(--nav-ink-strong, #f2f3ef);
	--gcc-on-graphite-2: var(--nav-ink, #b6bbb0);
	--gcc-font: var(--font-body, "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
	--gcc-display: var(--font-display, "Space Grotesk", var(--gcc-font));
	--gcc-r: var(--r-lg, 22px);
	--gcc-r-md: var(--r-md, 16px);
	--gcc-r-sm: var(--r-sm, 10px);
	--gcc-shadow: var(--shadow-modal, 0 24px 60px rgba(23,26,21,.3));
	--gcc-shadow-pop: var(--shadow-pop, 0 12px 32px rgba(23,26,21,.16), 0 2px 6px rgba(23,26,21,.09));
	position: fixed; z-index: 2147483000; inset: auto 0 0 auto;
	font-family: var(--gcc-font); box-sizing: border-box;
}
.gcc-root *, .gcc-root *::before, .gcc-root *::after { box-sizing: border-box; }
.gcc-rose { width: 100%; height: 100%; display: block; }
.gcc-audio { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* ---- open / close ----------------------------------------------------- */
/* Visibility is owned here, not by the `hidden` attribute. When closed, the
   panel and scrim are display:none — they cannot squat on the page. */
.gcc-scrim {
	position: fixed; inset: 0; z-index: -1;
	background: rgba(23,26,21,.14);
	opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility .2s ease;
	-webkit-backdrop-filter: saturate(1) blur(1px); backdrop-filter: saturate(1) blur(1px);
}
.gcc-root[data-open="false"] .gcc-panel { display: none; }
.gcc-root[data-open="true"] .gcc-scrim { opacity: 1; visibility: visible; }
.gcc-root[data-open="true"] .gcc-fab { opacity: 0; visibility: hidden; transform: scale(.6); pointer-events: none; }

/* ---- launcher --------------------------------------------------------- */
.gcc-fab {
	position: fixed; right: 22px; bottom: 22px;
	width: 60px; height: 60px; padding: 15px; border-radius: 50%;
	border: 0; cursor: pointer; color: var(--gcc-brand);
	background: var(--gcc-graphite);
	box-shadow: var(--gcc-shadow-pop);
	display: grid; place-items: center;
	transition: transform .2s cubic-bezier(.2,.9,.3,1.2), box-shadow .2s ease, opacity .2s ease, visibility .2s ease;
	animation: gcc-fab-in .4s cubic-bezier(.2,.9,.3,1.2) both;
}
.gcc-fab::after {
	content: ""; position: absolute; inset: -4px; border-radius: 50%;
	border: 2px solid var(--gcc-brand); opacity: 0; transform: scale(.9);
	transition: opacity .2s ease, transform .2s ease;
}
.gcc-fab:hover { transform: translateY(-3px); }
.gcc-fab:hover::after { opacity: .5; transform: scale(1); }
.gcc-fab:focus-visible { outline: none; }
.gcc-fab:focus-visible::after { opacity: 1; transform: scale(1); }
body.gc-cart-open .gcc-fab { opacity: 0; visibility: hidden; pointer-events: none; }
@keyframes gcc-fab-in { from { opacity: 0; transform: scale(.4) translateY(8px); } to { opacity: 1; transform: none; } }

/* ---- panel ------------------------------------------------------------ */
.gcc-panel {
	position: fixed; right: 22px; bottom: 22px;
	width: 404px; max-width: calc(100vw - 32px);
	height: min(648px, calc(100vh - 44px));
	display: flex; flex-direction: column; overflow: hidden;
	background: var(--gcc-surface); color: var(--gcc-ink);
	border-radius: var(--gcc-r);
	box-shadow: var(--gcc-shadow), 0 0 0 1px rgba(23,26,21,.06);
	font-size: 14px; line-height: 1.5;
	transform-origin: bottom right;
	animation: gcc-panel-in .26s cubic-bezier(.2,.9,.3,1) both;
}
@keyframes gcc-panel-in { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }

/* Header — graphite bar, rosette identity, live status. */
.gcc-hd {
	display: flex; align-items: center; gap: 11px;
	padding: 14px 14px 13px; flex: 0 0 auto;
	background: var(--gcc-graphite); color: var(--gcc-on-graphite);
}
.gcc-hd__mark { width: 30px; height: 30px; flex: 0 0 auto; color: var(--gcc-brand); }
.gcc-hd__id { display: flex; flex-direction: column; line-height: 1.25; flex: 1 1 auto; min-width: 0; }
.gcc-hd__id strong { font-family: var(--gcc-display); font-weight: 600; font-size: 14.5px; letter-spacing: -.01em; }
.gcc-hd__status { font-size: 12px; color: var(--gcc-on-graphite-2); min-height: 15px; }
.gcc-hd__status.is-thinking, .gcc-hd__status.is-busy { color: var(--gcc-brand); }
.gcc-hd__back, .gcc-hd__x {
	background: none; border: 0; color: var(--gcc-on-graphite-2); cursor: pointer;
	width: 30px; height: 30px; padding: 6px; border-radius: 8px; flex: 0 0 auto;
	display: grid; place-items: center; transition: background .12s ease, color .12s ease;
}
.gcc-hd__x { margin-left: auto; }
.gcc-hd__back { display: none; }
.gcc-hd__back:hover, .gcc-hd__x:hover { background: rgba(255,255,255,.1); color: var(--gcc-on-graphite); }
.gcc-hd__back svg, .gcc-hd__x svg { width: 18px; height: 18px; }
/* Chat is the home, so it keeps the rosette anchor; only voice/form show Back. */
.gcc-panel[data-view="voice"] .gcc-hd__back, .gcc-panel[data-view="form"] .gcc-hd__back { display: grid; }
.gcc-panel[data-view="voice"] .gcc-hd__mark, .gcc-panel[data-view="form"] .gcc-hd__mark { display: none; }

/* ---- body + view switching ------------------------------------------- */
.gcc-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.gcc-view { display: none; flex: 1 1 auto; min-height: 0; }
.gcc-panel[data-view="chat"] .gcc-chat { display: flex; flex-direction: column; }
.gcc-panel[data-view="voice"] .gcc-voice { display: flex; flex-direction: column; }
.gcc-panel[data-view="form"] .gcc-form { display: flex; flex-direction: column; }

/* ---- quick replies (ride above the composer until the first turn) ------ */
.gcc-quick { display: none; flex-wrap: wrap; gap: 7px; padding: 12px 14px 2px; }
.gcc-panel[data-view="chat"] .gcc-quick { display: flex; }
.gcc-panel.gcc-turned .gcc-quick { display: none; }
.gcc-pill {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 8px 13px; font: inherit; font-size: 12.5px; font-weight: 500; cursor: pointer;
	color: var(--gcc-ink-2); background: var(--gcc-surface-2);
	border: 1px solid transparent; border-radius: 999px;
	transition: color .13s ease, background .13s ease, border-color .13s ease, transform .12s ease;
}
.gcc-pill:hover { color: var(--gcc-brand-strong); background: var(--gcc-brand-soft); border-color: var(--gcc-brand-strong); transform: translateY(-1px); }
.gcc-pill__i { display: grid; place-items: center; width: 16px; height: 16px; flex: 0 0 auto; }
.gcc-pill__i svg { width: 15px; height: 15px; }
/* The build action leads — filled lime, not another light pill. */
.gcc-pill--go { color: var(--gcc-brand-ink); background: var(--gcc-brand); border-color: var(--gcc-brand-strong); font-weight: 600; }
.gcc-pill--go:hover { color: #fff; background: var(--gcc-brand-strong); border-color: var(--gcc-brand-strong); }

/* ---- chat ------------------------------------------------------------- */
.gcc-chat { }
.gcc-transcript { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.gcc-msg { display: flex; gap: 8px; max-width: 100%; }
.gcc-msg--user { justify-content: flex-end; }
.gcc-msg--assistant { justify-content: flex-start; }
.gcc-msg__av { flex: 0 0 auto; width: 24px; height: 24px; margin-top: 2px; color: var(--gcc-brand-strong); }
.gcc-bub {
	max-width: 82%; padding: 10px 13px; font-size: 13.5px; line-height: 1.5;
	white-space: pre-wrap; word-wrap: break-word; overflow-wrap: anywhere;
}
.gcc-msg--assistant .gcc-bub { background: var(--gcc-surface-2); color: var(--gcc-ink); border-radius: 4px 15px 15px 15px; }
.gcc-msg--user .gcc-bub { background: var(--gcc-brand); color: var(--gcc-brand-ink); border-radius: 15px 4px 15px 15px; }
.gcc-msg--sys { justify-content: center; }
.gcc-msg--sys, .gcc-msg--sys .gcc-bub { max-width: 100%; }
.gcc-msg--sys .gcc-bub { background: transparent; color: var(--gcc-muted); font-size: 12.5px; text-align: center; padding: 4px 8px; }
/* Typing cue — three dots inside the assistant bubble (an expected chat affordance). */
.gcc-dots { display: inline-flex; gap: 4px; align-items: center; height: 15px; }
.gcc-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--gcc-muted); animation: gcc-typing 1.2s infinite ease-in-out; }
.gcc-dots i:nth-child(2) { animation-delay: .18s; }
.gcc-dots i:nth-child(3) { animation-delay: .36s; }
@keyframes gcc-typing { 0%, 60%, 100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

/* ---- voice — the rosette orb ------------------------------------------ */
.gcc-voice { align-items: center; justify-content: center; text-align: center; padding: 20px 22px 8px; background: radial-gradient(120% 80% at 50% 18%, var(--gcc-graphite-2), var(--gcc-graphite) 55%, var(--gcc-graphite-deep)); color: var(--gcc-on-graphite); }
.gcc-orb-stage { flex: 1 1 auto; display: grid; place-items: center; width: 100%; }
.gcc-orb {
	--gcc-amp: 0;
	position: relative; width: 148px; height: 148px; color: var(--gcc-brand);
	display: grid; place-items: center;
	animation: gcc-breathe 4.5s ease-in-out infinite;
}
/* Halo — a specific effect that blooms to the agent's real voice (amp), not decoration. */
.gcc-orb::before {
	content: ""; position: absolute; inset: -34%; border-radius: 50%;
	background: radial-gradient(circle, color-mix(in srgb, var(--gcc-brand) 60%, transparent), transparent 68%);
	filter: blur(10px);
	transform: scale(calc(1 + var(--gcc-amp) * .4));
	opacity: calc(.28 + var(--gcc-amp) * .55);
	transition: transform .09s linear, opacity .12s linear;
}
/* Rim ring — pulses while listening. */
.gcc-orb::after {
	content: ""; position: absolute; inset: 6%; border-radius: 50%;
	border: 1.5px solid color-mix(in srgb, var(--gcc-brand) 45%, transparent);
	opacity: .5;
}
.gcc-orb .gcc-rose { position: relative; width: 78%; height: 78%; filter: drop-shadow(0 4px 14px rgba(0,0,0,.35)); transform: scale(calc(1 + var(--gcc-amp) * .06)); transition: transform .09s linear; }
.gcc-orb[data-state="connecting"] { animation: gcc-orb-spin 2.4s linear infinite; }
.gcc-orb[data-state="thinking"] .gcc-rose { animation: gcc-orb-spin 3.4s linear infinite; }
.gcc-orb[data-state="listening"]::after { animation: gcc-ring 2.2s ease-out infinite; }
.gcc-orb[data-state="speaking"]::after { opacity: 0; }
.gcc-voice__state { flex: 0 0 auto; margin-top: 8px; font-family: var(--gcc-display); font-weight: 600; font-size: 15px; letter-spacing: -.01em; color: var(--gcc-on-graphite); }
.gcc-voice__cap { flex: 0 0 auto; margin-top: 10px; min-height: 44px; max-height: 88px; overflow-y: auto; font-size: 13.5px; line-height: 1.5; color: var(--gcc-on-graphite-2); max-width: 300px; }
@keyframes gcc-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.035); } }
@keyframes gcc-orb-spin { to { transform: rotate(360deg); } }
@keyframes gcc-ring { 0% { transform: scale(1); opacity: .55; } 100% { transform: scale(1.35); opacity: 0; } }

/* ---- footer: composer + call controls --------------------------------- */
.gcc-foot { flex: 0 0 auto; }
.gcc-composer { display: none; gap: 8px; align-items: flex-end; padding: 12px 14px 14px; border-top: 1px solid var(--gcc-border); }
.gcc-panel[data-view="chat"] .gcc-composer { display: flex; }
.gcc-call { display: none; gap: 12px; padding: 14px; }
.gcc-panel[data-view="voice"] .gcc-call { display: flex; background: var(--gcc-graphite-deep); }
.gcc-mic, .gcc-send { flex: 0 0 auto; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; border: 0; cursor: pointer; transition: background .13s ease, color .13s ease, transform .12s ease; }
.gcc-mic svg, .gcc-send svg { width: 19px; height: 19px; }
.gcc-mic { background: var(--gcc-surface-2); color: var(--gcc-ink-2); }
.gcc-mic:hover { background: var(--gcc-brand-soft); color: var(--gcc-brand-strong); }
.gcc-send { background: var(--gcc-brand); color: var(--gcc-brand-ink); }
.gcc-send:hover { background: var(--gcc-brand-strong); color: #fff; transform: translateY(-1px); }
.gcc-input {
	flex: 1 1 auto; resize: none; max-height: 108px; min-height: 40px; padding: 10px 13px;
	font: inherit; font-size: 13.5px; line-height: 1.4; color: var(--gcc-ink);
	background: var(--gcc-surface-2); border: 1px solid transparent; border-radius: var(--gcc-r-md);
	transition: border-color .13s ease, background .13s ease;
}
.gcc-input::placeholder { color: var(--gcc-muted); }
.gcc-input:focus { outline: none; background: var(--gcc-surface); border-color: var(--gcc-brand-strong); box-shadow: 0 0 0 3px var(--gcc-brand-soft); }
.gcc-callbtn { flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px; font: inherit; font-weight: 600; font-size: 13.5px; border-radius: var(--gcc-r-sm); border: 0; cursor: pointer; transition: background .13s ease, transform .12s ease; }
.gcc-callbtn svg { width: 18px; height: 18px; }
.gcc-mute { background: rgba(255,255,255,.1); color: var(--gcc-on-graphite); }
.gcc-mute:hover { background: rgba(255,255,255,.16); }
.gcc-mute.is-muted { background: var(--gcc-brand); color: var(--gcc-brand-ink); }
.gcc-hang { background: #d64545; color: #fff; }
.gcc-hang:hover { background: #c23a3a; }

/* ---- form ------------------------------------------------------------- */
.gcc-form { padding: 18px 16px; gap: 10px; overflow-y: auto; }
.gcc-f__lead { margin: 0 0 4px; font-family: var(--gcc-display); font-weight: 600; font-size: 16px; letter-spacing: -.01em; color: var(--gcc-ink); }
.gcc-f__in { width: 100%; padding: 11px 13px; font: inherit; font-size: 13.5px; color: var(--gcc-ink); background: var(--gcc-surface-2); border: 1px solid var(--gcc-border); border-radius: var(--gcc-r-sm); }
.gcc-f__in::placeholder { color: var(--gcc-muted); }
.gcc-f__in:focus { outline: none; background: var(--gcc-surface); border-color: var(--gcc-brand-strong); box-shadow: 0 0 0 3px var(--gcc-brand-soft); }
.gcc-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.gcc-f__note { margin: 2px 0 0; font-size: 12.5px; min-height: 1em; color: var(--gcc-muted); }
.gcc-f__note.is-ok { color: var(--gcc-brand-strong); }
.gcc-f__note.is-err { color: #c23a3a; }
.gcc-f__send { margin-top: 2px; padding: 12px; font: inherit; font-weight: 600; font-size: 14px; color: var(--gcc-brand-ink); background: var(--gcc-brand); border: 1px solid var(--gcc-brand-strong); border-radius: var(--gcc-r-sm); cursor: pointer; transition: background .13s ease; }
.gcc-f__send:hover { background: var(--gcc-brand-strong); color: #fff; }

/* ---- mobile: bottom sheet --------------------------------------------- */
@media (max-width: 480px) {
	.gcc-scrim { background: rgba(23,26,21,.4); }
	.gcc-panel {
		right: 0; left: 0; bottom: 0; width: auto; max-width: none;
		height: 88vh; height: 88dvh; border-radius: var(--gcc-r) var(--gcc-r) 0 0;
		transform-origin: bottom center;
		animation-name: gcc-sheet-in;
	}
	.gcc-fab { right: 16px; bottom: 16px; }
	@keyframes gcc-sheet-in { from { opacity: .4; transform: translateY(100%); } to { opacity: 1; transform: none; } }
}

/* ---- dark ------------------------------------------------------------- */
/* No OS-preference override: an embedded widget matches its HOST page, not the
   operating system. The --gcc-* mapping already reads the site's design tokens
   (--surface, --ink, --nav-bg …), so on a `data-theme="dark"` page those tokens
   are dark and the whole concierge — surfaces, ink, graphite chrome, orb field —
   follows automatically. A light page keeps a light concierge, as it should. */

/* ---- reduced motion --------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.gcc-fab, .gcc-panel, .gcc-orb, .gcc-orb .gcc-rose, .gcc-orb::after, .gcc-dots i, .gcc-pill { animation: none !important; transition: none !important; }
	.gcc-orb::before { transition: none !important; }
}