/* =========================================================
   Lexos — Prévia interativa (Dashboard + CRM)
   HTML/CSS/JS puros. Nenhuma imagem, gif ou vídeo.
   ========================================================= */
.lex-preview{
  --lex-bg:#0A121C;
  --lex-panel:#0F1926;
  --lex-panel-2:#0B1421;
  --lex-line:rgba(255,255,255,.07);
  --lex-line-2:rgba(255,255,255,.12);
  --lex-mute:rgba(230,240,255,.55);
  --lex-text:#E7EEF6;
  --lex-teal:#58D5C9;
  --lex-green:#54D67C;
  --lex-purple:#B79CFF;
  --lex-orange:#FF9F6B;
  --lex-blue:#6FB2FF;
  --lex-ink:#0A0F16;
  position:relative;
  background:var(--lex-bg);
  color:var(--lex-text);
  font-family:Inter,ui-sans-serif,system-ui,sans-serif;
  min-height:520px;
}
.lex-preview *{box-sizing:border-box}
.lex-preview__stage{position:relative;overflow:hidden;min-height:520px}
.lex-screen{
  position:absolute;inset:0;
  display:flex;
  opacity:0;transform:translateX(24px);
  transition:opacity .55s ease, transform .6s cubic-bezier(.2,.7,.2,1);
  pointer-events:none;
  will-change:opacity,transform;
}
.lex-screen.is-active{opacity:1;transform:translateX(0);pointer-events:auto}
.lex-screen.is-leaving{opacity:0;transform:translateX(-24px)}

/* ---------- Sidebar mini (compartilhada visualmente) ---------- */
.lex-sb{
  width:180px;flex-shrink:0;
  background:linear-gradient(180deg,#0B1420 0%, #0A121C 100%);
  border-right:1px solid var(--lex-line);
  padding:12px 10px;display:flex;flex-direction:column;gap:6px;
  font-size:11.5px;
}
.lex-sb__brand{display:flex;align-items:center;gap:8px;padding:6px 6px 10px;border-bottom:1px solid var(--lex-line);margin-bottom:8px}
.lex-sb__logo{width:20px;height:20px;border-radius:6px;background:conic-gradient(from 210deg,#58D5C9,#6FB2FF,#B79CFF,#58D5C9);box-shadow:0 0 0 1px rgba(255,255,255,.15) inset}
.lex-sb__name{font-weight:800;letter-spacing:.2px;font-size:12px}
.lex-sb__group{font-size:9.5px;letter-spacing:.14em;color:var(--lex-mute);text-transform:uppercase;padding:10px 8px 4px}
.lex-sb__item{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:7px;color:var(--lex-mute);cursor:pointer;transition:all .2s ease;position:relative}
.lex-sb__item:hover{color:var(--lex-text);background:rgba(255,255,255,.03)}
.lex-sb__item.is-active{background:rgba(255,255,255,.05);color:var(--lex-text)}
.lex-sb__item.is-active::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:2px;border-radius:2px;background:var(--lex-teal)}
.lex-sb__ic{width:14px;height:14px;flex:0 0 14px;color:currentColor;opacity:.9}
.lex-sb__user{margin-top:auto;display:flex;align-items:center;gap:8px;padding:8px;border:1px solid var(--lex-line);border-radius:10px;background:rgba(255,255,255,.02)}
.lex-sb__avatar{width:24px;height:24px;border-radius:50%;background:linear-gradient(135deg,#58D5C9,#6FB2FF);display:grid;place-items:center;color:#08121b;font-weight:800;font-size:11px}
.lex-sb__uname{font-size:11px;font-weight:700}
.lex-sb__urole{font-size:10px;color:var(--lex-mute)}
.lex-sb__exit{margin-top:6px;font-size:11px;color:var(--lex-mute);padding:6px 8px;display:flex;align-items:center;gap:8px;cursor:pointer;border-radius:7px}
.lex-sb__exit:hover{color:var(--lex-text)}

/* ---------- Área principal comum ---------- */
.lex-main{flex:1;padding:14px 16px;overflow:hidden;position:relative}
.lex-tag{display:inline-flex;align-items:center;gap:6px;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--lex-mute);padding:4px 8px;border:1px solid var(--lex-line);border-radius:999px}
.lex-tag__dot{width:6px;height:6px;border-radius:50%;background:var(--lex-teal);box-shadow:0 0 8px var(--lex-teal)}

/* ---------- Dashboard ---------- */
.lex-dash__head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-top:8px}
.lex-dash__title{font-size:22px;font-weight:800;letter-spacing:-.02em;margin:6px 0 4px}
.lex-dash__sub{font-size:11.5px;color:var(--lex-mute);max-width:520px;line-height:1.5}
.lex-dash__actions{display:flex;gap:6px;flex-shrink:0}
.lex-btn{font-size:11px;font-weight:600;border-radius:9px;padding:7px 11px;display:inline-flex;align-items:center;gap:6px;transition:transform .15s ease, background .2s ease;cursor:pointer;border:1px solid var(--lex-line)}
.lex-btn:hover{transform:translateY(-1px)}
.lex-btn--ghost{background:rgba(255,255,255,.03);color:var(--lex-text)}
.lex-btn--dark{background:#000;color:#fff;border-color:#000}
.lex-btn--white{background:#fff;color:#0A0F16;border-color:#fff}
.lex-btn--outline{background:transparent;color:var(--lex-text)}

.lex-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:14px}
.lex-stat{background:#0A0F16;border:1px solid rgba(255,255,255,.06);border-radius:12px;padding:12px;position:relative;overflow:hidden}
.lex-stat__label{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--lex-mute)}
.lex-stat__num{font-size:22px;font-weight:800;margin-top:8px;letter-spacing:-.02em}
.lex-stat__hint{font-size:10.5px;color:var(--lex-mute);margin-top:4px}
.lex-stat__ic{position:absolute;top:10px;right:10px;width:26px;height:26px;border-radius:8px;background:rgba(255,255,255,.06);display:grid;place-items:center;color:#fff}
.lex-stat__ic svg{width:14px;height:14px}
.lex-stat__hint b{color:var(--lex-orange);font-weight:700}

.lex-feats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.lex-feat{background:#0A0F16;border:1px solid rgba(255,255,255,.06);border-radius:12px;padding:12px 14px}
.lex-feat__title{font-size:13px;font-weight:800;display:flex;align-items:center;gap:8px}
.lex-feat__ai{font-size:8.5px;letter-spacing:.14em;padding:2px 6px;border-radius:999px;background:rgba(183,156,255,.16);color:var(--lex-purple);border:1px solid rgba(183,156,255,.35)}
.lex-feat__desc{font-size:10.5px;color:var(--lex-mute);margin-top:4px;line-height:1.5}
.lex-feat__list{margin-top:8px;display:grid;grid-template-columns:1fr 1fr;gap:2px 12px;font-size:10.5px}
.lex-feat__list li{display:flex;gap:6px;align-items:center;color:var(--lex-text);opacity:.92}
.lex-feat__list li::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--lex-teal);flex:0 0 4px}
.lex-feat__cta{margin-top:10px;display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;background:#fff;color:#0A0F16;padding:6px 10px;border-radius:8px}

.lex-lower{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.lex-panel{background:var(--lex-panel);border:1px solid var(--lex-line);border-radius:12px;padding:11px 12px}
.lex-panel__head{display:flex;align-items:center;justify-content:space-between}
.lex-panel__title{font-size:12px;font-weight:700}
.lex-panel__sub{font-size:10px;color:var(--lex-mute);margin-top:2px}
.lex-panel__link{font-size:10.5px;color:var(--lex-teal);cursor:pointer}
.lex-agenda{margin-top:8px;display:flex;flex-direction:column;gap:6px}
.lex-agenda__row{display:flex;align-items:center;gap:8px;padding:7px 8px;border-radius:9px;background:rgba(255,255,255,.02);border:1px solid var(--lex-line);font-size:10.5px}
.lex-agenda__time{font-weight:800;color:var(--lex-teal);width:44px}
.lex-agenda__name{flex:1;color:var(--lex-text)}
.lex-agenda__pill{font-size:9px;text-transform:uppercase;letter-spacing:.1em;padding:2px 6px;border-radius:999px;border:1px solid var(--lex-line);color:var(--lex-mute)}
.lex-agenda__pill--urg{color:var(--lex-orange);border-color:rgba(255,159,107,.35);background:rgba(255,159,107,.1)}
.lex-agenda__pill--ok{color:var(--lex-green);border-color:rgba(84,214,124,.3);background:rgba(84,214,124,.08)}

.lex-activity{margin-top:8px;display:flex;flex-direction:column;gap:0}
.lex-activity__row{display:flex;gap:8px;padding:7px 4px;border-bottom:1px dashed var(--lex-line);font-size:10.5px}
.lex-activity__row:last-child{border-bottom:0}
.lex-activity__dot{width:6px;height:6px;border-radius:50%;margin-top:6px;flex:0 0 6px}
.lex-activity__t{flex:1;color:var(--lex-text)}
.lex-activity__t span{color:var(--lex-mute)}
.lex-activity__time{color:var(--lex-mute);font-size:10px;white-space:nowrap}

/* micro-anim contadores */
.lex-count{display:inline-block;transition:transform .3s ease}
.lex-count.bump{transform:translateY(-2px)}

/* ---------- CRM ---------- */
.lex-crm{display:flex;width:100%}
.lex-crm__list{width:220px;border-right:1px solid var(--lex-line);background:#0B1421;display:flex;flex-direction:column}
.lex-crm__search{padding:10px;border-bottom:1px solid var(--lex-line)}
.lex-crm__search input{width:100%;background:rgba(255,255,255,.04);border:1px solid var(--lex-line);border-radius:9px;padding:7px 10px;color:var(--lex-text);font-size:11px;outline:none}
.lex-crm__convos{overflow:auto;flex:1}
.lex-convo{display:flex;gap:9px;padding:9px 10px;border-bottom:1px solid var(--lex-line);cursor:pointer;transition:background .2s ease;position:relative}
.lex-convo:hover{background:rgba(255,255,255,.03)}
.lex-convo.is-active{background:rgba(88,213,201,.06)}
.lex-convo.is-active::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:2px;background:var(--lex-teal);border-radius:2px}
.lex-avt{width:32px;height:32px;border-radius:50%;flex:0 0 32px;display:grid;place-items:center;color:#0A121C;font-weight:800;font-size:12px;position:relative}
.lex-avt::after{content:"";position:absolute;right:-1px;bottom:-1px;width:9px;height:9px;border-radius:50%;background:var(--lex-green);border:2px solid #0B1421}
.lex-avt.is-off::after{background:#5b6473}
.lex-convo__body{flex:1;min-width:0}
.lex-convo__top{display:flex;justify-content:space-between;align-items:center;gap:6px}
.lex-convo__name{font-size:11.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lex-convo__time{font-size:9.5px;color:var(--lex-mute)}
.lex-convo__msg{font-size:10.5px;color:var(--lex-mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.lex-convo__badge{background:var(--lex-teal);color:#0A0F16;font-size:9.5px;font-weight:800;border-radius:999px;padding:0 6px;min-width:16px;text-align:center;height:16px;line-height:16px}

.lex-crm__chat{flex:1;display:flex;flex-direction:column;background:#F7F3EA;color:#111;position:relative}
.lex-crm__chat::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(0,0,0,.05) 1px, transparent 1px);background-size:14px 14px;opacity:.6;pointer-events:none}
.lex-crm__chdr{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid rgba(0,0,0,.06);background:#fff;position:relative;z-index:1}
.lex-crm__chdr .lex-avt{background:#111;color:#fff}
.lex-crm__chdr .lex-avt::after{border-color:#fff}
.lex-crm__chdr h4{font-size:13px;font-weight:800;margin:0}
.lex-crm__chdr small{font-size:10.5px;color:#5b6473;display:flex;align-items:center;gap:5px}
.lex-crm__chdr small::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--lex-green);box-shadow:0 0 0 0 rgba(84,214,124,.5);animation:lexPulse 1.8s ease-out infinite}
.lex-crm__msgs{flex:1;padding:14px;display:flex;flex-direction:column;gap:8px;overflow:hidden;position:relative;z-index:1}
.lex-day{align-self:center;background:rgba(0,0,0,.06);color:#333;font-size:10px;padding:3px 10px;border-radius:999px;font-weight:600}
.lex-bub{max-width:78%;font-size:11.5px;line-height:1.45;padding:8px 11px 6px;border-radius:10px;position:relative;box-shadow:0 1px 0 rgba(0,0,0,.04);animation:lexBubIn .35s ease both}
.lex-bub small{display:block;font-size:9px;color:#5b6473;margin-top:3px;text-align:right}
.lex-bub--in{background:#fff;align-self:flex-start;border-top-left-radius:2px}
.lex-bub--out{background:#DCF7C5;align-self:flex-end;border-top-right-radius:2px}
.lex-bub--out small::after{content:" ✓✓";color:#34a3ff}
.lex-typing{align-self:flex-start;background:#fff;border-radius:14px;padding:8px 12px;display:inline-flex;gap:4px}
.lex-typing span{width:6px;height:6px;border-radius:50%;background:#8a8f95;animation:lexBlink 1.2s infinite}
.lex-typing span:nth-child(2){animation-delay:.2s}
.lex-typing span:nth-child(3){animation-delay:.4s}
.lex-crm__input{padding:10px;background:#fff;border-top:1px solid rgba(0,0,0,.06);display:flex;gap:8px;align-items:center;position:relative;z-index:1}
.lex-crm__input input{flex:1;background:#F1EFE7;border:0;border-radius:999px;padding:8px 14px;font-size:11.5px;color:#111;outline:none}
.lex-crm__ibtn{width:30px;height:30px;border-radius:50%;background:#F1EFE7;display:grid;place-items:center;color:#333;cursor:pointer}
.lex-crm__ibtn.is-send{background:#0A0F16;color:#fff}

.lex-crm__aside{width:230px;border-left:1px solid var(--lex-line);background:#0B1421;display:flex;flex-direction:column}
.lex-crm__tabs{display:flex;gap:4px;padding:8px;border-bottom:1px solid var(--lex-line)}
.lex-crm__tab{flex:1;font-size:10.5px;padding:6px 8px;border-radius:8px;color:var(--lex-mute);text-align:center;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:5px;transition:all .2s}
.lex-crm__tab.is-active{background:#0A0F16;color:#fff}
.lex-crm__sum{padding:10px 12px;border-bottom:1px solid var(--lex-line)}
.lex-crm__sum h5{margin:0;font-size:11px;font-weight:800;display:flex;align-items:center;gap:6px}
.lex-crm__sum p{margin:4px 0 0;font-size:10px;color:var(--lex-mute);line-height:1.4}
.lex-crm__docs{padding:8px 10px;overflow:auto;flex:1}
.lex-crm__group{margin-bottom:8px}
.lex-crm__ghead{display:flex;align-items:center;justify-content:space-between;padding:6px 4px;font-size:10.5px;font-weight:700}
.lex-crm__ghead span{color:var(--lex-mute);font-size:9.5px;font-weight:500}
.lex-doc{display:flex;align-items:center;gap:8px;padding:7px 8px;border:1px solid var(--lex-line);border-radius:9px;margin-bottom:4px;font-size:10px;background:rgba(255,255,255,.02);transition:background .2s}
.lex-doc:hover{background:rgba(255,255,255,.05)}
.lex-doc__ic{width:22px;height:22px;border-radius:6px;background:rgba(88,213,201,.12);color:var(--lex-teal);display:grid;place-items:center;flex:0 0 22px}
.lex-doc__ic svg{width:12px;height:12px}
.lex-doc__body{flex:1;min-width:0}
.lex-doc__t{font-weight:700;color:var(--lex-text);font-size:10.5px}
.lex-doc__s{color:var(--lex-mute);font-size:9.5px}
.lex-doc__pill{font-size:8.5px;color:var(--lex-mute);padding:2px 6px;border-radius:999px;border:1px solid var(--lex-line);white-space:nowrap}

/* ---------- Switch inferior ---------- */
.lex-preview__switch{
  position:absolute;left:0;right:0;bottom:8px;
  display:flex;justify-content:center;align-items:center;gap:10px;
  z-index:5;font-size:10.5px;color:var(--lex-mute);pointer-events:auto;
}
.lex-preview__switch button{
  all:unset;cursor:pointer;padding:3px 10px;border-radius:999px;
  display:inline-flex;align-items:center;gap:6px;
  transition:color .2s ease, background .2s ease;
}
.lex-preview__switch button::before{
  content:"";width:6px;height:6px;border-radius:50%;
  border:1.5px solid currentColor;transition:background .25s;
}
.lex-preview__switch button.is-active{color:var(--lex-text);background:rgba(255,255,255,.05)}
.lex-preview__switch button.is-active::before{background:var(--lex-teal);border-color:var(--lex-teal);box-shadow:0 0 8px var(--lex-teal)}
.lex-preview__sep{opacity:.5}

/* ---------- Animações ---------- */
@keyframes lexPulse{0%{box-shadow:0 0 0 0 rgba(84,214,124,.55)}70%{box-shadow:0 0 0 8px rgba(84,214,124,0)}100%{box-shadow:0 0 0 0 rgba(84,214,124,0)}}
@keyframes lexBlink{0%,80%,100%{opacity:.3;transform:translateY(0)}40%{opacity:1;transform:translateY(-2px)}}
@keyframes lexBubIn{from{opacity:0;transform:translateY(6px) scale(.98)}to{opacity:1;transform:none}}
@keyframes lexShine{0%{background-position:-200% 0}100%{background-position:200% 0}}
.lex-shine{background-image:linear-gradient(90deg,transparent,rgba(255,255,255,.07),transparent);background-size:200% 100%;animation:lexShine 3.6s linear infinite}

/* ---------- Responsivo ---------- */
@media (max-width:900px){
  .lex-sb{width:56px;padding:8px 6px}
  .lex-sb__brand{justify-content:center}
  .lex-sb__name,.lex-sb__group,.lex-sb__item span:not(.lex-sb__ic-wrap),.lex-sb__uname,.lex-sb__urole,.lex-sb__exit span{display:none}
  .lex-sb__item{justify-content:center;padding:8px}
  .lex-sb__user{justify-content:center;padding:6px}
  .lex-stats{grid-template-columns:repeat(2,1fr)}
  .lex-feats,.lex-lower{grid-template-columns:1fr}
  .lex-crm__list{width:64px}
  .lex-crm__list .lex-crm__search,.lex-convo__body{display:none}
  .lex-convo{justify-content:center}
  .lex-crm__aside{display:none}
  .lex-dash__title{font-size:18px}
  .lex-dash__actions{display:none}
}
@media (max-width:560px){
  .lex-stats{grid-template-columns:1fr 1fr;gap:8px}
  .lex-stat__num{font-size:18px}
  .lex-main{padding:12px}
  .lex-preview,.lex-preview__stage{min-height:560px}
}