/* ============================================================
   ADAM CHECKS — Phone + Chat demo
   ============================================================ */
.ac-phone {
  position: relative;
  width: 340px;
  height: 710px;
  background: #0a0a0a;
  border-radius: 52px;
  padding: 12px;
  box-shadow: var(--shadow-phone), inset 0 0 0 2px rgba(255,255,255,.06);
}
.ac-notch {
  position: absolute; top: 22px; left: 50%; transform: translateX(-50%);
  width: 108px; height: 30px; background: #0a0a0a; border-radius: 16px; z-index: 6;
}
.ac-screen {
  width: 100%; height: 100%; border-radius: 42px; overflow: hidden;
  background: var(--chat-bg);
  display: flex; flex-direction: column; position: relative;
  background-image:
    radial-gradient(circle at 12px 12px, rgba(7,94,84,.05) 1.5px, transparent 0),
    linear-gradient(135deg, #ECE6DA 0%, #E4DCCB 100%);
  background-size: 26px 26px, 100% 100%;
}
.ac-status {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 26px 6px; font-size: 13px; font-weight: 700; color: #fff;
  background: var(--wa-teal);
}
.ac-header {
  display: flex; align-items: center; gap: 11px;
  padding: 6px 16px 12px; background: var(--wa-teal); color: #fff;
}
.ac-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: linear-gradient(145deg, var(--wa-green), var(--wa-deep));
  display: grid; place-items: center; flex-shrink: 0;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.25);
}
.ac-verified {
  width: 15px; height: 15px; border-radius: 50%; background: var(--wa-green);
  display: grid; place-items: center; box-shadow: 0 0 0 1.5px var(--wa-teal);
}
.ac-thread {
  flex: 1; overflow-y: auto; padding: 14px 12px 8px;
  display: flex; flex-direction: column; gap: 8px; scrollbar-width: none;
}
.ac-thread::-webkit-scrollbar { display: none; }
.ac-daystamp {
  align-self: center; font-size: 10.5px; font-weight: 800; letter-spacing: .08em;
  color: var(--ink-soft); background: rgba(255,255,255,.75);
  padding: 4px 12px; border-radius: 8px; margin-bottom: 4px;
}
.ac-row { display: flex; }
.ac-row-out { justify-content: flex-end; }
.ac-row-in { justify-content: flex-start; }
.ac-bubble {
  max-width: 80%; padding: 9px 12px 18px; border-radius: 14px; position: relative;
  font-size: 14px; line-height: 1.4; color: var(--ink);
  box-shadow: 0 1px 1.5px rgba(0,0,0,.10);
}
.ac-out { background: var(--bubble-out); border-bottom-right-radius: 5px; }
.ac-in  { background: #fff; border-bottom-left-radius: 5px; }
.ac-rich { padding: 6px; }
.ac-time {
  position: absolute; right: 10px; bottom: 5px; font-size: 9.5px; color: var(--ink-faint); font-weight: 600;
}
.ac-rich .ac-time { display: none; }
.ac-photo {
  width: 168px; height: 116px; border-radius: 11px;
  background:
    repeating-linear-gradient(135deg, #cfd8d0 0 9px, #c4cdc5 9px 18px);
  display: grid; place-items: center;
}
.ac-photo span {
  font-family: ui-monospace, monospace; font-size: 10.5px; color: #5a6660;
  background: rgba(255,255,255,.7); padding: 3px 8px; border-radius: 6px;
}
.ac-input {
  display: flex; align-items: center; gap: 8px; padding: 9px 12px 14px;
  background: transparent;
}
.ac-inputbox {
  flex: 1; background: #fff; border-radius: 20px; padding: 11px 16px;
  font-size: 13.5px; color: var(--ink-faint); box-shadow: 0 1px 2px rgba(0,0,0,.08);
}
.ac-send {
  width: 42px; height: 42px; border-radius: 50%; background: var(--wa-green);
  display: grid; place-items: center; flex-shrink: 0; box-shadow: var(--shadow-sm);
}

/* typing dots */
.ac-typing { display: flex; gap: 4px; align-items: center; height: 8px; }
.ac-typing span {
  width: 7px; height: 7px; border-radius: 50%; background: var(--ink-faint);
  animation: ac-blink 1.2s infinite both;
}
.ac-typing span:nth-child(2) { animation-delay: .2s; }
.ac-typing span:nth-child(3) { animation-delay: .4s; }
@keyframes ac-blink { 0%, 60%, 100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

/* pop-in */
.ac-pop { animation: ac-pop .34s cubic-bezier(.2,.8,.2,1) both; }
@keyframes ac-pop { from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: none; } }

@media (max-width: 480px) {
  .ac-phone { width: 300px; height: 626px; border-radius: 46px; }
}