/* =====================================================
VY.IA.BR — Pro White Theme v1
Aplicado apenas em
Inspiração: Attio + Linear + Raycast
===================================================== */
body.vy-pro{
/* Surfaces — off-white quente */
--vy-bg: #FAFAF7;
--vy-bg-2: #FFFFFF;
--vy-card: #FFFFFF;
--vy-surface-2: #F4F4F0;
--vy-surface-3: #ECECE7;
--vy-border: #E8E8E2;
--vy-border-2: #D6D6CE;
--vy-divider: rgba(15,15,15,.06);
/* Glass */
--vy-glass: rgba(255,255,255,.72);
--vy-glass-hi: rgba(255,255,255,.92);
/* Text */
--vy-text: #0F0F12;
--vy-text-2: #5A5A66;
--vy-text-3: #9A9AA8;
--vy-muted: #5A5A66;
/* Accent — gradient (não chapado) */
--vy-primary: #6B4DFF;
--vy-primary-2: #4A2BE0;
--vy-accent: #6B4DFF;
--vy-accent-soft: rgba(107,77,255,.10);
--vy-accent-glow: rgba(107,77,255,.18);
/* Innovative accents — multi-color para status/inovação */
--vy-pink: #FF4D8F;
--vy-cyan: #00C2D7;
--vy-amber: #FF9F1C;
--vy-emerald: #10B981;
/* Semantic em chave white */
--vy-success: #10B981;
--vy-success-soft: rgba(16,185,129,.12);
--vy-danger: #EF4444;
--vy-danger-soft: rgba(239,68,68,.10);
--vy-warn: #F59E0B;
--vy-warn-soft: rgba(245,158,11,.12);
/* Shadows ultrafinos */
--vy-shadow-sm: 0 1px 2px rgba(15,15,18,.04), 0 0 0 1px rgba(15,15,18,.04);
--vy-shadow-md: 0 4px 16px rgba(15,15,18,.06), 0 0 0 1px rgba(15,15,18,.04);
--vy-shadow-lg: 0 24px 60px rgba(15,15,18,.10), 0 0 0 1px rgba(15,15,18,.05);
--vy-shadow-glow: 0 0 0 4px rgba(107,77,255,.12), 0 8px 24px rgba(107,77,255,.22);
color-scheme: light;
background: var(--vy-bg);
color: var(--vy-text);
background-image:
radial-gradient(1100px 600px at 12% -10%, rgba(107,77,255,.06), transparent 60%),
radial-gradient(800px 500px at 110% 0%, rgba(255,77,143,.05), transparent 55%),
radial-gradient(circle at 50% 120%, rgba(0,194,215,.04), transparent 60%);
}
/* Remove o grão escuro do tema dark */
body.vy-pro::before{
background-image: url("data:image/svg+xml;utf8,");
mix-blend-mode: multiply;
opacity: .4;
}
/* Selection roxo claro */
body.vy-pro ::selection{ background: rgba(107,77,255,.18); color: #0F0F12 }
/* Scrollbar mais sutil */
body.vy-pro ::-webkit-scrollbar-thumb{ background:#D6D6CE; border:2px solid transparent; background-clip:content-box }
body.vy-pro ::-webkit-scrollbar-thumb:hover{ background:#B0B0A6; background-clip:content-box; border:2px solid transparent }
/* ---------- Navbar white glass ---------- */
body.vy-pro .vy-navbar{
background: rgba(255,255,255,.75);
border-bottom: 1px solid rgba(15,15,18,.06);
backdrop-filter: saturate(180%) blur(20px);
-webkit-backdrop-filter: saturate(180%) blur(20px);
}
body.vy-pro .vy-navbar.scrolled{ background: rgba(255,255,255,.92) }
body.vy-pro .vy-nav-links a{ color: #5A5A66 }
body.vy-pro .vy-nav-links a:hover{ color:#0F0F12; background: rgba(15,15,18,.04) }
/* Item ativo (sobrescreve o inline style="color:#fff" do app.js) */
body.vy-pro .vy-nav-links a[style*="color"]{
color: #0F0F12 !important;
background: linear-gradient(135deg, rgba(107,77,255,.10), rgba(255,77,143,.06));
position: relative;
}
body.vy-pro .vy-nav-links a[style*="color"]::after{
content:""; position:absolute; left:14px; right:14px; bottom:2px; height:2px;
background: linear-gradient(90deg, #6B4DFF, #FF4D8F);
border-radius: 2px;
}
body.vy-pro .vy-user-trigger{ color: #0F0F12 }
/* ---------- Page header — display tipográfico ---------- */
body.vy-pro .vy-page-header h1{
font-size: 2.4rem;
font-weight: 600;
letter-spacing: -0.035em;
line-height: 1.05;
background: linear-gradient(135deg, #0F0F12 0%, #4A4A56 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
body.vy-pro .vy-page-header p{
color: #5A5A66;
font-size: .95rem;
margin-top: .35rem;
max-width: 60ch;
}
/* ---------- Panels — borda ultrafina + shadow imperceptível ---------- */
body.vy-pro .vy-panel{
background: #FFFFFF;
border: 1px solid rgba(15,15,18,.06);
box-shadow: 0 1px 2px rgba(15,15,18,.03);
border-radius: 14px;
}
body.vy-pro .vy-panel h3{ color: #0F0F12; font-weight: 600; letter-spacing: -0.015em }
/* ---------- Buttons inovadores ---------- */
body.vy-pro .vy-btn{
font-weight: 500;
letter-spacing: -0.005em;
border-radius: 10px;
}
body.vy-pro .vy-btn-primary{
background: linear-gradient(135deg, #7C5CFF 0%, #6B4DFF 50%, #FF4D8F 130%);
color: #fff;
border: none;
box-shadow: 0 1px 0 rgba(255,255,255,.3) inset, 0 4px 14px rgba(107,77,255,.32);
}
body.vy-pro .vy-btn-primary:hover:not(:disabled){
box-shadow: 0 1px 0 rgba(255,255,255,.4) inset, 0 8px 22px rgba(107,77,255,.42);
transform: translateY(-1px);
}
body.vy-pro .vy-btn-ghost{
background: #FFFFFF;
color: #0F0F12;
border: 1px solid rgba(15,15,18,.10);
box-shadow: 0 1px 2px rgba(15,15,18,.04);
}
body.vy-pro .vy-btn-ghost:hover{
background: #F8F8F4;
border-color: rgba(15,15,18,.18);
}
body.vy-pro .vy-btn-danger{
background: linear-gradient(135deg, #FF6B6B, #EF4444);
border: none;
box-shadow: 0 1px 0 rgba(255,255,255,.3) inset, 0 4px 12px rgba(239,68,68,.28);
}
/* ---------- Inputs white ---------- */
body.vy-pro .vy-input{
background: #FFFFFF;
border: 1px solid rgba(15,15,18,.12);
color: #0F0F12;
border-radius: 10px;
box-shadow: 0 1px 2px rgba(15,15,18,.03);
}
body.vy-pro .vy-input:hover{ border-color: rgba(15,15,18,.22) }
body.vy-pro .vy-input:focus{
border-color: #6B4DFF;
box-shadow: 0 0 0 4px rgba(107,77,255,.12);
outline: none;
}
body.vy-pro .vy-input::placeholder{ color: #9A9AA8 }
body.vy-pro select.vy-input{
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat !important;
background-position: right 1rem center !important;
background-size: 14px 14px !important;
padding-right: 2.5rem;
}
body.vy-pro .vy-label{ color: #0F0F12; font-weight: 500; font-size: .82rem }
body.vy-pro .vy-help{ color: #5A5A66 }
/* ---------- Modal white ---------- */
body.vy-pro .vy-modal-bg{ background: rgba(15,15,18,.32); backdrop-filter: blur(6px) }
body.vy-pro .vy-modal{
background: #FFFFFF;
border: 1px solid rgba(15,15,18,.08);
box-shadow: 0 30px 80px rgba(15,15,18,.16), 0 0 0 1px rgba(15,15,18,.04);
border-radius: 18px;
}
body.vy-pro .vy-modal h2{ color: #0F0F12; letter-spacing: -0.02em }
body.vy-pro .vy-modal p{ color: #5A5A66 }
body.vy-pro .vy-modal-close{ color: #5A5A66 }
body.vy-pro .vy-modal-close:hover{ color: #0F0F12; background: rgba(15,15,18,.06) }
/* ---------- Tabs (lead modal) ---------- */
body.vy-pro .vy-tab{ color: #5A5A66 }
body.vy-pro .vy-tab:hover{ color: #0F0F12 }
body.vy-pro .vy-tab.active{
color: #6B4DFF;
border-bottom-color: #6B4DFF;
}
/* ---------- Badges ---------- */
body.vy-pro .vy-badge-success{ background: rgba(16,185,129,.12); color: #065F46; border-color: rgba(16,185,129,.28) }
body.vy-pro .vy-badge-warn{ background: rgba(245,158,11,.12); color: #92400E; border-color: rgba(245,158,11,.28) }
body.vy-pro .vy-badge-muted{ background: rgba(15,15,18,.06); color: #5A5A66; border-color: rgba(15,15,18,.10) }
/* ---------- Alert ---------- */
body.vy-pro .vy-alert{
background: #FFFFFF;
border: 1px solid rgba(15,15,18,.08);
color: #0F0F12;
box-shadow: 0 4px 12px rgba(15,15,18,.06);
border-radius: 12px;
}
/* =====================================================
KANBAN INOVADOR (Attio-style)
- colunas sem fundo (só header)
- cards flutuantes
- dot indicator colorido por coluna
===================================================== */
body.vy-pro .vy-kanban{
gap: 1.2rem;
padding-bottom: 1.5rem;
}
body.vy-pro .vy-col{
background: transparent;
border: none;
padding: 0;
min-width: 300px;
flex: 0 0 300px;
}
body.vy-pro .vy-col.drag-over{
background: rgba(107,77,255,.04);
border-radius: 14px;
outline: 2px dashed rgba(107,77,255,.35);
outline-offset: -8px;
}
body.vy-pro .vy-col-head{
border-bottom: none;
padding: .25rem .5rem 1rem;
display: flex; align-items: center; gap: .55rem;
position: sticky; top: 0;
background: linear-gradient(180deg, var(--vy-bg) 60%, transparent);
z-index: 2;
}
body.vy-pro .vy-col-head h3{
font-size: .82rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: #5A5A66;
margin: 0;
display: inline-flex; align-items: center; gap: .55rem;
}
/* Dot indicator com cores por posição (rotação inovadora) */
body.vy-pro .vy-col-head h3::before{
content:""; width:8px; height:8px; border-radius: 50%;
background: var(--vy-text-3);
box-shadow: 0 0 0 3px rgba(154,154,168,.18);
}
body.vy-pro .vy-col:nth-child(1) .vy-col-head h3::before{ background:#6B4DFF; box-shadow:0 0 0 3px rgba(107,77,255,.18) }
body.vy-pro .vy-col:nth-child(2) .vy-col-head h3::before{ background:#00C2D7; box-shadow:0 0 0 3px rgba(0,194,215,.18) }
body.vy-pro .vy-col:nth-child(3) .vy-col-head h3::before{ background:#FF9F1C; box-shadow:0 0 0 3px rgba(255,159,28,.18) }
body.vy-pro .vy-col:nth-child(4) .vy-col-head h3::before{ background:#FF4D8F; box-shadow:0 0 0 3px rgba(255,77,143,.18) }
body.vy-pro .vy-col:nth-child(5) .vy-col-head h3::before{ background:#10B981; box-shadow:0 0 0 3px rgba(16,185,129,.18) }
body.vy-pro .vy-col:nth-child(6) .vy-col-head h3::before{ background:#9333EA; box-shadow:0 0 0 3px rgba(147,51,234,.18) }
body.vy-pro .vy-col-head .vy-col-count{
background: rgba(15,15,18,.06);
color: #0F0F12;
font-weight: 600;
font-size: .7rem;
font-family: var(--vy-font-mono);
padding: .15rem .55rem;
border-radius: 999px;
margin-left: auto;
}
body.vy-pro .vy-col-cards{ gap: .6rem; padding-right: 0 }
/* ---------- Cards flutuantes ---------- */
body.vy-pro .vy-card{
background: #FFFFFF;
border: 1px solid rgba(15,15,18,.06);
border-radius: 12px;
padding: .85rem .9rem;
box-shadow: 0 1px 2px rgba(15,15,18,.03);
transition: transform .2s cubic-bezier(0.34, 1.56, 0.64, 1),
box-shadow .2s ease,
border-color .2s ease;
position: relative;
}
body.vy-pro .vy-card::before{
content:""; position:absolute; left:0; top:14px; bottom:14px; width:2px;
background: linear-gradient(180deg, #6B4DFF, #FF4D8F);
border-radius: 2px;
opacity: 0; transition: opacity .2s ease;
}
body.vy-pro .vy-card:hover{
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(15,15,18,.08), 0 0 0 1px rgba(107,77,255,.18);
border-color: transparent;
}
body.vy-pro .vy-card:hover::before{ opacity: 1 }
body.vy-pro .vy-card .vy-card-name{
font-weight: 600;
font-size: .92rem;
color: #0F0F12;
letter-spacing: -0.01em;
}
body.vy-pro .vy-card .vy-card-meta{ color: #5A5A66; font-size: .76rem }
body.vy-pro .vy-card .vy-card-msg{
color: #5A5A66;
font-size: .8rem;
margin-top: .1rem;
}
body.vy-pro .vy-card .vy-card-value{
color: #065F46;
background: rgba(16,185,129,.10);
display: inline-block;
padding: .15rem .5rem;
border-radius: 6px;
font-size: .78rem;
width: max-content;
}
body.vy-pro .vy-tag{
background: rgba(107,77,255,.08);
color: #4A2BE0;
border: none;
border-radius: 6px;
font-weight: 500;
font-size: .68rem;
padding: .15rem .55rem;
letter-spacing: -0.005em;
}
body.vy-pro .vy-card .vy-paused{
background: rgba(245,158,11,.12);
color: #92400E;
border: none;
}
/* CRM toolbar — visual mais limpo */
body.vy-pro .vy-crm-toolbar{
background: #FFFFFF;
border: 1px solid rgba(15,15,18,.06);
border-radius: 12px;
padding: .75rem .9rem;
box-shadow: 0 1px 2px rgba(15,15,18,.03);
}
/* ---------- Refresh button — icon-only com spin no loading ---------- */
body.vy-pro .vy-btn-icon{
width: 36px; height: 36px;
padding: 0;
display: inline-flex; align-items: center; justify-content: center;
border-radius: 10px;
}
body.vy-pro .vy-btn-icon svg{ width: 16px; height: 16px }
body.vy-pro .vy-btn-icon.loading svg{ animation: vy-spin 0.7s linear infinite }
@keyframes vy-spin{ to { transform: rotate(360deg) } }
/* =====================================================
VOZ — Hero call panel
===================================================== */
body.vy-pro #panel-controls{
background: linear-gradient(180deg, #FFFFFF 0%, #FBFBF8 100%);
border: 1px solid rgba(15,15,18,.06);
position: relative;
overflow: hidden;
}
body.vy-pro #panel-controls::before{
content:""; position:absolute; inset:-1px; border-radius: 14px; padding: 1px;
background: linear-gradient(135deg, rgba(107,77,255,.25), transparent 40%, rgba(255,77,143,.20));
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor; mask-composite: exclude;
pointer-events: none;
}
/* Botão Iniciar — full width pill + ícone + pulse subtle */
body.vy-pro #btn-start{
height: 56px;
font-size: 1rem;
letter-spacing: -0.01em;
border-radius: 14px;
background: linear-gradient(135deg, #7C5CFF 0%, #6B4DFF 50%, #FF4D8F 140%);
box-shadow: 0 1px 0 rgba(255,255,255,.3) inset,
0 6px 20px rgba(107,77,255,.32),
0 0 0 0 rgba(107,77,255,.42);
animation: vy-pulse-start 2.4s ease-in-out infinite;
}
@keyframes vy-pulse-start{
0%,100%{ box-shadow: 0 1px 0 rgba(255,255,255,.3) inset, 0 6px 20px rgba(107,77,255,.32), 0 0 0 0 rgba(107,77,255,.42) }
50% { box-shadow: 0 1px 0 rgba(255,255,255,.3) inset, 0 10px 28px rgba(107,77,255,.45), 0 0 0 10px rgba(107,77,255,0) }
}
body.vy-pro #btn-start:disabled{ animation: none }
body.vy-pro #btn-stop{
height: 56px;
font-size: 1rem;
border-radius: 14px;
}
/* Live panel — waveform decorative + cronômetro grande */
body.vy-pro #panel-live{
background: #FFFFFF;
border: 1px solid rgba(15,15,18,.06);
border-radius: 14px;
position: relative;
overflow: hidden;
}
body.vy-pro #panel-live::after{
content:""; position:absolute; top:0; left:0; right:0; height: 3px;
background: linear-gradient(90deg, #6B4DFF, #FF4D8F, #00C2D7, #6B4DFF);
background-size: 200% 100%;
animation: vy-bar-flow 3s linear infinite;
}
@keyframes vy-bar-flow{ to { background-position: -200% 0 } }
body.vy-pro #live-state{ font-size: 1rem; color: #0F0F12; letter-spacing: -0.01em }
body.vy-pro #live-timer{
font-size: 1.1rem;
font-weight: 600;
background: rgba(15,15,18,.04);
padding: .25rem .7rem;
border-radius: 8px;
color: #0F0F12;
}
body.vy-pro .vy-live-dot{
width: .7rem; height: .7rem;
background: #EF4444;
box-shadow: 0 0 0 0 rgba(239,68,68,.7);
}
body.vy-pro .vy-transcript{
background: #FBFBF8;
border: 1px solid rgba(15,15,18,.06);
border-radius: 12px;
}
body.vy-pro .vy-tr-tag{
font-weight: 600;
font-size: .66rem;
letter-spacing: .05em;
}
body.vy-pro .vy-tr-user .vy-tr-tag{
background: rgba(107,77,255,.10);
color: #4A2BE0;
}
body.vy-pro .vy-tr-agent .vy-tr-tag{
background: rgba(16,185,129,.10);
color: #065F46;
}
/* Histórico calls — cards leves */
body.vy-pro .vy-call-item{
background: #FFFFFF;
border: 1px solid rgba(15,15,18,.06);
box-shadow: 0 1px 2px rgba(15,15,18,.03);
transition: transform .2s ease, box-shadow .2s ease;
}
body.vy-pro .vy-call-item:hover{
transform: translateY(-1px);
box-shadow: 0 6px 18px rgba(15,15,18,.07);
}
body.vy-pro .vy-call-meta{ color: #5A5A66 }
body.vy-pro .vy-call-tx{ color: #5A5A66 }
/* =====================================================
Chat (lead modal) — bubbles modernas
===================================================== */
body.vy-pro .vy-chat-box{
background: #FBFBF8;
border: 1px solid rgba(15,15,18,.06);
border-radius: 12px;
}
body.vy-pro .vy-chat-empty{ color: #5A5A66 }
body.vy-pro .vy-bubble{ box-shadow: 0 1px 2px rgba(15,15,18,.04) }
body.vy-pro .vy-bubble-in{ background: #FFFFFF; border: 1px solid rgba(15,15,18,.06); color: #0F0F12 }
body.vy-pro .vy-bubble-out{
background: linear-gradient(135deg, #6B4DFF, #4A2BE0);
color: #fff;
border: none;
}
body.vy-pro .vy-bubble-time{ opacity: .7; font-size: .68rem }
/* ---------- Memory box ---------- */
body.vy-pro #ld-memory{
background: #FBFBF8 !important;
border: 1px solid rgba(15,15,18,.06) !important;
color: #0F0F12;
}
/* ---------- Empty states ---------- */
body.vy-pro .vy-empty-hero{
text-align: center;
padding: 3rem 1.5rem;
background: linear-gradient(180deg, #FFFFFF 0%, #FBFBF8 100%);
border: 1px dashed rgba(15,15,18,.12);
border-radius: 16px;
}
body.vy-pro .vy-empty-hero h3{
font-size: 1.2rem;
letter-spacing: -0.02em;
margin: 0 0 .35rem;
}
body.vy-pro .vy-empty-hero p{ color: #5A5A66; margin: 0 0 1rem }
/* ---------- Assistant bubble fica visível em white ---------- */
body.vy-pro .vy-assist-fab{
box-shadow: 0 8px 22px rgba(107,77,255,.32);
}
/* =====================================================
===== EXTENSÃO GLOBAL — todas as páginas =====
===================================================== */
/* ---------- User menu / dropdowns ---------- */
body.vy-pro .vy-user-trigger{
background: #FFFFFF;
border: 1px solid rgba(15,15,18,.10);
color: #0F0F12;
box-shadow: 0 1px 2px rgba(15,15,18,.04);
}
body.vy-pro .vy-user-trigger:hover{
background: #F8F8F4;
border-color: rgba(15,15,18,.18);
}
body.vy-pro .vy-user-pop{
background: #FFFFFF;
border: 1px solid rgba(15,15,18,.08);
box-shadow: 0 20px 60px rgba(15,15,18,.14);
}
body.vy-pro .vy-user-pop a,
body.vy-pro .vy-user-pop button{
color: #0F0F12;
}
body.vy-pro .vy-user-pop a:hover,
body.vy-pro .vy-user-pop button:hover{
background: rgba(15,15,18,.05);
}
/* Mobile hamburger */
body.vy-pro .vy-nav-toggle{
background: #FFFFFF;
border: 1px solid rgba(15,15,18,.10);
color: #0F0F12;
}
body.vy-pro .vy-nav-toggle:hover{ background: #F8F8F4 }
body.vy-pro .vy-nav-toggle.open{
background: rgba(107,77,255,.10);
border-color: #6B4DFF;
color: #6B4DFF;
}
@media (max-width:768px){
body.vy-pro .vy-nav-links{
background: rgba(255,255,255,.96);
border-color: rgba(15,15,18,.08);
box-shadow: 0 20px 60px rgba(15,15,18,.10);
}
body.vy-pro .vy-nav-links a{ border-bottom-color: rgba(15,15,18,.06) }
}
/* ---------- Dashboard / KPIs ---------- */
body.vy-pro .vy-dash-title{
background: linear-gradient(135deg, #0F0F12 0%, #4A4A56 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: 600;
}
body.vy-pro .vy-dash-title em{
background: linear-gradient(135deg, #6B4DFF 0%, #FF4D8F 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
font-style: italic;
}
body.vy-pro .vy-dash-header h1{ color: #0F0F12 }
body.vy-pro .vy-dash-header .vy-eyebrow{ color: #5A5A66 }
body.vy-pro .vy-kpi{
background: #FFFFFF;
border: 1px solid rgba(15,15,18,.06);
box-shadow: 0 1px 2px rgba(15,15,18,.03);
}
body.vy-pro .vy-kpi:hover{
border-color: rgba(107,77,255,.20);
box-shadow: 0 8px 22px rgba(15,15,18,.06);
transform: translateY(-2px);
}
body.vy-pro .vy-kpi .vy-kpi-label{ color: #5A5A66 }
body.vy-pro .vy-kpi .vy-kpi-value{ color: #0F0F12 }
body.vy-pro .vy-kpi .vy-kpi-delta{ color: #047857 }
body.vy-pro .vy-kpi-sub{ color: #9A9AA8 }
body.vy-pro .vy-kpi-accent{
background: linear-gradient(160deg, rgba(107,77,255,.08), #FFFFFF 60%);
border-color: rgba(107,77,255,.20);
}
body.vy-pro .vy-kpi-accent .vy-kpi-value{ color: #4A2BE0 }
body.vy-pro .vy-kpi:hover .vy-spark{ color: #6B4DFF }
body.vy-pro a.vy-kpi:hover{
background: #FFFFFF;
border-color: rgba(107,77,255,.30);
box-shadow: 0 12px 28px rgba(15,15,18,.08);
}
/* Dashboard ações ---------- */
body.vy-pro .vy-dash-action{
background: #FFFFFF;
border: 1px solid rgba(15,15,18,.06);
color: #0F0F12;
box-shadow: 0 1px 2px rgba(15,15,18,.03);
}
body.vy-pro .vy-dash-action:hover{
border-color: rgba(107,77,255,.30);
background: #FBFBF8;
}
body.vy-pro .vy-dash-action > span:first-child,
body.vy-pro .vy-dash-action-ico{
background: linear-gradient(135deg, rgba(107,77,255,.14), rgba(255,77,143,.08));
border: 1px solid rgba(107,77,255,.18);
color: #6B4DFF;
}
body.vy-pro .vy-dash-action span{ color: #5A5A66 }
/* ---------- Channels ---------- */
body.vy-pro .vy-channel-card{
background: #FFFFFF;
border: 1px solid rgba(15,15,18,.06);
box-shadow: 0 1px 2px rgba(15,15,18,.03);
transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
body.vy-pro .vy-channel-card:hover{
border-color: rgba(107,77,255,.20);
box-shadow: 0 8px 22px rgba(15,15,18,.06);
transform: translateY(-2px);
}
body.vy-pro .vy-channel-card .vy-chan-phone{ color: #5A5A66 }
/* Agent card herda channel-card; ícone roxo */
body.vy-pro .vy-agent-card .vy-chan-icon{
background: linear-gradient(135deg, #7C5CFF, #6B4DFF);
box-shadow: 0 4px 14px rgba(107,77,255,.32);
}
/* ---------- Agenda / Calendar ---------- */
body.vy-pro .vy-cal-grid{
background: #FFFFFF;
border: 1px solid rgba(15,15,18,.06);
box-shadow: 0 1px 2px rgba(15,15,18,.03);
}
body.vy-pro .vy-cal-dhead{ color: #5A5A66 }
body.vy-pro .vy-cal-day{
background: #FBFBF8;
border: 1px solid rgba(15,15,18,.06);
}
body.vy-pro .vy-cal-day:hover{
background: #F4F4F0;
border-color: rgba(15,15,18,.12);
}
body.vy-pro .vy-cal-day.vy-cal-today{
background: rgba(107,77,255,.06);
border-color: #6B4DFF;
}
body.vy-pro .vy-cal-daynum{ color: #5A5A66 }
body.vy-pro .vy-cal-today .vy-cal-daynum{ color: #4A2BE0 }
body.vy-pro .vy-cal-ev{
background: rgba(107,77,255,.10);
color: #4A2BE0;
border-left: 2px solid #6B4DFF;
}
body.vy-pro .vy-cal-ev:hover{ background: rgba(107,77,255,.18) }
body.vy-pro .vy-next-row:hover{ background: #FBFBF8 }
body.vy-pro .vy-next-when{ color: #6B4DFF }
body.vy-pro .vy-next-title{ color: #0F0F12 }
body.vy-pro .vy-next-lead{ color: #5A5A66 }
/* ---------- Follow-up ---------- */
body.vy-pro .vy-fu-card{
background: #FFFFFF;
border: 1px solid rgba(15,15,18,.06);
box-shadow: 0 1px 2px rgba(15,15,18,.03);
}
body.vy-pro .vy-fu-card:hover{
border-color: rgba(107,77,255,.20);
}
body.vy-pro .vy-fu-card-body{ color: #5A5A66 }
body.vy-pro .vy-fu-badge.on{
background: rgba(16,185,129,.12);
color: #065F46;
border-color: rgba(16,185,129,.28);
}
body.vy-pro .vy-fu-badge.off{
background: rgba(15,15,18,.06);
color: #5A5A66;
border-color: rgba(15,15,18,.10);
}
body.vy-pro .vy-fu-step-chip{
background: rgba(15,15,18,.05);
color: #0F0F12;
border-color: rgba(15,15,18,.08);
}
body.vy-pro .vy-fu-step{
background: #FBFBF8;
border: 1px solid rgba(15,15,18,.06);
}
/* ---------- Templates chips (campanhas) ---------- */
body.vy-pro .vy-tpl-chip{
background: #FFFFFF;
border: 1px solid rgba(15,15,18,.10);
color: #5A5A66;
box-shadow: 0 1px 2px rgba(15,15,18,.03);
}
body.vy-pro .vy-tpl-chip:hover{
border-color: rgba(15,15,18,.20);
color: #0F0F12;
}
body.vy-pro .vy-tpl-chip.active{
background: linear-gradient(135deg, #7C5CFF, #6B4DFF);
border-color: transparent;
color: #fff;
box-shadow: 0 4px 14px rgba(107,77,255,.32);
}
body.vy-pro .vy-tpl-help{
background: rgba(107,77,255,.06);
border-color: rgba(107,77,255,.18);
color: #4A2BE0;
}
body.vy-pro .vy-tpl-var input{
background: #FFFFFF;
border: 1px solid rgba(15,15,18,.10);
color: #0F0F12;
}
body.vy-pro .vy-tpl-var input:focus{
border-color: #6B4DFF;
box-shadow: 0 0 0 3px rgba(107,77,255,.12);
}
/* ---------- Chat sim ---------- */
body.vy-pro .vy-sim-frame{
background: #FFFFFF;
border: 1px solid rgba(15,15,18,.06);
box-shadow: 0 1px 2px rgba(15,15,18,.03);
}
body.vy-pro .vy-sim-topbar{
background: #FBFBF8;
border-bottom: 1px solid rgba(15,15,18,.06);
}
body.vy-pro .vy-sim-body{ background: #FFFFFF }
body.vy-pro .vy-sim-msg.user{
background: linear-gradient(135deg, #6B4DFF, #4A2BE0);
box-shadow: 0 4px 12px rgba(107,77,255,.22);
}
body.vy-pro .vy-sim-msg.agent{
background: #F4F4F0;
color: #0F0F12;
border: 1px solid rgba(15,15,18,.06);
}
body.vy-pro .vy-sim-msg.system{ color: #5A5A66 }
body.vy-pro .vy-sim-typing{ background: #F4F4F0; border-color: rgba(15,15,18,.06) }
body.vy-pro .vy-sim-typing span{ background: #9A9AA8 }
body.vy-pro .vy-sim-form{
background: #FBFBF8;
border-top: 1px solid rgba(15,15,18,.06);
}
body.vy-pro .vy-sim-form input{
background: #FFFFFF;
border: 1px solid rgba(15,15,18,.10);
color: #0F0F12;
}
body.vy-pro .vy-sim-form input:focus{
border-color: #6B4DFF;
box-shadow: 0 0 0 3px rgba(107,77,255,.12);
}
body.vy-pro .vy-sim-form button{
background: linear-gradient(135deg, #7C5CFF, #6B4DFF);
box-shadow: 0 4px 12px rgba(107,77,255,.32);
}
body.vy-pro .vy-sim-hint{
background: #FBFBF8;
color: #5A5A66;
}
body.vy-pro .vy-sim-avatar{
background: linear-gradient(135deg, #7C5CFF, #6B4DFF);
}
/* ---------- Multimodal rows ---------- */
body.vy-pro .vy-mm-row{
background: #FFFFFF;
border: 1px solid rgba(15,15,18,.08);
color: #0F0F12;
}
body.vy-pro .vy-mm-row:hover{
border-color: #6B4DFF;
background: rgba(107,77,255,.04);
}
/* ---------- OTP inputs ---------- */
body.vy-pro .vy-otp input{
background: #FFFFFF;
border: 1px solid rgba(15,15,18,.12);
color: #0F0F12;
box-shadow: 0 1px 2px rgba(15,15,18,.04);
}
body.vy-pro .vy-otp input:focus{
border-color: #6B4DFF;
box-shadow: 0 0 0 4px rgba(107,77,255,.12);
}
/* ---------- Auth card (login / cadastro / recuperar / alterar) ---------- */
body.vy-pro .vy-auth-card{
background: #FFFFFF;
border: 1px solid rgba(15,15,18,.06);
box-shadow: 0 24px 60px rgba(15,15,18,.10),
0 0 0 1px rgba(15,15,18,.04);
}
body.vy-pro .vy-auth-card::before{
background: linear-gradient(180deg, rgba(107,77,255,.30), transparent 35%);
}
body.vy-pro .vy-auth-card h1{ color: #0F0F12 }
body.vy-pro .vy-auth-card .vy-sub{ color: #5A5A66 }
body.vy-pro .vy-auth-footer{ color: #5A5A66 }
body.vy-pro .vy-auth-footer a{ color: #6B4DFF }
/* ---------- Hero / Landing ---------- */
body.vy-pro .vy-hero::before{
background:
radial-gradient(60% 50% at 50% 0%, rgba(107,77,255,.16), transparent 70%),
radial-gradient(40% 40% at 80% 30%, rgba(255,77,143,.10), transparent 70%);
}
body.vy-pro .vy-hero .vy-eyebrow{
background: #FFFFFF;
border: 1px solid rgba(15,15,18,.08);
color: #5A5A66;
box-shadow: 0 1px 2px rgba(15,15,18,.04);
}
body.vy-pro .vy-hero h1{ color: #0F0F12 }
body.vy-pro .vy-hero h1 em{
background: linear-gradient(135deg, #6B4DFF 0%, #FF4D8F 100%);
-webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
body.vy-pro .vy-hero p{ color: #5A5A66 }
/* Hero mockup */
body.vy-pro .vy-hero-visual .vy-hero-frame{
background: linear-gradient(180deg, #FFFFFF, #F4F4F0);
border: 1px solid rgba(15,15,18,.06);
box-shadow: 0 50px 100px -20px rgba(15,15,18,.18),
0 30px 60px -30px rgba(107,77,255,.22);
}
body.vy-pro .vy-hero-visual .vy-hero-inner{
background: #FBFBF8;
}
body.vy-pro .vy-hero-side{
background: #FFFFFF;
border-right: 1px solid rgba(15,15,18,.06);
}
body.vy-pro .vy-hero-side-item{ color: #5A5A66 }
body.vy-pro .vy-hero-side-item.active{
background: rgba(107,77,255,.10);
color: #0F0F12;
}
body.vy-pro .vy-hero-mini{
background: #FFFFFF;
border: 1px solid rgba(15,15,18,.06);
box-shadow: 0 1px 2px rgba(15,15,18,.03);
}
body.vy-pro .vy-hero-mini .vy-lbl{ color: #5A5A66 }
body.vy-pro .vy-hero-mini .vy-val{ color: #0F0F12 }
/* Proof strip */
body.vy-pro .vy-proof{
border-top-color: rgba(15,15,18,.06);
border-bottom-color: rgba(15,15,18,.06);
}
body.vy-pro .vy-proof p{ color: #9A9AA8 }
body.vy-pro .vy-proof-logo{ color: #5A5A66 }
/* Features (bento) */
body.vy-pro .vy-features-head .vy-eyebrow{ color: #6B4DFF }
body.vy-pro .vy-features h2{ color: #0F0F12 }
body.vy-pro .vy-features-head p{ color: #5A5A66 }
body.vy-pro .vy-feat{
background: #FFFFFF;
border: 1px solid rgba(15,15,18,.06);
box-shadow: 0 1px 2px rgba(15,15,18,.03);
}
body.vy-pro .vy-feat:hover{
border-color: rgba(107,77,255,.20);
box-shadow: 0 12px 28px rgba(15,15,18,.07);
}
body.vy-pro .vy-feat::after{
background: radial-gradient(400px 200px at var(--mx,50%) var(--my,0%), rgba(107,77,255,.08), transparent 60%);
}
body.vy-pro .vy-feat .vy-feat-icon{
background: linear-gradient(135deg, rgba(107,77,255,.18), rgba(107,77,255,.04));
border: 1px solid rgba(107,77,255,.22);
color: #6B4DFF;
}
body.vy-pro .vy-feat h3{ color: #0F0F12 }
body.vy-pro .vy-feat p{ color: #5A5A66 }
/* ---------- Plans / Billing ---------- */
body.vy-pro .vy-cycle-toggle{
background: #FFFFFF;
border: 1px solid rgba(15,15,18,.08);
box-shadow: 0 1px 2px rgba(15,15,18,.03);
}
body.vy-pro .vy-cycle-btn{ color: #5A5A66 }
body.vy-pro .vy-cycle-btn.active{
background: linear-gradient(135deg, #6B4DFF, #4A2BE0);
color: #fff;
box-shadow: 0 4px 12px rgba(107,77,255,.32);
}
body.vy-pro .vy-cycle-tag{
background: #10B981;
color: #fff;
}
body.vy-pro .vy-plan-card{
background: #FFFFFF;
border: 1px solid rgba(15,15,18,.06);
box-shadow: 0 1px 2px rgba(15,15,18,.03);
}
body.vy-pro .vy-plan-card:hover{
border-color: rgba(15,15,18,.12);
box-shadow: 0 12px 28px rgba(15,15,18,.07);
}
body.vy-pro .vy-plan-popular{
background:
linear-gradient(#FFFFFF, #FFFFFF) padding-box,
linear-gradient(180deg, rgba(107,77,255,.6), rgba(255,77,143,.20)) border-box;
box-shadow: 0 0 0 1px rgba(107,77,255,.12),
0 20px 50px -20px rgba(107,77,255,.22);
}
body.vy-pro .vy-plan-tag{
background: linear-gradient(135deg, #6B4DFF, #FF4D8F);
}
body.vy-pro .vy-plan-price{ color: #0F0F12 }
body.vy-pro .vy-plan-period{ color: #5A5A66 }
body.vy-pro .vy-plan-feats li{ color: #0F0F12 }
body.vy-pro .vy-plan-card button[disabled]{
background: #F4F4F0;
color: #5A5A66;
border: 1px solid rgba(15,15,18,.08);
}
/* ---------- Pagamento PIX ---------- */
body.vy-pro .vy-pix-amount{
background: #FFFFFF;
border: 1px solid rgba(15,15,18,.08);
box-shadow: 0 1px 2px rgba(15,15,18,.03);
}
body.vy-pro .vy-pix-amount strong{ color: #4A2BE0 }
body.vy-pro .vy-pix-copy input{
background: #FBFBF8;
border: 1px solid rgba(15,15,18,.10);
color: #0F0F12;
}
body.vy-pro .vy-pix-status{
background: rgba(107,77,255,.08);
border: 1px solid rgba(107,77,255,.20);
color: #4A2BE0;
}
body.vy-pro .vy-pulse{ background: #6B4DFF }
/* ---------- Pairing code (modal QR/Pareamento) ---------- */
body.vy-pro .vy-pairing{
background: #FBFBF8;
border: 1px dashed rgba(15,15,18,.18);
color: #0F0F12;
}
/* ---------- Tags / Templates / Tabs page badges ---------- */
body.vy-pro .vy-link-arrow{ color: #5A5A66 }
body.vy-pro .vy-link-arrow:hover{ color: #6B4DFF }
/* ---------- Toast ---------- */
body.vy-pro .vy-toast{
background: #FFFFFF;
border: 1px solid rgba(15,15,18,.08);
color: #0F0F12;
box-shadow: 0 20px 50px rgba(15,15,18,.14);
}
body.vy-pro .vy-toast-ok{ border-left: 3px solid #10B981 }
body.vy-pro .vy-toast-err{ border-left: 3px solid #EF4444 }
body.vy-pro .vy-toast-info{ border-left: 3px solid #6B4DFF }
/* ---------- Empty state ---------- */
body.vy-pro .vy-empty,
body.vy-pro .vy-empty-state{ color: #5A5A66 }
body.vy-pro .vy-empty-state svg{ color: #9A9AA8 }
/* ---------- Skeleton loading ---------- */
body.vy-pro .vy-skel-row{
background: linear-gradient(90deg, #F4F4F0 0%, #FBFBF8 50%, #F4F4F0 100%);
background-size: 200% 100%;
}
/* ---------- Footer ---------- */
body.vy-pro .vy-footer{
border-top: 1px solid rgba(15,15,18,.06);
color: #5A5A66;
}
body.vy-pro .vy-footer-col h4{ color: #9A9AA8 }
body.vy-pro .vy-footer-col a{ color: #5A5A66 }
body.vy-pro .vy-footer-col a:hover{ color: #0F0F12 }
body.vy-pro .vy-footer-brand{ color: #0F0F12 }
body.vy-pro .vy-footer-bottom{
border-top: 1px solid rgba(15,15,18,.06);
color: #9A9AA8;
}
/* ---------- All select.vy-input get consistent arrow ---------- */
body.vy-pro select.vy-input{
background-image: url("data:image/svg+xml;utf8,") !important;
background-repeat: no-repeat !important;
background-position: right 1rem center !important;
background-size: 14px 14px !important;
padding-right: 2.5rem;
}
/* ---------- Cancel button (follow-up) ---------- */
body.vy-pro .vy-fu-cancel{
border-color: rgba(239,68,68,.30);
background: #FFFFFF;
color: #DC2626;
}
body.vy-pro .vy-fu-cancel:hover{
background: rgba(239,68,68,.08);
}
/* ---------- Pairing code modal QR fundo branco já está ok ---------- */
body.vy-pro .vy-modal .vy-qr-box{
background: #FBFBF8;
border: 1px solid rgba(15,15,18,.08);
}
/* ---------- Inputs disabled ---------- */
body.vy-pro .vy-input:disabled{
background: #F4F4F0;
color: #9A9AA8;
cursor: not-allowed;
}
/* ---------- Sub-link (a tags genéricas) ---------- */
body.vy-pro a:not(.vy-btn):not([class*="vy-nav-links"]) {
color: #6B4DFF;
}
body.vy-pro a:not(.vy-btn):not([class*="vy-nav-links"]):hover {
color: #4A2BE0;
}
/* Navbar links já tratados acima */
/* ---------- Code blocks inline ---------- */
body.vy-pro code{
background: rgba(107,77,255,.08);
color: #4A2BE0;
padding: .12rem .35rem;
border-radius: 4px;
font-size: .85em;
}
/* ---------- Forçar text color body em todas as , , , etc não estilizados ---------- */
body.vy-pro{ color: #0F0F12 }
/* ---------- Loading spinner para botões claros precisa de cor diferente ---------- */
body.vy-pro .vy-btn-ghost .vy-loading{
border-color: rgba(15,15,18,.18);
border-top-color: #0F0F12;
}
/* ---------- Hero side mockup item ativo ---------- */
body.vy-pro .vy-hero-side-item.active{
background: rgba(107,77,255,.12);
}
/* ---------- Forçar :focus-visible visível em white ---------- */
body.vy-pro :focus-visible{
outline: none;
box-shadow: 0 0 0 3px rgba(107,77,255,.20), 0 0 0 1px #6B4DFF;
border-radius: 8px;
}