/* ============================================
   SENA DESIGN SYSTEM — Side Chat panel (sc-)
   ============================================
   The side panels that flank a deliverable page (presentation, forecast).
   The chrome — panel surface, header, collapse strip, resize handle — is
   rendered by <SidePanel> (src/lib/components/SidePanel.svelte); <SideChat>
   composes it with the transcript and composer, and /presentation's slides
   rail uses it bare. The CSS lives here so it loads globally like every
   other design-system component.

   Anatomy:
   - .sc-wrap        display:contents wrapper carrying the open/closed class,
                     so panel and strip stay direct flex children of the page
   - .sc-panel       the open panel: header, transcript, composer, disclaimer
   - .sc-strip       what a collapsed panel leaves behind: ONE full-height
                     button with the title running vertically, hoverable and
                     clickable anywhere
   - .sc-resize      optional left-edge drag handle (the panel sits on the
                     right, so it grows leftward)

   The transcript is engine-owned DOM (SenaChat): message classes come from
   screen.css; only the pieces the narrow panel needs patched live here. */

.sc-wrap { display: contents; }

/* ── Panel ──────────────────────────────────────────────────────────────── */
.sc-panel {
	position: relative;
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	gap: var(--spacing-16);
	padding: var(--spacing-16);
	background: var(--bg-panel);
	border: 1px solid var(--stroke-panel-sides);
	border-top-color: var(--stroke-panel);
	border-radius: var(--spacing-8);
	box-shadow: var(--shadow-panel);
	overflow: hidden;
}
.sc-panel.is-resizing { user-select: none; }

.sc-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--spacing-8);
	flex-shrink: 0;
}
.sc-title {
	font-size: var(--text-xs);
	font-weight: var(--fw-bold);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--text-tertiary);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.sc-icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	padding: 0;
	border: 0;
	border-radius: var(--spacing-4);
	background: none;
	color: var(--fg-tertiary);
	font-size: 10px;
	cursor: pointer;
}
.sc-icon-btn:hover {
	background: var(--bg-secondary);
	color: var(--text-primary);
}

/* ── Transcript ─────────────────────────────────────────────────────────── */
.sc-messages {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: var(--spacing-16);
	margin-right: -12px;
	padding-right: 8px;
}

/* A note from the page itself (a local edit, a save, a heads-up) rather than
   a model reply: same voice, visibly not a generated answer. */
.sc-panel .sc-note {
	font-size: var(--text-sm);
	line-height: 19px;
	color: var(--text-tertiary);
	padding-left: var(--spacing-12);
	border-left: 2px solid var(--stroke-card);
}

/* Host actions on the deliverable, directly above the composer. Stretched by
   default: at 280px a content-width button floating left reads as stray
   chrome, while a full-width one reads as "this is what you can do here". */
.sc-actions {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-8);
	flex-shrink: 0;
}
.sc-actions .btn { justify-content: center; }

.sc-disclaimer {
	flex-shrink: 0;
	margin: 0;
	text-align: center;
	font-size: var(--text-xs);
	line-height: 14px;
	color: var(--text-tertiary);
}

/* ── Engine chrome the narrow panel needs styled ────────────────────────── */
/* The thinking indicator is the design-system Thinking component now
   (thinking.css), so the panel carries no copy of it. */

/* Attachment badges the engine renders above a sent message's text. */
.sc-panel .engine-attachments {
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-4);
	margin-bottom: var(--spacing-6);
}

/* The composer's data-sources popover is 333px anchored to its button; in a
   ~340px panel that clips on the panel's overflow:hidden. Anchor it to the
   chatbox instead (the anchor goes static, the chatbox is already
   position:relative) so it spans the composer's own width and opens UPWARD,
   since the composer sits at the panel's bottom. */
.sc-panel .dropdown-anchor { position: static; }
.sc-panel .dropdown-popover {
	top: auto;
	bottom: calc(100% + 7px);
	left: 0;
	width: 100%;
}

/* ── Resize handle ──────────────────────────────────────────────────────── */
/* Sits in the panel's left padding, invisible until hovered, like the app
   sidebar's. The panel is on the RIGHT, so dragging left makes it wider. */
.sc-resize {
	position: absolute;
	left: -3px;
	top: 0;
	bottom: 0;
	width: 8px;
	padding: 0;
	border: none;
	background: none;
	cursor: col-resize;
	z-index: 3; /* local: the resize handle, over the panel's edge */
}
.sc-resize:hover,
.sc-resize:focus-visible {
	background: color-mix(in srgb, var(--fg-accent) 30%, transparent);
	outline: none;
}

/* The grip: a small centred nub, visible at rest, so the edge advertises that
   it drags before anyone hovers it. Twin of the sidebar handle's
   (sidebar.css .sb-resize::after; change both together). */
.sc-resize::after {
	content: '';
	position: absolute;
	/* Centred in the VISIBLE 5px (the outer 3px is clipped by the panel). */
	left: 4px;
	top: 50%;
	transform: translateY(-50%);
	width: 3px;
	height: 32px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--fg-primary) 22%, transparent);
	pointer-events: none;
}

.sc-resize:hover::after,
.sc-resize:focus-visible::after {
	background: var(--fg-accent);
}

/* ── Collapsed strip ────────────────────────────────────────────────────── */
/* A real <button>, so the WHOLE strip hovers and clicks: a strip whose only
   live pixels are a 24px icon reads as dead chrome. 16px top padding puts the
   caret on the same line as the open panel's header (the panel pads 16px), so
   collapsing doesn't make the label jump. */
.sc-strip {
	display: none;
	flex-shrink: 0;
	flex-direction: column;
	align-items: center;
	gap: var(--spacing-8);
	width: 36px;
	padding: var(--spacing-16) 0 var(--spacing-8);
	border: 0;
	font: inherit;
	cursor: pointer;
	/* The strip stands alone once the panel is gone, so it wears the panel
	   surface itself. */
	background: var(--bg-panel);
	border: 1px solid var(--stroke-panel-sides);
	border-top-color: var(--stroke-panel);
	border-radius: var(--spacing-8);
	box-shadow: var(--shadow-panel);
}
.sc-strip:hover { background: var(--bg-secondary); }
.sc-strip > .fa-solid {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	font-size: 10px;
	color: var(--fg-tertiary);
	border-radius: var(--spacing-4);
}
.sc-strip:hover > .fa-solid,
.sc-strip:hover .sc-strip-label { color: var(--fg-secondary); }
.sc-strip-label {
	writing-mode: vertical-rl;
	font-size: var(--text-xs);
	font-weight: var(--fw-bold);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--text-tertiary);
	white-space: nowrap;
	user-select: none;
}

/* Open/closed: both live in the DOM (the engine holds the transcript node),
   display toggles. */
.sc-wrap.sc-closed .sc-panel { display: none; }
.sc-wrap.sc-closed .sc-strip { display: flex; }

/* Ligature icons break under inherited letter-spacing / text-transform, and
   both the title and the strip label set them. */
.sc-strip .fa-solid,
.sc-head .fa-solid {
	letter-spacing: normal;
	text-transform: none;
}

/* ── On a phone (the breakpoint in $lib/mobile.js) ──────────────────────
   No room for a column beside the page, so <SidePanel phone=…> picks one
   of two shapes. The strip and the resize handle are desktop tools.

   .sc-sheet (the chat): a full-screen sheet over the page, the drawer's
   8px margin on every side and the app gradient under the translucent
   panel. It rises from the bottom like the other phone sheets, and stays
   in the DOM while closed (the engine owns its transcript), hidden once
   the slide out has finished.

   .sc-flat (the slides list): an ordinary block in the page's flow,
   always open, no header. */
@media (max-width: 767px), (max-width: 1023px) and (max-height: 500px) {
	.sc-wrap .sc-strip,
	.sc-wrap .sc-resize { display: none !important; }

	.sc-wrap.sc-sheet {
		display: block;
		position: fixed;
		inset: 0;
		z-index: var(--z-modal);
		padding: max(var(--spacing-8), env(safe-area-inset-top)) max(var(--spacing-8), env(safe-area-inset-right))
			max(var(--spacing-8), env(safe-area-inset-bottom)) max(var(--spacing-8), env(safe-area-inset-left));
		background: var(--bg-scrim);
		transform: none;
		visibility: visible;
		transition: visibility 0s;
	}
	.sc-wrap.sc-sheet .sc-panel {
		display: flex;
		width: 100%;
		max-width: none;
		height: 100%;
		background:
			linear-gradient(var(--bg-panel), var(--bg-panel)),
			linear-gradient(to bottom, var(--bg-app-stop-dark), var(--bg-app-stop-light));
		border-radius: var(--spacing-16);
		transition: transform var(--duration-slow) var(--ease-drawer);
	}
	.sc-wrap.sc-sheet.sc-closed {
		background: transparent;
		pointer-events: none;
		visibility: hidden;
		transition: visibility 0s linear var(--duration-slow);
	}
	.sc-wrap.sc-sheet.sc-closed .sc-panel {
		transform: translateY(calc(100% + var(--spacing-16)));
	}
	/* A fingertip's close button. */
	.sc-wrap.sc-sheet .sc-icon-btn {
		width: 40px;
		height: 40px;
		margin: calc(-1 * var(--spacing-8)) calc(-1 * var(--spacing-8)) calc(-1 * var(--spacing-8)) 0;
		font-size: var(--text-lg);
	}

	.sc-wrap.sc-flat {
		display: block;
	}
	.sc-wrap.sc-flat .sc-panel {
		display: flex;
		width: 100%;
		max-width: none;
	}
	.sc-wrap.sc-flat .sc-head { display: none; }
}
@media (max-width: 767px) and (prefers-reduced-motion: reduce), (max-width: 1023px) and (max-height: 500px) and (prefers-reduced-motion: reduce) {
	.sc-wrap.sc-sheet .sc-panel { transition: none; }
	.sc-wrap.sc-sheet.sc-closed { transition: none; }
}