/* =========================
   Chat Draft Night Theme
   Based on chat-light.css
   Layout/mobile/reaction rules preserved; colors changed for Draft Night auction skin.
   ========================= */

/* Parent card MUST allow shrinking */
.chat-card{
  display:flex;
  flex-direction:column;
  min-height:0;
  overflow:hidden;
}

/* Wrapper becomes vertical flex container */
#chat-wrapper{
  display:flex;
  flex-direction:column;
  height:400px;
  min-height:0;
  background:linear-gradient(180deg,#0b1b2e,#071426);
  border:1px solid rgba(148,163,184,.18);
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 14px 36px rgba(0,0,0,.24);
}

/* THIS is the key fix */
#chat-messages{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;

  padding:12px 10px;
  display:flex;
  flex-direction:column;
  gap:8px;

  background:
    radial-gradient(circle at top left, rgba(59,130,246,.12), transparent 34%),
    linear-gradient(180deg,#0b1b2e,#071426);
  -webkit-overflow-scrolling:touch;
}

/* Input stays fixed at bottom */
#chat-input-container{
  flex:0 0 auto;
  display:flex;
  gap:8px;
  align-items:flex-end;
  padding:10px;
  background:#0b1b2e;
  border-top:1px solid rgba(148,163,184,.18);
}

/* Input */
#chat-input{
  flex:1 1 auto;
  min-width:0;

  min-height:42px;
  max-height:110px;
  resize:none;

  padding:10px 12px;
  border-radius:18px;
  font-size:15px;

  background:#071426;
  border:1px solid rgba(148,163,184,.24);
  color:#f4f7fb;
}

#chat-input:focus{
  border-color:rgba(251,191,36,.62);
  box-shadow:0 0 0 3px rgba(251,191,36,.16);
  outline:none;
}

#chat-input::placeholder{
  color:#7f8fa3;
}

#chat-send{
  flex:0 0 auto;
  padding:10px 14px;
  border-radius:18px;
  background:linear-gradient(180deg,#3b82f6,#1e40af);
  color:#ffffff;
  box-shadow:0 8px 18px rgba(37,99,235,.28);
}

#chat-send:hover{
  background:linear-gradient(180deg,#fbbf24,#1e40af);
}

/* =========================
   Chat Messages + Reactions
   ========================= */

.chat-message{
  display:flex;
  flex-direction:column;
  max-width:78%;
  position:relative;
  padding-top:8px;
  margin-bottom:10px;
}

.chat-message.me{
  align-self:flex-end;
  align-items:flex-end;
}

.chat-message.other{
  align-self:flex-start;
  align-items:flex-start;
}

.chat-message.stacked{ margin-top:-8px; }
.chat-message.stacked-prev{ margin-bottom:2px; }

.chat-name{
  font-size:12px;
  font-weight:600;
  color:#9fb3c8;
  margin-bottom:2px;
  padding:0 6px;
}

.chat-message.me .chat-name{ text-align:right; }
.chat-message.other .chat-name{ text-align:left; }

.chat-timestamp{
  margin-top:2px;
  font-size:10px;
  line-height:1.1;
  opacity:.58;
  padding:0 8px;
  color:#9fb3c8;
}

.chat-message.me .chat-timestamp{
  text-align:right;
}

.chat-message.other .chat-timestamp,
.chat-message-system .chat-timestamp{
  text-align:left;
}

.bubble-wrap{
  position:relative;
  display:inline-block;
}

.chat-bubble{
  padding:5px 14px;
  border-radius:18px;
  font-size:15px;
  line-height:1.35;
  word-wrap:break-word;
  overflow-wrap:anywhere;
  box-shadow:0 3px 10px rgba(0,0,0,.22);
}

/* bubble colors */
.chat-message.me .chat-bubble{
  background:linear-gradient(180deg,#3b82f6,#1e40af);
  color:#ffffff;
}

.chat-message.other .chat-bubble{
  background:linear-gradient(180deg,#132a42,#0f2034);
  color:#f4f7fb;
  border:1px solid rgba(148,163,184,.18);
}

/* reactions */
.reactions{
  position:absolute;
  top:-10px;
  display:flex;
  gap:4px;
  max-width:220px;
  overflow:hidden;
}

.chat-message.me .reactions{ left:-5px; }
.chat-message.other .reactions{ right:10px; }

.reaction{
  display:inline-flex;
  align-items:center;
  gap:4px;

  padding:2px 1px;
  border-radius:999px;
  background:transparent;
  border:none;
  color:#f4f7fb;
  font-weight:700;
  font-size:13px;

  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}

.reaction:active{
  transform:scale(0.92);
}

.reaction.show{
  animation:chatReactionPop .22s cubic-bezier(.34,1.56,.64,1);
}

@keyframes chatReactionPop{
  0%{ transform:scale(.6); opacity:0; }
  65%{ transform:scale(1.18); opacity:1; }
  100%{ transform:scale(1); opacity:1; }
}

/* =========================
   Mobile Fix (VERY IMPORTANT)
   ========================= */
@media (max-width:900px){

  .chat-card{
    height:calc(100dvh - 160px);
    display:flex;
    flex-direction:column;
    overflow:hidden;
  }

  .chat-card #chat-wrapper{
    flex:1;
    height:auto;
    min-height:0;
  }

  .chat-card #chat-messages{
    flex:1;
    min-height:0;
  }

  .chat-card #chat-input-container{
    flex-shrink:0;
    padding-bottom:calc(10px + env(safe-area-inset-bottom));
  }
}

/* Emoji picker */
.emoji-picker{
  display:flex;
  gap:6px;
  background:rgba(15,23,42,.98);
  padding:6px 8px;
  border-radius:14px;
  position:absolute;
  bottom:calc(100% - 14px);
  left:0;
  box-shadow:0 12px 30px rgba(0,0,0,.38);
  border:1px solid rgba(148,163,184,.22);
  max-width:calc(100vw - 40px);
  z-index:100;
  opacity:0;
  animation:pickerInUp 0.15s ease forwards;
}

.chat-message.me .emoji-picker{
  left:auto;
  right:0;
}

.emoji-picker.below{
  bottom:auto;
  top:calc(100% - 4px);
  animation:pickerInDown 0.15s ease forwards;
}

@keyframes pickerInUp{
  from{ transform:translateY(6px); opacity:0; }
  to{ transform:translateY(0); opacity:1; }
}

@keyframes pickerInDown{
  from{ transform:translateY(-6px); opacity:0; }
  to{ transform:translateY(0); opacity:1; }
}

.emoji-picker span{
  cursor:pointer;
  font-size:20px;
  line-height:1;
  transition:transform .12s ease;
}

.emoji-picker span:hover{
  transform:scale(1.18);
}

/* Reaction chip details */
.reaction.mine{
}

.reaction.more{
  background:rgba(148,163,184,.18);
  color:#f4f7fb;
  font-weight:800;
}

.reaction,
.reaction *{
  -webkit-user-select:none;
  user-select:none;
  -webkit-touch-callout:none;
}

.r-emoji{
  font-size:15px;
}

.r-count{
  font-size:9px;
  font-weight:700;
  letter-spacing:0.2px;
  color:#dbeafe;
  margin-left: -5px;
}

/* Chat scrollbar */
#chat-messages::-webkit-scrollbar{
  width:6px;
}

#chat-messages::-webkit-scrollbar-thumb{
  background:rgba(148,163,184,.32);
  border-radius:999px;
}

#chat-messages::-webkit-scrollbar-thumb:hover{
  background:rgba(148,163,184,.48);
}

/* Reaction users popup */
.reaction-users-pop{
  position:fixed;
  z-index:1000;
  min-width:140px;
  max-width:220px;
  padding:8px 10px;
  border-radius:14px;
  background:rgba(15,23,42,.98);
  color:#f4f7fb;
  border:1px solid rgba(148,163,184,.22);
  box-shadow:0 14px 34px rgba(0,0,0,.40);
  opacity:0;
  transform:translateY(4px);
  pointer-events:auto;
  transition:opacity .14s ease, transform .14s ease;
}

.reaction-users-pop.show{
  opacity:1;
  transform:translateY(0);
}

.reaction-users-title{
  font-size:11px;
  font-weight:800;
  letter-spacing:.02em;
  color:#9fb3c8;
  margin-bottom:6px;
}

.reaction-users-list{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.reaction-users-item{
  font-size:13px;
  line-height:1.25;
  font-weight:600;
  word-break:break-word;
}

/* Mobile refinements */
@media (max-width:900px){
  .chat-message{
    max-width:86%;
  }

  .chat-bubble{
    font-size:16px;
  }

  #chat-input{
    font-size:16px;
  }
}

@media (max-width:900px){
  #sec-chat.section.active{
    height:calc(100dvh - 116px);
    overflow:hidden;
  }

  #sec-chat .chat-card{
    height:100%;
    min-height:0;
    display:flex;
    flex-direction:column;
    overflow:hidden;
  }

  #sec-chat #chat-wrapper{
    flex:1 1 auto;
    height:auto !important;
    min-height:0;
    display:flex;
    flex-direction:column;
    overflow:hidden;
  }

  #sec-chat #chat-messages{
    flex:1 1 auto;
    min-height:0;
    overflow-y:auto;
  }

  #sec-chat #chat-input-container{
    flex:0 0 auto;
  }
}

@media (max-width:900px){
  #chat-input-container{
    position:sticky;
    bottom:0;
    z-index:20;
    flex:0 0 auto;
    background:#0b1b2e;
  }

  #chat-messages{
    padding-bottom:90px;
  }
}

/* Final mobile/chat reaction placement fix */
#sec-chat .reactions{
  flex-wrap:nowrap !important;
  width:max-content;
  max-width:220px;
  overflow:visible;
}

#sec-chat .chat-message{
  padding-top:6px;
}

#sec-chat .chat-name{
  margin-bottom:5px;
}

#sec-chat .chat-message.me .bubble-wrap .reactions{
  left:-6px;
  right:auto;
}

#sec-chat .chat-message.other .bubble-wrap .reactions{
  right:-13px;
  left:auto;
}

.chat-typing-row {
  margin: 8px 0;
  align-items: flex-start;
}

.chat-typing-name {
  color: #9fb3c8;
  font-size: 12px;
  font-weight: 800;
  margin-bottom: 3px;
}

.chat-typing-bubble {
  width: fit-content;
  min-width: 54px;
  max-width: 90px;
  padding: 10px 13px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;

  border-radius: 18px;
  background:linear-gradient(180deg,#132a42,#0f2034);
  border:1px solid rgba(148,163,184,.18);
}

.typing-dot {
  width: 6px;
  height: 6px;

  display: inline-block;
  border-radius: 999px;
  background: #9fb3c8;

  animation: chatTypingDot 1.2s infinite ease-in-out;
}

.typing-dot:nth-child(2) {
  animation-delay: 0.15s;
}

.typing-dot:nth-child(3) {
  animation-delay: 0.3s;
}

@keyframes chatTypingDot {
  0%, 80%, 100% {
    opacity: 0.35;
    transform: translateY(0);
  }

  40% {
    opacity: 1;
    transform: translateY(-3px);
  }
}

.chat-typing-row[hidden] {
  display: none;
}

.chat-bubble .chat-link {
  color: inherit;
  font-weight: 850;
  text-decoration: underline;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.chat-message.me .chat-link {
  color: #ffffff;
}

.chat-message.other .chat-link {
  color: #bfdbfe;
}


/* =========================================
   Draft Night chat polish
   ========================================= */
#chat-wrapper{
  background:linear-gradient(180deg,#0b1b2e,#071426);
  border:1px solid rgba(148,163,184,.20);
  box-shadow:0 14px 38px rgba(0,0,0,.30);
}

#chat-messages{
  background:
    radial-gradient(circle at top left, rgba(59,130,246,.14), transparent 34%),
    radial-gradient(circle at top right, rgba(251,191,36,.06), transparent 30%),
    linear-gradient(180deg,#0b1b2e,#071426);
}

#chat-input-container{
  background:#0b1b2e;
  border-top:1px solid rgba(148,163,184,.20);
}

#chat-input{
  background:rgba(7,20,38,.72);
  border:1px solid rgba(148,163,184,.24);
  color:#f4f7fb;
}

#chat-input:focus{
  border-color:rgba(251,191,36,.62);
  box-shadow:0 0 0 3px rgba(251,191,36,.14);
}

#chat-input::placeholder{
  color:#8fa3bb;
}

.chat-message.me .chat-bubble{
  background:linear-gradient(180deg,#3b82f6,#1d4ed8);
  color:#ffffff;
}

.chat-message.other .chat-bubble{
  background:linear-gradient(180deg,#132a42,#0f2034);
  color:#f4f7fb;
  border:1px solid rgba(148,163,184,.20);
}

.chat-name,
.chat-timestamp,
.chat-typing-name,
.reaction-users-title{
  color:#9fb3c8;
}

.emoji-picker,
.reaction-users-pop{
  background:rgba(12,26,43,.98);
  color:#f4f7fb;
  border:1px solid rgba(148,163,184,.20);
  box-shadow:0 12px 30px rgba(0,0,0,.32);
}

.reaction.more{
  background:rgba(251,191,36,.14);
  color:#fde68a;
}

.r-count{
  color:#f4f7fb;
}

.chat-typing-bubble{
  background:linear-gradient(180deg,#132a42,#0f2034);
  border:1px solid rgba(148,163,184,.20);
}

.typing-dot{
  background:#fbbf24;
}

.chat-message.other .chat-link{
  color:#bfdbfe;
}

@media (max-width:900px){
  #chat-input-container{
    background:#0b1b2e;
  }
}