/* Group sender (name line at top of incoming group bubbles) */
.group-sender {
  font-weight: 700;
  color: #60A5FA; /* blue like link/title */
  margin-bottom: .1rem;
  font-size: .82rem;
}
html {
  font-size: 13px; /* slightly smaller base */
}

@media (min-width: 768px) {
  html {
    font-size: 15px; /* slightly smaller on md+ */
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}
html {
  position: relative;
  min-height: 100%;
}

/* Sticky footer layout and no horizontal scroll */
html, body { height: 100%; overflow-x: hidden; overflow-y: hidden; }
body {
  margin-bottom: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
}

/* Global typography tuning (softer) */
h1, h2, h3, .navbar-brand { font-weight: 500; letter-spacing: .2px; }
h4, h5, h6 { font-weight: 500; }
body, p, li { font-weight: 400; }
/* Chat text slightly softer */
.message-bubble .bubble-text { font-weight: 400; line-height: 1.35; font-size: .9rem; }
.bubble-time { 
  font-weight: 500; 
  font-size: 0.3rem;  /* reduced from 0.7rem */
  line-height: 1;
  transform: scale(0.95);  /* slightly reduce size */
  transform-origin: right bottom;
  display: inline-block;  /* required for transform */
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

/* Chat page styles to resemble the provided mockup */
.chat-page .card {
  border-radius: 12px;
}

/* Ensure chat index page pushes footer down even with minimal content */
.chat-page {
  min-height: calc(100vh - 140px); /* approx navbar+footer total height */
  padding-bottom: 2.5rem; /* more breathing room above footer */
  overflow: hidden; /* prevent page-level vertical scroll */
}

/* Chat body with minimum height when empty */
.chat-body {
  background-color: #e1eaea;
  max-height: calc(100vh - 200px);
  min-height: 60vh; /* minimum height even when empty */
  overflow-y: auto;
  margin-bottom: .5rem;
}

/* Fine-tune chat body height at wider screens */
@media (min-width: 992px) {
  .chat-body { 
    max-height: calc(100vh - 240px);
    min-height: 65vh; /* slightly taller on larger screens */
  }
}

/* Keep chat hero (avatar + name) visible at the top of chat body */
#chatHero {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #f8f9fa; /* match body */
  padding-top: .25rem;
}

.chat-messages {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.message-bubble {
  display: inline-block;
  max-width: 70%;
  padding: .35rem 4.2rem .85rem .6rem; /* slightly tighter to reduce bubble size */
  border-radius: 12px; /* smoother corners */
  position: relative;
  transition: transform .06s ease, box-shadow .18s ease;
  line-height: 1.28;
  word-wrap: break-word;
  animation: bubble-pop .12s ease-out;
}

/* For attachment messages, reduce the extra right gap so the preview can expand */
.message-bubble.has-attachment { padding-right: 1.2rem; padding-top: .2rem; padding-bottom: .5rem; }
/* Group incoming + attachment: slightly tighter */
.message-bubble.other.group.has-attachment { padding-right: 1.1rem; padding-top: .18rem; padding-bottom: .45rem; }
/* For pure image cards, tighten padding: 4px gap to bubble edges (except tick area) */
.message-bubble.tight-image { padding: 0; width: 300px; max-width: 300px; }
/* Voice bubbles: reduce default excessive right padding inside bubble */
.message-bubble.is-voice { padding-right: 1.6rem; } /* slightly reduce right padding */

.message-bubble.me {
  align-self: flex-end;
  background-color: #ffffff; 
  color: #131313;
  box-shadow: 0 1px 0 rgba(0,0,0,.06), 0 2px 6px rgba(0,0,0,.08);
}
.message-bubble.me::after {
  content: "";
  position: absolute;
  right: -6px;
  top: 12px;
  width: 0; height: 0;
  border-style: solid;
  border-width: 8px 0 8px 8px; /* top right bottom left */
  border-color: transparent transparent transparent #ffffff; /* white tail for sender */
}

.message-bubble.other {
  align-self: flex-start;
  background-color: #ffffff; /* match sender bubble */
  color: #131313;           /* match sender text */
  border: none;
  box-shadow: 0 1px 0 rgba(0,0,0,.06), 0 2px 6px rgba(0,0,0,.08);
  padding-right: 4.2rem;    /* match default bubble padding */
}
.message-bubble.other.group {
  background-color: #ffffff; /* match sender bubble */
  color: #131313;
  padding: .35rem 4.2rem .85rem .6rem; /* match sender/default bubble padding */
}
.message-bubble.other::before {
  content: "";
  position: absolute;
  left: -6px;
  top: 12px;
  width: 0; height: 0;
  border-style: solid;
  border-width: 8px 8px 8px 0; /* top right bottom left */
  border-color: transparent #ffffff transparent transparent; /* white tail to match bubble */
}
/* Tail color for group incoming bubbles */
.message-bubble.other.group::before {
  border-color: transparent #ffffff transparent transparent; /* white tail for group */
}

.message-row {
  display: flex;
  gap: .5rem;
  align-items: flex-end;
}
.message-row.other .message-bubble { order: 2; }
.message-row.other .mini-avatar { order: 1; }
.message-row.me { justify-content: flex-end; }
.mini-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #e9ecef;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .75rem;
  font-weight: 600;
  color: #495057;
}

/* Sidebar conversations */
.chat-page .card .list-group-item {
  border: 1px solid #cfd4d9; /* outer border around the whole item */
  border-radius: 10px;
  margin-bottom: .25rem;
  position: relative;
  background: #fff; /* base background */
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.chat-page .list-group-item.active,
.chat-page .list-group-item:active,
.chat-page .list-group-item:hover {
  background-color: #60A5FA; /* blue area */
  border-color: #9ec3ff;     /* keep border visible over blue */
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
}

/* Keep a consistent container for time positioning */
.chat-page .card .list-group-item.with-time { position: relative; }
.chat-page .card .list-group-item.with-time .item-time {
  position: absolute;
  right: 10px;
  bottom: 6px;
  font-size: .72rem;
  color: rgba(17,24,39,.8); /* darker for readability over blue */
}

/* Header row inside list item (name + time container): add border and subtle shadow */
.chat-page .card .list-group-item.with-time .flex-grow-1 > .d-flex.justify-content-between.align-items-center {
  border: none;         /* remove inner border */
  background: transparent; /* remove white box */
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}
.chat-page .card .list-group-item.with-time:hover .flex-grow-1 > .d-flex.justify-content-between.align-items-center { box-shadow: none; }

/* Unread badge: green tone and pinned to right-center */
.badge-unread {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: #16a34a !important; /* green */
  color: #fff !important;
  min-width: 18px;
  height: 18px;
  padding: 0 .3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .68rem;
}

/* Small green dot on tab buttons (Message / Groups) */
.tab-dot {
  position: absolute;
  right: -6px;
  top: -6px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #16a34a;
  border: 2px solid #fff; /* keep dot visible on dark btn */
}

/* Sidebar tabs (Message / Groups) */
.chat-page #sidebarTabs {
  display: flex;
  gap: .6rem; /* tighter spacing between buttons */
}
.chat-page #sidebarTabs .nav-link {
  border-radius: 8px;
  padding: .38rem .6rem; /* smaller */
  line-height: 1;
  font-size: .85rem; /* smaller font */
  border: 1px solid #000; /* black border */
  color: #000; /* black text */
  background: #fff; /* inactive: white */
  transition: filter .15s ease, transform .06s ease, background-color .15s ease, color .15s ease, border-color .15s ease;
}
.chat-page #sidebarTabs .nav-link i { font-size: .95em; }
.chat-page #sidebarTabs .nav-link:hover { background: #f2f2f2; }
.chat-page #sidebarTabs .nav-link.active {
  background: #000; /* active: black */
  color: #fff;
  border-color: #000;
}
.chat-page #groupAddBtn { margin-left: auto; }
.chat-page #groupAddBtn {
  border: 1px solid #000;
  color: #000;
  background: #fff;
  padding: .35rem .55rem; /* compact to match smaller tabs */
  border-radius: 8px;
}
.chat-page #groupAddBtn:hover { background: #000; color: #fff; }

/* Mobile: make tabs even more compact */
@media (max-width: 576px) {
  /* Re-enable page vertical scroll on mobile */
  html, body { overflow-y: auto; }
  /* Let the page flow naturally */
  .chat-page { overflow: visible; }
  /* Relax chat body height caps for small screens */
  .chat-body { max-height: none; min-height: 50vh; }

  .chat-page #sidebarTabs { gap: .5rem; }
  .chat-page #sidebarTabs .nav-link { padding: .32rem .5rem; font-size: .82rem; }
  .chat-page #sidebarTabs .nav-link i { font-size: .92em; }
  .chat-page #groupAddBtn { padding: .3rem .5rem; }
}

/* Groups list: prevent horizontal scrollbar */
#groupsList {
  overflow-x: hidden !important;
}
#groupsList .list-group-item {
  white-space: normal; /* allow wrapping */
}

.avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #e9ecef;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  color: #495057;
}

.bubble-time {
  display: inline-block;
  font-size: .68rem;
  opacity: .9;
  margin: 0;
}


/* Footer inside message bubble for time + status (default static; scoped absolute in bubble-specific rules) */
.bubble-footer {
  position: static;
  display: inline-flex;
  align-items: center;
  gap: .42rem;
  font-size: .68rem;
  opacity: .95;
  white-space: nowrap;
}

.bubble-status i {
  font-size: .75rem;
  vertical-align: middle;
}

/* message text inside bubble */
.message-bubble .bubble-text {
  display: inline;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Make time/status readable on green bubbles */
.message-bubble.me .bubble-time,
.message-bubble.other .bubble-time { color: rgba(255,255,255,.85); opacity: 1; }
.message-bubble.other.group .bubble-time { color: rgba(255,255,255,.85); }
.message-bubble.me .bubble-status i,
.message-bubble.other .bubble-status i { color: rgba(255,255,255,.9); }

/* Override for sender (white bubble) to have dark time/status */
.message-bubble.me .bubble-time { color: rgba(0,0,0,.66) !important; }
.message-bubble.me .bubble-status i { color: rgba(0,0,0,.6) !important; }
/* Make incoming match outgoing for time/status */
.message-bubble.other .bubble-time { color: rgba(0,0,0,.66) !important; }
.message-bubble.other .bubble-status i { color: rgba(0,0,0,.6) !important; }

/* Read (seen) state: force blue tick on all bubbles */
.message-bubble .bubble-status.is-read i { color: #1e90ff !important; }

/* Subtle hover/press effect for better feel */
.message-bubble:hover { box-shadow: 0 2px 6px rgba(0,0,0,.15); }
.message-bubble:active { transform: scale(0.995); }

/* Request pills and actions (Talep bubble) */
.req-line { display:flex; align-items:center; justify-content:space-between; gap:.75rem; }
.req-left { display:flex; align-items:center; gap:.4rem; flex-wrap:wrap; }
.req-tag { font-weight:700; color:#fff; opacity:.95; }
.req-title { color:#fff; opacity:.95; }
.req-pill { display:inline-block; padding:.1rem .45rem; border-radius:9999px; font-size:.75rem; font-weight:700; color:#111; }
.pill-priority { background:#22d3ee; color:#0c4a6e; } /* cyan */
.pill-status-wait { background:#e5e7eb; color:#374151; }
.pill-status-ok { background:#d1fae5; color:#065f46; }
.pill-status-no { background:#fee2e2; color:#991b1b; }
.pill-due-today { background:#fdba74; color:#7c2d12; } /* orange */
.pill-due { background:#e5e7eb; color:#374151; }
.req-actions { display:flex; align-items:center; gap:.5rem; }
.req-btn { background:transparent; border:1px solid currentColor; color:#38bdf8; padding:.2rem .55rem; border-radius:.5rem; font-weight:600; font-size:.8rem; }
.req-btn:hover { filter:brightness(1.05); }
.req-btn-cancel { color:#ef4444; }
.req-btn-accept { color:#10b981; }
.req-btn-reject { color:#ef4444; }

/* Header request badge */
.request-badge { display:inline-flex; align-items:center; gap:.5rem; border:1px solid #cfd4d9; border-radius:9999px; padding:.45rem .8rem; background:#fff; margin-right:1.6rem; }
.request-badge .tag { font-weight:700; }
.request-badge .title { font-weight:600; }
.request-badge .pill { display:inline-block; padding:.05rem .45rem; border-radius:9999px; font-size:.75rem; font-weight:700; }
.request-badge .pill.prio { background:#22d3ee; color:#0c4a6e; }
.request-badge .pill.status-wait { background:#e5e7eb; color:#374151; }
.request-badge .pill.status-ok { background:#d1fae5; color:#065f46; }
.request-badge .pill.status-no { background:#fee2e2; color:#991b1b; }
.request-badge .pill.due { background:#e5e7eb; color:#374151; }
.request-badge .pill.due-today { background:#fdba74; color:#7c2d12; }
.request-badge .btn-cancel { background:transparent; border:1px solid #ef4444; color:#ef4444; padding:.1rem .4rem; border-radius:.5rem; font-weight:600; font-size:.8rem; }

/* In-chat request link badge - improved */
.req-link {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  border: 1px solid #cfd4d9;
  background: #fff;
  color: #111827;
  border-radius: 9999px;
  padding: .45rem .8rem;
  max-width: 100%;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
  cursor: pointer;
  transition: background .15s ease, box-shadow .15s ease, transform .06s ease;
}
.req-link:hover { background: #f8fafc; box-shadow: 0 2px 6px rgba(0,0,0,.08); }
.req-link:active { transform: scale(.995); }
.req-link .tag { font-weight: 800; color: #0f172a; }
.req-link .title { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 320px; }

/* Pills inside request link */
.req-link .pill {
  display: inline-block;
  padding: .12rem .5rem;
  border-radius: 9999px;
  font-size: .74rem;
  font-weight: 800;
  line-height: 1;
}
.req-link .pill.prio { background: #22d3ee; color: #0c4a6e; }
.req-link .pill.status-wait { background: #e5e7eb; color: #374151; }
.req-link .pill.due { background: #e5e7eb; color: #374151; }
.req-link .pill.due-today { background: #fdba74; color: #7c2d12; }

/* Standalone request row spacing */
.req-link-row { display: flex; flex-direction: column; align-items: flex-start; gap: .25rem; margin: .25rem 0; }

/* Typing indicator in header */
.typing-indicator {
  color: #6c757d;
  font-style: italic;
}

#activeUserName {
    font-weight: 400;
    background-color: black;
    color: white;
    padding: 4px 12px;
    border-radius: 5px;
}
/* Presence: online dot in conversation list */
.online-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #bab0b0; /* default offline gray */
  display: inline-block;
}
.online-dot.online { background: #22c55e; /* green */ }

/* Read tick animation and transition */
.bubble-status i { transition: color .2s ease, transform .15s ease; }
.bubble-status.is-read i { color: #7ED8FF !important; transform: translateY(-1px) scale(1.05); }

/* Avatars */
.mini-avatar-img {
  width: 44px; height: 44px; border-radius: 50%; object-fit: cover; display: inline-block;
}
.header-avatar {
  width: 40px; height: 40px; border-radius: 50%; object-fit: cover; display: inline-block;
}

/* Pop-in animation for new bubbles */
@keyframes bubble-pop {
  from { transform: translateY(2px) scale(0.995); opacity: .98; }
  to   { transform: translateY(0) scale(1); opacity: 1; }
}

/* Chat action buttons: attach and voice */
#attachBtn, #voiceBtn {
  border: none;
  color: #fff;
  border-radius: 10px;
  padding: .55rem .8rem; /* a bit more padding */
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: filter .15s ease, transform .06s ease, box-shadow .2s ease;
}
/* Request button (plus) – smaller icon and slightly tighter padding */
#requestBtn { border-radius: 10px; padding: .5rem .7rem; line-height: 1; }
#requestBtn i { font-size: .95rem; }

#attachBtn {
  background: #60A5FA; /* softer blue */
  box-shadow: 0 1px 0 rgba(0,0,0,.04), 0 2px 6px rgba(96,165,250,.20);
}
#attachBtn:hover { filter: brightness(1.04); }
#attachBtn:active { transform: translateY(1px); }

#voiceBtn {
  background: #F87171; /* softer red */
  box-shadow: 0 1px 0 rgba(0,0,0,.04), 0 2px 6px rgba(248,113,113,.20);
}
#voiceBtn:hover { filter: brightness(1.04); }
#voiceBtn:active { transform: translateY(1px); }

#attachBtn i, #voiceBtn i { font-size: 1.05rem; color: #fff; }

/* Subtle focus ring */
#attachBtn:focus-visible, #voiceBtn:focus-visible {
  outline: 2px solid rgba(255,255,255,.6);
  outline-offset: 2px;
}

/* File preview/tile styles */
.file-tile {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .35rem .55rem;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 8px;
}
.message-bubble .file-tile,
.message-bubble .attachment-card,
.message-bubble .attachment-caption { color: #131313 !important; }
.message-bubble .file-tile .meta .name,
.message-bubble .attachment-card .meta .name { color: #111 !important; }
.message-bubble .attachment-card .meta .desc { color: #333 !important; }
.message-bubble .file-tile .meta a { color: #111 !important; text-decoration: underline; }
.file-tile .icon {
  width: 24px; height: 24px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.06);
}
.file-tile .icon i { color: #555; font-size: .9rem; }
.file-tile .meta { display: flex; flex-direction: column; }
.file-tile .meta .name { font-weight: 600; color: #fff; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .78rem; }
.file-tile .meta a { color: #e9f5ff; text-decoration: underline; }

.pdf-embed { width: 100%; max-width: 320px; height: 280px; border: none; border-radius: 8px; overflow: hidden; background: #fff; }

/* Filename caption under previews */
.file-caption {
  display: block;
  margin-top: .35rem;
  font-size: .8rem;
  color: rgba(255,255,255,.9);
  text-align: center;
}

/* Small image thumbnail */
.image-thumb {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: 8px;
  display: block;
  margin: .15rem auto; /* center with small breathing space */
  border: 1px solid rgba(255,255,255,.18);
}

/* PDF tile accent */
.file-tile.pdf .icon { background: #ef4444; }

/* Download icon to the left of bubbles when there is an attachment */
.message-row.has-attachment { align-items: center; }

/* Unified attachment card inside bubble */
.attachment-card {
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 10px;
  padding: .5rem;
  margin-bottom: .5rem; /* leave room for footer */
}
/* Extra bottom room only for non-image attachments */
.attachment-card:not(.image-card) { margin-bottom: .5rem; }
/* Image-only card gets minimal chrome to sit flush */
.attachment-card.image-card { background: transparent; border: none; padding: 4px 8px; margin-bottom: .25rem; }
.attachment-card .attach-header {
  display: flex;
  align-items: center;
  gap: .6rem;
}
.attachment-card .icon-rect {
  width: 40px; height: 40px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.08);
}
.attachment-card .icon-rect i { color: #555; font-size: 1.1rem; }
.attachment-card .meta { display: flex; flex-direction: column; min-width: 0; }
.attachment-card .meta .name { font-weight: 600; color: #fff; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .78rem; }
.attachment-card .meta .desc { font-size: .74rem; color: rgba(255,255,255,.85); }

.attachment-card .attach-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; margin-top: .45rem; margin-bottom: .35rem; }
.attachment-card .attach-actions.single { grid-template-columns: 1fr; }
.attachment-card .attach-actions.single .btn-attach { width: 100%; display: flex; align-items: center; justify-content: center; }
/* reduce bottom gap under single action in image cards */
.attachment-card.image-card .attach-actions.single { margin-bottom: .15rem; }
.attachment-card .btn-attach {
  display: inline-block; text-align: center; padding: .28rem 0; border-radius: 6px;
  border: 1px solid rgba(255,255,255,.16);
  color: #111; text-decoration: none;
  background: rgba(0,0,0,.06);
  transition: filter .15s ease, transform .06s ease;
}
.attachment-card .btn-attach:hover { filter: none; background: rgba(0,0,0,.1); }
.attachment-card .btn-attach:active { transform: translateY(1px); }

/* unify action button styles */
.attachment-card .btn-attach.preview { background: rgba(0,0,0,.06); border-color: rgba(0,0,0,.15); color: #111; }
.attachment-card .btn-attach.download { background: rgba(0,0,0,.06); border-color: rgba(0,0,0,.15); color: #111; }

/* Generic download icon inside bubbles */
.message-bubble i.bi-download { color: #111 !important; }

/* Full-width image preview at the top of the card */
.attachment-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
  margin: 0; /* inside frame */
}
.image-frame {
  width: calc(300px - 16px); /* bubble(300) - (left 8px + right 8px) padding */
  height: 300px;
  border-radius: 8px;
  overflow: hidden;
  margin: 0 auto .4rem auto; /* center in bubble */
  position: relative;
}
.attachment-caption {
  display: block;
  font-size: .74rem;
  color: rgba(255,255,255,.88);
  margin-bottom: .25rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Video card/frame similar to image card */
.attachment-card.video-card { background: transparent; border: none; padding: 4px 8px; margin-bottom: .25rem; }
.video-frame { width: calc(300px - 16px); /* same width as image-frame */ aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; margin: 0 auto .4rem auto; position: relative; background: #000; }
.attachment-video { display: block; width: 100%; height: 100%; object-fit: contain; background: #000; }

/* Overlay actions for image (preview/download) */
.image-actions { position: absolute; left: 8px; bottom: 8px; display: flex; gap: 6px; }
.image-actions a {
  width: 30px; height: 30px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.06); color: #111; text-decoration: none; border: 1px solid rgba(0,0,0,.15);
}
.image-actions a:hover { background: rgba(0,0,0,.1); }
.image-actions a i { font-size: 1rem; color: #111 !important; }

/* Keep footer (time/ticks) below actions to avoid overlap on image bubbles */
.message-bubble.tight-image .bubble-footer {
  position: static;
  display: flex;
  justify-content: flex-end;
  padding: 2px 8px 4px 8px; /* tighter spacing below actions */
}

/* For non-image attachments, keep footer neat at the bottom-right with a bit of spacing */
.message-bubble:not(.tight-image) .bubble-footer {
  display: flex;
  justify-content: flex-end;
  padding: 4px 12px 4px 12px;
  position: relative;
  z-index: 0;
  margin-top: 2px;
  width: 100%;
}

/* For plain text bubbles (no attachments), pin footer to bottom-right inside bubble */
.message-bubble:not(.has-attachment):not(.tight-image) .bubble-footer {
  position: absolute;
  right: 8px;
  bottom: 8px; /* a bit more top gap */
  width: auto;
  padding: 0;
  margin: 0;
}

/* For non-image attachment bubbles (PDF/DOCX/etc.), also pin footer to bottom-right */
.message-bubble.has-attachment:not(.tight-image) .bubble-footer {
  position: absolute;
  right: 8px;
  bottom: 8px; /* a bit more top gap */
  width: auto;
  padding: 0;
  margin: 0;
}

/* Preview hover hint */
.message-bubble .bubble-text img,
.message-bubble .bubble-text .file-tile,
.message-bubble .bubble-text video,
.message-bubble .bubble-text audio {
  transition: box-shadow .2s ease, transform .06s ease;
}
.message-bubble .bubble-text img:hover,
.message-bubble .bubble-text .file-tile:hover,
.message-bubble .bubble-text video:hover,
.message-bubble .bubble-text audio:hover {
  box-shadow: 0 1px 0 rgba(0,0,0,.04), 0 2px 10px rgba(0,0,0,.12);
}

/* Voice message compact bubble */
.voice-bubble {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .25rem .4rem; /* reduced padding for a tighter voice row */
  background: transparent; /* remove inner card look */
  border: none;
  border-radius: 8px;
}
.message-bubble .voice-bubble { color: #131313 !important; }
.message-bubble .voice-bubble .voice-time { color: #111 !important; }
.message-bubble .voice-bubble .voice-download { color: #111 !important; }
.message-bubble .voice-bubble .voice-download i { color: #111 !important; }
.voice-play {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: none;
  background: #22c55e; /* play green */
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.voice-play i { font-size: 1.2rem; }
.voice-progress { flex: 1; position: relative; height: 8px; display: flex; align-items: center; }
.voice-progress .bar { position: absolute; left: 0; top: 50%; transform: translateY(-50%); height: 4px; width: 0%; background: #e5ffcc; border-radius: 4px; }
.voice-wave { position: relative; z-index: 1; flex: 1; display: flex; align-items: flex-end; gap: 2px; height: 22px; }
.voice-wave span { width: 3px; background: rgba(255,255,255,.65); border-radius: 2px; }
.seek-dot { position: absolute; top: 50%; transform: translate(-50%, -50%); width: 8px; height: 8px; border-radius: 50%; background: #22c55e; border: 1px solid rgba(0,0,0,.2); box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.voice-time { min-width: 72px; text-align: right; font-size: .8rem; color: rgba(255,255,255,.92); }

/* compact download icon on voice row */
.voice-download { color: #e6f7ff; margin-left: .4rem; text-decoration: none; }
.voice-download i { font-size: 1.05rem; }

/* Recording state for voice button */
#voiceBtn.recording {
  background: #ef4444 !important; /* red during recording */
  color: #fff;
  padding-left: .9rem;
  padding-right: .9rem;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  animation: pulse-rec 1.2s ease-in-out infinite;
}
#voiceBtn.recording .rec-time {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
@keyframes pulse-rec {
  0%   { box-shadow: 0 0 0 0 rgba(239,68,68,.45); }
  70%  { box-shadow: 0 0 0 9px rgba(239,68,68,0); }
  100% { box-shadow: 0 0 0 0 rgba(239,68,68,0); }
}

/* Voice cancel (X) button: borderless red icon */
  .voice-cancel-btn {
    border: none !important;
    background: transparent !important;
    color: #ef4444 !important;
    padding: .3rem .45rem; /* a bit larger hit area */
    box-shadow: none !important;
  }
  .voice-cancel-btn i { font-size: 1.35rem; line-height: 1; }
  .voice-cancel-btn:hover { color: #dc2626 !important; filter: none; }
  .voice-cancel-btn:focus { outline: none; box-shadow: none !important; }
 
  /* Navbar Logout button */
  .btn-logout {
    background-color: #ee6565; /* red */
    color: whitesmoke !important;
    border: none;
    border-radius: .375rem; /* match Bootstrap rounded */
    padding: .375rem .75rem; /* btn default paddings */
    line-height: 1.5;
    text-decoration: none !important;
    transition: filter 2s ease, transform 2s ease, box-shadow .2s ease;
  }
  .btn-logout:hover {
    background-color: #ff0d0d; /* slightly darker red */
    filter: none;
    box-shadow: none;
  }
  .btn-logout:active {
    transform: translateY(1px);
    background-color: #c81e1e; /* a touch darker when pressed */
  }
  .btn-logout:focus-visible {
    outline: 2px solid rgba(239,68,68,.65);
    outline-offset: 2px;
  }
  /* Navbar-specific fine-tuning for vertical centering */
  .navbar .nav-item form { margin: 0; }
  .navbar .btn-logout {
    display: inline-flex;
    align-items: center;
    padding-top: .35rem;
    padding-bottom: .35rem;
  }

  /* Navbar profile info chip */
  .profile-info {
    background: #edeff0; /* light gray */
    border: 1px solid #cfd4d9;
    border-radius: 9999px; /* pill */
    padding: .25rem .6rem;
  }
  .profile-info .header-avatar { box-shadow: 0 0 0 1px rgba(0,0,0,.05); }
  .profile-info .avatar { box-shadow: 0 0 0 1px rgba(0,0,0,.05); }

/* Navbar brand animated pill */
.brand-btn {
  display: inline-flex !important;
  align-items: center;
  gap: .4rem;
  padding: .45rem 1rem !important;
  border: 1px solid #000 !important;
  color: #000 !important;
  background: #fff !important;
  border-radius: 14px !important;
  text-decoration: none !important;
  font-weight: 700;
  line-height: 1;
  transition: color .2s ease, background-color .2s ease, border-color .2s ease, transform .12s ease, box-shadow .2s ease;
  position: relative;
  overflow: hidden;
}
.brand-btn:hover {
  background: #000 !important;
  color: #fff !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0,0,0,.15);
}
.brand-btn:active { transform: translateY(0); box-shadow: 0 2px 8px rgba(0,0,0,.12); }
.brand-btn::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: -40%;
  width: 40%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
  transform: skewX(-20deg) translateX(-120%);
  transition: transform .45s ease;
  pointer-events: none;
}
.brand-btn:hover::after { transform: skewX(-20deg) translateX(260%); }

/* Brand icon glow on hover */
.brand-btn i {
  transition: color .2s ease, text-shadow .25s ease, transform .2s ease;
}
.brand-btn:hover i {
  color: #fff !important;
  text-shadow: 0 0 6px rgba(255,215,0,.6), 0 0 12px rgba(255,215,0,.35);
  transform: translateY(-1px);
}
.brand-btn:active i {
  text-shadow: 0 0 3px rgba(255,215,0,.4);
  transform: translateY(0);
}

  /* Admin navbar buttons (no animation). Active page has black 2px bottom border */
  .admin-nav-btn {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .25rem .5rem;
    color: #111;
    text-decoration: none !important;
    border: none;
    border-radius: 6px;
  }
  .admin-nav-btn:hover { color: #000; text-decoration: none; }
  .admin-nav-btn.is-active {
    border-bottom: 2px solid #000;
  }

/* Fancy button (from template) adapted for navbar */
.fancy {
  background-color: transparent;
  border: 2px solid #000;
  border-radius: 0;
  box-sizing: border-box;
  color: #b72f2f;
  cursor: pointer;
  display: inline-block;
  font-weight: 700;
  letter-spacing: 0.05em;
  margin: 0;
  outline: none;
  overflow: visible;
  padding: .5em 1em; /* compact for navbar */
  position: relative;
  text-align: center;
  text-decoration: none;
  text-transform: none;
  transition: all 0.3s ease-in-out;
  user-select: none;
  font-size: 13px;
  line-height: 1;
}
.fancy::before {
  content: " ";
  width: 1.3rem;
  height: 2px;
  background: black;
  top: 50%;
  left: 1.2em;
  position: absolute;
  transform: translateY(-50%);
  transform-origin: center;
  transition: background 0.3s linear, width 0.3s linear;
}
.fancy .text {
  font-size: 1.125em;
  line-height: 1.33333em;
  padding-left: 2em;
  display: block;
  text-align: left;
  transition: all 0.3s ease-in-out;
  text-transform: uppercase;
  text-decoration: none;
  color: black;
}
.fancy .top-key {
  height: 2px;
  width: 1.5625rem;
  top: -2px;
  left: 0.625rem;
  position: absolute;
  background: #e8e8e8;
  transition: width 0.5s ease-out, left 0.3s ease-out;
}
.fancy .bottom-key-1 {
  height: 2px;
  width: 1.5625rem;
  right: 1.875rem;
  bottom: -2px;
  position: absolute;
  background: #e8e8e8;
  transition: width 0.5s ease-out, right 0.3s ease-out;
}
.fancy .bottom-key-2 {
  height: 2px;
  width: 0.625rem;
  right: 0.625rem;
  bottom: -2px;
  position: absolute;
  background: #e8e8e8;
  transition: width 0.5s ease-out, right 0.3s ease-out;
}
.fancy:hover {
  color: white;
  background: black;
}
.fancy:hover::before { width: 0.9375rem; background: white; }
.fancy:hover .text { color: white; padding-left: 1.5em; }
.fancy:hover .top-key { left: -2px; width: 0px; }
.fancy:hover .bottom-key-1, .fancy:hover .bottom-key-2 { right: 0; width: 0; }

/* Active indicator for fancy in navbar */
.fancy.is-active {
  background: #000;
  color: #fff;
  box-shadow: inset 0 -2px 0 #000; /* keep 2px black bottom border */
  border-color: #000;
}
.fancy.is-active .text { color: #fff; }
.fancy.is-active::before { background: #fff; }
/* keep active state stable on hover */
.fancy.is-active:hover { background: #000; color: #fff; }

/* Navbar integration tweaks */
.navbar .fancy { border-radius: 6px; }

/* Footer styling */
.site-footer {
  background: #f8f9fa;
  border-top: 1px solid #eaecef;
  position: relative;
  margin-top: auto; /* stick to bottom */
  overflow: hidden; /* prevent underline animation from causing horizontal scroll */
  box-shadow: 0 -6px 14px rgba(0,0,0,.05) inset; /* subtle top shadow */
  width: 100%;
}
.site-footer .container { padding-top: .75rem; padding-bottom: .75rem; }
.site-footer .footer-brand i { color: #000; }
.site-footer .footer-brand span { font-weight: 700; letter-spacing: .25px; }
.site-footer .footer-links .nav-link { color: #6c757d; }
.site-footer .footer-links .nav-link:hover { color: #000; }
.site-footer .footer-underline {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, rgba(0,0,0,.35), transparent);
  animation: footer-sheen 2.6s ease-in-out infinite;
}
@keyframes footer-sheen {
  0% { opacity: .0; transform: translateX(-30%); }
  30% { opacity: .9; }
  60% { opacity: .9; }
  100% { opacity: .0; transform: translateX(30%); }
}