.cat-activation { position: relative; }
.cat-activation .home-link { position: relative; }
.cat-ring { position: absolute; inset: -12px; border-radius: 50%; background: conic-gradient(var(--text) calc(var(--cat-progress, 0) * 1turn), transparent 0); mask: radial-gradient(farthest-side, transparent calc(100% - 1.5px), #000 calc(100% - 1px)); pointer-events: none; }
.cat-invitation { position: absolute; left: 4.5rem; top: -.25rem; min-height: 2.25rem; width: max-content; max-width: min(15rem, calc(100vw - 9rem)); padding: .55rem .75rem; border: 1px solid rgb(151 151 191 / 14%); border-radius: 12px; background: var(--surface); box-shadow: 0 8px 24px rgb(0 0 0 / 12%); color: var(--text); font: inherit; font-size: .75rem; line-height: 1.35; opacity: 0; transform: translateX(-4px) scale(.98); transform-origin: left center; transition: none; pointer-events: none; text-align: left; }
.cat-invitation::before { content: ''; position: absolute; left: -5px; top: 15px; width: 8px; height: 8px; border-left: 1px solid rgb(151 151 191 / 14%); border-bottom: 1px solid rgb(151 151 191 / 14%); background: var(--surface); transform: rotate(45deg); }
.cat-invitation.is-hint-visible, .cat-activation .home-link:focus-visible ~ .cat-invitation, .cat-invitation:focus-visible { opacity: 1; transform: none; pointer-events: auto; transition: opacity 180ms ease, transform 180ms ease; }
.cat-invitation.is-hint-switching { opacity: 0; transform: translateX(2px) scale(.98); }
@media (hover: hover) and (pointer: fine) {
  .cat-activation .home-link:hover ~ .cat-invitation { opacity: 1; transform: none; pointer-events: auto; transition: opacity 180ms ease, transform 180ms ease; }
}
@media (hover: none), (pointer: coarse) {
  .cat-invitation { transform: scale(.98); transition: opacity 300ms ease, transform 300ms ease; }
}
.cat-chat-open { overflow: hidden !important; }
.portfolio-page > header .identity, .portfolio-page > header .introduction, .profile-body { transition: transform 320ms cubic-bezier(.22,1,.36,1), opacity 240ms ease; }
.is-chat-open > header { position: relative; z-index: 12; pointer-events: none; }
.is-chat-open .profile-body, .is-chat-open .introduction { opacity: 0; transform: translateY(24px); pointer-events: none; }
.is-chat-open .cat-invitation, .is-chat-open .cat-ring { opacity: 0; visibility: hidden; pointer-events: none; }
.cat-chat-open .floating-header { display: none !important; }
.is-chat-settled .identity { transform: translateY(-44px); }
.cat-has-left > header .home-link img { opacity: 0; }
.cat-chat { position: fixed; inset: 0; z-index: 10; opacity: 0; pointer-events: none; transition: opacity 240ms ease; }
.cat-chat.is-open { opacity: 1; pointer-events: auto; }
.cat-composer { position: absolute; left: 50%; top: var(--composer-y, 286px); width: min(37.5rem, calc(100% - 3rem)); margin: 0; display: flex; align-items: flex-end; gap: 10px; padding-block: 4px; transform: translate(-50%, 20px); transition: top 360ms cubic-bezier(.22,1,.36,1), transform 320ms cubic-bezier(.22,1,.36,1); }
.cat-composer.is-resizing { transition: none; }
.cat-chat.is-open .cat-composer { transform: translate(-50%, 0); }
.cat-close, .cat-send { padding: 0; border: 0; background: transparent; display: grid; place-items: center; flex: 0 0 auto; border-radius: 50%; }
.cat-close { width: 66px; height: 66px; }
.cat-send { width: 34px; height: 34px; }
.cat-close img, .cat-send img { width: 100%; height: 100%; }
.cat-send:disabled { opacity: .4; cursor: default; }
.cat-input-wrap { min-width: 0; flex: 1; display: flex; align-items: flex-end; gap: 10px; padding: 16px; background: var(--surface); border-radius: 32px; }
.cat-input-wrap textarea { color: var(--text); background: none; border: 0; padding: 5px 0; box-sizing: border-box; overflow: hidden; resize: none; flex: 1; min-width: 0; font: inherit; height: 34px; min-height: 34px; line-height: 24px; }
.cat-input-wrap textarea::placeholder { color: var(--muted); }
.cat-input-wrap textarea:focus-visible { outline: none; }
.cat-input-wrap:focus-within { box-shadow: 0 0 0 .5px rgb(151 151 191 / 25%); }
.cat-transcript { position: absolute; top: var(--chat-top); bottom: var(--chat-bottom); left: 50%; transform: translateX(-50%); width: min(37.5rem, calc(100% - 3rem)); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; mask-image: linear-gradient(to bottom, transparent, #000 16px, #000 calc(100% - 8px), transparent); overflow-anchor: none; }
.cat-transcript::-webkit-scrollbar { display: none; }
.cat-messages { min-height: 100%; display: flex; flex-direction: column; justify-content: flex-end; padding-block: 16px 8px; }
.cat-user { flex-shrink: 0; margin: 4px 0 4px 40px; padding: 16px; border-radius: 16px; background: var(--surface); color: var(--muted); overflow-wrap: anywhere; white-space: pre-wrap; animation: cat-user-in 220ms ease both; }
.cat-reply { flex-shrink: 0; display: flex; gap: 16px; padding: 16px; margin: 4px 40px 4px 0; color: var(--text); line-height: 22px; }
.cat-slot { width: 36px; height: 36px; flex: 0 0 36px; }
.cat-answer { min-height: 36px; position: relative; min-width: 0; flex: 1; overflow-wrap: anywhere; }
.cat-answer a { display: inline-block; margin-top: 22px; color: #A072BD; text-decoration: none; }
.cat-copy p a { display: inline; margin-top: 0; }
.cat-copy p { white-space: pre-wrap; }
.cat-stream-piece { animation: cat-stream-in 220ms ease-out both; }
.cat-answer.is-ready { animation: cat-answer-in 220ms ease both; }
.cat-dots { position: absolute; top: 3px; left: 0; display: flex; gap: 4px; color: var(--muted); }
.cat-dots span { animation: cat-dot-first 1400ms ease infinite; }
.cat-dots span:nth-child(2) { animation-name: cat-dot-second; }
.cat-dots span:nth-child(3) { animation-name: cat-dot-third; }
.cat-messenger { width: 36px; height: 36px; position: fixed; left: 0; top: 0; z-index: 15; pointer-events: none; display: none; transition: opacity 180ms ease; }
.cat-messenger.is-visible { display: block; }
.cat-latest { position: absolute; bottom: calc(var(--chat-bottom) + 12px); left: 50%; transform: translateX(-50%); border: 1px solid var(--muted); color: var(--text); background: var(--surface); border-radius: 20px; padding: 6px 12px; font-size: .75rem; z-index: 2; }
@keyframes cat-stream-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes cat-user-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes cat-answer-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
@keyframes cat-dot-first { 0%, 85%, 100% { opacity: 0; } 12%, 65% { opacity: 1; } }
@keyframes cat-dot-second { 0%, 12%, 85%, 100% { opacity: 0; } 24%, 65% { opacity: 1; } }
@keyframes cat-dot-third { 0%, 24%, 85%, 100% { opacity: 0; } 36%, 65% { opacity: 1; } }
@media (max-width: 640px) {
  .portfolio-page.is-chat-open { padding-top: max(.5rem, env(safe-area-inset-top)); }
  .cat-composer, .cat-transcript { width: calc(100% - 1rem); }
  .cat-user { margin-left: 24px; }
  .cat-reply { margin-right: 8px; gap: 12px; }
  .cat-invitation { right: auto; max-width: calc(100vw - 7rem); }
  .cat-close { width: 54px; height: 54px; }
  .cat-input-wrap { padding: 10px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .cat-messenger, .cat-composer, .cat-chat, .cat-invitation, .portfolio-page > header .identity, .portfolio-page > header .introduction, .profile-body { transition: none; }
  .cat-stream-piece, .cat-user, .cat-answer.is-ready, .cat-dots span { animation: none; }
}

.cat-verification {
  position: fixed; z-index: 100; inset: 50% auto auto 50%;
  transform: translate(-50%, -50%); max-width: calc(100vw - 32px);
  padding: 24px; border-radius: 16px; background: #fff;
  box-shadow: 0 8px 40px #0002; color: #363636; text-align: center;
}
.cat-verification p { margin: 0 0 16px; }
.cat-verification button {
  display: block; margin: 16px auto 0; background: none; border: 0;
  color: #A072BD; cursor: pointer; font: inherit;
}

/* Follow the software keyboard immediately, without a second CSS animation. */
.cat-chat.is-keyboard-editing .cat-composer { transition: none; }

.cat-mobile-heading { display: none; }
@media (max-width: 640px) {
  html.cat-chat-open, .cat-chat-open body { overflow: hidden !important; overscroll-behavior: none; }
  .cat-chat-open body { position: fixed; inset: 0; width: 100%; height: 100%; }
  .portfolio-page.is-chat-open { display: none; }
  .cat-chat:not([hidden]) {
    position: absolute; inset: var(--mobile-viewport-top, 0px) 0 auto;
    height: var(--mobile-viewport-height, 100dvh); box-sizing: border-box;
    display: flex; flex-direction: column; gap: 0; padding: 8px 8px 20px;
  }
  .cat-chat.is-keyboard-editing { padding-bottom: 12px; }
  .cat-mobile-heading { display: block; flex: 0 0 auto; }
  .cat-mobile-heading .identity { padding: 8px 16px 12px; }
  .cat-transcript {
    position: relative; inset: auto; transform: none; width: 100%;
    flex: 1 1 0; min-height: 0; margin-bottom: 12px;
  }
  .cat-composer, .cat-chat.is-open .cat-composer {
    position: relative; inset: auto; transform: none; width: 100%;
    flex: 0 0 auto; transition: none;
  }
}