/* SPINNER DIMENSIONS OVERRIDE - DECOMMENT TO USE IT */
/*.sk-cube-grid {
	width: 15px;
	height: 15px;
	margin: 1px auto;
}*/

.chat_item.answer_item {
    overflow-y: auto;
}

.user_icon {
	width: 50px;
	height: 50px;
	margin-right: 15px;
	background-repeat: no-repeat;
	background-size: 50px 50px;
}

.ai_icon {
	width: 60px;
	height: 60px;
	margin-left: 15px;
	background-repeat: no-repeat;
	background-size: 60px 60px;
}

/* BUTTONS ICONS SVG */
.container_input_AI .right_button.send .icon {
	background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2720px%27%20height%3D%2720px%27%20viewBox%3D%270%200%2048%2048%27%20fill%3D%27none%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%0A%09%09%09%09%09%09%09%3Cpath%20d%3D%27M48%200H0V48H48V0Z%27%20fill%3D%27white%27%20fill-opacity%3D%270.01%27%2F%3E%0A%09%09%09%09%09%09%09%3Cpath%20d%3D%27M43%205L29.7%2043L22.1%2025.9L5%2018.3L43%205Z%27%20stroke%3D%27%23000000%27%20stroke-width%3D%274%27%20stroke-linejoin%3D%27round%27%2F%3E%0A%09%09%09%09%09%09%09%3Cpath%20d%3D%27M43.0001%205L22.1001%2025.9%27%20stroke%3D%27%23000000%27%20stroke-width%3D%274%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%2F%3E%0A%09%09%09%09%09%09%3C%2Fsvg%3E");
}
.container_input_AI .right_button.import .icon {
	background-image: url("data:image/svg+xml,%3Csvg%20fill%3D%22%23000000%22%20width%3D%22800px%22%20height%3D%22800px%22%20viewBox%3D%220%200%2024%2024%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M8.71%2C7.71%2C11%2C5.41V15a1%2C1%2C0%2C0%2C0%2C2%2C0V5.41l2.29%2C2.3a1%2C1%2C0%2C0%2C0%2C1.42%2C0%2C1%2C1%2C0%2C0%2C0%2C0-1.42l-4-4a1%2C1%2C0%2C0%2C0-.33-.21%2C1%2C1%2C0%2C0%2C0-.76%2C0%2C1%2C1%2C0%2C0%2C0-.33.21l-4%2C4A1%2C1%2C0%2C1%2C0%2C8.71%2C7.71ZM21%2C12a1%2C1%2C0%2C0%2C0-1%2C1v6a1%2C1%2C0%2C0%2C1-1%2C1H5a1%2C1%2C0%2C0%2C1-1-1V13a1%2C1%2C0%2C0%2C0-2%2C0v6a3%2C3%2C0%2C0%2C0%2C3%2C3H19a3%2C3%2C0%2C0%2C0%2C3-3V13A1%2C1%2C0%2C0%2C0%2C21%2C12Z%22%2F%3E%3C%2Fsvg%3E");
}
.container_input_AI .right_button.stop .icon {
	background-image: url("data:image/svg+xml,%3Csvg%20fill%3D%27%23000000%27%20width%3D%2720px%27%20height%3D%2720px%27%20viewBox%3D%270%200%2016%2016%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%0A%3Cg%3E%0A%3Cpath%20d%3D%27M13%2C3.05A7%2C7%2C0%2C1%2C0%2C13%2C13%2C7%2C7%2C0%2C0%2C0%2C13%2C3.05ZM12%2C12A5.6%2C5.6%2C0%2C0%2C1%2C4%2C12%2C5.61%2C5.61%2C0%2C0%2C1%2C4%2C4%2C5.6%2C5.6%2C0%2C0%2C1%2C12%2C4%2C5.61%2C5.61%2C0%2C0%2C1%2C12%2C12ZM10.65%2C4.08%2C8%2C6.73%2C5.35%2C4.08%2C4.08%2C5.35%2C6.73%2C8%2C4.08%2C10.65l1.27%2C1.27L8%2C9.27l2.65%2C2.65%2C1.27-1.27L9.27%2C8l2.65-2.65Z%27%2F%3E%0A%3C%2Fg%3E%0A%3C%2Fsvg%3E%0A");
}
/* WHITE ICONS - COMMENT ABOVE BUTTONS ICONS AND DECOMMENT THESE */
/*.container_input_AI .right_button.send .icon {
	background-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0A%3Csvg%20viewBox%3D%220%200%2048%2048%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%3Cpath%20d%3D%22M48%200H0V48H48V0Z%22%20fill%3D%22white%22%20fill-opacity%3D%220.01%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M43%205L29.7%2043L22.1%2025.9L5%2018.3L43%205Z%22%20stroke-width%3D%224%22%20stroke-linejoin%3D%22round%22%20style%3D%22stroke%3A%20rgb%28255%2C%20255%2C%20255%29%3B%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M43.0001%205L22.1001%2025.9%22%20stroke-width%3D%224%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20style%3D%22stroke%3A%20rgb%28255%2C%20255%2C%20255%29%3B%22%2F%3E%0A%3C%2Fsvg%3E") !important;
}
.container_input_AI .right_button.stop .icon {
	background-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0A%3Csvg%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22%23000000%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%3Cg%3E%0A%20%20%20%20%3Cpath%20d%3D%22M13%2C3.05A7%2C7%2C0%2C1%2C0%2C13%2C13%2C7%2C7%2C0%2C0%2C0%2C13%2C3.05ZM12%2C12A5.6%2C5.6%2C0%2C0%2C1%2C4%2C12%2C5.61%2C5.61%2C0%2C0%2C1%2C4%2C4%2C5.6%2C5.6%2C0%2C0%2C1%2C12%2C4%2C5.61%2C5.61%2C0%2C0%2C1%2C12%2C12ZM10.65%2C4.08%2C8%2C6.73%2C5.35%2C4.08%2C4.08%2C5.35%2C6.73%2C8%2C4.08%2C10.65l1.27%2C1.27L8%2C9.27l2.65%2C2.65%2C1.27-1.27L9.27%2C8l2.65-2.65Z%22%20style%3D%22fill%3A%20rgb%28255%2C%20255%2C%20255%29%3B%22%2F%3E%0A%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E") !important;
}*/

.attachments-container {
	display: flex;
	gap: 10px;
	margin-right:auto;
}

.attachment-item {
	background-color: #f0f0f0;
	border: 1px solid #ccc;
	border-radius: 10px;
	padding: 10px;
	display: flex;
	align-items: center;
	font-size: 0.9em;
	user-select: none;
}

.remove-attachment-btn {
	margin-left: 10px;
	background-color: #ff4d4d;
	color: white;
	border: none;
	border-radius: 5px;
	cursor: pointer;
	padding: 5px 10px;
}

.remove-attachment-btn:hover {
	background-color: #ff1a1a;
}


.realtime-call-container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: #f9f9f4;
	border-radius: 0px;
	padding: 20px 32px;
	width: 100%;
	box-sizing: border-box;
	height: 150px;
	box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.06);
}


.realtime-call-container strong {
	color: #4e562d;
	font-weight: 600;
}

#callTimer {
	margin-left: 8px;
	font-weight: normal;
	opacity: 0.8;
}

.buttons-container {
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: auto;
}

.button {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 15px;
	color: #4e562d;
	cursor: pointer;
	padding: 10px 14px;
	border-radius: 8px;
	background-color: #f0f2e5;
	transition: background-color 0.3s ease, transform 0.2s ease;
	border: none;
}

.button:hover {
	background-color: #e4e7d4;
	transform: translateY(-1px);
}

.mute-button,
.end-call-button {
	background: transparent;
	border: none;
	padding: 6px;
	border-radius: 8px;
	transition: background-color 0.2s ease;
}

.mute-button:hover {
	background-color: rgba(98, 108, 66, 0.1);
}

.end-call-button:hover {
	background-color: rgba(255, 0, 0, 0.1);
}

.end-call-button svg rect {
	fill: #ff4a4a;
	stroke: #ff4a4a;
}

.realtime-call-container > div:nth-child(2) {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background: radial-gradient(circle, #c0c69e 40%, transparent 50%);
	animation: pulse 1.5s infinite ease-in-out;
}

@keyframes pulse {
	0% {
		transform: scale(1);
		opacity: 0.8;
	}
	50% {
		transform: scale(1.1);
		opacity: 1;
	}
	100% {
		transform: scale(1);
		opacity: 0.8;
	}
}

/* si può cambiare l'icona che lampeggia in fase di ascolto, modificando il path */
.right_button.recording svg path {
d: path("M12 16c2.206 0 4-1.795 4-4v-6c0-2.206-1.794-4-4-4s-4 1.794-4 4v6c0 2.205 1.794 4 4 4zM19 12v-2c0-.552-.447-1-1-1s-1 .448-1 1v2c0 2.757-2.243 5-5 5s-5-2.243-5-5v-2c0-.552-.447-1-1-1s-1 .448-1 1v2c0 3.52 2.613 6.432 6 6.92v1.08h-3c-.553 0-1 .447-1 1s.447 1 1 1h8c.553 0 1-.447 1-1s-.447-1-1-1h-3v-1.08c3.387-.488 6-3.4 6-6.92z");
fill: red;
}








/* LAYOUT GENERALE */
.container_chat {
	min-height: 200px;
	background-color: #f8f9fa;
	border-radius: 8px;
	padding: 12px;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: space-between;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
	font-family: 'Segoe UI', sans-serif;
	color: #212529;
	position: relative;
}

.container_display {
	width: 100%;
	flex: 1;
	display: flex;
	flex-direction: row;
	gap: 12px;
	overflow: hidden;
	height: calc(100% - 52px);
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	padding: 12px;
	box-sizing: border-box;
}

/* TEXT AREA */
.container_text_AI,
.container_log_AI {
	flex: 1;
	border-radius: 6px;
	background-color: #dddddd;
	padding: 12px;
	overflow-y: auto;
	box-shadow: inset 0 0 0 1px #dee2e6;
}

/* SCROLLBAR ELEGANTE */
.container_text_AI::-webkit-scrollbar,
.container_log_AI::-webkit-scrollbar {
	width: 6px;
}
.container_text_AI::-webkit-scrollbar-thumb,
.container_log_AI::-webkit-scrollbar-thumb {
	background-color: #ced4da;
	border-radius: 3px;
}
.container_text_AI::-webkit-scrollbar-track,
.container_log_AI::-webkit-scrollbar-track {
	background: transparent;
}

/* AREA INPUT */
.container_input_AI {
	display: flex;
	flex-direction: row;
	align-items: flex-end;
	gap: 8px;
	width: 100%;
	margin-top: 16px;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 12px;
	max-height: 33%;
	overflow: hidden;
	box-sizing: border-box;
}

.input_chat_AI {
	flex: 1;
	padding: 10px 14px;
	font-size: 15px;
	border: 1px solid #ced4da;
	border-radius: 6px;
	outline: none;
	transition: border-color 0.2s ease;
	min-height: 17px;
	resize: none;
	overflow-y: hidden;
	line-height: 1.4;
	box-sizing: border-box;
}
.input_chat_AI:focus {
	border-color: #00af00;
}

/* BOTTONI */
.right_button,
.button_log_AI,
.button_change_session {
	padding: 8px 12px;
	border: none;
	border-radius: 6px;
	cursor: pointer;
	font-size: 14px;
	transition: background-color 0.2s ease, color 0.2s ease;

	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.right_button.send {
	background-color: #00af00;
	color: white;
}
.right_button.send:hover {
	background-color: #50a700;
}

.right_button.stop {
	background-color: #e03131;
	color: white;
}
.right_button.stop:hover {
	background-color: #c92a2a;
}

.button_log_AI {
	background-color: #6c757d;
	color: white;
}
.button_log_AI:hover {
	background-color: #5c636a;
}

.button_change_session {
	background-color: transparent;
	color: #00af00;
	border: 1px solid #00af00;
}
.button_change_session:hover {
	background-color: #00af00;
	color: white;
}

/* MESSAGGI */
.chat_item,
.log_item {
	padding: 10px 14px;
	margin-bottom: 10px;
	border-radius: 6px;
	font-size: 15px;
	line-height: 1.4;
	word-break: break-word;
}

.request_item {
	background-color: #81f56e;
	color: #000000;
	margin-left: auto;
	max-width: 75%;
	text-align: right;
}

.answer_item {
	background-color: #ffffff;
	color: #212529;
	margin-right: auto;
	max-width: 75%;
	text-align: left;
}

/* CONTENITORI MESSAGGI */
.request_item_container,
.answer_item_container {
	display: flex;
	align-items: flex-start;
	margin-top: 8px;
	gap: 8px; /* spazio tra messaggio e icona */
}
.request_item_container {
	flex-direction: row-reverse;
	justify-content: flex-end;
}

/* ICONS */
.icon {
	width: 20px;
	height: 20px;
	background-repeat: no-repeat;
	background-size: cover;
}

.hidden_container_input_AI {
  display: none !important;
}

.visible_container_input_AI {
  display: flex; /* o block, inline, ecc. */
}