/* ============================================================
   Chat Brief — floating widget + chat UI
   ============================================================ */

/* ── Floating widget container ─────────────────────────────── */

.chat-widget {
	position: fixed;
	bottom: 1.5rem;
	right: 1.5rem;
	z-index: 9999;
	font-family: inherit;
}

/* ── FAB button ────────────────────────────────────────────── */

.chat-widget__fab {
	width: 3.5rem;
	height: 3.5rem;
	border-radius: 50%;
	border: none;
	background: var(--gold);
	color: #000;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 4px 16px rgba(0,0,0,.25);
	transition: transform .2s, box-shadow .2s;
	position: relative;
}

.chat-widget__fab:hover {
	transform: scale(1.08);
	box-shadow: 0 6px 24px rgba(0,0,0,.3);
}

.chat-widget__fab-icon--close {
	display: none;
}

.chat-widget.is-open .chat-widget__fab-icon--chat {
	display: none;
}

.chat-widget.is-open .chat-widget__fab-icon--close {
	display: block;
}

/* ── Panel ─────────────────────────────────────────────────── */

.chat-widget__panel {
	position: absolute;
	bottom: calc(100% + .75rem);
	right: 0;
	width: 22rem;
	max-height: 32rem;
	background: #0f172a;
	border: 1px solid rgba(255,255,255,.1);
	border-radius: 12px;
	box-shadow: 0 8px 32px rgba(0,0,0,.4);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	opacity: 0;
	transform: translateY(1rem) scale(.95);
	pointer-events: none;
	transition: opacity .25s, transform .25s;
}

.chat-widget.is-open .chat-widget__panel {
	opacity: 1;
	transform: translateY(0) scale(1);
	pointer-events: auto;
}

/* ── Panel header ──────────────────────────────────────────── */

.chat-widget__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: .875rem 1rem;
	border-bottom: 1px solid rgba(255,255,255,.1);
	background: rgba(255,255,255,.03);
}

.chat-widget__header-info {
	display: flex;
	align-items: center;
	gap: .625rem;
}

.chat-widget__header-info .chat-avatar {
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: .8rem;
	flex-shrink: 0;
	line-height: 1;
}

.chat-widget__title {
	margin: 0;
	font-size: .875rem;
	font-weight: 600;
	color: var(--text);
	line-height: 1.3;
}

.chat-widget__subtitle {
	margin: 0;
	font-size: .75rem;
	color: rgba(255,255,255,.45);
	line-height: 1.3;
}

.chat-widget__close {
	background: none;
	border: none;
	color: rgba(255,255,255,.4);
	cursor: pointer;
	padding: .25rem;
	transition: color .15s;
	display: flex;
}

.chat-widget__close:hover {
	color: rgba(255,255,255,.8);
}

/* ── Panel body ────────────────────────────────────────────── */

.chat-widget__body {
	flex: 1;
	display: flex;
	flex-direction: column;
	padding: 0 1rem 1rem;
	min-height: 0;
}

/* ── Messages area ──────────────────────────────────────────── */

.chat-messages {
	display: flex;
	flex-direction: column;
	gap: .75rem;
	min-height: 6rem;
	max-height: 20rem;
	overflow-y: auto;
	padding: .75rem 0 .5rem;
	-webkit-overflow-scrolling: touch;
	scroll-behavior: smooth;
}

/* ── Message bubbles ────────────────────────────────────────── */

.chat-msg {
	display: flex;
	gap: .5rem;
	max-width: 88%;
	animation: chatBubbleIn .3s ease-out;
}

.chat-msg--bot {
	align-self: flex-start;
}

.chat-msg--user {
	align-self: flex-end;
	flex-direction: row-reverse;
}

/* Avatars */
.chat-avatar {
	width: 1.75rem;
	height: 1.75rem;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: .7rem;
	flex-shrink: 0;
	line-height: 1;
}

.chat-msg--bot .chat-avatar {
	background: var(--gold);
	color: #000;
}

.chat-msg--user .chat-avatar {
	background: rgba(255,255,255,.2);
	color: var(--text);
}

/* Bubble */
.chat-bubble {
	padding: .625rem .875rem;
	border-radius: 12px;
	font-size: .8125rem;
	line-height: 1.5;
	word-break: break-word;
}

.chat-msg--bot .chat-bubble {
	background: rgba(255,255,255,.08);
	color: var(--text);
	border: 1px solid rgba(255,255,255,.12);
	border-top-left-radius: .25rem;
}

.chat-msg--user .chat-bubble {
	background: var(--gold);
	color: #000;
	border-top-right-radius: .25rem;
}

/* ── Typing indicator ───────────────────────────────────────── */

.chat-typing {
	display: flex;
	gap: .5rem;
	align-self: flex-start;
	max-width: 88%;
	animation: chatBubbleIn .3s ease-out;
}

.chat-typing .chat-bubble {
	background: rgba(255,255,255,.08);
	border: 1px solid rgba(255,255,255,.12);
	border-top-left-radius: .25rem;
	padding: .625rem 1rem;
	display: flex;
	gap: .3rem;
	align-items: center;
}

.typing-dot {
	width: .35rem;
	height: .35rem;
	border-radius: 50%;
	background: rgba(255,255,255,.5);
	animation: typingBounce 1.2s ease-in-out infinite;
}

.typing-dot:nth-child(2) { animation-delay: .15s; }
.typing-dot:nth-child(3) { animation-delay: .3s; }

@keyframes typingBounce {
	0%, 60%, 100% { transform: translateY(0); opacity: .4; }
	30%           { transform: translateY(-.3rem); opacity: 1; }
}

/* ── Quick-reply buttons ────────────────────────────────────── */

.chat-quick-replies {
	display: flex;
	flex-wrap: wrap;
	gap: .375rem;
	align-self: flex-end;
	max-width: 88%;
	animation: chatBubbleIn .3s ease-out;
	padding-right: 2.25rem;
}

.chat-quick-btn {
	padding: .375rem .75rem;
	border-radius: 100px;
	border: 1px solid rgba(255,255,255,.3);
	background: transparent;
	color: var(--text);
	font-size: .8125rem;
	font-weight: 500;
	cursor: pointer;
	transition: background .15s, border-color .15s;
	font-family: inherit;
	line-height: 1.4;
}

.chat-quick-btn:hover {
	background: rgba(255,255,255,.12);
	border-color: rgba(255,255,255,.5);
}

/* ── Input area ─────────────────────────────────────────────── */

.chat-input-area {
	padding-top: .625rem;
	border-top: 1px solid rgba(255,255,255,.1);
	margin-top: .375rem;
}

.chat-input-wrap {
	display: flex;
	gap: .5rem;
	align-items: center;
	position: relative;
}

.chat-input {
	flex: 1;
	padding: .5rem .75rem;
	border: 1px solid rgba(255,255,255,.2);
	border-radius: 12px;
	background: rgba(255,255,255,.08);
	color: var(--text);
	font-size: .8125rem;
	font-family: inherit;
	outline: none;
	transition: border-color .15s;
}

.chat-input:focus {
	border-color: var(--gold);
}

.chat-input::placeholder {
	color: rgba(255,255,255,.4);
}

.chat-send {
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	border: none;
	background: var(--gold);
	color: #000;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	flex-shrink: 0;
	transition: opacity .15s;
}

.chat-send:disabled {
	opacity: .4;
	cursor: default;
}

/* Validation hint */
.chat-validation-hint {
	position: absolute;
	bottom: 100%;
	left: 0;
	margin-bottom: .25rem;
	font-size: .75rem;
	color: #f87171;
	animation: chatBubbleIn .2s ease-out;
}

/* Hide input area when not needed */
.chat-input-area.is-hidden {
	display: none;
}

/* ── Summary card ───────────────────────────────────────────── */

.chat-summary {
	align-self: stretch;
	animation: chatBubbleIn .3s ease-out;
	margin-top: .375rem;
}

.chat-summary-card {
	background: rgba(255,255,255,.05);
	border: 1px solid rgba(255,255,255,.1);
	border-radius: 12px;
	padding: 1rem;
	display: flex;
	flex-direction: column;
	gap: .75rem;
}

.chat-summary__title {
	font-size: .9375rem;
	font-weight: 700;
	color: var(--text);
	margin: 0;
	padding-bottom: .5rem;
	border-bottom: 1px solid rgba(255,255,255,.08);
}

.chat-summary__rows {
	display: flex;
	flex-direction: column;
	gap: .375rem;
}

.chat-summary__row {
	display: flex;
	gap: .5rem;
	font-size: .8125rem;
	line-height: 1.5;
}

.chat-summary__label {
	color: rgba(255,255,255,.45);
	flex-shrink: 0;
	min-width: 4.5rem;
}

.chat-summary__value {
	color: rgba(255,255,255,.9);
	font-weight: 500;
}

.chat-summary__actions {
	display: flex;
	align-items: center;
	gap: .75rem;
	padding-top: .5rem;
	border-top: 1px solid rgba(255,255,255,.08);
}

.chat-summary__restart {
	background: none;
	border: none;
	color: rgba(255,255,255,.4);
	font-size: .75rem;
	font-family: inherit;
	cursor: pointer;
	padding: 0;
	transition: color .15s;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.chat-summary__restart:hover {
	color: rgba(255,255,255,.7);
}

/* ── Animations ─────────────────────────────────────────────── */

@keyframes chatBubbleIn {
	from {
		opacity: 0;
		transform: translateY(.5rem);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* ── Responsive ─────────────────────────────────────────────── */

@media (max-width: 767px) {
	.chat-widget {
		bottom: 5rem;
		right: 1rem;
	}
}

@media (max-width: 600px) {
	.chat-widget__panel {
		position: fixed;
		bottom: 0;
		right: 0;
		left: 0;
		width: 100%;
		max-height: 85dvh;
		border-radius: 12px 12px 0 0;
		transform: translateY(100%);
	}

	.chat-widget.is-open .chat-widget__panel {
		transform: translateY(0);
	}

	.chat-widget.is-open .chat-widget__fab {
		display: none;
	}

	.chat-messages {
		max-height: 50vh;
	}
}

/* ── Inline mode (front page) ──────────────────────────────── */

.chat-inline {
	background: rgba(255,255,255,.03);
	border: 1px solid rgba(255,255,255,.08);
	border-radius: 12px;
	padding: 1.5rem;
}

.chat-inline .chat-messages {
	max-height: 28rem;
	min-height: 10rem;
}

.chat-inline .chat-msg {
	max-width: 80%;
}

.chat-inline .chat-avatar {
	width: 2rem;
	height: 2rem;
	font-size: .8rem;
}

.chat-inline .chat-bubble {
	font-size: .9375rem;
	padding: .75rem 1rem;
}

.chat-inline .chat-quick-replies {
	max-width: 80%;
	padding-right: 2.625rem;
}

.chat-inline .chat-quick-btn {
	font-size: .875rem;
	padding: .5rem 1rem;
}

.chat-inline .chat-input {
	font-size: .9375rem;
	padding: .625rem 1rem;
}

.chat-inline .chat-send {
	width: 2.5rem;
	height: 2.5rem;
}

.chat-inline .chat-summary__row {
	font-size: .875rem;
}

.chat-inline .chat-summary__label {
	min-width: 5.5rem;
}

.chat-inline .chat-summary__title {
	font-size: 1.0625rem;
}

.chat-inline .chat-summary-card {
	padding: 1.5rem;
}

/* ── Light theme overrides ──────────────────────────────────── */

[data-theme="light"] .chat-widget__panel {
	background: #ffffff;
	border-color: rgba(0,0,0,.12);
	box-shadow: 0 8px 32px rgba(0,0,0,.15);
}

[data-theme="light"] .chat-widget__header {
	border-bottom-color: rgba(0,0,0,.1);
	background: rgba(0,0,0,.02);
}

[data-theme="light"] .chat-widget__subtitle {
	color: rgba(0,0,0,.45);
}

[data-theme="light"] .chat-widget__close {
	color: rgba(0,0,0,.35);
}

[data-theme="light"] .chat-widget__close:hover {
	color: rgba(0,0,0,.7);
}

[data-theme="light"] .chat-msg--bot .chat-bubble {
	background: rgba(0,0,0,.05);
	border-color: rgba(0,0,0,.1);
	color: var(--text);
}

[data-theme="light"] .chat-msg--user .chat-avatar {
	background: rgba(0,0,0,.1);
}

[data-theme="light"] .chat-typing .chat-bubble {
	background: rgba(0,0,0,.05);
	border-color: rgba(0,0,0,.1);
}

[data-theme="light"] .typing-dot {
	background: rgba(0,0,0,.4);
}

[data-theme="light"] .chat-quick-btn {
	border-color: rgba(0,0,0,.2);
	color: var(--text);
}

[data-theme="light"] .chat-quick-btn:hover {
	background: rgba(0,0,0,.07);
	border-color: rgba(0,0,0,.35);
}

[data-theme="light"] .chat-input-area {
	border-top-color: rgba(0,0,0,.1);
}

[data-theme="light"] .chat-input {
	background: rgba(0,0,0,.04);
	border-color: rgba(0,0,0,.15);
	color: var(--text);
}

[data-theme="light"] .chat-input::placeholder {
	color: rgba(0,0,0,.35);
}

[data-theme="light"] .chat-summary-card {
	background: rgba(0,0,0,.03);
	border-color: rgba(0,0,0,.1);
}

[data-theme="light"] .chat-summary__title {
	border-bottom-color: rgba(0,0,0,.08);
}

[data-theme="light"] .chat-summary__label {
	color: rgba(0,0,0,.45);
}

[data-theme="light"] .chat-summary__value {
	color: rgba(0,0,0,.85);
}

[data-theme="light"] .chat-summary__actions {
	border-top-color: rgba(0,0,0,.08);
}

[data-theme="light"] .chat-summary__restart {
	color: rgba(0,0,0,.4);
}

[data-theme="light"] .chat-summary__restart:hover {
	color: rgba(0,0,0,.65);
}

[data-theme="light"] .chat-inline {
	background: rgba(0,0,0,.03);
	border-color: rgba(0,0,0,.08);
}