.sur_context_bubble {
    position: fixed;
    bottom: 20px;
    right: 30px;
    width: 48px;
    height: 48px;
    z-index: 9999;
    transition: transform 0.15s ease-in-out;
    padding: 10px;
    background: white;
    border-radius: 50%;
    box-shadow: 0 0 15px 8px rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: center;
    align-items: center;
    isolation: isolate;
}

.sur_context_bubble::before {
    content: "";
    position: absolute;
    inset: -2px; /* grosor del borde */
    border-radius: 50%;
    background: conic-gradient(
        from 0deg,
        #f48fb1,
        #f9a825,
        #81c784,
        #4fc3f7,
        #9575cd,
        #f48fb1
    );
    -webkit-mask: radial-gradient(
        farthest-side,
        transparent calc(100% - 3px),
        #000 calc(100% - 2px)
    );
    mask: radial-gradient(
        farthest-side,
        transparent calc(100% - 3px),
        #000 calc(100% - 2px)
    );
    pointer-events: none;
    transition: cubic-bezier(0.54, 0, 0.14, 1) 1s all;
}

.sur_context_bubble:hover::before {
    transform: rotate(190deg);
}

.sur_context_bubble:hover {
    transform: scale(1.1);
    cursor: pointer;
}

.sur_context_bubble.active {
    visibility: visible;
    opacity: 1;
    transform: scale(1);
}

.sur_context_bubble > img {
	width: 100%;	
}

.sur_context_bubble_chat {
    position: fixed;
    bottom: 80px;
    right: 30px;
    width: 650px;
    background: white;
    border-radius: 10px;
    box-shadow: 0 0 15px 8px rgba(0, 0, 0, 0.1);
    padding: 10px;
    z-index: 9999;
    transition: all 0.15s ease-in-out;
    visibility: hidden;
    transform: scale(0.95);
    opacity: 0;
    transform-origin: bottom right;
}

.sur_context_bubble_chat.big {
    width: 950px;
}

.sur_context_bubble_chat.active {
    visibility: visible;
    opacity: 1;
    transform: scale(1);
}

.sc_close_button {
    border: 1px solid #dfdfdf;
    background: white;
    width: max-content;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    padding: 0.5em;
    position: absolute;
    right: 0;
    top: -2.5em;
    cursor: pointer;
    transition: 0.15s ease-in-out all;
    box-shadow: 0 0 10px #00000033;
}

.sc_close_button:hover {
    transform: scale(1.1);
    background: #ffe8e8;
    border-color: #fdcece;
}

.sur_context_bubble_chat .il-avatar {
    height: 100% !important;
    width: 100% !important;
    border-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.sur_context_bubble_chat .il-avatar.il-avatar-letter span.abbreviation {
    position: static !important;
    font-size: 1rem !important;
}

.sur_chat_container .bottom-container {
    padding-bottom: 1rem !important;
}

.sur_chat_container .aichat-container .bottom-container .input-container {
    max-width: 90% !important;
}

.sur_chat_container .disclaimer {
    top: 4rem !important;
}

.sur_chat_container .disclaimer > div {
    max-width: 80% !important;
}

/* Responsive positioning handled in sur-bubble-base.css */

/* Width and responsive handled in sur-bubble-base.css */

/* Responsive positioning handled in sur-bubble-base.css */

/* Common ILIAS avatar styles for both modes */
.sur_chat_container .il-avatar {
    height: 100% !important;
    width: 100% !important;
    border-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.sur_chat_container .il-avatar.il-avatar-letter span.abbreviation {
    position: static !important;
    font-size: 1rem !important;
}

/* Custom Tooltip Styles */
.sur_bubble_tooltip {
    position: absolute;
    right: calc(100% + 12px);
    top: 50%;
    transform: translateY(-50%) translateX(8px);
    background: #3a4c65;
    color: #ffffff;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.25s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    pointer-events: none;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2), 0 2px 6px rgba(0, 0, 0, 0.1);
    z-index: 10001;
    letter-spacing: 0.3px;
}

.sur_bubble_tooltip::after {
    content: "";
    position: absolute;
    right: -6px;
    top: 50%;
    transform: translateY(-50%);
    border: 6px solid transparent;
    border-left-color: #3a4c65;
    border-right: none;
}

.sur_bubble_tooltip.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) translateX(0);
}

.sur_bubble_base:hover {
    z-index: 10002;
}