#comfy-chat { --cc-bottom: 20px; --cc-height: calc(100dvh - 100px); position: fixed; right: max(20px, env(safe-area-inset-right)); bottom: var(--cc-bottom); z-index: 70; font-family: Bahnschrift, Arial, sans-serif; font-size: 15px; line-height: 1.5; color: #153b41; }
#comfy-chat *, #comfy-chat *::before, #comfy-chat *::after { box-sizing: border-box; }
#comfy-chat button, #comfy-chat input { font: inherit; }
#comfy-chat button, #comfy-chat a { -webkit-tap-highlight-color: transparent; }
#comfy-chat button { cursor: pointer; }
#comfy-chat :focus-visible { outline: 3px solid #ee981c; outline-offset: 3px; }
#comfy-chat .cc-launcher { display: flex; align-items: center; justify-content: center; gap: 9px; margin-left: auto; min-height: 52px; padding: 12px 19px; border: 1px solid #07828b; border-radius: 28px; background: #087e86; color: white; box-shadow: 0 5px 20px #123e4430; font-weight: 700; }
#comfy-chat .cc-launcher:hover { background: #066971; }
#comfy-chat .cc-panel { position: absolute; bottom: 64px; right: 0; display: flex; flex-direction: column; width: 380px; max-width: calc(100vw - 24px); height: 580px; max-height: var(--cc-height); overflow: hidden; border: 1px solid #c9e2e3; border-radius: 20px; background: #fffef7; box-shadow: 0 12px 48px #14393e30; }
#comfy-chat .cc-panel[hidden] { display: none; }
#comfy-chat .cc-header { display: flex; flex-shrink: 0; align-items: center; gap: 11px; padding: 16px; background: #087e86; color: white; }
#comfy-chat .cc-header h2 { margin: 0; color: white; font-size: 18px; line-height: 1.3; }
#comfy-chat .cc-header p { margin: 3px 0 0; color: #e2f6f5; font-size: 12px; }
#comfy-chat .cc-avatar { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: white; color: #087e86; font-size: 24px; font-weight: 700; }
#comfy-chat .cc-close { margin-left: auto; border: 0; background: transparent; color: white; width: 44px; height: 44px; border-radius: 8px; font-size: 28px; }
#comfy-chat .cc-close:hover { background: #ffffff20; }
#comfy-chat .cc-history { flex: 1; min-height: 80px; overflow-y: auto; overscroll-behavior: contain; padding: 16px; }
#comfy-chat .cc-message { width: fit-content; max-width: 94%; margin-bottom: 15px; }
#comfy-chat .cc-message p { margin: 0; padding: 11px 13px; border-radius: 3px 14px 14px; background: #edf5f4; color: #173b41; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; }
#comfy-chat .cc-message-label { display: block; margin: 0 3px 4px; font-size: 11px; color: #526d71; }
#comfy-chat .cc-message--user { margin-left: auto; }
#comfy-chat .cc-message--user .cc-message-label { text-align: right; }
#comfy-chat .cc-message--user p { background: #087e86; color: white; border-radius: 14px 3px 14px 14px; }
#comfy-chat .cc-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 9px; }
#comfy-chat .cc-actions a { display: inline-block; padding: 9px 11px; border: 1px solid #abcfd0; border-radius: 9px; color: #08636c; background: white; font-size: 13px; text-decoration: none; }
#comfy-chat .cc-actions a:hover { background: #e3f2f1; }
#comfy-chat .cc-topics { flex-shrink: 0; margin: 0; padding: 0; border: 0; border-top: 1px solid #dbe9e7; border-radius: 0; background: white; }
#comfy-chat .cc-topics summary { padding: 10px 16px; cursor: pointer; font-size: 13px; font-weight: 700; }
#comfy-chat .cc-topic-list { max-height: 130px; overflow: auto; overscroll-behavior: contain; display: flex; flex-wrap: wrap; gap: 7px; padding: 0 12px 12px; }
#comfy-chat .cc-topic-list button { text-align: left; border: 1px solid #c9e0df; border-radius: 12px; padding: 9px 11px; background: white; color: #12636a; font-size: 13px; }
#comfy-chat .cc-topic-list button:hover { background: #eef8f7; }
#comfy-chat .cc-form { display: flex; flex-shrink: 0; gap: 8px; padding: 12px 12px 6px; background: white; margin: 0; }
#comfy-chat .cc-form input { flex: 1; width: 0; min-width: 0; min-height: 44px; padding: 10px 12px; border: 1px solid #bbd5d5; border-radius: 12px; background: white; color: #173b41; font-size: 16px; }
#comfy-chat .cc-form button { min-width: 48px; border: 0; border-radius: 12px; background: #087e86; color: white; padding: 10px; }
#comfy-chat .cc-note { margin: 0; padding: 5px 12px 11px; background: white; text-align: center; font-size: 11px; color: #586b6d; }
#comfy-chat .cc-note a { color: #07666e; text-decoration: underline; }
#comfy-chat .cc-sr { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
#comfy-chat.cc-compact .cc-header { padding: 6px 12px; }
#comfy-chat.cc-compact .cc-topic-list { max-height: 60px; }
#comfy-chat.cc-compact .cc-history { min-height: 40px; }
#comfy-chat.cc-compact .cc-note { display: none; }
@media (max-width: 600px) { #comfy-chat { right: max(12px, env(safe-area-inset-right)); } #comfy-chat .cc-panel { width: min(380px, calc(100vw - 24px)); border-radius: 16px; } #comfy-chat .cc-launcher { width: 52px; min-height: 52px; padding: 0; border-radius: 50%; } #comfy-chat .cc-launcher span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } #comfy-chat .cc-panel { bottom: 62px; } }
@media (max-height: 500px) { #comfy-chat .cc-header { padding: 6px 12px; } #comfy-chat .cc-topic-list { max-height: 70px; } #comfy-chat .cc-note { display: none; } }