/* ═══════════════════════════════════════════════════════════════
   PHONEOPIA  ·  WORLD-CLASS MESSAGING UI  ·  v3.0
   Glassmorphism · Spring Physics · Premium Micro-interactions
   Inspired by WhatsApp · Telegram · Discord · Apple Design
═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

/* ─── DESIGN TOKENS — Phoneopia Premium 2026 ─────────────────── */
:root {
  /* Brand Palette — WhatsApp-Web green */
  --p:         #FF2D55;
  --p-dark:    #E81235;
  --p-deeper:  #D90429;
  --p-accent:  #FF4D6D;
  --p-light:   #FFF1F4;
  --p-dim:     rgba(255,45,85,.10);
  --p-glow:    rgba(255,45,85,.22);
  --p-glass:   rgba(255,45,85,.08);

  /* Aliases (inline HTML compat) */
  --primary:    #FF2D55;
  --secondary:  #FF4D6D;
  --light-red:  #FFF1F4;
  --white:      #FFFFFF;
  --text:       #111827;
  --text-light: #6B7280;
  --surface:    #FAFAFA;
  --border:     #F1F1F1;
  --text1:      #111827;
  --text2:      #374151;
  --text3:      #6B7280;

  /* Surfaces */
  --bg:        #FFFFFF;
  --bg2:       #FAFAFA;
  --card:      #FFFFFF;
  --glass:     rgba(255,255,255,.88);
  --glass-dark:rgba(255,255,255,.72);
  --hover:     rgba(255,45,85,.05);
  --active:    rgba(255,45,85,.11);
  --overlay:   rgba(17,24,39,.45);

  /* Text */
  --t1: #111827;
  --t2: #374151;
  --t3: #6B7280;
  --t4: #9CA3AF;

  /* Status */
  --online:  #FF2D55;
  --away:    #F59E0B;
  --busy:    #EF4444;
  --offline: #9CA3AF;

  /* Messages */
  --sent-bg:  linear-gradient(135deg,#FFF1F4,#FFE5EA);
  --recv-bg:  #FFFFFF;
  --sent-txt: #111827;
  --recv-txt: #111827;

  /* Semantic */
  --success: #FF2D55;
  --warn:    #F59E0B;
  --danger:  #EF4444;
  --info:    #3B82F6;

  /* Borders */
  --b1: #F1F1F1;
  --b2: #E5E7EB;

  /* Shadows — premium soft */
  --s0: 0 1px 2px rgba(17,24,39,.04);
  --s1: 0 2px 8px rgba(17,24,39,.06), 0 1px 2px rgba(17,24,39,.04);
  --s2: 0 4px 16px rgba(17,24,39,.08), 0 2px 4px rgba(17,24,39,.04);
  --s3: 0 8px 32px rgba(17,24,39,.10), 0 2px 8px rgba(17,24,39,.05);
  --s4: 0 16px 48px rgba(17,24,39,.12), 0 4px 12px rgba(17,24,39,.06);
  --sg: 0 8px 28px rgba(255,45,85,.32), 0 2px 8px rgba(255,45,85,.18);
  --sg2:0 12px 40px rgba(255,45,85,.40);

  /* Layout */
  --nav-w:  72px;
  --side-w: 368px;
  --pnl-w:  340px;
  --hdr-h:  64px;

  /* Radii */
  --r1:  8px;  --r2: 12px;  --r3: 16px;
  --r4: 20px;  --r5: 24px;  --r6: 28px;
  --rf: 9999px;

  /* Motion — spring physics */
  --ease:   cubic-bezier(.4,0,.2,1);
  --spring: cubic-bezier(.34,1.56,.64,1);
  --bounce: cubic-bezier(.68,-.55,.27,1.55);
  --snap:   cubic-bezier(.23,1,.32,1);

  --t0: .10s;  --t1x: .18s;  --t2x: .25s;
  --t3x: .30s; --t4x: .40s;
}

/* ─── DARK MODE ───────────────────────────────────────────────── */
html[data-theme="dark"] {
  --bg:        #0B141A;
  --bg2:       #111B21;
  --card:      #1F2C33;
  --glass:     rgba(15,28,36,.92);
  --glass-dark:rgba(0,0,0,.55);
  --hover:     rgba(220,38,38,.07);
  --active:    rgba(220,38,38,.13);
  --overlay:   rgba(0,0,0,.72);

  --t1: #E9EDEF;
  --t2: #8696A0;
  --t3: #667781;
  --t4: #2A3942;

  --b1: rgba(134,150,160,.12);
  --b2: rgba(134,150,160,.22);

  --s0: 0 1px 3px rgba(0,0,0,.25);
  --s1: 0 2px 8px rgba(0,0,0,.30), 0 1px 2px rgba(0,0,0,.18);
  --s2: 0 4px 20px rgba(0,0,0,.36), 0 1px 4px rgba(0,0,0,.20);
  --s3: 0 8px 40px rgba(0,0,0,.42), 0 2px 8px rgba(0,0,0,.24);
  --s4: 0 16px 60px rgba(0,0,0,.50), 0 4px 12px rgba(0,0,0,.28);

  --recv-bg:  #1F2C33;
  --sent-bg:  linear-gradient(135deg,#7F1D1D,#991B1B);
  --sent-txt: #E9EDEF;
  --recv-txt: #E9EDEF;
}
html[data-theme="dark"] #messages-area        { background-color:#0B141A; background-image:none; }
html[data-theme="dark"] .sidebar              { background:#111B21; border-color:#1F2C33; }
html[data-theme="dark"] .wa-nav               { background:#111B21; border-color:#1F2C33; }
html[data-theme="dark"] .chat-header          { background:#1F2C33; border-color:rgba(134,150,160,.15); }
html[data-theme="dark"] .input-area           { background:#1F2C33; border-color:rgba(134,150,160,.12); }
html[data-theme="dark"] .input-box            { background:#2A3942; border-color:rgba(134,150,160,.15); }
html[data-theme="dark"] .input-box #message-input { color:#E9EDEF; }
html[data-theme="dark"] .input-box #message-input::placeholder { color:#8696A0; }
html[data-theme="dark"] .emoji-toggle         { color:#8696A0; }
html[data-theme="dark"] .sidebar-search-wrap  { background:#111B21; }
html[data-theme="dark"] #search-input         { background:#1F2C33; color:#E9EDEF; }
html[data-theme="dark"] .conv-item            { border-color:rgba(134,150,160,.08); }
html[data-theme="dark"] .conv-item:hover,
html[data-theme="dark"] .conv-item.active     { background:rgba(134,150,160,.06); }
html[data-theme="dark"] #modal                { background:rgba(17,27,33,.98); }
html[data-theme="dark"] .modal-header         { border-color:rgba(134,150,160,.15); }
html[data-theme="dark"] .settings-group       { background:rgba(31,44,51,.7); border-color:rgba(134,150,160,.12); }
html[data-theme="dark"] .settings-select      { background:#1F2C33; color:#E9EDEF; border-color:rgba(134,150,160,.3); }
html[data-theme="dark"] .mfg input,
html[data-theme="dark"] .mfg textarea,
html[data-theme="dark"] .mfg select           { background:#1F2C33; color:#E9EDEF; border-color:rgba(134,150,160,.25); }
html[data-theme="dark"] .ctx-menu             { background:rgba(17,27,33,.97); border-color:rgba(134,150,160,.15); }
html[data-theme="dark"] .msg-row.sent .msg-bubble { background:#005C4B; }
html[data-theme="dark"] .msg-row.recv .msg-bubble { background:#1F2C33; }
html[data-theme="dark"] .msg-text             { color:#E9EDEF; }
html[data-theme="dark"] .msg-time             { color:#8696a0; }
html[data-theme="dark"] .msg-row.sent .msg-time { color:#8696a0; }
html[data-theme="dark"] .ctx-item:hover       { background:rgba(134,150,160,.08); }
html[data-theme="dark"] .date-sep span        { background:rgba(31,44,51,.9); }
html[data-theme="dark"] .info-panel           { background:#111B21; }
html[data-theme="dark"] .panel-header         { background:#1F2C33; border-color:rgba(134,150,160,.15); }
html[data-theme="dark"] .auth-login-card       { background:rgba(17,24,39,.95); border-color:rgba(255,45,85,.12); }
html[data-theme="dark"] .auth-left            { background:linear-gradient(145deg,#7f0a1a,#5c0612); }
html[data-theme="dark"] .auth-heading         { color:#F9FAFB; }
html[data-theme="dark"] .auth-subheading      { color:#9CA3AF; }
html[data-theme="dark"] .phone-input-wrap,
html[data-theme="dark"] .field-wrap           { background:#1F2937; border-color:#374151; }
html[data-theme="dark"] .field-input          { color:#F9FAFB; }

/* ─── RESET ──────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }

html,body {
  height:100%; overflow:hidden;
  font-family:'Inter','Segoe UI',-apple-system,BlinkMacSystemFont,'SF Pro Display',Helvetica,Arial,sans-serif;
  font-size:14px; line-height:1.5;
  background:var(--bg); color:var(--t1);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

/* ─── SCROLLBAR ──────────────────────────────────────────────── */
::-webkit-scrollbar { width:4px; height:4px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb {
  background:rgba(0,0,0,.12); border-radius:var(--rf);
  transition:background .2s;
}
::-webkit-scrollbar-thumb:hover { background:var(--p); }

/* ─── GLOBAL UTILITY ─────────────────────────────────────────── */
.hidden { display:none !important; }
#cursor-glow,.scene-orb { display:none; }

/* Ripple effect */
.ripple-host { position:relative; overflow:hidden; }
.ripple {
  position:absolute; border-radius:50%;
  background:rgba(255,255,255,.35);
  transform:scale(0); animation:rippleOut .55s var(--ease) forwards;
  pointer-events:none;
}
@keyframes rippleOut {
  to { transform:scale(4); opacity:0; }
}

/* Skeleton loader */
.skeleton {
  background:linear-gradient(90deg,#e9edef 25%,#f5f6f6 50%,#e9edef 75%);
  background-size:200% 100%;
  animation:shimmer 1.4s infinite;
  border-radius:var(--r2);
}
@keyframes shimmer { to { background-position:-200% 0; } }

/* Scale-in for new elements */
.scale-in { animation:scaleIn .2s var(--spring) both; }
@keyframes scaleIn { from { opacity:0; transform:scale(.85); } to { opacity:1; transform:scale(1); } }

/* Page slide transition */
.slide-in-right { animation:slideInRight .25s var(--ease) both; }
@keyframes slideInRight { from { opacity:0; transform:translateX(20px); } to { opacity:1; transform:translateX(0); } }

/* ─── SELECTION ──────────────────────────────────────────────── */
::selection { background:var(--p-dim); color:var(--p-dark); }

/* ═══════════════════════════════════════════════════════════════
   AUTH SCREEN — Reference split layout
═══════════════════════════════════════════════════════════════ */
.auth-screen {
  position:fixed; inset:0; z-index:1000;
  display:flex; flex-direction:column; background:#ffffff;
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  overflow:hidden;
}
.auth-split {
  display:grid; grid-template-columns:1fr 1fr;
  flex:1 1 auto; width:100%; height:auto; min-height:0;
  animation:authReveal .7s cubic-bezier(.22,1,.36,1) both;
  isolation:isolate;
}
.auth-split > .auth-right { background:#ffffff; }
@keyframes authReveal {
  from { opacity:0; transform:translateY(16px) scale(.985); }
  to   { opacity:1; transform:translateY(0) scale(1); }
}

/* ── LEFT: Brand hero (deep red — not flat pink) ── */
.auth-left {
  position:relative; overflow:hidden;
  background:
    radial-gradient(ellipse 70% 55% at 92% 8%, rgba(255,255,255,.11), transparent 58%),
    radial-gradient(ellipse 50% 40% at 8% 92%, rgba(0,0,0,.12), transparent 55%),
    linear-gradient(155deg, #e8193a 0%, #d90429 38%, #b8002e 72%, #9d1738 100%);
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  padding:48px 56px;
  --auth-px:0px; --auth-py:0px;
}
.auth-left::after {
  content:''; position:absolute;
  bottom:-50px; left:-6%;
  width:112%; height:200px;
  background:
    radial-gradient(ellipse 75% 100% at 50% 100%, rgba(255,255,255,.07) 0%, transparent 68%);
  pointer-events:none; opacity:.75;
}
.auth-mesh {
  position:absolute; inset:0; opacity:.18; pointer-events:none; z-index:0;
  background-image:
    radial-gradient(circle at 20% 25%, rgba(255,255,255,.16) 0%, transparent 32%),
    radial-gradient(circle at 75% 70%, rgba(255,255,255,.1) 0%, transparent 28%),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.04) 0%, transparent 55%);
}

/* Left background decorations */
.auth-bg-deco {
  position:absolute; inset:0; pointer-events:none; z-index:1;
  overflow:hidden;
}
.auth-dot-grid {
  position:absolute; inset:0;
  background-image:radial-gradient(circle, rgba(255,255,255,.22) 1px, transparent 1px);
  background-size:28px 28px;
  opacity:.22;
  mask-image:radial-gradient(ellipse 85% 75% at 50% 45%, #000 20%, transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 85% 75% at 50% 45%, #000 20%, transparent 78%);
}
.auth-ring {
  position:absolute; border-radius:50%;
  border:1.5px solid rgba(255,255,255,.28);
}
.auth-ring-tr {
  width:420px; height:420px;
  top:-120px; right:-120px;
  border-color:rgba(255,255,255,.22);
}
.auth-ring-bl {
  width:280px; height:280px;
  bottom:-90px; left:-70px;
  border-color:rgba(255,255,255,.18);
}
.auth-ring-mr {
  width:180px; height:180px;
  right:-50px; top:38%;
  border-color:rgba(255,255,255,.2);
  border-width:1px;
}
.auth-ring-tl {
  width:120px; height:120px;
  top:6%; left:4%;
  border-color:rgba(255,255,255,.16);
  border-width:1px;
}
.auth-ring-mid {
  width:240px; height:240px;
  top:52%; left:58%;
  transform:translate(-50%,-50%);
  border-color:rgba(255,255,255,.1);
  border-width:1px;
  border-style:dashed;
}
.auth-arc {
  position:absolute; border-radius:50%;
  border:1.5px solid transparent;
}
.auth-arc-tr {
  width:200px; height:200px;
  top:-40px; right:18%;
  border-top-color:rgba(255,255,255,.24);
  border-right-color:rgba(255,255,255,.16);
  transform:rotate(18deg);
}
.auth-arc-bl {
  width:160px; height:160px;
  bottom:12%; left:6%;
  border-bottom-color:rgba(255,255,255,.2);
  border-left-color:rgba(255,255,255,.12);
  transform:rotate(-12deg);
}
.auth-bokeh {
  position:absolute; border-radius:50%; pointer-events:none;
  background:rgba(255,255,255,.18);
  filter:blur(14px);
}
.auth-bokeh-1 { width:120px; height:120px; top:14%; right:22%; opacity:.4; }
.auth-bokeh-2 { width:80px; height:80px; top:55%; left:10%; opacity:.32; }
.auth-bokeh-3 { width:60px; height:60px; bottom:22%; right:16%; opacity:.35; }
.auth-bokeh-4 { width:44px; height:44px; top:32%; left:38%; opacity:.28; }
.auth-bokeh-5 { width:90px; height:90px; bottom:40%; left:26%; opacity:.25; }
.auth-flow-lines {
  position:absolute; inset:0; width:100%; height:100%;
  opacity:.85; pointer-events:none;
}
.auth-float-icons {
  position:absolute; inset:0; pointer-events:none; z-index:2;
  transform:translate(calc(var(--auth-px) * .65), calc(var(--auth-py) * .65));
  transition:transform .2s ease-out;
}
.auth-float-icon {
  position:absolute;
  display:flex; align-items:center; justify-content:center;
  border-radius:13px;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.24);
  color:#fff;
  box-shadow:0 6px 20px rgba(0,0,0,.1);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  animation:authFloatIcon 9s ease-in-out infinite;
}
.auth-float-icon i { font-size:14px; opacity:.92; }
.auth-float-halo {
  position:absolute; inset:-10px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.14);
  pointer-events:none;
}
.auth-float-icon-1 {
  width:42px; height:42px; top:10%; left:5%;
  animation-delay:0s;
}
.auth-float-icon-1 i { font-size:15px; }
.auth-float-icon-2 {
  width:34px; height:34px; top:21%; left:3%;
  border-radius:11px; animation-delay:-2.5s;
}
.auth-float-icon-2 i { font-size:12px; }
.auth-float-icon-2 .auth-float-halo { inset:-8px; }
.auth-float-icon-3 {
  width:38px; height:38px; top:36%; right:4%;
  animation-delay:-4s;
}
.auth-float-icon-4 {
  width:36px; height:36px; bottom:20%; right:7%;
  border-radius:12px; animation-delay:-1.5s;
}
@keyframes authFloatIcon {
  0%,100% { transform:translate(0,0) rotate(0deg); }
  50% { transform:translate(-4px,-10px) rotate(-2deg); }
}
.auth-glow-sphere {
  position:absolute; border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.2) 0%, rgba(255,255,255,.04) 45%, transparent 72%);
  filter:blur(1px);
  animation:authOrbFloat 10s ease-in-out infinite;
  opacity:.75;
}
.auth-glow-1 { width:80px; height:80px; top:8%; right:20%; animation-delay:0s; }
.auth-glow-2 { width:56px; height:56px; bottom:20%; right:12%; animation-delay:-2s; }
.auth-glow-3 { width:44px; height:44px; top:54%; left:8%; animation-delay:-4s; }
.auth-glow-4 { width:32px; height:32px; bottom:36%; left:26%; animation-delay:-1s; opacity:.6; }
.auth-curve-lines {
  position:absolute; left:0; right:0; bottom:0;
  width:100%; height:52%; opacity:.95;
}

/* Floating orbs */
.auth-orb {
  position:absolute; border-radius:50%; pointer-events:none;
  filter:blur(1px);
  animation:authOrbFloat 8s ease-in-out infinite;
}
.auth-orb-1 {
  width:120px; height:120px; top:8%; right:12%;
  background:radial-gradient(circle,rgba(255,255,255,.22) 0%,transparent 70%);
  animation-delay:0s;
}
.auth-orb-2 {
  width:80px; height:80px; bottom:28%; left:8%;
  background:radial-gradient(circle,rgba(255,255,255,.16) 0%,transparent 70%);
  animation-delay:-3s;
}
.auth-orb-3 {
  width:60px; height:60px; top:42%; left:55%;
  background:radial-gradient(circle,rgba(255,255,255,.15) 0%,transparent 70%);
  animation-delay:-5s;
}
@keyframes authOrbFloat {
  0%,100% { transform:translate(0,0) scale(1); }
  33% { transform:translate(12px,-18px) scale(1.06); }
  66% { transform:translate(-8px,10px) scale(.96); }
}

/* Glowing particles */
.auth-particles {
  position:absolute; inset:0; pointer-events:none; z-index:2;
  opacity:.9;
}
.auth-particle {
  position:absolute; width:4px; height:4px; border-radius:50%;
  background:rgba(255,255,255,.65);
  box-shadow:0 0 6px rgba(255,255,255,.45);
  animation:particleDrift 6s ease-in-out infinite;
}
.auth-particle.auth-dot-lg {
  width:7px; height:7px; opacity:.5;
  box-shadow:0 0 10px rgba(255,255,255,.35);
}
.auth-particle.auth-dot-sm {
  width:2px; height:2px; opacity:.45;
}
.auth-particle:nth-child(1)  { top:12%; left:18%; animation-delay:0s; }
.auth-particle:nth-child(2)  { top:25%; left:72%; animation-delay:-1s; width:3px; height:3px; }
.auth-particle:nth-child(3)  { top:38%; left:45%; animation-delay:-2s; }
.auth-particle:nth-child(4)  { top:55%; left:82%; animation-delay:-3s; width:5px; height:5px; }
.auth-particle:nth-child(5)  { top:68%; left:22%; animation-delay:-4s; }
.auth-particle:nth-child(6)  { top:78%; left:58%; animation-delay:-1.5s; width:3px; height:3px; }
.auth-particle:nth-child(7)  { top:18%; left:88%; animation-delay:-2.5s; }
.auth-particle:nth-child(8)  { top:48%; left:12%; animation-delay:-3.5s; width:5px; height:5px; }
.auth-particle:nth-child(9)  { top:62%; left:38%; animation-delay:-0.5s; }
.auth-particle:nth-child(10) { top:32%; left:62%; animation-delay:-4.5s; width:3px; height:3px; }
.auth-particle:nth-child(11) { top:85%; left:75%; animation-delay:-2s; }
.auth-particle:nth-child(12) { top:8%;  left:52%; animation-delay:-3s; width:6px; height:6px; opacity:.7; }
.auth-particle:nth-child(13) { top:44%; left:78%; animation-delay:-1.2s; width:3px; height:3px; }
.auth-particle:nth-child(14) { top:72%; left:42%; animation-delay:-2.8s; }
.auth-particle:nth-child(15) { top:15%; left:35%; animation-delay:-0.8s; width:5px; height:5px; }
.auth-particle:nth-child(16) { top:58%; left:68%; animation-delay:-3.2s; width:3px; height:3px; }
.auth-particle:nth-child(17) { top:82%; left:15%; animation-delay:-1.8s; }
.auth-particle:nth-child(18) { top:28%; left:8%;  animation-delay:-4.2s; width:4px; height:4px; }
.auth-particle:nth-child(19) { top:66%; left:88%; animation-delay:-2.2s; width:3px; height:3px; }
.auth-particle:nth-child(20) { top:92%; left:55%; animation-delay:-0.3s; width:5px; height:5px; opacity:.5; }
.auth-particle:nth-child(21) { top:10%; left:62%; animation-delay:-1.1s; }
.auth-particle:nth-child(22) { top:70%; left:48%; animation-delay:-2.4s; }
.auth-particle:nth-child(23) { top:35%; left:25%; animation-delay:-0.6s; }
.auth-particle:nth-child(24) { top:50%; left:85%; animation-delay:-3.1s; }
.auth-particle:nth-child(25) { top:78%; left:32%; animation-delay:-1.9s; }
.auth-particle:nth-child(26) { top:22%; left:92%; animation-delay:-2.6s; }
.auth-particle:nth-child(27) { top:88%; left:68%; animation-delay:-0.9s; }
@keyframes particleDrift {
  0%,100% { transform:translateY(0) scale(1); opacity:.55; }
  50% { transform:translateY(-14px) scale(1.15); opacity:.95; }
}

/* Decorative glass bubbles */
.auth-deco-bubbles {
  position:absolute; inset:0; pointer-events:none; z-index:1;
  transform:translate(calc(var(--auth-px) * .5), calc(var(--auth-py) * .5));
  transition:transform .2s ease-out;
}
.auth-deco-bubble {
  position:absolute;
  border-radius:20px;
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.22);
  box-shadow:0 6px 20px rgba(0,0,0,.08);
  opacity:.9;
}
.auth-deco-bubble-1 { width:48px; height:48px; top:12%; right:14%; animation:bubbleFloat1 7s ease-in-out infinite; }
.auth-deco-bubble-2 { width:36px; height:36px; top:38%; right:8%; animation:bubbleFloat2 8s ease-in-out infinite; animation-delay:-2s; }
.auth-deco-bubble-3 { width:42px; height:42px; bottom:28%; left:10%; animation:bubbleFloat3 6.5s ease-in-out infinite; animation-delay:-4s; }
.auth-deco-bubble-4 { width:30px; height:30px; top:22%; left:18%; animation:bubbleFloat1 9s ease-in-out infinite; animation-delay:-1s; }
.auth-deco-bubble-5 { width:26px; height:26px; bottom:15%; right:22%; border-radius:50%; animation:bubbleFloat2 7s ease-in-out infinite; animation-delay:-3s; }
.auth-deco-bubble-6 { width:34px; height:34px; top:68%; right:18%; border-radius:16px; animation:bubbleFloat3 8.5s ease-in-out infinite; animation-delay:-5s; opacity:.8; }
@keyframes bubbleFloat1 {
  0%,100% { transform:translate(0,0) rotate(-1deg); }
  50% { transform:translate(-8px,-14px) rotate(1deg); }
}
@keyframes bubbleFloat2 {
  0%,100% { transform:translate(0,0) rotate(1deg); }
  50% { transform:translate(10px,-10px) rotate(-1deg); }
}
@keyframes bubbleFloat3 {
  0%,100% { transform:translate(0,0); }
  50% { transform:translate(6px,-12px); }
}

/* Bottom wave */
.auth-wave {
  position:absolute; bottom:0; left:0; width:100%; height:88px;
  pointer-events:none; z-index:2;
}
.auth-feature:first-child { margin-top:0; }

.auth-left-content {
  position:relative; z-index:3;
  display:flex; flex-direction:column;
  align-items:flex-start; gap:0;
  max-width:380px; width:100%;
  animation:authContentIn .8s cubic-bezier(.22,1,.36,1) .15s both;
  transform:translate(calc(var(--auth-px) * .35), calc(var(--auth-py) * .35));
  transition:transform .2s ease-out;
}
@keyframes authContentIn {
  from { opacity:0; transform:translateX(-24px); }
  to   { opacity:1; transform:translateX(0); }
}

.auth-brand { display:flex; flex-direction:column; gap:0; }
.auth-brand-icon,
.auth-logo-box {
  width:64px; height:64px; border-radius:20px;
  background:transparent;
  display:flex; align-items:center; justify-content:center;
  box-shadow:none;
  overflow:hidden;
}
.auth-logo-img {
  width:64px; height:64px; border-radius:16px;
  object-fit:cover; display:block;
}
.auth-brand-name {
  font-size:42px; font-weight:800; color:#fff;
  letter-spacing:-1.5px; line-height:1.05;
  margin-top:18px;
  text-shadow:0 2px 16px rgba(0,0,0,.1);
}
.auth-brand-tagline {
  font-size:14px; color:rgba(255,255,255,.92);
  font-weight:400; line-height:1.55;
  margin-top:8px; max-width:360px;
}

.auth-credit {
  display:inline-flex; align-items:center; gap:7px;
  margin-top:14px; padding:6px 12px 6px 6px;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.22);
  border-radius:999px;
  backdrop-filter:blur(6px);
}
.auth-credit-avatar {
  width:24px; height:24px; border-radius:50%;
  object-fit:cover; flex-shrink:0;
  border:1.5px solid rgba(255,255,255,.8);
}
.auth-credit-text {
  font-size:12.5px; font-weight:600; color:rgba(255,255,255,.95);
  letter-spacing:.1px;
}
.auth-credit-tick { width:14px; height:14px; flex-shrink:0; }

/* Parallax layers */
.auth-parallax-layer {
  position:absolute; inset:-20px; pointer-events:none; z-index:0;
  background:radial-gradient(ellipse 50% 40% at 70% 30%,rgba(255,255,255,.1) 0%,transparent 60%);
  transform:translate(calc(var(--auth-px) * .5), calc(var(--auth-py) * .5));
  transition:transform .2s ease-out;
}
.auth-toast {
  position:fixed; bottom:32px; left:50%; transform:translateX(-50%) translateY(20px);
  padding:12px 22px; border-radius:14px;
  background:#111827; color:#fff; font-size:13px; font-weight:600;
  box-shadow:0 12px 40px rgba(0,0,0,.2); z-index:10001;
  opacity:0; transition:opacity .3s, transform .3s cubic-bezier(.22,1,.36,1);
  pointer-events:none; font-family:'Inter',system-ui,sans-serif;
}
.auth-toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

/* Feature cards — white pills on red */
.auth-features { display:flex; flex-direction:column; gap:0; width:100%; margin-top:22px; }
.auth-feature {
  display:flex; align-items:center; gap:14px;
  margin-top:16px;
  padding:0;
  background:transparent;
  border:none; box-shadow:none;
  animation:featSlide .55s cubic-bezier(.22,1,.36,1) both;
  cursor:default;
}
.auth-feature:nth-child(1){animation-delay:.2s}
.auth-feature:nth-child(2){animation-delay:.3s}
.auth-feature:nth-child(3){animation-delay:.4s}
.auth-feature:nth-child(4){animation-delay:.5s}
@keyframes featSlide {
  from { opacity:0; transform:translateX(-16px); }
  to   { opacity:1; transform:translateX(0); }
}
.auth-feature-icon {
  width:48px; height:48px; border-radius:14px; flex-shrink:0;
  background:rgba(255,255,255,.95);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 18px rgba(0,0,0,.08);
}
.auth-feature-icon i { font-size:17px; color:var(--primary); }
.auth-feature-text { display:flex; flex-direction:column; gap:2px; }
.feature-title { font-size:14px; font-weight:700; color:#fff; letter-spacing:-.15px; }
.feature-sub { font-size:12px; color:rgba(255,255,255,.86); line-height:1.4; }

/* ── RIGHT: Login card (clean white) ── */
.auth-right {
  background:#ffffff;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  padding:32px 28px; overflow-y:auto; position:relative;
}
.auth-right::before {
  content:''; position:absolute;
  width:280px; height:280px;
  background:radial-gradient(circle, rgba(255,45,85,.04), transparent 72%);
  filter:blur(48px); pointer-events:none;
  top:24%; right:14%; z-index:0;
}
.auth-right-deco {
  position:absolute; inset:0; pointer-events:none; z-index:0; overflow:hidden;
}
.auth-right-curves {
  position:absolute; inset:0; width:100%; height:100%; opacity:.45;
}
.auth-rdot {
  position:absolute; border-radius:50%;
  background:rgba(255,45,85,.07);
}
.auth-rdot-1 { width:5px; height:5px; top:14%; left:10%; }
.auth-rdot-2 { width:4px; height:4px; top:22%; left:28%; opacity:.7; }
.auth-rdot-3 { width:6px; height:6px; top:8%;  right:18%; opacity:.6; }
.auth-rdot-4 { width:4px; height:4px; bottom:22%; left:14%; opacity:.8; }
.auth-rdot-5 { width:5px; height:5px; bottom:30%; right:12%; opacity:.65; }
.auth-rdot-6 { width:3px; height:3px; top:42%; right:8%;  opacity:.5; }
.auth-card-glow {
  position:absolute; width:min(360px,80%); height:min(420px,70%);
  top:50%; left:50%; transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(255,45,85,.035) 0%, transparent 72%);
  filter:blur(44px); pointer-events:none; z-index:0;
}

.auth-mobile-logo {
  display:none; align-items:center; gap:12px;
  margin-bottom:28px; position:relative; z-index:1;
}
.auth-mobile-icon {
  width:44px; height:44px; border-radius:14px;
  object-fit:contain;
  box-shadow:0 4px 16px rgba(255,45,85,.2);
}
.auth-mobile-logo span {
  font-size:26px; font-weight:900; color:#111827;
  letter-spacing:-1px;
}

.auth-right-stack {
  position:relative; z-index:2;
  width:100%; max-width:400px;
  display:flex; flex-direction:column; gap:0;
}

.auth-login-card {
  position:relative; z-index:2;
  width:100%;
  background:var(--white);
  border:1px solid rgba(241,241,241,.8);
  border-radius:24px;
  padding:28px 30px 24px;
  box-shadow:
    0 14px 36px rgba(17,24,39,.07),
    0 4px 12px rgba(0,0,0,.04);
  animation:cardPop .5s cubic-bezier(.22,1,.36,1) .1s both;
}
@keyframes cardPop {
  from { opacity:0; transform:translateY(20px) scale(.96); }
  to   { opacity:1; transform:translateY(0) scale(1); }
}

/* Tab pills — above card */
.auth-method-tabs {
  display:flex; gap:8px;
  margin-bottom:14px;
  width:100%;
  background:transparent;
  padding:0;
}
.auth-tab-btn {
  flex:1;
  padding:10px 14px;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--white);
  color:var(--text-light); font-weight:600; font-size:13px;
  cursor:pointer; font-family:inherit;
  display:flex; align-items:center; justify-content:center; gap:6px;
  transition:all .25s cubic-bezier(.22,1,.36,1);
  box-shadow:0 1px 4px rgba(0,0,0,.03);
}
.auth-tab-btn i { font-size:13px; color:inherit; }
.auth-tab-btn.active {
  color:var(--primary);
  background:#fff;
  border-color:rgba(255,45,85,.22);
  font-weight:700;
  box-shadow:0 4px 14px rgba(255,45,85,.08);
}
.auth-tab-btn:not(.active):hover { color:var(--text); border-color:#ececec; }

.auth-panel {
  display:none; width:100%;
  animation:panelFade .35s cubic-bezier(.22,1,.36,1) both;
}
@keyframes panelFade {
  from { opacity:0; transform:translateY(8px); }
  to   { opacity:1; transform:translateY(0); }
}
.auth-panel.active { display:block; }
.auth-panel-header { margin-bottom:18px; }
.auth-heading {
  font-size:28px; font-weight:800; color:var(--text);
  letter-spacing:-.6px; margin-bottom:4px; line-height:1.2;
}
.auth-subheading { font-size:14px; color:var(--text-light); font-weight:400; line-height:1.45; }
.auth-form-body { display:flex; flex-direction:column; }
.auth-form-center { align-items:center; }
.field-group { margin-bottom:16px; position:relative; }

/* Phone input */
.phone-input-wrap {
  display:flex; align-items:stretch;
  height:52px;
  border:1px solid #ececec;
  border-radius:14px; overflow:visible;
  background:var(--white); position:relative;
  margin-top:4px;
  transition:border-color .25s, box-shadow .25s;
}
.phone-input-wrap:focus-within {
  border-color:var(--primary);
  box-shadow:0 0 0 4px rgba(255,45,85,.08);
}
.country-selector {
  display:flex; align-items:center; gap:5px;
  padding:0 14px; cursor:pointer; flex-shrink:0;
  border-right:1px solid #ececec;
  min-width:108px; user-select:none;
  transition:background .2s;
  border-radius:14px 0 0 14px;
}
.country-selector:hover { background:var(--light-red); }
.country-flag { font-size:15px; line-height:1; }
.country-iso { font-size:13px; font-weight:700; color:var(--text); letter-spacing:.2px; }
.country-code { font-size:13px; font-weight:600; color:var(--text-light); }
.country-arrow { font-size:10px; color:var(--text-light); margin-left:2px; transition:transform .3s cubic-bezier(.34,1.56,.64,1); }
.country-selector.open .country-arrow { transform:rotate(180deg); }
.country-dropdown {
  position:absolute; top:calc(100% + 8px); left:0; right:0; z-index:600;
  background:#FFFFFF; border:1px solid rgba(255,45,85,.1);
  border-radius:18px;
  box-shadow:0 16px 48px rgba(17,24,39,.12), 0 4px 12px rgba(255,45,85,.06);
  overflow:hidden;
  animation:dropIn .22s cubic-bezier(.22,1,.36,1);
}
@keyframes dropIn {
  from { opacity:0; transform:translateY(-8px) scale(.97); }
  to   { opacity:1; transform:translateY(0) scale(1); }
}
.country-search-wrap { padding:12px; border-bottom:1px solid #F3F4F6; }
.country-search-input {
  width:100%; padding:10px 14px;
  border:1.5px solid #E5E7EB; border-radius:12px;
  font-size:13px; outline:none; font-family:inherit;
  transition:border-color .2s, box-shadow .2s;
  background:#FAFAFA;
}
.country-search-input:focus {
  border-color:#FF2D55;
  box-shadow:0 0 0 3px rgba(255,45,85,.1);
  background:#FFFFFF;
}
.country-list { max-height:240px; overflow-y:auto; }
.country-item {
  display:flex; align-items:center; gap:11px;
  padding:11px 16px; cursor:pointer; font-size:13px;
  transition:background .15s;
}
.country-item:hover { background:#FFE5EA; }
.field-input {
  flex:1; padding:0 16px; border:none; outline:none;
  font-size:15px; font-weight:500; background:transparent;
  color:var(--text); font-family:inherit;
}
.phone-field { font-size:15px; font-weight:500; letter-spacing:.15px; }
.form-error { font-size:12px; color:#EF4444; margin-top:8px; padding:0 2px; min-height:18px; }

/* Primary CTA button */
.auth-submit-btn {
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%; height:44px; margin-top:14px;
  background:linear-gradient(135deg, #ff4d6d, #ff003c);
  color:var(--white); border:none; border-radius:12px;
  font-size:14px; font-weight:700; cursor:pointer; font-family:inherit;
  box-shadow:0 6px 16px rgba(255,45,85,.3);
  letter-spacing:.03px;
  transition:transform .25s, box-shadow .25s;
  position:relative; overflow:hidden;
}
.auth-submit-btn:hover {
  transform:translateY(-2px);
  box-shadow:0 14px 32px rgba(255,45,85,.38);
}
.auth-submit-btn:active { transform:scale(.98) translateY(0); }
.auth-submit-btn.loading { opacity:.7; pointer-events:none; }
.btn-arrow { font-size:16px; }

.otp-whatsapp-hint {
  display:flex; align-items:center; justify-content:center; gap:6px;
  margin-top:12px; font-size:12px; color:var(--text-light); text-align:center;
}
.otp-whatsapp-hint i { color:var(--primary); font-size:14px; }

.whatsapp-entry{width:calc(100% - 24px);margin:8px 12px 10px;padding:10px 12px;border:1px solid rgba(37,211,102,.24);border-radius:12px;background:rgba(37,211,102,.08);display:flex;align-items:center;gap:10px;text-align:left;color:var(--text1);cursor:pointer;transition:transform .15s,background .15s}
.whatsapp-entry:hover{background:rgba(37,211,102,.14);transform:translateY(-1px)}
.whatsapp-entry-icon{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:#25D366;color:#fff;font-size:17px;flex:none}
.whatsapp-entry span:nth-child(2){display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}.whatsapp-entry b{font-size:13px}.whatsapp-entry small{font-size:10.5px;color:var(--text3)}.whatsapp-entry>.fa-chevron-right{font-size:11px;color:var(--text3)}
.channel-switcher{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin:10px 12px 8px;padding:4px;border:1px solid rgba(11,20,26,.08);border-radius:14px;background:rgba(11,20,26,.035)}
.channel-tab{min-width:0;border:0;border-radius:10px;padding:9px 8px;background:transparent;color:var(--text3);display:flex;align-items:center;justify-content:center;gap:7px;font:600 12px/1 inherit;cursor:pointer;transition:background .18s,color .18s,transform .18s}
.channel-tab img{width:20px;height:20px;object-fit:contain;border-radius:50%}.channel-tab>span{display:flex;flex-direction:column;align-items:flex-start;gap:2px;line-height:1}.channel-tab small{font-size:9px;font-weight:500;max-width:90px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text3)}.channel-tab:hover{transform:translateY(-1px);color:var(--text1)}
.channel-tab.active{background:var(--surface);color:var(--text1);box-shadow:0 3px 12px rgba(11,20,26,.10)}
.channel-tab[data-channel="whatsapp"].active{color:#128c4a}.channel-tab[data-channel="whatsapp"] img{border-radius:50%}
.channel-empty{text-align:center;padding:34px 22px;color:var(--text3);display:flex;flex-direction:column;align-items:center;gap:8px}.channel-empty img{width:56px;height:56px;border-radius:50%;margin-bottom:4px}.channel-empty small{font-size:11px;line-height:1.45;max-width:220px}.channel-empty .btn-primary{margin-top:8px;padding:9px 16px;border-radius:10px;border:0;cursor:pointer}
.auth-qr-link-wrap {
  text-align:center; margin-top:12px;
  padding-top:0; border-top:none;
}
.auth-qr-link {
  color:var(--primary); font-size:13px; font-weight:700;
  text-decoration:none; display:inline-flex; align-items:center; gap:6px;
  transition:color .2s, transform .2s;
}
.auth-qr-link:hover { color:#e60039; transform:translateY(-1px); }
.auth-qr-back-wrap { margin-top:18px; text-align:center; }

/* QR panel */
.qr-canvas-wrap {
  background:#FFFFFF; border-radius:20px; padding:20px;
  display:inline-block;
  box-shadow:0 8px 32px rgba(17,24,39,.08), 0 0 0 1px rgba(255,45,85,.06);
}
.qr-status-msg {
  margin-top:16px; font-size:13px; color:#6B7280;
  text-align:center; min-height:36px;
}
.qr-progress {
  width:200px; height:4px; background:#FFE5EA;
  border-radius:4px; overflow:hidden; margin-top:8px;
}
.qr-progress-bar {
  height:100%; background:linear-gradient(90deg,#FF2D55,#FF4D6D);
  width:100%; transition:width 1s linear; border-radius:4px;
}
.qr-refresh-btn { margin-top:16px; display:none; }

/* OTP boxes */
.otp-boxes { display:flex; gap:10px; justify-content:center; margin:22px 0; }
.otp-box {
  width:50px; height:58px; border-radius:14px;
  border:1.5px solid #E5E7EB; text-align:center;
  font-size:24px; font-weight:800; color:#111827;
  outline:none; background:#FAFAFA; font-family:inherit;
  transition:border-color .25s, transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s, background .25s;
}
.otp-box:focus {
  border-color:#FF2D55;
  background:#FFFFFF;
  box-shadow:0 0 0 4px rgba(255,45,85,.1);
  transform:scale(1.06);
}
.otp-box.filled { border-color:#FF2D55; background:#FFE5EA; }
.otp-box.shake { animation:shake .4s var(--ease); }
@keyframes shake {
  0%,100%{transform:translateX(0)}
  20%{transform:translateX(-6px)}
  40%{transform:translateX(6px)}
  60%{transform:translateX(-4px)}
  80%{transform:translateX(4px)}
}
.otp-footer {
  display:flex; align-items:center; justify-content:center;
  gap:8px; margin-top:16px; font-size:13px;
}
.resend-timer { color:#6B7280; }
.resend-btn {
  background:none; border:none; color:#FF2D55;
  font-size:13px; font-weight:700; cursor:pointer; font-family:inherit;
  padding:0; transition:color .2s;
}
.resend-btn:hover { color:#d90429; }
.otp-divider { color:#D1D5DB; }
.change-number-link {
  color:#FF2D55; font-size:13px; font-weight:700; text-decoration:none;
  transition:color .2s;
}
.change-number-link:hover { color:#d90429; }

/* Name step field */
.field-wrap {
  display:flex; align-items:center;
  border:1.5px solid #E5E7EB; border-radius:16px;
  background:#FAFAFA; overflow:hidden;
  transition:border-color .25s, box-shadow .25s, background .25s;
}
.field-wrap:focus-within {
  border-color:#FF2D55; background:#FFFFFF;
  box-shadow:0 0 0 4px rgba(255,45,85,.1);
}
.field-icon {
  padding:0 14px; color:#9CA3AF; font-size:15px;
  border-right:1.5px solid #E5E7EB;
}
/* Message reactions — white rounded pill (WhatsApp style) */
.msg-reactions { display:flex; flex-wrap:wrap; gap:4px; margin-top:-6px; margin-bottom:2px; padding-left:4px; position:relative; z-index:2; }
.msg-row.sent .msg-reactions { justify-content:flex-end; padding-right:4px; }
.reaction-chip { display:inline-flex; align-items:center; gap:3px; background:#fff; border:1px solid rgba(0,0,0,.08); border-radius:14px; padding:2px 8px; font-size:13px; line-height:1.4; box-shadow:0 1px 3px rgba(0,0,0,.12); cursor:pointer; }
.reaction-chip .reaction-cnt { font-size:11px; font-weight:600; color:var(--t2,#667781); }
.reaction-chip.mine { background:rgba(220,38,38,.16); border-color:rgba(220,38,38,.4); }
html[data-theme="dark"] .reaction-chip { background:#233138; border-color:rgba(255,255,255,.1); }
html[data-theme="dark"] .reaction-chip .reaction-cnt { color:#aebac1; }

.confirm-overlay { position:fixed; inset:0; z-index:10000; background:rgba(11,20,26,.55); backdrop-filter:blur(3px); display:flex; align-items:center; justify-content:center; padding:20px; opacity:0; transition:opacity .18s; }
.confirm-overlay.show { opacity:1; }
.confirm-box { background:var(--card,#fff); border-radius:18px; padding:24px 22px; width:100%; max-width:360px; box-shadow:0 24px 60px rgba(0,0,0,.3); transform:scale(.94); transition:transform .18s; }
.confirm-overlay.show .confirm-box { transform:scale(1); }
.confirm-title { font-size:17px; font-weight:700; margin-bottom:6px; color:var(--t1,#111b21); }
.confirm-msg { font-size:14px; line-height:1.5; color:var(--t2,#667781); }
.confirm-actions { display:flex; gap:10px; margin-top:20px; }
.confirm-btn { flex:1; padding:11px; border-radius:11px; border:none; font-size:14px; font-weight:600; cursor:pointer; }
.confirm-btn.cancel { background:var(--bg,#f0f2f5); color:var(--t1,#111b21); }
.confirm-btn.ok { background:var(--p,#DC2626); color:#fff; }
.confirm-btn.ok.danger { background:#EF4444; }
.confirm-btn:hover { filter:brightness(.96); }
html[data-theme="dark"] .confirm-box { background:#1f2c33; } html[data-theme="dark"] .confirm-title { color:#E9EDEF; }
html[data-theme="dark"] .confirm-btn.cancel { background:#2a3942; color:#E9EDEF; }
.otp-method-row { display:flex; gap:10px; margin:4px 0 12px; }
.otp-method { flex:1; padding:10px; border:1.6px solid var(--b1,#e7ebee); border-radius:10px; background:transparent; color:var(--t2,#667781); font-size:14px; font-weight:600; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:7px; transition:.15s; }
.otp-method i { font-size:16px; }
.otp-method.active { border-color:var(--p,#DC2626); background:rgba(220,38,38,.1); color:var(--p-dark,#B91C1C); }

/* Method cards (WhatsApp / SMS) */
.otp-method-label { font-size:12px; font-weight:600; color:#667781; margin:14px 0 8px; text-transform:uppercase; letter-spacing:.5px; }
.otp-method-cards { display:grid !important; grid-template-columns:1fr 1fr !important; gap:10px; margin-bottom:14px; }
.method-card {
  display:flex; align-items:center; gap:8px; padding:14px 10px;
  border:2px solid #E5E7EB; border-radius:14px; background:#fff;
  cursor:pointer; transition:all .2s ease; position:relative; overflow:hidden;
}
.method-card:hover { border-color:#d1d5db; transform:translateY(-1px); box-shadow:0 4px 12px rgba(0,0,0,.06); }
.method-card.active { border-color:#DC2626; background:rgba(220,38,38,.04); }
.method-icon {
  width:36px; height:36px; border-radius:11px; display:flex; align-items:center; justify-content:center;
  font-size:16px; flex-shrink:0; transition:transform .2s;
}
.method-icon.whatsapp { background:#dcf8c6; color:#25D366; }
.method-icon.sms { background:#e3f2fd; color:#1976D2; }
.method-card:hover .method-icon { transform:scale(1.05); }
.method-content { flex:1; min-width:0; }
.method-title { font-size:13px; font-weight:700; color:#111B21; margin:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; letter-spacing:-.1px; }
.method-desc { font-size:11.5px; color:#667781; margin:2px 0 0; }
.method-check {
  width:24px; height:24px; border-radius:50%; border:2px solid #E5E7EB;
  display:flex; align-items:center; justify-content:center; font-size:11px;
  color:transparent; transition:all .2s; flex-shrink:0;
  /* Anchor to the title line, not the vertical center of the whole card —
     at narrow widths the description text wraps to 2-3 lines and a
     center-aligned check ends up sitting on top of the wrapped text. */
  align-self:flex-start; margin-top:1px;
}
.method-card.active .method-check { background:#25D366; border-color:#25D366; color:#fff; }

/* OTP Error block */
.otp-error-block {
  background: linear-gradient(135deg, #FEF2F2, #FFF1F2);
  border: 1px solid #FECACA;
  border-radius: 12px;
  padding: 20px;
  text-align: center;
  margin-top: 12px;
  animation: fadeIn .3s ease;
}
.otp-error-icon {
  width: 48px; height: 48px; border-radius: 50%;
  background: #FEE2E2; display: flex; align-items: center; justify-content: center;
  margin: 0 auto 12px; color: #DC2626; font-size: 20px;
}
.otp-error-block h4 { margin: 0 0 6px; color: #991B1B; font-size: 15px; font-weight: 600; }
.otp-error-block p { margin: 0 0 4px; color: #7F1D1D; font-size: 13px; line-height: 1.5; }

.otp-step { display:none; }
.otp-step.active { display:block; animation:stepReveal .35s cubic-bezier(.22,1,.36,1); }
@keyframes stepReveal {
  from { opacity:0; transform:translateX(12px); }
  to   { opacity:1; transform:translateX(0); }
}
.field-wrap .field-input { border:none; box-shadow:none; }

/* ═══════════════════════════════════════════════════════════════
   APP LAYOUT — Glass morphism foundation
═══════════════════════════════════════════════════════════════ */
.app {
  display:flex; height:100vh; width:100vw;
  background:var(--bg); overflow:hidden;
  position:relative;
}

/* ═══════════════════════════════════════════════════════════════
   LEFT NAV — Premium subtle glass
═══════════════════════════════════════════════════════════════ */
.wa-nav {
  width:var(--nav-w); height:100%;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border-right:1px solid var(--b1);
  box-shadow:4px 0 32px rgba(17,24,39,.04);
  display:flex; flex-direction:column; align-items:center;
  justify-content:space-between; padding:16px 0 22px;
  flex-shrink:0; z-index:20; position:relative;
}
.wa-nav::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(255,241,244,.4) 0%,transparent 40%);
  pointer-events:none;
}
.wa-nav-top,.wa-nav-bottom {
  display:flex; flex-direction:column; gap:4px; align-items:center;
}

/* Nav buttons */
.wa-nav-btn {
  width:48px; height:48px; border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  background:none; border:none; cursor:pointer;
  color:var(--t3); position:relative;
  transition:all .25s cubic-bezier(.22,1,.36,1);
}
.wa-nav-btn svg { width:22px; height:22px; }
.wa-nav-btn .phoneopia-chat-mark {
  width:30px; height:30px; object-fit:contain; border-radius:9px;
  filter:drop-shadow(0 4px 8px rgba(217,4,41,.22));
}
.wa-nav-btn:hover {
  color:var(--p); background:var(--p-light);
  transform:translateY(-1px);
}
.wa-nav-btn.active {
  color:var(--p);
  background:var(--p-light);
  box-shadow:0 2px 12px rgba(255,45,85,.12);
}
.wa-nav-btn.active::before {
  content:''; position:absolute; left:-8px; top:50%;
  transform:translateY(-50%);
  width:3px; height:24px;
  background:linear-gradient(180deg,var(--p),var(--secondary));
  border-radius:0 4px 4px 0;
}
/* Badge */
.wa-nav-btn .nav-badge {
  position:absolute; top:4px; right:4px;
  min-width:17px; height:17px; border-radius:var(--rf);
  background:var(--danger); color:#fff;
  font-size:10px; font-weight:800; line-height:17px;
  text-align:center; padding:0 4px;
  box-shadow:0 2px 6px rgba(239,68,68,.4);
  animation:badgeBounce .4s var(--bounce);
}
@keyframes badgeBounce { 0%{transform:scale(0)} 60%{transform:scale(1.2)} 100%{transform:scale(1)} }

/* Avatar */
.wa-nav-avatar {
  width:38px; height:38px; border-radius:50%; overflow:hidden; cursor:pointer;
  border:1px solid rgba(0,0,0,.1);
  transition:opacity .15s;
}
.wa-nav-avatar:hover { opacity:.85; }
.wa-nav-avatar img.avatar { width:100%; height:100%; object-fit:cover; object-position:center top; }
.avatar-wrap {
  width:46px; height:46px; border-radius:50%;
  overflow:hidden; flex-shrink:0; position:relative; background:#e5e7eb;
}
.avatar-wrap.xl { width:90px; height:90px; }
.avatar-wrap img.avatar {
  width:100%; height:100%; object-fit:cover; object-position:center top;
  border-radius:50%; display:block;
}
.avatar-placeholder {
  width:100%; height:100%; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:15px; font-weight:800; color:#fff;
}
#my-avatar-placeholder {
  background:linear-gradient(135deg,#7c3aed,#a855f7);
}

/* ═══════════════════════════════════════════════════════════════
   SIDEBAR
═══════════════════════════════════════════════════════════════ */
.sidebar {
  width:var(--side-w); height:100%; flex-shrink:0;
  background:rgba(255,255,255,.98);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-right:1px solid var(--b1);
  display:flex; flex-direction:column; overflow:hidden;
  position:relative; z-index:30; min-width:280px;
}

/* Sidebar header */
.sidebar-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:22px 20px 18px;
  border-bottom:1px solid var(--b1); flex-shrink:0;
}
.sidebar-brand {
  display:flex; align-items:center; gap:10px; min-width:0;
  cursor:pointer; border-radius:12px; padding:4px 6px; margin-left:-6px; transition:background .18s,transform .18s;
}
.sidebar-brand:hover,.sidebar-brand.active{background:rgba(217,4,41,.06);transform:translateY(-1px)}
.sidebar-logo {
  width:36px; height:36px; border-radius:10px; object-fit:contain; flex-shrink:0;
}
.sidebar-title {
  font-size:20px; font-weight:800; color:var(--t1);
  letter-spacing:-.6px;
  background:linear-gradient(135deg,#d90429,#b8002e);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text;
}
.sidebar-actions { display:flex; align-items:center; gap:2px; }
.header-whatsapp-tab{margin-left:auto;margin-right:6px;min-width:92px;padding:6px 9px;border:1px solid rgba(37,211,102,.24);border-radius:12px;background:rgba(37,211,102,.07);display:flex;align-items:center;gap:6px;text-align:left;cursor:pointer;transition:transform .18s,background .18s,box-shadow .18s}
.header-whatsapp-tab img{width:22px;height:22px;object-fit:contain;border-radius:50%;flex:none}.header-whatsapp-tab>span{display:flex;flex-direction:column;gap:2px;line-height:1}.header-whatsapp-tab b{font-size:11px;color:#128c4a}.header-whatsapp-tab small{font-size:8px;color:var(--text3);max-width:65px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.header-whatsapp-tab:hover{transform:translateY(-1px);background:rgba(37,211,102,.15);box-shadow:0 5px 14px rgba(37,211,102,.16)}.header-whatsapp-tab.active{background:#25D366;box-shadow:0 5px 16px rgba(37,211,102,.24)}.header-whatsapp-tab.active b,.header-whatsapp-tab.active small{color:#fff}
.icon-btn {
  width:38px; height:38px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:none; border:none; cursor:pointer; color:#54656F;
  transition:color .15s, background .15s;
}
.icon-btn svg { width:20px; height:20px; }
.icon-btn:hover { background:rgba(11,20,26,.08); color:#111B21; }
.icon-btn:active { background:rgba(11,20,26,.12); }

/* Search bar — premium glass */
.search-bar {
  display:flex; align-items:center; gap:10px;
  margin:14px 16px 0; padding:12px 16px;
  background:var(--surface); border-radius:14px;
  border:1.5px solid var(--b1);
  transition:all .25s cubic-bezier(.22,1,.36,1);
  flex-shrink:0; position:relative;
}
.search-bar:focus-within {
  background:#fff; border-color:rgba(255,45,85,.25);
  box-shadow:0 0 0 4px var(--p-dim);
}
.search-bar svg { width:16px; height:16px; color:var(--t3); flex-shrink:0; transition:color var(--t1x); }
.search-bar:focus-within svg { color:var(--p); }
#search-input {
  flex:1; border:none; outline:none; background:transparent;
  font-size:14px; color:var(--t1); font-family:inherit; font-weight:500;
}
#search-input::placeholder { color:var(--t3); font-weight:400; }
.search-clear {
  width:20px; height:20px; border-radius:50%; border:none;
  background:var(--t3); color:#fff; cursor:pointer;
  display:flex; align-items:center; justify-content:center; font-size:10px;
  transition:all var(--t1x) var(--spring);
}
.search-clear:hover { background:var(--danger); transform:scale(1.12); }

/* Filter chips */
.filter-chips {
  display:flex; gap:8px; padding:12px 14px 10px;
  overflow-x:auto; scrollbar-width:none; flex-shrink:0;
}
.filter-chips::-webkit-scrollbar { display:none; }
.chip {
  padding:7px 16px; border-radius:var(--rf);
  border:1.5px solid var(--b1); background:#fff;
  color:var(--t3); font-size:13px; font-weight:600;
  cursor:pointer; white-space:nowrap; flex-shrink:0;
  font-family:inherit;
  transition:all .25s cubic-bezier(.22,1,.36,1);
  box-shadow:var(--s0);
}
.chip:hover {
  border-color:rgba(217,4,41,.35); color:#b8002e;
  background:rgba(255,255,255,.9); transform:translateY(-1px);
}
.chip.active {
  background:linear-gradient(135deg,#e8193a,#d90429,#b8002e);
  border-color:transparent;
  color:#fff; font-weight:700;
  box-shadow:0 4px 16px rgba(184,0,46,.28);
}
.chip { position:relative; }
.chip-unread {
  position:absolute; top:-6px; right:-4px;
  min-width:18px; height:18px; padding:0 5px;
  border-radius:999px; background:#FF2D55; color:#fff;
  font-size:11px; font-weight:700; line-height:18px; text-align:center;
  box-shadow:0 2px 6px rgba(255,45,85,.35);
}
.recent-calls-section { border-top:1px solid var(--b1); flex-shrink:0; max-height:220px; overflow-y:auto; }
.recent-calls-heading { padding:12px 16px 6px; font-weight:700; font-size:15px; color:var(--t1); }
.recent-calls-empty, .recent-calls-loading { text-align:center; padding:28px 16px; color:var(--t3); }
.recent-calls-empty i { font-size:28px; opacity:.35; display:block; margin-bottom:8px; }
.recent-calls-empty small { font-size:12px; opacity:.8; }
.recent-call-row {
  display:flex; align-items:center; gap:10px; padding:10px 14px;
  cursor:pointer; transition:background .15s;
}
.recent-call-row:hover { background:var(--hover); }
.recent-call-info { flex:1; min-width:0; }
.recent-call-name { font-weight:600; font-size:14px; color:var(--t1); }
.recent-call-meta { font-size:12px; color:var(--t3); margin-top:2px; }
.recent-call-meta.missed { color:#EF4444; }
.recent-call-time { font-size:11px; color:var(--t3); flex-shrink:0; }
.recent-call-btn {
  width:34px; height:34px; border-radius:50%; border:none;
  background:rgba(255,45,85,.1); color:#FF2D55; cursor:pointer;
}
.recent-call-btn:hover { background:#FF2D55; color:#fff; }
.msg-img-missing {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:6px; min-width:180px; min-height:120px; padding:16px;
  background:var(--bg2); border-radius:12px; color:var(--t3); font-size:12px;
}
.msg-img-missing i { font-size:28px; opacity:.45; }
.sidebar-tabs { display:none; }

/* Filter empty state */
.filter-empty-state {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:60px 20px 40px; gap:12px; color:#667781; text-align:center;
  animation:fadeIn .2s ease;
}
.filter-empty-state i { font-size:36px; opacity:.45; }
.filter-empty-state div { font-size:14px; line-height:1.5; }

/* ─── Conversation List ──────────────────────────────────────── */
.conv-list { flex:1; overflow-y:auto; padding:6px 0; }

/* Cleaner conversation cards */
.conv-list { padding:10px 8px 14px; }
.conv-item {
  margin:3px 0; border-radius:14px; padding:11px 12px;
  min-height:72px; gap:12px; transition:background .18s ease, box-shadow .18s ease, transform .18s ease;
}
.conv-item::after { display:none; }
.conv-item:hover { background:rgba(255,45,85,.055); transform:translateX(2px); }
.conv-item.active { background:linear-gradient(100deg,rgba(255,241,244,.98),rgba(255,248,249,.98)); box-shadow:inset 3px 0 0 var(--p), 0 4px 14px rgba(17,24,39,.05); }
.conv-avatar-cell { width:50px; height:50px; }
.conv-name { font-size:14px; }
.conv-preview { font-size:12.5px; }
.welcome-graphic { position:relative; width:148px; height:148px; display:flex; align-items:center; justify-content:center; margin:0 auto 24px; }
.welcome-phoneopia-logo { position:relative; z-index:2; width:94px; height:94px; object-fit:contain; filter:drop-shadow(0 10px 16px rgba(217,4,41,.18)); }
.welcome-orbit { position:absolute; border:1px solid rgba(217,4,41,.16); border-radius:50%; }
.welcome-orbit-a { width:148px; height:148px; }
.welcome-orbit-b { width:116px; height:116px; border-color:rgba(255,45,85,.12); transform:rotate(28deg) scaleX(.72); }

.conv-item {
  display:grid;
  grid-template-columns:54px minmax(0,1fr);
  gap:14px;
  align-items:center;
  padding:12px 16px 12px 14px;
  min-height:78px;
  cursor:pointer; position:relative;
  transition:background var(--t0);
  box-sizing:border-box;
}
.conv-item::after {
  content:''; position:absolute; bottom:0; left:78px; right:0;
  height:1px; background:rgba(0,0,0,.04);
}
.conv-item:hover { background:var(--p-light); }
.conv-item.active {
  background:rgba(255,241,244,.85);
  box-shadow:inset 3px 0 0 var(--p);
}
.conv-item.active::before { content:none; }

/* Conv avatar — fixed left column */
.conv-avatar-cell {
  grid-column:1;
  width:54px; height:54px;
  border-radius:50%;
  /* No overflow:hidden — the image/fallback are already round, and clipping
     here was cutting off the online dot (made it look pushed inward). */
  position:relative;
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
}
.conv-avatar-cell .conv-av-img,
.conv-avatar-cell .avatar-wrap,
.conv-avatar-cell .avatar-wrap img.avatar {
  width:100%; height:100%;
  object-fit:cover; display:block;
  border-radius:50%;
}
.conv-avatar-cell .conv-av-fallback,
.conv-avatar-cell .avatar-placeholder {
  width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  font-size:14px; font-weight:700; color:#fff;
  border-radius:50%;
}
.conv-av-img { border:none; outline:none; background:#e8eaed; }
.conv-avatar-cell .conv-av-img { font-size:0; color:transparent; }
.conv-avatar-cell img[src=""], .conv-avatar-cell img:not([src]) { display:none!important; }
.conv-online-dot {
  position:absolute; bottom:0; right:0;
  width:13px; height:13px; border-radius:50%;
  background:var(--online); border:2.5px solid #fff;
  animation:onlinePulse 3s ease-in-out infinite;
  box-shadow:0 0 0 0 rgba(220,38,38,.4);
}
@keyframes onlinePulse {
  0%,100% { box-shadow:0 0 0 0 rgba(220,38,38,.4); }
  50%      { box-shadow:0 0 0 5px rgba(220,38,38,0); }
}

/* Conv info — fixed right column */
.conv-info { grid-column:2; min-width:0; overflow:hidden; }
.conv-top { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:4px; }
.conv-name {
  font-size:15px; font-weight:600; color:#111b21;
  display:inline-flex; align-items:center; gap:4px;
  min-width:0; flex:1;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.conv-verified { flex-shrink:0; }
.conv-pin { margin-left:2px; font-size:11px; opacity:.55; }
.conv-badges { display:flex; align-items:center; gap:4px; flex-shrink:0; }
.conv-empty { color:var(--text3); font-style:italic; }
.conv-time { font-size:12px; color:#667781; white-space:nowrap; flex-shrink:0; }
.conv-time.unread { color:#DC2626; font-weight:600; }
.conv-bottom { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.conv-preview { font-size:13px; color:#667781; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:1; min-width:0; }
.conv-preview.unread { color:#111b21; font-weight:400; }
.conv-muted { color:var(--t4); font-size:12px; }
.unread-badge {
  min-width:20px; height:20px; border-radius:var(--rf);
  background:linear-gradient(135deg,var(--p),var(--p-dark));
  color:#fff; font-size:11px; font-weight:800;
  line-height:20px; text-align:center; padding:0 6px; flex-shrink:0;
  box-shadow:0 2px 8px var(--p-glow);
  animation:badgeBounce .3s var(--bounce);
}

/* Skeleton */
.list-loading { padding:8px 0; }
.skeleton-item { display:flex; gap:13px; padding:13px 16px; align-items:center; }
.skeleton-item::before {
  content:''; width:52px; height:52px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(90deg,#f0f2f8 25%,#e6e9f2 50%,#f0f2f8 75%);
  background-size:200% 100%; animation:shimmer 1.6s ease-in-out infinite;
}
.skeleton-item::after {
  content:''; flex:1; height:44px; border-radius:var(--r2);
  background:linear-gradient(90deg,#f0f2f8 25%,#e6e9f2 50%,#f0f2f8 75%);
  background-size:200% 100%; animation:shimmer 1.6s ease-in-out infinite;
}
@keyframes shimmer { to { background-position:-200% 0; } }

/* Shared panel slot */
.contacts-view { flex:1; overflow-y:auto; display:flex; flex-direction:column; }
.contact-item {
  display:flex; align-items:center; gap:12px;
  padding:10px 16px; cursor:pointer;
  border-bottom:1px solid rgba(0,0,0,.04);
  transition:background .15s;
}
.contact-item:hover { background:rgba(220,38,38,.05); }
.contacts-header { display:flex; align-items:center; justify-content:space-between; padding:16px 16px 10px; border-bottom:1px solid var(--b1); flex-shrink:0; }
.contacts-title { font-size:17px; font-weight:800; color:var(--t1); }
.btn-pill {
  padding:7px 16px; border-radius:var(--rf);
  background:linear-gradient(135deg,var(--p),var(--p-dark));
  color:#fff; border:none; font-size:13px; font-weight:700;
  cursor:pointer; font-family:inherit; box-shadow:var(--sg);
  transition:transform var(--t2x) var(--spring), box-shadow var(--t2x);
}
.btn-pill:hover { transform:translateY(-2px) scale(1.02); box-shadow:var(--sg2); }
.btn-pill:active { transform:scale(.97); }

/* ═══════════════════════════════════════════════════════════════
   MAIN CHAT AREA
═══════════════════════════════════════════════════════════════ */
.chat-area {
  flex:1; height:100%; display:flex; flex-direction:column;
  background:var(--bg); overflow:hidden; position:relative; min-width:0;
  z-index:10; isolation:isolate;
}

/* Scroll-to-bottom button */
.scroll-down-btn {
  position:absolute; bottom:80px; right:16px; z-index:20;
  width:40px; height:40px; border-radius:50%;
  background:#fff; border:none; cursor:pointer;
  box-shadow:0 2px 12px rgba(0,0,0,.22);
  display:flex; align-items:center; justify-content:center;
  color:#54656f; font-size:16px;
  transition:opacity .2s, transform .2s;
}
.scroll-down-btn:hover { background:#f0f2f5; transform:scale(1.08); }
.scroll-down-btn.hidden { opacity:0; pointer-events:none; transform:scale(.8); }
.scroll-unread {
  position:absolute; top:-5px; right:-5px;
  background:var(--p); color:#fff;
  font-size:10px; font-weight:700; border-radius:99px;
  min-width:18px; height:18px; padding:0 4px;
  display:flex; align-items:center; justify-content:center;
  line-height:1;
}
.scroll-unread:empty { display:none; }

/* ── Welcome screen — minimal empty state (WhatsApp-style) ── */
.chat-welcome {
  position:absolute; inset:0;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  padding:32px 40px;
  background:#f0f2f5;
  border-left:1px solid var(--b1);
  overflow:hidden;
}
.cw-inner {
  display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center;
  max-width:460px; width:100%;
}
.cw-illus {
  width:120px; height:120px; border-radius:50%;
  background:#fff;
  display:flex; align-items:center; justify-content:center;
  margin-bottom:28px;
  box-shadow:0 2px 12px rgba(17,24,39,.06);
}
.cw-illus i {
  font-size:48px;
  color:#8696a0;
}
.cw-title {
  font-size:32px; font-weight:300; color:#41525d;
  letter-spacing:-.3px; margin-bottom:16px;
}
.cw-sub {
  font-size:14px; color:#667781; line-height:1.7;
  max-width:400px;
}
.cw-foot {
  position:absolute; bottom:28px; left:0; right:0;
  text-align:center; font-size:12px; color:#8696a0;
  display:flex; align-items:center; justify-content:center; gap:6px;
}
.cw-foot i { font-size:10px; }

/* Chat main */
#chat-main { display:flex; flex-direction:column; height:100%; overflow:hidden; }

/* Chat header */
.chat-header {
  height:var(--hdr-h); flex-shrink:0;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--b1);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 20px 0 22px; z-index:5;
  box-shadow:0 1px 0 rgba(17,24,39,.03);
}
.chat-header-left { display:flex; align-items:center; gap:14px; cursor:pointer; flex:1; min-width:0; }
.chat-header-left:hover .chat-name { color:var(--p); }
#chat-avatar { width:100%; height:100%; border-radius:50%; object-fit:cover; }
#chat-avatar-placeholder { display:none; }
.chat-header .avatar-wrap { width:42px; height:42px; }
.chat-header-info { display:flex; align-items:center; gap:12px; flex:1; min-width:0; cursor:pointer; }
.chat-name {
  font-size:16px; font-weight:800; color:var(--t1);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  transition:color var(--t1x); letter-spacing:-.2px;
}
#chat-status { font-size:12px; color:var(--t3); display:flex; align-items:center; gap:4px; }
#chat-online-dot {
  display:inline-block; width:8px; height:8px; border-radius:50%;
  background:var(--online); flex-shrink:0;
  box-shadow:0 0 6px rgba(220,38,38,.5);
  animation:onlinePulse 3s ease-in-out infinite;
}
.chat-header-actions { display:flex; align-items:center; gap:3px; }

/* Messages canvas */
#messages-area {
  flex:1; overflow-y:auto; overflow-x:hidden;
  padding:16px 3% 72px;
  background-color:#FAFAFA;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Ccircle cx='24' cy='24' r='.8' fill='%23111B21' opacity='.03'/%3E%3C/svg%3E");
  scroll-behavior:smooth;
}

/* System / event messages (e.g. "sadeem created the group") */
.system-msg {
  display:flex; justify-content:center; margin:10px 16px;
}
.system-msg span {
  background:rgba(255,255,255,.78);
  backdrop-filter:blur(8px);
  color:#667181; font-size:12px; font-weight:500;
  padding:5px 14px; border-radius:8px;
  text-align:center; line-height:1.45;
  box-shadow:0 1px 2px rgba(0,0,0,.08);
}
html[data-theme="dark"] .system-msg span {
  background:rgba(31,44,51,.85); color:#8696a0;
}

/* Date separator */
.date-sep { display:flex; align-items:center; justify-content:center; margin:16px 0; }
.date-sep span {
  background:rgba(255,255,255,.80); color:#667181;
  backdrop-filter:blur(8px);
  font-size:12px; font-weight:600;
  padding:5px 16px; border-radius:var(--rf);
  box-shadow:var(--s1); border:1px solid rgba(255,255,255,.6);
}

/* Load more */
#load-more-wrap { display:flex; justify-content:center; padding:12px 0; }
.load-more-btn {
  padding:8px 22px; border-radius:var(--rf);
  background:rgba(255,255,255,.88); backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.6);
  color:var(--p-dark); font-size:13px; font-weight:700;
  cursor:pointer; font-family:inherit; box-shadow:var(--s1);
  transition:all var(--t2x) var(--spring);
}
.load-more-btn:hover {
  background:var(--p); color:#fff;
  transform:translateY(-2px); box-shadow:var(--sg);
}

/* ─── Message Bubbles — WhatsApp style ──────────────────────── */
.msg-row {
  display:flex; align-items:flex-end; gap:6px;
  margin-bottom:2px; padding:0 4px;
  animation:msgFloat .22s ease-out both;
}
@keyframes msgFloat {
  from { opacity:0; transform:translateY(-12px); }
  to   { opacity:1; transform:translateY(0); }
}
.msg-row.sent { flex-direction:row-reverse; }
.msg-row.grouped { margin-bottom:1px; }
.msg-row:not(.grouped) { margin-top:6px; }

/* Wrap is the flex child — max-width lives here so % is relative to row */
.msg-bubble-wrap { max-width:68%; min-width:0; }

.msg-bubble {
  display:block; width:fit-content; max-width:100%; min-width:80px;
  padding:8px 10px 10px 10px; position:relative;
  word-break:break-word; overflow-wrap:break-word;
  box-shadow:0 1px 0.5px rgba(11,20,26,.15);
  border-radius:7.5px;
}
/* Clearfix — keeps bubble tall enough to contain the floated meta */
.msg-bubble::after { content:''; display:table; clear:both; }

/* Hover reveal actions — WhatsApp-style: quick react + quick reply + options,
   floating just above the bubble's outer corner. */
.msg-hover-actions {
  position:absolute; top:-14px; right:6px;
  display:flex; gap:4px;
  opacity:0; pointer-events:none;
  transition:opacity .15s;
  z-index:5;
}
.msg-row:hover .msg-hover-actions { opacity:1; pointer-events:auto; }
.msg-hover-btn {
  width:26px; height:26px; border-radius:50%;
  border:1px solid rgba(11,20,26,.08); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  font-size:12px; color:#54656F; background:#fff;
  box-shadow:0 1px 3px rgba(11,20,26,.18);
  transition:background .12s, transform .1s;
}
.msg-hover-btn:hover { background:#F0F2F5; transform:scale(1.08); }
.msg-hover-btn:active { transform:scale(.95); }

/* Sent: green tail at bottom-right; Recv: white, tail at bottom-left */
.msg-row.sent .msg-bubble {
  background:#fff;
  border:1px solid var(--b1);
  border:1px solid rgba(255,45,85,.08);
  border-radius:18px 18px 6px 18px;
  box-shadow:0 2px 8px rgba(255,45,85,.08);
}
.msg-row.recv .msg-bubble {
  background:#ffffff;
  border:1px solid var(--b1);
  border-radius:18px 18px 18px 6px;
  box-shadow:var(--s1);
}
/* Phoneopia AI conversation: a slightly softer assistant surface so the
   assistant replies feel distinct without changing ordinary chats. */
#chat-area.is-ai-conv #messages-list {
  background:radial-gradient(circle at 50% 0%, rgba(255,45,85,.055), transparent 42%);
}
#chat-area.is-ai-conv .msg-row.recv .msg-bubble {
  background:linear-gradient(145deg,#fff 0%,#fff7f8 100%);
  border-color:rgba(255,45,85,.13);
  box-shadow:0 4px 14px rgba(255,45,85,.08);
}
#chat-area.is-ai-conv .msg-row.recv .msg-text { color:#202735; }
/* Grouped = no tail corner */
.msg-row.sent.grouped .msg-bubble  { border-radius:14px; }
.msg-row.recv.grouped .msg-bubble  { border-radius:14px; }

.msg-sender,
.msg-sender-name { font-size:12.5px; font-weight:600; color:var(--p-dark); margin-bottom:3px; }

/* Group chat avatar — initials circle */
.msg-avatar {
  width:28px; height:28px; border-radius:50%; flex-shrink:0;
  background:var(--p-dim); color:var(--p-dark);
  font-size:11px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  align-self:flex-end; margin-bottom:20px;
}
.msg-avatar img { width:28px; height:28px; border-radius:50%; object-fit:cover; }
.msg-text { font-size:14.2px; line-height:1.5; color:#111b21; word-break:break-word; white-space:pre-wrap; }
.msg-link { color:#027EB5; text-decoration:underline; }
.sent .msg-link { color:#E81235; }

/* Meta INSIDE bubble, floated right — WhatsApp signature */
.msg-meta {
  float:right;
  margin:3px -1px -3px 8px;
  display:inline-flex; align-items:center;
  gap:3px; line-height:1;
}
.msg-time { font-size:11px; color:#667781; white-space:nowrap; }
.msg-row.sent .msg-time { color:#667781; }
.msg-status-icon { font-size:13px; color:#8696a0; transition:color var(--t1x); }
.msg-status-icon.read { color:#53BDEB; }
.msg-bubble.deleted {
  background:rgba(0,0,0,.04) !important;
  color:var(--t3) !important; font-style:italic;
}
.reply-preview {
  background:rgba(0,0,0,.04); border-left:3.5px solid var(--p);
  border-radius:0 var(--r2) var(--r2) 0; padding:7px 11px;
  margin-bottom:7px; cursor:pointer;
  transition:background var(--t0);
}
.reply-preview:hover { background:rgba(0,0,0,.07); }
.reply-preview .rp-sender { font-size:12px; font-weight:800; color:var(--p); margin-bottom:2px; }
.reply-preview .rp-text { font-size:12px; color:var(--t2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:300px; }
.msg-forwarded { font-size:11px; color:var(--t3); display:flex; align-items:center; gap:5px; margin-bottom:5px; font-style:italic; }
/* Full-bleed image bubble — no padding, timestamp overlaid */
.msg-bubble:has(.bot-img-wrap),
.msg-bubble:has(.msg-image):not(:has(.msg-text)) {
  padding:3px !important;
  overflow:hidden;
  border-radius:14px !important;
  min-width:0;
  box-shadow:0 1px 3px rgba(0,0,0,.18) !important;
}
.msg-bubble:has(.bot-img-wrap) .msg-meta,
.msg-bubble:has(.msg-image):not(:has(.msg-text)) .msg-meta {
  position:absolute; bottom:8px; right:10px; z-index:4;
  background:rgba(0,0,0,.45); border-radius:8px; padding:1px 5px;
  margin:0;
}
.msg-bubble:has(.bot-img-wrap) .msg-time,
.msg-bubble:has(.msg-image):not(:has(.msg-text)) .msg-time { color:#fff; }
.msg-bubble:has(.bot-img-wrap) .msg-status-icon,
.msg-bubble:has(.msg-image):not(:has(.msg-text)) .msg-status-icon { color:rgba(255,255,255,.8); }
.msg-image { max-width:260px; max-height:340px; width:auto; height:auto; border-radius:11px; object-fit:cover; cursor:pointer; display:block; transition:opacity var(--t0), transform var(--t2x); }
.msg-image:hover { opacity:.92; transform:scale(.99); }
.msg-img-wrap { max-width:260px; max-height:340px; }
.msg-bubble:has(.msg-image) { max-width:280px; }

/* Image generation loading placeholder */
.img-gen-placeholder {
  width:300px; height:300px; border-radius:var(--r3);
  position:relative; overflow:hidden;
  background:linear-gradient(135deg,#0d0d1a 0%,#12173a 40%,#1a0a3a 70%,#0a1a2a 100%);
  box-shadow:0 4px 20px rgba(0,0,0,.4);
}
.img-gen-placeholder .igp-blur {
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse at 15% 25%, rgba(99,179,237,.5) 0%, transparent 45%),
    radial-gradient(ellipse at 85% 75%, rgba(167,139,250,.45) 0%, transparent 45%),
    radial-gradient(ellipse at 55% 15%, rgba(52,211,153,.4) 0%, transparent 40%),
    radial-gradient(ellipse at 30% 80%, rgba(251,113,133,.35) 0%, transparent 40%),
    radial-gradient(ellipse at 75% 35%, rgba(251,191,36,.3) 0%, transparent 35%);
  filter:blur(22px);
  animation:igpPulse 2.5s ease-in-out infinite alternate;
}
@keyframes igpPulse {
  0%   { opacity:.5; transform:scale(1) rotate(0deg); }
  50%  { opacity:.85; transform:scale(1.06) rotate(2deg); }
  100% { opacity:1;  transform:scale(1.12) rotate(-2deg); }
}
/* Scan line sweep effect */
.img-gen-placeholder::before {
  content:''; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, transparent 40%, rgba(255,255,255,.04) 50%, transparent 60%);
  animation:igpScan 2s linear infinite;
}
@keyframes igpScan {
  0%   { transform:translateY(-100%); }
  100% { transform:translateY(200%); }
}
.img-gen-placeholder .igp-particles {
  position:absolute; inset:0; overflow:visible; z-index:2;
}
.igp-particle {
  position:absolute; border-radius:50%;
  animation:igpFloat linear infinite;
  pointer-events:none;
}
@keyframes igpFloat {
  0%   { transform:translateY(0) scale(0) rotate(0deg);   opacity:0; }
  8%   { opacity:1; }
  50%  { transform:translateY(-50%) scale(1) rotate(180deg); opacity:.9; }
  92%  { opacity:.6; }
  100% { transform:translateY(-110%) scale(.3) rotate(360deg); opacity:0; }
}
.img-gen-placeholder .igp-label {
  position:absolute; bottom:0; left:0; right:0; z-index:3;
  padding:28px 12px 12px;
  background:linear-gradient(transparent, rgba(0,0,0,.65));
  text-align:center; color:rgba(255,255,255,.95);
  font-size:12px; font-weight:600; letter-spacing:.4px;
  display:flex; align-items:center; justify-content:center; gap:7px;
}
.igp-logo {
  width:18px; height:18px; border-radius:4px; flex-shrink:0;
  opacity:.9;
}
.igp-spinner {
  width:13px; height:13px; border:2px solid rgba(255,255,255,.25);
  border-top-color:#fff; border-radius:50%;
  animation:igpSpin .75s linear infinite; flex-shrink:0;
}
@keyframes igpSpin { to { transform:rotate(360deg); } }

/* Logo watermark on generated images */
.bot-img-wrap {
  position:relative; display:block; width:100%;
  border-radius:7.5px; overflow:hidden;
}
.bot-img-wrap .bot-img-logo {
  position:absolute; bottom:9px; right:9px; z-index:3;
  width:28px; height:28px; border-radius:7px;
  background:rgba(255,255,255,.88); padding:3px;
  box-shadow:0 1px 6px rgba(0,0,0,.35);
  pointer-events:none;
}
.bot-img-wrap img.msg-image {
  display:block; width:100%; max-width:100%;
  border-radius:0; box-shadow:none;
}
.msg-file { display:flex; align-items:center; gap:11px; background:rgba(0,0,0,.04); border-radius:var(--r3); padding:11px 14px; margin-bottom:4px; cursor:pointer; transition:background var(--t0); color:var(--t1)!important; text-decoration:none!important; max-width:320px; }
.msg-file:hover { background:rgba(0,0,0,.07); }
.msg-file-icon { width:40px; height:40px; border-radius:var(--r2); background:linear-gradient(135deg,var(--p),var(--p-dark)); display:flex; align-items:center; justify-content:center; color:#fff; flex-shrink:0; box-shadow:var(--sg); }
.msg-file-name { font-size:13px; font-weight:700; color:var(--t1); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.msg-file-size { font-size:11px; color:var(--t3); }
.msg-file .file-info-text { display:flex; flex-direction:column; min-width:0; flex:1; }
.msg-file .msg-file-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.msg-file-download { width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex:none; color:var(--p); background:rgba(220,38,38,.09); transition:all .16s ease; }
.msg-file:hover .msg-file-download { color:#fff; background:var(--p); transform:translateY(-1px); }

/* Friendly media cards: make the file action obvious without opening a
   separate viewer first. The context menu/long-press still contains Save. */
.msg-file { min-width:230px; border:1px solid rgba(17,27,33,.06); box-shadow:0 2px 8px rgba(17,27,33,.06); }
.msg-bubble .msg-hover-actions { transition:opacity .16s ease, transform .16s ease; }
.msg-bubble:hover .msg-hover-actions { transform:translateY(-1px); }
.media-collage-bubble { padding:3px!important; overflow:hidden; max-width:340px!important; }
.media-collage { display:grid; grid-template-columns:repeat(2,1fr); gap:3px; width:min(340px,65vw); aspect-ratio:1; }
.media-collage-tile { position:relative; min-width:0; min-height:0; padding:0; border:0; overflow:hidden; background:#eef1f3; cursor:pointer; }
.media-collage-tile img,.media-collage-tile video { display:block; width:100%; height:100%; object-fit:cover; }
.media-collage-tile:hover img,.media-collage-tile:hover video { transform:scale(1.03); filter:brightness(.92); }
.media-collage-play { position:absolute; inset:0; display:grid; place-items:center; color:#fff; text-shadow:0 1px 4px #000; font-size:22px; }
.media-collage-more { position:absolute; inset:0; display:grid; place-items:center; background:rgba(0,0,0,.46); color:#fff; font-size:28px; font-weight:800; }
.media-collage-caption { padding:5px 7px 3px; font-size:13px; }

/* Old typing bar — always hidden now */
#typing-bar { display:none !important; }

/* Typing bubble in message list (WhatsApp style) */
.typing-bubble-row .msg-bubble {
  background:#ffffff;
  border-radius:18px 18px 18px 4px;
  padding:12px 16px;
  box-shadow:0 1px 2px rgba(0,0,0,.13);
  display:inline-flex; align-items:center;
}
.typing-dots-wa {
  display:flex; align-items:center; gap:5px;
  min-width:40px; height:20px;
}
.typing-dots-wa span {
  width:9px; height:9px; border-radius:50%;
  background:#8696a0; display:block;
  animation:waDot 1.3s ease-in-out infinite;
}
.typing-dots-wa span:nth-child(1) { animation-delay:0s; }
.typing-dots-wa span:nth-child(2) { animation-delay:.2s; }
.typing-dots-wa span:nth-child(3) { animation-delay:.4s; }
@keyframes waDot {
  0%,60%,100% { transform:translateY(0);    opacity:.4; }
  30%          { transform:translateY(-6px); opacity:1;  }
}

/* ═══════════════════════════════════════════════════════════════
   INPUT AREA
═══════════════════════════════════════════════════════════════ */
.input-area {
  padding:10px 14px;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border-top:1px solid var(--b1);
  display:flex; align-items:center; gap:4px;
  flex-shrink:0; position:relative;
  box-shadow:0 -4px 24px rgba(17,24,39,.04);
}
/* Action buttons: fixed size, vertically centred, never squashed. */
.input-area > .attach-btn,
.input-area > .voice-mic-btn,
.input-area > .send-btn,
.input-area > #schedule-btn {
  flex-shrink:0; align-self:center;
  display:flex; align-items:center; justify-content:center;
}
.input-area > .attach-btn { width:40px; height:44px; }

/* White pill input box */
.input-box {
  flex:1; min-width:0; display:flex; align-items:flex-end;
  background:var(--surface);
  border:1.5px solid var(--b1);
  border-radius:20px;
  padding:10px 14px 10px 16px; gap:8px;
  transition:border-color .25s, box-shadow .25s, background .25s;
}
.input-box:focus-within {
  border-color:rgba(255,45,85,.3);
  background:#fff;
  box-shadow:0 0 0 4px var(--p-dim);
}
.input-box #message-input {
  flex:1; min-width:0; border:none; background:transparent;
  resize:none; outline:none; font-size:15px; color:#111B21;
  max-height:120px; font-family:inherit; line-height:1.5;
  padding:0; margin:0; align-self:center;
}
.input-box #message-input::placeholder { color:#8696A0; }
.emoji-toggle {
  background:none; border:none; cursor:pointer;
  color:#8696A0; flex-shrink:0; padding:0; margin-bottom:2px;
  display:flex; align-items:center; justify-content:center;
  transition:color .15s; width:26px; height:26px;
}
.emoji-toggle svg { width:24px; height:24px; }
.emoji-toggle:hover { color:var(--p); }

/* Call header buttons — plain icon, no background */
.call-header-btn {
  background:none; border:none; cursor:pointer;
  color:var(--t2); width:38px; height:38px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:18px; transition:all var(--t2x) var(--spring);
  flex-shrink:0;
}
.call-header-btn:hover { background:var(--active); color:var(--p-dark); }

/* Hide call + voice-record for AI conv */
.chat-area.is-ai-conv #audio-call-btn,
.chat-area.is-ai-conv #video-call-btn,
.chat-area.is-ai-conv .voice-mic-btn { display:none !important; }
.chat-area.no-voice-call #audio-call-btn { display:none !important; }
.chat-area.no-video-call #video-call-btn { display:none !important; }
.chat-area.no-voice-note .voice-mic-btn { display:none !important; }

/* Reply strip */
#reply-box {
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  background:var(--bg); border-radius:var(--r3); padding:9px 13px;
  margin-bottom:9px; border-left:4px solid var(--p);
  animation:slideUp .18s var(--snap);
  box-shadow:var(--s1);
}
@keyframes slideUp { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }
#reply-sender { font-size:12px; font-weight:800; color:var(--p); margin-bottom:2px; }
#reply-text { font-size:12.5px; color:var(--t2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#cancel-reply {
  width:26px; height:26px; border-radius:50%; border:none;
  background:var(--t4); color:#fff; cursor:pointer; font-size:12px;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  transition:all var(--t1x) var(--spring);
}
#cancel-reply:hover { background:var(--danger); transform:scale(1.12) rotate(90deg); }

/* Reply quote inside message bubble */
.msg-reply {
  background:rgba(0,0,0,0.08);
  border-left:3px solid var(--p);
  border-radius:6px;
  padding:5px 9px;
  margin-bottom:5px;
  cursor:pointer;
}
.msg-mine .msg-reply { background:rgba(0,0,0,0.12); border-left-color:rgba(255,255,255,0.5); }
.reply-msg-t {
  font-size:12px;
  color:var(--t2);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:220px;
}
.msg-mine .reply-msg-t { color:rgba(255,255,255,0.82); }

/* Input icon buttons */
.input-btn {
  width:42px; height:42px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:none; border:none; cursor:pointer; color:var(--t3); flex-shrink:0;
  transition:all var(--t2x) var(--spring); position:relative; overflow:hidden;
}
.input-btn::after {
  content:''; position:absolute; inset:0; border-radius:50%;
  background:var(--p); opacity:0; transform:scale(0);
  transition:transform .5s var(--ease), opacity .5s;
}
.input-btn:active::after { opacity:.12; transform:scale(2.5); }
.input-btn:hover {
  color:var(--p); background:var(--p-glass);
  transform:scale(1.1);
}
.input-btn svg,.input-btn i { width:22px; height:22px; font-size:21px; position:relative; z-index:1; }


/* Send FAB */
.send-btn {
  width:48px; height:48px; border-radius:50%;
  background:linear-gradient(135deg,var(--p),var(--secondary));
  border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  color:#fff; flex-shrink:0;
  box-shadow:var(--sg);
  transition:transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s;
}
.send-btn:hover { transform:scale(1.08); box-shadow:var(--sg2); }
.send-btn:active { transform:scale(.94); }
.send-btn svg { width:20px; height:20px; }

/* Mic FAB */
.voice-mic-btn {
  width:48px; height:48px; border-radius:50%;
  background:linear-gradient(135deg,var(--p),var(--secondary));
  border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  color:#fff; flex-shrink:0;
  box-shadow:var(--sg);
  transition:all .25s cubic-bezier(.22,1,.36,1);
}
.voice-mic-btn:hover { background:#DC2626; transform:scale(1.06); box-shadow:var(--sg); }
.voice-mic-btn.recording {
  background:linear-gradient(135deg,#EF4444,#DC2626);
  box-shadow:0 4px 20px rgba(239,68,68,.5);
  animation:micRecord 1.8s ease-in-out infinite;
}
@keyframes micRecord {
  0%,100% { box-shadow:0 4px 20px rgba(239,68,68,.5); transform:scale(1); }
  50%      { box-shadow:0 4px 32px rgba(239,68,68,.8); transform:scale(1.04); }
}
#voice-rec-ui {
  position:absolute; inset:0; background:#F0F2F5;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 10px; z-index:5;
  animation:vrec-slide-in .2s cubic-bezier(.34,1.2,.64,1) both;
}
@keyframes vrec-slide-in {
  from { opacity:0; transform:translateY(8px); }
  to   { opacity:1; transform:translateY(0); }
}

/* Cancel (trash) button */
.vrec-cancel {
  width:44px; height:44px; border-radius:50%; border:none;
  background:rgba(239,68,68,.10); color:#EF4444;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; font-size:16px; flex-shrink:0;
  transition:background .15s, transform .15s;
}
.vrec-cancel:hover { background:rgba(239,68,68,.18); transform:scale(1.08); }
.vrec-cancel:active { transform:scale(.94); }

/* Center body */
.vrec-body {
  flex:1; display:flex; align-items:center; justify-content:center;
  gap:10px; min-width:0; padding:0 8px;
}

/* Pulsing red dot */
.vrec-dot {
  width:10px; height:10px; border-radius:50%;
  background:#EF4444; flex-shrink:0;
  animation:vrec-pulse 1.2s ease-in-out infinite;
}
@keyframes vrec-pulse {
  0%,100% { opacity:1; transform:scale(1); }
  50%      { opacity:.4; transform:scale(.7); }
}

/* Timer */
.vrec-timer {
  font-size:15px; font-weight:600; color:#111B21;
  font-family:'Inter',sans-serif; letter-spacing:.5px;
  flex-shrink:0; min-width:40px; text-align:center;
}

/* Waveform canvas */
#vrec-canvas {
  flex:1; max-width:200px; height:36px;
  border-radius:4px;
}

/* Send button */
.vrec-send {
  width:48px; height:48px; border-radius:50%; border:none;
  background:#DC2626; color:#fff;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; font-size:17px; flex-shrink:0;
  box-shadow:0 2px 8px rgba(220,38,38,.40);
  transition:background .15s, transform .15s, box-shadow .15s;
}
.vrec-send:hover { background:#DC2626; transform:scale(1.06); box-shadow:0 4px 16px rgba(220,38,38,.5); }
.vrec-send:active { transform:scale(.93); background:#1DAA56; }

/* Dark mode */
html[data-theme="dark"] #voice-rec-ui { background:#1F2C33; }
html[data-theme="dark"] .vrec-timer   { color:#E9EDEF; }
#emoji-picker {
  position:fixed; z-index:9000;
  width:340px;
  background:#FFFFFF;
  border-radius:16px;
  box-shadow:0 8px 32px rgba(11,20,26,.18), 0 2px 8px rgba(11,20,26,.08);
  border:1px solid #E9EDEF;
  overflow:hidden;
  display:flex; flex-direction:column;
  animation:epIn .18s cubic-bezier(.34,1.2,.64,1) both;
}
@keyframes epIn {
  from { opacity:0; transform:scale(.94) translateY(10px); }
  to   { opacity:1; transform:scale(1) translateY(0); }
}

/* Search bar */
.emoji-search {
  padding:10px 10px 8px;
  background:#F0F2F5;
  border-bottom:1px solid #E9EDEF;
  flex-shrink:0;
}
.emoji-search input {
  width:100%; padding:8px 12px;
  background:#FFFFFF; border:1px solid #D1D7DB;
  border-radius:20px; outline:none;
  font-size:13.5px; color:#111B21; font-family:inherit;
  transition:border-color .15s;
}
.emoji-search input:focus { border-color:#DC2626; }
.emoji-search input::placeholder { color:#8696A0; }

/* Category tabs */
.emoji-categories {
  display:flex; align-items:center; gap:2px;
  padding:6px 8px 0; background:#F0F2F5;
  border-bottom:1px solid #E9EDEF;
  overflow-x:auto; flex-shrink:0;
  scrollbar-width:none;
}
.emoji-categories::-webkit-scrollbar { display:none; }
.emoji-cat-btn {
  background:none; border:none; cursor:pointer;
  font-size:20px; padding:6px 8px; border-radius:8px;
  border-bottom:2.5px solid transparent;
  transition:background .12s, border-color .12s;
  flex-shrink:0; line-height:1;
}
.emoji-cat-btn:hover { background:rgba(11,20,26,.06); }
.emoji-cat-btn.active {
  background:rgba(220,38,38,.12);
  border-bottom-color:#DC2626;
}

/* Emoji grid */
.emoji-grid {
  display:grid;
  grid-template-columns:repeat(8, 1fr);
  gap:2px;
  padding:8px;
  overflow-y:auto;
  max-height:240px;
  flex:1;
  scrollbar-width:thin;
  scrollbar-color:#D1D7DB transparent;
}
.emoji-grid::-webkit-scrollbar { width:4px; }
.emoji-grid::-webkit-scrollbar-thumb { background:#D1D7DB; border-radius:4px; }

/* Individual emoji */
.emoji-item {
  width:100%; aspect-ratio:1;
  display:flex; align-items:center; justify-content:center;
  font-size:22px; border-radius:8px; cursor:pointer;
  transition:background .1s, transform .1s;
  line-height:1; user-select:none;
}
.emoji-item:hover {
  background:rgba(220,38,38,.12);
  transform:scale(1.2);
}
.emoji-item:active { transform:scale(.95); }

/* Dark mode */
html[data-theme="dark"] #emoji-picker { background:#1F2C33; border-color:rgba(134,150,160,.15); }
html[data-theme="dark"] .emoji-search { background:#111B21; border-color:rgba(134,150,160,.12); }
html[data-theme="dark"] .emoji-search input { background:#2A3942; border-color:rgba(134,150,160,.2); color:#E9EDEF; }
html[data-theme="dark"] .emoji-categories { background:#111B21; border-color:rgba(134,150,160,.12); }
html[data-theme="dark"] .emoji-cat-btn:hover { background:rgba(134,150,160,.1); }
html[data-theme="dark"] .emoji-item:hover { background:rgba(220,38,38,.15); }

/* ═══════════════════════════════════════════════════════════════
   RIGHT INFO PANEL
═══════════════════════════════════════════════════════════════ */
#right-panel {
  width:var(--pnl-w); height:100%;
  background:var(--surface1); backdrop-filter:blur(20px);
  border-left:1px solid rgba(0,0,0,.07);
  box-shadow:-4px 0 32px rgba(0,0,0,.08);
  display:flex; flex-direction:column; flex-shrink:0;
  overflow-y:auto; overflow-x:hidden;
  animation:panelIn .3s var(--snap);
}
@keyframes panelIn { from{transform:translateX(40px);opacity:0} to{transform:translateX(0);opacity:1} }
.panel-header {
  display:flex; align-items:center; gap:12px;
  padding:16px 14px 14px;
  border-bottom:1px solid var(--b1);
  flex-shrink:0; background:inherit;
  position:sticky; top:0; z-index:10;
  backdrop-filter:blur(20px);
}
.panel-title { font-size:16px; font-weight:700; color:var(--t1); flex:1; }
.panel-close { width:36px; height:36px; border-radius:50%; border:none; background:none; cursor:pointer; color:var(--t2); display:flex; align-items:center; justify-content:center; font-size:17px; transition:all var(--t1x) var(--spring); }
.panel-close:hover { background:rgba(239,68,68,.1); color:var(--danger); transform:scale(1.1) rotate(90deg); }

/* Avatar hero section */
.panel-avatar-section {
  display:flex; flex-direction:column; align-items:center;
  padding:28px 20px 22px;
  background:linear-gradient(160deg, rgba(220,38,38,.12) 0%, rgba(185,28,28,.08) 50%, transparent 100%);
  border-bottom:1px solid var(--b1);
  position:relative;
}
.panel-avatar-section::before {
  content:''; position:absolute; top:0; left:0; right:0; height:90px;
  background:linear-gradient(135deg,var(--p-deeper),var(--p-dark));
  opacity:.18; border-radius:0 0 60% 60% / 0 0 30px 30px;
}
.panel-avatar-section .avatar-wrap {
  width:84px; height:84px; border-radius:50%;
  border:3px solid var(--p);
  box-shadow:0 0 0 5px rgba(220,38,38,.18), 0 8px 28px rgba(0,0,0,.18);
  position:relative; z-index:1;
}
.panel-avatar-section .avatar-wrap img { border-radius:50%; width:100%; height:100%; object-fit:cover; }
.panel-avatar-section .avatar-initials {
  border-radius:50%; width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  font-size:30px; font-weight:700;
}
.panel-display-name {
  font-size:20px; font-weight:800; color:var(--t1);
  margin-top:12px; letter-spacing:-.3px;
  position:relative; z-index:1;
}
.panel-sub-info {
  font-size:12px; color:var(--t3); margin-top:4px;
  position:relative; z-index:1;
}

/* Action buttons under avatar */
.panel-actions {
  display:flex; gap:12px; margin-top:16px; position:relative; z-index:1;
}
.panel-action-btn {
  display:flex; flex-direction:column; align-items:center; gap:5px;
  background:rgba(220,38,38,.12);
  border:1.5px solid rgba(220,38,38,.25);
  border-radius:14px; padding:10px 20px;
  cursor:pointer; transition:all .18s var(--spring);
  color:var(--p-dark); font-size:11px; font-weight:700;
  letter-spacing:.3px;
}
.panel-action-btn i { font-size:18px; color:var(--p); }
.panel-action-btn:hover { background:var(--p); color:#fff; border-color:var(--p); transform:scale(1.06); box-shadow:0 4px 16px rgba(220,38,38,.35); }
.panel-action-btn:hover i { color:#fff; }

/* Info sections */
.panel-section {
  padding:0; border-bottom:1px solid var(--b1);
}
.panel-section-title {
  font-size:10.5px; font-weight:800; text-transform:uppercase;
  letter-spacing:1.2px; color:var(--p-dark);
  padding:14px 18px 6px;
}
.info-row {
  display:flex; align-items:center; gap:0;
  padding:10px 18px; border-radius:0;
  transition:background .15s;
  cursor:default;
}
.info-row:hover { background:rgba(220,38,38,.05); }
.info-icon {
  width:40px; height:40px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:rgba(220,38,38,.1); border-radius:50%;
  color:var(--p-dark); font-size:15px; margin-right:14px;
}
.info-text { flex:1; min-width:0; }
.info-label { font-size:10.5px; color:var(--t3); font-weight:600; letter-spacing:.3px; margin-bottom:2px; }
.info-val { font-size:14px; color:var(--t1); font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ── Group member rows (inside info panel) ─────────────────────── */
#members-list { padding:0 0 4px; }
.member-row {
  display:flex; align-items:center; gap:12px;
  padding:9px 18px; transition:background .14s;
}
.member-row:hover { background:rgba(220,38,38,.05); }
.member-info { flex:1; min-width:0; }
.member-name-text {
  font-size:14.5px; font-weight:600; color:var(--t1);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.member-role-badge {
  display:inline-flex; align-items:center; gap:4px;
  font-size:11px; font-weight:600; margin-top:2px;
  padding:2px 8px; border-radius:20px;
}
.role-admin {
  background:rgba(220,38,38,.12); color:var(--p-dark);
}
.role-member {
  background:rgba(134,150,160,.1); color:var(--t3);
}
.member-row button {
  flex-shrink:0; background:transparent; border:1.5px solid var(--danger);
  color:var(--danger); padding:4px 12px; border-radius:8px;
  cursor:pointer; font-size:12px; font-weight:600;
  transition:background .14s, color .14s;
}
.member-row button:hover { background:var(--danger); color:#fff; }
.member-row .member-info + div { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:5px; }
.member-row .member-info + div button { padding:4px 7px; font-size:10px; }
html[data-theme="dark"] .member-row:hover { background:rgba(134,150,160,.06); }
html[data-theme="dark"] .role-admin { background:rgba(220,38,38,.1); }
html[data-theme="dark"] .role-member { background:rgba(134,150,160,.08); }

/* Edit Group section inside panel */
.panel-section .mfg { padding:0 18px; }
.panel-section .btn-confirm { margin:0 18px 14px; width:calc(100% - 36px); border-radius:10px; }

/* Settings fields */
.mfg { margin-bottom:14px; }
.mfg label { display:block; font-size:11px; font-weight:700; color:var(--t3); text-transform:uppercase; letter-spacing:.6px; margin-bottom:7px; }
.mfg input,.mfg textarea,.mfg select {
  width:100%; padding:11px 14px;
  border:1.5px solid var(--b2); border-radius:var(--r3);
  font-size:14px; font-weight:500; color:var(--t1);
  background:#fff; outline:none; font-family:inherit;
  transition:border-color var(--t2x), box-shadow var(--t2x), transform var(--t2x);
}
.mfg input:focus,.mfg textarea:focus,.mfg select:focus {
  border-color:var(--p); box-shadow:0 0 0 4px var(--p-dim);
  transform:scale(1.005);
}
.mfg textarea { resize:vertical; min-height:68px; }
.mfg input::placeholder,.mfg textarea::placeholder { color:var(--t4); }
.toggle-switch, .toggle { position:relative; width:46px; height:26px; flex-shrink:0; }
.toggle-switch input, .toggle input { opacity:0; width:0; height:0; position:absolute; }
.toggle-slider { position:absolute; inset:0; cursor:pointer; background:var(--b2); border-radius:var(--rf); transition:background var(--t2x); }
.toggle-slider::before { content:''; position:absolute; width:20px; height:20px; border-radius:50%; background:#fff; left:3px; top:3px; box-shadow:0 2px 6px rgba(0,0,0,.2); transition:transform var(--t2x) var(--spring); }
.toggle-switch input:checked + .toggle-slider, .toggle input:checked + .toggle-slider { background:linear-gradient(135deg,var(--p),var(--p-dark)); box-shadow:0 2px 8px var(--p-glow); }
.toggle-switch input:checked + .toggle-slider::before, .toggle input:checked + .toggle-slider::before { transform:translateX(20px); }

/* Settings modal sections */
.settings-group {
  margin-bottom:22px;
  background:rgba(255,255,255,.7);
  border-radius:var(--r4);
  border:1px solid var(--b1);
  overflow:hidden;
}
.settings-group-title {
  font-size:11px; font-weight:800; text-transform:uppercase;
  letter-spacing:.8px; color:var(--p-dark);
  padding:10px 16px 8px;
  background:rgba(255,45,85,.06);
  border-bottom:1px solid var(--b1);
}
.settings-row {
  display:flex; align-items:center; justify-content:space-between;
  padding:13px 16px; gap:12px;
  border-bottom:1px solid var(--b1);
  animation:fadeSlideIn .18s var(--snap) both;
}
.settings-row:last-child { border-bottom:none; }
.settings-label {
  font-size:14px; font-weight:600; color:var(--t1); flex:1; min-width:0;
}
.settings-select {
  border:1.5px solid var(--b2); border-radius:var(--r3);
  background:#fff; color:var(--t1); font-size:13px; font-weight:600;
  font-family:inherit; padding:6px 10px; cursor:pointer;
  outline:none; min-width:120px;
  transition:border-color var(--t1x), box-shadow var(--t1x);
}
.settings-select:focus { border-color:var(--p); box-shadow:0 0 0 3px var(--p-glow); }
.media-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:3px; }
.media-thumb { aspect-ratio:1; border-radius:var(--r1); object-fit:cover; cursor:pointer; width:100%; transition:opacity var(--t0), transform var(--t2x) var(--spring); }
.media-thumb:hover { opacity:.88; transform:scale(.96); }

/* ═══════════════════════════════════════════════════════════════
   BUTTONS
═══════════════════════════════════════════════════════════════ */
.btn-confirm {
  padding:11px 26px;
  background:linear-gradient(135deg,var(--p),var(--p-dark));
  border:none; border-radius:var(--r3); color:#fff;
  cursor:pointer; font-size:14px; font-weight:700;
  font-family:inherit; box-shadow:var(--sg);
  transition:transform var(--t2x) var(--spring), box-shadow var(--t2x), filter var(--t0);
  position:relative; overflow:hidden;
}
.btn-confirm::before {
  content:''; position:absolute; top:0; left:0; right:0;
  height:50%; background:linear-gradient(rgba(255,255,255,.15),transparent);
  border-radius:inherit;
}
.btn-confirm:hover { transform:translateY(-2px); box-shadow:var(--sg2); }
.btn-confirm:active { transform:scale(.97); filter:brightness(.92); }
.btn-cancel {
  padding:10px 22px; background:var(--bg);
  border:1.5px solid var(--b2); border-radius:var(--r3);
  color:var(--t2); cursor:pointer; font-size:14px;
  font-family:inherit; font-weight:600;
  transition:all var(--t1x) var(--spring);
}
.btn-cancel:hover { background:var(--hover); color:var(--t1); transform:translateY(-1px); }
.btn-danger { background:linear-gradient(135deg,#EF4444,#DC2626) !important; box-shadow:0 4px 14px rgba(239,68,68,.35) !important; }

/* ═══════════════════════════════════════════════════════════════
   MODAL — Premium glass overlay
═══════════════════════════════════════════════════════════════ */
#modal-overlay {
  position:fixed; inset:0; z-index:5000;
  background:var(--overlay);
  backdrop-filter:blur(6px) saturate(150%);
  display:flex; align-items:center; justify-content:center; padding:20px;
  animation:fadeIn .2s var(--ease);
}
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
#modal {
  background:#ffffff;
  border-radius:var(--r6); box-shadow:var(--s4);
  border:1px solid rgba(0,0,0,.06);
  width:100%; max-width:490px; max-height:86vh; overflow-y:auto;
  animation:modalRise .25s var(--spring);
}
html[data-theme="dark"] #modal { background:#1F2C33; border-color:rgba(255,255,255,.08); }
@keyframes modalRise {
  from { opacity:0; transform:scale(.9) translateY(20px); }
  to   { opacity:1; transform:scale(1) translateY(0); }
}
.modal-header,
.modal-head {
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 20px 14px; border-bottom:1px solid var(--b1);
  gap:12px;
}
#modal-title { font-size:17px; font-weight:700; color:var(--t1); letter-spacing:-.2px; flex:1; }
#modal-close {
  width:32px; height:32px; border-radius:50%; border:none; flex-shrink:0;
  background:transparent; color:var(--t2); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:all var(--t1x) var(--spring);
}
#modal-close svg { width:18px; height:18px; }
#modal-close:hover { background:rgba(239,68,68,.12); color:var(--danger); transform:rotate(90deg); }
#modal-body { padding:18px 20px; }
.modal-actions { display:flex; gap:10px; justify-content:flex-end; margin-top:16px; }

/* Forward / Add-members contact list */
.member-select-row {
  display:flex; align-items:center; gap:12px;
  padding:8px 10px; border-radius:10px;
  cursor:pointer; transition:background .15s; user-select:none;
}
.member-select-row:hover { background:var(--bg2,#f5f5f5); }
.member-select-row:has(input:checked) { background:rgba(255,45,85,.07); }
.member-select-row input[type="checkbox"] {
  -webkit-appearance:none; appearance:none;
  width:22px; height:22px; border-radius:50%; flex-shrink:0;
  border:2px solid #ccc; cursor:pointer;
  transition:all .15s; margin:0; order:99;
  display:grid; place-items:center;
}
.member-select-row input[type="checkbox"]:checked {
  background:var(--p,#B91C1C); border-color:var(--p,#B91C1C);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M1 5l3.5 3.5L11 1' stroke='%23fff' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:center; background-size:12px;
}
.member-select-row .avatar-wrap { width:44px!important; height:44px!important; flex-shrink:0; }
.member-select-row .avatar-initials { width:44px!important; height:44px!important; flex-shrink:0; }
.member-select-row > span { flex:1; font-size:14.5px; font-weight:500; color:var(--t1); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fwd-list { max-height:320px; overflow-y:auto; }

/* ═══════════════════════════════════════════════════════════════
   CONTEXT MENUS — Glassmorphism
═══════════════════════════════════════════════════════════════ */
#ctx-menu,#sidebar-dropdown,#context-menu {
  position:fixed; z-index:8000;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(20px) saturate(160%);
  border-radius:var(--r4); box-shadow:var(--s4);
  border:1px solid rgba(255,255,255,.6);
  padding:6px 0; min-width:200px; overflow:hidden;
  animation:menuPop .14s var(--spring);
}
@keyframes menuPop { from{opacity:0;transform:scale(.9) translateY(-4px)} to{opacity:1;transform:scale(1) translateY(0)} }
.ctx-item,.ctx-menu-item {
  display:flex; align-items:center; gap:12px;
  padding:11px 18px; font-size:14px; cursor:pointer;
  color:var(--t1); font-weight:500;
  transition:background var(--t0);
  font-family:inherit; background:none; border:none; width:100%; text-align:left;
}
.ctx-item:hover,.ctx-menu-item:hover { background:var(--active); }
.ctx-item i,.ctx-menu-item i { width:16px; text-align:center; color:var(--t3); font-size:14px; }
.ctx-item.danger,.ctx-menu-item.danger { color:var(--danger); }
.ctx-item.danger i,.ctx-menu-item.danger i { color:var(--danger); }
.ctx-sep { height:1px; background:var(--b1); margin:4px 0; }

/* ═══════════════════════════════════════════════════════════════
   LIGHTBOX
═══════════════════════════════════════════════════════════════ */
.lightbox {
  position:fixed; inset:0; z-index:9000;
  background:rgba(0,0,0,.92);
  backdrop-filter:blur(14px) saturate(140%);
  display:flex; align-items:center; justify-content:center;
  animation:lbFadeIn .22s ease both;
}
@keyframes lbFadeIn { from{opacity:0} to{opacity:1} }

.lightbox-close {
  position:absolute; top:20px; right:20px;
  width:44px; height:44px; border-radius:50%; border:none;
  background:rgba(255,255,255,.14); color:#fff;
  font-size:20px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  backdrop-filter:blur(8px);
  transition:all .2s var(--spring);
  z-index:2;
}
.lightbox-close:hover { background:rgba(255,255,255,.28); transform:scale(1.12) rotate(90deg); }

.lightbox-toolbar {
  position:absolute; bottom:24px; left:50%; transform:translateX(-50%);
  display:flex; align-items:center; gap:10px;
  background:rgba(255,255,255,.1); backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.15);
  border-radius:50px; padding:8px 16px;
  animation:lbFadeIn .3s .15s ease both;
  z-index:2;
}
.lb-tool-btn {
  width:36px; height:36px; border-radius:50%; border:none;
  background:rgba(255,255,255,.12); color:#fff; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  font-size:15px; transition:all .18s var(--spring);
}
.lb-tool-btn:hover { background:rgba(255,255,255,.25); transform:scale(1.12); }

.lightbox-content-wrap {
  animation:lbPop .3s var(--spring) both;
  display:flex; align-items:center; justify-content:center;
}
@keyframes lbPop {
  0%   { opacity:0; transform:scale(.55) translateY(30px); }
  70%  { transform:scale(1.04) translateY(-3px); }
  100% { opacity:1; transform:scale(1) translateY(0); }
}

#lightbox-content img,#lightbox-content video {
  max-width:90vw; max-height:84vh; border-radius:var(--r4);
  box-shadow:0 40px 120px rgba(0,0,0,.8);
  display:block;
}

/* Screenshot-block overlay */
.lb-screenshot-block {
  position:fixed; inset:0; z-index:9999;
  background:#000;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:14px; color:#fff;
  animation:lbFadeIn .05s ease both;
}
.lb-screenshot-block i { font-size:48px; color:rgba(255,255,255,.4); }
.lb-screenshot-block span { font-size:14px; color:rgba(255,255,255,.55); letter-spacing:.3px; }

/* ═══════════════════════════════════════════════════════════════
   TOAST — Glassmorphism notifications
═══════════════════════════════════════════════════════════════ */
#toast-container { position:fixed; bottom:28px; right:28px; z-index:9999; display:flex; flex-direction:column; gap:10px; }
.toast {
  display:flex; align-items:center; gap:11px;
  padding:14px 20px; border-radius:var(--r4);
  background:rgba(30,39,51,.94);
  backdrop-filter:blur(16px);
  color:#fff; font-size:14px; font-weight:500;
  font-family:inherit; box-shadow:var(--s4);
  max-width:360px; min-width:240px;
  border:1px solid rgba(255,255,255,.1);
  animation:toastSlide .28s var(--spring);
  border-left:none;
}
.toast::before {
  content:''; width:4px; align-self:stretch; border-radius:var(--rf);
  background:var(--p); flex-shrink:0; margin-left:-8px;
}
.toast.success::before { background:var(--success); }
.toast.error::before { background:var(--danger); }
.toast.info::before { background:var(--info); }
.toast-icon { font-size:16px; flex-shrink:0; }
.toast.success .toast-icon { color:var(--success); }
.toast.error .toast-icon { color:var(--danger); }
.toast.info .toast-icon { color:var(--info); }
.toast-undo-btn {
  margin-left: auto;
  padding: 4px 12px;
  border: none;
  border-radius: 6px;
  background: var(--primary);
  color: #fff;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  flex-shrink: 0;
}
@keyframes toastSlide { from{opacity:0;transform:translateX(48px) scale(.94)} to{opacity:1;transform:translateX(0) scale(1)} }

/* ═══════════════════════════════════════════════════════════════
   STATUS MODULE
═══════════════════════════════════════════════════════════════ */
.status-header { display:flex; align-items:center; justify-content:space-between; padding:16px 16px 8px; border-bottom:1px solid var(--b1); }
.status-section-label { padding:10px 16px 4px; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:1px; color:var(--t3); }
.status-item { display:flex; align-items:center; gap:13px; padding:11px 16px; cursor:pointer; transition:all var(--t1x) var(--spring); border-radius:0; }
.status-item:hover { background:var(--hover); }
.status-av-wrap { position:relative; flex-shrink:0; }
.status-plus-badge { position:absolute; bottom:-2px; right:-2px; width:20px; height:20px; border-radius:50%; background:linear-gradient(135deg,var(--p),var(--p-dark)); color:#fff; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:800; border:2.5px solid #fff; box-shadow:var(--sg); }
.status-info { flex:1; min-width:0; }
.status-name { font-size:14px; font-weight:700; color:var(--t1); }
.status-time { font-size:12px; color:var(--t3); margin-top:2px; }
.my-status-card { display:flex; align-items:flex-start; gap:13px; padding:14px 16px 10px; border-bottom:1px solid var(--b1); cursor:pointer; transition:background var(--t1x); }
.my-status-card:hover { background:var(--hover); }
.my-status-plus { position:absolute; right:-2px; bottom:-2px; width:20px; height:20px; border-radius:50%; background:var(--p); color:#fff; display:flex; align-items:center; justify-content:center; font-size:11px; border:2px solid #fff; box-shadow:var(--s1); }
.status-strip { display:flex; gap:8px; margin-top:9px; overflow-x:auto; padding-bottom:3px; scrollbar-width:none; }
.status-strip::-webkit-scrollbar { display:none; }
.status-strip-add { width:44px; height:44px; border-radius:50%; flex-shrink:0; border:2px dashed var(--p); display:flex; align-items:center; justify-content:center; cursor:pointer; background:var(--p-glass); transition:all var(--t2x) var(--spring); }
.status-strip-add:hover { background:var(--active); transform:scale(1.08); }
#story-viewer { position:fixed; inset:0; z-index:9000; display:flex; align-items:stretch; justify-content:center; background:rgba(0,0,0,.96); backdrop-filter:blur(8px); }
#story-viewer.hidden { display:none !important; }
.sv-bg { width:100%; height:100%; display:flex; flex-direction:column; position:relative; overflow:hidden; max-width:480px; margin:0 auto; }
.sv-bars { display:flex; gap:3px; padding:16px 14px 6px; position:relative; z-index:25; }
.sv-bar { flex:1; height:3px; background:rgba(255,255,255,.3); border-radius:var(--rf); overflow:hidden; }
.sv-bar-fill { height:100%; background:#fff; border-radius:var(--rf); box-shadow:0 0 8px rgba(255,255,255,.6); }
.sv-hdr { display:flex; align-items:center; justify-content:space-between; padding:8px 14px 12px; position:relative; z-index:25; }
.sv-name { font-size:15px; font-weight:700; color:#fff; }
.sv-time { font-size:12px; color:rgba(255,255,255,.72); margin-top:1px; }
.sv-icon-btn { width:38px; height:38px; border-radius:50%; border:none; background:rgba(255,255,255,.14); backdrop-filter:blur(8px); color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:15px; transition:all var(--t1x) var(--spring); }
.sv-icon-btn:hover { background:rgba(255,255,255,.26); transform:scale(1.1); }
.sv-content { flex:1; display:flex; align-items:center; justify-content:center; padding:18px; position:relative; z-index:5; }
.sv-text-card { max-width:340px; width:100%; padding:36px 28px; border-radius:var(--r6); color:#fff; font-size:clamp(18px,4vw,28px); font-weight:700; text-align:center; line-height:1.45; word-break:break-word; box-shadow:0 16px 48px rgba(0,0,0,.5); }
.sv-caption { margin-top:14px; color:#fff; font-size:14px; text-align:center; background:rgba(0,0,0,.5); backdrop-filter:blur(8px); padding:9px 16px; border-radius:var(--r3); }
.sv-views-row { padding:10px 18px; color:rgba(255,255,255,.65); font-size:13px; display:flex; align-items:center; gap:7px; justify-content:center; position:relative; z-index:10; }
.sv-nav { position:absolute; top:0; bottom:0; width:38%; z-index:20; cursor:pointer; }
.sv-nav-l { left:0; } .sv-nav-r { right:0; }

/* ═══════════════════════════════════════════════════════════════
   DIALPAD
═══════════════════════════════════════════════════════════════ */
.dp-key { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:13px 8px; border-radius:var(--r3); border:1.5px solid var(--b1); background:rgba(255,255,255,.9); backdrop-filter:blur(8px); color:var(--t1); cursor:pointer; font-size:22px; font-weight:700; transition:all var(--t2x) var(--spring); min-height:54px; box-shadow:var(--s0); }
.dp-key:hover { border-color:var(--p); background:var(--active); transform:scale(1.04); box-shadow:var(--s1); }
.dp-key:active { background:var(--p); color:#fff; transform:scale(.96); box-shadow:var(--sg); }
.dp-key span { font-size:9px; letter-spacing:2px; color:var(--t3); margin-bottom:2px; }
.dp-key:active span { color:rgba(255,255,255,.75); }
.number-card { display:flex; align-items:center; gap:13px; padding:13px 16px; border-radius:var(--r4); border:1.5px solid var(--b1); margin-bottom:9px; transition:all var(--t2x) var(--spring); background:#fff; box-shadow:var(--s0); }
.number-card:hover { border-color:var(--p); box-shadow:var(--s2); transform:translateY(-2px); }
.number-card.active-num { border-color:var(--online); background:rgba(220,38,38,.05); box-shadow:0 4px 14px rgba(220,38,38,.15); }
.number-card .num-icon { width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:19px; flex-shrink:0; }
.number-card .num-info { flex:1; min-width:0; }
.number-card .num-phone { font-weight:800; font-size:15px; color:var(--t1); }
.number-card .num-meta { font-size:11px; color:var(--t3); margin-top:2px; }
.number-card .num-actions { display:flex; gap:7px; }
.number-card .num-btn { padding:7px 14px; border-radius:var(--r3); border:1.5px solid var(--b2); background:#fff; color:var(--t1); cursor:pointer; font-size:12px; font-weight:700; font-family:inherit; transition:all var(--t1x) var(--spring); }
.number-card .num-btn:hover { background:var(--p); color:#fff; border-color:var(--p); transform:scale(1.04); }
.number-card .num-btn.active-btn { background:var(--online); color:#fff; border-color:var(--online); }
.number-card .num-btn.release-btn:hover { background:var(--danger); color:#fff; border-color:var(--danger); }
.dialpad-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; max-width:270px; margin:0 auto; }
#active-number-badge { font-size:12px; color:var(--t3); }
#phone-view .contacts-header { padding:16px; }
.stab[data-view="phone"] { position:relative; }
.phone-badge { position:absolute; top:4px; right:8px; width:8px; height:8px; border-radius:50%; background:var(--online); display:none; }

/* ═══════════════════════════════════════════════════════════════
   CALL OVERLAYS — White + Phoneopia Red
═══════════════════════════════════════════════════════════════ */
.call-overlay {
  position:fixed; inset:0; z-index:8500; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(180deg,#FFFFFF 0%,#FFF5F7 45%,#FFE8ED 100%);
  backdrop-filter:blur(16px) saturate(120%);
}
#incomingCallOverlay,
#twilioIncomingOverlay {
  background:rgba(255,255,255,.94);
}
.call-card {
  background:#fff; border-radius:var(--r6); padding:36px 32px; min-width:290px; text-align:center;
  box-shadow:0 20px 60px rgba(255,45,85,.12), 0 0 0 1px rgba(255,45,85,.08);
  border:1px solid rgba(255,45,85,.1); animation:modalRise .3s var(--spring);
}
.call-card::before { content:''; display:block; width:42px; height:4px; border-radius:99px; margin:-18px auto 20px; background:linear-gradient(90deg,var(--p),#ff8aa0); opacity:.8; }
.call-card .call-avatar {
  width:84px; height:84px; border-radius:50%; margin:0 auto 18px; display:block;
  border:3px solid rgba(255,45,85,.2); box-shadow:0 8px 24px rgba(255,45,85,.15);
}
.call-card .call-name { font-size:23px; font-weight:800; color:var(--t1); margin-bottom:8px; letter-spacing:-.3px; }
.call-card .call-status { font-size:14px; color:var(--t3); margin-bottom:30px; }
.call-btn-group { display:flex; gap:22px; justify-content:center; }
.call-btn {
  width:60px; height:60px; border-radius:50%; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center; font-size:24px; color:#fff;
  transition:transform var(--t2x) var(--spring), box-shadow var(--t2x);
}
.call-btn:hover { transform:scale(1.12); }
.call-btn.accept { background:linear-gradient(135deg,var(--p),var(--p-dark)); box-shadow:0 6px 24px var(--p-glow); }
.call-btn.reject,.call-btn.end { background:linear-gradient(135deg,#EF4444,var(--p)); box-shadow:0 6px 24px rgba(239,68,68,.4); }
.call-btn.action { background:var(--p-light); color:var(--p); }
.call-btn.action:hover { background:rgba(255,45,85,.16); }
.call-timer { font-size:17px; color:var(--p-dark); margin-bottom:22px; font-weight:600; font-variant-numeric:tabular-nums; }

/* ── Incoming Call Card ────────────────────────────────────── */
.incoming-call-card {
  background:#fff;
  border-radius:28px; padding:36px 32px 32px;
  min-width:300px; max-width:340px; width:90%;
  text-align:center;
  box-shadow:0 24px 64px rgba(255,45,85,.14), 0 0 0 1px rgba(255,45,85,.1);
  animation:modalRise .35s cubic-bezier(.34,1.56,.64,1);
}
.incoming-call-avatar {
  width:96px; height:96px; border-radius:50%;
  margin:0 auto 20px; position:relative;
  display:flex; align-items:center; justify-content:center;
}
.incoming-call-avatar::before {
  content:''; position:absolute; inset:-10px;
  border-radius:50%; border:2px solid rgba(255,45,85,.28);
  animation:callRing 2s ease-in-out infinite;
}
.incoming-call-avatar::after {
  content:''; position:absolute; inset:-20px;
  border-radius:50%; border:1.5px solid rgba(255,45,85,.14);
  animation:callRing 2s .5s ease-in-out infinite;
}
@keyframes callRing {
  0%,100% { transform:scale(1); opacity:.7; }
  50%      { transform:scale(1.1); opacity:1; }
}
.call-avatar-placeholder {
  width:100%; height:100%; border-radius:50%;
  background:linear-gradient(135deg,var(--p-dark),var(--p));
  display:flex; align-items:center; justify-content:center;
  font-size:36px; font-weight:800; color:#fff;
  letter-spacing:-.5px;
}
.incoming-call-avatar img,
.active-call-avatar img {
  width:100%; height:100%; border-radius:50%; object-fit:cover;
}
.incoming-call-name {
  font-size:24px; font-weight:800; color:var(--t1);
  letter-spacing:-.4px; margin-bottom:6px;
}
.incoming-call-type {
  font-size:13px; color:var(--t3);
  margin-bottom:12px; letter-spacing:.1px;
}
.incoming-ring-hint {
  font-size:12px; color:var(--primary); font-weight:600;
  margin-bottom:24px; padding:8px 14px; border-radius:20px;
  background:rgba(37,211,102,.12); animation:ring-hint-pulse 1.5s ease-in-out infinite;
}
.incoming-ring-hint.hidden { display:none; }
@keyframes ring-hint-pulse {
  0%,100% { opacity:1; }
  50% { opacity:.55; }
}
.incoming-call-card .call-btn-circle { animation:callButtonGlow 1.8s ease-in-out infinite; }
@keyframes callButtonGlow { 0%,100%{box-shadow:0 8px 24px rgba(255,45,85,.22)} 50%{box-shadow:0 8px 34px rgba(255,45,85,.5)} }
.incoming-call-actions {
  display:flex; justify-content:center; gap:48px;
}
.call-action-btn {
  display:flex; flex-direction:column; align-items:center; gap:9px;
  background:none; border:none; cursor:pointer;
  transition:transform .15s;
}
.call-action-btn:hover { transform:scale(1.1); }
.call-btn-circle {
  width:64px; height:64px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:24px; color:#fff;
  transition:box-shadow .15s;
}
.call-action-btn.decline .call-btn-circle {
  background:linear-gradient(135deg,#EF4444,var(--p));
  box-shadow:0 8px 24px rgba(239,68,68,.35);
}
.call-action-btn.accept .call-btn-circle {
  background:linear-gradient(135deg,var(--p),var(--p-dark));
  box-shadow:0 8px 24px var(--p-glow);
}
.call-btn-label {
  font-size:12px; font-weight:600; color:var(--t2);
  letter-spacing:.2px;
}

/* ── Missed call (Close · Voice · Call again) ─────────────── */
#missedCallOverlay {
  background:linear-gradient(180deg,#FFFFFF 0%,#FFF5F7 45%,#FFE8ED 100%);
  justify-content:center; align-items:center;
  flex-direction:column;
  padding:0;
}
.missed-call-bg {
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  filter:blur(34px) brightness(1.05) saturate(1.1);
  transform:scale(1.1);
  opacity:.14;
}
#missedCallOverlay::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(255,255,255,.35) 0%,rgba(255,232,237,.55) 100%);
  pointer-events:none;
}
.missed-call-card {
  position:relative; z-index:2;
  display:flex; flex-direction:column; align-items:center;
  padding:48px 24px 56px; text-align:center;
  max-width:420px; width:100%; min-height:100%;
  justify-content:space-between;
}
.missed-call-top { margin-top:12px; }
.missed-call-avatar {
  width:168px; height:168px; border-radius:50%; overflow:hidden;
  position:relative; flex-shrink:0;
  box-shadow:0 16px 48px rgba(0,0,0,.55);
  border:3px solid rgba(255,255,255,.12);
}
.missed-call-avatar .call-avatar-placeholder,
.missed-call-avatar img {
  width:100%; height:100%; border-radius:50%; object-fit:cover;
}
.missed-call-name {
  font-size:30px; font-weight:800; color:var(--t1,#111b21); margin-bottom:8px;
  letter-spacing:-.4px;
}
.missed-call-reason {
  font-size:17px; color:var(--t3,#667781); margin-bottom:0;
}
.missed-call-actions-3 {
  display:flex; justify-content:space-between; gap:12px;
  width:100%; max-width:360px; padding:0 8px;
}
.missed-call-actions-3 .call-action-btn { flex:1; min-width:0; }
.missed-btn-dark {
  background:#EDEDED !important;
  color:#333 !important;
  box-shadow:0 6px 18px rgba(0,0,0,.12) !important;
}
.missed-btn-dark i { color:#444 !important; }
.missed-lbl { color:var(--t2,#3b4a54) !important; line-height:1.25; }

/* ── Active Audio Call ─────────────────────────────────────── */
#activeCallOverlay,
#twilioActiveOverlay {
  background:linear-gradient(180deg,#FFFFFF 0%,#FFF5F7 40%,#FFE8ED 100%);
  flex-direction:column; justify-content:space-between;
  padding:60px 24px 44px;
}
.audio-call-content {
  display:flex; flex-direction:column; align-items:center; gap:0;
}
.active-call-avatar {
  width:110px; height:110px; border-radius:50%;
  position:relative; margin-bottom:24px;
  display:flex; align-items:center; justify-content:center;
}
.active-call-avatar::before {
  content:''; position:absolute; inset:-12px;
  border-radius:50%; border:2px solid rgba(255,45,85,.25);
  animation:callRing 2.5s ease-in-out infinite;
}
.active-call-avatar::after {
  content:''; position:absolute; inset:-24px;
  border-radius:50%; border:1.5px solid rgba(255,45,85,.12);
  animation:callRing 2.5s .6s ease-in-out infinite;
}
.active-call-name {
  font-size:26px; font-weight:800; color:var(--t1);
  letter-spacing:-.5px; margin-bottom:8px;
}
.active-call-status {
  font-size:14px; color:var(--t3);
  margin-bottom:8px; letter-spacing:.1px;
}
.active-call-timer {
  font-size:20px; font-weight:700; color:var(--p-dark);
  font-variant-numeric:tabular-nums; letter-spacing:.5px;
  margin-bottom:0;
  display:none; /* hidden until call connects */
}
.audio-call-controls {
  display:flex; justify-content:center; align-items:flex-end; gap:24px;
}
.call-control-btn {
  display:flex; flex-direction:column; align-items:center; gap:10px;
  background:none; border:none; cursor:pointer;
  transition:transform .15s;
}
.call-control-btn:hover { transform:scale(1.1); }
.call-control-btn.end-call .ctrl-circle {
  background:linear-gradient(135deg,#EF4444,var(--p));
  box-shadow:0 8px 28px rgba(239,68,68,.4);
  width:68px; height:68px; font-size:26px; color:#fff;
}
.ctrl-circle {
  width:56px; height:56px; border-radius:50%;
  background:var(--p-light);
  display:flex; align-items:center; justify-content:center;
  font-size:20px; color:var(--p-dark);
  transition:background .15s, box-shadow .15s;
  border:1px solid rgba(255,45,85,.12);
}
.ctrl-circle:hover { background:rgba(255,45,85,.14); }
.ctrl-label {
  font-size:12px; font-weight:600; color:var(--t2);
  letter-spacing:.2px;
}

/* ── Video Call ────────────────────────────────────────────── */
#videoCallOverlay {
  position:fixed; inset:0; z-index:8500; background:#000;
  flex-direction:column;
}
#videoCallOverlay #remoteVideo {
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}
#videoCallOverlay #localVideo {
  position:absolute; bottom:120px; right:16px;
  width:110px; height:160px; border-radius:14px;
  object-fit:cover; box-shadow:0 4px 20px rgba(0,0,0,.5);
  border:2px solid rgba(255,255,255,.2);
}
.video-call-no-remote {
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:16px;
  background:linear-gradient(180deg,#FFFFFF 0%,#FFF5F7 50%,#FFE8ED 100%);
  z-index:1;
}
.video-call-no-remote .active-call-name { color:var(--t1); }
.video-call-top {
  position:absolute; top:0; left:0; right:0;
  padding:52px 20px 20px;
  background:linear-gradient(to bottom, rgba(0,0,0,.7) 0%, transparent 100%);
  display:flex; align-items:center; gap:12px;
}
.video-call-top-name {
  font-size:16px; font-weight:700; color:#fff; flex:1;
}
.video-call-top-timer {
  font-size:14px; color:rgba(255,255,255,.8);
  font-variant-numeric:tabular-nums; font-weight:600;
}
.video-call-controls {
  position:absolute; bottom:0; left:0; right:0;
  padding:20px 20px 40px;
  background:linear-gradient(to top, rgba(0,0,0,.8) 0%, transparent 100%);
  display:flex; justify-content:center; gap:20px; align-items:flex-end;
}

/* ═══════════════════════════════════════════════════════════════
   VOICE MODULE
═══════════════════════════════════════════════════════════════ */
#voice-inbox { flex:1; overflow-y:auto; padding:8px; }
.vm-bubble { background:rgba(255,255,255,.96); backdrop-filter:blur(8px); border-radius:var(--r4); padding:13px; box-shadow:var(--s1); margin-bottom:9px; border:1px solid rgba(255,255,255,.6); }

/* WhatsApp-style audio/voice player inside message bubbles */
.vm-bubble.audio-type { background:transparent; border:none; box-shadow:none; padding:10px 12px; display:flex; align-items:center; gap:8px; min-width:220px; }

.vm-player { display:flex; align-items:center; gap:8px; flex:1; }
.vm-play-btn { width:38px; height:38px; border-radius:50%; border:none; background:#DC2626; color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:background .15s; }
.vm-play-btn:hover { background:#B91C1C; }
.vm-play-btn i { font-size:14px; }
.vm-track { flex:1; cursor:pointer; position:relative; height:28px; display:flex; align-items:center; }
.vm-bars { display:flex; align-items:center; gap:2px; height:28px; }
.vw-bar { width:2.5px; background:rgba(0,0,0,.25); border-radius:2px; transition:background .1s; }
.msg-row.sent .vw-bar { background:rgba(0,0,0,.3); }
.vw-bar.active { background:#DC2626; }
.vm-progress-line { position:absolute; left:0; top:50%; transform:translateY(-50%); height:2px; background:#DC2626; width:0%; pointer-events:none; border-radius:2px; }
.vm-meta { display:flex; flex-direction:column; align-items:flex-end; gap:3px; flex-shrink:0; max-width:78px; }
.vm-time { font-size:11px; color:var(--t3); white-space:nowrap; }
/* Language chip (HINDI / SPANISH …) — compact, stays inside the card */
.vm-lang-badge {
  font-size:9px; font-weight:700; letter-spacing:.4px; line-height:1;
  color:#fff; background:#DC2626; padding:3px 7px; border-radius:9px;
  white-space:nowrap; max-width:74px; overflow:hidden; text-overflow:ellipsis;
}
/* Keep the waveform from pushing the meta/badge past the card edge in Voice Inbox */
#voice-inbox .vm-track, .vi-item .vm-track { min-width:0; overflow:hidden; }
#voice-inbox .vm-bars, .vi-item .vm-bars { flex-wrap:nowrap; overflow:hidden; }
#voice-inbox .vm-player, .vi-item .vm-player { min-width:0; }
.vm-avatar { width:36px; height:36px; border-radius:50%; object-fit:cover; flex-shrink:0; }
.vm-avatar-init { background:var(--primary); color:#fff; display:flex; align-items:center; justify-content:center; font-size:15px; font-weight:700; }
html[data-theme="dark"] .vw-bar { background:rgba(255,255,255,.3); }
html[data-theme="dark"] .vm-play-btn { background:#DC2626; }

/* Image loading skeleton */
.msg-img-wrap { position:relative; display:block; overflow:hidden; border-radius:11px; }
.msg-img-skeleton { width:240px; height:180px; background:linear-gradient(90deg,#e8e8e8 25%,#f5f5f5 50%,#e8e8e8 75%); background-size:200% 100%; animation:shimmer 1.4s infinite; border-radius:11px; }
html[data-theme="dark"] .msg-img-skeleton { background:linear-gradient(90deg,#2a3942 25%,#1f2c33 50%,#2a3942 75%); background-size:200% 100%; }
@keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
/* ─── CALL BUBBLE ─────────────────────────────────────────────── */
.msg-call { display:flex; align-items:center; gap:10px; padding:10px 14px; min-width:180px; }
.call-bubble-icon { width:36px; height:36px; border-radius:50%; background:rgba(220,38,38,0.15); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.call-bubble-icon i { color:#DC2626; font-size:15px; }
/* Received bubbles are WHITE in this theme, so call text/icon must be DARK
   (the old white overrides made them invisible → looked like empty bubbles). */
.msg-row.recv .call-bubble-icon { background:rgba(220,38,38,0.12); }
.msg-row.recv .call-bubble-icon i { color:#DC2626; }
.call-bubble-info { display:flex; flex-direction:column; gap:2px; }
.call-bubble-title { font-size:14px; font-weight:600; color:var(--text1); }
.msg-row.recv .call-bubble-title { color:var(--text1); }
.call-bubble-status { font-size:11px; color:var(--text3); }
.msg-row.recv .call-bubble-status { color:var(--text3); }

.voice-status-toast { position:fixed; bottom:90px; left:50%; transform:translateX(-50%); background:rgba(17,24,39,.94); backdrop-filter:blur(16px); color:#fff; padding:11px 22px; border-radius:var(--rf); font-size:13px; font-weight:700; display:flex; align-items:center; gap:9px; box-shadow:var(--s3); z-index:9990; opacity:0; transition:opacity .2s; border:1px solid rgba(255,255,255,.1); }
.voice-status-toast.show { opacity:1; }
.vst-pulse { width:8px; height:8px; border-radius:50%; background:#EF4444; animation:micRecord 1.2s ease-in-out infinite; }
.sms-badge { background:var(--danger); color:#fff; border-radius:var(--rf); font-size:10px; font-weight:800; padding:0 6px; min-width:17px; height:17px; line-height:17px; text-align:center; }

/* ═══════════════════════════════════════════════════════════════
   USER RESULTS
═══════════════════════════════════════════════════════════════ */
.user-result { display:flex; align-items:center; gap:13px; padding:11px 13px; border-radius:var(--r3); cursor:pointer; transition:all var(--t1x) var(--spring); }
.user-result:hover { background:var(--active); transform:translateX(3px); }
.user-result-name { font-size:14px; font-weight:700; color:var(--t1); }
.user-result-sub { font-size:12px; color:var(--t3); }

/* ═══════════════════════════════════════════════════════════════
   MOBILE
═══════════════════════════════════════════════════════════════ */
@media (max-width:1100px) {
  :root { --side-w:min(340px,42vw); }
  .chat-main, .messages-area { max-width:100%; overflow-x:hidden; }
}
@media (max-width:1024px) {
  .auth-left { padding:40px 32px 48px; }
  .auth-brand-name { font-size:36px; }
  .auth-brand-tagline { font-size:13px; }
  .auth-float-icon-4 { display:none; }
  .auth-left-content { max-width:340px; }
  .auth-login-card { padding:24px 26px 22px; border-radius:22px; }
  .auth-right-stack { max-width:380px; }
}
@media (max-width:768px) {
  :root { --nav-w:0px; --side-w:100%; }
  .wa-nav { display:none; }
  .sidebar { width:100%; border-right:none; }
  .chat-area { position:absolute; inset:0; transform:translateX(100%); transition:transform var(--t3x) var(--snap); }
  .chat-area.mobile-active { transform:translateX(0); }
  .sidebar.mobile-hidden { display:none; }
  .auth-left { display:none; }
  .auth-right { flex:1; padding:32px 20px; }
  .auth-mobile-logo { display:flex; }
  .auth-split { grid-template-columns:1fr; }
  .auth-login-card { padding:32px 24px 28px; border-radius:28px; }
  .auth-card-glow { width:100%; height:70%; }
  .auth-heading { font-size:32px; }
  .phone-input-wrap { height:60px; }
  .auth-submit-btn { height:60px; font-size:17px; }
  .field-input, .phone-field { font-size:17px; }
  #right-panel { display:none !important; }
  #messages-area { padding:10px 4%; }
}
@media (max-width:480px) {
  .auth-login-card { padding:28px 20px 24px; border-radius:24px; }
  .auth-heading { font-size:26px; }
  .otp-box { width:42px; height:52px; font-size:22px; gap:8px; }
  .otp-boxes { gap:8px; }
  .auth-tab-btn { font-size:12px; padding:10px 8px; }

}

/* ═══════════════════════════════════════════════════════════════
   AI CHAT VIEW
═══════════════════════════════════════════════════════════════ */
#ai-view {
  display:flex; flex-direction:column; height:100%; background:var(--bg);
}
.ai-view-header {
  padding:18px 20px 14px; border-bottom:1px solid var(--b1);
  background:var(--card); flex-shrink:0;
}
.ai-view-header h3 {
  font-size:17px; font-weight:800; color:var(--t1);
  display:flex; align-items:center; gap:10px;
}
.ai-badge {
  font-size:10px; font-weight:800; letter-spacing:.5px;
  background:linear-gradient(135deg,var(--p),var(--p-dark));
  color:#fff; padding:2px 7px; border-radius:var(--rf);
}
.ai-messages {
  flex:1; overflow-y:auto; padding:16px 14px; display:flex;
  flex-direction:column; gap:10px;
}
.ai-msg {
  max-width:80%; padding:10px 14px; border-radius:var(--r4);
  font-size:14px; line-height:1.55; animation:fadeSlideIn .18s var(--snap);
  white-space:pre-wrap; word-break:break-word;
}
.ai-msg.user { align-self:flex-end; background:var(--sent-bg); color:var(--sent-txt); border-radius:var(--r4) var(--r4) 4px var(--r4); }
.ai-msg.ai   { align-self:flex-start; background:var(--card); color:var(--t1); border-radius:var(--r4) var(--r4) var(--r4) 4px; box-shadow:var(--s1); }
.ai-msg.typing-indicator { padding:12px 16px; }
.ai-typing-dots { display:flex; gap:4px; align-items:center; }
.ai-typing-dots span { width:7px; height:7px; background:var(--t3); border-radius:50%; animation:aiBounce 1.2s infinite; }
.ai-typing-dots span:nth-child(2) { animation-delay:.15s; }
.ai-typing-dots span:nth-child(3) { animation-delay:.30s; }
@keyframes aiBounce { 0%,60%,100%{transform:translateY(0)} 30%{transform:translateY(-6px)} }
.ai-input-row {
  display:flex; gap:8px; padding:12px 14px;
  border-top:1px solid var(--b1); background:var(--card); flex-shrink:0;
}
.ai-input-row textarea {
  flex:1; border:1.5px solid var(--b2); border-radius:var(--r4);
  padding:9px 13px; font-size:14px; font-family:inherit; color:var(--t1);
  background:var(--bg); resize:none; max-height:100px; outline:none;
  transition:border-color var(--t1x), box-shadow var(--t1x);
}
.ai-input-row textarea:focus { border-color:var(--p); box-shadow:0 0 0 3px var(--p-glow); }
.ai-send-btn {
  width:42px; height:42px; border-radius:50%; border:none;
  background:linear-gradient(135deg,var(--p),var(--p-dark));
  color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center;
  font-size:16px; flex-shrink:0; transition:transform var(--t1x) var(--spring), box-shadow var(--t1x);
  box-shadow:var(--sg);
}
.ai-send-btn:hover { transform:scale(1.1); box-shadow:var(--sg2); }
.ai-send-btn:disabled { opacity:.5; cursor:not-allowed; transform:none; }
.ai-quick-actions {
  display:flex; gap:6px; padding:0 14px 10px; flex-wrap:wrap;
}
.ai-chip {
  padding:5px 12px; border-radius:var(--rf); border:1.5px solid var(--b2);
  background:var(--card); color:var(--t2); font-size:12px; font-weight:600;
  cursor:pointer; transition:all var(--t1x) var(--spring); font-family:inherit;
  white-space:nowrap;
}
.ai-chip:hover { border-color:var(--p); color:var(--p-dark); background:var(--p-glass); transform:translateY(-1px); }
html[data-theme="dark"] #ai-view { background:var(--bg2); }
html[data-theme="dark"] .ai-view-header,
html[data-theme="dark"] .ai-input-row   { background:#1F2C33; }
html[data-theme="dark"] .ai-msg.ai      { background:#1F2C33; }
html[data-theme="dark"] .ai-input-row textarea { background:#111B21; color:#E9EDEF; border-color:rgba(134,150,160,.25); }

/* ═══════════════════════════════════════════════════════════════
   GIF PICKER
═══════════════════════════════════════════════════════════════ */
#gif-picker {
  position:absolute; bottom:72px; left:10px; right:10px; max-width:380px;
  background:var(--card); border-radius:var(--r5); box-shadow:var(--s4);
  border:1px solid var(--b1); z-index:300; overflow:hidden;
  animation:modalRise .2s var(--spring);
}
#gif-picker.hidden { display:none; }
.gif-search-bar {
  padding:10px 12px; border-bottom:1px solid var(--b1);
  display:flex; gap:8px; align-items:center;
}
.gif-search-bar input {
  flex:1; border:1.5px solid var(--b2); border-radius:var(--r3);
  padding:7px 12px; font-size:13px; font-family:inherit; color:var(--t1);
  background:var(--bg); outline:none;
}
.gif-search-bar input:focus { border-color:var(--p); }
.gif-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:3px;
  max-height:250px; overflow-y:auto; padding:4px;
}
.gif-thumb {
  aspect-ratio:1; object-fit:cover; border-radius:var(--r2);
  cursor:pointer; transition:transform var(--t1x); width:100%;
}
.gif-thumb:hover { transform:scale(1.04); }
.gif-empty { padding:24px; text-align:center; color:var(--t3); font-size:13px; }
html[data-theme="dark"] #gif-picker     { background:#1F2C33; }
html[data-theme="dark"] .gif-search-bar input { background:#111B21; color:#E9EDEF; }

/* ═══════════════════════════════════════════════════════════════
   SMART REPLY CHIPS
═══════════════════════════════════════════════════════════════ */
.smart-reply-row {
  display:flex; gap:6px; padding:4px 0 6px; flex-wrap:wrap;
}
.smart-chip {
  padding:5px 12px; border-radius:var(--rf);
  border:1.5px solid var(--p); color:var(--p-dark);
  background:var(--p-glass); font-size:12px; font-weight:600;
  cursor:pointer; transition:all var(--t1x) var(--spring); font-family:inherit;
}
.smart-chip:hover { background:var(--p); color:#fff; transform:translateY(-1px); }

/* ═══════════════════════════════════════════════════════════════
   ATTACH DROPDOWN MENU
═══════════════════════════════════════════════════════════════ */
.attach-menu {
  position:absolute; bottom:72px; left:10px;
  background:var(--card); border-radius:var(--r4);
  box-shadow:var(--s3); border:1px solid var(--b1);
  padding:6px; z-index:300; min-width:170px;
  animation:modalRise .2s var(--spring);
}
.attach-menu.hidden { display:none; }
.attach-opt {
  display:flex; align-items:center; gap:10px;
  padding:9px 12px; border-radius:var(--r2);
  cursor:pointer; font-size:13px; font-weight:600; color:var(--t1);
  transition:background var(--t1x);
}
.attach-opt:hover { background:var(--active); }
.attach-opt-icon {
  width:34px; height:34px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:15px; flex-shrink:0;
}
html[data-theme="dark"] .attach-menu { background:#1F2C33; }

/* ═══════════════════════════════════════════════════════════════
   SCHEDULED MESSAGE BADGE
═══════════════════════════════════════════════════════════════ */
.sched-badge {
  display:inline-flex; align-items:center; gap:4px;
  background:rgba(245,158,11,.12); color:#B45309;
  border:1px solid rgba(245,158,11,.3);
  font-size:11px; font-weight:700; padding:2px 8px; border-radius:var(--rf);
  margin-top:3px;
}
html[data-theme="dark"] .sched-badge { background:rgba(245,158,11,.15); color:#FCD34D; }

/* ═══════════════════════════════════════════════════════════════
   TRANSLATE OVERLAY (inside context menu result)
═══════════════════════════════════════════════════════════════ */
.translate-result {
  background:var(--p-glass); border:1.5px solid rgba(220,38,38,.25);
  border-radius:var(--r3); padding:10px 14px; margin-top:6px;
  font-size:13.5px; color:var(--t1); line-height:1.5;
}
.translate-lang-label {
  font-size:10px; font-weight:800; text-transform:uppercase;
  letter-spacing:.5px; color:var(--p-dark); margin-bottom:4px;
}

/* ═══════════════════════════════════════════════════════════════
   DARK MODE TOGGLE BUTTON
═══════════════════════════════════════════════════════════════ */
#dark-mode-btn {
  width:38px; height:38px; border-radius:50%; border:none;
  background:none; color:var(--t3); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  font-size:17px; transition:all var(--t1x) var(--spring);
}
#dark-mode-btn:hover { background:var(--active); color:var(--p-dark); transform:rotate(20deg); }

/* ═══════════════════════════════════════════════════════════════
   CAMERA CAPTURE MODAL
═══════════════════════════════════════════════════════════════ */
#camera-modal {
  position:fixed; inset:0; z-index:7000;
  background:rgba(0,0,0,.9); display:flex;
  align-items:center; justify-content:center; flex-direction:column; gap:16px;
}
#camera-modal.hidden { display:none; }
#camera-video { border-radius:var(--r4); max-width:90vw; max-height:60vh; }
#camera-canvas { display:none; }
.camera-controls { display:flex; gap:14px; align-items:center; }
.camera-snap-btn {
  width:64px; height:64px; border-radius:50%; border:4px solid #fff;
  background:rgba(255,255,255,.15); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  font-size:24px; color:#fff; transition:all var(--t2x) var(--spring);
}
.camera-snap-btn:hover { background:rgba(255,255,255,.25); transform:scale(1.08); }
.camera-close-btn {
  position:absolute; top:18px; right:18px; width:38px; height:38px;
  border-radius:50%; border:none; background:rgba(255,255,255,.2);
  color:#fff; cursor:pointer; font-size:17px;
  display:flex; align-items:center; justify-content:center;
}

/* ═══════════════════════════════════════════════════════════════
   LOCATION MESSAGE
═══════════════════════════════════════════════════════════════ */
.location-msg {
  display:flex; align-items:center; gap:10px;
  padding:10px 14px; background:var(--card);
  border-radius:var(--r3); border:1px solid var(--b1);
  cursor:pointer; text-decoration:none; color:inherit;
  transition:background var(--t1x);
}
.location-msg:hover { background:var(--active); }
.location-icon { font-size:26px; flex-shrink:0; }
.location-text { font-size:13px; font-weight:600; color:var(--t1); }
.location-coords { font-size:11px; color:var(--t3); margin-top:2px; }

/* ═══════════════════════════════════════════════════════════════
   IMPROVE MESSAGE SUGGESTION
═══════════════════════════════════════════════════════════════ */
.improve-suggestion {
  background:var(--card); border:1.5px solid var(--p);
  border-radius:var(--r3); padding:10px 14px;
  font-size:13px; color:var(--t1); line-height:1.5;
  animation:fadeSlideIn .2s var(--snap);
}
.improve-label {
  font-size:10px; font-weight:800; color:var(--p-dark);
  text-transform:uppercase; letter-spacing:.5px; margin-bottom:5px;
}
.improve-actions { display:flex; gap:8px; margin-top:8px; }
.improve-use-btn {
  padding:5px 12px; border-radius:var(--rf);
  background:var(--p); color:#fff; border:none; cursor:pointer;
  font-size:12px; font-weight:700; font-family:inherit;
  transition:all var(--t1x) var(--spring);
}
.improve-use-btn:hover { background:var(--p-dark); transform:scale(1.04); }
.improve-dismiss-btn {
  padding:5px 12px; border-radius:var(--rf);
  background:none; color:var(--t3); border:1.5px solid var(--b2);
  cursor:pointer; font-size:12px; font-weight:700; font-family:inherit;
}

/* ═══════════════════════════════════════════════════════════════
   IMAGE PREVIEW OVERLAY  (WhatsApp style)
═══════════════════════════════════════════════════════════════ */
.ip-overlay {
  position:fixed; inset:0; z-index:9998;
  background:#111;
  display:flex; flex-direction:column;
  animation:ipIn .22s cubic-bezier(.34,1.2,.64,1) both;
}
.ip-overlay.hidden { display:none; }
@keyframes ipIn {
  from { opacity:0; transform:scale(.96); }
  to   { opacity:1; transform:scale(1); }
}

/* Top bar */
.ip-topbar {
  height:56px; display:flex; align-items:center; gap:8px;
  padding:0 12px 0 8px;
  background:rgba(0,0,0,.55); backdrop-filter:blur(10px);
  flex-shrink:0;
}
.ip-close-btn {
  width:40px; height:40px; border-radius:50%; border:none;
  background:none; color:#fff; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background .15s; flex-shrink:0;
}
.ip-close-btn:hover { background:rgba(255,255,255,.12); }
.ip-title {
  font-size:15px; font-weight:600; color:#fff; flex:1;
  font-family:'Inter',sans-serif;
}
.ip-topbar-right { display:flex; align-items:center; gap:2px; }
.ip-tool-btn {
  width:38px; height:38px; border-radius:50%; border:none;
  background:none; color:rgba(255,255,255,.75); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:all .15s;
}
.ip-tool-btn:hover { background:rgba(255,255,255,.14); color:#fff; }

/* Image canvas */
.ip-canvas {
  flex:1; display:flex; align-items:center; justify-content:center;
  overflow:hidden; position:relative; min-height:0;
}
#ip-img {
  max-width:100%; max-height:100%;
  object-fit:contain;
  animation:ipImgIn .3s .05s cubic-bezier(.34,1.1,.64,1) both;
  border-radius:4px;
  user-select:none;
}
@keyframes ipImgIn {
  from { opacity:0; transform:scale(.9); }
  to   { opacity:1; transform:scale(1); }
}

/* Footer */
.ip-footer {
  background:rgba(0,0,0,.7); backdrop-filter:blur(16px);
  padding:10px 12px 14px; flex-shrink:0;
}
.ip-recipient {
  display:flex; align-items:center; gap:10px;
  margin-bottom:10px; padding:0 4px;
}
.ip-recv-avatar {
  width:32px; height:32px; border-radius:50%;
  background:#DC2626; flex-shrink:0;
  overflow:hidden; font-size:13px; font-weight:700;
  display:flex; align-items:center; justify-content:center; color:#fff;
}
.ip-recv-avatar img { width:100%; height:100%; object-fit:cover; }
.ip-recv-name {
  font-size:13.5px; font-weight:600; color:#fff;
  font-family:'Inter',sans-serif;
}
.ip-caption-row {
  display:flex; align-items:center; gap:10px;
}
.ip-caption-box {
  flex:1; display:flex; align-items:center; gap:8px;
  background:rgba(255,255,255,.12); border-radius:22px;
  padding:8px 14px;
}
.ip-emoji-btn {
  background:none; border:none; color:rgba(255,255,255,.6);
  cursor:pointer; font-size:20px; flex-shrink:0;
  display:flex; align-items:center; padding:0;
  transition:color .15s;
}
.ip-emoji-btn:hover { color:#fff; }
#ip-caption {
  flex:1; border:none; outline:none; background:transparent;
  font-size:15px; color:#fff; font-family:'Inter',sans-serif;
  caret-color:#DC2626;
}
#ip-caption::placeholder { color:rgba(255,255,255,.45); }
.ip-send-btn {
  width:52px; height:52px; border-radius:50%; border:none;
  background:#DC2626; color:#fff; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; box-shadow:0 2px 12px rgba(220,38,38,.45);
  transition:background .15s, transform .15s;
}
.ip-send-btn:hover { background:#DC2626; transform:scale(1.06); }
.ip-send-btn:active { transform:scale(.93); background:#1DAA56; }

@keyframes spin { to { transform:rotate(360deg); } }

/* ═══════════════════════════════════════════════════════════════
   AI CALL OVERLAY
═══════════════════════════════════════════════════════════════ */
.ai-call-overlay {
  position:fixed; inset:0; z-index:99990;
  display:flex; flex-direction:column;
  align-items:center; justify-content:space-between;
  padding:0 0 36px;
  background:#111;
  animation:aiCallIn .35s cubic-bezier(.34,1.1,.64,1) both;
}
.ai-call-overlay.hidden { display:none; }
@keyframes aiCallIn {
  from { opacity:0; transform:scale(.96); }
  to   { opacity:1; transform:scale(1); }
}

/* Blurred dark background */
.ai-call-bg {
  position:absolute; inset:0;
  background:radial-gradient(ellipse at 50% 30%, #0D2B1A 0%, #050E09 100%);
  z-index:0;
}

/* Top bar */
.ai-call-topbar {
  position:relative; z-index:2;
  text-align:center; padding:52px 24px 0;
  display:flex; flex-direction:column; align-items:center; gap:6px;
}
.ai-call-name {
  font-size:24px; font-weight:700; color:#fff;
  font-family:'Inter',sans-serif; letter-spacing:-.3px;
}
.ai-call-status {
  font-size:14px; color:rgba(255,255,255,.6);
  font-family:'Inter',sans-serif;
}

/* Center — robot + subtitle */
.ai-call-center {
  position:relative; z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:28px;
  flex:1; justify-content:center; width:100%;
}
.ai-call-robot-wrap {
  position:relative; display:flex; align-items:center; justify-content:center;
}
.ai-call-robot {
  width:280px; height:280px; object-fit:contain;
  background:transparent;
  filter:drop-shadow(0 12px 50px rgba(220,38,38,.35)) drop-shadow(0 0 80px rgba(220,38,38,.15));
  transition:transform .3s ease, filter .3s ease;
  position:relative; z-index:2;
}
.ai-call-robot.talking {
  animation:aiRobotTalk .5s ease-in-out infinite alternate;
}
@keyframes aiRobotTalk {
  from { transform:translateY(0) scale(1); filter:drop-shadow(0 8px 40px rgba(220,38,38,.25)); }
  to   { transform:translateY(-8px) scale(1.03); filter:drop-shadow(0 16px 50px rgba(220,38,38,.5)); }
}

/* Talking rings */
.ai-talk-ring {
  position:absolute; border-radius:50%;
  border:2px solid rgba(220,38,38,.35);
  animation:aiRing 2s ease-out infinite;
  display:none;
}
.ai-talk-ring1 { width:270px; height:270px; animation-delay:0s; }
.ai-talk-ring2 { width:320px; height:320px; animation-delay:.6s; }
.ai-call-robot.talking ~ .ai-talk-ring { display:block; }
@keyframes aiRing {
  0%   { transform:scale(.85); opacity:.7; }
  100% { transform:scale(1.1);  opacity:0; }
}

/* Live subtitle */
.ai-call-subtitle {
  min-height:52px; max-width:80%; text-align:center;
  font-size:15px; color:rgba(255,255,255,.85);
  font-family:'Inter',sans-serif; line-height:1.5;
  background:rgba(0,0,0,.45); border-radius:12px;
  padding:8px 16px; backdrop-filter:blur(8px);
  transition:opacity .3s; opacity:0;
}
.ai-call-subtitle.visible { opacity:1; }

/* User's cam thumbnail */
.ai-call-user-cam {
  position:absolute; bottom:120px; right:20px; z-index:3;
  width:100px; border-radius:12px;
  box-shadow:0 4px 16px rgba(0,0,0,.5);
  transform:scaleX(-1);
}

/* Bottom controls */
.ai-call-controls {
  position:relative; z-index:2;
  display:flex; align-items:center; gap:28px;
}
.ai-ctrl-btn {
  width:60px; height:60px; border-radius:50%; border:none;
  display:flex; align-items:center; justify-content:center;
  font-size:20px; cursor:pointer; color:#fff;
  transition:transform .15s, background .15s, box-shadow .15s;
  background:rgba(255,255,255,.15);
}
.ai-ctrl-btn:hover { background:rgba(255,255,255,.25); transform:scale(1.08); }
.ai-ctrl-btn:active { transform:scale(.93); }
.ai-ctrl-mute.muted { background:rgba(239,68,68,.35); }
.ai-ctrl-end {
  width:68px; height:68px; font-size:22px;
  background:#EF4444;
  box-shadow:0 4px 20px rgba(239,68,68,.45);
}
.ai-ctrl-end:hover { background:#DC2626; box-shadow:0 6px 24px rgba(239,68,68,.6); }

/* ── Voice Inbox panel (hidden by default, slides in from right) ── */
.voice-inbox {
  position:fixed; top:0; right:0; width:340px; max-width:90vw; height:100%;
  background:#fff; box-shadow:-4px 0 24px rgba(0,0,0,.18);
  z-index:1200; display:flex; flex-direction:column;
  transform:translateX(105%);
  transition:transform .3s cubic-bezier(.4,0,.2,1);
}
.voice-inbox.open { transform:translateX(0); }
.vi-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px; font-weight:600; font-size:15px;
  border-bottom:1px solid rgba(0,0,0,.08); color:#111B21;
}
.vi-header i { color:#DC2626; margin-right:6px; }
.vi-close {
  background:none; border:none; cursor:pointer; font-size:14px;
  color:#667781; width:30px; height:30px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
}
.vi-close:hover { background:rgba(0,0,0,.06); }
.vi-note {
  padding:8px 16px; font-size:12px; color:#667781;
  border-bottom:1px solid rgba(0,0,0,.05); background:rgba(255,45,85,.05);
}
.vi-body { flex:1; overflow-y:auto; padding:12px 14px; }
.vi-empty { text-align:center; color:#8696A0; padding:48px 14px; font-size:13.5px; }
.vi-empty i { font-size:36px; margin-bottom:12px; display:block; opacity:.35; }
.vi-empty small { display:block; margin-top:6px; font-size:11.5px; opacity:.75; }
.vi-loading { text-align:center; color:#8696A0; padding:28px; font-size:13px; }
.vi-item {
  background:rgba(0,0,0,.03); border-radius:12px;
  padding:10px 12px; margin-bottom:10px;
}
.vi-item-head {
  display:flex; align-items:center; justify-content:space-between;
  font-size:11.5px; color:#667781; margin-bottom:6px;
}
.vi-tcount { color:#DC2626; font-weight:600; }
html[data-theme="dark"] .voice-inbox { background:#111B21; }
html[data-theme="dark"] .vi-header { color:#E9EDEF; border-color:rgba(255,255,255,.08); }
html[data-theme="dark"] .vi-close:hover { background:rgba(255,255,255,.08); }
html[data-theme="dark"] .vi-note { border-color:rgba(255,255,255,.05); }
html[data-theme="dark"] .vi-item { background:rgba(255,255,255,.05); }

/* ── WhatsApp-style quick reaction bar in message context menu ── */
.ctx-react-bar {
  display:flex; align-items:center; gap:2px;
  padding:6px 8px; margin:-2px -2px 4px;
  border-bottom:1px solid var(--b1);
}
@media (max-width:600px) {
  #context-menu { min-width:190px; max-width:calc(100vw - 24px); }
  .ctx-item,.ctx-menu-item { padding:13px 16px; font-size:14px; }
  .msg-file { min-width:0; max-width:calc(100vw - 80px); }
  .call-card,.incoming-call-card { min-width:0; width:min(92vw,360px); padding:30px 22px 26px; }
}
/* Tools are intentionally minimal: only Auto Reply and Updates are exposed. */
#tools-page .tp-item[onclick*="openTranscription"],
#tools-page .tp-item[onclick*="bizCatalogue"],
#tools-page .tp-item[onclick*="bizAdvertise"],
#tools-page .tp-item[onclick*="bizBroadcast"],
#tools-page .tp-item[onclick*="bizQuickReplies"],
#tools-page .tp-item[onclick*="bizLabels"],
#tools-page .tp-item[onclick*="bizAudience"],
#tools-page .tp-item[onclick*="bizHelp"] { display:none!important; }
#tools-page .tp-section:has(+ .tp-item[onclick*="openTranscription"]),
#tools-page .tp-section:has(+ .tp-item[onclick*="bizCatalogue"]),
#tools-page .tp-section:has(+ .tp-item[onclick*="bizAdvertise"]),
#tools-page .tp-section:has(+ .tp-item[onclick*="bizQuickReplies"]) { display:none!important; }
#tools-nav-btn, #tools-page { display:none!important; }
/* Phoneopia is audio-call only. Keep the old video DOM harmless for cached
   sessions, but never expose video calling in the UI. */
#video-call-btn, #videoCallOverlay, #video-call-btn + *[data-video-call] { display:none!important; }
.ctx-react-emoji {
  background:none; border:none; cursor:pointer;
  font-size:20px; width:32px; height:32px; line-height:1;
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  transition:transform .12s ease, background .12s ease;
}
.ctx-react-emoji:hover { transform:scale(1.3); background:var(--active); }
.ctx-react-plus {
  font-size:13px; color:var(--t3);
  background:var(--active); border-radius:50%;
}
.ctx-react-plus:hover { transform:scale(1.15); }

/* ── Voice message bubble — WhatsApp-style compact player ── */
.vm-outer { display:flex; }
.vm-outer.mine { justify-content:flex-end; }
.vm-outer .vm-bubble {
  background:transparent; border:none; box-shadow:none; backdrop-filter:none;
  margin:0; padding:8px 10px 6px;
  display:flex; align-items:center; gap:9px;
  min-width:250px; max-width:330px;
}

/* Transcript + task cards belong to Voice Inbox — hide inside chat bubbles */
.vm-outer .vm-trans-row, .vm-outer .vm-tasks-block, .vm-outer .vm-lang-badge { display:none; }
/* Avatar with mic badge */
.vm-ava-wrap { position:relative; flex-shrink:0; width:40px; height:40px; }
.vm-ava-wrap .vm-avatar { width:40px; height:40px; }
.vm-mic-badge {
  position:absolute; bottom:-2px; right:-3px;
  width:17px; height:17px; border-radius:50%;
  background:#DC2626; color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:9px; border:2px solid #fff;
}

html[data-theme="dark"] .vm-mic-badge { border-color:#202C33; background:#DC2626; }

/* Voice/audio bubble polish — keep waveform inside rounded corners */
.vm-outer .vm-bubble { padding:4px 4px 2px; min-width:230px; max-width:300px; }
.vm-outer .vm-track, .vm-bubble.audio-type .vm-track { overflow:hidden; min-width:0; }
.vm-outer .vm-bars, .vm-bubble.audio-type .vm-bars { flex-wrap:nowrap; }
.vm-bubble.audio-type { min-width:230px; max-width:300px; padding:4px 4px 2px; }

/* Avatar sizing inside voice/audio bubbles */
.vm-ava-wrap .avatar-wrap { width:40px; height:40px; border-radius:50%; overflow:hidden; }
.vm-ava-wrap .avatar { width:100%; height:100%; border-radius:50%; object-fit:cover; }

/* Voice playback: bars fill green, no progress line, time never clipped */
.vm-progress-line { display:none !important; }
.vw-bar.active,
.msg-row.sent .vw-bar.active,
html[data-theme="dark"] .vw-bar.active { background:#DC2626 !important; }
.vm-meta { flex-shrink:0; min-width:36px; }

/* ── Rich message cards (location / contact / poll / event) ── */
.rich-card { min-width:200px; max-width:260px; }
.location-card { display:flex; flex-direction:column; border-radius:10px; overflow:hidden; }
.rc-map { height:90px; background:linear-gradient(135deg,rgba(255,45,85,.25),rgba(7,94,84,.35));
  display:flex; align-items:center; justify-content:center; }
.rc-map i { font-size:34px; color:#E53935; }
.rc-loc-link { display:block; padding:8px 10px; text-decoration:none; }
.rc-loc-title { font-size:13.5px; font-weight:600; color:inherit; }
.rc-loc-sub { font-size:11.5px; opacity:.65; }
.contact-card, .event-card, .poll-card { padding:4px 2px; }
.rc-row { display:flex; align-items:center; gap:10px; padding:6px 8px; }
.rc-avatar { width:42px; height:42px; border-radius:50%; background:#E6526F; color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:18px; flex-shrink:0; }
.rc-event-icon { width:42px; height:42px; border-radius:10px; background:rgba(230,82,111,.15);
  display:flex; align-items:center; justify-content:center; color:#E6526F; font-size:18px; flex-shrink:0; }
.rc-info { min-width:0; }
.rc-name { font-size:14px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rc-sub { font-size:12px; opacity:.6; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rc-action { border-top:1px solid rgba(0,0,0,.1); margin-top:4px; padding:9px; text-align:center;
  color:#E6526F; font-weight:600; font-size:13.5px; cursor:pointer; }
.rc-action:hover { background:rgba(255,45,85,.08); }
.rc-poll-q { font-size:14.5px; font-weight:700; padding:6px 8px 2px; }
.rc-poll-sub { font-size:11.5px; opacity:.55; padding:0 8px 6px; }
.rc-poll-opt { display:flex; align-items:center; gap:8px; padding:8px; cursor:pointer; position:relative; flex-wrap:wrap; }
.rc-poll-opt:hover { background:rgba(0,0,0,.04); border-radius:8px; }
.rc-radio { width:16px; height:16px; border-radius:50%; border:2px solid rgba(0,0,0,.3); flex-shrink:0; }
.rc-poll-bar { width:100%; height:4px; margin-left:24px; background:rgba(0,0,0,.1); border-radius:2px; }
html[data-theme="dark"] .rc-action { border-color:rgba(255,255,255,.1); }
html[data-theme="dark"] .rc-radio { border-color:rgba(255,255,255,.35); }
html[data-theme="dark"] .rc-poll-bar { background:rgba(255,255,255,.12); }

/* ── Image upload optimistic preview ── */
.msg-img-wrap.uploading { position:relative; }
.img-uploading-overlay {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.35); border-radius:inherit;
}
.img-spin {
  width:34px; height:34px; border-radius:50%;
  border:3px solid rgba(255,255,255,.4); border-top-color:#fff;
  animation:imgspin .8s linear infinite;
}
@keyframes imgspin { to { transform:rotate(360deg); } }
.upload-progress-panel { width:100%; min-width:150px; margin-top:8px; color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.55); }
.upload-progress-row { display:flex; justify-content:space-between; gap:8px; font-size:11px; line-height:1.2; }
.upload-progress-track { height:4px; margin-top:5px; border-radius:4px; overflow:hidden; background:rgba(255,255,255,.35); }
.upload-progress-fill { height:100%; border-radius:4px; background:#fff; transition:width .12s ease; }
.msg-bubble > div > .upload-progress-panel { color:var(--t2,#667781); text-shadow:none; }
.msg-bubble > div > .upload-progress-panel .upload-progress-track { background:rgba(220,38,38,.18); }
.msg-bubble > div > .upload-progress-panel .upload-progress-fill { background:var(--primary,#DC2626); }

/* ── Blocked-chat bar (replaces composer) ── */
.block-bar {
  display:flex; align-items:center; justify-content:center; gap:14px;
  padding:14px 16px; background:var(--panel,#fff);
  border-top:1px solid var(--b1,rgba(0,0,0,.08));
}
.block-bar-btn {
  display:flex; align-items:center; gap:8px;
  padding:10px 22px; border-radius:24px; cursor:pointer; font-size:14px; font-weight:600;
  background:transparent; border:1.5px solid var(--b1,#ddd); color:var(--t2,#54656f);
  transition:background .15s;
}
.block-bar-btn:hover { background:rgba(0,0,0,.04); }
.block-bar-btn.danger { color:#EF4444; border-color:rgba(239,68,68,.4); }
.block-bar-btn.danger:hover { background:rgba(239,68,68,.08); }
html[data-theme="dark"] .block-bar { background:#202C33; border-color:rgba(255,255,255,.08); }

/* ── Attach menu: scroll for full option list ── */
.attach-menu { max-height:380px; overflow-y:auto; }
/* Contact picker + modal inputs */
.contact-pick-list { max-height:340px; overflow-y:auto; }
.contact-pick-row { display:flex; align-items:center; gap:12px; padding:10px 8px; cursor:pointer; border-radius:10px; }
.contact-pick-row:hover { background:rgba(0,0,0,.05); }
.contact-pick-row .avatar-wrap, .contact-pick-row .avatar { width:42px; height:42px; border-radius:50%; }
.modal-input { width:100%; padding:11px 14px; margin-bottom:10px; border:1.5px solid var(--b1,#e0e0e0); border-radius:10px; font-size:14px; outline:none; background:var(--bg2,#fff); color:var(--t1,#111); }
.modal-input:focus { border-color:var(--primary,#DC2626); }
.btn-primary { background:var(--primary,#DC2626); color:#fff; border:none; border-radius:10px; padding:11px; font-size:14px; font-weight:600; cursor:pointer; }
.btn-primary:hover { filter:brightness(.96); }
.btn-ghost { background:transparent; color:var(--t2,#667781); border:1.5px solid var(--b1,#e7ebee); border-radius:10px; padding:11px 16px; font-size:14px; font-weight:600; cursor:pointer; }
.btn-ghost:hover { background:rgba(0,0,0,.04); }

/* Compulsory Google Drive connect modal */
#gd-overlay { display:none !important; }
#gd-acct, #gd-acct + * { display:none !important; }
#gd-acct { display:none !important; }
.settings-group:has(#gd-acct) { display:none !important; }
#gd-overlay { position:fixed; inset:0; z-index:9500; background:rgba(8,20,15,.6); backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center; padding:20px; }
.gd-card { background:#fff; border-radius:20px; padding:34px 28px; max-width:400px; width:100%; text-align:center; box-shadow:0 24px 70px rgba(0,0,0,.35); }
.gd-ic { width:72px; height:72px; margin:0 auto 16px; border-radius:50%; background:rgba(220,38,38,.12); display:flex; align-items:center; justify-content:center; font-size:34px; color:#B91C1C; }
.gd-card h2 { font-size:21px; margin-bottom:8px; color:#111b21; }
.gd-card p { font-size:13.5px; color:#667781; line-height:1.6; margin-bottom:8px; }
.gd-card .gd-warn { color:#EF4444; font-weight:500; }
.gd-btn { margin-top:16px; width:100%; padding:13px; border:none; border-radius:12px; background:#DC2626; color:#fff; font-size:15px; font-weight:600; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:10px; }
.gd-btn:hover { filter:brightness(.96); }
.gd-later { margin-top:10px; width:100%; padding:11px; border:none; background:transparent; color:#667781; font-size:14px; font-weight:600; cursor:pointer; border-radius:10px; }
.gd-later:hover { background:rgba(0,0,0,.04); }
.gd-status { margin-top:12px; font-size:13px; color:#667781; min-height:16px; }
html[data-theme="dark"] .gd-card { background:#111b21; } html[data-theme="dark"] .gd-card h2 { color:#E9EDEF; }

/* Phoneopia AI emergency call */
#ai-call-overlay { position:fixed; inset:0; z-index:9000; background:linear-gradient(160deg,#0a2e1f,#0b141a); display:flex; align-items:center; justify-content:center; }
.aic-card { text-align:center; color:#fff; padding:30px; max-width:340px; }
.aic-badge { display:inline-block; font-size:10.5px; font-weight:700; letter-spacing:2px; color:#DC2626; border:1px solid rgba(220,38,38,.4); border-radius:20px; padding:5px 14px; margin-bottom:24px; }
.aic-avatar { width:120px; height:120px; border-radius:50%; margin:0 auto 18px; background:linear-gradient(135deg,#DC2626,#B91C1C); display:flex; align-items:center; justify-content:center; overflow:hidden; box-shadow:0 0 0 0 rgba(220,38,38,.5); animation:aicpulse 1.6s infinite; }
.aic-avatar img { width:100%; height:100%; object-fit:cover; }
@keyframes aicpulse { 0%{box-shadow:0 0 0 0 rgba(220,38,38,.5)} 70%{box-shadow:0 0 0 22px rgba(220,38,38,0)} 100%{box-shadow:0 0 0 0 rgba(220,38,38,0)} }
.aic-title { font-size:24px; font-weight:700; }
.aic-sub { font-size:14px; color:#aebac1; margin-top:6px; }
.aic-actions { display:flex; justify-content:center; gap:50px; margin:34px 0 12px; }
.aic-btn { width:64px; height:64px; border-radius:50%; border:none; cursor:pointer; font-size:24px; color:#fff; }
.aic-btn.decline { background:#ef4444; }
.aic-btn.accept { background:#DC2626; animation:aicpulse 1.6s infinite; }
.aic-btn.accept.talking { animation:none; background:#B91C1C; }
.aic-hint { font-size:13px; color:#8696a0; }

/* Business tools modals: inputs + rows */
#modal-body .field, #modal-body input.field, #modal-body textarea.field {
  width:100%; padding:11px 13px; border:1.5px solid var(--b1,#e7ebee); border-radius:10px;
  font-size:14px; font-family:inherit; outline:none; background:#fff; color:var(--t1,#111b21); box-sizing:border-box;
}
#modal-body .field:focus { border-color:var(--p,#DC2626); }
.biz-row { display:flex; align-items:center; padding:10px 2px; border-bottom:1px solid var(--b1,#f0f2f5); }
.biz-row:last-child { border-bottom:none; }
html[data-theme="dark"] #modal-body .field { background:#1F2C33; color:#E9EDEF; border-color:rgba(134,150,160,.25); }
html[data-theme="dark"] .biz-row { border-color:rgba(255,255,255,.08); }

/* Business Tools — full page */
/* Tools sits in the chat-LIST column only (like Updates/Status), so the main
   chat area + empty state stays visible on the right. */
#tools-page { position:fixed; top:0; bottom:0; left:var(--nav-w); width:var(--side-w); z-index:120; display:flex; background:var(--bg,#f0f2f5); animation:tpSlideIn .22s ease both; }
@keyframes tpSlideIn { from { opacity:0; transform:translateX(-10px); } to { opacity:1; transform:none; } }
.tp-panel { width:100%; height:100%; background:#fff; box-shadow:2px 0 24px rgba(0,0,0,.08); display:flex; flex-direction:column; }
.tp-rest { display:none; }
.tp-head { display:flex; align-items:center; gap:16px; padding:20px 24px; }
.tp-back { background:transparent; border:none; font-size:18px; color:var(--t1,#111b21); cursor:pointer; width:34px; height:34px; border-radius:50%; }
.tp-back:hover { background:rgba(0,0,0,.06); }
.tp-title { font-size:22px; font-weight:700; }
.tp-body { padding:0 16px 24px; overflow-y:auto; }
.tp-section { font-size:12px; font-weight:600; color:var(--t2,#667781); padding:18px 8px 8px; }
.tp-item { display:flex; align-items:center; gap:16px; padding:14px 8px; border-radius:12px; cursor:pointer; }
.tp-item:hover { background:rgba(0,0,0,.035); }
.tp-ic { width:42px; height:42px; border-radius:11px; display:flex; align-items:center; justify-content:center; font-size:18px; flex:none; }
.tp-info { flex:1; min-width:0; }
.tp-name { font-weight:600; font-size:15.5px; }
.tp-desc { font-size:12.5px; color:var(--t2,#667781); margin-top:2px; line-height:1.4; }
html[data-theme="dark"] #tools-page { background:rgba(0,0,0,.3); }
html[data-theme="dark"] .tp-panel { background:#111b21; }
html[data-theme="dark"] .tp-item:hover { background:rgba(255,255,255,.05); }
@media(max-width:720px){ .tp-panel{width:100%} }

/* Business Tools */
.tools-list { display:flex; flex-direction:column; gap:10px; }
.tool-card { display:flex; align-items:center; gap:14px; padding:14px; border:1px solid var(--b1,#e7ebee); border-radius:14px; cursor:pointer; transition:.15s; }
.tool-card:hover { background:rgba(220,38,38,.05); border-color:rgba(220,38,38,.35); }
.tool-ic { width:46px; height:46px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:19px; flex:none; }
.tool-info { flex:1; min-width:0; }
.tool-name { font-weight:600; font-size:15px; }
.tool-desc { font-size:12.5px; color:var(--t2,#667781); margin-top:2px; line-height:1.4; }
.tool-state { font-size:11px; font-weight:700; letter-spacing:.5px; padding:4px 10px; border-radius:20px; background:#eceff1; color:#90a4ae; flex:none; }
.tool-state.on { background:rgba(220,38,38,.16); color:#B91C1C; }
.transcribe-btn { margin-top:6px; background:rgba(255,255,255,.85); border:1px solid var(--b1,#e7ebee); color:#2563eb; font-size:11.5px; font-weight:600; padding:5px 10px; border-radius:8px; cursor:pointer; display:inline-flex; align-items:center; gap:6px; }
.transcribe-btn:hover { background:#fff; }
.transcribe-btn:disabled { opacity:.7; cursor:default; }
.msg-transcript { margin-top:6px; font-size:13px; line-height:1.5; background:rgba(0,0,0,.05); border-radius:9px; padding:8px 11px; color:var(--t1,#111b21); }
.scam-warn { margin-top:6px; font-size:12px; line-height:1.45; border-radius:9px; padding:7px 10px; display:flex; gap:6px; align-items:flex-start; }
.scam-warn.scam { background:rgba(239,68,68,.12); color:#b91c1c; border:1px solid rgba(239,68,68,.3); }
.scam-warn.susp { background:rgba(245,158,11,.14); color:#b45309; border:1px solid rgba(245,158,11,.3); }
.scam-warn i { margin-top:1px; }
.msg-xlate { margin-top:6px; font-size:13px; line-height:1.5; background:rgba(59,130,246,.1); border-radius:9px; padding:8px 11px; color:var(--t1,#111b21); }
.lt-caption { margin-top:12px; max-width:340px; background:rgba(0,0,0,.55); color:#fff; font-size:14px; line-height:1.5; padding:10px 14px; border-radius:12px; text-align:center; transition:opacity .4s; backdrop-filter:blur(6px); }
.lt-caption i { color:#DC2626; margin-right:6px; }
.lt-caption-video { position:absolute; bottom:120px; left:50%; transform:translateX(-50%); z-index:20; margin-top:0; }
.lt-caption.hidden { display:none; }
#lt-popup { position:fixed; z-index:100000; width:280px; background:#fff; border-radius:16px; padding:16px; box-shadow:0 18px 50px rgba(0,0,0,.4); opacity:0; transition:.18s; }
#lt-popup.show { opacity:1; }
/* inside call overlay: centered just above the control bar */
#lt-popup.lt-incall { position:absolute; left:50%; bottom:150px; transform:translateX(-50%) translateY(8px); }
#lt-popup.lt-incall.show { transform:translateX(-50%) translateY(0); }
#lt-popup .ltp-arrow { position:absolute; bottom:-9px; left:50%; transform:translateX(-50%); width:18px; height:18px; background:#fff; rotate:45deg; box-shadow:3px 3px 8px rgba(0,0,0,.08); }
#lt-popup .ltp-title { font-weight:700; font-size:15px; margin-bottom:12px; color:#111b21; }
#lt-popup .ltp-title i { color:#DC2626; margin-right:6px; }
#lt-popup .ltp-l { display:block; font-size:11.5px; font-weight:600; color:#667781; margin:8px 0 4px; }
#lt-popup .ltp-sel { width:100%; padding:9px 10px; border:1.5px solid #e7ebee; border-radius:9px; font-size:14px; background:#fff; color:#111b21; }
#lt-popup .ltp-row { display:flex; align-items:center; justify-content:space-between; margin:12px 0 6px; font-size:14px; font-weight:600; color:#111b21; }
#lt-popup .ltp-gender { display:flex; gap:8px; margin-top:2px; }
#lt-popup .ltp-g { flex:1; padding:8px; border:1.5px solid #e7ebee; border-radius:9px; background:#fff; color:#667781; font-size:13px; font-weight:600; cursor:pointer; }
#lt-popup .ltp-g.on { border-color:#DC2626; background:rgba(220,38,38,.12); color:#B91C1C; }
#lt-popup .ltp-save { width:100%; margin-top:10px; padding:11px; border:none; border-radius:10px; background:#DC2626; color:#fff; font-weight:600; font-size:14px; cursor:pointer; }
html[data-theme="dark"] #lt-popup { background:#1f2c33; } html[data-theme="dark"] #lt-popup .ltp-title, html[data-theme="dark"] #lt-popup .ltp-row { color:#E9EDEF; }
html[data-theme="dark"] #lt-popup .ltp-arrow { background:#1f2c33; } html[data-theme="dark"] #lt-popup .ltp-sel { background:#2a3942; color:#E9EDEF; border-color:rgba(255,255,255,.15); }
html[data-theme="dark"] .msg-xlate { color:#E9EDEF; }
html[data-theme="dark"] .msg-transcript { background:rgba(255,255,255,.08); color:#E9EDEF; }
html[data-theme="dark"] .tool-card { border-color:rgba(255,255,255,.1); }
html[data-theme="dark"] .btn-ghost { border-color:rgba(255,255,255,.14); color:#aebac1; }
html[data-theme="dark"] .modal-input { background:#2A3942; border-color:rgba(255,255,255,.12); color:#E9EDEF; }
html[data-theme="dark"] .contact-pick-row:hover { background:rgba(255,255,255,.06); }

/* ── Video message — compact (WhatsApp size) ── */
.msg-video-wrap { max-width:280px; border-radius:12px; overflow:hidden; display:block; line-height:0; }
.msg-video { width:100%; max-width:280px; max-height:360px; border-radius:12px; display:block; background:#000; }
.msg-bubble:has(.msg-video) { max-width:300px; padding:3px; }
/* optimistic upload video frame too */
.msg-img-wrap video.msg-image { width:100%; max-width:260px; max-height:340px; object-fit:cover; }

/* ── Custom video player (WhatsApp-style) ── */
.vp-wrap { position:relative; width:280px; max-width:280px; border-radius:12px; overflow:hidden; background:#000; line-height:0; }
.vp-video { width:100%; max-height:360px; display:block; background:#000; cursor:pointer; }
.vp-center { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; pointer-events:none; }
.vp-bigplay { pointer-events:auto; width:56px; height:56px; border-radius:50%; border:none; cursor:pointer;
  background:rgba(0,0,0,.5); color:#fff; font-size:20px; display:flex; align-items:center; justify-content:center;
  backdrop-filter:blur(4px); transition:transform .15s, background .15s; }
.vp-bigplay:hover { transform:scale(1.08); background:rgba(220,38,38,.9); }
.vp-bigplay i { margin-left:3px; }
.vp-bar { position:absolute; left:0; right:0; bottom:0; display:flex; align-items:center; gap:8px; padding:8px 10px;
  background:linear-gradient(transparent, rgba(0,0,0,.6)); opacity:0; transition:opacity .2s; }
.vp-wrap:hover .vp-bar, .vp-wrap.playing .vp-bar { opacity:1; }
.vp-bar button { background:none; border:none; color:#fff; cursor:pointer; font-size:13px; padding:2px; line-height:1; }
.vp-time { color:#fff; font-size:11px; min-width:30px; line-height:1; }
.vp-track { flex:1; height:4px; background:rgba(255,255,255,.3); border-radius:2px; cursor:pointer; position:relative; }
.vp-fill { height:100%; width:0%; background:#DC2626; border-radius:2px; }
.vp-badge { position:absolute; top:8px; left:8px; background:rgba(0,0,0,.55); color:#fff; font-size:10px;
  padding:2px 7px; border-radius:10px; display:flex; align-items:center; gap:4px; line-height:1.4; }
.msg-bubble:has(.vp-wrap) { max-width:300px; padding:3px; }

/* ── Media preview: thumbnail strip ── */
.ip-thumbs { display:flex; align-items:center; gap:8px; padding:10px 16px; overflow-x:auto;
  background:rgba(0,0,0,.15); }
.ip-thumb { position:relative; width:54px; height:54px; border-radius:8px; overflow:hidden; flex-shrink:0;
  cursor:pointer; border:2px solid transparent; background:#222; }
.ip-thumb.active { border-color:#DC2626; }
.ip-thumb img, .ip-thumb video { width:100%; height:100%; object-fit:cover; }
.ip-thumb-vid { position:absolute; inset:0; margin:auto; width:14px; height:14px; color:#fff; font-size:13px;
  display:flex; align-items:center; justify-content:center; text-shadow:0 1px 2px rgba(0,0,0,.6); }
.ip-thumb-x { position:absolute; top:-2px; right:-2px; width:18px; height:18px; border-radius:50%; border:none;
  background:rgba(0,0,0,.7); color:#fff; font-size:14px; line-height:1; cursor:pointer; }
.ip-thumb-add { width:54px; height:54px; border-radius:8px; flex-shrink:0; cursor:pointer;
  border:1.5px dashed rgba(255,255,255,.4); background:transparent; color:#fff; font-size:18px; }
.ip-thumb-add:hover { background:rgba(255,255,255,.08); }

/* ── Forwarded badge — fun pill ── */
.forwarded-tag {
  display:inline-flex; align-items:center; gap:5px;
  font-size:11px; font-weight:600; margin-bottom:6px;
  padding:3px 10px; border-radius:12px;
  color:#B91C1C;
  background:linear-gradient(135deg, rgba(220,38,38,.14), rgba(14,159,110,.10));
  border:1px solid rgba(220,38,38,.22);
  width:fit-content;
}
.forwarded-tag i { font-size:10px; animation:fwd-fly 2.4s ease-in-out infinite; }
@keyframes fwd-fly {
  0%,100% { transform:translateX(0); }
  50%     { transform:translateX(3px); }
}
.msg-row.sent .forwarded-tag { color:#0a7d54; background:linear-gradient(135deg, rgba(255,255,255,.5), rgba(255,255,255,.25)); border-color:rgba(0,0,0,.06); }
html[data-theme="dark"] .forwarded-tag { color:#5BE9A6; background:rgba(220,38,38,.12); border-color:rgba(220,38,38,.2); }

/* ── "recording audio…" indicator bubble ── */
.rec-indicator { display:flex; align-items:center; gap:7px; font-size:13px; color:#EF4444; font-weight:500; padding:2px 2px; }
.rec-indicator i { animation:rec-pulse 1s ease-in-out infinite; }
@keyframes rec-pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(.85)} }

/* ── Reactions "who reacted" panel ── */
.rx-tabs { display:flex; gap:8px; border-bottom:1px solid var(--b1,#eee); padding-bottom:10px; margin-bottom:6px; overflow-x:auto; }
.rx-tab { border:none; background:transparent; padding:6px 12px; border-radius:16px; font-size:14px; cursor:pointer; color:var(--t2,#54656f); white-space:nowrap; }
.rx-tab.active { background:rgba(220,38,38,.14); color:#B91C1C; font-weight:600; }
.rx-list { max-height:320px; overflow-y:auto; }
.rx-row { display:flex; align-items:center; gap:12px; padding:9px 4px; cursor:default; border-radius:10px; }
.rx-row[data-uid]:hover { background:rgba(0,0,0,.03); }
.rx-row .avatar-wrap, .rx-row .avatar { width:42px; height:42px; border-radius:50%; }
.rx-info { flex:1; min-width:0; }
.rx-name { font-size:15px; font-weight:600; }
.rx-remove { font-size:12px; color:var(--t3,#8696a0); }
.rx-emoji { font-size:22px; }
html[data-theme="dark"] .rx-row:hover { background:rgba(255,255,255,.05); }

/* ── Group call overlay ── */
#gc-overlay { position:fixed; inset:0; z-index:8500; background:#0B141A; display:none; flex-direction:column; }
.gc-head { color:#fff; text-align:center; padding:16px; font-size:16px; font-weight:600; background:rgba(0,0,0,.3); }
.gc-head i { color:#DC2626; margin-right:6px; }
.gc-grid { flex:1; display:grid; gap:8px; padding:12px; overflow:auto;
  grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); align-content:center; }
.gc-tile { position:relative; background:#1F2C33; border-radius:14px; overflow:hidden; aspect-ratio:3/4;
  display:flex; align-items:center; justify-content:center; min-height:160px; }
.gc-tile video { width:100%; height:100%; object-fit:cover; }
.gc-tile img { width:80px; height:80px; border-radius:50%; object-fit:cover; }
.gc-av { width:80px; height:80px; border-radius:50%; background:#DC2626; color:#fff; display:flex; align-items:center; justify-content:center; font-size:34px; font-weight:700; }
.gc-name { position:absolute; bottom:8px; left:8px; color:#fff; font-size:12px; background:rgba(0,0,0,.5); padding:2px 8px; border-radius:8px; }
.gc-ava-big { width:80px; height:80px; border-radius:50%; overflow:hidden; flex:none; }
.gc-ava-big .gc-img, .gc-ava-big img { width:100%; height:100%; border-radius:50%; object-fit:cover; }
.gc-ava-big .gc-av { width:100%; height:100%; font-size:34px; }
.gc-status { display:none; }
.gc-placeholder { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; }
/* Solo / normal-call look: one big centered avatar + name + status */
.gc-grid.solo { display:flex; align-items:center; justify-content:center; }
.gc-grid.solo .gc-tile, .gc-grid.solo .gc-placeholder {
  background:transparent; aspect-ratio:auto; min-height:0; flex-direction:column; gap:16px; box-shadow:none;
}
.gc-grid.solo .gc-ava-big { width:150px; height:150px; box-shadow:0 10px 36px rgba(0,0,0,.45); }
.gc-grid.solo .gc-ava-big .gc-av { font-size:58px; }
.gc-grid.solo .gc-name { position:static; background:transparent; font-size:21px; font-weight:600; padding:0; }
.gc-grid.solo .gc-status { display:block; color:#8696a0; font-size:14px; margin-top:-8px; }
.gc-controls { display:flex; justify-content:center; gap:18px; padding:20px 0 30px; background:rgba(0,0,0,.3); }
.gc-cbtn { width:56px; height:56px; border-radius:50%; border:none; cursor:pointer; font-size:20px;
  background:rgba(255,255,255,.15); color:#fff; }
.gc-cbtn.off { background:rgba(255,255,255,.4); }
.gc-cbtn.end { background:#EF4444; }

/* Reply quote sender name */
.reply-msg-name { font-size:12px; font-weight:700; color:var(--primary); margin-bottom:1px; }
.msg-mine .reply-msg-name { color:rgba(255,255,255,0.92); }

/* ═══════════════════════════════════════════════════════════════
   PREMIUM V4 — Global polish & micro-interactions
═══════════════════════════════════════════════════════════════ */

.skeleton-item {
  background:linear-gradient(90deg,var(--surface) 25%,#fff 50%,var(--surface) 75%) !important;
  background-size:200% 100% !important;
  animation:skShimmer 1.5s ease-in-out infinite !important;
}
@keyframes skShimmer {
  0% { background-position:200% 0; }
  100% { background-position:-200% 0; }
}
.tools-panel, .settings-panel, .info-panel {
  background:rgba(255,255,255,.98) !important;
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
}
.panel-header {
  border-bottom:1px solid var(--b1) !important;
  background:rgba(255,255,255,.92) !important;
}
.settings-section-title {
  color:var(--p) !important;
  font-weight:800 !important;
  letter-spacing:-.3px;
}
.icon-btn.pulse-btn:hover {
  color:var(--p) !important;
  background:var(--p-light) !important;
}
.conv-unread {
  background:linear-gradient(135deg,var(--p),var(--secondary)) !important;
  box-shadow:0 2px 8px rgba(255,45,85,.3) !important;
}
.cw-subtitle { color:var(--t3) !important; }
/* Auth/splash only — do not turn chat-welcome logo tile red */
.auth-logo-box.cw-logo-box,
#splash-icon-wrap.cw-logo-box {
  background:linear-gradient(145deg,var(--p),var(--secondary)) !important;
  box-shadow:0 16px 48px rgba(255,45,85,.35) !important;
}
.ip-send-btn {
  background:linear-gradient(135deg,var(--p),var(--secondary)) !important;
  box-shadow:var(--sg) !important;
}
.ip-send-btn:hover { transform:scale(1.08) !important; box-shadow:var(--sg2) !important; }
.ip-send-btn:active { transform:scale(.94) !important; background:linear-gradient(135deg,var(--p),var(--secondary)) !important; }

/* ── Chat welcome — minimal empty state overrides ── */
.chat-welcome {
  background: #f0f2f5 !important;
}
.chat-area { background: #f0f2f5 !important; }
.chat-welcome .welcome-graphic,
.chat-welcome .devices-pana,
.chat-welcome img[src*="Device"],
.chat-welcome img[src*="Laptop"],
.chat-welcome img[src*="freepiklabs"] {
  display: none !important;
}

/* ═══ Smooth micro-interactions & animations (polish) ═══ */
.conv-item { transition: background .18s ease, transform .12s ease; }
.conv-item:hover { transform: translateX(2px); }
.conv-item:active { transform: scale(.995); }
.conv-av-img, .conv-av-fallback { transition: transform .2s ease; }
.conv-item:hover .conv-av-img, .conv-item:hover .conv-av-fallback { transform: scale(1.05); }

/* New conversation items + messages gently fade/slide in */
@keyframes phFadeUp { from { opacity:0; transform: translateY(6px); } to { opacity:1; transform:none; } }
.conv-item { animation: phFadeUp .22s ease both; }
.msg-row { animation: phFadeUp .2s ease both; }

/* Buttons & nav icons springy hover */
.wa-nav-btn, .icon-btn, .chip, .send-btn {
  transition: background .18s ease, color .18s ease, transform .12s cubic-bezier(.34,1.56,.64,1), box-shadow .18s ease;
}
.wa-nav-btn:hover, .icon-btn:hover { transform: translateY(-1px); }
.wa-nav-btn:active, .icon-btn:active, .send-btn:active { transform: scale(.92); }
.send-btn:hover { transform: scale(1.06); }

/* Filter chips smooth active */
.chip { transition: background .2s ease, color .2s ease, box-shadow .2s ease, transform .12s ease; }
.chip:active { transform: scale(.96); }

/* Custom thin scrollbars for a desktop-app feel */
.conv-list::-webkit-scrollbar, .msg-scroll::-webkit-scrollbar, .messages::-webkit-scrollbar { width: 7px; }
.conv-list::-webkit-scrollbar-thumb, .msg-scroll::-webkit-scrollbar-thumb, .messages::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,.14); border-radius: 8px;
}
.conv-list::-webkit-scrollbar-thumb:hover, .messages::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,.24); }
html[data-theme="dark"] .conv-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); }

/* Chat open transition */
.chat-main, .chat-area { transition: opacity .2s ease; }

/* ═══ Tools page polish + delightful micro-animations ═══ */
.tp-item { transition: background .18s ease, transform .14s cubic-bezier(.34,1.5,.64,1); }
.tp-item:hover { background:rgba(0,0,0,.045); transform: translateX(3px); }
.tp-item:active { transform: scale(.99); }
.tp-item .tp-ic { transition: transform .2s cubic-bezier(.34,1.56,.64,1); }
.tp-item:hover .tp-ic { transform: scale(1.08) rotate(-3deg); }
.tp-item > i.fa-chevron-right, .tp-item .tp-chev { transition: transform .2s ease; }
.tp-item:hover .tp-chev { transform: translateX(3px); }
/* staggered entrance for the list */
.tp-body .tp-item { animation: tpItemIn .32s ease both; }
.tp-body .tp-item:nth-child(1){animation-delay:.02s}
.tp-body .tp-item:nth-child(2){animation-delay:.05s}
.tp-body .tp-item:nth-child(3){animation-delay:.08s}
.tp-body .tp-item:nth-child(4){animation-delay:.11s}
.tp-body .tp-item:nth-child(5){animation-delay:.14s}
.tp-body .tp-item:nth-child(n+6){animation-delay:.17s}
@keyframes tpItemIn { from { opacity:0; transform: translateY(8px); } to { opacity:1; transform:none; } }

/* Empty chat-area logo gentle float */
.empty-chat-icon, .chat-empty-ic, .welcome-icon { animation: phFloat 4s ease-in-out infinite; }
@keyframes phFloat { 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-7px) } }

/* Status add badge pop */
.my-status-plus { animation: phPop .3s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes phPop { from{ transform:scale(0) } to{ transform:scale(1) } }

/* Desktop rail: chats, updates, contacts, calls and settings. */
@media (min-width:769px) {
  .wa-nav { display:flex !important; }
  .filter-chips { display:flex; }
}
.sidebar-me { display:flex; align-items:center; gap:12px; min-width:0; cursor:pointer; flex:1; }
.sidebar-me .avatar-wrap { width:42px; height:42px; flex-shrink:0; }
.sidebar-me-info { display:flex; flex-direction:column; gap:3px; min-width:0; }
.my-name { font-size:15px; font-weight:700; color:var(--t1); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.my-status-msg { font-size:12px; color:var(--t3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:170px; }
.online-ring { position:absolute; right:-1px; bottom:-1px; width:11px; height:11px; border-radius:50%; background:#22c55e; border:2px solid #fff; }
.sidebar-me .avatar-wrap { overflow:visible; }
.sidebar-me .avatar-wrap > .avatar-placeholder,
.sidebar-me .avatar-wrap > img { overflow:hidden; }
.sidebar-brand { gap:10px; padding:0; margin:0; background:transparent; }
.sidebar-brand:hover,.sidebar-brand.active { background:transparent; transform:none; }
.sidebar-brand .sidebar-logo { width:40px; height:40px; border-radius:11px; }
.sidebar-brand .sidebar-title { font-size:21px; }
.sidebar-profile-data { display:none; }

/* The original welcome panel is intentionally simple and centered. */
.chat-welcome { background:#f0f2f5 !important; border-left:1px solid var(--b1); }
.chat-welcome .cw-inner { max-width:520px; }
.chat-welcome .welcome-graphic { display:flex !important; width:120px; height:120px; align-items:center; justify-content:center; margin:0 auto 22px; }
.chat-welcome .welcome-graphic svg { display:block; }
.chat-welcome h2 { margin:0 0 12px; color:#1f2937; font-size:20px; font-weight:700; }
.chat-welcome p { margin:0; color:#667781; font-size:14px; line-height:1.6; }
.chat-welcome .cw-foot { display:none; }

@media (max-width:768px) {
  .sidebar-me { flex:1; }
  .sidebar-me-info { max-width:calc(100vw - 150px); }
}

/* Filter chips: smooth lift on active */
.chip.active { box-shadow:0 4px 12px rgba(220,38,38,.22); }

/* Nav rail icons: gentle rotate on the active tools/settings */
.wa-nav-btn.active svg { animation: phWiggle .4s ease; }
@keyframes phWiggle { 0%,100%{transform:rotate(0)} 30%{transform:rotate(-8deg)} 60%{transform:rotate(5deg)} }

/* ═══ Media gallery popup ═══ */
.mg-overlay { position:fixed; inset:0; z-index:9500; background:rgba(17,24,39,.55); backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center; padding:24px; animation:mgFade .18s ease both; }
@keyframes mgFade { from{opacity:0} to{opacity:1} }
.mg-panel { background:#fff; width:560px; max-width:100%; height:80vh; max-height:680px; border-radius:18px; overflow:hidden; display:flex; flex-direction:column; box-shadow:0 24px 70px rgba(0,0,0,.35); animation:mgPop .22s cubic-bezier(.34,1.4,.64,1) both; }
@keyframes mgPop { from{opacity:0; transform:scale(.96) translateY(10px)} to{opacity:1; transform:none} }
.mg-head { display:flex; align-items:center; gap:14px; padding:16px 18px; border-bottom:1px solid var(--b1); }
.mg-close { width:36px; height:36px; border-radius:50%; border:none; background:transparent; color:var(--t1); font-size:16px; cursor:pointer; transition:background .15s; }
.mg-close:hover { background:rgba(0,0,0,.06); }
.mg-title { font-size:18px; font-weight:700; }
.mg-tabs { display:flex; gap:6px; padding:10px 16px 0; }
.mg-tab { flex:1; padding:9px; border:none; background:var(--surface,#f4f4f5); border-radius:10px; font-weight:600; font-size:13px; color:var(--t2); cursor:pointer; transition:all .15s; font-family:inherit; }
.mg-tab.active { background:var(--p); color:#fff; box-shadow:0 4px 12px rgba(220,38,38,.25); }
.mg-body { flex:1; overflow-y:auto; padding:14px 16px 20px; }
.mg-empty { padding:50px 20px; text-align:center; color:var(--t3); font-size:14px; }
.mg-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.mg-thumb { position:relative; aspect-ratio:1; border-radius:10px; overflow:hidden; cursor:pointer; background:var(--surface,#eee); transition:transform .15s; }
.mg-thumb:hover { transform:scale(1.03); z-index:2; box-shadow:0 6px 18px rgba(0,0,0,.2); }
.mg-thumb img, .mg-thumb video { width:100%; height:100%; object-fit:cover; display:block; }
.mg-play { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#fff; font-size:22px; text-shadow:0 2px 6px rgba(0,0,0,.5); pointer-events:none; }
.mg-files { display:flex; flex-direction:column; gap:8px; }
.mg-file-row { display:flex; align-items:center; gap:12px; padding:12px; border:1px solid var(--b1); border-radius:12px; cursor:pointer; transition:background .15s; }
.mg-file-row:hover { background:var(--hover); }
.mg-file-ic { width:42px; height:42px; border-radius:10px; background:var(--p-dim); color:var(--p); display:flex; align-items:center; justify-content:center; font-size:18px; flex:none; }
.mg-file-nm { font-weight:600; font-size:14px; }
.mg-file-meta { font-size:12px; color:var(--t3); margin-top:2px; }
html[data-theme="dark"] .mg-panel { background:var(--card,#1f2c33); }
/* Crawlable public navigation also helps users reach Phoneopia's legal and
   company information without signing in. */
.auth-help-menu{position:absolute;top:14px;right:14px;left:auto;z-index:20;color:#d90429}
.auth-help-menu>summary{list-style:none;height:32px;padding:0 10px;display:flex;align-items:center;gap:6px;border:1px solid #ffd1da;border-radius:10px;background:rgba(255,255,255,.92);box-shadow:0 6px 18px rgba(89,0,26,.1);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);font-size:11px;font-weight:700;cursor:pointer;user-select:none;transition:background .18s ease,transform .18s ease}
.auth-help-menu>summary::-webkit-details-marker{display:none}
.auth-help-menu>summary:hover{background:#fff1f3;transform:translateY(-1px)}
.auth-help-chevron{font-size:9px;opacity:.7;transition:transform .2s ease}
.auth-help-menu[open] .auth-help-chevron{transform:rotate(180deg)}
.auth-help-popover{position:absolute;top:39px;right:0;left:auto;width:272px;padding:8px;border:1px solid rgba(255,255,255,.72);border-radius:16px;background:rgba(255,255,255,.96);box-shadow:0 24px 70px rgba(61,0,18,.25),0 2px 8px rgba(17,24,39,.08);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);transform-origin:top right;animation:authHelpIn .18s cubic-bezier(.22,1,.36,1) both}
@keyframes authHelpIn{from{opacity:0;transform:translateY(-7px) scale(.97)}to{opacity:1;transform:none}}
.auth-help-title{display:flex;flex-direction:column;padding:8px 10px 10px;color:#111827}
.auth-help-title span{font-size:14px;font-weight:800}.auth-help-title small{margin-top:2px;color:#98a2b3;font-size:11px;font-weight:500}
.auth-help-popover a{display:grid;grid-template-columns:38px 1fr 12px;align-items:center;gap:10px;padding:9px 10px;border-radius:12px;color:#344054;text-decoration:none;transition:background .16s ease,transform .16s ease}
.auth-help-popover a:hover{background:#fff1f3;color:#c91436;transform:translateX(2px)}
.auth-help-icon{width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:10px;background:linear-gradient(145deg,#fff1f3,#ffe2e8);color:#e8193a;font-size:14px}
.auth-help-popover a>span:nth-child(2){display:flex;flex-direction:column;min-width:0}.auth-help-popover b{font-size:13px;font-weight:750}.auth-help-popover small{margin-top:2px;color:#98a2b3;font-size:10px}.auth-help-popover a>i{color:#cbd0d8;font-size:9px}
@media(max-width:768px){.auth-help-menu{top:10px;right:10px;left:auto;color:#d90429}.auth-help-menu>summary{background:rgba(255,255,255,.92);border-color:#ffd1da;box-shadow:0 7px 22px rgba(217,4,41,.1)}.auth-help-popover{width:min(272px,calc(100vw - 20px))}}

/* Final welcome artwork sizing */
.chat-welcome .welcome-graphic { width:148px !important; height:148px !important; display:flex !important; margin:0 auto 24px !important; }
.chat-welcome .welcome-phoneopia-logo { display:block !important; width:94px !important; height:94px !important; }

/* Premium empty message area */
.chat-welcome {
  background:
    radial-gradient(circle at 18% 18%, rgba(255,45,85,.06), transparent 28%),
    radial-gradient(circle at 84% 76%, rgba(255,120,145,.05), transparent 30%),
    linear-gradient(145deg,#f8fafc 0%,#f1f3f6 100%) !important;
}
.chat-welcome::before {
  content:''; position:absolute; inset:0; pointer-events:none; opacity:.32;
  background-image:radial-gradient(rgba(217,4,41,.12) .7px, transparent .7px);
  background-size:24px 24px;
  mask-image:linear-gradient(135deg,rgba(0,0,0,.8),transparent 65%);
}
.chat-welcome .cw-inner {
  position:relative; z-index:1; max-width:520px; padding:42px 58px 40px;
  border:1px solid rgba(255,255,255,.9); border-radius:28px;
  background:rgba(255,255,255,.68); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  box-shadow:0 18px 55px rgba(17,24,39,.08), inset 0 1px 0 rgba(255,255,255,.9);
}
.chat-welcome .welcome-graphic { margin-bottom:22px !important; }
.chat-welcome h2 { font-size:23px; letter-spacing:-.4px; margin-bottom:10px; }
.chat-welcome p { font-size:14px; max-width:360px; }

/* Return to the light, open welcome layout; use the illustration instead of the logo. */
.chat-welcome .cw-inner { padding:0 !important; border:0 !important; border-radius:0 !important; background:transparent !important; box-shadow:none !important; backdrop-filter:none !important; }
.chat-welcome .welcome-graphic { width:140px !important; height:140px !important; margin-bottom:22px !important; }
.chat-welcome .welcome-orbit { display:none; }
.chat-welcome .welcome-chat-art { position:relative; z-index:2; width:132px; height:132px; display:block; filter:drop-shadow(0 10px 20px rgba(217,4,41,.14)); }