/* Dukkan AI Chatbot — storefront widget styles.
   Modern, simple, elegant: flat surfaces, one accent color, rounded bubbles. */

:root {
	--dukkan-accent: #1d4f5f;
}

.dukkan-chatbot {
	--dukkan-chat-font: inherit;
	position: fixed;
	z-index: 99999;
	bottom: 20px;
	font-family: var( --dukkan-chat-font );
	font-size: 14px;
	line-height: 1.5;
}

.dukkan-chatbot--right {
	right: 20px;
}

.dukkan-chatbot--left {
	left: 20px;
}

/* Launcher — a white pill containing the gradient blue circle icon and a
   "Chat with us" label. Scoped under `.dukkan-chatbot` (two-class specificity)
   so theme button resets and global svg/fill rules can't override it. */
.dukkan-chatbot .dukkan-chatbot__launcher {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	height: 60px;
	margin: 0;
	padding: 0 22px 0 0;
	border: none;
	border-radius: 999px;
	appearance: none;
	-webkit-appearance: none;
	background-color: #fff;
	color: #1d2327;
	cursor: pointer;
	box-shadow: 0 14px 30px rgba( 0, 0, 0, 0.18 ), 0 3px 8px rgba( 0, 0, 0, 0.08 );
	transition: transform 0.18s cubic-bezier( 0.34, 1.56, 0.64, 1 ), box-shadow 0.18s ease;
}

.dukkan-chatbot .dukkan-chatbot__launcher:hover {
	transform: translateY( -3px );
	box-shadow: 0 20px 40px rgba( 0, 0, 0, 0.22 ), 0 6px 14px rgba( 0, 0, 0, 0.1 );
}

.dukkan-chatbot .dukkan-chatbot__launcher:active {
	transform: scale( 0.97 );
}

/* The gradient blue circle holding the white message glyph. */
.dukkan-chatbot .dukkan-chatbot__launcher-icon {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 60px;
	flex-shrink: 0;
	border-radius: 50%;
	background-color: #2563eb;
	background-image: linear-gradient( 135deg, #1d4ed8 0%, #2563eb 50%, #7c3aed 100% );
	color: #fff;
}

.dukkan-chatbot .dukkan-chatbot__launcher-icon svg {
	display: block;
	width: 28px;
	height: 28px;
	fill: #fff;
	color: #fff;
}

.dukkan-chatbot .dukkan-chatbot__launcher-label {
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	color: #1d2327;
	white-space: nowrap;
}

/* Online pulse dot on the circle's top-right corner. */
.dukkan-chatbot .dukkan-chatbot__launcher-icon::after {
	content: '';
	position: absolute;
	top: 2px;
	right: 2px;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: #22c55e;
	border: 2px solid #fff;
	box-shadow: 0 0 0 0 rgba( 34, 197, 94, 0.55 );
	animation: dukkan-chat-ping 2.2s infinite;
}

@keyframes dukkan-chat-ping {
	0% {
		box-shadow: 0 0 0 0 rgba( 34, 197, 94, 0.55 );
	}
	70% {
		box-shadow: 0 0 0 8px rgba( 34, 197, 94, 0 );
	}
	100% {
		box-shadow: 0 0 0 0 rgba( 34, 197, 94, 0 );
	}
}

.dukkan-chatbot .dukkan-chatbot__launcher:focus-visible,
.dukkan-chatbot__panel button:focus-visible,
.dukkan-chatbot__inputbar textarea:focus-visible {
	outline: 2px solid var( --dukkan-accent );
	outline-offset: 2px;
}

/* Panel — fixed (viewport-anchored) so it never depends on the launcher's
   box and can't overflow the screen edge on small devices. */
.dukkan-chatbot__panel {
	position: fixed;
	z-index: 99999;
	right: 20px;
	bottom: 96px;
	display: flex;
	flex-direction: column;
	width: 380px;
	max-width: calc( 100vw - 32px );
	height: 560px;
	max-height: calc( 100vh - 116px );
	background: #fff;
	border: 1px solid #e6e8eb;
	border-radius: 18px;
	box-shadow: 0 12px 40px rgba( 0, 0, 0, 0.16 );
	overflow: hidden;
	transform-origin: bottom right;
	animation: dukkan-chat-open 0.18s ease-out;
	/* Prevent the page behind the chat from rubber-banding when a user
	   scrolls to the end of the messages list on mobile. */
	overscroll-behavior: contain;
}

/* The panel is toggled with the `hidden` attribute, but the `display: flex`
   above overrides the browser's default `[hidden] { display: none }`. Reinstate
   it so the chat stays closed on page load and actually closes on demand. */
.dukkan-chatbot__panel[hidden] {
	display: none;
}

.dukkan-chatbot--left .dukkan-chatbot__panel {
	right: auto;
	left: 20px;
	transform-origin: bottom left;
}

@keyframes dukkan-chat-open {
	from {
		opacity: 0;
		transform: translateY( 8px ) scale( 0.98 );
	}
	to {
		opacity: 1;
		transform: translateY( 0 ) scale( 1 );
	}
}

.dukkan-chatbot__panel.is-closing {
	opacity: 0;
	transform: translateY( 8px ) scale( 0.98 );
	transition: opacity 0.15s ease, transform 0.15s ease;
}

/* Header — vibrant blue gradient with a curved, wavy bottom edge */
.dukkan-chatbot__header {
	position: relative;
	background-image: linear-gradient( 135deg, #1d4ed8 0%, #2563eb 45%, #7c3aed 100% );
	color: #fff;
	padding: 18px 16px 46px;
	overflow: hidden;
}

.dukkan-chatbot__header-inner {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: 12px;
}

.dukkan-chatbot__avatar {
	flex-shrink: 0;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: #fff;
	border: 3px solid rgba( 255, 255, 255, 0.9 );
	box-shadow: 0 3px 10px rgba( 0, 0, 0, 0.18 );
	overflow: hidden;
}

.dukkan-chatbot__avatar img,
.dukkan-chatbot__avatar svg {
	display: block;
	width: 100%;
	height: 100%;
}

.dukkan-chatbot__avatar img {
	object-fit: cover;
}

.dukkan-chatbot__header-text {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.dukkan-chatbot__name {
	font-weight: 700;
	font-size: 15px;
	line-height: 1.3;
	color: #fff;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.dukkan-chatbot__online {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-top: 2px;
	font-size: 12px;
	font-weight: 500;
	color: #e7fbef;
}

.dukkan-chatbot__online-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #22c55e;
	box-shadow: 0 0 0 0 rgba( 34, 197, 94, 0.6 );
	animation: dukkan-chat-ping 2.2s infinite;
}

.dukkan-chatbot__header-actions {
	display: flex;
	align-items: center;
	gap: 2px;
	margin-left: auto;
}

/* Scoped under `.dukkan-chatbot` so theme button resets can't force the
   glyph back to black on the dark header background. */
.dukkan-chatbot .dukkan-chatbot__close {
	background: none;
	border: none;
	font-size: 26px;
	line-height: 1;
	color: #fff;
	cursor: pointer;
	padding: 4px 6px;
	border-radius: 6px;
	transition: color 0.15s ease, background-color 0.15s ease;
}

.dukkan-chatbot .dukkan-chatbot__close:hover {
	color: #fff;
	background-color: rgba( 255, 255, 255, 0.14 );
}

/* Wavy bottom edge — fills with the messages background so the blue header
   appears to taper into the chat area with a smooth curve. */
.dukkan-chatbot__header-wave {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	width: 100%;
	height: 28px;
	display: block;
	fill: #fafbfc;
}

/* Messages */
.dukkan-chatbot__messages {
	flex: 1;
	overflow-y: auto;
	padding: 16px;
	background: #fafbfc;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.dukkan-chatbot__msg {
	display: flex;
	animation: dukkan-chat-rise 0.2s ease-out;
}

@keyframes dukkan-chat-rise {
	from {
		opacity: 0;
		transform: translateY( 4px );
	}
	to {
		opacity: 1;
		transform: translateY( 0 );
	}
}

.dukkan-chatbot__msg--user {
	justify-content: flex-end;
}

.dukkan-chatbot__msg--bot {
	justify-content: flex-start;
}

.dukkan-chatbot__bubble {
	max-width: 78%;
	padding: 10px 13px;
	border-radius: 16px;
	font-size: 14px;
	line-height: 1.5;
	word-wrap: break-word;
}

.dukkan-chatbot__msg--user .dukkan-chatbot__bubble {
	background: var( --dukkan-accent );
	color: #fff;
	border-bottom-right-radius: 4px;
}

.dukkan-chatbot__msg--bot .dukkan-chatbot__bubble {
	background: #eceff1;
	color: #1d2327;
	border-bottom-left-radius: 4px;
}

.dukkan-chatbot__bubble a {
	color: var( --dukkan-accent );
}

.dukkan-chatbot__msg--user .dukkan-chatbot__bubble a {
	color: #fff;
	text-decoration: underline;
}

.dukkan-chatbot__bubble strong {
	font-weight: 700;
}

.dukkan-chatbot__bubble em {
	font-style: italic;
}

.dukkan-chatbot__bubble code {
	background: rgba( 0, 0, 0, 0.06 );
	border-radius: 4px;
	padding: 1px 5px;
	font-size: 13px;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* Blinking caret while the reply streams in. */
.dukkan-chatbot__msg--streaming .dukkan-chatbot__bubble::after {
	content: '';
	display: inline-block;
	width: 6px;
	height: 14px;
	margin-left: 2px;
	vertical-align: -2px;
	background: var( --dukkan-accent );
	animation: dukkan-chat-caret 0.8s infinite steps( 1 );
}

@keyframes dukkan-chat-caret {
	0%, 100% { opacity: 1; }
	50% { opacity: 0; }
}

/* Typing indicator */
.dukkan-chatbot__typing .dukkan-chatbot__bubble {
	display: flex;
	gap: 4px;
	align-items: center;
	padding: 14px 15px;
}

.dukkan-chatbot__typing .dukkan-chatbot__bubble span {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #9aa0a6;
	animation: dukkan-chat-dot 1.2s infinite ease-in-out;
}

.dukkan-chatbot__typing .dukkan-chatbot__bubble span:nth-child( 2 ) {
	animation-delay: 0.2s;
}

.dukkan-chatbot__typing .dukkan-chatbot__bubble span:nth-child( 3 ) {
	animation-delay: 0.4s;
}

@keyframes dukkan-chat-dot {
	0%, 60%, 100% {
		transform: translateY( 0 );
		opacity: 0.4;
	}
	30% {
		transform: translateY( -4px );
		opacity: 1;
	}
}

/* Product cards */
.dukkan-chatbot__products {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.dukkan-chatbot__product {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px;
	background: #fff;
	border: 1px solid #e6e8eb;
	border-radius: 12px;
}

.dukkan-chatbot__product-img {
	width: 48px;
	height: 48px;
	border-radius: 8px;
	object-fit: cover;
	flex-shrink: 0;
}

.dukkan-chatbot__product-info {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
}

.dukkan-chatbot__product-name {
	font-weight: 600;
	color: #1d2327;
	text-decoration: none;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.dukkan-chatbot__product-name:hover {
	color: var( --dukkan-accent );
}

.dukkan-chatbot__product-price {
	font-size: 13px;
	color: #787c82;
}

.dukkan-chatbot__more {
	align-self: center;
	background: none;
	border: 1px solid var( --dukkan-accent );
	color: var( --dukkan-accent );
	border-radius: 999px;
	padding: 7px 16px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}

.dukkan-chatbot__more:hover {
	background: var( --dukkan-accent );
	color: #fff;
}

.dukkan-chatbot__more-loading {
	align-self: center;
	font-size: 12px;
	color: #787c82;
	padding: 6px 0;
}

/* Handoff card */
.dukkan-chatbot__handoff {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 12px;
	background: #fff;
	border: 1px dashed #c3c4c7;
	border-radius: 12px;
}

.dukkan-chatbot__handoff-title {
	margin: 0;
	font-weight: 600;
	color: #1d2327;
	font-size: 13px;
}

.dukkan-chatbot__handoff-email {
	padding: 9px 12px;
	border: 1px solid #c3c4c7;
	border-radius: 8px;
	font-size: 14px;
}

.dukkan-chatbot__handoff-btn {
	background: var( --dukkan-accent );
	color: #fff;
	border: none;
	border-radius: 8px;
	padding: 9px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
}

/* Input bar */
.dukkan-chatbot__inputbar {
	display: flex;
	align-items: flex-end;
	gap: 8px;
	padding: 12px;
	border-top: 1px solid #f0f1f3;
	background: #fff;
}

.dukkan-chatbot__inputbar textarea {
	flex: 1;
	resize: none;
	border: 1px solid #c3c4c7;
	border-radius: 18px;
	padding: 10px 14px;
	font-size: 14px;
	font-family: inherit;
	line-height: 1.4;
	max-height: 90px;
}

.dukkan-chatbot__send {
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	border: none;
	border-radius: 50%;
	background: var( --dukkan-accent );
	color: #fff;
	font-size: 16px;
	cursor: pointer;
	transition: opacity 0.15s ease;
}

.dukkan-chatbot__send:hover {
	opacity: 0.9;
}

/* Icon buttons (attach image + voice) inside the input bar. */
.dukkan-chatbot .dukkan-chatbot__attach,
.dukkan-chatbot .dukkan-chatbot__mic {
	flex-shrink: 0;
	width: 38px;
	height: 38px;
	border: none;
	border-radius: 50%;
	appearance: none;
	-webkit-appearance: none;
	background: #eef2f7;
	background-color: #eef2f7;
	color: #334155;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	box-shadow: none;
	transition: background 0.15s ease, color 0.15s ease;
}

.dukkan-chatbot .dukkan-chatbot__attach svg,
.dukkan-chatbot .dukkan-chatbot__mic svg {
	display: block;
	fill: #334155;
	color: #334155;
}

.dukkan-chatbot .dukkan-chatbot__attach:hover,
.dukkan-chatbot .dukkan-chatbot__mic:hover {
	background: #e0e7f1;
	background-color: #e0e7f1;
	color: var( --dukkan-accent );
}

.dukkan-chatbot .dukkan-chatbot__attach:hover svg,
.dukkan-chatbot .dukkan-chatbot__mic:hover svg {
	fill: var( --dukkan-accent );
	color: var( --dukkan-accent );
}

.dukkan-chatbot .dukkan-chatbot__mic.is-listening {
	background: #ffe3e3;
	background-color: #ffe3e3;
	color: #e02424;
}

/* Pending image preview above the input bar. */
.dukkan-chatbot__preview {
	position: relative;
	margin: 6px 14px 0;
	width: 64px;
	height: 64px;
	border-radius: 10px;
	overflow: hidden;
	border: 1px solid #e5e9f0;
}

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

.dukkan-chatbot__preview button {
	position: absolute;
	top: 2px;
	right: 2px;
	width: 20px;
	height: 20px;
	border: none;
	border-radius: 50%;
	background: rgba( 0, 0, 0, 0.6 );
	color: #fff;
	font-size: 13px;
	line-height: 1;
	cursor: pointer;
	padding: 0;
}

/* Mobile: full-screen bottom sheet anchored to the viewport, using the
   dynamic viewport height (100dvh) so it never overflows past the screen
   edge or hides the input bar behind the browser UI.

   The breakpoint is 768px (not 480px) so phones in landscape and small
   tablets also get the full-screen treatment + safe-area insets. */
@media ( max-width: 768px ) {
	.dukkan-chatbot__panel,
	.dukkan-chatbot--left .dukkan-chatbot__panel {
		right: 0;
		left: 0;
		bottom: 0;
		width: 100vw;
		max-width: 100vw;
		height: 100vh;
		height: 100dvh;
		max-height: 100vh;
		max-height: 100dvh;
		border-radius: 16px 16px 0 0;
		border-bottom: none;
		transform-origin: bottom center;
	}

	.dukkan-chatbot__inputbar {
		padding-bottom: calc( 12px + env( safe-area-inset-bottom ) );
	}
}

/* Small phones (≤360px): compact the input controls and collapse the launcher
   to an icon-only pill so it never crowds the content. */
@media ( max-width: 360px ) {
	.dukkan-chatbot .dukkan-chatbot__launcher {
		padding: 0;
		gap: 0;
		height: 56px;
	}

	.dukkan-chatbot .dukkan-chatbot__launcher-icon {
		width: 56px;
		height: 56px;
	}

	.dukkan-chatbot .dukkan-chatbot__launcher-label {
		display: none;
	}

	.dukkan-chatbot .dukkan-chatbot__attach,
	.dukkan-chatbot .dukkan-chatbot__mic {
		width: 32px;
		height: 32px;
	}

	.dukkan-chatbot__send {
		width: 36px;
		height: 36px;
	}

	.dukkan-chatbot__inputbar {
		gap: 5px;
		padding: 10px;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.dukkan-chatbot__panel,
	.dukkan-chatbot__msg,
	.dukkan-chatbot__launcher {
		animation: none !important;
		transition: none !important;
	}
}