/* === Attachments — single source of truth === */
:root{
  /* Global knobs – change these to resize all previews app-wide */
  --attach-thumb-w: 120px;   /* width of grid cells */
  --attach-thumb-h: 120px;   /* height cap for images/videos */
  --attach-gap: 8px;
  --attach-radius: 8px;
  --attach-border: 1px solid #ccc;

   /* ===== Chat Typography System ===== */
  --chat-font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;

  --chat-font-size-base: 0.95rem;   /* message text */
  --chat-font-size-sm:   0.85rem;   /* meta, system, reply */
  --chat-font-size-xs:   0.75rem;   /* timestamps */
  --chat-font-size-lg:   1.05rem;   /* emphasized / preview */

  --chat-line-height: 1.45;
  --chat-text-color: #212529;
  --chat-muted-color: #6c757d;

  --chat-action-size: 40px;
  --chat-action-radius: 999px;
  --chat-action-shadow: 0 2px 10px rgba(0,0,0,.14);
  --chat-action-border: 1px solid #e9ecef;

  --chat-action-bg: #f8f9fa;
  --chat-action-fg: #495057;

  --chat-action-hover-bg: #1F335C;
  --chat-action-hover-fg: #fff;
  --chat-action-hover-border: #1F335C;
}
#editMessageText {
    min-height: 300px;
}
/* Each preview item cell */
.attach-thumb{
  position:relative;
  width:var(--attach-thumb-w);
  max-width:var(--attach-thumb-w);
  min-width:var(--attach-thumb-w);
  /* Keep filename below from shrinking */
  display:flex;
  flex-direction:column;
  align-items:center;
}

/* The media box (image/video/file icon background) */
.attach-box{
  width:100%;
  height:var(--attach-thumb-h);
  border:var(--attach-border);
  border-radius:var(--attach-radius);
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden; /* crop oversize content */
}

#attachmentPreviewContainer{
  display: flex;
  flex-wrap: wrap;
  gap: var(--attach-gap);
  margin-bottom: 6px;

  max-height: 180px;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 6px;
}


/* Images — contain without overflow; no “dynamic big” */
.attach-box img{
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
  object-fit:contain;   /* no distortion; letterboxed if needed */
  display:block;
}

/* Videos — same idea, keep inside the box */
.attach-box video{
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
  border-radius:inherit;
  display:block;
}

/* Generic file chip inside the box */
.attach-file-chip{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:.875rem;
  line-height:1.2;
  padding:8px;
  border-radius:6px;
  background:#f8f9fa;
  border:var(--attach-border);
  max-width:calc(var(--attach-thumb-w) - 8px);
}

/* Filename under the box */
.attach-name{
  margin-top:6px;
  font-size:.75rem;
  max-width:100%;
  width:100%;
  text-align:center;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Close (x) button on top-right of the cell */
.attach-thumb .btn-close{
  position:absolute;
  top:4px;
  right:4px;
  z-index:2;
}

/* Responsive knobs */
@media (max-width: 576px){
  :root{
    --attach-thumb-w: 100px;
    --attach-thumb-h: 100px;
  }
}
@media (max-width: 360px){
  :root{
    --attach-thumb-w: 90px;
    --attach-thumb-h: 90px;
  }
}

 .team-add:hover, .team-add:focus {
    background: #425376 !important;
    color: #c7c4c4ff !important;
    transition: background 0.2s;
  }

  /* Team section within channel sidebar */
  .team-section {
    background: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
  }

  .team-section .team-list {
    flex: 1;
    overflow-x: auto;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
  }

  .team-section .team-list::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
  }

  .team-section .team-item {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #6c757d;
    color: white;
    cursor: pointer;
    transition: all 0.2s ease;
    font-weight: 600;
    font-size: 1rem;
    flex-shrink: 0;
  }

  .team-section .team-item .team-icon {
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
  }

  .team-section .team-item:hover,
  .team-section .team-item.active {
    background: #0d6efd;
    transform: scale(1.05);
  }

  .team-section .team-add {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: #e9ecef;
    color: #6c757d;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
  }

  .team-section .team-add:hover {
    background: #0d6efd;
    color: white;
  }

  /* Chat header sizing and button adjustments */
  .chat-header {
    min-height: 56px;
    height: 56px;
    padding: 0 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #dee2e6;
    background: #ffffff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.08);
    position: sticky;
    top: 0; /* Revert to original for desktop */
    z-index: 100; /* Revert to original */
    backdrop-filter: blur(8px);
    transition: all 0.3s ease;
  }

  .chat-header.scrolled {
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    border-bottom-color: #bbb;
  }

  .chat-header .d-flex.align-items-center {
    gap: 0.5rem; /* Reduced gap to bring name closer to avatar */
    flex: 1;
    min-width: 0; /* Allow text truncation */
  }

  .chat-header h4 {
    font-size: 1.3rem;
    margin-bottom: 0;
    font-weight: 600;
    color: #2c3e50;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
  }

  .chat-header .user-status {
    font-size: 0.85rem;
    color: #6c757d;
    font-weight: 400;
  }

  .chat-header .user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #e9ecef;
    transition: border-color 0.2s ease;
  }

  .chat-header .user-avatar:hover {
    border-color: #007bff;
  }

  .chat-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
  }

  .chat-actions .btn {
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 4px; /* Square corners instead of rounded */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    border: 1px solid #e9ecef;
    background: #f8f9fa;
    color: #495057;
    transition: all 0.2s ease;
    position: relative;
  }

  .chat-actions .btn:hover {
    background: #1F335C;
    border-color: #1F335C;
    color: white;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0,123,255,0.3);
  }

  .chat-actions .btn:active {
    transform: translateY(0);
  }

  .chat-actions .btn i {
    font-size: 0.95rem;
    line-height: 1;
  }

  /* Tooltip for action buttons */
  .chat-actions .btn[data-bs-toggle="tooltip"]:hover::after {
    content: attr(title);
    position: absolute;
    bottom: -35px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.8);
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    white-space: nowrap;
    z-index: 1000;
  }
  /* Remove custom hover/focus override, use Bootstrap default */

  /* Tablet responsiveness */
  @media (max-width: 992px) {
    .chat-header {
      min-height: 52px;
      height: 52px;
      padding: 0 1rem;
      top: 0; /* Keep original for tablet */
    }

    .chat-header h4 {
      font-size: 1.2rem;
    }

    .chat-header .user-avatar {
      width: 36px;
      height: 36px;
    }

    .chat-actions .btn {
      width: 34px;
      height: 34px;
      font-size: 0.9rem;
      border-radius: 4px; /* Square corners for tablet */
    }
  }

  /* Mobile responsiveness */
  @media (max-width: 768px) {
    .chat-header {
      min-height: 48px;
      height: 48px;
      padding: 0 0.75rem;
      position: sticky;
      top: 0; /* Account for mobile navbar height */
      left: 0;
      right: 0;
      width: 100%;
      z-index: 99;
      backdrop-filter: blur(10px);
      background: rgba(255, 255, 255, 0.95);
    }

    .chat-header .d-flex.align-items-center {
      gap: 0.4rem; /* Closer spacing on mobile */
      min-width: 0;
      flex: 1;
    }

    .chat-header h4 {
      font-size: 1.1rem;
      max-width: 150px;
      font-weight: 600;
    }

    .chat-header .user-status {
      display: none; /* Hide status on mobile to save space */
    }

    .chat-header .user-avatar {
      width: 32px;
      height: 32px;
      border-width: 1px;
      flex-shrink: 0;
    }

    .chat-actions {
      gap: 0.25rem;
      flex-shrink: 0;
    }

    .chat-actions .btn {
      width: 32px;
      height: 32px;
      font-size: 0.85rem;
      border-radius: 3px; /* Square corners for mobile */
      min-width: 32px;
      touch-action: manipulation;
    }

    .chat-actions .btn i {
      font-size: 0.8rem;
    }

    .chat-actions .btn:hover {
      transform: none; /* Remove hover lift on mobile */
    }

    /* Hide tooltips on mobile */
    .chat-actions .btn[data-bs-toggle="tooltip"]:hover::after {
      display: none;
    }

    /* Add padding to body content to account for fixed header */
    body .chat-container,
    body .main-content {
      padding-top: 0; /* Remove since we're using sticky positioning now */
    }
  }

  /* Small mobile devices */
  @media (max-width: 576px) {
    .chat-header {
      min-height: 44px;
      height: 44px;
      padding: 0 0.5rem;
      position: sticky;
      top: 0; /* Account for smaller mobile navbar */
      left: 0;
      right: 0;
      width: 100%;
      z-index: 99;
    }

    .chat-header .d-flex.align-items-center {
      gap: 0.3rem; /* Even closer spacing on small mobile */
    }

    .chat-header h4 {
      font-size: 1rem;
      max-width: 120px;
      font-weight: 600;
    }

    .chat-header .user-avatar {
      width: 28px;
      height: 28px;
    }

    .chat-actions {
      gap: 0.2rem;
    }

    .chat-actions .btn {
      width: 30px;
      height: 30px;
      font-size: 0.8rem;
      min-width: 30px;
      border-radius: 3px; /* Square corners for small mobile */
    }

    .chat-actions .btn i {
      font-size: 0.75rem;
    }

    /* Adjust body padding for smaller header */
    body .chat-container,
    body .main-content {
      padding-top: 0; /* Remove since we're using sticky positioning now */
    }
  }

  /* Extra small devices */
  @media (max-width: 480px) {
    .chat-header {
      min-height: 40px;
      height: 40px;
      padding: 0 0.4rem;
      position: sticky;
      top: 0; /* Account for extra small navbar */
      left: 0;
      right: 0;
      width: 100%;
      z-index: 99;
    }

    .chat-header .d-flex.align-items-center {
      gap: 0.25rem; /* Minimal spacing on extra small devices */
    }

    .chat-header h4 {
      font-size: 0.95rem;
      max-width: 100px;
      font-weight: 600;
    }

    .chat-header .user-avatar {
      width: 24px;
      height: 24px;
    }

    .chat-actions {
      gap: 0.15rem;
    }

    .chat-actions .btn {
      width: 28px;
      height: 28px;
      font-size: 0.75rem;
      border-radius: 2px; /* Square corners for extra small */
      min-width: 28px;
    }

    .chat-actions .btn i {
      font-size: 0.7rem;
    }

    /* Adjust body padding for smallest header */
    body .chat-container,
    body .main-content {
      padding-top: 0; /* Remove since we're using sticky positioning now */
    }
  }

  /* Additional mobile-specific fixes */
  @media (max-width: 768px) {
    /* Prevent text selection on mobile */
    .chat-header {
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
    }

    /* Better touch targets */
    .chat-actions .btn {
      min-height: 44px;
      min-width: 44px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    /* Ensure proper spacing on very narrow screens */
    @media (max-width: 320px) {
      .chat-header {
        padding: 0 0.25rem;
        top: 0; /* Account for very small navbar */
      }

      .chat-header h4 {
        max-width: 80px;
        font-size: 0.9rem;
      }

      .chat-actions {
        gap: 0.1rem;
      }

      .chat-actions .btn {
        width: 26px;
        height: 26px;
        min-width: 26px;
        min-height: 26px;
        font-size: 0.7rem;
      }
    }

    /* Landscape mobile orientation */
    @media (orientation: landscape) and (max-height: 500px) {
      .chat-header {
        min-height: 36px;
        height: 36px;
        padding: 0 0.5rem;
        top: 0; /* Account for landscape navbar */
      }

      .chat-header h4 {
        font-size: 0.9rem;
      }

      .chat-header .user-avatar {
        width: 24px;
        height: 24px;
      }

      .chat-actions .btn {
        width: 24px;
        height: 24px;
        min-width: 24px;
        min-height: 24px;
        font-size: 0.7rem;
      }

      body .chat-container,
      body .main-content {
        padding-top: 0;
      }
    }
  }


  .custom-chat-header {
    height: 10.53%; /* Reverted to original */
}
.chat-image-attachment {
    max-height: 200px;
    margin-right: 5px;
    border: 1px solid #ddd;
}
#attachmentPreviewContainer img {
    border: 1px solid #ccc;
    border-radius: 5px;
    margin-right: 8px;
}

/* Base: applies to both <textarea.message-input> and [contenteditable].message-input */
.message-input {
  width: 100%;
  line-height: 1.5;
  min-height: 42px;
  max-height: 160px;
  overflow-y: auto;
  resize: none; /* harmless on contenteditable */
}

/* Contenteditable-only tweaks/placeholder */
.message-input[contenteditable="true"] {
  /* If you prefer the tighter CE height, override here */
  min-height: 40px;
  max-height: 120px;
  outline: none;
}

.message-input[contenteditable="true"]:empty:before {
  content: attr(data-placeholder);
  color: #6c757d;
}

/* Make message input container sticky in mobile view + header adjustments */
@media (max-width: 767.98px) {
  .custom-chat-header {
    margin-top: 0 !important; /* Remove top margin to sit under navbar */
    height: 10.53%; /* Reverted to original */
  }

  /* Force horizontal layout on mobile */
  .chat-header .d-flex {
    flex-direction: row !important;
    align-items: center !important;
    gap: 0.5rem !important;
  }

  /* Left side: Avatar and Name */
  .chat-header .d-flex > div:first-child {
    flex: 1;
    min-width: 0; /* Allow text truncation */
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 0.4rem !important; /* Better spacing */
    position: relative; /* For absolute positioning of status */
  }

  /* Create a wrapper for avatar and status positioning */
  .chat-header .d-flex > div:first-child {
    position: relative;
  }

  /* Avatar adjustments for mobile */
  .chat-header img.rounded-circle {
    width: 28px !important;
    height: 28px !important;
    flex-shrink: 0 !important;
    margin: 0 !important; /* Remove default margins */
    position: relative;
    z-index: 1;
  }

  /* Position status in lower right of avatar */
  .channel-status {
    width: 12px !important;
    height: 12px !important;
    flex-shrink: 0 !important;
    position: absolute !important;
    bottom: 0 !important;
    right: calc(100% - 28px + 2px) !important; /* Position relative to avatar */
    margin: 0 !important;
    border: 1px solid white !important; /* White border for visibility */
    z-index: 2 !important;
    transform: translate(50%, 50%) !important; /* Center on corner */
  }

  /* Adjust text container for mobile */
  .chat-header .text-truncate {
    max-width: 120px !important;
    min-width: 0;
    flex: 1;
  }

  .chat-header .text-truncate h6 {
    font-size: 0.9rem !important;
    margin-bottom: 0 !important;
    line-height: 1.2 !important;
  }

  .chat-header .text-truncate small {
    font-size: 0.75rem !important;
    display: none !important; /* Hide status text on mobile to save space */
  }

  /* Right side: Action buttons */
  .chat-actions {
    flex-shrink: 0 !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 0.25rem !important;
    align-items: center !important;
  }

  .chat-actions .btn {
    width: 28px !important;
    height: 28px !important;
    padding: 0 !important;
    font-size: 0.8rem !important;
    border-radius: 6px !important;
  }

  .message-input-container {
    position: relative;
    bottom: 0;
    z-index: 1000;
    background: #fff;
    padding-bottom: 18px;
  }
}


/* Extra small mobile devices */
@media (max-width: 480px) {
    .chat-header .text-truncate {
        max-width: 100px !important;
    }

    .chat-header .text-truncate h6 {
        font-size: 0.85rem !important;
    }

    .chat-actions .btn {
        width: 30px !important;
        height: 30px !important;
        font-size: 0.75rem !important;
    }

    .chat-header img.rounded-circle {
        width: 26px !important;
        height: 26px !important;
    }

    /* Adjust status positioning for smaller avatar */
    .channel-status {
        width: 6px !important;
        height: 6px !important;
        right: calc(100% - 26px + 2px) !important;
        border-width: 1px !important;
    }
}

/* Very small screens */
@media (max-width: 360px) {
    .chat-header .text-truncate {
        max-width: 80px !important;
    }

    .chat-header .d-flex > div:first-child {
        gap: 0.3rem !important;
    }

    .chat-actions {
        gap: 0.15rem !important;
    }

    .chat-actions .btn {
        width: 28px !important;
        height: 28px !important;
        font-size: 0.7rem !important;
    }

    .chat-header img.rounded-circle {
        width: 24px !important;
        height: 24px !important;
    }

    /* Adjust status positioning for smallest avatar */
    .channel-status {
        width: 5px !important;
        height: 5px !important;
        right: calc(100% - 24px + 1px) !important;
        border-width: 0.5px !important;
    }
}

/* Wrap individual preview items (image or file) */
#attachmentPreviewContainer .preview-item {
    position: relative;
    max-width: 120px;
    word-wrap: break-word;
}

/* Ensure preview images have consistent size */
#attachmentPreviewContainer img {
    max-height: 120px;
    width: auto;
    border: 1px solid #ccc;
    border-radius: 6px;
    object-fit: contain;
}

/* Adjust layout for better responsiveness */
.input-area {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}
.chat-image-attachment {
    max-height: 120px;
    border-radius: 6px;
    border: 1px solid #ccc;
    object-fit: cover;
}
.chat-video-attachment {
    border-radius: 6px;
    border: 1px solid #ccc;
}
.card-custom {
    height: 300px;
}

.message .message-actions {
  opacity: 0;
  visibility: hidden;
  transition: opacity .15s ease;
}

.message:hover .message-actions {
  opacity: 1;
  visibility: visible;
}

/* touch devices always visible */
@media (hover: none) {
  .message .message-actions {
    opacity: 1;
    visibility: visible;
  }
}
/* Only messages with iframe/link */
.message.has-iframe .message-content {
  padding-right: 44px; /* space for ⋮ button */
}


#mediaPreviewModal .preview-stage img,
#mediaPreviewModal .preview-stage video {
  max-width: 100%;
  max-height: 85vh;
}

/* always show actions on touch devices */
@media (hover: none) {
  .message .message-actions { opacity: 1; visibility: visible; }
}
/* make it obvious text can be expanded */
.message-text.js-preview-text {
  cursor: zoom-in;
}

#mediaPreviewModal .modal-content {
  height: 100vh;
  display: flex;
  flex-direction: column;
}
#mediaPreviewModal .preview-stage {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;      /* <— enables scrolling for long text */
  background: #dcedf7;
  display: flex;
  align-items: center;
  justify-content: center;
  color: black;
}
#mediaPreviewModal .preview-text {
  color: #fff;
  font-size: 1.25rem;
  line-height: 1.6;
  max-width: 900px;
  padding: 24px;
  white-space: pre-wrap;
  word-break: break-word;
  margin-top: 2rem;
}

.preview-html,
.preview-text{
  white-space: break-spaces;  /* or pre-wrap if you don't need trailing spaces */
  word-wrap: break-word;
  max-width: min(900px, 90vw);
  margin: 0 auto;
  text-align: left;
  padding-top: 10%;
  padding-bottom: 2px;
}

#dynamicMessageContainer{
  overflow-y: auto;
  max-height: calc(100vh - 220px);
  -webkit-overflow-scrolling: touch;
}

.message-group-start{
  position: sticky;      /* stays visible as you scroll that group */
  top: 0;
  z-index: 1;
  text-align: center;
  margin: 8px 0 12px;
}
.message-group-start > span{
  display:inline-block;
  background:#e9ecef;
  color:#495057;
  font-size:12px;
  font-weight:600;
  padding:4px 10px;
  border-radius:999px;
}

.message-text { white-space: pre-wrap; }

/* fake placeholder for contenteditable */
#chatInput:empty:before {
    content: attr(data-placeholder);
    color: #6c757d;
    pointer-events: none;
}

#chatInput {
  order: 1;               /* ensure it stays in the first row */
  flex: 1 1 auto;
  min-height: 110px;
  max-height: 200px;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.4;
  border: 1px solid #dee2e6!important;
  padding-right: 60px !important;
}

/* 1) Never show horizontal scroll on the messages container */
#dynamicMessageContainer,
.messages-container {
  overflow-x: hidden;     /* hide */
  width: 100%;
  box-sizing: border-box; /* avoid overflow from padding */
  padding-right: 1rem;
}

/* 2) Wrap long text/URLs inside messages */
#dynamicMessageContainer,
#dynamicMessageContainer .message,
#dynamicMessageContainer .message-text,
#dynamicMessageContainer .message .content {
  word-break: break-word;    /* break long words/URLs if needed */
  overflow-wrap: anywhere;   /* modern fallback for unbreakable strings */
}

/* 3) Make images/videos shrink to fit container */
#dynamicMessageContainer img,
#dynamicMessageContainer video {
  max-width: 100%;
  height: auto;
  display: block;
}

/* 4) If you render code blocks, wrap them too (no sideways scroll) */
#dynamicMessageContainer pre,
#dynamicMessageContainer code {
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
}


/* 2) If message bubbles suddenly right-align their text, pin them too */
#dynamicMessageContainer .message,
#dynamicMessageContainer .message-text {
  direction: ltr;
  text-align: left;
}

.message-reactions .btn { border-radius: 999px; }
.message-reactions .badge { border-radius: 999px; }

/* put in your stylesheet */
.message.__latest-hit {
  outline: 2px solid rgba(255,193,7,.95);
  background: rgba(255,243,205,.7);
  transition: background 1s ease;
}

/* time chip at bottom-right */
.message .message-meta {
  position: absolute;
  right: 8px;
  bottom: 6px;
  font-size: 0.75rem;
  color: var(--bs-secondary-color, #6c757d);
  line-height: 1;
}

.message-content{
  position: relative;
  min-width: 0;
  overflow: hidden;
  padding-bottom: 1.25rem; /* space for timestamp */
}

/* bubble styles */
.message:not(.own-message) .message-content{
  display: inline-block;
  background: #f1f3f5;
  color: #212529;
  border-radius: 12px;
  padding: 0.6rem 0.85rem 1.25rem;
}


/* optional: lighter in dark bubbles */
.message.own-message .message-meta {
  color: rgba(255,255,255,0.75);
}

#sendSpinner {
    min-width: 20px;
    margin-right: 5px;
    color: #192A4D;
}

.message-input-container.drag-over {
  border: 2px dashed #0d6efd;
  border-radius: 6px;
  background: rgba(13, 110, 253, 0.05);
}
/* ✅ Floating Send button (inside input wrapper) */
#sendMessageBtn{
  position: absolute;
  right: 13px;
  bottom: 12px;            /* better: align to input padding */
  z-index: 5;

  width: 40px;
  height: 40px;
  border-radius: 999px;

  display: flex;
  align-items: center;
  justify-content: center;

  background: #0d6efd;
  color: #fff;
  border: none;

  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  transition: transform .12s ease, background-color .12s ease;
}

#sendMessageBtn:hover{ background:#0b5ed7; transform: scale(1.03); }
#sendMessageBtn:active{ transform: scale(.98); }

#sendMessageBtn:hover {
  background: #0b5ed7;
  transform: scale(1.05);
}
.reply-preview {
  display: flex; align-items: flex-start;
  gap: .5rem; padding: .5rem .75rem; border-left: 3px solid #0d6efd;
  background: rgba(13,110,253,.06); border-radius: .5rem; margin-bottom: .5rem;
}
.reply-preview .rp-left { margin-top: .15rem; }
.reply-preview .rp-name { font-weight: 600; font-size: .9rem; }
.reply-preview .rp-text { font-size: .85rem; color: #444; }

.reply-snippet {
  border-color: #0d6efd !important; /* blue stripe */
  max-width: 100%;

  cursor: pointer;
}
.reply-snippet .text-truncate {
  max-width: 100%;
  width: 100%;
  white-space: wrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.highlight-reply {
  background-color: rgba(13, 110, 253, 0.15); /* light primary */
  transition: background-color 0.5s ease;
}

.system-message {
  font-style: italic;
  opacity: 0.85;
}

.system-message span {
  font-size: 0.85rem;
  background: #f8f9fa;
  border-radius: 12px;
  padding: 2px 8px;
  color: #555;
}
/* === Inline @mention styling (Discord-light aesthetic) === */
.mention {
  display: inline;
  background-color: rgba(13, 110, 253, 0.1); /* soft primary background */
  color: #0d6efd;                             /* Bootstrap primary */
  font-weight: 600;
  border-radius: 4px;
  padding: 0 3px;                             /* slight inner padding */
  margin: 0;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
  vertical-align: baseline;
}

/* Hover effect */
.mention:hover {
  background-color: rgba(13, 110, 253, 0.18);
  color: #084298; /* slightly darker primary for contrast */
  text-decoration: none;
}

/* Pressed feedback */
.mention:active {
  background-color: rgba(13, 110, 253, 0.25);
  color: #052c65;
}

/* === Tribute.js Dropdown (Light Discord Style) === */
.tribute-container {
  position: absolute !important;
  background: #ffffff;
  border: 1px solid #e3e5e8;
  border-radius: 10px;
  box-shadow:
    0 4px 8px rgba(0, 0, 0, 0.08),
    0 1px 2px rgba(0, 0, 0, 0.04);
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: 14px;
  z-index: 9999;
  max-height: 280px;
  overflow-y: auto;
  padding: 4px 0;
  animation: tribute-fade-in 0.15s ease-in-out;
}

/* Smooth fade-in animation */
@keyframes tribute-fade-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Scrollbar — subtle and modern */
.tribute-container::-webkit-scrollbar {
  width: 6px;
}
.tribute-container::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.12);
  border-radius: 3px;
}

/* === List === */
.tribute-container ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.tribute-container li {
  padding: 6px 10px;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}

.tribute-container li .d-flex {
  align-items: center;
  display: flex;
  gap: 8px;
}

/* Avatar */
.tribute-container li img {
  border-radius: 50%;
  width: 30px;
  height: 30px;
  object-fit: cover;
  flex-shrink: 0;
}

/* Text */
.tribute-container li span {
  font-weight: 500;
  color: #2f3136;
  display: flex;
  flex-direction: column;
}

.tribute-container li small {
  color: #6b7280;
  font-size: 12px;
}

/* Hover and Active highlight (Discord-style blue tint) */
.tribute-container li:hover,
.tribute-container li.highlight {
  background-color: #f3f4f6;
  border-radius: 8px;
}

.tribute-container li.highlight {
  background-color: #e0e7ff;
  color: #1e3a8a;
}

.tribute-container li.highlight span {
  color: #1e3a8a;
}

/* === Responsiveness for narrow modals === */
@media (max-width: 768px) {
  .tribute-container {
    font-size: 13px;
    border-radius: 8px;
  }

  .tribute-container li {
    padding: 5px 8px;
  }

  .tribute-container li img {
    width: 26px;
    height: 26px;
  }
}

.forwarded-snippet {
  background-color: #f8f9fa;
  border-left: 3px solid #dee2e6;
  border-radius: 6px;
  padding: 6px 8px;
}
.forwarded-snippet .forwarded-text {
  color: #333;
  font-size: 0.85rem;
  line-height: 1.3;
}
/* Ensure presence dot keeps its size */
#chatHeaderPresenceDot,
.presence-dot {
  --presence-size: 6px;        /* default size */
  width: var(--presence-size);
  height: var(--presence-size);
  min-width: var(--presence-size);  /* 🔑 prevents collapse */
  min-height: var(--presence-size);
  border-radius: 50%;
  flex: 0 0 var(--presence-size);   /* 🔑 locks in width in flex containers */
  display: inline-block;
}


/* Color states */
.presence-online  { background-color: #10b981; } /* green */
.presence-away    { background-color: #f59e0b; } /* amber */
.presence-offline { background-color: #9ca3af; } /* gray */

/* ================================
   🧹 DELETED MESSAGE STYLES
   Clean, minimal, and consistent
   ================================ */

/* Wrap container */
.message.message-deleted .message-content {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  padding: 4px 0 !important;
}

/* Text container for deleted message */
.message.message-deleted .deleted-message {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.9rem;
  color: #6c757d;
  font-style: italic;
  padding: 4px 0;
  line-height: 1.3;
  background: transparent;
}

/* Trash icon */
.message.message-deleted .deleted-message i {
  font-size: 0.85rem;
  opacity: 0.9;
  color: #dc3545; /* Bootstrap red */
}

/* Meta info (timestamp) */
/* Deleted message timestamp below text */
.message.message-deleted .message-meta {
  font-size: 0.75rem;
  color: #9a9a9a;
  margin-top: 2px;
  margin-left: 22px; /* align slightly after trash icon */
}


/* For the current user's own deleted messages */
.message.own-message.message-deleted {
  justify-content: flex-end;
}

.message.own-message.message-deleted .message-content {
  text-align: right;
  background: none !important;
}

/* Optional soft transition (appears smooth after delete) */
.message.message-deleted {
  transition: all 0.2s ease-in-out;
  opacity: 0.95;
}
/* subtle flash for the highlighted message */
.__latest-hit {
  animation: latestFlash 1.8s ease;
  box-shadow: 0 0 0 2px rgba(255, 208, 0, 0.35) inset;
  background: rgba(255, 234, 138, 0.35);
  border-radius: 8px;
}
@keyframes latestFlash {
  0%   { background: rgba(255,234,138,0.65); }
  100% { background: rgba(255,234,138,0.0);  }
}

#messageStatusModal img {
  width: 32px;
  height: 32px;
  object-fit: cover;
}
#messageStatusModal .user-entry {
  display: flex;
  align-items: center;
  margin-bottom: 6px;
}
#messageStatusModal .user-entry img {
  margin-right: 8px;
}
#messageStatusModal .emoji-label {
  font-size: 1.1rem;
  margin-bottom: 4px;
}

/* 🔖 Highlight pinned messages */
.message.pinned-message {
  border-left: 3px solid gold !important;
  background-color: #fffbea !important;
  border-radius: 10px;
  transition: background-color 0.3s ease;
}

.pinned-banner {
  border-bottom: 1px dashed gold;
  padding-bottom: 2px;
  margin-bottom: 4px;
  font-size: 0.8rem;
}
/* ================================
   🧷 Pinned Messages Panel Styling
   ================================ */

#pinnedPanel {
  background: #fdfdfd;                 /* slightly lighter background */
  border: 1px solid #d9dbe0;           /* subtle border */
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
  margin-bottom: 12px;
  overflow: hidden;
  transition: all 0.25s ease;
}

/* Sticky pinned bar stays above chat messages */
#pinnedPanel.sticky {
  position: sticky;
  top: 0;
  z-index: 12;
  backdrop-filter: blur(6px);
  border-color: #cfd2d8;
}

/* Header (tape-style) */
#pinnedPanel .pinned-header {
  background: linear-gradient(90deg, #fffbf1 0%, #fff7d6 100%);
  border-bottom: 1px solid #e6dfb3;
  padding: 8px 12px;
}

#pinnedPanel .pinned-header .fw-semibold {
  font-size: 0.9rem;
  color: #5c4e00;
  letter-spacing: 0.3px;
}

#pinnedPanel .toggle-pinned {
  border: none !important;
  background: transparent !important;
  border-radius: 1px;
  transition: background 0.2s ease;
  color: #6c6f75;
}

#pinnedPanel .toggle-pinned:hover {
  background: rgba(0, 0, 0, 0.05);
}

/* Content container */
#pinnedPanel .pinned-content {
  max-height: 220px;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 8px 12px;
  background: #ffffff;
}

/* Distinct pinned item card look */
#pinnedPanel .pinned-item {
  background: #fffef5;
  border: 1px solid #f1e6a7;
  border-left: 4px solid #ffd84f;
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 10px;
  display: flex;
  align-items: flex-start;
  transition: transform 0.15s ease, background 0.2s ease;
}

#pinnedPanel .pinned-item:hover {
  background: #fffce0;
  transform: translateY(-1px);
}

/* Avatar */
#pinnedPanel .pinned-item img {
  border-radius: 50%;
  width: 34px;
  height: 34px;
  margin-right: 10px;
  flex-shrink: 0;
  border: 1px solid #ececec;
}

/* Message body */
#pinnedPanel .pinned-item .fw-semibold {
  font-size: 0.9rem;
  color: #2e3338;
  display: block;
  margin-bottom: 3px;
}

#pinnedPanel .pinned-item .small.text-muted {
  color: #636a73 !important;
  font-size: 0.85rem;
  line-height: 1.35;
  white-space: normal;
  word-wrap: break-word;
}

#pinnedPanel .pinned-item .small.text-secondary {
  color: #8a8f97 !important;
  font-size: 0.8rem;
  margin-top: 3px;
}

/* Thumbnails inside pinned message */
#pinnedPanel .pinned-thumb img {
  border: 1px solid #e3e5e8;
  border-radius: 6px;
  transition: transform 0.2s ease;
}
#pinnedPanel .pinned-thumb img:hover {
  transform: scale(1.05);
}

/* Collapsed state */
#pinnedPanel.collapsed .pinned-content {
  display: none;
}

/* Scrollbar refinement */
#pinnedPanel .pinned-content::-webkit-scrollbar {
  width: 8px;
}
#pinnedPanel .pinned-content::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.25);
  border-radius: 6px;
}


/* ===============================
   🧩 Pinned Message Attachments
   =============================== */

/* Thumbnail wrapper for inline pinned items */
.pinned-thumb {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f8f9fa;
  border: 1px solid #e3e5e8;
  border-radius: 8px;
  padding: 4px;
  min-width: 60px;
  min-height: 60px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.pinned-thumb img {
  border-radius: 6px;
  width: 60px;
  height: 60px;
  object-fit: cover;
}

.pinned-thumb i {
  font-size: 1.25rem;
  color: #666;
}

/* Hover state: subtle lift */
.pinned-thumb:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

/* Wrap thumbnails neatly with spacing */
.pinned-item .d-flex.flex-wrap {
  gap: 8px;
  row-gap: 6px;
}

/* ✅ Modal scroll behavior */
#pinnedPreviewModal .modal-body::-webkit-scrollbar {
  width: 8px;
}
#pinnedPreviewModal .modal-body::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.25);
  border-radius: 6px;
}

/* Attachment preview layout */
#pinnedPreviewModal img {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #fafafa;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
#pinnedPreviewModal img:hover {
  transform: scale(1.03);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

#pinnedPreviewModal video {
  border-radius: 10px;
  display: block;
  background: #000;
  margin: 0 auto;
}

#pinnedPreviewModal .fw-semibold.text-uppercase {
  font-size: 0.8rem;
  color: #80848e;
  letter-spacing: 0.05em;
}
/* 🧱 Outer resizable wrapper */
.chat-input-wrapper {
  /* resize: vertical; */            /* enable drag to resize vertically */
  overflow: auto;
  min-height: 60px;
  max-height: 300px;
  border-radius: 0.375rem;
  position: relative;
  margin-bottom: 10px;
}

/* Inner contenteditable */
.chat-input-wrapper .message-input {
  height: 100%;
  min-height: 60px;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  overflow-y: auto;
  background: transparent !important;
  padding: 10px 12px;
  font-size: 0.95rem;
}

/* Optional: subtle resize “grip” at bottom right */
.chat-input-wrapper::after {
  content: "";
  position: absolute;
  bottom: 4px;
  right: 6px;
  width: 12px;
  height: 12px;
  background: linear-gradient(135deg, transparent 0%, transparent 50%, #adb5bd 50%, #adb5bd 100%);
  opacity: 0.4;
  pointer-events: none;
}
/* Floating rectangular handle centered above input */
.resize-handle-btn {
  position: absolute;
  top: -18px; /* adjust vertical position */
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;

  background-color: #f8f9fa;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 6px;
  padding: 5px 14px;
  min-width: 40px;
  height: 20px;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 0.95rem;
  color: #adb5bd;
  cursor: pointer;
  opacity: 0.9;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  transition: all 0.2s ease;
}

.resize-handle-btn:hover {
  opacity: 1;
  background-color: #e9ecef;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12);
}

.resize-handle-btn:active {
  background-color: #dee2e6;
  transform: translateX(-50%) scale(0.97);
}

.resize-handle-btn i {
  font-size: 1rem;
  color: #495057;
}

.attachment-bubble {
  background: #f8f9fa;
  border-radius: 6px;
  padding: 4px 8px;
  transition: all 0.3s ease;
}

body.dark-mode .attachment-bubble {
  background: #444;
}

/* Optional nice scrollbar style */
#attachmentPreviewContainer::-webkit-scrollbar {
  width: 6px;
}
#attachmentPreviewContainer::-webkit-scrollbar-thumb {
  background-color: rgba(150, 150, 150, 0.3);
  border-radius: 3px;
}
#attachmentPreviewContainer::-webkit-scrollbar-thumb:hover {
  background-color: rgba(150, 150, 150, 0.5);
}


/* === Viber-Style Loader (Small Circle) === */
.viber-loader {
  width: 26px;
  height: 26px;
  border: 3px solid #d0e3ff;
  border-top-color: #0d6efd;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  margin: 6px auto 2px;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* === Green Check Circle === */
.viber-check {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #28a745;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  margin: 6px auto 2px;
}
.circular-progress {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 4px solid #e5e5e5;
  border-top-color: #17a2b8;
  animation: spin 1s linear infinite;
  position: relative;
}

.circular-progress span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 11px;
  font-weight: bold;
  color: #17a2b8;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.event-card {
    height: auto;
    background: #f8f9fa !important;
    border-radius: 8px;
    border-left-width: 4px !important;
    padding: 5px 30px !important;
    margin: 13px; !important;
    white-space: pre-line !important; /* keeps line breaks but reduces spacing */
}

.event-card .small {
    line-height: 1.2 !important;
}

.event-card .event-body {
    white-space: pre-wrap;
    font-size: 0.80rem;
    line-height: 1rem;
    margin: 0; /* Remove extra margin */
}

.pdf-preview-block {
    width: 260px;     /* adjust width */
    max-width: 100%;  /* prevent overflow */
}

.chat-pdf-preview {
    width: 100%;          /* obey container width */
    height: 220px;        /* adjust height */
    border: 1px solid #ccc;
    border-radius: 6px;
}
.pdf-preview-block .pdf-name {
    max-width: 220px;      /* adjust as needed */
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.chat-container,
#dynamicMessageContainer {
  font-family: var(--chat-font-family);
  font-size: var(--chat-font-size-base);
  line-height: var(--chat-line-height);
  color: var(--chat-text-color);
}

/* THEME STYLES */
/* Dark mode styles for chat header */
body.dark-mode .chat-header {
  background-color: #333333 !important;
  color: #ffffff;

}

body.dark-mode .chat-header .channel-name {
  color: #ffffff !important;
}

body.dark-mode .chat-header .channel-status {
  color: #cccccc !important;
}

body.dark-mode .chat-header .btn-outline-secondary {
  border-color: #555;
  color: #cccccc;
}

body.dark-mode .chat-header .btn-outline-secondary:hover {
  background-color: #333;
  border-color: #777;
  color: #ffffff;
}

/* Dark mode styles for messages container */
body.dark-mode .messages-container {
  background-color: #333333;
}

/* Dark mode styles for message input area */
body.dark-mode .message-input-container {
  background-color: #333333;
  border-top-color: #333;
}

body.dark-mode .form-control.message-input.flex-grow-1.me-2 {
  background-color: #292929 !important;
  color: #ffffff !important;
  border-color: #333 !important;
}

body.dark-mode .message-input::placeholder {
  color: #b3b3b3 !important;
}

body.dark-mode .btn-outline-secondary {
  border-color: #555;
  color: #cccccc;
}

body.dark-mode .btn-outline-secondary:hover {
  background-color: #333;
  border-color: #777;
  color: #ffffff;
}

body.dark-mode .btn-primary {
  background-color: #00d4ff;
  border-color: #00d4ff;
}

body.dark-mode .btn-primary:hover {
  background-color: #0099cc;
  border-color: #0099cc;
}

/* Dark mode for chat area */
body.dark-mode .chat-area {
  background-color: #333333;
}

/* Dark mode for message bubbles */
body.dark-mode .message {
  background-color: transparent !important;
  color: #ffffff !important;
}

/* Dark mode for message wrapper and content */
body.dark-mode .message-wrapper {
  background-color: transparent !important;
}

body.dark-mode .message-content {
  background-color: #4c4c4c75 !important;
  color: #ffffff !important;
}

/* Ensure message text is white */
body.dark-mode .message p,
body.dark-mode .message span,
body.dark-mode .message div {
  color: #ffffff !important;
}

/* Dark mode for message author */
body.dark-mode span.message-author {
  color: #007bff !important;
}

/* Dark mode for reply snippet */
body.dark-mode .reply-snippet {
  background-color: #464B52 !important;
}

/* Make reply snippet full width */
.reply-snippet {
  width: 100% !important;
  max-width: 100% !important;
}

/* Dark mode for dropdown menus */
body.dark-mode .dropdown-menu {
  background-color: #333333 !important;
  border-color: #555 !important;
}

body.dark-mode .dropdown-item {
  color: #ffffff !important;
}

body.dark-mode .dropdown-item:hover {
  background-color: #555 !important;
  color: #ffffff !important;
}

/* Dark mode for modals */
body.dark-mode .modal-content {
  background-color: #333333 !important;
  color: #ffffff !important;
  border-color: #555 !important;
}

body.dark-mode .modal-header {
  background-color: #2a2a2a !important;
  border-bottom-color: #555 !important;
}

body.dark-mode .modal-body {
  background-color: #333333 !important;
}

body.dark-mode .modal-footer {
  background-color: #2a2a2a !important;
  border-top-color: #555 !important;
}

/* Dark mode for modal footer submit button */
body.dark-mode .modal-footer .btn-primary {
  background-color: #1E325C !important;
  border-color: #1E325C !important;
  color: #ffffff !important;
}

body.dark-mode .modal-footer .btn-primary:hover {
  background-color: #0d1b2a !important;
  border-color: #0d1b2a !important;
}



/* Dark mode for attachment box */
body.dark-mode .attach-box {
  background-color: #2a2a2a !important;
  border: 1px solid #555 !important;
  border-radius: 4px !important;
  padding: 8px !important;
}

/* Dark mode for remove attachment button */
body.dark-mode .btn-close.remove-attachment {
  filter: invert(1) !important;
  opacity: 0.8 !important;
}

body.dark-mode .btn-close.remove-attachment:hover {
  opacity: 1 !important;
}

/* Dark mode for media preview stage */
body.dark-mode #mediaPreviewStage {
  background-color: #333333 !important;
  color: #ffffff !important;
}

/* Dark mode for muted text */
body.dark-mode .text-muted {
  color: #b3b3b3 !important;
}

/* Dark mode for modal header close button */
body.dark-mode .modal-header .btn-close {
  filter: invert(1) !important;
  opacity: 0.8 !important;
}

body.dark-mode .modal-header .btn-close:hover {
  opacity: 1 !important;
}

/* Dark mode for message reactions */
body.dark-mode .message-reactions {
  background-color: transparent !important;
}

body.dark-mode .message-reactions button {
  background-color: #1E325C !important;
  color: #ffffff !important;
  border-color: #1E325C !important;
}

body.dark-mode .message-reactions button:hover {
  background-color: #0d1b2a !important;
  border-color: #0d1b2a !important;
}

/* Dark mode for badge spans */
body.dark-mode .badge {
  background-color: transparent !important;
  color: #ffffff !important;
  border: none !important;
}

body.dark-mode .border-bottom {
    border-bottom: var(--bs-border-width) var(--bs-border-style) #2a2828 !important;
}

/* Dark mode for forwarded snippet */
body.dark-mode .forwarded-snippet {
  background-color: #2a2a2a !important;
  color: #ffffff !important;
  border-color: #555 !important;
}

/* Light mode styling for authenticated user messages */
#authenticatedUser {
  color: #333333 !important;
}

body.dark-mode #authenticatedUser {
  color: #ffffff !important;
}

/* Dark mode for tribute mention dropdown */
body.dark-mode .tribute-container {
  background-color: #333333 !important;
}

body.dark-mode .tribute-container ul {
  background-color: #333333 !important;
  border-color: #555 !important;
  color: #cccccc !important;
}

body.dark-mode .tribute-container ul li {
  color: #cccccc !important;
}

body.dark-mode .tribute-container ul li:hover {
  background-color: #555 !important;
  color: #ffffff !important;
}

body.dark-mode .tribute-container ul li.highlight {
  background-color: #1E325C !important;
  color: #ffffff !important;
}

/* Light mode for tribute mention dropdown */
.tribute-container ul {
  background-color: #ffffff !important;
  border-color: #dee2e6 !important;
  color: #212529 !important;
}

.tribute-container ul li {
  color: #212529 !important;
}

.tribute-container ul li:hover {
  background-color: #f8f9fa !important;
  color: #212529 !important;
}

.tribute-container ul li.highlight {
  background-color: #007bff !important;
  color: #ffffff !important;
}

.tribute-container {
  background-color: #ffffff !important;
}

/* Dark mode for tribute container spans */
body.dark-mode .tribute-container li span {
  color: #cccccc !important;
}

/* Ensure the row is positioning context */
.d-flex.align-items-end.w-100{
  position: relative;
  gap: 8px; /* nicer spacing between controls */
}

/* Shared round icon button base */
.chat-action-btn{
 --raise: -22px;
  transform: translateY(var(--raise));
  width: var(--chat-action-size);
  height: var(--chat-action-size);
  border-radius: var(--chat-action-radius);
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: var(--chat-action-border);
  background: var(--chat-action-bg);
  color: var(--chat-action-fg);
  box-shadow: var(--chat-action-shadow);
  transition: transform .12s ease, background-color .12s ease, border-color .12s ease, color .12s ease, box-shadow .12s ease;
}

.chat-action-btn i{
  font-size: .95rem;
  line-height: 1;
}

.chat-action-btn:hover{
  background: var(--chat-action-hover-bg);
  border-color: var(--chat-action-hover-border);
  color: var(--chat-action-hover-fg);
  transform: translateY(-1px);
}

.chat-action-btn:active{
  transform: translateY(0) scale(.98);
}

.chat-action-btn:focus{
  outline: none;
  box-shadow: 0 0 0 .2rem rgba(13,110,253,.25), var(--chat-action-shadow);
}

.chat-action-btn:disabled{
  opacity: .55;
  pointer-events: none;
  box-shadow: none;
}

/* Primary send variant (keeps round look but "primary") */
.chat-action-btn--primary{
  background: #0d6efd;
  border-color: #0d6efd;
  color: #fff;
}

.chat-action-btn--primary:hover{
  background: #0b5ed7;
  border-color: #0b5ed7;
  color: #fff;
}

/* Spinner alignment inside send button */
#sendSpinner{
  margin-left: 6px;
}

/* Mobile sizing */
@media (max-width: 576px){
  :root{ --chat-action-size: 36px; }
  .chat-action-btn i{ font-size: .85rem; }
}

/* Dark mode */
body.dark-mode{
  --chat-action-bg: #2a2a2a;
  --chat-action-fg: #cccccc;
  --chat-action-border: 1px solid #555;
  --chat-action-shadow: 0 2px 10px rgba(0,0,0,.35);
  --chat-action-hover-bg: #1E325C;
  --chat-action-hover-border: #1E325C;
}

#chatInput { caret-color: #111; }
    body.dark-mode #chatInput { caret-color: #fff; }

    /* Layout: input + actions in one row */
    .chat-input-row{
      display: flex;
      align-items: flex-end;
      gap: 10px;
    }

    /* Contenteditable should stretch */
    #chatInput.message-input{
      min-height: 60px;
      flex: 1;
      min-height: 44px;
      max-height: 140px;
      overflow-y: auto;
      border-radius: 14px;
      padding: 10px 12px;
      resize: vertical;
    }

    /* Buttons column */
    .chat-actions{
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding-bottom: 2px; /* nudge buttons up/down relative to input */
    }

    /* Base button */
    .chat-action-btn{
      --chat-action-size: 42px;
      --chat-action-radius: 14px;

      width: var(--chat-action-size);
      height: var(--chat-action-size);
      border-radius: var(--chat-action-radius);
      padding: 0;

      display: inline-flex;
      align-items: center;
      justify-content: center;

      border: 1px solid rgba(255,255,255,.12);
      background: rgba(255,255,255,.06);
      color: rgba(255,255,255,.88);

      box-shadow: 0 10px 22px rgba(0,0,0,.20);
      transition: transform .12s ease, background-color .12s ease, border-color .12s ease, color .12s ease, box-shadow .12s ease;
      transform: translateY(-2px); /* slightly up */
    }

    .chat-action-btn i{
      font-size: 0.95rem;
      line-height: 1;
    }

    /* Hover */
    .chat-action-btn:hover{
      background: rgba(255,255,255,.10);
      border-color: rgba(255,255,255,.18);
      transform: translateY(-3px);
    }

    /* Active press */
    .chat-action-btn:active{
      transform: translateY(-1px);
      box-shadow: 0 6px 16px rgba(0,0,0,.18);
    }

    /* Focus */
    .chat-action-btn:focus{
      box-shadow: 0 0 0 .18rem rgba(0, 160, 255, .25), 0 10px 22px rgba(0,0,0,.20);
    }

    /* Primary send button */
    .chat-action-btn--primary{
      background: linear-gradient(135deg, rgba(0,160,255,.95), rgba(0,210,170,.85));
      border-color: rgba(0,160,255,.35);
      color: #fff;
    }

    .chat-action-btn--primary:hover{
      border-color: rgba(255,255,255,.25);
      background: linear-gradient(135deg, rgba(0,170,255,.98), rgba(0,225,185,.9));
    }

    /* Disabled */
    .chat-action-btn:disabled,
    .chat-action-btn.disabled{
      opacity: .55;
      cursor: not-allowed;
      transform: translateY(-2px);
      box-shadow: none;
    }

    /* Loading state (when spinner shows) */
    .send-button.is-sending #fasPlane{
      display: none;
    }
    .send-button.is-sending #sendSpinner{
      display: inline-block !important;
    }
    .disabled-editor {
        pointer-events: none;
        opacity: 0.6;
        background: #f5f5f5;
        cursor: not-allowed;
    }