/* ============================================================
   MAIA - asistent virtual pentru suport WinMENTOR
   Stilurile butonului din coltul dreapta-jos, ale panoului si ale
   Dialogflow Messenger-ului. Paleta si variabilele --df-messenger-*
   sunt cele din demo (/Maia/fragmente/).
   Marcajul si logica: public/js/maia.js
   ============================================================ */

/* ============================================================
   PALETA WinMENTOR - aceeasi ca in fragmentele din /Maia
   ============================================================ */

#maia-launcher,
#maia-panel {
	--wm-nav:      #2F2F33;
	--wm-panel:    #4A4A52;
	--wm-row:      #56565F;
	--wm-user:     #1C6E96;
	--wm-field:    #5C5C66;
	--wm-blue:     #3FB3E8;
	--wm-gold:     #FFC20E;
	--wm-text:     #EDEDED;
	--wm-text-dim: #BFBFC6;
}

/* ============================================================
   BUTONUL DIN COLTUL DREAPTA-JOS
   ============================================================ */

#maia-launcher {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 100000;

	width: 56px;
	height: 56px;
	padding: 0;

	display: flex;
	align-items: center;
	justify-content: center;

	background: var(--wm-nav);
	color: var(--wm-blue);

	border: 1px solid #6A6A73;
	border-radius: 50%;

	cursor: pointer;
	box-shadow: 0 4px 14px rgba(0, 0, 0, .35);

	transition: color .2s, border-color .2s, transform .15s;
}

#maia-launcher:hover {
	color: var(--wm-gold);
	border-color: var(--wm-blue);
	transform: translateY(-2px);
}

.maia-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* ============================================================
   PANOUL
   ============================================================ */

#maia-panel {

	/* Pe tot ecranul, ca in demo (.chat-wrapper din /Maia/fragmente/).
	   Pentru varianta „panou in colt", inlocuieste geometria de mai jos cu:
	       right: 20px;  bottom: 20px;
	       width: 420px; height: 640px;
	       max-width: calc(100vw - 40px);
	       max-height: calc(100vh - 40px);
	       border: 1px solid #6A6A73;
	       border-radius: 12px;
	       box-shadow: 0 10px 34px rgba(0, 0, 0, .45);
	   ...si scoate top / left. */

	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 100001;

	background: var(--wm-nav);
	color: var(--wm-text);

	border: 0;
	border-radius: 0;

	overflow: hidden;

	font-family: 'Roboto', system-ui, sans-serif;
}

.maia-ascuns {
	display: none !important;
}

#maia-actiuni {
	position: absolute;
	top: 11px;
	right: 12px;
	z-index: 10;

	display: flex;
	gap: 6px;
}

#maia-actiuni button {
	width: 28px;
	height: 28px;
	padding: 0;

	background-color: transparent;
	color: var(--wm-blue);

	border: 1px solid #6A6A73;
	border-radius: 6px;

	font-family: inherit;
	font-size: 14px;
	line-height: 1;

	cursor: pointer;

	transition: background-color .2s, border-color .2s, color .2s;
}

#maia-actiuni button:hover {
	background-color: #3C3C42;
	border-color: var(--wm-blue);
	color: var(--wm-gold);
}

/* ============================================================
   PASUL 1 - alegerea produsului (cardurile din demo)
   ============================================================ */

#maia-alegere {
	padding: 56px 22px 22px;
}

#maia-alegere h2 {
	margin: 0 0 24px;
	font-size: 16px;
	font-weight: 500;
	color: var(--wm-text);
}

.maia-lista {
	display: grid;
	gap: 10px;
}

.maia-card {
	display: grid;
	grid-template-columns: 100px 1fr;   /* nu 52, ca sa incapa „WMC-WME" */
	gap: 0 16px;
	align-items: center;

	width: 100%;
	padding: 19px 18px;
	text-align: left;

	background: var(--wm-panel);
	color: inherit;

	border: 1px solid transparent;
	border-radius: 10px;

	font-family: inherit;
	cursor: pointer;

	transition: background-color .15s, border-color .15s;
}

.maia-card:hover {
	background: var(--wm-row);
	border-color: var(--wm-blue);
}

.maia-cod {
	font-size: 15px;
	font-weight: 700;
	color: var(--wm-blue);
	text-align: center;
	letter-spacing: .5px;
}

.maia-card:hover .maia-cod {
	color: var(--wm-gold);
}

.maia-nume {
	font-size: 15px;
	font-weight: 500;
}

/* ============================================================
   PASUL 2 - chat-ul
   ============================================================ */

#maia-chat {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}

.maia-eroare {
	margin: 0;
	padding: 60px 22px 22px;
	font-size: 14px;
	line-height: 1.55;
	color: var(--wm-text-dim);
}

#maia-panel df-messenger {

	width: 100%;
	height: 100%;

	border: none;
	border-radius: 0;
	box-shadow: none;

	/* borduri interne stinse */
	--df-messenger-chat-border: none;
	--df-messenger-chat-border-radius: 0;
	--df-messenger-default-chat-border-radius: 0;
	--df-messenger-chat-messagelist-border: none;
	--df-messenger-default-border: none;
	--df-messenger-default-border-color: transparent;
	--df-messenger-titlebar-border-bottom: none;
	--df-messenger-input-border: none;
	--df-messenger-input-border-top: none;
	--df-messenger-input-border-bottom: none;

	/* tipografie */
	--df-messenger-font-family: 'Roboto', sans-serif;
	--df-messenger-message-font-family: 'Roboto', sans-serif;
	--df-messenger-input-font-family: 'Roboto', sans-serif;
	--df-messenger-titlebar-title-font-family: 'Roboto', sans-serif;
	--df-messenger-message-font-size: 14px;
	--df-messenger-message-line-height: 1.55;

	/* bara de titlu - lasam loc la dreapta pentru butoanele noastre */
	--df-messenger-titlebar-background: var(--wm-nav);
	--df-messenger-titlebar-font-color: var(--wm-text);
	--df-messenger-titlebar-title-font-size: 14px;
	--df-messenger-titlebar-title-font-weight: 500;
	--df-messenger-titlebar-padding: 14px 116px 14px 18px;

	/* zona de chat */
	--df-messenger-chat-background: var(--wm-panel);
	--df-messenger-font-color: var(--wm-text);

	/* mesaje */
	--df-messenger-message-bot-background: var(--wm-row);
	--df-messenger-message-bot-font-color: var(--wm-text);
	--df-messenger-message-user-background: var(--wm-user);
	--df-messenger-message-user-font-color: #ffffff;
	--df-messenger-message-border-radius: 10px;
	--df-messenger-message-padding: 12px 14px;
	--df-messenger-message-border: none;

	/* indicator scriere */
	--df-messenger-message-bot-writing-background: var(--wm-row);
	--df-messenger-message-bot-writing-font-color: var(--wm-text-dim);

	/* link-uri */
	--df-messenger-default-link-font-color: var(--wm-blue);

	/* bara de input */
	--df-messenger-input-background: var(--wm-nav);
	--df-messenger-input-box-background: var(--wm-field);
	--df-messenger-input-box-color: var(--wm-field);
	--df-messenger-input-box-border: 1px solid #6E6E78;
	--df-messenger-input-box-focus-border: 1px solid var(--wm-blue);
	--df-messenger-input-box-border-radius: 8px;
	--df-messenger-input-font-color: var(--wm-text);
	--df-messenger-input-placeholder-font-color: var(--wm-text-dim);
	--df-messenger-input-font-size: 14px;

	/* buton trimitere */
	--df-messenger-send-icon-color: var(--wm-blue);
	--df-messenger-send-icon-color-active: var(--wm-gold);
	--df-messenger-send-icon-color-hover: var(--wm-gold);
	--df-messenger-send-icon-color-disabled: #8A8A93;

	/* jump to bottom */
	--df-messenger-chat-scroll-button-background: var(--wm-nav);
	--df-messenger-chat-scroll-button-font-color: var(--wm-blue);
	--df-messenger-chat-scroll-button-border: 1px solid #6A6A73;

	/* butoane actiune */
	--df-messenger-chat-function-call-button-background: var(--wm-row);
	--df-messenger-chat-function-call-button-font-color: var(--wm-blue);
	--df-messenger-chat-function-call-button-box-shadow: none;

	/* erori */
	--df-messenger-message-error-background: var(--wm-row);
	--df-messenger-message-error-font-color: var(--wm-text);
	--df-messenger-input-error-background: var(--wm-row);
	--df-messenger-input-error-color: var(--wm-text);

	/* accent general */
	--df-messenger-primary-color: var(--wm-blue);
	--df-messenger-focus-color: var(--wm-blue);
	--df-messenger-icon-font-color: var(--wm-text);
}