/* ============================================================
   Connection/Menu/menu.css
   אחראי: עיצוב תפריט המשתמש
   ============================================================ */

.conn-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 12px;          /* RTL — צמוד לעיגול */
  min-width: 180px;
  z-index: 200;

  background: rgba(6, 14, 30, 0.97);
  border: 1px solid rgba(0, 200, 255, 0.15);
  border-radius: 10px;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(0, 200, 255, 0.04);
  backdrop-filter: blur(16px);

  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;

  /* סגור כברירת מחדל */
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px) scale(0.97);
  transform-origin: top left;
  transition:
    opacity   0.18s ease,
    transform 0.18s ease;
}

.conn-menu.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

/* ---- פריט ---- */
.conn-menu__item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 12px;
  border: none;
  background: transparent;
  border-radius: 7px;
  cursor: pointer;
  text-align: right;
  direction: rtl;
  color: rgba(200, 215, 240, 0.85);
  font-size: 13px;
  font-family: var(--font-display, monospace);
  letter-spacing: 0.02em;
  transition:
    background 0.15s ease,
    color      0.15s ease;
}

.conn-menu__item:hover {
  background: rgba(0, 200, 255, 0.08);
  color: rgba(0, 200, 255, 0.95);
}

/* ---- אייקון ---- */
.conn-menu__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  opacity: 0.7;
}

.conn-menu__item:hover .conn-menu__icon {
  opacity: 1;
}

.conn-menu__icon svg {
  width: 15px;
  height: 15px;
}

/* ---- מפריד (אופציונלי — class על item) ---- */
.conn-menu__item--danger {
  color: rgba(255, 100, 100, 0.75);
}

.conn-menu__item--danger:hover {
  background: rgba(255, 60, 60, 0.08);
  color: rgba(255, 100, 100, 1);
}