:root {
    --mggb-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.08);
    --mggb-chip-text: #ffffff;
    --mggb-chip-fill: linear-gradient(135deg, #1E88E5 0%, #42A5F5 100%);
}

.mggb-inline-portal-root {
    position: fixed;
    inset: 0;
    z-index: 9998;
    pointer-events: none;
}

.mggb-inline-portal-group {
    position: fixed;
    left: 0;
    top: 0;
    pointer-events: auto;
}

.mggb-inline-portal-chip,
.mggb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 999px;
    background: var(--mggb-chip-fill);
    border: 1px solid rgba(25, 118, 210, 0.18);
    box-shadow: var(--mggb-shadow);
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
    text-decoration: none;
    user-select: none;
}

.mggb-inline-portal-chip:hover,
.mggb-inline-portal-chip:focus-visible,
.mggb-btn:hover,
.mggb-btn:focus-visible {
    transform: translateY(-1px);
    filter: brightness(1.02);
    outline: none;
}

.mggb-icon-letter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    color: var(--mggb-chip-text);
    font-weight: 700;
    font-size: 14px;
    line-height: 1;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}


.mggb-highlight-root {
    position: fixed;
    inset: 0;
    z-index: 9997;
    pointer-events: none;
}

.mggb-highlight-box {
    position: fixed;
    left: 0;
    top: 0;
    border-radius: 6px;
    background: rgba(30, 136, 229, 0.14);
    box-shadow: inset 0 0 0 1px rgba(30, 136, 229, 0.22);
    pointer-events: none;
}