/* Shared motion-library charcoal canvas; keep the interactive pill pale. */
.thinking-button-preview { background: #1c1c19; }
.thinking-stage { display: flex; align-items: center; justify-content: center; min-width: 0; height: 480px; padding: 32px 20px; overflow: hidden; }
.thinking-hit-area { width: 270px; height: 110px; display: flex; align-items: center; justify-content: center; flex: none; }
.thinking-trigger { box-sizing: border-box; display: flex; align-items: center; justify-content: center; gap: 8px; flex: none; width: 200px; height: 72px; padding: 0 24px; border: 0; border-radius: 999px; background: #f2f2f2; color: #121212; font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif; font-size: 24px; font-weight: 600; line-height: 30px; letter-spacing: -.6px; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; user-select: none; }
.thinking-trigger[aria-disabled='true'] { cursor: wait; }
.thinking-trigger:hover[aria-disabled='false'] { background: #ededed !important; }
.thinking-trigger:active[aria-disabled='false'] { background: #e8e8e8 !important; }
.thinking-icon { position: relative; display: block; width: 28px; height: 28px; flex: none; transform-origin: center; }
.thinking-icon svg { display: block; position: absolute; inset: 0; width: 28px; height: 28px; fill: currentColor; overflow: visible; }
.thinking-icon .thinking-generate-icon { fill: currentColor; stroke: none; }
.thinking-star-icon { opacity: 0; }
.thinking-label-slot { display: grid; flex: none; place-items: center; }
.thinking-label { grid-area: 1 / 1; display: inline-flex; white-space: nowrap; }
.thinking-glyph { display: inline-block; }
.thinking-label-thinking .thinking-glyph { opacity: 0; }
.thinking-preview-footer { display: flex; align-items: center; justify-content: center; position: relative; gap: 12px; min-height: 56px; padding: 0 56px 12px; color: #a7a79b; }
.thinking-hint { font-size: 12px; line-height: 20px; text-align: center; }
.thinking-reset { position: absolute; right: 12px; bottom: 8px; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: #a7a79b; cursor: pointer; }
.thinking-reset:hover { background: #30302a; }
.thinking-reset svg { display: block; width: 18px; height: 18px; }
.thinking-announcement { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 700px) {
  .thinking-stage { height: auto; min-height: 280px; max-height: 480px; aspect-ratio: 1; padding: 24px 16px; }
  .thinking-preview-footer { padding-inline: 44px; }
  .thinking-hint { font-size: 11px; }
}