/* The main page: white, with bubbles that are exactly iMessage. Loaded after styles.css. */
body { background: #fff; }
.pill-soft { background: #F2F2F7; backdrop-filter: none; }
.sketch path { stroke: rgba(0,0,0,.22); }

.device { padding-top: 26px; }
.day { align-self: center; text-align: center; font-size: 11.5px; color: #8E8E93; margin: 2px 0 6px; }
.day span { font-weight: 600; }

/* bubbles */
.thread { gap: 8px; padding-top: 8px; -webkit-mask-image: none; mask-image: none; }
.msg {
  position: relative; max-width: 76%; padding: 7px 12px 8px; border-radius: 18px;
  font-size: 17px; line-height: 1.24; letter-spacing: 0; box-shadow: none;
}
.msg.them { background: #E9E9EB; color: #000; box-shadow: none; }
.msg.me   { background: linear-gradient(180deg, #3D9BFF 0%, #0A7AFF 100%); color: #fff; }
/* tighter inside a run from the same side */
.msg.them + .msg.them, .msg.me + .msg.me { margin-top: -5px; }
/* the tail, only on the last bubble of a run */
.msg.them::before, .msg.me::before { content: ""; position: absolute; bottom: 0; width: 20px; height: 20px; }
.msg.them::after,  .msg.me::after  { content: ""; position: absolute; bottom: 0; width: 10px; height: 20px; background: #fff; }
.msg.them::before { left: -7px; background: #E9E9EB; border-bottom-right-radius: 15px; }
.msg.them::after  { left: -10px; border-bottom-right-radius: 10px; }
.msg.me::before   { right: -7px; background: #0A7AFF; border-bottom-left-radius: 15px; }
.msg.me::after    { right: -10px; border-bottom-left-radius: 10px; }
.msg.them:has(+ .msg.them)::before, .msg.them:has(+ .msg.them)::after,
.msg.me:has(+ .msg.me)::before,     .msg.me:has(+ .msg.me)::after { display: none; }

/* your voice is just your words here */
.wave { display: none; }
.msg.me { display: block; }

/* the three dots */
.msg.typing { display: inline-flex; gap: 4px; padding: 12px 14px; min-height: 0; }
.msg.typing i { width: 8px; height: 8px; border-radius: 50%; background: #8E8E93; animation: dot 1.2s ease-in-out infinite; animation-delay: var(--d, 0s); }
@keyframes dot { 0%, 60%, 100% { opacity: .35; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-2px); } }

/* the receipt under your last message */
.delivered { align-self: flex-end; font-size: 11px; color: #8E8E93; margin: -4px 4px 0 0; font-weight: 600; }

/* stickers float without a bubble; a drawing is a photo-ish bubble */
.msg.sticker { background: transparent !important; padding: 0; }
.msg.sticker::before, .msg.sticker::after { display: none; }
.draw { margin: 2px 0 4px -4px; }

/* the compose field */
.ask input { background: #fff; border: 1px solid #C7C7CC; box-shadow: none; }
.ask input:focus { border-color: #0A7AFF; }
.note { color: #8E8E93; }
.foot { color: #8E8E93; }
@media (prefers-reduced-motion: reduce) { .msg.typing i { animation: none; } }

/* the one action on the page, in the blue that means "you" */
.pill-ink {
  background: linear-gradient(180deg, #3D9BFF 0%, #0A7AFF 100%); color: #fff;
  box-shadow: 0 1px 2px rgba(10,122,255,.25), 0 10px 24px -8px rgba(10,122,255,.65);
}
.pill-ink:hover { transform: translateY(-1px); box-shadow: 0 2px 4px rgba(10,122,255,.28), 0 14px 28px -8px rgba(10,122,255,.7); }
.ask .pill { padding: 0 24px; font-size: 16px; font-weight: 700; }
.top-cta { font-size: 15px; padding: 0 20px; }