/* Estilos globais do CRM: reset, scrollbars, hovers e animações. */
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--app-ground);font-family:var(--font-core);color:var(--app-text);-webkit-font-smoothing:antialiased}
#root{height:100%}
a{color:var(--app-accent)}
a:hover{color:var(--app-accent)}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--app-border-strong);border-radius:5px;border:2px solid transparent;background-clip:padding-box}
input::placeholder,textarea::placeholder{color:var(--app-text-muted)}
[data-theme="dark"]{--sidebar-bg:#101012;color-scheme:dark}
.node-opt:hover{background:var(--app-hover)!important}
[data-node-id]:has([data-port]){}
.flow-row:hover{box-shadow:var(--app-shadow)!important;border-color:var(--app-border-strong)!important}
.basic-flow:hover{background:var(--app-accent-soft)!important;border-style:solid!important}
.min-row:hover{background:var(--app-hover)}
.min-add:hover{color:var(--app-text)!important}
@keyframes crmFade{from{opacity:0}
to{opacity:1}
}
@keyframes crmPop{from{opacity:0;transform:translateY(14px) scale(.965)}
to{opacity:1;transform:none}
}
@keyframes crmSlideR{from{opacity:0;transform:translateX(28px)}
to{opacity:1;transform:none}
}
@keyframes crmRise{from{opacity:0;transform:translateY(8px)}
to{opacity:1;transform:none}
}
@keyframes crmCardIn{from{opacity:0;transform:translateY(10px) scale(.98)}
to{opacity:1;transform:none}
}
@keyframes crmNew{0%{opacity:0;transform:scale(.8) translateY(-10px)}
55%{opacity:1;transform:scale(1.03)}
100%{transform:none}
}
@keyframes crmRing{0%{box-shadow:0 0 0 0 rgba(0,0,102,.45)}
70%{box-shadow:0 0 0 14px rgba(0,0,102,0)}
100%{box-shadow:0 0 0 0 rgba(0,0,102,0)}
}
@keyframes crmToastIn{from{opacity:0;transform:translateY(20px) scale(.96)}
to{opacity:1;transform:none}
}
@keyframes crmToastOut{to{opacity:0;transform:translateY(12px) scale(.97)}
}
@keyframes crmBar{from{transform:scaleX(1)}
to{transform:scaleX(0)}
}
@keyframes crmCheck{from{stroke-dashoffset:24}
to{stroke-dashoffset:0}
}
@keyframes crmBadge{0%{transform:scale(1)}
40%{transform:scale(1.35)}
100%{transform:scale(1)}
}

.crm-backdrop{animation:crmFade .22s ease both}
.crm-dialog{animation:crmPop .34s cubic-bezier(.2,.9,.25,1.05) both}
.crm-slide{animation:crmSlideR .32s cubic-bezier(.2,.9,.25,1) both}
.crm-page{animation:crmRise .28s ease both}
.crm-card-in{animation:crmCardIn .38s cubic-bezier(.2,.9,.25,1) both}
.crm-card-new{animation:crmNew .6s cubic-bezier(.2,.9,.25,1.2) both,crmRing 1.4s ease-out .5s 2;border-radius:24px}
.crm-bump{animation:crmBadge .45s ease}

@media (prefers-reduced-motion:reduce){.crm-backdrop,.crm-dialog,.crm-slide,.crm-page,.crm-card-in,.crm-card-new,.crm-bump{animation:none!important}
}
.help-card:hover{transform:translateY(-3px);box-shadow:var(--app-shadow)}
.comment-card .comment-tools{opacity:0;transition:opacity .2s}
.comment-card:hover .comment-tools{opacity:1}
.chat-row:hover{background:var(--app-hover)}
.fa-arrow-up-right::before{content:"\f061";display:inline-block;transform:rotate(-45deg)}

/* Complementos da implementação */
.as-sug:hover{background:var(--app-surface-3)!important}
.aa-row .aa-actions{opacity:0;transition:opacity .2s}
.aa-row:hover .aa-actions{opacity:1}
.bot-preview-btn:hover{background:var(--app-active)!important}
@media (max-width:1100px){.bot-hint{display:none}}
button:focus-visible,a:focus-visible,[role="button"]:focus-visible{outline:2px solid var(--app-accent);outline-offset:2px}