/* 0.52.5-alpha — Inbox emoji/schedule and mobile polish */

/* Composer: remove duplicated Programar text, keep icon + one label only */
.vchat-frontend-app .vchat-composer-tools #vchat-schedule-message{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:7px!important;
  width:auto!important;
  min-width:0!important;
  height:32px!important;
  min-height:32px!important;
  padding:0 4px!important;
  border:0!important;
  border-radius:999px!important;
  background:transparent!important;
  box-shadow:none!important;
  color:#6b58a5!important;
  font-size:0!important;
  line-height:1!important;
  font-weight:760!important;
  letter-spacing:-.01em!important;
}
.vchat-frontend-app .vchat-composer-tools #vchat-schedule-message::before{
  content:'◷'!important;
  display:inline-grid!important;
  place-items:center!important;
  width:18px!important;
  height:18px!important;
  min-width:18px!important;
  margin:0!important;
  border-radius:999px!important;
  background:transparent!important;
  color:#6b58a5!important;
  font-family:Arial,sans-serif!important;
  font-size:13px!important;
  line-height:1!important;
  font-weight:800!important;
  transform:translateY(-.5px)!important;
}
.vchat-frontend-app .vchat-composer-tools #vchat-schedule-message::after{
  content:'Programar'!important;
  display:inline-block!important;
  color:#6b58a5!important;
  font-size:12.5px!important;
  line-height:1!important;
  font-weight:760!important;
  letter-spacing:-.01em!important;
}
.vchat-frontend-app .vchat-composer-tools #vchat-schedule-message > span,
.vchat-frontend-app .vchat-composer-tools #vchat-schedule-message .screen-reader-text{
  display:none!important;
}

/* Composer: emoji is a slightly larger, centered icon button */
.vchat-frontend-app .vchat-composer-tools #vchat-emoji{
  display:inline-grid!important;
  place-items:center!important;
  width:34px!important;
  min-width:34px!important;
  height:34px!important;
  min-height:34px!important;
  padding:0!important;
  border:0!important;
  border-radius:999px!important;
  background:#f3effb!important;
  color:#6650bf!important;
  box-shadow:none!important;
  font-size:0!important;
  line-height:1!important;
}
.vchat-frontend-app .vchat-composer-tools #vchat-emoji::before{
  content:'☺'!important;
  display:grid!important;
  place-items:center!important;
  width:34px!important;
  height:34px!important;
  border-radius:999px!important;
  background:#f3effb!important;
  color:#6650bf!important;
  font-family:Arial,sans-serif!important;
  font-size:17px!important;
  line-height:1!important;
  font-weight:760!important;
  transform:translateY(-.5px)!important;
}
.vchat-frontend-app .vchat-composer-tools #vchat-emoji > span,
.vchat-frontend-app .vchat-composer-tools #vchat-emoji .screen-reader-text{
  display:none!important;
}

/* Info action: optical centering inside the soft square */
.vchat-frontend-app #vchat-open-contact,
.vchat-frontend-app .vchat-chat-header-actions #vchat-open-contact{
  display:inline-grid!important;
  place-items:center!important;
  width:44px!important;
  min-width:44px!important;
  height:44px!important;
  min-height:44px!important;
  padding:0!important;
  border-radius:16px!important;
  line-height:1!important;
}
.vchat-frontend-app #vchat-open-contact span,
.vchat-frontend-app #vchat-open-contact b,
.vchat-frontend-app #vchat-open-contact .vchat-ui-icon{
  display:none!important;
}
.vchat-frontend-app #vchat-open-contact::before{
  content:'i'!important;
  display:grid!important;
  place-items:center!important;
  width:22px!important;
  height:22px!important;
  border-radius:999px!important;
  border:2px solid currentColor!important;
  color:#5f49bd!important;
  font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;
  font-size:15px!important;
  font-weight:850!important;
  line-height:1!important;
  padding-bottom:1px!important;
  box-sizing:border-box!important;
  transform:translateY(0)!important;
}

/* Emoji panel: keep it contained in the inbox viewport and above the composer, not under the browser/header. */
.vchat-frontend-app .vchat-emoji-picker{
  position:fixed!important;
  z-index:999999!important;
  left:clamp(390px,44vw,740px)!important;
  right:auto!important;
  top:auto!important;
  bottom:142px!important;
  width:min(420px,calc(100vw - 48px))!important;
  max-width:420px!important;
  max-height:min(390px,calc(100dvh - 230px))!important;
  display:flex!important;
  flex-direction:column!important;
  overflow:hidden!important;
  padding:12px!important;
  border:1px solid #e2dcf1!important;
  border-radius:18px!important;
  background:#fff!important;
  box-shadow:0 24px 70px rgba(35,27,78,.18)!important;
}
.vchat-frontend-app .vchat-emoji-picker[hidden]{display:none!important;}
.vchat-frontend-app .vchat-emoji-picker header{
  flex:0 0 auto!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:10px!important;
  padding:0 0 8px!important;
  margin:0 0 8px!important;
  border-bottom:1px solid #eee9f8!important;
}
.vchat-frontend-app .vchat-emoji-categories{
  flex:0 0 auto!important;
  display:flex!important;
  gap:6px!important;
  padding:2px 1px 8px!important;
  margin:0!important;
  overflow-x:auto!important;
  scrollbar-width:none!important;
}
.vchat-frontend-app .vchat-emoji-categories::-webkit-scrollbar{display:none!important;}
.vchat-frontend-app .vchat-emoji-categories button{
  flex:0 0 auto!important;
  width:34px!important;
  min-width:34px!important;
  height:34px!important;
  min-height:34px!important;
  padding:0!important;
  border-radius:11px!important;
}
.vchat-frontend-app .vchat-emoji-categories button span{font-size:16px!important;line-height:1!important;}
.vchat-frontend-app .vchat-emoji-categories button b{display:none!important;}
.vchat-frontend-app .vchat-emoji-grid{
  flex:1 1 auto!important;
  min-height:0!important;
  display:grid!important;
  grid-template-columns:repeat(8,minmax(0,1fr))!important;
  gap:5px!important;
  overflow-y:auto!important;
  overscroll-behavior:contain!important;
  padding:1px 3px 2px 0!important;
}
.vchat-frontend-app .vchat-emoji-grid button{
  width:100%!important;
  min-width:0!important;
  height:36px!important;
  min-height:36px!important;
  border-radius:10px!important;
  font-size:20px!important;
  line-height:1!important;
  display:grid!important;
  place-items:center!important;
}

/* Small desktop / tablet: keep composer tools delicate and avoid label collisions. */
@media (max-width: 1180px){
  .vchat-frontend-app .vchat-composer-tools{gap:18px!important;}
  .vchat-frontend-app .vchat-emoji-picker{
    left:auto!important;
    right:24px!important;
    bottom:132px!important;
    width:min(390px,calc(100vw - 48px))!important;
    max-height:min(360px,calc(100dvh - 210px))!important;
  }
}

/* Mobile inbox pass: make it behave like a focused mobile app, not a squeezed desktop. */
@media (max-width: 760px){
  .vchat-frontend-app .vchat-inbox-section{
    padding:0!important;
    height:calc(100dvh - 64px)!important;
    min-height:0!important;
    overflow:hidden!important;
  }
  .vchat-frontend-app .vchat-inbox-shell{
    display:block!important;
    height:100%!important;
    min-height:0!important;
    overflow:hidden!important;
    background:#fbfaff!important;
  }
  .vchat-frontend-app .vchat-inbox-list,
  .vchat-frontend-app .vchat-chat-panel{
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
    height:100%!important;
    min-height:0!important;
  }
  .vchat-frontend-app .vchat-inbox-shell[data-mobile-view="list"] .vchat-chat-panel{
    display:none!important;
  }
  .vchat-frontend-app .vchat-inbox-shell[data-mobile-view="chat"] .vchat-inbox-list{
    display:none!important;
  }
  .vchat-frontend-app .vchat-chat-header{
    padding:10px 12px!important;
    gap:10px!important;
  }
  .vchat-frontend-app .vchat-chat-actions,
  .vchat-frontend-app .vchat-conversation-command-bar{
    overflow-x:auto!important;
    scrollbar-width:none!important;
    padding-inline:10px!important;
    gap:8px!important;
  }
  .vchat-frontend-app .vchat-chat-actions::-webkit-scrollbar,
  .vchat-frontend-app .vchat-conversation-command-bar::-webkit-scrollbar{display:none!important;}
  .vchat-frontend-app .vchat-chat-actions button,
  .vchat-frontend-app .vchat-conversation-command-bar button{
    flex:0 0 auto!important;
    height:34px!important;
    min-height:34px!important;
    padding:0 12px!important;
    border-radius:12px!important;
    font-size:11px!important;
  }
  .vchat-frontend-app .vchat-composer-wrap{
    padding:8px 12px calc(10px + env(safe-area-inset-bottom))!important;
  }
  .vchat-frontend-app .vchat-composer-tools{
    gap:14px!important;
    overflow-x:auto!important;
    scrollbar-width:none!important;
    padding-bottom:7px!important;
  }
  .vchat-frontend-app .vchat-composer-tools::-webkit-scrollbar{display:none!important;}
  .vchat-frontend-app .vchat-composer-tools #vchat-schedule-message::after{
    content:'Programar'!important;
    display:inline-block!important;
    font-size:12px!important;
  }
  .vchat-frontend-app .vchat-emoji-picker{
    position:fixed!important;
    left:10px!important;
    right:10px!important;
    bottom:calc(92px + env(safe-area-inset-bottom))!important;
    width:auto!important;
    max-width:none!important;
    max-height:min(52dvh,390px)!important;
    border-radius:20px!important;
    padding:12px!important;
    box-shadow:0 18px 70px rgba(35,27,78,.24)!important;
  }
  .vchat-frontend-app .vchat-emoji-grid{grid-template-columns:repeat(7,minmax(0,1fr))!important;}
  .vchat-frontend-app .vchat-emoji-grid button{height:38px!important;font-size:21px!important;}
}

@media (max-width: 430px){
  .vchat-frontend-app .vchat-composer-tools #vchat-schedule-message::after{
    display:none!important;
    content:''!important;
  }
  .vchat-frontend-app .vchat-composer-tools #vchat-schedule-message{
    width:34px!important;
    min-width:34px!important;
    padding:0!important;
    background:#f3effb!important;
  }
  .vchat-frontend-app .vchat-composer-tools #vchat-schedule-message::before{
    width:34px!important;
    height:34px!important;
    background:#f3effb!important;
  }
  .vchat-frontend-app .vchat-emoji-grid{grid-template-columns:repeat(6,minmax(0,1fr))!important;}
}