/*==========================================================
    1. Base Container & Trigger
==========================================================*/
.srt-container, .srt-container * {
    box-sizing: border-box !important;
}

.srt-container {
    position: relative;
    /* Allow text to wrap completely naturally like a normal link */
    display: inline; 
    cursor: pointer;
    touch-action: manipulation; /* Prevents double-tap zooming on mobile */
}

.srt-trigger a {
    color: inherit;
    text-decoration: none;
    pointer-events: auto;
}

.srt-trigger a:hover {
    color: #0073aa; 
}

/*==========================================================
    2. The Bubble Group & Individual Bubbles
==========================================================*/
.srt-bubble-group {
    display: none;
    opacity: 0;
    
    /* THE FIX: Absolute to the whole page, beating all accordions */
    position: absolute !important;
    z-index: 2147483647 !important; /* Maximum allowed z-index */
    
    flex-direction: column;
    gap: 8px; 

    width: max-content; 
    min-width: 200px;
    max-width: calc(100vw - 30px); /* Keeps within screen bounds */
}

.srt-bubble {
    background-color: #ffffff;
    color: #1a1a1a;
    border-radius: 6px;
    padding: 12px 25px 12px 15px; 
    font-size: 13px;
    line-height: 1.4;
    max-height: 50vh; 
    overflow-y: auto; 
    box-shadow: 0px 8px 30px rgba(0,0,0,0.15), 0 0 1px rgba(0,0,0,0.05); 
    position: relative; 
    width: 100%;
    overflow-wrap: break-word;
    word-break: break-word;
}

.srt-bubble::-webkit-scrollbar {
    width: 6px;
}
.srt-bubble::-webkit-scrollbar-track {
    background: transparent;
}
.srt-bubble::-webkit-scrollbar-thumb {
    background-color: #d1d5db;
    border-radius: 20px;
}

.srt-bubble, .srt-bubble p, .srt-bubble div, .srt-bubble span:not(.srt-close-btn), 
.srt-bubble li, .srt-bubble ul, .srt-bubble ol, .srt-bubble img {
    text-align: left !important;
}

.srt-bubble strong, .srt-bubble b {
    font-weight: 900 !important; 
}

.srt-close-btn {
    position: absolute;
    top: 8px;
    right: 12px;
    font-size: 18px;
    font-weight: bold;
    color: #aaa;
    cursor: pointer;
    line-height: 1;
    transition: color 0.2s;
}

.srt-close-btn:hover {
    color: #dc3232;
}

/*==========================================================
    3. Interaction States & Animation
==========================================================*/
/* Bubbles are now shown via this class added by JavaScript */
.srt-bubble-group.srt-show {
    display: flex;
    pointer-events: auto; 
    animation: srt-fade-in 0.2s ease-in-out forwards;
}

@keyframes srt-fade-in {
    0%   { opacity: 0; }
    100% { opacity: 1; }
}

/*==========================================================
    4. Arrow Base & Positioning
==========================================================*/
.srt-bubble-group::after {
    content: "";
    position: absolute;
    border-width: 6px;
    border-style: solid;
    /* Arrow position is passed dynamically from JS */
    left: var(--arrow-left, 50%);
    transform: translateX(-50%);
}

/* Position: Top */
.srt-bubble-group[data-pos="top"]::after {
    top: 100%;
    border-color: #ffffff transparent transparent transparent;
}

/* Position: Bottom */
.srt-bubble-group[data-pos="bottom"]::after {
    bottom: 100%;
    border-color: transparent transparent #ffffff transparent;
}

/* Desktop Override */
@media (min-width: 768px) {
    .srt-bubble-group {
        max-width: 320px;
    }
}

/*==========================================================
    5. Global vs Local Distinct Styling
==========================================================*/

/* --- GLOBAL TOOLTIPS (Blue Underline, Soft Pearl Bubble) --- */
.srt-container.srt-global {
    border-bottom: 2px dashed #0073aa; 
}
.srt-container.srt-global .srt-trigger a:hover {
    color: #0073aa; 
}
/* Targets the detached global bubbles in the body */
.srt-bubble-group.srt-theme-global .srt-bubble {
    background-color: #fdfdfc; /* Extremely subtle warm pearl off-white */
    color: #1a1a1a;
}
/* Global Arrows */
.srt-bubble-group.srt-theme-global[data-pos="top"]::after { border-top-color: #fdfdfc; }
.srt-bubble-group.srt-theme-global[data-pos="bottom"]::after { border-bottom-color: #fdfdfc; }


/* --- LOCAL TOOLTIPS (Orange Underline, Modern Light Bubble) --- */
.srt-container.srt-local {
    border-bottom: 2px dashed #ea580c; 
}
.srt-container.srt-local .srt-trigger a:hover {
    color: #ea580c; 
}
/* Targets the detached local bubbles in the body */
.srt-bubble-group.srt-theme-local .srt-bubble {
    background-color: #f8fafc; /* Modern, very soft cool-gray/white */
    color: #334155; /* Crisp, highly readable dark slate text */
}
.srt-bubble-group.srt-theme-local .srt-close-btn {
    color: #94a3b8; 
}
.srt-bubble-group.srt-theme-local .srt-close-btn:hover {
    color: #ea580c; 
}
/* Local Arrows */
.srt-bubble-group.srt-theme-local[data-pos="top"]::after { 
    border-color: #f8fafc transparent transparent transparent !important; 
}
.srt-bubble-group.srt-theme-local[data-pos="bottom"]::after { 
    border-color: transparent transparent #f8fafc transparent !important; 
}

/* Prevent messy double-underlines when a trigger is hyperlinked */
.srt-container .srt-trigger a {
    text-decoration: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
}