.order-chat { overflow: hidden; margin-bottom: 1rem; scroll-margin-top: 96px; scroll-margin-bottom: 96px; }
.chat-button { position: fixed; right: max(20px, env(safe-area-inset-right)); bottom: calc(max(20px, env(safe-area-inset-bottom)) + var(--chat-viewport-bottom, 0px)); z-index: 1030; display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; font-size: 1.5rem; box-shadow: 0 3px 12px #0003; animation: chat-pulse 2.5s ease-in-out infinite; }
@keyframes chat-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.06); }
}
@media (prefers-reduced-motion: reduce) {
    .chat-button { animation: none; }
}
.chat-button[hidden], .order-chat [hidden], .support-chat-queue [hidden] { display: none !important; }
.order-chat .card-header { background: var(--bs-success, #198754); color: #fff; }
.chat-rating-star { font-size: 1.75rem; line-height: 1; color: #adb5bd; cursor: pointer; }
.chat-rating-star.chat-rating-selected { color: #b77900; }
.chat-rating-star:focus-within { outline: 2px solid var(--bs-success, #198754); outline-offset: 3px; }
.chat-messages { max-height: min(52vh, 480px); overflow-y: auto; padding: 1rem; background: #f2f5f3; }
.chat-message { width: fit-content; max-width: 90%; margin-bottom: .75rem; padding: .6rem .8rem; border-radius: 12px 12px 12px 2px; background: #fff; box-shadow: 0 1px 2px #0001; overflow-wrap: anywhere; }
.chat-message-own { margin-inline-start: auto; border-radius: 12px 12px 2px 12px; background: #dcf8e5; }
.chat-message-text { white-space: pre-wrap; margin: .25rem 0; }
.chat-message-translation { white-space: pre-wrap; margin: .25rem 0; padding-top: .25rem; border-top: 1px solid #59676040; color: #596760; }
.chat-email-prompt { border: 2px solid #d39e00; border-radius: .75rem; background: #fff3cd; color: #664d03; }
.chat-email-prompt .chat-email-input { flex: 1 1 180px; min-width: 0; }
.chat-email-prompt button { flex-shrink: 0; }
.chat-message-header { display: flex; align-items: center; gap: .4rem; font-size: .8rem; font-weight: 600; }
.chat-avatar { width: 25px; height: 25px; border-radius: 50%; object-fit: cover; }
.chat-message-footer { display: flex; justify-content: flex-end; gap: .3rem; font-size: .7rem; color: #596760; }
.chat-message-footer .chat-receipt-read { color: #1675b7; }
.chat-attachment { display: block; margin-top: .4rem; }
.chat-attachment img { display: block; max-width: 100%; max-height: 220px; border-radius: .4rem; }
.chat-input { resize: none; min-width: 0; overflow-y: hidden; }
.chat-assignment { display: flex; align-items: center; gap: .4rem; }
.chat-file-name { flex: 1; min-width: 0; }
.chat-file-preview { width: 72px; height: 72px; object-fit: contain; flex-shrink: 0; margin-bottom: .5rem; }
.chat-queue-list { overflow: hidden; }
.chat-queue-item { display: block; padding: 1rem; border-bottom: 1px solid #ddd; border-inline-start: 5px solid transparent; color: inherit; text-decoration: none; overflow-wrap: anywhere; }
.chat-queue-item:last-child { border-bottom: 0; }
.chat-queue-item-unanswered { background: #fff3cd; border-inline-start-color: #d39e00; color: #664d03; }
.chat-queue-item-answered { background: #f8f9fa; border-inline-start-color: #adb5bd; color: #495057; }
.chat-queue-item-unanswered:hover, .chat-queue-item-unanswered:focus { background: #ffe69c; }
.chat-queue-item-answered:hover, .chat-queue-item-answered:focus { background: #e9ecef; }
.chat-queue-item:focus-visible { outline: 3px solid #0d6efd; outline-offset: -3px; }
.chat-queue-preview { margin-top: .4rem; white-space: pre-wrap; overflow-wrap: anywhere; }
@media (min-width: 992px) {
    .chat-result-column { position: sticky; top: 100px; align-self: flex-start; }
}
@media (max-width: 575px) {
    .chat-messages { padding: .6rem; }
    .chat-message { max-width: 95%; }
}

.chat-photo-comparison {position: relative; max-width: 100%; width: 400px; --chat-photo-position: 50%;}
.chat-photo-comparison img {display: block; width: 100%; height: auto;}
.chat-photo-after {position: absolute; inset: 0; overflow: hidden; clip-path: inset(0 0 0 var(--chat-photo-position));}
.chat-photo-comparison::after {content: ""; position: absolute; top: 0; bottom: 0; left: var(--chat-photo-position); width: 2px; background: #fff; box-shadow: 0 0 0 1px #0008; transform: translateX(-50%); pointer-events: none;}
.chat-photo-slider {position: absolute; z-index: 1; top: 0; left: -16px; width: calc(100% + 32px); height: 100%; margin: 0; direction: ltr; appearance: none; -webkit-appearance: none; background: transparent; cursor: ew-resize;}
.chat-photo-slider::-webkit-slider-runnable-track {height: 2px; background: transparent;}
.chat-photo-slider::-webkit-slider-thumb {appearance: none; -webkit-appearance: none; width: 32px; height: 32px; margin-top: -15px; border: 2px solid #fff; border-radius: 50%; background: var(--bs-success, #198754); box-shadow: 0 1px 4px #0008;}
.chat-photo-slider::-moz-range-track {height: 2px; background: transparent;}
.chat-photo-slider::-moz-range-thumb {box-sizing: border-box; width: 32px; height: 32px; border: 2px solid #fff; border-radius: 50%; background: var(--bs-success, #198754); box-shadow: 0 1px 4px #0008;}
.chat-photo-slider:focus-visible {outline: 2px solid var(--bs-success, #198754); outline-offset: 2px;}