/**
 * Chat widget.
 *
 * Its own stylesheet rather than the theme's, so the widget still looks right if the theme
 * is ever swapped. Colours fall back to the brand navy when the theme's variables are not
 * there to read.
 */

/*
 * The browser hides [hidden] with display:none, but that is a bare attribute selector and
 * loses to any class that sets display — so .ceta-chat__panel { display: flex } left the
 * panel permanently open and the close button did nothing. Anything inside the widget that
 * is hidden must actually disappear, whatever display its own rule asks for.
 */
.ceta-chat [hidden] { display: none; }

.ceta-chat {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 9999;
	font-family: inherit;
}

/* Bubble ------------------------------------------------------------------ */

.ceta-chat__bubble {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 13px 20px;
	background: var(--ceta-navy, #042758);
	border: 0;
	border-radius: 999px;
	box-shadow: 0 6px 20px rgba(4, 39, 88, 0.28);
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	position: relative;
	transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.ceta-chat__bubble:hover {
	transform: translateY(-1px);
	box-shadow: 0 10px 26px rgba(4, 39, 88, 0.34);
}

.ceta-chat__bubble-icon { display: inline-flex; }

.ceta-chat__dot {
	position: absolute;
	top: 7px;
	right: 12px;
	width: 11px;
	height: 11px;
	background: #9c0835;
	border: 2px solid #fff;
	border-radius: 50%;
}

/* Panel ------------------------------------------------------------------- */

.ceta-chat__panel {
	position: absolute;
	right: 0;
	bottom: 64px;
	width: min(370px, calc(100vw - 32px));
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 18px 48px rgba(4, 39, 88, 0.24);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	height: min(540px, calc(100vh - 130px));
}

.ceta-chat__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	padding: 16px 18px 14px;
	border-bottom: 1px solid #eef0f2;
	background: #fff;
}

.ceta-chat__heading { display: flex; flex-direction: column; gap: 3px; min-width: 0; }

.ceta-chat__title {
	font-size: 17px;
	font-weight: 700;
	color: #1d2327;
	line-height: 1.25;
}

.ceta-chat__status {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12.5px;
	color: #646970;
}

.ceta-chat__live {
	width: 8px;
	height: 8px;
	background: #17843d;
	border-radius: 50%;
	flex: 0 0 auto;
}

.ceta-chat__close {
	background: none;
	border: 0;
	color: #646970;
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
	padding: 0 2px;
	flex: 0 0 auto;
}

.ceta-chat__close:hover { color: #1d2327; }

/* Log --------------------------------------------------------------------- */

.ceta-chat__log {
	flex: 1;
	overflow-y: auto;
	padding: 16px 18px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-height: 0;
	background: #f3f4f6;
}

.ceta-chat__msg { display: flex; flex-direction: column; max-width: 84%; }
.ceta-chat__msg.is-visitor { align-self: flex-end; align-items: flex-end; }
.ceta-chat__msg.is-staff { align-self: flex-start; align-items: flex-start; }

.ceta-chat__bubbletext {
	padding: 9px 13px;
	border-radius: 14px;
	font-size: 14px;
	line-height: 1.45;
	white-space: pre-wrap;
	word-break: break-word;
}

.ceta-chat__msg.is-visitor .ceta-chat__bubbletext {
	background: var(--ceta-navy, #042758);
	color: #fff;
	border-bottom-right-radius: 4px;
}

.ceta-chat__msg.is-staff .ceta-chat__bubbletext {
	background: #fff;
	color: #2c2c2a;
	border: 1px solid #e3e5e8;
	border-bottom-left-radius: 4px;
}

.ceta-chat__time { margin-top: 3px; font-size: 11px; color: #7a7f87; }

/* Asking who they are ------------------------------------------------------ */

.ceta-chat__identify {
	padding: 14px 18px;
	border-top: 1px solid #eef0f2;
	background: #fff8e5;
}

.ceta-chat__ask { margin: 0 0 9px; font-size: 13px; color: #5b4a1a; }
.ceta-chat__identify-row { display: flex; gap: 8px; }

.ceta-chat__identify input {
	flex: 1;
	min-width: 0;
	padding: 9px 11px;
	border: 1px solid #e0d5b0;
	border-radius: 8px;
	font: inherit;
	font-size: 13.5px;
	box-sizing: border-box;
}

.ceta-chat__save {
	width: 100%;
	margin-top: 8px;
	padding: 9px 16px;
	background: var(--ceta-navy, #042758);
	border: 0;
	border-radius: 8px;
	color: #fff;
	font-size: 13.5px;
	font-weight: 600;
	cursor: pointer;
}

.ceta-chat__save:disabled { opacity: 0.6; cursor: default; }

/* Composer ---------------------------------------------------------------- */

.ceta-chat__reply {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px 14px;
	border-top: 1px solid #eef0f2;
	background: #fff;
}

.ceta-chat__reply textarea {
	flex: 1;
	min-width: 0;
	max-height: 96px;
	padding: 10px 12px;
	border: 1px solid #dfe2e6;
	border-radius: 20px;
	font: inherit;
	font-size: 14px;
	line-height: 1.4;
	resize: none;
	box-sizing: border-box;
}

.ceta-chat__reply textarea:focus {
	outline: 2px solid var(--ceta-navy, #042758);
	outline-offset: 1px;
	border-color: transparent;
}

.ceta-chat__go {
	flex: 0 0 auto;
	display: inline-grid;
	place-items: center;
	width: 40px;
	height: 40px;
	background: var(--ceta-accent, #9c0835);
	border: 0;
	border-radius: 50%;
	color: #fff;
	cursor: pointer;
}

.ceta-chat__go:hover { filter: brightness(1.08); }

@media (max-width: 600px) {
	.ceta-chat { right: 14px; bottom: 14px; }
	.ceta-chat__bubble-label { display: none; }
	.ceta-chat__bubble { padding: 15px; }
	.ceta-chat__panel { height: min(500px, calc(100vh - 110px)); }
}

/* The site has its own sticky call-to-action on phones; keep clear of it. */
@media (max-width: 600px) {
	body.single-product .ceta-chat { bottom: 76px; }
}