#loadingoverlay {
    position: fixed;
    top: 0;
    z-index: 9999;
    width: 100%;
    height: 100%;
    display: none;
    background: rgba(0, 0, 0, 0.6);
}

.cv-spinner {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.spinner {
    width: 40px;
    height: 40px;
    border: 4px #ddd solid;
    border-top: 4px #2e93e6 solid;
    border-radius: 50%;
    animation: sp-anime 0.8s infinite linear;
}

@keyframes sp-anime {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(359deg);
    }
}

/* Batasi tinggi area body modal agar anaknya bisa overflow */
.modal-body {
  max-height: 75vh;          /* atur sesuai kebutuhan */
  overflow: hidden;          /* biar yang scroll cuma chat, bukan seluruh body */
}

/* Flex hack agar child boleh overflow */
.modal-body { display: flex; flex-direction: column; }
.chat-panel { flex: 1 1 auto; min-height: 0; }   /* min-height:0 penting */
.chat-body  { height: 100%; overflow-y: auto; }  /* inilah yang scroll */
#noteChatPanel { height:100%; overflow-y:auto; scroll-behavior:smooth; }
.chat-panel { border-radius: 0.5rem; }
/* Pastikan kontainer pesan adalah kolom */
.msg {
  display: flex !important;
  flex-direction: column !important;
  gap: .25rem;
  margin-bottom: .75rem;
}

/* Hindari float/inline yang bikin sejajar */
.msg .bubble,
.msg .meta {
  float: none !important;
  display: block !important;
  clear: both !important;   /* jaga-jaga jika ada float lain */
  max-width: 80%;
  word-break: break-word;
}

/* Alignment konsisten: other = kiri, me = kanan */
.msg.other .bubble,
.msg.other .meta {
  align-self: flex-start !important;
  text-align: left !important;
}

.msg.me .bubble,
.msg.me .meta {
  align-self: flex-end !important;
  text-align: right !important;
}

/* Styling bubble (biar nggak berubah) */
.bubble {
  padding: .5rem .75rem;
  border-radius: .75rem;
  margin-top: 3px;
  box-shadow: 0 1px 2px rgba(0,0,0,.05);
}
.msg.other .bubble {
  background: var(--bs-light, #f5f5f5);
  color: inherit;
  border-top-left-radius: .25rem;
}
.msg.me .bubble {
  background: rgb(209, 255, 209);
  color: inherit;
  border-top-right-radius: .25rem;
}

/* Meta di bawah bubble */
.meta {
  font-size: .75rem;
  opacity: .85;
  color: var(--bs-secondary-color, #6c757d);
}

/* Double-check saat read vs single-check saat unread */
.ticks { display: inline-flex; align-items: center; }
.ticks .check { display:block; }
.ticks.read   .check { color: var(--bs-primary, #0d6efd); } /* biru */
.ticks.unread .check { color: #adb5bd; }                    /* abu-abu */
.check-2 { margin-left: -4px; } /* overlap agar tampak double-check */