.buddy-card { position: absolute; left: 18px; top: calc(14px + env(safe-area-inset-top)); z-index: 850; display: flex; align-items: flex-start; gap: 10px; width: min(390px, calc(100% - 108px)); opacity: 0; transform: translateY(-3px); transition: opacity .3s ease, transform .3s ease; pointer-events: none; }
.buddy-card.is-visible { opacity: 1; transform: translateY(0); }
.buddy-card[hidden] { display: none; }
.buddy-avatar { width: 78px; height: 88px; flex: 0 0 auto; object-fit: contain; filter: drop-shadow(0 5px 10px rgba(56, 37, 22, .22)); pointer-events: auto; }
.buddy-bubble { position: relative; flex: 1; min-height: 76px; padding: 15px 16px 14px; border: 1px solid rgba(117, 87, 55, .18); border-radius: 18px; background: rgba(255, 248, 235, .91); box-shadow: 0 10px 28px rgba(56, 37, 22, .16); backdrop-filter: blur(12px); color: #3f3025; pointer-events: auto; }
.buddy-bubble::before { content: ""; position: absolute; left: -9px; top: 27px; width: 17px; height: 17px; border-left: 1px solid rgba(117, 87, 55, .18); border-bottom: 1px solid rgba(117, 87, 55, .18); background: rgba(255, 248, 235, .91); transform: rotate(45deg); }
.buddy-message { position: relative; z-index: 1; font-size: 13px; line-height: 1.45; }
.buddy-message p { margin: 0 0 7px; }
.buddy-message p:last-child { margin-bottom: 0; }
.buddy-message strong { color: #294f30; font-size: 15px; }
.buddy-action { position: relative; z-index: 1; margin-top: 12px; min-height: 40px; padding: 9px 13px; border: 0; border-radius: 12px; background: #2f6a3a; color: #fff; font-weight: 800; cursor: pointer; }
.buddy-action:hover { filter: brightness(.96); }
@media (max-width: 820px) {
  .buddy-card { left: 10px; top: calc(10px + env(safe-area-inset-top)); width: min(350px, calc(100% - 76px)); gap: 7px; }
  .buddy-avatar { width: 68px; height: 78px; }
  .buddy-bubble { min-height: 68px; padding: 12px 13px; border-radius: 16px; }
  .buddy-bubble::before { top: 24px; }
  .buddy-message { font-size: 12px; }
  .buddy-message strong { font-size: 14px; }
}
@media (max-width: 430px) {
  .buddy-card { width: calc(100% - 70px); }
  .buddy-avatar { width: 62px; height: 72px; }
}
@media (prefers-reduced-motion: reduce) { .buddy-card { transition: none; } }