/* ask screen (source/build_ask.py) */
.ask-chip { padding: 1px 10px; border-radius: 10px; border: 1.5px solid var(--ink); font-size: 11px; font-weight: 800; white-space: nowrap; }
.ask-q { font-size: 17px; font-weight: 800; line-height: 1.15; }
.ask-name { font-size: 14px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ask-text {
  flex: 1; min-height: 70px; width: 100%; resize: none; padding: 8px 12px; border-radius: 12px; border: 2px solid var(--ink);
  background: #FFFFFF; font-size: 14px; font-weight: 700; line-height: 22px; color: var(--ink);
}
.ask-text::placeholder { color: #8A8178; }

/* answers side by side; long ones scroll inside the card */
.ask-answers { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
.ask-row { display: flex; align-items: flex-start; gap: 8px; flex: none; }
.ask-bubble {
  flex: 1; min-width: 0; padding: 7px 12px; border-radius: 12px; border: 1.5px solid var(--ink);
  font-size: 13px; font-weight: 700; line-height: 1.3; white-space: pre-wrap; overflow-wrap: anywhere;
}
.ask-bubble.wait { border: 2px dashed #C9BBA6; color: #8A7A6A; white-space: normal; }
/* a chat (owner, 5 Oct 2026): your answer on the right beside your face, your person's on the left; each bubble as wide
   as its words, its corner by the face a little sharper, a reaction on the corner toward the middle */
.ask-row.me { flex-direction: row-reverse; }
.ask-row .ask-bubble { flex: 0 1 auto; max-width: 80%; }
.ask-row.them .ask-bubble { border-top-left-radius: 4px; }
.ask-row.me .ask-bubble { border-top-right-radius: 4px; }
.ask-row.me .react-badge { right: auto; left: 10px; }
.ask-bubble.has-react { min-width: 64px; }

/* the partner's answer, locked until you answer */
.ask-locked { position: relative; flex: 1; padding: 14px; border-radius: 14px; background: #EFE9F7; border: 2px solid var(--ink); display: flex; flex-direction: column; gap: 8px; overflow: hidden; }
.ask-line { display: block; height: 10px; border-radius: 5px; background: #D9CDE9; flex: none; }
.ask-lock { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; font-size: 13px; font-weight: 800; text-align: center; padding: 0 10px; }
.ask-lock-ic { width: 46px; height: 46px; border-radius: 23px; background: var(--card); border: 2px solid var(--ink); display: flex; align-items: center; justify-content: center; }

.ask-sent { width: 60px; height: 60px; border-radius: 30px; background: #FFF6D9; border: 2px solid var(--ink); display: flex; align-items: center; justify-content: center; }

/* reactions: Love it · Haha · Same! */
.ask-react-to { white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ask-react {
  height: 30px; padding: 0 10px 0 6px; border-radius: 15px; border: 2px solid var(--ink); background: #FFFFFF; color: var(--ink);
  display: flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 800; white-space: nowrap; flex: none;
}
.ask-react.on { background: var(--honey); box-shadow: 0 2px 0 var(--ink); }
.ask-react:active { transform: translateY(1px); }