/* ============================================================
   Receptia Demo Studio — estilos compartilhados
   Extraido dos demos monoliticos + camada mobile-responsiva.
   ============================================================ */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('vendor/inter.woff2') format('woff2');
}

body { font-family: 'Inter', sans-serif; }
/* O wrapper #app precisa ocupar 100% da altura, senão a cadeia h-full colapsa
   para a altura do conteudo (ex.: colunas curtas do funil encolhiam a tela). */
#app { height: 100%; }
.tabular-nums { font-variant-numeric: tabular-nums; }

::-webkit-scrollbar { width: 7px; height: 7px; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 6px; }

.chat-bg {
  background-color: #F5F6FA;
  background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23000000' fill-opacity='0.022'%3E%3Cpath d='M0 0h20v20H0zM20 20h20v20H20z'/%3E%3C/g%3E%3C/svg%3E");
}

.nav-item.active { background: rgba(16,185,129,.10); color: #047857; }
.nav-item.active svg { color: #10B981; }

.view { display: none; }
.view.active { display: flex; }

.sub { overflow: hidden; max-height: 0; transition: max-height .25s ease; }
.sub.open { max-height: 220px; }
.chev { transition: transform .2s; }
.chev.open { transform: rotate(90deg); }

@keyframes pulseLive { 0%,100%{opacity:1} 50%{opacity:.35} }
.live-dot { animation: pulseLive 1.4s infinite; }

@keyframes slideUp { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }
.slide-up { animation: slideUp .25s ease; }

.collap-body { overflow: hidden; transition: max-height .25s ease; }

/* ============================================================
   MOBILE-RESPONSIVO (< 768px)
   ============================================================ */

/* Sidebar vira drawer deslizante */
.app-sidebar { transition: transform .25s ease; }
.nav-backdrop { display: none; }

@media (max-width: 767px) {
  .app-sidebar {
    position: fixed;
    inset-block: 0;
    left: 0;
    z-index: 50;
    transform: translateX(-100%);
    box-shadow: 0 10px 40px rgba(0,0,0,.18);
  }
  body.nav-open .app-sidebar { transform: translateX(0); }
  body.nav-open .nav-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 40;
    background: rgba(15,23,42,.45);
  }

  /* Atendimento: lista fullscreen; chat entra por cima ao abrir conversa */
  .atd-list { width: 100% !important; }
  .atd-chat {
    position: fixed;
    inset: 0;
    z-index: 30;
    display: none !important;
    background: #fff;
  }
  body.chat-open .atd-chat { display: flex !important; }

  /* Painel de info vira sheet lateral */
  .atd-info {
    position: fixed !important;
    inset-block: 0;
    right: 0;
    width: 88% !important;
    max-width: 360px;
    z-index: 60;
    transform: translateX(100%);
    transition: transform .25s ease;
    display: block !important;
  }
  body.info-open .atd-info { transform: translateX(0); }
  body.info-open .info-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 55;
    background: rgba(15,23,42,.45);
  }
}

.info-backdrop { display: none; }

/* Mobile top bar so aparece no mobile */
.mobile-topbar { display: none; }
@media (max-width: 767px) {
  .mobile-topbar { display: flex; }
}

/* Botao back do chat / botao info: so no mobile/tablet */
.chat-back { display: none; }
@media (max-width: 767px) { .chat-back { display: inline-flex; } }