/* Vchat Core 0.66.18-alpha — Composer compact + emoji layer.
   FINAL isolated cascade, no global WordPress controls.
   #vchat-frontend-app is the real SaaS portal root. */

/* Conversation area: the visible timeline must retain the flexible height. */
#vchat-frontend-app.vchat-frontend-app .vchat-inbox-section .vchat-chat-panel,
#vchat-frontend-app.vchat-frontend-app .vchat-inbox-section .vchat-chat-timeline{
  min-height:0!important;
}

/* Compact message composer, design tokens bounded to the Inbox only. */
#vchat-frontend-app.vchat-frontend-app .vchat-inbox-section .vchat-composer-wrap{
  --vc-compose-violet:#6256e8;
  --vc-compose-edge:#e4e1f2;
  position:relative!important;
  flex:0 0 auto!important;
  width:100%!important;
  min-width:0!important;
  padding:8px 14px 10px!important;
  margin:0!important;
  background:#fff!important;
  border-top:1px solid #e9e7f2!important;
  box-shadow:0 -4px 17px rgba(28,23,64,.035)!important;
  isolation:auto!important;
  overflow:visible!important;
}
#vchat-frontend-app.vchat-frontend-app .vchat-inbox-section .vchat-composer-tools{
  display:flex!important;
  flex:0 0 auto!important;
  align-items:center!important;
  gap:5px!important;
  width:100%!important;
  min-width:0!important;
  min-height:30px!important;
  height:32px!important;
  max-height:32px!important;
  padding:0 0 3px!important;
  margin:0!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  white-space:nowrap!important;
  scrollbar-width:none!important;
}
#vchat-frontend-app.vchat-frontend-app .vchat-inbox-section .vchat-composer-tools::-webkit-scrollbar{display:none!important}
#vchat-frontend-app.vchat-frontend-app .vchat-inbox-section .vchat-composer-tools button{
  flex:0 0 auto!important;
  display:inline-flex!important;
  justify-content:center!important;
  align-items:center!important;
  width:auto!important;
  min-width:30px!important;
  max-width:none!important;
  height:29px!important;
  min-height:29px!important;
  max-height:29px!important;
  margin:0!important;
  padding:0 9px!important;
  border-radius:9px!important;
  font-size:11px!important;
  line-height:1!important;
  font-weight:750!important;
  gap:6px!important;
  box-shadow:none!important;
  transform:none!important;
}
/* Legacy release styles injected a second “Programar” label with ::after.
   Keep the real text label, remove only the duplicate pseudo-label. */
#vchat-frontend-app.vchat-frontend-app .vchat-inbox-section #vchat-schedule-message::after{
  content:none!important;
  display:none!important;
}
#vchat-frontend-app.vchat-frontend-app .vchat-inbox-section #vchat-schedule-message::before{
  font-size:15px!important;
  line-height:1!important;
}
/* The emoji glyph is drawn by the existing ::before icon; hide the redundant
   literal word Emojis without hiding the accessible name or actual button. */
#vchat-frontend-app.vchat-frontend-app .vchat-inbox-section #vchat-emoji{
  font-size:0!important;
}
#vchat-frontend-app.vchat-frontend-app .vchat-inbox-section #vchat-emoji::before{
  font-size:17px!important;
  line-height:1!important;
}
#vchat-frontend-app.vchat-frontend-app .vchat-inbox-section .vchat-composer-tools #vchat-emoji,
#vchat-frontend-app.vchat-frontend-app .vchat-inbox-section .vchat-composer-tools #vchat-record-audio{
  width:30px!important;
  min-width:30px!important;
  max-width:30px!important;
  padding:0!important;
}
#vchat-frontend-app.vchat-frontend-app .vchat-inbox-section .vchat-composer-tools #vchat-saved-reply{
  margin-left:auto!important;
  font-size:10px!important;
  font-weight:750!important;
}
#vchat-frontend-app.vchat-frontend-app .vchat-inbox-section .vchat-composer-tools>span:empty{
  flex:1 1 auto!important;
  min-width:4px!important;
}

/* Window indicator: a compact, informative inline status rather than a second large card. */
#vchat-frontend-app.vchat-frontend-app .vchat-inbox-section #vchat-wa-window-banner.vchat-wa-window{
  display:flex!important;
  align-items:center!important;
  flex-wrap:nowrap!important;
  gap:10px!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  height:auto!important;
  min-height:34px!important;
  padding:4px 6px 4px 12px!important;
  margin:3px 0 7px!important;
  border:1px solid #dbeee4!important;
  border-radius:11px!important;
  background:#f5fbf8!important;
  color:#35644c!important;
  font-size:11px!important;
  font-weight:500!important;
  line-height:1.3!important;
  box-shadow:none!important;
}
#vchat-frontend-app.vchat-frontend-app .vchat-inbox-section #vchat-wa-window-banner.is-closed{
  border-color:#efdfba!important;
  background:#fffbf3!important;
  color:#805920!important;
}
#vchat-frontend-app.vchat-frontend-app .vchat-inbox-section #vchat-wa-window-banner>span{
  display:block!important;
  flex:1 1 auto!important;
  min-width:0!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  font-size:11px!important;
  line-height:1.4!important;
  color:inherit!important;
}
#vchat-frontend-app.vchat-frontend-app .vchat-inbox-section #vchat-wa-window-banner>span strong{
  font-size:11px!important;
  font-weight:850!important;
  color:inherit!important;
}
#vchat-frontend-app.vchat-frontend-app .vchat-inbox-section #vchat-wa-window-banner>span::before{
  content:"";
  display:inline-block;
  width:6px;
  height:6px;
  margin-right:7px;
  vertical-align:middle;
  border-radius:50%;
  background:#2caa72;
}
#vchat-frontend-app.vchat-frontend-app .vchat-inbox-section #vchat-wa-window-banner.is-closed>span::before{background:#d49d30}
#vchat-frontend-app.vchat-frontend-app .vchat-inbox-section #vchat-wa-window-banner button[data-vchat-wa-open-templates]{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  flex:0 0 auto!important;
  min-width:0!important;
  max-width:40%!important;
  height:27px!important;
  min-height:27px!important;
  margin:0!important;
  padding:0 11px!important;
  border:1px solid #ded9fc!important;
  border-radius:9px!important;
  background:#eeeaff!important;
  color:#564bd1!important;
  font-size:10px!important;
  font-weight:850!important;
  line-height:1!important;
  white-space:nowrap!important;
  box-shadow:none!important;
}
#vchat-frontend-app.vchat-frontend-app .vchat-inbox-section #vchat-wa-window-banner button[data-vchat-wa-open-templates]:hover{
  background:#e3deff!important;
  border-color:#cbc3fc!important;
}

/* Response field: one compact, responsive row, expand only when user types. */
#vchat-frontend-app.vchat-frontend-app .vchat-inbox-section .vchat-composer{
  display:flex!important;
  flex:0 0 auto!important;
  align-items:center!important;
  gap:9px!important;
  width:100%!important;
  min-width:0!important;
  min-height:56px!important;
  height:auto!important;
  margin:0!important;
  padding:6px 7px 6px 13px!important;
  border:1px solid #dedbf0!important;
  border-radius:15px!important;
  background:#fff!important;
  box-shadow:0 1px 4px rgba(37,30,85,.055)!important;
  grid-template-columns:none!important;
}
#vchat-frontend-app.vchat-frontend-app .vchat-inbox-section .vchat-composer:focus-within{
  border-color:#aca4f3!important;
  box-shadow:0 0 0 3px rgba(106,89,229,.08)!important;
}
#vchat-frontend-app.vchat-frontend-app .vchat-inbox-section #vchat-message-input{
  flex:1 1 auto!important;
  width:100%!important;
  min-width:0!important;
  min-height:36px!important;
  height:40px;
  max-height:136px!important;
  padding:8px 2px!important;
  margin:0!important;
  border:0!important;
  border-radius:0!important;
  resize:none!important;
  box-shadow:none!important;
  background:transparent!important;
  color:#22243e!important;
  font-size:13px!important;
  line-height:1.45!important;
  outline:none!important;
}
#vchat-frontend-app.vchat-frontend-app .vchat-inbox-section #vchat-send-message{
  display:inline-flex!important;
  flex:0 0 auto!important;
  align-self:center!important;
  justify-content:center!important;
  align-items:center!important;
  min-width:73px!important;
  width:auto!important;
  height:40px!important;
  min-height:40px!important;
  max-height:40px!important;
  margin:0!important;
  padding:0 15px!important;
  border-radius:11px!important;
  background:#6256e8!important;
  color:#fff!important;
  font-size:11px!important;
  font-weight:800!important;
  line-height:1!important;
  box-shadow:none!important;
  transform:none!important;
}
#vchat-frontend-app.vchat-frontend-app .vchat-inbox-section #vchat-send-message:hover{background:#5346d7!important}
#vchat-frontend-app.vchat-frontend-app .vchat-inbox-section #vchat-composer-hint{display:none!important}

/* Emoji popup is PORTALED to <body> by the visual-only positioning helper.
   This breaks out of transformed/overflowed/isolated Inbox ancestors. */
body > #vchat-emoji-picker.vchat-emoji-picker{
  display:flex!important;
  position:fixed!important;
  z-index:2147483000!important;
  inset:auto!important;
  top:var(--vc-emoji-y,16px)!important;
  left:var(--vc-emoji-x,16px)!important;
  right:auto!important;
  bottom:auto!important;
  width:var(--vc-emoji-w,370px)!important;
  min-width:0!important;
  max-width:calc(100vw - 20px)!important;
  height:auto!important;
  min-height:0!important;
  max-height:var(--vc-emoji-h,360px)!important;
  padding:12px!important;
  margin:0!important;
  border:1px solid #e4e0f2!important;
  border-radius:17px!important;
  box-sizing:border-box!important;
  flex-direction:column!important;
  overflow:hidden!important;
  background:#fff!important;
  box-shadow:0 24px 70px rgba(26,21,66,.22)!important;
  isolation:isolate!important;
}
body > #vchat-emoji-picker.vchat-emoji-picker[hidden]{display:none!important}
body > #vchat-emoji-picker.vchat-emoji-picker > header{
  display:flex!important;
  flex:0 0 auto!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:8px!important;
  width:100%!important;
  min-height:35px!important;
  padding:0 0 8px!important;
  margin:0 0 8px!important;
  border:0!important;
  border-bottom:1px solid #eeeaf6!important;
  background:#fff!important;
}
body > #vchat-emoji-picker.vchat-emoji-picker > header strong{display:block!important;font-size:13px!important;font-weight:850!important;color:#25264b!important}
body > #vchat-emoji-picker.vchat-emoji-picker > header small{display:block!important;font-size:10px!important;color:#898ba2!important}
body > #vchat-emoji-picker.vchat-emoji-picker > header button{
  display:grid!important;
  flex:0 0 30px!important;
  place-items:center!important;
  width:30px!important;
  height:30px!important;
  min-height:30px!important;
  padding:0!important;
  border:0!important;
  border-radius:9px!important;
  background:#f4f1fc!important;
  color:#6256e8!important;
  font-size:19px!important;
}
body > #vchat-emoji-picker.vchat-emoji-picker > nav.vchat-emoji-categories{
  display:flex!important;
  flex:0 0 auto!important;
  flex-wrap:nowrap!important;
  align-items:center!important;
  gap:5px!important;
  width:100%!important;
  min-width:0!important;
  min-height:40px!important;
  max-height:46px!important;
  padding:2px 0 5px!important;
  margin:0 0 6px!important;
  border:0!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  scrollbar-width:thin!important;
  scrollbar-color:#e0daf4 transparent!important;
}
body > #vchat-emoji-picker.vchat-emoji-picker > nav.vchat-emoji-categories button{
  display:grid!important;
  flex:0 0 36px!important;
  place-items:center!important;
  width:36px!important;
  min-width:36px!important;
  height:35px!important;
  min-height:35px!important;
  margin:0!important;
  padding:0!important;
  border:1px solid transparent!important;
  border-radius:10px!important;
  background:#f7f6fb!important;
  color:#55516f!important;
  cursor:pointer!important;
}
body > #vchat-emoji-picker.vchat-emoji-picker > nav.vchat-emoji-categories button.is-active{border-color:#d7d0fc!important;background:#eeebff!important}
body > #vchat-emoji-picker.vchat-emoji-picker > nav.vchat-emoji-categories button span{font-size:18px!important;line-height:1!important}
body > #vchat-emoji-picker.vchat-emoji-picker > nav.vchat-emoji-categories button b{display:none!important}
body > #vchat-emoji-picker.vchat-emoji-picker > .vchat-emoji-grid{
  display:grid!important;
  flex:1 1 auto!important;
  min-width:0!important;
  min-height:0!important;
  width:100%!important;
  grid-template-columns:repeat(8,minmax(0,1fr))!important;
  align-content:start!important;
  gap:4px!important;
  margin:0!important;
  padding:1px 2px 3px!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  overscroll-behavior:contain!important;
}
body > #vchat-emoji-picker.vchat-emoji-picker > .vchat-emoji-grid button{
  display:grid!important;
  place-items:center!important;
  width:100%!important;
  min-width:0!important;
  height:37px!important;
  min-height:37px!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  border-radius:9px!important;
  background:transparent!important;
  font-size:22px!important;
  line-height:1!important;
  cursor:pointer!important;
}
body > #vchat-emoji-picker.vchat-emoji-picker > .vchat-emoji-grid button:hover,
body > #vchat-emoji-picker.vchat-emoji-picker > .vchat-emoji-grid button:focus-visible{background:#f0edff!important;outline:1px solid #d8d0fc!important}

@media (max-width:760px){
  #vchat-frontend-app.vchat-frontend-app .vchat-inbox-section .vchat-composer-wrap{
    padding:6px 9px calc(8px + env(safe-area-inset-bottom, 0px))!important;
  }
  #vchat-frontend-app.vchat-frontend-app .vchat-inbox-section .vchat-composer-tools{
    gap:4px!important;
    height:33px!important;
    min-height:33px!important;
    max-height:33px!important;
    padding:0 0 3px!important;
  }
  #vchat-frontend-app.vchat-frontend-app .vchat-inbox-section .vchat-composer-tools button{
    height:29px!important;
    min-height:29px!important;
    max-height:29px!important;
    font-size:11px!important;
    padding:0 7px!important;
  }
  #vchat-frontend-app.vchat-frontend-app .vchat-inbox-section .vchat-composer-tools #vchat-attach{
    min-width:65px!important;
    width:auto!important;
    font-size:11px!important;
    padding:0 6px!important;
  }
  #vchat-frontend-app.vchat-frontend-app .vchat-inbox-section .vchat-composer-tools #vchat-schedule-message{
    min-width:0!important;
    width:auto!important;
    display:inline-flex!important;
  }
  #vchat-frontend-app.vchat-frontend-app .vchat-inbox-section .vchat-composer-tools #vchat-saved-reply{
    font-size:10px!important;
    padding:0 6px!important;
  }
  #vchat-frontend-app.vchat-frontend-app .vchat-inbox-section #vchat-wa-window-banner.vchat-wa-window{
    min-height:31px!important;
    gap:6px!important;
    padding:3px 4px 3px 8px!important;
    margin:2px 0 5px!important;
  }
  #vchat-frontend-app.vchat-frontend-app .vchat-inbox-section #vchat-wa-window-banner>span{
    font-size:10px!important;
  }
  #vchat-frontend-app.vchat-frontend-app .vchat-inbox-section #vchat-wa-window-banner button[data-vchat-wa-open-templates]{
    height:26px!important;
    min-height:26px!important;
    padding:0 8px!important;
    font-size:10px!important;
  }
  #vchat-frontend-app.vchat-frontend-app .vchat-inbox-section .vchat-composer{
    min-height:54px!important;
    padding:5px 6px 5px 11px!important;
    gap:6px!important;
  }
  #vchat-frontend-app.vchat-frontend-app .vchat-inbox-section #vchat-message-input{
    height:40px;
    min-height:39px!important;
    max-height:110px!important;
    font-size:16px!important;
    line-height:1.3!important;
  }
  #vchat-frontend-app.vchat-frontend-app .vchat-inbox-section #vchat-send-message{
    height:40px!important;
    min-height:40px!important;
    max-height:40px!important;
    width:42px!important;
    min-width:42px!important;
    padding:0!important;
    border-radius:10px!important;
  }
  #vchat-frontend-app.vchat-frontend-app .vchat-inbox-section .vchat-send-label{display:none!important}
  #vchat-frontend-app.vchat-frontend-app .vchat-inbox-section .vchat-send-icon{display:inline!important;font-size:18px!important}
  body > #vchat-emoji-picker.vchat-emoji-picker > .vchat-emoji-grid{grid-template-columns:repeat(7,minmax(0,1fr))!important}
}
@media (prefers-reduced-motion:reduce){
  body > #vchat-emoji-picker.vchat-emoji-picker{scroll-behavior:auto!important}
}