/*
 Theme Name:   Woodmart Child
 Description:  Woodmart Child Theme
 Author:       XTemos
 Author URI:   http://xtemos.com
 Template:     woodmart
 Version:      1.0.0
 Text Domain:  woodmart
*/



.mybot-timeless-theme {
	--mybot-spacing: 15px;
	--mybot-fontSize: 13px;
	--mybot-lineHeight: 1.5;
	--mybot-borderRadius: 10px;
	--mybot-width: 360px;
	--mybot-maxHeight: 40vh;
	--mybot-iconTextColor: #FFFFFF;
	--mybot-iconTextBackgroundColor: #2831dc;
	--mybot-fontColor: black;
	--mybot-backgroundPrimaryColor: #fafafa;
	--mybot-backgroundHeaderColor: linear-gradient(130deg, #2831dc 0%, #09a9f8 100%);
	--mybot-bubbleColor: #2831dc;
	--mybot-headerButtonsColor: white;
	--mybot-conversationsBackgroundColor: white;
	--mybot-backgroundUserColor: linear-gradient(130deg, #272fdc 0%, #09a9f8 100%);
	--mybot-backgroundAiColor: #F1F3F7;
	--mybot-backgroundAiSecondaryColor: #ddd;
	--mybot-errorBackgroundColor: #6d2f2a;
	--mybot-errorTextColor: #FFFFFF;

	--mybot-headerHeight: 80px;

	font-size: var(--mybot-fontSize);

	* {
		box-sizing: border-box;
	}

	&.mybot-window .mybot-header { 
		height: var(--mybot-headerHeight);
		padding: var(--mybot-spacing);

		.mybot-avatar img {
			width: 48px;
			height: 48px;
		}

		.mybot-name {
			color: white;
			font-size: 140%;
			margin-left: calc(var(--mybot-spacing) / 2);

			small {
				font-size: 75%;
				display: block;
			}
		}
	}

	.mybot-content {
		display: flex;
		background: var(--mybot-backgroundPrimaryColor);
		font-size: var(--mybot-fontSize);
		color: var(--mybot-fontColor);
		border-radius: var(--mybot-borderRadius);
		flex-direction: column;
	}

	.mybot-shortcuts {
		display: flex;
		flex-direction: column;
		align-items: flex-end;

		.mybot-shortcut {
			margin-bottom: 5px;
			font-size: var(--mybot-fontSize);
			height: inherit;
			min-height: inherit;
			width: inherit;
			min-width: 90px;
			border-radius: var(--mybot-borderRadius);
			padding: 7px 12px;
			cursor: pointer;
			display: flex;
			align-items: center;
			justify-content: end;

			&.mybot-success {
				background: #4caf50;
				color: white;
				box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.15);
			}

			&.mybot-danger {
				background: #f44336;
				color: white;
				box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.15);
			}

			&.mybot-warning {
				background: #ff9800;
				color: white;
				box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.15);
			}

			&.mybot-info {
				background: #2196f3;
				color: white;
				box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.15);
			}

			.mybot-icon {
				margin-right: 5px;

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

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

	.mybot-blocks {
		display: flex;
		flex-direction: column;
		padding: var(--mybot-spacing);
		border-top: 0.5px solid rgba(0, 0, 0, 0.15);
		background: var(--mybot-backgroundAiColor);

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

		button {
			cursor: pointer;
		}
	}

	.mybot-conversation {
		display: flex;
		flex-direction: column;
		overflow: auto;
		max-height: var(--mybot-maxHeight);
		padding: var(--mybot-spacing);
		
		.mybot-reply {
			margin-bottom: var(--mybot-spacing);
			padding: 7px 12px;
			border-radius: var(--mybot-borderRadius);
			font-size: var(--mybot-fontSize);
			color: var(--mybot-fontColor);
			position: relative;

			.mybot-name,
			.mybot-name-text {
				display: none;
			}

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

			&.mybot-ai {
				align-self: flex-start;
				background: var(--mybot-backgroundAiColor);
			}

			&.mybot-user {
				align-self: flex-end;
				background: var(--mybot-backgroundUserColor);
				color: white;
			}
		}
	}

	.mybot-text {
		flex: auto;

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

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

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

		a {
			color: #2196f3;
		}

		h1 {
			font-size: 200%;
		}

		h2 {
			font-size: 160%;
		}

		h3 {
			font-size: 140%;
		}

		h4 {
			font-size: 120%;
		}

		p {
			font-size: var(--mybot-fontSize);
			line-height: var(--mybot-lineHeight);

			code {
				background: var(--mybot-backgroundAiSecondaryColor);
				padding: 2px 6px;
				border-radius: 8px;
				font-size: calc(var(--mybot-fontSize) * 0.9);
				font-family: system-ui;
			}
		}

		pre {
			color: var(--mybot-fontColor);
			border-radius: var(--mybot-borderRadius);
			break-after: auto;
			white-space: pre-wrap;
			max-width: 100%;
			width: 100%;
			font-family: system-ui;
			background: var(--mybot-backgroundAiSecondaryColor);
			padding: var(--mybot-spacing);

			code {
				padding: 0 !important;
				font-family: system-ui;
				background: var(--mybot-backgroundAiSecondaryColor);
			}
		}

		ol {
			padding: 0;
			margin: 0 0 0 20px;
		}

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

		thead {
			background: var(--mybot-backgroundAiSecondaryColor);
		}

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

		td {
			border: 2px solid var(--mybot-backgroundAiSecondaryColor);
		}

		.mybot-typewriter {
			display: inline-block;

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

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

	button {
		background: var(--mybot-backgroundUserColor);
		color: white;
		border: none;
		transition: all 0.5s;
		padding: 7px 12px;
		border-radius: var(--mybot-borderRadius);
	}

	.mybot-input {
		display: flex;
		align-items: center;
		width: 100%;
		border-top: 0.5px solid rgba(0, 0, 0, 0.15);
		padding: calc(var(--mybot-spacing) / 2) var(--mybot-spacing);
		position: relative;

		.mybot-input-text {
			flex: auto;
			position: relative;
			display: flex;
			width: 100%;
			background: var(--mybot-backgroundPrimaryColor);
			overflow: hidden;

			&.mybot-blocked img {
				filter: grayscale(100%);
				opacity: 0.5;
			}

			&.mybot-dragging {
				border: 1px dashed var(--mybot-backgroundAiSecondaryColor);
			}

			textarea {
				background: var(--mybot-backgroundPrimaryColor);
				color: var(--mybot-fontColor);
				flex: auto;
				border: none;
				font-size: var(--mybot-fontSize);
				resize: none;
				font-family: inherit;
				margin: 0;
				overflow: hidden;
				min-height: inherit;
				box-shadow: none;
				outline: none;

				&::placeholder {
					color: rgba(0, 0, 0, 0.25);
				}
			}

			.mybot-microphone {
				@include microphone;
			}
		}

		button {
			margin-left: var(--mybot-spacing);
			border-radius: 100%;
			cursor: pointer;
			height: 48px;
			width: 48px;
			min-width: 48px;
			min-height: 48px;
	
			img {
				width: 20px;
				height: 20px;
				margin: auto;
				display: block;
				// Black and white and only white
				filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(180deg) brightness(1000%) contrast(100%);
			}
	
			.mybot-timer {
				font-size: 11px;
			}
	
			&:hover {
				filter: brightness(1.2);
			}
		}
	
		button[disabled] {
			cursor: not-allowed;
			filter: saturate(0%);
		}
	}

	$scale: 0.8;

	.mybot-footer {
		display: flex;
		align-items: center;
		border-top: 0.5px solid rgba(0, 0, 0, 0.15);
		padding: calc(var(--mybot-spacing) / 2) var(--mybot-spacing);

		.mybot-tools {
			margin-right: calc(var(--mybot-spacing) / 2);
			height: 38px;

			.mybot-file-upload {
				display: inline-block;
			}

			.mybot-file-upload-icon {
				display: inline-block;
				$icon-size: 32px;
				$ideal-size: 24px;
				background: url('icons/white-icons.svg');
				background-size: 500%; // 5 icons in the row
				background-position: -0 * $icon-size -3 * $icon-size;
				width: $icon-size;
				height: $icon-size;
				margin-top: calc(var(--mybot-spacing) / 2);
				z-index: 100;
				transform: scale($scale);
				transform-origin: 0 0;

				@include file-upload-icon-sprites;
			}
		}

		.mybot-compliance {
			opacity: 0.50;
			font-size: 11px;
			line-height: 11px;
			color: var(--mybot-fontColor);
			text-align: left;
			padding: calc(var(--mybot-spacing) / 2) 0;
		}

	}

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

		img {
			width: 100%;
		}
	}

	&.mybot-window {
		filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.1));

		.mybot-input-submit {
			margin-right: -36px;
			margin-left: 0px;
		}

		@media (max-width: 760px) {
			.mybot-input-submit {
				margin-right: inherit;
				border-radius: 0;
			}
		}

		&.mybot-fullscreen {
			.mybot-input-submit {
				margin-right: inherit;
			}
		}
	}

	&.mybot-form-container {
		padding: var(--mybot-spacing);
		font-size: var(--mybot-fontSize);
		color: var(--mybot-fontColor);
		background: var(--mybot-backgroundPrimaryColor);
		border-radius: var(--mybot-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(--mybot-spacing) * 2 / 3) var(--mybot-spacing);
				border: 0;
				width: 100%;
				border-radius: var(--mybot-borderRadius);
				font-size: var(--mybot-fontSize);
				background: var(--mybot-backgroundAiColor) !important;
				color: var(--mybot-fontColor);
			}
	
			select {
				padding: calc(var(--mybot-spacing) * 2 / 3) var(--mybot-spacing);
				border: 0;
				width: 100%;
				border-radius: var(--mybot-borderRadius);
				font-size: var(--mybot-fontSize);
				background: var(--mybot-backgroundPrimaryColor);
				color: var(--mybot-fontColor);
			}
	
			textarea {
				padding: calc(var(--mybot-spacing) * 2 / 3) var(--mybot-spacing);
				border: 0;
				width: 100%;
				border-radius: var(--mybot-borderRadius);
				font-family: inherit;
				font-size: var(--mybot-fontSize);
				background: var(--mybot-backgroundPrimaryColor);
				color: var(--mybot-fontColor);
			}
	
			input[disabled], select[disabled], textarea[disabled] {
				opacity: 0.25;
			}
		}
	
		.mybot-form-submit, .mybot-form-reset {
	
			button {
				height: 45px;
				background: none;
				width: 100%;
				color: white;
				font-size: var(--mybot-fontSize);
				background: var(--mybot-backgroundUserColor);
				border: 1px solid var(--mybot-backgroundPrimaryColor);
				border-radius: var(--mybot-borderRadius);
				cursor: pointer;
				transition: all 0.2s ease-out;
				position: relative;

				&:hover {
					filter: brightness(1.2);
				}
			}
	
			button[disabled] {
				span {
					opacity: 0.25;
				}
	
				&:hover {
					filter: brightness(1);
					cursor: not-allowed;
				}
			}
	
			&.mybot-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: white;
						border-radius: 50%;
						animation: mybot-button-spinner 1s ease infinite;
					}
				}
			}
		}
	
		.mybot-form-output-container {
			
			.mybot-form-output {
				font-size: var(--mybot-fontSize);
				position: relative;
				margin-top: var(--mybot-spacing);
				padding: var(--mybot-spacing);
				border: 1px solid var(--mybot-backgroundPrimaryColor);
	
				&.mybot-error {
					background: var(--mybot-errorBackgroundColor);
					color: var(--mybot-errorFontColor);
				}

				& > * {
					color: var(--mybot-fontColor) !important;
				}
	
				& > *: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;
					}
				}
			}
	
			&.mybot-has-content {
				display: block;
			}
		}
	
		.wp-block-columns {
			margin: 0;
		}
	}
}

// Discussions
.mybot-timeless-theme.mybot-discussions {
	border-radius: var(--mybot-borderRadius);
	background: var(--mybot-conversationsBackgroundColor);
	color: var(--mybot-backgroundPrimaryColor);
	overflow: hidden;

	* {
		box-sizing: border-box;
	}

	.mybot-discussion {
		display: flex;
		gap: 5px;
		padding-left: calc(var(--mybot-spacing) / 2);
		padding-right: calc(var(--mybot-spacing) / 2);
		padding-bottom: calc(var(--mybot-spacing) / 2);
		color: var(--mybot-conversationsTextColor);
		opacity: 0.65;
		justify-content: space-between;
		align-items: center;

		.mybot-discussion-title {
			flex: auto;
			padding: 5px;
		}

		.mybot-discussion-actions {
			display: flex;
			gap: 1px;
	
			.mybot-icon {
				width: 30px;
				height: 30px;
				background: var(--mybot-iconTextBackgroundColor);
				color: var(--mybot-iconTextColor);
				border-radius: 50%;
				cursor: pointer;
				transition: all 0.2s ease-out;
				display: flex;
				align-items: center;
				justify-content: center;
	
				&:hover {
					color: white;
					background: blue;
	
					&.mybot-danger {
						background: red;
					}
				}
			}
		}

		&.mybot-active, &:hover {
			cursor: pointer;

			.mybot-discussion-title {
				color: var(--mybot-backgroundPrimaryColor);
				background: var(--mybot-backgroundHeaderColor);
				border-radius: var(--mybot-borderRadius);
				opacity: 1;
			}
		}

		&:first-child {
			margin-top: calc(var(--mybot-spacing) / 2);
		}
	}

	.mybot-header {
		background: var(--mybot-backgroundAiSecondaryColor);
		padding: var(--mybot-spacing);
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.mybot-content {
		background: var(--mybot-conversationsBackgroundColor);
		list-style: none;
		padding: 0;
		margin: 0;
	}

	button {
		margin-left: 0;
	}
}

// Common
.mybot-timeless-theme {
	@include common-styles;
	@include code-light;
	@include reply-actions;
	@include realtime;
}

// Common Overrides
.mybot-timeless-theme {

	.mybot-realtime {

		.mybot-visualizer {

			hr {
				border: 1px solid var(--mybot-backgroundAiSecondaryColor);
			}

			.mybot-animation {
				background: var(--mybot-backgroundAiSecondaryColor);
			}
		}

		.mybot-controls {
			button {
				color: var(--mybot-backgroundPrimaryColor);
				background: var(--mybot-backgroundUserColor);

				&:hover {
					color: var(--mybot-backgroundPrimaryColor) !important;
					background: var(--mybot-backgroundUserColor) !important;
					opacity: 0.8;
				}

				&[disabled] {
					color: var(--mybot-backgroundPrimaryColor) !important;
					background: var(--mybot-backgroundUserColor) !important;
					opacity: 0.5;
				}
			}
		}
	}

	.mybot-reply-actions {
		top: 5px;

		.mybot-copy-button {
			padding-top: 4px;

			&:hover {
				fill: var(--mybot-backgroundPrimaryColor);
				background: var(--mybot-backgroundUserColor);
			}
		}
	}
}

// Mobile
.mybot-timeless-theme {

	@media (max-width: 760px) {

		&.mybot-window {
			width: calc(100% - 40px);
			z-index: 9999999999;

			&.mybot-open .mybot-content {
				height: calc(100vh - var(--mybot-headerHeight));
			}
		}

		.mybot-input {
			flex-direction: column;

			.mybot-input-text {
				width: 100%;
				margin-bottom: 10px;
			}

			.mybot-input-submit {
				width: 100%;
				border-radius: var(--mybot-borderRadius);
				margin-left: 0;
				height: 24px;
				min-height: 36px;

				img {
					width: 16px;
					height: 16px;
				}
			}
		}

	}
	
}