/**
 * Widget CSS styles as a template literal
 * Uses CSS custom properties for easy customization
 */
export declare const widgetStyles = "\n<style>\n  :host, .coolhand-feedback-wrapper {\n    /* Customizable CSS variables */\n    --coolhand-bg: #ffffff;\n    --coolhand-bg-hover: #f8f9fa;\n    --coolhand-border: #e5e7eb;\n    --coolhand-border-radius: 6px;\n    --coolhand-text: #374151;\n    --coolhand-text-muted: #6b7280;\n    --coolhand-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);\n    --coolhand-shadow-hover: 0 6px 16px rgba(0, 0, 0, 0.12);\n    --coolhand-accent: #2563eb;\n    --coolhand-success: #10b981;\n    --coolhand-icon-size: 18px;\n    --coolhand-font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif;\n    --coolhand-font-size: 12px;\n\n    --coolhand-offset: 8px;\n\n    all: initial;\n    display: block;\n    position: absolute;\n    top: var(--coolhand-offset);\n    right: var(--coolhand-offset);\n    z-index: 99999;\n    font-family: var(--coolhand-font-family);\n  }\n\n  /* Placement modifiers - for wrapper inside shadow DOM */\n  .coolhand-placement-bottom {\n    top: auto;\n    bottom: var(--coolhand-offset);\n  }\n\n  .coolhand-placement-left {\n    right: auto;\n    left: var(--coolhand-offset);\n  }\n\n  /* Combined placement: bottom-left */\n  .coolhand-placement-bottom.coolhand-placement-left {\n    top: auto;\n    right: auto;\n    bottom: var(--coolhand-offset);\n    left: var(--coolhand-offset);\n  }\n\n  /* Placement modifiers - for shadow host (container element) */\n  :host(.coolhand-placement-bottom) {\n    top: auto;\n    bottom: var(--coolhand-offset);\n  }\n\n  :host(.coolhand-placement-left) {\n    right: auto;\n    left: var(--coolhand-offset);\n  }\n\n  :host(.coolhand-placement-bottom.coolhand-placement-left) {\n    top: auto;\n    right: auto;\n    bottom: var(--coolhand-offset);\n    left: var(--coolhand-offset);\n  }\n\n  /* Dark mode overrides */\n  .coolhand-dark, :host(.coolhand-dark) {\n    --coolhand-bg: #1f2937;\n    --coolhand-bg-hover: #374151;\n    --coolhand-border: #4b5563;\n    --coolhand-text: #f3f4f6;\n    --coolhand-text-muted: #9ca3af;\n    --coolhand-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);\n    --coolhand-shadow-hover: 0 6px 16px rgba(0, 0, 0, 0.4);\n  }\n\n  .coolhand-feedback-wrapper * {\n    box-sizing: border-box;\n    margin: 0;\n    padding: 0;\n  }\n\n  /* Trigger button */\n  .coolhand-trigger {\n    all: initial;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 36px;\n    height: 36px;\n    background: var(--coolhand-bg);\n    border: 1px solid var(--coolhand-border);\n    border-radius: var(--coolhand-border-radius);\n    cursor: pointer;\n    box-shadow: var(--coolhand-shadow);\n    transition: all 0.2s ease;\n    font-family: var(--coolhand-font-family);\n  }\n\n  .coolhand-trigger:hover {\n    box-shadow: var(--coolhand-shadow-hover);\n    transform: translateY(-1px);\n    border-color: var(--coolhand-text-muted);\n  }\n\n  .coolhand-trigger:focus {\n    outline: none;\n  }\n\n  .coolhand-trigger:focus-visible {\n    outline: 2px solid var(--coolhand-accent);\n    outline-offset: 2px;\n  }\n\n  /* All SVGs in trigger */\n  .coolhand-trigger svg {\n    width: var(--coolhand-icon-size);\n    height: var(--coolhand-icon-size);\n    fill: none;\n    stroke: var(--coolhand-text);\n    stroke-width: 2;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n  }\n\n  /* Trigger hand icon - Coolhand brand blue */\n  .coolhand-trigger .coolhand-icon-trigger {\n    stroke: #3B82F6;\n  }\n\n  /* Trigger icon container */\n  .coolhand-trigger-icon {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n\n  /* Selected icon container */\n  .coolhand-selected-icon {\n    display: none;\n    align-items: center;\n    justify-content: center;\n  }\n\n  .coolhand-selected-icon svg {\n    width: var(--coolhand-icon-size);\n    height: var(--coolhand-icon-size);\n    fill: none;\n    stroke-width: 2;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n  }\n\n  /* When feedback has been given, show selected icon */\n  .coolhand-trigger.has-feedback .coolhand-trigger-icon {\n    display: none;\n  }\n\n  .coolhand-trigger.has-feedback .coolhand-selected-icon {\n    display: flex;\n  }\n\n  /* Color the selected icon based on feedback type */\n  .coolhand-trigger.has-feedback[data-selected=\"up\"] .coolhand-selected-icon svg {\n    stroke: var(--coolhand-success);\n  }\n\n  .coolhand-trigger.has-feedback[data-selected=\"down\"] .coolhand-selected-icon svg {\n    stroke: #ef4444;\n  }\n\n  .coolhand-trigger.has-feedback[data-selected=\"neutral\"] .coolhand-selected-icon svg {\n    stroke: #3B82F6;\n  }\n\n  /* Options panel */\n  .coolhand-options {\n    display: none;\n    position: absolute;\n    top: 0;\n    right: 0;\n    background: var(--coolhand-bg);\n    border: 1px solid var(--coolhand-border);\n    border-radius: var(--coolhand-border-radius);\n    padding: 12px;\n    box-shadow: var(--coolhand-shadow-hover);\n    flex-direction: column;\n    gap: 8px;\n  }\n\n  .coolhand-options.expanded {\n    display: flex;\n  }\n\n  /* Options panel positioning for left placement */\n  .coolhand-placement-left .coolhand-options {\n    right: auto;\n    left: 0;\n  }\n\n  /* Options panel positioning for bottom placement */\n  .coolhand-placement-bottom .coolhand-options {\n    top: auto;\n    bottom: 0;\n  }\n\n  /* Options panel positioning for bottom-left placement */\n  .coolhand-placement-bottom.coolhand-placement-left .coolhand-options {\n    top: auto;\n    right: auto;\n    bottom: 0;\n    left: 0;\n  }\n\n  /* Prompt text */\n  .coolhand-prompt {\n    font-size: var(--coolhand-font-size);\n    font-weight: 500;\n    color: var(--coolhand-text);\n    text-align: center;\n    white-space: nowrap;\n    font-family: var(--coolhand-font-family);\n    margin-bottom: 4px;\n  }\n\n  /* Options row with icons and close */\n  .coolhand-options-row {\n    display: flex;\n    gap: 6px;\n    align-items: center;\n  }\n\n  /* Feedback option buttons */\n  .coolhand-option {\n    all: initial;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: 36px;\n    height: 36px;\n    border-radius: var(--coolhand-border-radius);\n    cursor: pointer;\n    transition: all 0.15s ease;\n    background: var(--coolhand-bg);\n    border: 1px solid var(--coolhand-border);\n    font-family: var(--coolhand-font-family);\n  }\n\n  .coolhand-option svg {\n    width: 20px;\n    height: 20px;\n    fill: none;\n    stroke: var(--coolhand-text-muted);\n    stroke-width: 2;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n    transition: stroke 0.15s ease;\n  }\n\n  .coolhand-option:hover {\n    background: var(--coolhand-bg-hover);\n    border-color: var(--coolhand-text-muted);\n  }\n\n  .coolhand-option:hover svg {\n    stroke: var(--coolhand-text);\n  }\n\n  .coolhand-option:focus {\n    outline: none;\n  }\n\n  .coolhand-option:focus-visible {\n    outline: 2px solid var(--coolhand-accent);\n    outline-offset: 2px;\n  }\n\n  .coolhand-option.selected {\n    background: var(--coolhand-bg-hover);\n    border-color: var(--coolhand-accent);\n  }\n\n  .coolhand-option.selected svg {\n    stroke: var(--coolhand-accent);\n  }\n\n  /* Hover colors for specific feedback types */\n  .coolhand-option[data-feedback=\"down\"]:hover {\n    border-color: #ef4444;\n  }\n  .coolhand-option[data-feedback=\"down\"]:hover svg {\n    stroke: #ef4444;\n  }\n\n  .coolhand-option[data-feedback=\"neutral\"]:hover {\n    border-color: #3B82F6;\n  }\n  .coolhand-option[data-feedback=\"neutral\"]:hover svg {\n    stroke: #3B82F6;\n  }\n\n  .coolhand-option[data-feedback=\"up\"]:hover {\n    border-color: var(--coolhand-success);\n  }\n  .coolhand-option[data-feedback=\"up\"]:hover svg {\n    stroke: var(--coolhand-success);\n  }\n\n  /* Selected state colors */\n  .coolhand-option[data-feedback=\"down\"].selected {\n    border-color: #ef4444;\n  }\n  .coolhand-option[data-feedback=\"down\"].selected svg {\n    stroke: #ef4444;\n  }\n\n  .coolhand-option[data-feedback=\"neutral\"].selected {\n    border-color: #3B82F6;\n  }\n  .coolhand-option[data-feedback=\"neutral\"].selected svg {\n    stroke: #3B82F6;\n  }\n\n  .coolhand-option[data-feedback=\"up\"].selected {\n    border-color: var(--coolhand-success);\n  }\n  .coolhand-option[data-feedback=\"up\"].selected svg {\n    stroke: var(--coolhand-success);\n  }\n\n  /* Close button */\n  .coolhand-close {\n    all: initial;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: 28px;\n    height: 28px;\n    margin-left: 4px;\n    cursor: pointer;\n    border-radius: var(--coolhand-border-radius);\n    transition: background 0.15s ease;\n  }\n\n  .coolhand-close:hover {\n    background: var(--coolhand-bg-hover);\n  }\n\n  .coolhand-close:hover svg {\n    stroke: var(--coolhand-text);\n  }\n\n  .coolhand-close:focus {\n    outline: none;\n  }\n\n  .coolhand-close:focus-visible {\n    outline: 2px solid var(--coolhand-accent);\n    outline-offset: 2px;\n  }\n\n  .coolhand-close svg {\n    width: 14px;\n    height: 14px;\n    fill: none;\n    stroke: var(--coolhand-text-muted);\n    stroke-width: 2;\n    stroke-linecap: round;\n  }\n\n  /* Success animation */\n  @keyframes coolhand-pulse {\n    0% { transform: scale(1); }\n    50% { transform: scale(1.05); }\n    100% { transform: scale(1); }\n  }\n\n  .coolhand-success {\n    animation: coolhand-pulse 0.3s ease;\n  }\n\n  /* Checkmark state */\n  .coolhand-checkmark {\n    display: none;\n    width: var(--coolhand-icon-size);\n    height: var(--coolhand-icon-size);\n    stroke: var(--coolhand-success);\n    stroke-width: 2.5;\n    fill: none;\n  }\n\n  .coolhand-trigger.showing-checkmark .coolhand-checkmark {\n    display: block;\n  }\n\n  .coolhand-trigger.showing-checkmark .coolhand-trigger-icon,\n  .coolhand-trigger.showing-checkmark .coolhand-selected-icon {\n    display: none;\n  }\n\n  .coolhand-trigger.showing-checkmark {\n    background: #ecfdf5;\n    border-color: var(--coolhand-success);\n  }\n\n  /* Dark mode checkmark state */\n  .coolhand-dark .coolhand-trigger.showing-checkmark {\n    background: #064e3b;\n    border-color: var(--coolhand-success);\n  }\n\n  /* Visually hidden class for screen reader announcements */\n  .coolhand-sr-only {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    padding: 0;\n    margin: -1px;\n    overflow: hidden;\n    clip: rect(0, 0, 0, 0);\n    white-space: nowrap;\n    border: 0;\n  }\n\n  /* Reduced motion support */\n  @media (prefers-reduced-motion: reduce) {\n    .coolhand-trigger,\n    .coolhand-option,\n    .coolhand-close,\n    .coolhand-option svg {\n      transition: none;\n    }\n\n    .coolhand-success {\n      animation: none;\n    }\n\n    @keyframes coolhand-pulse {\n      0%, 100% { transform: scale(1); }\n    }\n  }\n\n  /* Pixel mode styles */\n  .coolhand-pixel-mode .coolhand-trigger {\n    width: 8px;\n    height: 8px;\n    min-width: 8px;\n    min-height: 8px;\n    padding: 0;\n    background: #3B82F6;\n    border: none;\n    border-radius: 2px;\n    box-shadow: none;\n  }\n\n  .coolhand-pixel-mode .coolhand-trigger:hover {\n    transform: none;\n    box-shadow: none;\n  }\n\n  /* Hide all icons in pixel mode trigger */\n  .coolhand-pixel-mode .coolhand-trigger .coolhand-trigger-icon,\n  .coolhand-pixel-mode .coolhand-trigger .coolhand-selected-icon,\n  .coolhand-pixel-mode .coolhand-trigger svg {\n    display: none;\n  }\n\n  /* Color the pixel based on feedback state */\n  .coolhand-pixel-mode .coolhand-trigger.has-feedback[data-selected=\"up\"] {\n    background: var(--coolhand-success);\n  }\n\n  .coolhand-pixel-mode .coolhand-trigger.has-feedback[data-selected=\"down\"] {\n    background: #ef4444;\n  }\n\n  .coolhand-pixel-mode .coolhand-trigger.has-feedback[data-selected=\"neutral\"] {\n    background: #3B82F6; /* Keep blue for neutral */\n  }\n\n  /* No visual change for success state in pixel mode - just show the feedback color */\n  .coolhand-pixel-mode .coolhand-trigger.showing-checkmark {\n    background: inherit;\n    border-color: transparent;\n  }\n\n  /* Hide checkmark in pixel mode even when showing-checkmark is active */\n  .coolhand-pixel-mode .coolhand-trigger.showing-checkmark .coolhand-checkmark {\n    display: none;\n  }\n\n  /* Pixel mode: show options on hover or focus (keyboard accessible) */\n  .coolhand-pixel-mode:hover .coolhand-trigger,\n  .coolhand-pixel-mode:focus-within .coolhand-trigger {\n    display: none;\n  }\n\n  .coolhand-pixel-mode:hover .coolhand-options,\n  .coolhand-pixel-mode:focus-within .coolhand-options {\n    display: flex;\n  }\n\n  /* Focus visible for pixel mode */\n  .coolhand-pixel-mode .coolhand-trigger:focus-visible {\n    outline: 2px solid var(--coolhand-accent);\n    outline-offset: 2px;\n  }\n\n  /* Pulsating highlight effect */\n  @keyframes coolhand-highlight-pulse {\n    0%, 100% {\n      box-shadow:\n        0 0 6px 2px rgba(59, 130, 246, 0.7),\n        0 0 12px 5px rgba(139, 92, 246, 0.5);\n    }\n    33% {\n      box-shadow:\n        0 0 6px 2px rgba(139, 92, 246, 0.7),\n        0 0 12px 5px rgba(236, 72, 153, 0.5);\n    }\n    66% {\n      box-shadow:\n        0 0 6px 2px rgba(236, 72, 153, 0.7),\n        0 0 12px 5px rgba(59, 130, 246, 0.5);\n    }\n  }\n\n  .coolhand-highlight .coolhand-trigger {\n    animation: coolhand-highlight-pulse 2s ease-in-out infinite !important;\n  }\n\n  /* Highlight on expanded options panel */\n  .coolhand-highlight .coolhand-options.expanded {\n    animation: coolhand-highlight-pulse 2.5s ease-in-out infinite;\n  }\n\n  /* Highlight on pixel mode hover-revealed options */\n  .coolhand-highlight.coolhand-pixel-mode:hover .coolhand-options {\n    animation: coolhand-highlight-pulse 2.5s ease-in-out infinite;\n  }\n\n  /* Reduced motion: disable highlight animations but keep static glow */\n  @media (prefers-reduced-motion: reduce) {\n    .coolhand-highlight .coolhand-trigger,\n    .coolhand-highlight .coolhand-options.expanded,\n    .coolhand-highlight.coolhand-pixel-mode:hover .coolhand-options {\n      animation: none;\n      box-shadow:\n        0 0 6px 2px rgba(59, 130, 246, 0.7),\n        0 0 12px 5px rgba(139, 92, 246, 0.5);\n    }\n  }\n\n  /* Explanation mode styles */\n  .coolhand-options.explanation-mode {\n    width: 300px;\n    min-width: 300px;\n  }\n\n  .coolhand-explanation-container {\n    display: flex;\n    flex-direction: column;\n    gap: 10px;\n  }\n\n  .coolhand-explanation-header {\n    display: flex;\n    align-items: flex-start;\n    gap: 8px;\n  }\n\n  .coolhand-explanation-icon {\n    flex-shrink: 0;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 20px;\n    height: 20px;\n  }\n\n  .coolhand-explanation-icon svg {\n    width: 18px;\n    height: 18px;\n    fill: none;\n    stroke-width: 2;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n  }\n\n  /* Color the icon based on the feedback type */\n  .coolhand-explanation-icon .coolhand-icon-thumbs-up {\n    stroke: var(--coolhand-success);\n  }\n\n  .coolhand-explanation-icon .coolhand-icon-thumbs-down {\n    stroke: #ef4444;\n  }\n\n  .coolhand-explanation-icon .coolhand-icon-neutral {\n    stroke: #3B82F6;\n  }\n\n  .coolhand-explanation-title {\n    flex: 1;\n    font-size: var(--coolhand-font-size);\n    font-weight: 500;\n    color: var(--coolhand-text);\n    line-height: 1.4;\n    font-family: var(--coolhand-font-family);\n  }\n\n  .coolhand-explanation-close {\n    all: initial;\n    flex-shrink: 0;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: 24px;\n    height: 24px;\n    cursor: pointer;\n    border-radius: var(--coolhand-border-radius);\n    transition: background 0.15s ease;\n  }\n\n  .coolhand-explanation-close:hover {\n    background: var(--coolhand-bg-hover);\n  }\n\n  .coolhand-explanation-close:hover svg {\n    stroke: var(--coolhand-text);\n  }\n\n  .coolhand-explanation-close:focus {\n    outline: none;\n  }\n\n  .coolhand-explanation-close:focus-visible {\n    outline: 2px solid var(--coolhand-accent);\n    outline-offset: 2px;\n  }\n\n  .coolhand-explanation-close svg {\n    width: 14px;\n    height: 14px;\n    fill: none;\n    stroke: var(--coolhand-text-muted);\n    stroke-width: 2;\n    stroke-linecap: round;\n  }\n\n  .coolhand-explanation-textarea {\n    all: initial;\n    box-sizing: border-box;\n    display: block;\n    width: 100%;\n    min-height: 70px;\n    padding: 10px;\n    font-family: var(--coolhand-font-family);\n    font-size: var(--coolhand-font-size);\n    color: var(--coolhand-text);\n    background: var(--coolhand-bg);\n    border: 1px solid var(--coolhand-border);\n    border-radius: var(--coolhand-border-radius);\n    resize: none;\n    line-height: 1.5;\n    transition: border-color 0.15s ease, box-shadow 0.15s ease;\n  }\n\n  .coolhand-explanation-textarea::placeholder {\n    color: var(--coolhand-text-muted);\n  }\n\n  .coolhand-explanation-textarea:focus {\n    outline: none;\n    border-color: var(--coolhand-accent);\n    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);\n  }\n\n  /* Dark mode textarea focus */\n  .coolhand-dark .coolhand-explanation-textarea:focus {\n    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.25);\n  }\n\n  /* Reduced motion for explanation textarea */\n  @media (prefers-reduced-motion: reduce) {\n    .coolhand-explanation-close,\n    .coolhand-explanation-textarea {\n      transition: none;\n    }\n  }\n\n  /* Summary mode styles */\n  .coolhand-options.summary-mode {\n    width: 300px;\n    min-width: 300px;\n  }\n\n  .coolhand-summary-container {\n    display: flex;\n    flex-direction: column;\n    gap: 10px;\n  }\n\n  .coolhand-summary-header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: 8px;\n  }\n\n  .coolhand-summary-icons {\n    display: flex;\n    gap: 6px;\n  }\n\n  .coolhand-summary-label {\n    font-size: var(--coolhand-font-size);\n    font-weight: 500;\n    color: var(--coolhand-text-muted);\n    font-family: var(--coolhand-font-family);\n  }\n\n  /* Submit button */\n  .coolhand-submit-btn {\n    all: initial;\n    box-sizing: border-box;\n    display: block;\n    width: 100%;\n    padding: 8px 16px;\n    font-family: var(--coolhand-font-family);\n    font-size: var(--coolhand-font-size);\n    font-weight: 500;\n    color: #ffffff;\n    background: var(--coolhand-accent);\n    border: none;\n    border-radius: var(--coolhand-border-radius);\n    cursor: pointer;\n    text-align: center;\n    transition: background 0.15s ease, transform 0.1s ease;\n  }\n\n  .coolhand-submit-btn:hover {\n    background: #1d4ed8;\n  }\n\n  .coolhand-submit-btn:active {\n    transform: scale(0.98);\n  }\n\n  .coolhand-submit-btn:focus {\n    outline: none;\n  }\n\n  .coolhand-submit-btn:focus-visible {\n    outline: 2px solid var(--coolhand-accent);\n    outline-offset: 2px;\n  }\n\n  /* Reduced motion for submit button */\n  @media (prefers-reduced-motion: reduce) {\n    .coolhand-submit-btn {\n      transition: none;\n    }\n  }\n</style>\n";
//# sourceMappingURL=widget.css.d.ts.map