:root {
  --wa-teal: #008069;
  --wa-teal-dark: #075e54;
  --wa-out: #d9fdd3;
  --wa-in: #ffffff;
  --wa-bg: #efeae2;
  --ink: #111b21;
  --muted: #667781;
  --nexus: #0088d6;
  --radius: 18px;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  min-height: 100dvh;
  font-family: var(--font-sans);
  background:
    radial-gradient(1200px 500px at 50% -10%, #1a4a66 0%, transparent 60%),
    linear-gradient(180deg, #0b2838 0%, #102o2a 40%, #0a1c26 100%);
  background: #0c2430;
  color: var(--ink);
}
.page {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 12px 20px;
}
.brand-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin-bottom: 10px;
}
.brand-logo { height: 28px; width: auto; background: #fff; border-radius: 8px; padding: 6px 10px; box-sizing: content-box; }
.brand-slogan { margin: 0; color: #cfe8f7; font-size: 12px; letter-spacing: .02em; }
.phone {
  width: 100%;
  max-width: 420px;
  height: calc(100dvh - 150px);
  min-height: 520px;
  background: var(--wa-bg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 18px 50px rgba(0,0,0,.35);
  border-radius: 16px;
}
@media (max-width: 520px) {
  .page { padding: 0; }
  .brand-top { display: none; }
  .phone { max-width: none; height: 100dvh; min-height: 0; border-radius: 0; box-shadow: none; }
  .brand-foot { display: none; }
}
.wa-header {
  background: var(--wa-teal);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px 10px 4px;
  min-height: 58px;
}
.wa-header-left { display: flex; align-items: center; gap: 8px; min-width: 0; }
.wa-back { display: flex; opacity: .9; }
.avatar { width: 40px; height: 40px; border-radius: 50%; background: #fff; }
.who { min-width: 0; }
.who strong { display: block; font-size: 16px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.status { font-size: 12px; opacity: .9; }
.wa-header-actions { opacity: .9; padding: 6px; }
.wa-thread {
  flex: 1;
  overflow-y: auto;
  padding: 12px 10px 20px;
  background-color: #efeae2;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180' opacity='0.06'><g fill='none' stroke='%23000' stroke-width='1'><path d='M20 30c10 8 8 20 0 24'/><path d='M140 90c12-6 22 4 16 16'/><circle cx='80' cy='50' r='8'/><path d='M40 130c20-10 30 10 12 18'/></g></svg>");
}
.day-sep {
  text-align: center;
  margin: 8px 0 14px;
}
.day-sep span {
  background: #fff;
  color: var(--muted);
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 8px;
  box-shadow: 0 1px 1px rgba(0,0,0,.06);
}
.row { display: flex; margin: 0 0 6px; }
.row.out { justify-content: flex-end; }
.bubble {
  max-width: 82%;
  padding: 6px 8px 4px 9px;
  border-radius: 8px;
  box-shadow: 0 1px 0.5px rgba(0,0,0,.13);
  position: relative;
  white-space: pre-wrap;
  word-wrap: break-word;
  line-height: 1.35;
  font-size: 14.5px;
}
.row.in .bubble { background: var(--wa-in); border-top-left-radius: 2px; }
.row.out .bubble { background: var(--wa-out); border-top-right-radius: 2px; }
.bubble .meta {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 3px;
  margin: 2px 0 0 12px;
  color: #667781;
  font-size: 11px;
  float: right;
  position: relative;
  top: 4px;
}
.checks { color: #53bdeb; font-size: 13px; line-height: 1; }
.typing {
  display: inline-flex;
  gap: 4px;
  padding: 10px 14px !important;
}
.typing i {
  width: 7px; height: 7px; border-radius: 50%; background: #999;
  animation: blink 1.2s infinite;
}
.typing i:nth-child(2) { animation-delay: .2s; }
.typing i:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%, 80%, 100% { opacity: .3 } 40% { opacity: 1 } }
.chips {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  overflow-x: auto;
  padding: 8px 10px;
  background: #f0ece5;
  border-top: 1px solid rgba(0,0,0,.04);
}
.chips button {
  flex: 0 0 auto;
  border: 1px solid #25d366;
  background: #fff;
  color: #075e54;
  border-radius: 16px;
  padding: 6px 12px;
  font-size: 13px;
  cursor: pointer;
}
.chips button:hover { background: #e7fcec; }
.wa-composer {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 8px;
  background: #f0f2f5;
}
.wa-composer input {
  flex: 1;
  border: 0;
  border-radius: 22px;
  padding: 11px 16px;
  font-size: 15px;
  outline: none;
  background: #fff;
  color: var(--ink);
}
.send {
  width: 44px; height: 44px;
  border: 0; border-radius: 50%;
  background: var(--wa-teal);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.send:disabled { opacity: .5; cursor: default; }
.brand-foot {
  margin-top: 12px;
  text-align: center;
  color: #b9d4e4;
  font-size: 12px;
}
.brand-foot p { margin: 3px 0; }
.brand-foot a, .brand-foot button {
  color: #8ed0ff;
  background: none;
  border: 0;
  cursor: pointer;
  font-size: 12px;
  text-decoration: underline;
  padding: 0;
}

/* Nexus Agenda: identidade visual propria, preservando as bolhas e o fluxo. */
:root{--wa-teal:#0c3b69;--wa-teal-dark:#082a4e;--wa-out:#dceeff;--wa-in:#fff;--wa-bg:#f4f8fd;--nexus:#0782d5}
body{background:radial-gradient(circle at 50% 0,#1b4d7c,#081b33 72%)}
.page{padding:18px 12px 15px}
.brand-logo{height:35px;background:#fff;padding:7px 14px;border-radius:10px}
.phone{height:calc(100dvh - 130px);min-height:530px;background:#f4f8fd;border-radius:22px}
.wa-header{background:linear-gradient(110deg,#082a4e,#12649e);padding:15px;min-height:72px}
.wa-header-left{gap:12px}
.avatar{width:48px;height:42px;object-fit:contain;background:white;border-radius:10px;padding:5px}
.who strong{font-size:17px}.status{font-size:11px}
.new-chat{border:1px solid #6c9bc0;background:#ffffff18;color:white;border-radius:9px;padding:7px 12px;font-size:21px;cursor:pointer}
.clinic-strip{display:flex;align-items:center;justify-content:space-between;padding:11px 18px;background:#e9f3fc;color:#174d78;font-size:12px}
.clinic-strip small{color:#64809b}
.quick-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;padding:12px;background:#fff;border-bottom:1px solid #e1ebf4}
.quick-actions button{border:1px solid #cde4f6;background:#eff8ff;color:#0a5a98;border-radius:10px;padding:10px 5px;font-size:11px;font-weight:650;cursor:pointer}
.quick-actions button:hover{background:#d7eeff}
.wa-thread{background:#f4f8fd;padding:15px}
.row.in .bubble{background:white;border:1px solid #e5edf6;border-radius:14px 14px 14px 3px}
.row.out .bubble{background:#dceeff;border:1px solid #c1e0f9;border-radius:14px 14px 3px 14px}
.chips{background:#f5faff;border-top:1px solid #e2edf8}
.chips button{border:1px solid #b7d7ee;color:#1266a0;border-radius:10px}
.chips button:hover{background:#e0f1ff}
.availability{padding:10px 14px;background:#fff;border-top:1px solid #e5edf5;max-height:210px;overflow-y:auto}
.availability[hidden]{display:none}
.availability h3{font-size:12px;color:#365b7d;margin:6px 0 8px}
.date-chips{display:flex;gap:7px;overflow-x:auto;padding-bottom:6px}
.date-chips button{flex:0 0 auto;min-width:62px;border:1px solid #d3e3f2;border-radius:10px;background:white;padding:7px;color:#234f73;cursor:pointer}
.date-chips button.active{background:#087cce;color:white;border-color:#087cce}
.date-chips small,.date-chips strong{display:block;text-transform:capitalize}
.date-chips small{font-size:10px}.date-chips strong{font-size:13px}
.time-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;font-size:12px;color:#647f96}
.time-grid button{border:1px solid #c8e2f6;background:#f0f8ff;color:#0c629c;border-radius:8px;padding:7px;cursor:pointer}
.time-grid button:hover{background:#087cce;color:white}
.wa-composer{background:#eaf2f9}.send{background:#087cce}
@media(max-width:520px){.page{padding:0}.phone{height:100dvh;min-height:0;border-radius:0}.brand-top{display:none}.quick-actions{gap:5px;padding:9px}.quick-actions button{font-size:10px;padding:9px 3px}.availability{max-height:190px}.clinic-strip{padding:9px 13px}.wa-header{min-height:67px}}

/* Mobile fiel: cabeçalho claro, ações na mensagem e grade 3x2 */
@media(max-width:520px){.wa-header{background:#fff;color:#163c5e;min-height:82px;padding:10px 13px;border-bottom:1px solid #dce8f2}.avatar{width:116px;height:43px;object-fit:contain;background:transparent;border-radius:0;padding:0}.who strong{font-size:16px;color:#102c47}.who .status{font-size:10px;color:#65829b}.new-chat{color:#176da7;background:#edf6ff;border-color:#d4e9f7}.clinic-strip{background:#f3f8fc;padding:7px 13px}.wa-thread{background:#f5f8fc;padding:14px}.bubble{max-width:88%}.row.out .bubble{background:#d9f7dc;border:1px solid #bce7c3}.checks{color:#28955a;font-weight:700}.quick-actions{display:grid;grid-template-columns:1fr;gap:7px;padding:12px 0 0;background:transparent;border:0}.quick-actions button{font-size:12px;font-weight:650;text-align:left;border:1px solid #c9e1f5;border-radius:9px;background:#f2f9ff;padding:11px 13px;color:#11679f}.quick-actions button span{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:6px;background:#dceeff;margin-right:7px}.availability{max-height:265px;padding:12px 14px;background:#fff}.availability h3{font-size:12px;margin:7px 0}.date-chips{gap:6px}.date-chips button{min-width:72px;padding:9px 6px}.date-chips button strong{font-size:12px}.time-grid{grid-template-columns:repeat(3,1fr);gap:7px}.time-grid button{font-size:13px;padding:10px}.wa-composer{padding:10px;background:#f1f6fb}.send{background:#117fc5}}

.chat-logo-back{display:flex;align-items:center;justify-content:center;padding:5px 7px;background:#061e43;border-radius:8px;flex:none}.chat-logo-back .avatar{background:transparent!important;width:118px;height:43px;padding:0;object-fit:contain}.quick-actions .nx-icon{width:18px;height:18px;vertical-align:middle}

/* Datas e horários: alvos táteis e foco visível. */
.date-chips button,.time-grid button{min-height:44px}
.date-chips button:focus-visible,.time-grid button:focus-visible{outline:3px solid #f0a300;outline-offset:2px}
.date-chips{overscroll-behavior-x:contain;scroll-snap-type:x proximity}
.date-chips button{scroll-snap-align:start}
.time-grid[aria-busy="true"]{opacity:.65}