/* App-level CSS (complementa Tailwind via CDN) */
:root {
  --brand:        #0f172a;
  --brand-accent: #1d4ed8;
  --soft-bg:      #f8fafc;
}

html, body { background: var(--soft-bg); }
body { font-family: 'Inter', system-ui, -apple-system, Segoe UI, Arial, sans-serif; color: #0f172a; }

/* Counter textarea */
.char-counter { font-variant-numeric: tabular-nums; }
.char-counter.warn { color: #b45309; }
.char-counter.over { color: #b91c1c; font-weight: 600; }

/* Stepper */
.stepper { display: flex; gap: 0; flex-wrap: wrap; }
.stepper .step {
  flex: 1 1 90px; min-width: 0;
  text-align: center; padding: 10px 6px; font-size: 12px; border-bottom: 3px solid #e5e7eb; color: #94a3b8;
}
.stepper .step.done    { border-color: #16a34a; color: #16a34a; }
.stepper .step.current { border-color: var(--brand-accent); color: var(--brand-accent); font-weight: 600; }
.stepper a.step { text-decoration: none; cursor: pointer; transition: background-color .12s, transform .08s; }
.stepper a.step:hover { background: #f1f5f9; }
.stepper a.step:active { transform: translateY(1px); }
.stepper .step[aria-disabled="true"] { cursor: not-allowed; }
.stepper .step .label-long  { display: inline; }
.stepper .step .label-short { display: none; }
@media (max-width: 640px) {
  .stepper .step .label-long  { display: none; }
  .stepper .step .label-short { display: inline; }
}

/* ------ Tickets de suporte (chat) ------ */
.chat { display: flex; flex-direction: column; gap: 10px; }
.chat .row { display: flex; }
.chat .row.right { justify-content: flex-end; }
.chat .row.left  { justify-content: flex-start; }

.chat .bubble {
  /* Largura FIXA 5/7 do container (≈71.43%) — igual ao form de resposta */
  width: 71.4286%;
  flex: 0 0 71.4286%;
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.45;
  position: relative;
  box-shadow: 0 1px 2px rgba(15,23,42,0.04);
  box-sizing: border-box;
}
.chat .bubble.customer {
  background: #dbeafe;          /* azul claro */
  color: #0c2a4d;
  border-bottom-right-radius: 4px;  /* "rabinho" lado direito */
}
.chat .bubble.team {
  background: #f1f5f9;          /* cinza claro */
  color: #0f172a;
  border-bottom-left-radius: 4px;   /* "rabinho" lado esquerdo */
}
.chat .bubble.system {
  background: #fef3c7;          /* amarelo claro */
  color: #78350f;
  font-style: italic;
  text-align: center;
}
.chat .bubble .meta {
  font-size: 11px;
  color: #475569;
  margin-bottom: 4px;
  display: flex; justify-content: space-between; gap: 8px;
}
.chat .bubble.customer .meta { color: #1e40af; }

/* Bolha "aguardando equipe" — mesma largura dos balões */
.chat .bubble.waiting {
  background: #fff7ed;
  border: 1px dashed #fdba74;
  color: #9a3412;
  text-align: center;
  animation: waiting-pulse 1.8s ease-in-out infinite;
}
@keyframes waiting-pulse {
  0%,100% { opacity: 1; }
  50%     { opacity: 0.65; }
}

/* Form de resposta — mesma largura FIXA dos balões (5/7), alinhado à direita */
.chat-reply {
  display: flex; justify-content: flex-end;
}
.chat-reply form {
  width: 71.4286%;
  flex: 0 0 71.4286%;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 10px;
  box-sizing: border-box;
}

/* Avaliação — estrelas */
.star-rating { display: inline-flex; gap: 4px; }
.star-rating input { display: none; }
.star-rating label {
  font-size: 28px;
  cursor: pointer;
  color: #e5e7eb;
  transition: color .12s;
  user-select: none;
}
.star-rating label:hover,
.star-rating label:hover ~ label,
.star-rating input:checked ~ label {
  color: #f59e0b;
}
/* "~ label" pega as estrelas à DIREITA do input checked, mas como invertemos
   a ordem dos inputs em DOM (5,4,3,2,1) com flex-direction: row-reverse, isso
   acende as da esquerda visualmente. */
.star-rating { flex-direction: row-reverse; }

/* ------ Markdown render (briefing.md no modal) ------ */
.md-render { font-size: 14px; line-height: 1.6; color: #1f2937; }
.md-render .md-h { margin: 18px 0 8px; line-height: 1.3; color: #0f172a; }
.md-render .md-h1 { font-size: 1.6rem; font-weight: 800; border-bottom: 1px solid #e5e7eb; padding-bottom: 6px; }
.md-render .md-h2 { font-size: 1.3rem; font-weight: 700; margin-top: 24px; }
.md-render .md-h3 { font-size: 1.1rem; font-weight: 600; color: #1e3a8a; }
.md-render .md-h4 { font-size: 1.0rem; font-weight: 600; color: #475569; }
.md-render .md-p  { margin: 8px 0; }
.md-render .md-ul, .md-render .md-ol { margin: 8px 0 8px 22px; }
.md-render .md-ul li { list-style: disc; margin: 4px 0; }
.md-render .md-ol li { list-style: decimal; margin: 4px 0; }
.md-render .md-quote {
  border-left: 3px solid #93c5fd;
  background: #eff6ff;
  padding: 8px 14px;
  margin: 12px 0;
  color: #1e3a8a;
  font-style: italic;
}
.md-render .md-hr { border: 0; border-top: 1px solid #e5e7eb; margin: 20px 0; }
.md-render strong { font-weight: 700; color: #0f172a; }
.md-render em { font-style: italic; }
.md-render a { color: #1d4ed8; text-decoration: underline; }
.md-render .md-code-inline {
  background: #f1f5f9; padding: 1px 6px; border-radius: 4px;
  font-family: ui-monospace, Consolas, monospace; font-size: 0.92em;
}
.md-render .md-code {
  background: #0f172a; color: #e2e8f0; padding: 12px; border-radius: 8px;
  overflow-x: auto; font-size: 12px; line-height: 1.5; margin: 12px 0;
}
.md-render .md-table-wrap { overflow-x: auto; margin: 12px 0; }
.md-render .md-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.md-render .md-table th, .md-render .md-table td {
  border: 1px solid #e5e7eb; padding: 6px 10px; text-align: left;
}
.md-render .md-table thead { background: #f8fafc; font-weight: 600; }

/* Modal grande para markdown preview */
.modal-card.modal-card-lg { max-width: 920px; }
.md-modal-body {
  max-height: calc(100vh - 200px);
  overflow-y: auto;
  padding-right: 8px;
}

/* Banner de "modo visualização" (etapa anterior, somente leitura) */
.readonly-banner {
  background: #fff7ed; border: 1px solid #fed7aa;
  color: #9a3412; border-radius: 12px;
  padding: 12px 16px; margin-bottom: 16px;
  display: flex; align-items: center; gap: 12px;
  font-size: 14px;
}
.readonly-banner strong { font-weight: 600; }
.readonly-banner a { color: #9a3412; text-decoration: underline; font-weight: 600; }

/* Cards */
.card { background: #fff; border: 1px solid #e5e7eb; border-radius: 14px; }

/* Loading spinner */
@keyframes spin     { to { transform: rotate(360deg)  } }
@keyframes spin-rev { to { transform: rotate(-360deg) } }
.spinner { width: 22px; height: 22px; border: 3px solid #e5e7eb; border-top-color: var(--brand-accent); border-radius: 50%; animation: spin 0.7s linear infinite; }

/* Splash de "processando" com engrenagens */
.splash-gears {
  position: relative;
  width: 140px;
  height: 110px;
  margin: 0 auto;
}
.splash-gears svg.gear {
  position: absolute;
  transform-origin: 50% 50%;
}
.splash-gears svg.gear-big   { width: 90px; height: 90px; top: 0;   left: 0;  animation: spin     3.2s linear infinite; color: #2563eb; }
.splash-gears svg.gear-small { width: 60px; height: 60px; top: 50px; left: 80px; animation: spin-rev 2.2s linear infinite; color: #60a5fa; }

.splash-dots span {
  display: inline-block; width: 6px; height: 6px; margin: 0 2px;
  background: #94a3b8; border-radius: 50%;
  animation: splash-bounce 1.2s infinite ease-in-out both;
}
.splash-dots span:nth-child(1) { animation-delay: -0.32s; }
.splash-dots span:nth-child(2) { animation-delay: -0.16s; }
@keyframes splash-bounce {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.5; }
  40%           { transform: scale(1);   opacity: 1;   }
}

/* Pulse for building screen */
@keyframes softpulse {
  0%, 100% { opacity: 0.95; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.04); }
}
.pulse { animation: softpulse 2.4s ease-in-out infinite; }

/* Overlay bloqueante de "carregando" durante navegação entre etapas */
#busy-overlay {
  position: fixed; inset: 0;
  background: rgba(15, 23, 42, 0.72);
  backdrop-filter: blur(3px);
  display: none;
  align-items: center; justify-content: center;
  z-index: 2000;
  padding: 16px;
}
#busy-overlay.show { display: flex; animation: modal-fade 0.15s ease-out; }
#busy-overlay .busy-card {
  background: #fff; border-radius: 16px;
  padding: 32px 36px;
  max-width: 420px; width: 100%;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,0.35);
}
#busy-overlay .busy-text {
  margin-top: 16px;
  font-size: 16px; font-weight: 600; color: #0f172a;
}
#busy-overlay .busy-sub {
  margin-top: 6px;
  font-size: 13px; color: #64748b;
}

/* Modal de confirmação */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center;
  z-index: 1000;
  padding: 16px;
  animation: modal-fade 0.18s ease-out;
}
.modal-overlay[hidden] { display: none; }
.modal-card {
  background: #fff; border-radius: 16px;
  max-width: 520px; width: 100%;
  padding: 28px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.35);
  animation: modal-pop 0.22s ease-out;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
}
@keyframes modal-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes modal-pop  { from { opacity: 0; transform: translateY(8px) scale(0.97); } to { opacity: 1; transform: none; } }
body.modal-open { overflow: hidden; }

/* Edit-mode highlight (etapa 10) */
[data-editable="true"] { transition: outline 0.15s ease; }
[data-editable="true"]:hover { outline: 2px dashed #2563eb; outline-offset: 3px; cursor: text; }
[data-editing="true"]        { outline: 2px solid #2563eb !important; outline-offset: 3px; }