:root {
  /* WhatsApp Light Mode Colors */
  --background: 0 0% 93%;
  --foreground: 0 0% 8%;

  --card: 0 0% 100%;
  --card-foreground: 0 0% 8%;

  --popover: 0 0% 100%;
  --popover-foreground: 0 0% 8%;

  /* WhatsApp Teal Green */
  --primary: 168 76% 42%;
  --primary-foreground: 0 0% 100%;

  --secondary: 0 0% 96%;
  --secondary-foreground: 0 0% 8%;

  --muted: 0 0% 90%;
  --muted-foreground: 0 0% 45%;

  --accent: 168 76% 42%;
  --accent-foreground: 0 0% 100%;

  --destructive: 0 84% 60%;
  --destructive-foreground: 0 0% 100%;

  --border: 0 0% 85%;
  --input: 0 0% 85%;
  --ring: 168 76% 42%;

  --radius: 0.5rem;

  /* WhatsApp specific — warm, authentic WhatsApp Web palette */
  --chat-bg: 30 18% 88%;         /* #EFEAE2 warm beige */
  --message-out: 120 54% 89%;    /* #D9FDD3 light green */
  --message-in: 0 0% 100%;       /* #FFFFFF white */
  --sidebar-bg: 0 0% 100%;
  --header-bg: 168 76% 26%;      /* #00A884 teal header */
  --search-bg: 0 0% 100%;
  --panel-header: 220 13% 95%;   /* #F0F2F5 */
  --icon-color: 0 0% 45%;
  --timestamp: 0 0% 55%;
  --unread-badge: 168 76% 42%;
  --online: 134 61% 41%;
  --typing: 168 76% 42%;
  --contact-border: #F0F2F5;
}

.dark {
  /* WhatsApp Dark Mode Colors */
  --background: 210 8% 12%;
  --foreground: 0 0% 93%;

  --card: 210 8% 18%;
  --card-foreground: 0 0% 93%;

  --popover: 210 8% 18%;
  --popover-foreground: 0 0% 93%;

  --primary: 168 76% 42%;
  --primary-foreground: 0 0% 100%;

  --secondary: 210 8% 22%;
  --secondary-foreground: 0 0% 93%;

  --muted: 210 8% 25%;
  --muted-foreground: 0 0% 60%;

  --accent: 168 76% 42%;
  --accent-foreground: 0 0% 100%;

  --destructive: 0 62% 45%;
  --destructive-foreground: 0 0% 100%;

  --border: 210 8% 25%;
  --input: 210 8% 25%;
  --ring: 168 76% 42%;

  /* WhatsApp Dark specific colors */
  --chat-bg: 210 6% 7%;
  --message-out: 168 41% 18%;
  --message-in: 210 8% 22%;
  --sidebar-bg: 210 8% 12%;
  --header-bg: 210 8% 18%;
  --search-bg: 210 8% 22%;
  --panel-header: 210 8% 18%;
  --icon-color: 0 0% 60%;
  --timestamp: 0 0% 50%;
  --unread-badge: 168 76% 42%;
  --online: 134 61% 41%;
  --typing: 168 76% 42%;
  --contact-border: #222D34;
}

/* Base styles */
* {
  border-color: hsl(var(--border));
}

body {
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* Messages scroll area — inherits the page canvas. Previously this
   carried its own bg + radial gradient, which made the messages panel
   read as a distinct shade from the rest of the page. */
.chat-pattern {
  background-color: transparent;
}

/* Custom scrollbar */
.scrollbar-thin {
  scrollbar-width: thin;
  scrollbar-color: hsl(var(--muted)) transparent;
}

.scrollbar-thin::-webkit-scrollbar {
  width: 6px;
}

.scrollbar-thin::-webkit-scrollbar-track {
  background: transparent;
}

.scrollbar-thin::-webkit-scrollbar-thumb {
  background-color: hsl(var(--muted-foreground) / 0.3);
  border-radius: 3px;
}

/* Typing animation */
@keyframes typing-dot {
  0%, 60%, 100% {
    opacity: 0.3;
    transform: translateY(0);
  }
  30% {
    opacity: 1;
    transform: translateY(-4px);
  }
}

.animate-typing-dot {
  animation: typing-dot 1.4s infinite ease-in-out;
}

/* ── Active chat highlight — mint tint on the rounded contact pill ── */
.active-chat {
  background-color: var(--chat-accent-soft) !important;
  box-shadow: inset 0 0 0 1px rgba(34, 211, 160, 0.35) !important;
}

/* ── Chat conversation surface — KeyVue-inspired dark-first tokens ── */
:root {
  /* Light (mapped back from the dark reference) */
  --chat-canvas:            #F1F5F9;   /* slate-100 — matches bg-slate-100 on other pages */
  --chat-panel:             #FFFFFF;   /* sidebar + conversation surface */
  --chat-panel-elev:        #F8FAFC;   /* messages area inside conversation */
  --chat-hairline:          #E2E8F0;   /* slate-200 */
  --chat-bubble-in-bg:      #F1F3F6;
  --chat-bubble-out-bg:     #D7F5EA;   /* mint-tinted */
  --chat-bubble-out-fg:     #0F3B33;
  --chat-fg:                #0F172A;
  --chat-fg-muted:          #475569;
  --chat-meta:              #94A3B8;
  --chat-accent:            #10B981;   /* emerald-500 — send / active / status */
  --chat-accent-soft:       rgba(16, 185, 129, 0.12);
  --chat-accent-fg:         #047857;   /* emerald-700 */
  --chat-cta-hover:         rgba(15, 23, 42, 0.04);
}
.dark {
  --chat-canvas:            #030712;   /* gray-950 — matches dark:bg-gray-950 on other pages */
  --chat-panel:             #14171B;
  --chat-panel-elev:        #101316;
  --chat-hairline:          #1F242B;
  --chat-bubble-in-bg:      #1B2027;
  --chat-bubble-out-bg:     #0E3B33;   /* dark teal */
  --chat-bubble-out-fg:     #A7F3D0;   /* emerald-200 */
  --chat-fg:                #E6EAEF;
  --chat-fg-muted:          #9AA3AE;
  --chat-meta:              #6B7483;
  --chat-accent:            #22D3A0;   /* mint */
  --chat-accent-soft:       rgba(34, 211, 160, 0.15);
  --chat-accent-fg:         #22D3A0;
  --chat-cta-hover:         rgba(255, 255, 255, 0.04);
}

.chat-surface {
  font-family: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-feature-settings: "ss01", "cv11";
}
.chat-meta {
  font-family: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  letter-spacing: 0.02em;
}

/* Bubble skeleton — shared by incoming + outgoing.
   KeyVue-inspired: filled bubbles, no tails, no seam, no borders,
   no drop shadow — differentiation comes from fill color alone. */
.chat-bubble {
  color: var(--chat-fg);
  border-radius: 16px;
  padding: 10px 14px 8px;
  transition: transform 150ms ease-out;
}
.chat-bubble.chat-bubble--in {
  background-color: var(--chat-bubble-in-bg);
  border-bottom-left-radius: 4px;
}
.chat-bubble.chat-bubble--out {
  background-color: var(--chat-bubble-out-bg);
  color: var(--chat-bubble-out-fg);
  border-bottom-right-radius: 4px;
}
.chat-bubble.chat-bubble--out .chat-meta {
  color: var(--chat-bubble-out-fg);
  opacity: 0.72;
}
.chat-bubble:hover { transform: translateY(-0.5px); }

/* CTA drawer inside a bubble — edge-to-edge, faint separators that
   respect the bubble's own fill color. */
.chat-cta-row {
  display: flex;
  margin: 12px -14px -8px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  overflow: hidden;
  border-bottom-left-radius: inherit;
  border-bottom-right-radius: inherit;
}
.chat-cta-row.chat-cta-stacked { flex-direction: column; }
.chat-cta-row > * + * { border-left: 1px solid rgba(255, 255, 255, 0.08); }
.chat-cta-row.chat-cta-stacked > * + * {
  border-left: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.chat-bubble--in .chat-cta-row,
.chat-bubble--in .chat-cta-row > * + * {
  border-color: rgba(255, 255, 255, 0.06);
}
/* light mode — darker separators */
:root .chat-bubble--in .chat-cta-row,
:root .chat-bubble--in .chat-cta-row > * + * {
  border-color: rgba(15, 23, 42, 0.08);
}
:root .chat-bubble--out .chat-cta-row,
:root .chat-bubble--out .chat-cta-row > * + * {
  border-color: rgba(15, 59, 51, 0.12);
}

.chat-cta {
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 500;
  color: currentColor;
  opacity: 0.78;
  background-color: transparent;
  transition: background-color 140ms ease-out, opacity 140ms ease-out;
  text-align: center;
  cursor: pointer;
  min-width: 0;
}
.chat-cta:hover { opacity: 1; background-color: rgba(255, 255, 255, 0.05); }
:root .chat-cta:hover { background-color: rgba(15, 23, 42, 0.04); }
.chat-cta i { font-size: 15px; line-height: 1; }
.chat-cta--accent { color: var(--chat-accent); opacity: 1; font-weight: 600; }
.chat-cta--accent:hover { background-color: var(--chat-accent-soft); }

/* Thin header strip inside template bubbles */
.chat-template-strip {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: -10px -14px 10px;
  padding: 7px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.7;
}
.chat-bubble--out .chat-template-strip {
  border-bottom-color: rgba(15, 59, 51, 0.18);
}
:root .chat-bubble--in .chat-template-strip {
  border-bottom-color: rgba(15, 23, 42, 0.08);
}

/* Header icon-tool cluster — grouped pill */
.chat-tool-cluster {
  display: inline-flex;
  border: 1px solid var(--chat-hairline);
  border-radius: 10px;
  overflow: hidden;
  background-color: var(--chat-panel-elev);
}
.chat-tool-cluster > * + * { border-left: 1px solid var(--chat-hairline); }
.chat-tool-cluster button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 30px;
  color: var(--chat-fg-muted);
  transition: background-color 140ms ease-out, color 140ms ease-out;
}
.chat-tool-cluster button:hover {
  background-color: var(--chat-cta-hover);
  color: var(--chat-fg);
}
.chat-tool-cluster button:focus-visible {
  outline: 2px solid var(--chat-accent);
  outline-offset: -2px;
}

/* Chat surfaces sit directly on the page canvas (no floating cards).
   Separation between sidebar and conversation comes from a single
   vertical hairline instead of a rounded-card boundary. */
.chat-panel {
  background-color: transparent;
  overflow: hidden;
}

/* ── Chat media (inbound images) ──
   Bubble shows a bounded thumbnail; clicking opens the full image in a
   lightbox overlay (chat_media_controller.js). Same URL both times, so the
   full view is served from the browser cache. */
.chat-media-thumb {
  display: block;
  max-height: 240px;
  max-width: 100%;
  width: auto;
  border-radius: 8px;
  object-fit: cover;
  cursor: zoom-in;
}

.chat-media-thumb--sticker {
  max-height: 120px;
}

.chat-media-lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.85);
  cursor: zoom-out;
}

.chat-media-lightbox img,
.chat-media-lightbox video {
  max-width: 92vw;
  max-height: 92vh;
  object-fit: contain;
  border-radius: 8px;
}

.chat-media-lightbox-close {
  position: absolute;
  top: 12px;
  right: 20px;
  z-index: 1;
  border: none;
  background: none;
  color: #fff;
  font-size: 34px;
  line-height: 1;
  opacity: 0.75;
  cursor: pointer;
}

.chat-media-lightbox-close:hover {
  opacity: 1;
}

/* Video bubble: compact card with a play affordance. Nothing downloads from
   Meta until it is clicked (the lightbox player streams on demand). */
.chat-video-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 240px;
  max-width: 100%;
  height: 140px;
  border-radius: 8px;
  background-color: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.06);
  cursor: pointer;
}

.chat-video-play {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 9999px;
  background-color: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 26px;
}

/* Document bubble: pdf.js paints the first page above the file row.
   Visibility is toggled via inline style by pdf_preview_controller.js. */
.chat-pdf-preview {
  cursor: pointer;
}

.chat-pdf-preview canvas {
  display: block;
  width: 100%;
  max-height: 160px;
  object-fit: cover;
  object-position: top;
  background-color: #fff;
}

.chat-doc-download {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--chat-accent);
  font-size: 18px;
}

.chat-doc-download:hover {
  background-color: rgba(255, 255, 255, 0.08);
}

/* ── Login Page ── */
.hero-gradient {
  background: linear-gradient(135deg, #064e3b 0%, #065f46 20%, #047857 40%, #0d9488 60%, #065f46 80%, #064e3b 100%);
  background-size: 200% 200%;
  animation: hero-gradient-shift 15s ease infinite;
}

@keyframes hero-gradient-shift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

@keyframes login-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}