/* Chat window layout & styles */
.chat-window {
  position: fixed;
  right: 8px;
  bottom: 8px;
  width: min(360px, 90vw);
  height: 60vh;
  max-height: 480px;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 980;
  transform: translateY(120%);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.chat-window.open {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.chat-layout { display:flex; width:100%; height:100%; }

.chat-contacts {
  width: 110px;
  min-width: 90px;
  max-width: 140px;
  background: #ffffff;
  border-right: 1px solid #ddd;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 6px 4px;
}

.chat-contact-item { display:flex; align-items:center; gap:6px; padding:6px 4px; border-radius:10px; cursor:pointer; transition: background 0.15s ease; }
.chat-contact-item:hover { background: rgba(0, 0, 0, 0.04); }
.chat-contact-item.active { background: rgba(7, 94, 84, 0.08); }

.chat-contact-avatar { width:26px; height:26px; border-radius:50%; background:#128c7e; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; color:#fff; }

.chat-contact-name { flex:1; font-size:12px; font-weight:500; color:#222; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.chat-contact-last { font-size:10px; color:#999; }

.chat-conversation { display:flex; flex-direction:column; flex:1; min-width:0; }

.chat-header { display:flex; align-items:center; padding:8px 12px; background:#075e54; color:#fff; }

.chat-user-avatar { width:32px; height:32px; border-radius:50%; background:#128c7e; display:flex; align-items:center; justify-content:center; font-weight:700; margin-right:8px; }

.chat-user-info { flex:1; }

.chat-user-name { font-size:14px; font-weight:600; }

.chat-user-status { font-size:11px; opacity:0.8; }

.chat-close-btn { border:none; background:none; color:#fff; font-size:20px; cursor:pointer; }

.chat-messages { flex:1; padding:8px; background:#e5ddd5; overflow-y:auto; -webkit-overflow-scrolling:touch; }

.chat-row { display:flex; margin-bottom:4px; }
.chat-row.me { justify-content:flex-end; }
.chat-row.them { justify-content:flex-start; }

.chat-bubble { max-width:75%; padding:6px 8px; border-radius:12px; font-size:13px; line-height:1.3; position:relative; }
.chat-bubble.me { background:#dcf8c6; border-bottom-right-radius:2px; }
.chat-bubble.them { background:#fff; border-bottom-left-radius:2px; }

.chat-bubble-time { font-size:10px; opacity:0.6; margin-left:6px; }

.chat-bubble-media img { max-width:180px; max-height:140px; border-radius:8px; display:block; margin-top:4px; }

.chat-input-bar { display:flex; align-items:center; padding:6px 8px; background:#f0f0f0; gap:6px; }
.chat-attach-btn, .chat-send-btn { border:none; background:none; font-size:20px; cursor:pointer; }
.chat-text-input { flex:1; border-radius:20px; border:1px solid #ccc; padding:6px 10px; font-size:13px; }