/* Shieldy UI corrections v392: own-message controls + reaction emoji geometry. */

/* ---------- Own messages: unified form controls ---------- */
#sh-interaction-view-messages .custom-block-fields :is(input:not([type="hidden"]):not([type="checkbox"]):not([type="color"]),textarea),
#sh-interaction-view-messages .banner-overlay-editor :is(input:not([type="hidden"]):not([type="checkbox"]):not([type="color"]),textarea){
  display:block!important;
  width:100%!important;
  min-width:0!important;
  min-height:48px!important;
  margin:0!important;
  padding:12px 14px!important;
  border:1px solid var(--account-border)!important;
  border-radius:11px!important;
  background:var(--account-surface-soft)!important;
  color:var(--account-text)!important;
  box-shadow:none!important;
  font:700 14px/1.45 Nunito,sans-serif!important;
  letter-spacing:0!important;
  text-align:left!important;
  vertical-align:middle!important;
}
#sh-interaction-view-messages .custom-block-fields textarea,
#sh-interaction-view-messages .banner-overlay-editor textarea{
  resize:vertical!important;
  overflow-y:hidden!important;
  line-height:1.5!important;
}
#sh-interaction-view-messages .custom-block-fields .cm-block-embed-text{
  min-height:86px!important;
}
#sh-interaction-view-messages .custom-block-fields :is(.cm-block-embed-title,.cm-block-embed-footer){
  height:48px!important;
  line-height:22px!important;
}
#sh-interaction-view-messages .custom-block-fields :is(input,textarea)::placeholder,
#sh-interaction-view-messages .banner-overlay-editor :is(input,textarea)::placeholder{
  color:var(--account-muted)!important;
  opacity:.82!important;
}
#sh-interaction-view-messages .custom-block-fields :is(input,textarea):focus,
#sh-interaction-view-messages .banner-overlay-editor :is(input,textarea):focus{
  outline:0!important;
  border-color:var(--account-accent)!important;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--account-accent) 15%,transparent)!important;
}

/* Banner overlay rows have stable labels and no split words. */
#sh-interaction-view-messages .banner-overlay-controls{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(150px,1fr))!important;
  gap:12px!important;
  align-items:end!important;
}
#sh-interaction-view-messages .banner-overlay-controls>label{
  display:grid!important;
  grid-template-rows:18px 48px!important;
  gap:7px!important;
  align-content:start!important;
  min-width:0!important;
  margin:0!important;
  color:var(--account-muted)!important;
  font:900 12px/18px Nunito,sans-serif!important;
}
#sh-interaction-view-messages .banner-overlay-controls>label>span{
  display:block!important;
  min-width:0!important;
  height:18px!important;
  line-height:18px!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
#sh-interaction-view-messages .banner-overlay-controls input[type="color"]{
  width:100%!important;
  height:48px!important;
  min-height:48px!important;
  padding:5px!important;
  border:1px solid var(--account-border)!important;
  border-radius:11px!important;
  background:var(--account-surface-soft)!important;
}

/* Custom checkbox cards. */
#sh-interaction-view-messages .banner-overlay-controls>.banner-overlay-check{
  display:flex!important;
  flex-direction:row!important;
  align-items:center!important;
  justify-content:center!important;
  gap:10px!important;
  min-width:0!important;
  min-height:48px!important;
  height:48px!important;
  padding:0 14px!important;
  border:1px solid var(--account-border)!important;
  border-radius:11px!important;
  background:var(--account-surface-soft)!important;
  color:var(--account-text)!important;
}
#sh-interaction-view-messages .banner-overlay-check>span{
  display:block!important;
  width:auto!important;
  height:auto!important;
  overflow:visible!important;
  color:var(--account-text)!important;
  font:900 13px/1 Nunito,sans-serif!important;
  white-space:nowrap!important;
  text-overflow:clip!important;
}
#sh-interaction-view-messages .banner-overlay-check>input[type="checkbox"]{
  appearance:none!important;
  -webkit-appearance:none!important;
  display:grid!important;
  place-items:center!important;
  flex:0 0 24px!important;
  width:24px!important;
  min-width:24px!important;
  max-width:24px!important;
  height:24px!important;
  min-height:24px!important;
  max-height:24px!important;
  margin:0!important;
  padding:0!important;
  border:1px solid var(--account-border-strong,var(--account-border))!important;
  border-radius:7px!important;
  background:var(--account-surface)!important;
  box-shadow:none!important;
  cursor:pointer!important;
}
#sh-interaction-view-messages .banner-overlay-check>input[type="checkbox"]:checked{
  border-color:var(--account-accent)!important;
  background-color:var(--account-accent)!important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='m3.2 8.2 3 3.1 6.6-7' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")!important;
  background-position:center!important;
  background-repeat:no-repeat!important;
}
#sh-interaction-view-messages .banner-overlay-check>input[type="checkbox"]:focus-visible{
  outline:0!important;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--account-accent) 18%,transparent)!important;
}

/* Custom dropdowns: native select remains the data source, menu is fully site-styled. */
#sh-interaction-view-messages .shieldy-custom-dropdown{
  position:relative!important;
  width:100%!important;
  min-width:0!important;
  height:48px!important;
}
#sh-interaction-view-messages .shieldy-custom-dropdown-select{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important;
  opacity:0!important;
  pointer-events:none!important;
}
#sh-interaction-view-messages .shieldy-custom-dropdown-trigger{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 18px!important;
  align-items:center!important;
  gap:10px!important;
  width:100%!important;
  min-width:0!important;
  height:48px!important;
  min-height:48px!important;
  margin:0!important;
  padding:0 13px!important;
  border:1px solid var(--account-border)!important;
  border-radius:11px!important;
  background:var(--account-surface-soft)!important;
  color:var(--account-text)!important;
  box-shadow:none!important;
  font:800 14px/1 Nunito,sans-serif!important;
  text-align:left!important;
  cursor:pointer!important;
}
#sh-interaction-view-messages .shieldy-custom-dropdown-trigger:hover,
#sh-interaction-view-messages .shieldy-custom-dropdown.is-open .shieldy-custom-dropdown-trigger{
  border-color:var(--account-accent)!important;
  background:color-mix(in srgb,var(--account-accent) 7%,var(--account-surface-soft))!important;
}
#sh-interaction-view-messages .shieldy-custom-dropdown-trigger:focus-visible{
  outline:0!important;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--account-accent) 16%,transparent)!important;
}
#sh-interaction-view-messages .shieldy-custom-dropdown-value{
  min-width:0!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}
#sh-interaction-view-messages .shieldy-custom-dropdown-arrow{
  display:block!important;
  width:9px!important;
  height:9px!important;
  justify-self:center!important;
  border-right:2px solid currentColor!important;
  border-bottom:2px solid currentColor!important;
  transform:rotate(45deg) translateY(-2px)!important;
  transition:transform .16s ease!important;
}
#sh-interaction-view-messages .shieldy-custom-dropdown.is-open .shieldy-custom-dropdown-arrow{
  transform:rotate(225deg) translate(-1px,-1px)!important;
}
#sh-interaction-view-messages .shieldy-custom-dropdown-menu{
  position:absolute!important;
  z-index:1200!important;
  left:0!important;
  right:0!important;
  top:calc(100% + 7px)!important;
  display:grid!important;
  gap:4px!important;
  max-height:230px!important;
  overflow-y:auto!important;
  padding:7px!important;
  border:1px solid var(--account-border-strong,var(--account-border))!important;
  border-radius:12px!important;
  background:var(--account-surface-strong,var(--account-surface))!important;
  box-shadow:0 18px 42px rgba(15,23,42,.18)!important;
}
#sh-interaction-view-messages .shieldy-custom-dropdown-menu[hidden]{display:none!important}
#sh-interaction-view-messages .shieldy-custom-dropdown-option{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 18px!important;
  align-items:center!important;
  gap:8px!important;
  width:100%!important;
  min-height:40px!important;
  margin:0!important;
  padding:8px 10px!important;
  border:0!important;
  border-radius:9px!important;
  background:transparent!important;
  color:var(--account-text)!important;
  font:800 13px/1.25 Nunito,sans-serif!important;
  text-align:left!important;
  cursor:pointer!important;
}
#sh-interaction-view-messages .shieldy-custom-dropdown-option:hover,
#sh-interaction-view-messages .shieldy-custom-dropdown-option.is-selected{
  background:color-mix(in srgb,var(--account-accent) 10%,var(--account-surface))!important;
  color:var(--account-accent)!important;
}
#sh-interaction-view-messages .shieldy-custom-dropdown-option.is-selected::after{
  content:"✓"!important;
  justify-self:center!important;
  font-weight:900!important;
}
#sh-interaction-view-messages .shieldy-custom-dropdown-menu::-webkit-scrollbar{width:8px!important}
#sh-interaction-view-messages .shieldy-custom-dropdown-menu::-webkit-scrollbar-thumb{
  border:2px solid transparent!important;
  border-radius:999px!important;
  background:color-mix(in srgb,var(--account-accent) 48%,transparent)!important;
  background-clip:padding-box!important;
}

/* ---------- Reaction roles: explicit layout for each mode ---------- */
#sh-interaction-view-reactions .reaction-role-item-row:not(.is-button-mode){
  display:grid!important;
  grid-template-columns:76px minmax(260px,320px) minmax(260px,1fr) 150px!important;
  gap:12px!important;
  align-items:end!important;
}
#sh-interaction-view-reactions .reaction-role-item-row:not(.is-button-mode)>.rr-order-control{grid-column:1!important}
#sh-interaction-view-reactions .reaction-role-item-row:not(.is-button-mode)>.rr-reaction-field{grid-column:2!important}
#sh-interaction-view-reactions .reaction-role-item-row:not(.is-button-mode)>.rr-role-id-field{grid-column:3!important}
#sh-interaction-view-reactions .reaction-role-item-row:not(.is-button-mode)>.rr-row-actions{grid-column:4!important}

#sh-interaction-view-reactions .reaction-role-item-row.is-button-mode{
  display:grid!important;
  grid-template-columns:76px minmax(210px,250px) minmax(170px,.8fr) minmax(220px,1fr) 150px 150px!important;
  gap:10px!important;
  align-items:end!important;
}
#sh-interaction-view-reactions .reaction-role-item-row.is-button-mode>.rr-order-control{grid-column:1!important}
#sh-interaction-view-reactions .reaction-role-item-row.is-button-mode>.rr-reaction-field{grid-column:2!important}
#sh-interaction-view-reactions .reaction-role-item-row.is-button-mode>.rr-role-name-field{grid-column:3!important}
#sh-interaction-view-reactions .reaction-role-item-row.is-button-mode>.rr-role-id-field{grid-column:4!important}
#sh-interaction-view-reactions .reaction-role-item-row.is-button-mode>.rr-button-style-field{grid-column:5!important}
#sh-interaction-view-reactions .reaction-role-item-row.is-button-mode>.rr-row-actions{grid-column:6!important}

#sh-interaction-view-reactions .rr-emoji-control{
  display:grid!important;
  grid-template-columns:64px minmax(0,1fr)!important;
  width:100%!important;
  min-width:0!important;
  max-width:none!important;
  height:54px!important;
  min-height:54px!important;
  margin:0!important;
  border:1px solid var(--account-border)!important;
  border-radius:12px!important;
  background:var(--account-surface)!important;
  overflow:visible!important;
}
#sh-interaction-view-reactions .rr-emoji-control>.rr-emoji{
  position:static!important;
  display:grid!important;
  place-items:center!important;
  width:64px!important;
  min-width:64px!important;
  max-width:64px!important;
  height:52px!important;
  min-height:52px!important;
  max-height:52px!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-right:1px solid var(--account-border)!important;
  border-radius:11px 0 0 11px!important;
  background:var(--account-surface-soft)!important;
  color:var(--account-text)!important;
  box-shadow:none!important;
  text-align:center!important;
  font:25px/52px "Segoe UI Emoji","Apple Color Emoji",Nunito,sans-serif!important;
}
#sh-interaction-view-reactions .rr-emoji-picker-trigger{
  position:static!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  width:100%!important;
  min-width:0!important;
  max-width:none!important;
  height:52px!important;
  min-height:52px!important;
  max-height:52px!important;
  margin:0!important;
  padding:0 14px!important;
  border:0!important;
  border-radius:0 11px 11px 0!important;
  overflow:hidden!important;
  white-space:nowrap!important;
}
#sh-interaction-view-reactions .rr-emoji-picker-trigger-icon{
  display:grid!important;
  place-items:center!important;
  flex:0 0 22px!important;
  width:22px!important;
  height:22px!important;
  font:18px/1 "Segoe UI Emoji","Apple Color Emoji",sans-serif!important;
}
#sh-interaction-view-reactions .rr-emoji-picker-trigger>span:last-child{
  min-width:0!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}

@media(max-width:1180px){
  #sh-interaction-view-messages .banner-overlay-controls{grid-template-columns:repeat(2,minmax(180px,1fr))!important}
  #sh-interaction-view-reactions .reaction-role-item-row:not(.is-button-mode){grid-template-columns:70px minmax(220px,280px) minmax(220px,1fr) 144px!important}
  #sh-interaction-view-reactions .reaction-role-item-row.is-button-mode{grid-template-columns:70px minmax(190px,230px) minmax(160px,1fr) minmax(200px,1fr)!important}
  #sh-interaction-view-reactions .reaction-role-item-row.is-button-mode>.rr-button-style-field{grid-column:2/3!important}
  #sh-interaction-view-reactions .reaction-role-item-row.is-button-mode>.rr-row-actions{grid-column:3/5!important;justify-self:end!important}
}
@media(max-width:760px){
  #sh-interaction-view-messages .banner-overlay-controls{grid-template-columns:1fr!important}
  #sh-interaction-view-reactions .reaction-role-item-row:not(.is-button-mode),
  #sh-interaction-view-reactions .reaction-role-item-row.is-button-mode{
    grid-template-columns:52px minmax(0,1fr)!important;
    align-items:start!important;
  }
  #sh-interaction-view-reactions .reaction-role-item-row :is(.rr-reaction-field,.rr-role-name-field,.rr-role-id-field,.rr-button-style-field,.rr-row-actions){
    grid-column:2!important;
  }
  #sh-interaction-view-reactions .reaction-role-item-row>.rr-order-control{grid-column:1!important;grid-row:1/6!important}
  #sh-interaction-view-reactions .rr-emoji-control{grid-template-columns:58px minmax(0,1fr)!important}
  #sh-interaction-view-reactions .rr-emoji-control>.rr-emoji{width:58px!important;min-width:58px!important;max-width:58px!important;font-size:24px!important}
}