/* V900S7L8A_OPENING_DESIGN_LOCKED_LAYER */
/* Scope: opening header, user pill, hamburger, bottom composer only. */
/* Forbidden here: chat, message, task list, customer card, backend logic. */

.hero{
  position:fixed !important;
  top:calc(18px + env(safe-area-inset-top)) !important;
  left:50% !important;
  transform:translateX(-50%) !important;
  width:min(100%,430px) !important;
  z-index:42 !important;
  padding-top:0 !important;
  padding-bottom:10px !important;
  gap:4px !important;
  pointer-events:none !important;
  background:linear-gradient(
    180deg,
    rgba(251,252,254,.985) 0%,
    rgba(251,252,254,.965) 68%,
    rgba(251,252,254,.82) 88%,
    rgba(251,252,254,0) 100%
  ) !important;
}

.hero > *{
  pointer-events:auto !important;
}

.brandRow{
  min-height:40px !important;
  gap:8px !important;
  padding:4px 10px 2px 10px !important;
  border-radius:18px !important;
  background:rgba(251,252,254,.88) !important;
}

.brandLogo{
  width:73px !important;
  height:auto !important;
  display:block !important;
}

.businessName{
  font-size:17px !important;
  line-height:1.05 !important;
  font-weight:500 !important;
}

.userPill{
  margin-top:2px !important;
  min-height:28px !important;
  padding:5px 16px !important;
  font-size:11px !important;
  gap:8px !important;
  max-width:calc(100vw - 104px) !important;
  background:rgba(255,255,255,.92) !important;
  border:1px solid rgba(151,163,178,.24) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.90),
    0 8px 20px rgba(15,23,42,.035) !important;
}

.statusDot{
  width:8px !important;
  height:8px !important;
}

.mainSpace{
  min-height:calc(100svh - 152px) !important;
  padding-top:118px !important;
}

.menuButton{
  position:fixed !important;
  top:calc(14px + env(safe-area-inset-top)) !important;
  left:18px !important;
  z-index:80 !important;
  width:38px !important;
  height:38px !important;
  border:0 !important;
  border-radius:14px !important;
  background:rgba(255,255,255,.88) !important;
  color:#7d8794 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:0 !important;
  cursor:pointer !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.80),
    0 8px 22px rgba(15,23,42,.035) !important;
}

.menuButtonLines{
  width:18px !important;
  height:13px !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:space-between !important;
}

.menuButtonLines span{
  display:block !important;
  height:1.6px !important;
  border-radius:999px !important;
  background:#7d8794 !important;
}

.composer{
  width:min(100%,430px) !important;
}

.composerInner{
  direction:ltr !important;
  grid-template-columns:48px 1fr 36px 44px !important;
  min-height:64px !important;
  padding:8px 10px !important;
  border-radius:34px !important;
  align-items:center !important;
}

.iconBtn,
.sendBtn{
  width:42px !important;
  height:42px !important;
  min-width:42px !important;
  min-height:42px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:0 !important;
  line-height:1 !important;
  color:#111827 !important;
  background:transparent !important;
}

#plusBtn{
  font-size:44px !important;
  font-weight:200 !important;
  line-height:1 !important;
  transform:translateY(-1px) !important;
  color:#111827 !important;
}

#micBtn,
#sendBtn,
#plusBtn{
  align-self:center !important;
}

#micBtn{
  justify-self:end !important;
}

#sendBtn{
  justify-self:end !important;
}

#micBtn img,
#sendBtn img{
  width:28px !important;
  height:28px !important;
  object-fit:contain !important;
  display:block !important;
}

.input,
.input:focus,
textarea.input,
textarea.input:focus{
  align-self:center !important;
  color:#111827 !important;
  -webkit-text-fill-color:#111827 !important;
  caret-color:#111827 !important;
  opacity:1 !important;
  font-weight:500 !important;
  padding:8px 6px !important;
}

.input::placeholder,
textarea.input::placeholder{
  color:#9aa3af !important;
  -webkit-text-fill-color:#9aa3af !important;
  opacity:1 !important;
  font-weight:500 !important;
}
