/* Spiderpiggy Fun picker — scoped to the two chat forms. */
#chatForm, .sp-chatwidget-form { position: relative; }
#chatForm { --sp-fun-bg: var(--panel-soft, #222733); --sp-fun-text: var(--text, #d3dae3); --sp-fun-line: var(--border, #343944); --sp-fun-accent: var(--accent, #e967a7); }
.sp-chatwidget-form { --sp-fun-bg: var(--sp-cw-bg); --sp-fun-text: var(--sp-cw-text); --sp-fun-line: var(--sp-cw-line); --sp-fun-accent: var(--sp-cw-accent); }
#chatForm .sp-fun-toggle, .sp-chatwidget .sp-fun-toggle {
    flex: 0 0 auto; width: auto; min-width: 0; margin: 0; padding: 0 7px;
    border: 1px solid var(--sp-fun-line); border-radius: 6px;
    background: var(--sp-fun-bg); color: var(--sp-fun-accent);
    font: bold 12px Arial, sans-serif; white-space: nowrap; cursor: pointer;
}
#chatForm .sp-fun-toggle:disabled, .sp-chatwidget .sp-fun-toggle:disabled { opacity: .55; cursor: default; }
#chatForm .sp-fun-panel, .sp-chatwidget .sp-fun-panel {
    position: absolute; z-index: 60; bottom: calc(100% + 4px); right: 8px;
    display: flex; flex-direction: column; gap: 5px; width: 320px; max-width: calc(100% - 16px);
    box-sizing: border-box; padding: 8px; border: 1px solid var(--sp-fun-line); border-radius: 8px;
    background: var(--sp-fun-bg); color: var(--sp-fun-text); box-shadow: 0 3px 14px rgba(0,0,0,.3);
    text-align: left; font: 12px/1.4 Arial, sans-serif;
}
#chatForm .sp-fun-panel[hidden], .sp-chatwidget .sp-fun-panel[hidden] { display: none !important; }
#chatForm .sp-fun-search, .sp-chatwidget .sp-fun-search {
    box-sizing: border-box; flex: none; width: 100%; min-width: 0; height: 30px; margin: 0; padding: 4px 7px;
    border: 1px solid var(--sp-fun-line); border-radius: 5px; background: var(--sp-fun-bg);
    color: var(--sp-fun-text); font: 13px Arial, sans-serif;
}
#chatForm .sp-fun-list, .sp-chatwidget .sp-fun-list { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; max-height: min(260px, 38vh); }
.sp-chatwidget .sp-fun-list { max-height: 96px; }
#chatForm .sp-fun-category, .sp-chatwidget .sp-fun-category { display: block; padding: 7px 4px 3px; color: var(--sp-fun-accent); font: bold 11px Arial, sans-serif; }
#chatForm .sp-fun-command, .sp-chatwidget .sp-fun-command {
    display: block; float: none; width: 100%; min-width: 0; height: auto; min-height: 28px; margin: 0;
    padding: 5px 7px; border: 0; border-radius: 4px; background: transparent; color: var(--sp-fun-text);
    box-shadow: none; text-shadow: none; text-transform: none; text-align: left;
    white-space: normal; overflow-wrap: anywhere; font: 12px/1.4 Arial, sans-serif; cursor: pointer;
}
#chatForm .sp-fun-command:hover, .sp-chatwidget .sp-fun-command:hover { background: rgba(128,128,128,.16); }
#chatForm .sp-fun-panel a, .sp-chatwidget .sp-fun-panel a { color: var(--sp-fun-accent); font: 11px/1.4 Arial, sans-serif; padding: 3px 4px; }
#chatForm .sp-fun-panel :focus-visible, #chatForm .sp-fun-toggle:focus-visible,
.sp-chatwidget .sp-fun-panel :focus-visible, .sp-chatwidget .sp-fun-toggle:focus-visible { outline: 2px solid var(--sp-fun-accent); outline-offset: -2px; }
@media (max-width: 600px) {
    #chatForm .sp-fun-search, .sp-chatwidget .sp-fun-search { font-size: 16px; }
    #chatForm .sp-fun-toggle, .sp-chatwidget .sp-fun-toggle { padding: 0 5px; font-size: 11px; }
}