:root{
  --bar-h:60px;                /* alto barra superior */
  --bar-up:0mm;                /* ajuste fino vertical (mm) */
  --rule-up:0mm;               /* ajuste de la línea */
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  font-family:Inter,system-ui,Arial,sans-serif;
  color:#e9f1ff;
  background: radial-gradient(120% 120% at 10% 10%, #0d1f45 0%, #0b1837 35%, #08132c 60%, #060f24 100%),
              linear-gradient(145deg,#0a1a3a 0%,#0e2a5b 45%,#06142b 100%);
  background-attachment: fixed;
}

/* --- Barra superior --- */
.bar{
  position:sticky; top:0; z-index:20;
  height:calc(var(--bar-h) + var(--bar-up));
  padding:8px 12px 0;
  backdrop-filter:saturate(1.2) blur(6px);
  background:rgba(5,12,28,.65);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.bar-content{
  display:flex; align-items:center; justify-content:center; position:relative;
  height:calc(var(--bar-h) - 10px);
}

/* bloque izquierda */
.left{position:absolute; left:10px; display:flex; align-items:center; gap:10px}
.left .mini{width:28px;height:28px;border-radius:50%;overflow:hidden;background:#000;box-shadow:0 0 0 1px #2a3b66, 0 8px 18px rgba(0,0,0,.45)}
.left .mini img{width:100%;height:100%;object-fit:cover;display:block}
.name-wrap .name{font-weight:600;letter-spacing:.2px}
.status{display:flex;align-items:center;gap:6px;opacity:.85;font-size:12px}
.status .dot{width:8px;height:8px;border-radius:50%;background:#24d36c;box-shadow:0 0 10px #24d36c88}

/* máscara centrada pequeña */
.center-mask img{
  width:36px;height:36px;border-radius:50%;display:block;background:#000;object-fit:cover;
  box-shadow:0 0 0 1px #2a3b66, 0 10px 22px rgba(0,0,0,.55);
}

/* línea */
.rule{
  margin-top:6px; transform:translateY(var(--rule-up));
  height:1px; background:linear-gradient(90deg,transparent, #335aa0 25%, #6ea2ff 50%, #335aa0 75%, transparent);
  opacity:.6;
}

/* área de mensajes */
.thread{min-height:calc(100vh - var(--bar-h) - 72px);}

/* barra de entrada */
.input{position:sticky; bottom:0; z-index:20; padding:10px 10px 14px; background:linear-gradient(180deg,transparent,rgba(4,10,22,.7))}
.box{
  display:flex; align-items:center; gap:10px;
  background:linear-gradient(180deg,#0d1f45,#091936);
  border:1px solid rgba(255,255,255,.07);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.03), 0 8px 24px rgba(0,0,0,.45);
  border-radius:16px; padding:10px 12px;
}
.box input{
  flex:1; background:transparent; border:0; outline:0; color:#e9f1ff; font:400 15px/1.4 Inter,system-ui,Arial;
}
.btn{border:0; cursor:pointer; background:#0b1c3e; padding:8px 12px; border-radius:12px}
.btn.ghost{background:transparent}
.btn.send{background:linear-gradient(180deg,#1b3f86,#0f2c61); box-shadow:0 6px 14px rgba(0,0,0,.55)}

/* override 20251105B · ampliar máscara y dar vida */
.center-mask img{
  width:calc(36px + 4mm);
  height:calc(36px + 4mm);
  animation: breath 6s ease-in-out infinite, vibrate 2s ease-in-out infinite;
}
@keyframes breath{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.06)}
}
@keyframes vibrate{
  0%,100%{filter:drop-shadow(0 0 4px #ffd70088)}
  50%{filter:drop-shadow(0 0 10px #ffd700cc)}
}
.center-mask::before{
  content:"";
  position:absolute;
  top:50%;left:50%;
  width:110%;height:110%;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(circle,#ffd70055 0%,transparent 70%);
  animation:aura 6s ease-in-out infinite;
  z-index:0;
}
@keyframes aura{
  0%,100%{transform:translate(-50%,-50%) scale(1);opacity:.7}
  50%{transform:translate(-50%,-50%) scale(1.15);opacity:.9}
}

/* override 20251105C · bajar máscara central 4mm */
:root{
  --mask-center-offset: 4mm;
}

/* override 20251105D · respiración + vibración al exhalar */
.center-mask img{
  width:calc(36px + 4mm);
  height:calc(36px + 4mm);
  animation: breath 6s ease-in-out infinite;
}
@keyframes breath{
  0%{transform:scale(1)}
  45%{transform:scale(1.06)}
  55%{transform:scale(1.06) rotate(0deg)}
  60%{transform:scale(1) rotate(0deg)}
  62%{transform:scale(1) rotate(1deg)}
  64%{transform:scale(1) rotate(-1deg)}
  66%{transform:scale(1) rotate(0.5deg)}
  68%{transform:scale(1) rotate(-0.5deg)}
  70%{transform:scale(1) rotate(0deg)}
  100%{transform:scale(1)}
}
.center-mask::before{
  content:"";
  position:absolute;
  top:50%;left:50%;
  width:110%;height:110%;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(circle,#ffd70055 0%,transparent 70%);
  animation:aura 6s ease-in-out infinite;
  z-index:0;
}
@keyframes aura{
  0%,100%{transform:translate(-50%,-50%) scale(1);opacity:.7}
  50%{transform:translate(-50%,-50%) scale(1.15);opacity:.9}
}
/* === AELARA · FIX LAYOUT COMPACT === */
:root{--bar-h:60px;--input-h:72px}
html,body{height:100%;margin:0;padding:0;width:100%;overflow:hidden;-webkit-text-size-adjust:100%;touch-action:pan-y;overscroll-behavior-y:none}
header.top,.bar{position:fixed!important;top:0;left:0;right:0;z-index:1000}
.rule{position:relative;z-index:1001}
footer.bar,.input{position:fixed!important;left:0;right:0;bottom:calc(0px + env(safe-area-inset-bottom));z-index:1000;padding-bottom:max(10px, env(safe-area-inset-bottom))}
.thread,#thread,main.thread{position:fixed;top:var(--bar-h);bottom:calc(var(--input-h) + env(safe-area-inset-bottom));left:0;right:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:8px 12px 12px;min-height:100dvh}
input,textarea,select{font-size:16px!important}
/* === AELARA · ICONOS 3D METÁLICOS (2025-11-05) === */
/* Posicionar bloque a 6mm a la derecha del centro + radio de máscara (18px) */
.bar-content{position:relative}
.top-actions{
  position:absolute;
  top:50%;
  left:calc(50% + 18px + 6mm);
  transform:translateY(-50%);
  display:flex; gap:10px;
}
/* Botón 3D metálico */
.ael-btn3d{
  width:36px;height:36px;border-radius:12px;
  border:1px solid rgba(255,255,255,.25);
  background:
    radial-gradient(120% 120% at 30% 20%, rgba(255,255,255,.35), transparent 60%),
    linear-gradient(180deg,#bfc7d4 0%, #9aa3b1 45%, #7d8694 55%, #aeb6c3 100%);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.45),
    inset 0 -1px 1px rgba(0,0,0,.25),
    0 6px 14px rgba(0,0,0,.45),
    0 0 0 1px rgba(40,60,90,.35);
  display:inline-grid; place-items:center;
  cursor:pointer; transition:transform .08s ease, box-shadow .12s ease, filter .12s ease;
  -webkit-tap-highlight-color: transparent;
}
.ael-btn3d:before{
  content:""; position:absolute; inset:0; border-radius:12px;
  background:linear-gradient(45deg, rgba(255,255,255,.35), rgba(255,255,255,0) 40%);
  mix-blend-mode:screen; pointer-events:none;
}
.ael-btn3d:hover{ filter:brightness(1.06) }
.ael-btn3d:active{
  transform:translateY(1px);
  box-shadow:
    inset 0 2px 3px rgba(0,0,0,.25),
    0 4px 10px rgba(0,0,0,.4),
    0 0 0 1px rgba(40,60,90,.45);
}
/* Íconos SVG: sobrios, con pequeña profundidad */
.ael-btn3d .ico{
  width:18px;height:18px; fill:#e9edf4;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.35));
}
/* Responsivo fino: si la barra es muy angosta, reducir botones levemente */
@media (max-width:360px){
  .ael-btn3d{ width:32px;height:32px }
  .ael-btn3d .ico{ width:16px;height:16px }
  .top-actions{ gap:8px; left:calc(50% + 16px + 6mm) }
}
/* === AELARA · FAB INFERIOR IZQ (Fotos / Videos / Avatar) === */
.fab-aelara{position:fixed; left:calc(16px - 1mm); # movido 1 mm izq
 bottom:calc(16px - 1mm + env(safe-area-inset-bottom)); # bajado 1 mm
 z-index:30}
.fab-aelara .fab-menu{display:flex; flex-direction:column; align-items:center; gap:10px;
  position:absolute; left:0; bottom:62px; transform:translateY(8px) scale(.95);
  opacity:0; pointer-events:none; transition:transform .25s ease, opacity .25s ease}
.fab-aelara.open .fab-menu{transform:translateY(0) scale(1); opacity:1; pointer-events:auto}
.btn-metal{width:52px;height:52px;border-radius:14px;border:0;cursor:pointer;display:grid;place-items:center;
  background: linear-gradient(135deg,#f7f7f9 0%,#cfd3d9 35%,#9aa3ad 55%,#d9dde3 75%,#f0f1f4 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.85),
    inset 0 -2px 6px rgba(0,0,0,.20),
    0 6px 18px rgba(0,0,0,.35), 0 1px 0 rgba(255,255,255,.25);
  transition: transform .06s ease, box-shadow .2s ease, filter .2s ease}
.btn-metal:active{transform:translateY(1px); box-shadow:
  inset 0 1px 0 rgba(255,255,255,.65),
  inset 0 -1px 4px rgba(0,0,0,.25),
  0 4px 12px rgba(0,0,0,.28)}
.btn-metal svg{width:26px;height:26px;fill:#253247;filter:drop-shadow(0 1px 0 rgba(255,255,255,.35))}
.btn-main{width:56px;height:56px;border-radius:16px}
.btn-main svg{fill:#1b2a3f}
@media (min-width:768px){
  .btn-metal{width:56px;height:56px}
  .btn-main{width:60px;height:60px}
}
/* Tapar el icono antiguo si existiera justo debajo */
.box > .legacy-upload{display:none}
/* === BOTÓN MICRÓFONO AELARA === */
.btn-mic{
  width:48px;height:48px;margin-right:6px;border-radius:14px;
  background:linear-gradient(135deg,#f7f7f9 0%,#cfd3d9 35%,#9aa3ad 55%,#d9dde3 75%,#f0f1f4 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85),
             inset 0 -2px 6px rgba(0,0,0,.25),
             0 6px 18px rgba(0,0,0,.35),
             0 1px 0 rgba(255,255,255,.25);
  transition:transform .08s ease,box-shadow .2s ease;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
}
.btn-mic svg{
  width:24px;height:24px;fill:#253247;
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.35));
}
.btn-mic:active{
  transform:translateY(1px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),
             inset 0 -1px 4px rgba(0,0,0,.25),
             0 4px 12px rgba(0,0,0,.28);
}
/* === BOTÓN MICRÓFONO AELARA === */
.btn-mic{
  width:48px;height:48px;margin-right:6px;border-radius:14px;
  background:linear-gradient(135deg,#f7f7f9 0%,#cfd3d9 35%,#9aa3ad 55%,#d9dde3 75%,#f0f1f4 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85),
             inset 0 -2px 6px rgba(0,0,0,.25),
             0 6px 18px rgba(0,0,0,.35),
             0 1px 0 rgba(255,255,255,.25);
  transition:transform .08s ease,box-shadow .2s ease;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
}
.btn-mic svg{
  width:24px;height:24px;fill:#253247;
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.35));
}
.btn-mic:active{
  transform:translateY(1px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),
             inset 0 -1px 4px rgba(0,0,0,.25),
             0 4px 12px rgba(0,0,0,.28);
}
/* === AELARA · MIC === */
.btn-mic{
  width:48px;height:48px;margin-right:8px;border:0;border-radius:14px;
  background:linear-gradient(135deg,#f7f7f9 0%,#cfd3d9 35%,#9aa3ad 55%,#d9dde3 75%,#f0f1f4 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.85),
    inset 0 -2px 6px rgba(0,0,0,.28),
    0 10px 22px rgba(0,0,0,.35),
    0 1px 0 rgba(255,255,255,.25);
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
  transition:transform .08s ease, box-shadow .2s ease, filter .2s ease;
}
.btn-mic svg{ width:24px;height:24px; fill:#253247; filter:drop-shadow(0 1px 0 rgba(255,255,255,.35)); }
.btn-mic:active{ transform:translateY(1px); box-shadow:
  inset 0 1px 0 rgba(255,255,255,.6),
  inset 0 -1px 4px rgba(0,0,0,.25),
  0 6px 16px rgba(0,0,0,.28); }
.input .box{ display:flex; align-items:center; gap:10px; }

/* === BOTÓN MICRÓFONO PLATEADO 3D === */
.btn.mic {
  background: radial-gradient(circle at 30% 30%,#d9d9d9,#8a8a8a 60%,#4f4f4f 100%);
  box-shadow: 0 3px 6px rgba(0,0,0,.6), inset 0 1px 1px rgba(255,255,255,.45);
  border-radius: 50%; width:42px; height:42px;
  display:flex; align-items:center; justify-content:center;
  font-size:18px; cursor:pointer; transition:transform .18s ease, box-shadow .18s ease;
}
.btn.mic:hover { transform:scale(1.08);
  box-shadow: 0 6px 12px rgba(0,0,0,.75), inset 0 1px 2px rgba(255,255,255,.55);
}
/* === Ajuste micrófono · desplazamiento 3mm izquierda === */
#btn-voice {
  position: relative;
  left: -3mm;
}
/* === Ajuste botón ENVIAR · desplazamiento 3mm izquierda === */
.btn.send {
  position: relative;
  left: -3mm;
}
/* === Ajuste fino 1mm izquierda para micrófono y enviar === */
#btn-voice,
.btn.send {
  position: relative;
  left: -1mm;
}
/* === Corrección real: mover micrófono y enviar 1mm IZQUIERDA === */
#btn-voice,
.btn.send {
  position: relative;
  transform: translateX(-1mm);
}
/* === Ajuste visual preciso ===
   Desplaza los BOTONES de micrófono (#btn-voice)
   y enviar (.btn.send) 2mm a la izquierda en la barra inferior.
*/
button#btn-voice,
button.btn.send {
  position: relative;
  transform: translateX(-2mm);
}
/* === Ajuste visual adicional ===
   Mueve los BOTONES de micrófono (#btn-voice)
   y enviar (.btn.send) 3mm hacia la izquierda.
*/
button#btn-voice,
button.btn.send {
  position: relative;
  transform: translateX(-3mm);
}
/* === Ajuste: bajar 3mm el BOTÓN DESPLEGABLE principal (fabMain) === */
button#fabMain {
  position: relative;
  transform: translateY(3mm);
}
/* === Ajuste: subir 1mm el BOTÓN DESPLEGABLE principal (fabMain) === */
button#fabMain {
  position: relative;
  transform: translateY(-1mm);
}
/* === Ajuste visual: bajar 2mm el BOTÓN DESPLEGABLE principal (fabMain) === */
button#fabMain {
  position: relative;
  transform: translateY(2mm);
}
/* === Ajuste de simetría: reducir 1.5mm altura del botón micrófono (btn-mic) === */
button#btn-mic {
  transform: scaleY(0.96);  /* equivalente a ~1.5mm menos de alto */
  margin-top: 0.5mm;        /* compensa posición vertical */
}
/* === OVERRIDES: Micrófono más corto (~1.5mm) para simetría === */
:root{ --mic-reduce:6px } /* ~1.5mm en pantallas comunes */
#btn-mic,
.btn-mic,
button[aria-label="Micrófono"],
button[title="Micrófono"]{
  height: calc(var(--btn-h, 48px) - var(--mic-reduce)) !important;
  width:  calc(var(--btn-h, 48px) - var(--mic-reduce)) !important;
  line-height: calc(var(--btn-h, 48px) - var(--mic-reduce)) !important;
}
#btn-mic svg,
.btn-mic svg,
button[aria-label="Micrófono"] svg,
button[title="Micrófono"] svg{
  transform: scale(0.92);
  transform-origin: 50% 50%;
}
/* === AELARA SYMMETRY FIX: aumentar altura del botón de enviar +1.5mm === */
button#btn-send,
.btn.send,
button[title="Enviar"],
button[aria-label="Enviar"] {
  height: calc(var(--btn-h, 48px) + 1.5mm) !important;
  width:  calc(var(--btn-h, 48px) + 1.5mm) !important;
  line-height: calc(var(--btn-h, 48px) + 1.5mm) !important;
  transform: translateY(-0.75mm); /* centra visualmente el aumento */
}
/* === CENTRADO ÍCONO EN BOTÓN ENVIAR === */
button#btn-send,
.btn.send,
button[title="Enviar"],
button[aria-label="Enviar"] {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
}
button#btn-send svg,
.btn.send svg,
button#btn-send span,
.btn.send span {
  transform: translateY(0) translateX(0) !important;
  margin: 0 !important;
}
/* === BOTÓN ENVIAR · ENSANCHAR +2 mm Y CENTRAR ICONO === */
button#btn-send,
.btn.send,
button[title="Enviar"],
button[aria-label="Enviar"] {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: calc(var(--btn-w, 48px) + 2mm) !important;
  height: var(--btn-h, 48px) !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Centrar el triángulo o ícono interno */
button#btn-send svg,
button#btn-send span,
.btn.send svg,
.btn.send span {
  position: relative !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  margin: 0 !important;
}
button#btn-send,
.btn.send,
button[title="Enviar"],
button[aria-label="Enviar"] {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: calc(100% + 3mm) !important;
  height: calc(100% + 2mm) !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 50% !important;
  box-sizing: border-box !important;
}
button#btn-send > *,
.btn.send > * {
  position: relative !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  margin: 0 !important;
}
/* === AELARA: Enviar circular fijo 4mm (override fuerte) === */
button#btn-send,
.btn.send,
button[title="Enviar"],
button[aria-label="Enviar"]{
  width:4mm !important;
  height:4mm !important;
  min-width:4mm !important;
  min-height:4mm !important;
  max-width:4mm !important;
  max-height:4mm !important;
  padding:0 !important;
  margin:0 !important;
  border-radius:50% !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  box-sizing:border-box !important;
}

/* Centrar el triángulo y escalarlo para que se vea nítido */
button#btn-send > *,
.btn.send > *,
button[title="Enviar"] > *,
button[aria-label="Enviar"] > *{
  position:static !important;
  transform:none !important;
  line-height:1 !important;
  margin:0 !important;
  font-size:2.2mm !important; /* ajuste visual del símbolo ▶ */
}

/* Si el botón usa texto directamente (sin span), centrarlo igual */
button#btn-send,
.btn.send{
  text-align:center !important;
  font-size:2.2mm !important;
}
/* === AELARA: Enviar circular grande 10mm diámetro === */
button#btn-send,
.btn.send,
button[title="Enviar"],
button[aria-label="Enviar"] {
  width:10mm !important;
  height:10mm !important;
  min-width:10mm !important;
  min-height:10mm !important;
  max-width:10mm !important;
  max-height:10mm !important;
  border-radius:50% !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  box-sizing:border-box !important;
  padding:0 !important;
  margin:0 !important;
}

/* Centrado y tamaño del icono interno */
button#btn-send > *,
.btn.send > * {
  position:relative !important;
  left:50% !important;
  top:50% !important;
  transform:translate(-50%, -50%) !important;
  font-size:5mm !important;
  line-height:1 !important;
}
/* === AELARA: Botón ENVIAR metálico plateado 3D === */
button#btn-send,
.btn.send,
button[title="Enviar"],
button[aria-label="Enviar"] {
  width:10mm !important;
  height:10mm !important;
  min-width:10mm !important;
  min-height:10mm !important;
  max-width:10mm !important;
  max-height:10mm !important;
  border-radius:50% !important;
  background:linear-gradient(145deg,#d7d9e0 0%,#9ea1a8 100%) !important;
  box-shadow:
    inset 1px 1px 2px rgba(255,255,255,0.5),
    inset -2px -2px 3px rgba(0,0,0,0.3),
    0 3px 10px rgba(0,0,0,0.45) !important;
  border:1px solid rgba(255,255,255,0.25) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:0 !important;
  margin-left:1mm !important; /* separa un poco del micrófono */
  transition:all .2s ease-in-out !important;
}
button#btn-send:hover {
  filter:brightness(1.15) !important;
  transform:scale(1.03) !important;
}

/* Centrado perfecto del triángulo interno */
button#btn-send > *,
.btn.send > * {
  position:relative !important;
  left:50% !important;
  top:50% !important;
  transform:translate(-50%, -50%) !important;
  font-size:5mm !important;
  color:#001b44 !important;
  text-shadow:0 0 2px rgba(255,255,255,0.3);
}
/* === AELARA: Botón ENVIAR metálico plateado 3D (ajustado 1 mm a la izquierda) === */
button#btn-send,
.btn.send,
button[title="Enviar"],
button[aria-label="Enviar"] {
  width:10mm !important;
  height:10mm !important;
  min-width:10mm !important;
  min-height:10mm !important;
  max-width:10mm !important;
  max-height:10mm !important;
  border-radius:50% !important;
  background:linear-gradient(145deg,#d7d9e0 0%,#9ea1a8 100%) !important;
  box-shadow:
    inset 1px 1px 2px rgba(255,255,255,0.5),
    inset -2px -2px 3px rgba(0,0,0,0.3),
    0 3px 10px rgba(0,0,0,0.45) !important;
  border:1px solid rgba(255,255,255,0.25) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:0 !important;
  margin-left:-1mm !important; /* movido 1 mm a la izquierda */
  transition:all .2s ease-in-out !important;
}
button#btn-send:hover {
  filter:brightness(1.15) !important;
  transform:scale(1.03) !important;
}

/* Centrado perfecto del triángulo interno */
button#btn-send > *,
.btn.send > * {
  position:relative !important;
  left:50% !important;
  top:50% !important;
  transform:translate(-50%, -50%) !important;
  font-size:5mm !important;
  color:#001b44 !important;
  text-shadow:0 0 2px rgba(255,255,255,0.3);
}

/* === Ajuste tamaño máscara central Clara/Aelara === */
.header .avatar img,
.header .avatar,
.chat-header .avatar img,
.chat-header .avatar {
  width: calc( var(--avatar-size, 48px) + 11px ) !important;
  height: calc( var(--avatar-size, 48px) + 11px ) !important;
  transition: transform 0.3s ease, width 0.3s ease, height 0.3s ease;
}