/* Chat system styles - lightweight, isolated */
.chat-overlay{
  position:fixed; inset:0;
  background:rgba(0,0,0,0.55);
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:12px;
}
.chat-modal{
  width:min(980px, 96vw);
  height:min(680px, 92vh);
  background:#51a1ec;
  border-radius:10px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  box-shadow:0 10px 30px rgba(0,0,0,0.35);
  font-family: Arial, Helvetica, sans-serif;
}
.chat-header{
  background:#d7e6ff;
  padding:10px 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid #b8cff5;
}
.chat-title{ font-weight:bold; color:#1d2b44; }
.chat-close{
  border:none; background:transparent;
  font-size:24px; line-height:1;
  cursor:pointer; color:#1d2b44;
}
.chat-body{
  flex:1;
  display:flex;
  min-height:0; /* crucial for scrolling */
}
.chat-left{
  width:320px;
  border-right:1px solid #c7d7f3;
  background:#eef4ff;
  display:flex;
  flex-direction:column;
  min-height:0;
}
.chat-left-top{
  padding:10px;
  display:flex;
  gap:8px;
  border-bottom:1px solid #c7d7f3;
}
.chat-section-title{
  padding:10px 10px 6px;
  font-weight:bold;
  color:#1d2b44;
}
.chat-convo-list{
  flex:1;
  overflow:auto;
  padding:0 8px 10px;
  min-height:0;
}
.chat-requests{
  border-bottom:1px solid #c7d7f3;
  padding-bottom:8px;
}
.chat-convo{
  background:#fff;
  border:1px solid #c7d7f3;
  border-radius:8px;
  padding:8px 10px;
  margin:8px 0;
  cursor:pointer;
}
.chat-convo:hover{ background:#f7fbff; }
.chat-convo.active{ border-color:#7aa7ff; box-shadow:0 0 0 2px rgba(122,167,255,0.25); }
.chat-convo-title{ font-weight:bold; color:#1d2b44; }
.chat-convo-meta{ font-size:12px; color:#4d607f; margin-top:3px; }

.chat-right{
  flex:1;
  display:flex;
  flex-direction:column;
  min-height:0;
}
.chat-topbar{
  padding:10px 12px;
  border-bottom:1px solid #c7d7f3;
  background:#f8fbff;
}
.chat-active-title{ font-weight:bold; color:#1d2b44; }

.chat-messages{
  flex:1;
  overflow:auto;
  padding:12px;
  min-height:0;
  background:#f5f7fb;
}
.chat-msg{
  background:#fff;
  border:1px solid #d8e3f8;
  border-radius:10px;
  padding:8px 10px;
  margin:10px 0;
}
.chat-msg.me{ border-color:#7aa7ff; }
.chat-msg-head{
  display:flex;
  gap:8px;
  align-items:center;
  justify-content:space-between;
  font-size:12px;
  color:#4d607f;
  margin-bottom:6px;
}
.chat-msg-body{ color:#1d2b44; white-space:pre-wrap; }
.chat-msg-reply{
  margin:6px 0 0;
  padding:6px 8px;
  background:#f3f7ff;
  border-left:3px solid #7aa7ff;
  border-radius:6px;
  font-size:12px;
  color:#2f415f;
}
.chat-msg-actions{
  margin-top:8px;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.chat-link-btn{
  font-size:12px;
  border:none;
  background:transparent;
  cursor:pointer;
  color:#1b4fa8;
  padding:0;
}
.chat-link-btn:hover{ text-decoration:underline; }

.chat-img{
  max-width:260px;
  border-radius:8px;
  border:1px solid #d8e3f8;
  margin-top:8px;
  display:block;
}

.chat-send{
  padding:10px 12px;
  border-top:1px solid #c7d7f3;
  background:#eef4ff;
}
.chat-input{
  width:100%;
  padding:10px;
  border-radius:8px;
  border:1px solid #b8cff5;
  resize:vertical;
  background:#fff;
  box-sizing:border-box;
}
.chat-send-row{
  display:flex;
  gap:8px;
  justify-content:flex-end;
  align-items:center;
  margin-top:8px;
}
.chat-btn{
  background:#d7e6ff;
  border:1px solid #b8cff5;
  border-radius:8px;
  padding:8px 10px;
  cursor:pointer;
  font-size:13px;
  color:#1d2b44;
}
.chat-btn:hover{ background:#cfe0ff; }
.chat-btn-primary{
  background:#7aa7ff;
  border-color:#5a8cff;
  color:#fff;
}
.chat-btn-primary:hover{ background:#6798ff; }

.chat-file-label{ cursor:pointer; }
.chat-reply-confirm{
  font-size:12px;
  color:#2f415f;
  margin-bottom:6px;
  background:#f3f7ff;
  border-left:3px solid #7aa7ff;
  padding:6px 8px;
  border-radius:6px;
}

/* overlay panels */
.chat-new-panel{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.35);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:14px;
}
.chat-new-inner{
  width:min(560px, 92vw);
  background:#f8fbff;
  border:1px solid #c7d7f3;
  border-radius:10px;
  padding:14px;
  box-shadow:0 10px 30px rgba(0,0,0,0.25);
}
.chat-new-hint{ font-size:13px; color:#4d607f; margin:4px 0 10px; }
.chat-friends-pick{
  max-height:320px;
  overflow:auto;
  padding:8px;
  border:1px solid #F00;
  border-radius:8px;
  background:#5196CE;
}
.chat-friend-item{
  display:flex;
  align-items:center;
  gap:8px;
  padding:6px 4px;
}
.chat-new-actions{
  display:flex;
  justify-content:flex-end;
  gap:8px;
  margin-top:10px;
}

@media(max-width:720px){
  .chat-modal{ height:min(720px, 92vh); }
  .chat-left{ width:40%; }
}


/* === PATCH: Mobile horizontal overflow fix (chat modal + media) ===
   Fixes right-side overflow on small phones (especially when images are present).
   - Accounts for overlay padding + modal width
   - Prevents flex children from forcing width overflow
   - Ensures images never exceed container width
*/

.chat-overlay{
  box-sizing:border-box;
  overflow-x:hidden;
}

.chat-modal{
  box-sizing:border-box;
  /* Overlay has 12px padding on both sides => keep modal within remaining space */
  width:100%;
  max-width: calc(100vw - 24px);
}

.chat-body,
.chat-left,
.chat-right{
  min-width:0; /* critical: allow flex children to shrink instead of overflow */
}

.chat-messages{
  overflow-x:hidden;
}

.chat-msg,
.chat-msg *{
  max-width:100%;
  box-sizing:border-box;
}

.chat-msg-body{
  word-break:break-word;
}

.chat-img{
  max-width:100% !important;
  height:auto !important;
}

/* Extra-tight phones */
@media(max-width:480px){
  .chat-overlay{ padding:10px; }
  .chat-modal{ max-width: calc(100vw - 20px); }
  .chat-left{ width: 42vw; min-width: 160px; }
}