/*
 * The call center workspace.
 *
 * Drawn from the design's own tokens -- its palette, faces, spacing, radii and
 * shadows -- so a center wearing Classical gets the book-like workspace it was
 * designed in, and one wearing another design gets that design's. Nothing here
 * names a colour of its own except the four that mean an agent's state, which
 * are the same in every design.
 *
 * Colour is a stroke, not a fill: buttons are outlined and cards are bordered.
 * The one solid thing on the screen is End call.
 *
 * Dark is the same tokens, set again (below), so not one section needs to know
 * which it is drawn in.
 */

/* Set on the body as well: a page frame (the Store's) sets the site's settings there, and these read them. */
html:has(.aws-cc),
html:has(.aws-cc) body {
	--cc-bg: var(--wp--preset--color--background, #f3f2f2);
	--cc-surface: var(--wp--preset--color--surface, #eae9e9);
	--cc-text: var(--wp--preset--color--ink, #201f1d);
	--cc-divider: var(--wp--preset--color--divider, color-mix(in srgb, #201f1d 16%, transparent));
	--cc-accent: var(--wp--preset--color--accent, #b68235);
	--cc-accent-100: var(--wp--preset--color--accent-100, #fff3e4);
	--cc-accent-600: var(--wp--preset--color--accent-600, #a06f24);
	--cc-accent-700: var(--wp--preset--color--accent-700, #7d5411);
	--cc-tint: color-mix(in srgb, var(--cc-accent) 10%, transparent);
	--cc-muted: color-mix(in srgb, var(--cc-text) 58%, transparent);
	--cc-faint: color-mix(in srgb, var(--cc-text) 6%, transparent);
	--cc-heading: var(--wp--preset--font-family--heading, "Cormorant Garamond", Georgia, serif);
	--cc-heading-weight: var(--wp--custom--heading-weight, 600);
	--cc-body: var(--wp--preset--font-family--body, Lora, Georgia, serif);
	--cc-s1: var(--wp--preset--spacing--1, 4.6px);
	--cc-s2: var(--wp--preset--spacing--2, 9.2px);
	--cc-s3: var(--wp--preset--spacing--3, 13.8px);
	--cc-s4: var(--wp--preset--spacing--4, 18.4px);
	--cc-s6: var(--wp--preset--spacing--6, 27.6px);
	--cc-r-sm: var(--wp--custom--radius--sm, 2px);
	--cc-r-md: var(--wp--custom--radius--md, 4px);
	--cc-r-lg: var(--wp--custom--radius--lg, 7px);
	--cc-shadow: var(--wp--preset--shadow--lg, 0 12px 32px color-mix(in srgb, #2d2b2b 22%, transparent));
	--cc-bar: 52px;
	/* An agent's state, the same in every design. */
	--cc-green: oklch(0.6 0.13 150);
	--cc-yellow: oklch(0.76 0.14 85);
	--cc-red: oklch(0.55 0.16 27);
	--cc-gray: oklch(0.62 0.01 60);
	color-scheme: light;
}

/* Dark: the same tokens, set again. */
/*
 * Classical's colours and type (styles/classical.json), set over the site's
 * on a call center's workspace -- but not under the Store's top, where the
 * workspace wears the Store's own as the office and the Studio do. Dark mode,
 * below, is set over this in turn.
 */
html:has(body:not(.ps-kit-page) .aws-beside .aws-cc) {
	--wp--preset--color--background: #f3f2f2;
	--wp--preset--color--ink: #201f1d;
	--wp--preset--color--surface: #eae9e9;
	--wp--preset--color--divider: color-mix(in srgb, #201f1d 16%, transparent);
	--wp--preset--color--accent: #b68235;
	--wp--preset--color--accent-2: #ac803e;
	--wp--preset--color--neutral-100: #f8f4f4;
	--wp--preset--color--neutral-200: #eae7e7;
	--wp--preset--color--neutral-300: #d7d3d3;
	--wp--preset--color--neutral-400: #bab6b6;
	--wp--preset--color--neutral-500: #9b9797;
	--wp--preset--color--neutral-600: #7d7979;
	--wp--preset--color--neutral-700: #605d5d;
	--wp--preset--color--neutral-800: #444141;
	--wp--preset--color--neutral-900: #2d2b2b;
	--wp--preset--color--accent-100: #fff3e4;
	--wp--preset--color--accent-200: #ffe3bf;
	--wp--preset--color--accent-300: #facb8d;
	--wp--preset--color--accent-400: #e1ad66;
	--wp--preset--color--accent-500: #c28d41;
	--wp--preset--color--accent-600: #a06f24;
	--wp--preset--color--accent-700: #7d5411;
	--wp--preset--color--accent-800: #5a3b0a;
	--wp--preset--color--accent-900: #3a270d;
	--wp--preset--color--accent-2-100: #fff3e4;
	--wp--preset--color--accent-2-200: #ffe3be;
	--wp--preset--color--accent-2-300: #f5cd96;
	--wp--preset--color--accent-2-400: #dbaf70;
	--wp--preset--color--accent-2-500: #bc8f4e;
	--wp--preset--color--accent-2-600: #9b7232;
	--wp--preset--color--accent-2-700: #79561f;
	--wp--preset--color--accent-2-800: #573d14;
	--wp--preset--color--accent-2-900: #382810;
	--wp--preset--font-family--heading: var(--wp--preset--font-family--classical-heading);
	--wp--preset--font-family--body: var(--wp--preset--font-family--classical-body);
}

html[data-aws-cc-theme="dark"]:has(.aws-cc),
html[data-aws-cc-theme="dark"]:has(.aws-cc) body {
	--wp--preset--color--background: #1c1b1a;
	--wp--preset--color--surface: #262523;
	--wp--preset--color--ink: #ebe8e4;
	--wp--preset--color--divider: color-mix(in srgb, #ebe8e4 15%, transparent);
	--wp--preset--color--accent: #cf9a4c;
	--wp--preset--color--accent-100: #33270f;
	--wp--preset--color--accent-600: #e1ad66;
	--wp--preset--color--accent-700: #e8bb7c;
	--wp--preset--color--accent-800: #f3d3a3;
	--wp--preset--color--neutral-100: #2b2928;
	--wp--preset--color--neutral-200: #33302f;
	--wp--preset--color--neutral-700: #bab6b6;
	--wp--preset--color--neutral-800: #d7d3d3;
	--wp--preset--shadow--lg: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 14px 36px rgba(0, 0, 0, 0.55);
	color-scheme: dark;
}

/* ---- The page: a bar, then three columns that scroll on their own ---- */

html:has(.aws-cc) body {
	background: var(--cc-bg);
	color: var(--cc-text);
	font-family: var(--cc-body);
	font-size: 13px;
	line-height: 1.45;
}

/*
 * The workspace alone fills the window and scrolls in its columns; the
 * office and any other page of a call center scroll as pages do.
 */
html:has(.aws-beside .aws-cc) body {
	min-inline-size: 1280px;
	overflow: hidden;
}

html:has(.aws-beside .aws-cc) .wp-site-blocks {
	block-size: calc(100vh - var(--wp-admin--admin-bar--height, 0px));
	display: flex;
	flex-direction: column;
	padding: 0;
}

html:has(.aws-cc) .wp-site-blocks > * {
	margin-block: 0;
}

/* Nothing of a website's around a workspace: no strip, and of the footer only its last line. */
html:has(.aws-cc) .wp-site-blocks > div.wp-block-template-part:has(.aws-announcement) {
	display: none;
}

/*
 * The line every site ends with -- "© 2026 the-address · Developed &
 * Maintained by Setayo LLC" -- is on these pages too: the footer's last line
 * alone, in a thin band. In the workspace it is the bottom of the window, the
 * columns above it taking what is left.
 */
html:has(.aws-cc) .wp-site-blocks > footer {
	border-block-start: 1px solid var(--cc-divider);
	flex: none;
}

/* In the app's colours, light or dark: the footer's own colour classes are WordPress's, and say !important. */
html:has(.aws-cc) .wp-site-blocks > footer .aws-foot {
	background: var(--cc-surface) !important;
	color: var(--cc-muted) !important;
	padding-block: var(--cc-s1);
}

html:has(.aws-cc) .wp-site-blocks > footer .aws-foot a { color: inherit; }

/* A button that is a link is still a button. */
.aws-cc a.cc-btn { color: inherit; text-decoration: none; }

html:has(.aws-cc) .wp-site-blocks > footer .aws-foot__inner > :not(.aws-foot__legal) {
	display: none;
}

html:has(.aws-cc) .wp-site-blocks > footer .aws-foot__legal {
	font-size: 11px;
	margin: 0;
	text-align: center;
}

html:has(.aws-cc) .wp-site-blocks > header {
	border-block-end: 1px solid var(--cc-divider);
	flex: none;
}

html:has(.aws-beside .aws-cc) .wp-site-blocks > main {
	flex: 1;
	min-block-size: 0;
}

html:has(.aws-beside .aws-cc) main :is(.wp-block-aws-front-content, .entry-content, .wp-block-post-content) {
	block-size: 100%;
	margin: 0;
	max-inline-size: none;
	padding: 0;
}

.aws-beside:has(.aws-cc) {
	block-size: 100%;
	gap: 0;
	grid-template-columns: 20% 55% 25%;
	max-inline-size: none;
}

.aws-beside:has(.aws-cc) > * {
	min-block-size: 0;
	/* The workspace does not scroll: its lists are paged to the room they have (callcenter.js fitLists). */
	overflow-y: hidden;
}

.aws-beside:has(.aws-cc) > .aws-beside__aside--left {
	border-inline-end: 1px solid var(--cc-divider);
	display: flex;
	flex-direction: column;
}

.aws-beside:has(.aws-cc) > .aws-beside__aside--right {
	border-inline-start: 1px solid var(--cc-divider);
	display: flex;
	flex-direction: column;
	gap: var(--cc-s3);
	padding: var(--cc-s3);
}

.aws-beside:has(.aws-cc) > .aws-beside__main > * {
	block-size: 100%;
}

.aws-cc {
	margin: 0 !important;
	max-inline-size: none !important;
}

.aws-cc[hidden] {
	display: none !important;
}

/* The queue sits right under the interactions, folded until opened. */
.aws-cc--interactions {
	flex: none;
	padding: var(--cc-s3) var(--cc-s2);
}

.aws-cc--queues {
	border-block-start: 1px solid var(--cc-divider);
	flex: none;
	padding: var(--cc-s3);
}

/* ---- Shared pieces ---- */

.aws-cc :is(button, input, select, textarea) {
	font: inherit;
	color: inherit;
}

.aws-cc .cc-icon {
	flex: none;
}

.aws-cc .cc-num,
.aws-cc .cc-big {
	font-variant-numeric: lining-nums tabular-nums;
}

.aws-cc .cc-kicker {
	color: var(--cc-muted);
	font-size: 11px;
	letter-spacing: 0.08em;
	margin: 0;
	text-transform: uppercase;
}

.aws-cc .cc-kicker--accent,
.aws-cc .cc-call .cc-kicker:first-child,
.aws-cc .cc-sms .cc-kicker:first-child,
.aws-cc .cc-dialog .cc-kicker:first-child {
	color: var(--cc-accent-700);
}

.aws-cc .cc-muted { color: var(--cc-muted); }
.aws-cc .cc-small { font-size: 11px; }
.aws-cc .cc-grow { flex: 1; min-inline-size: 0; }
.aws-cc .cc-r { text-align: end; }
/* Call/Text: the one button, in the middle of its column. */
.aws-cc .cc-c { text-align: center; }
.aws-cc .cc-row { align-items: center; display: flex; gap: var(--cc-s2); }
.aws-cc .cc-sr { clip: rect(0 0 0 0); position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; }

.aws-cc .cc-title {
	font-family: var(--cc-heading);
	font-size: 34px;
	font-weight: 400;
	letter-spacing: -0.01em;
	line-height: 1.1;
	margin: 2px 0;
}

.aws-cc .cc-title--inline { font-size: 26px; }
.aws-cc .cc-title--inline .cc-muted { font-family: var(--cc-body); font-size: 13px; letter-spacing: 0; }
.aws-cc .cc-title--sm { font-size: 19px; font-weight: var(--cc-heading-weight); }

.aws-cc .cc-big {
	font-family: var(--cc-heading);
	font-size: 46px;
	font-weight: 400;
	line-height: 1;
}

.aws-cc .cc-big.is-late { color: var(--cc-red); }

.aws-cc .cc-panel-head {
	align-items: baseline;
	display: flex;
	justify-content: space-between;
	margin-block-end: var(--cc-s2);
}

/* The interaction history, folded: its heading a summary with how many calls, a chevron at its end. */
.aws-cc .cc-history-fold > summary { align-items: center; cursor: pointer; gap: 8px; justify-content: flex-start; list-style: none; }
.aws-cc .cc-history-fold > summary::-webkit-details-marker { display: none; }
.aws-cc .cc-history-fold > summary::after { border-block-end: 1.5px solid currentColor; border-inline-end: 1.5px solid currentColor; block-size: 7px; content: ""; flex: none; inline-size: 7px; margin-inline-start: 8px; opacity: .6; transform: rotate(45deg); transition: transform .15s; }
.aws-cc .cc-history-fold[open] > summary::after { transform: rotate(225deg); }
.aws-cc .cc-history-count.is-hot { background: color-mix(in srgb, var(--cc-red) 14%, transparent); color: var(--cc-red); }
.aws-cc .cc-history-count { white-space: nowrap; background: var(--cc-tint); border-radius: 99px; color: var(--cc-accent-700); font-size: 12px; font-variant-numeric: lining-nums; padding: 1px 8px; }
.aws-cc .cc-history-fold > summary :is(.cc-muted, .cc-synced) { margin-inline-start: auto; }

.aws-cc .cc-empty,
.aws-cc .cc-quiet {
	color: var(--cc-muted);
	margin: 0;
}

.aws-cc .cc-quiet {
	padding: var(--cc-s6);
}

.aws-cc .cc-dot {
	block-size: 9px;
	border-radius: 50%;
	display: inline-block;
	flex: none;
	inline-size: 9px;
}

.aws-cc .cc-dot--green { background: var(--cc-green); }
.aws-cc .cc-dot--yellow { background: var(--cc-yellow); }
.aws-cc .cc-dot--red { background: var(--cc-red); }
.aws-cc .cc-dot--gray { background: var(--cc-gray); }

/* Buttons: outlined, tinted on hover, a step darker when pressed. */
.aws-cc .cc-btn {
	align-items: center;
	background: transparent;
	border: 1px solid var(--cc-divider);
	border-radius: var(--cc-r-md);
	cursor: pointer;
	display: inline-flex;
	gap: 8px;
	justify-content: center;
	min-block-size: 34px;
	padding: 0 var(--cc-s3);
	white-space: nowrap;
}

.aws-cc .cc-btn:hover { background: var(--cc-faint); }
.aws-cc .cc-btn:active { background: color-mix(in srgb, var(--cc-text) 10%, transparent); }
.aws-cc .cc-btn.is-on,
.aws-cc .cc-btn--primary { border-color: var(--cc-accent); color: var(--cc-accent-700); }
.aws-cc .cc-btn--primary:hover { background: var(--cc-tint); }
.aws-cc .cc-btn--icon { inline-size: 34px; padding: 0; }
.aws-cc .cc-btn--chip { font-size: 12px; min-block-size: 32px; padding: 0 var(--cc-s2); }
.aws-cc .cc-btn--accept { border-color: var(--cc-green); color: var(--cc-green); }
.aws-cc .cc-btn--accept:hover { background: color-mix(in srgb, var(--cc-green) 10%, transparent); }
.aws-cc .cc-btn--lg { font-size: 15px; min-block-size: 46px; padding: 0 var(--cc-s6); }

.aws-cc :is(.cc-btn, .cc-ctl, .cc-link, .cc-task, .cc-tag, .cc-dispo, .cc-key, .cc-pop__row, .cc-input):focus-visible {
	outline: 2px solid var(--cc-accent);
	outline-offset: 2px;
}

.aws-cc .cc-link {
	align-items: center;
	background: none;
	border: 0;
	color: var(--cc-accent-700);
	cursor: pointer;
	display: inline-flex;
	font-size: 11px;
	gap: 5px;
	padding: 2px;
}

.aws-cc .cc-input {
	background: transparent;
	border: 1px solid var(--cc-divider);
	border-radius: var(--cc-r-md);
	box-sizing: border-box;
	inline-size: 100%;
	padding: 8px 10px;
}

.aws-cc select.cc-input { background: var(--cc-bg); }

.aws-cc .cc-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-block-end: var(--cc-s3);
}

.aws-cc .cc-field__label {
	align-items: baseline;
	display: flex;
	font-size: 13px;
	justify-content: space-between;
	margin: 0;
}

.aws-cc .cc-chip,
.aws-cc .cc-pill {
	border: 1px solid var(--cc-divider);
	border-radius: var(--cc-r-sm);
	display: inline-block;
	font-size: 12px;
	padding: 2px 10px;
}

.aws-cc .cc-chip--accent { border-color: var(--cc-accent); color: var(--cc-accent-700); }

.aws-cc .cc-pill {
	font-size: 11px;
	padding: 1px 7px;
}

.aws-cc .cc-pill--accent {
	background: var(--cc-accent-100);
	border-color: transparent;
	color: var(--cc-accent-700);
}

/* A call nobody took, in the agent's Missed calls. */
.aws-cc .cc-pill--red { border-color: var(--cc-red); color: var(--cc-red); }

.aws-cc .cc-mono {
	align-items: center;
	block-size: 24px;
	border: 1px solid var(--cc-accent);
	border-radius: var(--cc-r-sm);
	color: var(--cc-accent-700);
	display: inline-grid;
	flex: none;
	font-family: var(--cc-heading);
	font-size: 12px;
	font-weight: var(--cc-heading-weight);
	inline-size: 24px;
	justify-items: center;
}

.aws-cc .cc-mono--lg { block-size: 38px; font-size: 18px; inline-size: 38px; }

/* Menus that open over the page. */
.aws-cc .cc-pop-anchor { position: relative; }

.aws-cc .cc-pop {
	background: var(--cc-surface);
	border: 1px solid var(--cc-divider);
	border-radius: var(--cc-r-lg);
	box-shadow: var(--cc-shadow);
	inset-block-start: calc(100% + 6px);
	inset-inline-end: 0;
	padding: 6px;
	position: absolute;
	z-index: 40;
}

.aws-cc .cc-pop--status { inline-size: 230px; }
.aws-cc .cc-pop--transfer { inline-size: 300px; inset-inline-end: auto; inset-inline-start: 0; }
.aws-cc .cc-pop--keys { inline-size: 210px; inset-inline-end: auto; inset-inline-start: 0; }
.aws-cc .cc-pop--tpl { inline-size: 100%; inset-block-end: calc(100% + 6px); inset-block-start: auto; inset-inline-start: 0; max-block-size: 320px; overflow-y: auto; }

.aws-cc .cc-pop__row {
	align-items: center;
	background: transparent;
	border: 0;
	border-radius: var(--cc-r-md);
	cursor: pointer;
	display: flex;
	gap: 10px;
	inline-size: 100%;
	padding: 8px 10px;
	text-align: start;
}

.aws-cc .cc-pop__row:hover:not(:disabled) { background: var(--cc-faint); }
.aws-cc .cc-pop__row.is-on { background: var(--cc-tint); }
.aws-cc .cc-pop__row:disabled { cursor: default; opacity: 0.6; }
.aws-cc .cc-pop__row--stack { align-items: flex-start; flex-direction: column; gap: 2px; }
.aws-cc .cc-pop__row--tpl { align-items: flex-start; flex-direction: column; gap: 2px; }
.aws-cc .cc-pop__note { color: var(--cc-muted); font-size: 12px; margin: 6px 10px; }

/* ---- W108 · The bar ---- */

.aws-cc--bar { block-size: var(--cc-bar); }

.aws-cc .cc-bar {
	align-items: center;
	block-size: var(--cc-bar);
	box-sizing: border-box;
	display: flex;
	gap: var(--cc-s4);
	padding: 0 var(--cc-s4);
}

.aws-cc .cc-bar__brand {
	align-items: baseline;
	display: flex;
	gap: 8px;
	inline-size: calc(20% - var(--cc-s4));
	min-inline-size: 0;
}

.aws-cc .cc-bar__name {
	font-family: var(--cc-heading);
	font-size: 20px;
	font-weight: var(--cc-heading-weight);
	letter-spacing: -0.01em;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.aws-cc .cc-bar__kind { color: var(--cc-muted); font-size: 11px; white-space: nowrap; }

/* The site's logo in place of its name: the header's height, never wider than the room. */
.aws-cc .cc-bar__brand:has(.cc-bar__logo) { align-items: center; }
.aws-cc .cc-bar__logo { display: flex; flex: 0 1 auto; min-inline-size: 0; }
.aws-cc .cc-bar__logo img { block-size: 28px; display: block; inline-size: auto; max-inline-size: 100%; object-fit: contain; object-position: left center; }
/* A dark logo on the dark theme sits on a light tile rather than vanishing. */
:root[data-aws-cc-theme="dark"] .aws-cc .cc-bar__logo img { background: #f4f1ec; border-radius: 4px; padding: 2px 6px; }
.aws-cc .cc-bar__fill { flex: 1; }

.aws-cc .cc-answering {
	align-items: center;
	border: 1px solid var(--cc-accent);
	border-radius: var(--cc-r-md);
	display: flex;
	gap: 10px;
	padding: 5px 12px 5px 6px;
}

.aws-cc .cc-answering__name {
	font-family: var(--cc-heading);
	font-size: 16px;
	font-weight: var(--cc-heading-weight);
}

.aws-cc .cc-status { justify-content: flex-start; min-inline-size: 190px; }
.aws-cc .cc-status__label { flex: 1; text-align: start; }

.aws-cc .cc-agent {
	align-items: center;
	border-inline-start: 1px solid var(--cc-divider);
	display: flex;
	gap: 10px;
	padding-inline-start: var(--cc-s4);
}

.aws-cc .cc-agent > span:last-child { display: flex; flex-direction: column; line-height: 1.2; }

.aws-cc .cc-avatar {
	align-items: center;
	block-size: 30px;
	border: 1px solid var(--cc-divider);
	border-radius: 50%;
	display: grid;
	font-size: 11px;
	inline-size: 30px;
	justify-items: center;
}

.aws-cc .cc-agent__role { color: var(--cc-muted); font-size: 11px; }

/* ---- W109 · My interactions ---- */

.aws-cc .cc-tasks { display: flex; flex-direction: column; gap: 6px; }

.aws-cc .cc-task {
	background: transparent;
	border: 1px solid var(--cc-divider);
	border-radius: var(--cc-r-md);
	cursor: pointer;
	display: flex;
	gap: 10px;
	padding: 10px 12px;
	text-align: start;
}

.aws-cc .cc-task:hover { background: var(--cc-faint); }
.aws-cc .cc-task.is-on { background: var(--cc-tint); border-color: var(--cc-accent); }
.aws-cc .cc-task.is-ringing { border-color: var(--cc-accent); }
.aws-cc .cc-task.is-pulsing { animation: cc-ring 1.4s ease-out infinite; }
.aws-cc .cc-task--wrap { border-style: dashed; border-color: var(--cc-yellow); }

.aws-cc .cc-task__icon {
	align-items: center;
	block-size: 26px;
	border: 1px solid var(--cc-divider);
	border-radius: 50%;
	display: grid;
	flex: none;
	inline-size: 26px;
	justify-items: center;
}

.aws-cc .cc-task--call .cc-task__icon { border-color: var(--cc-accent); color: var(--cc-accent); }

.aws-cc .cc-task__body { display: flex; flex: 1; flex-direction: column; gap: 1px; min-inline-size: 0; }
.aws-cc .cc-task__top { align-items: baseline; display: flex; gap: 8px; justify-content: space-between; }
.aws-cc .cc-task__name { font-family: var(--cc-heading); font-size: 16px; font-weight: var(--cc-heading-weight); }
.aws-cc .cc-task__meta { color: var(--cc-muted); font-size: 12px; white-space: nowrap; }
.aws-cc .cc-task.is-ringing .cc-task__meta { color: var(--cc-accent-700); }
.aws-cc .cc-task__client { color: var(--cc-accent-700); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; }
.aws-cc .cc-task__preview { align-items: center; display: flex; gap: 8px; justify-content: space-between; margin-block-start: 6px; }
.aws-cc .cc-task__preview > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aws-cc .cc-task__actions { display: grid; gap: 6px; grid-template-columns: 1fr 1fr; margin-block-start: 8px; }
.aws-cc .cc-task__actions .cc-btn { min-block-size: 28px; }

.aws-cc .cc-badge {
	align-items: center;
	block-size: 18px;
	border: 1px solid var(--cc-accent);
	border-radius: 50%;
	color: var(--cc-accent-700);
	display: grid;
	flex: none;
	font-size: 10.5px;
	inline-size: 18px;
	justify-items: center;
}

@keyframes cc-ring {
	0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--cc-accent) 55%, transparent); }
	70% { box-shadow: 0 0 0 8px transparent; }
	100% { box-shadow: 0 0 0 0 transparent; }
}

/* ---- W110 · Queue volume ---- */

.aws-cc .cc-queue { border-collapse: collapse; inline-size: 100%; }
.aws-cc .cc-queue th { color: var(--cc-muted); font-size: 10.5px; font-weight: 400; letter-spacing: 0.08em; padding: 4px 0; text-align: start; text-transform: uppercase; }
.aws-cc .cc-queue th.cc-r { text-align: end; }
.aws-cc .cc-queue td { padding: 3px 0; }
.aws-cc .cc-queue tr.is-hot td { color: var(--cc-red); }

/* ---- W111 · The call ---- */

.aws-cc--call,
.aws-cc--sms { padding: var(--cc-s4) var(--cc-s6); }
.aws-cc--sms { padding: 0; }

.aws-cc .cc-call { display: flex; flex-direction: column; gap: var(--cc-s3); min-block-size: 100%; }
.aws-cc .cc-call__head { align-items: flex-start; display: flex; justify-content: space-between; }
.aws-cc .cc-call__clock { align-items: flex-end; display: flex; flex-direction: column; gap: 6px; }
.aws-cc .cc-state { align-items: center; display: inline-flex; gap: 7px; }

.aws-cc .cc-line { align-items: center; display: flex; flex-wrap: wrap; gap: 8px; }
.aws-cc .cc-line .cc-kicker { margin-inline-end: 4px; }

.aws-cc .cc-wave {
	align-items: center;
	border: 1px solid var(--cc-divider);
	border-radius: var(--cc-r-md);
	display: flex;
	gap: var(--cc-s6);
	padding: var(--cc-s4);
}

.aws-cc .cc-wave__label { display: flex; flex: none; flex-direction: column; inline-size: 90px; }
.aws-cc .cc-wave__bars { align-items: center; block-size: 54px; display: flex; flex: 1; gap: 4px; }

.aws-cc .cc-wave__bars i {
	animation: cc-wave 1s ease-in-out infinite;
	background: var(--cc-accent);
	border-radius: 1px;
	flex: 1;
	transform: scaleY(0.25);
}

.aws-cc .cc-wave.is-paused .cc-wave__bars { opacity: 0.35; }
.aws-cc .cc-wave.is-paused .cc-wave__bars i { animation-play-state: paused; }

@keyframes cc-wave {
	0%, 100% { transform: scaleY(0.25); }
	50% { transform: scaleY(1); }
}

.aws-cc .cc-controls { display: grid; gap: var(--cc-s2); grid-template-columns: repeat(5, 1fr) 1.4fr; }
.aws-cc .cc-controls > .cc-pop-anchor { display: grid; }

.aws-cc .cc-ctl {
	align-items: center;
	background: transparent;
	border: 1px solid var(--cc-divider);
	border-radius: var(--cc-r-md);
	cursor: pointer;
	display: flex;
	flex-direction: column;
	gap: 6px;
	justify-content: center;
	min-block-size: 64px;
}

.aws-cc .cc-ctl:hover:not(:disabled) { background: var(--cc-faint); }
.aws-cc .cc-ctl:disabled { cursor: default; opacity: 0.45; }
.aws-cc .cc-ctl.is-on { background: var(--cc-tint); border-color: var(--cc-accent); color: var(--cc-accent-700); }

/* The one fill on the screen. */
.aws-cc .cc-ctl--end { background: var(--cc-red); border-color: var(--cc-red); color: #fff; }
.aws-cc .cc-ctl--end:hover:not(:disabled) { background: color-mix(in srgb, var(--cc-red) 88%, #000); }

.aws-cc .cc-call__work { display: grid; flex: 1; gap: var(--cc-s4); grid-template-columns: minmax(0, 1fr) 230px; }
.aws-cc .cc-call__work > .cc-field { margin: 0; }
.aws-cc .cc-notes { flex: 1; min-block-size: 220px; resize: vertical; }
.aws-cc .cc-side { display: flex; flex-direction: column; gap: 8px; }
.aws-cc .cc-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-block-end: var(--cc-s3); }

.aws-cc .cc-tag {
	background: transparent;
	border: 1px solid var(--cc-divider);
	border-radius: var(--cc-r-sm);
	cursor: pointer;
	padding: 4px 10px;
}

.aws-cc .cc-tag.is-on { background: var(--cc-tint); border-color: var(--cc-accent); color: var(--cc-accent-700); }
.aws-cc .cc-rec { align-items: center; display: flex; gap: 8px; margin: 0; }

.aws-cc .cc-ringing { align-items: flex-start; display: flex; flex-direction: column; gap: var(--cc-s2); }

.aws-cc .cc-keys { display: grid; gap: 6px; grid-template-columns: repeat(3, 1fr); }

.aws-cc .cc-key {
	align-items: center;
	background: transparent;
	border: 1px solid var(--cc-divider);
	border-radius: var(--cc-r-md);
	cursor: pointer;
	display: flex;
	flex-direction: column;
	font-family: var(--cc-heading);
	font-size: 20px;
	justify-content: center;
	line-height: 1;
	min-block-size: 40px;
}

.aws-cc .cc-key:hover { background: var(--cc-faint); }
.aws-cc .cc-key small { color: var(--cc-muted); font-family: var(--cc-body); font-size: 8.5px; letter-spacing: 0.12em; margin-block-start: 3px; }
.aws-cc .cc-keys--big .cc-key { min-block-size: 46px; font-size: 22px; }
.aws-cc .cc-tones { font-size: 16px; margin: 4px 6px 8px; min-block-size: 22px; }

/* ---- W112 · A text conversation ---- */

.aws-cc .cc-sms { display: flex; flex-direction: column; block-size: 100%; }

.aws-cc .cc-sms__head {
	align-items: flex-start;
	border-block-end: 1px solid var(--cc-divider);
	display: flex;
	justify-content: space-between;
	padding: var(--cc-s4) var(--cc-s6);
}

.aws-cc .cc-thread {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 6px;
	overflow-y: auto;
	padding: var(--cc-s4) var(--cc-s6);
}

.aws-cc .cc-day {
	align-items: center;
	color: var(--cc-muted);
	display: flex;
	font-size: 11px;
	gap: var(--cc-s3);
	letter-spacing: 0.08em;
	margin: var(--cc-s2) 0;
	text-transform: uppercase;
}

.aws-cc .cc-day::before,
.aws-cc .cc-day::after { border-block-start: 1px solid var(--cc-divider); content: ""; flex: 1; }

.aws-cc .cc-msg { display: flex; flex-direction: column; max-inline-size: 75%; }
.aws-cc .cc-msg.is-in { align-items: flex-start; align-self: flex-start; }
.aws-cc .cc-msg.is-out { align-items: flex-end; align-self: flex-end; }

.aws-cc .cc-msg__bubble {
	border: 1px solid var(--cc-divider);
	border-radius: var(--cc-r-md);
	display: flex;
	flex-direction: column;
	font-size: 14px;
	gap: 8px;
	padding: 9px 12px;
}

.aws-cc .cc-msg__bubble p { margin: 0; }
.aws-cc .cc-msg.is-out .cc-msg__bubble { background: var(--cc-accent-100); border-color: color-mix(in srgb, var(--cc-accent) 45%, transparent); }
.aws-cc .cc-msg__meta { color: var(--cc-muted); font-size: 11px; margin: 3px 2px 6px; }

.aws-cc .cc-mms { border-radius: var(--cc-r-sm); max-block-size: 220px; max-inline-size: 280px; object-fit: cover; }

.aws-cc .cc-mms--blank {
	align-items: center;
	block-size: 140px;
	border: 1px dashed var(--cc-divider);
	color: var(--cc-muted);
	display: flex;
	flex-direction: column;
	gap: 6px;
	inline-size: 200px;
	justify-content: center;
}

.aws-cc .cc-filechip {
	align-items: center;
	border: 1px solid var(--cc-divider);
	border-radius: var(--cc-r-sm);
	display: inline-flex;
	gap: 8px;
	padding: 6px 10px;
}

.aws-cc .cc-compose {
	border-block-start: 1px solid var(--cc-divider);
	display: flex;
	flex-direction: column;
	gap: var(--cc-s2);
	padding: var(--cc-s3) var(--cc-s6) var(--cc-s4);
}

.aws-cc .cc-tpl { align-items: center; display: flex; gap: 6px; }
.aws-cc .cc-tpl .cc-pop-anchor { max-inline-size: 250px; }

.aws-cc .cc-search {
	align-items: center;
	border: 1px solid var(--cc-divider);
	border-radius: var(--cc-r-md);
	color: var(--cc-muted);
	display: flex;
	gap: 8px;
	padding: 0 10px;
}

.aws-cc .cc-search__input { background: none; border: 0; color: var(--cc-text); inline-size: 100%; min-block-size: 32px; outline: 0; }
.aws-cc .cc-tpl__name { font-weight: 600; font-size: 12.5px; }
.aws-cc .cc-tpl__body { color: var(--cc-muted); font-size: 12px; }

.aws-cc .cc-composer { border: 1px solid var(--cc-divider); border-radius: var(--cc-r-md); }
.aws-cc .cc-composer:focus-within { border-color: var(--cc-accent); }
.aws-cc .cc-draft { border: 0; min-block-size: 64px; resize: none; }
.aws-cc .cc-draft:focus-visible { outline: 0; }
.aws-cc .cc-composer__foot { align-items: center; border-block-start: 1px solid var(--cc-divider); display: flex; gap: 10px; padding: 6px 10px; }
.aws-cc .cc-attached { align-items: center; display: flex; font-size: 12px; gap: 8px; padding: 8px 10px 0; }

/* ---- W113 · After-call work ---- */

.aws-cc .cc-backdrop {
	align-items: center;
	background: color-mix(in srgb, var(--cc-bg) 55%, transparent);
	backdrop-filter: blur(1px);
	display: flex;
	inset: 0;
	justify-content: center;
	position: fixed;
	z-index: 100;
}

.aws-cc .cc-dialog {
	background: var(--cc-bg);
	border: 1px solid var(--cc-divider);
	border-radius: var(--cc-r-lg);
	box-shadow: var(--cc-shadow);
	inline-size: 540px;
	max-block-size: calc(100vh - 60px);
	overflow-y: auto;
	padding: var(--cc-s6);
}

.aws-cc .cc-dialog__head { align-items: flex-start; display: flex; justify-content: space-between; margin-block-end: var(--cc-s4); }
.aws-cc .cc-dialog__head .cc-big { font-size: 34px; }
.aws-cc .cc-dialog__actions { display: flex; gap: var(--cc-s2); justify-content: flex-end; }
.aws-cc .cc-dispos { display: grid; gap: 8px; grid-template-columns: 1fr 1fr; margin: 8px 0 var(--cc-s3); }

.aws-cc .cc-dispo {
	align-items: flex-start;
	background: transparent;
	border: 1px solid var(--cc-divider);
	border-radius: var(--cc-r-md);
	cursor: pointer;
	display: flex;
	gap: 10px;
	padding: 10px 12px;
	text-align: start;
}

.aws-cc .cc-dispo > span:last-child { display: flex; flex-direction: column; }
.aws-cc .cc-dispo__label { font-size: 14px; }
.aws-cc .cc-dispo.is-on { background: var(--cc-tint); border-color: var(--cc-accent); }

.aws-cc .cc-radio {
	block-size: 14px;
	border: 1px solid var(--cc-divider);
	border-radius: 50%;
	flex: none;
	inline-size: 14px;
	margin-block-start: 3px;
}

.aws-cc .cc-dispo.is-on .cc-radio { border-color: var(--cc-accent); box-shadow: inset 0 0 0 3px var(--cc-bg), inset 0 0 0 7px var(--cc-accent); }
.aws-cc .cc-pair { display: grid; gap: 8px; grid-template-columns: 1fr 1fr; }
.aws-cc .cc-summary { min-block-size: 96px; resize: vertical; }
.aws-cc .cc-error { color: var(--cc-red); margin: 0 0 var(--cc-s2); }

/* ---- W114 · Softphone ---- */

.aws-cc--softphone { block-size: 0 !important; }

.aws-cc .cc-softphone {
	background: var(--cc-bg);
	border: 1px solid var(--cc-divider);
	border-radius: var(--cc-r-lg);
	box-shadow: var(--cc-shadow);
	display: flex;
	flex-direction: column;
	gap: 8px;
	inline-size: var(--cc-phone-w);
	inset-block-start: calc(var(--cc-above, 0px) + var(--cc-bar) + var(--wp-admin--admin-bar--height, 0px) + 8px);
	inset-inline-end: calc(25% + 12px);
	padding: var(--cc-s3);
	position: fixed;
	z-index: 90;
}

.aws-cc .cc-softphone .cc-field { margin: 0; }
.aws-cc .cc-softphone__head { align-items: center; display: flex; justify-content: space-between; }
.aws-cc .cc-dialrow { display: flex; gap: 8px; }
.aws-cc .cc-country { flex: none; inline-size: 96px; }
.aws-cc .cc-dial { font-family: var(--cc-heading); font-size: 20px; padding-block: 4px; }

/* ---- W115–W118 · Who it is for ---- */

.aws-cc .cc-card {
	border: 1px solid var(--cc-divider);
	border-radius: var(--cc-r-md);
	padding: var(--cc-s3);
}

.aws-cc .cc-card--client { border-color: var(--cc-accent); }
.aws-cc .cc-card--plain { padding: var(--cc-s3); }
.aws-cc .cc-client__head { align-items: center; display: flex; gap: 10px; margin-block-end: var(--cc-s3); }
.aws-cc .cc-client__head .cc-title--sm { margin: 0; }
.aws-cc .cc-sop { margin: 6px 0 var(--cc-s3); padding-inline-start: 18px; }
.aws-cc .cc-sop li { margin-block-end: 4px; }

.aws-cc .cc-greeting {
	border-block-start: 1px solid var(--cc-divider);
	font-style: italic;
	margin: 0;
	padding-block-start: var(--cc-s2);
}

.aws-cc .cc-customer__head { align-items: baseline; display: flex; justify-content: space-between; margin-block-end: 8px; }
.aws-cc .cc-customer__head .cc-title--sm { margin: 0; }
.aws-cc .cc-contact { display: flex; flex-direction: column; gap: 6px; list-style: none; margin: 0; padding: 0; }
.aws-cc .cc-contact li { align-items: center; display: flex; gap: 10px; }
.aws-cc .cc-contact .cc-icon { color: var(--cc-muted); }

.aws-cc .cc-synced { align-items: center; color: var(--cc-green); display: inline-flex; font-size: 11px; gap: 5px; }
.aws-cc .cc-tickets { display: flex; flex-direction: column; list-style: none; margin: 0; padding: 0; }
.aws-cc .cc-tickets li { align-items: center; border-block-start: 1px solid var(--cc-divider); display: flex; gap: 10px; padding: 7px 0; }
.aws-cc .cc-tickets li:first-child { border-block-start: 0; }
.aws-cc .cc-ticket__id { color: var(--cc-accent-700); }

.aws-cc .cc-timeline { list-style: none; margin: 0; padding: 0 0 0 18px; position: relative; }
.aws-cc .cc-timeline::before { border-inline-start: 1px solid var(--cc-divider); content: ""; inset-block: 6px; inset-inline-start: 5px; position: absolute; }
.aws-cc .cc-timeline > li { margin-block-end: var(--cc-s3); position: relative; }

.aws-cc .cc-timeline > li::before {
	background: var(--cc-bg);
	block-size: 9px;
	border: 1px solid var(--cc-accent);
	border-radius: 50%;
	content: "";
	inline-size: 9px;
	inset-block-start: 4px;
	inset-inline-start: -18px;
	position: absolute;
}

.aws-cc .cc-timeline > li > p, .aws-cc .cc-timeline > li > details > summary > p { margin: 0 0 4px; }
.aws-cc .cc-timeline__head strong { font-weight: 600; }

/* ---- Somebody who is not an agent ---- */

.aws-cc--locked { display: grid; min-block-size: 60vh; place-items: center; }
.aws-cc-locked { max-inline-size: 420px; padding: var(--cc-s6); text-align: center; }

.aws-cc-btn {
	border: 1px solid var(--cc-accent);
	border-radius: var(--cc-r-md);
	color: var(--cc-accent-700);
	display: inline-block;
	padding: 8px var(--cc-s4);
	text-decoration: none;
}

.aws-cc--sms { block-size: 100%; }

/* The page somebody who is not an agent is shown: the bar, and a way in. */
.aws-beside:has(.aws-cc--locked) {
	grid-template-columns: minmax(0, 1fr);
}

html:has(.aws-beside .aws-cc) main :is(.aws-grid, .wp-block-aws-front-content) {
	block-size: 100%;
	margin: 0;
	max-inline-size: none;
}

.aws-cc--locked {
	block-size: 100%;
}

.aws-cc-locked .aws-cc-btn {
	margin-block-start: var(--cc-s2);
}

/* The thread gives way to the reply box, not the other way round. */
.aws-cc .cc-thread {
	min-block-size: 0;
}

/* Empty rails on the page a visitor is turned away from draw nothing. */
.aws-beside:has(.aws-cc--locked) > aside {
	display: none;
}

/*
 * The middle column is a column, not a grid of rows sized by what is in them:
 * a conversation fills what is left of the screen and its thread scrolls,
 * however long the thread grows.
 */
.aws-beside__main:has(.aws-cc) > .aws-grid {
	display: flex;
	flex-direction: column;
}

.aws-beside__main:has(.aws-cc) > .aws-grid > .aws-cc--sms,
.aws-beside__main:has(.aws-cc) > .aws-grid > .aws-cc--call {
	block-size: auto;
	flex: 1 1 0;
	min-block-size: 0;
}

.aws-beside__main:has(.aws-cc) > .aws-grid > .aws-cc--call {
	overflow-y: hidden;
}

/* Only what still cannot fit once its lists are paged scrolls, rather than be out of reach. */
.aws-beside:has(.aws-cc) > .cc-fit-scrolls,
.aws-beside__main:has(.aws-cc) > .aws-grid > .aws-cc--call.cc-fit-scrolls { overflow-y: auto; }

/* A word about the lines: one line, giving way before the name of the center does. */
.aws-cc .cc-banner {
	color: var(--cc-red);
	flex: 0 1 auto;
	font-size: 12px;
	min-inline-size: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.aws-cc .cc-bar__brand {
	flex: none;
}

/*
 * Figures in a name set even, like the rest of the numbers here: the heading
 * face's old-style figures make a caller known only by number read as a
 * jumble of heights.
 */
.aws-cc :is(.cc-title, .cc-task__name, .cc-answering__name, .cc-bar__name) {
	font-variant-numeric: lining-nums;
}

/* A name in the list stays on its line, however long. */
.aws-cc .cc-task__name {
	flex: 1;
	min-inline-size: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.aws-cc .cc-call--ringing {
	min-block-size: 0;
}

/* An incoming call: one card, in the middle, with the only Accept and Decline on the screen. */
.aws-cc .cc-answer {
	align-items: center;
	align-self: center;
	background: var(--cc-surface);
	border: 1px solid var(--cc-divider);
	border-radius: var(--cc-r-lg);
	box-shadow: var(--cc-shadow);
	display: flex;
	flex-direction: column;
	gap: var(--cc-s2);
	inline-size: min(100%, 30rem);
	margin-block-start: var(--cc-s6);
	padding: var(--cc-s6) var(--cc-s6) var(--cc-s4);
	text-align: center;
}

.aws-cc .cc-answer__ring {
	align-items: center;
	animation: cc-ring-big 1.6s ease-out infinite;
	background: color-mix(in srgb, var(--cc-green) 14%, transparent);
	block-size: 64px;
	border-radius: 50%;
	color: var(--cc-green);
	display: flex;
	inline-size: 64px;
	justify-content: center;
	margin-block-end: var(--cc-s2);
}

@keyframes cc-ring-big {
	0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--cc-green) 45%, transparent); }
	70% { box-shadow: 0 0 0 18px transparent; }
	100% { box-shadow: 0 0 0 0 transparent; }
}

.aws-cc .cc-answer__line { margin: 0; }
.aws-cc .cc-answer__who { font-size: 34px; line-height: 1.1; margin: 0; }
.aws-cc .cc-answer__where { margin: 0; }
.aws-cc .cc-answer__clock { justify-content: center; margin: var(--cc-s1) 0 var(--cc-s3); }

.aws-cc .cc-answer__do {
	display: grid;
	gap: var(--cc-s3);
	grid-template-columns: 1fr 1fr;
	inline-size: 100%;
}

.aws-cc .cc-answer__accept,
.aws-cc .cc-answer__decline {
	font-size: 16px;
	justify-content: center;
	min-block-size: 52px;
}

.aws-cc .cc-answer__accept { background: var(--cc-green); border-color: var(--cc-green); color: white; }
.aws-cc .cc-answer__accept:hover { background: color-mix(in srgb, var(--cc-green) 85%, black); }
.aws-cc .cc-answer__decline { border-color: color-mix(in srgb, var(--cc-red) 55%, transparent); color: var(--cc-red); }
.aws-cc .cc-answer__decline:hover { background: color-mix(in srgb, var(--cc-red) 8%, transparent); }

@media (prefers-reduced-motion: reduce) {
	.aws-cc .cc-answer__ring { animation: none; }
}

.aws-cc .cc-dot--pulse {
	animation: cc-pulse 1.2s ease-in-out infinite;
}

@keyframes cc-pulse {
	50% { opacity: 0.25; }
}

/* Naming a caller known only by number. */
.aws-cc .cc-name {
	display: flex;
	gap: 6px;
	margin-block: 6px 10px;
}

.aws-cc .cc-name .cc-input {
	min-block-size: 32px;
	padding-block: 4px;
}

/* ---- W119 · The office: /callcenter/ ---- */

.cc-office {
	box-sizing: border-box;
	font-family: var(--cc-body);
	margin-inline: auto;
	max-inline-size: 1240px;
	padding: var(--cc-s6) var(--cc-s6) 64px;
}

.cc-office--locked { display: grid; justify-items: center; gap: var(--cc-s3); padding-block: 15vh; text-align: center; }

.cc-office__nav {
	align-items: center;
	border-block-end: 1px solid var(--cc-divider);
	display: flex;
	gap: var(--cc-s4);
	/* Close over what the tab opens: the room starts under its tab. */
	margin-block-end: var(--cc-s3);
	padding-block-end: var(--cc-s2);
}

.cc-office__tab {
	border-block-end: 2px solid transparent;
	color: var(--cc-muted);
	font-size: 14px;
	padding-block: 6px;
	text-decoration: none;
}

.cc-office__tab:hover { color: var(--cc-text); }
.cc-office__tab.is-on { border-color: var(--cc-accent); color: var(--cc-text); }
.cc-office__fill { flex: 1; }
.cc-office__said { color: var(--cc-green); margin: 0 0 var(--cc-s3); }

.cc-office__title {
	font-family: var(--cc-heading);
	font-size: 34px;
	font-variant-numeric: lining-nums;
	font-weight: 400;
	margin: 0 0 var(--cc-s2);
}

.cc-office__title .cc-muted { font-family: var(--cc-body); font-size: 15px; }

.cc-office__sub {
	align-items: baseline;
	display: flex;
	font-family: var(--cc-heading);
	font-size: 20px;
	font-weight: var(--cc-heading-weight);
	gap: var(--cc-s2);
	margin: var(--cc-s6) 0 var(--cc-s2);
}

.cc-office__more { font-family: var(--cc-body); font-size: 12px; font-weight: 400; margin-inline-start: auto; }
.cc-office__crumb { color: var(--cc-muted); font-size: 12px; margin: 0 0 4px; }
.cc-office__text { margin: 0; white-space: normal; }
.cc-office__two { display: grid; gap: var(--cc-s6); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin-block-start: var(--cc-s4); }
.cc-office__form { display: flex; flex-direction: column; gap: 4px; align-self: start; }
.cc-office__form .aws-cc-btn { align-self: flex-start; background: none; cursor: pointer; font: inherit; }

.cc-office__filters { align-items: flex-end; display: flex; flex-wrap: wrap; gap: var(--cc-s3); margin-block: var(--cc-s3) var(--cc-s4); }
.cc-office__filter { display: flex; flex-direction: column; font-size: 12px; gap: 4px; }
.cc-office__filter span { color: var(--cc-muted); }
.cc-office__filter :is(select, input) { background: var(--cc-bg); border: 1px solid var(--cc-divider); border-radius: var(--cc-r-md); color: var(--cc-text); font: inherit; font-size: 13px; padding: 6px 8px; }
.cc-office__filters .aws-cc-btn { background: none; cursor: pointer; font: inherit; }

.cc-tiles { display: grid; gap: var(--cc-s3); grid-template-columns: repeat(6, minmax(0, 1fr)); margin-block: var(--cc-s3); }

.cc-tile {
	border: 1px solid var(--cc-divider);
	border-radius: var(--cc-r-md);
	color: inherit;
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: var(--cc-s3);
	text-decoration: none;
}

a.cc-tile:hover { border-color: var(--cc-accent); }
.cc-tile__value { font-family: var(--cc-heading); font-size: 36px; line-height: 1; }
.cc-tile.is-hot .cc-tile__value { color: var(--cc-red); }

.cc-table { border-collapse: collapse; font-size: 13px; inline-size: 100%; }
.cc-table th { border-block-end: 1px solid var(--cc-divider); color: var(--cc-muted); font-size: 10.5px; font-weight: 400; letter-spacing: 0.08em; padding: 6px 8px; text-align: start; text-transform: uppercase; }
.cc-table td { border-block-end: 1px solid var(--cc-divider); padding: 8px; vertical-align: top; }
.cc-table .cc-r { text-align: end; }
.cc-table .cc-c { text-align: center; }
.cc-table .is-hot { color: var(--cc-red); }
.cc-table a { color: var(--cc-accent-700); text-decoration: none; }
.cc-table a:hover { text-decoration: underline; }
.cc-office .cc-pill--red { border-color: var(--cc-red); color: var(--cc-red); }
.cc-rec-mark { color: var(--cc-red); font-size: 10px; }

.cc-office__pages { display: flex; gap: 6px; margin-block-start: var(--cc-s3); }
.cc-office__pages a { border: 1px solid var(--cc-divider); border-radius: var(--cc-r-sm); color: inherit; padding: 2px 9px; text-decoration: none; }
.cc-office__pages a.is-on { border-color: var(--cc-accent); color: var(--cc-accent-700); }

.cc-facts { display: grid; gap: 6px var(--cc-s3); grid-template-columns: max-content 1fr; margin: 0; }
.cc-facts dt { color: var(--cc-muted); }
.cc-facts dd { margin: 0; }
.cc-facts a, .cc-office__crumb a, .cc-office .cc-tickets a { color: var(--cc-accent-700); text-decoration: none; }
.cc-audio { inline-size: 100%; margin-block-start: var(--cc-s2); }

/* The office's tokens and pieces, outside the .aws-cc sections they were written for. */
.cc-office .cc-kicker { color: var(--cc-muted); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; }
.cc-office .cc-muted { color: var(--cc-muted); }
.cc-office .cc-small { font-size: 11px; }
.cc-office .cc-num { font-variant-numeric: lining-nums tabular-nums; }
.cc-office .cc-empty { color: var(--cc-muted); }
.cc-office .cc-r { text-align: end; }
.cc-office .cc-card { border: 1px solid var(--cc-divider); border-radius: var(--cc-r-md); padding: var(--cc-s4); }
.cc-office .cc-pill { border: 1px solid var(--cc-divider); border-radius: var(--cc-r-sm); display: inline-block; font-size: 11px; padding: 1px 7px; }
.cc-office .cc-pill--accent { background: var(--cc-accent-100); border-color: transparent; color: var(--cc-accent-700); }
.cc-office .cc-field { display: flex; flex-direction: column; gap: 6px; margin-block-end: var(--cc-s3); }
.cc-office .cc-field__label { font-size: 13px; }
.cc-office .cc-input { background: transparent; border: 1px solid var(--cc-divider); border-radius: var(--cc-r-md); box-sizing: border-box; color: var(--cc-text); font: inherit; inline-size: 100%; padding: 8px 10px; }
.cc-office .cc-tickets { list-style: none; margin: 0; padding: 0; }
.cc-office .cc-tickets li { align-items: center; border-block-end: 1px solid var(--cc-divider); display: flex; gap: 10px; padding: 7px 0; }
.cc-office .cc-grow { flex: 1; }
.cc-office .cc-timeline { list-style: none; margin: 0; padding: 0 0 0 18px; position: relative; }
.cc-office .cc-timeline::before { border-inline-start: 1px solid var(--cc-divider); content: ""; inset-block: 6px; inset-inline-start: 5px; position: absolute; }
.cc-office .cc-timeline > li { margin-block-end: var(--cc-s3); position: relative; }
.cc-office .cc-timeline > li::before { background: var(--cc-bg); block-size: 9px; border: 1px solid var(--cc-accent); border-radius: 50%; content: ""; inline-size: 9px; inset-block-start: 4px; inset-inline-start: -18px; position: absolute; }
.cc-office .cc-timeline > li > p, .cc-office .cc-timeline > li > details > summary > p { margin: 0 0 4px; }

/* The latest calls are the wider half; times and numbers stay on one line. */
.cc-office__two--wide { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr); }
.cc-table td.cc-num, .cc-table td:first-child { white-space: nowrap; }

/* A website's share buttons have nothing to share in an office or a workspace. */
html:has(.aws-cc, .aws-cc-office-block) nav.aws-social { display: none !important; }

/* ---- The office's panel: an item slides over its list ---- */

.cc-drawer-root { inset: 0; pointer-events: none; position: fixed; z-index: 99990; }

/* The office panel's own backdrop: only the panel's -- the wrap-up's is another, and this made it invisible. */
.cc-drawer-root .cc-backdrop {
	background: color-mix(in srgb, var(--cc-text) 22%, transparent);
	inset: 0;
	opacity: 0;
	pointer-events: auto;
	position: absolute;
	transition: opacity 0.25s ease;
}

.cc-drawer {
	background: var(--cc-bg);
	border-inline-start: 1px solid var(--cc-divider);
	box-shadow: var(--cc-shadow);
	box-sizing: border-box;
	inset-block: var(--wp-admin--admin-bar--height, 0px) 0;
	inset-inline-end: 0;
	inline-size: min(100%, 62rem);
	outline: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 0 var(--cc-s6) var(--cc-s6);
	pointer-events: auto;
	position: absolute;
	transform: translateX(100%);
	transition: transform 0.28s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.cc-drawer-root.is-open .cc-backdrop { opacity: 1; }
.cc-drawer-root.is-open .cc-drawer { transform: none; }
html.cc-locked { overflow: hidden; }

.cc-drawer__bar {
	background: var(--cc-bg);
	display: flex;
	justify-content: flex-end;
	margin-inline: calc(-1 * var(--cc-s6));
	padding: var(--cc-s2) var(--cc-s3);
	position: sticky;
	top: 0;
	z-index: 1;
}

.cc-drawer__close {
	align-items: center;
	block-size: 34px;
	border: 1px solid var(--cc-divider);
	border-radius: var(--cc-r-md);
	color: var(--cc-text);
	display: grid;
	font-size: 20px;
	inline-size: 34px;
	justify-items: center;
	text-decoration: none;
}

.cc-drawer__close:hover { border-color: var(--cc-accent); color: var(--cc-accent-700); }
.cc-drawer .cc-office__title { font-size: 30px; }
.cc-drawer .cc-office__two { grid-template-columns: minmax(0, 1fr); }

@media (prefers-reduced-motion: reduce) {
	.cc-drawer-root .cc-backdrop, .cc-drawer { transition: none; }
}

/* A call announced where it cannot be taken: the office's bar. */
.aws-cc .cc-incoming {
	align-items: center;
	animation: cc-ring 1.4s ease-out infinite;
	border: 1px solid var(--cc-accent);
	border-radius: var(--cc-r-md);
	color: var(--cc-accent-700);
	display: inline-flex;
	gap: 8px;
	padding: 6px 12px;
	text-decoration: none;
	white-space: nowrap;
}

.aws-cc .cc-incoming strong { font-weight: 600; }
.aws-cc .cc-incoming:hover { background: var(--cc-tint); }

/*
 * A ticket's conversation is the platform's own comment thread -- the support
 * desk's markup and its rules -- given the office's tokens, so it reads as
 * the desk's thread does, in this design.
 */
.cc-office {
	--aws-careers-ink: var(--cc-text);
	--aws-careers-ground: var(--cc-bg);
	--aws-careers-panel: var(--cc-surface);
	--aws-careers-line: 1px;
}

.cc-office .aws-support__thread, .cc-slide .aws-support__thread { padding: 0; }
.cc-office .aws-support__msg, .cc-slide .aws-support__msg { border-bottom: 1px solid var(--cc-divider); }
.cc-office .aws-support__view, .cc-slide .aws-support__view { display: inline-flex; gap: 4px; margin-block-end: var(--cc-s2); }

.cc-office .aws-support__mode, .cc-slide .aws-support__mode {
	background: transparent;
	border: 1px solid var(--cc-divider);
	border-radius: var(--cc-r-md);
	color: var(--cc-muted);
	cursor: pointer;
	font: inherit;
	font-size: 12px;
	padding: 4px 10px;
}

.cc-office .aws-support__mode.is-on, .cc-slide .aws-support__mode.is-on { border-color: var(--cc-accent); color: var(--cc-accent-700); }
.cc-office .aws-support__answers, .cc-slide .aws-support__answers { color: var(--cc-muted); font-size: 12px; text-decoration: none; }
.cc-office .aws-say__vote[aria-pressed="true"], .cc-slide .aws-say__vote[aria-pressed="true"] { color: var(--cc-accent-700); }

/* "Today" and its figures on one line, the figures centred on the word. */
.cc-office__today {
	align-items: center;
	display: flex;
	gap: var(--cc-s6);
}

.cc-office__today .cc-office__title { flex: none; margin: 0; }
.cc-office__today .cc-tiles { flex: 1; margin: 0; }
.cc-office__today .cc-tile { padding: var(--cc-s2) var(--cc-s3); }
.cc-office__today .cc-tile__value { font-size: 28px; }

/* The bar never wraps: names and badges stay on their line. */
.aws-cc .cc-answering,
.aws-cc .cc-agent__name,
.aws-cc .cc-agent__role { white-space: nowrap; }

/* On the office there is no call to be answering for. */
html:has(.aws-cc-office-block) .aws-cc .cc-answering { display: none; }

/* A row of figures says each on one line. */
.cc-office .cc-table td { white-space: nowrap; }
.cc-office .cc-table td:has(.cc-pill) { white-space: normal; }

/* The figures are tabs: the one chosen shows its clients below. */
.cc-office button.cc-tile { background: transparent; cursor: pointer; font: inherit; text-align: start; }
.cc-office .cc-tile:hover { border-color: var(--cc-accent); }
.cc-office .cc-tile.is-on { background: var(--cc-tint); border-color: var(--cc-accent); }
.cc-office .cc-tile:focus-visible { outline: 2px solid var(--cc-accent); outline-offset: 2px; }
.cc-office .cc-table tfoot td { border-block-end: 0; color: var(--cc-muted); font-weight: 600; }

/* Each figure's name and number, centred in its box. */
.cc-office .cc-tile { align-items: center; text-align: center; }
.cc-office button.cc-tile { text-align: center; }

/* A figure's clients open under the figures, as wide as the figures. */
.cc-office .cc-by { margin-block-start: var(--cc-s4); }

/* A call's facts, one column each, in the panel: room to wrap a line within a cell. */
.cc-office .cc-table--facts { margin-block: var(--cc-s3) var(--cc-s2); }
.cc-office .cc-table--facts td { vertical-align: top; white-space: normal; }
.cc-office .cc-table--facts td a { white-space: nowrap; }
.cc-office .cc-table--facts .cc-num,
.cc-office .cc-table--facts td:nth-child(n+6) { white-space: nowrap; }

/* An item's panel is headed by whose it is: the client, with its badge. */
.cc-office__head { align-items: center; display: flex; gap: var(--cc-s3); margin-block: var(--cc-s2) var(--cc-s3); }
.cc-office__head .cc-office__title { margin: 0; }
.cc-office__head .cc-office__title a { color: inherit; text-decoration: none; }
.cc-office__head p { margin: 2px 0 0; }

.cc-office__mono {
	align-items: center;
	block-size: 44px;
	border: 1px solid var(--cc-accent);
	border-radius: var(--cc-r-sm);
	color: var(--cc-accent-700);
	display: grid;
	flex: none;
	font-family: var(--cc-heading);
	font-size: 20px;
	font-weight: var(--cc-heading-weight);
	inline-size: 44px;
	justify-items: center;
}

/* A part of a panel with nothing in it -- no recording -- takes no room. */
.cc-office .cc-office__two > section:not(:has(*)) { display: none; }

/* The recording, in its column: small enough to sit beside the rest. */
.cc-office .cc-table--facts .cc-audio { block-size: 36px; inline-size: 240px; margin: 0; }

.cc-office .cc-table--facts td:nth-child(2), .cc-office .cc-table--facts td:nth-child(3) { white-space: nowrap; }

/* The thread in the office's own size and lines. */
.cc-office .aws-support__view, .cc-slide .aws-support__view { border: 0; padding: 0; }
.cc-office .aws-support__msg-body, .cc-slide .aws-support__msg-body { font-size: 14px; }
.cc-office .aws-support__msg-body p, .cc-slide .aws-support__msg-body p { margin: 0 0 6px; }
.cc-office .aws-support__msg.is-notes .aws-support__avatar, .cc-slide .aws-support__msg.is-notes .aws-support__avatar { background: oklch(0.86 0.1 90); }
.cc-office .cc-office__say { margin-block-start: var(--cc-s3); }

/* A call's row says each thing on one line; what does not fit is behind an icon. */
.cc-office .cc-table--facts td,
.cc-office .cc-table--facts td a { white-space: nowrap; }
.cc-office .cc-clip { display: inline-block; max-inline-size: 11rem; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
.cc-office .cc-inline { align-items: center; display: inline-flex; gap: 4px; }

.cc-office .cc-info {
	color: var(--cc-muted);
	cursor: help;
	display: inline-flex;
	margin-inline-start: 4px;
	position: relative;
	vertical-align: -2px;
}

.cc-office .cc-info:hover,
.cc-office .cc-info:focus-visible { color: var(--cc-accent-700); outline: 0; }

.cc-office .cc-info__tip {
	background: var(--cc-text);
	border-radius: var(--cc-r-md);
	color: var(--cc-bg);
	font-size: 12px;
	inset-block-end: calc(100% + 6px);
	inset-inline-start: 50%;
	opacity: 0;
	padding: 5px 9px;
	pointer-events: none;
	position: absolute;
	transform: translateX(-50%);
	transition: opacity 0.15s;
	white-space: nowrap;
	z-index: 5;
}

.cc-office .cc-info:is(:hover, :focus-visible) .cc-info__tip { opacity: 1; }

/* Summary and notes side by side in a call's panel, each with its conversation. */
.cc-drawer .cc-office__cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
.cc-office .cc-col .cc-office__sub { margin-block-start: var(--cc-s3); }
.cc-office .cc-col .aws-support__view { float: right; margin-block-start: -38px; }

/* A call's row fits its panel: the player is compact, and the row scrolls before it spills. */
.cc-office .cc-scroll { overflow-x: auto; }
.cc-office .cc-table--facts .cc-audio { inline-size: 190px; }

/* A call's Summary and Call notes, as tabs over one conversation at a time. */
.cc-office .cc-office__tabs { border-block-end: 1px solid var(--cc-divider); display: flex; gap: var(--cc-s4); margin-block: var(--cc-s4) var(--cc-s3); }
.cc-office button.cc-office__tab { background: none; border: 0; border-block-end: 2px solid transparent; cursor: pointer; font: inherit; font-size: 15px; padding: 6px 0; }
.cc-office button.cc-office__tab.is-on { border-color: var(--cc-accent); color: var(--cc-text); }
.cc-office .cc-col .aws-support__view { float: none; margin-block: 0 var(--cc-s2); }

/* The comment box, moved under the line it answers. */
.cc-office .aws-support__answer, .cc-slide .aws-support__answer { margin: var(--cc-s2) 0 var(--cc-s2) 40px; }
.cc-office form.is-answering { border-inline-start: 2px solid var(--cc-accent); padding-inline-start: var(--cc-s3); }
.cc-office .cc-input:focus-visible { border-color: var(--cc-accent); outline: 2px solid color-mix(in srgb, var(--cc-accent) 35%, transparent); outline-offset: 0; }

/* The view switch at the right end of its line. */
.cc-office .cc-thread, .cc-slide .cc-thread { display: flex; flex-direction: column; }
.cc-office .cc-thread > .aws-support__view, .cc-slide .cc-thread > .aws-support__view { align-self: flex-end; }
.cc-office .cc-thread > .aws-support__thread, .cc-slide .cc-thread > .aws-support__thread { align-self: stretch; }

/* A call's facts on the same line as its player, all centred on it. */
.cc-office .cc-table--facts td { vertical-align: middle; }

/* A call's facts across the whole panel, each column given room. */
.cc-office .cc-table--facts { inline-size: 100%; }
.cc-office .cc-table--facts :is(th, td) { padding-inline: 10px; }
.cc-office .cc-table--facts :is(th, td):first-child { padding-inline-start: 0; }
.cc-office .cc-table--facts :is(th, td):last-child { padding-inline-end: 0; text-align: end; }

.cc-office .cc-table--facts .cc-audio { inline-size: 160px; }
.cc-office .cc-table--facts .cc-clip { max-inline-size: 9rem; }

/* Tooltips at the row's right end open leftwards, inside the panel. */
.cc-office .cc-table--facts td:nth-last-child(-n+2) .cc-info__tip { inset-inline: auto 0; transform: none; }
.cc-office .cc-scroll { overflow: visible; }

/* The office across the whole window: its lists and tables full width. */
.cc-office { max-inline-size: none; padding-inline: var(--cc-s6); }
html:has(.aws-cc-office-block) main :is(.aws-grid, .wp-block-aws-front-content, .entry-content, .wp-block-post-content) { max-inline-size: none; padding-inline: 0; }
html:has(.aws-cc-office-block) .aws-cc-office-block { max-inline-size: none !important; margin-inline: 0 !important; }

/* A caller's name, email and Save on one line. */
.cc-office__pair { align-items: end; display: grid; gap: var(--cc-s3); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; }
.cc-office__form .cc-office__pair .aws-cc-btn { align-self: end; block-size: 37px; }
.cc-office__pair .cc-field { margin-block-end: 0; }
@media (max-width: 640px) { .cc-office__pair { grid-template-columns: minmax(0, 1fr); } .cc-office__pair .aws-cc-btn { justify-self: start; } }

/* While the lines connect: a spinner in the bar, no words. */
.aws-cc .cc-spinner { animation: cc-spin 0.8s linear infinite; block-size: 16px; border: 2px solid var(--cc-divider); box-sizing: border-box; border-block-start-color: var(--cc-accent); border-radius: 50%; flex: none; inline-size: 16px; }
@keyframes cc-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .aws-cc .cc-spinner { animation-duration: 2.4s; } }

/* The agent's name: a menu of the rest of the site, and the way out. */
.aws-cc .cc-agent__me { align-items: center; background: none; border: 0; color: inherit; cursor: pointer; display: flex; font: inherit; gap: 10px; padding: 0; }
.aws-cc .cc-agent__me > span:nth-of-type(2) { display: flex; flex-direction: column; line-height: 1.2; text-align: start; }
.aws-cc .cc-agent__me > svg { color: var(--cc-muted); }
.aws-cc .cc-pop--me { inline-size: 200px; }
.aws-cc a.cc-pop__row { color: inherit; text-decoration: none; }
.aws-cc .cc-pop__row--out { border-block-start: 1px solid var(--cc-divider); border-radius: 0; margin-block-start: 4px; padding-block-start: 10px; }

/* Between calls: the agent's day in the middle of the workspace. */
/* The whole of the column, inside its own padding: no second margin, no cap leaving a gutter either side. */
.aws-cc .cc-idle { display: flex; flex-direction: column; gap: var(--cc-s4); padding: 0; }
.aws-cc .cc-idle__head .cc-title { margin-block: 4px 6px; }
.aws-cc .cc-idle__head p { margin: 0; }
.aws-cc .cc-idle__tiles { display: grid; gap: var(--cc-s3); grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }
.aws-cc .cc-idle__tile { align-items: center; border: 1px solid var(--cc-divider); border-radius: var(--cc-r-md); display: flex; flex-direction: column; gap: 6px; padding: var(--cc-s3) var(--cc-s4); text-align: center; }
.aws-cc .cc-idle__tile.is-owed { border-color: var(--cc-accent); }
.aws-cc .cc-idle__value { font-family: var(--cc-heading); font-size: 30px; line-height: 1; }
.aws-cc .cc-idle__part h3 { border-block-end: 1px solid var(--cc-divider); margin: 0 0 4px; padding-block-end: 8px; }
.aws-cc .cc-idle__part > p { margin: var(--cc-s3) 0 0; }
.aws-cc .cc-idle__table { border-collapse: collapse; font-size: 14px; inline-size: 100%; }
.aws-cc .cc-idle__table th { color: var(--cc-muted); font-size: 11px; font-weight: 400; letter-spacing: 0.08em; padding: 8px var(--cc-s4) 8px 0; text-align: start; text-transform: uppercase; }
.aws-cc .cc-idle__table td { border-block-start: 1px solid var(--cc-divider); padding: 9px var(--cc-s4) 9px 0; vertical-align: middle; white-space: nowrap; }
.aws-cc .cc-idle__table .cc-r { text-align: end; }
.aws-cc .cc-idle__table :is(th, td):last-child { padding-inline-end: 0; }
.aws-cc .cc-idle__who, .aws-cc .cc-idle__table td > .cc-small { display: block; }
.aws-cc .cc-idle__who a { color: var(--cc-accent-700); text-decoration: none; }
.aws-cc .cc-idle__table .is-late { color: var(--cc-red); }
.aws-cc .cc-btn--sm { font-size: 13px; gap: 6px; min-block-size: 0; padding: 5px 10px; }

/* Between calls: the lines this agent answers, under an empty list of calls. */
.aws-cc .cc-lines { border-block-start: 1px solid var(--cc-divider); display: flex; flex-direction: column; gap: 2px; margin-block-start: var(--cc-s4); padding-block-start: var(--cc-s3); }
.aws-cc .cc-lines .cc-kicker { margin: 0; }
.aws-cc .cc-lines .cc-line { align-items: center; display: grid; gap: 10px; grid-template-columns: auto minmax(0, 1fr); padding-block: 6px; }
.aws-cc .cc-line__who { display: flex; flex-direction: column; line-height: 1.25; min-inline-size: 0; }
.aws-cc .cc-line__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aws-cc .cc-line__state { align-items: center; color: var(--cc-muted); display: flex; font-size: 11px; gap: 6px; grid-column: 2; }
.aws-cc .cc-line__state.is-open { color: var(--cc-text); }

/* Between calls: open tickets in the middle, the client's templates on the right. */
.aws-cc .cc-idle__subject { max-inline-size: 200px; overflow: hidden; text-overflow: ellipsis; }
.aws-cc .cc-idle-tpl__one { border-block-start: 1px solid var(--cc-divider); padding-block: 10px; }
.aws-cc .cc-idle-tpl__one:first-of-type { border-block-start: 0; }
.aws-cc .cc-idle-tpl__name { font-weight: 600; margin: 0 0 3px; }
.aws-cc .cc-idle-tpl__type { color: var(--cc-accent-700, currentColor); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.aws-cc .cc-idle-tpl__body { -webkit-box-orient: vertical; -webkit-line-clamp: 3; color: var(--cc-muted); display: -webkit-box; font-size: 12px; margin: 0; overflow: hidden; }

/* The client's templates under the caller's card on a call, apart from it. */
.aws-cc .cc-card + .cc-idle-tpl { margin-block-start: var(--cc-s3); }

/* Contact reason: a dropdown of the client's reasons, more than one may be ticked. */
.aws-cc .cc-reason { display: block; margin-block-end: var(--cc-s3); }

.aws-cc .cc-reason__btn {
	align-items: center;
	background: var(--cc-bg);
	border: 1px solid var(--cc-divider);
	border-radius: var(--cc-r-md);
	color: var(--cc-text);
	cursor: pointer;
	display: flex;
	font: inherit;
	gap: 8px;
	inline-size: 100%;
	justify-content: space-between;
	min-block-size: 36px;
	padding: 6px 10px;
	text-align: start;
}

.aws-cc .cc-reason__btn:hover,
.aws-cc .cc-reason__btn.is-on { border-color: var(--cc-accent); }
.aws-cc .cc-reason__chosen { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aws-cc .cc-pop--reason { inline-size: 100%; inset-inline-start: 0; max-block-size: 260px; overflow-y: auto; }
.aws-cc .cc-reason__one { align-items: center; display: flex; gap: 8px; }
.aws-cc .cc-reason__tick { align-items: center; block-size: 16px; border: 1px solid var(--cc-divider); border-radius: 3px; color: var(--cc-accent-700); display: inline-flex; flex: none; font-size: 12px; inline-size: 16px; justify-content: center; }
.aws-cc .cc-reason__one.is-on .cc-reason__tick { background: var(--cc-tint); border-color: var(--cc-accent); }
.aws-cc .cc-history-fold > summary:not(:has(.cc-muted, .cc-synced))::after { margin-inline-start: auto; }

/* The panel sliding in from the right over the workspace: a ticket, or a call and its caller. */
.cc-slide-root { inset: 0; position: fixed; z-index: 300; }
.cc-slide__back { background: color-mix(in srgb, #000 35%, transparent); inset: 0; opacity: 0; position: absolute; transition: opacity .2s ease; }
.cc-slide-root.is-open .cc-slide__back { opacity: 1; }

.cc-slide {
	background: var(--cc-bg);
	block-size: 100%;
	box-shadow: var(--cc-shadow);
	color: var(--cc-text);
	display: flex;
	flex-direction: column;
	font-family: var(--cc-body);
	inline-size: min(560px, 100%);
	inset-block: 0;
	inset-inline-end: 0;
	position: absolute;
	transform: translateX(100%);
	transition: transform .22s ease;
}

.cc-slide:focus { outline: none; }
.cc-slide-root.is-open .cc-slide { transform: none; }
.cc-slide__bar { align-items: center; border-block-end: 1px solid var(--cc-divider); display: flex; justify-content: space-between; padding: 12px 20px; }
.cc-slide__x { background: none; border: 1px solid var(--cc-divider); border-radius: var(--cc-r-md); color: var(--cc-text); cursor: pointer; font-size: 20px; line-height: 1; padding: 4px 10px; }
.cc-slide__body { flex: 1; overflow-y: auto; padding: 18px 20px 28px; }
.cc-slide__title { font-family: var(--cc-heading); font-size: 26px; font-weight: 400; margin: 4px 0 12px; }
.cc-slide__facts { display: grid; gap: 8px 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0 0 16px; }
.cc-slide__facts div { min-inline-size: 0; }
.cc-slide__facts dt { color: var(--cc-muted); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.cc-slide__facts dd { margin: 2px 0 0; overflow-wrap: anywhere; }
.cc-slide__h { border-block-start: 1px solid var(--cc-divider); margin: 16px 0 8px; padding-block-start: 12px; }
.cc-slide__text { margin: 0; white-space: pre-wrap; }
.cc-slide__links { display: flex; gap: 8px; margin: 18px 0 0; }
/* Who called, and its recording at the right: a red play, its length beside it. */
.cc-slide__titlerow { align-items: center; display: flex; gap: 12px; justify-content: space-between; }
.cc-slide__titlerow .cc-slide__title { min-inline-size: 0; }
.cc-slide__play { align-items: center; background: none; border: 0; color: var(--cc-muted); cursor: pointer; display: inline-flex; flex: none; font: inherit; font-size: 12px; gap: 8px; padding: 0; }
.cc-slide__play-dot { align-items: center; background: var(--cc-red); block-size: 34px; border-radius: 50%; color: white; display: inline-flex; inline-size: 34px; justify-content: center; transition: transform 0.15s; }
.cc-slide__play-dot svg { fill: currentColor; margin-inline-start: 2px; }
.cc-slide__play[aria-pressed="true"] .cc-slide__play-dot svg { margin-inline-start: 0; }
.cc-slide__play:hover .cc-slide__play-dot { transform: scale(1.06); }
.cc-slide__play:focus-visible .cc-slide__play-dot { outline: 2px solid var(--cc-red); outline-offset: 2px; }
.cc-slide__play.is-failed .cc-slide__play-dot { background: var(--cc-gray); }
/* In a list of calls: the same play, smaller, the row giving its length. */
.cc-slide__play--sm .cc-slide__play-dot { block-size: 26px; inline-size: 26px; }
.cc-slide__play--sm .cc-slide__play-dot svg { block-size: 11px; inline-size: 11px; }
.cc-slide-open { font: inherit; }
.cc-slide__say { display: flex; flex-direction: column; gap: 8px; margin-block-start: 12px; }
.cc-slide__say .aws-cc-btn { align-self: flex-start; }
.cc-slide__say .cc-field { margin: 0; }
.cc-slide .aws-support__answer .cc-slide__say { margin-block-start: 0; }

/* A comment box shut until Comment is chosen, beside the thumbs as everywhere comments are. */
.cc-office__open { margin: var(--cc-s2) 0 0; }
.cc-office__open[hidden] { display: none; }
.cc-office__go { display: flex; gap: var(--cc-s2); justify-content: flex-end; margin: 0; }
.aws-cc-btn--ghost { border-color: var(--cc-divider); color: var(--cc-text); }
.aws-cc .aws-say__reply[data-cc-open] { font-weight: 600; }
:is(.cc-office, .cc-slide) [data-cc-box][hidden],
.cc-slide__say[hidden] { display: none; }
.cc-office__go.is-start { justify-content: flex-start; }
.cc-office__go [hidden] { display: none; }

/* An earlier call in the panel: its line, and under it what was said about it, folded until opened. */
.cc-slide__earlier > summary { cursor: pointer; list-style: none; }
.cc-slide__earlier > summary::-webkit-details-marker { display: none; }
.cc-slide__earlier > summary .cc-history-count { margin-inline-start: 6px; }
.cc-slide__earlier[open] > summary { margin-block-end: var(--cc-s2); }
.cc-slide .cc-office__open { margin-block-end: var(--cc-s3); }

/*
 * On a phone: the bar keeps what it needs -- whose, light or dark, the person
 * -- and the office's tabs scroll sideways rather than the page. The Studio's
 * members clip from their phones; the call center's office reads the same.
 */
@media (max-width: 40rem) {
	.aws-cc .cc-bar { gap: var(--cc-s2); padding-inline: var(--cc-s3); }
	.aws-cc .cc-bar__brand { flex: 1; inline-size: auto; }
	.aws-cc .cc-bar__fill,
	.aws-cc .cc-bar__kind,
	.aws-cc .cc-agent__me > span:nth-of-type(2) { display: none; }
	.aws-cc .cc-agent { padding-inline-start: var(--cc-s2); }
	.cc-office { padding-inline: var(--cc-s3); }
	.cc-office__nav { overflow-x: auto; scrollbar-width: none; }
	.cc-office__tab { flex: none; white-space: nowrap; }
}

/* The Studio's video cards: their titles in the app's heading type (the cards themselves are in blocks.css). */
.aws-studio__title { font-family: var(--cc-heading); }

/* The Studio's Help popup is titled in the office's heading face, as its rooms are. */
.aws-cc .aws-studio__help-title { font-family: var(--cc-heading); }

/*
 * What brought a call: the campaign's chip on the call (or "Sign"), and what
 * the caller saw -- the campaign's headline, offer code and message, and the
 * sign -- on hover or focus; shown outright on the ringing call.
 */
.aws-cc .cc-task { position: relative; }

.aws-cc .cc-src { display: inline-flex; margin-inline-start: var(--cc-s1); vertical-align: middle; }

.aws-cc .cc-src__chip {
	background: var(--cc-tint);
	border: 1px solid var(--cc-accent);
	border-radius: var(--cc-r-sm);
	color: var(--cc-accent-700);
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.04em;
	line-height: 1.5;
	padding: 0 6px;
	white-space: nowrap;
}

.aws-cc .cc-src__pop {
	display: none;
	inset-block-start: 100%;
	inset-inline: 0;
	/* The gap under the call is the card's own, so the pointer can cross it to the card's button. */
	padding-block-start: 4px;
	position: absolute;
	z-index: 30;
}

/* On the call in the list: hovering the call shows what brought it; so does focusing its chip. */
.aws-cc .cc-task:hover .cc-src__pop,
.aws-cc .cc-src:is(:hover, :focus, :focus-within) .cc-src__pop { display: block; }
.aws-cc .cc-title .cc-src__pop { inset-inline: auto; inline-size: min(26rem, 80vw); }
.aws-cc .cc-title .cc-src { position: relative; }

.aws-cc .cc-src__card {
	background: var(--cc-surface);
	border: 1px solid var(--cc-divider);
	border-radius: var(--cc-r-md);
	box-shadow: var(--cc-shadow);
	color: var(--cc-text);
	display: grid;
	font-family: var(--cc-body);
	font-size: 12.5px;
	font-weight: 400;
	gap: 4px;
	letter-spacing: 0;
	line-height: 1.45;
	padding: var(--cc-s2) var(--cc-s3);
	text-align: start;
	text-transform: none;
}

.aws-cc .cc-src__card p { margin: 0; }
.aws-cc .cc-src__kicker { color: var(--cc-accent-700); margin-block-start: 4px; }
.aws-cc .cc-src__kicker:first-child { margin-block-start: 0; }
.aws-cc .cc-src__head { font-weight: 600; }
.aws-cc .cc-src__msg { color: var(--cc-muted); }
.aws-cc .cc-src__offer b { background: var(--cc-tint); border-radius: var(--cc-r-sm); padding: 0 5px; }

/* On the ringing call, what brought it is shown as it rings. */
.aws-cc .cc-answer__src { inline-size: 100%; }
.aws-cc .cc-answer__src .cc-src__card { box-shadow: none; }

.aws-cc .cc-src__more { margin-block-start: 4px; }
.aws-cc .cc-slide__offer { margin-block: var(--cc-s1) var(--cc-s2); }
.aws-cc .cc-slide__message { line-height: 1.55; }
.aws-cc .cc-slide__message p { margin: 0 0 var(--cc-s2); }

/* Every campaign, searched and paged, in the side panel under the call's own. */
.aws-cc .cc-camps { display: grid; gap: var(--cc-s2); }
.aws-cc .cc-camps__all { align-items: center; display: inline-flex; gap: 6px; }
.aws-cc .cc-camp { border-block-start: 1px solid var(--cc-divider); display: grid; gap: 3px; padding-block: var(--cc-s2); }
.aws-cc .cc-camp p { margin: 0; }
.aws-cc .cc-camp__name { font-weight: 600; }
.aws-cc .cc-camp a { color: var(--cc-accent-700); }
.aws-cc .cc-camps__pager { align-items: center; display: flex; gap: var(--cc-s2); justify-content: space-between; margin: 0; }

/* The client's campaigns, under its handling instructions. */
.aws-cc .cc-client-camps { display: grid; gap: 6px; list-style: none; margin: 0 0 var(--cc-s2); padding: 0; }
.aws-cc .cc-client-camps li { line-height: 1.4; }
.aws-cc .cc-client-camps .cc-link { color: var(--cc-accent-700); font-weight: 600; text-align: start; }
.aws-cc .cc-client-camps__head { display: block; }

/* A page in the side panel, drawn from the platform's own records: wider than a panel of words, the way back beside its name. */
.cc-slide.is-page { inline-size: min(1000px, 100%); }
.cc-slide__bar { gap: var(--cc-s3); }
.cc-slide__name { flex: 1; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* A sign's page, as visitors see it. */
.aws-cc .cc-signpage { border: 1px solid var(--cc-divider); border-radius: var(--cc-r-md); display: grid; gap: 6px; margin-block: var(--cc-s2) var(--cc-s3); padding: var(--cc-s3); }
.aws-cc .cc-signpage p { margin: 0; }
.aws-cc .cc-signpage__brand { align-items: center; display: flex; font-weight: 600; gap: var(--cc-s2); }
.aws-cc .cc-signpage__brand img { block-size: 32px; inline-size: auto; }
.aws-cc .cc-signpage__tag { border-radius: var(--cc-r-sm); font-size: 12px; font-weight: 700; justify-self: start; letter-spacing: .08em; padding: 3px 8px; text-transform: uppercase; }
.aws-cc .cc-signpage__price { font-size: 28px; font-weight: 700; line-height: 1.1; }
.aws-cc .cc-signpage__do { display: flex; flex-wrap: wrap; gap: var(--cc-s2); margin-block-start: var(--cc-s1); }
.aws-cc .cc-signpage__btn { background: var(--cc-text); border-radius: var(--cc-r-md); color: var(--cc-bg); font-weight: 600; padding: 8px 14px; }
.aws-cc .cc-signpage__btn.is-alt { background: transparent; border: 1px solid var(--cc-text); color: var(--cc-text); }

/* A campaign's landing page, rendered by its site's own blocks. */
.aws-cc .cc-landing { color: var(--wp--preset--color--ink, inherit); font-size: 15px; line-height: 1.55; }
.aws-cc .cc-landing img, .aws-cc .cc-landing video { block-size: auto; max-inline-size: 100%; }

/* Each campaign folded to its name, status and offer code; opened, the rest. */
.aws-cc details.cc-camp { gap: 0; }
.aws-cc .cc-camp__sum { align-items: center; cursor: pointer; display: flex; gap: var(--cc-s2); justify-content: space-between; list-style: none; }
.aws-cc .cc-camp__sum::-webkit-details-marker { display: none; }
.aws-cc .cc-camp__sum::after { color: var(--cc-muted); content: "▸"; flex: none; transition: transform .15s ease; }
.aws-cc details.cc-camp[open] > .cc-camp__sum::after { transform: rotate(90deg); }
.aws-cc .cc-camp__sum:focus-visible { outline: 2px solid var(--cc-accent); outline-offset: 2px; }
.aws-cc .cc-camp__tags { align-items: center; display: inline-flex; flex: none; gap: 6px; margin-inline-start: auto; }
.aws-cc .cc-camp__body { display: grid; gap: 3px; padding-block-start: var(--cc-s1); }
.aws-cc .cc-camp__body p { margin: 0; }

/* A site outside the platform, framed: the only page that is. */
.cc-slide__frame { background: #fff; border: 0; flex: 1; inline-size: 100%; }

/* The client card's folds: its handling instructions and its campaigns, each under its own line. */
.aws-cc .cc-client__fold { border-block-start: 1px solid var(--cc-divider); margin-block-start: var(--cc-s2); padding-block-start: var(--cc-s2); }
.aws-cc .cc-client__fold > summary .cc-kicker { margin: 0; }
.aws-cc .cc-client__fold .cc-sop, .aws-cc .cc-client__fold .cc-client-camps { margin-block-start: var(--cc-s2); }

/* Changed where it is read: a template, the instructions and greeting, a campaign's words. */
.aws-cc .cc-edit { border: 1px solid var(--cc-divider); border-radius: var(--cc-r-md); display: grid; gap: var(--cc-s2); margin-block: var(--cc-s2); padding: var(--cc-s2) var(--cc-s3); }
.aws-cc .cc-edit .cc-field { display: grid; gap: 4px; }
.aws-cc .cc-edit .cc-input { inline-size: 100%; }
.aws-cc .cc-edit textarea.cc-input { min-block-size: 5.5rem; resize: vertical; }
.aws-cc .cc-edit__do { align-items: center; display: flex; flex-wrap: wrap; gap: var(--cc-s2); margin: 0; }
.aws-cc .cc-edit__remove { color: var(--cc-red); margin-inline-start: auto; }
.aws-cc .cc-edit__err { color: var(--cc-red); font-size: 12.5px; margin: 0; }
.aws-cc .cc-edit-btn { margin-inline-start: var(--cc-s2); }

/* A list paged to its room: what is hidden is hidden, whatever display the row has. */
[data-aws-cc] [hidden] { display: none !important; }

/* Its search and date filter above it. */
.aws-cc .cc-fit { align-items: center; display: flex; flex-wrap: wrap; gap: var(--cc-s2); margin-block: 4px 6px; }
.aws-cc .cc-fit__q { flex: 1 1 10rem; font-size: 12.5px; min-inline-size: 0; padding-block: 4px; }
.aws-cc .cc-fit__range, .aws-cc .cc-fit__when { flex: none; font-size: 12.5px; inline-size: auto; padding-block: 4px; }

/* Its pages at its foot: Prev at the left, the numbers in the middle, Next at the right. */
.aws-cc .cc-pages { align-items: center; display: flex; gap: var(--cc-s2); justify-content: space-between; margin-block: 6px 2px; }
.aws-cc .cc-pages__nums { align-items: center; display: flex; flex: 1; gap: 4px; justify-content: center; }
.aws-cc .cc-pages__end, .aws-cc .cc-pages__n { background: none; border: 1px solid var(--cc-divider); border-radius: var(--cc-r-sm); color: var(--cc-text); cursor: pointer; font: inherit; font-size: 12.5px; line-height: 1; min-inline-size: 28px; padding: 5px 8px; }
.aws-cc .cc-pages__n.is-on { background: var(--cc-accent); border-color: var(--cc-accent); color: #fff; }
.aws-cc .cc-pages__end:disabled { cursor: default; opacity: .35; }

/* Between calls: its lists as tabs, the one shown given the room. */
.aws-cc .cc-idle__tabs { border-block-end: 1px solid var(--cc-divider); display: flex; flex-wrap: wrap; gap: var(--cc-s1); margin-block: var(--cc-s3) var(--cc-s2); }
.aws-cc .cc-idle__tab { background: none; border: 0; border-block-end: 2px solid transparent; color: var(--cc-muted); cursor: pointer; font: inherit; font-size: 13px; padding: 6px 10px; }
.aws-cc .cc-idle__tab:hover { color: var(--cc-text); }
.aws-cc .cc-idle__tab.is-on { border-block-end-color: var(--cc-accent); color: var(--cc-text); }

/* Calls cannot reach this agent: said under the bar, over the workspace, until they can again. */
.cc-unreachable {
	align-items: center;
	background: var(--cc-red);
	border-radius: var(--cc-r-md);
	box-shadow: var(--cc-shadow);
	color: #fff;
	display: flex;
	font-family: var(--cc-body);
	font-size: 13.5px;
	gap: var(--cc-s2);
	inset-block-start: calc(var(--cc-above, 0px) + var(--wp-admin--admin-bar--height, 0px) + var(--cc-bar, 56px) + 8px);
	inset-inline-start: 50%;
	max-inline-size: min(720px, calc(100vw - 32px));
	padding: 8px 10px 8px 14px;
	position: fixed;
	transform: translateX(-50%);
	z-index: 99980;
}

.cc-unreachable__dot { animation: cc-ring 1.4s ease-out infinite; background: #fff; border-radius: 50%; block-size: 8px; flex: none; inline-size: 8px; }
.cc-unreachable__why { flex: 1; }
.cc-unreachable__x { background: none; border: 0; color: #fff; cursor: pointer; flex: none; font-size: 20px; line-height: 1; padding: 0 2px 0 4px; }
.cc-unreachable__x:hover, .cc-unreachable__x:focus-visible { opacity: .8; }
.cc-unreachable .cc-btn { background: #fff; border-color: #fff; color: var(--cc-red); flex: none; }

/* Call and Text on a history or follow-up row, side by side. */
.cc-row-acts { display: inline-flex; gap: 6px; flex-wrap: nowrap; }
/* The office's small buttons (Call, Text on a row of the history). */
.aws-cc-btn--sm { align-items: center; background: none; cursor: pointer; display: inline-flex; font: inherit; font-size: 12px; gap: 6px; padding: 3px 10px; white-space: nowrap; }
.aws-cc-btn--sm:hover { border-color: var(--cc-accent); color: var(--cc-accent-700); }

/* The softphone on a page that has only the bar (the office's pages): under the bar, at the right. */
.aws-cc--floating .cc-softphone { inset-inline-end: 16px; }
.aws-cc-btn--icon { padding: 5px 7px; }

/* The office and the Studio in the Store's frame: its header names the site, so their bar says only what it is. */
.ps-kit-page .cc-bar__brand :is(.cc-bar__name, .cc-bar__logo) { display: none; }
/* And square, as the Store's own rows and buttons are. */
body.ps-kit-page { --wp--custom--radius--sm: 0; --wp--custom--radius--md: 0; --wp--custom--radius--lg: 0; }

/*
 * The workspace under the Store's top: the window a column of the strip, the
 * header, then the workspace taking what is left, its columns scrolling.
 */
html:has(.aws-cc-store-top) body {
	block-size: calc(100vh - var(--wp-admin--admin-bar--height, 0px));
	display: flex;
	flex-direction: column;
}

.aws-cc-store-top { flex: none; }
.aws-cc-store-top .ps-header { position: static; }

html:has(.aws-cc-store-top) .wp-site-blocks {
	block-size: auto;
	flex: 1;
	min-block-size: 0;
}

/* Its last line in the Store footer's colours. */
html:has(.aws-cc-store-top) .wp-site-blocks > footer .aws-foot {
	background: #191919 !important;
	color: #c7c4c4 !important;
}
/* The workspace under the Store's top: the menu says Call center, so the bar opens on who is being answered for. */
html:has(.aws-cc-store-top) .cc-bar__brand { display: none; }
/* Setayo Phone, moved: where it was put. (The notice that calls cannot ring stays in the bar, as everywhere.) */
.aws-cc .cc-softphone__head { cursor: move; touch-action: none; user-select: none; }
html.cc-phone-moved .aws-cc .cc-softphone { inset-block-start: var(--cc-phone-y) !important; inset-inline-end: auto !important; inset-inline-start: var(--cc-phone-x) !important; }
/* Setayo Phone's width, read by the phone and the notice over it. */
html { --cc-phone-w: 380px; }

/*
 * Setayo Phone as a phone's dialer: the number large and centred, round keys
 * with their letters, and under them a round green Call between Text and delete.
 * Only the calling view; Text keeps its message and buttons.
 */
.aws-cc .cc-softphone .cc-dialrow:has(.cc-dial) { align-items: center; border-block-end: 1px solid var(--cc-divider); }
.aws-cc .cc-softphone .cc-dialrow:has(.cc-dial) .cc-country { background: transparent; border: 0; flex: none; font-size: 13px; inline-size: auto; }
.aws-cc .cc-softphone .cc-dial { background: transparent; border: 0; flex: 1; font-size: 30px; font-weight: 400; letter-spacing: .04em; min-inline-size: 0; padding-block: 6px; text-align: center; }
.aws-cc .cc-softphone .cc-dial::placeholder { color: var(--cc-muted); font-size: 22px; letter-spacing: 0; }
.aws-cc .cc-softphone .cc-keys--big { gap: 10px 0; justify-items: center; margin-block: 4px; }
.aws-cc .cc-softphone .cc-keys--big .cc-key { align-content: center; aspect-ratio: 1; background: color-mix(in srgb, var(--cc-text) 8%, var(--cc-bg)); block-size: auto; border: 0; border-radius: 50%; display: grid; font-size: 26px; font-weight: 400; inline-size: 60px; justify-items: center; line-height: 1; min-block-size: 0; padding: 0; }
.aws-cc .cc-softphone .cc-keys--big .cc-key:hover { background: color-mix(in srgb, var(--cc-text) 16%, var(--cc-bg)); }
.aws-cc .cc-softphone .cc-keys--big .cc-key:active { background: color-mix(in srgb, var(--cc-text) 26%, var(--cc-bg)); }
.aws-cc .cc-softphone .cc-keys--big .cc-key small { font-size: 9px; font-weight: 700; letter-spacing: .18em; margin-block-start: 2px; }
.aws-cc .cc-softphone .cc-keys + .cc-dialrow { align-items: center; display: grid; grid-template-columns: 1fr auto 1fr; justify-items: center; margin-block-start: 4px; }
.aws-cc .cc-softphone .cc-keys + .cc-dialrow .cc-btn--accept { background: var(--cc-green); block-size: 60px; border: 0; border-radius: 50%; color: #fff; font-size: 0; grid-column: 2; grid-row: 1; inline-size: 60px; justify-content: center; padding: 0; }
.aws-cc .cc-softphone .cc-keys + .cc-dialrow .cc-btn--accept:hover { background: color-mix(in srgb, var(--cc-green) 85%, #000); }
.aws-cc .cc-softphone .cc-keys + .cc-dialrow .cc-btn--accept svg { block-size: 28px; inline-size: 28px; }
.aws-cc .cc-softphone .cc-keys + .cc-dialrow .cc-btn:not(.cc-btn--accept) { background: transparent; border: 0; font-size: 12px; grid-row: 1; }
.aws-cc .cc-softphone .cc-keys + .cc-dialrow .cc-btn:not(.cc-btn--accept):not(.cc-btn--icon) { flex-direction: column; gap: 2px; grid-column: 1; }
.aws-cc .cc-softphone .cc-keys + .cc-dialrow .cc-btn--icon { grid-column: 3; }
.aws-cc .cc-softphone .cc-keys + .cc-dialrow .cc-btn--icon svg { block-size: 24px; inline-size: 24px; }

/* And in a phone's body: a black bezel with round corners, the camera's pill at the top, the home bar at the foot. */
.aws-cc .cc-softphone { border: 10px solid #111; border-radius: 46px; box-shadow: 0 0 0 1px #3a3a3a, var(--cc-shadow); gap: 6px; padding: 40px 20px 26px; }
.aws-cc .cc-softphone::before { background: #111; block-size: 24px; border-radius: 12px; content: ""; inline-size: 92px; inset-block-start: 8px; inset-inline-start: 50%; position: absolute; transform: translateX(-50%); }
.aws-cc .cc-softphone::after { background: var(--cc-text); block-size: 4px; border-radius: 2px; content: ""; inline-size: 110px; inset-block-end: 8px; inset-inline-start: 50%; opacity: .7; position: absolute; transform: translateX(-50%); }
.aws-cc .cc-optout { align-items: center; background: color-mix(in srgb, var(--cc-red) 10%, transparent); border: 1px solid color-mix(in srgb, var(--cc-red) 40%, transparent); color: var(--cc-red); display: flex; font-size: 12.5px; gap: 6px; margin: 0 0 8px; padding: 6px 10px; }
/* Setayo Phone opens high: just under the black strip, over the header and the call center's bar (its own close is in its corner). */
.aws-cc .cc-softphone { inset-block-start: calc(var(--wp-admin--admin-bar--height, 0px) + var(--cc-strip, 34px) + 4px); }
/*
 * The phone as tall as the window under the strip, as a phone is: its keys as
 * big as the height allows, the room left spread between their rows.
 */
.aws-cc .cc-softphone { block-size: calc(100vh - var(--wp-admin--admin-bar--height, 0px) - var(--cc-strip, 34px) - 12px); max-block-size: 860px; overflow-y: auto; scrollbar-width: none; }
.aws-cc .cc-softphone .cc-keys--big { align-content: space-evenly; flex: 1 1 auto; gap: 8px 0; min-block-size: 0; }
.aws-cc .cc-softphone .cc-keys--big .cc-key { font-size: clamp(22px, 3.6vh, 32px); inline-size: clamp(50px, 8.6vh, 78px); }
.aws-cc .cc-softphone .cc-keys + .cc-dialrow .cc-btn--accept { block-size: clamp(52px, 8.6vh, 78px); inline-size: clamp(52px, 8.6vh, 78px); }
.aws-cc .cc-softphone .cc-keys + .cc-dialrow { margin-block-end: 8px; }
.aws-cc .cc-softphone .cc-softphone__text { flex: 1 1 auto; min-block-size: 120px; }
.aws-cc .cc-softphone label:has(.cc-softphone__text) { display: flex; flex: 1 1 auto; flex-direction: column; }

/* The office's Clients and Templates: a heading with its action, the lists, and the editors that were WordPress's edit screens. */
.cc-office__headrow { align-items: center; display: flex; gap: var(--cc-s3); justify-content: space-between; margin-block-end: var(--cc-s3); }
.cc-office__headrow .cc-office__title { margin: 0; }
.aws-cc-btn.aws-cc-btn--primary { background: var(--cc-accent); border-color: var(--cc-accent); color: #fff; }
.aws-cc-btn.aws-cc-btn--danger { border-color: var(--cc-red); color: var(--cc-red); }
.cc-record { display: grid; gap: var(--cc-s3); max-inline-size: 64rem; }
.cc-record__name { display: grid; font-weight: 700; gap: 6px; max-inline-size: 32rem; }
.cc-record input[type=text], .cc-record input[type=tel], .cc-record input[type=number], .cc-record input[type=email], .cc-record select, .cc-record textarea { background: var(--cc-surface); border: 1px solid var(--cc-divider); border-radius: var(--cc-r-sm); box-sizing: border-box; font: inherit; max-inline-size: 100%; min-block-size: 36px; padding: 6px 10px; }
.cc-record .regular-text { inline-size: 100%; }
.cc-record .large-text { inline-size: 100%; }
.cc-record .form-table { border-collapse: collapse; inline-size: 100%; }
.cc-record .form-table th { padding: 12px 16px 12px 0; text-align: start; vertical-align: top; inline-size: 180px; }
.cc-record .form-table td { padding: 10px 0; }
.cc-record .form-table tr { border-block-start: 1px solid var(--cc-divider); }
.cc-record .description { color: var(--cc-muted); font-size: 12.5px; }
.cc-record details.aws-cc-section { border-block-start: 1px solid var(--cc-divider); }
.cc-record details.aws-cc-section > summary { cursor: pointer; font-weight: 700; padding: 12px 0; }
.cc-record .aws-cc-grid { display: grid; gap: var(--cc-s3); grid-template-columns: minmax(0, 1fr); padding-block-end: var(--cc-s3); }
.cc-record .aws-cc-grid--two, .cc-record .aws-cc-grid--pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cc-record .aws-cc-field { display: grid; gap: 4px; }
.cc-record .aws-cc-field--wide { grid-column: 1 / -1; }
.cc-record .aws-cc-field > label { font-weight: 700; }
.cc-record__foot { display: flex; gap: var(--cc-s2); justify-content: flex-end; margin: 0; }
.cc-record__trash { margin-block-start: var(--cc-s4); }
.cc-record__trash > summary { display: inline-flex; list-style: none; } .cc-record__trash > summary::-webkit-details-marker { display: none; } .cc-record__trash form { margin-block-start: var(--cc-s2); }

/* The caller is a lead in Marketing: said under their name, opening the lead. */
.aws-cc .cc-lead { color: var(--cc-accent, inherit); text-decoration: underline; text-underline-offset: 2px; }

/*
 * The office in the apps' look (AdServer, the Store): the title with what
 * it holds behind an icon, the filters and the button at the right end of
 * its row, each list a table in a card, the buttons outlined. Its rooms are
 * the header's Call Center menu, so its own tabs are hidden where that is.
 */
.cc-sr { block-size: 1px; clip-path: inset(50%); inline-size: 1px; overflow: hidden; position: absolute; white-space: nowrap; }
.cc-office__nav[hidden] { display: none; }
.cc-office__headrow { flex-wrap: wrap; gap: 18px; margin-block: 18px 26px; }
.cc-office__titlebox { align-items: center; display: flex; flex: 1 1 280px; gap: 10px; min-inline-size: 0; }
.cc-office__titlebox .cc-office__title { margin: 0; }
.cc-office__info { color: var(--cc-muted); cursor: help; display: inline-flex; position: relative; }
.cc-office__info:hover, .cc-office__info:focus-visible { color: var(--cc-accent-700); outline: none; }
.cc-office__tip { background: var(--cc-bg); border: 1px solid var(--cc-divider); box-shadow: 0 3px 10px rgba(45, 43, 43, .16); color: var(--cc-text); display: none; font-size: 12px; font-weight: 400; inset-block-start: calc(100% + 8px); inset-inline-start: -10px; inline-size: 280px; line-height: 1.45; padding: 8px 10px; position: absolute; z-index: 6; }
.cc-office__info:hover .cc-office__tip, .cc-office__info:focus .cc-office__tip { display: block; }
.cc-office__headrow .cc-office__filters { align-items: center; gap: 9px; justify-content: flex-end; margin: 0 0 0 auto; }
.cc-office__headrow .cc-office__filter :is(select, input) { background: transparent; block-size: 36px; border-radius: 0; font-size: 14px; padding: 6px 10px; }
.cc-office__search input { background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23826f5f' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 10px center / 14px !important; inline-size: 240px; padding-inline-start: 30px !important; }
.cc-office .aws-cc-btn { border-radius: 0; font-size: 14px; font-weight: 800; padding: 8px 16px; }
.cc-office .aws-cc-btn.aws-cc-btn--primary { background: transparent; border-color: var(--cc-accent); color: var(--cc-accent); }
.cc-office .aws-cc-btn.aws-cc-btn--primary:hover { background: color-mix(in srgb, var(--cc-accent) 8%, transparent); }
.cc-office .cc-table:not(.cc-table--facts) { border: 1px solid var(--cc-divider); }
.cc-office .cc-table:not(.cc-table--facts) th { color: color-mix(in srgb, var(--cc-text) 60%, transparent); font-size: 11px; font-weight: 700; padding: 9px; }
.cc-office .cc-table:not(.cc-table--facts) td { padding: 9px; vertical-align: middle; }
.cc-office .cc-table:not(.cc-table--facts) :is(th, td):first-child { padding-inline-start: 18px; }
.cc-office .cc-table:not(.cc-table--facts) :is(th, td):last-child { padding-inline-end: 18px; }
.cc-office .cc-table:not(.cc-table--facts) tbody tr:last-child td { border-block-end: 0; }
.cc-office .cc-table:not(.cc-table--facts) tbody tr:hover { background: color-mix(in srgb, var(--cc-text) 4%, transparent); }
.cc-office .cc-empty { border: 1px solid var(--cc-divider); color: var(--cc-muted); margin: 0; padding: 24px; text-align: center; }
@media (max-width: 640px) {
	.cc-office__headrow .cc-office__filters { justify-content: flex-start; margin: 0; inline-size: 100%; }
	.cc-office__search input { inline-size: 100%; }
}

/* The bar on the office's title row, at its right end: its controls only, the page's own tools before them. */
.cc-office__headrow > .aws-cc--bar.is-inline,
.cc-office__headrow > .aws-cc.is-inline { block-size: auto; flex: 0 1 auto; margin: 0 0 0 auto !important; order: 4; }
.cc-office__headrow > .is-inline .cc-bar { block-size: auto; flex-wrap: wrap; gap: 9px; justify-content: flex-end; padding: 0; }
.cc-office__headrow > .is-inline :is(.cc-bar__brand, .cc-bar__fill) { display: none; }

.cc-office__headrow > .cc-office__titlebox { order: 1; }
.cc-office__headrow > :is(.cc-office__filters, .cc-signs__new, .aws-cc-btn) { order: 3; }
.cc-office__headrow:has(> .is-inline) > :is(.cc-office__filters, .cc-signs__new) { margin-inline-start: auto; }
.cc-office__headrow .cc-office__filter select { font-size: 13px; padding-inline: 8px; }

/* Dark, on a call center page in the Store's frame: its content on the dark ground too, not the frame's light one under light words. */
html[data-aws-cc-theme="dark"]:has(.aws-cc) :is(.ps-kit-content, .aws-chrome__main) { background: var(--cc-bg); color: var(--cc-text); }

/* The title as near the menu as the apps' are: no room of the office's own above it. */
.cc-office { padding-block-start: 0 !important; }
.cc-office__headrow, .cc-office > .cc-office__head { margin-block-start: 7px; }
/* No second profile menu beside the status on the office's title row: the header's own (and its Call Center menu) has what it held. */
.cc-office__headrow > .is-inline .cc-agent { display: none; }
/* "Today" beside the Dashboard's name, and its figures from the left edge. */
.cc-office__when { color: var(--cc-muted); font-size: 20px; }
.cc-office__today { justify-content: flex-start; }
.cc-office__today .cc-tiles { margin-inline-start: 0; }

/*
 * Meetings (mu-plugins/aws-core/app-meetings.php), the call center's and the
 * Studio's: New meeting's form in a card under the title row, its fields two
 * by two and the time on one line; the lists as the office's tables, Join and
 * Call off at each row's end; before Google is connected, why, in a box.
 */
.aws-appmeet__form { display: grid; gap: var(--cc-s3) var(--cc-s4); grid-template-columns: repeat(2, minmax(0, 1fr)); margin-block-end: 26px; max-inline-size: 60rem; }
.aws-appmeet__form[hidden] { display: none; }
.aws-appmeet__form .cc-field { margin: 0; }
.aws-appmeet .aws-appmeet__form .cc-office__sub { margin: 0; }
.aws-appmeet__form textarea.cc-input { resize: vertical; }
.aws-appmeet__wide { grid-column: 1 / -1; }
.aws-appmeet__when { display: grid; gap: var(--cc-s3); grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.6fr); }
.aws-appmeet__said { color: var(--cc-red); margin: 0; }
.aws-appmeet__said:empty { display: none; }
.aws-appmeet__go { display: flex; gap: 9px; margin: 0; }
.aws-appmeet .cc-office__said.is-bad { color: var(--cc-red); }
.aws-appmeet__off { align-items: center; border: 1px solid var(--cc-divider); display: flex; flex-wrap: wrap; gap: var(--cc-s3) var(--cc-s4); justify-content: space-between; padding: 18px; }
.aws-appmeet__off p { flex: 1 1 320px; margin: 0; }
.aws-appmeet__off strong { display: block; margin-block-end: 4px; }
.aws-appmeet__acts { display: inline-flex; gap: 6px; justify-content: flex-end; }
.aws-appmeet__acts form { display: inline; margin: 0; }
.aws-appmeet__table td:last-child { white-space: nowrap; }
.aws-appmeet .cc-office__sub { font-size: 17px; margin-block: 26px 10px; }
.aws-appmeet__about li > .aws-cc-btn--sm { flex: none; }
/* Invitees as chips, Choose invitees after them; the popup they are chosen in. */
.aws-appmeet__chosen { align-items: center; display: flex; flex-wrap: wrap; gap: 6px; }
.aws-appmeet__chips { display: contents; list-style: none; margin: 0; padding: 0; }
.aws-appmeet__chip { align-items: center; border: 1px solid var(--cc-divider); border-radius: 999px; display: inline-flex; gap: 4px; max-inline-size: 100%; padding: 3px 4px 3px 11px; }
.aws-appmeet__chipname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aws-appmeet__unchip { background: none; border: 0; border-radius: 999px; color: var(--cc-muted); cursor: pointer; font-size: 17px; line-height: 1; padding: 2px 6px; }
.aws-appmeet__unchip:hover { background: var(--cc-faint); color: var(--cc-text); }
.aws-appmeet__typed { display: grid; gap: var(--cc-s3); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.aws-appmeet__pick { background: var(--cc-bg); border: 1px solid var(--cc-divider); border-radius: var(--cc-r-lg); box-shadow: var(--cc-shadow); color: var(--cc-text); inline-size: min(480px, calc(100vw - 32px)); max-block-size: calc(100vh - 60px); padding: var(--cc-s4); }
.aws-appmeet__pick[open] { display: flex; flex-direction: column; gap: var(--cc-s3); }
.aws-appmeet__pick::backdrop { background: color-mix(in srgb, #000 40%, transparent); }
.aws-appmeet .aws-appmeet__pick .cc-office__sub { margin: 0; }
.aws-appmeet__pickhead { align-items: center; display: flex; justify-content: space-between; }
.aws-appmeet__people { border-block: 1px solid var(--cc-divider); list-style: none; margin: 0; max-block-size: 280px; min-block-size: 120px; overflow-y: auto; padding: 0; }
.aws-appmeet__people li + li { border-block-start: 1px solid var(--cc-divider); }
.aws-appmeet__person { align-items: center; cursor: pointer; display: flex; gap: 10px; padding: 8px 2px; }
.aws-appmeet__person input { flex: none; margin: 0; }
.aws-appmeet__who { display: flex; flex-direction: column; min-inline-size: 0; }
.aws-appmeet__who > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aws-appmeet__peoplenote { color: var(--cc-muted); padding: 12px 2px; }
.aws-appmeet__add { border: 0; display: grid; gap: 6px; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) auto; margin: 0; padding: 0; }
.aws-appmeet__add legend { margin-block-end: 6px; padding: 0; }
.aws-appmeet__add .aws-appmeet__said { grid-column: 1 / -1; }
.aws-appmeet__pick .aws-appmeet__go { justify-content: flex-end; }
/* The note's label with Type and Template at its right. */
.aws-appmeet__notehead { align-items: center; display: flex; flex-wrap: wrap; gap: 6px var(--cc-s3); justify-content: space-between; }
.aws-appmeet__tpl { display: flex; gap: 6px; }
.aws-appmeet__tpl[hidden] { display: none; }
.aws-appmeet__tpl .cc-input { inline-size: auto; max-inline-size: 15rem; min-block-size: 0; padding-block: 4px; }
@media (max-width: 640px) {
	.aws-appmeet__form, .aws-appmeet__when, .aws-appmeet__typed, .aws-appmeet__add { grid-template-columns: minmax(0, 1fr); }
}

/* Signs' New sign: one button on the title row, whose and what it is called in a panel under it. */
.cc-signs__new { position: relative; }
.cc-signs__new > summary { cursor: pointer; list-style: none; }
.cc-signs__new > summary::-webkit-details-marker { display: none; }
.cc-signs__panel { background: var(--cc-bg, #fff); border: 2px solid var(--cc-text, #191919); box-shadow: 0 12px 32px rgb(0 0 0 / 18%); display: grid; gap: 10px; inline-size: min(340px, calc(100vw - 32px)); inset-inline-end: 0; padding: 14px; position: absolute; top: calc(100% + 6px); z-index: 40; }
.cc-signs__panel label { display: grid; gap: 4px; font-size: 13px; }
.cc-signs__panel :is(select, input[type="text"]) { inline-size: 100%; }
.cc-signs__panel .cc-signs__for { font-size: 13px; font-weight: 600; }

/* Calls and texts' Filters: one button on the title row, the filters, named, in a panel under it. */
.cc-office__headrow > .cc-office__filters-pop { order: 2; position: relative; }
.cc-office__headrow:has(> .is-inline) > .cc-office__filters-pop { margin-inline-start: auto; }
.cc-office__filters-pop > summary { cursor: pointer; list-style: none; }
.cc-office__filters-pop > summary::-webkit-details-marker { display: none; }
.cc-office__headrow .cc-office__filters-panel { background: var(--cc-bg, #fff); border: 2px solid var(--cc-text, #191919); box-shadow: 0 12px 32px rgb(0 0 0 / 18%); display: grid; gap: 10px; inline-size: min(300px, calc(100vw - 32px)); inset-inline-end: 0; justify-content: stretch; margin: 0; padding: 14px; position: absolute; top: calc(100% + 6px); z-index: 40; }
.cc-office__filters-panel .cc-office__filter { display: grid; gap: 4px; font-size: 13px; }
.cc-office__filters-panel .cc-office__filter .cc-sr { block-size: auto; clip: auto; clip-path: none; inline-size: auto; overflow: visible; position: static; white-space: normal; }
.cc-office__filters-panel .cc-office__filter select { inline-size: 100%; }
.cc-office__filters-clear { color: var(--cc-accent); font-size: 13px; font-weight: 600; justify-self: start; }
/* "Lines not connected yet" in the bar: a link to where they are connected, for whoever may connect them. */
.aws-cc a.cc-banner--link { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.cc-unreachable :is(a, button).cc-btn { color: var(--cc-red); cursor: pointer; font: inherit; font-size: 13px; font-weight: 600; line-height: 1.2; text-decoration: none; }
/* A menu of the header open over it (the apps, More, the account): the strip steps aside while it is. */
html:has([data-aws-apps-nav] .aws-apps-nav__list:not([hidden]), .ps-me[open]) .cc-unreachable { visibility: hidden; }

/* A client's or template's editor: Back and Save on the title row, before the agent's bar, as the other pages' tools. */
.cc-office__headrow > .cc-office__tools { align-items: center; display: flex; gap: 8px; order: 3; }
.cc-office__headrow:has(> .is-inline) > .cc-office__tools { margin-inline-start: auto; }

/*
 * A client's and a template's editor, as the office's other forms: each
 * label with its ⓘ beside it (and a list's + at the end of that line), the
 * field under them the whole width; fields on the page's ground with a thin
 * rule, not the site's surface colour; a message row one box, its words
 * taking the room and its audio at the end; each section's Save on a line
 * of its own.
 */
.cc-office .cc-record .aws-cc-field { align-items: center; column-gap: 6px; display: flex; flex-wrap: wrap; row-gap: 6px; }
.cc-office .cc-record .aws-cc-field > label { font-size: 13px; font-weight: 600; }
.cc-office .cc-record .aws-cc-field > :not(label, .aws-cc-info, .aws-cc-seq__plus, .aws-cc-rows__plus, input[type="hidden"]) { flex-basis: 100%; }
.cc-office .cc-record .aws-cc-field > :is(.aws-cc-seq__plus, .aws-cc-rows__plus) { margin-inline-start: auto; }
.cc-office .cc-record :is(.aws-cc-seq__plus, .aws-cc-rows__plus, .aws-cc-seq__minus, .aws-cc-row__drop, .aws-cc-seqfield__up) { align-items: center; background: var(--cc-bg); border: 1px solid var(--cc-divider); border-radius: 50%; block-size: 28px; color: var(--cc-accent); cursor: pointer; display: inline-grid; flex: none; inline-size: 28px; padding: 0; place-items: center; }
.cc-office .cc-record :is(.aws-cc-seq__minus, .aws-cc-row__drop) { color: var(--cc-red); }
.cc-office .cc-record :is(input[type="text"], input[type="tel"], input[type="number"], input[type="email"], select, textarea) { background: var(--cc-bg); border: 1px solid var(--cc-divider); border-radius: 6px; }
.cc-office .cc-record .aws-cc-row { align-items: center; display: flex; gap: 8px; }
.cc-office .cc-record .aws-cc-row > input[type="text"] { flex: 1 1 auto; min-inline-size: 0; }
.cc-office .cc-record .aws-cc-seqfield { align-items: center; background: var(--cc-bg); border: 1px solid var(--cc-divider); border-radius: 6px; display: flex; flex: 1 1 auto; gap: 6px; min-inline-size: 0; padding: 3px 4px 3px 0; }
.cc-office .cc-record .aws-cc-seqfield > .aws-cc-seqfield__text { background: transparent; border: 0; flex: 1 1 auto; min-inline-size: 0; }
.cc-office .cc-record .aws-cc-seqfield__media { align-items: center; display: flex; flex: none; gap: 6px; inline-size: auto; }
.cc-office .cc-record .aws-cc-seqfield__file[hidden] { display: none; }
.cc-office .cc-record .aws-cc-ext { flex-wrap: wrap; }
.cc-office .cc-record .aws-cc-ext > input.aws-cc-ext__digits { flex: 0 0 5rem; }
.cc-office .cc-record .aws-cc-ext > :is(input.aws-cc-ext__name, select.aws-cc-ext__to, input.aws-cc-ext__number) { flex: 1 1 10rem; }
.cc-office .cc-record .cc-record__save { grid-column: 1 / -1; justify-self: start; margin: 4px 0 0; }
/* The template's fields in the same grid as a client's, their ⓘ the same (the client form prints these for itself). */
.cc-office .cc-record .aws-cc-tpl { display: grid; gap: 18px 28px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cc-office .cc-record .aws-cc-tpl > .aws-cc-field--wide { grid-column: 1 / -1; }
@media (max-width: 782px) { .cc-office .cc-record .aws-cc-tpl { grid-template-columns: minmax(0, 1fr); } }
.cc-office .cc-record .aws-cc-tpl textarea { inline-size: 100%; }
.cc-office .cc-record .aws-cc-tpl .aws-cc-toggle { font-weight: 400; }
.cc-office .cc-record .aws-cc-info { color: var(--cc-muted); cursor: help; display: inline-block; position: relative; }
.cc-office .cc-record .aws-cc-info .dashicons { font-size: 16px; height: 16px; width: 16px; }
.cc-office .cc-record .aws-cc-info__tip { background: #1d2327; border-radius: 4px; color: #fff; font-size: 12px; font-weight: 400; inline-size: max-content; inset-block-end: calc(100% + 6px); inset-inline-start: -8px; line-height: 1.45; max-inline-size: 280px; opacity: 0; padding: 7px 10px; pointer-events: none; position: absolute; visibility: hidden; z-index: 100; }
.cc-office .cc-record .aws-cc-info:is(:hover, :focus) .aws-cc-info__tip { opacity: 1; visibility: visible; }
.cc-office .cc-record .cc-record__namerow { align-items: flex-end; display: flex; flex-wrap: wrap; gap: 10px; }
.cc-office .cc-record .cc-record__namerow > .cc-record__name { flex: 0 1 32rem; }
.cc-office .cc-record .cc-record__namerow > .aws-cc-btn { min-block-size: 36px; }
/*
 * The notice, shared: the same in the office and the workspace. Centred in
 * the row the bar is on -- the office's title row, the workspace's bar -- as
 * wide as what it says, never over the work below. On a narrow office window
 * it drops into the title row's flow, beside the buttons.
 */
:is(.cc-office__headrow, .aws-cc--bar) > .cc-unreachable { border-radius: var(--cc-r-md); box-sizing: border-box; flex: 0 1 auto; font-size: 13px; gap: 8px; inline-size: max-content; inset: auto; margin: 0; max-inline-size: calc(100% - 32px); order: 2; padding: 6px 8px 6px 12px; position: static; transform: none; white-space: nowrap; }
:is(.cc-office__headrow, .aws-cc--bar) > .cc-unreachable .cc-unreachable__why { flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; }
:is(.cc-office__headrow, .aws-cc--bar) > .cc-unreachable .cc-btn { padding: 4px 10px; }
.aws-cc--bar:has(> .cc-unreachable) { position: relative; }
.aws-cc--bar > .cc-unreachable { inset-block-start: 50% !important; inset-inline-start: 50% !important; position: absolute !important; transform: translate(-50%, -50%) !important; z-index: 5; }
@media (min-width: 1100px) {
	.cc-office__headrow:has(> .cc-unreachable) { position: relative; }
	.cc-office__headrow > .cc-unreachable { inset-block-start: 50%; inset-inline-start: 50%; position: absolute; transform: translate(-50%, -50%); }
}

/* Order a number, under a client's numbers: a link lined up with them, not a bar across the field. */
.aws-cc-field button.aws-cc-line__more { align-items: center; align-self: flex-start; background: none; border: 0; border-radius: 0; box-shadow: none; color: var(--cc-accent, #ef3218); cursor: pointer; display: inline-flex; flex: 0 0 auto; font: inherit; font-size: 13px; font-weight: 600; gap: 4px; inline-size: auto; max-inline-size: max-content; margin: 6px 0 0 21px; min-block-size: 0; padding: 0; text-decoration: none; width: auto; }
.aws-cc-field button.aws-cc-line__more::before { content: "+"; font-size: 15px; line-height: 1; }
.aws-cc-field button.aws-cc-line__more:hover, .aws-cc-field button.aws-cc-line__more:focus-visible { text-decoration: underline; }


/* A new client, a wizard: the steps above, a section a page, Back and Next below (aws_core_cc_record_wizard_script). */
.cc-wizard .cc-record__namerow button[type="submit"] { display: none; }
.cc-wizard .aws-cc-form > details.aws-cc-section { border: 0; }
/* A step's own title is the step it is, said once in the bar of steps above: not again over its fields. */
.cc-wizard .aws-cc-form > details.aws-cc-section > summary { display: none; }
.cc-wizard .aws-cc-form > details.aws-cc-section > summary::-webkit-details-marker { display: none; }
.cc-wizard .aws-cc-form > details.aws-cc-section > summary::before, .cc-wizard .aws-cc-form > details.aws-cc-section > summary::after { content: none !important; }
.cc-wizard .aws-cc-form > details.aws-cc-section > summary * { pointer-events: auto; }
.cc-wizard__steps { counter-reset: none; display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0 0 22px; padding: 0; }
.cc-wizard__steps button { align-items: center; background: var(--cc-bg, #fff); border: 1px solid var(--cc-divider, #ddd); border-radius: 999px; color: var(--cc-muted, #666); cursor: pointer; display: inline-flex; font: inherit; font-size: 13px; gap: 8px; padding: 6px 14px 6px 6px; }
.cc-wizard__n { align-items: center; background: var(--cc-divider, #e6e6e6); border-radius: 50%; block-size: 22px; color: var(--cc-text, #191919); display: inline-flex; font-size: 12px; font-weight: 700; inline-size: 22px; justify-content: center; }
.cc-wizard__steps button.is-on { border-color: var(--cc-text, #191919); color: var(--cc-text, #191919); font-weight: 600; }
.cc-wizard__steps button.is-on .cc-wizard__n { background: var(--cc-accent, #ef3218); color: #fff; }
.cc-wizard__steps button.is-done .cc-wizard__n { background: var(--cc-text, #191919); color: #fff; }
.cc-wizard__foot { align-items: center; border-block-start: 1px solid var(--cc-divider, #ddd); display: flex; gap: 12px; margin-block-start: 24px; max-inline-size: 1024px; padding-block-start: 16px; }
.cc-wizard__of { color: var(--cc-muted, #666); flex: 1; font-size: 13px; text-align: center; }
.cc-wizard__foot [data-cc-back][hidden] + .cc-wizard__of { margin-inline-start: 0; }
.cc-wizard__foot [hidden] { display: none !important; }
.cc-wizard .cc-wizard__name input { box-sizing: border-box; inline-size: 100%; }

/*
 * WhatsApp: a text by another road, marked so the agent knows which road a
 * reply goes by -- WhatsApp's green on its icon and its name in the list,
 * how long is left of its 24-hour window, and once that is closed, the
 * approved templates in place of the box to write in.
 */
.aws-cc .cc-task--whatsapp .cc-task__icon { border-color: var(--cc-green); color: var(--cc-green); }
.aws-cc .cc-wa-tag { border: 1px solid color-mix(in srgb, var(--cc-green) 55%, transparent); border-radius: 999px; color: var(--cc-green); font-size: 10.5px; font-weight: 600; letter-spacing: .02em; padding: 0 6px; }
.aws-cc .cc-sms--whatsapp .cc-sms__head .cc-kicker { align-items: center; display: inline-flex; gap: 5px; }
.aws-cc .cc-sms--whatsapp .cc-sms__head .cc-kicker .cc-icon { color: var(--cc-green); }
.aws-cc .cc-wa-window { align-items: center; color: var(--cc-muted); display: flex; font-size: 12.5px; gap: 6px; margin: 0; }
.aws-cc .cc-wa-window .cc-icon { color: var(--cc-green); }
.aws-cc .cc-wa-closed { display: flex; flex-direction: column; gap: var(--cc-s2); }
.aws-cc .cc-wa-closed__say { align-items: flex-start; background: color-mix(in srgb, var(--cc-yellow) 12%, transparent); border: 1px solid color-mix(in srgb, var(--cc-yellow) 45%, transparent); display: flex; font-size: 13px; gap: 6px; margin: 0; padding: 8px 10px; }
.aws-cc .cc-wa-closed__say .cc-icon { color: var(--cc-green); flex: none; margin-block-start: 2px; }
.aws-cc .cc-wa-tpls { border: 1px solid var(--cc-divider); border-radius: var(--cc-r-sm); display: flex; flex-direction: column; max-block-size: 220px; overflow: auto; }
.aws-cc .cc-wa-pick { border: 1px solid color-mix(in srgb, var(--cc-green) 45%, transparent); border-radius: var(--cc-r-sm); display: flex; flex-direction: column; gap: var(--cc-s2); padding: 10px 12px; }
.aws-cc .cc-wa-pick__body { background: color-mix(in srgb, var(--cc-green) 8%, transparent); border-radius: var(--cc-r-sm); margin: 0; padding: 8px 10px; white-space: pre-wrap; }
.aws-cc .cc-wa-pick .cc-kicker { margin: 0; }
.aws-cc .cc-msg__error { color: var(--cc-red); font-size: 11.5px; margin: -4px 2px 6px; }
.aws-cc .cc-msg a.cc-filechip { color: inherit; margin-block-start: 4px; text-decoration: none; }
.aws-cc .cc-softphone .cc-seg .cc-btn.is-on { border-color: var(--cc-accent); color: var(--cc-accent-700); }