.support-chat { position: relative; display: flex; flex-direction: column; overflow: hidden; border: 1px solid #e5e7eb; border-radius: 1rem; background: #fff; color: #111827; }
.support-chat [hidden] { display: none !important; }
.support-chat-header { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem 1.25rem; border-bottom: 1px solid #e5e7eb; }
.support-chat-connection { margin-top: .25rem; font-size: .75rem; color: #6b7280; }
.support-chat-status { padding: .25rem .6rem; border-radius: 999px; font-size: .75rem; font-weight: 600; background: #f3f4f6; color: #4b5563; }
.support-chat-notice { padding: .65rem 1.25rem; background: #f9fafb; border-bottom: 1px solid #f3f4f6; font-size: .8rem; line-height: 1.5; color: #6b7280; }
.support-chat-history { height: clamp(18rem, 48dvh, 38rem); min-height: 15rem; overflow-y: auto; overscroll-behavior: contain; padding: 1.25rem; background: #fafafa; }
.support-chat-empty { padding: 4rem 1rem; text-align: center; }
.support-chat-messages { display: flex; flex-direction: column; gap: 1rem; }
.support-chat-message { display: flex; justify-content: flex-start; }
.support-chat-bubble { max-width: min(85%, 38rem); padding: .75rem 1rem; border: 1px solid #e5e7eb; border-radius: 1rem 1rem 1rem .2rem; background: #fff; }
.support-chat[data-support-chat-viewer-admin-value="false"] [data-sender-role="member"],
.support-chat[data-support-chat-viewer-admin-value="true"] [data-sender-role="admin"] { justify-content: flex-end; }
.support-chat[data-support-chat-viewer-admin-value="false"] [data-sender-role="member"] .support-chat-bubble,
.support-chat[data-support-chat-viewer-admin-value="true"] [data-sender-role="admin"] .support-chat-bubble { border-color: #ddd6fe; border-radius: 1rem 1rem .2rem 1rem; background: #f5f3ff; }
.support-chat-sender { margin-bottom: .3rem; font-size: .7rem; font-weight: 700; color: #6b7280; }
.support-chat-body { white-space: pre-wrap; overflow-wrap: anywhere; font-size: .875rem; line-height: 1.6; }
.support-chat-meta { display: flex; justify-content: flex-end; gap: .5rem; margin-top: .5rem; color: #6b7280; font-size: .65rem; }
.support-chat-attachments { display: grid; gap: .5rem; margin-top: .5rem; }
.support-chat-attachment { overflow: hidden; border: 1px solid #e5e7eb; border-radius: .6rem; background: #fff; }
.support-chat-image { display: block; max-height: 16rem; width: 100%; min-width: 6rem; object-fit: contain; background: #f3f4f6; }
.support-chat-download { display: flex; flex-direction: column; gap: .2rem; padding: .65rem .75rem; color: #6d28d9; font-size: .8rem; overflow-wrap: anywhere; }
.support-chat-download:hover { background: #faf5ff; }
.support-chat-file-size { color: #6b7280; font-size: .7rem; }
.support-chat-new { align-self: center; margin: .5rem; padding: .45rem .9rem; border-radius: 999px; color: #fff; background: #6d28d9; font-size: .75rem; cursor: pointer; }
.support-chat-error { padding: .7rem 1.25rem; background: #fef2f2; color: #b91c1c; font-size: .8rem; }
.support-chat-composer { padding: 1rem 1.25rem; border-top: 1px solid #e5e7eb; }
.support-chat-input { width: 100%; min-height: 5rem; max-height: 12rem; resize: vertical; padding: .75rem; border: 1px solid #d1d5db; border-radius: .75rem; font-size: .875rem; line-height: 1.5; }
.support-chat-input:focus { outline: 2px solid #8b5cf6; outline-offset: 1px; }
.support-chat-composer-actions { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-top: .65rem; }
.support-chat-attach { display: inline-block; color: #6d28d9; font-size: .8rem; font-weight: 600; cursor: pointer; }
.support-chat-file-input { display: block; max-width: 100%; margin-top: .35rem; font-size: .7rem; color: #6b7280; }
.support-chat-file-input::file-selector-button { padding: .3rem .6rem; margin-right: .5rem; border: 1px solid #e5e7eb; border-radius: .4rem; background: #f9fafb; color: #374151; cursor: pointer; }
.support-chat-hint { margin-top: .4rem; color: #6b7280; font-size: .65rem; line-height: 1.5; }
.support-chat-send { padding: .65rem 1rem; border-radius: .65rem; background: #6d28d9; color: #fff; font-size: .8rem; font-weight: 600; white-space: nowrap; cursor: pointer; }
.support-chat-send:hover { background: #5b21b6; }
.support-chat-send:disabled, .support-chat-secondary:disabled { opacity: .5; cursor: wait; }
.support-chat-secondary { padding: .4rem .65rem; border: 1px solid #d1d5db; border-radius: .5rem; background: #fff; color: #4b5563; font-size: .75rem; cursor: pointer; }
.support-chat-files { display: flex; align-items: center; flex-wrap: nowrap; gap: .5rem; max-width: 100%; margin-bottom: .55rem; padding: .2rem .15rem .4rem; overflow-x: auto; overflow-y: hidden; overscroll-behavior: contain; }
.support-chat-files:empty { display: none; }
.support-chat-file-chip { display: inline-flex; align-items: center; flex: 0 0 auto; gap: .35rem; max-width: min(14rem, calc(100% - .5rem)); padding: .35rem .6rem; border-radius: .5rem; background: #f3f4f6; color: #4b5563; font-size: .75rem; }
.support-chat-file-chip-name { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.support-chat-file-remove { display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; flex-shrink: 0; border-radius: 50%; cursor: pointer; }
.support-chat-file-remove:hover { background: #e5e7eb; }
.support-chat-file-remove:focus-visible { outline: 2px solid #8b5cf6; outline-offset: 2px; }
.support-chat-file-remove:disabled { opacity: .5; cursor: default; }
.support-chat-file-preview { position: relative; display: block; flex: 0 0 5rem; width: 5rem; height: 5rem; overflow: hidden; border: 1px solid #e4e4e7; border-radius: .85rem; background: #eaeaee; }
.support-chat-file-preview-image { display: block; width: 100%; height: 100%; object-fit: cover; }
.support-chat-file-preview-fallback { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; padding: 1.5rem .35rem .35rem; overflow: hidden; color: #52525b; font-size: .6rem; line-height: 1.3; text-align: center; overflow-wrap: anywhere; }
.support-chat .support-chat-file-preview .support-chat-file-preview-remove { position: absolute; top: .2rem; right: .2rem; width: 1.4rem; height: 1.4rem; border: 1px solid rgb(255 255 255 / 40%); border-radius: 50%; background: rgb(24 24 27 / 80%); color: #fff; font-size: 1rem; line-height: 1; }
.support-chat .support-chat-file-preview .support-chat-file-preview-remove:hover { background: #18181b; color: #fff; }
.support-chat .support-chat-file-preview .support-chat-file-preview-remove:focus-visible { outline: 2px solid #c4b5fd; outline-offset: -3px; }
.support-inbox-link { display: block; padding: 1rem 1.25rem; border-bottom: 1px solid #f3f4f6; }
.support-inbox-link:last-child { border-bottom: 0; }
.support-inbox-link:hover { background: #f9fafb; }
@media (max-width: 640px) {
  .support-chat-header { align-items: flex-start; flex-wrap: wrap; padding: .9rem; }
  .support-chat-history { padding: .8rem; height: 44dvh; }
  .support-chat-bubble { max-width: 92%; }
  .support-chat-composer { padding: .8rem; }
  .support-chat-composer-actions { flex-wrap: wrap; gap: .65rem; }
  .support-chat-send { width: 100%; }
}