.guide-message {
    position: absolute;
    z-index: 9999;
    padding: 10px 14px;
    border-radius: 4px;
    max-width: 260px;
    font-family: Arial, sans-serif;
    font-size: 14px;
    line-height: 1.3;

    /* colours are set from JS via CSS vars */
    --gm-bg: #000000;
    --gm-text: #ffffff;
    background: var(--gm-bg);
    color: var(--gm-text);

    box-shadow: 0 2px 6px rgba(0,0,0,0.35);
}

.guide-message::after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
}

/* pointer on LEFT side of bubble (so bubble is to the RIGHT of target) */
.guide-message.gm-left::after {
    top: 50%;
    left: -10px;
    transform: translateY(-50%);
    border-width: 8px 10px 8px 0;
    border-color: transparent var(--gm-bg) transparent transparent;
}

/* pointer on RIGHT side of bubble (bubble to LEFT of target) */
.guide-message.gm-right::after {
    top: 50%;
    right: -10px;
    transform: translateY(-50%);
    border-width: 8px 0 8px 10px;
    border-color: transparent transparent transparent var(--gm-bg);
}

/* pointer on TOP (bubble below target) */
.guide-message.gm-top::after {
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 10px 8px 0 8px;
    border-color: var(--gm-bg) transparent transparent transparent;
}

/* pointer on BOTTOM (bubble above target) */
.guide-message.gm-bottom::after {
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 0 8px 10px 8px;
    border-color: transparent transparent var(--gm-bg) transparent;
}