/* ============================================================
   CRM Discussions — app-like mobile-first styles
   ============================================================ */
:root {
  --brand: #1E40AF;
  --brand-soft: #3B82F6;
  --bg: #F3F4F6;
  --bubble-mine: #DBEAFE;
  --bubble-other: #FFFFFF;
  --muted: #6B7280;
  --border: #E5E7EB;
}

html, body { background: var(--bg); }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }

/* Use full viewport height for app-style screens */
.discussion-page, body.discussion-page { padding-bottom: 80px; }

/* ---------- Auth screen ---------- */
.bg-primary-grad {
  min-height: 100vh;
  background: linear-gradient(180deg, var(--brand) 0%, #2563EB 100%);
}
.auth-wrap {
  max-width: 420px; margin: 0 auto;
  padding: max(env(safe-area-inset-top), 36px) 16px 24px;
}
.logo-emoji { font-size: 3rem; line-height: 1; }

/* ---------- Top navbar ---------- */
.app-navbar { box-shadow: 0 2px 6px rgba(0,0,0,0.08); }

/* ---------- Lead card ---------- */
.lead-card {
  display: flex; align-items: center; gap: 12px;
  background: #fff; border: 1px solid var(--border); border-radius: 14px;
  padding: 12px; cursor: pointer; transition: transform .08s;
  text-decoration: none; color: inherit;
}
.lead-card:active { transform: scale(0.99); }
.lead-card .avatar {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--brand-soft); color: #fff; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.lead-card .avatar.vip { background: #F59E0B; }
.lead-card .title { font-weight: 600; color: #111827; }
.lead-card .sub   { color: var(--muted); font-size: 13px; }
.lead-card .meta  { color: var(--muted); font-size: 12px; margin-top: 4px; }
.lead-card .tag   {
  display: inline-block;
  background: #EFF6FF; color: var(--brand);
  font-size: 11px; font-weight: 600; padding: 2px 6px; border-radius: 6px; margin-right: 4px;
}
.vip-badge { background: #FEF3C7; color: #B45309; padding: 0 6px; border-radius: 4px;
             font-size: 10px; font-weight: 700; margin-left: 4px; vertical-align: middle; }

/* ---------- Pull to refresh ---------- */
.ptr-hint {
  text-align: center; color: var(--muted); font-size: 13px;
  height: 0; overflow: hidden; transition: height .2s;
}
.ptr-hint.show { height: 28px; padding-top: 6px; }

/* ---------- Discussion timeline ---------- */
.timeline {
  max-width: 720px; margin: 0 auto;
  display: flex; flex-direction: column; gap: 6px;
}
.bubble-row { display: flex; }
.bubble-row.mine { justify-content: flex-end; }
.bubble {
  max-width: 82%; padding: 8px 10px; border-radius: 12px;
  background: var(--bubble-other); border: 1px solid var(--border);
  word-wrap: break-word;
}
.bubble.mine {
  background: var(--bubble-mine); border-color: #BFDBFE;
  border-top-right-radius: 4px;
}
.bubble.other { border-top-left-radius: 4px; }
.bubble .user { font-size: 11px; font-weight: 700; color: var(--brand); margin-bottom: 2px; }
.bubble .text { font-size: 15px; color: #111827; white-space: pre-wrap; line-height: 1.35; }
.bubble .time { font-size: 10px; color: var(--muted); margin-top: 4px; text-align: right; }
.bubble audio { width: 100%; margin-top: 6px; height: 36px; }

/* ---------- Composer ---------- */
.composer-bar {
  position: fixed; bottom: 0; left: 0; right: 0;
  background: #fff; border-top: 1px solid var(--border);
  padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
  display: flex; align-items: flex-end; gap: 6px;
  z-index: 1030;
}
.composer-bar textarea {
  flex: 1; resize: none; border-radius: 20px; background: #F3F4F6; border: none;
  padding: 9px 14px; max-height: 120px; font-size: 15px;
}
.composer-btn {
  width: 42px; height: 42px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0; flex-shrink: 0;
}
#sendBtn { width: auto; padding: 0 14px; border-radius: 22px; }

/* Recording state */
.composer-bar.recording #micBtn {
  background: #DC2626; color: #fff;
  animation: pulse 1.2s ease-in-out infinite;
}

/* ---------- Recording overlay ---------- */
.record-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.6);
  display: flex; align-items: center; justify-content: center; z-index: 2000;
}
.btn-record-action { width: 56px; height: 56px; font-size: 1.4rem; }
.rec-pulse {
  width: 80px; height: 80px; border-radius: 50%;
  background: #DC2626;
  display: flex; align-items: center; justify-content: center;
  animation: pulse 1.2s ease-in-out infinite;
  font-size: 2.2rem;
}
.rec-pulse::after { content: "🎤"; }
@keyframes pulse {
  0%, 100% { transform: scale(1);   box-shadow: 0 0 0 0    rgba(220,38,38,0.5); }
  50%      { transform: scale(1.06); box-shadow: 0 0 0 16px rgba(220,38,38,0); }
}

/* ---------- Empty state / misc ---------- */
#emptyState { padding-top: 80px; }

/* Make tap targets comfortable on phones */
@media (max-width: 480px) {
  .form-control-lg { font-size: 1rem; padding: .65rem .9rem; }
}