@ticketping/chat-widget/dist/widget.css

Customer support chat widget for Ticketping - Intercom-like experience with real-time messaging

:root{--tp-primary-color:#3b82f6;--tp-primary-button-text:#fff;--tp-primary-hover:#2563eb;--tp-text-primary:#374151;--tp-text-secondary:#747d8f;--tp-text-muted:#c3c5ca;--tp-background:#fff;--tp-background-secondary:#f9fafb;--tp-background-tertiary:#e5e7eb;--tp-border:#e9e9e9;--tp-border-light:#f3f3f3;--tp-notification-bg:#ff4757;--tp-success-color:#4caf50;--tp-offline-color:#9e9e9e;--tp-error-bg:#ffebee;--tp-error-text:#c62828;--tp-error-border:#f44336;--tp-pulse-color:#667eea;--tp-pulse-color-70:rgba(102,126,234,.7);--tp-pulse-color-0:rgba(102,126,234,0);--tp-shadow-light:hsla(0,0%,6%,.06);--tp-shadow-medium:hsla(0,0%,6%,.16);--tp-shadow-dark:rgba(9,14,21,.06);--tp-shadow:0 4px 12px hsla(0,0%,6%,.1);--tp-shadow-hover:0 6px 20px rgba(0,0,0,.25);--tp-shadow-card:0px 4px 28px 0px hsla(0,0%,6%,.06),0px 1px 4px 0px hsla(0,0%,6%,.06);--tp-shadow-tab:0px 0px 25px 0px hsla(0,0%,6%,.06);--tp-shadow-send-btn:0px 0px 25px 0px rgba(9,14,21,.06),0px 0px 25px 0px rgba(9,14,21,.06);--tp-border-radius:16px;--tp-border-radius-small:8px;--tp-border-radius-large:16px;--tp-spacing-xs:4px;--tp-spacing-sm:8px;--tp-spacing-md:12px;--tp-spacing-lg:16px;--tp-spacing-xl:20px;--tp-spacing-xxl:24px;--tp-font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;--tp-font-size-xs:11px;--tp-font-size-sm:12px;--tp-font-size-base:14px;--tp-font-size-lg:16px;--tp-font-size-2xl:24px;--tp-font-weight-normal:400;--tp-font-weight-medium:500;--tp-font-weight-semibold:600;--tp-z-index:999999;--tp-animation-speed:.3s;--tp-animation-speed-fast:.15s;--tp-animation-easing:cubic-bezier(.25,.46,.45,.94)}[data-theme=dark]{--tp-text-primary:#fff;--tp-text-secondary:#e9ecef;--tp-text-muted:#adb5bd;--tp-background:#1a1a1a;--tp-background-secondary:#2d2d2d;--tp-background-tertiary:#404040;--tp-border:#404040;--tp-border-light:#333}.ticketping-widget,.ticketping-widget *{box-sizing:border-box;margin:0;padding:0}.ticketping-widget{bottom:var(--tp-spacing-xl);color:var(--tp-text-primary);direction:ltr;font-family:var(--tp-font-family);font-size:var(--tp-font-size-base);position:fixed;right:var(--tp-spacing-xl);z-index:var(--tp-z-index)}.ticketping-widget.position-bottom-left{left:var(--tp-spacing-xl);right:auto}.ticketping-chat-bubble{align-items:center;background:linear-gradient(135deg,var(--tp-primary-color) 0,var(--tp-primary-hover) 100%);border:none;border-radius:50%;box-shadow:var(--tp-shadow);cursor:pointer;display:flex;height:60px;justify-content:center;outline:none;overflow:hidden;position:relative;transition:all var(--tp-animation-speed) var(--tp-animation-easing);width:60px}.ticketping-chat-bubble:hover{box-shadow:var(--tp-shadow-hover)}.ticketping-chat-bubble:focus-visible{outline:2px solid var(--tp-primary-color);outline-offset:2px}.ticketping-chat-bubble.pulse{animation:tp-pulse 2s infinite}@keyframes tp-pulse{0%{box-shadow:var(--tp-shadow),0 0 0 0 var(--tp-pulse-color-70)}70%{box-shadow:var(--tp-shadow),0 0 0 20px var(--tp-pulse-color-0)}to{box-shadow:var(--tp-shadow),0 0 0 0 var(--tp-pulse-color-0)}}.ticketping-chat-bubble svg{height:28px;width:28px;fill:#fff;transition:transform var(--tp-animation-speed) ease}.ticketping-chat-bubble.open svg{transform:rotate(180deg)}.ticketping-chat-bubble .notification-badge{align-items:center;background:var(--tp-notification-bg);border:2px solid #fff;border-radius:50%;color:#fff;display:flex;font-size:var(--tp-font-size-xs);font-weight:var(--tp-font-weight-semibold);height:20px;justify-content:center;position:absolute;right:-2px;top:-2px;width:20px}.ticketping-chat-window{background:var(--tp-background);border:1px solid var(--tp-border);border-radius:var(--tp-border-radius);bottom:0;box-shadow:var(--tp-shadow-medium) 0 5px 40px 0;display:flex;flex-direction:column;height:600px;opacity:0;overflow:hidden;pointer-events:none;position:absolute;right:0;transform:scale(.8) translate(0);transform-origin:bottom right;transition:transform .3s cubic-bezier(0,1.2,1,1),opacity .15s ease-out,visibility .15s ease-out;visibility:hidden;width:380px;z-index:2147483000}.ticketping-chat-window.open{opacity:1;pointer-events:all;transform:scale(1) translate(0);transition:transform .3s cubic-bezier(0,1.2,1,1),opacity .3s ease-out,visibility .3s ease-out;visibility:visible}@media (max-width:480px){.ticketping-chat-window{border-radius:0;bottom:0;box-shadow:none;height:100dvh;left:0;position:fixed;right:0;width:100vw}body:has(.ticketping-chat-window.open){overflow:hidden!important}}.ticketping-chat-header{padding:28px 36px}.ticketping-chat-header,.ticketping-messages-header{align-items:center;display:flex;justify-content:space-between;min-height:60px}.ticketping-messages-header{background:var(--tp-background);border-bottom:1px solid var(--tp-border-light);max-height:60px;padding:20px}.ticketping-tab-heading{color:var(--tp-text-primary);font-size:var(--tp-font-size-lg);font-weight:var(--tp-font-weight-semibold)}.ticketping-workspace-logo img{border-radius:12px;max-height:40px;max-width:100%;-o-object-fit:scale-down;object-fit:scale-down}.ticketping-chat-header-content p{font-size:var(--tp-font-size-base);margin-top:2px;opacity:.9}.ticketping-close-btn{align-items:center;background:none;border:none;border-radius:var(--tp-border-radius-small);color:var(--tp-text-secondary);cursor:pointer;display:flex;height:32px;justify-content:center;padding:var(--tp-spacing-xs);position:absolute;right:20px;top:24px;transition:background var(--tp-animation-speed-fast) ease;width:32px}.ticketping-close-btn:hover{background:var(--tp-background-tertiary)}.ticketping-close-btn svg{height:16px;width:16px;fill:currentColor}.ticketping-close-btn-2{align-items:center;background:none;border:none;border-radius:var(--tp-border-radius-small);color:var(--tp-text-secondary);cursor:pointer;display:flex;height:32px;justify-content:center;padding:var(--tp-spacing-xs);transition:background var(--tp-animation-speed-fast) ease;width:32px}.ticketping-close-btn-2:hover{background:var(--tp-background-tertiary)}.ticketping-close-btn-2 svg{height:16px;width:16px;fill:currentColor}.ticketping-back-btn{align-items:center;background:none;border:none;border-radius:var(--tp-border-radius-small);color:var(--tp-text-secondary);cursor:pointer;display:flex;height:32px;justify-content:center;opacity:0;padding:var(--tp-spacing-xs);pointer-events:none;transform:translate(-20px);transition:all var(--tp-animation-speed) var(--tp-animation-easing);width:32px}.ticketping-back-btn.show{opacity:1;pointer-events:auto;transform:translate(0)}.ticketping-back-btn:hover{background:var(--tp-background-tertiary)}.ticketping-back-btn svg{height:16px;width:16px;fill:currentColor}.agent-status{align-items:center;display:flex;font-size:var(--tp-font-size-sm);gap:var(--tp-spacing-sm);opacity:.9}.agent-status-dot{animation:tp-pulse-dot 2s infinite;background:var(--tp-success-color);border-radius:50%;height:8px;width:8px}.agent-status-dot.offline{animation:none;background:var(--tp-offline-color)}@keyframes tp-pulse-dot{0%,to{opacity:1}50%{opacity:.5}}.ticketping-chat-tabs{background-color:var(--tp-background);border-top:1px solid var(--tp-border-light);box-shadow:var(--tp-shadow-tab);display:flex;flex-direction:row;height:80px;justify-content:space-between;padding:0}.ticketping-tab{align-items:center;background:none;border:none;color:var(--tp-text-secondary);cursor:pointer;display:flex;flex-direction:column;font-family:inherit;font-size:var(--tp-font-size-base);font-weight:var(--tp-font-weight-normal);justify-content:center;line-height:21px;padding:var(--tp-spacing-md) var(--tp-spacing-xl);row-gap:.25rem;transition:all var(--tp-animation-speed-fast) ease;width:100%}.ticketping-tab.active,.ticketping-tab:hover{color:var(--tp-text-primary)}.ticketping-tab.active{font-weight:var(--tp-font-weight-medium)}.ticketping-tab .icon-active{display:none}.ticketping-tab .icon-inactive,.ticketping-tab.active .icon-active{display:block}.ticketping-tab.active .icon-inactive{display:none}.ticketping-chat-content{flex:1;overflow:hidden;position:relative}.ticketping-tab-content{display:flex;flex-direction:column;inset:0;opacity:0;position:absolute;transition:all var(--tp-animation-speed) ease;visibility:hidden}.ticketping-tab-content.active{opacity:1;visibility:visible}.ticketping-home-container{display:flex;flex-direction:column;height:100%;justify-content:space-between}.ticketping-home-content{padding:28px 36px}.ticketping-home-content h4{color:var(--tp-text-primary)}.ticketping-home-content h4,.ticketping-home-content p{font-size:var(--tp-font-size-2xl);font-weight:var(--tp-font-weight-semibold)}.ticketping-home-content p{color:var(--tp-text-secondary);line-height:1.5;margin-bottom:var(--tp-spacing-xxl)}.ticketping-actions-container{display:flex;flex-direction:column;gap:var(--tp-spacing-md);padding:20px 28px}.ticketping-recent-conversation{background:var(--tp-background);border:1px solid var(--tp-border);border-radius:var(--tp-border-radius-small);border-radius:12px;box-shadow:var(--tp-shadow-card);cursor:pointer;margin-bottom:var(--tp-spacing-md);overflow:hidden;padding:0;transition:box-shadow .15s;transition:all var(--tp-animation-speed) ease}.ticketping-recent-conversation:hover{color:var(--tp-text-primary);transform:translateY(-1px)}.ticketping-recent-conversation-header{padding:var(--tp-spacing-md) var(--tp-spacing-lg)}.ticketping-recent-conversation-title{color:var(--tp-text-secondary);font-size:var(--tp-font-size-xs);font-weight:var(--tp-font-weight-medium);letter-spacing:.05em;text-transform:uppercase}.ticketping-recent-conversation-item{padding:0 var(--tp-spacing-md) var(--tp-spacing-md) var(--tp-spacing-lg);position:relative;transition:background var(--tp-animation-speed-fast) ease}.ticketping-recent-conversation-preview{color:var(--tp-text-primary);font-size:var(--tp-font-size-base);font-weight:var(--tp-font-weight-medium);line-height:1.4;margin-bottom:var(--tp-spacing-xs);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ticketping-recent-conversation-time{color:var(--tp-text-muted);font-size:var(--tp-font-size-sm)}.ticketping-plug{align-items:center;display:flex;justify-content:center;padding:var(--tp-spacing-sm) var(--tp-spacing-md)}.ticketping-plug a{color:var(--tp-text-muted);font-size:var(--tp-font-size-xs);text-decoration:none;transition:color var(--tp-animation-speed-fast) ease}.ticketping-plug a:hover{color:var(--tp-text-secondary)}.ticketping-start-conversation-btn{align-items:center;background:var(--tp-background);border:1px solid var(--tp-border);border-radius:12px;box-shadow:var(--tp-shadow-card);box-sizing:border-box;cursor:pointer;display:flex;font-family:inherit;justify-content:space-between;margin-bottom:var(--tp-spacing-lg);overflow:hidden;padding:16px 20px;position:relative;transition:box-shadow .15s;transition:all var(--tp-animation-speed) ease;width:100%}.ticketping-start-conversation-btn:hover{color:var(--tp-text-primary);transform:translateY(-1px)}.ticketping-start-conversation-btn:active{transform:translateY(0)}.ticketping-start-conversation-btn-content{align-items:flex-start;display:flex;flex-direction:column;gap:var(--tp-spacing-xs)}.ticketping-start-conversation-btn-text{color:var(--tp-text-primary);font-size:var(--tp-font-size-base);font-weight:var(--tp-font-weight-medium);margin-bottom:var(--tp-spacing-xs)}.ticketping-start-conversation-btn-subtext{color:var(--tp-text-secondary);font-size:var(--tp-font-size-sm);font-weight:var(--tp-font-weight-normal)}.ticketping-messages-content{display:flex;flex:1;flex-direction:column;min-height:0}.ticketping-send-a-message-container{bottom:24px;display:flex;left:50%;opacity:0;pointer-events:none;position:absolute;transform:translate(-50%)}.ticketping-send-a-message-container.show{opacity:1;pointer-events:auto}.ticketping-send-message-btn{align-items:center;background:var(--tp-primary-color);border:1px solid var(--tp-primary-color);border-radius:10px;box-shadow:var(--tp-shadow-send-btn);box-sizing:border-box;color:inherit;color:var(--tp-primary-button-text);cursor:pointer;display:flex;font-size:14px;font-weight:600;gap:16px;justify-content:center;line-height:20px;max-width:100%;padding:10px 16px;pointer-events:auto;position:relative;transition:color .2s,background-color .2s,box-shadow .2s ease-in-out,transform .2s ease-in-out;white-space:nowrap;width:-moz-fit-content;width:fit-content}.ticketping-send-message-btn:hover{transform:translateY(-1px)}.ticketping-send-message-btn:active{transform:translateY(0)}.ticketping-conversation-container{display:flex;flex:1;flex-direction:column;position:relative}.ticketping-conversation-list{display:flex;flex-direction:column;inset:0;max-height:100%;opacity:0;overflow-y:auto;pointer-events:none;position:absolute;transform:translate(20px);transition:opacity var(--tp-animation-speed) var(--tp-animation-easing),transform var(--tp-animation-speed) var(--tp-animation-easing);visibility:hidden}.ticketping-conversation-list.show{opacity:1;pointer-events:auto;transform:translate(0);visibility:visible}.ticketping-conversation-item{border-bottom:1px solid var(--tp-border-light);cursor:pointer;padding:var(--tp-spacing-lg) var(--tp-spacing-xl);position:relative;transition:background var(--tp-animation-speed-fast) ease}.ticketping-conversation-item.active,.ticketping-conversation-item:hover{background:var(--tp-background-secondary)}.ticketping-conversation-item.active{border-left:3px solid var(--tp-primary-color)}.ticketping-conversation-preview{color:var(--tp-text-primary);font-size:var(--tp-font-size-base);font-weight:var(--tp-font-weight-medium);margin-bottom:var(--tp-spacing-xs);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ticketping-conversation-time{color:var(--tp-text-muted);font-size:var(--tp-font-size-sm)}.ticketping-conversation-unread{background:var(--tp-primary-color);border-radius:50%;color:#fff;font-size:var(--tp-font-size-xs);font-weight:var(--tp-font-weight-semibold);height:20px;position:absolute;right:var(--tp-spacing-lg);top:50%;transform:translateY(-50%);width:20px}.empty-state,.ticketping-conversation-unread{align-items:center;display:flex;justify-content:center}.empty-state{height:100%;padding:var(--tp-spacing-xxl)}.empty-state-content{text-align:center}.empty-state-content p{color:var(--tp-text-secondary);font-size:var(--tp-font-size-base);font-weight:var(--tp-font-weight-medium);margin-bottom:var(--tp-spacing-sm)}.empty-state-subtext{color:var(--tp-text-muted);font-size:var(--tp-font-size-sm);font-weight:var(--tp-font-weight-normal)}.active-conversation{display:flex;flex-direction:column;height:100%}.ticketping-messages-list{flex:1;overflow-y:auto;padding:var(--tp-spacing-lg);scroll-behavior:smooth}.ticketping-message{animation:tp-slide-in var(--tp-animation-speed) ease;margin-bottom:var(--tp-spacing-lg);max-width:90%}.ticketping-message.grouped{margin-bottom:var(--tp-spacing-xs)}.ticketping-message.grouped.last-in-group{margin-bottom:var(--tp-spacing-lg)}.ticketping-message.user.grouped:not(.first-in-group) .ticketping-message-bubble{border-top-right-radius:var(--tp-spacing-xs)}.ticketping-message.user.grouped:not(.last-in-group) .ticketping-message-bubble{border-bottom-right-radius:var(--tp-spacing-xs)}.ticketping-message.agent.grouped:not(.first-in-group) .ticketping-message-bubble,.ticketping-message.system.grouped:not(.first-in-group) .ticketping-message-bubble{border-top-left-radius:var(--tp-spacing-xs)}.ticketping-message.agent.grouped:not(.last-in-group) .ticketping-message-bubble,.ticketping-message.system.grouped:not(.last-in-group) .ticketping-message-bubble{border-bottom-left-radius:var(--tp-spacing-xs)}@keyframes tp-slide-in{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.ticketping-message.user{margin-left:auto;width:-moz-fit-content;width:fit-content}.ticketping-message.agent,.ticketping-message.system{margin-right:auto;width:-moz-fit-content;width:fit-content}.ticketping-message-bubble{border-radius:var(--tp-border-radius-large);font-size:var(--tp-font-size-base);line-height:1.4;padding:var(--tp-spacing-md) var(--tp-spacing-lg);word-wrap:break-word;position:relative}.ticketping-message.agent .ticketping-message-bubble,.ticketping-message.system .ticketping-message-bubble,.ticketping-message.user .ticketping-message-bubble{background:var(--tp-background-secondary);color:var(--tp-text-primary)}.ticketping-message-time{color:var(--tp-text-muted);font-size:var(--tp-font-size-sm);margin-top:var(--tp-spacing-xs);text-align:right}.ticketping-message.agent .ticketping-message-time,.ticketping-message.system .ticketping-message-time{text-align:left}.ticketping-date-separator{align-items:center;display:flex;margin:var(--tp-spacing-xl) 0;padding:0 var(--tp-spacing-lg)}.ticketping-date-separator-line{background:var(--tp-border);flex:1;height:1px}.ticketping-date-separator-text{background:var(--tp-background);color:var(--tp-text-muted);font-size:var(--tp-font-size-sm);font-weight:var(--tp-font-weight-medium);padding:0 var(--tp-spacing-md)}.ticketping-message-status{color:var(--tp-text-muted);font-size:var(--tp-font-size-xs);margin-top:2px;text-align:right}.ticketping-message-status.sending{color:var(--tp-text-muted)}.ticketping-message-status.sent{color:var(--tp-primary-color)}.ticketping-message-status.failed{color:var(--tp-error-text)}.ticketping-message-attachment{display:flex;gap:var(--tp-spacing-sm)}.ticketping-attachment-info{flex:1;min-width:0}.ticketping-attachment-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ticketping-attachment-name a:hover{color:var(--tp-primary-color)!important}.typing-indicator{align-items:center;background:var(--tp-background-secondary);border-radius:var(--tp-border-radius-large);border-bottom-left-radius:var(--tp-spacing-xs);color:var(--tp-text-secondary);display:none;font-size:var(--tp-font-size-base);margin:0 var(--tp-spacing-lg) var(--tp-spacing-sm);max-width:80%;padding:var(--tp-spacing-md) var(--tp-spacing-lg)}.typing-indicator.show{display:flex}.typing-dots{display:flex;gap:2px;margin-left:var(--tp-spacing-sm)}.typing-dots span{animation:tp-typing 1.4s infinite;background:var(--tp-text-secondary);border-radius:50%;height:4px;width:4px}.typing-dots span:nth-child(2){animation-delay:.2s}.typing-dots span:nth-child(3){animation-delay:.4s}@keyframes tp-typing{0%,60%,to{opacity:.4;transform:translateY(0)}30%{opacity:1;transform:translateY(-8px)}}.ticketping-message-input-container{background:var(--tp-background);border-top:1px solid var(--tp-border);outline:none}.ticketping-message-input-container:focus-within{outline:none}.ticketping-message-input-wrapper{align-items:flex-start;display:flex;flex-direction:column;min-height:44px;padding:8px 16px;transition:border-color var(--tp-animation-speed-fast) ease}.ticketping-message-input{background:none;border:none;box-sizing:border-box;color:var(--tp-text-primary);font-family:inherit;font-size:var(--tp-font-size-lg);font-weight:400;inset:0;line-height:20px;max-height:160px;min-height:20px;outline:none;overflow:auto;overflow-wrap:break-word;padding:var(--tp-spacing-sm) 0;resize:none;white-space:pre-wrap;width:100%}.ticketping-message-input::-moz-placeholder{color:var(--tp-text-muted)}.ticketping-message-input::placeholder{color:var(--tp-text-muted)}.ticketping-input-actions{align-items:center;display:flex;gap:var(--tp-spacing-sm);justify-content:space-between;padding:8px 0;width:100%}.ticketping-file-input{display:none}.ticketping-file-input-container{opacity:1;transform:translate(0);transition:opacity var(--tp-animation-speed) var(--tp-animation-easing),transform var(--tp-animation-speed) var(--tp-animation-easing)}.ticketping-file-input-container.tp-hidden{opacity:0;pointer-events:none;transform:translate(8px)}.ticketping-file-btn{background:none;border:none;color:var(--tp-text-secondary);cursor:pointer;transition:color var(--tp-animation-speed-fast) ease}.ticketping-file-btn:hover{color:var(--tp-text-primary)}.ticketping-send-btn{align-items:center;background:none;background:var(--tp-primary-color);border:none;border-radius:50%;cursor:pointer;display:flex;height:24px;justify-content:center;padding:5px;transition:background var(--tp-animation-speed-fast) ease;width:24px}.ticketping-send-btn:hover{background:var(--tp-primary-hover)}.ticketping-send-btn:disabled{background:var(--tp-background-tertiary);cursor:not-allowed}.ticketping-send-btn svg{height:16px;width:16px;fill:var(--tp-text-secondary);fill:#fff}.ticketping-send-btn:disabled svg{fill:var(--tp-text-muted)}.error-message{background:var(--tp-error-bg);border-left:3px solid var(--tp-error-border);border-radius:var(--tp-border-radius-small);color:var(--tp-error-text);margin:var(--tp-spacing-sm) var(--tp-spacing-lg);padding:var(--tp-spacing-sm) var(--tp-spacing-md)}.error-message,.retry-btn{font-size:var(--tp-font-size-sm)}.retry-btn{background:none;border:none;color:var(--tp-primary-color);cursor:pointer;margin-left:var(--tp-spacing-sm);text-decoration:underline}.tp-loading-spinner-child{animation:tp-spin 1s linear infinite;border-top:2px solid var(--tp-background-tertiary);border:2px solid var(--tp-background-tertiary);border-radius:50%;border-top-color:var(--tp-primary-color);height:20px;width:20px}@keyframes tp-spin{0%{transform:rotate(0)}to{transform:rotate(1turn)}}.ticketping-loading-state{align-items:center;display:flex;flex:1;flex-direction:column;justify-content:center;padding:var(--tp-spacing-xxl);text-align:center}.ticketping-loading-content{align-items:center;display:flex;flex-direction:column;gap:var(--tp-spacing-lg);max-width:280px}.ticketping-loading-spinner .tp-loading-spinner-child{border-width:3px;height:32px;margin-bottom:var(--tp-spacing-md);width:32px}.ticketping-loading-text p{color:var(--tp-text-primary);font-size:var(--tp-font-size-lg);font-weight:var(--tp-font-weight-medium);margin:0;margin-bottom:var(--tp-spacing-xs)}.ticketping-loading-subtext{color:var(--tp-text-secondary)!important;font-size:var(--tp-font-size-base)!important;font-weight:var(--tp-font-weight-normal)!important}@media (max-width:480px){.ticketping-widget{bottom:var(--tp-spacing-lg);right:var(--tp-spacing-lg)}.ticketping-message{max-width:100%}}@media (max-width:320px){.ticketping-chat-header{padding:var(--tp-spacing-md)}.ticketping-chat-header-content h3{font-size:var(--tp-font-size-lg)}}@media (prefers-contrast:high){:root{--tp-border:#000;--tp-shadow:0 4px 12px rgba(0,0,0,.3);--tp-shadow-medium:rgba(0,0,0,.3)}}@media (prefers-reduced-motion:reduce){.ticketping-widget,.ticketping-widget *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.ticketping-chat-bubble.pulse{animation:none}}@media (min-width:768px){.ticketping-thin-scrollbar{scrollbar-color:rgba(156,163,175,.5) transparent;scrollbar-width:thin}.ticketping-thin-scrollbar::-webkit-scrollbar{width:6px}.ticketping-thin-scrollbar::-webkit-scrollbar-track{background:transparent}.ticketping-thin-scrollbar::-webkit-scrollbar-thumb{background-color:#9ca3af80;border-radius:3px}.ticketping-thin-scrollbar::-webkit-scrollbar-thumb:hover{background-color:#9ca3afb3}.dark .ticketping-thin-scrollbar::-webkit-scrollbar-thumb{background-color:#4b556380}.dark .ticketping-thin-scrollbar::-webkit-scrollbar-thumb:hover{background-color:#4b5563b3}.dark .ticketping-thin-scrollbar{scrollbar-color:rgba(75,85,99,.5) transparent}}