// out:  ../foundation.css
/*
  FOUNDATION THEME

  This theme is identical to the original ChatGPT theme, preserved for users who have
  customized their CSS or want the classic AI Engine look. The ChatGPT theme may evolve
  over time to match the actual ChatGPT interface, while Foundation remains stable.
*/
@use 'common';
@use 'window-animations' as animations;

// Chatbot
.mwai-foundation-theme {
	font-family: var(--mwai-fontFamily, inherit);
	--mwai-spacing: 15px;
	--mwai-fontSize: 15px;
	--mwai-lineHeight: 1.5;
	--mwai-borderRadius: 10px;
	--mwai-borderColor: #4f4f4f;
	--mwai-width: 460px;
	--mwai-maxHeight: 40vh;
	--mwai-iconTextColor: white;
	--mwai-iconTextBackgroundColor: #343541;
	--mwai-fontColor: #FFFFFF;
	--mwai-backgroundPrimaryColor: #454654;
	--mwai-backgroundHeaderColor: #343541;
	--mwai-bubbleColor: #343541;
	--mwai-iconSize: 60px;
	--mwai-accentColor: #10a37f;
	--mwai-headerColor: #FFFFFF;
	--mwai-conversationsBackgroundColor: #202123;
	--mwai-conversationsTextColor: #FFFFFF;
	--mwai-backgroundSecondaryColor: #343541;
	--mwai-errorBackgroundColor: #6d2f2a;
	--mwai-errorTextColor: #FFFFFF;

	* {
		box-sizing: border-box;
	}

	.mwai-body {
		background: var(--mwai-backgroundSecondaryColor);
		color: var(--mwai-fontColor);
		font-size: var(--mwai-fontSize);
		overflow: hidden;
		display: flex;
		flex-direction: column;
		border-radius: var(--mwai-borderRadius);
	}

	// Header title styling for window mode
	&.mwai-window .mwai-header .mwai-name {
		color: var(--mwai-headerColor);
		font-size: var(--mwai-fontSize);
	}

	.mwai-shortcuts {
		display: flex;
		flex-wrap: wrap; // Two shortcuts already fill a phone; let them wrap instead of overflow.
		justify-content: center;
		gap: calc(var(--mwai-spacing) / 2);
		margin: var(--mwai-spacing);

		// Fully self-contained: padding, radius and background used to come from the site's
		// own button CSS, so the same chatbot looked different on every theme and usually
		// like an outlined form control. Suggestion chips should read as calm, tappable
		// prompts, and the label must stay legible, so the variant tints the chip instead
		// of colouring the text.
		.mwai-shortcut {
			display: inline-flex;
			align-items: center;
			gap: 7px;
			padding: 8px 14px;
			border-radius: 999px;
			border: 1px solid var(--mwai-borderColor);
			// Primary is the theme's raised surface (the input area), so the chip lifts off
			// the conversation background without hardcoding a light- or dark-only overlay.
			background: var(--mwai-backgroundPrimaryColor);
			color: var(--mwai-fontColor);
			font-family: inherit;
			font-size: var(--mwai-fontSize);
			line-height: 1.2;
			text-align: left;
			cursor: pointer;
			transition: filter 0.15s ease, border-color 0.15s ease;

			&:hover {
				filter: brightness(1.15);
			}

			// Colour is reserved for the one variant where it carries meaning. A row of
			// prompt suggestions gains nothing from being colour-coded, and tinting each
			// chip only hurt legibility, so success / warning / info render as plain chips.
			&.mwai-danger {
				border-color: rgba(244, 67, 54, 0.5);
				color: #ef5350;
			}

			.mwai-icon {
				margin-right: 0; // spacing is the chip's gap now
				display: inline-flex;
				align-items: center;

				img {
					max-height: 16px;
					width: auto;
				}
			}
		}
	}

	.mwai-blocks {
		display: flex;
		flex-direction: column;
		padding: var(--mwai-spacing);

		.mwai-block {
			p:first-child {
				margin-top: 0;
			}
		}

		button {
			cursor: pointer;
		}
	}

	.mwai-conversation {
		overflow: auto;
		flex: 1 1 auto;
		max-height: var(--mwai-maxHeight);
		min-height: 0;

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

		&::-webkit-scrollbar-track {
			background: rgba(255, 255, 255, 0.05);
			border-radius: 4px;
		}

		&::-webkit-scrollbar-thumb {
			background: rgba(255, 255, 255, 0.15);
			border-radius: 4px;
			transition: background 0.2s ease;

			&:hover {
				background: rgba(255, 255, 255, 0.25);
			}

			&:active {
				background: rgba(255, 255, 255, 0.3);
			}
		}

		scrollbar-width: thin;
		scrollbar-color: rgba(255, 255, 255, 0.15) rgba(255, 255, 255, 0.05);
	}

  .mwai-conversation.mwai-terminal {
    .mwai-terminal-line {
      line-height: 1.5;

      &.mwai-terminal-user {
        .mwai-terminal-prompt { opacity: 0.95; }
        .mwai-terminal-text { opacity: 0.98; }
      }

      &.mwai-terminal-system {
        opacity: 0.75;
      }

      .mwai-terminal-prompt {
        color: var(--mwai-headerColor);
      }

      .mwai-terminal-text {
        flex: 1;
        opacity: 0.92;
        .mwai-image { max-width: 100%; height: auto; }
        pre { background: transparent; border: 1px solid rgba(255,255,255,0.08); padding: 8px; border-radius: 4px; }
        code { font-family: inherit; }
      }

      .mwai-terminal-typed {
        white-space: pre-wrap;
      }
    }
  }

	.mwai-reply {
		display: flex;
		padding: var(--mwai-spacing);
		position: relative;
		line-height: var(--mwai-lineHeight);
		transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1);

		&.mwai-fade-out {
			opacity: 0;
		}

		&.mwai-user {
			background: var(--mwai-backgroundSecondaryColor);
		}

		&.mwai-ai,
		&.mwai-error {
			background: var(--mwai-backgroundPrimaryColor);
		}

		.mwai-name {
			color: var(--mwai-fontColor);
			margin-right: 5px;

			.mwai-name-text {
				opacity: 0.50;
				white-space: nowrap;
			}

			.mwai-avatar {
				margin-right: 10px;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 5px;
				overflow: hidden;

				img {
					width: 32px;
					height: 32px;
					min-width: 32px;
					min-height: 32px;
				}

				&.mwai-svg img {
					width: 28px;
					height: 28px;
					min-width: 28px;
					min-height: 28px;
					filter: brightness(0) invert(1);
				}
			}
		}

		.mwai-text {
			flex: auto;
			font-size: var(--mwai-fontSize);
			line-height: var(--mwai-lineHeight);
			color: var(--mwai-fontColor);

			.mwai-image {
				display: block;
				max-width: 250px;
				height: auto;
				margin: 0 0 10px 0;
				border-radius: var(--mwai-borderRadius);
			}

			.mwai-filename {
				display: flex;
				text-decoration: none;
				border: 1px solid var(--mwai-backgroundPrimaryColor);
				border-radius: var(--mwai-borderRadius);
				padding: 5px 10px;
				margin-bottom: 10px;
			}

			* {
				font-size: var(--mwai-fontSize);
			}

			> span > *:first-child {
				margin-top: 0;
			}

			> span > *:last-child {
				margin-bottom: 0;
			}

			a {
				color: #2196f3;
			}

			h1, h2, h3, h4, h5, h6 {
				color: var(--mwai-fontColor);
				margin: 0px;
				line-height: 1.2;
			}

			h1 {
				font-size: 150%;
			}

			h2 {
				font-size: 130%;
			}

			h3 {
				font-size: 115%;
			}

			h4 {
				font-size: 105%;
			}

			h5 {
				font-size: 100%;
			}

			h6 {
				font-size: 95%;
				font-weight: bold;
			}

			p {
				code {
					background: var(--mwai-backgroundSecondaryColor);
					padding: 2px 6px;
					border-radius: 8px;
					font-size: 90%;
					font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
				}
			}

			pre {
				color: var(--mwai-fontColor);
				border-radius: var(--mwai-borderRadius);
				padding: calc(var(--mwai-spacing) * 2 / 3) var(--mwai-spacing);
				break-after: auto;
				white-space: pre-wrap;
				font-size: 90%;
				max-width: 100%;
				width: 100%;
				font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
				background: #{'hsl(0 0% 0% / 30%)'};

				code {
					padding: 0 !important;
					background: transparent;
					font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
				}
			}

			ul, ol {
				padding: 0;
			}

			ul {
				list-style: disc;
				margin: 0 0 0 15px;
			}

			ol {
				list-style: decimal;
				margin: 0 0 0 15px;
			}

			table {
				width: 100%;
				border: 2px solid var(--mwai-backgroundSecondaryColor);
				border-collapse: collapse;
			}

			thead {
				background: var(--mwai-backgroundSecondaryColor);
			}

			tr, td {
				padding: 2px 5px;
			}

			td {
				border: 2px solid var(--mwai-backgroundSecondaryColor);
			}

			.mwai-typewriter {
				display: inline-block;

				> :first-child {
					margin-top: 0;
				}
			}

			>*:first-child {
				margin-top: 0;
			}

			>*:last-child {
				margin-bottom: 0;
			}
		}

		&.mwai-system {
			background: var(--mwai-errorBackgroundColor);
			color: var(--mwai-errorFontColor);

			.mwai-name {
				display: none;
			}
		}

		&.mwai-error {
			border-top: 1px dashed #ff5656;
			border-bottom: 1px dashed #ff5656;
		}
	}

	.mwai-input {
		@include common.input-container-base(null);
		padding: var(--mwai-spacing);
		border-top: 1px solid var(--mwai-backgroundPrimaryColor);

		.mwai-input-text {
			@include common.input-text-base();
			background: var(--mwai-backgroundPrimaryColor);
			padding: calc(var(--mwai-spacing) / 2);

			&.mwai-blocked {
				background: var(--mwai-errorBackgroundColor);
			}

			&.mwai-dragging {
				filter: brightness(1.2);
			}

			textarea {
				@include common.input-textarea-base(inherit);
				padding-left: calc(var(--mwai-spacing) / 2);
				line-height: var(--mwai-lineHeight);

				&:focus {
					outline: none;
					box-shadow: none;
				}

				&::placeholder {
					color: var(--mwai-fontColor);
					opacity: 0.5;
				}
			}

			.mwai-microphone {
				@include common.microphone;
			}

				.mwai-file-upload-icon { @include common.file-upload-icon('icons/dark-icons.svg'); }
		}

		button {
			margin-left: var(--mwai-spacing);
		}
	}

	.mwai-compliance {
		opacity: 0.50;
		margin-top: 0;
		padding: calc(var(--mwai-spacing) / 1.5) var(--mwai-spacing);
		font-size: smaller;
		color: var(--mwai-fontColor);
		text-align: left;
	}



	.mwai-gallery {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		grid-gap: 5px;

		img {
			width: 100%;
		}
	}

	button {
		color: var(--mwai-fontColor);
		background: var(--mwai-backgroundSecondaryColor);
		border: 1px solid var(--mwai-borderColor);
		padding: calc(var(--mwai-spacing) / 2) var(--mwai-spacing);
		min-width: 70px;
		border-radius: 5px;
		cursor: pointer;
		transition: all 0.2s ease-out;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: calc(var(--mwai-fontSize) * 0.9);
		position: relative;

		.mwai-timer {
			margin-left: 5px;
			margin-right: 5px;
			font-size: 11px;
		}

		&:hover {
			background: var(--mwai-backgroundPrimaryColor);
		}
	}

	button[disabled] {
		cursor: not-allowed;

		span {
			opacity: 0.5;
		}

		&.mwai-busy {
			span {
				display: none;
			}

			&:before {
				content: '';
				width: 18px;
				height: 18px;
				margin: auto;
				border: 3px solid transparent;
				border-top-color: var(--mwai-fontColor);
				border-radius: 50%;
				animation: mwai-button-spinner 1s ease infinite;
			}
		}
	}

	&.mwai-form-container {
		padding: var(--mwai-spacing);
		font-size: var(--mwai-fontSize);
		color: var(--mwai-fontColor);
		background: var(--mwai-backgroundSecondaryColor);
		border-radius: var(--mwai-borderRadius);

		fieldset {
			border: 0;
			margin: 0;
			padding: 0;
			display: flex;
			flex-direction: column;
			margin-bottom: 10px;

			input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="password"], input[type="number"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="month"], input[type="search"], input[type="time"], input[type="week"], select, textarea {
				padding: calc(var(--mwai-spacing) * 2 / 3) var(--mwai-spacing);
				border: 0;
				width: 100%;
				border-radius: var(--mwai-borderRadius);
				font-size: var(--mwai-fontSize);
				background: var(--mwai-backgroundPrimaryColor);
				color: var(--mwai-fontColor);
			}

			select {
				padding: calc(var(--mwai-spacing) * 2 / 3) var(--mwai-spacing);
				border: 0;
				width: 100%;
				border-radius: var(--mwai-borderRadius);
				font-size: var(--mwai-fontSize);
				background: var(--mwai-backgroundPrimaryColor);
				color: var(--mwai-fontColor);
			}

			textarea {
				padding: calc(var(--mwai-spacing) * 2 / 3) var(--mwai-spacing);
				border: 0;
				width: 100%;
				border-radius: var(--mwai-borderRadius);
				font-family: inherit;
				font-size: var(--mwai-fontSize);
				background: var(--mwai-backgroundPrimaryColor);
				color: var(--mwai-fontColor);
			}

			input[disabled], select[disabled], textarea[disabled] {
				opacity: 0.25;
			}
		}

		.mwai-form-submit, .mwai-form-reset {

			button {
				height: 45px;
				background: none;
				width: 100%;
				color: var(--mwai-fontColor);
				font-size: var(--mwai-fontSize);
				background-color: var(--mwai-backgroundSecondaryColor);
				border: 1px solid var(--mwai-backgroundPrimaryColor);
				border-radius: var(--mwai-borderRadius);
				cursor: pointer;
				transition: all 0.2s ease-out;
				position: relative;

				&:hover {
					background: var(--mwai-backgroundPrimaryColor);
				}
			}

			button[disabled] {
				span {
					opacity: 0.25;
				}

				&:hover {
					background: none;
					cursor: not-allowed;
				}
			}

			&.mwai-loading {

				button {

					span {
						opacity: 0;
					}

					&::after {
						content: '';
						position: absolute;
						width: 18px;
						height: 18px;
						top: 0;
						left: 0;
						right: 0;
						bottom: 0;
						margin: auto;
						border: 3px solid transparent;
						border-top-color: var(--mwai-fontColor);
						border-radius: 50%;
						animation: mwai-button-spinner 1s ease infinite;
					}

					// Elapsed time, like the chatbot shows. Sits just right of the
					// centred spinner so the two read as one indicator.
					.mwai-timer {
						position: absolute;
						top: 50%;
						left: 50%;
						margin-left: 16px;
						transform: translateY(-50%);
						font-size: 11px;
						opacity: 0.8;
					}
				}
			}
		}

		.mwai-form-output-container {

			.mwai-form-output {
				font-size: var(--mwai-fontSize);
				position: relative;
				margin-top: var(--mwai-spacing);
				padding: var(--mwai-spacing);
				border: 1px solid var(--mwai-backgroundPrimaryColor);

				&.mwai-error {
					background: var(--mwai-errorBackgroundColor);
					color: var(--mwai-errorFontColor);
				}

				& > *:first-child {
					margin-top: 0;
				}

				& > *:last-child {
					margin-bottom: 0;
				}

				img {
					max-width: 33%;
				}

				div {
					& > *:first-child {
						margin-top: 0;
					}

					& > *:last-child {
						margin-bottom: 0;
					}
				}
			}

			&.mwai-has-content {
				display: block;
			}
		}

		.wp-block-columns {
			margin: 0;
		}
	}

	// ChatbotChunks - Dark theme overrides
	.mwai-chunks {
		background: rgba(255, 255, 255, 0.05);
		border-top: 1px solid rgba(255, 255, 255, 0.1);

		.mwai-chunks-header {
			color: #9ca3af;
		}

		.mwai-chunk {
			background: rgba(255, 255, 255, 0.08);
			border: 1px solid rgba(255, 255, 255, 0.1);

			.mwai-chunk-header {
				.mwai-chunk-time {
					color: #6b7280;
				}

				.mwai-chunk-data {
					color: #e5e7eb;
				}

				.mwai-chunk-expand {
					color: #6b7280;
				}
			}

			.mwai-chunk-details {
				background: rgba(0, 0, 0, 0.2);

				pre {
					color: #d1d5db;
				}
			}
		}
	}

	// Apply window animations conditionally
	@include animations.window-animation-conditional();
}

// Footer tools unified via common mixin
.mwai-foundation-theme {
  	@include common.footer-tools;

    .mwai-body {
      @include common.no-footer-bottom-spacing(
        var(--mwai-spacing),
        var(--mwai-spacing)
      );
    }
  }


// Common
.mwai-foundation-theme {
	@include common.common-styles;
	@include common.code-dark;
	@include common.reply-actions;
	@include common.realtime;
	@include common.discussions-styles;


	// ChatbotChunks - Dark theme overrides
	.mwai-chunks {
		background: rgba(255, 255, 255, 0.05);

		.mwai-chunks-header {
			color: #9ca3af;

			.mwai-chunks-toggle {
				border-color: rgba(255, 255, 255, 0.1);
				color: #9ca3af;

				&:hover {
					background: rgba(255, 255, 255, 0.05);
					color: #e5e7eb;
				}
			}
		}

		.mwai-chunk {
			background: rgba(255, 255, 255, 0.08);

			.mwai-chunk-header {
				.mwai-chunk-time {
					color: #e5e7eb;
				}

				.mwai-chunk-data {
					color: #e5e7eb;
				}

				.mwai-chunk-expand {
					color: #e5e7eb;
				}
			}

			.mwai-chunk-details {
				background: rgba(0, 0, 0, 0.2);

				pre {
					color: #d1d5db;
				}
			}
		}
	}
}

// Mobile
.mwai-foundation-theme {

@media (max-width: common.$bp-mobile) {
		&.mwai-window.mwai-open {
		}

		.mwai-input {
			flex-direction: column;
			padding: var(--mwai-spacing);
			background: var(--mwai-backgroundSecondaryColor);
			border-top: 1px solid var(--mwai-backgroundPrimaryColor);

			.mwai-input-submit {
				margin: 15px 0 0 0;
				height: 40px;
				width: 100%;
			}
		}

		.mwai-name {
			margin-right: 0;
			max-width: inherit;
		}
	}
}

// Discussions Overrides for Foundation Theme
.mwai-foundation-theme {
	&.mwai-discussions {
		.mwai-header {
			background: var(--mwai-backgroundSecondaryColor);
			color: var(--mwai-fontColor);
			border-bottom: 1px solid var(--mwai-backgroundPrimaryColor);

			button {
				background: var(--mwai-backgroundSecondaryColor);
				color: var(--mwai-fontColor);
				border: 1px solid var(--mwai-borderColor);
				padding: calc(var(--mwai-spacing) / 2) var(--mwai-spacing);
				border-radius: 5px;
				cursor: pointer;
				transition: all 0.2s ease-out;
				font-size: calc(var(--mwai-fontSize) * 0.9);
				margin-left: 0;

				&:hover:not(:disabled) {
					background: var(--mwai-backgroundPrimaryColor);
				}

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

		.mwai-pagination {
			background: var(--mwai-backgroundSecondaryColor);
			border-top: 1px solid var(--mwai-backgroundPrimaryColor);

			button {
				background: var(--mwai-backgroundSecondaryColor);
				color: var(--mwai-fontColor);
				border: 1px solid var(--mwai-borderColor);
				padding: calc(var(--mwai-spacing) / 2) var(--mwai-spacing);
				border-radius: 5px;
				cursor: pointer;
				transition: all 0.2s ease-out;
				font-size: calc(var(--mwai-fontSize) * 0.9);
				margin-left: 0;

				&:hover:not(:disabled) {
					background: var(--mwai-backgroundPrimaryColor);
				}

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

		.mwai-discussions-footer,
		.mwai-discussions-pagination {
			background: var(--mwai-backgroundSecondaryColor);
			border-top: 1px solid var(--mwai-backgroundPrimaryColor);

			.mwai-new-chat-button {
				width: 100%;
				background: var(--mwai-backgroundSecondaryColor);
				color: var(--mwai-fontColor);
				border: 1px solid var(--mwai-borderColor);
				padding: calc(var(--mwai-spacing) / 2) var(--mwai-spacing);
				border-radius: 5px;
				cursor: pointer;
				transition: all 0.2s ease-out;
				font-size: calc(var(--mwai-fontSize) * 0.9);

				&:hover {
					background: var(--mwai-backgroundPrimaryColor);
				}

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

// Context Menu Overrides for Foundation Theme
.mwai-context-menu-portal.mwai-foundation-theme {
	.mwai-context-menu {
		background: var(--mwai-backgroundSecondaryColor);
		border: 1px solid var(--mwai-backgroundPrimaryColor);
		color: var(--mwai-fontColor);

		.mwai-menu-item {
			&:hover {
				background-color: var(--mwai-backgroundPrimaryColor);
			}

			&.mwai-danger {
				color: var(--mwai-errorTextColor);

				&:hover {
					background-color: var(--mwai-errorBackgroundColor);
				}
			}
		}
	}
}
