/* HeroChat / Support Board design override.
   Brand color + user-bubble colors are driven by CSS variables so a
   <slug>.json config can re-theme the widget at runtime.
   Defaults below match the live foreveryoungsummit.de account. */

:root {
    --sb-brand: rgb(116, 144, 124);   /* header, launcher, send icon, accents */
    --sb-user-bg: #f0f0f0;            /* visitor (right) message bubble */
    --sb-user-text: #566069;          /* visitor message text */
}

.sb-chat-btn,
.sb-chat > div > .sb-header,
.sb-chat .sb-dashboard > div > .sb-btn:hover,
.sb-chat .sb-scroll-area .sb-header,
.sb-input.sb-input-btn > div,
div ul.sb-menu li:hover,
.sb-popup.sb-emoji .sb-emoji-bar > div.sb-active,
.sb-popup.sb-emoji .sb-emoji-bar > div:hover,
.sb-ul > span:before,
.sb-article-category-links > span + span:before { background-color: var(--sb-brand); }

.sb-chat .sb-dashboard > div > .sb-btn,
.sb-search-btn > input,
.sb-input > input:focus, .sb-input > select:focus, .sb-input > textarea:focus,
.sb-input.sb-input-image .image:hover { border-color: var(--sb-brand); }

.sb-chat .sb-dashboard > div > .sb-btn,
.sb-editor .sb-bar-icons > div:hover:before,
.sb-articles > div:hover > div,
.sb-main .sb-btn-text:hover,
.sb-editor .sb-submit,
.sb-table input[type="checkbox"]:checked:before,
.sb-select p:hover, .sb-select ul li:hover, div ul.sb-menu li.sb-active, .sb-select ul li.sb-active,
.sb-search-btn > i:hover, .sb-search-btn.sb-active i,
.sb-rich-message .sb-input > span.sb-active:not(.sb-filled),
.sb-input.sb-input-image .image:hover:before,
.sb-rich-message .sb-card .sb-card-btn,
.sb-slider-arrow:hover,
.sb-loading:not(.sb-btn):before,
.sb-articles > div.sb-title,
.sb-article-categories > div:hover, .sb-article-categories > div.sb-active,
.sb-article-categories > div span:hover, .sb-article-categories > div span.sb-active,
.sb-btn-text:hover,
.sb-player > div:hover,
.sb-loader:before { color: var(--sb-brand); }

.sb-search-btn > input:focus,
.sb-input > input:focus, .sb-input > select:focus, .sb-input > textarea:focus,
.sb-input.sb-input-image .image:hover { box-shadow: 0 0 5px rgba(104, 104, 104, 0.2); }

.sb-list > div.sb-rich-cnt { border-top-color: var(--sb-brand); }

.sb-list > div.sb-right .sb-message, .sb-list > div.sb-right .sb-message a { color: var(--sb-user-text); }
.sb-list > div.sb-right, .sb-right .sb-player > div { background-color: var(--sb-user-bg); }

.sb-chat-btn:hover, .sb-input.sb-input-btn > div:hover, .sb-btn:hover, a.sb-btn:hover,
.sb-rich-message .sb-card .sb-card-btn:hover { background-color: rgb(255, 255, 255); }

.sb-list > .sb-right .sb-message, .sb-list > .sb-right .sb-message a,
.sb-editor .sb-submit:hover { color: rgb(255, 255, 255); }

/* Layout tweaks */
.sb-list > div.sb-right.sb-thumb-active { margin-right: 20px; }
.sb-cloud > .sb-body { padding-bottom: 4px; }