/* 'What Are We?' Text Helper: goal chips, one big text bubble, reply playbook. Bubbles and tabs come from engine-u09. */
.tool .wa-thread { min-height: 112px; justify-content: center; padding: 16px; border-radius: 24px; background: var(--surface-2); }
.tool .wa-thread .tk-bubble { font-size: 18px; line-height: 26px; }


.tool .wa-actions { align-items: center; }
.tool .wa-actions .tk-copy { flex: 1 1 auto; }
.tool .wa-next { display: inline-flex; align-items: center; gap: 6px; }

.tool .wa-replies button { text-align: left; }
.tool .wa-repout { gap: 8px; }
.tool .wa-repout .tk-row.tk-me { padding-left: 16px; }
.tool .wa-sys { font-style: italic; color: rgb(var(--ink) / .6); }
.tool .wa-coach { font-size: 15px; line-height: 22px; font-weight: 650; color: rgb(var(--ink) / .9); padding: 10px 14px; border-radius: 16px; background: var(--surface-2); }
.tool .wa-coach b { font-weight: 900; }
.tool .wa-tips { display: grid; gap: 8px; }
.tool .wa-tips li { position: relative; padding-left: 18px; font-size: 15px; line-height: 22px; }
.tool .wa-tips li::before { content: ''; position: absolute; left: 2px; top: 9px; width: 6px; height: 6px; border-radius: 3px; background: rgb(var(--accent)); }
.tool .wa-saved { display: grid; gap: 8px; }
.tool .wa-saved .tk-row.tk-me { padding-left: 0; }
.tool .wa-saved .tk-bubble { font-size: 15px; line-height: 21px; }
.tool .wa-x { width: 40px; height: 40px; min-width: 40px; border-radius: 20px; display: grid; place-items: center; color: rgb(var(--ink) / .5); background: transparent; flex: 0 0 auto; }
.tool .wa-x svg { width: 18px; height: 18px; }
.tool .wa-yes { text-align: left; }
@media (max-width: 599px) {
  .tool .tool-actions.wa-actions { flex-direction: row; flex-wrap: wrap; }
  .tool .wa-actions .tk-copy { flex: 1 0 100%; width: 100%; }
  .tool .wa-actions .wa-next { flex: 1 1 auto; width: auto; }
  .tool .wa-actions .wa-next, .tool .wa-actions .wa-icon { flex: 1 1 auto; padding: 0 10px; }
}
/* "girlfriend" inside the bubble: a word you tap to cycle girlfriend, boyfriend, partner */
.tool .wa-swap {
  display: inline; position: relative; padding: 3px 2px; margin: 0; border-radius: 6px; font: inherit; font-weight: 850; color: #fff; background: rgb(255 255 255 / .14);
  text-decoration: underline dotted rgb(255 255 255 / .9); text-decoration-thickness: 2px; text-underline-offset: 4px; cursor: pointer; transition: background-color .15s ease;
}
.tool .wa-swap::after { content: ''; position: absolute; inset: -8px -4px; }
.tool .wa-swap:active { background: rgb(255 255 255 / .26); }
.tool .wa-swap:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.tool .wa-icon { width: auto; padding: 0 14px; display: inline-flex; gap: 6px; align-items: center; font-size: 14px; }
.tool .wa-icon[aria-pressed="true"] { color: #C0237A; }
.tool .wa-end { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 750; color: rgb(var(--ink) / .85); }
.tool .tk-step { margin-top: 12px; }
@media (min-width: 600px) { .tool .wa-thread .tk-bubble { font-size: 20px; line-height: 29px; } .tool .wa-thread .tk-row .tk-bubble { max-width: 560px; } }
/* Phone: copy full width, then Another / Save / Ask a friend in one row; goals in two rows */
@media (max-width: 599px) {
  .tool .wa-actions .btn { width: auto; }
  .tool .wa-actions .tk-copy { width: 100%; }
  .tool .wa-goals button { padding: 0 11px; font-size: 14px; }
  .tool .wa-goals { gap: 6px; }
}
/* Round 3: "To:" line on top of the text, like a new message; caret on the swap word; reply chips wrap */
.tool .wa-phone { border-radius: 24px; background: var(--surface-2); overflow: hidden; }
.tool .wa-phone .wa-thread { border-radius: 0; background: transparent; padding-top: 8px; }
.tool .wa-to { display: flex; align-items: center; gap: 8px; padding: 6px 16px; border-bottom: 1px solid rgb(var(--ink) / .08); font-size: 15px; font-weight: 750; color: rgb(var(--ink) / .7); }
.tool .wa-to input.wa-name { min-height: 40px; padding: 6px 0; border-radius: 0; box-shadow: none; background: transparent; font-size: 16px; font-weight: 750; color: rgb(var(--ink)); }
.tool .wa-to input.wa-name:focus-visible { box-shadow: none; outline: 0; }
.tool .wa-to:focus-within { background: rgb(var(--accent) / .06); }
.tool .wa-caret { display: inline-block; width: 6px; height: 6px; margin: 0 2px 0 5px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-4px) rotate(45deg); }
.tool .wa-sms { display: inline-flex; align-items: center; justify-content: center; }
.tool .wa-replies button { min-height: 40px; }
@media (max-width: 599px) { .tool .wa-actions .wa-sms { flex: 1 0 100%; } }
@media (prefers-color-scheme: dark) { .tool .wa-to input.wa-name { box-shadow: none; } }