:root {
	/* One green and one lime. Every surface on this page is white; the fills
	   below are the only greys, and they are tints of the ink, not of grey. */
	--ab-page: #ffffff;
	--ab-surface: #ffffff;
	--ab-tint: #f4f6f3;
	--ab-soft: #f7f9f3;
	--ab-line: #e5e7e5;
	--ab-row-line: #edefec;
	--ab-chip-line: #e5e7e5;
	--ab-ink: #163300;
	--ab-body: #163300;
	--ab-muted: #5b6b55;
	--ab-tertiary: #8a9585;
	--ab-accent: #163300;
	--ab-link-hover: #2c5a12;
	/* The lime itself is the assistant's mark, the active tab and the label on a
	   filled control. The two wells under it are what fills a surface; the lime
	   never does. */
	--ab-lime: #9fe870;
	--ab-well: #e9f8bc;
	--ab-pick: #f1f7e4;
	--ab-free-bg: #f1f7e4;
	--ab-free-fg: #163300;
	--ab-listed-bg: #e9f8bc;
	--ab-listed-fg: #163300;
	--ab-taken-bg: #f4f6f3;
	--ab-taken-fg: #5b6b55;
	--ab-radius-card: 18px;
	--ab-radius-panel: 18px;
	--ab-radius-bubble: 15px;
	/* The floating project panel is the only surface on this page with a shadow. */
	--ab-shadow: 0 18px 44px -22px rgba(22, 51, 0, 0.32);
	--ab-font: system-ui, -apple-system, "Segoe UI", "Helvetica Neue", sans-serif;
}

body.ask-brandagy-page .site-footer {
	display: none !important;
}

/* Held only while a drawer is open. It makes `body` a scroll container, which
   is why the page uses `overflow-x: clip` rather than `hidden` the rest of the
   time — a permanent scroll container here would kill every sticky bar. */
body.ask-brandagy-locked {
	overflow: hidden;
}

.ask-brandagy {
	/* Declared here, not on `:root`: JS sets `--ab-chrome-h` on this element, and
	   a custom property substitutes against the element it is declared on — the
	   same chain written on `:root` would freeze at the fallback and inherit that. */
	--ab-chrome: var(--ab-chrome-h, var(--actual-header-height, var(--header-h, 80px)));
	min-height: calc(100vh - 68px);
	padding: 14px 0 24px;
	background: var(--ab-page);
	color: var(--ab-ink);
	font-family: var(--ab-font);
	overflow-x: clip;
}

.ask-brandagy *,
.ask-brandagy *::before,
.ask-brandagy *::after {
	box-sizing: border-box;
}

/* Content links only. A blanket `a` rule outranks the single-class rules that
   colour this page's anchor-shaped controls — it painted the upgrade button's
   label in the same ink as its own fill and the text disappeared. */
.ask-brandagy a:not([class*="ask-brandagy__"]) {
	color: var(--ab-ink);
	text-decoration: none;
}

.ask-brandagy a:not([class*="ask-brandagy__"]):hover {
	color: var(--ab-link-hover);
}

/* Both halves, always: setting the background alone leaves the selected text
   at whatever colour it inherited. */
.ask-brandagy ::selection {
	background: var(--ab-lime);
	color: var(--ab-ink);
}

.ask-brandagy ::placeholder {
	color: var(--ab-tertiary);
}

/* Every author `display` in this file outranks the user-agent rule for
   [hidden], because author styles win over the UA sheet whatever the
   specificity. Without this the tab strip, the composer and the quota card all
   render while the script believes they are hidden. */
.ask-brandagy [hidden] {
	display: none !important;
}

.ask-brandagy button,
.ask-brandagy input,
.ask-brandagy textarea {
	font: inherit;
}

.ask-brandagy__shell {
	display: grid;
	width: 100%;
	max-width: 1080px;
	margin-inline: auto;
	padding-inline: 40px;
	min-height: calc(100vh - 106px);
	grid-template-columns: minmax(0, 1fr) 300px;
	/* The two columns are held apart by this gap alone. A vertical divider here
	   made the page read as a two-pane application rather than as a page. */
	column-gap: 40px;
	row-gap: 14px;
	align-items: start;
}

/* Direction comes from the root element, which PHP sets from the locale — the
   shell only restates it loudly enough to win against the theme's own rules,
   so the page still mirrors for English. */
.ask-brandagy[dir="rtl"] .ask-brandagy__shell {
	direction: rtl;
}

.ask-brandagy[dir="ltr"] .ask-brandagy__shell {
	direction: ltr;
}

.ask-brandagy__rail {
	min-width: 0;
}

.ask-brandagy__rail-inner {
	position: sticky;
	top: calc(var(--ab-chrome) + 20px);
	display: grid;
	gap: 16px;
}

/* ---------------------------------------------------------------------------
   Second column: the live project brief.
   Sticky where the switcher is not — it is the thread's only memory, so it has
   to stay legible while a long conversation scrolls past it.
   --------------------------------------------------------------------------- */

.ask-brandagy__rail--brief {
	align-self: stretch;
	padding: 24px 0 26px;
	border-inline-start: 0;
}

/* Three unrelated blocks. As one flow divided by horizontal rules they read as
   a single long list, so each one is its own card. */
.ask-brandagy__brief,
.ask-brandagy__detail,
.ask-brandagy__saved {
	padding: 18px;
	border: 1px solid var(--ab-line);
	border-radius: var(--ab-radius-card);
	background: var(--ab-surface);
}

.ask-brandagy__rail--brief .ask-brandagy__rail-inner {
	top: calc(var(--ab-chrome) + 24px);
	display: block;
}

.ask-brandagy .ask-brandagy__section-label {
	margin: 0;
	font-size: 13.5px;
	font-weight: 400;
	line-height: 1.5;
	color: var(--ab-muted);
}

.ask-brandagy__brief-head {
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin-bottom: 12px;
}

.ask-brandagy__brief-head .ask-brandagy__section-label {
	flex: 1;
}

/* The percentage says how much is left; the stars say whether the brief is
   good enough to name from yet. Both take the same tone, or they read as
   disagreeing with each other. */
.ask-brandagy__brief-stars {
	display: inline-flex;
	gap: 2px;
	flex-shrink: 0;
	font-size: 12px;
	line-height: 1;
	color: var(--ab-tone, var(--ab-accent));
}

.ask-brandagy__brief-stars span[data-off] {
	color: #dfe0d4;
}

.ask-brandagy__brief-pct,
.ask-brandagy__saved-count,
.ask-brandagy__projects-quota,
.ask-brandagy__screen-tab-count {
	direction: ltr;
	unicode-bidi: isolate;
}

.ask-brandagy__brief-pct {
	flex-shrink: 0;
	font-size: 12px;
	font-weight: 600;
	color: var(--ab-tone, var(--ab-accent));
	font-variant-numeric: tabular-nums;
}

/* A status hairline. At 6px in a 306px column it starts reading as a chart. */
.ask-brandagy__brief-meter-track {
	height: 3px;
	margin: 0 0 16px;
	border-radius: 999px;
	background: #dfe0d4;
	overflow: hidden;
}

.ask-brandagy__brief-meter-fill {
	display: block;
	width: 0;
	height: 100%;
	border-radius: inherit;
	background: var(--ab-tone, var(--ab-accent));
	transition: width 0.3s cubic-bezier(0.2, 0.7, 0.2, 1), background 0.3s ease;
}

.ask-brandagy__brief-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ask-brandagy__brief-item {
	padding: 11px 0;
	border-top: 1px solid var(--ab-row-line);
}

.ask-brandagy__brief-item:first-child {
	border-top: 0;
	padding-top: 0;
}

.ask-brandagy__brief-item-label {
	display: block;
	margin-bottom: 3px;
	font-size: 13.5px;
	font-weight: 400;
	line-height: 1.5;
	color: var(--ab-muted);
}

.ask-brandagy__brief-item-value {
	display: block;
	font-size: 15.5px;
	font-weight: 600;
	line-height: 1.5;
	color: var(--ab-ink);
	text-wrap: pretty;
}

/* An unanswered row still shows its label and `لم يُحدَّد`: a blank would read
   as a rendering fault rather than as a question still open. */
.ask-brandagy__brief-item--unset .ask-brandagy__brief-item-value {
	font-weight: 400;
	color: var(--ab-muted);
}

/* The naming consequence of the choice, not the choice again. */
.ask-brandagy__brief-item-note {
	display: block;
	margin-top: 4px;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.55;
	color: var(--ab-muted);
	text-wrap: pretty;
}

.ask-brandagy__detail-list {
	margin: 10px 0 0;
}

.ask-brandagy__detail-row {
	display: flex;
	align-items: baseline;
	gap: 10px;
	padding: 9px 0;
	border-top: 1px solid var(--ab-row-line);
}

.ask-brandagy__detail-row:first-child {
	border-top: 0;
}

.ask-brandagy__detail-label {
	flex: 1;
	margin: 0;
	font-size: 13.5px;
	font-weight: 400;
	line-height: 1.55;
	color: var(--ab-muted);
}

.ask-brandagy__detail-value {
	margin: 0;
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.55;
	color: var(--ab-ink);
	text-align: end;
}

.ask-brandagy__saved-head {
	display: flex;
	align-items: baseline;
	gap: 10px;
}

.ask-brandagy__saved-head .ask-brandagy__section-label {
	flex: 1;
}

.ask-brandagy__saved-count {
	flex-shrink: 0;
	font-size: 12px;
	font-weight: 600;
	color: var(--ab-ink);
	font-variant-numeric: tabular-nums;
}

.ask-brandagy__saved-list {
	display: block;
	margin: 6px 0 0;
	padding: 0;
	list-style: none;
}

.ask-brandagy__saved-name-row {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 0;
	border-top: 1px solid var(--ab-row-line);
	border-bottom: 0;
}

.ask-brandagy__saved-name-row:first-child {
	border-top: 0;
}

.ask-brandagy__saved-name-copy {
	flex: 1;
	min-width: 0;
}

.ask-brandagy__saved-name-title {
	display: block;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--ab-ink);
}

.ask-brandagy__saved-name-domain {
	display: block;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.5;
	color: var(--ab-muted);
	direction: ltr;
	unicode-bidi: isolate;
	overflow-wrap: anywhere;
	text-align: start;
}

.ask-brandagy .ask-brandagy__saved-name-remove {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	padding: 0;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: var(--ab-muted);
	font-size: 15px;
	line-height: 1;
	cursor: pointer;
	opacity: 0;
	transition: opacity 0.16s ease, background 0.16s ease, color 0.16s ease;
}

.ask-brandagy__saved-name-row:hover .ask-brandagy__saved-name-remove,
.ask-brandagy__saved-name-row:focus-within .ask-brandagy__saved-name-remove {
	opacity: 1;
}

.ask-brandagy .ask-brandagy__saved-name-remove:hover {
	background: #f8e9e9;
	color: #a33a3a;
}

/* Pointer-only reveal would leave the control unreachable on touch, where the
   project's 44px minimum target also applies. */
@media (hover: none) {
	.ask-brandagy .ask-brandagy__saved-name-remove {
		opacity: 1;
		width: 44px;
		height: 44px;
	}
}

.ask-brandagy .ask-brandagy__export {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 46px;
	margin-top: 22px;
	padding: 0 14px;
	border: 1px solid var(--ab-line);
	border-radius: 12px;
	background: var(--ab-surface);
	font-size: 13.5px;
	font-weight: 600;
	color: var(--ab-ink);
	cursor: pointer;
	transition: border-color 0.18s ease;
}

.ask-brandagy .ask-brandagy__export:hover {
	border-color: var(--ab-ink);
}

/* Inert, not hidden: the reader should see that an export exists and what it
   is waiting for. A two-answer brief exports a document that embarrasses the
   product. */
.ask-brandagy .ask-brandagy__export[aria-disabled="true"] {
	background: var(--ab-tint);
	color: var(--ab-muted);
	border-color: var(--ab-line);
	cursor: not-allowed;
}

.ask-brandagy__rail--brief .ask-brandagy__empty-copy {
	margin-top: 10px;
	font-size: 13px;
	line-height: 1.6;
	text-wrap: pretty;
}

.ask-brandagy__projects-head {
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin-bottom: 14px;
}

/* Scoped past the page's own `.ask-brandagy h2` sizing: this is a section
   label, not a heading in the reading order of the stage. */
.ask-brandagy .ask-brandagy__projects-label {
	flex: 1;
	margin: 0;
	font-size: 13.5px;
	font-weight: 400;
	line-height: 1.5;
	color: var(--ab-muted);
}

.ask-brandagy__projects-quota {
	flex-shrink: 0;
	font-size: 12px;
	font-weight: 500;
	color: var(--ab-muted);
	font-variant-numeric: tabular-nums;
}

.ask-brandagy__project-list {
	display: grid;
	gap: 3px;
	margin: 0;
}

.ask-brandagy__project-card {
	position: relative;
	display: flex;
	align-items: center;
	gap: 6px;
	width: 100%;
	min-height: 56px;
	padding-block: 0;
	padding-inline: 12px 8px;
	border: 0;
	border-radius: 12px;
	background: transparent;
	text-align: start;
	color: inherit;
	cursor: pointer;
	transition: background 0.18s ease;
}

.ask-brandagy__project-card:hover {
	background: var(--ab-tint);
}

.ask-brandagy__project-card.is-active,
.ask-brandagy__project-card.is-active:hover {
	background: var(--ab-well);
}

/* A pseudo-element, not a border: a border would change the box and shift the
   label by 2px between the active and inactive state. */
.ask-brandagy__project-card.is-active::before {
	content: "";
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	width: 2px;
	border-radius: 12px 0 0 12px;
	background: var(--ab-accent);
}

.ask-brandagy__project-card-body {
	display: grid;
	flex: 1;
	min-width: 0;
}

.ask-brandagy__project-card-title {
	margin: 0;
	overflow: hidden;
	font-size: 15px;
	font-weight: 500;
	line-height: 20px;
	color: var(--ab-ink);
	white-space: nowrap;
	text-overflow: ellipsis;
}

.ask-brandagy__project-card.is-active .ask-brandagy__project-card-title {
	font-weight: 600;
	color: var(--ab-ink);
}

.ask-brandagy__project-card-copy {
	overflow: hidden;
	font-size: 12.5px;
	line-height: 17px;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.ask-brandagy__project-dot {
	flex-shrink: 0;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #d5d8cc;
}

.ask-brandagy__project-card.is-active .ask-brandagy__project-dot {
	background: var(--ab-accent);
}

/* A slot to fill, not an object that exists yet. Scoped past the page's
   `.ask-brandagy button { font: inherit }` reset so the type sticks. */
.ask-brandagy .ask-brandagy__new-project {
	display: flex;
	align-items: center;
	gap: 9px;
	width: 100%;
	min-height: 44px;
	margin-top: 8px;
	padding: 0 10px;
	border: 1px dashed #d8dccd;
	border-radius: 12px;
	background: transparent;
	font-size: 14px;
	font-weight: 500;
	color: var(--ab-muted);
	text-align: start;
	cursor: pointer;
	transition: border-color 0.18s ease, color 0.18s ease;
}

.ask-brandagy .ask-brandagy__new-project:hover {
	border-color: var(--ab-ink);
	color: var(--ab-ink);
}

.ask-brandagy__new-project-glyph {
	flex-shrink: 0;
	font-size: 15px;
	line-height: 1;
}

/* The one card in this column that is not a project, so the one lime edge. */
.ask-brandagy__plan-card {
	margin-top: 12px;
	padding: 15px 16px;
	border: 1px solid var(--ab-line);
	border-radius: 14px;
	background: var(--ab-soft);
}

.ask-brandagy__plan-card h3 {
	margin: 0 0 6px;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--ab-ink);
}

.ask-brandagy__plan-card p {
	margin: 0 0 12px;
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--ab-muted);
	text-wrap: pretty;
}

.ask-brandagy__eyebrow,
.ask-brandagy__meta {
	margin: 0;
	color: var(--ab-muted);
	font-size: 13.5px;
	font-weight: 400;
	line-height: 1.5;
}

.ask-brandagy__plan-card-cta,
.ask-brandagy__footer-link,
.ask-brandagy__intro-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 40px;
	padding: 0 18px;
	border-radius: 999px;
	border: 1px solid transparent;
	background: var(--ab-ink);
	/* the lime is the page's one accent, so it is what the ink carries */
	color: var(--ab-lime);
	text-decoration: none;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
}

.ask-brandagy__plan-card-cta {
	display: flex;
	width: 100%;
	min-height: 44px;
	font-size: 14px;
}

.ask-brandagy__project-list {
	padding: 0;
	list-style: none;
}

.ask-brandagy__name-row,
.ask-brandagy__question-option {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}

.ask-brandagy__project-card-copy,
.ask-brandagy__empty-copy {
	margin: 0;
	color: var(--ab-muted);
	font-size: 13px;
	line-height: 1.55;
	text-wrap: pretty;
}

.ask-brandagy__main {
	min-width: 0;
}

.ask-brandagy__stage {
	display: flex;
	flex-direction: column;
	min-width: 0;
	min-height: calc(100vh - 106px);
}

.ask-brandagy__screen {
	width: 100%;
}

.ask-brandagy__screen--intro {
	max-width: 560px;
	margin: auto;
	padding: 20px 0 16px;
	text-align: start;
}

.ask-brandagy__screen--track {
	max-width: 590px;
	margin: 18px auto 0;
}

.ask-brandagy__screen--chat,
.ask-brandagy__screen--names {
	max-width: 640px;
	margin: 0 auto;
}

.ask-brandagy__screen--explore {
	max-width: 590px;
	margin: 0 auto;
}

.ask-brandagy__intro-mark,
.ask-brandagy__track-icon,
.ask-brandagy__bot-mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 10px;
	background: var(--ab-lime);
	color: var(--ab-ink);
}

.ask-brandagy__intro-mark {
	width: 48px;
	height: 48px;
	border-radius: 50%;
}

.ask-brandagy__track-icon {
	width: 40px;
	height: 40px;
	border-radius: 12px;
}

.ask-brandagy__intro-mark svg,
.ask-brandagy__track-icon svg,
.ask-brandagy__composer-send svg,
.ask-brandagy__secondary-pill svg,
.ask-brandagy__screen-tab svg,
.ask-brandagy__bot-mark svg,
.ask-brandagy__save-button svg {
	width: 17px;
	height: 17px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.ask-brandagy__intro-mark svg {
	fill: currentColor;
	stroke: none;
	width: 22px;
	height: 22px;
}

.ask-brandagy h1,
.ask-brandagy h2 {
	margin: 10px 0 0;
	font-weight: 700;
	letter-spacing: -0.03em;
	/* 1.22 is the Arabic minimum at this size — anything tighter clips the
	   descenders of a hamza or a final ya. */
	line-height: 1.22;
	color: var(--ab-ink);
	text-wrap: pretty;
}

.ask-brandagy h1 {
	font-size: 30px;
	letter-spacing: -0.035em;
}

.ask-brandagy h2 {
	font-size: 22px;
}

@media (min-width: 760px) {
	.ask-brandagy h1 {
		font-size: 40px;
	}

	.ask-brandagy h2 {
		font-size: 25px;
	}
}

.ask-brandagy__lede {
	margin: 10px 0 0;
	color: var(--ab-muted);
	font-size: 15.5px;
	line-height: 1.7;
	text-wrap: pretty;
}

.ask-brandagy__screen--intro .ask-brandagy__lede {
	font-size: 16.5px;
	line-height: 1.75;
}

.ask-brandagy__intro-card {
	margin-top: 18px;
	padding: 16px 18px;
	border: 1px solid var(--ab-line);
	border-radius: var(--ab-radius-panel);
	background: var(--ab-surface);
}

.ask-brandagy__intro-textarea {
	width: 100%;
	min-height: 64px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--ab-ink);
	font-size: 15.5px;
	line-height: 1.6;
	resize: vertical;
}

.ask-brandagy__intro-textarea::placeholder,
.ask-brandagy__composer-input::placeholder {
	color: var(--ab-tertiary);
}

.ask-brandagy__intro-actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 10px;
	padding-top: 12px;
	border-top: 1px solid var(--ab-row-line);
}

.ask-brandagy__intro-submit[disabled] {
	background: var(--ab-tint);
	color: var(--ab-muted);
	cursor: not-allowed;
}

.ask-brandagy__intro-hint {
	color: var(--ab-muted);
	font-size: 13.5px;
}

.ask-brandagy__seed-chips,
.ask-brandagy__quick-asks {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 12px;
}

.ask-brandagy__seed-chip,
.ask-brandagy__quick-ask {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 38px;
	padding: 0 15px;
	border: 1px solid var(--ab-chip-line);
	border-radius: 999px;
	background: var(--ab-surface);
	color: var(--ab-ink);
	font-size: 13.5px;
	cursor: pointer;
	transition: background 0.16s ease, border-color 0.16s ease;
}

.ask-brandagy__seed-chip:hover,
.ask-brandagy__quick-ask:hover {
	border-color: var(--ab-line);
	background: var(--ab-soft);
}

.ask-brandagy__track-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	margin-top: 14px;
}

.ask-brandagy__track-card {
	display: grid;
	gap: 10px;
	padding: 18px;
	border: 1px solid var(--ab-line);
	border-radius: 16px;
	background: var(--ab-surface);
	text-align: start;
	cursor: pointer;
	transition: border-color 0.16s ease, background 0.16s ease;
}

.ask-brandagy__track-card:hover {
	background: var(--ab-soft);
}

.ask-brandagy__track-card strong {
	font-size: 17.5px;
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.35;
}

.ask-brandagy__track-card p {
	margin: 0;
	color: var(--ab-muted);
	font-size: 13.5px;
	line-height: 1.6;
	text-wrap: pretty;
}

.ask-brandagy__track-cta {
	color: var(--ab-accent);
	font-size: 13.5px;
	font-weight: 600;
}

/* On desktop the wrapper must not exist as a box: `display: contents` hands the
   screen bar straight back to the stage's flex flow, so its `order: -1` and its
   own sticky behaviour are untouched. Below 1100px it becomes a real bar. */
/* One bar over the stage: the screen tabs at the reading start, the project
   switcher at the far end. It replaces the old first column, so it is present
   on the intro screen too — the tabs inside it are what come and go. */
.ask-brandagy__subheader {
	order: -1;
	position: sticky;
	top: var(--ab-chrome);
	z-index: 40;
	display: flex;
	align-items: center;
	gap: 10px;
	width: auto;
	margin: 0 0 14px;
	padding: 6px 0 10px;
	background: var(--ab-page);
	border-bottom: 1px solid var(--ab-row-line);
}

.ask-brandagy__drawer-open,
.ask-brandagy__drawer-close {
	display: none;
}

.ask-brandagy__screen-bar {
	display: flex;
	align-items: center;
	gap: 6px;
	flex: 1;
	min-width: 0;
	overflow-x: auto;
	scrollbar-width: none;
}

.ask-brandagy__screen-bar::-webkit-scrollbar {
	display: none;
}

.ask-brandagy__screen-tab {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex-shrink: 0;
	min-height: 42px;
	padding: 0 14px;
	border: 1px solid transparent;
	border-radius: 999px;
	background: transparent;
	color: var(--ab-muted);
	font-size: 13.5px;
	font-weight: 500;
	cursor: pointer;
	transition: background 0.16s ease, color 0.16s ease;
}

.ask-brandagy__screen-tab:hover:not(.is-active) {
	background: var(--ab-soft);
	color: var(--ab-ink);
}

.ask-brandagy__screen-tab.is-active {
	border-color: transparent;
	background: var(--ab-well);
	color: var(--ab-ink);
	font-weight: 600;
}

.ask-brandagy__screen-tab-count {
	display: none;
	align-items: center;
	justify-content: center;
	min-width: 22px;
	height: 22px;
	padding: 0 6px;
	border-radius: 999px;
	background: var(--ab-tint);
	color: var(--ab-muted);
	font-size: 11px;
	font-weight: 600;
}

.ask-brandagy__screen-tab.is-active .ask-brandagy__screen-tab-count {
	background: var(--ab-surface);
	color: var(--ab-ink);
}

.ask-brandagy__screen-head {
	margin-bottom: 11px;
}

.ask-brandagy__screen-head--names {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
}

.ask-brandagy__secondary-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 40px;
	padding: 0 15px;
	border: 1px solid var(--ab-line);
	border-radius: 999px;
	background: var(--ab-surface);
	color: var(--ab-ink);
	font-size: 13.5px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.16s ease;
}

.ask-brandagy__secondary-pill:hover {
	background: var(--ab-soft);
}

.ask-brandagy__thread {
	display: grid;
	gap: 10px;
}

.ask-brandagy__bubble-row {
	display: flex;
	align-items: flex-start;
	gap: 8px;
}

.ask-brandagy__bubble-row--user {
	justify-content: flex-start;
	flex-direction: row-reverse;
}

/* The turn's own column: the bubble plus whatever hangs under it. */
.ask-brandagy__bubble-row > div {
	min-width: 0;
	max-width: 88%;
}

.ask-brandagy__bubble-row--user > div {
	max-width: 78%;
}

.ask-brandagy__bubble {
	/* The cap lives on the wrapper below, not here: each bubble sits inside a
	   shrink-wrapped div, so a percentage on the bubble measured 88% of its own
	   content width and broke short questions onto two lines. */
	max-width: 100%;
	padding: 12px 15px;
	border-radius: var(--ab-radius-bubble);
	font-size: 15px;
	line-height: 1.65;
	color: var(--ab-body);
	/* No `text-wrap: pretty` here: a bubble is shrink-to-fit, and balancing a
	   four-word question across two lines makes a one-line bubble look broken. */
}

.ask-brandagy__bubble--bot {
	background: var(--ab-tint);
}

.ask-brandagy__bubble--user {
	max-width: 100%;
	background: var(--ab-well);
	border: 1px solid transparent;
	color: var(--ab-ink);
}

.ask-brandagy__edit-answer {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	margin-top: 2px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--ab-muted);
	font-size: 13.5px;
	font-weight: 600;
	cursor: pointer;
}

.ask-brandagy__edit-answer:hover {
	color: var(--ab-link-hover);
}

.ask-brandagy__typing-pill {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 7px 10px;
	border-radius: 999px;
	background: var(--ab-tint);
	color: var(--ab-accent);
	font-size: 12px;
	font-weight: 500;
}

.ask-brandagy__typing-dots {
	display: inline-flex;
	gap: 5px;
}

.ask-brandagy__typing-dots span,
.ask-brandagy__pulse-dot {
	width: 6px;
	height: 6px;
	border-radius: 999px;
	background: var(--ab-accent);
	animation: ab-pulse 1.3s ease-in-out infinite;
}

.ask-brandagy__typing-dots span:nth-child(2) {
	animation-delay: 0.18s;
}

.ask-brandagy__typing-dots span:nth-child(3) {
	animation-delay: 0.36s;
}

.ask-brandagy__quick-asks {
	margin-top: 10px;
}

.ask-brandagy__names-loading {
	margin-top: 8px;
}

.ask-brandagy__names-status {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--ab-accent);
	font-size: 12px;
	font-weight: 500;
}

.ask-brandagy__pulse-dot {
	width: 7px;
	height: 7px;
}

.ask-brandagy__name-skeletons {
	display: grid;
	gap: 6px;
	margin-top: 9px;
}

.ask-brandagy__name-skeletons span {
	display: block;
	height: 52px;
	border: 1px solid #e8e7e3;
	border-radius: 14px;
	background: linear-gradient(90deg, #f4f3ef, #fafaf7, #f4f3ef);
	background-size: 200% 100%;
	animation: ab-shimmer 1.3s ease-in-out infinite;
}

.ask-brandagy__names-panel {
	overflow: hidden;
	border: 1px solid var(--ab-line);
	border-radius: var(--ab-radius-panel);
	background: var(--ab-surface);
}

.ask-brandagy__name-row {
	padding: 15px 16px;
}

.ask-brandagy__name-row + .ask-brandagy__name-row {
	border-top: 1px solid var(--ab-row-line);
}

.ask-brandagy__name-dot {
	flex: 0 0 7px;
	width: 7px;
	height: 7px;
	margin-top: 8px;
	border-radius: 999px;
	background: var(--ab-accent);
}

.ask-brandagy__name-content {
	flex: 1 1 auto;
	min-width: 0;
}

.ask-brandagy__name-title-line {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 7px;
}

.ask-brandagy__name-title {
	margin: 0;
	font-size: 16.5px;
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 1.35;
	color: var(--ab-ink);
}

.ask-brandagy__name-domain {
	color: var(--ab-muted);
	font-size: 13px;
	font-weight: 500;
	direction: ltr;
	unicode-bidi: isolate;
	overflow-wrap: anywhere;
}

.ask-brandagy__name-reason {
	margin: 5px 0 0;
	color: var(--ab-muted);
	font-size: 13.5px;
	line-height: 1.6;
	text-wrap: pretty;
}

.ask-brandagy__status-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 5px 11px;
	border-radius: 999px;
	white-space: nowrap;
	font-size: 12px;
	font-weight: 600;
}

.ask-brandagy__status-badge--free {
	background: var(--ab-free-bg);
	color: var(--ab-free-fg);
}

.ask-brandagy__status-badge--listed {
	background: var(--ab-listed-bg);
	color: var(--ab-listed-fg);
}

.ask-brandagy__status-badge--taken {
	background: var(--ab-taken-bg);
	color: var(--ab-taken-fg);
}

.ask-brandagy__save-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 40px;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 12px;
	background: transparent;
	color: var(--ab-muted);
	cursor: pointer;
}

.ask-brandagy__save-button.is-saved {
	background: var(--ab-lime);
	color: var(--ab-ink);
}

.ask-brandagy__names-footer,
.ask-brandagy__question-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 10px;
}

.ask-brandagy__ghost-link {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--ab-muted);
	font-size: 13.5px;
	cursor: pointer;
}

.ask-brandagy__ghost-link:hover {
	color: var(--ab-ink);
}

.ask-brandagy__footer-link {
	background: transparent;
	color: var(--ab-ink);
	border-color: transparent;
	padding: 0;
	min-height: 34px;
}

.ask-brandagy__explore-progress {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 8px;
}

.ask-brandagy__progress-pips {
	display: flex;
	align-items: center;
	gap: 6px;
}

.ask-brandagy__progress-pips span {
	display: block;
	width: 6px;
	height: 6px;
	border-radius: 999px;
	background: #dfe0d4;
	transition: width 0.2s ease, background 0.2s ease;
}

.ask-brandagy__progress-pips span.is-done {
	background: #bfd59f;
}

.ask-brandagy__progress-pips span.is-active {
	width: 18px;
	background: var(--ab-accent);
}

.ask-brandagy__question-options {
	display: grid;
	gap: 8px;
}

.ask-brandagy__question-option {
	width: 100%;
	min-height: 44px;
	padding: 14px 15px;
	border: 1px solid var(--ab-line);
	border-radius: 14px;
	background: var(--ab-surface);
	text-align: start;
	cursor: pointer;
	transition: border-color 0.16s ease, background 0.16s ease;
}

.ask-brandagy__question-option:hover:not(.is-selected) {
	background: var(--ab-soft);
}

.ask-brandagy__question-option.is-selected {
	border-color: var(--ab-accent);
	background: var(--ab-pick);
}

.ask-brandagy__question-radio {
	flex: 0 0 16px;
	width: 16px;
	height: 16px;
	margin-top: 2px;
	border: 1px solid #ccd3c9;
	border-radius: 999px;
}

.ask-brandagy__question-option.is-selected .ask-brandagy__question-radio {
	border-color: var(--ab-accent);
	box-shadow: inset 0 0 0 4px var(--ab-accent);
}

.ask-brandagy__question-copy {
	flex: 1 1 auto;
	min-width: 0;
}

.ask-brandagy__question-label {
	display: block;
	font-size: 15.5px;
	font-weight: 600;
	line-height: 1.45;
	color: var(--ab-ink);
}

.ask-brandagy__question-note-small {
	display: block;
	margin-top: 3px;
	color: var(--ab-muted);
	font-size: 13.5px;
	line-height: 1.55;
}

.ask-brandagy__composer {
	position: sticky;
	bottom: 0;
	z-index: 20;
	width: 100%;
	max-width: 640px;
	margin: 12px auto 0;
	padding-bottom: calc(4px + env(safe-area-inset-bottom));
	background: var(--ab-page);
}

.ask-brandagy__composer-fade {
	position: absolute;
	inset-inline: 0;
	top: -22px;
	height: 22px;
	pointer-events: none;
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--ab-page));
}

.ask-brandagy__composer-form {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 56px;
	padding-inline: 18px 6px;
	border: 1px solid var(--ab-line);
	border-radius: 999px;
	background: var(--ab-surface);
}

.ask-brandagy__composer-input {
	flex: 1 1 auto;
	min-width: 0;
	border: 0;
	background: transparent;
	color: var(--ab-ink);
	font-size: 15.5px;
	line-height: 1.5;
}

.ask-brandagy__composer-send {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 44px;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: var(--ab-tint);
	color: var(--ab-muted);
	cursor: pointer;
}

[dir="rtl"] .ask-brandagy__composer-send svg {
	transform: scaleX(-1);
}

.ask-brandagy__composer-send.is-ready {
	background: var(--ab-ink);
	color: var(--ab-surface);
}

.ask-brandagy__composer-note {
	margin: 8px 4px 0;
	color: var(--ab-muted);
	font-size: 12px;
	line-height: 1.6;
	text-align: center;
	text-wrap: pretty;
}

.ask-brandagy__backdrop {
	display: none;
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

@keyframes ab-pulse {
	0%,
	100% { opacity: 0.35; transform: translateY(0); }
	50% { opacity: 1; transform: translateY(-1px); }
}

@keyframes ab-shimmer {
	0% { background-position: 100% 0; }
	100% { background-position: -100% 0; }
}

/* ---------------------------------------------------------------------------
   The upgrade dialog.
   --------------------------------------------------------------------------- */

.ask-brandagy__dialog {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: rgba(22, 51, 0, 0.34);
}

@keyframes ab-rise {
	from { opacity: 0; transform: translateY(10px); }
	to { opacity: 1; transform: translateY(0); }
}

.ask-brandagy__dialog-panel {
	width: 100%;
	max-width: 420px;
	max-height: calc(100vh - 40px);
	overflow-y: auto;
	padding: 26px 28px;
	border-radius: 22px;
	background: var(--ab-surface);
	animation: ab-rise 0.24s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.ask-brandagy .ask-brandagy__dialog-title {
	margin: 4px 0 8px;
	font-size: 22px;
	font-weight: 600;
	letter-spacing: -0.03em;
	line-height: 1.25;
	color: var(--ab-ink);
}

.ask-brandagy__dialog-note {
	margin: 0 0 20px;
	font-size: 14.5px;
	line-height: 1.7;
	color: var(--ab-muted);
	text-wrap: pretty;
}

.ask-brandagy__plans {
	display: grid;
	gap: 10px;
}

.ask-brandagy__plan {
	padding: 16px 18px;
	border: 1px solid var(--ab-line);
	border-radius: 16px;
	background: var(--ab-surface);
}

/* The plan being sold is the only tinted card; the plan the reader already has
   is shown beside it, with its real limits. A wall that hides what you already
   have reads as a trap. */
.ask-brandagy__plan--next {
	border-color: var(--ab-line);
	background: var(--ab-pick);
}

.ask-brandagy__plan-head {
	display: flex;
	align-items: baseline;
	gap: 8px;
	margin-bottom: 6px;
}

.ask-brandagy__plan-name {
	font-size: 15px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--ab-ink);
}

.ask-brandagy__plan-badge {
	padding: 2px 8px;
	border-radius: 999px;
	background: var(--ab-well);
	font-size: 11px;
	font-weight: 600;
	line-height: 1.6;
	color: var(--ab-ink);
}

.ask-brandagy__plan-price {
	margin-inline-start: auto;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--ab-ink);
}

.ask-brandagy__plan-feature {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	padding: 5px 0;
	font-size: 13.5px;
	font-weight: 400;
	line-height: 20px;
	color: var(--ab-body);
}

.ask-brandagy__plan-tick {
	flex-shrink: 0;
	font-size: 13px;
	line-height: 20px;
	color: var(--ab-accent);
}

.ask-brandagy__dialog-foot {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 20px;
}

.ask-brandagy__dialog-spacer {
	flex: 1;
}

/* The way out is worded and comes first; the commit is filled and comes last.
   A paywall whose only dismissal is a bare ✕ is coercive. */
.ask-brandagy .ask-brandagy__dialog-dismiss {
	display: inline-flex;
	align-items: center;
	min-height: 46px;
	padding: 0 18px;
	border: 0;
	border-radius: 999px;
	background: transparent;
	font-size: 14.5px;
	font-weight: 600;
	color: var(--ab-muted);
	cursor: pointer;
}

.ask-brandagy__dialog-commit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	padding: 0 26px;
	border-radius: 999px;
	background: var(--ab-ink);
	color: var(--ab-lime);
	font-size: 14.5px;
	font-weight: 600;
	text-decoration: none;
}

/* Export prints the brief alone. Without this the browser's print path emits
   the whole workspace, which is not a document anyone would send. */
@media print {
	body.ask-brandagy-page .site-header,
	body.ask-brandagy-page .site-footer,
	.ask-brandagy__main,
	.ask-brandagy__export,
	.ask-brandagy__saved-name-remove {
		display: none !important;
	}

	.ask-brandagy {
		min-height: 0;
		padding: 0;
	}

	.ask-brandagy__shell {
		display: block;
		min-height: 0;
		width: 100%;
	}

	.ask-brandagy__rail--brief {
		display: block !important;
		padding: 0;
		border: 0;
	}

	.ask-brandagy__rail--brief .ask-brandagy__rail-inner {
		position: static;
	}
}

@media (max-width: 1099px) {
	.ask-brandagy {
		padding: 14px 0 24px;
		--ab-drawer-w: min(86vw, 340px);
	}

	.ask-brandagy__shell {
		grid-template-columns: minmax(0, 1fr);
		padding-inline: 28px;
		min-height: 0;
	}

	.ask-brandagy__main {
		padding-inline: 0;
		border-inline-end: 0;
	}

	.ask-brandagy__subheader {
		width: 100%;
		margin-inline-end: 0;
		padding-inline-end: 0;
		border-inline-end: 0;
	}

	/* One bar under the site header: a control for each column at the edges,
	   the screen tabs between them. */
	.ask-brandagy__subheader {
		order: -1;
		position: sticky;
		top: var(--ab-chrome);
		z-index: 30;
		display: flex;
		align-items: center;
		/* On the intro screen the tab strip is hidden, so the two column controls
		   have to hold the edges on their own. */
		justify-content: space-between;
		gap: 8px;
		margin-bottom: 12px;
		padding: 6px 0 8px;
		background: var(--ab-page);
		border-bottom: 1px solid var(--ab-line);
	}

	.ask-brandagy__screen-bar {
		/* The stage gives it `order: -1`; inside the bar it belongs between the
		   two column controls. */
		order: 0;
		position: static;
		flex: 1;
		min-width: 0;
		justify-content: center;
		margin: 0;
		padding: 0;
		background: transparent;
		border-bottom: 0;
	}

	.ask-brandagy__screen-tab {
		min-height: 44px;
		padding: 0 12px;
	}

	.ask-brandagy__drawer-open {
		display: inline-flex;
		align-items: center;
		gap: 7px;
		flex-shrink: 0;
		min-height: 44px;
		padding: 0 11px;
		border: 1px solid var(--ab-line);
		border-radius: 999px;
		background: var(--ab-surface);
		font-size: 12.5px;
		font-weight: 600;
		color: var(--ab-ink);
		cursor: pointer;
	}

	.ask-brandagy__drawer-open-icon {
		display: inline-flex;
	}

	.ask-brandagy__drawer-open svg {
		width: 17px;
		height: 17px;
		fill: none;
		stroke: currentColor;
		stroke-width: 2;
		stroke-linecap: round;
		stroke-linejoin: round;
	}

	.ask-brandagy__drawer-open-label {
		display: none;
	}

	/* ---- the two columns as off-canvas drawers ---- */

	.ask-brandagy__rail {
		position: fixed;
		top: var(--ab-chrome);
		bottom: 0;
		z-index: 130;
		display: block;
		width: var(--ab-drawer-w);
		padding: 20px 18px 28px;
		border: 0;
		background: var(--ab-page);
		overflow-y: auto;
		overscroll-behavior: contain;
		visibility: hidden;
		/* Placed with logical insets, moved with a transform so the slide runs on
		   the compositor. `--ab-drawer-sign` is set once from the rail's own
		   computed direction, which is what keeps the two drawers entering from
		   the page's start and end edges without a direction-specific rule. */
		transform: translateX(calc(var(--ab-drawer-sign, 1) * 100%));
		transition: transform 0.26s cubic-bezier(0.2, 0.7, 0.2, 1), visibility 0s 0.26s;
	}

	.ask-brandagy__rail--brief {
		inset-inline-end: 0;
		transform: translateX(calc(var(--ab-drawer-sign, 1) * -100%));
	}

	.ask-brandagy__rail.is-open {
		visibility: visible;
		transform: translateX(0);
		transition: transform 0.26s cubic-bezier(0.2, 0.7, 0.2, 1), visibility 0s;
		box-shadow: 0 0 40px -8px rgba(22, 51, 0, 0.26);
	}

	.ask-brandagy__rail .ask-brandagy__rail-inner {
		position: static;
	}

	.ask-brandagy__drawer-close {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		margin: 0 0 8px;
		margin-inline-start: auto;
		padding: 0;
		border: 0;
		border-radius: 12px;
		background: transparent;
		color: var(--ab-muted);
		cursor: pointer;
	}

	.ask-brandagy__drawer-close svg {
		width: 18px;
		height: 18px;
		fill: none;
		stroke: currentColor;
		stroke-width: 2;
		stroke-linecap: round;
	}

	.ask-brandagy__backdrop {
		display: block;
		position: fixed;
		inset: var(--ab-chrome) 0 0;
		z-index: 120;
		background: rgba(22, 51, 0, 0.34);
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.2s ease, visibility 0.2s ease;
	}

	.ask-brandagy.has-drawer .ask-brandagy__backdrop {
		opacity: 1;
		visibility: visible;
	}
}

/* Room for the words returns as soon as the bar has it. */
@media (min-width: 480px) and (max-width: 1099px) {
	.ask-brandagy__drawer-open-label {
		display: inline;
	}
}

@media (max-width: 1099px) and (prefers-reduced-motion: reduce) {
	.ask-brandagy__rail {
		transition: none;
	}
}

@media (max-width: 759px) {
	.ask-brandagy {
		padding: 12px 0 20px;
	}

	.ask-brandagy__shell {
		padding-inline: 18px;
	}

	.ask-brandagy__track-grid {
		grid-template-columns: 1fr;
	}

	/* Centred in the stage the intro sits below the fold on a phone: the heading
	   starts a hundred pixels down and the ready-made examples fall off it. */
	.ask-brandagy__screen--intro {
		margin-block: 0;
		padding-top: 6px;
	}

	.ask-brandagy__screen--track {
		margin-top: 6px;
	}

	.ask-brandagy__screen-head--names,
	.ask-brandagy__names-footer,
	.ask-brandagy__question-footer,
	.ask-brandagy__explore-progress {
		flex-direction: column;
		align-items: stretch;
	}

	/* The names header reads title first, then the regenerate pill — the source
	   order puts the pill first for the desktop row. */
	.ask-brandagy__screen-head--names .ask-brandagy__secondary-pill {
		order: 2;
		align-self: flex-start;
	}

	.ask-brandagy__explore-progress {
		gap: 8px;
	}

	.ask-brandagy__bubble-row > div,
	.ask-brandagy__bubble-row--user > div {
		max-width: 100%;
	}

	/* Anything under 16px makes iOS Safari zoom the page on focus, and it never
	   zooms back out. */
	.ask-brandagy input,
	.ask-brandagy textarea,
	.ask-brandagy select {
		font-size: 16px;
	}

	/* The two footers sit above a fixed composer, so they need room of their own
	   rather than the composer's overlap. */
	.ask-brandagy__names-footer,
	.ask-brandagy__question-footer {
		align-items: flex-start;
	}
}

/* The smallest phones still in use: 320px with the shell's own gutters leaves
   284px of stage, which is where the name rows and the brief rows start to
   break rather than wrap. */
@media (max-width: 379px) {
	.ask-brandagy__shell {
		padding-inline: 14px;
	}

	.ask-brandagy__name-row {
		padding: 14px 12px;
	}

	.ask-brandagy__brief,
	.ask-brandagy__detail,
	.ask-brandagy__saved {
		padding: 15px;
	}

	.ask-brandagy__composer-form {
		padding-inline: 14px 5px;
	}
}


/* ---------------------------------------------------------------------------
   The project switcher.
   What used to be the first column: the pill names the open project, and the
   panel under it carries the list, the new-project slot and the plan wall.
   --------------------------------------------------------------------------- */

.ask-brandagy__projects {
	position: relative;
	flex-shrink: 0;
	margin-inline-start: auto;
}

.ask-brandagy__projects-toggle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	max-width: 230px;
	min-height: 40px;
	padding: 0 14px;
	border: 1px solid var(--ab-line);
	border-radius: 999px;
	background: var(--ab-surface);
	color: var(--ab-ink);
	font-size: 13.5px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.16s ease, border-color 0.16s ease;
}

.ask-brandagy__projects-toggle:hover {
	border-color: var(--ab-line);
	background: var(--ab-soft);
}

.ask-brandagy__projects-toggle[aria-expanded="true"] {
	border-color: transparent;
	background: var(--ab-well);
	color: var(--ab-ink);
}

.ask-brandagy__projects-toggle-dot {
	flex-shrink: 0;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--ab-accent);
}

.ask-brandagy__projects-toggle-label {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ask-brandagy__projects-toggle-chevron {
	flex-shrink: 0;
	width: 15px;
	height: 15px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform 0.16s ease;
}

.ask-brandagy__projects-toggle[aria-expanded="true"] .ask-brandagy__projects-toggle-chevron {
	transform: rotate(180deg);
}

.ask-brandagy__projects-pop {
	position: absolute;
	inset-block-start: calc(100% + 8px);
	inset-inline-end: 0;
	z-index: 40;
	width: min(272px, calc(100vw - 32px));
	max-height: min(70vh, 560px);
	padding: 14px 12px;
	border: 1px solid var(--ab-line);
	border-radius: 16px;
	background: var(--ab-surface);
	box-shadow: var(--ab-shadow);
	overflow-y: auto;
	overscroll-behavior: contain;
}

.ask-brandagy__projects-pop[hidden] {
	display: none;
}

.ask-brandagy__projects-pop .ask-brandagy__empty-copy {
	padding: 4px 10px 0;
	font-size: 12px;
	line-height: 1.55;
}

@media (prefers-reduced-motion: reduce) {
	.ask-brandagy__projects-toggle,
	.ask-brandagy__projects-toggle-chevron {
		transition: none;
	}
}

@media (max-width: 1099px) {
	/* The bar already holds the brief control at the far edge, so the switcher
	   sits between the tabs and it rather than claiming the whole gap. Anchored
	   to the pill it would hang off the screen, so the panel takes the bar's own
	   width instead — the bar is sticky, which makes it the containing block. */
	.ask-brandagy__projects {
		position: static;
		margin-inline-start: 0;
	}

	.ask-brandagy__projects-pop {
		inset-inline: 0;
		width: auto;
	}

	.ask-brandagy__projects-toggle {
		max-width: 168px;
		min-height: 44px;
	}
}

@media (max-width: 479px) {
	.ask-brandagy__projects-toggle {
		padding: 0 11px;
		font-size: 13px;
	}
}

/* ---------------------------------------------------------------------------
   Phones: the bar takes two rows.
   Three tabs, a switcher wide enough to name the project, and the brief control
   do not fit on one 360px line — squeezed onto one they scrolled, and what
   scrolled out of reach first was the active tab itself. Split, every tab is
   visible and labelled, and the switcher finally has room for the name.
   --------------------------------------------------------------------------- */
@media (max-width: 767px) {
	.ask-brandagy__subheader {
		flex-wrap: wrap;
		gap: 8px;
		padding-bottom: 6px;
	}

	/* `flex-basis: 0`, not `auto`: a long project name would otherwise measure as
	   its full text width, and wrapping is decided before shrinking — the pill
	   took a line of its own and pushed the brief control onto a third row. */
	.ask-brandagy__projects {
		order: 0;
		flex: 1 1 0;
		min-width: 0;
	}

	.ask-brandagy .ask-brandagy__projects-toggle {
		display: flex;
		width: 100%;
		max-width: none;
	}

	.ask-brandagy__drawer-open {
		order: 1;
	}

	.ask-brandagy__screen-bar {
		order: 2;
		flex: 1 0 100%;
		gap: 4px;
		justify-content: space-between;
	}
}

/* Under 380px even three labelled tabs overflow their row, so the labels go
   back to the active tab and the icons carry the rest. */
@media (max-width: 379px) {
	.ask-brandagy__screen-tab-label {
		display: none;
	}

	.ask-brandagy__screen-tab.is-active .ask-brandagy__screen-tab-label {
		display: inline;
	}
}