:root{
  --primary-blue:#007bff;
  --light-grey:#f8f9fa;
  --dark-grey:#343a40;
  --white:#fff;
  --transparent-black:rgba(0,0,0,.05);

  /* Paleta Lumi */
  --accent-red:#E03030;
  --lumi-chat-red:#BE2D25;
  --lumi-chat-border-green:#86C738; /* compatibilidade */
  --lumi-chat-ring: var(--accent-red); /* anel do botão do widget */

  /* Layout */
  --menu-col-width: 280px;

  /* Widget – dimensões e espaçamentos (desktop) */
  --widget-bottom-desktop: 20px;     /* distância do botão à borda inferior */
  --widget-gap: 15px;                /* gap entre botão e janela */
  --widget-button-size: 96px;        /* diâmetro do botão */
  --widget-right-offset-desktop: 1cm;/* afastamento da lateral direita da viewport */

  /* Margem mínima entre topo da janela e topo da viewport (desktop) */
  --chat-top-safe: 96px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{height:100%;overflow:hidden}
body{
  display:grid;
  grid-template-columns:1fr var(--menu-col-width);
  grid-template-rows:1fr;
  height:100vh;
  font-family:Arial, sans-serif;
  background-color:var(--white);
}

/* ============ MENU LATERAL ============ */
.side-menu{
  grid-column:2;grid-row:1;background:var(--white);
  padding-top:20px;box-shadow:-2px 0 10px var(--transparent-black);
  display:flex;flex-direction:column;align-items:flex-start;
  overflow-y:auto;z-index:999;
}
.side-menu-item{
  display:flex;align-items:center;width:100%;
  padding:12px 20px;text-decoration:none;color:var(--accent-red);
  font-size:16px;font-weight:bold;
  transition:background-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.side-menu-item:hover{
  background:var(--light-grey);
  transform:translateX(-5px);
  box-shadow:0 4px 10px rgba(0,0,0,.1)
}
.side-menu-item img{width:24px;height:24px;margin-right:12px;flex-shrink:0}
.side-menu-item span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ============ CONTEÚDO ============ */
.content-area{
  grid-column:1;grid-row:1;display:flex;justify-content:center;align-items:center;
  padding:20px;overflow:auto;
}
.erp-logo{
  max-width:clamp(260px, 48vw, 520px);
  max-height:60vh;height:auto;display:block;
}

/* ============ WIDGET LUMIA ============ */
/* Desktop: centralizado na coluna de menu, com afastamento de 1cm da lateral direita */
.lumi-chat-widget{
  position:fixed;
  bottom: var(--widget-bottom-desktop);
  right: var(--widget-right-offset-desktop);  /* afastamento solicitado */
  width: var(--menu-col-width);               /* mesma largura do menu */
  height:auto; z-index:1000;
  display:flex; flex-direction:column;
  align-items:center;                         /* centraliza o botão no menu */
  gap: var(--widget-gap);
  overflow:visible; transition:width .3s ease;
}
.lumi-chat-widget.chat-active{
  width: var(--menu-col-width);               /* não expande o container */
}

.lumi-chat-button-row{
  display:flex;align-items:center;gap:10px;flex-direction:column-reverse;
  position:relative;z-index:1;
}

/* Exibe apenas “LumIA”; para ocultar o texto, usar data-show-label="false" no HTML */
.lumi-chat-label{
  color:var(--accent-red);
  font-size:14px;
  font-weight:700;
  letter-spacing:.2px;
  text-transform:none;
  white-space:nowrap;
}
.lumi-chat-widget[data-show-label="false"] .lumi-chat-label{display:none}

/* ===== BOTÃO REDUZIDO ===== */
.lumi-chat-button{
  background:var(--white);
  border:3px solid var(--lumi-chat-ring);
  border-radius:50%;
  width:var(--widget-button-size);
  height:var(--widget-button-size);
  padding:0;display:flex;justify-content:center;align-items:center;cursor:pointer;
  box-shadow:0 4px 10px rgba(0,0,0,.2);
  transition:transform .2s ease, box-shadow .2s ease;
  overflow:hidden;flex-shrink:0;
}
.lumi-chat-button:hover{transform:translateY(-2px);box-shadow:0 6px 15px rgba(0,0,0,.3)}
.lumi-chat-button img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}

/* Janela do chat (abre sobre o conteúdo, para a esquerda) */
.lumi-chat-window{
  background:var(--white);
  border-radius:10px;
  box-shadow:0 8px 20px rgba(0,0,0,.2);
  width:564px;

  /* Altura dinâmica: mínimo 420px, máximo 540px,
     e ajusta para nunca colar no topo em telas menores (ex.: HD) */
  height: clamp(
    420px,
    calc(100vh - (var(--widget-bottom-desktop) + var(--widget-gap) + var(--widget-button-size) + var(--chat-top-safe))),
    540px
  );

  overflow:hidden; position:absolute; right:0;
  bottom:calc(100% + var(--widget-gap));
  opacity:0; transform:translateY(20px) scale(.95);
  pointer-events:none; visibility:hidden;
  transition:opacity .3s ease, transform .3s ease, visibility .3s .3s;
}
.lumi-chat-window.show{
  opacity:1; transform:translateY(0) scale(1);
  pointer-events:auto; visibility:visible;
  transition:opacity .3s ease, transform .3s ease, visibility .0s;
}

/* Barra superior da janela */
.lumi-chat-chrome{
  height:44px;display:flex;align-items:center;justify-content:space-between;
  padding:0 12px;background:linear-gradient(180deg, #D94141, #B62828);color:#fff;
  border-bottom:1px solid rgba(0,0,0,.06);
}
.lumi-chat-title{display:flex;align-items:center;gap:8px;font-weight:700;letter-spacing:.2px}
.online-dot{width:8px;height:8px;border-radius:50%;background:#86C738;box-shadow:0 0 0 4px rgba(134,199,56,.18)}
.lumi-chat-close{
  appearance:none;background:transparent;border:0;color:#fff;font-size:18px;line-height:1;cursor:pointer;
  width:36px;height:36px;border-radius:10px;display:grid;place-items:center;
}
.lumi-chat-close:hover{background:rgba(255,255,255,.12)}

.lumi-chat-window iframe{width:100%;height:calc(100% - 44px);border:0;display:block}

/* ============ RESPONSIVO ============ */
@media (max-width: 768px){
  :root{
    --menu-col-width: 240px;
    --widget-bottom-desktop: 10px;  /* reaproveitado no mobile */
    --widget-gap: 10px;
    --widget-button-size: 84px;
    --chat-top-safe: 64px;          /* margem de segurança menor */
  }

  /* Mobile: âncora à direita (mantém 20px para não invadir área útil) */
  .lumi-chat-widget{
    bottom: var(--widget-bottom-desktop);
    right: 20px;                    /* pode trocar para 1cm se preferir uniformidade */
    width: auto;                    /* só do tamanho do botão */
    align-items: flex-end;
    gap: var(--widget-gap);
  }
  .lumi-chat-widget.chat-active{ width:auto; }

  .lumi-chat-button-row{ align-items:center; gap:5px; }

  .lumi-chat-window{
    right:0;
    bottom:calc(100% + var(--widget-gap));
    width:min(90vw, 564px);

    /* Altura com segurança no topo e limite relativo */
    height: clamp(
      360px,
      calc(100vh - (var(--widget-bottom-desktop) + var(--widget-gap) + var(--widget-button-size) + var(--chat-top-safe))),
      70vh
    );

    max-height:576px;
  }
}

/* Acessibilidade – menos movimento */
@media (prefers-reduced-motion: reduce){
  *{transition:none !important;animation:none !important}
}