/* Homepage client-care examples; overlapping scenes reserve the tallest layout. */
.care-chat-scenes { display: grid; }
.care-chat-scene { grid-area: 1 / 1; min-width: 0; visibility: hidden; opacity: 0; transform: translateY(8px); transition: opacity .35s ease, transform .35s ease; }
.care-chat-scene[data-active] { visibility: visible; opacity: 1; transform: none; }
.care-chat-response { display: grid; }
.care-chat-response > * { grid-area: 1 / 1; }
.care-chat-response .care-team-reply { transition: opacity .35s ease, transform .35s ease; }
.care-chat-typing { display: flex; align-items: center; gap: 12px; align-self: start; min-height: 36px; color: #667082; font-size: 12px; visibility: hidden; }
.care-chat-typing > span { display: flex; align-items: center; gap: 4px; padding: 12px 10px; border-radius: 14px; background: #f0f3f9; }
.care-chat-typing i { width: 4px; height: 4px; border-radius: 50%; background: #64799c; }
.care-chat-scenes[data-phase="typing"] .care-chat-scene[data-active] .care-chat-typing { visibility: visible; }
.care-chat-scenes[data-phase="typing"] .care-team-reply { opacity: 0; visibility: hidden; transform: translateY(6px); }
.care-chat-scenes[data-phase="typing"] .care-chat-scene[data-active] .care-chat-typing i { animation: care-chat-dot 1s ease-in-out infinite; }
.care-chat-typing i:nth-child(2) { animation-delay: .15s !important; }
.care-chat-typing i:nth-child(3) { animation-delay: .3s !important; }
.care-chat-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: -4px 0 14px; color: #526580; font-size: 11px; }
.care-chat-controls[hidden] { display: none; }
.care-chat-topic { flex: 1 1 120px; font-weight: 600; }
.care-chat-count { font-variant-numeric: tabular-nums; margin-right: 4px; font-size: 10px; }
.care-chat-controls button { min-height: 36px; padding: 5px 9px; border: 1px solid #e3e9f4; border-radius: 8px; background: #f8faff; color: #365d93; font: inherit; cursor: pointer; }
.care-chat-controls button:hover { background: #edf1ff; }
.care-chat-controls button:focus-visible { outline: 2px solid #3982f2; outline-offset: 3px; }
@keyframes care-chat-dot { 0%, 70%, 100% { transform: none; opacity: .45; } 35% { transform: translateY(-3px); opacity: 1; } }
@media (max-width: 540px) {
  .care-chat-scene .care-request-bubble { padding: 18px; gap: 10px; }
  .care-chat-controls button { min-height: 44px; }
}
/* Keep the shared chat typography consistent inside the service-page theme. */
.care-page .care-mini-portal .care-portal-greeting { font-size: 27px; line-height: 1.15; color: #14203a; }
.care-page .care-mini-portal .care-request-bubble p { font-size: 16px; line-height: 1.5; color: #34415c; }
.care-page .care-mini-portal .care-team-reply p { font-size: 13px; line-height: 1.5; color: #667082; }