/*
 * custom.css — WhatsApp-like bubble styles layered on top of Bulma CSS
 *
 * Requirements: 15.4, 15.5, 10.15
 */

/* ── Chat window ─────────────────────────────────────────────────────────── */

#chat-window {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: 1rem;
  background-color: #ece5dd; /* WhatsApp background */
}

/* ── Message bubbles ─────────────────────────────────────────────────────── */

.message-row {
  display: flex;
  margin-bottom: 0.5rem;
  max-width: 100%;
}

/* Received messages — left-aligned */
.message-row.received {
  justify-content: flex-start;
}

/* Sent messages — right-aligned */
.message-row.sent {
  justify-content: flex-end;
}

.message-bubble {
  max-width: 70%;
  padding: 0.5rem 0.75rem;
  border-radius: 0.75rem;
  position: relative;
  word-wrap: break-word;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
  font-size: 0.9rem;
  line-height: 1.4;
}

/* Received bubble — white with left-side tail */
.message-row.received .message-bubble {
  background-color: #ffffff;
  border-top-left-radius: 0;
  color: #303030;
}

/* Sent bubble — WhatsApp green (#25d366) with right-side tail */
.message-row.sent .message-bubble {
  background-color: #25d366;
  border-top-right-radius: 0;
  color: #ffffff;
}

/* Sender name inside bubble (for group chats) */
.message-bubble .message-sender {
  font-size: 0.75rem;
  font-weight: 700;
  margin-bottom: 0.2rem;
  color: #075e54;
}

.message-row.sent .message-bubble .message-sender {
  color: rgba(255, 255, 255, 0.85);
}

/* Timestamp inside bubble */
.message-bubble .message-time {
  font-size: 0.65rem;
  opacity: 0.7;
  display: block;
  text-align: right;
  margin-top: 0.25rem;
}

/* ── Media inside bubbles ────────────────────────────────────────────────── */

.message-bubble img,
.message-bubble video {
  max-width: 100%;
  border-radius: 0.5rem;
  display: block;
  margin-top: 0.25rem;
}

.message-bubble audio {
  width: 100%;
  margin-top: 0.25rem;
}

/* ── System / date separator messages ───────────────────────────────────── */

.message-row.system {
  justify-content: center;
}

.message-row.system .message-bubble {
  background-color: rgba(225, 245, 254, 0.85);
  color: #555;
  font-size: 0.75rem;
  border-radius: 0.5rem;
  padding: 0.25rem 0.75rem;
  max-width: 60%;
  text-align: center;
  box-shadow: none;
}

/* ── Deleted / revoked shared chats (Requirement 10.15) ─────────────────── */

/*
 * Applied to shared chat list items whose status is "deleted".
 * Combines Bulma's has-text-grey colour with strikethrough decoration.
 */
.is-strikethrough {
  text-decoration: line-through;
}

.has-text-grey.is-strikethrough {
  color: #7a7a7a; /* Bulma $grey */
  text-decoration: line-through;
}

/* Shared chat card — deleted state */
.chat-card.is-deleted .chat-card-title {
  color: #7a7a7a;
  text-decoration: line-through;
}

.chat-card.is-deleted .chat-card-meta {
  color: #b5b5b5;
}

/* ── Storage quota progress bar colours ─────────────────────────────────── */

/* Override Bulma progress colour at 80%+ usage */
.progress.is-quota-warning::-webkit-progress-value {
  background-color: #ffdd57; /* Bulma $warning */
}

.progress.is-quota-warning::-moz-progress-bar {
  background-color: #ffdd57;
}

.progress.is-quota-full::-webkit-progress-value {
  background-color: #f14668; /* Bulma $danger */
}

.progress.is-quota-full::-moz-progress-bar {
  background-color: #f14668;
}

/* ── Primary action colour — WhatsApp green ──────────────────────────────── */

.button.is-primary,
.button.is-whatsapp {
  background-color: #25d366;
  border-color: transparent;
  color: #ffffff;
}

.button.is-primary:hover,
.button.is-whatsapp:hover {
  background-color: #1da851;
  border-color: transparent;
  color: #ffffff;
}

.button.is-primary:focus,
.button.is-whatsapp:focus {
  box-shadow: 0 0 0 0.125em rgba(37, 211, 102, 0.25);
}

/* ── Navbar brand accent ─────────────────────────────────────────────────── */

.navbar-brand .navbar-item strong {
  color: #25d366;
}

/* ── Search result highlight ─────────────────────────────────────────────── */

.search-highlight {
  background-color: #fff176;
  border-radius: 2px;
  padding: 0 2px;
}

/* ── Infinite scroll sentinels ───────────────────────────────────────────── */

#load-older,
#load-newer {
  height: 1px;
  visibility: hidden;
}