:root{
    --rm-bg: #27263a;           /* page bg behind the menu (used for shadow contrast) */
    --rm-button: #2c2b43;       /* dark purple button background */
    --rm-button-icon: #ffffff;  /* icon color */
    --rm-button-ring: #f3f5f9;  /* light border ring */
    --rm-tooltip-bg: #ffffff;   /* tooltip bubble bg */
    --rm-tooltip-text: #1f2430; /* tooltip text color */
    --rm-accent: #f05454;       /* accent (optional for focus) */
    --rm-radius: 16px;          /* outer rounding for squares */
    --rm-gap: 14px;             /* vertical gap between buttons */
    --rm-shadow: 0 10px 25px rgba(0,0,0,.22);
  }

  .rightmenu {
    position: fixed;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: var(--rm-gap);
    user-select: none;
  }

  .rm-item {
    position: relative;
    list-style: none;
  }

  .rm-btn {
    width: 64px;
    height: 64px;
    border-radius: var(--rm-radius);
    background: var(--rm-button);
    display: grid;
    place-items: center;
    color: var(--rm-button-icon);
    text-decoration: none;
    border: 6px solid var(--rm-button-ring);
    box-shadow: var(--rm-shadow);
    transition: transform .15s ease, box-shadow .15s ease;
    outline: none;
  }

  .rm-btn:focus-visible {
    box-shadow: 0 0 0 3px var(--rm-accent), var(--rm-shadow);
  }

  .rm-btn:hover {
    transform: translateX(-2px);
  }

  .rm-btn i {
    font-size: 26px;
    line-height: 1;
  }

  /* Tooltip bubble that slides out to the left */
  .rm-tip {
    position: absolute;
    right: 76px; /* button (64) + border (6*2 -> but ring is part of btn) + gap */
    top: 50%;
    transform: translateY(-50%) translateX(10px);
    background: var(--rm-tooltip-bg);
    color: var(--rm-tooltip-text);
    border-radius: 14px;
    padding: 14px 18px 14px 52px; /* leave space for small circle icon */
    box-shadow: var(--rm-shadow);
    white-space: nowrap;
    font: 600 16px/1.1 system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease;
    min-height: 52px;
    display: flex;
    align-items: center;
  }

  /* little circular pin icon overlapping the bubble on the left */
  .rm-tip::before {
    content: "\f3c5"; /* fa-location-dot */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    left: 12px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #0b65ff10;  /* faint circle, tweak as needed */
    color: #0b65ff;
    display: grid;
    place-items: center;
    font-size: 14px;
  }

  /* Tooltip arrow “tail” towards button */
  .rm-tip::after {
    content: "";
    position: absolute;
    right: -8px;
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
    width: 16px;
    height: 16px;
    background: var(--rm-tooltip-bg);
    box-shadow: 2px -2px 6px rgba(0,0,0,.06);
  }

  /* Show tip on hover or when .is-open is set (via JS for click/tap) */
  .rm-item:hover .rm-tip,
  .rm-item.is-open .rm-tip,
  .rm-btn:focus + .rm-tip {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
    pointer-events: auto;
  }

  /* Mobile tweaks: move lower and shrink */
  @media (max-width: 768px) {
    .rightmenu { right: 12px; gap: 10px; }
    .rm-btn { width: 56px; height: 56px; border-radius: 14px; }
    .rm-btn i { font-size: 22px; }
    .rm-tip { right: 68px; font-size: 15px; padding: 12px 16px 12px 46px; min-height: 46px; }
    .rm-tip::before { width: 24px; height: 24px; font-size: 12px; }
  }