:root {
  --yellow: #ffc629;
  --yellow-dark: #e8a90a;
  --yellow-soft: #fff4bf;
  --yellow-pale: #fffaf0;
  --cream: #fffdf8;
  --white: #fff;
  --brown: #382d2b;
  --muted: #786f6b;
  --line: #f1ece5;
  --blue-check: #55a7d9;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { width: 100%; height: 100%; }

body {
  margin: 0;
  overflow: hidden;
  color: var(--brown);
  background: var(--white);
  font-family: "Arial Rounded MT Bold", "Nunito", "Segoe UI", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

button { font: inherit; -webkit-tap-highlight-color: transparent; }

.whatsapp {
  width: 100%;
  height: 100dvh;
  display: block;
  overflow: hidden;
  background: var(--white);
}

.conversation-header {
  height: 72px;
  display: flex;
  align-items: center;
}

.brand-avatar {
  width: 54px;
  height: 54px;
  flex: 0 0 auto;
  object-fit: cover;
  border-radius: 18px;
  box-shadow: 0 3px 0 rgb(225 164 5 / 60%);
}

.brand-avatar.small {
  width: 46px;
  height: 46px;
  border-radius: 15px;
}

.conversation {
  position: relative;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: 72px minmax(0, 1fr) auto;
  background: var(--yellow-pale);
}

.conversation::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 72px 0 0;
  opacity: .45;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 18px 18px, #f5d973 2px, transparent 2.5px),
    radial-gradient(circle at 65px 70px, transparent 7px, #f9e9a4 7.5px, transparent 8.5px),
    radial-gradient(circle at 50% 50%, #fff 0 4px, transparent 4.5px);
  background-size: 95px 95px, 130px 130px, 170px 170px;
}

.conversation-header {
  z-index: 3;
  padding: 10px 22px;
  gap: 13px;
  background: var(--yellow);
  box-shadow: 0 4px 0 var(--yellow-dark);
}

.contact-info { min-width: 0; flex: 1; }
.contact-info strong, .contact-info span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.contact-info strong { margin-bottom: 2px; font-size: 17px; font-weight: 900; }
.contact-info span { color: #6f5010; font-family: "Segoe UI", Arial, sans-serif; font-size: 12px; font-weight: 600; }

.messages {
  z-index: 1;
  min-height: 0;
  padding: 24px max(24px, calc((100% - 920px) / 2)) 16px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgb(109 85 41 / 18%) transparent;
}

.encryption-note {
  width: fit-content;
  max-width: 430px;
  margin: 0 auto 14px;
  padding: 8px 14px;
  border-radius: 14px;
  background: var(--white);
  box-shadow: 0 3px 0 #efe2c9;
  color: var(--muted);
  font-family: "Segoe UI", Arial, sans-serif;
  font-size: 11px;
  line-height: 1.35;
  text-align: center;
}

.lock {
  position: relative;
  width: 8px;
  height: 7px;
  margin-right: 4px;
  display: inline-block;
  border-radius: 2px;
  background: #c49b39;
}
.lock::before { content: ""; position: absolute; width: 6px; height: 6px; left: 1px; top: -5px; border: 1px solid #c49b39; border-bottom: 0; border-radius: 5px 5px 0 0; }

.date-chip {
  width: fit-content;
  margin: 0 auto 18px;
  padding: 7px 13px;
  border-radius: 12px;
  background: var(--yellow-soft);
  box-shadow: 0 3px 0 #eed98b;
  color: #7a6127;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .06em;
}

.message-row {
  width: 100%;
  margin: 0 0 7px;
  display: flex;
  opacity: 0;
  transform: translateY(7px) scale(.99);
  animation: message-in .18s ease forwards;
}
.message-row.incoming { justify-content: flex-start; }.message-row.outgoing { justify-content: flex-end; }

.bubble {
  position: relative;
  max-width: min(66%, 590px);
  padding: 10px 11px 7px 12px;
  border-radius: 18px;
  background: var(--white);
  box-shadow: 0 4px 0 #e9e2d8;
  font-family: "Segoe UI", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.42;
}
.message-row.outgoing .bubble { background: var(--yellow-soft); box-shadow: 0 4px 0 #ead57c; }
.message-row.first.incoming .bubble { border-top-left-radius: 6px; }
.message-row.first.outgoing .bubble { border-top-right-radius: 6px; }
.message-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.message-meta { position: relative; top: 3px; margin-left: 8px; float: right; color: #857d75; font-size: 10px; line-height: 15px; white-space: nowrap; }
.checks { margin-left: 3px; color: var(--blue-check); font-size: 13px; font-weight: 700; letter-spacing: -4px; }

.typing-bubble { min-width: 62px; height: 38px; display:flex; align-items:center; gap:5px; }
.typing-bubble i { width: 7px; height: 7px; border-radius: 50%; background: #d5a318; animation: typing .8s infinite ease-in-out; }
.typing-bubble i:nth-child(2){animation-delay:.12s}.typing-bubble i:nth-child(3){animation-delay:.24s}

.reply-panel {
  z-index: 2;
  padding: 11px 18px 15px;
  background: var(--white);
  box-shadow: 0 -8px 24px rgb(91 68 29 / 6%);
}
.reply-panel p { margin: 0 0 10px; color: var(--muted); font-size: 11px; font-weight: 800; text-align: center; }
.reply-options { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px; }
.reply-options button, .restart {
  min-height: 42px;
  padding: 9px 18px;
  border: 0;
  border-radius: 16px;
  background: var(--yellow);
  box-shadow: 0 4px 0 var(--yellow-dark);
  color: var(--brown);
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
  transition: transform .12s, box-shadow .12s, filter .12s;
}
.reply-options button:hover, .restart:hover { filter: brightness(1.025); transform: translateY(-1px); box-shadow: 0 5px 0 var(--yellow-dark); }
.reply-options button:active, .restart:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--yellow-dark); }
.reply-options button:focus-visible, .restart:focus-visible { outline: 4px solid rgb(255 198 41 / 35%); outline-offset: 3px; }
.reply-options button:disabled { opacity: .45; cursor: default; filter: none; transform: none; box-shadow: 0 4px 0 var(--yellow-dark); }
.restart { z-index: 2; margin: 11px auto 15px; }
.restart:not([hidden]) { display: block; }
[hidden] { display: none !important; }

@keyframes message-in { to { opacity: 1; transform: none; } }
@keyframes typing { 0%,60%,100% { opacity: .35; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

@media (max-width: 720px) {
  .whatsapp { display: block; }
  .conversation { width: 100%; height: 100dvh; grid-template-rows: 68px minmax(0, 1fr) auto; }
  .conversation::before { inset: 68px 0 0; }
  .conversation-header { height: 68px; padding: max(9px, env(safe-area-inset-top)) 13px 9px 9px; box-shadow: 0 4px 0 var(--yellow-dark); }
  .brand-avatar.small { width: 44px; height: 44px; border-radius: 14px; }
  .contact-info strong { font-size: 16px; }.contact-info span { color: #72520a; }
  .messages { padding: 17px 10px 12px; }
  .encryption-note { max-width: calc(100% - 38px); font-size: 10px; }
  .bubble { max-width: 87%; padding: 9px 10px 7px 11px; font-size: 14px; border-radius: 17px; }
  .reply-panel { padding: 9px max(10px, env(safe-area-inset-right)) max(13px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)); }
  .reply-options { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
  .reply-options::-webkit-scrollbar { display: none; }
  .reply-options button { flex: 0 0 auto; }
  .restart { margin-bottom: max(13px, env(safe-area-inset-bottom)); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}