/* Robo's speech bubble and the note on the result card. */
.robo-say {
  position: fixed;
  left: 50%;
  bottom: 86px;
  display: flex;
  align-items: center;
  gap: 12px;
  width: min(460px, calc(100vw - 32px));
  padding: 12px 18px 12px 12px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: var(--shadow);
  transform: translate(-50%, 16px);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.35s cubic-bezier(0.3, 1.4, 0.6, 1), opacity 0.25s;
  cursor: pointer;
}
.robo-say.show { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
.robo-say::after {
  content: '';
  position: absolute;
  left: 34px;
  bottom: -9px;
  border: 10px solid transparent;
  border-bottom: 0;
  border-top-color: rgba(255, 255, 255, 0.94);
}
.robo-say p {
  margin: 0;
  font-family: -apple-system, 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
  font-size: 18px;
  line-height: 1.45;
  color: var(--ink);
  word-break: keep-all;
}
.robo-face {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
}
.robo-face .ico { width: 28px; height: 28px; }

.done-line {
  margin: 0 0 12px;
  font-family: -apple-system, 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
  font-size: 17px;
  line-height: 1.45;
  word-break: keep-all;
}
.done-letter {
  margin: 0 auto 16px;
  max-width: 340px;
  padding: 12px 16px;
  border-radius: 6px;
  background: #fffbe9;
  box-shadow: 0 2px 8px rgba(120, 60, 50, 0.14);
  transform: rotate(-1deg);
  text-align: left;
  font-family: -apple-system, 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
  color: #4b3a2a;
}
.done-letter h3 { margin: 0 0 6px; font-size: 14px; font-weight: 600; color: var(--muted); }
.done-letter p { margin: 0; font-size: 17px; line-height: 1.55; word-break: keep-all; }
.done-letter .from { margin-top: 6px; text-align: right; font-size: 15px; color: var(--muted); }

@media (pointer: coarse) {
  .robo-say {
    left: calc(16px + var(--safe-left));
    bottom: calc(168px + var(--safe-bottom));
    width: calc(100vw - 104px - var(--safe-left) - var(--safe-right));
    transform: translateY(16px);
  }
  .robo-say.show { transform: translateY(0); }
}