/* ================================
   WP ASSISTENTE - DESIGN PREMIUM (GLASS DARK)
   ================================ */

.ai-msg-hero img.hidden {
  display: none !important;
}

/* Variáveis em design-tokens.css (:root) */

/* ================= BALÕES DE SAUDAÇÃO PROATIVOS ================= */
.ai-greeting-bubble {
  position: fixed;
  bottom: 160px;
  right: 24px;
  max-width: 280px;

  background: var(--card);
  backdrop-filter: none;
  border: var(--card-border);
  border-radius: 16px;

  padding: 14px 16px;
  box-shadow: var(--modal-content-shadow);

  cursor: pointer;
  z-index: 999;

  opacity: 0;
  transform: translateY(20px) scale(0.9);
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
}

.ai-greeting-bubble.active {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: all;
}

.ai-greeting-bubble::before {
  content: "";
  position: absolute;
  bottom: -8px;
  right: 20px;
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid var(--accent-color);
}

.ai-greeting-content {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-primary);
  padding-right: 24px;
}

.ai-greeting-content strong {
  color: var(--primary);
  font-weight: 600;
}

.ai-greeting-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 24px;
  height: 24px;

  background: transparent;
  border: none;
  border-radius: 50%;

  color: var(--text-muted);
  font-size: 20px;
  line-height: 1;

  cursor: pointer;
  transition: all 0.2s;

  display: flex;
  align-items: center;
  justify-content: center;
}

@media (hover: hover) {
  .ai-greeting-close:hover {
  background: var(--surface-hover);
  color: var(--text-primary);
}
}

@media (hover: hover) {
  .ai-greeting-bubble:hover {
  border-color: var(--primary-light);
  box-shadow: var(--modal-content-shadow);
  transform: translateY(-2px) scale(1.02);
}
}

@media (max-width: 480px) {
  .ai-greeting-bubble {
    bottom: 150px;
    right: 16px;
    max-width: calc(100vw - 32px);
  }
}

/* ================= FAB (Botão) ================= */
.ai-fab {
  position: fixed;
  bottom: 90px;
  right: 24px;
  width: 56px;
  height: 56px;

  background: var(--card);
  border: 1px solid var(--primary);
  border-radius: 50%;

  display: flex;
  align-items: center;
  justify-content: center;

  box-shadow: var(--shadow-md);
  cursor: pointer;
  z-index: 1000;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  /* Prevenir destaques e seleção no mobile */
  -webkit-tap-highlight-color: transparent;
  outline: none !important;
  user-select: none;
  overflow: hidden;
}

.ai-fab::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1px solid var(--accent-glow);
  opacity: 0;
  transition: opacity 0.3s;
}

@media (hover: hover) {
  .ai-fab:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px var(--primary-glow);
}
}

@media (hover: hover) {
  .ai-fab:hover::after {
  opacity: 1;
}
}

/* ================= OVERLAY ================= */
.ai-overlay {
  position: fixed;
  inset: 0;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--modal-overlay-bg);
  z-index: 9999;

  display: none;
  align-items: center;
  justify-content: center;

  padding: 0px;
  opacity: 0;
  /* Somente animação de opacidade, sem movimento */
  transition: opacity 0.2s ease;

  /* Previne qualquer movimento automático */
  transform: none !important;
  overflow: hidden;
  /* Essencial para conter o documento e evitar scroll externo */
}

.ai-overlay.active {
  display: flex;
  opacity: 1;
}

/* ================= JANELA DO CHAT ================= */
.ai-window {
  width: 100%;
  max-width: 420px;
  height: 600px;
  max-height: 85vh;

  background: var(--card);
  border: var(--modal-content-border);
  border-radius: 16px;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;

  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 600px;
  max-height: 85vh;
  min-height: 400px;
  overscroll-behavior: contain;
  position: relative;

  box-shadow: var(--modal-content-shadow);
  transform: scale(0.95);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.ai-overlay.active .ai-window {
  transform: scale(1);
}

/* ================= HEADER ================= */
.ai-header {
  padding: 14px 16px;
  background: var(--modal-header-bg);
  border-bottom: var(--modal-header-border);

  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ai-title {
  font-family: var(--font-display, "Rajdhani", sans-serif);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 10px;
}

.avatar-svg-block {
  display: block;
}

.ai-header-avatar {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ai-header-avatar .ai-icon {
  width: 24px;
  height: 24px;
  filter: drop-shadow(0 0 5px var(--accent-glow));
}

.ai-title i {
  color: var(--accent-color);
  font-size: 16px;
}

.ai-close {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--subcard);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
  box-sizing: border-box;
}

@media (hover: hover) {
  .ai-close:hover {
  background: var(--tint-danger);
  border-color: var(--danger-glow-40);
  color: var(--danger);
}
}

/* ================= MENSAGENS ================= */
.ai-messages {
  flex: 1 1 auto;
  padding: 16px;
  overflow-y: auto !important;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  gap: 12px;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  min-height: 0;
  background: var(--card);
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) transparent;
}

.ai-messages::-webkit-scrollbar {
  width: 6px;
}

.ai-messages::-webkit-scrollbar-track {
  background: transparent;
}

.ai-messages::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 999px;
}

@media (hover: hover) {
  .ai-messages::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
}
}

.ai-msg {
  max-width: 100%;
  padding: 12px 16px;
  border-radius: 12px;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  position: relative;
  animation: fadeIn 0.3s ease;
  word-break: break-word;
  overflow-wrap: break-word;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Bot Message — nested no card do modal */
.ai-msg.bot {
  align-self: stretch;
  background: var(--subcard);
  backdrop-filter: none;
  color: var(--text-primary);
  border: var(--card-border);
  border-radius: 12px;
  padding: 0;
  overflow: hidden;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  flex-shrink: 0;
}

.ai-msg-content {
  padding: 14px 16px;
}

.ai-msg-content > i[class*="fa-"],
.ai-msg-content i[aria-hidden="true"] {
  margin-right: 6px;
  width: 1.05em;
  display: inline-block;
  text-align: center;
  color: var(--primary);
}

/* Ícones com cor semântica (especificidade > default aria-hidden) */
.ai-msg-content i[aria-hidden="true"].fa-bug {
  color: var(--info);
}
.ai-msg-content i[aria-hidden="true"].fa-lightbulb {
  color: #e67e22;
}
.ai-msg-content i[aria-hidden="true"].fa-question {
  color: var(--accent-purple);
}
.ai-msg-content i[aria-hidden="true"].fa-wrench,
.ai-msg-content i[aria-hidden="true"].fa-cog {
  color: var(--accent-teal);
}
.ai-msg-content i[aria-hidden="true"].fa-key {
  color: #d6a756;
}
.ai-msg-content i[aria-hidden="true"].fa-balance-scale,
.ai-msg-content i[aria-hidden="true"].fa-scale-balanced {
  color: var(--accent-purple);
}
.ai-msg-content i[aria-hidden="true"].fa-unlink,
.ai-msg-content i[aria-hidden="true"].fa-link-slash {
  color: var(--danger);
}
.ai-msg-content i[aria-hidden="true"].fa-dollar-sign {
  color: var(--success);
}
.ai-msg-content i[aria-hidden="true"].fa-file-alt,
.ai-msg-content i[aria-hidden="true"].fa-file-lines {
  color: var(--info);
}
.ai-msg-content i[aria-hidden="true"].fa-clipboard-list {
  color: var(--info);
}
.ai-msg-content i[aria-hidden="true"].fa-tag,
.ai-msg-content i[aria-hidden="true"].fa-folder,
.ai-msg-content i[aria-hidden="true"].fa-folder-open {
  color: var(--info);
}
.ai-msg-content i[aria-hidden="true"].fa-ticket-alt,
.ai-msg-content i[aria-hidden="true"].fa-ticket {
  color: var(--primary);
}
.ai-msg-content i[aria-hidden="true"].fa-check-circle,
.ai-msg-content i[aria-hidden="true"].fa-check {
  color: var(--success);
}
.ai-msg-content i[aria-hidden="true"].fa-search {
  color: var(--info);
}
.ai-msg-content i[aria-hidden="true"].fa-hashtag {
  color: var(--primary);
}
.ai-msg-content i[aria-hidden="true"].fa-info-circle {
  color: var(--info);
}
.ai-msg-content i[aria-hidden="true"].fa-thumbtack {
  color: var(--primary);
}
.ai-msg-content i[aria-hidden="true"].fa-calendar-alt,
.ai-msg-content i[aria-hidden="true"].fa-calendar {
  color: var(--info);
}

.ai-msg-content .ai-internal-icon i {
  margin-right: 0;
  width: auto;
  color: inherit;
}

.ai-msg--banner {
  background: linear-gradient(180deg, var(--white-08) 0%, var(--white-04) 100%);
  border: var(--card-border);
  border-radius: var(--radius-2xl);
  padding: 0;
  max-width: 100%;
}

.ai-msg--banner::before {
  display: none;
}

.ai-msg--banner .ai-msg-content {
  padding: 8px 12px;
  font-size: 0.875rem;
  line-height: 1.25;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ai-msg--banner .ai-msg-content i {
  color: var(--primary);
  margin-right: 4px;
  font-size: 0.9em;
}

.ai-msg--banner .ai-msg-content strong {
  color: var(--primary);
  font-weight: 700;
}

@media (max-width: 420px) {
  .ai-msg--banner .ai-msg-content {
    white-space: normal;
  }
}

.ai-msg-content.masked {
  -webkit-text-security: disc !important;
}

/* Hero image (oficial/equipamento em destaque) */
.ai-msg-hero {
  width: 100%;
  aspect-ratio: 1;
  max-height: 140px;
  overflow: hidden;
  background: var(--subcard);
  display: flex;
  align-items: center;
  justify-content: center;
}
.ai-msg-hero img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Grid de itens (equipamentos com foto) */
.ai-msg-items-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 10px;
  padding: 10px 12px;
  background: transparent;
  overflow: hidden;
  min-width: 0;
}
.ai-msg-item-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 8px 6px;
  background: var(--card);
  border-radius: 10px;
  border: var(--card-border);
  transition: all 0.2s;
  min-width: 0;
}
@media (hover: hover) {
  .ai-msg-item-card:hover {
  background: var(--surface-hover);
  border-color: var(--primary);
}
}
.ai-msg-item-img {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 8px;
  overflow: hidden;
  background: var(--subcard);
}
.ai-msg-item-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ai-msg-item-img.no-img {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: var(--text-muted);
}
.ai-msg-item-img.no-img::before {
  content: "\f3ed";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
}
.ai-msg-item-info {
  text-align: center;
  min-width: 0;
  width: 100%;
  overflow: hidden;
}
.ai-msg-item-name {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-primary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  box-orient: vertical;
  overflow: hidden;
  line-height: 1.25;
}
.ai-msg-item-sub {
  font-size: 8px;
  color: var(--text-muted);
  display: block;
  margin-top: 1px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Telas muito pequenas: 1 coluna para mais espaço */
@media (max-width: 380px) {
  .ai-msg-items-grid {
    grid-template-columns: 1fr;
    padding: 8px 10px;
  }
  .ai-msg-item-card {
    flex-direction: row;
    gap: 10px;
    padding: 10px 12px;
    text-align: left;
  }
  .ai-msg-item-card .ai-msg-item-info {
    text-align: left;
    flex: 1;
  }
  .ai-msg-item-img {
    width: 48px;
    height: 48px;
  }
}

/* Options: cards de ação (img 2/3) + acesso rápido */
.ai-msg-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px 10px 10px;
  border-top: var(--divider-border);
  background: transparent;
  overflow: hidden;
}

.ai-msg-options-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
  overflow: hidden;
}

.ai-msg-options-primary {
  background: transparent;
  border: none;
  margin: 0;
}

.ai-msg-options-nav {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin: 0;
  padding-top: 4px;
  border-top: none;
}

.ai-msg-options-nav-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display, "Rajdhani", sans-serif);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--primary);
  margin: 2px 0 4px;
  padding: 0;
}

.ai-msg-options-nav-label i {
  font-size: 0.7rem;
  flex-shrink: 0;
}

.ai-msg-options-nav-label::before,
.ai-msg-options-nav-label::after {
  content: "";
  height: 1px;
  flex: 1;
}

.ai-msg-options-nav-label::before {
  background: linear-gradient(90deg, transparent, var(--border));
}

.ai-msg-options-nav-label::after {
  background: linear-gradient(90deg, var(--border), transparent);
}

.ai-option-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  box-sizing: border-box;
  text-align: left;
  cursor: pointer;
  position: relative;
  animation: slideInOpt 0.3s ease forwards;
  opacity: 0;
  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease,
    transform 0.18s ease;
}

@keyframes slideInOpt {
  from {
    opacity: 0;
    transform: translateX(-8px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInOptNav {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Card principal: compacto — ícone + título + desc + chevron */
.ai-option-btn.ai-option-card {
  gap: 10px;
  padding: 8px 10px;
  min-height: 0;
  background: linear-gradient(180deg, var(--white-08) 0%, var(--white-04) 100%);
  border: var(--card-border);
  border-radius: var(--radius-2xl);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-weight: 400;
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
}

/* Hover ouro suave só nas ações principais */
@media (hover: hover) {
  .ai-msg-options-primary .ai-option-btn.ai-option-card:hover:not(:disabled) {
  border-color: rgba(var(--primary-rgb), 0.45);
  box-shadow: 0 6px 18px var(--black-25);
  transform: translateY(-1px);
  background: linear-gradient(180deg, var(--white-12) 0%, var(--white-06) 100%);
}
}

@media (hover: hover) {
  .ai-msg-options-nav .ai-option-btn.ai-option-card:hover:not(:disabled) {
  border-color: rgba(var(--primary-rgb), 0.35);
  background: linear-gradient(180deg, var(--white-10) 0%, var(--white-05) 100%);
  box-shadow: 0 4px 14px var(--black-25);
  transform: translateY(-1px);
}
}

.ai-option-btn.ai-option-card.selected {
  background: var(--primary-light-glow-15);
  border-color: var(--primary);
  box-shadow: 0 0 0 1px var(--primary-light-glow-20);
}

.ai-option-btn.ai-option-card.selected .opt-title {
  color: var(--primary-light);
}

.ai-option-btn.ai-option-card.selected .opt-chevron {
  color: var(--primary-light);
}

.ai-option-btn.ai-option-card.selected::after {
  display: none;
}

.ai-option-btn .opt-icon-wrap {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-lg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--white-08);
  border: 1px solid var(--border-strong);
}

.ai-option-btn .opt-icon-wrap .opt-icon {
  font-size: 0.85rem;
  line-height: 1;
  width: auto;
  filter: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
}

.ai-option-btn .opt-icon-wrap .opt-icon i {
  font-size: inherit;
  line-height: 1;
}

/* Tons semânticos: badge + ícone coloridos */
.ai-option-btn[data-tone="bug"] .opt-icon-wrap,
.ai-option-btn[data-tone="tickets"] .opt-icon-wrap,
.ai-option-btn[data-tone="info"] .opt-icon-wrap,
.ai-option-btn[data-tone="link"] .opt-icon-wrap,
.ai-option-btn[data-tone="back"] .opt-icon-wrap {
  background: var(--tint-info);
  border-color: rgba(var(--info-rgb), 0.4);
}
.ai-option-btn[data-tone="bug"] .opt-icon-wrap .opt-icon,
.ai-option-btn[data-tone="tickets"] .opt-icon-wrap .opt-icon,
.ai-option-btn[data-tone="info"] .opt-icon-wrap .opt-icon,
.ai-option-btn[data-tone="link"] .opt-icon-wrap .opt-icon,
.ai-option-btn[data-tone="back"] .opt-icon-wrap .opt-icon,
.ai-option-btn[data-tone="bug"] > .opt-icon,
.ai-option-btn[data-tone="tickets"] > .opt-icon,
.ai-option-btn[data-tone="info"] > .opt-icon,
.ai-option-btn[data-tone="link"] > .opt-icon {
  color: var(--info);
}

.ai-option-btn[data-tone="idea"] .opt-icon-wrap,
.ai-option-btn[data-tone="new"] .opt-icon-wrap,
.ai-option-btn[data-tone="warning"] .opt-icon-wrap,
.ai-option-btn[data-tone="send"] .opt-icon-wrap {
  background: var(--tint-warning);
  border-color: rgba(var(--warning-rgb), 0.4);
}
.ai-option-btn[data-tone="idea"] .opt-icon-wrap .opt-icon,
.ai-option-btn[data-tone="new"] .opt-icon-wrap .opt-icon,
.ai-option-btn[data-tone="warning"] .opt-icon-wrap .opt-icon,
.ai-option-btn[data-tone="send"] .opt-icon-wrap .opt-icon,
.ai-option-btn[data-tone="idea"] > .opt-icon,
.ai-option-btn[data-tone="new"] > .opt-icon,
.ai-option-btn[data-tone="warning"] > .opt-icon,
.ai-option-btn[data-tone="send"] > .opt-icon {
  color: var(--warning);
}

.ai-option-btn[data-tone="help"] .opt-icon-wrap,
.ai-option-btn[data-tone="appeal"] .opt-icon-wrap,
.ai-option-btn[data-tone="reply"] .opt-icon-wrap {
  background: rgba(var(--accent-purple-rgb), 0.12);
  border-color: rgba(var(--accent-purple-rgb), 0.4);
}
.ai-option-btn[data-tone="help"] .opt-icon-wrap .opt-icon,
.ai-option-btn[data-tone="appeal"] .opt-icon-wrap .opt-icon,
.ai-option-btn[data-tone="reply"] .opt-icon-wrap .opt-icon,
.ai-option-btn[data-tone="help"] > .opt-icon,
.ai-option-btn[data-tone="appeal"] > .opt-icon,
.ai-option-btn[data-tone="reply"] > .opt-icon {
  color: var(--accent-purple);
}

.ai-option-btn[data-tone="home"] .opt-icon-wrap,
.ai-option-btn[data-tone="retry"] .opt-icon-wrap {
  background: var(--tint-success);
  border-color: rgba(var(--success-rgb), 0.4);
}
.ai-option-btn[data-tone="home"] .opt-icon-wrap .opt-icon,
.ai-option-btn[data-tone="retry"] .opt-icon-wrap .opt-icon,
.ai-option-btn[data-tone="home"] > .opt-icon,
.ai-option-btn[data-tone="retry"] > .opt-icon {
  color: var(--success);
}

.ai-option-btn[data-tone="danger"] .opt-icon-wrap,
.ai-option-btn[data-tone="cancel"] .opt-icon-wrap {
  background: var(--tint-danger);
  border-color: rgba(var(--danger-rgb), 0.4);
}
.ai-option-btn[data-tone="danger"] .opt-icon-wrap .opt-icon,
.ai-option-btn[data-tone="cancel"] .opt-icon-wrap .opt-icon,
.ai-option-btn[data-tone="danger"] > .opt-icon,
.ai-option-btn[data-tone="cancel"] > .opt-icon {
  color: var(--danger);
}

.ai-option-btn[data-tone="key"] .opt-icon-wrap {
  background: var(--primary-glow-08);
  border-color: rgba(var(--primary-rgb), 0.4);
}
.ai-option-btn[data-tone="key"] .opt-icon-wrap .opt-icon,
.ai-option-btn[data-tone="key"] > .opt-icon {
  color: var(--primary);
}

.ai-option-btn[data-tone="other"] .opt-icon-wrap {
  background: rgba(var(--accent-teal-rgb), 0.12);
  border-color: rgba(var(--accent-teal-rgb), 0.4);
}
.ai-option-btn[data-tone="other"] .opt-icon-wrap .opt-icon,
.ai-option-btn[data-tone="other"] > .opt-icon,
.ai-option-btn.ai-option-nav[data-tone="other"] .opt-icon {
  color: var(--accent-teal);
}

.ai-option-btn[data-tone="muted"] .opt-icon-wrap,
.ai-option-btn[data-tone="default"] .opt-icon-wrap,
.ai-option-btn[data-tone="nav"] .opt-icon-wrap {
  background: var(--white-08);
  border-color: var(--border-strong);
}
.ai-option-btn[data-tone="muted"] .opt-icon-wrap .opt-icon,
.ai-option-btn[data-tone="default"] .opt-icon-wrap .opt-icon,
.ai-option-btn[data-tone="nav"] .opt-icon-wrap .opt-icon,
.ai-option-btn[data-tone="muted"] > .opt-icon,
.ai-option-btn[data-tone="default"] > .opt-icon,
.ai-option-btn[data-tone="nav"] > .opt-icon {
  color: var(--text-secondary);
}

.ai-option-btn .opt-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.ai-option-btn .opt-title {
  font-family: var(--font-display, "Rajdhani", sans-serif);
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text-primary);
  line-height: 1.15;
}

.ai-option-btn .opt-desc {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 400;
  color: var(--text-secondary);
  line-height: 1.25;
}

.ai-option-btn .opt-chevron {
  flex-shrink: 0;
  font-size: 1.15rem;
  font-weight: 400;
  color: var(--text-muted);
  line-height: 1;
  padding-right: 1px;
  opacity: 0.85;
  transition:
    color 0.18s ease,
    transform 0.18s ease,
    opacity 0.18s ease;
}

@media (hover: hover) {
  .ai-option-btn.ai-option-card:hover:not(:disabled) .opt-chevron {
  color: var(--primary);
  transform: translateX(2px);
  opacity: 1;
}
}

/* Nav / acesso rápido: outline simples */
.ai-option-btn.ai-option-nav {
  gap: 8px;
  padding: 8px 10px;
  justify-content: flex-start;
  background: transparent;
  border: var(--card-border);
  border-radius: var(--radius-2xl);
  color: var(--text-primary);
  font-family: var(--font-display, "Rajdhani", sans-serif);
  font-size: 0.84rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  animation-name: slideInOptNav;
}

.ai-option-btn.ai-option-nav .opt-icon {
  font-size: 0.95rem;
  width: 22px;
  text-align: center;
  flex-shrink: 0;
  opacity: 0.95;
  filter: none;
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ai-option-btn.ai-option-nav .opt-icon i {
  font-size: inherit;
  line-height: 1;
}

.ai-option-btn.ai-option-nav[data-tone="bug"] .opt-icon,
.ai-option-btn.ai-option-nav[data-tone="tickets"] .opt-icon,
.ai-option-btn.ai-option-nav[data-tone="info"] .opt-icon,
.ai-option-btn.ai-option-nav[data-tone="link"] .opt-icon,
.ai-option-btn.ai-option-nav[data-tone="back"] .opt-icon {
  color: var(--info);
}

.ai-option-btn.ai-option-nav[data-tone="idea"] .opt-icon,
.ai-option-btn.ai-option-nav[data-tone="new"] .opt-icon,
.ai-option-btn.ai-option-nav[data-tone="warning"] .opt-icon,
.ai-option-btn.ai-option-nav[data-tone="send"] .opt-icon {
  color: var(--warning);
}

.ai-option-btn.ai-option-nav[data-tone="help"] .opt-icon,
.ai-option-btn.ai-option-nav[data-tone="appeal"] .opt-icon,
.ai-option-btn.ai-option-nav[data-tone="reply"] .opt-icon {
  color: var(--accent-purple);
}

.ai-option-btn.ai-option-nav[data-tone="home"] .opt-icon,
.ai-option-btn.ai-option-nav[data-tone="retry"] .opt-icon {
  color: var(--success);
}

.ai-option-btn.ai-option-nav[data-tone="danger"] .opt-icon,
.ai-option-btn.ai-option-nav[data-tone="cancel"] .opt-icon {
  color: var(--danger);
}

.ai-option-btn.ai-option-nav[data-tone="key"] .opt-icon {
  color: var(--primary);
}

.ai-option-btn.ai-option-nav .opt-text {
  flex: 1;
  line-height: 1.25;
}

@media (hover: hover) {
  .ai-option-btn.ai-option-nav:hover:not(:disabled) {
  background: var(--white-08);
  border-color: var(--border-strong);
  color: var(--text-primary);
}
}

.ai-option-btn.ai-option-nav.selected {
  background: var(--primary-light-glow-15);
  border-color: var(--primary);
  color: var(--primary-light);
}

.ai-option-btn.ai-option-nav.selected::after {
  display: none;
}

.ai-option-btn:disabled {
  cursor: default;
}

/* Fallback legado (opções sem card/nav) */
.ai-option-btn:not(.ai-option-card):not(.ai-option-nav) {
  padding: 12px 14px;
  background: var(--white-06);
  border: var(--card-border);
  border-radius: 10px;
  color: var(--text-primary);
  font-family: var(--font-display, "Rajdhani", sans-serif);
  font-size: 14px;
  font-weight: 600;
}

.ai-option-btn:not(.ai-option-card):not(.ai-option-nav) .opt-icon {
  font-size: 18px;
  width: 24px;
  text-align: center;
  flex-shrink: 0;
}

.ai-option-btn:not(.ai-option-card):not(.ai-option-nav) .opt-text {
  flex: 1;
}

.ai-option-btn:not(.ai-option-card):not(.ai-option-nav).selected {
  background: var(--primary-light-glow-15);
  border-color: var(--primary);
  color: var(--primary-light);
}

.ai-option-btn:not(.ai-option-card):not(.ai-option-nav).selected::after {
  content: "✓";
  position: absolute;
  right: 14px;
  font-size: 12px;
  color: var(--primary-light);
}

/* User Message */
.ai-msg.user {
  align-self: flex-end;
  background: var(--user-msg-gradient);
  color: var(--text-on-primary);
  font-weight: 600;
  border-radius: 12px;
  border-bottom-right-radius: 4px;
  box-shadow: none;
  width: fit-content;
  max-width: 85%;
  padding: 0;
  border: 1px solid var(--primary-dark);
}

.ai-msg strong {
  font-weight: 700;
  color: inherit;
}

/* Destaques markdown (**…**) do bot: ouro da marca */
.ai-msg.bot strong {
  color: var(--primary);
}

/* ================= CHIPS (OPÇÕES) ================= */
.ai-chips-container {
  padding: 12px 20px;
  display: none;
  /* Controlado via JS */
  flex-direction: column;
  gap: 8px;
  /* SEM SCROLL */
  overflow: visible;
}

.ai-chips-container.active {
  display: flex;
}

/* Chips contextuais (atalhos) em grid compacto */
.ai-chips-container.ai-chips-contextual {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px;
}
.ai-chips-container.ai-chips-contextual .ai-chip {
  flex: 1 1 calc(50% - 4px);
  min-width: 140px;
  padding: 8px 12px;
}
.ai-chips-container.ai-chips-contextual .ai-chip-desc {
  font-size: 10px;
}

.ai-chip {
  display: flex;
  align-items: center;
  gap: 12px;

  padding: 10px 14px;
  background: var(--subcard);
  border: var(--card-border);
  border-radius: 10px;

  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
  animation: fadeIn 0.4s ease both;
}

@media (hover: hover) {
  .ai-chip:hover {
  background: var(--surface-hover);
  border-color: var(--primary-glow-40);
  transform: none;
  box-shadow: none;
}
}

.ai-chip-icon {
  font-size: 16px;
  width: 28px;
  min-width: 28px;
  height: 28px;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-lg);
  background: var(--white-08);
  border: 1px solid var(--border-strong);
  color: var(--text-secondary);
}

.ai-chip-icon i {
  font-size: inherit;
  line-height: 1;
}

.ai-chip[data-tone="link"] .ai-chip-icon,
.ai-chip[data-tone="tickets"] .ai-chip-icon,
.ai-chip[data-tone="info"] .ai-chip-icon {
  background: var(--tint-info);
  border-color: rgba(var(--info-rgb), 0.4);
  color: var(--info);
}

.ai-chip[data-tone="new"] .ai-chip-icon,
.ai-chip[data-tone="warning"] .ai-chip-icon,
.ai-chip[data-tone="send"] .ai-chip-icon {
  background: var(--tint-warning);
  border-color: rgba(var(--warning-rgb), 0.4);
  color: var(--warning);
}

.ai-chip[data-tone="home"] .ai-chip-icon,
.ai-chip[data-tone="retry"] .ai-chip-icon {
  background: var(--tint-success);
  border-color: rgba(var(--success-rgb), 0.4);
  color: var(--success);
}

.ai-chip[data-tone="danger"] .ai-chip-icon,
.ai-chip[data-tone="cancel"] .ai-chip-icon {
  background: var(--tint-danger);
  border-color: rgba(var(--danger-rgb), 0.4);
  color: var(--danger);
}

.ai-chip[data-tone="key"] .ai-chip-icon {
  background: var(--primary-glow-08);
  border-color: rgba(var(--primary-rgb), 0.4);
  color: var(--primary);
}

.ai-chip[data-tone="appeal"] .ai-chip-icon,
.ai-chip[data-tone="reply"] .ai-chip-icon,
.ai-chip[data-tone="help"] .ai-chip-icon {
  background: rgba(var(--accent-purple-rgb), 0.12);
  border-color: rgba(var(--accent-purple-rgb), 0.4);
  color: var(--accent-purple);
}

.ai-chip-content {
  flex: 1;
}

.ai-chip-title {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 2px;
}

.ai-chip-desc {
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--text-muted);
}

/* ================= INPUT AREA ================= */
.ai-input-area {
  padding: 14px 16px;
  background: var(--card);
  border-top: var(--divider-border);
  display: flex;
  gap: 10px;
  align-items: center;
}

.ai-input-wrapper {
  flex: 1;
  position: relative;
  display: flex;
  align-items: stretch;
  min-height: 44px;
  min-width: 0;
  overflow: hidden;
}

.ai-char-count {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 10px;
  color: var(--text-muted);
  opacity: 0.55;
  pointer-events: none;
  transition: opacity 0.2s;
}

.ai-input {
  flex: 1;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  background: var(--subcard);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 42px 12px 14px;

  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 20px;

  resize: none;
  min-height: 44px;
  max-height: 100px;
  transition: border-color 0.2s, background 0.2s;

  /* Linux/WebKit: sem scroll horizontal fantasma no textarea */
  overflow-x: hidden;
  overflow-y: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.ai-input.password-mode {
  -webkit-text-security: disc !important;
}

.ai-input:focus {
  outline: none;
  border-color: var(--primary);
  background: var(--surface-hover);
}

.ai-input::placeholder {
  color: var(--text-muted);
}

/* Scrollbar do input: só vertical (horizontal no Linux aparecia vazio) */
.ai-input {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) transparent;
}

.ai-input::-webkit-scrollbar {
  width: 4px;
  height: 0;
}

.ai-input::-webkit-scrollbar:horizontal {
  display: none;
  height: 0;
}

.ai-input::-webkit-scrollbar-track {
  background: transparent;
}

.ai-input::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 999px;
}

@media (hover: hover) {
  .ai-input::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
}
}

.ai-send {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  border-radius: 12px;
  background: var(--primary);
  border: 1px solid var(--primary-dark);

  display: flex;
  align-items: center;
  justify-content: center;

  color: var(--text-on-primary);
  cursor: pointer;
  transition: background 0.2s, transform 0.15s;
  flex-shrink: 0;
}

@media (hover: hover) {
  .ai-send:hover {
  transform: scale(1.05);
}
}

.ai-send i {
  font-size: 16px;
}

/* ================= TYPING ================= */
.ai-typing {
  display: flex;
  gap: 4px;
  padding: 8px 12px;
  background: var(--subcard);
  border: var(--card-border);
  border-radius: 12px;
  width: fit-content;
  border-bottom-left-radius: 2px;
}

.ai-typing span {
  width: 6px;
  height: 6px;
  background: var(--text-muted);
  border-radius: 50%;
  animation: typing 1.4s infinite;
}

.ai-typing span:nth-child(2) {
  animation-delay: 0.2s;
}

.ai-typing span:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes typing {
  0%,
  100% {
    transform: translateY(0);
    opacity: 0.4;
  }

  50% {
    transform: translateY(-4px);
    opacity: 1;
  }
}

/* ================= MOBILE ================= */
@media (max-width: 480px) {
  .ai-fab {
    bottom: 80px;
    right: 20px;
  }

  .ai-overlay {
    position: fixed;
    width: 100vw;
    height: 100vh;
    z-index: 9999;
    /* Alinha no rodapé para simular o comportamento de um teclado subindo */
    align-items: flex-end;
  }

  .ai-window {
    position: relative;
    width: 100%;
    max-width: 100% !important;
    height: 85vh;
    max-height: 85vh;
    border-radius: 20px 20px 0 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    transform: none !important;
    transition: none !important;
  }

  /* Container de mensagens FLEXÍVEL - cresce e encolhe */
  .ai-messages {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    padding: 15px;
  }

  /* Chips também flexíveis */
  .ai-chips-container {
    flex: 0 0 auto;
    max-height: 40vh;
    overflow-y: auto;
    padding: 5px 10px;
    margin-bottom: 5px;
  }

  /* Input SEMPRE visível no fundo */
  .ai-input-area {
    flex: 0 0 auto;
    /* Não cresce nem encolhe */
    background: var(--card);
    padding-bottom: max(16px, var(--wpc-safe-bottom));
    /* Garante que fica acima do safe area */
  }

  /* Previne zoom ao focar input no iOS */
  .ai-input {
    font-size: 16px !important;
  }

  /* Header também fixo */
  .ai-header {
    flex: 0 0 auto;
  }
}

/* Tablets e telas médias */
@media (min-width: 481px) and (max-width: 768px) {
  .ai-window {
    max-width: 480px;
    height: 650px;
  }
}

/* Telas grandes */
@media (min-width: 769px) and (max-width: 1024px) {
  .ai-window {
    max-width: 520px;
    height: 700px;
  }
}

/* Telas muito grandes */
@media (min-width: 1025px) {
  .ai-window {
    max-width: 600px;
    height: 750px;
  }
}

/* ================= OFICIAIS - INTEGRADO AO CHAT ================= */
/* Removido: Cards agora são texto simples integrado às mensagens do chat */

/* ================= INTERNAL CHAT (TICKETS) ================= */
.ai-internal-chat {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 10px 0;
  width: 100%;
}

.ai-internal-row {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  max-width: 100%;
}

.ai-internal-row.s {
  justify-content: flex-start;
}

.ai-internal-row.u {
  justify-content: flex-end;
}

.ai-internal-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--surface-hover);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: var(--text-muted);
  flex-shrink: 0;
}

.ai-internal-row.u .ai-internal-icon {
  background: var(--primary-glow-08);
  color: var(--primary);
}

.ai-internal-bubble {
  max-width: 80%;
  padding: 6px 12px;
  font-size: 13px;
  line-height: 1.3;
  border-radius: 12px;
  position: relative;
  overflow-wrap: break-word;
  word-break: break-word;
  white-space: pre-wrap;
}

.ai-internal-bubble.u {
  background: var(--primary);
  color: var(--text-on-primary);
  font-weight: 500;
  border-bottom-right-radius: 2px;
}

.ai-internal-bubble.s {
  background: var(--subcard);
  color: var(--text-primary);
  border-bottom-left-radius: 2px;
  border: var(--card-border);
}

.ai-internal-label {
  display: none;
}