/* ── CHAT OFFCANVAS STYLES ───────────────────────────────────────────────── */

/* ── Toast notifications ────────────────────────────── */
@keyframes toastIn {
  from { transform: translateY(16px) scale(.96); opacity: 0; }
  to   { transform: translateY(0)    scale(1);   opacity: 1; }
}
@keyframes toastOut {
  from { transform: translateY(0)    scale(1);   opacity: 1; }
  to   { transform: translateY(8px)  scale(.95); opacity: 0; }
}

/* ── Info panels (group / profile) ─────────────────── */
#groupInfoPanel,
#userProfilePanel {
  animation: slideInRight .22s cubic-bezier(.4,0,.2,1);
}
@keyframes slideInRight {
  from { transform: translateX(100%); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

/* ── Chat open button ───────────────────────────────── */
.btn-chat-open {
  background: var(--navy-dark, #0a1628);
  color: #fff;
  border: 1px solid rgba(255,255,255,.15);
  cursor: pointer;
  width: 40px; height: 40px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  transition: background .2s, transform .15s;
  position: relative;
}
.btn-chat-open:hover { background: var(--blue-accent, #1a6fc4); transform: scale(1.06); }

/* Unread pulse dot */
.animation-button { position: relative; }
.animation-button::after {
  content: '';
  position: absolute;
  top: -2px; right: -2px;
  width: 12px; height: 12px;
  background: #e53935;
  border-radius: 50%;
  border: 2px solid var(--navy-dark, #0a1628);
  animation: chat-pulse 1.4s infinite;
}
@keyframes chat-pulse {
  0%, 100% { transform: scale(1);    opacity: 1;  }
  50%       { transform: scale(1.3); opacity: .75; }
}

/* ── Offcanvas shell ────────────────────────────────── */
/* Main offcanvas background — matches page surface */
#chatOffcanvas {
  background: var(--surface, #f0f4f8) !important;
  border-left: 1px solid var(--border, #dde3ed) !important;
}

/* Header bar — navy like the navbar */
#chatOffcanvas .offcanvas-header {
  background: var(--navy-dark, #0a1628) !important;
}

/* ── Sidebar (conversation list) ────────────────────── */
#chatRoomsList-wrap {
  background: #fff;
  border-right: 1px solid var(--border, #dde3ed);
}

/* Room items */
.chat-room-item {
  transition: background .12s;
  border-radius: 8px !important;
}
.chat-room-item:hover {
  background: rgba(26,111,196,.07) !important;
}
.chat-room-item.active {
  background: rgba(26,111,196,.12) !important;
}

/* ── Room header ────────────────────────────────────── */
#chatRoomHeader {
  background: #fff !important;
  border-bottom: 1px solid var(--border, #dde3ed) !important;
}
#chatRoomTitle { color: var(--text-primary, #1a2332) !important; }
#chatRoomSubtitle { color: var(--text-muted, #6b7a8d) !important; }

/* ── Messages area ──────────────────────────────────── */
#chatMessagesArea {
  background: var(--surface, #f0f4f8) !important;
}

/* ── Input area ─────────────────────────────────────── */
#chatOffcanvas .input-area {
  background: #fff !important;
  border-top: 1px solid var(--border, #dde3ed) !important;
}

#id_message_send_input {
  background: var(--surface, #f0f4f8) !important;
  border: 1px solid var(--border, #dde3ed) !important;
  color: var(--text-primary, #1a2332) !important;
  border-radius: 10px;
}
#id_message_send_input::placeholder {
  color: var(--text-muted, #6b7a8d) !important;
}
#id_message_send_input:focus {
  background: #fff !important;
  border-color: var(--blue-accent, #1a6fc4) !important;
  box-shadow: 0 0 0 3px rgba(26,111,196,.12) !important;
  outline: none;
}

/* Attach button */
#chatOffcanvas .attach-btn {
  background: var(--surface, #f0f4f8);
  border: 1px solid var(--border, #dde3ed);
  color: var(--text-muted, #6b7a8d);
  border-radius: 50%;
  transition: background .15s, color .15s;
}
#chatOffcanvas .attach-btn:hover {
  background: rgba(26,111,196,.1);
  color: var(--blue-accent, #1a6fc4);
  border-color: rgba(26,111,196,.3);
}

/* File preview bar */
#filePreviewBar {
  background: rgba(26,111,196,.06) !important;
  border-top: 1px solid rgba(26,111,196,.2) !important;
}
#filePreviewName { color: var(--text-primary, #1a2332) !important; }
#filePreviewSize { color: var(--text-muted, #6b7a8d) !important; }

/* ── Message bubbles ────────────────────────────────── */
/* Sent bubble — blue accent */
.bubble-own {
  background: var(--blue-accent, #1a6fc4);
  color: #fff;
  border-radius: 14px 14px 0 14px;
}
/* Received bubble — white card */
.bubble-other {
  background: #fff;
  color: var(--text-primary, #1a2332);
  border-radius: 14px 14px 14px 0;
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,.08));
}

/* ── Scrollbars ─────────────────────────────────────── */
#chatMessagesArea::-webkit-scrollbar,
#chatRoomsList::-webkit-scrollbar,
#groupMembersList::-webkit-scrollbar,
#membersList::-webkit-scrollbar,
#userPickerList::-webkit-scrollbar,
#groupPanelContent::-webkit-scrollbar,
#userProfileContent::-webkit-scrollbar {
  width: 4px;
}
#chatMessagesArea::-webkit-scrollbar-track,
#chatRoomsList::-webkit-scrollbar-track { background: transparent; }
#chatMessagesArea::-webkit-scrollbar-thumb,
#chatRoomsList::-webkit-scrollbar-thumb {
  background: var(--border, #dde3ed);
  border-radius: 4px;
}

/* ── "New conversation" dropdown button ─────────────── */
#chatOffcanvas .new-conv-btn {
  background: rgba(26,111,196,.08);
  border: 1px solid rgba(26,111,196,.2);
  color: var(--blue-accent, #1a6fc4);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  transition: background .15s;
}
#chatOffcanvas .new-conv-btn:hover {
  background: rgba(26,111,196,.15);
}

/* ── Info panels ────────────────────────────────────── */
#groupInfoPanel,
#userProfilePanel {
  background: #fff !important;
  border-left: 1px solid var(--border, #dde3ed) !important;
  box-shadow: -4px 0 20px rgba(0,0,0,.08) !important;
}
#groupInfoPanel .panel-header,
#userProfilePanel .panel-header {
  background: var(--surface, #f0f4f8);
  border-bottom: 1px solid var(--border, #dde3ed);
}
#groupPanelContent, #userProfileContent { color: var(--text-primary, #1a2332); }

/* ── Modal dialogs (create group, user picker) ──────── */
#createGroupModal .modal-content,
#userPickerModal .modal-content,
#manageMembersModal .modal-content {
  background: #fff !important;
  border: 1px solid var(--border, #dde3ed) !important;
  border-radius: var(--radius-lg, 16px) !important;
  color: var(--text-primary, #1a2332) !important;
}
#createGroupModal .modal-header,
#userPickerModal .modal-header,
#manageMembersModal .modal-header {
  background: var(--navy-dark, #0a1628) !important;
  border-radius: var(--radius-lg, 16px) var(--radius-lg, 16px) 0 0;
  border-bottom: none !important;
}
#createGroupModal .modal-title,
#userPickerModal .modal-title,
#manageMembersModal .modal-title { color: #fff !important; }

#createGroupModal .form-control,
#userPickerModal .form-control,
#manageMembersModal .form-select {
  background: var(--surface, #f0f4f8) !important;
  border: 1px solid var(--border, #dde3ed) !important;
  color: var(--text-primary, #1a2332) !important;
  border-radius: 8px;
}
#createGroupModal .form-control::placeholder,
#userPickerModal .form-control::placeholder { color: var(--text-muted, #6b7a8d) !important; }
#createGroupModal .form-control:focus,
#userPickerModal .form-control:focus,
#manageMembersModal .form-select:focus {
  background: #fff !important;
  border-color: var(--blue-accent, #1a6fc4) !important;
  box-shadow: 0 0 0 3px rgba(26,111,196,.12) !important;
  color: var(--text-primary, #1a2332) !important;
}