/* ═══════════════════════════════════════════════════════════
   KOVAT Chat System v2.0 — Professional Message Bubbles
   WS-2: Chat System Rebuild
   ═══════════════════════════════════════════════════════════ */

/* ── MESSAGE BUBBLES ──────────────────────────────────── */

/* Sender bubble (right) — Accent Blue */
.message.mine .bubble {
  background: var(--kovat-accent-blue) !important;
  border: none !important;
  color: #fff !important;
  border-radius: 18px 18px 2px 18px !important;
  box-shadow: 0 2px 8px rgba(74,122,255,0.2);
}

/* Receiver bubble (left) — Surface Raised */
.message:not(.mine) .bubble {
  background: var(--kovat-surface-raised) !important;
  border: 1px solid var(--kovat-border) !important;
  color: var(--kovat-text-primary) !important;
  border-radius: 18px 18px 18px 2px !important;
}

/* System messages */
.message.system {
  justify-content: center;
}
.message.system .bubble {
  background: transparent !important;
  border: none !important;
  color: var(--kovat-text-secondary) !important;
  font-size: var(--kovat-small);
  text-align: center;
  max-width: 80%;
}

/* ── MESSAGE META ─────────────────────────────────────── */

.message .meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--kovat-small);
  margin-bottom: 4px;
  color: var(--kovat-text-secondary);
}
.message.mine .meta {
  justify-content: flex-end;
  color: rgba(255,255,255,0.7);
}

.message .meta b {
  font-weight: 600;
  color: var(--kovat-text-primary);
}
.message.mine .meta b {
  color: #fff;
}

/* Timestamp */
.message .meta .time {
  font-size: 11px;
  color: var(--kovat-text-disabled);
}
.message.mine .meta .time {
  color: rgba(255,255,255,0.5);
}

/* ── READ RECEIPTS ────────────────────────────────────── */

.message .read-receipt {
  font-size: 12px;
  margin-left: 4px;
  opacity: 0.7;
}
.message .read-receipt.sent    { color: var(--kovat-text-disabled); }
.message .read-receipt.delivered { color: var(--kovat-text-disabled); }
.message .read-receipt.read    { color: var(--kovat-accent-blue); }

/* ── ENCRYPTION LOCK ──────────────────────────────────── */

.enc-lock {
  font-size: 11px;
  margin-right: 2px;
}
.enc-lock.e2ee {
  color: var(--kovat-accent-green);
}
.enc-lock.plain {
  color: var(--kovat-text-disabled);
}

/* ── TYPING INDICATOR ─────────────────────────────────── */

.typing-indicator {
  display: none;
  padding: 8px 16px;
  font-size: var(--kovat-small);
  color: var(--kovat-text-secondary);
  animation: kovatFadeIn var(--kovat-transition-fast);
}
.typing-indicator.active {
  display: flex;
  align-items: center;
  gap: 8px;
}

.typing-dots {
  display: inline-flex;
  gap: 3px;
  align-items: center;
}
.typing-dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--kovat-text-disabled);
  animation: kovatTypingBounce 1.4s ease-in-out infinite;
}
.typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.typing-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes kovatTypingBounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-6px); opacity: 1; }
}

/* ── MESSAGE ACTIONS ──────────────────────────────────── */

.msg-actions {
  display: flex;
  gap: 2px;
  margin-top: 4px;
  opacity: 0;
  transition: opacity var(--kovat-transition-fast);
}
.message:hover .msg-actions {
  opacity: 1;
}

.msg-actions button {
  padding: 4px 8px;
  font-size: 12px;
  background: var(--kovat-surface-raised);
  border: 1px solid var(--kovat-border);
  border-radius: var(--kovat-radius-pill);
  color: var(--kovat-text-secondary);
  cursor: pointer;
  transition: all var(--kovat-transition-fast);
}
.msg-actions button:hover {
  background: var(--kovat-accent-blue);
  color: #fff;
  border-color: var(--kovat-accent-blue);
}

/* ── REACTIONS ────────────────────────────────────────── */

.msg-reactions {
  display: flex;
  gap: 4px;
  margin-top: 4px;
  flex-wrap: wrap;
}
.reaction-chip {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px 8px;
  background: var(--kovat-surface-raised);
  border: 1px solid var(--kovat-border);
  border-radius: var(--kovat-radius-pill);
  font-size: 13px;
  cursor: pointer;
  transition: all var(--kovat-transition-fast);
}
.reaction-chip:hover {
  background: rgba(74,122,255,0.15);
  border-color: var(--kovat-accent-blue);
}
.reaction-chip em {
  font-style: normal;
  font-size: 11px;
  color: var(--kovat-text-secondary);
  font-weight: 600;
}

/* ── REPLY PREVIEW ────────────────────────────────────── */

.reply-preview {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  margin-bottom: 6px;
  background: rgba(255,255,255,0.05);
  border-left: 3px solid var(--kovat-accent-blue);
  border-radius: 4px;
  font-size: var(--kovat-small);
  cursor: pointer;
}
.reply-preview .reply-arrow {
  color: var(--kovat-accent-blue);
  font-size: 16px;
}
.reply-preview-text b {
  font-weight: 600;
  font-size: 12px;
}

/* ── REPLY STRIP ──────────────────────────────────────── */

.reply-strip {
  display: none;
  padding: 8px 12px;
  background: var(--kovat-surface-raised);
  border: 1px solid var(--kovat-border);
  border-radius: var(--kovat-radius-sm);
  margin-bottom: 8px;
  font-size: var(--kovat-small);
  color: var(--kovat-text-secondary);
  align-items: center;
  gap: 8px;
}
.reply-strip.show {
  display: flex;
}
.reply-strip button {
  margin-left: auto;
  padding: 2px 8px;
  font-size: 12px;
  background: transparent;
  border: none;
  color: var(--kovat-text-disabled);
  cursor: pointer;
}
.reply-strip button:hover {
  color: var(--kovat-accent-red);
}

/* ── SCROLL TO BOTTOM ─────────────────────────────────── */

.scroll-bottom-btn {
  position: absolute !important;
  bottom: 80px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  background: var(--kovat-accent-blue) !important;
  color: #fff !important;
  border: none !important;
  padding: 8px 18px !important;
  border-radius: var(--kovat-radius-pill) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  box-shadow: var(--kovat-shadow-tooltip) !important;
  z-index: 10 !important;
  animation: kovatSlideUp var(--kovat-transition-base);
}

@keyframes kovatSlideUp {
  from { opacity: 0; transform: translateX(-50%) translateY(12px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ── DATE SEPARATOR ───────────────────────────────────── */

.date-separator {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 16px 0;
  gap: 10px;
}
.date-separator::before,
.date-separator::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--kovat-border);
}
.date-separator span {
  font-size: 11px;
  font-weight: 600;
  color: var(--kovat-text-disabled);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ── CHAT LAYOUT ENHANCEMENTS ─────────────────────────── */

.chat-main {
  position: relative;
}

/* ── COMPOSER ─────────────────────────────────────────── */

.composer textarea {
  font-family: var(--kovat-font);
  font-size: var(--kovat-body);
  background: var(--kovat-surface-raised);
  border: 1px solid var(--kovat-border);
  border-radius: var(--kovat-radius-sm);
  padding: 12px 16px;
  color: var(--kovat-text-primary);
  transition: border-color var(--kovat-transition-fast);
  outline: none;
}
.composer textarea:focus {
  border-color: var(--kovat-accent-blue);
}

/* ── MENTIONS ─────────────────────────────────────────── */

.mention {
  color: var(--kovat-accent-blue);
  font-weight: 600;
  background: rgba(74,122,255,0.1);
  padding: 0 2px;
  border-radius: 3px;
}

/* ── CHAT TABS (DM / Private / Public) ────────────────── */

.chat-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: var(--kovat-space-md);
  background: var(--kovat-surface-raised);
  border-radius: var(--kovat-radius-sm);
  padding: 4px;
}
.chat-tabs button {
  flex: 1;
  padding: 8px 16px;
  background: transparent;
  border: none;
  border-radius: var(--kovat-radius-sm);
  color: var(--kovat-text-secondary);
  font-size: var(--kovat-small);
  font-weight: 500;
  cursor: pointer;
  transition: all var(--kovat-transition-fast);
}
.chat-tabs button.active {
  background: var(--kovat-accent-blue);
  color: #fff;
}

/* ── MEMBER SIDE PANEL ────────────────────────────────── */

.side-panel {
  background: var(--kovat-surface);
  border: 1px solid var(--kovat-border);
  border-radius: var(--kovat-radius-sm);
  padding: var(--kovat-space-md);
  overflow-y: auto;
}
.side-panel h3 {
  font-size: var(--kovat-body);
  margin: 0 0 var(--kovat-space-sm);
}
.side-panel .member {
  display: flex;
  flex-direction: column;
  padding: var(--kovat-space-sm) 0;
  border-bottom: 1px solid var(--kovat-border);
  cursor: pointer;
  transition: background var(--kovat-transition-fast);
}
.side-panel .member:hover {
  background: var(--kovat-surface-raised);
}
.side-panel .member b {
  font-size: var(--kovat-small);
  font-weight: 600;
}
.side-panel .member small {
  font-size: 11px;
}

/* ── LOCATION CARDS ───────────────────────────────────── */

.location-cards {
  margin-bottom: var(--kovat-space-sm);
}
.location-card {
  display: flex;
  align-items: center;
  gap: var(--kovat-space-sm);
  padding: var(--kovat-space-sm) var(--kovat-space-md);
  background: var(--kovat-surface-raised);
  border: 1px solid var(--kovat-border);
  border-radius: var(--kovat-radius-sm);
  margin-bottom: var(--kovat-space-xs);
}
.location-card-icon {
  font-size: 24px;
}
.location-card-body {
  flex: 1;
}
.location-card-body b {
  font-size: var(--kovat-small);
}
.location-coords {
  font-size: 11px;
  color: var(--kovat-text-disabled);
}
.location-card-actions {
  display: flex;
  gap: 4px;
}

/* ── FADE IN ANIMATION ────────────────────────────────── */

@keyframes kovatFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}