.support-root { font: 14px/1.45 system-ui, sans-serif; color: #24272b; letter-spacing: 0; }
.support-root [hidden] { display: none !important; }
.support-root button, .support-root textarea { font: inherit; letter-spacing: 0; }
.support-root button { cursor: pointer; }
.support-root button:disabled { opacity: .45; cursor: default; }
.support-root :focus-visible { outline: 2px solid #267b9b; outline-offset: 3px; }
.support-root svg { display: block; flex-shrink: 0; }
.support-root .support-toggle { position: fixed; right: 20px; bottom: 80px; z-index: 9999; display: grid; place-items: center; width: 54px; height: 54px; padding: 0; border: 0; border-radius: 50%; background: #cf3142; color: #fff; box-shadow: 0 5px 18px #0003; }
.support-root .unread-dot { position: absolute; right: -5px; top: -5px; min-width: 20px; height: 20px; padding: 0 4px; border-radius: 10px; background: #222; color: white; font: 11px/20px system-ui, sans-serif; }
.support-root .support-window { position: fixed; bottom: 146px; right: 20px; z-index: 9998; display: flex; flex-direction: column; width: min(380px, calc(100vw - 32px)); height: min(550px, calc(100dvh - 165px)); background: #fff; border: 1px solid #e1e4e8; border-radius: 8px; box-shadow: 0 12px 36px #0003; overflow: hidden; }
.support-root .support-header { display: flex; flex-shrink: 0; align-items: center; justify-content: space-between; gap: 8px; padding: 13px 16px; background: #cf3142; color: #fff; }
.support-root .support-header strong, .support-root .support-header small { display: block; }
.support-root .support-header strong { font-size: 15px; }
.support-root .support-header small { margin-top: 3px; font-size: 11px; }
.support-root .header-close { display: grid; place-items: center; flex-shrink: 0; width: 30px; height: 30px; padding: 0; border: 0; background: transparent; color: inherit; }
.support-root .support-actions { display: flex; flex-shrink: 0; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; min-height: 45px; padding: 7px 12px; border-bottom: 1px solid #e5e7eb; }
.support-root .support-actions button, .support-root .translation-note button, .support-root .original-button, .support-root .support-init-retry { padding: 4px 0; border: 0; background: transparent; color: #a92335; font-size: 12px; }
.support-root .support-messages { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 14px; background: #f7f8fa; }
.support-root .empty-chat { text-align: center; color: #777; padding: 48px 0; }
.support-root .chat-row { display: flex; margin-bottom: 10px; }
.support-root .chat-row.mine { justify-content: flex-end; }
.support-root .chat-bubble { min-width: 0; max-width: 88%; padding: 8px 11px; background: #fff; border: 1px solid #e7e9ec; border-radius: 8px; overflow-wrap: anywhere; }
.support-root .mine .chat-bubble { background: #cf3142; color: white; border-color: #cf3142; }
.support-root .chat-bubble p { white-space: pre-wrap; margin: 3px 0; }
.support-root .message-meta { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 10px; font-size: 10px; }
.support-root .message-time { font-variant-numeric: tabular-nums; }
.support-root .translation-note, .support-root .original-button { font-size: 11px; }
.support-root .mine .translation-note button { color: #fff; text-decoration: underline; }
.support-root .support-typing { padding: 5px 12px; color: #666; font-size: 12px; }
.support-root .support-error { flex-shrink: 0; max-height: 72px; overflow-y: auto; overflow-wrap: anywhere; padding: 6px 12px; color: #a92335; background: #fff4f4; font-size: 12px; }
.support-root .support-init-retry { flex-shrink: 0; }
.support-root .support-compose { display: flex; flex-shrink: 0; align-items: end; gap: 8px; margin: 0; padding: 10px; border-top: 1px solid #e5e7eb; }
.support-root .support-compose textarea { flex: 1; min-width: 0; height: 58px; max-height: 90px; resize: none; border: 1px solid #d4d8dd; border-radius: 5px; padding: 8px; background: #fff; color: #24272b; }
.support-root .support-compose button { display: grid; place-items: center; flex-shrink: 0; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 5px; background: #cf3142; color: #fff; }
@media (max-width: 480px) { .support-root .support-window { right: 16px; bottom: 142px; height: min(520px, calc(100dvh - 160px)); } .support-root .support-toggle { right: 16px; } }
@media (max-height: 500px) { .support-root .support-window { top: 8px; bottom: 8px; right: 80px; height: auto; width: min(380px, calc(100vw - 96px)); } .support-root .support-toggle { bottom: 16px; } }