/*
 * Onboarding goal banner + checklist modal.
 *
 * The banner sits in the same chrome slot as #partner-access-bar (between
 * #header and #content) but is deliberately much quieter than it. The partner
 * bar is loud because mistaking someone else's account for your own is
 * dangerous; a setup checklist is an invitation, and an invitation that shouts
 * gets dismissed.
 */

#onboarding-bar {
	background: var(--brand-light);
	border-bottom: 1px solid #a8c9e8;
	color: var(--content);
	font-size: 0.88em;
	cursor: pointer;
	user-select: none;
}
#onboarding-bar:hover { background: #cfe3f8; }
#onboarding-bar.complete { background: var(--success-light); border-bottom-color: #a9cfaa; }
#onboarding-bar.complete:hover { background: #bde0be; }

.ob-bar-inner {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 7px 16px;
	max-width: 1400px;
	margin: 0 auto;
}
.ob-bar-icon { color: var(--brand-dark); flex: 0 0 auto; }
#onboarding-bar.complete .ob-bar-icon { color: var(--success-dark); }

/* The goal is the user's own words, so it can be any length. Truncate rather
   than wrap: a two-line bar shoves every page down. */
.ob-bar-text {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ob-bar-progress {
	flex: 0 0 110px;
	height: 6px;
	border-radius: 3px;
	background: rgba(255, 255, 255, 0.7);
	overflow: hidden;
}
.ob-bar-progress > span {
	display: block;
	height: 100%;
	background: var(--brand);
	transition: width 0.4s ease;
}
.ob-bar-count { flex: 0 0 auto; color: var(--grey1); white-space: nowrap; }
.ob-bar-cta { flex: 0 0 auto; font-weight: 600; color: var(--brand-dark); white-space: nowrap; }
#onboarding-bar.complete .ob-bar-cta { color: var(--success-dark); }

.ob-bar-close {
	flex: 0 0 auto;
	background: none;
	border: none;
	font-size: 1.35em;
	line-height: 1;
	color: var(--grey2);
	cursor: pointer;
	padding: 0 2px;
}
.ob-bar-close:hover { color: var(--content); }

/* One pulse when a step ticks over. Announcing progress is the only
   interruption here that the user actually earned. */
#onboarding-bar.bumped { animation: ob-bump 0.6s ease; }
@keyframes ob-bump {
	0%, 100% { transform: none; }
	30% { transform: scale(1.012); }
}

@media (max-width: 700px) {
	.ob-bar-progress, .ob-bar-count { display: none; }
	.ob-bar-inner { gap: 8px; padding: 6px 10px; }
}
@media (prefers-reduced-motion: reduce) {
	#onboarding-bar.bumped { animation: none; }
	.ob-bar-progress > span { transition: none; }
}

/* ------------------------------------------------------------------ modal */

/* min() rather than a flat min-width, and the reason is worth keeping.
   .globalmodalcontent is `overflow:hidden` horizontally, and on a phone its
   content box is only ~295px (viewport, less .modal-wrap's 20px gutters, less
   .modalguts' 95%, less 30px of padding each side). A hard 340px min-width is
   therefore not "at least this wide", it is "clipped": the Do it buttons and
   the Send button sat outside the visible box with no way to reach them.
   min(340px, 100%) keeps the desktop floor and lets the phone win. */
.ob-modal { min-width: min(340px, 100%); max-width: 560px; position: relative; }

.ob-goal {
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding: 10px 12px;
	background: var(--grey8);
	border-left: 3px solid var(--brand);
	border-radius: 3px;
	margin-bottom: 14px;
}
.ob-goal-label {
	font-size: 0.74em;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--grey2);
}
.ob-goal-text { font-size: 1.02em; color: var(--content); }

/* Which workspace the steps build in. Quiet by design: it matters when it is
   wrong, and the rest of the time it should not compete with the goal. */
.ob-goal-space { font-size: 0.84em; color: var(--grey2); margin-top: 2px; }
.ob-goal-space strong { color: var(--content); font-weight: 600; }
.ob-goal-space a { margin-left: 4px; }

/* ------------------------------------------------------- workspace chooser */

.ob-space-pick { min-width: min(320px, 100%); max-width: 460px; }
.ob-space-lead { margin: 0 0 12px; color: var(--grey1); }
.ob-space-list { list-style: none; margin: 0; padding: 0; }
.ob-space-list li { border-top: 1px solid var(--grey6); }
.ob-space-list li:last-child { border-bottom: 1px solid var(--grey6); }
.ob-space-list label {
	display: flex;
	align-items: baseline;
	gap: 8px;
	padding: 9px 4px;
	margin: 0;
	cursor: pointer;
	font-weight: normal;
}
.ob-space-list label:hover { background: var(--grey8); }
.ob-space-name { flex: 1 1 auto; color: var(--content); }
.ob-space-meta { flex: 0 0 auto; font-size: 0.82em; color: var(--grey2); }
.ob-space-limit { padding: 9px 4px; font-size: 0.86em; color: var(--grey2); }
.ob-space-newname { padding: 0 4px 10px 26px; }
.ob-space-newname input { width: 100%; box-sizing: border-box; }

/* Seven steps plus a goal, a thread and a running progress log is taller than a
   laptop viewport. Scroll the STEPS rather than the whole modal: the goal stays
   at the top and the feedback box stays at the bottom, both of which you want
   in view while you read a list you are about to complain about. */

/* A list that scrolls with no sign of it reads as a list that ends there, and
   the cut-off row at the bottom edge looks like a rendering fault rather than an
   invitation. The fade is added by JS (`.scrollable`) only when there is
   genuinely more below, so it is never a lie. */
.ob-steps-wrap { position: relative; }
.ob-steps-wrap:after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 34px;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.15s ease;
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff 92%);
	border-bottom: 1px solid var(--grey5);
}
.ob-steps-wrap.scrollable:after { opacity: 1; }

.ob-steps {
	list-style: none;
	margin: 0;
	padding: 0;
	max-height: 36vh;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.ob-step {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 10px 2px;
	border-bottom: 1px solid var(--grey6);
}
.ob-step:last-child { border-bottom: none; }
.ob-step-mark { flex: 0 0 auto; padding-top: 2px; color: var(--grey4); }
.ob-step.done .ob-step-mark { color: var(--success); }
.ob-step.skipped .ob-step-mark { color: var(--grey3); }

.ob-step-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ob-step-title { color: var(--content); }
.ob-step.done .ob-step-title { color: var(--grey1); text-decoration: line-through; }
.ob-step.skipped .ob-step-title { color: var(--grey3); }
.ob-step-why { font-size: 0.86em; color: var(--grey2); line-height: 1.35; }

/* Instructions for a step the assistant cannot do. Set apart from .ob-step-why
   because it is something to follow, not background on why it matters. */
.ob-step-how {
	font-size: 0.86em;
	line-height: 1.35;
	margin-top: 4px;
	padding-left: 8px;
	border-left: 2px solid var(--grey4);
	color: var(--grey1);
}

.ob-step-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; }

.ob-btn {
	border: 1px solid var(--grey4);
	background: var(--button-bg);
	color: var(--button-color);
	border-radius: 4px;
	padding: 5px 12px;
	cursor: pointer;
	font-size: 0.92em;
}
.ob-btn:hover { background: var(--grey5); }
.ob-btn.small { padding: 3px 9px; font-size: 0.86em; }
.ob-btn.primary { background: var(--brand); border-color: var(--brand-dark); color: #fff; }
.ob-btn.primary:hover { background: var(--brand-dark); }
.ob-btn.link { background: none; border-color: transparent; color: var(--grey2); }
.ob-btn.link:hover { background: none; color: var(--content); text-decoration: underline; }

.ob-modal-foot {
	margin-top: 14px;
	padding-top: 12px;
	border-top: 1px solid var(--grey6);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	flex-wrap: wrap;
}
/* The feedback panel is already a visible break, so a rule on top of it is a
   second divider doing the first one's job. */
.ob-feedback + .ob-modal-foot { border-top: none; padding-top: 4px; }
/* A link-styled button still carries button padding, which pushed "Change my
   goal" out of line with everything above it. */
.ob-modal-foot .ob-btn.link { padding-left: 0; padding-right: 0; }
.ob-done-note { margin: 0; color: var(--grey1); flex: 1 1 200px; }

/* Sits behind the content, so the burst reads as happening in the modal rather
   than on top of the text. */
.ob-fireworks {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 0;
}
.ob-modal > *:not(.ob-fireworks) { position: relative; z-index: 1; }

/* ------------------------------------------------------------- goal modal */

.ob-goal-modal { max-width: 520px; }
.ob-intro { margin: 0 0 14px; line-height: 1.5; color: var(--grey1); }
.ob-intro strong { color: var(--content); }
.ob-goal-modal .ob-goal-label { display: block; margin-bottom: 6px; }
.ob-goal-modal textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 9px 10px;
	border: 1px solid var(--grey4);
	border-radius: 4px;
	font-family: inherit;
	font-size: 1em;
	line-height: 1.45;
	resize: vertical;
}
.ob-hint { margin: 6px 0 0; font-size: 0.85em; color: var(--grey2); }

/* ---------------------------------------------------------- talking back */

/* Correcting the checklist. Deliberately quieter than the steps above it: this
   is a repair tool, not the main event, and it only appears while there is
   something left to repair. */

/* A panel rather than another ruled section: three stacked hairlines (steps,
   feedback, footer) read as three unrelated blocks. Tinting this one groups the
   thread with its input and lets the dividers go. */
.ob-feedback {
	margin-top: 16px;
	padding: 12px;
	background: var(--grey8);
	border-radius: 6px;
}
.ob-feedback-label {
	display: block;
	margin-bottom: 7px;
	font-size: 0.9em;
	color: var(--grey1);
}
/* Full-width input with the button beneath it. Side by side, a two-line box
   left the button stranded against one edge of it and squeezed the typing area
   for no reason — the text is the thing here, so it gets the whole width. */
.ob-feedback textarea {
	display: block;
	width: 100%;
	box-sizing: border-box;
	min-height: 38px;
	height: 62px;
	padding: 8px 10px;
	background: var(--input-bg, #fff);
	border: 1px solid var(--grey4);
	border-radius: 4px;
	font-family: inherit;
	font-size: 0.95em;
	line-height: 1.45;
	resize: vertical;
}
.ob-feedback textarea:focus {
	outline: none;
	border-color: var(--brand);
	box-shadow: 0 0 0 2px rgba(43, 122, 200, 0.14);
}

/* The caveat earns its place on this row: it is the answer to "what happens to
   what I have already done", asked at the moment they are about to find out. */
.ob-feedback-actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 8px;
}
.ob-feedback-actions .ob-hint { margin: 0; flex: 1 1 auto; }
.ob-feedback-actions .ob-btn { flex: 0 0 auto; padding: 7px 18px; }

.ob-chat {
	list-style: none;
	margin: 0 0 12px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
	max-height: 190px;
	overflow-y: auto;
}
.ob-chat-msg {
	padding: 7px 10px;
	border-radius: 10px;
	font-size: 0.92em;
	line-height: 1.45;
	max-width: 85%;
	white-space: pre-wrap;
	word-break: break-word;
}
.ob-chat-msg.me {
	align-self: flex-end;
	background: var(--brand);
	color: #fff;
	border-bottom-right-radius: 3px;
}
/* White on the tinted panel: grey-on-grey had almost no edge to it. */
.ob-chat-msg.ai {
	align-self: flex-start;
	background: #fff;
	border: 1px solid var(--grey5);
	color: var(--content);
	border-bottom-left-radius: 3px;
}

/* The rework streams into the panel under the thread, so it needs to sit apart
   from the message that triggered it. */
.ob-feedback .ob-progress { margin-top: 10px; min-width: 0; }

/* ------------------------------------------------------- checklist progress */

/* The planner call can take a minute. A dimmed screen and a spinning cursor for
   that long reads as a hang, so the modal shows what is actually happening,
   with an elapsed counter for motion between the server's ~30s frames. */

.ob-progress { min-width: min(340px, 100%); max-width: 520px; }

.ob-progress-head {
	display: flex;
	align-items: center;
	gap: 10px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--grey6);
}
.ob-progress-title { flex: 1 1 auto; font-size: 1.05em; color: var(--content); }
.ob-progress-elapsed {
	flex: 0 0 auto;
	font-variant-numeric: tabular-nums;
	color: var(--grey2);
	font-size: 0.9em;
}

.ob-spinner {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	border: 2px solid var(--grey5);
	border-top-color: var(--brand);
	border-radius: 50%;
	animation: ob-spin 0.8s linear infinite;
}
@keyframes ob-spin { to { transform: rotate(360deg); } }

.ob-progress-log {
	list-style: none;
	margin: 12px 0 0;
	padding: 0;
	max-height: 190px;
	overflow-y: auto;
}
/* Inside the feedback panel this sits below a thread and above the steps'
   scroller, so it gets a tighter cap than it does as the goal modal's whole
   body. The newest line is the one that matters and it is pinned to the end. */
.ob-feedback .ob-progress-log { max-height: 108px; margin-top: 10px; }
.ob-feedback .ob-chat { max-height: 150px; }
.ob-progress-log li {
	position: relative;
	padding: 4px 0 4px 22px;
	color: var(--grey1);
	line-height: 1.4;
}
/* Every line that is no longer the current one is, by definition, finished. */
.ob-progress-log li:before {
	content: "\f00c";
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	position: absolute;
	left: 0;
	top: 5px;
	font-size: 12px;
	color: var(--success);
}
.ob-progress-log li.working { color: var(--content); }
.ob-progress-log li.working:before { content: "\f110"; animation: ob-spin 1.2s linear infinite; color: var(--grey3); }
.ob-progress-log li.failed { color: var(--danger); }
.ob-progress-log li.failed:before { content: "\f071"; color: var(--danger); }

@media (prefers-reduced-motion: reduce) {
	.ob-spinner, .ob-progress-log li.working:before { animation: none; }
}

/* --------------------------------------------------------------- phone */

/* Even once the modal fits, a step row cannot carry a wrapped title AND two
   buttons beside it in ~295px: the title ends up three words wide. Let the row
   wrap so the actions get their own line. */
@media (max-width: 560px) {
	.ob-step { flex-wrap: wrap; }
	/* flex-basis 0, or the body's max-content width does not fit beside the tick
	   and the whole title wraps BELOW it, leaving the tick alone on a line. A
	   wrapping row shrinks its items only after it has run out of lines. */
	.ob-step-body { flex: 1 1 0; }
	.ob-step-actions {
		width: 100%;
		justify-content: flex-end;
		padding-top: 6px;
	}
	/* Bigger tap targets: 3px of vertical padding is a desktop affordance. */
	.ob-btn.small { padding: 6px 12px; }

	/* Same problem on the feedback row: the caveat and the Send button shared a
	   line and the button lost. Button first, caveat underneath it. */
	.ob-feedback-actions { flex-wrap: wrap; justify-content: flex-end; }
	.ob-feedback-actions .ob-hint { flex: 1 1 100%; order: 2; margin-top: 6px; }

	/* Stack rather than squeeze. */
	.ob-modal-foot { flex-wrap: wrap; gap: 8px; }

	/* On a desktop the steps scroll inside a modal that does not, so the goal
	   stays pinned above and the feedback box below. On a phone that same trick
	   gives you a ~2-step window inside an already-scrolling panel: two nested
	   scrollers, and the inner one swallows the flick you meant for the outer.
	   One scroller instead, and the fade goes with it since there is no longer
	   anything hidden for it to point at. */
	.ob-steps { max-height: none; overflow: visible; }
	.ob-steps-wrap:after { display: none; }
}