:root{
  --ink:#14131a;
  --ink-2:#1c1a24;
  --parchment:#f1ead9;
  --muted:#a89e8c;
  --brass:#c9a24b;

  --tons-vinho:#C11F4C;
  --tons-azul:#1D5D82;

  --t1:#C11F4C;
  --t2:#A62955;
  --t3:#8A345E;
  --t4:#6F3E67;
  --t5:#544870;
  --t6:#385379;
  --t7:#1D5D82;

  --display:'Fraunces', serif;
  --accent-serif:'Newsreader', serif;
  --body:'Work Sans', sans-serif;
  --mono:'IBM Plex Mono', monospace;
}

*{ box-sizing:border-box; margin:0; padding:0; }

body{
  background:var(--ink);
  color:var(--parchment);
  font-family:var(--body);
  font-weight:300;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

a{ color:inherit; }
::selection{ background:var(--brass); color:var(--ink); }
:focus-visible{ outline:2px solid var(--brass); outline-offset:3px; }

.em{ font-family:var(--accent-serif); font-style:italic; font-weight:400; }

header.top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:18px 22px;
  flex:none;
}
.logo{ font-family:var(--display); font-size:17px; letter-spacing:0.06em; font-weight:600; }
.logo span{ color:var(--tons-vinho); }
.top-cta{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  text-decoration:none;
  border:1px solid var(--parchment);
  padding:7px 14px;
  border-radius:999px;
}

/* ================= CHAT SHELL ================= */

.chat-shell{
  flex:1;
  display:flex;
  flex-direction:column;
  max-width:640px;
  width:100%;
  margin:0 auto;
  padding:0 16px;
  min-height:0;
}

.chat-log{
  flex:1;
  overflow-y:auto;
  padding:12px 4px 24px;
  display:flex;
  flex-direction:column;
  gap:14px;
}

.msg{
  max-width:82%;
  padding:14px 18px;
  border-radius:16px;
  font-size:15.5px;
  animation:msg-in .28s ease both;
}
@keyframes msg-in{
  from{ opacity:0; transform:translateY(8px); }
  to{ opacity:1; transform:translateY(0); }
}

.msg-bot{
  align-self:flex-start;
  background:var(--ink-2);
  border:1px solid rgba(241,234,217,0.1);
  border-bottom-left-radius:4px;
  color:var(--parchment);
}
.msg-bot .eyebrow-inline{
  display:block;
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--brass);
  margin-bottom:6px;
}

.msg-user{
  align-self:flex-end;
  background:var(--brass);
  color:var(--ink);
  border-bottom-right-radius:4px;
  font-weight:400;
}

.typing{
  align-self:flex-start;
  display:flex;
  gap:5px;
  padding:16px 18px;
  background:var(--ink-2);
  border:1px solid rgba(241,234,217,0.1);
  border-radius:16px;
  border-bottom-left-radius:4px;
}
.typing span{
  width:6px; height:6px;
  border-radius:50%;
  background:var(--muted);
  animation:typing-bounce 1s infinite ease-in-out;
}
.typing span:nth-child(2){ animation-delay:.15s; }
.typing span:nth-child(3){ animation-delay:.3s; }
@keyframes typing-bounce{
  0%, 60%, 100%{ transform:translateY(0); opacity:.5; }
  30%{ transform:translateY(-4px); opacity:1; }
}

/* ================= INPUT AREA ================= */

.chat-input-area{
  flex:none;
  border-top:1px solid rgba(241,234,217,0.1);
  padding:16px 4px 24px;
}

#inputSlot{ display:flex; flex-direction:column; gap:12px; }

.input-row{ display:flex; gap:10px; }
.input-row input[type="text"],
.input-row input[type="date"],
.input-row input[type="tel"]{
  flex:1;
  background:var(--ink-2);
  border:1px solid rgba(241,234,217,0.2);
  border-radius:10px;
  padding:13px 16px;
  color:var(--parchment);
  font-family:var(--body);
  font-size:16px;
}
.input-row input:focus{ border-color:var(--brass); }

.send-btn{
  background:var(--brass);
  color:var(--ink);
  border:none;
  border-radius:10px;
  padding:0 20px;
  font-family:var(--mono);
  font-size:13px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  cursor:pointer;
}
.send-btn:disabled{ opacity:0.5; cursor:wait; }

.choice-row{ display:flex; flex-wrap:wrap; gap:10px; }
.choice-btn{
  background:transparent;
  border:1px solid rgba(241,234,217,0.3);
  color:var(--parchment);
  border-radius:999px;
  padding:12px 20px;
  font-family:var(--body);
  font-size:14.5px;
  cursor:pointer;
  text-align:left;
}
.choice-btn:hover{ border-color:var(--brass); }

.skip-link{
  align-self:flex-start;
  background:none;
  border:none;
  color:var(--muted);
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:0.05em;
  text-decoration:underline;
  cursor:pointer;
  padding:2px 0;
}

.instr-groups{ display:flex; flex-direction:column; gap:14px; }
.instr-group span.grp-title{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--muted);
  display:block;
  margin-bottom:8px;
}
.instr-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.instr-chip{
  background:transparent;
  border:1px solid rgba(241,234,217,0.25);
  color:var(--parchment);
  border-radius:999px;
  padding:9px 15px;
  font-size:13.5px;
  cursor:pointer;
}
.instr-chip.selected{ border-color:var(--brass); background:rgba(201,162,75,0.12); color:var(--brass); }

.song-results{ display:flex; flex-direction:column; gap:8px; }
.song-result-btn{
  display:flex;
  align-items:center;
  gap:12px;
  background:var(--ink-2);
  border:1px solid rgba(241,234,217,0.2);
  border-radius:10px;
  padding:10px 14px;
  cursor:pointer;
  text-align:left;
  color:var(--parchment);
  font-family:var(--body);
}
.song-result-btn:hover{ border-color:var(--brass); }
.song-result-btn:disabled{ opacity:0.5; cursor:wait; }
.song-result-btn img{
  width:56px;
  height:42px;
  object-fit:cover;
  border-radius:6px;
  flex:none;
}
.song-result-textos{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.song-result-textos strong{ font-size:14px; font-weight:500; }
.song-result-textos small{ color:var(--muted); font-size:12px; }

.slots-grid{ display:flex; flex-wrap:wrap; gap:8px; }
.slot-chip{
  font-family:var(--mono);
  font-size:12px;
  border:1px solid rgba(241,234,217,0.25);
  border-radius:999px;
  padding:9px 15px;
  cursor:pointer;
  background:transparent;
  color:var(--parchment);
}
.slot-chip.selected{ border-color:var(--brass); background:var(--brass); color:var(--ink); }

.whatsapp-final{
  background:var(--brass);
  color:var(--ink);
  font-family:var(--mono);
  font-size:14px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  text-decoration:none;
  padding:16px 24px;
  border-radius:999px;
  display:inline-block;
  text-align:center;
}

.field-error-inline{
  color:var(--t1);
  font-size:12.5px;
}

/* Botão sólido reutilizado em páginas fora do chat (ex.: cadastro.php) */
.btn-primary{
  background:var(--brass);
  color:var(--ink);
  font-family:var(--mono);
  font-size:13px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  text-decoration:none;
  border:none;
  padding:15px 28px;
  border-radius:999px;
  font-weight:500;
  cursor:pointer;
  display:inline-block;
}
.btn-primary:disabled{ opacity:0.6; cursor:wait; }