/* Discover view — history panel + RecommenderWineCard styles */

@layer components {
	/* ── Layout ──────────────────────────────────────────────────── */

	/* Main content column — fills remaining width beside the history panel */
	.discover-main {
		display: flex;
		flex-direction: column;
		flex: 1;
		min-width: 0;
		height: 100%;

		@media (width < 768px) {
			height: auto;
		}

		/* Hide the scrollable message area when there are no messages yet */
		&.discover-main--empty .chat-window {
			display: none;
		}

		/* Right border closes the constrained-width panels against the wider viewport */
		:is(.chat-window, .chat-form, .discover-filter-panel) {
			border-inline-end: 1px solid var(--color-border-default);
		}
	}

	/* ── History panel ───────────────────────────────────────────── */

	.discover-history {
		flex: 0 0 var(--discover-history-width);
		display: flex;
		flex-direction: column;
		border-inline-end: 1px solid var(--color-border-default);
		overflow-y: auto;
		background: var(--color-bg-surface);

		@media (width < 768px) {
			flex: none;
			overflow-y: visible;
			border-inline-end: none;
			border-block-end: 1px solid var(--color-border-default);
		}
	}

	/* Header — exactly matches chat-title-bar height (2 baselines = 48px) so borders align */
	.discover-history-header {
		height: var(--height-2-baselines);
		box-sizing: border-box;
		padding-inline: var(--space-3);
		border-block-end: 1px solid var(--color-border-subtle);
		display: flex;
		align-items: center;
		gap: var(--space-2);

		/* "New conversation" button: full-width on desktop */
		.btn-primary {
			flex: 1;
		}

		@media (width < 768px) {
			justify-content: space-between;

			.btn-primary {
				flex: none;
			}
		}
	}

	/* Gap between sparkle icon and button label */
	.discover-new-conversation-btn {
		gap: var(--space-1);
	}

	/* Toggle — visible only on mobile; chevron rotates when expanded */
	.discover-history-toggle {
		display: none;
		align-items: center;
		gap: var(--space-1);
		font-size: var(--font-size-xs);
		font-weight: var(--font-weight-semibold);
		text-transform: uppercase;
		letter-spacing: var(--letter-spacing-wider);
		color: var(--color-text-secondary);
		background: none;
		border: none;
		padding: 0;
		cursor: pointer;
		transition: color var(--transition-fast);

		svg {
			transition: transform var(--transition-fast);
		}

		&:hover {
			color: var(--color-text-primary);
		}

		&:focus-visible {
			outline: 2px solid var(--color-accent-primary);
			outline-offset: 2px;
		}

		@media (width < 768px) {
			display: inline-flex;
		}
	}

	/* Rotate chevron when history is expanded on mobile */
	.discover-history--expanded .discover-history-toggle svg {
		transform: rotate(180deg);
	}

	/* Section — label + scrollable list */
	.discover-history-section {
		display: flex;
		flex-direction: column;
		flex: 1;
		min-height: 0;
		overflow-y: auto;
		padding-block-start: var(--space-2);

		@media (width < 768px) {
			display: none;
			overflow-y: visible;
			padding-block-start: 0;
			flex-direction: row;
			overflow-x: auto;
			gap: var(--space-2);
			padding: var(--space-2) var(--space-3);
		}

		.discover-history--expanded & {
			@media (width < 768px) {
				display: flex;
			}
		}
	}

	.discover-history-label {
		display: block;
		padding: var(--space-1) var(--space-3);

		@media (width < 768px) {
			display: none;
		}
	}

	/* Session list container */
	.discover-session-list {
		display: flex;
		flex-direction: column;

		@media (width < 768px) {
			flex-direction: row;
			gap: var(--space-2);
		}
	}

	/* Individual session row */
	.discover-session-row {
		display: flex;
		flex-direction: column;
		padding: var(--space-2) var(--space-3);
		text-decoration: none;
		color: inherit;
		border-inline-start: 3px solid transparent;
		border-block-end: 1px solid var(--color-border-subtle);
		transition:
			background-color var(--transition-fast),
			border-inline-start-color var(--transition-fast);

		&:last-child {
			border-block-end: none;
		}

		&:hover {
			background-color: var(--color-bg-hover);
			border-inline-start-color: var(--color-copper);
		}

		&:active {
			background-color: var(--color-bg-active);
		}

		&:focus-visible {
			outline: 2px solid var(--color-accent-primary);
			outline-offset: -2px;
		}

		/* Active session — semibold label distinguishes from hover regardless of theme */
		&.discover-session-row--active {
			background-color: var(--color-cream-dark);
			border-inline-start-color: var(--color-copper);

			.discover-session-label {
				font-weight: var(--font-weight-semibold);
			}
		}

		/* Mobile: compact fixed-width chip */
		@media (width < 768px) {
			flex: 0 0 140px;
			border-block-end: none;
			border: 1px solid var(--color-border-subtle);
			border-inline-start: 3px solid transparent;
			padding: var(--space-2);

			&.discover-session-row--active {
				border-inline-start-color: var(--color-copper);
			}
		}
	}

	.discover-session-date {
		font-size: var(--font-size-xs);
		line-height: var(--line-height-normal);
		color: var(--color-text-muted);
	}

	.discover-session-label {
		font-size: var(--font-size-sm);
		line-height: var(--line-height-relaxed);
		color: var(--color-text-primary);
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	/* ── Filter panel ───────────────────────────────────────────── */

	/* Same max-width and background as .chat-form inside .chat-assistant — this panel sits
	   in the same column (see .discover-main's shared border-inline-end below), so it must
	   track the same computed width to stay visually aligned, even though its own content
	   (filter controls) isn't prose. */
	.discover-filter-panel {
		display: block;
		max-width: calc(var(--prose-max-width) + 4 * var(--space-6));
		width: 100%;
		background: var(--color-bg-surface);
	}

	/* Toggle header — full-width button, touch-friendly, matches chat-form inline padding */
	.filter-panel-toggle {
		display: flex;
		align-items: center;
		width: 100%;
		min-height: var(--mobile-touch-target);
		padding-inline: var(--space-6);
		gap: var(--space-2);
		background: none;
		border: none;
		border-block-start: 1px solid var(--color-border-default);
		cursor: pointer;
		text-align: start;
		font-size: var(--font-size-xs);
		font-weight: var(--font-weight-semibold);
		text-transform: uppercase;
		letter-spacing: var(--letter-spacing-wider);
		color: var(--color-text-secondary);
		transition: color var(--transition-fast);

		svg {
			flex-shrink: 0;
			margin-inline-start: auto;
			transition: transform var(--transition-base);
		}

		&:hover {
			color: var(--color-text-primary);
		}

		&:focus-visible {
			outline: 2px solid var(--color-accent-primary);
			outline-offset: -2px;
		}

		@media (width < 768px) {
			padding-inline: var(--space-4);
		}
	}

	.filter-panel--expanded .filter-panel-toggle svg {
		transform: rotate(180deg);
	}

	/* Summary line — shows active filter values when collapsed */
	.filter-panel-summary {
		font-size: var(--font-size-xs);
		font-weight: var(--font-weight-normal);
		text-transform: none;
		letter-spacing: var(--letter-spacing-normal);
		color: var(--color-copper);
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		min-width: 0;
		flex: 1;

		&.filter-panel-summary--empty {
			color: var(--color-text-muted);
		}
	}

	/* Expand animation — grid-template-rows: 0fr → 1fr */
	.filter-panel-body {
		display: grid;
		grid-template-rows: 0fr;
		transition: grid-template-rows var(--transition-base);
	}

	/* Border separates expanded content from toggle header */
	.filter-panel--expanded .filter-panel-body {
		grid-template-rows: 1fr;
		border-block-start: 1px solid var(--color-border-default);
	}

	/* Overflow wrapper — must have no padding so collapse reaches 0 */
	.filter-panel-overflow {
		overflow: hidden;
		min-height: 0;
	}

	/* Content area — padding matches .chat-form inline padding */
	.filter-panel-inner {
		display: flex;
		flex-direction: column;
		gap: var(--space-3);
		padding-block: var(--space-3);
		padding-inline: var(--space-6);

		@media (width < 768px) {
			padding-inline: var(--space-4);
		}
	}

	/* Filter section — label + content row */
	.filter-section {
		display: flex;
		flex-direction: column;
		gap: var(--space-2);
	}

	.filter-section--toggles {
		flex-direction: row;
		flex-wrap: wrap;
		gap: var(--space-3);
		padding-block-end: var(--space-1);
	}

	.filter-section-label {
		font-size: var(--font-size-xs);
		font-weight: var(--font-weight-semibold);
		text-transform: uppercase;
		letter-spacing: var(--letter-spacing-wider);
		color: var(--color-text-muted);
	}

	/* Chip row — wraps at smaller widths */
	.filter-chips {
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-1);
	}

	/* Toggle chip — white background signals "off"; copper fill signals "on" */
	.filter-chip {
		padding: var(--space-1) var(--space-2);
		border-radius: var(--radius-md);
		border: 1px solid var(--color-border-default);
		background: var(--color-bg-surface);
		font-size: var(--font-size-xs);
		color: var(--color-text-secondary);
		cursor: pointer;
		transition:
			background-color var(--transition-fast),
			border-color var(--transition-fast),
			color var(--transition-fast);

		&:hover {
			border-color: var(--color-copper-light);
			color: var(--color-text-primary);
		}

		&:active {
			background-color: var(--color-bg-hover);
		}

		&:focus-visible {
			outline: 2px solid var(--color-accent-primary);
			outline-offset: 2px;
		}

		&.filter-chip--selected {
			background-color: var(--color-copper);
			border-color: var(--color-copper);
			color: var(--color-text-inverse);
		}
	}

	/* Radio-style chip (food pairing — single-select): pill shape distinguishes from multi-select */
	.filter-chip--radio {
		border-radius: 100px;
	}

	/* Price range inputs (from / to) */
	.filter-price-range {
		display: flex;
		align-items: center;
		gap: var(--space-2);
	}

	.filter-price-input {
		width: 60px;
		height: var(--control-height-input);
		padding: 0 var(--space-2);
		border: 1px solid var(--color-border-default);
		border-radius: var(--radius-md);
		background: var(--color-bg-surface);
		font-size: var(--font-size-sm);
		color: var(--color-text-primary);
		text-align: right;
		transition: var(--transition-input);
		appearance: textfield;

		&::placeholder {
			color: var(--color-text-muted);
		}

		&:focus {
			outline: none;
			border-color: var(--color-copper);
			box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-copper) 20%, transparent);
		}

		&::-webkit-outer-spin-button,
		&::-webkit-inner-spin-button {
			-webkit-appearance: none;
			margin: 0;
		}
	}

	.filter-price-sep,
	.filter-price-unit {
		font-size: var(--font-size-sm);
		color: var(--color-text-muted);
		flex-shrink: 0;
	}

	/* Grape typeahead area */
	.filter-grape-area {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--space-2);
	}

	/* Dismissible grape chip */
	.filter-grape-chip {
		display: inline-flex;
		align-items: center;
		gap: var(--space-1);
		padding: var(--space-1) var(--space-2);
		border-radius: var(--radius-md);
		border: 1px solid var(--color-copper);
		background-color: color-mix(in srgb, var(--color-copper) 10%, transparent);
		font-size: var(--font-size-xs);
		color: var(--color-text-primary);
	}

	.filter-grape-chip-remove {
		display: flex;
		align-items: center;
		padding: 0;
		border: none;
		background: none;
		cursor: pointer;
		color: var(--color-text-muted);
		transition: color var(--transition-fast);

		&:hover {
			color: var(--color-error);
		}

		&:focus-visible {
			outline: 2px solid var(--color-accent-primary);
			outline-offset: 2px;
		}
	}

	/* Grape text input */
	.filter-grape-input {
		flex: 1;
		min-width: 120px;
		height: var(--control-height-input);
		padding: 0 var(--space-2);
		border: 1px solid var(--color-border-default);
		border-radius: var(--radius-md);
		background: var(--color-bg-surface);
		font-size: var(--font-size-sm);
		color: var(--color-text-primary);
		transition: var(--transition-input);

		&::placeholder {
			color: var(--color-text-muted);
		}

		&:focus {
			outline: none;
			border-color: var(--color-copper);
			box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-copper) 20%, transparent);
		}
	}

	/* Suggestion popover — appended to body, position: fixed with viewport-relative coords from JS */
	.filter-grape-suggestions {
		position: fixed;
		left: var(--_anchor-left, 0);
		top: var(--_anchor-top, 0);
		width: var(--_anchor-width, 200px);
		padding: var(--space-1) 0;
		background: var(--color-bg-surface);
		border: 1px solid var(--color-border-default);
		border-radius: var(--radius-md);
		box-shadow: var(--shadow-md);
		z-index: var(--z-overlay);
		max-height: 200px;
		overflow-y: auto;
		margin: 0;

		&:popover-open {
			display: block;
		}

		&:not(:popover-open) {
			display: none;
		}
	}

	.filter-suggestion-item {
		display: block;
		width: 100%;
		padding: var(--space-2) var(--space-3);
		text-align: start;
		background: none;
		border: none;
		font-size: var(--font-size-sm);
		color: var(--color-text-primary);
		cursor: pointer;
		transition: background-color var(--transition-fast);

		em {
			font-style: normal;
			font-weight: var(--font-weight-semibold);
			color: var(--color-copper);
		}

		&:hover,
		&.filter-suggestion-item--active {
			background-color: var(--color-bg-hover);
		}

		&:active {
			background-color: var(--color-bg-active);
		}

		&:focus-visible {
			outline: 2px solid var(--color-accent-primary);
			outline-offset: -2px;
		}
	}

	.recommender-wine-results {
		border: 1px solid var(--color-border-default);
		margin-block-start: var(--space-4);
	}

	.recommender-results-header {
		padding: var(--space-2) var(--space-3);
		border-block-end: 1px solid var(--color-border-subtle);
	}

	/* Horizontal scrolling card tray */
	.recommender-wine-scroll {
		display: flex;
		overflow-x: auto;
		gap: var(--space-3);
		padding: var(--space-3);
		background: var(--color-cream-light);
	}

	/* Vertical card — fixed width, stretches to row height */
	.recommender-wine-card {
		flex: 0 0 var(--recommender-card-width);
		display: flex;
		flex-direction: column;
		border: 1px solid var(--color-border-subtle);
		background: var(--color-bg-surface);
		min-width: 0;
	}

	/* Zoomable thumbnail — block button wrapping the img */
	.recommender-wine-thumb-btn {
		display: block;
		width: 100%;
		padding: 0;
		border: none;
		background: none;
		cursor: zoom-in;
		transition: opacity var(--transition-fast);

		&:hover {
			opacity: 0.88;
		}

		&:active {
			opacity: 0.75;
		}

		&:focus-visible {
			outline: 2px solid var(--color-accent-primary);
			outline-offset: 2px;
		}
	}

	/* Image — no background fill; bottle images have white labels */
	.recommender-wine-thumb {
		width: 100%;
		height: var(--recommender-card-img-height);
		object-fit: contain;
		display: block;
	}

	.recommender-wine-thumb--placeholder {
		width: 100%;
		height: var(--recommender-card-img-height);
		display: block;
	}

	.recommender-wine-body {
		display: flex;
		flex-direction: column;
		padding: var(--space-2);
		flex: 1;
		min-width: 0;
	}

	.recommender-wine-name {
		font-family: var(--font-display);
		font-size: var(--font-size-sm);
		font-weight: var(--font-weight-bold);
		line-height: var(--line-height-relaxed);
		color: var(--color-text-primary);
		text-decoration: none;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;

		&:hover {
			text-decoration: underline;
		}

		&:focus-visible {
			outline: 2px solid var(--color-accent-primary);
			outline-offset: 2px;
		}
	}

	.recommender-wine-meta,
	.recommender-wine-region,
	.recommender-wine-grapes {
		font-size: var(--font-size-xs);
		line-height: var(--line-height-relaxed);
		color: var(--color-text-secondary);
	}

	.recommender-wine-grapes {
		color: var(--color-text-muted);
		font-style: italic;
	}

	.recommender-wine-stores {
		display: flex;
		flex-direction: column;
		gap: var(--space-1);
		font-size: var(--font-size-xs);
		color: var(--color-text-secondary);
	}

	/* ── Delete session ─────────────────────────────────────────── */

	/* Title bar becomes a flex row to host the delete action */
	.discover-main .chat-title-bar {
		display: flex;
		align-items: center;
		gap: var(--space-3);

		.chat-title-text {
			flex: 1;
			min-width: 0;
		}
	}

	.discover-delete-btn {
		flex-shrink: 0;
		anchor-name: --discover-delete-anchor;

		&:hover:not(:disabled) {
			color: var(--color-error);
		}
	}

	.discover-delete-dialog {
		padding: var(--space-3) var(--space-4);
		max-width: 260px;
		border: 1px solid var(--color-border-default);
		border-radius: var(--radius-md);
		background: var(--color-bg-surface);
		box-shadow: var(--shadow-lg);

		&[popover] {
			position-area: bottom span-left;
			position-anchor: --discover-delete-anchor;
			margin-block-start: var(--space-1);
			/* Flip above the button if insufficient space below; flip inline if near left edge */
			position-try-fallbacks:
				flip-block,
				flip-inline,
				flip-block flip-inline;
		}

		p {
			font-size: var(--font-size-sm);
			color: var(--color-text-secondary);
			margin: 0 0 var(--space-3);
		}

		.discover-delete-actions {
			display: flex;
			gap: var(--space-2);
			justify-content: flex-end;
		}
	}

	/* Icon action buttons in a row, pushed to card bottom */
	.recommender-wine-actions {
		display: flex;
		flex-direction: row;
		gap: var(--space-1);
		margin-block-start: auto;
		padding-block-start: var(--space-2);
	}

	/* Button border signals the action has already been taken */
	.recommender-action--known {
		border-color: var(--color-border-strong);
	}

	.recommender-action--done {
		color: var(--color-success);
		border-color: var(--color-success);
		pointer-events: none;
	}

	.recommender-action--error {
		color: var(--color-error);
		border-color: var(--color-error);
	}
}