/* Nuvem Bot — Suporte (tickets + chat).
   Segue os tokens de style.css (fundo #03070d, azul, verde/vermelho de status,
   cantos 14-16px, Manrope, rótulos em caixa alta). Classes prefixadas com sp- pra
   não colidir com o resto do app. */

#suporte-app { position: relative; }
.sp-corpo { display: flex; flex-direction: column; gap: 16px; }

/* ══ botão "abrir ticket" + formulário (só cliente) ══════════════════════ */
.sp-abrir { display: flex; flex-direction: column; gap: 12px; }
.sp-btn-abrir {
  width: 100%; padding: 15px 18px; border-radius: 14px; cursor: pointer;
  border: 1px solid rgba(79, 178, 255, 0.55);
  background: linear-gradient(180deg, rgba(13, 44, 78, 0.9), rgba(7, 22, 40, 0.9));
  color: #eaf4ff; font: inherit; font-size: 13px; font-weight: 800; letter-spacing: 0.16em;
  transition: transform .16s, border-color .16s;
}
.sp-btn-abrir:hover { transform: translateY(-1px); border-color: rgba(111, 192, 255, 0.9); }

.sp-form-abrir {
  display: flex; flex-direction: column; gap: 8px;
  padding: 16px; border-radius: 16px;
  border: 1px solid rgba(58, 164, 255, 0.22);
  background: rgba(8, 16, 28, 0.55);
}
.sp-rotulo {
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--txt-suave, #9fb4cf);
  margin-top: 6px;
}
.sp-rotulo:first-child { margin-top: 0; }
.sp-input, .sp-textarea {
  width: 100%; padding: 12px 14px; border-radius: 12px;
  border: 1px solid rgba(58, 164, 255, 0.22);
  background: rgba(6, 12, 22, 0.75);
  color: var(--txt, #eaf2ff);
  font: inherit; font-size: 13px;
  resize: vertical;
  transition: border-color .18s, box-shadow .18s;
}
.sp-input::placeholder, .sp-textarea::placeholder { color: #526a89; }
.sp-input:focus, .sp-textarea:focus {
  outline: none;
  border-color: rgba(79, 178, 255, 0.65);
  box-shadow: 0 0 0 3px rgba(43, 149, 255, 0.14);
}
.sp-form-abrir-acoes { display: flex; justify-content: flex-end; gap: 10px; margin-top: 6px; }
.sp-btn-cancelar {
  padding: 11px 16px; border-radius: 12px; cursor: pointer;
  border: 1px solid rgba(58, 164, 255, 0.22); background: transparent;
  color: var(--txt-suave, #9fb4cf); font: inherit; font-size: 11px; font-weight: 800; letter-spacing: 0.12em;
}
.sp-btn-cancelar:hover { color: var(--txt, #eaf2ff); border-color: rgba(111, 192, 255, 0.5); }
.sp-btn-enviar {
  padding: 11px 18px; border-radius: 12px; cursor: pointer;
  border: 1px solid rgba(79, 178, 255, 0.55);
  background: rgba(13, 44, 78, 0.75); color: #dcecff;
  font: inherit; font-size: 11px; font-weight: 800; letter-spacing: 0.14em;
  transition: background .16s;
}
.sp-btn-enviar:hover { background: rgba(20, 66, 116, 0.85); }
.sp-btn-enviar:disabled, .sp-textarea:disabled { opacity: .6; cursor: default; }
.sp-form-abrir-erro {
  padding: 11px 14px; border-radius: 12px; margin-top: 4px;
  background: rgba(255, 107, 99, 0.10); border: 1px solid rgba(255, 107, 99, 0.42);
  color: #ffada7; font-size: 12px; line-height: 1.5;
}

/* ══ cabeçalho da lista ═══════════════════════════════════════════════════ */
.sp-lista-cab { margin-top: 2px; }
.sp-lista-tit {
  font-size: 12px; font-weight: 800; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--azul-claro, #6fc0ff);
}

/* ══ lista de tickets ═════════════════════════════════════════════════════ */
.sp-lista { display: flex; flex-direction: column; gap: 10px; }
.sp-row {
  display: flex; flex-direction: column; gap: 6px;
  width: 100%; padding: 14px 16px; text-align: left; cursor: pointer;
  border-radius: 14px;
  border: 1px solid rgba(58, 164, 255, 0.22);
  background: rgba(8, 16, 28, 0.55);
  color: var(--txt, #eaf2ff); font: inherit;
  transition: border-color .16s, background .16s;
}
.sp-row:hover { border-color: rgba(111, 192, 255, 0.5); background: rgba(10, 20, 34, 0.75); }
.sp-row-cliente {
  font-size: 12.5px; font-weight: 800; color: var(--txt, #eaf2ff);
}
.sp-row-email {
  font-weight: 600; color: var(--txt-fraco, #61748f); font-size: 11.5px;
}
.sp-row-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sp-row-assunto { font-size: 14px; font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-badge {
  flex-shrink: 0; min-width: 20px; height: 20px; padding: 0 6px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 100px; background: var(--erro, #ff6b63); color: #fff;
  font-size: 11px; font-weight: 800;
}
.sp-row-baixo { display: flex; align-items: center; gap: 10px; }
.sp-row-data { font-size: 11px; color: var(--txt-fraco, #61748f); }
.sp-row-ultima {
  font-size: 12.5px; color: var(--txt-suave, #9fb4cf);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.sp-status {
  display: inline-flex; align-items: center;
  padding: 3px 9px; border-radius: 100px;
  font-size: 10px; font-weight: 800; letter-spacing: 0.1em;
}
.sp-status-aberto { background: rgba(46, 224, 106, 0.14); color: #2ee06a; border: 1px solid rgba(46, 224, 106, 0.35); }
.sp-status-fechado { background: rgba(97, 116, 143, 0.16); color: var(--txt-fraco, #61748f); border: 1px solid rgba(97, 116, 143, 0.32); }

.sp-vazio {
  padding: 28px 16px; text-align: center;
  font-size: 13px; line-height: 1.6; color: var(--txt-fraco, #61748f);
  border: 1px dashed rgba(58, 164, 255, 0.22); border-radius: 14px;
}
.sp-erro {
  padding: 14px; border-radius: 12px;
  background: rgba(255, 107, 99, 0.10); border: 1px solid rgba(255, 107, 99, 0.35);
  color: #ffada7; font-size: 12.5px; text-align: center;
}
.sp-retry {
  margin-top: 12px; padding: 11px 16px; border-radius: 12px; cursor: pointer;
  border: 1px solid rgba(79, 178, 255, 0.5); background: rgba(13, 44, 78, 0.6);
  color: #dcecff; font: inherit; font-size: 11px; font-weight: 800; letter-spacing: 0.14em;
}
.sp-retry:hover { background: rgba(20, 66, 116, 0.75); }

/* ══ esqueleto (loading) da lista ═════════════════════════════════════════ */
@keyframes sp-pulso {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 0.75; }
}
.sp-skel-linha, .sp-skel-bolha {
  background: rgba(58, 164, 255, 0.16);
  border-radius: 6px;
  animation: sp-pulso 1.3s ease-in-out infinite;
}
.sp-skel-row { gap: 10px; }
.sp-skel-linha-tit { width: 55%; height: 14px; }
.sp-skel-linha-sub { width: 35%; height: 10px; }

/* ══ tela de conversa ═════════════════════════════════════════════════════ */
.sp-tela-conversa { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.sp-conv-topo {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 4px; border-bottom: 1px solid rgba(58, 164, 255, 0.18);
  margin-bottom: 10px;
}
.sp-voltar {
  flex-shrink: 0; padding: 9px 12px; border-radius: 10px; cursor: pointer;
  border: 1px solid rgba(58, 164, 255, 0.22); background: transparent;
  color: var(--txt-suave, #9fb4cf); font: inherit; font-size: 11px; font-weight: 800; letter-spacing: 0.1em;
}
.sp-voltar:hover { color: var(--txt, #eaf2ff); border-color: rgba(111, 192, 255, 0.5); }
.sp-conv-info { flex: 1; min-width: 0; }
.sp-conv-assunto {
  font-size: 14.5px; font-weight: 800; color: var(--txt, #eaf2ff);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sp-conv-sub {
  margin-top: 3px; font-size: 11.5px; color: var(--txt-fraco, #61748f);
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.sp-fechar-reabrir {
  flex-shrink: 0; padding: 9px 14px; border-radius: 10px; cursor: pointer;
  font: inherit; font-size: 11px; font-weight: 800; letter-spacing: 0.1em;
}
.sp-fechar {
  border: 1px solid rgba(255, 107, 99, 0.4); background: rgba(255, 107, 99, 0.10); color: #ffada7;
}
.sp-fechar:hover { background: rgba(255, 107, 99, 0.18); }
.sp-reabrir {
  border: 1px solid rgba(46, 224, 106, 0.4); background: rgba(46, 224, 106, 0.10); color: #7cf0a0;
}
.sp-reabrir:hover { background: rgba(46, 224, 106, 0.18); }
.sp-fechar-reabrir:disabled { opacity: .5; cursor: default; }

/* ══ mensagens (chat) ═════════════════════════════════════════════════════ */
.sp-msgs {
  flex: 1; min-height: 260px; max-height: 52vh;
  display: flex; flex-direction: column; gap: 8px;
  padding: 12px 6px; overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 14px;
  border: 1px solid rgba(58, 164, 255, 0.16);
  background: rgba(6, 12, 22, 0.4);
}
.sp-msgs::-webkit-scrollbar { width: 6px; }
.sp-msgs::-webkit-scrollbar-thumb { background: rgba(58, 164, 255, 0.3); border-radius: 6px; }

.sp-msgs-dia {
  align-self: center;
  margin: 6px 0 2px;
  padding: 4px 12px; border-radius: 100px;
  background: rgba(58, 164, 255, 0.12);
  color: var(--txt-fraco, #61748f);
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em;
}

.sp-bolha {
  max-width: 78%;
  padding: 10px 13px 8px;
  border-radius: 14px;
  line-height: 1.45;
}
.sp-bolha-txt { font-size: 13.5px; color: var(--txt, #eaf2ff); word-wrap: break-word; white-space: normal; }
.sp-bolha-hora {
  margin-top: 4px; font-size: 10px; text-align: right;
  color: rgba(234, 242, 255, 0.55);
}
.sp-bolha-suporte {
  align-self: flex-start;
  background: linear-gradient(160deg, rgba(13, 60, 110, 0.85), rgba(9, 36, 68, 0.85));
  border: 1px solid rgba(79, 178, 255, 0.35);
  border-bottom-left-radius: 4px;
}
.sp-bolha-cliente {
  align-self: flex-end;
  background: linear-gradient(160deg, rgba(52, 66, 88, 0.75), rgba(30, 40, 56, 0.8));
  border: 1px solid rgba(97, 116, 143, 0.32);
  border-bottom-right-radius: 4px;
}

.sp-skel-bolha { padding: 14px; width: 60%; }
.sp-skel-bolha.sp-bolha-cliente { align-self: flex-end; }
.sp-skel-linha-msg { width: 100%; height: 12px; }

/* ══ aviso de fechado ═════════════════════════════════════════════════════ */
.sp-aviso-fechado {
  margin-top: 10px; padding: 11px 14px; border-radius: 12px;
  background: rgba(97, 116, 143, 0.12); border: 1px solid rgba(97, 116, 143, 0.3);
  color: var(--txt-suave, #9fb4cf); font-size: 12px; text-align: center;
}

/* ══ formulário de envio ══════════════════════════════════════════════════ */
.sp-form-msg { display: flex; align-items: flex-end; gap: 10px; margin-top: 12px; }
.sp-form-msg .sp-textarea { flex: 1; max-height: 140px; min-height: 44px; }
.sp-form-msg .sp-btn-enviar { flex-shrink: 0; height: 44px; }

/* ══ responsivo ══════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  .sp-bolha { max-width: 88%; }
  .sp-conv-topo { flex-wrap: wrap; }
  .sp-conv-info { order: 3; width: 100%; }
  .sp-msgs { max-height: 46vh; }
}
@media (min-width: 1000px) {
  .sp-corpo { max-width: 900px; margin: 0 auto; }
}