/* ============================================================
   Chat Redesign - Messages Page
   Modern gradient messaging UI for the messages page
   ============================================================ */

/* --- CSS Variables (overriding where needed) ---
   These are defined on :root as WELL as .chat-redesign, and that matters.
   .chat-redesign exists only on messages.tpl, but the same cr-message-* bubble
   markup is also rendered by _chatbox.tpl (group/event chatbox) and by the
   popup chat in _js_templates.tpl, both OUTSIDE that scope. There the vars did
   not resolve, so "background: linear-gradient(.., var(--cr-primary), ..)" was
   an invalid declaration and got dropped, while the literal "color: white" on
   the same rule survived - white text on a white card, i.e. messages that
   looked blank. Every name is --cr- prefixed, so :root is safe here.
   Verified on the live site: an outgoing bubble built outside .chat-redesign
   computes to the pink/purple gradient with white text instead of no
   background at all. */
:root,
.chat-redesign {
  --cr-primary: #ec4899;
  --cr-primary-dark: #db2777;
  --cr-primary-light: #fce7f3;
  --cr-secondary: #8b5cf6;
  --cr-bg: #f8fafc;
  --cr-card-bg: #ffffff;
  --cr-text-main: #1e293b;
  --cr-text-muted: #64748b;
  --cr-border: #e2e8f0;
  --cr-bubble-in: #f1f5f9;
  --cr-online: #10b981;
  --cr-online-light: #d1fae5;
  --cr-offline: #94a3b8;
  --cr-offline-light: #f1f5f9;
  --cr-shadow-sm: 0 1px 3px rgba(0,0,0,0.05);
  --cr-shadow-md: 0 10px 30px rgba(0,0,0,0.08);
}

/* ============================================================
   Messages Page - Layout Overrides
   ============================================================ */

/* Sidebar chat list card */
.chat-redesign .sg-offcanvas-sidebar .card {
  background: var(--cr-card-bg);
  border-radius: 16px;
  border: 1px solid var(--cr-border);
  box-shadow: var(--cr-shadow-sm);
  overflow: hidden;
}

.chat-redesign .sg-offcanvas-sidebar .card-header {
  padding: 18px 20px;
  border-bottom: 1px solid var(--cr-border);
  font-size: 17px;
  font-weight: 700;
  color: var(--cr-text-main);
  background: var(--cr-bg);
  display: flex;
  align-items: center;
}

.chat-redesign .sg-offcanvas-sidebar .card-header .main-icon {
  color: var(--cr-primary);
}

.chat-redesign .sg-offcanvas-sidebar .card-body {
  padding: 0;
}

/* Mainbar conversation card */
.chat-redesign .sg-offcanvas-mainbar .card.panel-messages {
  background: var(--cr-card-bg);
  border-radius: 16px;
  border: 1px solid var(--cr-border);
  box-shadow: var(--cr-shadow-sm);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* ============================================================
   Chat List Items (Sidebar)
   ============================================================ */

.chat-redesign .sg-offcanvas-sidebar .feeds-item {
  border-bottom: none;
  margin: 0;
  padding: 0;
}

.chat-redesign .sg-offcanvas-sidebar .feeds-item .data-container {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  cursor: pointer;
  transition: all 0.3s ease;
  border-bottom: 1px solid var(--cr-border);
  position: relative;
  text-decoration: none;
  color: inherit;
}

.chat-redesign .sg-offcanvas-sidebar .feeds-item .data-container:hover {
  background: var(--cr-primary-light);
  text-decoration: none;
}

.chat-redesign .sg-offcanvas-sidebar .feeds-item.active .data-container,
.chat-redesign .sg-offcanvas-sidebar .feeds-item.unread .data-container {
  background: linear-gradient(135deg, var(--cr-primary-light), rgba(139, 92, 246, 0.1));
}

.chat-redesign .sg-offcanvas-sidebar .feeds-item.active .data-container::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(to bottom, var(--cr-primary), var(--cr-secondary));
}

/* Avatar */
.chat-redesign .sg-offcanvas-sidebar .feeds-item .data-avatar {
  position: relative;
  flex-shrink: 0;
  width: 50px;
  height: 50px;
  margin-right: 0;
}

.chat-redesign .sg-offcanvas-sidebar .feeds-item .data-avatar img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.chat-redesign .sg-offcanvas-sidebar .feeds-item .data-container:hover .data-avatar img {
  transform: scale(1.05);
}

/* Dual avatar for groups */
.chat-redesign .sg-offcanvas-sidebar .feeds-item .data-avatar .left-avatar,
.chat-redesign .sg-offcanvas-sidebar .feeds-item .data-avatar .right-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}

/* Content */
.chat-redesign .sg-offcanvas-sidebar .feeds-item .data-content {
  flex: 1;
  min-width: 0;
  padding: 0;
}

.chat-redesign .sg-offcanvas-sidebar .feeds-item .data-content .name {
  font-size: 15px;
  font-weight: 700;
  color: var(--cr-text-main);
  display: block;
}

.chat-redesign .sg-offcanvas-sidebar .feeds-item .data-content .text {
  font-size: 12px;
  color: var(--cr-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
  display: block;
}

.chat-redesign .sg-offcanvas-sidebar .feeds-item .data-content .time {
  font-size: 11px;
  color: var(--cr-text-muted);
  margin-top: 2px;
}

/* Data image thumbnail */
.chat-redesign .sg-offcanvas-sidebar .feeds-item .data-img {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  object-fit: cover;
}

/* Remove old unread styling */
.chat-redesign .sg-offcanvas-sidebar .feeds-item.unread {
  background: transparent;
}

/* ============================================================
   Conversation Area (Main)
   ============================================================ */

/* Conversation Header */
.chat-redesign .panel-messages .card-header {
  padding: 16px 24px;
  border-bottom: 1px solid var(--cr-border);
  background: linear-gradient(135deg, var(--cr-primary), var(--cr-secondary)) !important;
  color: white;
  display: flex;
  align-items: center;
  gap: 14px;
}

.chat-redesign .panel-messages .card-header a {
  color: white !important;
  font-size: 17px;
  font-weight: 700;
  text-decoration: none;
}

.chat-redesign .panel-messages .card-header a:hover {
  color: rgba(255,255,255,0.9) !important;
}

.chat-redesign .panel-messages .card-header .btn-light {
  background: rgba(255,255,255,0.2);
  border: 1px solid rgba(255,255,255,0.3);
  color: white;
  transition: all 0.3s ease;
}

.chat-redesign .panel-messages .card-header .btn-light:hover {
  background: rgba(255,255,255,0.35);
  color: white;
}

.chat-redesign .panel-messages .card-header .main-icon {
  filter: brightness(0) invert(1);
}

/* Back button (mobile) */
.chat-redesign .sg-offcanvas-mainbar .text-link {
  color: var(--cr-primary);
  font-weight: 600;
}

/* Card body */
.chat-redesign .panel-messages .card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 0;
}

/* ============================================================
   Messages List
   ============================================================ */

.chat-redesign .chat-conversations {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
  background: var(--cr-bg);
}

.chat-redesign .chat-conversations::-webkit-scrollbar {
  width: 6px;
}

.chat-redesign .chat-conversations::-webkit-scrollbar-thumb {
  background: var(--cr-border);
  border-radius: 10px;
}

/* Remove default list styling */
.chat-redesign .chat-conversations ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.chat-redesign .chat-conversations li {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* ============================================================
   Message Bubbles
   ============================================================ */

.chat-redesign .conversation {
  display: flex !important;
  gap: 10px;
  max-width: 70%;
  animation: crMessageIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes crMessageIn {
  from { opacity: 0; transform: translateY(15px) scale(0.95); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Incoming */
.chat-redesign .conversation:not(.right) {
  align-self: flex-start;
  flex-direction: row;
}

/* Outgoing */
.chat-redesign .conversation.right {
  align-self: flex-end;
  flex-direction: row-reverse;
}

/* User avatar */
.chat-redesign .conversation-user {
  flex-shrink: 0;
  align-self: flex-end;
  width: auto !important;
  margin: 0 !important;
}

.chat-redesign .conversation-user img {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  object-fit: cover;
}

/* Hide user avatar for outgoing (right) messages */
.chat-redesign .conversation.right .conversation-user {
  display: none;
}

/* Message body */
.chat-redesign .conversation-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.chat-redesign .conversation.right .conversation-body {
  align-items: flex-end;
}

/* Message text bubble */
.chat-redesign .conversation-body .text {
  padding: 12px 16px !important;
  border-radius: 18px !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  word-wrap: break-word;
  display: inline-block;
  max-width: 100%;
}

/* Incoming bubble */
.chat-redesign .conversation:not(.right) .conversation-body .text {
  background: var(--cr-bubble-in) !important;
  color: var(--cr-text-main) !important;
  border-bottom-left-radius: 4px !important;
}

/* Outgoing bubble */
.chat-redesign .conversation.right .conversation-body .text {
  background: linear-gradient(135deg, var(--cr-primary), var(--cr-secondary)) !important;
  color: white !important;
  border-bottom-right-radius: 4px !important;
  box-shadow: 0 4px 12px rgba(236, 72, 153, 0.25);
}

/* Message images */
.chat-redesign .conversation-body .img-wrapper {
  border-radius: 12px;
  max-width: 240px;
}

/* Message video */
.chat-redesign .conversation-body .video-wrapper {
  border-radius: 12px;
  max-width: 300px;
}

/* Voice note */
.chat-redesign .conversation-body audio {
  border-radius: 8px;
}

/* Product card in chat */
.chat-redesign .chat-product {
  border-radius: 12px !important;
  overflow: hidden;
}

.chat-redesign .chat-product .chat-product-image img {
  border-radius: 12px 12px 0 0;
}

/* Time */
.chat-redesign .conversation-body .time {
  font-size: 11px !important;
  color: var(--cr-text-muted) !important;
  padding: 0 4px;
  float: none !important;
}

.chat-redesign .conversation.right .conversation-body .time {
  text-align: right;
}

/* Seen status */
.chat-redesign .conversation-body .seen {
  font-size: 11px;
  color: var(--cr-text-muted);
  padding: 0 4px;
}

/* Translation */
.chat-redesign .conversation-body .translate {
  font-size: 11px;
  color: var(--cr-primary);
  cursor: pointer;
  padding: 0 4px;
}

/* ============================================================
   Typing Indicator
   ============================================================ */

.chat-redesign .chat-typing {
  padding: 8px 24px;
  font-size: 13px;
  color: var(--cr-text-muted);
  background: var(--cr-bg);
}

.chat-redesign .chat-typing .loading-dots span:after {
  animation: crTypingBounce 1.4s infinite;
}

/* ============================================================
   Input Area
   ============================================================ */

.chat-redesign .chat-form {
  padding: 16px 24px;
  border-top: 1px solid var(--cr-border);
  background: var(--cr-card-bg);
  display: flex;
  flex-direction: column;
  gap: 0;
}

.chat-redesign .chat-form-message {
  margin-bottom: 10px;
}

.chat-redesign .chat-form-message textarea {
  width: 100%;
  padding: 14px 20px;
  border: 2px solid var(--cr-border);
  border-radius: 24px;
  font-size: 14px;
  outline: none;
  transition: all 0.3s ease;
  background: var(--cr-bg);
  resize: none;
  font-family: inherit;
}

.chat-redesign .chat-form-message textarea:focus {
  border-color: var(--cr-primary);
  background: white;
  box-shadow: 0 0 0 4px rgba(236, 72, 153, 0.1);
}

.chat-redesign .chat-form-message textarea::placeholder {
  color: var(--cr-text-muted);
}

/* Toolbar */
.chat-redesign .x-form-tools {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.chat-redesign .x-form-tools li {
  margin: 0 2px;
}

.chat-redesign .x-form-tools li i {
  padding: 10px;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s ease;
  color: var(--cr-text-muted);
}

.chat-redesign .x-form-tools li i:hover {
  background: var(--cr-primary-light);
  color: var(--cr-primary);
}

/* Send button */
.chat-redesign .x-form-tools-post {
  margin-left: auto !important;
}

.chat-redesign .x-form-tools-post i {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--cr-primary), var(--cr-secondary));
  color: white !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  box-shadow: 0 4px 15px rgba(236, 72, 153, 0.3);
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.chat-redesign .x-form-tools-post i:hover {
  transform: scale(1.1) rotate(-10deg);
  box-shadow: 0 6px 20px rgba(236, 72, 153, 0.5);
  background: linear-gradient(135deg, var(--cr-primary), var(--cr-secondary)) !important;
}

.chat-redesign .x-form-tools-post i:active {
  transform: scale(0.95);
}

/* Color picker */
.chat-redesign .x-form-tools-colors i {
  transition: transform 0.3s ease;
}

.chat-redesign .x-form-tools-colors i:hover {
  transform: scale(1.15);
}

/* Voice notes */
.chat-redesign .chat-voice-notes {
  padding: 8px 24px 0;
  background: var(--cr-card-bg);
}

.chat-redesign .btn-voice-start {
  padding: 10px 16px;
  border-radius: 24px;
  background: var(--cr-bg);
  border: 2px solid var(--cr-border);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--cr-text-muted);
  transition: all 0.3s ease;
}

.chat-redesign .btn-voice-start:hover {
  border-color: var(--cr-primary);
  color: var(--cr-primary);
  background: var(--cr-primary-light);
}

.chat-redesign .btn-voice-stop {
  padding: 10px 16px;
  border-radius: 24px;
  background: #fef2f2;
  border: 2px solid #fecaca;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: #dc2626;
}

/* Attachments */
.chat-redesign .chat-attachments {
  padding: 8px 24px 0;
  background: var(--cr-card-bg);
}

/* ============================================================
   See More (Load Older Messages)
   ============================================================ */

.chat-redesign .alert-chat {
  background: transparent;
  border: 1px dashed var(--cr-border);
  color: var(--cr-primary);
  font-weight: 600;
  border-radius: 12px;
  padding: 10px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-bottom: 16px;
}

.chat-redesign .alert-chat:hover {
  background: var(--cr-primary-light);
  border-color: var(--cr-primary);
}

/* ============================================================
   Empty State
   ============================================================ */

.chat-redesign .card-messages {
  background: var(--cr-card-bg);
  border-radius: 16px;
  border: 1px solid var(--cr-border);
  box-shadow: var(--cr-shadow-sm);
}

.chat-redesign .card-messages .btn-primary {
  background: linear-gradient(135deg, var(--cr-primary), var(--cr-secondary));
  border: none;
  padding: 12px 28px;
  border-radius: 24px;
  font-weight: 600;
  box-shadow: 0 4px 15px rgba(236, 72, 153, 0.3);
}

/* ============================================================
   Fresh / New Message
   ============================================================ */

.chat-redesign .panel-messages.fresh .card-header {
  background: var(--cr-card-bg) !important;
  color: var(--cr-text-main);
  border-bottom: 1px solid var(--cr-border);
}

.chat-redesign .chat-to {
  padding: 12px 24px;
  border-top: 1px solid var(--cr-border);
}

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 900px) {
  .chat-redesign .row.h-100 {
    flex-direction: column;
  }

  .chat-redesign .sg-offcanvas-sidebar {
    max-height: 350px;
    overflow-y: auto;
  }
}

/* ============================================================
   NEW CHAT REDESIGN CLASSES (cr- prefix)
   Used by the updated templates
   ============================================================ */

/* --- Chat List Panel --- */
.cr-chat-list-panel {
  background: var(--cr-card-bg);
  border-radius: 16px;
  border: 1px solid var(--cr-border);
  box-shadow: var(--cr-shadow-sm);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
}

.cr-chat-list-header {
  padding: 18px 20px;
  border-bottom: 1px solid var(--cr-border);
  font-size: 17px;
  font-weight: 700;
  color: var(--cr-text-main);
  background: var(--cr-bg);
}

.cr-new-chat-btn {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--cr-primary), var(--cr-secondary));
  color: white !important;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(236, 72, 153, 0.3);
}
.cr-new-chat-btn:hover { transform: scale(1.08); }
.cr-new-chat-btn { flex-shrink: 0; }

/* Search box between the "Chats" title and the new-chat button */
.cr-chat-list-header-row { display: flex; align-items: center; gap: 10px; }
.cr-chat-list-title { flex-shrink: 0; }
.cr-chat-search {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
}
.cr-chat-search input {
  width: 100%;
  height: 36px;
  padding: 0 32px 0 34px;
  border: 1px solid var(--cr-border);
  border-radius: 18px;
  background: var(--cr-card-bg);
  font-size: 13px;
  font-weight: 500;
  color: var(--cr-text-main);
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.cr-chat-search input::placeholder { color: var(--cr-text-muted); font-weight: 400; }
.cr-chat-search input:focus {
  border-color: var(--cr-primary);
  box-shadow: 0 0 0 3px rgba(236, 72, 153, .12);
}
.cr-chat-search-icon {
  position: absolute;
  left: 12px; top: 50%; transform: translateY(-50%);
  font-size: 12px; color: var(--cr-text-muted);
  pointer-events: none;
}
.cr-chat-search-clear {
  position: absolute;
  right: 8px; top: 50%; transform: translateY(-50%);
  width: 20px; height: 20px;
  border: none; background: transparent;
  color: var(--cr-text-muted);
  font-size: 12px; line-height: 1; cursor: pointer;
  display: none; align-items: center; justify-content: center;
  border-radius: 50%;
}
.cr-chat-search.has-value .cr-chat-search-clear { display: flex; }
.cr-chat-search-clear:hover { background: var(--cr-border); color: var(--cr-text-main); }
[dir="RTL"] .cr-chat-search input { padding: 0 34px 0 32px; }
[dir="RTL"] .cr-chat-search-icon { left: auto; right: 12px; }
[dir="RTL"] .cr-chat-search-clear { right: auto; left: 8px; }

/* rows hidden by the filter, and the "nothing matched" line */
.cr-chat-list-item.cr-filtered-out { display: none !important; }
.cr-chat-no-results {
  display: none;
  padding: 28px 20px;
  text-align: center;
  font-size: 13px;
  color: var(--cr-text-muted);
}
.cr-chat-list.cr-no-matches .cr-chat-no-results { display: block; }

/* narrow screens: the title takes the room the search needs, so drop it */
@media (max-width: 400px) {
  .cr-chat-list-title { display: none; }
}

/* Chat list items */
.cr-chat-list { flex: 1; overflow-y: auto; }
.cr-chat-list ul { list-style: none; padding: 0; margin: 0; }
.cr-chat-list::-webkit-scrollbar { width: 4px; }
.cr-chat-list::-webkit-scrollbar-thumb { background: var(--cr-border); border-radius: 10px; }

.cr-chat-list-link {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 20px;
  text-decoration: none; color: inherit;
  transition: all 0.3s ease;
  border-bottom: 1px solid var(--cr-border);
  position: relative;
}
.cr-chat-list-link:hover { background: var(--cr-primary-light); color: inherit; text-decoration: none; }
.cr-chat-list-item.active .cr-chat-list-link {
  background: linear-gradient(135deg, var(--cr-primary-light), rgba(139, 92, 246, 0.1));
}
.cr-chat-list-item.active .cr-chat-list-link::before {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 4px;
  background: linear-gradient(to bottom, var(--cr-primary), var(--cr-secondary));
}
.cr-chat-list-item.cr-unread .cr-chat-list-link { background: rgba(236, 72, 153, 0.04); }

/* Avatar */
.cr-chat-list-avatar-wrap { position: relative; flex-shrink: 0; }
.cr-chat-list-avatar {
  width: 50px; height: 50px;
  border-radius: 50%; object-fit: cover;
  transition: transform 0.3s ease;
}
.cr-chat-list-link:hover .cr-chat-list-avatar { transform: scale(1.05); }
.cr-chat-list-avatar-dual { position: relative; width: 50px; height: 50px; }
.cr-avatar-left, .cr-avatar-right {
  width: 34px; height: 34px; border-radius: 50%;
  background-size: cover; background-position: center;
  position: absolute; border: 2px solid white;
}
.cr-avatar-left { top: 0; left: 0; }
.cr-avatar-right { bottom: 0; right: 0; }

/* Status dot */
.cr-status-dot {
  position: absolute; bottom: 2px; right: 2px;
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 2.5px solid var(--cr-card-bg);
}
.cr-status-dot.cr-online { background: var(--cr-online); box-shadow: 0 0 0 2px var(--cr-online-light); }
.cr-status-dot.cr-offline { background: var(--cr-offline); box-shadow: 0 0 0 2px var(--cr-offline-light); }

/* Info */
.cr-chat-list-info { flex: 1; min-width: 0; }
.cr-chat-list-name-row { display: flex; align-items: center; gap: 8px; margin-bottom: 3px; }
.cr-chat-list-name { font-size: 15px; font-weight: 700; }
.cr-chat-list-preview {
  font-size: 12px; color: var(--cr-text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cr-status-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 12px;
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.3px;
}
.cr-status-badge.cr-online { background: var(--cr-online-light); color: var(--cr-online); }
.cr-status-badge.cr-offline { background: var(--cr-offline-light); color: var(--cr-offline); }
.cr-status-badge i { font-size: 8px; }

/* Meta */
.cr-chat-list-meta { text-align: right; flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.cr-chat-list-time { font-size: 11px; color: var(--cr-text-muted); }
.cr-chat-list-badge {
  background: linear-gradient(135deg, var(--cr-primary), var(--cr-secondary));
  color: white;
  min-width: 22px; height: 22px;
  border-radius: 11px;
  font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  padding: 0 6px;
}

/* --- Chat Area --- */
.cr-chat-area {
  background: var(--cr-card-bg);
  border-radius: 16px;
  border: 1px solid var(--cr-border);
  box-shadow: var(--cr-shadow-sm);
  display: flex; flex-direction: column;
  overflow: hidden;
  height: 100%;
}

/* Chat Header */
.cr-chat-header {
  padding: 16px 24px;
  border-bottom: 1px solid var(--cr-border);
  background: linear-gradient(135deg, var(--cr-primary), var(--cr-secondary));
  color: white;
  display: flex; align-items: center; justify-content: space-between;
}
.cr-chat-header-back {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background 0.3s ease;
  color: white;
}
.cr-chat-header-back:hover { background: rgba(255,255,255,0.35); }
.cr-chat-header-avatar {
  width: 46px; height: 46px;
  border-radius: 50%; object-fit: cover;
  border: 2.5px solid rgba(255,255,255,0.5);
}
.cr-chat-header-avatar-dual { position: relative; width: 46px; height: 46px; flex-shrink: 0; }
.cr-header-avatar-left, .cr-header-avatar-right {
  width: 32px; height: 32px; border-radius: 50%;
  background-size: cover; background-position: center;
  position: absolute; border: 2px solid white;
}
.cr-header-avatar-left { top: 0; left: 0; }
.cr-header-avatar-right { bottom: 0; right: 0; }

.cr-chat-header-info { flex: 1; min-width: 0; }
.cr-chat-header-name { font-size: 17px; font-weight: 700; margin-bottom: 2px; }
.cr-chat-header-name a { color: white; text-decoration: none; }
.cr-chat-header-status {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px; border-radius: 20px;
  font-size: 12px; font-weight: 600;
}
.cr-chat-header-status.cr-online { background: rgba(16, 185, 129, 0.95); color: white; box-shadow: 0 2px 8px rgba(16,185,129,0.4); }
.cr-chat-header-status.cr-offline { background: rgba(148, 163, 184, 0.95); color: white; box-shadow: 0 2px 8px rgba(148,163,184,0.4); }
.cr-chat-header-status i { font-size: 10px; }
.cr-chat-header-actions { display: flex; gap: 4px; }
.cr-header-btn {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  border: none; color: white;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background 0.3s ease;
  font-size: 14px;
}
.cr-header-btn:hover { background: rgba(255,255,255,0.35); color: white; }

/* Chat Messages */
.cr-chat-messages {
  flex: 1; display: flex; flex-direction: column;
  min-height: 0; overflow: hidden;
  background: var(--cr-bg);
}

/* --- Message Bubbles (cr- style) --- */
.cr-message-wrapper {
  display: flex; gap: 10px;
  max-width: 70%;
  animation: crMessageIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
/* Each bubble sits inside its own <li>, and a plain <li> is display:block - so
   align-self had no flex parent to act on and did nothing. The wrapper rendered
   as a left-aligned box 70% of the column wide, and flex-direction:row-reverse
   packed an outgoing bubble against the RIGHT EDGE OF THAT 70% BOX - i.e. around
   the middle of the column. That is the "messages show in the middle" symptom.

   NOTE the selector is a plain descendant, not "ul > li". Messages appended live
   by core's JS use the STOCK markup (div.conversation.right) and ship their own
   <li>, so the DOM becomes ul > li > li > div.conversation. A child selector
   misses that nested li, which is why freshly-sent messages kept drifting to the
   middle while server-rendered ones sat right. Confirmed live: the appended li
   computed display:list-item before this change and flex after. */
.chat-redesign .chat-conversations li,
.cr-chat-messages .chat-conversations li {
  display: flex;
  flex-direction: column;
}

/* Stock markup path (live-appended messages) needs the same alignment, and
   margin:auto so it holds even where the parent is not a flex container. */
.chat-redesign .chat-conversations .conversation.right,
.cr-chat-messages .chat-conversations .conversation.right {
  align-self: flex-end !important;
  margin-left: auto !important;
  margin-right: 0 !important;
}
.chat-redesign .chat-conversations .conversation:not(.right),
.cr-chat-messages .chat-conversations .conversation:not(.right) {
  align-self: flex-start !important;
  margin-right: auto !important;
  margin-left: 0 !important;
}

/* Base CSS gives .conversation-body "max-width: calc(100% - 60px)" to leave room
   for the 60px avatar stock markup places beside the bubble. This theme hides
   that avatar on outgoing messages, so the subtraction only collapsed the
   bubble - a live-appended "merhaba" rendered 37px wide and wrapped mid-word.
   Measured live: 37px -> 87px, still right-aligned. */
.chat-redesign .chat-conversations .conversation-body,
.cr-chat-messages .chat-conversations .conversation-body {
  max-width: 100% !important;
}
.cr-message-wrapper.cr-message-in  { align-self: flex-start; flex-direction: row;         margin-right: auto; }
.cr-message-wrapper.cr-message-out { align-self: flex-end;   flex-direction: row-reverse; margin-left: auto; }

.cr-message-avatar-link { flex-shrink: 0; align-self: flex-end; }
.cr-message-avatar {
  width: 32px; height: 32px;
  border-radius: 50%; object-fit: cover;
}
.cr-message-content { display: flex; flex-direction: column; gap: 4px; }
.cr-message-wrapper.cr-message-out .cr-message-content { align-items: flex-end; }

.cr-message-bubble {
  padding: 12px 16px;
  border-radius: 18px;
  font-size: 14px; line-height: 1.5;
  word-wrap: break-word;
  max-width: 100%;
}
.cr-message-in .cr-message-bubble {
  background: var(--cr-bubble-in); color: var(--cr-text-main);
  border-bottom-left-radius: 4px;
}
.cr-message-out .cr-message-bubble {
  background: linear-gradient(135deg, var(--cr-primary), var(--cr-secondary));
  color: white;
  border-bottom-right-radius: 4px;
  box-shadow: 0 4px 12px rgba(236, 72, 153, 0.25);
}

.cr-message-media img, .cr-message-media video { border-radius: 12px; max-width: 240px; }
.cr-message-time { font-size: 11px; color: var(--cr-text-muted); padding: 0 4px; }
.cr-message-out .cr-message-time { text-align: right; }

.cr-message-product a {
  display: flex; gap: 8px;
  background: var(--cr-bg); border-radius: 12px;
  padding: 8px; text-decoration: none; color: inherit;
  max-width: 260px;
}
.cr-product-image img { width: 50px; height: 50px; border-radius: 8px; object-fit: cover; }
.cr-product-info { display: flex; flex-direction: column; justify-content: center; }
.cr-product-title { font-size: 13px; font-weight: 600; }
.cr-product-price { font-size: 13px; color: var(--cr-primary); font-weight: 700; }

.cr-message-seen { font-size: 11px; color: var(--cr-text-muted); padding: 0 4px; }
.cr-message-translate { font-size: 11px; color: var(--cr-primary); cursor: pointer; padding: 0 4px; }

/* Input Area */
.cr-chat-input-area { border-top: 1px solid var(--cr-border); background: var(--cr-card-bg); }
.cr-chat-input-area .chat-form { padding: 16px 24px; display: flex; flex-direction: column; gap: 0; }
.cr-chat-input-area .chat-form textarea {
  width: 100%; padding: 14px 20px;
  border: 2px solid var(--cr-border); border-radius: 24px;
  font-size: 14px; outline: none;
  transition: all 0.3s ease;
  background: var(--cr-bg); resize: none; font-family: inherit;
  margin-bottom: 10px;
}
.cr-chat-input-area .chat-form textarea:focus {
  border-color: var(--cr-primary); background: white;
  box-shadow: 0 0 0 4px rgba(236, 72, 153, 0.1);
}
/* ---------------------------------------------------------------------------
   Message box could not be typed in; clicking it opened the photo picker.

   Sngine's uploader JS does not just add a class to the button - it WRAPS the
   button in its own <form class="x-uploader"> and puts the hidden
   <input type="file"> inside that form. The base rule
   ".x-uploader input[type=file]" is position:absolute with min-width:100% and
   min-height:100%, and base CSS gives .x-uploader only overflow:hidden, never a
   position. So the input's containing block skipped the 40x40 form entirely and
   resolved to ".x-form.chat-form" (position:relative), where 100% x 100% meant
   the invisible input blanketed the whole input area, message box included.
   overflow:hidden on the form does not clip it, because the input's containing
   block is an ancestor OF the form, not the form.

   Core solves this everywhere else by positioning the form, not the button -
   see ".profile-cover-buttons form.x-uploader" and
   ".profile-avatar-change form.x-uploader" in style.min.css. The chat toolbar
   was the one place that never did.

   Verified on the live site: sampling three points across the message box
   returned INPUT[file] before this rule and TEXTAREA after it, and a real click
   then focused the textarea.
   --------------------------------------------------------------------------- */
.cr-chat-tools form.x-uploader,
.cr-chat-input-area form.x-uploader,
.cr-chat-tools .x-uploader,
.cr-chat-input-area .x-uploader {
  position: relative;
}

.cr-chat-tools { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cr-chat-tools-left { display: flex; align-items: center; gap: 4px; }
.cr-tool-btn {
  /* Deliberately NOT positioned. Inside <form class="x-uploader"> the DOM order
     is [input[type=file], input[hidden], button], so giving this button a
     position makes it paint OVER the earlier absolutely-positioned file input
     and swallow the click - the photo picker then never opens. Only the FORM is
     positioned (see the rule above .cr-chat-tools). Confirmed on the live site:
     with the button positioned the photo button hit-tests to <i>; with it
     static it hit-tests to INPUT[file] and the picker opens. */
  width: 40px; height: 40px; border-radius: 50%;
  border: none; background: transparent;
  color: var(--cr-text-muted); font-size: 16px;
  cursor: pointer; transition: all 0.3s ease;
  display: flex; align-items: center; justify-content: center;
}
.cr-tool-btn:hover { background: var(--cr-primary-light); color: var(--cr-primary); }
.cr-send-btn {
  width: 50px; height: 50px; border-radius: 50%;
  background: linear-gradient(135deg, var(--cr-primary), var(--cr-secondary));
  color: white; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  box-shadow: 0 4px 15px rgba(236, 72, 153, 0.3);
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.cr-send-btn:hover { transform: scale(1.1) rotate(-10deg); box-shadow: 0 6px 20px rgba(236,72,153,0.5); }
.cr-send-btn:active { transform: scale(0.95); }

/* Chat empty state */
.cr-chat-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  height: 100%; text-align: center; padding: 40px;
}
.cr-chat-empty-icon {
  width: 96px; height: 96px;
  border-radius: 50%;
  background: var(--cr-primary-light);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 20px; font-size: 40px; color: var(--cr-primary);
}

/* New message body */
.cr-chat-body-new {
  flex: 1; display: flex; flex-direction: column;
  overflow: hidden;
}

/* Typing indicator (cr- style)
   This used to be a flat "display:flex", which loads AFTER style.min.css and so
   overrode the base ".chat-typing{display:none}" - the indicator was therefore
   painted on every conversation, permanently, whether or not anyone was typing.
   Core JS shows it with jQuery .show() (which writes inline display:block) and
   hides it with .hide() (inline display:none), so: default to hidden, and
   upgrade the inline "block" back to flex so the dots still lay out correctly. */
.cr-typing {
  display: none;
  align-items: center; gap: 8px;
  padding: 8px 24px;
  font-size: 13px; color: var(--cr-text-muted);
  background: var(--cr-bg);
}
.cr-typing[style*="display: block"],
.cr-typing[style*="display:block"],
.cr-typing[style*="display: flex"],
.cr-typing[style*="display:flex"] {
  display: flex !important;
}
.cr-typing-dots { display: flex; gap: 4px; }
.cr-typing-dot {
  width: 8px; height: 8px;
  background: var(--cr-text-muted); border-radius: 50%;
  animation: crTypingBounce 1.4s infinite;
}
.cr-typing-dot:nth-child(2) { animation-delay: 0.2s; }
.cr-typing-dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes crTypingBounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-6px); opacity: 1; }
}

/* --- Duplicated in scoped styles below for backward compatibility --- */

@media (max-width: 900px) {
  .cr-chat-list-panel { max-height: 350px; }
}