#chat-bubble {
    position: fixed;
    bottom: 100px;
    right: 10px;
    z-index: 9999;
}

#chat-bubble-toggle {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: #000;
    color: #fff;
    font-size: 24px;
    border: none;
    cursor: pointer;
    border: 1px solid #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.chat-bubble-icon--close {
    display: none;
}

#chat-bubble-toggle.chat-bubble-toggle--image {
    padding: 0;
    overflow: hidden;
    border-radius: 0;
    background: transparent;
    border: none;
}

#chat-bubble-toggle.chat-bubble-toggle--image img {
    width: 46px;
    height: 46px;
    object-fit: contain;
}

.chat-bubble--open .chat-bubble-icon--chat {
    display: none;
}

.chat-bubble--open .chat-bubble-icon--close {
    display: inline;
    font-style: normal;
    font-weight: 700;
    font-size: 20px;
    line-height: 1;
}

.chat-bubble--open #chat-bubble-toggle.chat-bubble-toggle--image .chat-bubble-icon--close {
    display: block;
}

#chat-bubble-window {
    position: absolute;
    bottom: 70px;
    right: 0;
    width: 360px;
    height: 480px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,.2);
    overflow: hidden;
    display: none;
}

#chat-bubble-window.open {
    display: block;
}

#chat-bubble-placeholder {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    height: 100%;
    padding: 20px;
    text-align: left;
    box-sizing: border-box;
    overflow-y: auto;
    /* Absolute default matching the current white window. Every derived tone below
       is built from currentColor plus opacity, so overriding just this declaration
       (light or dark theme) recolours the whole intro consistently. */
    color: #333;
    font-size: 13px;
    line-height: 1.45;
}

.chat-intro .chat-intro__header {
    display: flex;
    align-items: center;
    margin: 0 0 12px;
}

.chat-intro .chat-intro__avatar {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    margin: 0 10px 0 0;
    object-fit: contain;
    border-radius: 50%;
}

.chat-intro .chat-intro__identity {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.chat-intro .chat-intro__name {
    font-weight: 700;
    font-size: 15px;
    line-height: 1.2;
}

/* Muted tone: same ink as the main text, faded against the inherited background,
   so it stays legible both on a light and on a dark window. */
.chat-intro .chat-intro__role {
    font-size: 11px;
    line-height: 1.3;
    opacity: .72;
}

.chat-intro .chat-intro__separator {
    height: 0;
    margin: 0 0 12px;
    border: 0;
    border-top: 1px solid currentColor;
    opacity: .15;
}

.chat-intro .chat-intro__headline {
    margin: 0 0 8px;
    font-weight: 700;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
}

.chat-intro .chat-intro__text {
    margin: 0 0 12px;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
}

/* Semantic warning colour, deliberately NOT taken from the module configuration.
   The box paints its own almost opaque dark amber background, so the amber text
   keeps roughly 6:1 contrast whatever colour the window behind it is. */
.chat-intro .chat-intro__warning {
    display: flex;
    align-items: flex-start;
    margin: 0 0 12px;
    padding: 10px 12px;
    border: 1px solid rgba(252, 211, 77, .45);
    border-radius: 6px;
    background-color: rgba(120, 53, 15, .92);
    color: #fcd34d;
}

.chat-intro .chat-intro__warning-icon {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    margin: 1px 8px 0 0;
    fill: currentColor;
}

.chat-intro .chat-intro__warning-text {
    margin: 0;
    font-weight: 600;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
}

.chat-intro .chat-intro__privacy {
    margin: 0 0 14px;
    font-size: 11px;
    line-height: 1.4;
    opacity: .7;
}

.chat-intro .chat-intro__footer {
    margin: 0;
    font-size: 11px;
    line-height: 1.4;
    text-align: center;
    opacity: .8;
}

.chat-intro .chat-intro__link {
    color: inherit;
    text-decoration: underline;
}

.chat-intro .chat-intro__link:hover,
.chat-intro .chat-intro__link:focus {
    text-decoration: none;
}

.chat-intro .chat-intro__sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

#chat-bubble-start {
    margin: 0 0 12px;
    box-sizing: border-box;
    background: #000;
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 12px 28px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s;
}

#chat-bubble-start:hover {
    background: #333;
}

#chat-bubble-iframe-container {
    display: none;
    width: 100%;
    height: 100%;
}

#chat-bubble-iframe-container iframe {
    width: 100%;
    height: 100%;
    border: 0;
}