/* coachingINchat — foglio di stile del riquadro.
   Volutamente contenuto: la pagina intorno è quella del sito di Michela. */

.cic {
	--cic-brand: #742048;
	--cic-scuro: #5a1938;
	--cic-chiaro: #f6edf2;
	--cic-mezzo: #e8d5df;
	--cic-testo: #2b2b2b;
	--cic-tenue: #6b6b6b;
	--cic-bordo: #e4e4e4;
	/* Non più solo 680px: mai più larga dello schermo, qualunque cosa dica la pagina
	   che ci sta intorno. Se il tema ha una colonna da 1200px su un telefono da 390,
	   senza questo il riquadro le crede e finisce fuori dal bordo. */
	max-width: min(680px, calc(100vw - 24px));
	margin: 0 auto;
	/* Il riquadro si misura da solo invece di guardare la finestra del browser: così si
	   dispone bene anche se la pagina intorno sfora in larghezza o se un domani lo metti
	   dentro una colonna stretta. È la differenza fra "quanto è largo lo schermo" e
	   "quanto spazio ho davvero". */
	container-type: inline-size;
	container-name: cic;
	color: var(--cic-testo);
	line-height: 1.55;
	font-size: 1rem;
}
.cic *, .cic *::before, .cic *::after { box-sizing: border-box; }

.cic-fascia {
	background: linear-gradient(120deg, var(--cic-brand) 0%, var(--cic-scuro) 100%);
	color: #fff; padding: 24px 20px; border-radius: 12px;
	display: flex; align-items: center; gap: 14px; margin-bottom: 20px;
}
.cic-titolo { margin: 0; font-size: 1.45rem; font-weight: 300; letter-spacing: .06em; }
.cic-titolo strong { font-weight: 700; }
.cic-titolo em { font-weight: 300; font-style: italic; letter-spacing: .02em; }
.cic-claim { margin: 2px 0 0; font-size: .85rem; opacity: .85; font-weight: 300; }

.cic-sottotitolo { color: var(--cic-tenue); font-size: .95rem; margin: 0 0 14px; }

.cic-disclaimer {
	border: 1px solid var(--cic-mezzo); border-left: 4px solid var(--cic-brand);
	border-radius: 10px; padding: 10px 14px; font-size: .88rem;
	color: var(--cic-tenue); background: #fff; margin-bottom: 22px;
}
.cic-disclaimer summary { cursor: pointer; color: var(--cic-brand); font-weight: 600; }
.cic-disclaimer p { margin: 10px 0 0; }

.cic-ingresso { background: var(--cic-chiaro); border-radius: 14px; padding: 24px; }
.cic-ingresso h3 { color: var(--cic-brand); font-size: 1.2rem; margin: 0 0 6px; font-weight: 600; }
.cic-calma { margin: 0 0 14px; font-size: .92rem; color: var(--cic-tenue); font-style: italic; }

.cic-riga { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-start; }
.cic input[type=text], .cic textarea {
	/* flex-basis con min-width a zero: senza questo il campo si rifiuta di restringersi
	   e su telefono la riga sfonda il bordo portandosi fuori metà pulsante */
	flex: 1 1 200px; min-width: 0; max-width: 100%;
	font: inherit; font-size: 1rem;
	padding: 12px 14px; border: 1.5px solid var(--cic-bordo);
	border-radius: 10px; background: #fff; color: var(--cic-testo); resize: vertical;
}
.cic input[type=text]:focus, .cic textarea:focus { outline: none; border-color: var(--cic-brand); }

.cic-btn {
	background: var(--cic-brand); color: #fff; border: none; border-radius: 10px;
	font: inherit; font-size: .98rem; font-weight: 600; padding: 12px 24px;
	cursor: pointer; white-space: nowrap;
}
.cic-btn:hover { background: var(--cic-scuro); }
.cic-btn:disabled { opacity: .45; cursor: default; }

.cic-avviso { color: #a8341f; font-size: .88rem; margin: 10px 0 0; min-height: 1.2em; }

#cic-messaggi { display: flex; flex-direction: column; gap: 12px; margin-bottom: 18px; }
.cic-msg {
	max-width: 85%; padding: 12px 16px; border-radius: 14px; font-size: .96rem;
	white-space: pre-wrap; overflow-wrap: break-word; word-break: break-word;
}
.cic-msg.coach { background: var(--cic-chiaro); border: 1px solid var(--cic-mezzo); align-self: flex-start; border-bottom-left-radius: 4px; }
.cic-msg.me { background: var(--cic-brand); color: #fff; align-self: flex-end; border-bottom-right-radius: 4px; }
.cic-msg.attesa { color: var(--cic-tenue); background: #fafafa; border: 1px dashed var(--cic-bordo); font-style: italic; align-self: flex-start; }

.cic-nascosto { display: none; }

/* fine conversazione: il pulsante per scaricare il PDF */
.cic-scarica { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin: 4px 0 8px; }
.cic-scarica .cic-btn { white-space: normal; text-align: center; }
.cic-scarica-esito { font-size: .85rem; color: var(--cic-tenue); margin: 0; min-height: 1.2em; }
@container cic (max-width: 520px) { .cic-scarica .cic-btn { width: 100%; } }


/* ---- telefono ----
   Sotto i 600 pixel il pulsante va sotto al campo a tutta larghezza: su una riga sola
   non ci sta e finirebbe tagliato. I campi restano a 16px perché iOS ingrandisce da
   solo la pagina quando si tocca un campo con testo più piccolo, e non si torna più
   indietro senza pizzicare lo schermo. */
@media (max-width: 600px) {
	.cic { font-size: 1rem; }
	/* Niente centratura sul telefono: se la colonna del tema è più larga dello schermo,
	   centrarsi dentro quella vuol dire finire fuori dal bordo destro. Appoggiato a
	   sinistra si vede sempre, e su una pagina normale non cambia niente. */
	.cic { margin-inline: 0; }
	.cic-riga { gap: 8px; }
	.cic-riga .cic-btn { width: 100%; }
	.cic input[type=text], .cic textarea { flex: 1 1 100%; font-size: 16px; }
	.cic-ingresso { padding: 18px 16px; border-radius: 12px; }
	.cic-disclaimer { padding: 10px 12px; }
	.cic-msg { max-width: 92%; padding: 11px 14px; }
	.cic-fascia { padding: 18px 16px; gap: 12px; }
	.cic-titolo { font-size: 1.2rem; }
	.cic-claim { font-size: .8rem; }
}

/* schermi molto stretti: il logo va sopra al testo invece che accanto */
@media (max-width: 380px) {
	.cic-fascia { flex-direction: column; align-items: flex-start; }
}


/* ---- lo stesso, ma deciso dallo spazio del riquadro e non da quello della finestra.
        Vale anche quando la pagina intorno è più larga dello schermo. ---- */
@container cic (max-width: 520px) {
	.cic-riga { gap: 8px; }
	.cic-riga .cic-btn { width: 100%; }
	.cic input[type=text], .cic textarea { flex: 1 1 100%; font-size: 16px; }
	.cic-ingresso { padding: 18px 16px; border-radius: 12px; }
	.cic-disclaimer { padding: 10px 12px; }
	.cic-msg { max-width: 92%; padding: 11px 14px; }
	.cic-fascia { padding: 18px 16px; gap: 12px; }
	.cic-titolo { font-size: 1.2rem; }
	.cic-claim { font-size: .8rem; }
}
@container cic (max-width: 340px) {
	.cic-fascia { flex-direction: column; align-items: flex-start; }
}

/* ---- 2.2 ---- */

/* il campo trappola: fuori dallo schermo, non con display:none (alcuni programmi
   automatici saltano apposta i campi nascosti in quel modo) */
.cic-hp { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.cic-contatore { font-size: .82rem; color: var(--cic-tenue); margin: 0 0 12px; }

/* conversazioni finite: un riquadro separato dalla chat, sobrio */
.cic-rinnovo {
	border: 1px solid var(--cic-mezzo); border-left: 4px solid var(--cic-brand);
	background: #fff; border-radius: 10px; padding: 12px 16px; margin: 12px 0 8px;
	font-size: .92rem; max-width: 100%;
}
.cic-rinnovo-testo { margin: 0; }
.cic-rinnovo a { color: var(--cic-brand); font-weight: 600; text-decoration: underline; }

.cic-ultima { font-size: .85rem; color: var(--cic-testo); background: var(--cic-chiaro); border-radius: 8px; padding: 8px 12px; margin: -4px 0 14px; }
.cic-ultima a { color: var(--cic-brand); font-weight: 600; text-decoration: underline; }

/* "Chiudi la conversazione": un link discreto, non un pulsante che inviti a scappare */
.cic-chiudi { margin-top: 10px; }
.cic-link { background: none; border: none; padding: 4px 0; font: inherit; font-size: .85rem; color: var(--cic-tenue); text-decoration: underline; cursor: pointer; }
.cic-link:hover { color: var(--cic-brand); }
.cic-conferma { border: 1px solid var(--cic-mezzo); border-radius: 10px; padding: 12px 14px; background: #fff; font-size: .9rem; }
.cic-conferma p { margin: 0 0 10px; }
.cic-conferma .cic-btn { padding: 9px 18px; font-size: .92rem; margin: 0 8px 6px 0; }
.cic-btn-chiaro { background: #fff; color: var(--cic-brand); border: 1.5px solid var(--cic-brand); }
.cic-btn-chiaro:hover { background: var(--cic-chiaro); }
@container cic (max-width: 520px) { .cic-conferma .cic-btn { width: 100%; margin-right: 0; } }