/* Unread notification highlight */
.list-group-item.unread, li.unread > a.dropdown-item {
  background: #f5f7fa;
  font-weight: bold;
}
/* ============================================
   GLOBAL RESPONSIVE TYPOGRAPHY
   ============================================ */
:root {
  --base-font-size: 16px;
  --font-scale: 1;
}
html { font-size: var(--base-font-size); }
body { font-family: Arial, sans-serif; margin: 2em; background: #f8f8f8; transition: padding-left 200ms ease; font-size: 1rem; line-height: 1.5; }
h1 { font-size: 2rem; }
h2 { color: #333; font-size: 1.75rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; }
h5 { font-size: 1.1rem; }
h6 { font-size: 1rem; }
form { margin-bottom: 1em; }
.error { color: red; }
.success { color: green; }

/* Tablet font scaling (768px - 991px) */
@media (min-width: 768px) and (max-width: 991px) {
  :root { --base-font-size: 15px; }
}

/* Mobile font scaling (< 576px) */
@media (max-width: 575px) {
  :root { --base-font-size: 14px; }
  h1 { font-size: 1.75rem; }
  h2 { font-size: 1.5rem; }
  h3 { font-size: 1.25rem; }
  h4 { font-size: 1.1rem; }
}

/* Small mobile (< 400px) */
@media (max-width: 399px) {
  :root { --base-font-size: 13px; }
}

/* Sidebar styles */
/* Small screens: hidden by default, open via `.sidebar-open` */
#sidebar { 
  box-shadow: 0 0 12px rgba(0,0,0,0.08); 
  transition: transform 240ms ease, opacity 200ms ease, width 200ms ease; 
  position: fixed; 
  top: 0; 
  left: 0; 
  width: 280px; 
  z-index: 1040; 
  height: 100vh; 
  transform: translateX(-100%); 
  opacity: 0; 
}

/* Smooth transition for app-body padding when sidebar collapses/expands */
.app-body { transition: padding-left 200ms ease; }

/* Open for overlay (small screens) */
.sidebar-open { transform: translateX(0) !important; opacity: 1 !important; }

/* Collapsed state (sidebar visuals apply when floating too) */
#sidebar.sidebar-collapsed { width: 72px !important; }
#sidebar.sidebar-collapsed .link-text { display: none !important; }
#sidebar.sidebar-collapsed .sidebar-header .d-none.d-md-block { display: none !important; }
#sidebar.sidebar-collapsed .nav-link { justify-content: center; position: relative; }
#sidebar.sidebar-collapsed .nav-link i { margin-right: 0 !important; }
#sidebar.sidebar-collapsed .nav-link .position-relative.d-inline-flex { justify-content: center; width: 100%; }
#sidebar.sidebar-collapsed .sidebar-badge { position: absolute; top: 6px; right: 10px; transform: translateX(50%); }

/* Medium and up: make the sidebar sit below the navbar on the left (overlay for small, aligned for larger screens) */
@media (min-width: 768px) {
  /* Floating sidebar initial state on md+ is slightly raised and transparent to allow a slide/fade-in */
  #sidebar {
    transform: translateY(-6px);
    opacity: 0;
    position: fixed;
    /* place below the navbar; use the navbar bottom coordinate when available */
    top: calc(var(--navbar-bottom, var(--navbar-height, 64px)) + 1rem);
    /* align sidebar left with navbar content area using computed var */
    left: var(--sidebar-left, 1rem);
    /* sidebar width uses CSS var from :root, set per breakpoint */
    width: var(--sidebar-width, 200px);
    height: calc(100vh - (var(--navbar-height, 64px)) - 1rem);
    border-radius: 0.5rem;
    background: rgba(255,255,255,0.92);
    border: 1px solid rgba(15,23,42,0.06);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 12px 32px rgba(16,24,40,0.10);
    z-index: 1090;
  }
  /* when JS adds has-sidebar the sidebar will slide/fade into place */
  body.has-sidebar #sidebar { transform: translateY(0); opacity: 1; }
  /* remove the previous zero-padding rule and instead add a content inset when the sidebar is present
     so the main page content is not overlaid by the floating sidebar. This applies on md+.
  */
}

/* When the sidebar is present and NOT collapsed on larger screens, avoid overlaying content by adding left padding */
/* On medium screens (tablets) ensure content is inset when sidebar is visible and not collapsed */
@media (min-width: 768px) and (max-width: 991px) {
  :root { --sidebar-width: 200px; }
  /* shift the app body to the right when the sidebar is present; keep navbar outside this area */
  body.has-sidebar .app-body { padding-left: calc(var(--sidebar-width) + var(--sidebar-left, 1rem) + 1rem); }
  /* when collapsed keep a smaller inset so icons do not overlay content */
  body.has-sidebar.sidebar-collapsed .app-body { padding-left: calc(72px + var(--sidebar-left, 1rem) + 0.5rem); }
  /* spacer for md screens */
  body.has-sidebar .sidebar-spacer { width: var(--sidebar-width, 200px); min-width: var(--sidebar-width, 200px); }
  body.has-sidebar.sidebar-collapsed .sidebar-spacer { width: 72px; min-width: 72px; }
}

/* On larger screens ensure content is inset appropriately using the larger sidebar width */
@media (min-width: 992px) {
  :root { --sidebar-width: 350px; }
  #sidebar { left: var(--sidebar-left, 0.75rem); width: var(--sidebar-width); }
  /* shift the app body to the right when the sidebar is present on large screens */
  body.has-sidebar .app-body { padding-left: calc(var(--sidebar-width) + var(--sidebar-left, 0.75rem)); }
  /* when collapsed keep a smaller inset so icons do not overlay content */
  body.has-sidebar.sidebar-collapsed .app-body { padding-left: calc(72px + var(--sidebar-left, 0.75rem) + 0.5rem); }
  /* spacer for large screens */
  body.has-sidebar .sidebar-spacer { width: var(--sidebar-width, 350px); min-width: var(--sidebar-width, 350px); }
  body.has-sidebar.sidebar-collapsed .sidebar-spacer { width: 72px; min-width: 72px; }
}

/* Collapsed sidebar: center only the navigation icons (not the header) so avatar and collapse
   controls keep their original positions while link icons below are centered. */
#sidebar.sidebar-collapsed .sidebar-items .nav-link {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 0.6rem !important;
  padding-right: 0.6rem !important;
}
#sidebar.sidebar-collapsed .sidebar-items .nav-link .link-text { display: none !important; }
#sidebar.sidebar-collapsed .sidebar-items .nav-link .bi { margin-right: 0 !important; font-size: 1.15rem; }

/* Keep the sidebar header layout unchanged so avatar and collapse/expand button remain as before. */
#sidebar.sidebar-collapsed .sidebar-header .d-none.d-md-block { display: none !important; }

/* Mobile menu: show labels/popups when the floating button is clicked (menu open) */
.mobile-menu .mobile-icon { position: relative; }
.mobile-menu .mobile-icon .mobile-label {
  display: none;
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  white-space: nowrap;
  background: rgba(17,24,39,0.95);
  color: #fff;
  font-size: 0.85rem;
  padding: 0.28rem 0.5rem;
  border-radius: 0.375rem;
  box-shadow: 0 8px 20px rgba(16,24,40,0.16);
  pointer-events: none;
  opacity: 0;
  transition: opacity 180ms ease, transform 180ms ease;
}
.mobile-menu.open .mobile-menu-items .mobile-icon .mobile-label {
  display: block;
  opacity: 1;
  transform: translateX(-50%) translateY(-8px);
}

/* Slight spacing for mobile labels so they don't clash with screen edges */
@media (max-width: 420px) {
  .mobile-menu .mobile-icon .mobile-label { left: auto; right: 0; transform: translateX(0) translateY(-6px); }
  .mobile-menu.open .mobile-menu-items .mobile-icon .mobile-label { transform: translateX(0) translateY(-8px); }
}

/* Mobile persistent menu */
.mobile-menu { position: fixed; bottom: 12px; left: 12px; transform: none; z-index: 1100; display:flex; align-items:center; }
.mobile-menu-button { width:56px; height:56px; border-radius:28px; background:#0d6efd; color:#fff; border:none; display:flex; align-items:center; justify-content:center; box-shadow:0 6px 18px rgba(0,0,0,0.18); }
.mobile-menu-button .mobile-menu-icon { font-size:1.25rem; }
.mobile-menu-items { display:flex; flex-direction:column; gap:10px; margin-bottom:72px; align-items:center; pointer-events:none; }
.mobile-menu-items .mobile-icon { width:48px; height:48px; border-radius:24px; background:#fff; border:1px solid #ddd; display:flex; align-items:center; justify-content:center; color:#333; text-decoration:none; transform: translateY(12px); opacity: 0; transition: transform 260ms cubic-bezier(.16,.84,.44,1), opacity 200ms ease; }
.mobile-menu.open .mobile-menu-items { pointer-events:auto; }
.mobile-menu.open .mobile-menu-items .mobile-icon:nth-child(1){ transition-delay: 0ms; transform: translateY(0); opacity:1; }
.mobile-menu.open .mobile-menu-items .mobile-icon:nth-child(2){ transition-delay: 40ms; transform: translateY(0); opacity:1; }
.mobile-menu.open .mobile-menu-items .mobile-icon:nth-child(3){ transition-delay: 80ms; transform: translateY(0); opacity:1; }
.mobile-menu.open .mobile-menu-items .mobile-icon:nth-child(4){ transition-delay: 120ms; transform: translateY(0); opacity:1; }

/* Hide mobile persistent menu at md and up (show on small only) */
@media (min-width: 768px) {
  .mobile-menu { display: none !important; }
}

/* Hide mobile menu on messages page when chat is open (to avoid overlap with full-screen chat) */
@media (max-width: 575px) {
  body.messages-page:has(.chat-column) .mobile-menu { display: none !important; }
}

/* Utility classes moved from inline attributes to avoid CSP inline-style violations */
.dropdown-minw-320 { min-width: 320px !important; max-width: 360px; }
.dropdown-minw-320 .dropdown-item { overflow: hidden; }
.dropdown-minw-320 .dropdown-item .flex-grow-1 { min-width: 0; }
.dropdown-minw-320 .nav-msg-preview { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.dropdown-minw-320 .fw-semibold { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Preformatted logs block used by admin debug pages (moved from inline style) */
.logs-tail {
  white-space: pre-wrap;
  background: #f7f7f7;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-family: monospace;
  font-size: 0.95rem;
  color: #111;
}

/* Responsive dropdown on mobile */
@media (max-width: 575px) {
  .dropdown-minw-320 { 
    min-width: calc(100vw - 2rem) !important; 
    max-width: calc(100vw - 1rem);
    right: 0.5rem !important;
    left: auto !important;
  }
  .dropdown-minw-320 .nav-msg-preview { max-width: calc(100vw - 120px); }
  .dropdown-minw-320 .fw-semibold { max-width: calc(100vw - 120px); }
  .dropdown-minw-320 .dropdown-item { padding: 0.5rem 0.75rem; }
  .dropdown-minw-320 .avatar-32 { width: 28px !important; height: 28px !important; }
  
  /* Ensure navbar message/notification dropdowns fit and are not cut off on mobile */
  #navNotifications ~ .dropdown-menu,
  #navMessages ~ .dropdown-menu {
    position: fixed !important;
    top: 56px !important; /* adjust if navbar height changes */
    left: 0 !important;
    right: auto !important;
    max-width: 280px !important;
    min-width: 180px;
    width: 90vw;
    margin: 0 !important;
    border-radius: 0.75rem;
    box-shadow: 0 8px 32px rgba(16,24,40,0.14);
    z-index: 13010;
    transform: none !important;
  }
}

.layout-row { min-height: 0; }
/* Default: no spacer on small screens. The spacer is applied when `body.has-sidebar` is present on md+. */
.sidebar-spacer { width: 0; min-width: 0; }

/* Toast container - responsive positioning */
.toast-wrap { position: fixed; right: 1rem; bottom: 1rem; z-index: 13000; }
@media (max-width: 575px) {
  .toast-wrap { right: 0.5rem; bottom: 0.5rem; left: 0.5rem; }
  .toast-wrap .toast { width: 100%; }
}

/* Bottom notch (mobile) - full-width overlay bar with icons and labels */
.bottom-notch {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 64px;
  display: flex;
  align-items: stretch;
  z-index: 13000;
  pointer-events: auto;
  background: transparent;
}
.bottom-notch .notch-inner {
  display: flex;
  align-items: stretch;
  justify-content: space-around;
  width: 100%;
  height: 100%;
  background: #ffffff; /* opaque so it visually covers content beneath */
  border-top: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 -6px 18px rgba(16,24,40,0.06);
}
.bottom-notch .notch-inner .notch-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 6px 8px;
  min-width: 56px;
  max-width: 96px;
  height: 100%;
  background: transparent;
  border-radius: 0;
}
.bottom-notch .notch-inner .notch-item .notch-link { display:flex; align-items:center; justify-content:center; color: inherit; }
.bottom-notch .notch-inner .notch-item .notch-icon { font-size: 1.25rem; line-height: 1; position: relative; display: inline-flex; }
.bottom-notch .notch-inner .notch-item .notch-label { display:block; font-size: 0.72rem; margin-top: 4px; color: #374151; white-space: nowrap; }
.bottom-notch .notch-more { margin-left:0; width:56px; height:100%; border-radius:0; background:transparent; display:flex; align-items:center; justify-content:center; }

/* Backdrop and panel for overflow menu */
.notch-backdrop { position: fixed; left: 0; right: 0; top: 0; bottom: 0; background: rgba(0,0,0,0.4); z-index: 12990; }
.notch-panel { position: fixed; left: 0; right: 0; bottom: 0; z-index: 13010; display:flex; flex-direction:column; align-items: stretch; }
.notch-panel-inner { background: #fff; padding: 12px; border-radius: 12px 12px 0 0; box-shadow: 0 -8px 24px rgba(16,24,40,0.12); display:flex; flex-wrap:wrap; gap:8px; }
.notch-panel .notch-close { margin: 10px auto 20px; }

/* Hide previous floating menu when bottom notch present */
.mobile-menu { display: none !important; }

/* Show floating mobile menu on public pages (body.public-page) */
body.public-page .mobile-menu { display: flex !important; }
/* Hide labels in the bottom-notch (not the floating mobile menu) */
.bottom-notch .notch-label { display: none !important; }

/* Show floating mobile-menu labels on public pages (always visible) */
body.public-page .mobile-menu .mobile-icon .mobile-label {
  display: block !important;
  opacity: 1 !important;
  transform: translateX(-50%) translateY(-8px) !important;
  pointer-events: auto !important;
}

/* Sidebar active link highlighting */
#sidebar .nav-link.active { background: rgba(99,102,241,0.08); border-radius: 0.5rem; color: #0f1720 !important; }
#sidebar .nav-link.active i { color: #4f46e5; }
#sidebar.sidebar-collapsed .nav-link.active { background: transparent; box-shadow: 0 0 0 2px rgba(99,102,241,0.12) inset; border-radius: 0.375rem; }

/* Notch active styling */
.bottom-notch .notch-link.active .notch-icon { color: #4f46e5; }
.bottom-notch .notch-link.active .notch-label { font-weight: 600; color: #0f1720; }

/* Notch badge styling */
.notch-badge { position: absolute; top: 6px; right: -6px; transform: translateX(50%); font-size: 0.62rem; padding: 0.18rem 0.38rem; }

/* Accessible tooltip used for notch icons */
.wb-tooltip {
  position: fixed;
  z-index: 14000;
  display: inline-block;
  max-width: 80vw;
  background: rgba(17,24,39,0.95);
  color: #fff;
  padding: 6px 8px;
  border-radius: 6px;
  font-size: 0.78rem;
  line-height: 1.2;
  pointer-events: none;
  transform-origin: center bottom;
}
.wb-tooltip::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -6px;
  border-width: 6px 6px 0 6px;
  border-style: solid;
  border-color: rgba(17,24,39,0.95) transparent transparent transparent;
}

@media (min-width: 576px) and (max-width: 767px) {
  /* slightly lift notch on small tablets */
  .bottom-notch { bottom: 16px; }
}

@media (min-width: 768px) {
  .bottom-notch, .notch-backdrop, .notch-panel { display: none !important; }
}

/* When the bottom notch is visible, ensure chat column has space so input and content are not covered */
body.has-bottom-notch body.messages-page .chat-column,
body.has-bottom-notch .messages-page .chat-column {
  padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
}

/* Mobile: ensure the message input stays above the notch */
@media (max-width: 575px) {
  body.has-bottom-notch .message-input-wrap {
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  }
}

/* Floating navbar to match page background and appear like 'floating' content */
.navbar-floating {
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 8px 24px rgba(16,24,40,0.08);
  border-radius: 0.5rem;
  padding: .5rem 1rem;
  /* Sticky navbar: stays at top when scrolling, content flows underneath */
  position: sticky;
  top: 2rem;
  margin-bottom: 1rem; /* Add gap below navbar for consistency with sidebar top gap */
  width: 100%;
  z-index: 1200;
}

/* Cover the gap above the navbar so scrolling content isn't visible above it */
.navbar-floating::before {
  content: '';
  position: absolute;
  top: -2rem;
  left: -2rem;
  right: -2rem;
  height: 2rem;
  background: #f8f8f8; /* Match body background */
  z-index: -1;
}

/* Make sure navbar links/icons use the darker color for contrast on light floating background */
.navbar-floating .nav-link, .navbar-floating .navbar-brand {
  color: #111827 !important;
}

/* Slightly darken dropdown menus for readability */
.navbar-floating .dropdown-menu {
  background: #ffffff;
  border: 1px solid rgba(15,23,42,0.06);
  box-shadow: 0 6px 18px rgba(16,24,40,0.06);
}

/* Match mobile floating menu button to primary color */
.mobile-menu-button {
  background: #6366F1; /* primary */
  color: #fff;
}

/* Mobile-specific spacing reductions */
@media (max-width: 576px) {
  body { margin: 0.5rem; }
  /* Reset app-body padding on mobile since sidebar is overlay mode */
  .app-body { padding-left: 0 !important; }
  .navbar-floating {
    padding: .2rem .5rem;
    border-radius: 0.375rem;
    top: 0.25rem; /* Adjust sticky offset for mobile's smaller body margin */
    margin-bottom: 0.25rem; /* Match sidebar gap on mobile */
  }
  /* Adjust the cover pseudo-element for mobile */
  .navbar-floating::before {
    top: -0.5rem;
    left: -0.5rem;
    right: -0.5rem;
    height: 0.5rem;
  }
  .navbar-brand { font-size: 0.95rem; }
  .navbar-floating .nav-link { padding: .2rem .4rem; font-size: .92rem; }
  .card .card-body.p-5 { padding: 1rem !important; }
  .mobile-menu { bottom: 8px; left: 8px; }
  .mobile-menu-button { width:48px; height:48px; }
  /* hide desktop-sized nav groups on small screens */
  .nav-desktop-only { display: none !important; }
  /* hide compact navbar control (we keep three icons visible instead) */
  .nav-compact { display: none !important; }
}

/* Small screens up to tablet: reset app-body padding since sidebar is overlay mode */
@media (max-width: 767px) {
  .app-body { padding-left: 0 !important; }
}

/* Hide compact nav at md and up so small screens use compact control */
@media (min-width: 768px) {
  .nav-compact { display: none !important; }
}

/* Ensure navbar nav items sit inline on md+ so Login/Register appear side-by-side */
@media (min-width: 768px) {
  .navbar-collapse .navbar-nav { display: flex; flex-direction: row; gap: .5rem; align-items: center; }
  .navbar-collapse .navbar-nav .nav-item { display: flex; }
}

/* navbar is floating (in-flow) so no global top padding is required */

/* Messages / Chat styles */
.chat-column { min-height: calc(100vh - var(--navbar-height,64px) - 2rem); display: flex; flex-direction: column; }
.chat-window { background: transparent; display: flex; flex-direction: column; }
.contacts-list { /* keeps contact list scrollable and full-height */ overflow: auto; -webkit-overflow-scrolling: touch; }
.messages-row-minheight { display: flex; align-items: stretch; gap: 0; min-height: calc(100vh - var(--navbar-height,64px) - 2rem); overflow: hidden; }
.contacts-col-max { display: flex; flex-direction: column; }
.contacts-col-max .contacts-list { flex: 1 1 auto; }
.chat-column { height: calc(100vh - var(--navbar-height,64px) - 2rem); display: flex; flex-direction: column; }
.chat-window { background: transparent; display: flex; flex-direction: column; }
.msg-bubble { padding: .75rem 1rem; border-radius: .75rem; max-width: 70%; display: flex; flex-direction: column; position: relative; }
.msg-bubble {
  margin-bottom: 0.75rem;
  margin-top: 0.1rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.03);
  border-radius: 1.1em 1.1em 1.1em 0.5em;
}
.msg-incoming { background: #f1f3f5; color: #0f1720; }
.msg-outgoing { color: #fff; background: linear-gradient(90deg,#7c3aed,#06b6d4); }
.message-input-wrap { background: transparent; }

/* Ensure avatar box does not shrink when preview ellipsises */
.avatar-44 { width:44px; height:44px; flex: 0 0 44px; display: inline-flex; align-items: center; justify-content: center; }
.nav-msg-new { animation: nav-msg-flash 0.8s ease; }
@keyframes nav-msg-flash {
  0% { background-color: rgba(0,123,255,0.15); }
  100% { background-color: transparent; }
}
.archived-preview-clip { max-width: 420px; }

/* Base chat layout - will be overridden by messages-page specific rules */
.chat-window { flex: 1 1 auto; overflow: auto; -webkit-overflow-scrolling: touch; }
.message-input-wrap { flex: 0 0 auto; background: #ffffff; border-top: 1px solid rgba(0,0,0,0.04); }
.avatar-44 { width:44px; height:44px; flex: 0 0 44px; display: inline-flex; align-items: center; justify-content: center; }

/* Slight spacing for message timestamps */
.msg-bubble .small { opacity: 0.85; }
.msg-bubble .msg-time { align-self: flex-end; margin-top: .5rem; font-size: 0.75rem; opacity: 0.85; display: flex; align-items: center; gap: 0.25rem; }

/* Read receipt icons (chat-style checks) */
.msg-receipt { display: inline-flex; align-items: center; margin-left: 0.25rem; }
.msg-receipt i { font-size: 0.95rem; line-height: 1; }
.msg-receipt.sent i { color: #e9ecef; }
.msg-receipt.delivered i { color: #cfd4da; }
.msg-receipt.read i { color: #0d6efd; }

/* layout utility classes extracted from inline styles */
.messages-row-minheight { min-height: calc(100vh - var(--navbar-height,64px) - 2rem); }
.contacts-col-max { max-width: 320px; }
.contacts-list-height { height: calc(100vh - var(--navbar-height,64px) - 4.5rem); }
.btn-send-48 { width:48px; height:48px; }

.toast-body-wrap { display: flex; align-items: center; gap: 0.75rem; }
/* Toast avatar: enforce fixed square box so long multi-line messages don't stretch it into an oval */
.toast-avatar {
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  flex: 0 0 32px;
  border-radius: 50%;
  overflow: hidden;
  background: #e5e7eb;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.toast-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.toast-avatar span { font-weight: 700; color: #374151; }

/* Defensive selector: ensure avatar does not inherit stretch from outer flex parents */
.toast .toast-body .toast-body-wrap .toast-avatar { align-self: flex-start; }
.btn-send-48 { width:48px; height:48px; }

/* Brand button / CTA */
.btn-brand { background-color: #6366F1; border-color: #6366F1; color: #fff; }

/* small helpers used on marketing pages */
.max-w-440 { max-width: 440px; }
.lead-max-400 { max-width: 400px; }

/* Chat open animation */
.chat-column.chat-opened { animation: chatFadeIn 180ms ease both; }
@keyframes chatFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity:1; transform: translateY(0); } }

/* Failed message state and retry button */
.msg-bubble.msg-failed { opacity: 0.9; border: 1px dashed rgba(220,38,38,0.8); }
.msg-retry { display:inline-flex; align-items:center; gap:8px; margin-left: 0.5rem; }
.msg-retry button { border: 0; background: transparent; color: #dc2626; font-weight: 600; }
.msg-retry button:hover { text-decoration: underline; }

/* Contacts truncation and flexible layout fixes
  - Ensure the contact preview does not expand the column width
  - Allow flex children to shrink and apply ellipsis for long previews
*/
.contacts-list .list-group-item .flex-grow-1 { min-width: 0; }
.contacts-list .contact-preview { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.contacts-list .fw-semibold { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Messages page: constrain to viewport and let chat/contacts scroll internally (WhatsApp-style) */
/* Reset vertical margins/padding to fit viewport height, keep horizontal for sidebar alignment */
body.messages-page { overflow: hidden; margin: 2em; margin-bottom: 4em; padding-top: 0; padding-bottom: 0; }
body.messages-page .app-body { height: calc(100vh - var(--navbar-height, 64px)); overflow: hidden; flex: 1 1 auto; }
body.messages-page .sidebar-container { flex: 0 0 auto; height: 100%; }
body.messages-page .messages-shell { margin: 0 !important; padding: 0 !important; height: 100%; flex: 1 1 auto; display: flex; flex-direction: column; overflow: hidden; }
body.messages-page .messages-row-minheight { flex: 1 1 auto; height: 100%; min-height: 0; overflow: hidden; }
body.messages-page .contacts-col-max, body.messages-page .chat-column { height: 100%; min-height: 0; }
body.messages-page .contacts-list-height { height: auto; max-height: none; }
body.messages-page .contacts-col-max .contacts-list { min-height: 0; overflow-y: auto; }
body.messages-page .chat-column {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding-bottom: 2em; /* Prevent input area clipping due to body margin */
}
body.messages-page .chat-window {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 18px 0 24px 0; /* More top/bottom space for clarity */
}
body.messages-page .message-input-wrap {
  flex: 0 0 auto;
  position: relative;
  background: #ffffff;
  border-top: 1px solid rgba(0,0,0,0.04);
  box-shadow: 0 -4px 16px rgba(0,0,0,0.06);
  padding: 14px 18px;
  padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  max-height: 50vh;
  overflow-y: auto;
  margin-bottom: 0.75em; /* Add bottom margin to avoid clipping */
  border-radius: 0.75em;
  box-shadow: 0 2px 12px rgba(0,0,0,0.04);
}
body.messages-page .message-input-wrap form { gap: 0.75rem; }
body.messages-page .message-input-wrap input[name="message"] { height: 48px; }

/* ============================================
   MESSAGES PAGE RESPONSIVE RULES
   ============================================ */

/* Small tablets (576px - 767px) */
@media (min-width: 576px) and (max-width: 767px) {
  body.messages-page { margin: 0.5rem; }
  body.messages-page .contacts-col-max { max-width: 280px; }
  body.messages-page .msg-bubble { max-width: 80%; padding: 0.65rem 0.9rem; }
  body.messages-page .chat-window { padding: 12px; }
  body.messages-page .message-input-wrap { padding: 12px 14px; }
}

/* Tablets (768px - 991px) */
@media (min-width: 768px) and (max-width: 991px) {
  body.messages-page .contacts-col-max { max-width: 260px; flex: 0 0 260px; }
  body.messages-page .msg-bubble { max-width: 75%; }
  body.messages-page .chat-window { padding: 14px; }

  /* Ensure messages row stays a two-column layout on tablets and does not
     collapse to a column layout due to small width / body insets. Prevent
     flex items from wrapping and pin explicit flex-basis for columns. */
  body.messages-page .messages-row-minheight {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch;
  }
  body.messages-page .contacts-col-max {
    flex: 0 0 260px !important;
    max-width: 260px !important;
    min-width: 180px;
  }
  body.messages-page .chat-column {
    flex: 1 1 auto !important;
    min-width: 320px;
    width: auto;
  }
}

/* Mobile (< 576px) - Full screen view switching between contacts and chat */
@media (max-width: 575px) {
  body.messages-page { margin: 0.5rem; padding: 0; }
  body.messages-page .app-body { padding-left: 0 !important; }
  
  /* Reset container fluid padding on mobile */
  body.messages-page .messages-shell { padding: 0 !important; }
  body.messages-page .messages-row-minheight { flex-direction: column; }
  
  /* Contacts column: full width when no active conversation */
  body.messages-page .contacts-col-max { 
    max-width: 100%; 
    flex: 1 1 auto;
    border-right: none;
  }
  body.messages-page .contacts-col-max .p-3 { padding: 0.75rem !important; }
  body.messages-page .contacts-col-max .contacts-list { padding-bottom: 60px; } /* Space for mobile menu */
  
  /* Contact item mobile styling */
  body.messages-page .contact-item { padding: 0.75rem 0.5rem; }
  body.messages-page .contact-item .avatar-44 { width: 40px; height: 40px; flex: 0 0 40px; font-size: 0.9rem; }
  body.messages-page .contact-item .me-3 { margin-right: 0.5rem !important; }
  body.messages-page .contact-preview { font-size: 0.85rem; }
  
  /* Chat column: full width on mobile, positioned below navbar */
  body.messages-page .chat-column {
    position: fixed;
    top: var(--navbar-height, 64px);
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: calc(100vh - var(--navbar-height, 64px));
    z-index: 1050;
    background: #fff;
  }
  
  /* Chat header mobile styling */
  body.messages-page .chat-column .border-bottom { 
    padding: 0.5rem 0.75rem !important;
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 10;
  }
  body.messages-page .chat-column .border-bottom img { width: 36px; height: 36px; }
  body.messages-page .chat-column .border-bottom .me-3 { margin-right: 0.5rem !important; }
  body.messages-page .chat-column .border-bottom .fw-bold { font-size: 0.95rem; }
  body.messages-page .chat-column .border-bottom .btn-sm { padding: 0.25rem 0.4rem; font-size: 0.8rem; }
  
  /* Chat window mobile styling */
  body.messages-page .chat-window { 
    padding: 12px 2px 22px 2px;
    flex: 1 1 auto;
  }
  
  /* Message bubbles mobile - wider to use space efficiently */
  body.messages-page .msg-bubble { 
    max-width: 90%;
    padding: 0.7rem 1rem;
    font-size: 1.01rem;
    margin-bottom: 0.85rem;
    margin-top: 0.1rem;
  }
  body.messages-page .msg-bubble .small { font-size: 0.7rem; }
  body.messages-page .msg-time {
    font-size: 0.72rem !important;
    display: block;
    text-align: right;
    margin-top: 2px;
    opacity: 0.7;
  }
  
  /* Input area mobile */
  body.messages-page .message-input-wrap { 
    padding: 8px 10px;
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    position: sticky;
    bottom: env(safe-area-inset-bottom, 0);
    background: #fff;
  }
  body.messages-page .message-input-wrap input[name="message"] { 
    height: 40px;
    font-size: 0.9rem;
    padding: 0.4rem 0.75rem;
  }
  body.messages-page .btn-send-48 { 
    width: 40px; 
    height: 40px;
    font-size: 0.9rem;
  }
  body.messages-page #attachBtn { padding: 0.25rem 0.4rem; }
  
  /* Attachment previews mobile */
  body.messages-page .attachment-thumb { max-width: 120px; max-height: 72px; }
  body.messages-page .attachment-file { max-width: 240px; }
  body.messages-page .attachment-file .file-name { max-width: 140px; }
  body.messages-page .attachment-video { max-width: 200px; }
}

/* Very small mobile (< 400px) */
@media (max-width: 399px) {
  body.messages-page .msg-bubble { max-width: 90%; padding: 0.5rem 0.75rem; font-size: 0.9rem; }
  body.messages-page .contact-item .avatar-44 { width: 36px; height: 36px; flex: 0 0 36px; }
  body.messages-page .chat-column .border-bottom img { width: 32px; height: 32px; }
  body.messages-page .btn-send-48 { width: 36px; height: 36px; }
  body.messages-page .message-input-wrap input[name="message"] { height: 36px; }
}

/* Landscape mobile - shorter height */
@media (max-width: 767px) and (max-height: 500px) {
  body.messages-page .chat-column .border-bottom { padding: 0.35rem 0.5rem !important; }
  body.messages-page .chat-window { padding: 6px 8px; }
  body.messages-page .message-input-wrap { padding: 6px 8px; }
  body.messages-page .msg-bubble { padding: 0.4rem 0.65rem; margin-bottom: 0.35rem; }
}

/* Attachment drafts area - scrollable with limited height */
.attachment-drafts { max-height: 120px; overflow-y: auto; margin-bottom: 8px; }
.attachment-drafts:not(.d-none) + form { margin-top: 0; }

/* Mobile: further limit attachment drafts height */
@media (max-height: 600px) {
  .attachment-drafts { max-height: 80px; }
  body.messages-page .message-input-wrap { max-height: 40vh; padding: 10px 12px; }
}
@media (max-width: 576px) {
  .attachment-drafts { max-height: 100px; }
  .attachment-selected { max-width: 280px; }
  .attachment-selected span:first-child { max-width: 140px; }
  body.messages-page .message-input-wrap { padding: 10px 12px; }
  body.messages-page .message-input-wrap input[name="message"] { height: 42px; }
}
body.messages-page .btn-send-48 { width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; }

/* Ensure auto-logout modal overlays all content across the app */
#autoLogoutModal.modal { z-index: 12000; }
#autoLogoutModal + .modal-backdrop, .modal-backdrop.auto-logout-backdrop { z-index: 11990; }

/* Ensure archive/delete confirmation modals overlay all page elements including sidebar */
#archiveConfirmModal.modal,
#deleteConfirmModal.modal { z-index: 11000; }
#archiveConfirmModal ~ .modal-backdrop,
#deleteConfirmModal ~ .modal-backdrop,
.modal-backdrop.show { z-index: 10990; }

/* Unread badge styling to match compact purple pill in design */
.contacts-list .unread-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: linear-gradient(90deg,#7c3aed,#6366f1);
  color: #fff;
  font-size: 0.75rem;
  line-height: 1;
  box-shadow: 0 2px 6px rgba(12,8,24,0.12);
}

/* Slightly reduce timestamp font to match compact UI */
.contacts-list .contact-last-at { font-size: 0.75rem; opacity: 0.85; }

/* Day separator in chat (centered pill) */
.chat-day-sep { display: inline-block; padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,0.03); }

/* Attachment UI */
.attachment-preview { display: inline-flex; align-items: center; gap: 0.5rem; padding: 6px 8px; border-radius: 6px; background: rgba(255,255,255,0.03); border: 1px solid rgba(0,0,0,0.04); max-width: 320px; }
.attachment-preview .attachment-icon, .attachment-preview .file-icon { width:28px; height:28px; display:inline-flex; align-items:center; justify-content:center; background: rgba(0,0,0,0.04); border-radius:4px; font-size:0.9rem; }
.attachment-preview .file-name { display: inline-block; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attachment-selected { display: flex; align-items: center; gap: 0.5rem; padding: 6px 8px; border-radius: 6px; background: #f7f7fb; border: 1px solid rgba(15,23,42,0.04); max-width: 360px; }
.attachment-selected span:first-child { display: inline-block; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attachment-selected button { font-size: 0.78rem; color: #6b7280; }
.attachment-link { color: inherit; text-decoration: none; word-break: break-all; }
.attachment-thumb { display:inline-block; max-width: 140px; max-height: 84px; border-radius: 6px; border: 1px solid rgba(15,23,42,0.04); object-fit: cover; }

/* Non-image attachment layout: small file icon, truncated filename, and download button */
.attachment-file { display: inline-flex; align-items: center; gap: 0.5rem; padding: 6px 8px; border-radius: 6px; background: rgba(255,255,255,0.03); border: 1px solid rgba(0,0,0,0.04); max-width: 320px; }
.attachment-file .file-icon { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.04); border-radius: 6px; font-size: 1.05rem; }
.attachment-file .file-name { display: inline-block; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attachment-file-wrap { display: flex; align-items: center; gap: 0.5rem; }
.attachment-file-wrap .attachment-download-btn { margin-left: auto; }
.attachment-download-btn { padding: 0.25rem 0.5rem; font-size: 0.8rem; }