/* ============================================================
   DIGITIZING DEPOT ASSISTANT
   Loaded via wp_enqueue_scripts in digitizing-depot-assistant.php

   BRAND TOKENS READ OFF THE LIVE THEME (2026-10-02)
   -------------------------------------------------
   Avante + Elementor, dark. Computed from the rendered page:
     link/accent   rgb(239,147,0)  -> #ef9300
     header bg     rgb(11,12,16)   -> #0b0c10
     body bg       rgb(0,0,0)
     body fg       #ffffff
     headings      Orbitron
     body          Roboto

   Note this is NOT the Liberty palette (gold #d4af37 on #111). The two
   brands look related but are not identical, and a widget that reads as
   bolted on is worse than one that reads as part of the site.

   NAMESPACE: every selector is dda-*. Avante and Elementor both use
   generic class names (.button, .icon, .active) and several collision-prone
   names, so a tight prefix is what keeps this out of their hair.

   Z-ORDER
   -------
   9997 puts the widget above Avante's sticky header, back-to-top and the
   preloader plugin's progress bar, while staying under a genuine modal
   (Elementor popups sit far higher). Raise it only if something is
   measurably covering the launcher.

   ICONS ARE INLINE SVG, NOT AN ICON FONT
   ---------------------------------------
   The theme loads FontAwesome through Elementor's bundles, which appear on
   some templates and not others. A font-based icon renders on some pages and
   on none of the others - which is exactly the bug that shipped in the first
   cut of the Liberty widget. Inline SVG has no such failure mode.

   The "Answers" scroll position is deliberately pinned to the TOP on open.
   ============================================================ */

.dda-root {
	/* CSS custom properties scoped to the widget, so we never mutate a theme
	   variable and risk restyling Elementor or Avante by accident. */
	--dda-accent: #ef9300;
	--dda-accent-soft: rgba(239, 147, 0, .14);
	--dda-accent-line: rgba(239, 147, 0, .32);
	--dda-bg: #101116;
	--dda-surface: #16171d;
	--dda-surface-hi: #1c1d24;
	--dda-text: #ffffff;
	--dda-muted: rgba(255, 255, 255, .62);
	--dda-border: rgba(255, 255, 255, .10);
	--dda-border-hi: rgba(255, 255, 255, .18);
	--dda-success: #22c55e;
	--dda-font: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--dda-display: Orbitron, "Roboto", sans-serif;
	--dda-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
	--dda-radius: 12px;
	--dda-radius-lg: 16px;
}

/* ---------- Inline SVG ---------- */
.dda-ico {
	flex-shrink: 0;
	display: block;
	overflow: visible;
}

/* ---------- Launcher ---------- */
.dda-launcher {
	position: fixed;
	right: 1.6rem;
	bottom: 1.4rem;
	z-index: 9997;
	display: none;
	align-items: center;
	gap: .55rem;
	padding: .7rem 1.15rem .7rem .9rem;
	border: 1px solid var(--dda-accent-line);
	border-radius: 100px;
	background: var(--dda-accent);
	color: #0a0a0a;
	font-family: var(--dda-font);
	font-size: .875rem;
	font-weight: 700;
	letter-spacing: .01em;
	line-height: 1.2;
	cursor: pointer;
	box-shadow: 0 12px 32px rgba(0, 0, 0, .5);
	transition: transform .2s ease, box-shadow .2s ease;
	-webkit-appearance: none;
	appearance: none;
}
.dda-launcher:hover {
	transform: translateY(-2px);
	box-shadow: 0 16px 40px rgba(0, 0, 0, .6);
}
.dda-launcher:active { transform: translateY(0); }
.dda-launcher:focus-visible {
	outline: 2px solid var(--dda-accent);
	outline-offset: 3px;
}
.dda-launcher .dda-ico { width: 16px; height: 16px; }
.dda-launcher-txt { white-space: nowrap; }

/* Fail-closed: hidden until chat.js confirms it booted. If the script is
   blocked or throws, the visitor sees the <noscript> contact link instead of
   a button that does nothing. */
.dda-ready .dda-launcher { display: inline-flex; }

/* First-visit attention pulse, once per browser. */
.dda-launcher.is-new::after {
	content: '';
	position: absolute;
	inset: -3px;
	border-radius: 100px;
	border: 2px solid var(--dda-accent);
	animation: ddaPulse 2.4s ease-out 2;
	pointer-events: none;
}
@keyframes ddaPulse {
	0%   { opacity: .6; transform: scale(1); }
	70%  { opacity: 0;  transform: scale(1.18); }
	100% { opacity: 0;  transform: scale(1.18); }
}

/* ---------- Panel ---------- */
.dda-panel {
	position: fixed;
	right: 1.6rem;
	bottom: 5.6rem;
	z-index: 9997;
	width: 372px;
	max-width: calc(100vw - 2rem);
	height: 560px;
	max-height: calc(100vh - 9rem);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--dda-bg);
	border: 1px solid var(--dda-border-hi);
	border-radius: var(--dda-radius-lg);
	box-shadow: 0 26px 64px rgba(0, 0, 0, .65);
	opacity: 0;
	visibility: hidden;
	transform: translateY(14px) scale(.98);
	transform-origin: bottom right;
	transition: opacity .22s ease, transform .22s ease, visibility .22s;
	font-family: var(--dda-font);
	/* Avante sets a global font-size on body; pin the widget's own scale so a
	   theme typography setting cannot make the thread unreadable. */
	font-size: 16px;
	line-height: 1.5;
	color: var(--dda-text);
}
.dda-panel.is-open {
	opacity: 1;
	visibility: visible;
	transform: translateY(0) scale(1);
}

/* ---------- Header ---------- */
.dda-head {
	display: flex;
	align-items: center;
	gap: .7rem;
	padding: .85rem 1rem;
	background: linear-gradient(135deg, var(--dda-accent-soft), transparent 70%), var(--dda-surface);
	border-bottom: 1px solid var(--dda-border);
	flex-shrink: 0;
}
.dda-avatar {
	position: relative;
	width: 38px;
	height: 38px;
	flex-shrink: 0;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--dda-accent);
	color: #0a0a0a;
	border: 1px solid var(--dda-accent-line);
}
.dda-avatar::after {
	content: '';
	position: absolute;
	right: -1px;
	bottom: -1px;
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: var(--dda-success);
	border: 2px solid var(--dda-surface);
}
.dda-id { min-width: 0; flex: 1; }
.dda-id strong {
	display: block;
	font-family: var(--dda-display);
	/* Orbitron is a wide face. At .82rem with .02em tracking, "DEPOT ASSISTANT"
	   overflowed the 372px panel and wrapped to two lines, which made the
	   header lopsided next to the avatar. Sized and tracked to fit one line. */
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .01em;
	color: var(--dda-text);
	line-height: 1.3;
	text-transform: uppercase;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.dda-id span {
	display: block;
	font-size: .72rem;
	color: var(--dda-muted);
	line-height: 1.35;
	/* One line. At 372px wide this text shares a row with the avatar, the name
	   and two buttons; it wrapped to two lines when it was longer, which made
	   the header lopsided. */
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.dda-back, .dda-x {
	flex-shrink: 0;
	width: 30px;
	height: 30px;
	border-radius: 8px;
	display: none;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 1px solid var(--dda-border);
	color: var(--dda-muted);
	cursor: pointer;
	transition: background .15s, color .15s;
}
.dda-back.is-on { display: inline-flex; }
.dda-x { display: inline-flex; }
.dda-back:hover, .dda-x:hover { background: var(--dda-surface-hi); color: var(--dda-text); }
.dda-back:focus-visible, .dda-x:focus-visible { outline: 2px solid var(--dda-accent); outline-offset: 2px; }

/* ---------- Breadcrumb ---------- */
.dda-crumb {
	flex-shrink: 0;
	display: none;
	align-items: center;
	gap: .35rem;
	padding: .45rem 1rem;
	font-size: .72rem;
	color: var(--dda-muted);
	background: rgba(255, 255, 255, .02);
	border-bottom: 1px solid var(--dda-border);
}
.dda-crumb.is-on { display: flex; }
.dda-crumb .dda-ico { width: 10px; height: 10px; opacity: .5; }

/* ---------- Thread ---------- */
.dda-thread {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 1rem .9rem 1.1rem;
	display: flex;
	flex-direction: column;
	gap: .7rem;
	scrollbar-width: thin;
	scrollbar-color: rgba(255, 255, 255, .16) transparent;
}
.dda-thread::-webkit-scrollbar { width: 7px; }
.dda-thread::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .16); border-radius: 10px; }
.dda-thread::-webkit-scrollbar-track { background: transparent; }

/* ---------- Messages ---------- */
.dda-msg {
	max-width: 86%;
	padding: .6rem .8rem;
	font-size: .855rem;
	line-height: 1.58;
	border-radius: 14px;
	word-wrap: break-word;
	overflow-wrap: break-word;
}
.dda-msg--bot {
	align-self: flex-start;
	background: var(--dda-surface);
	border: 1px solid var(--dda-border);
	border-bottom-left-radius: 5px;
	color: var(--dda-text);
	opacity: 0;
	transform: translateY(6px);
	animation: ddaIn .2s ease forwards;
}
.dda-msg--user {
	align-self: flex-end;
	background: var(--dda-accent-soft);
	border: 1px solid var(--dda-accent-line);
	color: var(--dda-text);
	border-bottom-right-radius: 5px;
	font-weight: 600;
}
@keyframes ddaIn { to { opacity: 1; transform: translateY(0); } }

.dda-msg p { margin: 0 0 .55rem; }
.dda-msg p:last-child { margin-bottom: 0; }
.dda-msg b { color: var(--dda-accent); font-weight: 700; }
.dda-msg em { font-style: italic; color: var(--dda-muted); }
.dda-note {
	margin: .7rem 0 0;
	padding: .55rem .7rem;
	background: rgba(255, 255, 255, .04);
	border-left: 2px solid var(--dda-accent);
	border-radius: 0 6px 6px 0;
	font-size: .8rem;
	color: var(--dda-muted);
	line-height: 1.5;
}
.dda-mono {
	font-family: var(--dda-mono);
	font-size: .78rem;
	background: rgba(255, 255, 255, .08);
	padding: .05rem .3rem;
	border-radius: 4px;
}

/* ---------- Typing ---------- */
.dda-typing {
	align-self: flex-start;
	display: none;
	align-items: center;
	gap: .45rem;
	padding: .6rem .85rem;
	background: var(--dda-surface);
	border: 1px solid var(--dda-border);
	border-radius: 14px;
	border-bottom-left-radius: 5px;
}
.dda-typing.is-on { display: flex; }
.dda-typing i {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--dda-muted);
	animation: ddaBlink 1.25s ease-in-out infinite;
}
.dda-typing i:nth-child(2) { animation-delay: .18s; }
.dda-typing i:nth-child(3) { animation-delay: .36s; }
@keyframes ddaBlink {
	0%, 60%, 100% { opacity: .3; transform: translateY(0); }
	30%           { opacity: 1;  transform: translateY(-3px); }
}

/* Caret sits inline at the character currently being written, so it tracks the
   reveal across every element boundary in the answer. */
.dda-caret {
	display: inline-block;
	width: 2px;
	height: 1.05em;
	margin: 0 0 -.14em 1px;
	vertical-align: text-bottom;
	background: var(--dda-accent);
	border-radius: 1px;
	animation: ddaCaret 1s steps(1, end) infinite;
}
@keyframes ddaCaret {
	0%, 50%      { opacity: 1; }
	50.01%, 100% { opacity: 0; }
}

/* ---------- Category tiles ---------- */
.dda-cats {
	align-self: stretch;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: .45rem;
	margin-top: .2rem;
}
.dda-cat {
	display: flex;
	align-items: center;
	gap: .55rem;
	padding: .6rem .65rem;
	background: var(--dda-surface);
	border: 1px solid var(--dda-border);
	border-radius: 10px;
	color: var(--dda-text);
	font-family: inherit;
	font-size: .8rem;
	font-weight: 600;
	line-height: 1.3;
	text-align: left;
	cursor: pointer;
	transition: background .15s, border-color .15s, transform .12s;
}
.dda-cat:hover {
	background: var(--dda-surface-hi);
	border-color: var(--dda-accent-line);
	transform: translateY(-1px);
}
.dda-cat:focus-visible { outline: 2px solid var(--dda-accent); outline-offset: 2px; }
.dda-cat-ico {
	width: 26px;
	height: 26px;
	padding: 5px;
	border-radius: 7px;
	background: var(--dda-accent-soft);
	color: var(--dda-accent);
}
.dda-cat:hover .dda-cat-ico { background: rgba(239, 147, 0, .24); }
.dda-cat span { min-width: 0; }

/* ---------- Chips ---------- */
.dda-chips {
	align-self: stretch;
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
	margin-top: .15rem;
}
.dda-chip {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	padding: .42rem .7rem;
	background: var(--dda-surface);
	border: 1px solid var(--dda-border-hi);
	border-radius: 100px;
	color: var(--dda-text);
	font-family: inherit;
	font-size: .78rem;
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
	cursor: pointer;
	transition: background .15s, border-color .15s, color .15s;
}
.dda-chip:hover {
	background: var(--dda-accent);
	border-color: transparent;
	color: #0a0a0a;
}
.dda-chip:focus-visible { outline: 2px solid var(--dda-accent); outline-offset: 2px; }
.dda-chip-ico { width: 11px; height: 11px; opacity: .75; }
.dda-chip--exit {
	background: transparent;
	border-color: var(--dda-accent-line);
	color: var(--dda-accent);
}
.dda-chip--exit:hover { background: var(--dda-accent); color: #0a0a0a; }

/* ---------- Primary CTA inside an answer ----------
   Scoped as .dda-msg .dda-btn on purpose. The generic `.dda-msg a` rule is
   specificity (0,1,1); a bare `.dda-btn` is only (0,1,0) and loses, which put
   accent-coloured text on an accent-coloured button - unreadable. */
.dda-cta { margin: .75rem 0 .1rem; }
.dda-msg .dda-btn {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	padding: .55rem .9rem;
	background: var(--dda-accent);
	color: #0a0a0a !important;
	font-size: .82rem;
	font-weight: 700;
	line-height: 1.3;
	text-decoration: none !important;
	border-radius: 9px;
	transition: transform .15s, box-shadow .15s;
}
.dda-msg .dda-btn:hover {
	color: #0a0a0a !important;
	transform: translateY(-1px);
	box-shadow: 0 6px 18px rgba(239, 147, 0, .3);
}
.dda-msg .dda-btn:focus-visible { color: #0a0a0a !important; outline: 2px solid var(--dda-accent); outline-offset: 2px; }
.dda-msg .dda-btn .dda-ico { width: 14px; height: 14px; color: inherit; }

/* ---------- Price table inside an answer ---------- */
.dda-price {
	margin: .65rem 0 .2rem;
	border: 1px solid var(--dda-border);
	border-radius: 10px;
	overflow: hidden;
}
.dda-price-h {
	padding: .45rem .65rem;
	background: var(--dda-accent-soft);
	border-bottom: 1px solid var(--dda-border);
	font-size: .74rem;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--dda-accent);
}
.dda-price-r {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: .8rem;
	padding: .35rem .65rem;
	font-size: .8rem;
	color: var(--dda-muted);
}
.dda-price-r + .dda-price-r { border-top: 1px solid rgba(255, 255, 255, .04); }
/* Ties with .dda-msg b, but appears later in this file so it wins - the rate
   must read as the value, not as an accent highlight. */
.dda-price-r b {
	color: var(--dda-text);
	font-family: var(--dda-mono);
	font-size: .8rem;
	font-weight: 600;
	white-space: nowrap;
}

/* ---------- Footer: the pinned human exit ---------- */
.dda-foot {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .6rem;
	padding: .6rem .9rem;
	background: var(--dda-surface);
	border-top: 1px solid var(--dda-border);
	font-size: .74rem;
}
.dda-foot-links { display: flex; align-items: center; gap: .9rem; }
.dda-foot-links a {
	display: inline-flex;
	align-items: center;
	gap: .3rem;
	color: var(--dda-muted);
	text-decoration: none;
	font-weight: 600;
	transition: color .15s;
}
.dda-foot-links a:hover { color: var(--dda-accent); }
.dda-foot-links a:focus-visible { outline: 2px solid var(--dda-accent); outline-offset: 2px; }
.dda-foot-links .dda-ico { width: 13px; height: 13px; }
.dda-foot-note { color: var(--dda-muted); font-size: .68rem; white-space: nowrap; opacity: .8; }

/* ---------- No-JS fallback ---------- */
.dda-nojs { position: fixed; right: 1.6rem; bottom: 1.4rem; z-index: 9997; }
.dda-nojs a {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .7rem 1.05rem;
	background: var(--dda-accent);
	color: #0a0a0a;
	font-size: .86rem;
	font-weight: 700;
	text-decoration: none;
	border-radius: 100px;
	box-shadow: 0 12px 32px rgba(0, 0, 0, .5);
}

/* ---------- Body scroll lock while the panel is open ---------- */
.dda-locked { overflow: hidden !important; }

/* ============================================================
   MOBILE - full-screen sheet
   ============================================================ */
@media (max-width: 768px) {
	.dda-launcher {
		right: 1rem;
		bottom: 1rem;
		width: 56px;
		height: 56px;
		padding: 0;
		justify-content: center;
		border-radius: 50%;
	}
	.dda-launcher .dda-launcher-txt { display: none; }
	.dda-launcher .dda-ico { width: 22px; height: 22px; }

	.dda-panel {
		right: 0;
		left: 0;
		bottom: 0;
		top: 0;
		width: 100%;
		max-width: none;
		height: 100%;
		max-height: none;
		border-radius: 0;
		border: 0;
		transform: translateY(100%);
		transform-origin: bottom center;
	}
	.dda-panel.is-open { transform: translateY(0); }

	.dda-cats { grid-template-columns: 1fr; }
	.dda-msg { max-width: 90%; }
	.dda-foot-note { display: none; }
	.dda-foot { justify-content: center; }
	.dda-nojs { right: 1rem; bottom: 1rem; }
}

/* Short viewports: cap the panel so the thread never collapses to nothing. */
@media (min-width: 769px) and (max-height: 620px) {
	.dda-panel { height: 470px; }
}

/* ============================================================
   REDUCED MOTION
   The thread still works and the content is identical - only the theatre is
   removed: no pulse, no bubble rise, no blinking dots, no typewriter.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
	.dda-launcher,
	.dda-launcher:hover,
	.dda-panel,
	.dda-cat,
	.dda-msg .dda-btn { transition: none !important; }
	.dda-launcher:hover,
	.dda-cat:hover,
	.dda-msg .dda-btn:hover { transform: none; }
	.dda-launcher.is-new::after { animation: none; display: none; }
	.dda-msg--bot { opacity: 1; transform: none; animation: none; }
	.dda-typing i { animation: none; opacity: .7; }
	.dda-caret { display: none; }
}

/* ============================================================
   HIGH CONTRAST / COARSE POINTERS
   ============================================================ */
@media (prefers-contrast: more) {
	.dda-panel { border-color: var(--dda-accent); }
	.dda-msg--bot,
	.dda-cat,
	.dda-chip { border-color: rgba(255, 255, 255, .45); }
}

@media (pointer: coarse) {
	.dda-back, .dda-x { width: 40px; height: 40px; }
	.dda-chip { padding: .6rem .85rem; }
}