/* ElChatea · avatares compactos. Los mensajes conservan su flujo y tipografía. */
#messages .ec-avatar-author {white-space:nowrap;}
#messages .ec-message-avatar {
    display:inline-flex;align-items:center;justify-content:center;
    width:32px;height:32px;padding:1px;margin:0 6px 0 0;vertical-align:middle;
    border:0;border-radius:50%;background:transparent;cursor:pointer;line-height:1;
    transition:background-color .14s ease,box-shadow .14s ease;
}
.ec-avatar-face {
    position:relative;display:inline-flex;align-items:center;justify-content:center;
    width:30px;height:30px;flex:none;overflow:hidden;border-radius:50%;
    border:1px solid #92bedc;background:#e6f2fb;color:#5186af;
}
.ec-avatar-face img {position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:inherit;}
.ec-avatar-silhouette {display:block;width:100%;height:100%;fill:currentColor;pointer-events:none;}
#messages .ec-message-avatar:focus-visible {outline:2px solid #2378b0;outline-offset:2px;}
#messages .ec-message-avatar:active {background:#cde7f8;box-shadow:0 0 0 2px #99c8e7;}
@media(hover:hover) {
    #messages .ec-message-avatar:hover {background:#cde7f8;box-shadow:0 0 0 2px #d1e8f8;}
}
#messages .ec-avatar-message {padding-block:2px;}
html.ec-avatars-compact #messages .ec-message-avatar {display:none;}
html.ec-avatars-compact #messages .ec-avatar-message {padding-block:0;}
.brand-user-avatar-initial .ec-avatar-silhouette,
#settingsAvatarInitial .ec-avatar-silhouette,
[data-avatar-initial] .ec-avatar-silhouette {width:100%;height:100%;min-width:20px;}
#settingsAvatarInitial,[data-avatar-initial] {display:inline-flex;width:100%;height:100%;align-items:center;justify-content:center;}
#settingsAvatarInitial.hidden,[data-avatar-initial].hidden {display:none;}
.settings-avatar-preview:not(.has-image),.user-profile-avatar:not(.has-image) {color:#fff;}
@media(max-width:1024px) and (min-width:641px) {
    #messages .ec-message-avatar {width:30px;height:30px;}
    #messages .ec-avatar-face {width:28px;height:28px;}
}
@media(max-width:640px) {
    #messages .ec-message-avatar {width:26px;height:26px;margin-right:4px;}
    #messages .ec-avatar-face {width:24px;height:24px;}
    #messages .ec-avatar-message {padding-block:1px;}
    /* Un nick largo puede partirse en pantallas estrechas, sin reducir la letra. */
    #messages .ec-avatar-author {white-space:normal;}
    #messages .ec-avatar-author .chat-nick {white-space:normal!important;overflow-wrap:anywhere;}
}
@media(prefers-reduced-motion:reduce) {
    #messages .ec-message-avatar {transition:none;}
}

/* V2: la lista lateral también muestra el avatar predeterminado. */
#usersList .member-avatar.member-avatar-initial-only {
    display:inline-flex!important;align-items:center;justify-content:center;
    width:24px;height:24px;min-width:24px;flex:0 0 24px;border-radius:50%;
    border:1px solid #92bedc;background:#e6f2fb;color:#5186af;overflow:hidden;
}
#usersList .member-avatar .ec-avatar-silhouette {width:100%;height:100%;}
#avatarPresetGrid {grid-template-columns:repeat(auto-fit,minmax(64px,1fr));gap:8px;}
#avatarPresetGrid .ec-avatar-group-title {grid-column:1/-1;font-size:12px;font-weight:700;color:#375d7b;margin-top:7px;}
#avatarPresetGrid .ec-avatar-modern {height:auto;min-height:88px;padding:7px 3px;display:flex;flex-direction:column;gap:4px;align-items:center;justify-content:center;background:#f8fbff;border-radius:12px;}
#avatarPresetGrid .ec-avatar-modern img {width:50px;height:50px;border-radius:50%;}
#avatarPresetGrid .ec-avatar-modern span {font-size:10px;line-height:1.2;max-width:100%;overflow-wrap:anywhere;color:#36576f;}
#avatarPresetGrid .ec-avatar-modern.selected {border-color:#337bae;background:#e7f3fc;box-shadow:0 0 0 2px #badcf1;}
@media(hover:hover) {#avatarPresetGrid .ec-avatar-modern:hover {background:#eaf4fc;border-color:#8ab8d7;}}
@media(max-width:400px) {#avatarPresetGrid {grid-template-columns:repeat(3,minmax(0,1fr));}}

/* V3: categorías navegables sin cambiar el avatar seleccionado. */
#ecAvatarFilters3 {display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 8px;}
#ecAvatarFilters3 button {display:inline-flex;align-items:center;gap:5px;min-height:36px;max-width:100%;padding:6px 10px;border:1px solid #b4cede;border-radius:18px;background:#f6faff;color:#315772;font:inherit;font-size:12px;font-weight:700;cursor:pointer;}
#ecAvatarFilters3 button span {font-size:10px;opacity:.78;}
#ecAvatarFilters3 button[aria-pressed="true"] {background:#dceefb;border-color:#78aecd;color:#185b87;}
#ecAvatarFilters3 button:focus-visible,#avatarPresetGrid button:focus-visible {outline:3px solid #2d83b7;outline-offset:2px;}
#ecAvatarCount3 {margin:7px 0 10px;font-size:12px;color:#587489;}
#avatarPresetGrid [hidden] {display:none!important;}
#avatarPresetGrid {grid-template-columns:repeat(auto-fill,minmax(72px,1fr));}
#avatarPresetGrid .ec-avatar-modern {min-width:0;}
@media(max-width:480px) {
 #ecAvatarFilters3 {gap:5px;}
 #ecAvatarFilters3 button {min-height:38px;padding:6px 9px;font-size:11px;}
 #avatarPresetGrid {grid-template-columns:repeat(3,minmax(0,1fr));}
}

/* V4: visible entry points to the same avatar selector. */
#messages .chat-nick.ec-own-nick {
    appearance:none;border:0;background:transparent;padding:0;margin:0;
    font-family:inherit;line-height:inherit;text-align:inherit;cursor:pointer;
    border-radius:3px;vertical-align:baseline;
}
#messages .chat-nick.ec-own-nick:focus-visible {outline:2px solid #337fae;outline-offset:3px;}
@media(hover:hover) {#messages .chat-nick.ec-own-nick:hover {text-decoration:underline;}}
.ec-avatar-shortcut {
    display:inline-flex;align-items:center;justify-content:center;gap:6px;
    min-height:40px;width:fit-content;max-width:100%;padding:8px 13px;margin:8px 0;
    border:1px solid #6da4c8;border-radius:8px;background:#e7f3fc;color:#215f89;
    font-family:inherit;font-size:13px;font-weight:700;line-height:1.3;cursor:pointer;
}
.ec-avatar-shortcut:focus-visible {outline:3px solid #337fae;outline-offset:2px;}
@media(hover:hover) {.ec-avatar-shortcut:hover {background:#d8edfa;}}
.settings-profile-preview-copy .ec-avatar-shortcut {margin-bottom:0;}
@media(max-width:720px) {.ec-avatar-shortcut {min-height:44px;}}