/* Tela chat widget — public www */
:root{
  --tela-brand:#01599C;
  --tela-brand-soft:#E6F0F8;
  --tela-bg:#ffffff;
  --tela-text:#0f172a;
  --tela-muted:#64748b;
  --tela-border:#e2e8f0;
  --tela-shadow:0 20px 50px -12px rgba(2,6,23,.25), 0 6px 14px -6px rgba(2,6,23,.15);
}

.tela-launcher{
  position:fixed; right:20px; bottom:20px; z-index:60;
  width:64px; height:64px; border-radius:50%; border:0; cursor:pointer;
  background:var(--tela-brand);
  box-shadow:var(--tela-shadow);
  display:flex; align-items:center; justify-content:center;
  padding:0; transition:transform .2s ease, box-shadow .2s ease;
}
.tela-launcher:hover{ transform:translateY(-2px); box-shadow:0 24px 60px -12px rgba(1,89,156,.45), 0 8px 18px -8px rgba(2,6,23,.18); }
.tela-launcher img{ width:54px; height:54px; border-radius:50%; object-fit:cover; pointer-events:none; }
.tela-launcher .tela-dot{
  position:absolute; top:4px; right:4px; width:12px; height:12px; border-radius:50%;
  background:#22C55E; box-shadow:0 0 0 3px var(--tela-bg);
}
.tela-launcher[aria-expanded="true"] .tela-dot{ display:none; }

.tela-panel{
  position:fixed; right:20px; bottom:96px; z-index:61;
  width:360px; max-width:calc(100vw - 32px); max-height:min(640px, calc(100vh - 120px));
  background:var(--tela-bg); border-radius:18px; box-shadow:var(--tela-shadow);
  display:none; flex-direction:column; overflow:hidden;
  font-family:inherit; color:var(--tela-text);
  animation:telaIn .22s cubic-bezier(.2,.8,.2,1);
}
.tela-panel.open{ display:flex; }
@keyframes telaIn{ from{ opacity:0; transform:translateY(8px) scale(.98); } to{ opacity:1; transform:none; } }

.tela-header{
  display:flex; align-items:center; gap:10px;
  padding:14px 16px; background:var(--tela-brand); color:#fff;
}
.tela-header img{ width:42px; height:42px; border-radius:50%; object-fit:cover; background:#fff2; }
.tela-header h3{ font-size:14px; font-weight:600; margin:0; line-height:1.2; }
.tela-header p{ font-size:11px; margin:2px 0 0; opacity:.85; }
.tela-close{
  margin-left:auto; background:transparent; border:0; color:#fff; cursor:pointer;
  width:32px; height:32px; border-radius:8px; display:grid; place-items:center;
  font-size:18px; line-height:1; opacity:.85;
}
.tela-close:hover{ background:rgba(255,255,255,.15); opacity:1; }

.tela-body{
  flex:1; overflow-y:auto; padding:16px;
  background:linear-gradient(180deg,#fafbfc 0%,#fff 100%);
  display:flex; flex-direction:column; gap:10px;
}
.tela-msg{
  max-width:84%; padding:10px 12px; border-radius:14px; font-size:13.5px; line-height:1.45;
  white-space:pre-wrap; word-wrap:break-word;
}
.tela-msg-bot{
  background:#fff; border:1px solid var(--tela-border); color:var(--tela-text);
  align-self:flex-start; border-bottom-left-radius:4px;
}
.tela-msg-user{
  background:var(--tela-brand); color:#fff;
  align-self:flex-end; border-bottom-right-radius:4px;
}

.tela-replies{
  padding:10px 16px 4px; display:flex; flex-wrap:wrap; gap:6px;
}
.tela-replies button{
  font:inherit; font-size:12.5px; padding:7px 12px;
  background:#fff; border:1px solid var(--tela-border); color:var(--tela-brand);
  border-radius:999px; cursor:pointer; line-height:1.2;
}
.tela-replies button:hover{ background:var(--tela-brand-soft); border-color:var(--tela-brand); }

.tela-cta{
  padding:10px 16px 14px; display:flex; gap:8px; flex-direction:column;
  border-top:1px solid var(--tela-border); background:#fff;
}
.tela-cta a, .tela-cta button{
  text-decoration:none; font:inherit; font-size:13px; font-weight:500;
  padding:9px 14px; border-radius:10px; text-align:center; cursor:pointer; border:0;
  display:flex; align-items:center; justify-content:center; gap:6px;
}
.tela-cta .tela-cta-primary{ background:var(--tela-brand); color:#fff; }
.tela-cta .tela-cta-primary:hover{ background:#014b85; }
.tela-cta .tela-cta-ghost{ background:#fff; color:var(--tela-brand); border:1px solid var(--tela-border); }
.tela-cta .tela-cta-ghost:hover{ background:var(--tela-brand-soft); border-color:var(--tela-brand); }

.tela-foot{
  padding:8px 16px 10px; font-size:10.5px; color:var(--tela-muted); text-align:center;
}

@media (max-width: 480px){
  .tela-launcher{ right:14px; bottom:14px; width:56px; height:56px; }
  .tela-launcher img{ width:48px; height:48px; }
  .tela-panel{ right:14px; bottom:80px; width:calc(100vw - 28px); max-height:calc(100vh - 110px); }
}