/* HTNS Chat cleanup r33 — resolves legacy r278 carry-over and tightens the mobile sheet. */

/* Mobile sheet: one clean edge-to-edge card with predictable internal sections. */
@media (max-width:719px){
  #htnsChatDrawer{
    top:6px !important;
    bottom:6px !important;
    left:6px !important;
    right:6px !important;
    width:auto !important;
    height:auto !important;
    min-height:0 !important;
    border-radius:26px !important;
  }
}

#htnsChatDrawer .chat-drawer-grip{margin:8px auto 0 !important;width:46px !important;height:5px !important;}
#htnsChatDrawer .chat-drawer-head{
  min-height:72px !important;
  padding:9px 14px 12px !important;
  border-bottom:1px solid rgba(204,223,238,.72) !important;
}
#htnsChatDrawer .chat-head-copy h2{font-size:22px !important;line-height:1.08 !important;}
#htnsChatDrawer .chat-head-copy p{margin-top:5px !important;font-size:10px !important;line-height:1.15 !important;}
#htnsChatDrawer .chat-head-icon,
#htnsChatDrawer .chat-close{width:52px !important;height:52px !important;border-radius:17px !important;}
#htnsChatDrawer .chat-head-icon svg,
#htnsChatDrawer .chat-close svg{width:25px !important;height:25px !important;}

/* Room cards: keep labels readable and counts out of the copy column. */
#htnsChatDrawer #htnsChatTabs{
  padding:10px 14px 11px !important;
  gap:9px !important;
  border-bottom:0 !important;
  background:transparent !important;
}
#htnsChatDrawer .chat-tab{
  min-height:72px !important;
  padding:10px 42px 10px 11px !important;
  gap:9px !important;
  border-radius:18px !important;
}
#htnsChatDrawer .chat-tab-icon{width:40px !important;height:40px !important;flex-basis:40px !important;border-radius:13px !important;}
#htnsChatDrawer .chat-tab-copy{gap:3px !important;}
#htnsChatDrawer .chat-tab-copy strong{font-size:12px !important;line-height:1.1 !important;}
#htnsChatDrawer .chat-tab-copy small{font-size:8.5px !important;line-height:1.18 !important;}
#htnsChatDrawer .chat-tab-count{right:10px !important;min-width:24px !important;height:24px !important;padding:0 6px !important;font-size:9px !important;}

#htnsChatDrawer .chat-room-note{
  margin:0 14px 8px !important;
  min-height:52px !important;
  padding:9px 12px !important;
  border-radius:17px !important;
}
#htnsChatDrawer #htnsChatRoomNote{font-size:10px !important;line-height:1.22 !important;}
#htnsChatDrawer #htnsChatStatus{font-size:8px !important;padding-left:9px !important;gap:6px !important;}

/* Conversation: undo r278 flex/max-width rules that were squeezing the new r32 markup. */
#htnsChatDrawer #htnsChatMessages{
  padding:10px 15px 18px !important;
  scrollbar-width:none !important;
}
#htnsChatDrawer #htnsChatMessages::-webkit-scrollbar{width:0 !important;height:0 !important;}
#htnsChatDrawer .chat-date-separator{margin:12px 0 10px !important;gap:9px !important;}
#htnsChatDrawer .chat-date-separator>span{padding:6px 11px !important;font-size:8px !important;}
#htnsChatDrawer .chat-message{
  display:block !important;
  align-items:initial !important;
  margin:0 0 14px !important;
}
#htnsChatDrawer .chat-message.mine{align-items:initial !important;}
#htnsChatDrawer .chat-message-row{
  align-items:flex-start !important;
  gap:8px !important;
}
#htnsChatDrawer .chat-avatar{
  width:38px !important;
  height:38px !important;
  flex:0 0 38px !important;
  margin-top:18px !important;
  font-size:14px !important;
}
#htnsChatDrawer .chat-message-stack{
  width:auto !important;
  max-width:min(78%,320px) !important;
  gap:4px !important;
}
#htnsChatDrawer .chat-message-head{gap:6px !important;padding:0 3px !important;}
#htnsChatDrawer .chat-message-head strong{font-size:10.5px !important;}
#htnsChatDrawer .chat-message-head span{font-size:8px !important;}
#htnsChatDrawer .chat-bubble{
  width:auto !important;
  max-width:none !important;
  min-width:54px !important;
  padding:10px 12px 8px !important;
  border-radius:18px 18px 18px 7px !important;
}
#htnsChatDrawer .chat-message.mine .chat-bubble{border-radius:18px 18px 7px 18px !important;}
#htnsChatDrawer .chat-message.deleted .chat-bubble,
#htnsChatDrawer .chat-message.mine.deleted .chat-bubble{min-width:132px !important;}
#htnsChatDrawer .chat-message-body{font-size:13px !important;line-height:1.38 !important;font-weight:600 !important;}
#htnsChatDrawer .chat-message-meta{margin-top:5px !important;font-size:7.5px !important;}
#htnsChatDrawer .chat-reaction-row{min-height:24px !important;gap:4px !important;}
#htnsChatDrawer .chat-reaction-chip,
#htnsChatDrawer .chat-reaction-add{height:25px !important;min-width:29px !important;padding:0 7px !important;}
#htnsChatDrawer .chat-reaction-add{width:27px !important;padding:0 !important;}

/* Composer: explicitly reset the old two-column .chat-composer layout. */
#htnsChatDrawer .chat-composer{
  display:block !important;
  grid-template-columns:none !important;
  align-items:initial !important;
  gap:0 !important;
  padding:10px 12px calc(11px + env(safe-area-inset-bottom)) !important;
  background:rgba(248,252,255,.985) !important;
}
#htnsChatDrawer .chat-composer-row{
  width:100% !important;
  display:grid !important;
  grid-template-columns:46px 46px minmax(0,1fr) 54px !important;
  gap:8px !important;
  align-items:center !important;
}
#htnsChatDrawer .chat-composer-btn{
  width:46px !important;
  height:46px !important;
  border-radius:15px !important;
}
#htnsChatDrawer .chat-input-shell{
  min-height:48px !important;
  border-radius:16px !important;
  padding-right:4px !important;
}
#htnsChatDrawer #htnsChatInput{
  min-height:46px !important;
  padding:12px 6px 11px 13px !important;
  font-size:12.5px !important;
}
#htnsChatDrawer #htnsChatEmoji{width:36px !important;height:36px !important;}

/* ID selector is intentional: it beats the retired gold #htnsChatSend rule in r278. */
#htnsChatDrawer #htnsChatSend.chat-send-btn{
  width:54px !important;
  min-width:54px !important;
  height:54px !important;
  border:0 !important;
  border-radius:17px !important;
  background:linear-gradient(140deg,#0b84f8 0%,#3ba6ff 100%) !important;
  color:#fff !important;
  box-shadow:0 8px 18px rgba(17,122,226,.24) !important;
}
#htnsChatDrawer #htnsChatSend.chat-send-btn:disabled{
  background:#c8d7e4 !important;
  color:#fff !important;
  box-shadow:none !important;
  opacity:.72 !important;
}
#htnsChatDrawer #htnsChatSend.chat-send-btn svg{width:22px !important;height:22px !important;}

#htnsChatDrawer .chat-quick-actions{
  width:100% !important;
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:8px !important;
  margin:9px 0 0 !important;
}
#htnsChatDrawer .chat-quick-chip{
  min-width:0 !important;
  min-height:40px !important;
  padding:7px 6px !important;
  gap:5px !important;
  border-radius:15px !important;
  font-size:9px !important;
  line-height:1.1 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
}
#htnsChatDrawer .chat-quick-chip span{min-width:0 !important;overflow:hidden !important;text-overflow:ellipsis !important;}
#htnsChatDrawer .chat-quick-chip svg{width:15px !important;height:15px !important;flex:0 0 15px !important;}

/* Pending attachments stay inside the sheet instead of pushing the composer sideways. */
#htnsChatDrawer .chat-pending-wrap{padding:8px 12px 0 !important;}
#htnsChatDrawer .chat-pending-item{min-width:0 !important;}
#htnsChatDrawer .chat-attachment-copy{min-width:0 !important;}

@media (max-width:390px){
  #htnsChatDrawer .chat-drawer-head{grid-template-columns:46px minmax(0,1fr) 46px !important;padding-left:10px !important;padding-right:10px !important;}
  #htnsChatDrawer .chat-head-icon,#htnsChatDrawer .chat-close{width:46px !important;height:46px !important;}
  #htnsChatDrawer #htnsChatTabs{padding-left:10px !important;padding-right:10px !important;gap:7px !important;}
  #htnsChatDrawer .chat-tab{min-height:68px !important;padding:9px 34px 9px 9px !important;}
  #htnsChatDrawer .chat-tab-icon{width:36px !important;height:36px !important;flex-basis:36px !important;}
  #htnsChatDrawer .chat-tab-copy strong{font-size:11px !important;}
  #htnsChatDrawer .chat-tab-copy small{font-size:8px !important;}
  #htnsChatDrawer .chat-tab-count{right:7px !important;min-width:22px !important;height:22px !important;font-size:8px !important;}
  #htnsChatDrawer .chat-message-stack{max-width:min(80%,290px) !important;}
  #htnsChatDrawer .chat-message-body{font-size:12.5px !important;}
  #htnsChatDrawer .chat-composer-row{grid-template-columns:42px 42px minmax(0,1fr) 50px !important;gap:6px !important;}
  #htnsChatDrawer .chat-composer-btn{width:42px !important;height:42px !important;}
  #htnsChatDrawer #htnsChatSend.chat-send-btn{width:50px !important;min-width:50px !important;height:50px !important;}
  #htnsChatDrawer .chat-quick-actions{gap:6px !important;}
  #htnsChatDrawer .chat-quick-chip{font-size:8.2px !important;padding-left:4px !important;padding-right:4px !important;}
}

@media (min-width:720px){
  #htnsChatDrawer{top:auto !important;left:auto !important;right:16px !important;bottom:16px !important;width:min(440px,calc(100vw - 32px)) !important;height:min(84dvh,820px) !important;}
}