:root {
    --bora-chatbot-fab-bg: #242424;
    --bora-chatbot-fab-border: #242424;
    --bora-chatbot-header-bg: #242424;
    --bora-chatbot-primary: #242424;
    --bora-chatbot-agent-bubble-bg: #ffffff;
    --bora-chatbot-agent-bubble-text: #111827;
    --bora-chatbot-user-bubble-bg: #242424;
    --bora-chatbot-user-bubble-text: #ffffff;
    --bora-chatbot-input-border: #242424;
    --bora-chatbot-button-loading-state-color: #98a2b3;
    --chatbot-fab-size: 56px;
    --chatbot-pulse-duration: 600ms;
    --chatbot-pulse-easing: ease-in-out;
    --chatbot-pulse-cycles: 3;
}

#octonomy-widget,
#oc-shadow-container {
    font-family: Roboto, sans-serif !important;
    position: fixed !important;
    z-index: 9999;
}

#octonomy-widget :is(h1, h2, h3, h4, h5, h6),
#oc-shadow-container :is(h1, h2, h3, h4, h5, h6) {
    font-size: 20px;
}

#oc-shadow-container :is(.oc_chat_widget, .oc_chat-widget) button[class*="oc_button_label"] {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: var(--chatbot-fab-size) !important;
    height: var(--chatbot-fab-size) !important;
    padding: 0 !important;
    min-width: var(--chatbot-fab-size) !important;
    min-height: var(--chatbot-fab-size) !important;
}

#oc-shadow-container :is(.oc_chat_widget, .oc_chat-widget) button[class*="oc_button_label"] img {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
}

#oc-shadow-container button[class*="oc_button_label"][aria-expanded="true"]::before {
    width: 24px;
    height: 24px;
    min-width: 24px;
    min-height: 24px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='31' viewBox='0 0 32 31' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0.390524 0.41124C0.911224 -0.109459 1.75544 -0.10946 2.27614 0.411239L15.5169 13.652L28.7784 0.390524C29.2991 -0.130176 30.1433 -0.130173 30.664 0.390525C31.1847 0.911224 31.1847 1.75544 30.664 2.27614L17.4025 15.5376L30.5604 28.6955C31.0811 29.2162 31.0811 30.0604 30.5604 30.5811C30.0397 31.1018 29.1955 31.1018 28.6748 30.5811L15.5169 17.4232L2.37972 30.5604C1.85902 31.0811 1.0148 31.0811 0.494102 30.5604C-0.0265978 30.0397 -0.0265973 29.1955 0.494102 28.6748L13.6313 15.5376L0.390524 2.29686C-0.130175 1.77616 -0.130174 0.931939 0.390524 0.41124Z' fill='white'/%3E%3C/svg%3E");
    filter: none;
}

#octonomy-widget :is(.oc_chat_widget, .oc_chat-widget),
#oc-shadow-container :is(.oc_chat_widget, .oc_chat-widget) {
    --widget-bg-color: var(--bora-chatbot-fab-bg) !important;
    --widget-border-color: var(--bora-chatbot-fab-border) !important;
    --widget-primary-color: var(--bora-chatbot-primary) !important;
    position: fixed !important;
    bottom: 40px;
    right: 24px;
    width: var(--chatbot-fab-size);
    height: var(--chatbot-fab-size);
    background-color: var(--bora-chatbot-fab-bg) !important;
    border-color: var(--bora-chatbot-fab-border) !important;
    box-shadow: 0 8px 18px -6px rgba(0, 0, 0, 0.12), 0 12px 42px -4px rgba(0, 0, 0, 0.12);
}

#oc-shadow-container {
    bottom: 40px !important;
}

#oc-shadow-container [class*="widget-container-module_oc_chat_container_maximize"] {
    --widget-primary-color: #242424 !important;
    --widget-primary-color-30: rgba(36, 36, 36, 0.3) !important;
    height: calc(100vh - 200px) !important;
    max-height: calc(100vh - 200px) !important;
    width: 30vw !important;
    border-radius: var(--octo-radius-20, 20px) !important;
}

#oc-shadow-container [class*="widget-container-module_oc_chat_container_maximize_content_area"],
#oc-shadow-container [class*="widget_content_wrapper_maximize"],
#oc-shadow-container [class*="oc_widget_content_wrapper_maximize"],
#oc-shadow-container [class*="oc_chat_box_maximize"],
#oc-shadow-container [class*="widget-content-module_oc_widget_content_wrapper__"][class*="_maximize"],
#oc-shadow-container [class*="widget-container-module_oc_widget_content_wrapper__"],
#oc-shadow-container [class*="_maximize"] [class*="widget-content-module_oc_agent_name_header__"],
#oc-shadow-container [class*="_maximize"] [class*="oc_agent_name_header"] {
    border-radius: 0 !important;
}

#oc-shadow-container [class*="widget-content-module_oc_widget_content_wrapper__"][class*="_maximize"],
#oc-shadow-container [class*="widget-container-module_oc_widget_content_wrapper__"],
#oc-shadow-container [class*="widget-container"],
#oc-shadow-container [class*="oc_chat-container"] {
    background-color: #ffffff !important;
}

#oc-shadow-container :is([class*="widget-header"], [class*="oc_chat-header"]) {
    background-color: var(--bora-chatbot-header-bg) !important;
}

#oc-shadow-container :is([class*="agent_chat_bubble"], [class*="agentChatBubble"], [class*="widget_agent_chat_bubble"]) {
    background-color: var(--bora-chatbot-agent-bubble-bg) !important;
    color: var(--bora-chatbot-agent-bubble-text) !important;
    border-color: transparent !important;
}

#oc-shadow-container :is([class*="user_chat_bubble"], [class*="userChatBubble"], [class*="widget_user_chat_bubble"]) {
    background-color: var(--bora-chatbot-user-bubble-bg) !important;
    color: var(--bora-chatbot-user-bubble-text) !important;
    border-color: transparent !important;
}

#oc-shadow-container button[aria-label*="Neues Gespräch"],
#oc-shadow-container button[aria-label*="neues Gespräch"] {
    display: none !important;
}

#oc-shadow-container :is([class*="feedback-module_oc_feedback_container__"], [class*="oc_feedback_container"]) {
    display: flex !important;
    gap: 4px;
}

#oc-shadow-container :is([class*="feedback-module_oc_feedback_button__"], [class*="oc_feedback_button"]) {
    background: transparent !important;
    border: none !important;
    padding: 4px !important;
    cursor: pointer !important;
    opacity: 0.6;
    transition: opacity 0.2s ease;
}

#oc-shadow-container :is([class*="feedback-module_oc_feedback_button__"], [class*="oc_feedback_button"]):hover {
    opacity: 1;
}

#oc-shadow-container :is([class*="feedback-module_oc_feedback_button__"], [class*="oc_feedback_button"]) img {
    display: none !important;
}

#oc-shadow-container :is(button[aria-label="Daumen hoch"], button[title="Daumen hoch"]) span::before,
#oc-shadow-container :is(button[aria-label="Daumen runter"], button[title="Daumen runter"]) span::before {
    content: "";
    display: block;
    width: 16px;
    height: 16px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

#oc-shadow-container :is(button[aria-label="Daumen hoch"], button[title="Daumen hoch"]) span::before {
    background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 24 24' fill='%23242424' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.47998 18.35L10.58 20.75C10.98 21.15 11.88 21.35 12.48 21.35H16.28C17.48 21.35 18.78 20.45 19.08 19.25L21.48 11.95C21.98 10.55 21.08 9.34997 19.58 9.34997H15.58C14.98 9.34997 14.48 8.84997 14.58 8.14997L15.08 4.94997C15.28 4.04997 14.68 3.04997 13.78 2.74997C12.98 2.44997 11.98 2.84997 11.58 3.44997L7.47998 9.54997' fill='%23242424'/%3E%3Cpath d='M2.38 18.35V8.55002C2.38 7.15002 2.98 6.65002 4.38 6.65002H5.38C6.78 6.65002 7.38 7.15002 7.38 8.55002V18.35C7.38 19.75 6.78 20.25 5.38 20.25H4.38C2.98 20.25 2.38 19.75 2.38 18.35Z' fill='%23242424'/%3E%3C/svg%3E");
}

#oc-shadow-container :is(button[aria-label="Daumen runter"], button[title="Daumen runter"]) span::before {
    background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16.52 5.65002L13.42 3.25002C13.02 2.85002 12.12 2.65002 11.52 2.65002H7.71998C6.51998 2.65002 5.21998 3.55002 4.91998 4.75002L2.51998 12.05C2.01998 13.45 2.91998 14.65 4.41998 14.65H8.41998C9.01998 14.65 9.51998 15.15 9.41998 15.85L8.91998 19.05C8.71998 19.95 9.31998 20.95 10.22 21.25C11.02 21.55 12.02 21.15 12.42 20.55L16.52 14.45' stroke='%23242424' stroke-width='1.5' stroke-miterlimit='10' fill='none'/%3E%3Cpath d='M21.62 5.65V15.45C21.62 16.85 21.02 17.35 19.62 17.35H18.62C17.22 17.35 16.62 16.85 16.62 15.45V5.65C16.62 4.25 17.22 3.75 18.62 3.75H19.62C21.02 3.75 21.62 4.25 21.62 5.65Z' stroke='%23242424' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
}

#oc-shadow-container div[class*="chat-input-module_oc_chatInput_container__"] {
    display: flex !important;
    align-items: stretch !important;
    box-sizing: border-box !important;
    border: 2px solid var(--bora-chatbot-input-border) !important;
    border-radius: 10px !important;
    padding: 0 44px 0 0 !important;
    min-height: 44px !important;
    max-height: 140px !important;
    height: auto !important;
    position: relative !important;
}

#oc-shadow-container div[class*="chat-input-module_oc_chatInput_inner__"] {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
}

#oc-shadow-container textarea#oc_user_input_textarea {
    width: 100% !important;
    box-sizing: border-box !important;
    resize: none !important;
    min-height: 24px !important;
    max-height: 120px !important;
    line-height: 20px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    border: none !important;
    outline: none !important;
    background: transparent !important;
    padding: 10px 12px !important;
    flex: 1 1 auto !important;
    scrollbar-width: thin !important;
    scrollbar-color: #c4c4c4 transparent !important;
}

#oc-shadow-container textarea#oc_user_input_textarea::-webkit-scrollbar {
    width: 6px !important;
}

#oc-shadow-container textarea#oc_user_input_textarea::-webkit-scrollbar-track {
    background: transparent !important;
}

#oc-shadow-container textarea#oc_user_input_textarea::-webkit-scrollbar-thumb {
    background-color: #c4c4c4 !important;
    border-radius: 3px !important;
}

#oc-shadow-container div[class*="chat-input-module_oc_chatInput_footer__"] {
    position: absolute !important;
    right: 8px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
}

#oc-shadow-container div[class*="chat-input-module_oc_chatInput_footer__"] > div:empty {
    display: none !important;
}

#oc-shadow-container button[class*="send-button-module_oc_send_button__"] {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    --send-button-color: #98a2b3 !important;
    --send-button-focus-color: #98a2b3 !important;
}

#oc-shadow-container [class*="send_button_icon"] img {
    display: none !important;
}

#oc-shadow-container span[class*="send-button-module_oc_send_button_icon__"] {
    width: 24px !important;
    height: 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#oc-shadow-container span[class*="send-button-module_oc_send_button_icon__"]::before {
    content: "";
    width: 24px;
    height: 24px;
    display: block;
    background: 24px 24px no-repeat
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24px' height='24px' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='m18.07 8.509-8.56-4.28c-5.75-2.88-8.11-.52-5.23 5.23l.87 1.74c.25.51.25 1.1 0 1.61l-.87 1.73c-2.88 5.75-.53 8.11 5.23 5.23l8.56-4.28c3.84-1.92 3.84-5.06 0-6.98Zm-3.23 4.24h-5.4c-.41 0-.75-.34-.75-.75s.34-.75.75-.75h5.4c.41 0 .75.34.75.75s-.34.75-.75.75Z' fill='%2398A2B3'/%3E%3C/svg%3E");
}

#oc-shadow-container [class*="send_button_loading"] span[class*="send-button-module_oc_send_button_icon__"]::before {
    display: none !important;
}

#oc-shadow-container [class*="send_button_loading"] span[class*="send-button-module_oc_send_button_icon__"] svg {
    display: block !important;
    width: 24px !important;
    height: 24px !important;
}

#oc-shadow-container [class*="send_button_loading"] svg path {
    fill: var(--bora-chatbot-button-loading-state-color, #98a2b3) !important;
}

#oc-shadow-container [class*="send_button_loading"] {
    padding: 0 !important;
    background-color: transparent !important;
    border: 0 !important;
    outline: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 40px !important;
}

#octonomy-widget.second-fab :is(.oc_chat_widget, .oc_chat-widget),
#octonomy-widget.second-fab ~ #oc-shadow-container,
#octonomy-widget.second-fab ~ #oc-shadow-container :is(.oc_chat_widget, .oc_chat-widget),
body:has(#octonomy-widget.second-fab) #oc-shadow-container,
body:has(#oc-shadow-container .chatbot-second-fab) #oc-shadow-container,
#oc-shadow-container:has(.chatbot-second-fab),
#oc-shadow-container.chatbot-second-fab,
#oc-shadow-container.chatbot-second-fab :is(.oc_chat_widget, .oc_chat-widget),
#octonomy-widget.chatbot-second-fab :is(.oc_chat_widget, .oc_chat-widget),
#oc-shadow-container > .oc_chat_widget.chatbot-second-fab,
#oc-shadow-container > .oc_chat-widget.chatbot-second-fab,
#oc-shadow-container .oc_chat_widget.chatbot-second-fab,
#oc-shadow-container .oc_chat-widget.chatbot-second-fab {
    bottom: 92px !important;
}

@media (min-width: 1024px) {
    :root {
        --chatbot-fab-size: 64px;
    }

    #octonomy-widget :is(.oc_chat_widget, .oc_chat-widget),
    #oc-shadow-container :is(.oc_chat_widget, .oc_chat-widget) {
        right: 40px;
    }

    #octonomy-widget.second-fab :is(.oc_chat_widget, .oc_chat-widget),
    #octonomy-widget.second-fab ~ #oc-shadow-container,
    #octonomy-widget.second-fab ~ #oc-shadow-container :is(.oc_chat_widget, .oc_chat-widget),
    body:has(#octonomy-widget.second-fab) #oc-shadow-container,
    body:has(#oc-shadow-container .chatbot-second-fab) #oc-shadow-container,
    #oc-shadow-container:has(.chatbot-second-fab),
    #oc-shadow-container.chatbot-second-fab,
    #oc-shadow-container.chatbot-second-fab :is(.oc_chat_widget, .oc_chat-widget),
    #octonomy-widget.chatbot-second-fab :is(.oc_chat_widget, .oc_chat-widget),
    #oc-shadow-container > .oc_chat_widget.chatbot-second-fab,
    #oc-shadow-container > .oc_chat-widget.chatbot-second-fab,
    #oc-shadow-container .oc_chat_widget.chatbot-second-fab,
    #oc-shadow-container .oc_chat-widget.chatbot-second-fab {
        bottom: 120px !important;
    }
}

@keyframes chatbot-fab-pulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(36, 36, 36, 0.25);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 0 0 8px rgba(36, 36, 36, 0);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(36, 36, 36, 0);
    }
}

#octonomy-widget :is(.oc_chat_widget, .oc_chat-widget).chatbot-fab-pulsating,
#oc-shadow-container :is(.oc_chat_widget, .oc_chat-widget).chatbot-fab-pulsating {
    animation-name: chatbot-fab-pulse;
    animation-duration: var(--chatbot-pulse-duration, 600ms);
    animation-timing-function: var(--chatbot-pulse-easing, ease-in-out);
    animation-iteration-count: var(--chatbot-pulse-cycles, 3);
}

.messageBubble-module_oc_widget_agentChatBubble__pn77r {
    background: var(--bora-chatbot-agent-bubble-bg) !important;
}

.chatAgent-module_oc_chatArea_widget_maximized__H0LhA {
    height: calc(100vh - 382px);
}