/* Vchat 0.62.21-alpha — UI surface hardening
   Exact-scope visual layer for Inbox action center + Meta connection drawer.
   Presentation only: no canonical IDs, DOM ownership or event handlers are replaced. */

/* ========================================================================== */
/* Inbox · More actions                                                       */
/* ========================================================================== */
#vchat-modal.is-inbox-command-modal .vchat-modal-dialog{
  overflow:hidden!important;
}
#vchat-modal.is-inbox-command-modal .vchat-modal-body{
  max-height:min(70dvh,680px)!important;
  overflow:auto!important;
  padding:20px 22px 24px!important;
  scrollbar-width:thin!important;
  scrollbar-color:#d9d6e9 transparent!important;
}
#vchat-modal.is-inbox-command-modal .vchat-inbox-command-list{
  display:grid!important;
  gap:10px!important;
  min-width:0!important;
}
#vchat-modal.is-inbox-command-modal .vchat-focus-tools-marker{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:8px!important;
  margin:0 0 10px!important;
  padding:0!important;
  min-width:0!important;
}
#vchat-modal.is-inbox-command-modal .vchat-focus-tools-kicker,
#vchat-modal.is-inbox-command-modal .vchat-focus-tools-divider{
  grid-column:1/-1!important;
}
#vchat-modal.is-inbox-command-modal .vchat-focus-tools-kicker{
  display:flex!important;
  align-items:flex-end!important;
  justify-content:space-between!important;
  gap:14px!important;
  padding:0 2px 7px!important;
  margin:0!important;
}
#vchat-modal.is-inbox-command-modal .vchat-focus-tools-kicker strong{
  color:#2a2b43!important;
  font-size:11px!important;
  font-weight:850!important;
  letter-spacing:.01em!important;
}
#vchat-modal.is-inbox-command-modal .vchat-focus-tools-kicker small{
  max-width:260px!important;
  color:#8b8da1!important;
  font-size:9px!important;
  line-height:1.35!important;
  text-align:right!important;
}
#vchat-modal.is-inbox-command-modal button.vchat-focus-proxy-action{
  position:relative!important;
  z-index:1!important;
  width:100%!important;
  min-width:0!important;
  min-height:58px!important;
  display:grid!important;
  grid-template-columns:36px minmax(0,1fr)!important;
  align-items:center!important;
  gap:11px!important;
  margin:0!important;
  padding:10px 12px!important;
  border:1px solid #e6e5ef!important;
  border-radius:14px!important;
  background:#fff!important;
  color:#292b43!important;
  text-align:left!important;
  box-shadow:0 1px 0 rgba(37,32,76,.02)!important;
  outline:none!important;
  transform:none!important;
  pointer-events:auto!important;
  cursor:pointer!important;
  appearance:none!important;
  -webkit-appearance:none!important;
}
#vchat-modal.is-inbox-command-modal button.vchat-focus-proxy-action:hover{
  border-color:#cbc6f3!important;
  background:#faf9ff!important;
  box-shadow:0 8px 22px rgba(59,48,112,.06)!important;
  transform:translateY(-1px)!important;
}
#vchat-modal.is-inbox-command-modal button.vchat-focus-proxy-action:focus-visible{
  border-color:#8f83ef!important;
  box-shadow:0 0 0 3px rgba(104,88,224,.12)!important;
}
#vchat-modal.is-inbox-command-modal button.vchat-focus-proxy-action>span{
  display:grid!important;
  place-items:center!important;
  width:36px!important;
  height:36px!important;
  margin:0!important;
  border:0!important;
  border-radius:11px!important;
  background:#f2f0ff!important;
  color:#6255d7!important;
  font-size:13px!important;
  font-weight:900!important;
  line-height:1!important;
}
#vchat-modal.is-inbox-command-modal button.vchat-focus-proxy-action>div{
  min-width:0!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  background:transparent!important;
}
#vchat-modal.is-inbox-command-modal button.vchat-focus-proxy-action strong{
  display:block!important;
  margin:0!important;
  color:#292b43!important;
  font-size:11.5px!important;
  font-weight:850!important;
  line-height:1.25!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
#vchat-modal.is-inbox-command-modal button.vchat-focus-proxy-action small{
  display:block!important;
  margin:3px 0 0!important;
  color:#8b8da1!important;
  font-size:9.5px!important;
  font-weight:600!important;
  line-height:1.3!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
#vchat-modal.is-inbox-command-modal .vchat-focus-tools-divider{
  height:1px!important;
  margin:3px 0 1px!important;
  background:#eceaf4!important;
  border:0!important;
}
/* Canonical command buttons below the proxy tools stay visually neutral too. */
#vchat-modal.is-inbox-command-modal .vchat-inbox-command-list>button{
  position:relative!important;
  z-index:1!important;
  pointer-events:auto!important;
  cursor:pointer!important;
  border-color:#e7e7f1!important;
  background:#fff!important;
  color:#252842!important;
  box-shadow:none!important;
  transform:none!important;
}
#vchat-modal.is-inbox-command-modal .vchat-inbox-command-list>button:hover{
  border-color:#cbc8f6!important;
  background:#faf9ff!important;
}

/* ========================================================================== */
/* Meta · Connection Center drawer                                            */
/* ========================================================================== */
.vchat-mcd-modal,
.vchat-mcd-modal *{box-sizing:border-box!important;}
.vchat-mcd-modal .vchat-mcd-shell{
  width:min(740px,100vw)!important;
  background:linear-gradient(180deg,#fff 0%,#fcfcff 100%)!important;
}
.vchat-mcd-modal .vchat-mcd-shell>main.vchat-mcd-body{
  min-height:0!important;
  overflow:auto!important;
  padding:30px 36px 44px!important;
  scroll-padding-top:22px!important;
  scrollbar-width:thin!important;
  scrollbar-color:#d6dbe7 transparent!important;
}
.vchat-mcd-modal .vchat-mcd-body>*{
  max-width:100%!important;
}
.vchat-mcd-modal .vchat-mcd-steps{
  margin:0 0 26px!important;
  padding:0 2px!important;
}
.vchat-mcd-modal .vchat-mcd-ready-strip{
  margin:0 0 28px!important;
  padding:14px 16px!important;
  border:1px solid #e0e5f0!important;
  border-radius:17px!important;
  background:#fbfcff!important;
  box-shadow:0 6px 18px rgba(41,44,79,.035)!important;
}
.vchat-mcd-modal .vchat-mcd-ready-strip button{
  position:relative!important;
  z-index:1!important;
  min-height:36px!important;
  padding:0 13px!important;
  border:1px solid #ddd9f5!important;
  border-radius:11px!important;
  background:#fff!important;
  color:#5f52cf!important;
  font-size:10.5px!important;
  font-weight:850!important;
  line-height:1!important;
  box-shadow:none!important;
  outline:none!important;
  transform:none!important;
  pointer-events:auto!important;
  cursor:pointer!important;
}
.vchat-mcd-modal .vchat-mcd-ready-strip button:hover{
  border-color:#bbb2ef!important;
  background:#f8f6ff!important;
}
.vchat-mcd-modal .vchat-mcd-section-head{
  margin:0 0 22px!important;
  padding:0 2px!important;
}
.vchat-mcd-modal .vchat-mcd-section-head>span{
  margin:0 0 8px!important;
  color:#6256d8!important;
  font-size:9.5px!important;
  font-weight:900!important;
  letter-spacing:.14em!important;
}
.vchat-mcd-modal .vchat-mcd-section-head h3{
  margin:0!important;
  color:#11172b!important;
  font-size:22px!important;
  line-height:1.2!important;
  letter-spacing:-.025em!important;
}
.vchat-mcd-modal .vchat-mcd-section-head p{
  margin:8px 0 0!important;
  max-width:590px!important;
  color:#778399!important;
  font-size:12px!important;
  line-height:1.55!important;
}
.vchat-mcd-modal .vchat-mcd-form{
  display:block!important;
  padding:0 2px 4px!important;
}
.vchat-mcd-modal .vchat-mcd-grid{
  gap:16px!important;
}
.vchat-mcd-modal .vchat-mcd-field{
  gap:8px!important;
  margin:0 0 18px!important;
}
.vchat-mcd-modal .vchat-mcd-field>span{
  display:block!important;
  padding-left:1px!important;
  color:#465268!important;
  font-size:10.5px!important;
  font-weight:850!important;
}
.vchat-mcd-modal .vchat-mcd-field input,
.vchat-mcd-modal .vchat-mcd-field textarea,
.vchat-mcd-modal .vchat-mcd-field select{
  min-width:0!important;
  border:1px solid #dce1eb!important;
  border-radius:14px!important;
  background:#fff!important;
  color:#10172a!important;
  box-shadow:0 1px 0 rgba(18,23,42,.02)!important;
}
.vchat-mcd-modal .vchat-mcd-field input,
.vchat-mcd-modal .vchat-mcd-field select{
  min-height:48px!important;
  padding:12px 14px!important;
}
.vchat-mcd-modal .vchat-mcd-field textarea{
  min-height:118px!important;
  padding:13px 14px!important;
}
.vchat-mcd-modal .vchat-mcd-field input:focus,
.vchat-mcd-modal .vchat-mcd-field textarea:focus,
.vchat-mcd-modal .vchat-mcd-field select:focus{
  border-color:#9388ef!important;
  box-shadow:0 0 0 4px rgba(104,88,224,.10)!important;
  outline:none!important;
}
.vchat-mcd-modal .vchat-mcd-field small{
  padding-left:1px!important;
  color:#97a1b2!important;
  font-size:10px!important;
  line-height:1.45!important;
}
.vchat-mcd-modal .vchat-mcd-note,
.vchat-mcd-modal .vchat-mcd-test-box,
.vchat-mcd-modal .vchat-mcd-success-hero,
.vchat-mcd-modal .vchat-mcd-health-grid article{
  border-color:#e3e7ef!important;
  box-shadow:0 5px 18px rgba(31,37,64,.03)!important;
}
.vchat-mcd-modal .vchat-mcd-actions{
  margin-top:22px!important;
  padding-top:20px!important;
}
.vchat-mcd-modal .vchat-mcd-actions button,
.vchat-mcd-modal .vchat-mcd-gate button,
.vchat-mcd-modal .vchat-mcd-test-box button{
  position:relative!important;
  z-index:1!important;
  min-height:43px!important;
  padding:0 16px!important;
  border:1px solid #dfe3ec!important;
  border-radius:12px!important;
  background:#fff!important;
  color:#505c72!important;
  font-size:11px!important;
  font-weight:850!important;
  line-height:1!important;
  box-shadow:none!important;
  outline:none!important;
  pointer-events:auto!important;
  cursor:pointer!important;
}
.vchat-mcd-modal .vchat-mcd-actions .primary,
.vchat-mcd-modal .vchat-mcd-gate .primary{
  border-color:transparent!important;
  background:linear-gradient(105deg,#7656f5 0%,#6064f3 52%,#42b3ef 100%)!important;
  color:#fff!important;
  box-shadow:0 10px 24px rgba(92,84,225,.18)!important;
}
.vchat-mcd-modal .vchat-mcd-actions .secondary{
  border-color:#d5d0f6!important;
  background:#f6f4ff!important;
  color:#5f52cf!important;
}
.vchat-mcd-modal .vchat-mcd-actions .ghost,
.vchat-mcd-modal .vchat-mcd-gate .ghost{
  border-color:#dfe3ec!important;
  background:#fff!important;
  color:#58657a!important;
}
.vchat-mcd-modal .vchat-mcd-actions .danger{
  border-color:#f4cbd4!important;
  background:#fff8fa!important;
  color:#b53b57!important;
}
.vchat-mcd-modal .vchat-mcd-actions button:hover,
.vchat-mcd-modal .vchat-mcd-gate button:hover,
.vchat-mcd-modal .vchat-mcd-test-box button:hover{
  transform:translateY(-1px)!important;
}

@media(max-width:760px){
  #vchat-modal.is-inbox-command-modal .vchat-focus-tools-marker{
    grid-template-columns:1fr!important;
  }
  #vchat-modal.is-inbox-command-modal .vchat-focus-tools-kicker,
  #vchat-modal.is-inbox-command-modal .vchat-focus-tools-divider{
    grid-column:auto!important;
  }
  #vchat-modal.is-inbox-command-modal .vchat-focus-tools-kicker small{display:none!important;}
  #vchat-modal.is-inbox-command-modal .vchat-modal-body{
    max-height:78dvh!important;
    padding:16px!important;
  }
  #vchat-modal.is-inbox-command-modal button.vchat-focus-proxy-action{
    min-height:54px!important;
    grid-template-columns:34px minmax(0,1fr)!important;
    padding:9px 11px!important;
  }
  #vchat-modal.is-inbox-command-modal button.vchat-focus-proxy-action>span{
    width:34px!important;height:34px!important;
  }

  .vchat-mcd-modal .vchat-mcd-shell>main.vchat-mcd-body{
    padding:24px 20px 36px!important;
  }
  .vchat-mcd-modal .vchat-mcd-ready-strip{
    margin-bottom:24px!important;
  }
  .vchat-mcd-modal .vchat-mcd-grid.two{
    grid-template-columns:1fr!important;
    gap:0!important;
  }
}
@media(max-width:420px){
  .vchat-mcd-modal .vchat-mcd-shell>main.vchat-mcd-body{
    padding:20px 14px 30px!important;
  }
  .vchat-mcd-modal .vchat-mcd-section-head h3{font-size:20px!important;}
}
