/*
 * Unified single-window chat UI for the quick-flow bar (Claude-only since
 * Phase 2). Mounted by chat-entry.js (HandikClaudeChat) on send.
 * Inherits the bar's themed --handik-* CSS variables (copied onto the
 * root / overlay by the bar) with safe fallbacks. Isolated from booking-app.css.
 */

.handik-claude-chat {
	display: block;
	width: 100%;
}

.hcc-panel {
	display: flex;
	flex-direction: column;
	background: var( --handik-surface, #ffffff );
	color: var( --handik-text, #0f172a );
	border-radius: 1rem;
	overflow: hidden;
	max-height: 86vh;
	max-height: 86dvh;
}

.hcc-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 16px;
	border-bottom: 1px solid var( --handik-border, #e2e8f0 );
	flex: none;
}

.hcc-title {
	font-size: 15px;
	font-weight: 600;
}

.hcc-close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border: none;
	background: transparent;
	color: var( --handik-muted-text, #64748b );
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	border-radius: 1rem;
}

.hcc-close:hover {
	background: var( --handik-background, #f1f5f9 );
}

.hcc-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 10px 16px 0;
	flex: none;
}

.hcc-chip {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	background: #ecfdf5;
	color: #047857;
	font-size: 12px;
	padding: 5px 10px;
	border-radius: 1rem;
}

.hcc-thread {
	flex: 1 1 auto;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	/* Positioned so a card's offsetTop is measured against the thread (used by
	   scrollToTopOf to bring a new step to the top of the window). */
	position: relative;
	/* min-height:0 lets this flex child shrink below its content so overflow-y
	   actually engages (mouse-wheel scroll); 180px min was blocking it. */
	min-height: 0;
	/* Keep wheel/touch scroll inside the thread instead of chaining to the page
	   once it reaches an edge (complements the panel wheel handler, #10). */
	overscroll-behavior: contain;
}

.hcc-bubble {
	max-width: 85%;
	padding: 10px 14px;
	font-size: 14px;
	line-height: 1.5;
	border-radius: 1rem;
	/* Preserve the customer's line breaks (paragraphs) in the chat. */
	white-space: pre-wrap;
}

/* Customer messages sit in a light-gray bordered bubble (right-aligned),
   capped at ~half the window width (#7); a bit wider on phones. */
.hcc-bubble--user {
	align-self: flex-end;
	max-width: 50%;
	background: var( --handik-background, #f1f5f9 );
	color: var( --handik-text, #0f172a );
	border: 1px solid var( --handik-border, #e2e8f0 );
	border-bottom-right-radius: 4px;
}

@media ( max-width: 480px ) {
	.hcc-bubble--user { max-width: 80%; }
}

/* Pending-attachment strip above the composer: thumbnails the customer added
   in the window, shown until the message is sent (#12). */
.hcc-pending {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 10px 12px 0;
}

.hcc-pending .hcc-thumb {
	width: 50px;
	height: 50px;
}

/* Assistant messages are plain text — no bubble, no border, no background. */
.hcc-bubble--assistant {
	align-self: stretch;
	max-width: 100%;
	background: transparent;
	color: var( --handik-text, #0f172a );
	border: none;
	padding: 2px 0;
}

.hcc-typing {
	align-self: flex-start;
	display: flex;
	gap: 5px;
	padding: 13px 16px;
	background: var( --handik-background, #f1f5f9 );
	border: 1px solid var( --handik-border, #e2e8f0 );
	border-radius: 1rem;
}

.hcc-dot {
	width: 6px;
	height: 6px;
	border-radius: 1rem;
	background: var( --handik-muted-text, #94a3b8 );
	animation: hccb 1.2s infinite ease-in-out;
}

.hcc-dot:nth-child(2) { animation-delay: 0.18s; }
.hcc-dot:nth-child(3) { animation-delay: 0.36s; }

/* "Agent is thinking" rotating phrase (replaces the dots). The bubble reuses
   .hcc-typing; the phrase cross-fades on each rotation. */
.hcc-typing--phrase {
	/* Just the cross-fading text — no bubble background/border (#14). */
	background: transparent;
	border: none;
	padding: 4px 0;
	color: var( --handik-muted-text, #64748b );
	font-size: 14px;
	font-style: italic;
}

.hcc-typing__phrase {
	transition: opacity 240ms ease;
}

.hcc-typing__phrase.is-fading {
	opacity: 0;
}

@keyframes hccb {
	0%, 80%, 100% { opacity: 0.3; transform: translateY( 0 ); }
	40% { opacity: 1; transform: translateY( -3px ); }
}

.hcc-card {
	align-self: stretch;
	background: var( --handik-surface, #ffffff );
	border: 1px solid var( --handik-border, #e2e8f0 );
	border-radius: 1rem;
	padding: 14px;
}

.hcc-card__title {
	font-size: 13px;
	font-weight: 600;
	margin-bottom: 10px;
}

.hcc-field {
	width: 100%;
	height: 42px;
	padding: 0 12px;
	font-size: 16px;
	border: 1px solid var( --handik-border, #e2e8f0 );
	border-radius: 1rem;
	margin-bottom: 8px;
	box-sizing: border-box;
}

.hcc-footer {
	border-top: 1px solid var( --handik-border, #e2e8f0 );
	padding: 12px 16px;
	flex: none;
}

.hcc-composer {
	display: flex;
	align-items: flex-end;
	gap: 8px;
	margin-bottom: 0;
}

.hcc-composer textarea {
	flex: 1 1 auto;
	min-height: 42px;
	max-height: 140px;
	height: 42px;
	padding: 10px 14px;
	font-size: 16px;
	font-family: inherit;
	line-height: 1.4;
	border: 1px solid var( --handik-border, #e2e8f0 );
	border-radius: 1rem;
	box-sizing: border-box;
	resize: none;
	overflow-y: hidden;
}

.hcc-send {
	width: 42px;
	height: 42px;
	flex: none;
	border: none;
	border-radius: 1rem;
	background: var( --handik-footer-button-active-bg, #1a1a1c );
	color: var( --handik-footer-button-active-text, #f9f9f9 );
	font-size: 18px;
	cursor: pointer;
}

.hcc-btn {
	width: 100%;
	height: 48px;
	border: none;
	border-radius: 1rem;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
}

.hcc-btn--primary {
	background: var( --handik-footer-button-active-bg, #1a1a1c );
	color: var( --handik-footer-button-active-text, #f9f9f9 );
}

.hcc-btn--muted {
	background: var( --handik-background, #f1f5f9 );
	color: var( --handik-muted-text, #64748b );
	cursor: default;
}

.hcc-btn[disabled] { opacity: 0.6; cursor: default; }

.hcc-cta-gap { margin-top: 10px; }

/* Progress stepper (replaces the old completion chips). */
.hcc-steps {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px 10px;
	padding: 12px 16px 0;
	flex: none;
}

.hcc-step {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	color: var( --handik-muted-text, #94a3b8 );
}

.hcc-step__dot {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border-radius: 1rem;
	background: var( --handik-background, #f1f5f9 );
	color: var( --handik-muted-text, #94a3b8 );
	font-size: 11px;
	font-weight: 600;
}

.hcc-step.is-current {
	color: var( --handik-text, #0f172a );
	font-weight: 600;
}

.hcc-step.is-current .hcc-step__dot {
	background: var( --handik-accent, #283618 );
	color: #fff;
}

.hcc-step.is-done .hcc-step__dot {
	background: #047857;
	color: #fff;
}

/* OTP resend + change-number row. */
.hcc-otp-aux {
	display: flex;
	align-items: center;
	gap: 4px;
	margin-top: 10px;
	font-size: 13px;
}

.hcc-otp-sep {
	color: var( --handik-muted-text, #94a3b8 );
}

.hcc-link {
	border: none;
	background: transparent;
	padding: 0;
	font: inherit;
	color: var( --handik-accent, #283618 );
	text-decoration: underline;
	cursor: pointer;
}

.hcc-link[disabled] {
	color: #64748b;
	text-decoration: none;
	cursor: default;
}

/* Keyboard focus visibility (WCAG 2.4.7) across the interactive elements. */
.hcc-btn:focus-visible,
.hcc-field:focus-visible,
.hcc-link:focus-visible,
.hcc-send:focus-visible,
.hcc-close:focus-visible,
.hcc-slot:focus-visible,
.hcc-cal__day:focus-visible,
.hcc-cal__nav:focus-visible {
	outline: 2px solid var( --handik-accent, #283618 );
	outline-offset: 2px;
}

/* Anti-spam reassurance under the phone field. */
.hcc-otp-hint {
	margin: 12px 0 16px;
	font-size: 13px;
	line-height: 1.5;
	color: var( --handik-muted-text, #64748b );
}

/* Phone/code input + its action button share one line. */
.hcc-otp-row {
	display: flex;
	align-items: stretch;
	gap: 8px;
	margin-bottom: 8px;
}

.hcc-otp-row .hcc-field {
	flex: 1 1 auto;
	margin-bottom: 0;
}

.hcc-otp-row .hcc-btn {
	width: auto;
	flex: 0 0 auto;
	height: 42px;
	padding: 0 18px;
	white-space: nowrap;
}

/* Field labels above the address-step inputs (main-form parity). */
.hcc-label {
	display: block;
	margin-bottom: 12px;
}

.hcc-label__text {
	display: block;
	margin-bottom: 6px;
	font-size: 13px;
	font-weight: 600;
	color: var( --handik-text, #0f172a );
}

.hcc-label .hcc-field {
	margin-bottom: 0;
}

/* In-chat attach (paperclip) button + photo thumbnails. */
.hcc-attach {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	flex: none;
	border: none;
	border-radius: 1rem;
	background: transparent;
	color: var( --handik-muted-text, #64748b );
	cursor: pointer;
}

.hcc-attach:hover {
	background: var( --handik-background, #f1f5f9 );
	color: var( --handik-text, #0f172a );
}

/* Attachment thumbnails: a responsive grid of small ~100px squares (3-4 per
   row), right-aligned under the user's message (#11). */
.hcc-thumbs {
	align-self: flex-end;
	max-width: 85%;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 6px;
	margin: 4px 0;
}

.hcc-thumb {
	position: relative;
	width: 52px;
	height: 52px;
	flex: 0 0 auto;
}

.hcc-thumb__img {
	display: block;
	width: 100% !important;
	height: 100% !important;
	border-radius: 8px;
	border: 1px solid var( --handik-border, #e2e8f0 );
	object-fit: cover;
}

.hcc-thumb__file {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	padding: 6px;
	font-size: 12px;
	line-height: 1.25;
	text-align: center;
	word-break: break-word;
	overflow: hidden;
	box-sizing: border-box;
	background: var( --handik-background, #f1f5f9 );
	border: 1px solid var( --handik-border, #e2e8f0 );
	border-radius: 12px;
}

/* Delete (×) badge over the top-right of each thumbnail (#12). */
.hcc-thumb__remove {
	position: absolute;
	top: -7px;
	right: -7px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	padding: 0;
	border: none;
	border-radius: 50%;
	cursor: pointer;
	background: var( --handik-text, #0f172a );
	color: #fff;
	font-size: 15px;
	line-height: 1;
	box-shadow: 0 1px 3px rgba( 15, 23, 42, 0.35 );
}

.hcc-thumb__remove:hover {
	background: #000;
}

/* Italic, muted note (video acknowledgement, address confirmation, etc.) —
   visually distinct from a real assistant answer. */
.hcc-bubble--italic {
	font-style: italic;
	color: var( --handik-muted-text, #64748b );
}

/* "Back to chat" link on the address card. */
.hcc-back {
	display: inline-block;
	margin-bottom: 8px;
	/* Dark, not accent-colored (#18). */
	color: var( --handik-text, #0f172a );
}

/* Note shown at the top of a resumed conversation. */
.hcc-resume-note {
	align-self: center;
	font-size: 12px;
	color: var( --handik-muted-text, #64748b );
	background: var( --handik-background, #f1f5f9 );
	padding: 6px 12px;
	border-radius: 1rem;
}

/* Native month calendar (cal.com-style slot picker). */
.hcc-cal__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 12px;
}

.hcc-cal__month {
	font-size: 15px;
	font-weight: 600;
}

.hcc-cal__nav {
	width: 32px;
	height: 32px;
	border: 1px solid var( --handik-border, #e2e8f0 );
	background: var( --handik-surface, #fff );
	color: var( --handik-text, #0f172a );
	border-radius: 1rem;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
}

.hcc-cal__nav[disabled] {
	opacity: 0.35;
	cursor: default;
}

.hcc-cal__grid {
	display: grid;
	grid-template-columns: repeat( 7, 1fr );
	gap: 4px;
}

.hcc-cal__dow {
	text-align: center;
	font-size: 11px;
	color: var( --handik-muted-text, #94a3b8 );
	padding: 4px 0;
}

.hcc-cal__cell {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 38px;
	font-size: 13px;
}

.hcc-cal__cell--empty {
	color: var( --handik-muted-text, #cbd5e1 );
}

.hcc-cal__day {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 38px;
	font-size: 13px;
	font-weight: 600;
	border: 1px solid var( --handik-accent, #283618 );
	background: var( --handik-surface, #fff );
	color: var( --handik-accent, #283618 );
	border-radius: 1rem;
	cursor: pointer;
}

.hcc-cal__day:hover {
	background: var( --handik-background, #f1f5f9 );
}

.hcc-cal__day.is-selected {
	background: var( --handik-accent, #283618 );
	color: #fff;
}

.hcc-cal__times {
	margin-top: 16px;
}

.hcc-cal__times-head {
	font-size: 13px;
	font-weight: 600;
	margin-bottom: 8px;
}

.hcc-cal__times-row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.hcc-slot {
	font-size: 13px;
	padding: 8px 12px;
	border-radius: 1rem;
	border: 1px solid var( --handik-border, #e2e8f0 );
	background: var( --handik-surface, #fff );
	color: var( --handik-text, #0f172a );
	cursor: pointer;
}

.hcc-slot:hover {
	background: var( --handik-background, #f1f5f9 );
}

.hcc-error {
	color: #b91c1c;
	font-size: 13px;
	margin-top: 6px;
}

.hcc-hidden { display: none !important; }

@media ( prefers-reduced-motion: reduce ) {
	.hcc-dot { animation: none; }
	/* No cross-fade: the phrase just swaps in place (never blanks out). */
	.hcc-typing__phrase { transition: none; }
	.hcc-typing__phrase.is-fading { opacity: 1; }
}

/* Pinned step CTA footer (e.g. the address Continue), so the button stays at the
   bottom of the window while the step card scrolls (#17). */
.hcc-step-footer {
	flex: none;
	padding: 12px 16px 16px;
	border-top: 1px solid var( --handik-border, #e2e8f0 );
	background: var( --handik-surface, #fff );
}

.hcc-step-footer .hcc-btn {
	width: 100%;
}