/* xox-ui v1 — barra de escribir compacta y menu "+" bien anclado.
   Solo aspecto y colocacion. No toca el chat, ni los mensajes, ni el cifrado. */

/* ================= barra de escribir: UNA sola fila ================= */
html body .xc-cmp{
  flex-wrap:nowrap!important;
  align-items:flex-end!important;
  gap:5px!important;
  padding:7px 9px calc(7px + env(safe-area-inset-bottom,0px))!important;
}
html body .xc-cmp .xh-ce,
html body .xc-cmp .xc-ta{
  flex:1 1 auto!important;
  order:0!important;
  margin:0!important;
  min-width:96px!important;
  min-height:40px!important;
  max-height:108px!important;
  padding:9px 14px!important;
  font-size:16px!important;
  line-height:1.35!important;
  border-radius:20px!important;
}
html body .xc-cmp .xc-mic,
html body .xc-cmp .xc-snd{
  width:38px!important;  height:38px!important;
  min-width:38px!important; min-height:38px!important;
  font-size:16px!important;
  flex:0 0 auto!important;
  margin:0!important;
  padding:0!important;
}
html body .xc-cmp .xc-snd{ margin-left:0!important; }

/* moviles estrechos: un punto mas pequeno para que quepa el texto */
@media (max-width:389px){
  html body .xc-cmp{ gap:4px!important; padding-left:7px!important; padding-right:7px!important; }
  html body .xc-cmp .xc-mic,
  html body .xc-cmp .xc-snd{
    width:34px!important; height:34px!important;
    min-width:34px!important; min-height:34px!important;
    font-size:15px!important;
  }
  html body .xc-cmp .xh-ce,
  html body .xc-cmp .xc-ta{ padding:8px 12px!important; min-width:84px!important; }
}

/* escritorio: un punto mas grandes, que hay sitio de sobra */
@media (min-width:821px){
  html body .xc-cmp .xc-mic,
  html body .xc-cmp .xc-snd{
    width:42px!important; height:42px!important;
    min-width:42px!important; min-height:42px!important;
  }
  html body .xc-cmp .xh-ce,
  html body .xc-cmp .xc-ta{ min-height:42px!important; }
}

/* ================= menu "+" : compacto y sin saltos ================= */
html body .xh-attpop{
  padding:8px!important;
  gap:4px!important;
  min-width:212px!important;
  max-width:min(320px,92vw)!important;
  overflow-y:auto!important;
  overscroll-behavior:contain!important;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
}
html body .xh-attpop button{
  padding:9px 12px!important;
  font-size:13px!important;
  border-radius:10px!important;
  gap:9px!important;
}
html body .xh-attpop .ic{
  width:30px!important; height:30px!important; min-width:30px!important;
  font-size:15px!important; border-radius:9px!important;
}
html body .xh-attpop.xu-in{ animation:xuPop .15s cubic-bezier(.2,.8,.3,1); }
@keyframes xuPop{
  from{ opacity:0; transform:translateX(-50%) translateY(10px); }
  to  { opacity:1; transform:translateX(-50%) translateY(0); }
}

/* ================= pagina de grupo clasica ================= */
@media (max-width:820px){
  html body .chatrow{
    flex-wrap:nowrap!important;
    align-items:center!important;
    gap:6px!important;
  }
  html body .chatrow .chatinput{
    flex:1 1 auto!important;
    order:0!important;
    margin-bottom:0!important;
    min-width:90px!important;
    min-height:40px!important;
    padding:10px 14px!important;
    font-size:16px!important;
  }
  html body .chatrow .iconbtn,
  html body .chatrow #chatsend{
    width:38px!important; height:38px!important;
    min-width:38px!important; min-height:38px!important;
    padding:0!important; font-size:16px!important;
    flex:0 0 auto!important;
  }
}

/* ================= hueco del teclado =================
   Cuando se abre el teclado del movil, la conversacion se pega a el
   como en WhatsApp o Telegram, sin la banda negra muerta de debajo. */
html body .xc-ov{ bottom: var(--xok, 0px)!important; }
html body .xt-back{ bottom: var(--xok, 0px)!important; }
html body.xok-on .xc-cmp{ padding-bottom:7px!important; }
html body.xok-on .xt-sheet{ padding-bottom:0!important; max-height:min(70vh,560px)!important; }
html body.xok-on .chatrow{ padding-bottom:0!important; }
@media (max-width:389px){
  html body.xok-on .xc-cmp{ padding-bottom:6px!important; }
}

/* ---- panel de emojis: mismo trato que el menu + ---- */
html body .xh-empop{
  overflow-y:auto!important;
  overscroll-behavior:contain!important;
  -webkit-overflow-scrolling:touch;
  max-width:min(340px,94vw)!important;
}
html body .xh-empop.xu-in{ animation:xuPop .15s cubic-bezier(.2,.8,.3,1); }