/* QGT v4.1.20.1 — compact + viewport-safe chat composer */
.chat-compose{
  position:relative;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 42px 44px!important;
  grid-template-rows:44px auto;
  align-items:stretch;
  gap:8px!important;
  padding-top:12px!important;
  min-width:0;
}
.chat-input-wrap{position:relative;min-width:0;height:44px}
.chat-input-wrap input{
  width:100%!important;
  min-width:0;
  height:44px!important;
  padding:0 54px 0 14px!important;
  border:1px solid rgba(255,255,255,.10)!important;
  border-radius:14px!important;
  background:linear-gradient(180deg,rgba(24,29,47,.96),rgba(15,19,33,.96))!important;
  color:#f7f8ff!important;
  font-size:11px!important;
  line-height:1;
  outline:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 8px 22px rgba(0,0,0,.12);
  transition:border-color .16s ease,box-shadow .16s ease,background .16s ease;
}
.chat-input-wrap input::placeholder{color:#737d94}
.chat-input-wrap input:focus{
  border-color:rgba(139,111,255,.62)!important;
  background:linear-gradient(180deg,rgba(28,32,54,.98),rgba(16,20,36,.98))!important;
  box-shadow:0 0 0 3px rgba(123,97,255,.10),inset 0 1px 0 rgba(255,255,255,.05);
}
.chat-input-wrap span{
  right:9px!important;
  top:50%!important;
  transform:translateY(-50%);
  padding:3px 5px;
  border-radius:999px;
  background:rgba(255,255,255,.045);
  color:#646e84!important;
  font-size:7px!important;
  line-height:1;
  pointer-events:none;
}
.chat-emoji-tools{display:flex;align-items:stretch;min-width:0;height:44px}
.chat-emoji-toggle,.send-btn{
  width:100%;height:44px;border-radius:14px!important;display:grid;place-items:center;cursor:pointer;
  transition:transform .16s ease,filter .16s ease,border-color .16s ease,box-shadow .16s ease;
}
.chat-emoji-toggle{
  border:1px solid rgba(255,255,255,.10)!important;
  background:linear-gradient(180deg,rgba(27,31,50,.96),rgba(16,20,34,.96))!important;
  color:#fff;padding:0;position:relative;
  box-shadow:inset 0 1px rgba(255,255,255,.04);
}
.chat-emoji-toggle:hover,.chat-emoji-toggle[aria-expanded="true"]{
  transform:translateY(-1px);
  border-color:rgba(167,139,250,.55)!important;
  background:linear-gradient(180deg,rgba(72,55,135,.56),rgba(35,29,69,.78))!important;
}
.chat-emoji-toggle span{font-size:20px;line-height:1;filter:drop-shadow(0 2px 4px rgba(0,0,0,.22))}
.chat-emoji-toggle i{position:absolute;right:4px;bottom:2px;font-style:normal;font-size:9px;font-weight:1000;color:#d8d0ff;line-height:1}
.send-btn{
  border:1px solid rgba(167,139,250,.30)!important;
  background:linear-gradient(145deg,#886fff,#6046e7)!important;
  color:white!important;
  font-size:0!important;
  padding:0!important;
  box-shadow:0 9px 22px rgba(98,70,230,.28),inset 0 1px rgba(255,255,255,.16);
}
.send-btn::before{content:'➤';display:block;font-size:17px;line-height:1;transform:translateX(1px);text-shadow:0 2px 7px rgba(0,0,0,.28)}
.send-btn:not(:disabled):hover{transform:translateY(-1px);filter:brightness(1.08);box-shadow:0 12px 26px rgba(98,70,230,.36),inset 0 1px rgba(255,255,255,.18)}
.send-btn:disabled{opacity:.38!important;filter:saturate(.6);cursor:not-allowed}
.chat-compose>small{grid-column:1/-1!important;margin:0 2px;color:#626b80!important;font-size:8px!important;line-height:1.3;min-height:10px}

/* Picker is appended to body by JS, therefore no rail/overflow clipping. */
.chat-emoji-picker{
  display:none;
  position:fixed;
  z-index:260;
  width:312px;
  max-width:calc(100vw - 16px);
  max-height:min(356px,calc(100dvh - 16px));
  padding:11px;
  overflow:hidden;
  border:1px solid rgba(167,139,250,.30);
  border-radius:17px;
  background:linear-gradient(180deg,rgba(18,20,38,.985),rgba(9,11,22,.985));
  box-shadow:0 24px 70px rgba(0,0,0,.58),0 0 0 1px rgba(255,255,255,.025) inset;
  backdrop-filter:blur(22px);
  -webkit-backdrop-filter:blur(22px);
}
.chat-emoji-picker.open{display:block;animation:chatEmojiIn .15s ease-out}
.chat-emoji-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;margin-bottom:9px;padding-bottom:9px;border-bottom:1px solid rgba(255,255,255,.07)}
.chat-emoji-tab{min-width:0;border:0;border-radius:9px;padding:7px 4px;background:transparent;color:#9299ad;font-size:10px;font-weight:850;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}
.chat-emoji-tab:hover{background:rgba(255,255,255,.05);color:#d6d9e5}
.chat-emoji-tab.active{background:linear-gradient(145deg,rgba(139,92,246,.27),rgba(104,75,210,.15));color:#eee9ff;box-shadow:inset 0 0 0 1px rgba(167,139,250,.15)}
.chat-emoji-grid{display:grid;grid-template-columns:repeat(7,minmax(32px,1fr));gap:4px;max-height:min(216px,38dvh);overflow:auto;overscroll-behavior:contain;padding:2px;scrollbar-width:thin;scrollbar-color:#343a51 transparent}
.chat-emoji-item{height:36px;min-width:0;border:0;border-radius:10px;background:transparent;color:#fff;font-size:20px;cursor:pointer;display:grid;place-items:center;transition:background .11s ease,transform .11s ease}
.chat-emoji-item:hover,.chat-emoji-item:focus-visible{background:rgba(255,255,255,.09);transform:scale(1.08);outline:none}
.chat-emoji-item.symbol{font-size:11px;font-weight:950;color:#ddd6fe;letter-spacing:-.02em}
.chat-emoji-tip{margin-top:8px;padding-top:2px;color:#697287;font-size:9px;line-height:1.3;text-align:center}
@keyframes chatEmojiIn{from{opacity:0;transform:translateY(6px) scale(.985)}to{opacity:1;transform:none}}

@media(max-width:820px){
  .chat-compose{grid-template-columns:minmax(0,1fr) 44px 46px!important;gap:7px!important}
  .chat-input-wrap,.chat-input-wrap input,.chat-emoji-tools,.chat-emoji-toggle,.send-btn{height:46px!important}
  .chat-emoji-picker{width:min(336px,calc(100vw - 16px));border-radius:18px}
  .chat-emoji-grid{grid-template-columns:repeat(7,minmax(34px,1fr));max-height:min(232px,42dvh)}
  .chat-emoji-item{height:38px;font-size:21px}
}
@media(max-width:420px){
  .chat-compose{grid-template-columns:minmax(0,1fr) 42px 44px!important;gap:6px!important}
  .chat-input-wrap input{padding-left:12px!important;padding-right:46px!important;font-size:10px!important}
  .chat-emoji-picker{width:calc(100vw - 12px);max-width:calc(100vw - 12px);padding:9px}
  .chat-emoji-grid{grid-template-columns:repeat(6,minmax(36px,1fr));gap:3px;max-height:min(246px,46dvh)}
  .chat-emoji-item{height:39px;font-size:21px}
  .chat-emoji-tab{font-size:9px;padding:7px 2px}
}
@media(max-width:340px){
  .chat-compose{grid-template-columns:minmax(0,1fr) 40px 42px!important}
  .chat-emoji-grid{grid-template-columns:repeat(5,minmax(38px,1fr))}
  .chat-emoji-tip{display:none}
}