/*
 * Componentes base do design system (ViewComponents).
 * Classes derivadas dos estilos inline do design de referência (LIA.dc.html).
 */

/* ---- Button ---- */
.lia-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  height:48px;padding:0 18px;border-radius:12px;border:1px solid transparent;
  font-family:inherit;font-size:15px;font-weight:700;cursor:pointer;
  transition:filter .15s ease,opacity .15s ease;line-height:1;
}
.lia-btn:disabled{opacity:.5;cursor:not-allowed;}
.lia-btn:hover:not(:disabled){filter:brightness(1.03);}
.lia-btn--primary{background:var(--primary);color:#fff;box-shadow:0 6px 18px var(--primary-soft);}
.lia-btn--secondary{background:var(--surface);color:var(--text);border-color:var(--border-2);font-weight:600;}
.lia-btn--ghost{background:transparent;color:var(--text-2);font-weight:600;}
.lia-btn--danger{background:var(--rose);color:#fff;}
.lia-btn--sm{height:40px;font-size:13px;border-radius:10px;}
.lia-btn--lg{height:48px;}
.lia-btn--block{width:100%;}
/* "Testar no playground": ação de laboratório em destaque (não compete com o verde de Salvar). */
.lia-btn--playground{
  gap:8px;border:none;color:#fff;background:linear-gradient(135deg,#7C5CF6 0%,#5B8DEF 100%);
  box-shadow:0 6px 18px rgba(124,92,246,.32);transition:transform .15s ease,box-shadow .15s ease,filter .15s ease;
}
.lia-btn--playground:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 10px 24px rgba(124,92,246,.4);filter:brightness(1.05);}
.lia-btn--playground:focus-visible{outline:2px solid var(--violet);outline-offset:3px;}

/* Tooltip: `.lia-tip` envolve o gatilho; `.lia-tip__bubble` (role=tooltip) aparece acima, alinhado à direita, no hover/foco.
   Em tela de toque (sem hover) o texto fica fixo abaixo do botão, já que o toque dispara a ação. */
.lia-tip{position:relative;display:inline-flex;}
.lia-tip__bubble{
  position:absolute;bottom:calc(100% + 10px);right:0;z-index:30;width:max-content;max-width:280px;
  padding:10px 12px;border-radius:10px;background:var(--text);color:var(--surface);
  font-size:12.5px;font-weight:500;line-height:1.45;text-align:left;box-shadow:var(--shadow-lg);
  opacity:0;visibility:hidden;transform:translateY(4px);pointer-events:none;
  transition:opacity .15s ease,transform .15s ease,visibility .15s;
}
.lia-tip__bubble::after{
  content:"";position:absolute;top:100%;right:28px;
  border:6px solid transparent;border-top-color:var(--text);
}
.lia-tip:hover .lia-tip__bubble,.lia-tip:focus-within .lia-tip__bubble{opacity:1;visibility:visible;transform:none;}
@media (hover:none){
  .lia-tip{flex-direction:column;align-items:stretch;gap:6px;}
  .lia-tip__bubble,.lia-tip:hover .lia-tip__bubble,.lia-tip:focus-within .lia-tip__bubble{
    position:static;width:auto;max-width:none;padding:0;background:none;color:var(--text-3);box-shadow:none;
    font-size:11.5px;opacity:1;visibility:visible;transform:none;
  }
  .lia-tip__bubble::after{display:none;}
}
.whatsapp-connect-btn{min-width:240px;max-width:100%;}
.whatsapp-connect-btn:focus-visible{outline:2px solid var(--primary);outline-offset:3px;}

.evolution-modal{
  width:min(410px,calc(100vw - 32px));max-height:calc(100vh - 32px);padding:0;
  border:1px solid var(--border);border-radius:18px;background:var(--surface);color:var(--text);
  box-shadow:var(--shadow-lg);font-family:inherit;overflow:auto;
}
.evolution-modal::backdrop{background:rgba(8,9,11,.65);backdrop-filter:blur(3px);}
.evolution-modal[open]{animation:error-modal-in .16s ease-out;}
.evolution-modal__box{position:relative;padding:28px;text-align:center;}
.evolution-modal__eyebrow{color:var(--primary);font-size:11px;font-weight:800;letter-spacing:.1em;margin-bottom:8px;}
.evolution-modal__title{font-size:19px;font-weight:800;letter-spacing:-.3px;margin:0 24px 8px;}
.evolution-modal__description{font-size:13px;line-height:1.6;color:var(--text-2);margin:0 0 20px;}
.evolution-modal__qr{
  width:264px;height:264px;max-width:100%;margin:auto;padding:12px;display:flex;align-items:center;justify-content:center;
  background:#fff;border:1px solid var(--border);border-radius:16px;
}
.evolution-modal__qr img{display:block;width:100%;height:100%;object-fit:contain;}
.evolution-modal__qr [hidden]{display:none;}
.evolution-modal__placeholder{color:#9AA1AB;font-size:36px;letter-spacing:6px;animation:pulseDot 1.4s infinite;}
.evolution-modal__status{font-size:13px;font-weight:700;margin:16px 0 6px;}
.evolution-modal__note{font-size:11.5px;line-height:1.5;color:var(--text-3);margin:0;}

/* ---- Input ---- */
.lia-input{
  width:100%;height:46px;padding:0 14px;border:1px solid var(--border-2);
  background:var(--surface-2);border-radius:11px;color:var(--text);
  font-size:14px;font-family:inherit;outline:none;
  transition:border-color .15s ease;
}
.lia-input::placeholder{color:var(--text-3);}
.lia-input:focus{border-color:var(--primary);}
.lia-field{display:block;margin-bottom:18px;}
.lia-field__label{display:block;font-size:13px;font-weight:600;color:var(--text-2);margin-bottom:7px;}
.lia-field__error{display:block;font-size:12px;color:var(--rose);margin-top:6px;}
.lia-field__toggle{position:relative;}
.lia-field__toggle .lia-input{padding-right:44px;}
.lia-field__eye{
  position:absolute;top:0;right:0;height:46px;width:44px;display:flex;
  align-items:center;justify-content:center;border:0;background:transparent;
  color:var(--text-3);cursor:pointer;padding:0;
}
.lia-field__eye:hover{color:var(--text-2);}

/* ---- Card ---- */
.lia-card{
  background:var(--surface);border:1px solid var(--border);border-radius:16px;
  padding:18px;box-shadow:var(--shadow);
}
.lia-card--flush{padding:0;overflow:hidden;}

/* ---- Badge ---- */
.lia-badge{
  display:inline-flex;align-items:center;gap:5px;
  font-size:11px;font-weight:700;padding:3px 9px;border-radius:7px;
  color:var(--primary-ink);background:var(--primary-soft);
}
.lia-badge--blue{color:var(--blue);background:var(--blue-soft);}
.lia-badge--amber{color:var(--amber);background:var(--amber-soft);}
.lia-badge--violet{color:var(--violet);background:var(--violet-soft);}
.lia-badge--rose{color:var(--rose);background:var(--rose-soft);}
.lia-badge--neutral{color:var(--text-2);background:var(--chip);}

/* ---- Chip ---- */
.lia-chip{
  display:inline-flex;align-items:center;gap:6px;
  font-size:12px;font-weight:600;padding:5px 11px;border-radius:9px;
  color:var(--text-2);background:var(--chip);
}

/* ---- Avatar ---- */
.lia-avatar{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:38px;height:38px;border-radius:50%;overflow:hidden;
  font-size:13px;font-weight:700;color:#fff;background:var(--primary);
  object-fit:cover;
}
.lia-avatar--sm{width:30px;height:30px;font-size:11px;}
.lia-avatar--lg{width:52px;height:52px;font-size:17px;}

/* ---- Toggle (switch) ---- */
.lia-toggle{display:inline-flex;align-items:center;cursor:pointer;}
.lia-toggle input{position:absolute;opacity:0;width:0;height:0;}
.lia-toggle__track{
  position:relative;width:42px;height:24px;border-radius:24px;
  background:var(--track);transition:background .18s ease;
}
.lia-toggle__track::after{
  content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;
  border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2);
  transition:transform .18s ease;
}
.lia-toggle input:checked + .lia-toggle__track{background:var(--primary);}
.lia-toggle input:checked + .lia-toggle__track::after{transform:translateX(18px);}

/* ---- Progress bar ---- */
.lia-progress{height:5px;background:var(--track);border-radius:5px;overflow:hidden;}
.lia-progress__bar{height:100%;background:var(--primary);border-radius:5px;transition:width .3s ease;}
.lia-progress__bar--warn{background:var(--amber);}
.lia-progress__bar--danger{background:var(--rose);}

/* ---- Inbox row action menu (excluir conversa) ---- */
.inbox-row__menu{position:absolute;top:6px;right:6px;display:none;list-style:none;}
.inbox-row:hover .inbox-row__menu,.inbox-row__menu[open]{display:block;}
.inbox-row__menu>summary{list-style:none;cursor:pointer;width:26px;height:26px;border-radius:8px;display:flex;align-items:center;justify-content:center;background:var(--surface);border:1px solid var(--border);color:var(--text-2);font-size:16px;line-height:1;box-shadow:var(--shadow);}
.inbox-row__menu>summary::-webkit-details-marker{display:none;}
.inbox-row__menu>summary:hover{color:var(--text);background:var(--surface-2);}
.inbox-row__menu-pop{position:absolute;right:0;top:30px;z-index:20;background:var(--surface);border:1px solid var(--border);border-radius:10px;box-shadow:var(--shadow-lg);padding:4px;min-width:168px;}
.inbox-row__delete{width:100%;text-align:left;background:none;border:none;cursor:pointer;padding:9px 11px;border-radius:7px;font-size:13px;font-weight:600;color:var(--rose);font-family:inherit;}
.inbox-row__delete:hover{background:var(--rose-soft);}

/* Selo "BroLabs x Meta Tech Provider" (login, sidebar): clicável, volta ao início. */
.tech-provider-badge{ display:inline-flex;flex:none;transition:opacity .15s ease,transform .15s ease; }
.tech-provider-badge:hover{ opacity:.88;transform:translateY(-1px); }

/* Login no celular: título e frase do card centralizados. */
@media (max-width:768px){
  .login-card-head{ text-align:center; }
}

/* ---- Modal de erro (shared/_error_modal) ---- */
.error-modal{
  width:min(480px,calc(100vw - 32px));max-height:calc(100vh - 32px);padding:0;
  border:1px solid var(--border);border-radius:18px;background:var(--surface);color:var(--text);
  box-shadow:var(--shadow-lg);font-family:inherit;
}
.error-modal::backdrop{background:rgba(8,9,11,.55);backdrop-filter:blur(2px);}
.error-modal[open]{animation:error-modal-in .16s ease-out;}
@keyframes error-modal-in{from{opacity:0;transform:translateY(8px) scale(.98);}to{opacity:1;transform:none;}}
.error-modal__box{position:relative;padding:24px;}
.error-modal__close{
  position:absolute;top:14px;right:14px;width:32px;height:32px;border:none;border-radius:9px;
  background:transparent;color:var(--text-3);font-size:22px;line-height:1;cursor:pointer;
}
.error-modal__close:hover{background:var(--chip);color:var(--text);}
.error-modal__head{display:flex;gap:14px;align-items:flex-start;padding-right:28px;margin-bottom:18px;}
.error-modal__icon{
  flex:none;width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  background:var(--rose-soft);color:var(--rose);font-size:20px;font-weight:800;
}
.error-modal__title{font-size:16px;font-weight:700;margin:2px 0 4px;}
.error-modal__message{font-size:13px;color:var(--text-2);margin:0;line-height:1.5;}
.error-modal__label{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--text-3);margin-bottom:8px;}
.error-modal__details{
  display:grid;grid-template-columns:auto 1fr;gap:8px 14px;margin:0 0 20px;padding:14px;
  background:var(--surface-2);border:1px solid var(--border);border-radius:12px;font-size:12px;
}
.error-modal__details dt{color:var(--text-3);font-weight:600;white-space:nowrap;}
.error-modal__details dd{margin:0;color:var(--text);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;word-break:break-word;max-height:140px;overflow:auto;}
.error-modal__actions{display:flex;justify-content:flex-end;gap:10px;}

/* ---- Loader inicial (layouts/app) ---- */
.app-loader{
  position:fixed;inset:0;z-index:1000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;
  background:var(--bg);transition:opacity .25s ease,visibility .25s ease;
}
.lia-loaded .app-loader{opacity:0;visibility:hidden;pointer-events:none;}
.lia-loaded.lia-navigating .app-loader{opacity:1;visibility:visible;pointer-events:auto;}
.app-loader__brand{font-size:30px;font-weight:800;letter-spacing:-1px;color:var(--text);}
.app-loader__spinner{
  width:34px;height:34px;border-radius:50%;
  border:3px solid var(--track);border-top-color:var(--primary);
  animation:app-loader-spin .8s linear infinite;
}
.app-loader__label{font-size:12.5px;color:var(--text-3);}
@keyframes app-loader-spin{to{transform:rotate(360deg);}}
@media (prefers-reduced-motion:reduce){.app-loader__spinner{animation-duration:2s;}}