/* TxemAI chat — WhatsApp-style mobile-first PWA */

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; padding: 0; height: 100%; overscroll-behavior-y: none; }
body {
	font: 15px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	color: #111;
	background: #e5ddd5;
	background-image:
		linear-gradient(rgba(229,221,213,0.9), rgba(229,221,213,0.9)),
		repeating-linear-gradient(45deg, transparent 0 12px, rgba(0,0,0,0.02) 12px 14px);
	display: flex;
	flex-direction: column;
	min-height: 100dvh;
	height: 100dvh;
	touch-action: manipulation;
}

/* ───── App bar ───── */
.appbar {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: env(safe-area-inset-top, 0) 12px 0;
	height: calc(56px + env(safe-area-inset-top, 0px));
	background: #075e54;
	color: #fff;
	box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.appbar .avatar {
	width: 40px; height: 40px;
	border-radius: 50%;
	background: #fff;
	object-fit: contain;
	padding: 2px;
	transition: transform 0.18s ease;
	flex-shrink: 0;
}
.appbar .avatar.placeholder {
	display: grid; place-items: center;
	font-size: 20px;
	background: rgba(255,255,255,0.18);
}
/* Mood-specific micro-animations (artwork itself changes via setMood) */
.appbar .avatar[data-mood="excited"]    { animation: shake 0.4s ease-in-out; }
.appbar .avatar[data-mood="impressed"]  { transform: scale(1.06); }
.appbar .avatar[data-mood="determined"] { transform: scale(1.04); }
@keyframes shake {
	0%,100% { transform: translateX(0); }
	25% { transform: translateX(-2px) rotate(-2deg); }
	75% { transform: translateX(2px)  rotate(2deg); }
}
.appbar .title { flex: 1 1 auto; line-height: 1.15; }
.appbar .name { font-weight: 600; font-size: 16px; }
.appbar .status { font-size: 12px; opacity: 0.85; }
.appbar .menu-btn {
	background: transparent; border: 0; color: #fff; font-size: 22px; padding: 6px 10px;
	cursor: pointer; border-radius: 50%;
}
.appbar .menu-btn:active { background: rgba(255,255,255,0.15); }

/* ───── Chat ───── */
.chat {
	flex: 1 1 auto;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	/* extra bottom padding leaves room for the fixed action-bar (~52px high
	 * + ~16px gap) above the composer */
	padding: 12px 8px 88px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.msg {
	max-width: min(78%, 560px);
	padding: 7px 10px 9px;
	border-radius: 8px;
	box-shadow: 0 1px 0.5px rgba(0,0,0,0.13);
	white-space: pre-wrap;
	word-wrap: break-word;
	position: relative;
	font-size: 15px;
}
/* When an assistant bubble carries the training widget, drop the bubble's
 * width cap so the widget can span the entire chat area. The text inside
 * the bubble keeps its natural width via .body-text. */
.msg.assistant.has-training-widget {
	max-width: calc(100% - 12px);
	width: calc(100% - 12px);
	padding: 0;
	background: transparent;
	box-shadow: none;
	border-bottom-left-radius: 8px;
}
.msg.assistant.has-training-widget .body-text {
	background: #fff;
	padding: 8px 12px;
	border-radius: 8px;
	border-bottom-left-radius: 2px;
	box-shadow: 0 1px 0.5px rgba(0,0,0,0.13);
	margin-bottom: 6px;
	max-width: min(78%, 560px);
}
.msg.assistant.has-training-widget .meta {
	margin-left: 8px;
}
.msg.assistant.has-training-widget .training-widget {
	margin: 0;
	width: 100%;
}
.msg.user {
	align-self: flex-end;
	background: #dcf8c6;
	border-bottom-right-radius: 2px;
}
.msg.assistant {
	align-self: flex-start;
	background: #ffffff;
	border-bottom-left-radius: 2px;
}
.msg .meta {
	display: block;
	font-size: 10.5px;
	color: rgba(0,0,0,0.45);
	margin-top: 2px;
	text-align: right;
	user-select: none;
}
.msg .meta .check { color: #34b7f1; }
.msg .body p { margin: 0 0 6px; }
.msg .body p:last-child { margin-bottom: 0; }
.msg .body strong { font-weight: 600; }
.msg .body em { font-style: italic; }
.msg .body code {
	font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
	font-size: 13px;
	background: rgba(0,0,0,0.06);
	padding: 1px 4px;
	border-radius: 3px;
}
.msg .body pre {
	background: rgba(0,0,0,0.05);
	padding: 8px 10px;
	border-radius: 6px;
	overflow-x: auto;
	font-size: 13px;
	margin: 6px 0;
}
.msg .body ul, .msg .body ol { margin: 4px 0 4px 20px; padding: 0; }
.msg .body table {
	border-collapse: collapse; margin: 6px 0; font-size: 13px;
}
.msg .body th, .msg .body td {
	border: 1px solid rgba(0,0,0,0.15); padding: 3px 6px; text-align: left;
}
.msg .body blockquote {
	border-left: 3px solid #075e54; padding: 0 8px; margin: 6px 0; color: #555;
}

/* Session-proposed action card (rendered after `session_proposed` SSE event) */
.session-card {
	align-self: flex-start;
	max-width: min(82%, 580px);
	background: #ffffff;
	border: 1px solid rgba(14,124,74,0.18);
	border-left: 4px solid #0e7c4a;
	border-radius: 12px;
	padding: 12px 14px;
	box-shadow: 0 2px 8px rgba(14,124,74,0.10);
	margin: 4px 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.session-card .sc-head {
	display: flex; align-items: center; gap: 10px;
}
.session-card .sc-icon { font-size: 22px; line-height: 1; }
.session-card .sc-title {
	font-weight: 700;
	font-size: 15px;
	flex: 1 1 auto;
}
.session-card .sc-meta {
	display: flex; gap: 6px; flex-wrap: wrap;
	font-size: 12px;
	color: #555;
}
.session-card .pill {
	background: #eaf4ee;
	color: #0e7c4a;
	padding: 2px 9px;
	border-radius: 11px;
	font-weight: 600;
}
.session-card .sc-notes {
	font-size: 13px;
	color: #444;
	font-style: italic;
}
.session-card .sc-cta {
	background: #0e7c4a;
	color: #fff;
	border: 0;
	border-radius: 22px;
	padding: 10px 16px;
	font: inherit; font-weight: 600;
	cursor: pointer;
	align-self: flex-start;
}
.session-card .sc-cta:active { transform: translateY(1px); }

@media (prefers-color-scheme: dark) {
	.session-card { background: #16241c; border-color: rgba(34,167,107,0.25); border-left-color: #34d399; box-shadow: 0 2px 12px rgba(0,0,0,0.4); }
	.session-card .sc-title { color: #e5e7eb; }
	.session-card .sc-meta { color: #b8c2c0; }
	.session-card .pill { background: #134e3b; color: #34d399; }
	.session-card .sc-notes { color: #c8d3cf; }
	.session-card .sc-cta { background: #34d399; color: #0a0a0d; }
}

/* Tool-call status line that appears between assistant prose */
.tool-status {
	align-self: flex-start;
	font-size: 12px;
	color: #555;
	background: rgba(255,255,255,0.6);
	padding: 4px 9px;
	border-radius: 12px;
	display: inline-flex;
	gap: 6px;
	align-items: center;
}
.tool-status .spinner {
	width: 10px; height: 10px;
	border: 2px solid rgba(7,94,84,0.25);
	border-top-color: #075e54;
	border-radius: 50%;
	animation: spin 0.7s linear infinite;
}
.tool-status.done .spinner { display: none; }
.tool-status.done::before { content: "✓ "; color: #075e54; }

@keyframes spin { to { transform: rotate(360deg); } }

/* Typing indicator */
.typing {
	align-self: flex-start;
	background: #fff;
	padding: 8px 12px;
	border-radius: 8px;
	border-bottom-left-radius: 2px;
	display: inline-flex; gap: 4px;
}
.typing .dot {
	width: 6px; height: 6px; border-radius: 50%;
	background: rgba(0,0,0,0.3);
	animation: bounce 1.2s infinite;
}
.typing .dot:nth-child(2) { animation-delay: 0.15s; }
.typing .dot:nth-child(3) { animation-delay: 0.3s; }
@keyframes bounce {
	0%,60%,100% { transform: translateY(0); opacity: 0.4; }
	30%         { transform: translateY(-3px); opacity: 1; }
}

/* ───── Composer ───── */
.composer {
	flex: 0 0 auto;
	display: flex;
	align-items: flex-end;
	gap: 8px;
	padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0)) 8px;
	background: #f0f0f0;
	border-top: 1px solid rgba(0,0,0,0.1);
}
.composer textarea {
	flex: 1 1 auto;
	min-height: 40px;
	max-height: 38vh;
	padding: 9px 12px;
	border: 0;
	border-radius: 22px;
	resize: none;
	background: #fff;
	font: inherit;
	color: inherit;
	outline: none;
	box-shadow: 0 1px 1px rgba(0,0,0,0.06);
}
/* Action bar: fixed strip with TRAIN / REVIEW / STOP. Sits above the composer
 * in Chat mode. STOP starts disabled and lights up red+pulsing when an
 * in-progress session is active. REVIEW is enabled whenever a session is
 * lined up. TRAIN is always enabled. */
.action-bar {
	position: fixed;
	left: 0; right: 0;
	bottom: calc(env(safe-area-inset-bottom, 0) + 60px); /* sits above the composer */
	z-index: 9;
	display: flex;
	justify-content: center;
	gap: 12px;
	padding: 0 14px;
	pointer-events: none; /* let taps fall through gaps; each button re-enables */
}
.action-btn {
	pointer-events: auto;
	flex: 1 1 0;
	max-width: 160px;
	min-height: 52px;
	border: 0;
	border-radius: 26px;
	font: inherit;
	font-size: 14px;
	font-weight: 800;
	letter-spacing: 0.12em;
	color: #fff;
	cursor: pointer;
	transition: transform 0.06s, box-shadow 0.18s, opacity 0.18s;
	-webkit-tap-highlight-color: transparent;
	display: grid;
	place-items: center;
}
.action-btn-label { line-height: 1; pointer-events: none; }
.action-btn:active { transform: translateY(1px) scale(0.985); }
.action-btn[disabled] { opacity: 0.35; cursor: default; pointer-events: none; }

.action-train { background: #0e7c4a; box-shadow: 0 4px 12px rgba(14,124,74,0.45); }
.action-train:active { box-shadow: 0 2px 5px rgba(14,124,74,0.35); }

.action-review { background: #e67a14; box-shadow: 0 4px 12px rgba(230,122,20,0.45); }
.action-review:active { box-shadow: 0 2px 5px rgba(230,122,20,0.35); }

.action-stop { background: #d23030; box-shadow: 0 4px 12px rgba(210,48,48,0.45); }
.action-stop:not([disabled]) { animation: action-stop-pulse 1.8s ease-in-out infinite; }
.action-stop:active { box-shadow: 0 2px 5px rgba(210,48,48,0.35); }
@keyframes action-stop-pulse {
	0%, 100% { box-shadow: 0 4px 12px rgba(210,48,48,0.45); }
	50%      { box-shadow: 0 4px 18px rgba(210,48,48,0.75); }
}

/* In Train mode the action bar is irrelevant (use the in-widget Finalize + the
 * train-view CHAT button instead). Hide it. */
body.mode-train .action-bar { display: none !important; }

.composer .icon-btn,
.composer .send-btn {
	width: 40px; height: 40px;
	border-radius: 50%;
	border: 0;
	display: grid; place-items: center;
	font-size: 18px;
	cursor: pointer;
}
.composer .icon-btn { background: transparent; color: #075e54; }
.composer .icon-btn:active { background: rgba(7,94,84,0.12); }
.composer .icon-btn.recording { background: #d9534f; color: #fff; animation: pulse 1s infinite; }
@keyframes pulse {
	0% { box-shadow: 0 0 0 0 rgba(217,83,79,0.6); }
	70% { box-shadow: 0 0 0 10px rgba(217,83,79,0); }
	100% { box-shadow: 0 0 0 0 rgba(217,83,79,0); }
}
.composer .send-btn {
	background: #075e54;
	color: #fff;
	font-size: 16px;
}
.composer .send-btn:disabled { opacity: 0.45; cursor: default; }

/* ───── Menu sheet ───── */
.menu-backdrop {
	position: fixed; inset: 0;
	background: rgba(0,0,0,0.35);
	z-index: 9;
	animation: fadeIn 0.15s;
}
.menu-sheet {
	position: fixed;
	right: 12px;
	top: calc(56px + env(safe-area-inset-top, 0px) + 4px);
	background: #fff;
	border-radius: 8px;
	box-shadow: 0 4px 20px rgba(0,0,0,0.25);
	z-index: 10;
	min-width: 220px;
	overflow: hidden;
	animation: dropIn 0.15s;
}
.menu-item {
	display: block;
	width: 100%;
	background: none; border: 0;
	padding: 12px 16px;
	text-align: left;
	font: inherit; color: inherit;
	cursor: pointer;
}
.menu-item:active { background: rgba(0,0,0,0.06); }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes dropIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ───── Connection banner ───── */
.banner {
	flex: 0 0 auto;
	font-size: 13px;
	padding: 6px 12px;
	text-align: center;
	background: #fff3cd;
	color: #856404;
	border-bottom: 1px solid #ffeeba;
}
.banner.error { background: #f8d7da; color: #721c24; border-color: #f5c6cb; }
.banner.success { background: #d4edda; color: #155724; border-color: #c3e6cb; }

/* ───── Day separator ───── */
.day-separator {
	align-self: center;
	background: rgba(225,245,254,0.8);
	color: #555;
	font-size: 12px;
	padding: 4px 10px;
	border-radius: 8px;
	margin: 8px 0;
	box-shadow: 0 1px 0.5px rgba(0,0,0,0.05);
}

/* ───── In-chat training widget ───── */
.training-widget {
	background: #ffffff;
	border-radius: 14px;
	padding: 12px;
	margin: 8px 0;
	box-shadow: 0 2px 6px rgba(0,0,0,0.08);
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.tw-banner { display: flex; align-items: center; gap: 12px; padding: 0 4px; }
.tw-banner .tw-icon { font-size: 24px; line-height: 1; }
.tw-banner .tw-title { font-size: 11px; color: #888; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; }
.tw-banner .tw-focus { font-size: 17px; font-weight: 700; color: #111; }
.tw-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }

.tw-card {
	background: #fbfaf6;
	border-radius: 12px;
	border: 1px solid #efeee9;
	/* No overflow:hidden — the .tw-numlist popover needs to extend below
	 * the chip and out of the card's bounds. */
	transition: box-shadow 0.18s, border-color 0.18s, background 0.18s;
}
.tw-card.is-active { background: #fff; border-color: #075e54; box-shadow: 0 4px 12px rgba(7,94,84,0.16); position: relative; }
.tw-card.is-done   { background: #f6fbf8; border-color: #d4ecdf; }
.tw-card.is-pending { opacity: 0.85; }
/* Hover/touch feedback on collapsed cards — signals "tap to expand". */
.tw-card:not(.is-active):hover { background: #f4f1e6; border-color: #d9d6c8; }
.tw-card:not(.is-active):active { background: #ebe7d6; }

.tw-head { display: flex; align-items: center; gap: 12px; padding: 10px 12px; cursor: pointer; }
.tw-head .tw-idx {
	flex: 0 0 auto;
	width: 26px; height: 26px; border-radius: 50%;
	background: #d9d6c8; color: #555;
	display: grid; place-items: center;
	font-size: 12.5px; font-weight: 700;
}
.tw-card.is-active .tw-head .tw-idx { background: #075e54; color: #fff; }
.tw-card.is-done   .tw-head .tw-idx { background: #34a87a; color: #fff; }
.tw-head .tw-info { flex: 1 1 auto; min-width: 0; }
.tw-head .tw-name { font-weight: 600; font-size: 14.5px; line-height: 1.2; color: #111; }
.tw-card.is-done .tw-head .tw-name { color: #1e6b48; }
.tw-head .tw-pre { font-size: 12px; color: #777; margin-top: 2px; display: flex; gap: 6px; flex-wrap: wrap; }
.tw-head .tw-pre .tw-pill { background: #f0efe8; color: #555; padding: 2px 8px; border-radius: 10px; font-weight: 500; font-size: 11.5px; }
.tw-head .tw-pre .tw-pill.kg   { background: #e8f5f2; color: #075e54; }
.tw-head .tw-pre .tw-pill.done { background: #d4ecdf; color: #1e6b48; }
.tw-head .tw-chev { font-size: 16px; color: #aaa; transition: transform 0.18s; }
.tw-card.is-active .tw-head .tw-chev { transform: rotate(180deg); color: #075e54; }

.tw-body { padding: 0 12px 12px; }
.tw-card:not(.is-active) .tw-body { display: none; }

.tw-target { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.tw-target .tw-pill { background: #e8f5f2; color: #075e54; font-weight: 600; font-size: 12.5px; padding: 5px 10px; border-radius: 12px; }
.tw-target .tw-pill.weight { background: #075e54; color: #fff; }
.tw-target .tw-pill.bw     { background: #f5e9c8; color: #6e5a1a; }
.tw-target .tw-pill.rest   { background: #f0efe8; color: #555; font-weight: 500; }
.tw-notes {
	margin-bottom: 10px; padding: 8px 10px;
	background: #fff8e1; border-left: 3px solid #f0ad4e;
	border-radius: 5px; font-size: 13px; color: #5b4a1a;
}

.tw-videos {
	display: flex; gap: 8px; overflow-x: auto;
	-webkit-overflow-scrolling: touch; scrollbar-width: none;
	margin: 0 -12px 10px; padding: 2px 12px 4px;
}
.tw-videos::-webkit-scrollbar { display: none; }
.tw-tile {
	flex: 0 0 auto; width: 130px; height: 88px;
	border-radius: 10px; color: #fff; text-decoration: none;
	display: flex; flex-direction: column; justify-content: space-between;
	padding: 8px 10px; box-shadow: 0 1px 4px rgba(0,0,0,0.12);
	position: relative; overflow: hidden;
	background-size: cover; background-position: center;
}
.tw-tile:active { transform: scale(0.97); }
.tw-tile.t-0 { background-image: linear-gradient(135deg, #0b6e63 0%, #075e54 100%); }
.tw-tile.t-1 { background-image: linear-gradient(135deg, #1e7eb1 0%, #155f86 100%); }
.tw-tile.t-2 { background-image: linear-gradient(135deg, #c1772f 0%, #8e521a 100%); }
.tw-tile.is-thumb { padding: 0; }
.tw-tile.is-thumb::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,0.55) 100%); }
.tw-tile.is-thumb .tw-vicon { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 34px; height: 34px; background: rgba(0,0,0,0.55); border-radius: 50%; display: grid; place-items: center; font-size: 16px; }
.tw-tile.is-thumb .tw-vcap  { position: absolute; left: 8px; right: 8px; bottom: 6px; font-size: 11.5px; font-weight: 600; text-shadow: 0 1px 3px rgba(0,0,0,0.6); }
.tw-tile .tw-vicon { font-size: 20px; line-height: 1; opacity: 0.92; }
.tw-tile .tw-vlabel { font-size: 12.5px; font-weight: 600; }
.tw-tile .tw-vhint  { font-size: 10px; opacity: 0.75; margin-top: 1px; }

.tw-sets { background: #fbfaf6; border-radius: 10px; border: 1px solid #efeee9; padding: 2px 0; }
.tw-set-row { padding: 2px 8px; }
.tw-set-row + .tw-set-row { border-top: 1px dashed #efeee9; }
.tw-row-top {
	display: grid;
	/* num | reps chip | kg chip | save | delete */
	grid-template-columns: 22px 1fr 1fr 92px 28px;
	gap: 6px; align-items: center;
}
.tw-set-row .tw-num { color: #777; font-size: 12.5px; font-weight: 500; text-align: center; }
.tw-pf { display: flex; flex-direction: column; gap: 0; min-width: 0; }
/* The REPS / KG labels are decorative — the chip's prominent value (22px bold)
 * and the consistent reps · kg position across rows is enough cue. Hiding
 * them halves the inter-row vertical spacing. */
.tw-pf .tw-flabel { display: none; }

/* Chip — same 50px height as the save button. Opens a popover number list. */
.tw-chip {
	width: 100%;
	height: 50px;
	border: 1px solid #ddd9cd;
	background: #fbfaf6;
	color: #111;
	font: inherit;
	font-variant-numeric: tabular-nums;
	padding: 0 10px;
	border-radius: 12px;
	cursor: pointer;
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: 4px;
	transition: border-color 0.12s, background 0.12s, transform 0.08s;
	touch-action: manipulation;
}
.tw-chip:active { transform: scale(0.97); }
.tw-pf.is-expanded .tw-chip {
	border-color: #075e54; background: #fff;
	box-shadow: 0 0 0 2px rgba(7,94,84,0.18);
}
.tw-chip:disabled { color: #999; background: #f7f6f0; cursor: not-allowed; }
.tw-chip .tw-chip-val { font-size: 22px; font-weight: 700; line-height: 1; text-align: center; }
.tw-chip .tw-chip-arrow { font-size: 14px; opacity: 0.5; line-height: 1; }

/* Number-list popover — flows inline at the same horizontal level as the
 * chip. When a chip is tapped, the cell expands to span both chip columns
 * (the other chip hides) and the popover replaces the chip in place. No
 * vertical growth — picking values stays at the row's natural height. */
.tw-row-top.has-expanded .tw-pf:not(.is-expanded) { display: none; }
.tw-pf.is-expanded { grid-column: 2 / span 2; }
.tw-pf.is-expanded .tw-flabel { visibility: hidden; height: 0; margin: 0; }
.tw-pf.is-expanded .tw-chip { display: none; }
.tw-numlist {
	background: #fff;
	border: 1px solid #d4ecdf;
	border-radius: 12px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.08);
	padding: 0 6px;
	display: flex;
	gap: 6px;
	align-items: center;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scroll-snap-type: x proximity;
	scrollbar-width: thin;
	height: 50px;
	width: 100%;
}
.tw-numlist::-webkit-scrollbar { height: 4px; }
.tw-numlist::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.18); border-radius: 2px; }
.tw-numlist .tw-numv {
	flex: 0 0 auto;
	min-width: 56px;
	height: 40px;
	border: 1px solid #e5e3da;
	background: #fbfaf6;
	color: #333;
	font: inherit; font-size: 16px; font-weight: 700;
	font-variant-numeric: tabular-nums;
	border-radius: 8px;
	scroll-snap-align: center;
	cursor: pointer;
	padding: 0 10px;
	touch-action: manipulation;
}
.tw-numlist .tw-numv:active { transform: scale(0.95); }
.tw-numlist .tw-numv.is-current {
	background: #075e54; color: #fff; border-color: #075e54;
	box-shadow: 0 2px 6px rgba(7,94,84,0.30);
}

/* Big "Guardar" button — the primary action of every row */
.tw-set-row .tw-check {
	width: 92px; height: 50px;
	border: 0; border-radius: 12px;
	background: linear-gradient(180deg, #0a7a6c 0%, #075e54 100%);
	color: #fff;
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
	font: inherit; font-weight: 700; cursor: pointer;
	box-shadow: 0 3px 8px rgba(7,94,84,0.28);
	padding: 4px 6px;
	transition: transform 0.08s, box-shadow 0.12s, background 0.12s;
}
.tw-set-row .tw-check:active { transform: scale(0.96); box-shadow: 0 1px 4px rgba(7,94,84,0.22); }
.tw-set-row .tw-check .tw-check-mark { font-size: 22px; line-height: 1; }
.tw-set-row .tw-check .tw-check-label {
	font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.92;
}
.tw-set-row .tw-check.is-done {
	background: #d4edda; color: #156635;
	box-shadow: none;
}
.tw-set-row .tw-check.is-done .tw-check-mark { font-size: 26px; }
.tw-set-row .tw-check:disabled {
	background: #e6e3d6; color: #9a948a;
	box-shadow: none;
	cursor: not-allowed;
}

.tw-set-row .tw-del {
	width: 28px; height: 28px; border: 0; border-radius: 50%;
	background: transparent; display: grid; place-items: center;
	font-size: 16px; cursor: pointer; color: #b3261e; opacity: 0.5;
}
.tw-set-row .tw-del:active { opacity: 1; }

.tw-set-row.is-locked { opacity: 0.55; }
.tw-set-row.is-locked .tw-check { pointer-events: none; }
.tw-set-row.is-locked .tw-flabel { opacity: 0.7; }

/* Drag handle for SortableJS reordering */
.tw-drag {
	flex: 0 0 auto;
	width: 22px; height: 28px;
	border: 0; background: transparent; padding: 0;
	color: #aaa; font-size: 14px; line-height: 1;
	cursor: grab;
	display: grid; place-items: center;
	touch-action: none;
}
.tw-drag:active { cursor: grabbing; color: #555; }
.tw-card.is-done .tw-drag { display: none; }
.tw-card--ghost { opacity: 0.4; transform: rotate(-1deg); }
.tw-card--chosen { box-shadow: 0 6px 18px rgba(0,0,0,0.18); }
.tw-set-row .tw-del { color: #b3261e; opacity: 0.5; }
.tw-set-row .tw-del:active { opacity: 1; }

.tw-finish {
	background: #34a87a; color: #fff; border: 0; border-radius: 12px;
	padding: 12px 16px; font: inherit; font-weight: 600; font-size: 14.5px;
	display: flex; align-items: center; gap: 10px;
	box-shadow: 0 3px 10px rgba(52,168,122,0.24);
	cursor: pointer;
}
.tw-finish:active { transform: scale(0.98); }
.tw-finish .tw-cta-icon { font-size: 16px; }

/* Floating round chronometer (above the chat composer)
 *  — Gym-clock vibe: pure-black face, vivid fluorescent green digits/ring.
 *  Stays the same in light and dark mode (intentional). */
.tw-rest-overlay {
	/* Sits on top of (and is parented by) the active exercise card so it
	 * matches its width/height exactly. Semi-transparent so the card stays
	 * readable underneath. */
	position: absolute;
	inset: 0;
	z-index: 100;
	background: rgba(0, 0, 0, 0.55);
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
	color: #39ff14;
	border-radius: inherit;
	padding: 14px 12px 12px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	box-shadow: 0 0 0 1px rgba(57,255,20,0.18) inset;
	animation: tw-fadeIn 0.2s ease-out;
}
@keyframes tw-fadeIn { from { opacity: 0; } to { opacity: 1; } }
.tw-rest-overlay .tw-rest-label {
	font-size: 10.5px; opacity: 0.7;
	text-transform: uppercase; letter-spacing: 0.08em;
	font-weight: 600;
	margin-top: -4px;
	color: #39ff14;
	text-shadow: 0 0 6px rgba(57,255,20,0.45);
}
.tw-rest-overlay .tw-ring-wrap {
	position: relative;
	/* Big circle: ~75% of the card width, capped so it doesn't overflow on
	 * narrow viewports. Gym-glove + sweaty-hand friendly. */
	width: min(72vw, 280px);
	height: min(72vw, 280px);
	max-width: 100%;
}
.tw-rest-overlay svg.tw-ring {
	width: 100%; height: 100%;
	transform: rotate(-90deg);
	overflow: visible;
}
.tw-rest-overlay .tw-ring-track {
	fill: none;
	stroke: rgba(57,255,20,0.16);
	stroke-width: 10;
}
.tw-rest-overlay .tw-ring-progress {
	fill: none;
	stroke: #39ff14;
	stroke-width: 10;
	stroke-linecap: round;
	filter: drop-shadow(0 0 4px rgba(57,255,20,0.7));
	transition: stroke-dashoffset 0.25s linear, stroke 0.2s;
}
.tw-rest-overlay .tw-ring-num {
	position: absolute; inset: 0;
	display: grid; place-items: center;
	font-size: clamp(56px, 18vw, 96px);
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	color: #39ff14;
	letter-spacing: -0.02em;
	text-shadow: 0 0 14px rgba(57,255,20,0.6);
}
.tw-rest-overlay.is-warn .tw-ring-progress { stroke: #ffb000; filter: drop-shadow(0 0 6px rgba(255,176,0,0.7)); }
.tw-rest-overlay.is-warn .tw-ring-num     { color: #ffb000; text-shadow: 0 0 10px rgba(255,176,0,0.55); }
.tw-rest-overlay.is-done { animation: tw-pulseDone 0.7s ease-in-out infinite alternate; }
.tw-rest-overlay.is-done .tw-ring-progress { stroke: #ff3b3b; filter: drop-shadow(0 0 6px rgba(255,59,59,0.7)); }
.tw-rest-overlay.is-done .tw-ring-num     { color: #ff3b3b; text-shadow: 0 0 10px rgba(255,59,59,0.55); font-size: clamp(40px, 12vw, 64px); }
@keyframes tw-pulseDone { from { transform: scale(1); } to { transform: scale(1.03); } }

.tw-rest-overlay .tw-rest-actions { display: flex; gap: 18px; margin-top: 6px; }
.tw-rest-overlay .tw-rest-btn {
	background: rgba(57,255,20,0.16); color: #39ff14; border: 0;
	width: 72px; height: 72px; border-radius: 50%;
	font: inherit; font-size: 18px; font-weight: 700; cursor: pointer;
	display: grid; place-items: center;
	box-shadow: 0 0 0 2px rgba(57,255,20,0.35) inset, 0 4px 14px rgba(0,0,0,0.35);
	touch-action: manipulation;
}
.tw-rest-overlay .tw-rest-btn.primary {
	background: #39ff14; color: #000;
	font-size: 28px;
	box-shadow: 0 0 16px rgba(57,255,20,0.7);
}
.tw-rest-overlay .tw-rest-btn:active { transform: scale(0.94); }

/* ───── Settings modal ───── */
.settings-backdrop {
	position: fixed; inset: 0;
	background: rgba(0,0,0,0.45);
	z-index: 14;
	animation: fadeIn 0.15s;
}
.settings-sheet {
	position: fixed;
	left: 50%; top: 50%;
	transform: translate(-50%, -50%);
	z-index: 15;
	background: #ffffff;
	color: #111;
	border-radius: 14px;
	width: min(94vw, 420px);
	max-height: 80vh;
	display: flex; flex-direction: column;
	box-shadow: 0 20px 50px rgba(0,0,0,0.32);
}
.settings-head {
	display: flex; align-items: center; gap: 10px;
	padding: 12px 14px;
	background: #075e54; color: #fff;
	border-radius: 14px 14px 0 0;
}
.settings-head .settings-title { flex: 1 1 auto; font-weight: 600; }
.settings-head .icon-btn { color: #fff; }
.settings-body { padding: 16px 14px; overflow-y: auto; }
.settings-row { display: flex; flex-direction: column; gap: 8px; }
.settings-label { font-weight: 600; font-size: 14px; color: #333; }
.settings-step-pills { display: flex; gap: 8px; flex-wrap: wrap; }
.settings-step-pills button {
	border: 1px solid #d9d6c8; background: #fbfaf6; color: #333;
	padding: 8px 14px; border-radius: 16px;
	font: inherit; font-weight: 600; font-size: 14px;
	cursor: pointer;
}
.settings-step-pills button.is-selected {
	background: #075e54; color: #fff; border-color: #075e54;
}
.settings-row input[type="number"] {
	border: 1px solid #ddd9cd; border-radius: 8px;
	padding: 9px 12px; font: inherit; font-size: 15px;
	font-variant-numeric: tabular-nums;
	background: #fbfaf6; outline: none;
}
.settings-row input[type="number"]:focus { border-color: #075e54; background: #fff; }
.settings-hint { font-size: 12px; color: #777; margin: 0; }
.settings-foot {
	display: flex; gap: 8px; justify-content: flex-end;
	padding: 12px 14px;
	border-top: 1px solid #eee;
}
.settings-foot button {
	border: 0; padding: 9px 18px; border-radius: 10px;
	font: inherit; font-weight: 600; cursor: pointer;
}
.settings-cancel { background: #f0efe8; color: #444; }
.settings-save   { background: #075e54; color: #fff; }
.settings-save:active, .settings-cancel:active { transform: scale(0.97); }

/* ───── Dark mode ───── */
@media (prefers-color-scheme: dark) {
	body { background: #0b141a; color: #e9edef; background-image: none; }
	.appbar { background: #1f2c33; }
	.composer { background: #1f2c33; border-top-color: #2a3942; }
	.composer textarea { background: #2a3942; color: #e9edef; }
	.msg.user { background: #005c4b; color: #fff; }
	.msg.assistant { background: #202c33; color: #e9edef; }
	.msg .body code { background: rgba(255,255,255,0.08); }
	.msg .body pre  { background: rgba(255,255,255,0.06); }
	.menu-sheet { background: #233138; color: #e9edef; }
	.tool-status { background: rgba(32,44,51,0.8); color: #cfd9dc; }
	.day-separator { background: rgba(32,44,51,0.85); color: #cfd9dc; }
	.typing { background: #202c33; }
	.typing .dot { background: rgba(255,255,255,0.4); }

	.training-widget { background: #1f2c33; box-shadow: 0 2px 6px rgba(0,0,0,0.4); }
	.tw-banner .tw-title { color: #98a4ab; }
	.tw-banner .tw-focus { color: #e9edef; }
	.tw-card { background: #182228; border-color: #2a3942; }
	.tw-card.is-active { background: #1f2c33; border-color: #00a99d; box-shadow: 0 4px 12px rgba(0,170,160,0.22); }
	.tw-card.is-done   { background: #142a23; border-color: #1e4a3a; }
	.tw-head .tw-idx { background: #3a4a52; color: #c8d0d4; }
	.tw-card.is-active .tw-head .tw-idx { background: #00a99d; color: #062b27; }
	.tw-card.is-done   .tw-head .tw-idx { background: #34a87a; color: #062b27; }
	.tw-head .tw-name { color: #e9edef; }
	.tw-head .tw-pre { color: #98a4ab; }
	.tw-head .tw-pre .tw-pill { background: #2a3942; color: #c8d0d4; }
	.tw-head .tw-pre .tw-pill.kg   { background: #134e3b; color: #c4ebd8; }
	.tw-head .tw-pre .tw-pill.done { background: #1e4a3a; color: #b6e2cd; }
	.tw-target .tw-pill { background: #134e3b; color: #c4ebd8; }
	.tw-target .tw-pill.weight { background: #00a99d; color: #062b27; }
	.tw-target .tw-pill.bw     { background: #514018; color: #f5d995; }
	.tw-target .tw-pill.rest   { background: #2a3942; color: #c8d0d4; }
	.tw-notes { background: #2a2418; border-left-color: #f0ad4e; color: #f5d995; }
	.tw-sets { background: #182228; border-color: #2a3942; }
	.tw-set-row + .tw-set-row { border-top-color: #2a3942; }
	.tw-set-row input[type="number"] { background: #2a3942; color: #e9edef; border-color: rgba(255,255,255,0.1); }
	.tw-set-row input[type="number"]:disabled { background: #182228; color: #6a7a82; }
	.tw-set-row .tw-flabel { color: #9aa3a8; }
	.tw-set-row .tw-check.is-done { background: #134e3b; color: #c4ebd8; }
	.tw-set-row .tw-check {
		background: linear-gradient(180deg, #00a99d 0%, #0a7a6c 100%);
		color: #062b27;
		box-shadow: 0 3px 8px rgba(0,170,160,0.28);
	}
	.tw-set-row .tw-check:disabled { background: #2a3942; color: #6a7a82; box-shadow: none; }

	/* Chip + picker — dark mode */
	.tw-chip { background: #2a3942; color: #e9edef; border-color: rgba(255,255,255,0.10); }
	.tw-chip:disabled { background: #1a2329; color: #6a7a82; }
	.tw-pf.is-expanded .tw-chip { background: #1f2c33; border-color: #00a99d; box-shadow: 0 0 0 2px rgba(0,170,160,0.30); }
	.tw-numlist { background: #1f2c33; border-color: #1e4a3a; box-shadow: 0 8px 24px rgba(0,0,0,0.45); }
	.tw-numlist .tw-numv { background: #2a3942; color: #c4ebd8; border-color: #2a3942; }
	.tw-numlist .tw-numv.is-current { background: #00a99d; color: #062b27; border-color: #00a99d; }
	.msg.assistant.has-training-widget .body-text { background: #202c33; color: #e9edef; }

	/* Chronometer keeps its black + neon-green look in dark mode (matches the gym-clock vibe). */
	.tw-drag { color: #6a7a82; }

	.settings-sheet { background: #1f2c33; color: #e9edef; box-shadow: 0 20px 50px rgba(0,0,0,0.6); }
	.settings-head  { background: #0a3d36; }
	.settings-label { color: #c8d0d4; }
	.settings-step-pills button { background: #2a3942; color: #c8d0d4; border-color: #2a3942; }
	.settings-step-pills button.is-selected { background: #00a99d; color: #062b27; border-color: #00a99d; }
	.settings-row input[type="number"] { background: #2a3942; color: #e9edef; border-color: rgba(255,255,255,0.10); }
	.settings-hint  { color: #98a4ab; }
	.settings-foot  { border-top-color: #2a3942; }
	.settings-cancel { background: #2a3942; color: #c8d0d4; }
	.settings-save   { background: #00a99d; color: #062b27; }
}

/* ============================================================ *
 * Monochrome theme — black / white / gray palette mirroring the
 * login screen. Applied unconditionally (no @media query) so the
 * chat looks the same on light- and dark-mode devices.
 *
 * Tokens:
 *   bg base       #0e0e10
 *   bg gradient   radial #1a1a1d → #0e0e10, linear #0e0e10 → #07070a
 *   surface       #16161a   (assistant bubble, appbar, composer, menus)
 *   surface-alt   #1a1a1d   (textarea, inputs, cards inactive)
 *   surface-hi    #20201f   (active card, focused inputs)
 *   surface-tab   #2a2a2f   (active tab / hover)
 *   border-soft   rgba(255,255,255,0.08)
 *   border-norm   rgba(255,255,255,0.12)
 *   text          #e9edef
 *   text-light    #f5f3ee   (cream — primary on dark)
 *   text-muted    #a0a0a0
 *   accent fill   #f5f3ee   (cream pill — primary action)
 *   accent text   #0e0e10
 * ============================================================ */
body {
	color: #e9edef;
	background: #0e0e10;
	background-image:
		radial-gradient(1200px 600px at 50% -10%, #1a1a1d 0%, #0e0e10 60%),
		linear-gradient(180deg, #0e0e10 0%, #07070a 100%);
}

/* App bar */
.appbar { background: #16161a; box-shadow: 0 1px 0 rgba(255,255,255,0.05); }
.appbar .avatar { background: #f5f3ee; }
.appbar .menu-btn:active { background: rgba(255,255,255,0.10); }

/* Chat scroll */
.chat { background: transparent; }

/* Bubbles */
.msg.user {
	background: #f5f3ee;
	color: #0e0e10;
	box-shadow: 0 1px 1px rgba(0,0,0,0.4);
}
.msg.user .meta { color: rgba(14,14,16,0.55); }
.msg.user .meta .check { color: rgba(14,14,16,0.45); }
.msg.assistant {
	background: #16161a;
	color: #e9edef;
	border: 1px solid rgba(255,255,255,0.06);
	box-shadow: 0 1px 1px rgba(0,0,0,0.5);
}
.msg .meta { color: #8a8e93; }
.msg .body code { background: rgba(255,255,255,0.08); color: #e9edef; }
.msg .body pre  { background: rgba(255,255,255,0.06); color: #e9edef; }
.msg.assistant.has-training-widget { background: transparent; box-shadow: none; border: 0; }
.msg.assistant.has-training-widget .body-text {
	background: #16161a;
	color: #e9edef;
	border: 1px solid rgba(255,255,255,0.06);
	box-shadow: 0 1px 1px rgba(0,0,0,0.5);
}

/* Composer */
.composer {
	background: #16161a;
	border-top: 1px solid rgba(255,255,255,0.08);
}
.composer textarea {
	background: #1a1a1d;
	color: #e9edef;
	border-color: rgba(255,255,255,0.08);
}
.composer textarea::placeholder { color: #6b7177; }
.composer .icon-btn { color: #c8d0d4; }
.composer .icon-btn:active { background: rgba(255,255,255,0.08); }
.composer .send-btn {
	background: #f5f3ee;
	color: #0e0e10;
}
.composer .send-btn:active { background: #e6e0d0; }

/* Menu sheet */
.menu-sheet { background: #16161a; color: #e9edef; box-shadow: 0 -4px 20px rgba(0,0,0,0.5); }
.menu-item { color: #e9edef; }
.menu-item:hover, .menu-item:active { background: #20201f; }
.menu-backdrop { background: rgba(0,0,0,0.5); }

/* Day separator + typing + tool status */
.day-separator { background: rgba(22,22,26,0.85); color: #c8d0d4; box-shadow: none; }
.typing { background: #16161a; }
.typing .dot { background: rgba(255,255,255,0.40); }
.tool-status { background: rgba(22,22,26,0.85); color: #c8d0d4; }

/* Banners */
.banner { background: rgba(22,22,26,0.95); color: #e9edef; box-shadow: 0 4px 16px rgba(0,0,0,0.5); }
.banner.info { background: rgba(245,243,238,0.10); color: #f5f3ee; border: 1px solid rgba(255,255,255,0.08); }
.banner.error { background: rgba(255,80,80,0.18); color: #ffb4b4; border: 1px solid rgba(255,80,80,0.30); }

/* Training widget — match the monochrome surface palette */
.training-widget { background: #16161a; box-shadow: 0 2px 6px rgba(0,0,0,0.5); }
.tw-banner .tw-title { color: #a0a0a0; }
.tw-banner .tw-focus { color: #f5f3ee; }
.tw-card { background: #1a1a1d; border-color: rgba(255,255,255,0.08); }
.tw-card.is-active {
	background: #20201f;
	border-color: rgba(245,243,238,0.45);
	box-shadow: 0 4px 14px rgba(0,0,0,0.5);
}
.tw-card.is-done   { background: #16261d; border-color: rgba(180,255,180,0.10); }
.tw-card.is-pending { opacity: 0.85; }
.tw-head .tw-name { color: #e9edef; }
.tw-card.is-done .tw-head .tw-name { color: #c4ebd8; }
.tw-head .tw-pre { color: #a0a0a0; }
.tw-head .tw-pre .tw-pill      { background: rgba(255,255,255,0.06); color: #c8d0d4; }
.tw-head .tw-pre .tw-pill.kg   { background: rgba(245,243,238,0.10); color: #f5f3ee; }
.tw-head .tw-pre .tw-pill.done { background: rgba(180,255,180,0.10); color: #c4ebd8; }
.tw-head .tw-idx { background: #2a2a2f; color: #c8d0d4; }
.tw-card.is-active .tw-head .tw-idx { background: #f5f3ee; color: #0e0e10; }
.tw-card.is-done   .tw-head .tw-idx { background: #34a87a; color: #062b27; }
.tw-head .tw-chev { color: #6a7077; }
.tw-card.is-active .tw-head .tw-chev { color: #f5f3ee; }

.tw-target .tw-pill        { background: rgba(255,255,255,0.06); color: #c8d0d4; }
.tw-target .tw-pill.weight { background: #f5f3ee; color: #0e0e10; }
.tw-target .tw-pill.bw     { background: #514018; color: #f5d995; }
.tw-target .tw-pill.rest   { background: rgba(255,255,255,0.06); color: #c8d0d4; }
.tw-notes { background: #1f1a0e; border-left-color: #f0ad4e; color: #f5d995; }

.tw-sets { background: #1a1a1d; border-color: rgba(255,255,255,0.08); }
.tw-set-row + .tw-set-row { border-top-color: rgba(255,255,255,0.06); }

.tw-chip { background: #1f1f24; color: #e9edef; border-color: rgba(255,255,255,0.10); }
.tw-chip:disabled { background: #1a1a1d; color: #6b7177; }
.tw-pf.is-expanded .tw-chip {
	background: #2a2a2f;
	border-color: rgba(245,243,238,0.45);
	box-shadow: 0 0 0 2px rgba(245,243,238,0.15);
}

.tw-numlist {
	background: #16161a;
	border-color: rgba(255,255,255,0.10);
	box-shadow: 0 4px 12px rgba(0,0,0,0.50);
}
.tw-numlist .tw-numv {
	background: #1f1f24; color: #c8d0d4;
	border-color: rgba(255,255,255,0.08);
}
.tw-numlist .tw-numv.is-current {
	background: #f5f3ee; color: #0e0e10; border-color: #f5f3ee;
	box-shadow: 0 2px 6px rgba(245,243,238,0.20);
}

/* GUARDAR button — primary action, matches login's primary */
.tw-set-row .tw-check {
	background: #f5f3ee;
	color: #0e0e10;
	box-shadow: 0 3px 8px rgba(0,0,0,0.40);
}
.tw-set-row .tw-check:active { background: #e6e0d0; box-shadow: 0 1px 4px rgba(0,0,0,0.4); }
.tw-set-row .tw-check.is-done { background: #2a3942; color: #c4ebd8; box-shadow: none; }
.tw-set-row .tw-check:disabled { background: #2a2a2f; color: #6b7177; box-shadow: none; }

.tw-finish {
	background: #f5f3ee;
	color: #0e0e10;
	box-shadow: 0 3px 10px rgba(0,0,0,0.40);
}
.tw-finish:active { background: #e6e0d0; }

/* Action bar buttons — keep functional colours, tune shadows for dark bg. */
.action-train  { box-shadow: 0 4px 12px rgba(14,124,74,0.5); }
.action-review { box-shadow: 0 4px 12px rgba(230,122,20,0.5); }
.action-stop   { box-shadow: 0 4px 12px rgba(210,48,48,0.55); }

/* Settings modal — monochrome */
.settings-sheet { background: #16161a; color: #e9edef; box-shadow: 0 20px 50px rgba(0,0,0,0.6); }
.settings-head  { background: #20201f; }
.settings-label { color: #c8d0d4; }
.settings-step-pills button {
	background: #1f1f24; color: #c8d0d4; border-color: rgba(255,255,255,0.10);
}
.settings-step-pills button.is-selected {
	background: #f5f3ee; color: #0e0e10; border-color: #f5f3ee;
}
.settings-row input[type="number"] {
	background: #1a1a1d; color: #e9edef; border-color: rgba(255,255,255,0.10);
}
.settings-hint  { color: #a0a0a0; }
.settings-foot  { border-top-color: rgba(255,255,255,0.08); }
.settings-cancel { background: #1f1f24; color: #c8d0d4; }
.settings-save   { background: #f5f3ee; color: #0e0e10; }

/* Stepper inputs (legacy reps/kg minimal text inputs that survived) */
.tw-stepper { background: #1a1a1d; border-color: rgba(255,255,255,0.10); }
.tw-stepper:focus-within { border-color: #f5f3ee; background: #20201f; }
.tw-stepper .tw-step { background: #1f1f24; color: #f5f3ee; }
.tw-stepper .tw-step:active { background: #2a2a2f; }
.tw-stepper .tw-step:disabled { color: #6b7177; background: #1a1a1d; }
.tw-stepper input[type="number"] { color: #e9edef; }

/* Drag handle */
.tw-drag { color: #6a7077; }

/* ─── Review mode (Train view, read-only) ───
 * When the user opens the session via REVIEW, the widget renders with all
 * interactive selectors muted: GUARDAR disabled, chip pickers/steppers
 * inert, drag handles hidden, sets-table can't be edited. Videos and card
 * expansion remain interactive so the user can preview the workout. */
.training-widget[data-review="true"] .tw-finish,
.training-widget[data-review="true"] .tw-drag,
.training-widget[data-review="true"] .tw-del {
	display: none !important;
}
.training-widget[data-review="true"] .tw-check,
.training-widget[data-review="true"] .tw-numlist,
.training-widget[data-review="true"] .tw-stepper,
.training-widget[data-review="true"] .tw-set-row input,
.training-widget[data-review="true"] .tw-pill.kg,
.training-widget[data-review="true"] .tw-pill.reps {
	pointer-events: none;
}
.training-widget[data-review="true"] .tw-check { opacity: 0.45; }
.training-widget[data-review="true"] .tw-set-row { opacity: 0.85; }
.training-widget[data-review="true"] .tw-banner::after {
	content: "REVIEW";
	margin-left: 10px;
	font-size: 11px;
	letter-spacing: 0.18em;
	background: #e67a14;
	color: #fff;
	padding: 3px 8px;
	border-radius: 8px;
	font-weight: 800;
}

/* ─── Phase 3: mode separation (chat ↔ train) ─────────────────────── */

/* By default the train-view is hidden via the HTML `hidden` attribute.
 * Once we toggle body.mode-train we reveal it full-screen and hide chat. */
body.mode-train main.chat,
body.mode-train footer.composer,
body.mode-train .action-bar,
body.mode-train .appbar {
	display: none !important;
}

body.mode-train #train-view {
	display: flex !important;
	flex-direction: column;
	position: fixed;
	inset: 0;
	z-index: 50;
	background: #fbfaf6;
}
body:not(.mode-train) #train-view {
	display: none !important;
}

/* Train mode header — black banner with focus + CHAT button (top-right). */
.train-head {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: calc(env(safe-area-inset-top, 0) + 12px) 16px 12px 16px;
	background: #111;
	color: #fff;
}
.train-head-info { flex: 1 1 auto; min-width: 0; }
.train-head-title {
	font-size: 12px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	opacity: 0.6;
	line-height: 1;
}
.train-head-focus {
	font-size: 17px;
	font-weight: 700;
	margin-top: 4px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.train-chat-btn {
	flex: 0 0 auto;
	height: 36px;
	min-width: 72px;
	padding: 0 16px;
	border: 1px solid rgba(255,255,255,0.25);
	background: transparent;
	color: #fff;
	font: inherit;
	font-weight: 700;
	letter-spacing: 0.08em;
	border-radius: 18px;
	cursor: pointer;
}
.train-chat-btn:active {
	background: rgba(255,255,255,0.08);
}

.train-body {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: 12px 12px calc(env(safe-area-inset-bottom, 0) + 16px) 12px;
}
.widget-slot {
	max-width: 720px;
	margin: 0 auto;
}

/* CTA bubble inserted in chat after retailor_active_session — clickable
 * "Empezar →" that opens Train mode. */
.train-cta {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin: 10px 0;
	padding: 14px 18px;
	border: 1px solid #075e54;
	background: #fff;
	color: #075e54;
	border-radius: 14px;
	font-weight: 700;
	font-size: 15px;
	cursor: pointer;
	width: 100%;
	box-shadow: 0 2px 6px rgba(7,94,84,0.12);
	transition: transform 0.1s, box-shadow 0.18s;
}
.train-cta:hover { box-shadow: 0 4px 12px rgba(7,94,84,0.2); }
.train-cta:active { transform: scale(0.985); }
.train-cta .train-cta-arrow { font-size: 18px; }

/* Re-entry banner at the top of chat when there's a mid-session in-progress
 * Session with logged sets. */
.session-resume-banner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 8px 0 12px;
	padding: 10px 14px;
	background: #fff7e0;
	border: 1px solid #f5d77a;
	color: #6b4f00;
	border-radius: 12px;
	font-size: 13.5px;
}
.session-resume-banner button {
	flex: 0 0 auto;
	border: 0;
	background: #075e54;
	color: #fff;
	padding: 7px 14px;
	border-radius: 999px;
	font-weight: 700;
	cursor: pointer;
}