/* === 2. AVATAR CARD STYLE === */
/* ——— Variabile ușor de ajustat ——— */
@pf-bg: #141414; /* fundal card */
@pf-border: #222; /* bordură card */
@pf-glow-1: rgba(255,102,0,.45); /* glow exterior */
@pf-glow-2: rgba(255,140,0,.25); /* glow larg */
@pf-brand: #ff6600; /* portocaliul PlayForge */
@pf-radius: 12px; /* rotunjiri card + avatar */
@pf-ava-w: 150px; /* lățime avatar în mesaje */
@pf-ava-h: 150px; /* înălțime avatar dreptunghi */
/* —— Cardul din stânga (coloana userului) —— */
.message-user {
background: @pf-bg;
border: 1px solid @pf-border;
border-radius: @pf-radius;
padding: 12px 10px;
text-align: center;
}
/* —— Avatar dreptunghiular + glow —— */
.message .message-avatar { position: relative; }
.message .message-avatar .avatar {
width: @pf-ava-w;
height: @pf-ava-h;
border-radius: @pf-radius;
overflow: hidden;
box-shadow:
0 0 0 2px @pf-border,
0 0 20px @pf-glow-1,
0 0 60px @pf-glow-2;
}
/* imaginea din interior să umple cadrul, fără crop ciudat */
.message .message-avatar .avatar img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: inherit;
transition: transform .25s ease, box-shadow .25s ease;
}
.message .message-avatar .avatar img:hover {
transform: scale(1.03);
box-shadow:
0 0 0 2px @pf-brand,
0 0 24px fade(@pf-brand, 55%),
0 0 80px fade(@pf-brand, 35%);
}
/* —— Nume / titlu / bannere centrate —— */
.message .message-userDetails { text-align: center; }
.message .message-name { margin-top: 10px; }
.message .message-name .username { font-weight: 700; }
/* titlul (sub nume) */
.message .userTitle {
margin: 6px auto 4px;
color: #cfd3d6;
font-weight: 600;
}
/* bannerele (gradele) — mai compacte și aliniate */
.message .userBanner {
display: inline-block;
width: 90%;
margin: 4px auto;
border-radius: 8px;
text-align: center;
}
/* —— Responsiv —— */
@media (max-width: 1100px) {
.message .message-avatar .avatar { width: 160px; height: 200px; }
}
@media (max-width: 800px) {
/* pe mobile (layout vertical), redu puțin efectele */
.message .message-avatar .avatar { width: 130px; height: 160px; }
.message-user { padding: 10px; }
