/*
 * Yuujou - allegati PDF: stile della "pillola" (2026-07-05, Claude).
 * NON fa parte del CMS Chameleon. Caricato su tutto il sito da _header.html
 * insieme a js/yj_attach_pdf.js. Usato dalla chat (_pp_messages.html) e dal
 * compositore del feed (_wall_content.html).
 * Per rimuovere la feature: vedi _include/current/imattachment.class.php.
 */

/* pulsante spilletta nei compositori feed/commenti: CLONE VISIVO della camera
   (.comment_upload_img di style.css, stessi valori) ma con CLASSE PROPRIA.
   NON usare la classe nativa comment_upload_img: il JS del CMS trova la camera
   con find('.comment_upload_img') e prende il PRIMO elemento — un clone con la
   classe nativa gli ruberebbe il posto e romperebbe i post/commenti con foto.
   La geometria e' su ">.fa" (figlio diretto) cosi' vale anche durante l'upload,
   quando la graffetta diventa spinner; le icone del pallino non sono toccate. */
.yj_attach_btn {
	min-width: 38px;
	overflow: hidden;
	display: inline-block;
	position: relative;
	top: 0;
	right: 0;
	height: 44px;
	background-size: contain;
}
.yj_attach_btn > .fa {
	display: inline-block;
	margin: auto;
	font-size: 22px;
	width: 38px;
	height: 44px;
	color: #405f78;
	transition: color .4s ease-in-out;
	position: relative;
	cursor: pointer;
}
.yj_attach_btn > .fa:before {
	position: relative;
	top: 10px;
	left: 10px;
}
.yj_attach_btn.disabled > .fa {
	color: #9f9f9f;
	cursor: pointer; /* qui il click apre il picker (input file sovrapposto) */
}
.yj_attach_btn.disabled:hover > .fa { color: rgb(128, 125, 125); }
.yj_attach_btn input[type="file"] {
	font-size: 40px;
	opacity: 0;
	position: absolute;
	top: -12px;
	left: -330px;
	cursor: pointer;
	width: 700px;
	display: none;
}
.ios_app .yj_attach_btn input[type="file"] {
	left: -20px;
	width: 100px;
}
.yj_attach_btn.disabled input[type="file"] { display: block; }
.yj_attach_btn .count_upload_image {
	position: absolute;
	bottom: 7px;
	right: 16px;
	background-color: #1784fb;
	border-radius: 50%;
	box-sizing: border-box;
	font-size: 9px;
	line-height: 14px;
	width: 15px;
	height: 15px;
	color: #fff;
	text-align: center;
	opacity: 1;
	transition: all .3s, opacity .3s linear;
	cursor: pointer;
}
.yj_attach_btn > .fa:hover ~ .count_upload_image,
.yj_attach_btn > .fa ~ .count_upload_image:hover { background-color: #046cdd; }
.yj_attach_btn .count_upload_image .fa {
	position: absolute;
	left: 2px;
	top: 2px;
	width: 11px;
	height: 11px;
}
.ios_app .yj_attach_btn .count_upload_image .fa,
.ios .yj_attach_btn .count_upload_image .fa { top: 3px; }
.yj_attach_btn .count_upload_image .fa.fa-times {
	visibility: hidden;
	opacity: 0;
	transition: opacity .3s linear, visibility 0s .3s;
}
.yj_attach_btn > .fa:hover ~ .count_upload_image .fa.fa-times,
.yj_attach_btn > .fa ~ .count_upload_image:hover .fa.fa-times {
	visibility: visible;
	opacity: 1;
	transition: all .25s, opacity .25s linear, visibility 0s;
}
.yj_attach_btn > .fa:hover ~ .count_upload_image .fa.fa-check,
.yj_attach_btn > .fa ~ .count_upload_image:hover .fa.fa-check {
	visibility: hidden;
	opacity: 0;
	transition: opacity .25s linear, visibility 0s .25s;
}
.yj_attach_btn.disabled .count_upload_image { opacity: 0; }

/* pillola PDF: stessa altezza (20px) sia nel campo che nel contenuto pubblicato */
a.yj_attach_pdf, span.yj_attach_pdf {
	display: inline-flex; align-items: center; gap: 5px;
	height: 20px; box-sizing: border-box; line-height: 18px;
	padding: 0 8px; margin: 2px 0;
	border: 1px solid #b3d7fe; border-radius: 15px; background: #eaf4ff;
	color: #333 !important; text-decoration: none !important;
	font-size: 13px; max-width: 240px;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
	vertical-align: middle;
}
.yj_attach_pdf .fa-paperclip { color: #1784fb; }

/* pillola "in attesa" nel campo di composizione: STESSA geometria del player
   audio in attesa (20px di altezza, float, 3px di margine), che per costruzione
   non fa mai crescere il campo. ATTENZIONE: niente id del campo nel selettore!
   L'autosize del CMS misura una COPIA del contenuto in un div in fondo al body
   (jquery.autosize_editable.js) dove una regola legata all'id del campo non si
   applicherebbe: la pillola vi risulterebbe alta e il campo si gonfierebbe. */
span.yj_attach_pdf.yj_attach_pending {
	cursor: default;
	float: left;
	margin: 3px 6px 0 0;
}
.yj_attach_pending .yj_attach_remove {
	cursor: pointer;
	color: #999;
	margin-left: 3px;
}
.yj_attach_pending .yj_attach_remove:hover { color: #d9534f; }