/*
 * Chat widget.
 *
 * Every value here is a token. The smoke suite fails the build on a hex code,
 * an rgb(), a font-family literal, or a bare px/rem in this directory, which is
 * what keeps the appearance screen meaningful: a merchant changing the accent
 * changes the widget, because there is nowhere else for a colour to hide.
 *
 * Scoped to .ca-scope throughout, so nothing here can reach a theme's markup.
 *
 * Positioning uses logical properties - inset-inline-start and -end rather than
 * left and right - so the widget flips correctly in a right-to-left locale with
 * no second stylesheet. An -rtl.css would be a second file to keep in step with
 * this one, and the usual outcome of that arrangement is drift.
 */

.ca-scope {
	font-family: var(--ca-font-sans);
	font-size: var(--ca-text-base);
	line-height: var(--ca-line-base);
	color: var(--ca-color-text);
	box-sizing: border-box;
}

.ca-scope *,
.ca-scope *::before,
.ca-scope *::after {
	box-sizing: inherit;
}

/* Launcher ---------------------------------------------------------------- */

.ca-launcher {
	position: fixed;
	bottom: var(--ca-panel-inset);
	z-index: var(--ca-layer-launcher);
	display: flex;
	align-items: center;
	justify-content: center;
	/* Never smaller than a comfortable touch target, whatever the token says. */
	min-width: var(--ca-target-min);
	min-height: var(--ca-target-min);
	width: var(--ca-launcher-size);
	height: var(--ca-launcher-size);
	padding: 0;
	border: 0;
	border-radius: var(--ca-radius-pill);
	background: var(--ca-color-accent);
	color: var(--ca-color-accent-text);
	box-shadow: var(--ca-shadow-md);
	cursor: pointer;
	transition: transform var(--ca-motion-fast) var(--ca-motion-ease),
		background-color var(--ca-motion-fast) var(--ca-motion-ease);
}

.ca-launcher--right { inset-inline-end: var(--ca-panel-inset); }
.ca-launcher--left  { inset-inline-start: var(--ca-panel-inset); }

.ca-launcher:hover { background: var(--ca-color-accent-hover); }
.ca-launcher:focus-visible {
	outline: var(--ca-focus-ring) solid var(--ca-color-focus);
	outline-offset: var(--ca-space-1);
}

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

.ca-panel {
	position: fixed;
	bottom: var(--ca-panel-inset);
	z-index: var(--ca-layer-panel);
	display: flex;
	flex-direction: column;
	width: var(--ca-panel-width);
	max-width: calc(100vw - var(--ca-space-4));
	height: var(--ca-panel-height);
	max-height: calc(100vh - var(--ca-space-6));
	border: 1px solid var(--ca-color-border);
	border-radius: var(--ca-radius-lg);
	background: var(--ca-color-surface);
	box-shadow: var(--ca-shadow-lg);
	overflow: hidden;
}

.ca-panel--right { inset-inline-end: var(--ca-panel-inset); }
.ca-panel--left  { inset-inline-start: var(--ca-panel-inset); }
.ca-panel[hidden] { display: none; }

/*
 * On a narrow screen the panel takes the viewport. A floating card at 320px
 * leaves a message column too narrow to read, and horizontal page overflow is
 * the single most common bug in widgets like this.
 */
@media (max-width: 480px) {
	.ca-panel {
		inset: 0;
		width: 100%;
		max-width: 100%;
		height: 100%;
		max-height: 100%;
		border: 0;
		border-radius: 0;
	}
}

.ca-panel__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ca-space-2);
	padding: var(--ca-space-3) var(--ca-space-4);
	border-bottom: 1px solid var(--ca-color-border);
	background: var(--ca-color-surface-raised);
}

.ca-panel__title {
	margin: 0;
	font-size: var(--ca-text-base);
	font-weight: var(--ca-weight-bold);
	line-height: var(--ca-line-tight);
}

.ca-panel__note {
	margin: 0;
	font-size: var(--ca-text-xs);
	color: var(--ca-color-text-muted);
}

.ca-close {
	min-width: var(--ca-target-min);
	min-height: var(--ca-target-min);
	border: 0;
	border-radius: var(--ca-radius-md);
	background: transparent;
	color: var(--ca-color-text-muted);
	font-size: var(--ca-text-lg);
	cursor: pointer;
}

.ca-close:hover { color: var(--ca-color-text); }
.ca-close:focus-visible {
	outline: var(--ca-focus-ring) solid var(--ca-color-focus);
	outline-offset: 0;
}

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

.ca-log {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: var(--ca-space-4);
	display: flex;
	flex-direction: column;
	gap: var(--ca-space-3);
	background: var(--ca-color-surface);
}

.ca-msg {
	max-width: 85%;
	padding: var(--ca-space-2) var(--ca-space-3);
	border-radius: var(--ca-radius-md);
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}

.ca-msg--agent {
	align-self: flex-start;
	background: var(--ca-color-bubble-agent);
	color: var(--ca-color-text);
}

.ca-msg--customer {
	align-self: flex-end;
	background: var(--ca-color-bubble-customer);
	color: var(--ca-color-accent-text);
}

.ca-msg--system {
	align-self: center;
	max-width: 100%;
	font-size: var(--ca-text-xs);
	color: var(--ca-color-text-muted);
	background: transparent;
	text-align: center;
}

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

.ca-form {
	display: flex;
	gap: var(--ca-space-2);
	padding: var(--ca-space-3);
	border-top: 1px solid var(--ca-color-border);
	background: var(--ca-color-surface-raised);
}

.ca-input {
	flex: 1 1 auto;
	min-width: 0;
	min-height: var(--ca-target-min);
	padding: var(--ca-space-2) var(--ca-space-3);
	border: 1px solid var(--ca-color-border-strong);
	border-radius: var(--ca-radius-md);
	background: var(--ca-color-surface);
	color: var(--ca-color-text);
	font: inherit;
}

.ca-input:focus-visible {
	outline: var(--ca-focus-ring) solid var(--ca-color-focus);
	outline-offset: 0;
}

.ca-send {
	min-width: var(--ca-target-min);
	min-height: var(--ca-target-min);
	padding: 0 var(--ca-space-3);
	border: 0;
	border-radius: var(--ca-radius-md);
	background: var(--ca-color-accent);
	color: var(--ca-color-accent-text);
	font: inherit;
	font-weight: var(--ca-weight-medium);
	cursor: pointer;
}

.ca-send:hover:not([disabled]) { background: var(--ca-color-accent-hover); }
.ca-send[disabled] { opacity: 0.55; cursor: default; }
.ca-send:focus-visible {
	outline: var(--ca-focus-ring) solid var(--ca-color-focus);
	outline-offset: var(--ca-space-1);
}

/* Verification ------------------------------------------------------------ */

.ca-verify {
	display: flex;
	flex-direction: column;
	gap: var(--ca-space-2);
	padding: var(--ca-space-3);
	border-top: 1px solid var(--ca-color-border);
	background: var(--ca-color-surface-sunken);
}

.ca-verify[hidden] { display: none; }
.ca-verify__label { font-size: var(--ca-text-sm); color: var(--ca-color-text-muted); }

/* Screen-reader-only, for the live region label. */
.ca-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: calc(var(--ca-space-1) * -1);
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.ca-noscript {
	padding: var(--ca-space-3);
	font-size: var(--ca-text-sm);
	color: var(--ca-color-text-muted);
}

@media (prefers-reduced-motion: reduce) {
	.ca-scope * {
		transition: none;
	}
}

/* Disclosure ------------------------------------------------------------- */

/*
 * A details element rather than a modal: no JavaScript, keyboard-reachable for
 * free, and closed until somebody asks. The customer is told what happens to
 * what they write before they write it, which is the point.
 */
.ca-notice {
	border-top: 1px solid var(--ca-color-border);
	background: var(--ca-color-surface-sunken);
	font-size: var(--ca-text-xs);
	color: var(--ca-color-text-muted);
}

.ca-notice__summary {
	padding: var(--ca-space-2) var(--ca-space-3);
	cursor: pointer;
	min-height: var(--ca-target-min);
	display: flex;
	align-items: center;
}

.ca-notice__summary:focus-visible {
	outline: var(--ca-focus-ring) solid var(--ca-color-focus);
	outline-offset: calc(var(--ca-focus-ring) * -1);
}

.ca-notice__body {
	padding: 0 var(--ca-space-3) var(--ca-space-3);
}

.ca-notice__body p {
	margin: 0 0 var(--ca-space-2);
}

.ca-notice__body a {
	color: var(--ca-color-accent);
}

/*
 * Attachments.
 *
 * The tray sits above the composer rather than inside it, so adding a file
 * never squeezes the message box below a usable width on a narrow phone - the
 * composer keeps its full row whatever is attached.
 */
.ca-files {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ca-space-2);
	padding: var(--ca-space-2) var(--ca-space-3) 0;
	background: var(--ca-color-surface-raised);
}

.ca-file {
	display: inline-flex;
	align-items: center;
	gap: var(--ca-space-2);
	max-width: 100%;
	padding: var(--ca-space-1) var(--ca-space-2);
	border: 1px solid var(--ca-color-border);
	border-radius: var(--ca-radius-md);
	background: var(--ca-color-surface);
	font-size: var(--ca-text-sm);
}

.ca-file__name {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var(--ca-color-text);
}

.ca-file__size {
	flex: none;
	color: var(--ca-color-text-muted);
}

.ca-file__drop {
	flex: none;
	min-width: var(--ca-target-min);
	min-height: var(--ca-target-min);
	padding: 0;
	border: 0;
	border-radius: var(--ca-radius-sm);
	background: none;
	color: var(--ca-color-text-muted);
	font: inherit;
	line-height: 1;
	cursor: pointer;
}

.ca-file__drop:hover { color: var(--ca-color-text); }

.ca-file__drop:focus-visible {
	outline: var(--ca-focus-ring) solid var(--ca-color-focus);
	outline-offset: 0;
}

/*
 * The paperclip is a label for a real file input, so it inherits the input's
 * keyboard behaviour instead of imitating it. The input itself is visually
 * hidden rather than display:none, which would take it out of the tab order.
 */
.ca-attach {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	min-width: var(--ca-target-min);
	min-height: var(--ca-target-min);
	border: 1px solid var(--ca-color-border-strong);
	border-radius: var(--ca-radius-md);
	background: var(--ca-color-surface);
	color: var(--ca-color-text-muted);
	cursor: pointer;
}

.ca-attach:hover {
	color: var(--ca-color-text);
	border-color: var(--ca-color-text-muted);
}

.ca-file:focus-within,
.ca-sr[data-ca-file]:focus-visible + .ca-attach {
	outline: var(--ca-focus-ring) solid var(--ca-color-focus);
	outline-offset: 0;
}