:root {
  --brand: #008069;
  --wallpaper: #efeae2;
  --ink: #111716;
  --muted: #687571;
  --pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170' viewBox='0 0 170 170'%3E%3Cg fill='none' stroke='%23beb8af' stroke-width='1.25' opacity='.3'%3E%3Cpath d='M11 20c8-9 23-7 26 4s-7 18-14 11-1-18 10-16M101 14l10 5-4 12-13-3zM65 74c9-11 25-7 27 7 1 14-18 21-27 9-4-5-3-11 0-16zM125 78l22-11 6 12-20 13zM15 111l16-9 11 15-17 10zM75 134c4-8 15-10 21-4s3 16-5 19-19-7-16-15zM135 133c8 0 15 7 15 15M48 11c0 8-6 13-13 13M5 65c10 0 18 8 18 18M110 49c6 2 10 8 9 14M47 50l9-8 8 9-8 8zM2 154l12-12 10 11M112 107l7-7 12 10-8 9z'/%3E%3Ccircle cx='82' cy='35' r='4'/%3E%3Ccircle cx='154' cy='35' r='7'/%3E%3Cpath d='M35 154h18M142 111h14M5 48h13'/%3E%3C/g%3E%3C/svg%3E");
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  background: #d9dedb;
  color: var(--ink);
  font-family: Arial, Helvetica, sans-serif;
  margin: 0;
  overflow: hidden;
}
button, input { font: inherit; }
button { color: inherit; }

#app {
  height: 100%;
  margin: 0 auto;
  max-width: 480px;
  position: relative;
}

.chat-app {
  background: var(--wallpaper);
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  position: relative;
}

.chat-header {
  align-items: center;
  background: var(--brand);
  color: #fff;
  display: grid;
  flex: 0 0 62px;
  gap: 8px;
  grid-template-columns: 24px 42px minmax(0, 1fr) 24px 23px 22px;
  padding: max(7px, env(safe-area-inset-top)) 12px 7px;
  z-index: 4;
}

.icon-button {
  align-items: center;
  background: transparent;
  border: 0;
  display: flex;
  justify-content: center;
  padding: 0;
}

.icon-button svg { display: block; }

.profile-avatar {
  align-items: center;
  background: linear-gradient(145deg, #8dd4c3, #348b77);
  border-radius: 50%;
  color: #fff;
  display: flex;
  font-size: 16px;
  font-weight: 800;
  height: 42px;
  justify-content: center;
  object-fit: cover;
  width: 42px;
}

.profile-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.profile-copy strong { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-copy span { font-size: 11px; }

.messages {
  background-color: var(--wallpaper);
  background-image: var(--pattern);
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 8px;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 25px 14px 28px;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.messages::-webkit-scrollbar { display: none; }

.day-pill {
  align-self: center;
  background: rgba(255,255,255,.92);
  border-radius: 9px;
  box-shadow: 0 1px 2px rgba(0,0,0,.09);
  color: #5d6a66;
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 10px;
  padding: 8px 13px;
}

.bubble,
.once-bubble,
.offer-bubble {
  align-self: flex-start;
  animation: bubble-in .2s ease both;
  background: #fff;
  border: 0;
  border-radius: 0 11px 11px 11px;
  box-shadow: 0 1px 2px rgba(0,0,0,.14);
  max-width: 86%;
  position: relative;
  text-align: left;
}

.bubble::before,
.once-bubble::before,
.offer-bubble::before {
  border-bottom: 10px solid transparent;
  border-right: 10px solid #fff;
  content: "";
  left: -8px;
  position: absolute;
  top: 0;
}

.bubble { font-size: 15px; line-height: 1.38; min-width: 106px; padding: 13px 15px 20px; }
.bubble-copy { white-space: pre-wrap; }
.bubble-time { bottom: 6px; color: #687571; font-size: 9px; line-height: 1; position: absolute; right: 8px; }

.once-bubble {
  align-items: center;
  display: flex;
  font-size: 15px;
  font-weight: 700;
  gap: 10px;
  min-height: 48px;
  padding: 11px 42px 14px 15px;
  width: 160px;
}
.once-bubble:disabled { color: #7f8a87; }
.once-badge {
  align-items: center;
  border: 2px dashed #00a884;
  border-radius: 50%;
  color: #00a884;
  display: flex;
  font-size: 10px;
  height: 21px;
  justify-content: center;
  width: 21px;
}
.once-bubble:disabled .once-badge { border-color: #9ba5a1; color: #8c9793; }

.media-bubble { max-width: 91%; overflow: hidden; padding: 4px 4px 21px; }
.media-bubble img,
.media-bubble video { border-radius: 8px; display: block; max-height: 440px; object-fit: cover; width: 100%; }
.media-bubble audio { display: block; height: 48px; max-width: 320px; width: 100%; }
.media-caption { display: block; font-size: 14px; line-height: 1.35; padding: 9px 9px 2px; }

.offer-bubble { padding: 15px 15px 22px; width: min(315px, 90%); }
.offer-heading { align-items: center; display: flex; gap: 10px; }
.offer-icon { align-items: center; background: #e7f6f1; border-radius: 50%; color: #07876f; display: flex; height: 36px; justify-content: center; width: 36px; }
.offer-heading strong { display: block; font-size: 15px; }
.offer-bubble p { color: #64716d; font-size: 12px; line-height: 1.45; margin: 10px 0 12px; }
.offer-price { font-size: 22px; font-weight: 800; letter-spacing: -.03em; margin-bottom: 11px; }
.offer-action { background: #0a8f76; border: 0; border-radius: 8px; color: #fff; font-size: 13px; font-weight: 800; min-height: 42px; width: 100%; }
.offer-action:disabled { opacity: .62; }

.pix-inline-state { min-height: 82px; padding: 14px 14px 22px; width: min(330px, 92%); }
.pix-waiting { align-items: center; display: flex; font-size: 13px; gap: 7px; }
.pix-waiting strong { font-size: 13px; }
.pix-waiting.paid { color: #138164; }
.pix-expiry { color: #e59b00; font-size: 11px; font-weight: 700; margin: 3px 0 10px 23px; }
.inline-pix-code {
  background: #f3f6f7;
  border: 1px solid #dce4e6;
  border-radius: 9px;
  color: #5d6c7a;
  display: -webkit-box;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10px;
  line-height: 1.48;
  max-height: 61px;
  overflow: hidden;
  overflow-wrap: anywhere;
  padding: 11px;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.pix-copy-button {
  align-items: center;
  background: #00aa8b;
  border: 0;
  border-radius: 9px;
  color: #fff;
  display: flex;
  font-size: 13px;
  font-weight: 800;
  gap: 8px;
  justify-content: center;
  margin-top: 10px;
  min-height: 44px;
  width: 100%;
}
.pix-copy-button.copied { background: #178c75; }
.provider-notice-inline { color: #8a8062; font-size: 8px; line-height: 1.35; margin-top: 9px; }
.pix-state-title { color: #a44949; display: block; font-size: 14px; }
.pix-inline-state > p { color: #64716d; font-size: 11px; line-height: 1.4; margin: 7px 0 11px; }
.paid-check { align-items: center; background: #e5f6f0; border-radius: 50%; display: flex; height: 26px; justify-content: center; width: 26px; }
.inline-spinner { animation: spin .8s linear infinite; border: 2px solid #c9d8d3; border-radius: 50%; border-top-color: #008069; height: 18px; width: 18px; }

.typing {
  align-items: center;
  align-self: flex-start;
  background: #fff;
  border-radius: 0 11px 11px 11px;
  box-shadow: 0 1px 2px rgba(0,0,0,.12);
  display: flex;
  gap: 4px;
  height: 39px;
  padding: 0 15px;
}
.typing span { animation: typing 1s infinite ease-in-out; background: #889792; border-radius: 50%; height: 6px; width: 6px; }
.typing span:nth-child(2) { animation-delay: .14s; }
.typing span:nth-child(3) { animation-delay: .28s; }

.composer {
  align-items: center;
  background: #f0f2f5;
  display: flex;
  flex: 0 0 calc(70px + env(safe-area-inset-bottom));
  gap: 8px;
  padding: 9px 10px calc(9px + env(safe-area-inset-bottom));
}
.composer-input { align-items: center; background: #fff; border-radius: 24px; color: #74817d; display: flex; flex: 1; font-size: 15px; height: 48px; padding: 0 16px; }
.send-button { align-items: center; background: #59c9b8; border: 0; border-radius: 50%; color: #fff; display: flex; height: 48px; justify-content: center; width: 48px; }

.once-viewer {
  background: #000;
  display: flex;
  flex-direction: column;
  inset: 0;
  position: absolute;
  z-index: 20;
}
.viewer-header { align-items: center; color: #fff; display: flex; flex: 0 0 54px; gap: 10px; padding: max(9px, env(safe-area-inset-top)) 13px 8px; }
.viewer-header button { background: transparent; border: 0; color: #fff; padding: 0; }
.viewer-label { align-items: center; border: 1px solid rgba(255,255,255,.55); border-radius: 17px; display: flex; font-size: 11px; font-weight: 700; gap: 6px; padding: 5px 10px; }
.viewer-label b { align-items: center; border: 1px solid #fff; border-radius: 50%; display: flex; font-size: 8px; height: 15px; justify-content: center; width: 15px; }
.viewer-media { align-items: center; display: flex; flex: 1; justify-content: center; min-height: 0; }
.viewer-media img,
.viewer-media video { max-height: 100%; object-fit: contain; width: 100%; }

.pix-modal {
  align-items: flex-end;
  background: rgba(0,0,0,.58);
  display: flex;
  inset: 0;
  justify-content: center;
  position: absolute;
  z-index: 25;
}
.pix-sheet { animation: sheet-in .25s ease both; background: #fff; border-radius: 20px 20px 0 0; max-height: 92%; overflow: auto; padding: 19px 18px calc(18px + env(safe-area-inset-bottom)); width: 100%; }
.pix-sheet-head { align-items: center; display: flex; justify-content: space-between; }
.pix-sheet-head h2 { font-size: 18px; margin: 0; }
.pix-sheet-head button { align-items: center; background: #eff2f1; border: 0; border-radius: 50%; display: flex; height: 32px; justify-content: center; width: 32px; }
.pix-sheet > p { color: #65726e; font-size: 12px; line-height: 1.45; }
.qr-image { display: block; height: 190px; margin: 14px auto; object-fit: contain; width: 190px; }
.pix-code { background: #f2f5f4; border: 1px solid #e0e6e3; border-radius: 8px; color: #4f5d58; font-size: 10px; overflow-wrap: anywhere; padding: 11px; }
.copy-pix { background: #0a8f76; border: 0; border-radius: 9px; color: #fff; font-size: 13px; font-weight: 800; margin-top: 10px; min-height: 44px; width: 100%; }
.payment-status { align-items: center; background: #f1faf7; border-radius: 9px; color: #29755f; display: flex; font-size: 11px; gap: 8px; margin-top: 10px; padding: 10px; }
.payment-error { background: #fff2f2; border: 1px solid #efd1d1; border-radius: 9px; color: #a94747; font-size: 11px; line-height: 1.45; padding: 11px; }
.provider-notice { background: #fff9e8; border: 1px solid #eadcad; border-radius: 9px; color: #746635; font-size: 10px; line-height: 1.45; margin: 10px 0; padding: 9px 10px; }

.boot-loader { align-items: center; background: #efeae2; display: flex; flex-direction: column; gap: 12px; height: 100%; justify-content: center; }
.boot-loader span { animation: spin .8s linear infinite; border: 3px solid #c7d0cd; border-top-color: #008069; border-radius: 50%; height: 30px; width: 30px; }
.boot-loader p { color: #6c7773; font-size: 12px; }
.fatal { align-items: center; background: #fff; display: flex; flex-direction: column; height: 100%; justify-content: center; padding: 30px; text-align: center; }
.fatal strong { font-size: 17px; }
.fatal p { color: #6c7773; font-size: 13px; line-height: 1.5; }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes typing { 0%,60%,100% { opacity:.35; transform:translateY(0); } 30% { opacity:1; transform:translateY(-2px); } }
@keyframes bubble-in { from { opacity: 0; transform: translateY(5px) scale(.985); } }
@keyframes sheet-in { from { transform: translateY(35px); opacity: .6; } }

@media (min-width: 481px) {
  #app { box-shadow: 0 0 45px rgba(18,34,29,.18); }
}