.tato-chismo-wrap {
  max-width: 460px;
  margin: 24px auto;
  box-sizing: border-box;
  color: var(--tato-text);
}
.tato-wa-shell {
  background: #efeae2;
  border-radius: var(--tato-radius);
  overflow: hidden;
  box-shadow: 0 18px 48px rgba(15, 23, 42, .14);
  border: 1px solid rgba(15, 23, 42, .08);
}
.tato-wa-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: #075e54;
  color: #fff;
}
.tato-wa-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,.22);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
}
.tato-wa-header-meta {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}
.tato-wa-header-meta strong { font-size: 16px; }
.tato-wa-header-meta span { font-size: 12px; opacity: .9; }
.tato-wa-chat {
  padding: 16px;
  background:
    linear-gradient(rgba(239,234,226,.94), rgba(239,234,226,.94)),
    radial-gradient(circle at 25px 25px, rgba(0,0,0,.03) 2px, transparent 2px);
  background-size: auto, 24px 24px;
}
.tato-wa-bubble {
  padding: 10px 13px;
  border-radius: 16px;
  max-width: 88%;
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
  font-size: 15px;
  line-height: 1.35;
  margin-bottom: 10px;
}
.tato-wa-bubble-left {
  background: #fff;
  color: #111827;
  border-radius: 6px 16px 16px 16px;
  align-self: flex-start;
}
.tato-wa-form-card {
  background: rgba(255,255,255,.82);
  border-radius: 18px;
  padding: 14px;
  border: 1px solid rgba(15, 23, 42, .08);
  backdrop-filter: blur(3px);
}
.tato-chismo-form {
  display: block;
  margin-bottom: 10px;
}
.tato-chismo-form label {
  display: flex;
  flex-direction: column;
  font-weight: 700;
  gap: 7px;
  font-size: 13px;
  color: #0f172a;
  margin-bottom: 12px;
}
.tato-chismo-form label span { color: var(--tato-primary); }
.tato-chismo-form input[type="text"] {
  width: 100%;
  border: 1px solid rgba(15, 23, 42, .12);
  border-radius: 14px;
  padding: 12px 14px;
  font-size: 15px;
  outline: none;
  box-sizing: border-box;
  background: #fff;
}
.tato-chismo-form input:focus {
  border-color: #25d366;
  box-shadow: 0 0 0 3px rgba(37, 211, 102, .18);
}
.tato-chismo-consent {
  flex-direction: row !important;
  align-items: flex-start;
  font-weight: 500 !important;
  line-height: 1.45;
  margin: 6px 0 14px;
}
.tato-chismo-consent input { margin-top: 4px; }
.tato-chismo-form button {
  width: 100%;
  background: #25d366;
  color: #053d35;
  border: none;
  border-radius: 999px;
  padding: 14px 18px;
  font-size: 15px;
  font-weight: 900;
  cursor: pointer;
  transition: transform .16s ease, opacity .16s ease;
}
.tato-chismo-form button:hover { transform: translateY(-1px); opacity: .96; }
.tato-chismo-form button:disabled { opacity: .65; cursor: wait; transform: none; }
.tato-chismo-result { margin-top: 10px; }
.tato-chismo-result .tato-error {
  background: #fee2e2;
  color: #7f1d1d;
  border-radius: 12px;
  padding: 12px 14px;
}
.tato-whatsapp-messages {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 6px;
}
.tato-whatsapp-messages .tato-wa-bubble {
  background: #dcf8c6;
  color: #111827;
  border-radius: 16px 16px 4px 16px;
  align-self: flex-end;
  margin-bottom: 0;
}
@media (max-width: 520px) {
  .tato-chismo-wrap { margin: 14px auto; }
  .tato-wa-chat { padding: 12px; }
}

.tato-hidden-after-submit {
  display: none !important;
}
.tato-loading-bubble {
  background: #fff;
  color: #334155;
  border-radius: 6px 16px 16px 16px;
  padding: 11px 14px;
  max-width: 84%;
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
  font-size: 15px;
  line-height: 1.35;
  position: relative;
}
.tato-loading-bubble::after {
  content: '•••';
  letter-spacing: 3px;
  margin-left: 6px;
  animation: tatoBlink 1.1s infinite;
}
@keyframes tatoBlink {
  0%, 100% { opacity: .25; }
  50% { opacity: 1; }
}
.tato-reset-btn {
  width: 100%;
  margin-top: 14px;
  background: #fff;
  color: #075e54;
  border: 1px solid rgba(7, 94, 84, .18);
  border-radius: 999px;
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
@media (max-width: 520px) {
  .tato-chismo-wrap {
    max-width: 100%;
    width: 100%;
  }
  .tato-wa-shell {
    border-radius: 18px;
  }
  .tato-wa-form-card {
    padding: 13px;
  }
  .tato-chismo-form input[type="text"] {
    font-size: 16px;
  }
  .tato-whatsapp-messages .tato-wa-bubble,
  .tato-loading-bubble {
    max-width: 94%;
  }
}