/* Chat assistant styles - Editorial Luxury Design */

@layer components {
	chat-assistant {
		display: flex;
		flex-direction: column;
		height: 100%;

		@media (max-width: 767px) {
			display: block;
		}
	}

	chat-window {
		display: block;
	}

	chat-form {
		display: block;
	}

	chat-message {
		display: block;
	}

	.chat-assistant {
		.chat-window {
			flex-grow: 1;
			overflow-y: auto;
			padding: var(--space-3) var(--space-6);
			max-width: 1000px;
			width: 100%;

			&::-webkit-scrollbar {
				width: 8px;
			}

			&::-webkit-scrollbar-thumb {
				background-color: var(--color-copper);
				border-radius: var(--radius-md);

				&:hover {
					background-color: var(--color-copper-dark);
				}
			}

			&::-webkit-scrollbar-track {
				background: var(--color-cream-dark);
			}

			@media (max-width: 767px) {
				padding: var(--space-4);
				overflow: visible;
			}
		}

		.chat-form {
			padding: var(--space-3) var(--space-6);
			background: var(--color-bg-surface);
			max-width: 1000px;
			width: 100%;
			border-block-start: 1px solid var(--color-border-default);

			@media (max-width: 767px) {
				padding: var(--space-3) var(--space-4);
			}
		}

		.message {
			margin-block-end: var(--space-6);
			padding: var(--space-5) var(--space-6);
			line-height: var(--line-height-relaxed);
			position: relative;
			border-radius: var(--radius-sm);
			box-shadow: var(--shadow-sm);

			strong {
				font-family: var(--font-body);
				font-size: var(--font-size-xs);
				text-transform: uppercase;
				letter-spacing: var(--letter-spacing-widest);
				color: var(--color-text-tertiary);
				font-weight: var(--font-weight-semibold);
			}

			&.user {
				background: var(--color-bg-surface);
				border: 1px solid var(--color-border-default);
				border-inline-start: 4px solid var(--color-slate);

				strong {
					color: var(--color-slate-dark);
				}
			}

			&.assistant {
				background: var(--color-bg-surface);
				border: 1px solid var(--color-border-default);
				border-inline-start: 4px solid var(--color-copper);

				strong {
					color: var(--color-copper-dark);
				}
			}

			@media (max-width: 767px) {
				margin-block-end: var(--space-4);
				padding: var(--space-3) var(--space-4);
			}
		}

		.message-header {
			display: flex;
			justify-content: space-between;
			align-items: baseline;
			margin-block-end: var(--space-3);
			padding-bottom: var(--space-2);
			border-bottom: 1px solid var(--color-border-subtle);

			@media (max-width: 767px) {
				margin-block-end: var(--space-2);
				padding-bottom: var(--space-2);
			}
		}

		.message-timestamp {
			font-size: var(--font-size-xs);
			color: var(--color-text-muted);
			font-family: var(--font-mono);
			letter-spacing: var(--letter-spacing-wide);
		}

		.message-content {
			word-break: break-word;
			font-size: var(--font-size-base);
			line-height: var(--line-height-normal);
			color: var(--color-text-primary);

			@media (max-width: 767px) {
				font-size: var(--font-size-base);
				line-height: var(--line-height-normal);
			}

			p {
				margin-block: 0 var(--space-4);

				&:last-child {
					margin-block-end: 0;
				}

				@media (max-width: 767px) {
					margin-block: 0 var(--space-3);
				}
			}

			h3 {
				font-family: var(--font-display);
				font-size: var(--font-size-xl);
				font-weight: var(--font-weight-bold);
				color: var(--color-text-primary);
				margin-block: var(--space-6) var(--space-3);
				line-height: var(--line-height-relaxed);
				letter-spacing: var(--letter-spacing-tight);

				&:first-child {
					margin-block-start: 0;
				}

				@media (max-width: 767px) {
					font-size: var(--font-size-xl);
					margin-block: var(--space-5) var(--space-2);
				}
			}

			ul {
				margin-block: var(--space-3);
				padding-left: var(--space-6);

				li {
					margin-block: var(--space-4);
				}

				@media (max-width: 767px) {
					padding-left: var(--space-4);
				}
			}

			strong {
				font-family: var(--font-body);
				font-size: inherit;
				text-transform: none;
				letter-spacing: normal;
				color: var(--color-copper-dark);
				font-weight: var(--font-weight-bold);
			}

			em {
				font-style: italic;
				color: var(--color-text-secondary);
			}
		}

		.wine-suggestion {
			border: 1px solid var(--color-border-default);
			background: var(--color-bg-surface);
			padding: var(--space-5);
			margin-block: var(--space-4);
			border-inline-start: 3px solid var(--color-copper);
			box-shadow: var(--shadow-sm);
			transition: box-shadow var(--transition-base);
			position: relative;

			@media (max-width: 767px) {
				padding: var(--space-3);
			}

			&:hover {
				box-shadow: var(--shadow-md);
			}
		}

		.wine-suggestion-detail-link {
			position: absolute;
			top: var(--space-3);
			right: var(--space-3);
			width: 36px;
			height: 36px;
			border: 1px solid var(--color-copper);
			background: var(--color-bg-surface);
			color: var(--color-copper);
			font-size: var(--font-size-base);
			font-weight: var(--font-weight-bold);
			cursor: pointer;
			border-radius: var(--radius-sm);
			display: flex;
			align-items: center;
			justify-content: center;
			text-decoration: none;
			transition:
				background-color var(--transition-fast),
				color var(--transition-fast);

			&:hover {
				background: var(--color-copper);
				color: white;
			}
		}

		.wine-suggestion-add-btn {
			position: absolute;
			top: var(--space-3);
			right: var(--space-3);
			width: 36px;
			height: 36px;
			padding: 0;
			background: var(--color-bg-surface);
			color: var(--color-copper);
			border: 1px solid var(--color-copper);
			font-size: var(--font-size-lg);
			font-weight: var(--font-weight-bold);
			cursor: pointer;
			border-radius: var(--radius-sm);
			display: flex;
			align-items: center;
			justify-content: center;
			transition:
				background-color var(--transition-fast),
				color var(--transition-fast);

			&:hover:not(:disabled) {
				background: var(--color-copper);
				color: white;
			}

			&:disabled {
				opacity: 0.4;
				cursor: default;
			}

			&.wine-suggestion-add-btn--added {
				color: var(--color-success, green);
				border-color: currentColor;
			}

			&.wine-suggestion-add-btn--error {
				color: var(--color-error);
				border-color: currentColor;
			}
		}

		.wine-inline-add-btn {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			width: 20px;
			height: 20px;
			padding: 0;
			margin-inline-start: var(--space-1);
			background: var(--color-bg-surface);
			color: var(--color-copper);
			border: 1px solid var(--color-copper);
			font-size: var(--font-size-sm);
			font-weight: var(--font-weight-bold);
			cursor: pointer;
			border-radius: var(--radius-sm);
			vertical-align: middle;
			transition:
				background-color var(--transition-fast),
				color var(--transition-fast);

			&:hover:not(:disabled) {
				background: var(--color-copper);
				color: white;
			}

			&:disabled {
				opacity: 0.4;
				cursor: default;
			}

			&.wine-suggestion-add-btn--added {
				color: var(--color-success, green);
				border-color: currentColor;
			}

			&.wine-suggestion-add-btn--error {
				color: var(--color-error);
				border-color: currentColor;
			}
		}

		.wine-inline-detail-link {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			width: 20px;
			height: 20px;
			margin-inline-start: var(--space-1);
			border: 1px solid var(--color-copper);
			background: var(--color-bg-surface);
			color: var(--color-copper);
			font-size: var(--font-size-sm);
			font-weight: var(--font-weight-bold);
			text-decoration: none;
			vertical-align: middle;
			border-radius: var(--radius-sm);
			transition:
				background-color var(--transition-fast),
				color var(--transition-fast);

			&:hover {
				background: var(--color-copper);
				color: white;
			}
		}

		.wine-name {
			font-weight: var(--font-weight-semibold);
			color: var(--color-text-primary);

			a {
				color: var(--color-text-primary);
				text-decoration: none;
				transition: color var(--transition-fast);

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

		.wine-suggestion .wine-name {
			display: block;
			font-family: var(--font-display);
			font-size: var(--font-size-2xl);
			margin-block-end: var(--space-2);
			line-height: 1;
			letter-spacing: var(--letter-spacing-tight);

			@media (max-width: 767px) {
				font-size: var(--font-size-xl);
				line-height: var(--line-height-normal);
			}
		}

		.stock-info {
			font-size: var(--font-size-base);
			color: var(--color-text-secondary);
			font-style: italic;
			margin-block-end: var(--space-3);
		}

		.pairing-reason {
			margin-block-start: var(--space-4);
			font-size: var(--font-size-base);
			color: var(--color-text-primary);
			line-height: var(--line-height-relaxed);
		}

		.pairing-notes {
			background: var(--color-cream-dark);
			padding: var(--space-4);
			margin-block: var(--space-4);
			font-size: var(--font-size-base);
			border: 1px solid var(--color-border-subtle);
			border-left: 3px solid var(--color-copper);
			line-height: var(--line-height-relaxed);
			color: var(--color-text-primary);

			@media (max-width: 767px) {
				padding: var(--space-3);
			}

			p {
				margin-block: var(--space-2) var(--space-3);
			}

			ul {
				margin-block: var(--space-2);
				padding-left: var(--space-6);

				@media (max-width: 767px) {
					padding-left: var(--space-4);
				}

				li {
					margin-block: var(--space-2);
				}
			}
		}

		.chat-controls {
			margin-block-end: var(--space-3);

			@media (max-width: 767px) {
				margin-block-end: var(--space-2);
			}
		}

		.model-toggle {
			display: inline-flex;
			gap: 1px;
			background: var(--color-border-default);
			border-radius: var(--radius-sm);
			overflow: hidden;

			input[type="radio"] {
				position: absolute;
				opacity: 0;
				pointer-events: none;
			}

			label {
				padding: var(--space-2) var(--space-4);
				background: var(--color-bg-surface);
				color: var(--color-text-secondary);
				font-size: var(--font-size-sm);
				font-weight: var(--font-weight-medium);
				cursor: pointer;
				transition:
					background-color var(--transition-fast),
					color var(--transition-fast);
				text-transform: uppercase;
				letter-spacing: 0.05em;
				user-select: none;

				&:hover {
					background: var(--color-cream-light);
				}
			}

			input[type="radio"]:checked + label {
				background: var(--color-copper);
				color: white;
				font-weight: var(--font-weight-semibold);
			}

			@media (max-width: 767px) {
				label {
					padding: var(--space-2) var(--space-3);
					font-size: var(--font-size-xs);
				}
			}
		}

		.chat-input-container {
			display: flex;
			gap: var(--space-4);
			align-items: flex-end;

			input,
			textarea {
				flex-grow: 1;
				border: 1px solid var(--color-border-default);
				background: var(--color-bg-surface);
				resize: vertical;
				min-height: 2.75rem;
				font-family: var(--font-body);
				font-size: var(--font-size-base);
				line-height: var(--line-height-normal);
				box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
				transition:
					border-color var(--transition-fast),
					background-color var(--transition-fast),
					box-shadow var(--transition-fast);

				&:focus {
					outline: none;
					border-color: var(--color-accent-primary);
					background: white;
					box-shadow: 0 0 0 3px rgba(155, 107, 74, 0.1);
				}

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

				@media (max-width: 767px) {
					min-height: var(--mobile-touch-target);
					font-size: 1rem;
				}
			}

			button {
				flex-shrink: 0;
				padding: var(--space-2) var(--space-5);
				background: linear-gradient(135deg, var(--color-copper) 0%, var(--color-copper-dark) 100%);
				color: var(--color-cream);
				border: 1px solid var(--color-copper-light);
				font-weight: var(--font-weight-semibold);
				box-shadow: var(--shadow-ink);
				text-transform: uppercase;
				letter-spacing: var(--letter-spacing-wide);
				transition:
					background-color var(--transition-fast),
					color var(--transition-fast),
					box-shadow var(--transition-fast),
					transform var(--transition-fast);

				&:hover:not(:disabled) {
					background: linear-gradient(135deg, var(--color-copper-light) 0%, var(--color-copper) 100%);
					box-shadow: var(--shadow-md);
				}

				&:disabled {
					opacity: 0.5;
					cursor: not-allowed;
					transform: none;
				}
			}

			@media (max-width: 767px) {
				gap: var(--space-2);
				flex-direction: column;
				align-items: stretch;

				button {
					width: 100%;
					padding: var(--space-3);
					font-size: var(--font-size-sm);
				}

				input,
				textarea {
					min-height: 3rem;
				}
			}
		}

		.chat-empty-state {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			height: 100%;
			padding: var(--space-10);
			text-align: center;

			h2 {
				font-family: var(--font-display);
				font-size: var(--font-size-4xl);
				color: var(--color-text-primary);
				margin-block-end: var(--space-4);
				font-weight: var(--font-weight-semibold);
				letter-spacing: var(--letter-spacing-tight);
			}

			p {
				font-size: var(--font-size-lg);
				color: var(--color-text-secondary);
				max-width: 600px;
				line-height: var(--line-height-relaxed);
				margin-block-end: var(--space-6);
			}

			.example-questions {
				display: flex;
				flex-direction: column;
				gap: var(--space-3);
				width: 100%;
				max-width: 500px;

				button {
					padding: var(--space-4) var(--space-5);
					background: var(--color-bg-surface);
					border: 1px solid var(--color-border-default);
					color: var(--color-text-primary);
					text-align: left;
					cursor: pointer;
					transition:
						background-color var(--transition-fast),
						color var(--transition-fast),
						box-shadow var(--transition-fast),
						transform var(--transition-fast);
					border-radius: var(--radius-sm);
					font-size: var(--font-size-base);
					line-height: var(--line-height-normal);
					text-transform: none;
					letter-spacing: normal;
					font-weight: var(--font-weight-normal);

					&:hover {
						background: var(--color-copper);
						color: var(--color-cream);
						border-color: var(--color-copper-dark);
						box-shadow: var(--shadow-ink);
					}
				}
			}
		}

		.chat-loading {
			display: flex;
			align-items: center;
			gap: var(--space-3);
			padding: var(--space-5);
			background: var(--color-cream-dark);
			border-radius: var(--radius-sm);
			border: 1px solid var(--color-border-subtle);
			margin-block-end: var(--space-6);

			.loading-spinner {
				font-size: var(--font-size-2xl);
				animation: pulse 1.5s ease-in-out infinite;
			}

			.loading-text {
				color: var(--color-text-secondary);
				font-size: var(--font-size-base);
				font-style: italic;
			}
		}

		.chat-error {
			padding: var(--space-5);
			background: var(--color-error-bg);
			border: 1px solid var(--color-error);
			border-left: 3px solid var(--color-error);
			margin-block-end: var(--space-6);

			.error-title {
				font-weight: var(--font-weight-bold);
				color: var(--color-error);
				margin-block-end: var(--space-2);
				font-size: var(--font-size-lg);
			}

			.error-message {
				color: var(--color-error);
				font-size: var(--font-size-base);
				line-height: var(--line-height-relaxed);
			}
		}

		@keyframes pulse {
			0%,
			100% {
				opacity: 1;
			}
			50% {
				opacity: 0.5;
			}
		}
	}

	/* Chat List View */
	.chat-list-toolbar {
		display: flex;
		gap: var(--space-2);
		align-items: center;
		margin-bottom: var(--space-4);
	}

	.chat-list-filter {
		flex: 1;
		padding: var(--space-2) var(--space-3);
	}

	.chat-list {
		display: flex;
		flex-direction: column;
		border: 1px solid var(--color-border-default);
		background: var(--color-bg-surface);
	}

	.chat-list-row {
		display: flex;
		flex-direction: column;
		gap: 0;
		padding: var(--space-3) var(--space-5);
		border-bottom: 1px solid var(--color-border-subtle);
		border-left: 3px solid transparent;
		transition:
			background-color var(--transition-fast),
			border-left-color var(--transition-fast);

		@media (max-width: 767px) {
			padding: var(--space-3);
		}

		&:last-child {
			border-bottom: none;
		}

		&:hover {
			background: var(--color-cream-dark);
			border-left-color: var(--color-copper);
		}
	}

	.chat-list-link {
		display: block;
		text-decoration: none;
		color: inherit;
	}

	.chat-list-name {
		font-family: var(--font-display);
		font-size: var(--font-size-xl);
		font-weight: var(--font-weight-medium);
		color: var(--color-text-primary);
		line-height: var(--line-height-normal);
		letter-spacing: var(--letter-spacing-tight);
		transition: color var(--transition-fast);

		@media (max-width: 767px) {
			font-size: var(--font-size-lg);
		}

		.chat-list-link:hover & {
			color: var(--color-copper-dark);
		}
	}

	.chat-list-meta {
		display: flex;
		align-items: center;
		gap: var(--space-2);
		font-size: var(--font-size-xs);
		line-height: var(--line-height-tight);
		color: var(--color-text-muted);
		font-family: var(--font-body);
	}

	.chat-list-meta-sep {
		opacity: 0.5;
	}

	.chat-list-date {
		font-family: var(--font-mono);
		letter-spacing: var(--letter-spacing-wide);
	}

	.chat-list-count {
		color: var(--color-text-tertiary);
	}

	.chat-list-actions {
		display: flex;
		align-items: center;
		gap: var(--space-1);
		margin-left: auto;
		opacity: 0.4;
		transition: opacity var(--transition-fast);

		.chat-list-row:hover & {
			opacity: 1;
		}
	}
}