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


/* ===================================================
   SIREX — Premium AI Platform
   Design System — Globant/Enterprise Inspired
   =================================================== */
:root {
  --bg: #030B12;
  --bg-elevated: #071428;
  --bg-card: rgba(255,255,255,0.04);
  --bg-card-hover: rgba(255,255,255,0.08);
  --border: rgba(255,255,255,0.08);
  --border-hover: rgba(255,255,255,0.15);
  --accent: #0ECCED;
  --accent-dim: rgba(14,204,237,0.1);
  --accent-glow: rgba(14,204,237,0.25);
  --accent-color: #0ECCED;
  --cyan: #0ECCED;
  --navy: #020764;
  --dark: #030B12;
  --text-1: #e8edf3;
  --text-2: rgba(255,255,255,0.6);
  --text-3: rgba(255,255,255,0.35);
  --gradient-1: linear-gradient(135deg, #043780 0%, #025EC4 50%, #0ECCED 100%);
  --radius: 12px;
  --sirex-bg: #030B12;
  --sirex-bg-elevated: #071428;
  --sirex-bg-card: #0a1a35;
  --sirex-bg-card-hover: #0f2040;
  --sirex-border: rgba(255,255,255,0.08);
  --sirex-border-hover: rgba(255,255,255,0.15);
  --sirex-primary: #0ECCED;
  --sirex-primary-light: #0ECCED;
  --sirex-primary-dark: #025EC4;
  --sirex-accent: #043780;
  --sirex-accent-light: #0ECCED;
  --sirex-gradient: linear-gradient(135deg, #025EC4 0%, #0ECCED 100%);
  --sirex-gradient-text: linear-gradient(135deg, #025EC4 0%, #0ECCED 50%, #fff 100%);
  --sirex-glow: 0 0 40px rgba(14,204,237,0.15);
  --text-primary: #e8edf3;
  --text-secondary: rgba(255,255,255,0.55);
  --text-muted: rgba(255,255,255,0.3);
  --success: #10b981;
  --warning: #f59e0b;
  --error: #ef4444;
}
*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
body { font-family: 'Inter', -apple-system, sans-serif; background: var(--bg); color: var(--text-1); line-height: 1.6; overflow-x: hidden; }
/* IMMERSIVE EFFECTS */
.ambient-glow {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none;
  z-index: 0;
  background: 
    radial-gradient(circle at 15% 50%, rgba(4,55,128,0.15), transparent 40%),
    radial-gradient(circle at 85% 30%, rgba(14,204,237,0.1), transparent 40%);
  animation: pulseGlow 15s ease-in-out infinite alternate;
}
@keyframes pulseGlow {
  0% { transform: scale(1) translateX(0); opacity: 0.5; }
  100% { transform: scale(1.1) translateX(-5%); opacity: 1; }
}
.scanline {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(14,204,237,0.03) 50%, rgba(255,255,255,0));
  background-size: 100% 8px;
  pointer-events: none;
  z-index: 99;
  opacity: 0.3;
}
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: #071428; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 3px; }
.container { max-width: 1100px; margin: 0 auto; padding: 0 24px; }
/* SPLASH SCREEN */
.splash-screen { position: fixed; inset: 0; background: #030B12; z-index: 9999; display: flex; align-items: center; justify-content: center; transition: opacity 0.8s ease, visibility 0.8s ease; }
.splash-fade { opacity: 0; visibility: hidden; pointer-events: none; }
.splash-content { display: flex; flex-direction: column; align-items: center; gap: 24px; animation: splashPulse 2s infinite; }
.splash-logo { width: 140px; height: auto; }
.splash-loader { width: 140px; height: 2px; background: rgba(255,255,255,0.1); border-radius: 2px; overflow: hidden; position: relative; }
.splash-loader::after { content: ''; position: absolute; left: 0; top: 0; height: 100%; width: 30%; background: var(--cyan); animation: loaderSlide 1.5s infinite ease-in-out; }
@keyframes splashPulse { 0%, 100% { opacity: 0.8; transform: scale(1); } 50% { opacity: 1; transform: scale(1.02); } }
@keyframes loaderSlide { 0% { left: -30%; } 100% { left: 100%; } }
.reveal.revealed { opacity: 1; transform: translateY(0); }
.particles { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.particle { position: absolute; background: var(--accent-color); border-radius: 50%; opacity: 0; animation: particleFloat linear infinite; }
@keyframes particleFloat { 0% { opacity:0; transform:translateY(0) scale(0); } 15% { opacity:0.4; transform:translateY(-30px) scale(1); } 100% { opacity:0; transform:translateY(-200px) scale(0.5); } }
.nav-bar { position:fixed; top:0; left:0; width:100%; z-index:1000; padding:16px 0; transition:all 0.4s; }
.nav-transparent { background:transparent; border-bottom:1px solid transparent; }
.nav-scrolled { background:rgba(3,11,18,0.9); backdrop-filter:blur(20px); border-bottom:1px solid var(--border); padding:10px 0; }
.nav-inner { max-width:1100px; margin:0 auto; padding:0 24px; display:flex; align-items:center; justify-content:space-between; }
.nav-brand { display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--text-1); }
.brand-logo { height:32px; width:auto; }
.brand-name { font-weight:800; font-size:1.1rem; letter-spacing:-0.5px; display:none; }
.nav-links { display:flex; gap:32px; }
.nav-links a { color:var(--text-2); text-decoration:none; font-size:0.85rem; font-weight:500; transition:color 0.3s; }
.nav-links a:hover { color:var(--text-1); }
.nav-actions { display:flex; align-items:center; gap:12px; }
.nav-btn-ghost { color:var(--text-2); text-decoration:none; font-size:0.85rem; font-weight:500; padding:8px 16px; transition:color 0.3s; }
.nav-btn-ghost:hover { color:var(--text-1); }
.nav-btn-accent { background:var(--accent); color:#fff; font-weight:700; font-size:0.82rem; padding:8px 20px; border-radius:8px; text-decoration:none; transition:all 0.3s; }
.nav-btn-accent:hover { background:var(--navy); transform:translateY(-1px); box-shadow:0 4px 12px rgba(4,55,128,0.3); }
/* TRUE FULL-SCREEN HERO */
.s-hero { min-height:100vh; width: 100vw; display:flex; flex-direction:column; justify-content:center; position:relative; overflow:hidden; padding: 0; margin: 0; background: #030B12; }
.neural-canvas { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; }
.immersive-overlay-gradient { position: absolute; inset: 0; background: radial-gradient(circle at center, transparent 0%, rgba(3,11,18,0.8) 100%); z-index: 1; pointer-events: none; }
/* MASSIVE TYPOGRAPHY */
.hero-center { position: relative; z-index: 10; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.hero-title-massive { font-size: clamp(3rem, 7vw, 6.5rem); font-weight: 900; line-height: 1.05; letter-spacing: -2.5px; margin-bottom: 24px; background: linear-gradient(90deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,1) 25%, rgba(255,255,255,1) 75%, rgba(255,255,255,0.15) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; display: inline-block; padding: 0 10px; }
.hero-sub-massive { font-size: clamp(1.2rem, 2.5vw, 1.6rem); color: rgba(255,255,255,0.7); max-width: 800px; margin: 0 auto 48px; line-height: 1.6; text-shadow: 0 5px 15px rgba(0,0,0,0.5); font-weight: 400; }
.cta-massive { padding: 18px 48px !important; font-size: 1.15rem !important; }
.hero-pill { display:inline-flex; align-items:center; gap:8px; padding:8px 16px; background:var(--bg-card); border:1px solid var(--border); border-radius:100px; font-size:0.85rem; font-weight:600; color:var(--text-1); margin-bottom:24px; box-shadow:0 4px 12px rgba(14,204,237,0.04); }
.pill-dot { width:8px; height:8px; border-radius:50%; background:var(--accent-color); box-shadow:0 0 8px var(--accent-glow); }
@keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:0.4; } }
.animated-gradient { background:linear-gradient(90deg, #025EC4, #043780, #0ECCED, #025EC4); background-size:300% 100%; -webkit-background-clip:text; -webkit-text-fill-color:transparent; animation:gradientShift 6s ease infinite; }
@keyframes gradientShift { 0% { background-position:0% 50%; } 50% { background-position:100% 50%; } 100% { background-position:0% 50%; } }
.hero-ctas { display:flex; gap:16px; justify-content:center; margin-bottom:40px; }
.cta-primary { display:inline-flex; align-items:center; gap:8px; padding:14px 32px; background:var(--accent); color:#fff; font-weight:700; font-size:0.95rem; border-radius:12px; text-decoration:none; transition:all 0.3s; position:relative; overflow:hidden; border:none; cursor:pointer; }
.cta-primary::before { content:''; position:absolute; inset:0; background:linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent); transform:translateX(-100%); transition:transform 0.5s; }
.cta-primary:hover::before { transform:translateX(100%); }
.cta-primary:hover { background:var(--navy); box-shadow:0 8px 24px rgba(4,55,128,0.3); transform:translateY(-2px); }
/* ADVANCED TECH HERO STYLES */
.holographic-text { background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-image: var(--sirex-gradient-text); background-size: 200% auto; animation: gradientShift 4s ease infinite; text-shadow: var(--sirex-glow); }
.pulse-cyan { background: var(--cyan) !important; box-shadow: 0 0 12px var(--cyan); animation: pulse 2s infinite; }
.neon-btn { background: rgba(14,204,237,0.1); border: 1px solid var(--cyan); color: var(--cyan); box-shadow: inset 0 0 10px rgba(14,204,237,0.2), 0 0 15px rgba(14,204,237,0.3); text-shadow: 0 0 5px rgba(14,204,237,0.5); }
.neon-btn:hover { background: var(--cyan); color: #000; box-shadow: 0 0 25px var(--cyan); transform: translateY(-2px); }
.glass-btn { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); color: var(--text-1); backdrop-filter: blur(10px); }
.glass-btn:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.3); }
/* CYBER GRID */
.cyber-grid { position: absolute; inset: 0; pointer-events: none; z-index: 0; background-image: linear-gradient(rgba(14, 204, 237, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(14, 204, 237, 0.05) 1px, transparent 1px); background-size: 40px 40px; transform: perspective(500px) rotateX(60deg) scale(2); transform-origin: top; opacity: 0.3; animation: gridMove 20s linear infinite; }
@keyframes gridMove { 0% { background-position: 0 0; } 100% { background-position: 0 40px; } }
/* TECH MOCKUP */
.tech-mockup-wrapper { perspective: 1000px; margin: 0 auto 64px; max-width: 800px; z-index: 2; position: relative; }
.tech-mockup { background: rgba(7, 20, 40, 0.6); backdrop-filter: blur(20px); border-radius: 16px; border: 1px solid rgba(14, 204, 237, 0.2); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), inset 0 0 20px rgba(14, 204, 237, 0.05); overflow: hidden; transform: rotateX(5deg) translateY(0); transition: transform 0.5s; }
.tech-mockup:hover { transform: rotateX(0deg) translateY(-10px); box-shadow: 0 30px 60px rgba(14, 204, 237, 0.15), inset 0 0 20px rgba(14, 204, 237, 0.1); }
.mockup-header { background: rgba(0, 0, 0, 0.3); padding: 12px 20px; display: flex; align-items: center; border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
.mockup-dots { display: flex; gap: 6px; }
.mockup-dots .dot { width: 10px; height: 10px; border-radius: 50%; }
.dot.r { background: #ff5f56; }
.dot.y { background: #ffbd2e; }
.dot.g { background: #27c93f; }
.mockup-title { margin-left: 16px; font-family: 'JetBrains Mono', monospace; font-size: 0.8rem; color: rgba(255, 255, 255, 0.5); letter-spacing: 1px; }
.mockup-body { display: flex; height: 320px; }
.mockup-sidebar { width: 220px; background: rgba(0, 0, 0, 0.2); border-right: 1px solid rgba(255, 255, 255, 0.05); padding: 16px 0; }
.m-item { padding: 10px 20px; color: rgba(255, 255, 255, 0.6); font-size: 0.85rem; display: flex; align-items: center; gap: 10px; border-left: 2px solid transparent; transition: all 0.2s; }
.m-item.active { border-left-color: var(--cyan); background: rgba(14, 204, 237, 0.1); color: #fff; }
.mockup-main { flex: 1; padding: 24px; display: flex; flex-direction: column; gap: 20px; }
.m-stats { display: flex; gap: 16px; }
.m-stat-box { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.05); border-radius: 10px; padding: 16px; flex: 1; display: flex; flex-direction: column; }
.m-label { font-size: 0.75rem; color: rgba(255, 255, 255, 0.4); text-transform: uppercase; letter-spacing: 1px; }
.m-val { font-size: 1.5rem; font-weight: 700; margin-top: 4px; font-family: 'JetBrains Mono', monospace; }
.m-val.cyan { color: var(--cyan); }
.m-val.blue { color: #3b82f6; }
.m-val.white { color: #fff; }
.m-chat { flex: 1; background: rgba(0, 0, 0, 0.2); border-radius: 10px; padding: 16px; display: flex; flex-direction: column; gap: 12px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.03); }
.m-msg { max-width: 80%; padding: 10px 14px; border-radius: 10px; font-size: 0.85rem; line-height: 1.4; }
.m-msg.user { align-self: flex-end; background: rgba(255, 255, 255, 0.1); color: #fff; border-bottom-right-radius: 2px; }
.m-msg.ai { align-self: flex-start; background: rgba(14, 204, 237, 0.15); color: var(--cyan); border-bottom-left-radius: 2px; border: 1px solid rgba(14, 204, 237, 0.2); }
.typing-indicator { display: inline-flex; gap: 3px; margin-right: 8px; }
.typing-indicator span { width: 4px; height: 4px; background: currentColor; border-radius: 50%; animation: blink 1.4s infinite both; }
.typing-indicator span:nth-child(2) { animation-delay: 0.2s; }
.typing-indicator span:nth-child(3) { animation-delay: 0.4s; }
@keyframes blink { 0%, 100% { opacity: 0.2; } 20% { opacity: 1; } }
.cta-big { padding:16px 40px; font-size:1rem; }
.cta-secondary { display:inline-flex; align-items:center; gap:8px; padding:14px 32px; background:transparent; color:var(--text-1); font-weight:500; font-size:0.95rem; border:1px solid var(--border); border-radius:12px; text-decoration:none; transition:all 0.3s; }
.cta-secondary:hover { border-color:var(--accent); background:var(--bg-elevated); }
.hero-metrics { display:flex; align-items:center; justify-content:center; gap:48px; }
.metric-value { font-size:2rem; font-weight:900; background:var(--gradient-1); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.metric-label { font-size:0.7rem; color:var(--text-3); text-transform:uppercase; letter-spacing:1px; margin-top:4px; }
.metric-sep { width:1px; height:40px; background:var(--border); }
.ticker-wrapper { position:relative; overflow:hidden; padding:40px 0 0; mask-image:linear-gradient(90deg, transparent, black 10%, black 90%, transparent); -webkit-mask-image:linear-gradient(90deg, transparent, black 10%, black 90%, transparent); }
.ticker-track { display:flex; width:max-content; animation:tickerScroll 40s linear infinite; }
.ticker-content { display:flex; }
.ticker-item { padding:0 32px; font-size:0.82rem; font-weight:600; color:var(--text-3); text-transform:uppercase; letter-spacing:2px; }
@keyframes tickerScroll { 0% { transform:translateX(0); } 100% { transform:translateX(-50%); } }
.s-stack { padding:48px 0; border-bottom:1px solid var(--border); }
.stack-row { display:flex; align-items:center; gap:40px; justify-content:center; flex-wrap:wrap; }
.stack-logos { display:flex; gap:16px; align-items:center; flex-wrap:wrap; justify-content:center; }
.stack-logo { padding:8px 18px; border:1px solid var(--border); border-radius:8px; font-size:0.75rem; font-weight:600; color:var(--text-2); transition:all 0.3s; }
.stack-logo:hover { border-color:var(--accent); color:var(--text-1); transform:translateY(-2px); box-shadow:0 4px 12px rgba(14,204,237,0.08); }
.section-head { text-align:left; margin-bottom:56px; }
.section-head h2 { font-size:clamp(2rem, 4vw, 2.8rem); font-weight:900; letter-spacing:-1.5px; line-height:1.1; }
.overline { font-size:0.72rem; font-weight:700; color:var(--accent-color); text-transform:uppercase; letter-spacing:2px; display:block; margin-bottom:12px; }
.section-desc { color:var(--text-2); font-size:0.95rem; margin-top:12px; max-width:500px; }
.s-services { padding:120px 0; background:var(--bg-elevated); }
.pillars-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; }
.pillar-card { background:var(--bg-card); border:1px solid var(--border); border-radius:20px; padding:40px 32px; position:relative; overflow:hidden; transition:all 0.5s cubic-bezier(0.16,1,0.3,1); }
.pillar-card:hover { transform:translateY(-6px); box-shadow:0 20px 40px rgba(14,204,237,0.08); border-color:var(--border-hover); }
.pillar-featured { border-color:var(--accent-color); }
.pillar-badge { position:absolute; top:16px; right:16px; background:var(--accent); color:#fff; font-size:0.65rem; font-weight:800; padding:4px 10px; border-radius:6px; text-transform:uppercase; }
.pillar-number { font-size:3.5rem; font-weight:900; background:var(--gradient-1); -webkit-background-clip:text; -webkit-text-fill-color:transparent; line-height:1; margin-bottom:16px; opacity:0.2; }
.pillar-icon { width:48px; height:48px; border-radius:12px; background:rgba(37,99,235,0.08); display:flex; align-items:center; justify-content:center; color:var(--accent-color); margin-bottom:20px; }
.pillar-card h3 { font-size:1.15rem; font-weight:800; margin-bottom:10px; }
.pillar-card p { font-size:0.85rem; color:var(--text-2); line-height:1.7; }
.pillar-glow { display:none; }
.s-platform { padding:120px 0; }
.platform-header { margin-bottom:48px; }
.platform-header h2 { font-size:clamp(2rem, 4vw, 2.8rem); font-weight:900; letter-spacing:-1.5px; }
.platform-header p { color:var(--text-2); margin-top:12px; max-width:500px; font-size:0.95rem; }
.demo-window { border-radius:16px; border:1px solid var(--border); overflow:hidden; background:#0a0a0f; }
.demo-bar { display:flex; align-items:center; justify-content:space-between; padding:14px 20px; border-bottom:1px solid rgba(255,255,255,0.06); background:#111; }
.demo-dots { display:flex; gap:6px; }
.demo-dots span { width:10px; height:10px; border-radius:50%; }
.demo-dots span:nth-child(1) { background:#ef4444; }
.demo-dots span:nth-child(2) { background:#f59e0b; }
.demo-dots span:nth-child(3) { background:#10b981; }
.demo-title { font-family:'JetBrains Mono', monospace; font-size:0.72rem; color:#505367; }
.demo-content { padding:24px; font-family:'JetBrains Mono', monospace; font-size:0.82rem; display:flex; flex-direction:column; gap:14px; background:#0a0a0f; }
.terminal-line { display:flex; gap:12px; align-items:flex-start; animation:termIn 0.5s ease both; }
.terminal-line:nth-child(1) { animation-delay:0.3s; }
.terminal-line:nth-child(2) { animation-delay:1s; }
.terminal-line:nth-child(3) { animation-delay:2s; }
.terminal-line:nth-child(4) { animation-delay:2.8s; }
.terminal-line:nth-child(5) { animation-delay:3.8s; }
@keyframes termIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
.t-prompt { font-weight:600; white-space:nowrap; padding:2px 8px; border-radius:4px; font-size:0.72rem; background:rgba(255,255,255,0.05); color:#8b8fa3; }
.t-prompt.t-ai { background:rgba(0,212,255,0.15); color:#00d4ff; }
.t-prompt.t-sys { background:rgba(124,58,237,0.15); color:#a78bfa; }
.t-cmd { color:#e8eaed; line-height:1.6; }
.t-highlight { color:#00d4ff !important; }
.t-dim { color:#505367 !important; font-size:0.75rem; }
.terminal-cursor { width:8px; height:16px; background:#00d4ff; animation:blink 1s step-end infinite; border-radius:1px; }
@keyframes blink { 50% { opacity:0; } }
.s-industries { padding:120px 0; background:var(--bg-elevated); }
.ind-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; }
.ind-card { background:var(--bg-card); border:1px solid var(--border); border-radius:16px; padding:28px; transition:all 0.4s; position:relative; overflow:hidden; }
.ind-card:hover { transform:translateY(-4px); box-shadow:0 12px 24px rgba(14,204,237,0.06); }
.ind-active { border-color:var(--accent-color); }
.ind-tag { position:absolute; top:12px; right:12px; background:var(--accent); color:#fff; font-size:0.6rem; font-weight:800; padding:3px 8px; border-radius:4px; text-transform:uppercase; }
.ind-icon { font-size:1.6rem; margin-bottom:12px; }
.ind-card h4 { font-size:0.95rem; font-weight:700; margin-bottom:6px; }
.ind-card p { font-size:0.8rem; color:var(--text-2); line-height:1.6; }
.s-compare { padding:120px 0; }
.compare-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.compare-card { background:var(--bg-card); border:1px solid var(--border); border-radius:16px; padding:36px; }
.compare-them { opacity:0.7; }
.compare-us { border-color:var(--accent-color); background:rgba(37,99,235,0.02); }
.compare-label { font-size:0.8rem; font-weight:700; color:var(--text-3); text-transform:uppercase; letter-spacing:1px; margin-bottom:24px; }
.compare-label-accent { color:var(--accent-color); }
.compare-list { list-style:none; display:flex; flex-direction:column; gap:16px; }
.compare-list li { display:flex; align-items:center; gap:12px; font-size:0.9rem; color:var(--text-2); }
.compare-good { color:var(--text-1) !important; }
.s-steps { padding:120px 0; background:var(--bg-elevated); }
.steps-row { display:flex; align-items:flex-start; gap:0; justify-content:center; }
.step-card { flex:1; max-width:300px; text-align:center; padding:0 24px; }
.step-number { font-size:3rem; font-weight:900; background:var(--gradient-1); -webkit-background-clip:text; -webkit-text-fill-color:transparent; margin-bottom:16px; line-height:1; }
.step-card h3 { font-size:1.05rem; font-weight:700; margin-bottom:8px; }
.step-card p { font-size:0.85rem; color:var(--text-2); line-height:1.6; }
.step-line { width:60px; height:1px; background:var(--border); margin-top:28px; flex-shrink:0; }
.s-testimonial { padding:120px 0; }
.testimonial-card { background:var(--bg-card); border:1px solid var(--border); border-radius:20px; padding:48px; position:relative; overflow:hidden; box-shadow:0 4px 24px rgba(14,204,237,0.04); }
.testimonial-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:var(--gradient-1); }
.testimonial-quote { margin-bottom:36px; }
.testimonial-quote blockquote { font-size:1.15rem; color:var(--text-1); line-height:1.8; font-style:italic; margin-top:16px; }
.testimonial-author { display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.testimonial-avatar { width:48px; height:48px; border-radius:12px; background:var(--gradient-1); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:0.9rem; color:#fff; }
.testimonial-info { flex:1; min-width:200px; }
.testimonial-name { font-weight:700; }
.testimonial-role { color:var(--text-3); font-size:0.82rem; margin-top:2px; }
.testimonial-stats { display:flex; gap:24px; margin-left:auto; }
.tstat { text-align:center; }
.tstat-val { display:block; font-size:1.5rem; font-weight:800; background:var(--gradient-1); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.tstat-label { font-size:0.7rem; color:var(--text-3); text-transform:uppercase; letter-spacing:0.5px; }
.s-pricing { padding:120px 0; background:var(--bg-elevated); }
.pricing-row { display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; }
.plan-card { background:var(--bg-card); border:1px solid var(--border); border-radius:20px; padding:36px; position:relative; transition:all 0.4s; }
.plan-card:hover { transform:translateY(-4px); box-shadow:0 12px 32px rgba(14,204,237,0.08); }
.plan-featured { border-color:var(--accent); }
.plan-badge { position:absolute; top:-12px; left:50%; transform:translateX(-50%); background:var(--accent); color:#fff; font-size:0.7rem; font-weight:800; padding:4px 14px; border-radius:6px; text-transform:uppercase; }
.plan-tier { font-size:0.8rem; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:var(--text-2); margin-bottom:12px; }
.plan-price { font-size:3rem; font-weight:900; letter-spacing:-2px; margin-bottom:8px; }
.plan-price span { font-size:0.9rem; font-weight:400; color:var(--text-3); }
.plan-desc { color:var(--text-2); font-size:0.82rem; margin-bottom:24px; }
.plan-features { list-style:none; display:flex; flex-direction:column; gap:10px; margin-bottom:32px; }
.plan-features li { font-size:0.85rem; color:var(--text-2); display:flex; align-items:center; gap:10px; }
.plan-features li::before { content:''; width:6px; height:6px; border:1.5px solid var(--accent-color); border-radius:50%; flex-shrink:0; }
.plan-btn { display:block; text-align:center; padding:12px; border-radius:10px; border:1px solid var(--border); color:var(--text-1); text-decoration:none; font-weight:600; font-size:0.85rem; transition:all 0.3s; }
.plan-btn:hover { border-color:var(--accent); background:var(--bg-elevated); }
.plan-btn-accent { background:var(--accent); color:#fff; border-color:var(--accent); }
.plan-btn-accent:hover { background:var(--navy); box-shadow:0 8px 20px rgba(0,0,0,0.15); }
.s-trial { padding:120px 0; }
.trial-block { position:relative; text-align:center; padding:80px 40px; border-radius:24px; border:1px solid var(--border); background:var(--accent); color:#fff; overflow:hidden; }
.trial-orb { position:absolute; width:400px; height:400px; border-radius:50%; background:rgba(37,99,235,0.15); filter:blur(100px); top:-200px; left:-100px; animation:orbFloat 15s ease-in-out infinite; pointer-events:none; }
.trial-orb-2 { left:auto; right:-100px; top:auto; bottom:-200px; background:rgba(124,58,237,0.12); animation-delay:3s; }
.trial-content { position:relative; z-index:1; }
.trial-content h2 { font-size:clamp(2rem, 4vw, 2.8rem); font-weight:900; letter-spacing:-1.5px; margin-bottom:16px; color:#fff; }
.trial-content p { color:rgba(255,255,255,0.7); margin-bottom:32px; max-width:440px; margin-left:auto; margin-right:auto; }
.trial-block .cta-primary { background:var(--bg); color:var(--text-1); }
.trial-block .cta-primary:hover { background:#f0f0f0; box-shadow:0 8px 24px rgba(255,255,255,0.2); }
.trial-note { display:block; margin-top:16px; font-size:0.75rem; color:rgba(255,255,255,0.5); }
.s-form { padding:120px 0; background:var(--bg-elevated); }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
.form-info h2 { font-size:clamp(2rem, 4vw, 2.5rem); font-weight:900; letter-spacing:-1.5px; margin-bottom:16px; }
.form-info p { color:var(--text-2); line-height:1.7; margin-bottom:24px; }
.form-benefits { list-style:none; display:flex; flex-direction:column; gap:12px; }
.form-benefits li { display:flex; align-items:center; gap:10px; font-size:0.9rem; color:var(--text-2); }
.form-benefits li svg { flex-shrink:0; }
.form-card { background:var(--bg-card); border:1px solid var(--border); border-radius:20px; padding:40px; box-shadow:0 4px 24px rgba(14,204,237,0.04); }
.form-card h3 { font-size:1.15rem; font-weight:800; margin-bottom:24px; }
.form-field { margin-bottom:16px; }
.form-field label { display:block; font-size:0.8rem; font-weight:600; margin-bottom:6px; color:var(--text-2); }
.form-field input, .form-field select { width:100%; padding:12px 16px; border:1px solid var(--border); border-radius:10px; font-size:0.9rem; font-family:inherit; transition:border-color 0.3s; background:rgba(255,255,255,0.05); color:var(--text-1); }
.form-field input:focus, .form-field select:focus { outline:none; border-color:var(--accent-color); box-shadow:0 0 0 3px rgba(37,99,235,0.1); }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.form-submit { width:100%; padding:14px; background:var(--accent); color:#fff; border:none; border-radius:10px; font-size:0.95rem; font-weight:700; cursor:pointer; transition:all 0.3s; margin-top:8px; font-family:inherit; }
.form-submit:hover { background:var(--navy); transform:translateY(-1px); box-shadow:0 4px 12px rgba(0,0,0,0.15); }
.form-note { text-align:center; font-size:0.75rem; color:var(--text-3); margin-top:12px; }
.s-footer { padding:40px 0; border-top:1px solid var(--border); }
.footer-inner { display:flex; align-items:center; justify-content:space-between; }
.footer-brand { display:flex; align-items:center; gap:8px; font-weight:800; }
.footer-copy { font-size:0.75rem; color:var(--text-3); }
.footer-links { display:flex; gap:20px; }
.footer-links a { color:var(--text-3); text-decoration:none; font-size:0.78rem; transition:color 0.3s; }
.footer-links a:hover { color:var(--text-1); }
@media (max-width:900px) {
  .nav-links, .nav-actions .nav-btn-ghost { display:none; }
  .hero-title { font-size:2.8rem; letter-spacing:-1.5px; }
  .hero-metrics { flex-direction:column; gap:16px; }
  .metric-sep { width:40px; height:1px; margin:0 auto; }
  .pillars-grid, .ind-grid { grid-template-columns:1fr; }
  .pricing-row { grid-template-columns:1fr; }
  .compare-grid { grid-template-columns:1fr; }
  .steps-row { flex-direction:column; align-items:center; gap:24px; }
  .step-line { width:1px; height:40px; }
  .form-grid { grid-template-columns:1fr; }
  .form-row { grid-template-columns:1fr; }
  .testimonial-stats { margin-left:0; width:100%; justify-content:space-around; margin-top:16px; }
  .footer-inner { flex-direction:column; gap:16px; text-align:center; }
  .footer-links { justify-content:center; }
  .section-head h2, .platform-header h2 { font-size:2rem; }
  .hero-line-l, .hero-line-r { display:none; }
}
ADMIN PANEL
   =================================================== */
.admin-layout {
  display: flex;
  min-height: 100vh;
  background: var(--sirex-bg);
}
.admin-sidebar {
  width: 240px;
  background: var(--sirex-bg-elevated);
  border-right: 1px solid var(--sirex-border);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0; left: 0; bottom: 0;
  z-index: 50;
}
.sidebar-logo {
  padding: 24px 20px;
  border-bottom: 1px solid var(--sirex-border);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.logo-icon { font-size: 1.8rem; }
.logo-text {
  font-size: 1.4rem; font-weight: 800;
  background: var(--sirex-gradient-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.logo-sub { font-size: 0.7rem; color: var(--text-muted); width: 100%; margin-top: -4px; }
.sidebar-nav { flex: 1; padding: 12px 8px; display: flex; flex-direction: column; gap: 4px; }
.sidebar-footer { padding: 12px 8px; border-top: 1px solid var(--sirex-border); }
.nav-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; border-radius: 10px;
  background: none; border: none; color: var(--text-secondary);
  font-size: 0.88rem; font-weight: 500; cursor: pointer;
  transition: all 0.2s; width: 100%; text-align: left; text-decoration: none;
}
.nav-item:hover { background: rgba(255,255,255,0.04); color: var(--text-primary); }
.nav-item.active { background: rgba(59,130,246,0.12); color: var(--sirex-primary-light); }
.nav-icon { font-size: 1.1rem; width: 24px; text-align: center; }
.admin-main { flex: 1; margin-left: 240px; display: flex; flex-direction: column; }
.admin-topbar {
  padding: 16px 32px; border-bottom: 1px solid var(--sirex-border);
  display: flex; justify-content: space-between; align-items: center;
  background: var(--sirex-bg-elevated);
}
.admin-topbar h2 { font-size: 1.15rem; font-weight: 700; }
.tenant-badge {
  padding: 6px 14px; border-radius: 8px; font-size: 0.8rem;
  background: rgba(59,130,246,0.1); color: var(--sirex-primary-light);
}
.admin-content { padding: 32px; flex: 1; overflow-y: auto; }
/* Panel Headers */
.panel-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 24px; flex-wrap: wrap; gap: 12px;
}
.panel-header h3 { font-size: 1.1rem; font-weight: 700; }
.panel-actions { display: flex; gap: 12px; align-items: center; }
.search-input {
  padding: 8px 14px; border-radius: 8px; border: 1px solid var(--sirex-border);
  background: var(--sirex-bg); color: var(--text-primary); font-size: 0.85rem; width: 200px;
}
.search-input:focus { outline: none; border-color: var(--sirex-primary); }
.btn-add {
  padding: 8px 18px; border-radius: 8px; border: none; cursor: pointer;
  background: var(--sirex-gradient); color: white; font-weight: 600; font-size: 0.85rem;
}
.btn-add:hover { transform: translateY(-1px); }
/* Product List */
.products-list { display: flex; flex-direction: column; gap: 8px; }
.product-row {
  display: flex; align-items: center; gap: 16px;
  padding: 14px 18px; border-radius: 12px;
  background: var(--sirex-bg-card); border: 1px solid var(--sirex-border);
  transition: all 0.2s;
}
.product-row:hover { border-color: var(--sirex-border-hover); }
.product-row.inactive { opacity: 0.5; }
.product-row.promo { border-left: 3px solid #f59e0b; }
.product-info { flex: 1; min-width: 0; }
.product-name { font-weight: 600; font-size: 0.9rem; display: flex; align-items: center; gap: 8px; }
.product-meta { display: flex; gap: 8px; margin-top: 4px; flex-wrap: wrap; }
.cat-badge {
  padding: 2px 8px; border-radius: 6px; font-size: 0.72rem; font-weight: 600;
  background: rgba(59,130,246,0.12); color: var(--sirex-primary-light);
}
.syn-count { font-size: 0.78rem; color: var(--text-muted); }
.promo-badge {
  padding: 2px 8px; border-radius: 6px; font-size: 0.72rem; font-weight: 600;
  background: rgba(245,158,11,0.15); color: #fbbf24;
}
.promo-desc { font-size: 0.78rem; color: #fbbf24; }
.product-price {
  font-size: 1.1rem; font-weight: 800; color: var(--success);
  white-space: nowrap; min-width: 70px; text-align: right;
}
.product-actions { display: flex; gap: 6px; }
.product-actions button, .btn-edit, .btn-del, .btn-active, .btn-inactive {
  width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--sirex-border);
  background: var(--sirex-bg); cursor: pointer; font-size: 0.9rem;
  display: flex; align-items: center; justify-content: center; transition: all 0.2s;
}
.product-actions button:hover { border-color: var(--sirex-primary); }
/* Forms */
.admin-form {
  background: var(--sirex-bg-card); border: 1px solid var(--sirex-border);
  border-radius: 16px; padding: 28px;
}
.admin-form h3 { margin-bottom: 20px; font-size: 1.05rem; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 20px; }
.admin-form label {
  display: flex; flex-direction: column; gap: 6px;
  font-size: 0.82rem; font-weight: 600; color: var(--text-secondary);
}
.admin-form input, .admin-form textarea, .admin-form select {
  padding: 10px 14px; border-radius: 8px; border: 1px solid var(--sirex-border);
  background: var(--sirex-bg); color: var(--text-primary); font-size: 0.88rem;
  font-family: inherit; resize: vertical;
}
.admin-form input:focus, .admin-form textarea:focus, .admin-form select:focus {
  outline: none; border-color: var(--sirex-primary); box-shadow: 0 0 0 3px rgba(59,130,246,0.1);
}
.synonyms-section { margin-bottom: 20px; }
.synonym-input { display: flex; gap: 8px; margin-top: 6px; }
.synonym-input input { flex: 1; }
.btn-sm {
  padding: 8px 14px; border-radius: 8px; border: none; cursor: pointer;
  background: var(--sirex-primary); color: white; font-weight: 600; font-size: 0.82rem;
}
.synonym-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.tag {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px; border-radius: 6px; font-size: 0.78rem;
  background: rgba(6,182,212,0.12); color: var(--sirex-accent-light);
}
.tag button {
  background: none; border: none; color: inherit; cursor: pointer;
  font-size: 0.9rem; padding: 0 2px; opacity: 0.7;
}
.tag button:hover { opacity: 1; }
.promo-section { margin-bottom: 20px; }
.checkbox-label { flex-direction: row !important; align-items: center; gap: 10px !important; cursor: pointer; }
.checkbox-label input[type="checkbox"] { width: 18px; height: 18px; }
.form-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 20px; }
.btn-cancel {
  padding: 10px 20px; border-radius: 8px; border: 1px solid var(--sirex-border);
  background: transparent; color: var(--text-secondary); cursor: pointer; font-weight: 500;
}
.btn-save {
  padding: 10px 24px; border-radius: 8px; border: none; cursor: pointer;
  background: var(--sirex-gradient); color: white; font-weight: 600;
}
.btn-save:disabled { opacity: 0.5; cursor: not-allowed; }
/* Stats */
.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.stat-card {
  padding: 24px; border-radius: 14px;
  background: var(--sirex-bg-card); border: 1px solid var(--sirex-border);
}
.stat-number { font-size: 2rem; font-weight: 800; margin-bottom: 4px; }
.stat-label { font-size: 0.8rem; color: var(--text-muted); font-weight: 500; }
.stat-card.blue .stat-number { color: #60a5fa; }
.stat-card.green .stat-number { color: #34d399; }
.stat-card.purple .stat-number { color: #a78bfa; }
.stat-card.orange .stat-number { color: #fbbf24; }
.stat-card.cyan .stat-number { color: #22d3ee; }
.stat-card.pink .stat-number { color: #f472b6; }
/* Tabs */
.tab-buttons { display: flex; gap: 6px; }
.tab-buttons button {
  padding: 6px 14px; border-radius: 8px; border: 1px solid var(--sirex-border);
  background: transparent; color: var(--text-secondary); cursor: pointer;
  font-size: 0.82rem; font-weight: 500; transition: all 0.2s;
}
.tab-buttons button.active {
  background: rgba(59,130,246,0.12); color: var(--sirex-primary-light);
  border-color: var(--sirex-primary);
}
/* Learning */
.learning-card {
  padding: 18px; border-radius: 12px;
  background: var(--sirex-bg-card); border: 1px solid var(--sirex-border);
  margin-bottom: 8px;
}
.learning-question { display: flex; gap: 12px; align-items: flex-start; }
.q-icon { font-size: 1.2rem; }
.learning-answer {
  display: flex; gap: 12px; margin-top: 12px; padding-top: 12px;
  border-top: 1px solid var(--sirex-border);
}
.a-icon { font-size: 1rem; }
.learning-actions { display: flex; gap: 8px; margin-top: 12px; }
.btn-answer {
  padding: 6px 16px; border-radius: 8px; border: none; cursor: pointer;
  background: var(--sirex-gradient); color: white; font-weight: 600; font-size: 0.82rem;
}
.btn-ignore {
  padding: 6px 16px; border-radius: 8px; border: 1px solid var(--sirex-border);
  background: transparent; color: var(--text-muted); cursor: pointer; font-size: 0.82rem;
}
.answer-form { margin-top: 12px; }
.answer-form textarea {
  width: 100%; padding: 10px 14px; border-radius: 8px; border: 1px solid var(--sirex-border);
  background: var(--sirex-bg); color: var(--text-primary); font-size: 0.88rem;
  font-family: inherit; resize: vertical;
}
/* Status Config */
.config-desc { color: var(--text-secondary); font-size: 0.9rem; margin-bottom: 16px; }
.loading { text-align: center; padding: 40px; color: var(--text-muted); }
.empty { text-align: center; padding: 40px; color: var(--text-muted); font-size: 0.9rem; }
@media (max-width: 768px) {
  .admin-sidebar { width: 60px; }
  .admin-sidebar .nav-label, .admin-sidebar .logo-text,
  .admin-sidebar .logo-sub, .admin-sidebar .topbar-info { display: none; }
  .admin-main { margin-left: 60px; }
  .admin-content { padding: 16px; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .form-grid { grid-template-columns: 1fr; }
}
/* ──────────────────────────────────────────────────────── */
/* INTERNAL CHAT SYSTEM (WhatsApp-like fidelity)          */
/* ──────────────────────────────────────────────────────── */
.ic-root {
  display: flex;
  height: calc(100vh - 130px);
  background: #ffffff;
  border-radius: 16px;
  border: 1.5px solid #e5e7eb;
  overflow: hidden;
  font-family: inherit;
  box-shadow: 0 4px 20px -2px rgba(0,0,0,0.05);
}
.ic-sidebar {
  width: 320px;
  border-right: 1.5px solid #e5e7eb;
  display: flex;
  flex-direction: column;
  background: #f8fafc;
  flex-shrink: 0;
}
.ic-sidebar-header {
  padding: 18px 16px;
  border-bottom: 1.5px solid #e5e7eb;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: #ffffff;
}
.ic-sidebar-header h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 800;
  color: #0f172a;
}
.ic-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.ic-search-wrap svg {
  position: absolute;
  left: 12px;
  color: #94a3b8;
  pointer-events: none;
}
.ic-search-wrap input {
  width: 100%;
  padding: 9px 12px 9px 36px;
  border-radius: 10px;
  border: 1.5px solid #e2e8f0;
  font-size: 13px;
  background: #ffffff;
  color: #1e293b;
  transition: all 0.2s;
}
.ic-search-wrap input:focus {
  border-color: #6366f1;
  outline: none;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}
.ic-contacts-list {
  flex: 1;
  overflow-y: auto;
  padding: 10px 8px;
}
.ic-section-label {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  color: #94a3b8;
  letter-spacing: 0.5px;
  padding: 12px 8px 6px;
}
.ic-contact-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s;
  margin-bottom: 3px;
  background: transparent;
}
.ic-contact-item:hover {
  background: #f1f5f9;
}
.ic-contact-active {
  background: #e2e8f0 !important;
}
.ic-avatar {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 15px;
  flex-shrink: 0;
  text-transform: uppercase;
}
.ic-contact-details {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ic-contact-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.ic-contact-name {
  font-weight: 700;
  font-size: 13.5px;
  color: #1e293b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ic-unread-badge {
  background: #10b981;
  color: #ffffff;
  font-size: 10px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 99px;
  min-width: 18px;
  height: 16px;
  line-height: 12px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ic-contact-sub {
  font-size: 11.5px;
  color: #64748b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ic-presence-dot {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 2px solid #f8fafc;
}
.ic-presence-online {
  background: #10b981;
}
.ic-presence-offline {
  background: #cbd5e1;
}
.ic-chat-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  min-width: 0;
}
.ic-chat-header {
  padding: 14px 20px;
  border-bottom: 1.5px solid #e5e7eb;
  display: flex;
  align-items: center;
  gap: 12px;
  background: #ffffff;
  flex-shrink: 0;
}
.ic-messages-box {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  background: #f8fafc;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ic-message-row {
  display: flex;
  width: 100%;
}
.ic-message-row-left {
  justify-content: flex-start;
}
.ic-message-row-right {
  justify-content: flex-end;
}
.ic-bubble {
  max-width: 70%;
  padding: 10px 14px;
  border-radius: 12px;
  position: relative;
  display: flex;
  flex-direction: column;
  box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}
.ic-bubble-sent {
  background: #dbeafe;
  border-top-right-radius: 2px;
  color: #1e3a8a;
  align-self: flex-end;
}
.ic-bubble-received {
  background: #ffffff;
  border-top-left-radius: 2px;
  color: #0f172a;
  align-self: flex-start;
  border: 1.5px solid #e5e7eb;
}
.ic-sender-name {
  font-size: 11px;
  font-weight: 800;
  margin-bottom: 4px;
  text-transform: capitalize;
}
.ic-bubble-time {
  font-size: 9px;
  color: #94a3b8;
  align-self: flex-end;
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 2px;
}
.ic-ticks {
  color: #94a3b8;
  font-weight: 700;
}
.ic-ticks-read {
  color: #3b82f6 !important;
}
.ic-input-bar {
  padding: 12px 18px;
  border-top: 1.5px solid #e5e7eb;
  display: flex;
  align-items: center;
  gap: 12px;
  background: #ffffff;
  flex-shrink: 0;
}
.ic-attach-btn {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: #64748b;
  padding: 8px;
  border-radius: 10px;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ic-attach-btn:hover {
  background: #f1f5f9;
  color: #0f172a;
}
.ic-chat-input {
  flex: 1;
  padding: 10px 16px;
  border-radius: 10px;
  border: 1.5px solid #e2e8f0;
  font-size: 13.5px;
  color: #1e293b;
  background: #ffffff;
  transition: all 0.2s;
}
.ic-chat-input:focus {
  border-color: #6366f1;
  outline: none;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}
.ic-send-btn {
  background: #6366f1;
  border: none;
  color: #ffffff;
  padding: 10px 20px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 13.5px;
  cursor: pointer;
  transition: all 0.2s;
}
.ic-send-btn:hover {
  background: #4f46e5;
}
.ic-send-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.ic-placeholder {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px;
  text-align: center;
  background: #f8fafc;
  color: #64748b;
}
.ic-placeholder h3 {
  color: #0f172a;
  margin-top: 0;
  margin-bottom: 8px;
  font-weight: 800;
  font-size: 19px;
}
.ic-placeholder p {
  margin: 0;
  font-size: 13px;
  max-width: 380px;
  line-height: 1.5;
}
.ic-date-separator {
  display: flex;
  justify-content: center;
  margin: 14px 0;
}
.ic-date-separator span {
  background: #e2e8f0;
  color: #475569;
  font-size: 10px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 6px;
  text-transform: uppercase;
}
.ic-media-image {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 2px;
}
.ic-media-image img {
  max-width: 100%;
  max-height: 240px;
  border-radius: 8px;
  object-fit: cover;
}
.ic-media-caption {
  font-size: 12px;
  word-break: break-word;
}
.ic-media-file {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  padding: 10px 14px;
  background: rgba(0, 0, 0, 0.04);
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.05);
  color: inherit;
  transition: background 0.2s;
  max-width: 280px;
}
.ic-media-file:hover {
  background: rgba(0, 0, 0, 0.08);
}
.ic-file-icon {
  font-size: 24px;
}
.ic-file-name {
  font-size: 12.5px;
  font-weight: 700;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.ic-file-size {
  font-size: 10.5px;
  opacity: 0.7;
  margin-top: 1px;
}
.ic-spinner-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}


/* =======================================================
   SIREX MASTER — Complete styles (master.css)
   Billing banners also included here for AdminShell
======================================================= */
/* ======= Master Login ======= */
.ml-root {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #0f0f23 0%, #1a1a3e 50%, #0f0f23 100%);
  font-family: 'Inter', sans-serif; padding: 20px;
}
.ml-card {
  background: #1e1e3f; border: 1px solid rgba(99,102,241,.3);
  border-radius: 20px; padding: 44px 40px; width: 100%; max-width: 420px;
  box-shadow: 0 20px 60px rgba(0,0,0,.5), 0 0 0 1px rgba(99,102,241,.1);
}
.ml-logo {
  display: flex; align-items: center; gap: 10px;
  font-size: 20px; font-weight: 900; color: #e2e8f0;
  margin-bottom: 28px; letter-spacing: .05em;
}
.ml-title  { font-size: 24px; font-weight: 800; color: #f1f5f9; margin-bottom: 6px; }
.ml-sub    { font-size: 13px; color: #64748b; margin-bottom: 28px; }
.ml-form   { display: flex; flex-direction: column; gap: 14px; }
.ml-field  { display: flex; flex-direction: column; gap: 6px; }
.ml-field label { font-size: 12px; font-weight: 700; color: #94a3b8; letter-spacing: .04em; }
.ml-field input {
  padding: 12px 14px; border-radius: 10px;
  border: 1.5px solid rgba(99,102,241,.3);
  background: rgba(255,255,255,.05); color: #f1f5f9; font-size: 14px;
  outline: none; transition: border-color .2s;
}
.ml-field input:focus { border-color: #6366f1; }
.ml-error {
  background: rgba(239,68,68,.15); color: #fca5a5;
  border: 1px solid rgba(239,68,68,.3); border-radius: 8px;
  padding: 10px 14px; font-size: 13px;
}
.ml-btn {
  padding: 13px; border-radius: 10px; border: none;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff; font-weight: 700; font-size: 15px; cursor: pointer;
  transition: opacity .2s, transform .15s; margin-top: 8px;
}
.ml-btn:hover:not(:disabled) { opacity: .9; transform: translateY(-1px); }
.ml-btn:disabled { opacity: .5; cursor: not-allowed; }
.ml-footer { text-align: center; margin-top: 20px; }
.ml-footer a { color: #64748b; font-size: 13px; text-decoration: none; }
.ml-footer a:hover { color: #6366f1; }
/* ======= Master Shell Root ======= */
.ms-root {
  display: flex; height: 100vh; overflow: hidden;
  font-family: 'Inter', sans-serif; background: #f8fafc;
}
/* ======= Sidebar ======= */
.ms-sidebar {
  width: 220px; flex-shrink: 0; background: #1e1e3f;
  display: flex; flex-direction: column; border-right: 1px solid rgba(99,102,241,.2);
}
.ms-logo {
  display: flex; align-items: center; gap: 10px;
  padding: 20px 16px; font-size: 14px; font-weight: 900;
  color: #e2e8f0; letter-spacing: .05em;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.ms-nav { padding: 12px 8px; flex: 1; display: flex; flex-direction: column; gap: 4px; }
.ms-nav-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px; border-radius: 10px; border: none;
  background: transparent; color: #94a3b8; font-size: 13px; font-weight: 600;
  cursor: pointer; text-align: left; transition: all .15s; width: 100%;
}
.ms-nav-item:hover { background: rgba(99,102,241,.15); color: #c7d2fe; }
.ms-nav-on { background: rgba(99,102,241,.25) !important; color: #c7d2fe !important; }
.ms-nav-count {
  background: rgba(99,102,241,.3); color: #a5b4fc;
  font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 10px;
}
.ms-sidebar-bottom {
  padding: 14px 12px; border-top: 1px solid rgba(255,255,255,.07);
}
.ms-user  { font-size: 12px; font-weight: 700; color: #c7d2fe; margin-bottom: 8px; }
.ms-logout {
  width: 100%; padding: 8px; border-radius: 8px; border: 1px solid rgba(239,68,68,.3);
  background: rgba(239,68,68,.1); color: #fca5a5; font-size: 12px; font-weight: 600;
  cursor: pointer; transition: all .15s;
}
.ms-logout:hover { background: rgba(239,68,68,.2); }
/* ======= Main Area ======= */
.ms-main {
  flex: 1; overflow-y: auto; padding: 28px 32px;
}
.ms-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; margin-bottom: 24px; flex-wrap: wrap;
}
.ms-title { font-size: 22px; font-weight: 900; color: #0f172a; margin: 0 0 4px; }
.ms-desc  { font-size: 13px; color: #64748b; margin: 0; }
.ms-new-btn {
  padding: 10px 22px; border-radius: 10px; border: none;
  background: #6366f1; color: #fff; font-weight: 700; font-size: 13px;
  cursor: pointer; white-space: nowrap; transition: background .2s, transform .15s;
}
.ms-new-btn:hover { background: #4f46e5; transform: translateY(-1px); }
.ms-ghost-btn {
  padding: 10px 18px; border-radius: 10px; border: 1.5px solid #e5e7eb;
  background: #fff; color: #64748b; font-size: 13px; font-weight: 600;
  cursor: pointer; transition: all .15s;
}
.ms-ghost-btn:hover { border-color: #6366f1; color: #6366f1; }
.ms-save-btn {
  padding: 10px 22px; border-radius: 10px; border: none;
  background: #6366f1; color: #fff; font-weight: 700; font-size: 13px;
  cursor: pointer; transition: background .2s;
}
.ms-save-btn:hover:not(:disabled) { background: #4f46e5; }
.ms-save-btn:disabled { opacity: .5; cursor: default; }
.ms-save-ok { background: #10b981 !important; }
/* Stats row */
.ms-stats-row {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 14px; margin-bottom: 20px;
}
.ms-stat-card {
  background: #fff; border-radius: 14px; padding: 16px 18px;
  border: 1.5px solid #e5e7eb; text-align: center;
}
.ms-stat-val   { font-size: 28px; font-weight: 900; color: #0f172a; }
.ms-stat-label { font-size: 12px; color: #64748b; font-weight: 600; margin-top: 4px; }
.ms-stat-alert .ms-stat-val { color: #f59e0b; }
.ms-stat-green .ms-stat-val { color: #10b981; }
/* Search */
.ms-search-row { margin-bottom: 20px; }
.ms-search {
  width: 100%; max-width: 380px; padding: 10px 14px; border-radius: 10px;
  border: 1.5px solid #e5e7eb; font-size: 14px; outline: none; box-sizing: border-box;
  transition: border-color .2s;
}
.ms-search:focus { border-color: #6366f1; }
/* Tenant cards */
.ms-tenant-list { display: flex; flex-direction: column; gap: 14px; }
.ms-tenant-card {
  background: #fff; border-radius: 16px; padding: 20px 22px;
  border: 1.5px solid #e5e7eb; transition: box-shadow .2s;
}
.ms-tenant-card:hover { box-shadow: 0 4px 20px rgba(0,0,0,.08); }
.ms-card-alert    { border-left: 4px solid #ef4444; }
.ms-card-suspended { border-left: 4px solid #94a3b8; opacity: .7; }
.ms-tenant-head {
  display: flex; align-items: center; gap: 14px; margin-bottom: 14px;
}
.ms-tenant-av {
  width: 42px; height: 42px; border-radius: 12px;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff; font-size: 18px; font-weight: 900;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.ms-tenant-info { flex: 1 }
.ms-tenant-name { font-size: 16px; font-weight: 800; color: #0f172a; margin-bottom: 4px; }
.ms-tenant-meta { display: flex; gap: 10px; flex-wrap: wrap; }
.ms-tenant-slug { font-size: 12px; color: #6366f1; font-weight: 600; }
.ms-tenant-plan {
  font-size: 11px; background: #eef2ff; color: #4f46e5;
  border-radius: 8px; padding: 2px 8px; font-weight: 700;
}
.ms-tenant-status-chip {
  font-size: 12px; font-weight: 800; padding: 5px 12px; border-radius: 20px;
  white-space: nowrap; flex-shrink: 0;
}
.ms-tenant-details {
  display: flex; flex-wrap: wrap; gap: 8px 20px;
  margin-bottom: 14px; padding-bottom: 14px;
  border-bottom: 1px solid #f1f5f9;
}
.ms-tenant-detail { font-size: 12px; color: #64748b; display: flex; align-items: center; gap: 4px; }
.ms-tenant-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.ms-action-btn {
  padding: 7px 14px; border-radius: 8px; border: 1.5px solid #e5e7eb;
  background: #fff; font-size: 12px; font-weight: 600; cursor: pointer;
  color: #475569; transition: all .15s; white-space: nowrap;
}
.ms-action-btn:hover    { border-color: #6366f1; color: #6366f1; }
.ms-action-pay          { border-color: #10b981 !important; color: #10b981 !important; background: #f0fdf4 !important; }
.ms-action-pay:hover    { background: #dcfce7 !important; }
.ms-action-suspend      { border-color: #ef4444 !important; color: #ef4444 !important; }
.ms-action-activate     { border-color: #10b981 !important; color: #10b981 !important; }
.ms-tenant-notes        { font-size: 11px; color: #94a3b8; padding: 6px 10px; background: #f8fafc; border-radius: 6px; }
/* Payment history */
.ms-pay-history {
  margin-top: 10px; display: flex; flex-direction: column; gap: 4px;
  border-top: 1px solid #f1f5f9; padding-top: 10px;
}
.ms-pay-row {
  display: flex; gap: 16px; font-size: 11px; color: #64748b;
  background: #f8fafc; border-radius: 6px; padding: 5px 10px;
}
.ms-pay-row span:first-child { font-weight: 800; color: #10b981; }
/* Loading */
.ms-loading { display: flex; justify-content: center; padding: 80px; }
.ms-spinner {
  width: 36px; height: 36px; border-radius: 50%;
  border: 3px solid #e0e7ff; border-top-color: #6366f1;
  animation: spin .8s linear infinite;
}
.ms-empty { text-align: center; padding: 80px 20px; color: #94a3b8; font-size: 15px; }
.ms-empty button { color: #6366f1; background: none; border: none; cursor: pointer; font-weight: 700; font-size: 15px; }
@keyframes spin { to { transform: rotate(360deg); } }
/* ======= Form ======= */
.ms-form-grid { display: flex; flex-direction: column; gap: 20px; }
.ms-form-section {
  background: #fff; border-radius: 16px; padding: 20px 22px;
  border: 1.5px solid #e5e7eb;
}
.ms-form-section-title {
  font-size: 13px; font-weight: 800; color: #0f172a;
  margin-bottom: 16px; letter-spacing: .02em;
}
.ms-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.ms-field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; }
.ms-field:last-child { margin-bottom: 0; }
.ms-field label { font-size: 12px; font-weight: 700; color: #475569; letter-spacing: .03em; }
.ms-field input, .ms-field select, .ms-field textarea {
  padding: 10px 13px; border-radius: 9px; border: 1.5px solid #e5e7eb;
  font-size: 13px; color: #0f172a; outline: none; transition: border-color .2s;
  background: #fff; font-family: inherit;
}
.ms-field input:focus, .ms-field select:focus, .ms-field textarea:focus { border-color: #6366f1; }
.ms-field textarea { resize: vertical; }
.ms-billing-preview {
  background: #f0fdf4; border: 1.5px solid #bbf7d0; border-radius: 10px;
  padding: 10px 14px; font-size: 13px; color: #166534; margin-top: 8px;
}
.ms-wa-note {
  font-size: 12px; color: #64748b; background: #fef9c3; border: 1px solid #fde047;
  border-radius: 8px; padding: 8px 12px; margin-bottom: 14px;
}
.ms-toggle-wa {
  font-size: 12px; font-weight: 600; color: #6366f1;
  background: #eef2ff; border: none; border-radius: 6px;
  padding: 4px 10px; cursor: pointer; transition: background .15s;
}
.ms-toggle-wa:hover { background: #e0e7ff; }
/* ======= Payment Modal ======= */
.ms-modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.5);
  display: flex; align-items: center; justify-content: center; z-index: 9999; padding: 20px;
}
.ms-modal {
  background: #fff; border-radius: 20px; padding: 28px 28px;
  width: 100%; max-width: 440px; box-shadow: 0 20px 60px rgba(0,0,0,.3);
}
.ms-modal-title { font-size: 17px; font-weight: 800; color: #0f172a; margin-bottom: 20px; }
.ms-modal-actions { display: flex; gap: 10px; justify-content: flex-end; padding-top: 16px; margin-top: 8px; border-top: 1px solid #f1f5f9; }
/* =======================================================
   BILLING BANNERS — AdminShell (for client panels)
======================================================= */
.ash-billing-banner {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px; border-radius: 12px; margin-bottom: 16px;
  font-size: 13px; border: 1.5px solid;
  animation: fadeSlideDown .3s ease;
}
@keyframes fadeSlideDown {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.ash-banner-warn {
  background: #fffbeb; border-color: #fcd34d; color: #78350f;
}
.ash-banner-danger {
  background: #fff1f2; border-color: #fca5a5; color: #7f1d1d;
}
.ash-billing-banner > span { font-size: 20px; flex-shrink: 0; }
.ash-billing-banner > div { flex: 1; }
.ash-billing-banner strong { display: block; font-weight: 800; margin-bottom: 2px; }
.ash-banner-btn {
  padding: 8px 16px; border-radius: 8px; font-size: 12px; font-weight: 700;
  white-space: nowrap; text-decoration: none; flex-shrink: 0;
  background: #0f172a; color: #fff; transition: background .15s;
}
.ash-banner-btn:hover { background: #1e293b; }
/* Suspension Gate */
.ash-suspended-gate {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 70vh; text-align: center; padding: 40px;
}
.ash-suspended-icon {
  font-size: 64px; margin-bottom: 20px;
  filter: grayscale(1); opacity: .7;
}
.ash-suspended-gate h2 {
  font-size: 28px; font-weight: 900; color: #0f172a; margin: 0 0 12px;
}
.ash-suspended-gate p {
  font-size: 15px; color: #64748b; margin: 0 0 8px; max-width: 400px;
}
.ash-suspended-btn {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 24px; padding: 14px 28px; border-radius: 12px;
  background: linear-gradient(135deg, #25D366, #128C7E);
  color: #fff; text-decoration: none; font-weight: 700; font-size: 15px;
  transition: transform .15s, box-shadow .15s;
  box-shadow: 0 4px 20px rgba(37,211,102,.4);
}
.ash-suspended-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(37,211,102,.5); }
/* ======= WhatsApp Steps ======= */
.ms-wa-steps {
  display: flex; flex-direction: column; gap: 10px;
  margin-bottom: 16px;
}
.ms-wa-step {
  display: flex; align-items: flex-start; gap: 12px;
  background: #f8fafc; border-radius: 10px; padding: 10px 14px;
  border: 1px solid #e2e8f0; font-size: 12px; color: #475569; line-height: 1.6;
}
.ms-wa-step b { color: #0f172a; }
.ms-wa-step code {
  background: #e2e8f0; border-radius: 4px; padding: 1px 6px;
  font-family: monospace; font-size: 11px; color: #6366f1;
}
.ms-wa-step-num {
  width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff; font-size: 12px; font-weight: 900;
  display: flex; align-items: center; justify-content: center;
}
/* ======= Onboarding Modal ======= */
.ms-onboarding-modal {
  max-width: 560px !important;
  max-height: 90vh; overflow-y: auto;
}
.ms-ob-section {
  background: #f8fafc; border-radius: 12px; padding: 16px;
  border: 1px solid #e2e8f0; margin-bottom: 14px;
}
.ms-ob-section-title {
  font-size: 12px; font-weight: 800; color: #475569;
  text-transform: uppercase; letter-spacing: .06em; margin-bottom: 12px;
}
.ms-ob-row {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 0; border-bottom: 1px solid #e2e8f0; flex-wrap: wrap;
}
.ms-ob-row:last-child { border-bottom: none; padding-bottom: 0; }
.ms-ob-label { font-size: 12px; color: #94a3b8; font-weight: 600; width: 100px; flex-shrink: 0; }
.ms-ob-val   { font-size: 13px; color: #0f172a; font-weight: 700; flex: 1; }
.ms-ob-mono  { font-family: monospace; background: #eef2ff; color: #4f46e5; border-radius: 6px; padding: 3px 8px; }
.ms-ob-link  { color: #6366f1; text-decoration: none; }
.ms-ob-link:hover { text-decoration: underline; }
.ms-ob-copy {
  padding: 4px 8px; border-radius: 6px; border: 1px solid #e2e8f0;
  background: #fff; cursor: pointer; font-size: 14px;
  transition: background .15s;
}
.ms-ob-copy:hover { background: #e0e7ff; }
.ms-ob-meta-status {
  font-size: 13px; font-weight: 600; padding: 10px 14px;
  border-radius: 8px; line-height: 1.5;
}
.ms-ob-meta-status.ok      { background: #dcfce7; color: #166534; border: 1px solid #bbf7d0; }
.ms-ob-meta-status.error   { background: #fee2e2; color: #7f1d1d; border: 1px solid #fca5a5; }
.ms-ob-meta-status.skipped { background: #f1f5f9; color: #64748b; border: 1px solid #e2e8f0; }
.ms-ob-copy-all {
  width: 100%; padding: 12px; border-radius: 10px;
  border: 1.5px dashed #6366f1; background: #eef2ff;
  color: #4f46e5; font-size: 13px; font-weight: 700;
  cursor: pointer; transition: all .15s;
}
.ms-ob-copy-all:hover { background: #e0e7ff; }
/* SIREX ADMIN PANEL — Light Mode */
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Inter',system-ui,sans-serif;background:#f8fafc;color:#0f172a}

/* LOGIN */
.al-root{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#f0f4ff 0%,#faf5ff 100%);position:relative}
.al-bg{position:fixed;inset:0;background:url("data:image/svg+xml,%3Csvg width='60' height='60' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='30' cy='30' r='1' fill='%236366f1' opacity='.08'/%3E%3C/svg%3E");pointer-events:none}
.al-card{background:#fff;border-radius:20px;padding:48px;width:100%;max-width:440px;box-shadow:0 4px 6px -1px rgba(0,0,0,.06),0 20px 40px -8px rgba(99,102,241,.12);position:relative;z-index:1}
.al-header{text-align:center;margin-bottom:32px}
.al-logo{height:48px;margin-bottom:16px;filter:brightness(0) saturate(100%) invert(35%) sepia(74%) saturate(1000%) hue-rotate(223deg)}
.al-title{font-size:24px;font-weight:700;color:#0f172a;margin-bottom:8px}
.al-subtitle{font-size:14px;color:#64748b}
.al-form{display:flex;flex-direction:column;gap:20px}
.al-field label{display:block;font-size:13px;font-weight:600;color:#374151;margin-bottom:8px}
.al-input-wrap{position:relative;display:flex;align-items:center}
.al-input-wrap > svg{position:absolute;left:14px;color:#9ca3af}
.al-input-wrap input{width:100%;padding:12px 44px 12px 44px;border:1.5px solid #e5e7eb;border-radius:10px;font-size:14px;background:#f9fafb;transition:.2s}
.al-input-wrap input:focus{outline:none;border-color:#6366f1;background:#fff;box-shadow:0 0 0 3px rgba(99,102,241,.1)}
.al-eye-btn{position:absolute;right:14px;background:none;border:none;cursor:pointer;color:#9ca3af;padding:0;display:flex;align-items:center;justify-content:center;transition:color .2s;z-index:2}
.al-eye-btn:hover{color:#6366f1}
.al-input-wrap select{width:100%;padding:12px 14px 12px 44px;border:1.5px solid #e5e7eb;border-radius:10px;font-size:14px;background:#f9fafb;transition:.2s;appearance:none;-webkit-appearance:none}
.al-error{display:flex;align-items:center;gap:8px;padding:12px;background:#fef2f2;border:1px solid #fecaca;border-radius:8px;font-size:13px;color:#dc2626}
.al-btn{width:100%;padding:14px;background:linear-gradient(135deg,#6366f1,#8b5cf6);color:#fff;border:none;border-radius:10px;font-size:15px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:.2s}
.al-btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 8px 20px -4px rgba(99,102,241,.4)}
.al-btn:disabled{opacity:.7;cursor:not-allowed}
.al-footer{text-align:center;margin-top:20px}
.al-footer a{font-size:13px;color:#6366f1;text-decoration:none}
.al-spinner{width:18px;height:18px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .6s linear infinite}

/* SHELL */
.ash-root{display:grid;grid-template-columns:auto 1fr;min-height:100vh}
.ash-root.ash-sidebar-closed .ash-sidebar{width:72px}
.ash-sidebar{width:260px;background:#fff;border-right:1px solid #e5e7eb;display:flex;flex-direction:column;transition:width .3s;overflow:hidden;flex-shrink:0}
.ash-brand{display:flex;align-items:center;gap:12px;padding:20px 16px;border-bottom:1px solid #f1f5f9;min-height:72px}
.ash-brand-logo{height:32px;flex-shrink:0;filter:brightness(0) saturate(100%) invert(35%) sepia(74%) saturate(1000%) hue-rotate(223deg)}
.ash-brand-text{flex:1;overflow:hidden}
.ash-brand-name{display:block;font-size:16px;font-weight:800;color:#0f172a;letter-spacing:.04em}
.ash-brand-tag{display:block;font-size:11px;color:#94a3b8;font-weight:500}
.ash-collapse-btn{background:none;border:none;cursor:pointer;color:#94a3b8;padding:4px;flex-shrink:0}
.ash-collapse-btn:hover{color:#6366f1}
.ash-nav{flex:1;padding:16px 8px;display:flex;flex-direction:column;gap:4px}
.ash-nav-item{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:10px;border:none;background:none;cursor:pointer;color:#64748b;font-size:14px;font-weight:500;width:100%;text-align:left;transition:.15s;position:relative}
.ash-nav-item:hover{background:#f8fafc;color:#0f172a}
.ash-nav-active{background:linear-gradient(135deg,#eef2ff,#ede9fe);color:#6366f1 !important;font-weight:600}
.ash-nav-icon{flex-shrink:0;width:20px;display:flex;align-items:center;justify-content:center}
.ash-nav-label{white-space:nowrap;overflow:hidden}
.ash-nav-indicator{position:absolute;right:0;top:50%;transform:translateY(-50%);width:3px;height:24px;background:#6366f1;border-radius:4px}
.ash-sidebar-closed .ash-nav-label,.ash-sidebar-closed .ash-brand-text,.ash-sidebar-closed .ash-agent-info{display:none}
.ash-sidebar-closed .ash-brand{justify-content:center;padding:20px 0}
.ash-sidebar-closed .ash-brand-logo{display:none}
.ash-sidebar-closed .ash-collapse-btn{padding:8px;background:#f1f5f9;border-radius:50%;display:flex;align-items:center;justify-content:center;width:32px;height:32px;color:#6366f1}
.ash-sidebar-closed .ash-sidebar-footer{padding:12px 0}
.ash-sidebar-closed .ash-agent-card{flex-direction:column;background:transparent;padding:4px 0;gap:8px}
.ash-sidebar-closed .ash-logout-btn{padding:8px;background:#f1f5f9;border-radius:50%;display:flex;align-items:center;justify-content:center;width:32px;height:32px;color:#ef4444;transition:all 0.2s}
.ash-sidebar-closed .ash-logout-btn:hover{background:#fee2e2;color:#ef4444}
.ash-sidebar-footer{border-top:1px solid #f1f5f9;padding:12px 8px}
.ash-agent-card{display:flex;align-items:center;gap:10px;padding:10px;border-radius:10px;background:#f8fafc}
.ash-agent-avatar{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#6366f1,#8b5cf6);color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;flex-shrink:0}
.ash-agent-info{flex:1;overflow:hidden}
.ash-agent-name{font-size:13px;font-weight:600;color:#0f172a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ash-agent-role{font-size:11px;color:#94a3b8}
.ash-logout-btn{background:none;border:none;cursor:pointer;color:#94a3b8;padding:4px}
.ash-logout-btn:hover{color:#ef4444}
.ash-main{display:flex;flex-direction:column;height:100vh;min-height:0;overflow:hidden;background:#f8fafc}
.ash-topbar{background:#fff;border-bottom:1px solid #e5e7eb;padding:0 32px;height:72px;display:flex;align-items:center;justify-content:space-between}
.ash-page-title{font-size:20px;font-weight:700;color:#0f172a}
.ash-breadcrumb{display:flex;align-items:center;gap:6px;font-size:12px;color:#94a3b8;margin-top:2px}
.ash-breadcrumb span:last-child{color:#6366f1}
.ash-topbar-right{display:flex;align-items:center;gap:16px}
.ash-tenant-chip{display:flex;align-items:center;gap:6px;padding:6px 14px;background:#f0fdf4;border:1px solid #bbf7d0;border-radius:20px;font-size:13px;font-weight:600;color:#15803d}
.ash-tenant-dot{width:6px;height:6px;border-radius:50%;background:#22c55e}
.ash-time{font-size:13px;color:#94a3b8}
.ash-content{flex:1;padding:28px 32px;overflow-y:auto;min-height:0}

/* DASHBOARD */
.ds-root{display:flex;flex-direction:column;gap:24px}
.ds-welcome{display:flex;align-items:center;justify-content:space-between}
.ds-welcome-title{font-size:22px;font-weight:700;color:#0f172a;margin-bottom:4px}
.ds-welcome-sub{font-size:14px;color:#64748b}
.ds-refresh-btn{display:flex;align-items:center;gap:8px;padding:9px 18px;border:1.5px solid #e5e7eb;border-radius:8px;background:#fff;font-size:13px;font-weight:500;color:#64748b;cursor:pointer;transition:.2s}
.ds-refresh-btn:hover{border-color:#6366f1;color:#6366f1}
.ds-stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.ds-stat-card{background:#fff;border-radius:14px;border:1px solid #f1f5f9;padding:20px;display:flex;align-items:flex-start;gap:16px;box-shadow:0 1px 3px rgba(0,0,0,.04)}
.ds-stat-icon{width:44px;height:44px;border-radius:10px;background:#f8fafc;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ds-stat-value{font-size:26px;font-weight:800;color:#0f172a;line-height:1}
.ds-stat-label{font-size:13px;color:#64748b;margin-top:4px}
.ds-stat-sub{font-size:11px;color:#94a3b8;margin-top:2px}
.ds-stat-card.ds-stat-card-clickable {
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.ds-stat-card.ds-stat-card-clickable:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(99,102,241,0.08);
  border-color: #6366f1;
}
.ds-section{background:#fff;border-radius:14px;border:1px solid #f1f5f9;padding:20px}
.ds-section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.ds-section-header h3{font-size:15px;font-weight:700;color:#0f172a}
.ds-section-count{font-size:12px;color:#94a3b8}
.ds-table-head{display:grid;grid-template-columns:1fr auto auto;gap:16px;padding:8px 12px;font-size:12px;font-weight:600;color:#94a3b8;text-transform:uppercase;letter-spacing:.05em}
.ds-table-row{display:grid;grid-template-columns:1fr auto auto;gap:16px;align-items:center;padding:12px;border-radius:8px;cursor:pointer;transition:.15s}
.ds-table-row:hover{background:#f8fafc}
.ds-conv-client{display:flex;align-items:center;gap:10px}
.ds-conv-avatar{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#e0e7ff,#ede9fe);color:#6366f1;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px}
.ds-conv-name{font-size:14px;font-weight:600;color:#0f172a}
.ds-conv-phone{font-size:12px;color:#94a3b8}
.ds-status-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:20px;font-size:12px;font-weight:600}
.ds-status-dot{width:6px;height:6px;border-radius:50%}
.ds-conv-time{font-size:12px;color:#94a3b8}
.ds-empty{text-align:center;padding:32px;color:#94a3b8;font-size:14px}
.ds-spin{animation:spin .6s linear infinite}

/* CONVERSATIONS */
.cv-root{display:grid;grid-template-columns:340px 1fr;gap:0;height:calc(100vh - 128px);background:#fff;border-radius:14px;border:1px solid #e5e7eb;overflow:hidden}
.cv-list-panel{border-right:1px solid #e5e7eb;display:flex;flex-direction:column}
.cv-list-header{padding:16px;border-bottom:1px solid #f1f5f9}
.cv-search{width:100%;padding:9px 14px;border:1.5px solid #e5e7eb;border-radius:8px;font-size:13px;background:#f8fafc;margin-bottom:12px}
.cv-search:focus{outline:none;border-color:#6366f1}
.cv-filter-tabs{display:flex;gap:4px;flex-wrap:wrap}
.cv-filter-tab{padding:5px 10px;border:1.5px solid #e5e7eb;border-radius:20px;font-size:12px;font-weight:500;background:#fff;cursor:pointer;transition:.15s;color:#64748b}
.cv-filter-tab:hover{border-color:#6366f1;color:#6366f1}
.cv-filter-active{background:#eef2ff;border-color:#6366f1;color:#6366f1 !important}
.cv-list{flex:1;overflow-y:auto}
.cv-item{display:flex;gap:12px;padding:14px 16px;cursor:pointer;transition:.15s;border-bottom:1px solid #f8fafc}
.cv-item:hover{background:#f8fafc}
.cv-item-selected{background:#eef2ff !important}
.cv-item-urgent{border-left:3px solid #f59e0b}
.cv-item-avatar{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,#e0e7ff,#ede9fe);color:#6366f1;display:flex;align-items:center;justify-content:center;font-weight:700;flex-shrink:0}
.cv-item-body{flex:1;min-width:0}
.cv-item-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:2px}
.cv-item-name{font-size:14px;font-weight:600;color:#0f172a}
.cv-item-time{font-size:11px;color:#94a3b8}
.cv-item-phone{font-size:12px;color:#94a3b8;margin-bottom:6px}
.cv-status-pill{display:inline-flex;align-items:center;gap:5px;padding:3px 8px;border-radius:20px;font-size:11px;font-weight:600}
.cv-status-dot{width:5px;height:5px;border-radius:50%}
.cv-empty{text-align:center;padding:48px 16px;color:#94a3b8;font-size:14px}
.cv-chat-panel{display:flex;flex-direction:column}
.cv-no-selection{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;color:#94a3b8}
.cv-no-selection p{font-size:14px}
.cv-chat-header{padding:16px 20px;border-bottom:1px solid #f1f5f9;display:flex;align-items:center;justify-content:space-between}
.cv-chat-client{display:flex;align-items:center;gap:12px}
.cv-chat-avatar{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,#e0e7ff,#ede9fe);color:#6366f1;display:flex;align-items:center;justify-content:center;font-weight:700}
.cv-chat-name{font-size:15px;font-weight:600;color:#0f172a}
.cv-chat-phone{font-size:12px;color:#94a3b8}
.cv-chat-actions{display:flex;align-items:center;gap:8px}
.cv-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;transition:.15s;border:none}
.cv-btn-primary{background:#6366f1;color:#fff}
.cv-btn-primary:hover{background:#4f46e5}
.cv-btn-ghost{background:#f1f5f9;color:#374151}
.cv-btn-ghost:hover{background:#e2e8f0}
.cv-btn-danger{background:#fef2f2;color:#dc2626;border:1px solid #fecaca}
.cv-messages{flex:1;overflow-y:auto;padding:20px;display:flex;flex-direction:column;gap:12px;background:#f8fafc}
.cv-msgs-loading,.cv-msgs-empty{text-align:center;padding:48px;color:#94a3b8}
.cv-msg{display:flex}
.cv-msg-user{justify-content:flex-start}
.cv-msg-bot{justify-content:flex-end}
.cv-msg-bubble{max-width:70%;padding:12px 16px;border-radius:16px;font-size:14px;line-height:1.5;position:relative}
.cv-msg-user .cv-msg-bubble{background:#fff;color:#0f172a;border:1px solid #e5e7eb;border-bottom-left-radius:4px}
.cv-msg-bot .cv-msg-bubble{background:#6366f1;color:#fff;border-bottom-right-radius:4px}
.cv-msg-time{font-size:10px;opacity:.6;margin-top:4px}
.cv-reply-bar{padding:16px;border-top:1px solid #e5e7eb;display:flex;gap:12px;background:#fff}
.cv-reply-input{flex:1;padding:12px 16px;border:1.5px solid #e5e7eb;border-radius:10px;font-size:14px}
.cv-reply-input:focus{outline:none;border-color:#6366f1}
.cv-reply-send{width:44px;height:44px;border-radius:10px;background:#6366f1;color:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.15s}
.cv-reply-send:hover:not(:disabled){background:#4f46e5}
.cv-reply-send:disabled{opacity:.5}
.cv-bot-notice{padding:12px 16px;background:#fef9c3;border-top:1px solid #fde68a;font-size:13px;color:#92400e;display:flex;align-items:center;gap:8px}

/* KNOWLEDGE BASE */
.kb-root{display:flex;flex-direction:column;gap:24px}
.kb-header{display:flex;align-items:flex-start;justify-content:space-between}
.kb-title{font-size:20px;font-weight:700;color:#0f172a;margin-bottom:4px}
.kb-desc{font-size:14px;color:#64748b}
.kb-add-btn{display:flex;align-items:center;gap:8px;padding:10px 18px;background:#6366f1;color:#fff;border:none;border-radius:10px;font-size:14px;font-weight:600;cursor:pointer}
.kb-form-card{background:#fff;border:1.5px solid #e0e7ff;border-radius:14px;padding:24px;display:flex;flex-direction:column;gap:16px}
.kb-form-card h4{font-size:16px;font-weight:700;color:#0f172a}
.kb-form-field label{display:block;font-size:13px;font-weight:600;color:#374151;margin-bottom:8px}
.kb-form-field input,.kb-form-field textarea{width:100%;padding:10px 14px;border:1.5px solid #e5e7eb;border-radius:8px;font-size:14px}
.kb-form-field input:focus,.kb-form-field textarea:focus{outline:none;border-color:#6366f1}
.kb-form-actions{display:flex;justify-content:flex-end;gap:12px}
.kb-btn-ghost{padding:9px 18px;border:1.5px solid #e5e7eb;border-radius:8px;background:#fff;font-size:13px;font-weight:600;cursor:pointer}
.kb-btn-primary{padding:9px 18px;background:#6366f1;color:#fff;border:none;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer}
.kb-list{display:flex;flex-direction:column;gap:12px}
.kb-entry{background:#fff;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden}
.kb-entry-header{display:flex;align-items:center;gap:12px;padding:16px}
.kb-entry-icon{width:36px;height:36px;border-radius:8px;background:#eef2ff;color:#6366f1;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.kb-entry-title{font-size:14px;font-weight:600;color:#0f172a}
.kb-entry-meta{font-size:12px;color:#94a3b8;margin-top:2px}
.kb-entry-actions{margin-left:auto;display:flex;gap:6px}
.kb-icon-btn{width:30px;height:30px;border-radius:6px;border:1px solid #e5e7eb;background:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#64748b}
.kb-icon-btn:hover{border-color:#6366f1;color:#6366f1}
.kb-icon-danger:hover{border-color:#fecaca;color:#dc2626}
.kb-entry-preview{padding:0 16px 16px;font-size:13px;color:#64748b;line-height:1.6;border-top:1px solid #f8fafc;padding-top:12px}
.kb-loading,.kb-empty{text-align:center;padding:48px;color:#94a3b8}

/* SETTINGS */
.st-root{max-width:720px}
.st-header{margin-bottom:28px}
.st-title{font-size:20px;font-weight:700;color:#0f172a;margin-bottom:6px}
.st-desc{font-size:14px;color:#64748b}
.st-form{display:flex;flex-direction:column;gap:24px}
.st-section{background:#fff;border:1px solid #e5e7eb;border-radius:14px;padding:24px}
.st-readonly-section{background:#f8fafc}
.st-section-title{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:700;color:#0f172a;margin-bottom:8px}
.st-section-desc{font-size:13px;color:#64748b;margin-bottom:12px}
.st-textarea{width:100%;padding:12px;border:1.5px solid #e5e7eb;border-radius:8px;font-size:14px;line-height:1.6;resize:vertical}
.st-textarea.tall{min-height:220px}
.st-textarea:focus{outline:none;border-color:#6366f1}
.st-fields-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.st-field label{display:block;font-size:13px;font-weight:600;color:#374151;margin-bottom:8px}
.st-input{width:100%;padding:11px 14px;border:1.5px solid #e5e7eb;border-radius:8px;font-size:14px}
.st-input:focus{outline:none;border-color:#6366f1}
.st-info-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.st-info-item{display:flex;flex-direction:column;gap:4px}
.st-info-item span{font-size:12px;color:#64748b;font-weight:600}
.st-info-item code{font-size:13px;color:#0f172a;background:#f1f5f9;padding:4px 8px;border-radius:4px}
.st-code-green{color:#16a34a !important}
.st-form-footer{display:flex;justify-content:flex-end}
.st-save-btn{padding:12px 28px;background:linear-gradient(135deg,#6366f1,#8b5cf6);color:#fff;border:none;border-radius:10px;font-size:14px;font-weight:700;cursor:pointer}
.st-loading,.st-empty{text-align:center;padding:48px;color:#94a3b8}

/* LOADING */
.ap-loading{min-height:100vh;display:flex;align-items:center;justify-content:center}
.ap-spinner-lg,.cv-spinner,.kb-spinner,.st-spinner{width:32px;height:32px;border:3px solid #e5e7eb;border-top-color:#6366f1;border-radius:50%;animation:spin .6s linear infinite}
.cv-spinner-sm{width:16px;height:16px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .6s linear infinite}

@keyframes spin{to{transform:rotate(360deg)}}
/* === CONVERSATIONS V2 ==================================== */
.ash-content:has(.cv2-root) {
  overflow: hidden !important;
  padding: 16px 20px !important;
  display: flex;
  flex-direction: column;
}
.cv2-root{display:grid;grid-template-columns:340px 1fr;height:100%;min-height:0;flex:1;background:#fff;border-radius:18px;border:1px solid rgba(229,231,235,0.8);overflow:hidden;box-shadow:0 12px 40px rgba(15,23,42,0.04);transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1)}
.cv2-root:has(.cv2-contact){grid-template-columns:320px 1fr 300px}

/* Sidebar list */
.cv2-sidebar{border-right:1px solid #f1f5f9;display:flex;flex-direction:column;background:linear-gradient(180deg,#fafafa 0%,#f8fafc 100%);height:100%;min-height:0;overflow:hidden}
.cv2-sidebar-head{padding:18px 16px 14px;border-bottom:1px solid #f1f5f9;flex-shrink:0}
.cv2-search-wrap{display:flex;align-items:center;gap:8px;background:#fff;border:1.5px solid #e2e8f0;border-radius:10px;padding:9px 14px;margin-bottom:12px;box-shadow:0 2px 4px rgba(0,0,0,0.01);transition:all 0.2s}
.cv2-search-wrap:focus-within{border-color:#6366f1;box-shadow:0 0 0 3px rgba(99,102,241,0.12)}
.cv2-search{border:none;outline:none;font-size:13px;flex:1;background:transparent;color:#0f172a}
.cv2-filters{display:flex;flex-wrap:wrap;gap:6px}
.cv2-filter{padding:5px 12px;border:1.5px solid #e2e8f0;border-radius:20px;font-size:11.5px;font-weight:600;background:#fff;cursor:pointer;color:#64748b;transition:all 0.2s cubic-bezier(0.4, 0, 0.2, 1)}
.cv2-filter:hover{border-color:#6366f1;color:#6366f1;transform:translateY(-1px)}
.cv2-filter-on{background:#eef2ff;border-color:#6366f1 !important;color:#6366f1 !important;font-weight:700;box-shadow:0 4px 12px rgba(99,102,241,0.08)}
.cv2-list{flex:1;overflow-y:auto;padding:6px 0}
.cv2-empty{text-align:center;padding:48px 20px;color:#94a3b8;font-size:13.5px}

/* List items */
.cv2-item{display:flex;gap:12px;padding:14px 16px;cursor:pointer;border-bottom:1px solid #f8fafc;border-left:4px solid transparent;transition:all 0.2s}
.cv2-item:hover{background:#f1f5f9;transform:translateX(2px)}
.cv2-item-sel{background:#eef2ff !important;border-left-color:#6366f1 !important;box-shadow:inset 2px 0 0 rgba(99,102,241,0.2)}
.cv2-item-hot{border-left-color:#f59e0b !important}
.cv2-item-av{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,#e0e7ff 0%,#ede9fe 100%);color:#6366f1;font-weight:800;font-size:14px;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 2px 8px rgba(99,102,241,0.08)}
.cv2-item-body{flex:1;min-width:0}
.cv2-item-row1{display:flex;justify-content:space-between;align-items:center;margin-bottom:3px}
.cv2-item-name{font-size:13.5px;font-weight:700;color:#0f172a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:145px}
.cv2-item-time{font-size:10.5px;color:#94a3b8;flex-shrink:0}
.cv2-item-phone{font-size:11.5px;color:#64748b;margin-bottom:5px;font-weight:500}
.cv2-item-meta{display:flex;align-items:center;gap:4px;margin-bottom:5px}
.cv2-status-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.cv2-item-status{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.02em}
.cv2-item-agent{font-size:11.5px;color:#94a3b8;font-weight:500}
.cv2-item-labels{display:flex;flex-wrap:wrap;gap:4px}
.cv2-label-chip{padding:2px 8px;border-radius:20px;font-size:10px;font-weight:700;letter-spacing:0.01em;box-shadow:0 1px 3px rgba(0,0,0,0.02)}

/* Chat center */
.cv2-chat{display:flex;flex-direction:column;height:100%;min-height:0;overflow:hidden;background:#f8fafc;position:relative}
.cv2-empty-chat{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;color:#cbd5e1;background:#fff}
.cv2-empty-chat p{font-size:14px;color:#94a3b8;font-weight:500}

/* Chat header */
.cv2-chat-head{background:rgba(255,255,255,0.9);backdrop-filter:blur(8px);border-bottom:1px solid #f1f5f9;padding:14px 24px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0;box-shadow:0 2px 10px rgba(0,0,0,0.02);z-index:10}
.cv2-chat-who{display:flex;align-items:center;gap:12px}
.cv2-chat-av{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,#e0e7ff 0%,#ede9fe 100%);color:#6366f1;font-weight:800;font-size:15px;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(99,102,241,0.08)}
.cv2-chat-name{font-size:15.5px;font-weight:800;color:#0f172a;letter-spacing:-0.01em}
.cv2-chat-sub{display:flex;align-items:center;gap:5px;font-size:12px;color:#64748b;margin-top:2px}
.cv2-chat-agent{color:#6366f1;font-weight:600}
.cv2-chat-acts{display:flex;align-items:center;gap:8px}
.cv2-act-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:10px;font-size:12.5px;font-weight:700;cursor:pointer;border:1px solid transparent;transition:all 0.2s cubic-bezier(0.4, 0, 0.2, 1);box-shadow:0 2px 4px rgba(0,0,0,0.02)}
.cv2-act-btn:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,0.05)}
.cv2-act-primary{background:#6366f1;color:#fff;border-color:#6366f1}
.cv2-act-primary:hover{background:#4f46e5}
.cv2-act-ghost{background:#f8fafc;color:#374151;border-color:#e2e8f0}
.cv2-act-ghost:hover{border-color:#6366f1;color:#6366f1;background:#fff}
.cv2-act-on{background:#eef2ff !important;color:#6366f1 !important;border-color:#6366f1 !important}
.cv2-act-danger{background:#fef2f2;color:#dc2626;border-color:#fecaca}
.cv2-act-danger:hover{background:#fee2e2}

/* Labels bar */
.cv2-labels-bar{background:#fff;border-bottom:1px solid #f1f5f9;padding:10px 24px;display:flex;flex-wrap:wrap;gap:6px;flex-shrink:0}
.cv2-label-btn{padding:4px 12px;border-radius:20px;font-size:11px;font-weight:600;cursor:pointer;border:1.5px solid #e2e8f0;background:#fff;color:#64748b;transition:all 0.2s}
.cv2-label-btn:hover{border-color:#6366f1;color:#6366f1;transform:translateY(-1px)}
.cv2-label-active{font-weight:700;box-shadow:0 2px 8px rgba(99,102,241,0.06)}

/* Messages */
.cv2-msgs{flex:1;overflow-y:auto;padding:24px;display:flex;flex-direction:column;gap:12px;background:linear-gradient(180deg,#f8fafc 0%,#f1f5f9 100%)}
.cv2-msgs-load,.cv2-msgs-empty{text-align:center;padding:48px;color:#94a3b8;font-weight:500}
.cv2-msg{display:flex;flex-direction:column;transition:all 0.2s}
.cv2-msg-user{align-items:flex-start}
.cv2-msg-bot{align-items:flex-end}
.cv2-msg-note{align-items:center}
.cv2-note-badge{font-size:10px;font-weight:700;color:#92400e;background:#fef3c7;padding:3px 10px;border-radius:20px;margin-bottom:6px;letter-spacing:0.02em;box-shadow:0 1px 3px rgba(0,0,0,0.02)}
.cv2-bubble{max-width:70%;padding:12px 16px;border-radius:16px;line-height:1.6;box-shadow:0 2px 6px rgba(15,23,42,0.03);position:relative;transition:all 0.2s}
.cv2-msg-user .cv2-bubble{background:#fff;color:#0f172a;border:1px solid rgba(226,232,240,0.8);border-bottom-left-radius:4px}
.cv2-msg-bot .cv2-bubble{background:linear-gradient(135deg,#6366f1 0%,#4f46e5 100%);color:#fff;border-bottom-right-radius:4px;box-shadow:0 4px 14px rgba(99,102,241,0.2)}
.cv2-msg-note .cv2-bubble{background:#fef9c3;color:#713f12;border:1px solid #fde68a;border-radius:12px;max-width:85%;box-shadow:0 4px 12px rgba(254,243,199,0.5)}
.cv2-bubble-text{font-size:13.5px;font-weight:500}
.cv2-bubble-time{font-size:10px;opacity:.65;margin-top:6px;text-align:right;font-weight:600}

/* Input */
.cv2-input-area{background:#fff;border-top:1px solid #e2e8f0;padding:0;flex-shrink:0;position:relative;box-shadow:0 -4px 20px rgba(0,0,0,0.02)}
.cv2-mode-bar{display:flex;align-items:center;gap:6px;padding:10px 18px 8px;border-bottom:1px solid #f8fafc}
.cv2-mode-btn{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:8px;font-size:12px;font-weight:700;cursor:pointer;border:1.5px solid #e2e8f0;background:#fff;color:#64748b;transition:all 0.2s}
.cv2-mode-btn:hover{border-color:#6366f1;color:#6366f1;transform:translateY(-1px)}
.cv2-mode-on{background:#eef2ff;border-color:#6366f1;color:#6366f1;box-shadow:0 2px 6px rgba(99,102,241,0.08)}
.cv2-mode-note.cv2-mode-on{background:#fefce8;border-color:#fde047;color:#854d0e;box-shadow:0 2px 6px rgba(253,224,71,0.12)}
.cv2-bot-warn{font-size:11.5px;color:#f59e0b;margin-left:auto;font-weight:600}
.cv2-input-wrap{display:flex;align-items:center;gap:12px;padding:12px 18px}
.cv2-input-note .cv2-input{background:#fefce8;border-color:#fde047}
.cv2-input{flex:1;padding:12px 16px;border:1.5px solid #e2e8f0;border-radius:12px;font-size:13.5px;background:#f8fafc;transition:all 0.2s;color:#0f172a;font-weight:500}
.cv2-input:focus{outline:none;border-color:#6366f1;background:#fff;box-shadow:0 0 0 3px rgba(99,102,241,0.12)}
.cv2-send{width:44px;height:44px;border-radius:12px;background:#6366f1;color:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all 0.2s cubic-bezier(0.4, 0, 0.2, 1);box-shadow:0 4px 12px rgba(99,102,241,0.2)}
.cv2-send:hover:not(:disabled){background:#4f46e5;transform:scale(1.05);box-shadow:0 6px 16px rgba(99,102,241,0.3)}
.cv2-send:disabled{opacity:.4;cursor:not-allowed;box-shadow:none}
.cv2-send-spin{width:16px;height:16px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .6s linear infinite}

/* Quick Replies Popup */
.cv2-qr-popup{position:absolute;bottom:100%;left:18px;right:18px;background:#fff;border:1.5px solid #e0e7ff;border-radius:14px;box-shadow:0 -12px 36px rgba(99,102,241,.16);overflow:hidden;max-height:260px;overflow-y:auto;z-index:50;transition:all 0.2s}
.cv2-qr-head{padding:10px 16px;font-size:11.5px;font-weight:800;color:#94a3b8;text-transform:uppercase;letter-spacing:.06em;background:#f8fafc;border-bottom:1px solid #f1f5f9}
.cv2-qr-item{display:flex;flex-direction:column;padding:12px 16px;cursor:pointer;border-bottom:1px solid #f8fafc;transition:all 0.15s;border-left:3px solid transparent}
.cv2-qr-item:hover, .cv2-qr-item-selected{background:#f5f7ff;border-left-color:#6366f1;padding-left:15px}
.cv2-qr-shortcut{font-size:12.5px;font-weight:800;color:#6366f1;font-family:monospace}
.cv2-qr-title{font-size:13.5px;font-weight:700;color:#0f172a;margin:3px 0}
.cv2-qr-preview{font-size:11.5px;color:#64748b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Contact Panel */
.cv2-contact{border-left:1px solid #f1f5f9;background:#fff;overflow-y:auto;display:flex;flex-direction:column;height:100%;min-height:0}
.cv2-contact-head{padding:24px 20px 16px;text-align:center;border-bottom:1px solid #f1f5f9}
.cv2-contact-av-lg{width:64px;height:64px;border-radius:50%;background:linear-gradient(135deg,#e0e7ff,#ede9fe);color:#6366f1;font-weight:800;font-size:24px;display:flex;align-items:center;justify-content:center;margin:0 auto 12px}
.cv2-contact-name-input{width:100%;border:none;outline:none;font-size:15px;font-weight:700;color:#0f172a;text-align:center;background:transparent;padding:4px;border-radius:6px;transition:.15s}
.cv2-contact-name-input:hover{background:#f8fafc}
.cv2-contact-name-input:focus{background:#f1f5f9}
.cv2-contact-phone{font-size:12px;color:#94a3b8;margin-top:4px}
.cv2-contact-section{padding:16px 20px;border-bottom:1px solid #f8fafc}
.cv2-contact-section-title{font-size:10px;font-weight:700;color:#94a3b8;text-transform:uppercase;letter-spacing:.07em;margin-bottom:10px}
.cv2-contact-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;font-size:12px}
.cv2-contact-row span:first-child{color:#94a3b8}
.cv2-contact-row span:last-child{color:#0f172a;font-weight:500}
.cv2-contact-labels{display:flex;flex-wrap:wrap;gap:5px}
.cv2-contact-empty{font-size:12px;color:#cbd5e1}
.cv2-prev-conv{display:flex;align-items:center;gap:8px;padding:6px 0;font-size:12px;color:#64748b;border-bottom:1px solid #f8fafc}

/* Spinner */
.cv2-spinner{width:28px;height:28px;border:3px solid #e5e7eb;border-top-color:#6366f1;border-radius:50%;animation:spin .6s linear infinite;margin:0 auto}

/* === CONTACTS / CRM ==================================== */
.ct-root{display:flex;flex-direction:column;gap:20px;height:100%;overflow:hidden}
.ct-header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-shrink:0}
.ct-title{font-size:20px;font-weight:800;color:#0f172a;margin-bottom:2px}
.ct-desc{font-size:13px;color:#94a3b8}
.ct-header-actions{display:flex;align-items:center;gap:10px}
.ct-search-wrap{display:flex;align-items:center;gap:8px;background:#fff;border:1.5px solid #e5e7eb;border-radius:8px;padding:8px 12px}
.ct-search{border:none;outline:none;font-size:13px;width:200px;background:transparent;color:#0f172a}
.ct-add-btn{display:inline-flex;align-items:center;gap:6px;padding:9px 16px;background:#6366f1;color:#fff;border:none;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;transition:.15s}
.ct-add-btn:hover{background:#4f46e5;transform:translateY(-1px)}

/* Kanban */
.ct-kanban{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;flex:1;overflow:hidden;min-height:0}
.ct-col{display:flex;flex-direction:column;background:#f8fafc;border-radius:14px;border:1px solid #e5e7eb;overflow:hidden}
.ct-col-head{padding:16px;background:#fff;border-bottom:1px solid #f1f5f9;border-top:4px solid transparent;display:flex;align-items:center;justify-content:space-between}
.ct-col-title{display:flex;align-items:center;gap:10px}
.ct-col-icon{font-size:20px}
.ct-col-name{font-size:13px;font-weight:700}
.ct-col-desc{font-size:11px;color:#94a3b8;margin-top:1px}
.ct-col-badge{padding:3px 10px;border-radius:20px;font-size:13px;font-weight:800}
.ct-col-body{flex:1;overflow-y:auto;padding:10px;display:flex;flex-direction:column;gap:8px}
.ct-col-empty{text-align:center;padding:20px;color:#cbd5e1;font-size:12px}
.ct-col-add{display:flex;align-items:center;justify-content:center;gap:6px;padding:8px;border:1.5px dashed #e2e8f0;border-radius:8px;font-size:12px;font-weight:600;color:#94a3b8;cursor:pointer;background:transparent;transition:.15s;margin-top:4px}
.ct-col-add:hover{border-color:#6366f1;color:#6366f1;background:#eef2ff}

/* Cards */
.ct-card{background:#fff;border-radius:10px;border:1.5px solid #e5e7eb;padding:12px;cursor:pointer;transition:.15s}
.ct-card:hover{border-color:#c7d2fe;box-shadow:0 2px 8px rgba(99,102,241,.08)}
.ct-card-sel{border-color:#6366f1;box-shadow:0 0 0 3px rgba(99,102,241,.12)}
.ct-card-top{display:flex;align-items:flex-start;gap:8px;margin-bottom:8px}
.ct-card-av{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px;flex-shrink:0}
.ct-card-info{flex:1;min-width:0}
.ct-card-name{font-size:13px;font-weight:700;color:#0f172a}
.ct-card-company{font-size:11px;color:#64748b;margin-top:1px}
.ct-card-phone{font-size:11px;color:#94a3b8}
.ct-card-edit{width:26px;height:26px;border:1.5px solid #e5e7eb;border-radius:6px;background:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#94a3b8;flex-shrink:0;transition:.15s}
.ct-card-edit:hover{border-color:#6366f1;color:#6366f1}
.ct-card-stats{display:flex;gap:10px;margin-bottom:6px;flex-wrap:wrap}
.ct-stat{font-size:11px;color:#64748b}
.ct-stat b{color:#10b981;font-weight:700}
.ct-card-notes{font-size:11px;color:#64748b;line-height:1.5;margin-bottom:8px;background:#f8fafc;padding:6px 8px;border-radius:6px}
.ct-card-move{display:flex;gap:4px;flex-wrap:wrap}
.ct-move-btn{padding:3px 8px;border-radius:20px;border:1.5px solid;font-size:10px;font-weight:700;cursor:pointer;background:#fff;transition:.15s}
.ct-move-btn:hover{transform:translateY(-1px)}

/* Drawer (right panel detail) */
.ct-drawer{position:fixed;right:0;top:0;bottom:0;width:320px;background:#fff;border-left:1px solid #e5e7eb;box-shadow:-4px 0 24px rgba(0,0,0,.08);z-index:100;display:flex;flex-direction:column}
.ct-drawer-head{padding:20px;border-bottom:1px solid #f1f5f9;display:flex;align-items:center;gap:12px}
.ct-drawer-av{width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,#e0e7ff,#ede9fe);color:#6366f1;font-weight:800;font-size:18px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ct-drawer-name{font-size:16px;font-weight:800;color:#0f172a}
.ct-drawer-company{font-size:12px;color:#94a3b8;margin-top:2px}
.ct-drawer-close{margin-left:auto;width:30px;height:30px;border:1.5px solid #e5e7eb;border-radius:6px;background:#fff;cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center;color:#64748b}
.ct-drawer-body{flex:1;overflow-y:auto;padding:20px;display:flex;flex-direction:column;gap:12px}
.ct-drawer-row{display:flex;justify-content:space-between;align-items:center;font-size:13px;padding:8px 0;border-bottom:1px solid #f8fafc}
.ct-drawer-row span:first-child{color:#94a3b8}
.ct-drawer-row a{color:#6366f1;text-decoration:none;font-weight:600}
.ct-drawer-notes{background:#f8fafc;border-radius:8px;padding:12px;font-size:13px;color:#374151}
.ct-drawer-notes b{display:block;margin-bottom:4px;color:#0f172a}
.ct-drawer-notes p{margin:0;line-height:1.6}
.ct-drawer-actions{display:flex;gap:8px;margin-top:auto;padding-top:16px}
.ct-btn-edit{flex:1;padding:10px;background:#eef2ff;color:#6366f1;border:1.5px solid #c7d2fe;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;transition:.15s}
.ct-btn-edit:hover{background:#6366f1;color:#fff}
.ct-btn-del{padding:10px 14px;background:#fef2f2;color:#dc2626;border:1.5px solid #fecaca;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;transition:.15s}
.ct-btn-del:hover{background:#dc2626;color:#fff}

/* Modal */
.ct-modal-bg{position:fixed;inset:0;background:rgba(15,23,42,.4);backdrop-filter:blur(4px);z-index:200;display:flex;align-items:center;justify-content:center;padding:20px}
.ct-modal{background:#fff;border-radius:16px;width:100%;max-width:560px;box-shadow:0 24px 60px rgba(0,0,0,.2);display:flex;flex-direction:column;max-height:90vh}
.ct-modal-head{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid #f1f5f9}
.ct-modal-head h3{font-size:17px;font-weight:800;color:#0f172a}
.ct-modal-head button{width:30px;height:30px;border:1.5px solid #e5e7eb;border-radius:6px;background:#fff;cursor:pointer;font-size:14px;color:#64748b}
.ct-modal-body{padding:20px 24px;overflow-y:auto;display:flex;flex-direction:column;gap:14px}
.ct-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ct-field{display:flex;flex-direction:column;gap:5px}
.ct-field-full{grid-column:1/-1}
.ct-field label{font-size:12px;font-weight:600;color:#374151}
.ct-field input,.ct-field textarea{padding:9px 12px;border:1.5px solid #e5e7eb;border-radius:8px;font-size:13px;transition:.15s;background:#f8fafc}
.ct-field input:focus,.ct-field textarea:focus{outline:none;border-color:#6366f1;background:#fff}
.ct-seg-select{display:flex;flex-direction:column;gap:6px}
.ct-seg-opt{padding:10px 14px;border:1.5px solid #e5e7eb;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;background:#fff;text-align:left;transition:.15s}
.ct-seg-opt:hover{border-color:#6366f1;color:#6366f1}
.ct-seg-active{font-weight:700}
.ct-modal-foot{display:flex;gap:8px;padding:16px 24px;border-top:1px solid #f1f5f9}
.ct-btn-cancel{flex:1;padding:10px;border:1.5px solid #e5e7eb;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;background:#fff;color:#64748b}
.ct-btn-save{flex:2;padding:10px;background:#6366f1;color:#fff;border:none;border-radius:8px;font-size:13px;font-weight:700;cursor:pointer;transition:.15s}
.ct-btn-save:hover:not(:disabled){background:#4f46e5}
.ct-btn-save:disabled{opacity:.5;cursor:not-allowed}

/* === CRM PANEL (inside Conversations) === */
.crm-seg-grid{display:flex;flex-direction:column;gap:6px;margin-top:4px}
.crm-seg-btn{display:flex;align-items:center;gap:8px;padding:8px 10px;border:1.5px solid #e5e7eb;border-radius:8px;background:#fff;cursor:pointer;font-size:12px;font-weight:600;color:#64748b;transition:.15s;text-align:left}
.crm-seg-btn:hover:not(:disabled){border-color:#6366f1;color:#6366f1;transform:translateX(2px)}
.crm-seg-btn:disabled{opacity:.6;cursor:wait}
.crm-seg-active{font-weight:700}
.crm-seg-icon{font-size:14px;flex-shrink:0}
.crm-seg-label{flex:1}
.crm-seg-check{font-size:13px;font-weight:800}
.crm-hint{font-size:11px;color:#94a3b8;margin-top:8px;text-align:center;line-height:1.5}
.crm-saved-badge{display:flex;align-items:center;gap:5px;font-size:11px;color:#10b981;font-weight:600;margin-top:8px;padding:5px 8px;background:#f0fdf4;border-radius:6px;border:1px solid #bbf7d0}
.crm-edit-toggle{font-size:11px;font-weight:600;color:#6366f1;border:1.5px solid #e0e7ff;border-radius:6px;padding:3px 8px;background:#f8faff;cursor:pointer;transition:.15s}
.crm-edit-toggle:hover{background:#eef2ff}
.crm-edit-form{display:flex;flex-direction:column;gap:8px}
.crm-edit-field{display:flex;flex-direction:column;gap:3px}
.crm-edit-field label{font-size:10px;font-weight:700;color:#94a3b8;text-transform:uppercase;letter-spacing:.05em}
.crm-edit-field input,.crm-edit-field textarea{padding:7px 10px;border:1.5px solid #e5e7eb;border-radius:7px;font-size:12px;background:#f8fafc;transition:.15s;resize:vertical}
.crm-edit-field input:focus,.crm-edit-field textarea:focus{outline:none;border-color:#6366f1;background:#fff}
.crm-save-btn{padding:9px;background:#6366f1;color:#fff;border:none;border-radius:8px;font-size:12px;font-weight:700;cursor:pointer;transition:.15s}
.crm-save-btn:hover:not(:disabled){background:#4f46e5}
.crm-save-btn:disabled{opacity:.5;cursor:wait}
.crm-notes-display{font-size:11px;color:#64748b;line-height:1.5;background:#f8fafc;border-radius:6px;padding:8px;margin-top:4px;border-left:2px solid #e2e8f0}

/* === TEAMS ======================================= */
.tm-root{display:flex;flex-direction:column;gap:20px;overflow-y:auto;height:100%;padding-bottom:20px}
.tm-loading{display:flex;align-items:center;justify-content:center;height:200px}
.tm-header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-shrink:0}
.tm-title{font-size:20px;font-weight:800;color:#0f172a;margin-bottom:2px}
.tm-desc{font-size:13px;color:#94a3b8}
.tm-add-btn{display:inline-flex;align-items:center;gap:6px;padding:9px 16px;background:#6366f1;color:#fff;border:none;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;transition:.15s;white-space:nowrap}
.tm-add-btn:hover{background:#4f46e5;transform:translateY(-1px)}

/* Stats */
.tm-stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.tm-stat-card{background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:16px;text-align:center}
.tm-stat-num{font-size:28px;font-weight:800;color:#0f172a}
.tm-stat-lbl{font-size:12px;color:#94a3b8;margin-top:2px}

/* Grid */
.tm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.tm-empty{grid-column:1/-1;text-align:center;padding:60px;display:flex;flex-direction:column;align-items:center;gap:12px;color:#94a3b8}
.tm-card{background:#fff;border:1.5px solid #e5e7eb;border-radius:14px;border-top:4px solid transparent;padding:20px;display:flex;flex-direction:column;gap:14px;transition:.2s}
.tm-card:hover{box-shadow:0 4px 16px rgba(0,0,0,.06);transform:translateY(-2px)}
.tm-card-head{display:flex;align-items:flex-start;gap:12px}
.tm-card-icon{width:44px;height:44px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0}
.tm-card-info{flex:1;min-width:0}
.tm-card-name{font-size:15px;font-weight:800;color:#0f172a}
.tm-card-desc{font-size:12px;color:#94a3b8;margin-top:2px;line-height:1.4}
.tm-card-actions{display:flex;gap:4px;flex-shrink:0}
.tm-icon-btn{width:28px;height:28px;border:1.5px solid #e5e7eb;border-radius:6px;background:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#94a3b8;transition:.15s}
.tm-icon-btn:hover{border-color:#6366f1;color:#6366f1}
.tm-icon-danger:hover{border-color:#ef4444;color:#ef4444}
.tm-card-metrics{display:flex;align-items:center;gap:12px;padding:12px;background:#f8fafc;border-radius:8px}
.tm-metric{display:flex;flex-direction:column;align-items:center;flex:1}
.tm-metric-num{font-size:22px;font-weight:800}
.tm-metric-lbl{font-size:11px;color:#94a3b8;margin-top:1px}
.tm-metric-sep{width:1px;height:32px;background:#e5e7eb}
.tm-members{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.tm-member-av{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px;border:2px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.08)}
.tm-member-names{font-size:11px;color:#94a3b8;flex:1}
.tm-no-members{font-size:12px;color:#cbd5e1;text-align:center;padding:4px}

/* Unassigned */
.tm-unassigned{background:#fefce8;border:1.5px solid #fde047;border-radius:12px;padding:16px}
.tm-unassigned-title{font-size:13px;font-weight:700;color:#854d0e;margin-bottom:8px}
.tm-unassigned-list{display:flex;flex-wrap:wrap;gap:6px}
.tm-unassigned-chip{padding:4px 10px;background:#fef9c3;border:1px solid #fde047;border-radius:20px;font-size:12px;color:#854d0e;font-weight:600}

/* Form elements */
.tm-icon-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:4px}
.tm-icon-opt{width:36px;height:36px;border:1.5px solid #e5e7eb;border-radius:6px;background:#fff;cursor:pointer;font-size:18px;display:flex;align-items:center;justify-content:center;transition:.15s}
.tm-icon-opt:hover{border-color:#6366f1;transform:scale(1.1)}
.tm-icon-sel{border-width:2px}
.tm-color-grid{display:flex;gap:8px;flex-wrap:wrap}
.tm-color-opt{width:32px;height:32px;border-radius:50%;cursor:pointer;border:3px solid transparent;display:flex;align-items:center;justify-content:center;color:#fff;font-size:13px;font-weight:700;transition:.15s}
.tm-color-opt:hover{transform:scale(1.15)}
.tm-color-sel{border-color:#0f172a;transform:scale(1.15)}
.tm-preview{display:flex;align-items:center;gap:12px;padding:12px;background:#f8fafc;border-radius:10px;border:1.5px solid #e5e7eb}

/* Assign team from conversation panel */
.tm-assign-grid{display:flex;flex-direction:column;gap:5px;margin-top:4px}
.tm-assign-btn{display:flex;align-items:center;gap:7px;padding:7px 10px;border:1.5px solid #e5e7eb;border-radius:7px;background:#fff;cursor:pointer;font-size:12px;font-weight:600;color:#64748b;transition:.15s;text-align:left;width:100%}
.tm-assign-btn:hover:not(:disabled){border-color:#6366f1;color:#6366f1;background:#f8faff}
.tm-assign-btn:disabled{opacity:.6;cursor:wait}
.tm-assign-active{font-weight:700}

/* Trash / delete button */
.cv2-act-trash{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;padding:0;border:1.5px solid #fecaca;background:#fef2f2;color:#ef4444;border-radius:7px;cursor:pointer;transition:.15s;flex-shrink:0}
.cv2-act-trash:hover{background:#ef4444;color:#fff;border-color:#ef4444;transform:scale(1.05)}

/* Mis chats filter */
.cv2-filter-mine{background:#f0fdf4;border-color:#bbf7d0;color:#16a34a}
.cv2-filter-mine.cv2-filter-on{background:#16a34a;border-color:#16a34a;color:#fff}
/* Conversation item — asignada al agente actual */
.cv2-item-mine{border-left:3px solid #6366f1}

/* === TEAMS — Member Management === */
.tm-add-member-btn{display:flex;align-items:center;justify-content:center;gap:6px;padding:8px;border:1.5px dashed;border-radius:8px;font-size:12px;font-weight:700;cursor:pointer;background:transparent;transition:.15s;width:100%}
.tm-add-member-btn:hover{opacity:.8;transform:translateY(-1px)}
.tm-member-names-col{display:flex;flex-direction:column;gap:6px;width:100%}
.tm-member-row{display:flex;align-items:center;gap:8px;padding:6px 8px;background:#f8fafc;border-radius:8px}
.tm-member-av-sm{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:11px;flex-shrink:0}
.tm-member-name{flex:1;font-size:12px;font-weight:600;color:#0f172a}
.tm-member-role{font-size:10px;color:#94a3b8}
.tm-remove-btn{width:20px;height:20px;border:none;background:transparent;cursor:pointer;color:#cbd5e1;font-size:12px;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:.15s}
.tm-remove-btn:hover{background:#fef2f2;color:#ef4444}

/* Members modal */
.tm-members-modal{max-width:600px}
.tm-members-body{padding:0 24px 8px;display:flex;flex-direction:column;gap:20px;overflow-y:auto;max-height:60vh}
.tm-members-section{display:flex;flex-direction:column;gap:10px}
.tm-members-section-title{font-size:12px;font-weight:700;color:#94a3b8;text-transform:uppercase;letter-spacing:.05em;border-bottom:1px solid #f1f5f9;padding-bottom:6px}
.tm-agent-row{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1.5px solid #e5e7eb;border-radius:10px;transition:.15s}
.tm-agent-row:hover{border-color:#c7d2fe}
.tm-agent-in{font-weight:600}
.tm-agent-av{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;flex-shrink:0}
.tm-agent-info{flex:1;min-width:0}
.tm-agent-name{font-size:13px;font-weight:700;color:#0f172a}
.tm-agent-email{font-size:11px;color:#94a3b8;margin-top:1px}
.tm-agent-other-team{font-size:10px;color:#f59e0b;margin-top:2px;font-weight:600}
.tm-toggle-btn{padding:6px 12px;border-radius:7px;font-size:12px;font-weight:700;cursor:pointer;border:1.5px solid;transition:.15s;white-space:nowrap}
.tm-toggle-add{color:#fff;transition:.15s}
.tm-toggle-add:hover{opacity:.85;transform:scale(1.02)}
.tm-toggle-remove{background:#fef2f2;border-color:#fecaca;color:#ef4444}
.tm-toggle-remove:hover{background:#ef4444;color:#fff}
.tm-agent-form{background:#f8fafc;border-radius:10px;padding:14px;display:flex;flex-direction:column;gap:10px;border:1.5px solid #e5e7eb}

/* Team assign active state — more visible */
.tm-assign-active{font-weight:700;border-width:2px !important;box-shadow:0 2px 8px rgba(99,102,241,.15)}

/* === SETTINGS ===================================== */
.st-root{display:flex;flex-direction:column;gap:20px;overflow-y:auto;height:100%;padding-bottom:20px}
.st-header{flex-shrink:0}
.st-tabs{display:flex;flex-wrap:wrap;gap:4px;background:#f1f5f9;border-radius:10px;padding:4px;flex-shrink:0}
.st-tab{flex:none;padding:9px 12px;border:none;background:transparent;border-radius:7px;font-size:13px;font-weight:600;color:#64748b;cursor:pointer;transition:.15s;white-space:nowrap}
.st-tab-on{background:#fff;color:#0f172a;box-shadow:0 1px 4px rgba(0,0,0,.1)}
.st-panel{display:flex;flex-direction:column;gap:16px}
.st-section-title{font-size:13px;font-weight:800;color:#0f172a;letter-spacing:.01em}
.st-desc{font-size:13px;color:#94a3b8;margin:-8px 0 0}

/* Label creator */
.st-label-creator{background:#f8fafc;border:1.5px solid #e5e7eb;border-radius:12px;padding:16px;display:flex;flex-direction:column;gap:10px}
.st-label-preview{display:inline-flex;padding:5px 12px;border-radius:20px;font-size:13px;font-weight:700;border:1.5px solid;width:fit-content}
.st-label-input{padding:9px 12px;border:1.5px solid #e5e7eb;border-radius:8px;font-size:13px;outline:none;transition:.15s;background:#fff}
.st-label-input:focus{border-color:#6366f1}
.st-color-row{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.st-color-dot{width:24px;height:24px;border-radius:50%;cursor:pointer;border:3px solid transparent;transition:.15s}
.st-color-dot:hover{transform:scale(1.2)}
.st-color-dot-on{border-color:#0f172a;transform:scale(1.15)}
.st-labels-list{display:flex;flex-direction:column;gap:8px}
.st-label-row{display:flex;align-items:center;gap:10px;padding:10px 14px;background:#fff;border:1.5px solid #f1f5f9;border-radius:10px;transition:.15s}
.st-label-row:hover{border-color:#e5e7eb}

/* Agent permission cards */
.st-agent-card{background:#fff;border:1.5px solid #e5e7eb;border-radius:14px;padding:18px;display:flex;flex-direction:column;gap:14px}
.st-agent-head{display:flex;align-items:center;gap:12px}
.st-role-select{padding:7px 10px;border:1.5px solid;border-radius:8px;font-size:12px;font-weight:700;background:#fff;cursor:pointer}
.st-perms-grid{display:flex;flex-direction:column;gap:0;border-radius:8px;overflow:hidden;border:1px solid #f1f5f9}
.st-perm-row{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;background:#f8fafc;border-bottom:1px solid #f1f5f9;gap:12px}
.st-perm-row:last-child{border-bottom:none}
.st-perm-locked{opacity:.7}
.st-perm-label{font-size:13px;font-weight:600;color:#0f172a}
.st-perm-desc{font-size:11px;color:#94a3b8;margin-top:1px}
/* Toggle switch */
.st-toggle{width:42px;height:22px;border-radius:11px;background:#e2e8f0;border:none;cursor:pointer;position:relative;transition:.2s;flex-shrink:0;padding:0}
.st-toggle-on{background:#6366f1}
.st-toggle:disabled{cursor:default;opacity:.8}
.st-toggle-thumb{width:18px;height:18px;border-radius:50%;background:#fff;position:absolute;top:2px;left:2px;transition:.2s;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.st-toggle-on .st-toggle-thumb{left:22px}

/* Info cards */
.st-info-card{display:flex;gap:14px;padding:16px;background:#f8fafc;border:1.5px solid #e5e7eb;border-radius:12px;align-items:flex-start}
.st-info-icon{font-size:24px;flex-shrink:0;margin-top:2px}

/* Image messages in chat */
.cv2-msg-image{max-width:280px;border-radius:10px;cursor:pointer;display:block;margin-bottom:4px;box-shadow:0 2px 8px rgba(0,0,0,.15)}
.cv2-msg-doc{display:flex;align-items:center;gap:8px;padding:10px 14px;background:rgba(255,255,255,.2);border-radius:8px;max-width:260px;cursor:pointer}
.cv2-msg-doc-icon{font-size:24px}
.cv2-msg-doc-name{font-size:12px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:160px}

/* Attach button */
.cv2-attach-btn{width:36px;height:36px;border:none;background:transparent;cursor:pointer;color:#94a3b8;display:flex;align-items:center;justify-content:center;border-radius:8px;transition:.15s;flex-shrink:0}
.cv2-attach-btn:hover{background:#f1f5f9;color:#6366f1}

/* Transfer button */
.cv2-transfer-btn{display:inline-flex;align-items:center;gap:5px;padding:6px 12px;border:1.5px solid #e5e7eb;border-radius:7px;font-size:12px;font-weight:600;cursor:pointer;background:#fff;color:#64748b;transition:.15s}
.cv2-transfer-btn:hover{border-color:#6366f1;color:#6366f1;background:#f8faff}

/* == TRANSFER DROPDOWN == */
.cv2-transfer-drop {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: #fff;
  border: 1.5px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,.15);
  min-width: 220px;
  z-index: 999;
  padding: 8px;
  animation: cv2-fade .15s ease;
}
.cv2-transfer-title {
  font-size: 11px; font-weight: 700; color: #94a3b8;
  text-transform: uppercase; letter-spacing: .06em;
  padding: 4px 8px 8px;
}
.cv2-transfer-item {
  display: flex; align-items: center; gap: 8px;
  width: 100%; padding: 9px 10px; border: none;
  border-radius: 8px; cursor: pointer;
  font-size: 13px; color: #0f172a;
  background: transparent; transition: background .15s;
  text-align: left;
}
.cv2-transfer-item:hover:not(:disabled) { background: #f1f5f9; }
.cv2-transfer-item:disabled { cursor: default; opacity: .7; }
.cv2-transfer-current { background: #eef2ff !important; color: #6366f1 !important; }
.cv2-transfer-badge {
  font-size: 10px; font-weight: 700; padding: 2px 7px;
  border-radius: 20px; background: #e0e7ff; color: #6366f1;
}
.cv2-transfer-cancel {
  display: block; width: 100%; margin-top: 4px; padding: 7px;
  border: none; border-radius: 8px; cursor: pointer;
  font-size: 12px; color: #94a3b8; background: transparent;
  transition: background .15s;
}
.cv2-transfer-cancel:hover { background: #f8fafc; color: #64748b; }

/* == CLIENT CARD ACTIONS == */
.ct-card-actions {
  display: flex; align-items: center; gap: 4px; flex-shrink: 0;
}
.ct-card-chat {
  width: 26px; height: 26px; border-radius: 7px; border: none;
  background: #eef2ff; color: #6366f1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, transform .15s;
}
.ct-card-chat:hover { background: #6366f1; color: #fff; transform: scale(1.1); }

/* ====================================================
   SETTINGS — COMPANY CONFIG
==================================================== */
.st-company-banner {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; margin-bottom: 28px; flex-wrap: wrap;
}
.st-save-company-btn {
  padding: 10px 22px; border-radius: 10px; border: none;
  background: #6366f1; color: #fff; font-weight: 700; font-size: 14px;
  cursor: pointer; white-space: nowrap; transition: background .2s, transform .15s;
  flex-shrink: 0;
}
.st-save-company-btn:hover:not(:disabled) { background: #4f46e5; transform: translateY(-1px); }
.st-save-company-btn:disabled { opacity: .7; }
.st-save-ok { background: #10b981 !important; }
.st-company-grid { display: flex; flex-direction: column; gap: 28px; }
.st-company-section {
  background: #f8fafc; border-radius: 14px; padding: 20px 22px;
  border: 1.5px solid #e5e7eb;
}
.st-company-section-title {
  font-size: 13px; font-weight: 800; color: #0f172a;
  margin-bottom: 16px; letter-spacing: .02em;
}
.st-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.st-field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; }
.st-field:last-child { margin-bottom: 0; }
.st-field-label {
  font-size: 12px; font-weight: 700; color: #475569; letter-spacing: .03em;
}
.st-input {
  padding: 9px 13px; border-radius: 9px; border: 1.5px solid #e5e7eb;
  font-size: 13px; color: #0f172a; outline: none; transition: border-color .2s;
  background: #fff;
}
.st-input:focus { border-color: #6366f1; }
.st-textarea {
  padding: 10px 13px; border-radius: 9px; border: 1.5px solid #e5e7eb;
  font-size: 13px; color: #0f172a; outline: none; resize: vertical;
  font-family: inherit; transition: border-color .2s; background: #fff; line-height: 1.6;
}
.st-textarea:focus { border-color: #6366f1; }
.st-tone-picker { display: flex; gap: 10px; flex-wrap: wrap; }
.st-tone-btn {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 14px 20px; border-radius: 12px; border: 2px solid #e5e7eb;
  background: #fff; cursor: pointer; transition: all .2s; min-width: 110px;
}
.st-tone-btn:hover { border-color: #6366f1; }
.st-tone-on { border-color: #6366f1 !important; background: #eef2ff !important; }
.st-company-tip {
  display: flex; align-items: center; gap: 10px;
  background: #fef9c3; border: 1.5px solid #fde047; border-radius: 10px;
  padding: 12px 16px; font-size: 13px; color: #713f12; margin-top: 24px;
}

/* ====================================================
   KNOWLEDGE BASE v2
==================================================== */
.kb2-root {
  padding: 4px 0;
  max-width: 1200px;
  margin: 0 auto;
}

/* Simplified Header styling */
.kb2-header-simplified {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.kb2-simple-title {
  font-size: 24px;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 6px 0;
  letter-spacing: -0.025em;
}
.kb2-simple-subtitle {
  font-size: 14px;
  color: #64748b;
  margin: 0;
  max-width: 650px;
  line-height: 1.5;
}
.kb2-header-stats {
  display: flex;
  gap: 12px;
}
.kb2-stat-pill {
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  padding: 10px 16px;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 90px;
}
.kb2-stat-num {
  font-size: 18px;
  font-weight: 800;
  color: #4f46e5;
}
.kb2-stat-lbl {
  font-size: 11px;
  color: #64748b;
  font-weight: 600;
  margin-top: 2px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Actions Banner: Uploader + Quick Button */
.kb2-actions-banner {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 16px;
  margin-bottom: 24px;
}
@media (max-width: 768px) {
  .kb2-actions-banner {
    grid-template-columns: 1fr;
  }
}

/* Drag Box style */
.kb2-drag-box {
  background: #ffffff;
  border: 2px dashed #cbd5e1;
  border-radius: 16px;
  padding: 24px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 110px;
}
.kb2-drag-box:hover {
  border-color: #6366f1;
  background: rgba(99, 102, 241, 0.02);
  transform: translateY(-1px);
}
.kb2-drag-active {
  border-color: #10b981;
  background: rgba(16, 185, 129, 0.04);
}
.kb2-drag-parsing {
  border-color: #f59e0b;
  background: rgba(245, 158, 11, 0.02);
  cursor: wait;
}
.kb2-drag-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.kb2-drag-icon {
  font-size: 28px;
  margin-bottom: 2px;
}
.kb2-drag-text-bold {
  font-size: 14px;
  font-weight: 700;
  color: #1e293b;
}
.kb2-drag-text-sub {
  font-size: 12px;
  color: #64748b;
  max-width: 480px;
}

/* Quick Add button card */
.kb2-quick-add-card {
  background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
  border: none;
  border-radius: 16px;
  padding: 20px 24px;
  text-align: left;
  cursor: pointer;
  color: #ffffff;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.15);
}
.kb2-quick-add-card:hover {
  background: linear-gradient(135deg, #4f46e5 0%, #3730a3 100%);
  box-shadow: 0 6px 18px rgba(99, 102, 241, 0.25);
  transform: translateY(-1px);
}
.kb2-quick-add-icon {
  font-size: 22px;
  margin-bottom: 6px;
}
.kb2-quick-add-title {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 4px;
}
.kb2-quick-add-desc {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
  line-height: 1.4;
}

/* Guidelines section */
.kb2-rules-toggle {
  background: none;
  border: none;
  color: #6366f1;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.kb2-rules-toggle:hover {
  text-decoration: underline;
}
.kb2-rules-panel-simplified {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 16px 20px;
  margin-bottom: 20px;
}
.kb2-rules-panel-header h4 {
  font-size: 13px;
  font-weight: 700;
  color: #334155;
  margin: 0 0 10px 0;
}
.kb2-rules-bullets {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
}
.kb2-rule-bullet-item {
  display: flex;
  gap: 8px;
  font-size: 12px;
  color: #475569;
  line-height: 1.4;
}
.kb2-bullet-ico {
  font-size: 16px;
  flex-shrink: 0;
}

/* Category navigation */
.kb2-cats-nav {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 20px;
  background: #f1f5f9;
  padding: 6px;
  border-radius: 14px;
}
.kb2-nav-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 10px;
  border: 1.5px solid transparent;
  background: transparent;
  font-size: 13px;
  font-weight: 600;
  color: #475569;
  cursor: pointer;
  transition: all 0.15s;
}
.kb2-nav-btn:hover {
  background: #ffffff;
  color: #1e293b;
}
.kb2-nav-active {
  background: #ffffff !important;
  color: #4f46e5 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.kb2-nav-count {
  background: rgba(0,0,0,0.05);
  color: #64748b;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 8px;
  margin-left: 2px;
}
.kb2-nav-active .kb2-nav-count {
  background: #e0e7ff;
  color: #4f46e5;
}

/* Modernized Add/Edit Form */
.kb2-form-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.04);
  animation: cv2-fade 0.25s ease;
}
.kb2-form-title-text {
  font-size: 16px;
  font-weight: 800;
  color: #0f172a;
  margin: 0;
}
.kb2-form-close-btn {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  cursor: pointer;
  font-size: 12px;
  color: #94a3b8;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}
.kb2-form-close-btn:hover {
  background: #fef2f2;
  color: #ef4444;
  border-color: #fecaca;
}
.kb2-form-layout {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 24px;
  margin: 20px 0;
  padding-top: 16px;
  border-top: 1px solid #f1f5f9;
}
@media (max-width: 768px) {
  .kb2-form-layout {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}
.kb2-label-text {
  display: block;
  font-size: 10px;
  font-weight: 800;
  color: #64748b;
  margin-bottom: 6px;
  letter-spacing: 0.05em;
}
.kb2-cat-picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 8px;
}
.kb2-cat-picker-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1.5px solid #e2e8f0;
  background: #ffffff;
  cursor: pointer;
  transition: all 0.15s;
}
.kb2-cat-picker-cell:hover {
  border-color: #cbd5e1;
}
.kb2-cat-picker-cell-active {
  border-color: currentColor;
  font-weight: 700;
}
.kb2-picker-ico {
  font-size: 16px;
}
.kb2-picker-lbl {
  font-size: 12px;
}
.kb2-form-input {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1.5px solid #e2e8f0;
  font-size: 13px;
  font-family: inherit;
  color: #0f172a;
  outline: none;
}
.kb2-form-input:focus {
  border-color: #6366f1;
}
.kb2-content-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.kb2-char-counter {
  font-size: 11px;
  color: #94a3b8;
  font-weight: 700;
}
.kb2-char-counter-over {
  color: #ef4444;
}
.kb2-form-textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1.5px solid #e2e8f0;
  font-size: 13px;
  font-family: inherit;
  line-height: 1.5;
  color: #0f172a;
  outline: none;
  resize: vertical;
}
.kb2-form-textarea:focus {
  border-color: #6366f1;
}
.kb2-form-hint-box {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1.5px solid;
  margin-top: 12px;
  font-size: 12px;
}
.kb2-hint-ico {
  font-size: 18px;
}
.kb2-hint-txt {
  color: #334155;
  flex: 1;
}
.kb2-hint-example-btn {
  padding: 4px 10px;
  border-radius: 6px;
  border: 1.5px solid;
  background: transparent;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}
.kb2-form-buttons {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  padding-top: 16px;
  border-top: 1px solid #f1f5f9;
}
.kb2-btn-cancel {
  padding: 9px 18px;
  border-radius: 10px;
  border: 1.5px solid #e2e8f0;
  background: #ffffff;
  font-size: 13px;
  font-weight: 600;
  color: #475569;
  cursor: pointer;
  transition: all 0.15s;
}
.kb2-btn-cancel:hover {
  background: #f8fafc;
}
.kb2-btn-save {
  padding: 9px 24px;
  border-radius: 10px;
  border: none;
  background: #6366f1;
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s;
}
.kb2-btn-save:hover:not(:disabled) {
  background: #4f46e5;
}
.kb2-btn-save:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Spinner small */
.kb2-spinner-small {
  width: 20px;
  height: 20px;
  border: 2px solid #cbd5e1;
  border-top-color: #f59e0b;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin-bottom: 4px;
}

/* Clean Cards Grid */
.kb2-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 16px;
}
.kb2-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  min-height: 220px;
  transition: all 0.2s ease;
}
.kb2-card:hover {
  box-shadow: 0 8px 24px rgba(99, 102, 241, 0.05);
  border-color: #cbd5e1;
  transform: translateY(-2px);
}
.kb2-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.kb2-card-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
}
.kb2-badge-icon {
  font-size: 12px;
}
.kb2-card-date {
  font-size: 11px;
  color: #94a3b8;
  font-weight: 600;
}
.kb2-card-title {
  font-size: 14px;
  font-weight: 800;
  color: #1e293b;
  margin: 0 0 10px 0;
  line-height: 1.4;
}
.kb2-card-body-text {
  font-size: 12.5px;
  color: #475569;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
  background: #f8fafc;
  padding: 10px 14px;
  border-radius: 10px;
  flex: 1;
  overflow-y: auto;
  max-height: 120px;
  margin-bottom: 14px;
  font-family: inherit; /* replaced monospace with clean default font */
}
.kb2-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid #f1f5f9;
  padding-top: 12px;
}
.kb2-card-chars {
  font-size: 11px;
  color: #94a3b8;
  font-weight: 600;
}
.kb2-card-actions {
  display: flex;
  gap: 8px;
}
.kb2-card-action-btn {
  background: none;
  border: none;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition: all 0.15s;
}
.kb2-edit-btn {
  color: #4f46e5;
  background: rgba(99, 102, 241, 0.05);
}
.kb2-edit-btn:hover {
  background: #4f46e5;
  color: #ffffff;
}
.kb2-delete-btn {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.05);
}
.kb2-delete-btn:hover {
  background: #ef4444;
  color: #ffffff;
}

/* Loading & Empty states */
.kb2-loading-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 80px 20px;
}
.kb2-spinner-large {
  width: 40px;
  height: 40px;
  border: 4px solid #f1f5f9;
  border-top-color: #6366f1;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
.kb2-empty-state {
  text-align: center;
  background: #ffffff;
  border: 1.5px dashed #cbd5e1;
  border-radius: 20px;
  padding: 60px 40px;
  max-width: 500px;
  margin: 30px auto;
}
.kb2-empty-icon {
  font-size: 48px;
  margin-bottom: 16px;
}
.kb2-empty-title {
  font-size: 16px;
  font-weight: 800;
  color: #1e293b;
  margin-bottom: 6px;
}
.kb2-empty-subtitle {
  font-size: 13px;
  color: #64748b;
  line-height: 1.5;
  margin: 0 0 20px 0;
}
.kb2-btn-primary-add {
  padding: 10px 20px;
  background: #6366f1;
  color: #ffffff;
  border: none;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}


/* === NOTIFICATION BADGE — Sidebar === */
.ash-notif-badge {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  background: #ef4444; color: #fff; font-size: 10px; font-weight: 800;
  min-width: 18px; height: 18px; border-radius: 9px; padding: 0 5px;
  display: flex; align-items: center; justify-content: center;
  animation: ash-badge-pop .3s cubic-bezier(.36,.07,.19,.97) both;
  box-shadow: 0 2px 8px rgba(239,68,68,.5);
}
@keyframes ash-badge-pop {
  0% { transform: translateY(-50%) scale(0); }
  70% { transform: translateY(-50%) scale(1.2); }
  100% { transform: translateY(-50%) scale(1); }
}
.ash-nav-item { position: relative; }

/* === UNREAD DOT — Conversation list === */
.cv2-item-av-wrap { position: relative; flex-shrink: 0; }
.cv2-item-unread-dot {
  position: absolute; top: -2px; right: -2px;
  width: 10px; height: 10px; border-radius: 50%;
  background: #ef4444; border: 2px solid #fff;
  animation: pulse-red 1.5s infinite;
}
@keyframes pulse-red {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,.6); }
  50%       { box-shadow: 0 0 0 6px rgba(239,68,68,0); }
}

/* === AGENT INDICATOR in conv list === */
.cv2-item-assigned {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 600; color: #475569;
  background: #f8fafc; border-radius: 10px; padding: 1px 7px 1px 2px;
  border: 1px solid #e5e7eb; margin-left: 4px;
}
.cv2-item-assigned.cv2-item-team {
  background: #eef2ff; color: #6366f1; border-color: #c7d2fe;
}
.cv2-item-agent-av {
  width: 18px; height: 18px; border-radius: 50%;
  font-size: 10px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

/* === TRANSFER v2 EXTRAS === */
.cv2-transfer-drop { min-width: 260px; display: flex; flex-direction: column; }
.cv2-transfer-list {
  max-height: 240px;
  overflow-y: auto;
  padding-right: 4px;
}
.cv2-transfer-list::-webkit-scrollbar {
  width: 6px;
}
.cv2-transfer-list::-webkit-scrollbar-track {
  background: transparent;
}
.cv2-transfer-list::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 3px;
}
.cv2-transfer-list::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}
.cv2-transfer-back-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 8px 8px; border-bottom: 1px solid #f1f5f9; margin-bottom: 4px;
}
.cv2-transfer-back {
  display: flex; align-items: center; gap: 4px;
  font-size: 12px; color: #6366f1; border: none; background: none;
  cursor: pointer; font-weight: 600; padding: 4px 8px; border-radius: 6px;
  transition: background .15s;
}
.cv2-transfer-back:hover { background: #eef2ff; }
.cv2-transfer-team-name {
  font-size: 12px; font-weight: 700; color: #475569;
}
.cv2-transfer-team-opt {
  border: 1.5px dashed #e5e7eb !important; margin-bottom: 6px;
}
.cv2-transfer-team-opt:hover { border-color: #6366f1 !important; }
.cv2-transfer-av {
  width: 28px; height: 28px; border-radius: 50%;
  font-size: 13px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.ash-logout-nav-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-radius: 10px;
  border: none;
  background: none;
  cursor: pointer;
  color: #ef4444;
  font-size: 14px;
  font-weight: 500;
  width: 100%;
  text-align: left;
  transition: .15s;
  margin-top: 8px;
}
.ash-logout-nav-btn:hover {
  background: #fee2e2;
  color: #ef4444;
}
.ash-logout-nav-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #ef4444;
}
.ash-sidebar-closed .ash-logout-nav-label {
  display: none;
}
.ash-sidebar-closed .ash-logout-nav-btn {
  justify-content: center;
  padding: 11px 0;
}

/* Password Eye Toggle */
.al-eye-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 14px;
  background: none;
  border: none;
  color: #9ca3af;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  z-index: 10;
  transition: color 0.15s;
}
.al-eye-btn:hover {
  color: #6366f1;
}
.al-input-wrap input {
  padding-right: 44px !important;
}

/* Custom Roles Tab Styles */
.st-roles-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.st-role-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: #fff;
  border: 1.5px solid #f1f5f9;
  border-radius: 10px;
  transition: .15s;
}
.st-role-row:hover {
  border-color: #e5e7eb;
}
.st-role-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: #1e293b;
}
.st-role-system-label {
  font-size: 11px;
  color: #94a3b8;
  background: #f1f5f9;
  padding: 2px 6px;
  border-radius: 6px;
  font-weight: 500;
}

.ash-topbar-logout-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1.5px solid #fee2e2;
  border-radius: 8px;
  background: #fff;
  font-size: 13px;
  font-weight: 600;
  color: #ef4444;
  cursor: pointer;
  transition: all 0.2s ease;
}
.ash-topbar-logout-btn:hover {
  background: #ef4444;
  color: #fff;
  border-color: #ef4444;
}

/* Previous Conversations List */
.crm-prev-convs-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}
.crm-prev-conv-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  font-size: 12px;
  transition: all 0.2s ease;
}
.crm-prev-conv-clickable {
  cursor: pointer;
}
.crm-prev-conv-clickable:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
}
.crm-prev-conv-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.crm-prev-conv-date {
  font-weight: 500;
  color: #64748b;
}
.crm-prev-conv-status {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  width: fit-content;
}
.crm-prev-conv-open-hint {
  color: #6366f1;
  font-weight: 600;
}

/* Avatar Overlay and Interaction */
.cv2-contact-av-lg-wrap:hover .cv2-avatar-overlay {
  opacity: 1;
}
.cv2-avatar-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s ease;
}



/* ─── CRM Export History Buttons ─────────────────── */
.crm-export-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: 1;
  padding: 10px 14px;
  border: 1.5px solid #e2e8f0;
  border-radius: 10px;
  background: #ffffff;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: #475569;
  transition: all 0.15s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
}
.crm-export-btn:hover:not(:disabled) {
  border-color: #6366f1;
  color: #6366f1;
  background: #f8fafc;
  transform: translateY(-1px);
}
.crm-export-btn:active:not(:disabled) {
  transform: translateY(0);
}
.crm-export-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.crm-export-pdf {
  border-color: #ec489920;
}
.crm-export-pdf:hover:not(:disabled) {
  border-color: #ec4899;
  color: #ec4899;
  background: #fff5f9;
}

/* ─── PWA Install Sidebar Button ─────────────────── */
.ash-pwa-install-wrap {
  padding: 0 16px;
  margin-bottom: 16px;
}
.ash-pwa-install-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 14px;
  border: 1px solid rgba(99, 102, 241, 0.2);
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(236, 72, 153, 0.1) 100%);
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: #a5b4fc;
  transition: all 0.2s ease;
  text-align: left;
}
.ash-pwa-install-btn:hover {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.2) 0%, rgba(236, 72, 153, 0.2) 100%);
  border-color: rgba(99, 102, 241, 0.4);
  color: #ffffff;
  transform: translateY(-1px);
}
.ash-pwa-install-btn:active {
  transform: translateY(0);
}
/* When sidebar is collapsed */
.ash-sidebar-closed .ash-pwa-install-wrap {
  padding: 0 8px;
}
.ash-sidebar-closed .ash-pwa-install-btn {
  justify-content: center;
  padding: 10px 0;
}
.ash-sidebar-closed .ash-pwa-install-btn .ash-nav-label {
  display: none;
}

/* ─── Handoff Visual Badges & Buttons ────────────── */
.cv2-handoff-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 12px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  transition: all 0.2s ease;
}
.cv2-hb-bot {
  background: rgba(99, 102, 241, 0.12);
  color: #818cf8;
  border: 1px solid rgba(99, 102, 241, 0.2);
}
.cv2-hb-human {
  background: rgba(245, 158, 11, 0.12);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.2);
}
.cv2-hb-closed {
  background: rgba(148, 163, 184, 0.12);
  color: #94a3b8;
  border: 1px solid rgba(148, 163, 184, 0.2);
}
.cv2-hb-pulse {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  position: relative;
  display: inline-block;
}
.cv2-pulse-indigo {
  background: #6366f1;
  box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.7);
  animation: pulse-indigo-ani 1.8s infinite;
}
.cv2-pulse-orange {
  background: #f59e0b;
  box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.7);
  animation: pulse-orange-ani 1.8s infinite;
}

@keyframes pulse-indigo-ani {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.7);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 5px rgba(99, 102, 241, 0);
  }
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(99, 102, 241, 0);
  }
}

@keyframes pulse-orange-ani {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.7);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 5px rgba(245, 158, 11, 0);
  }
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(245, 158, 11, 0);
  }
}

/* Enhancing Handoff Action buttons hover states */
.cv2-handoff-btn-takeover {
  background: #6366f1 !important;
  border: 1px solid transparent !important;
  color: #ffffff !important;
}
.cv2-handoff-btn-takeover:hover {
  background: #4f46e5 !important;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3) !important;
  transform: translateY(-1px);
}
.cv2-handoff-btn-bot {
  background: rgba(16, 185, 129, 0.08) !important;
  border: 1px solid rgba(16, 185, 129, 0.3) !important;
  color: #10b981 !important;
}
.cv2-handoff-btn-bot:hover {
  background: #10b981 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3) !important;
  transform: translateY(-1px);
}

/* Permission Restrictions styling */
.cv2-perm-locked {
  opacity: 0.55 !important;
  cursor: not-allowed !important;
  filter: grayscale(80%);
  pointer-events: none !important;
}

.crm-export-disabled-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #f1f5f9;
  border: 1.5px dashed #cbd5e1;
  color: #64748b;
  font-size: 13px;
  font-weight: 600;
  padding: 12px 16px;
  border-radius: 12px;
  text-align: center;
  user-select: none;
}

.kb2-clear-all-btn {
  transition: all 0.2s ease-in-out !important;
}

.kb2-clear-all-btn:hover {
  background: #fecaca !important;
  color: #dc2626 !important;
  transform: translateY(-1px);
}

.kb2-clear-all-btn:active {
  transform: translateY(0);
}

/* ================================================================
   INVENTARIO MODULE
   ================================================================ */
.inv-root { display:flex; flex-direction:column; height:100%; padding:1.5rem; gap:1.25rem; }
.inv-header { display:flex; justify-content:space-between; align-items:flex-start; }
.inv-btn-primary { background:linear-gradient(135deg,#7c3aed,#6d28d9); color:#fff; border:none; padding:0.6rem 1.25rem; border-radius:8px; font-size:0.875rem; font-weight:600; cursor:pointer; transition:all .2s; white-space:nowrap; }
.inv-btn-primary:hover { opacity:.9; transform:translateY(-1px); box-shadow:0 4px 15px #7c3aed44; }
.inv-btn-primary:disabled { opacity:.5; cursor:not-allowed; transform:none; }
.inv-btn-ghost { background:transparent; color:#94a3b8; border:1px solid rgba(255,255,255,.1); padding:0.55rem 1.1rem; border-radius:8px; font-size:0.875rem; cursor:pointer; transition:all .2s; }
.inv-btn-ghost:hover { border-color:rgba(255,255,255,.2); color:#cbd5e1; }
.inv-btn-sm { background:#7c3aed22; color:#a78bfa; border:1px solid #7c3aed44; padding:0.4rem 0.75rem; border-radius:6px; font-size:0.8rem; cursor:pointer; white-space:nowrap; }
.inv-kpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:1rem; }
.inv-kpi { background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-radius:12px; padding:1rem 1.25rem; }
.inv-kpi-label { font-size:0.75rem; color:#64748b; font-weight:500; text-transform:uppercase; letter-spacing:.04em; margin-bottom:.4rem; }
.inv-kpi-value { font-size:1.5rem; font-weight:700; color:#e2e8f0; }
.inv-kpi-green { color:#34d399; }
.inv-kpi-red   { color:#f87171; }
.inv-filters { display:flex; gap:1rem; align-items:center; flex-wrap:wrap; }
.inv-search { background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); border-radius:8px; padding:0.55rem 1rem; color:#e2e8f0; font-size:0.875rem; width:280px; outline:none; }
.inv-search:focus { border-color:#7c3aed66; background:rgba(124,58,237,.06); }
.inv-cats { display:flex; gap:0.5rem; flex-wrap:wrap; }
.inv-cat-pill { background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); color:#94a3b8; padding:0.35rem 0.85rem; border-radius:20px; font-size:0.8rem; cursor:pointer; transition:all .2s; }
.inv-cat-pill:hover,.inv-cat-pill.active { background:#7c3aed22; border-color:#7c3aed55; color:#a78bfa; font-weight:600; }
.inv-table-wrap { overflow-x:auto; border-radius:12px; border:1px solid rgba(255,255,255,.08); }
.inv-table { width:100%; border-collapse:collapse; font-size:0.85rem; }
.inv-table thead th { background:rgba(255,255,255,.04); color:#64748b; font-size:0.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; padding:.75rem 1rem; text-align:left; border-bottom:1px solid rgba(255,255,255,.06); white-space:nowrap; }
.inv-table tbody tr { border-bottom:1px solid rgba(255,255,255,.04); transition:background .15s; }
.inv-table tbody tr:hover { background:rgba(255,255,255,.03); }
.inv-table tbody tr:last-child { border-bottom:none; }
.inv-table td { padding:.7rem 1rem; color:#cbd5e1; vertical-align:middle; }
.inv-row-inactive td { opacity:.45; }
.inv-product-name { font-weight:600; color:#e2e8f0; }
.inv-badge-variants { display:inline-block; font-size:.68rem; background:#7c3aed22; color:#a78bfa; border:1px solid #7c3aed44; border-radius:4px; padding:.1rem .4rem; margin-top:.2rem; }
.inv-sku { font-family:monospace; font-size:.78rem; color:#475569; }
.inv-stock-cell { display:flex; align-items:center; }
.inv-stock-badge { font-size:.78rem; padding:.2rem .5rem; border-radius:6px; }
.inv-stock-ok     { background:#34d39918; color:#34d399; border:1px solid #34d39933; }
.inv-stock-bajo   { background:#fbbf2418; color:#fbbf24; border:1px solid #fbbf2433; }
.inv-stock-agotado{ background:#f8717118; color:#f87171; border:1px solid #f8717133; }
.inv-margin { font-size:.8rem; font-weight:700; padding:.15rem .45rem; border-radius:5px; }
.inv-margin-ok  { color:#34d399; background:#34d39912; }
.inv-margin-mid { color:#fbbf24; background:#fbbf2412; }
.inv-margin-low { color:#f87171; background:#f8717112; }
.inv-status { font-size:.75rem; font-weight:600; padding:.2rem .55rem; border-radius:5px; }
.inv-status-on  { color:#34d399; background:#34d39912; }
.inv-status-off { color:#475569; background:rgba(255,255,255,.04); }
.inv-actions { display:flex; gap:.35rem; }
.inv-action-btn { background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-radius:6px; padding:.3rem .5rem; cursor:pointer; font-size:.85rem; transition:all .15s; }
.inv-action-btn:hover { background:rgba(255,255,255,.09); border-color:rgba(255,255,255,.15); }
.inv-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:3rem 1rem; color:#94a3b8; text-align:center; }
.inv-backdrop { position:fixed; inset:0; background:rgba(0,0,0,.6); backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center; z-index:1000; padding:1rem; }
.inv-modal { background:#1e293b; border:1px solid rgba(255,255,255,.1); border-radius:16px; width:100%; max-width:680px; max-height:90vh; display:flex; flex-direction:column; box-shadow:0 25px 80px rgba(0,0,0,.5); }
.inv-modal-sm { max-width:440px; }
.inv-modal-header { display:flex; justify-content:space-between; align-items:center; padding:1.25rem 1.5rem; border-bottom:1px solid rgba(255,255,255,.08); }
.inv-modal-header h3 { font-size:1rem; font-weight:700; color:#e2e8f0; margin:0; }
.inv-modal-close { background:none; border:none; color:#64748b; cursor:pointer; font-size:1.1rem; padding:.2rem .4rem; border-radius:4px; transition:color .2s; }
.inv-modal-close:hover { color:#e2e8f0; }
.inv-modal-body { padding:1.5rem; overflow-y:auto; display:flex; flex-direction:column; gap:1rem; flex:1; }
.inv-modal-footer { display:flex; justify-content:flex-end; gap:.75rem; padding:1.25rem 1.5rem; border-top:1px solid rgba(255,255,255,.08); }
.inv-form-row { display:flex; gap:.75rem; }
.inv-form-field { display:flex; flex-direction:column; gap:.4rem; flex:1; }
.inv-form-flex2 { flex:2; }
.inv-form-field label { font-size:.78rem; font-weight:600; color:#94a3b8; text-transform:uppercase; letter-spacing:.04em; }
.inv-input { background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); border-radius:8px; padding:.55rem .85rem; color:#e2e8f0; font-size:.875rem; outline:none; width:100%; transition:border-color .2s; box-sizing:border-box; font-family:inherit; }
.inv-input:focus { border-color:#7c3aed66; background:rgba(124,58,237,.06); }
.inv-margin-display { background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-radius:8px; padding:.55rem .85rem; color:#a78bfa; font-weight:700; font-size:1rem; text-align:center; }
.inv-toggle-row { display:flex; justify-content:space-between; align-items:center; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.07); border-radius:10px; padding:.85rem 1rem; }
.inv-toggle { width:44px; height:24px; border-radius:12px; cursor:pointer; position:relative; transition:background .2s; flex-shrink:0; }
.inv-toggle-knob { position:absolute; top:2px; width:20px; height:20px; border-radius:50%; background:#fff; transition:left .2s; box-shadow:0 1px 3px rgba(0,0,0,.3); }
.inv-variants-section { background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.07); border-radius:10px; padding:1rem; }
.inv-variant-row { display:flex; align-items:center; gap:.75rem; padding:.4rem 0; border-bottom:1px solid rgba(255,255,255,.05); }
.inv-variant-row:last-child { border-bottom:none; }
.inv-stock-current { background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-radius:8px; padding:.75rem 1rem; color:#94a3b8; font-size:.875rem; }
.inv-stock-current strong { color:#e2e8f0; }
.inv-stock-preview { background:#7c3aed18; border:1px solid #7c3aed44; border-radius:8px; padding:.75rem 1rem; color:#a78bfa; font-size:.875rem; }
.inv-type-btn { flex:1; padding:.5rem; border-radius:8px; border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.04); color:#94a3b8; cursor:pointer; font-size:.8rem; font-weight:600; transition:all .2s; }
.inv-type-btn.active { border-color:#7c3aed; background:#7c3aed22; color:#a78bfa; }

/* ================================================================
   POS / VENTAS MODULE
   ================================================================ */
.pos-backdrop { position:fixed; inset:0; background:rgba(0,0,0,.65); backdrop-filter:blur(5px); display:flex; align-items:center; justify-content:center; z-index:1000; padding:1rem; }
.pos-modal { background:#0f172a; border:1px solid rgba(255,255,255,.1); border-radius:18px; width:100%; max-width:980px; height:88vh; display:flex; flex-direction:column; box-shadow:0 30px 100px rgba(0,0,0,.6); overflow:hidden; }
.pos-header { display:flex; justify-content:space-between; align-items:center; padding:1rem 1.5rem; border-bottom:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.02); flex-shrink:0; }
.pos-body { display:flex; flex:1; overflow:hidden; }
.pos-left { width:55%; border-right:1px solid rgba(255,255,255,.06); padding:1rem; display:flex; flex-direction:column; overflow:hidden; }
.pos-product-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:.5rem; overflow-y:auto; flex:1; padding-right:.25rem; }
.pos-product-card { background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-radius:10px; padding:.75rem; cursor:pointer; transition:all .15s; }
.pos-product-card:hover { background:rgba(124,58,237,.12); border-color:#7c3aed55; transform:translateY(-1px); }
.pos-product-name { font-size:.82rem; font-weight:600; color:#e2e8f0; line-height:1.3; }
.pos-right { width:45%; padding:1rem 1.25rem; display:flex; flex-direction:column; overflow-y:auto; gap:.5rem; }
.pos-section { background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.07); border-radius:10px; padding:.85rem; }
.pos-section-label { font-size:.72rem; font-weight:700; color:#64748b; text-transform:uppercase; letter-spacing:.05em; margin-bottom:.5rem; }
.pos-cart { flex:1; display:flex; flex-direction:column; gap:.4rem; min-height:80px; max-height:260px; overflow-y:auto; }
.pos-cart-item { display:flex; align-items:flex-start; gap:.75rem; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.07); border-radius:8px; padding:.6rem .75rem; }
.pos-qty-btn { background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.1); border-radius:5px; width:22px; height:22px; display:flex; align-items:center; justify-content:center; cursor:pointer; color:#e2e8f0; font-size:.9rem; font-weight:700; transition:background .15s; }
.pos-qty-btn:hover { background:rgba(255,255,255,.15); }
.pos-totals { background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.07); border-radius:10px; padding:.85rem; display:flex; flex-direction:column; gap:.35rem; }
.pos-total-row { display:flex; justify-content:space-between; font-size:.82rem; color:#94a3b8; }
.pos-total-main { font-size:1rem; font-weight:700; color:#e2e8f0; border-top:1px solid rgba(255,255,255,.08); padding-top:.4rem; margin-top:.2rem; }

/* ═══ CUSTOM SCROLLBARS FOR CONVERSATIONS PANEL ═══ */
.cv2-list::-webkit-scrollbar,
.cv2-msgs::-webkit-scrollbar,
.cv2-contact::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.cv2-list::-webkit-scrollbar-track,
.cv2-msgs::-webkit-scrollbar-track,
.cv2-contact::-webkit-scrollbar-track {
  background: transparent;
}
.cv2-list::-webkit-scrollbar-thumb,
.cv2-msgs::-webkit-scrollbar-thumb,
.cv2-contact::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 10px;
}
.cv2-list::-webkit-scrollbar-thumb:hover,
.cv2-msgs::-webkit-scrollbar-thumb:hover,
.cv2-contact::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* Hover dynamic visibility for the message reaction button */
.cv2-msg-react-btn {
  opacity: 0;
  transition: all 0.2s ease !important;
  transform: scale(0.9);
}
.cv2-msg:hover .cv2-msg-react-btn {
  opacity: 0.5;
}
.cv2-msg-react-btn:hover {
  opacity: 1 !important;
  transform: scale(1.2) !important;
}

/* Hover dynamic visibility for reply button */
.cv2-msg-reply-btn {
  opacity: 0;
  transition: all 0.2s ease !important;
  transform: scale(0.9);
}
.cv2-msg:hover .cv2-msg-reply-btn {
  opacity: 0.5;
}
.cv2-msg-reply-btn:hover {
  opacity: 1 !important;
  transform: scale(1.2) !important;
}

.cv2-typing-dots {
  display: inline-flex;
  gap: 3px;
  align-items: center;
}

@keyframes cv2-typing-bounce {
  0%, 80%, 100% {
    transform: scale(0);
  }
  40% {
    transform: scale(1);
  }
}